{"name":"field","type":"registry:ui","files":[{"path":"field.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Field as FieldPrimitive } from \"@base-ui-components/react/field\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Field({ className, ...props }: FieldPrimitive.Root.Props) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      className={cn(\n        \"flex w-full flex-col gap-[var(--hui-space-2)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\"inline-flex items-center gap-2 text-sm/4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldControl({\n  className,\n  size = \"default\",\n  ...props\n}: Omit<FieldPrimitive.Control.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number\n}) {\n  if (props.render) {\n    return (\n      <FieldPrimitive.Control\n        data-slot=\"field-control\"\n        className={className}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <span\n      data-slot=\"field-control\"\n      className={cn(\n        \"flex w-full flex-col\",\n        className\n      )}\n    >\n      <FieldPrimitive.Control\n        data-slot=\"field-control\"\n        className={cn(\n          \"box-border h-[var(--hui-space-9)] w-full min-w-0 rounded-[var(--hui-radius-2)] border-[0.5px] border-[var(--hui-color-border-base-tertiary)] bg-[var(--hui-color-background-base-primary)] px-[var(--hui-space-3)] text-[var(--hui-color-foreground-base-primary)] outline-none [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] [transition:var(--hui-transition-interactive)] placeholder:text-[var(--hui-color-foreground-base-tertiary)] focus:border-[var(--hui-color-border-accent-emphasis)] data-disabled:cursor-not-allowed data-disabled:opacity-40 data-invalid:border-[var(--hui-color-border-danger-emphasis)] data-invalid:focus:border-[var(--hui-color-border-danger-emphasis-hover)]\",\n          size === \"sm\" && \"h-[var(--hui-space-8)]\",\n          size === \"lg\" && \"h-[var(--hui-space-10)]\",\n          props.type === \"search\" &&\n            \"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\",\n          props.type === \"file\" &&\n            \"text-muted-foreground file:me-3 file:bg-transparent file:text-sm file:font-medium file:text-foreground\"\n        )}\n        {...props}\n      />\n    </span>\n  )\n}\n\nfunction FieldDescription({\n  className,\n  ...props\n}: FieldPrimitive.Description.Props) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        \"m-0 text-[var(--hui-color-foreground-base-secondary)] [font-size:var(--hui-font-size-mini)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-mini)] [line-height:var(--hui-line-height-mini)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldError({ className, ...props }: FieldPrimitive.Error.Props) {\n  return (\n    <FieldPrimitive.Error\n      data-slot=\"field-error\"\n      className={cn(\n        \"m-0 text-[var(--hui-color-foreground-danger-primary)] [font-size:var(--hui-font-size-mini)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-mini)] [line-height:var(--hui-line-height-mini)] starting:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldHelperSlot({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-helper-slot\"\n      className={cn(\n        \"grid [&>*]:[grid-area:1/1] [&>[data-slot=field-description][data-invalid]]:invisible [&>[data-slot=field-description][data-invalid]]:opacity-0 motion-safe:[&>*]:[transition:opacity_var(--hui-duration-fast)_var(--hui-ease-out),visibility_var(--hui-duration-fast)_var(--hui-ease-out)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst FieldValidity = FieldPrimitive.Validity\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\"flex flex-col gap-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      className={cn(\"relative flex items-center gap-2 py-2\", className)}\n      {...props}\n    >\n      <div className=\"h-px flex-1 bg-border\" />\n      {children && (\n        <span className=\"text-xs text-muted-foreground\">{children}</span>\n      )}\n      <div className=\"h-px flex-1 bg-border\" />\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldHelperSlot,\n  FieldValidity,\n  FieldGroup,\n  FieldSeparator,\n}\n","target":"components/ui/field.tsx"}],"dependencies":["@base-ui-components/react"]}