{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "UI Field",
  "description": "A static layout family for composing labeled form controls, modeled on shadcn's Field: FieldGroup ▸ Field ▸ FieldLabel / FieldControl / FieldDescription. Reads no frame and holds no state — colors come from the resolved theme. FieldControl is a relative fixed-height slot for the absolute remocn-ui controls (Input, Button).",
  "dependencies": ["remotion"],
  "registryDependencies": ["@remocn/remocn-ui"],
  "files": [
    {
      "path": "registry/remocn-ui/field/index.tsx",
      "content": "\"use client\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nexport interface FieldGroupProps {\n  children: ReactNode;\n  gap?: number;\n  style?: CSSProperties;\n}\n\nexport function FieldGroup({ children, gap = 16, style }: FieldGroupProps) {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap, ...style }}>\n      {children}\n    </div>\n  );\n}\n\nexport interface FieldProps {\n  children: ReactNode;\n  gap?: number;\n  style?: CSSProperties;\n}\n\nexport function Field({ children, gap = 6, style }: FieldProps) {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap, ...style }}>\n      {children}\n    </div>\n  );\n}\n\nexport interface FieldLabelProps {\n  children: ReactNode;\n  theme?: Partial<RemocnTheme>;\n  style?: CSSProperties;\n}\n\nexport function FieldLabel({ children, theme, style }: FieldLabelProps) {\n  const t = useRemocnTheme(theme, \"light\");\n  return (\n    <div\n      style={{\n        fontSize: 13,\n        lineHeight: \"18px\",\n        fontWeight: 500,\n        letterSpacing: \"-0.01em\",\n        color: t.foreground,\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface FieldDescriptionProps {\n  children: ReactNode;\n  align?: \"start\" | \"center\";\n  theme?: Partial<RemocnTheme>;\n  style?: CSSProperties;\n}\n\nexport function FieldDescription({\n  children,\n  align = \"start\",\n  theme,\n  style,\n}: FieldDescriptionProps) {\n  const t = useRemocnTheme(theme, \"light\");\n  return (\n    <div\n      style={{\n        fontSize: 12,\n        lineHeight: \"16px\",\n        color: t.mutedForeground,\n        textAlign: align === \"center\" ? \"center\" : \"left\",\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface FieldControlProps {\n  children: ReactNode;\n  height?: number;\n  style?: CSSProperties;\n}\n\nexport function FieldControl({\n  children,\n  height = 40,\n  style,\n}: FieldControlProps) {\n  return (\n    <div style={{ position: \"relative\", height, ...style }}>{children}</div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/field.tsx"
    }
  ],
  "type": "registry:component"
}