{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "field-glass", "title": "Glass field", "description": "Styled field: the Glass set. 5 decorative field variations (FrostField, TintField, SmokeField, CrystalField, DepthField) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.", "dependencies": [], "registryDependencies": [ "@ai2/tokens", "@ai2/glass" ], "files": [ { "path": "registry/ai2/styled/field-glass.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { glassDepth } from \"@/registry/ai2/ui/glass\"\n\n/* Glass field family: 5 frosted-glass form fields. The layout is the same in every\n variant (label + a real input + an optional description); the difference is on\n the SURFACE. The glass surface now comes from the glassDepth scale in @ai2/glass\n (NO hand-made backdrop-blur, AGENTS.md 4.5): the step gives the surface (blur +\n translucency + the ai2 inset signature) and the variant gives the character\n (tint, border, gradient). The glass sits on the SHELL; the inner control keeps\n its own opaque-ish surface, so text stays readable over the glass and the focus\n ring does not collide with the signature. The ids are produced with useId, the\n description is bound to the control with aria-describedby, and invalidity falls\n back to the standard danger appearance ON THE CONTROL via aria-invalid. Color\n comes ONLY from tokens, alpha only via color-mix. Static - no animation. Renders\n with no props too.\n\n TRAP: glassDepth carries a [box-shadow:...]; because cn() is tailwind-merge, a\n second shadow-* added to the shell silently deletes the signature. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst gap: Record = {\n sm: \"gap-1\",\n md: \"gap-1.5\",\n lg: \"gap-2\",\n xl: \"gap-2.5\",\n}\n\nconst labelText: Record = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-sm\",\n xl: \"text-base\",\n}\n\nconst helpText: Record = {\n sm: \"text-xs\",\n md: \"text-xs\",\n lg: \"text-sm\",\n xl: \"text-sm\",\n}\n\nconst controlHeight: Record = {\n sm: \"h-8 text-sm\",\n md: \"h-9 text-sm\",\n lg: \"h-10 text-base\",\n xl: \"h-12 text-base\",\n}\n\nconst shellPad: Record = {\n sm: \"p-2.5\",\n md: \"p-3\",\n lg: \"p-3.5\",\n xl: \"p-4\",\n}\n\n/* Kontrol taban stili. Cam yuzeyde de gecersiz gorunum TEK standart. */\nconst controlBase =\n \"w-full rounded-md border bg-transparent px-3 py-1 text-foreground outline-none transition-colors placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40\"\n\nconst DEFAULT_LABEL = \"Label\"\nconst DEFAULT_DESCRIPTION = \"Short help text for this field.\"\nconst DEFAULT_PLACEHOLDER = \"Value\"\n\ninterface FieldProps {\n className?: string\n size?: StyledSize\n label?: React.ReactNode\n description?: React.ReactNode\n error?: React.ReactNode\n placeholder?: string\n}\n\n/* Shared shell: a glass panel plus label plus control plus messages. shellClassName carries each variant's blur/fill technique, controlClassName the inner control surface. */\nfunction GlassShell({\n className,\n size = \"md\",\n label = DEFAULT_LABEL,\n description = DEFAULT_DESCRIPTION,\n error,\n placeholder = DEFAULT_PLACEHOLDER,\n shellClassName,\n controlClassName,\n}: FieldProps & { shellClassName: string; controlClassName: string }) {\n const base = React.useId()\n const controlId = `${base}-control`\n const invalid = error != null && error !== false\n const descId = description != null && description !== false ? `${base}-desc` : undefined\n const errorId = invalid ? `${base}-error` : undefined\n const describedBy = [descId, errorId].filter(Boolean).join(\" \") || undefined\n\n return (\n \n \n {label}\n \n \n {description != null && description !== false ? (\n

\n {description}\n

\n ) : null}\n {invalid ? (\n

\n {error}\n

\n ) : null}\n \n )\n}\n\n/* Frost: classic frosted glass. sm (4px) -> the shallowest step in the family; it carries a light foreground fill as its character. */\nexport function FrostField(props: FieldProps) {\n return (\n \n )\n}\n\n/* Tint: info-toned glass - colored but readable. md (8px) -> the default step; the\n hue already carries the character. */\nexport function TintField(props: FieldProps) {\n return (\n \n )\n}\n\n/* Smoke: dark, smoky glass. lg (16px) -> the \"what is behind becomes texture\" feel the old blur-xl (24px) was after; we leave xl to Depth and stop at lg so the five separate clearly. Character: a strong foreground scrim. */\nexport function SmokeField(props: FieldProps) {\n return (\n \n )\n}\n\n/* Crystal: clear glass with a thin bright edge. md (8px) -> the same step as Tint with a different character: a colourless, very low background fill plus a bright border, so it reads as distinct from both Tint and Frost. The hand-written bright-edge inset shadow was REMOVED: the glassDepth signature's top inset highlight is exactly for that job and a second [box-shadow:] would erase the signature. */\nexport function CrystalField(props: FieldProps) {\n return (\n \n )\n}\n\n/* Depth: layered glass - a gradient fill where the area lifts off the surface. xl (24px) -> the \"detached layer\" feel the old shadow-lg plus blur-lg was after now comes from the maximum diffusion step; shadow-lg was REMOVED because it would erase the signature. Because the gradient carries the character, the step's bg-background/80 fill is deliberately zeroed (otherwise the gradient's alpha is drowned) - the gradient owns the translucency. */\nexport function DepthField(props: FieldProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/field-glass.tsx" } ], "categories": [ "styled", "field" ], "type": "registry:component" }