{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label",
  "type": "registry:ui",
  "title": "Label",
  "description": "A label component that can be used to describe form elements.",
  "registryDependencies": [
    "@tra-kit/tooltip"
  ],
  "files": [
    {
      "path": "registry/tra-kit/components/label.tsx",
      "content": "import { cva } from 'class-variance-authority';\r\nimport * as React from 'react';\r\nimport { InfoIcon } from '@phosphor-icons/react';\r\nimport type { VariantProps } from 'class-variance-authority';\r\nimport { cn } from '@/lib/utils';\r\nimport Tooltip from '@/components/ui/tooltip';\r\n\r\nexport const labelVariants = cva(\r\n  `font-medium leading-none\r\n  peer-disabled:cursor-not-allowed peer-disabled:opacity-70`,\r\n  {\r\n    variants: {\r\n      variant: {\r\n        filled: '',\r\n        outlined: '',\r\n        underlined: '',\r\n        filledUnderlined: '',\r\n      },\r\n      size: {\r\n        sm: 'text-sm',\r\n        default: 'text-base',\r\n        lg: 'text-lg',\r\n      },\r\n      outlineFocused: {\r\n        true: '',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: 'default',\r\n    },\r\n    compoundVariants: [\r\n      {\r\n        outlineFocused: true,\r\n        variant: 'outlined',\r\n        className: 'z-20 -translate-y-7',\r\n      },\r\n    ],\r\n  },\r\n);\r\n\r\nconst tooltipVariants = cva('', {\r\n  variants: {\r\n    size: {\r\n      default: 'size-[18px]',\r\n      sm: 'size-4',\r\n      lg: 'size-5',\r\n    },\r\n    variant: {\r\n      filled: '',\r\n      outlined: '',\r\n      underlined: '',\r\n      filledUnderlined: '',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: 'default',\r\n  },\r\n});\r\n\r\ninterface ILabel\r\n  extends\r\n    Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'size'>,\r\n    VariantProps<typeof labelVariants> {\r\n  alwaysTop?: boolean;\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n  disabled?: boolean;\r\n  htmlFor?: string;\r\n  id?: string;\r\n  outlineFocused?: boolean;\r\n  showRequiredIcon?: boolean;\r\n  size?: 'sm' | 'default' | 'lg' | undefined;\r\n  tooltip?: string | Array<string> | null;\r\n  variant?: 'filled' | 'outlined' | 'underlined' | 'filledUnderlined';\r\n}\r\n\r\nconst Label = React.forwardRef<HTMLLabelElement, ILabel>(\r\n  (\r\n    {\r\n      className = '',\r\n      children,\r\n      disabled,\r\n      htmlFor,\r\n      id,\r\n      outlineFocused,\r\n      showRequiredIcon,\r\n      size,\r\n      tooltip,\r\n      variant,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => (\r\n    <label\r\n      ref={ref}\r\n      className={cn(labelVariants({ size, variant, outlineFocused }), className)}\r\n      htmlFor={htmlFor}\r\n      id={id}\r\n      data-disabled={disabled || undefined}\r\n      {...props}\r\n    >\r\n      <span className=\"flex items-center gap-1\">\r\n        <span\r\n          className={`${showRequiredIcon ? 'after:text-error after:content-required after:ml-[3px]' : ''} ${disabled ? 'cursor-not-allowed text-neutral-200 dark:text-neutral-800' : ''}`}\r\n        >\r\n          {children}\r\n        </span>\r\n        {tooltip && (\r\n          <Tooltip\r\n            position=\"bottom\"\r\n            content={tooltip}\r\n          >\r\n            <InfoIcon className={cn(tooltipVariants({ size, variant }))} />\r\n          </Tooltip>\r\n        )}\r\n      </span>\r\n    </label>\r\n  ),\r\n);\r\n\r\nexport default Label;\r\n",
      "type": "registry:ui"
    }
  ]
}