{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "masai-date-selection",
  "title": "Masai Date Selection",
  "description": "Native date field with optional label, rounded shell, and calendar affordance (single variation; extensible later).",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/components/masai-date-selection.tsx",
      "content": "\"use client\";\n\nimport { Calendar } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst fieldShellClassName =\n  \"relative flex min-h-[40px] min-w-0 w-full items-center rounded-[8px] border border-gray-200 bg-white px-3 text-gray-900 outline-none transition-[color,border-color,box-shadow] focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-400 focus-within:ring-offset-2 focus-within:ring-offset-background\";\n\nfunction calendarIndicatorClearClasses() {\n  return cn(\n    \"[&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-3 [&::-webkit-calendar-picker-indicator]:top-1/2 [&::-webkit-calendar-picker-indicator]:size-5 [&::-webkit-calendar-picker-indicator]:-translate-y-1/2 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0\",\n  );\n}\n\nexport type MasaiDateSelectionProps = Omit<\n  React.ComponentProps<\"input\">,\n  \"type\" | \"className\"\n> & {\n  /** Optional label above the control (e.g. “Start Date”). */\n  label?: string;\n  /** Wrapper layout classes (column: label + field). */\n  className?: string;\n  shellClassName?: string;\n  inputClassName?: string;\n};\n\n/**\n * MasaiDateSelection — native `type=\"date\"` in a Masai-styled shell with optional label\n * and calendar icon. Value is ISO `yyyy-mm-dd` in HTML/React.\n *\n * Single variation for now; add sizes/variants later as needed.\n */\nexport function MasaiDateSelection({\n  label,\n  id: idProp,\n  className,\n  shellClassName,\n  inputClassName,\n  disabled,\n  placeholder = \"dd/mm/yyyy\",\n  ...inputProps\n}: MasaiDateSelectionProps) {\n  const generatedId = React.useId();\n  const controlId = idProp ?? generatedId;\n\n  return (\n    <div className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}>\n      {label ? (\n        <label htmlFor={controlId} className=\"type-b2-regular text-gray-600\">\n          {label}\n        </label>\n      ) : null}\n      <div\n        className={cn(\n          fieldShellClassName,\n          disabled && \"pointer-events-none opacity-50\",\n          shellClassName,\n        )}\n      >\n        <input\n          {...inputProps}\n          id={controlId}\n          type=\"date\"\n          disabled={disabled}\n          placeholder={placeholder}\n          data-slot=\"masai-date-selection-control\"\n          className={cn(\n            calendarIndicatorClearClasses(),\n            \"relative z-0 min-h-0 min-w-0 flex-1 bg-transparent py-2 pr-10 text-[15px] text-gray-900 outline-none [-webkit-appearance:none] [&::-webkit-datetime-edit]:py-0.5 [&::-webkit-datetime-edit-fields-wrapper]:p-0\",\n            \"caret-primary-600 focus-visible:ring-0 disabled:cursor-not-allowed\",\n            \"[color-scheme:light]\",\n            inputClassName,\n          )}\n        />\n        <span\n          className=\"pointer-events-none absolute right-3 top-1/2 z-10 inline-flex -translate-y-1/2 text-gray-800\"\n          aria-hidden\n        >\n          <Calendar className=\"size-[18px]\" strokeWidth={2} />\n        </span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}