@flanksource/clicky-ui 0.3.10 → 0.3.12

package/dist/components/DateTimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.cjs","sources":["../../src/components/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCalendar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\nexport type DateTimePickerProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  // `prefix` is a global HTML attribute typed as string; omit it so our\n  // ReactNode adornment prop below is not intersected down to `string & ReactNode`.\n  \"type\" | \"value\" | \"onChange\" | \"prefix\"\n> & {\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n  inputClassName?: string;\n  buttonClassName?: string;\n  openButtonLabel?: string;\n  /** Trailing in-field adornment, rendered left of the calendar button. */\n  suffix?: ReactNode;\n  /** Leading in-field adornment, rendered at the left edge of the input. */\n  prefix?: ReactNode;\n};\n\nexport const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(\n  (\n    {\n      value = \"\",\n      onChange,\n      className,\n      inputClassName,\n      buttonClassName,\n      openButtonLabel = \"Open time picker\",\n      suffix,\n      prefix,\n      ...props\n    },\n    ref,\n  ) => {\n    const visibleRef = useRef<HTMLInputElement | null>(null);\n    const pickerRef = useRef<HTMLInputElement | null>(null);\n\n    function assignRef(node: HTMLInputElement | null) {\n      visibleRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    }\n\n    return (\n      <div data-jsf-control className={cn(\"relative\", className)}>\n        {prefix && <div className=\"absolute inset-y-0 left-1.5 flex items-center\">{prefix}</div>}\n        <input\n          {...props}\n          ref={assignRef}\n          type=\"text\"\n          value={value}\n          className={cn(\n            \"h-8 w-full rounded-md border border-input bg-background px-2 pr-8 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n            prefix && \"pl-8\",\n            inputClassName,\n          )}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        <input\n          ref={pickerRef}\n          type=\"datetime-local\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0\"\n          value={toDateTimeLocalValue(value)}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        {suffix && (\n          <div className=\"absolute inset-y-0 right-7 flex items-center\">{suffix}</div>\n        )}\n        <button\n          type=\"button\"\n          aria-label={openButtonLabel}\n          disabled={props.disabled}\n          className={cn(\n            \"absolute inset-y-0 right-1 inline-flex items-center text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n            buttonClassName,\n          )}\n          onClick={() => {\n            visibleRef.current?.focus();\n            pickerRef.current?.showPicker?.();\n          }}\n        >\n          <Icon icon={UiCalendar} className=\"text-sm\" />\n        </button>\n      </div>\n    );\n  },\n);\n\nDateTimePicker.displayName = \"DateTimePicker\";\n\nfunction toDateTimeLocalValue(value: string) {\n  const trimmed = value.trim();\n  if (!trimmed) return \"\";\n  if (trimmed === \"now\" || trimmed.startsWith(\"now\")) return \"\";\n\n  const withTime = /^\\d{4}-\\d{2}-\\d{2}$/.test(trimmed) ? `${trimmed}T00:00` : trimmed;\n\n  return /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}/.test(withTime) ? withTime.slice(0, 16) : \"\";\n}\n"],"names":["forwardRef","useRef","jsxs","cn","jsx","Icon","UiCalendar"],"mappings":";;;;;;;AAuBO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAaC,MAAAA,OAAgC,IAAI;AACvD,UAAM,YAAYA,MAAAA,OAAgC,IAAI;AAEtD,aAAS,UAAU,MAA+B;AAChD,iBAAW,UAAU;AACrB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,WAAW,KAAK;AACd,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AAEA,WACEC,gCAAC,SAAI,oBAAgB,MAAC,WAAWC,MAAAA,GAAG,YAAY,SAAS,GACtD,UAAA;AAAA,MAAA,UAAUC,2BAAAA,IAAC,OAAA,EAAI,WAAU,iDAAiD,UAAA,QAAO;AAAA,MAClFA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAWD,MAAAA;AAAAA,YACT;AAAA,YACA,UAAU;AAAA,YACV;AAAA,UAAA;AAAA,UAEF,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEpDC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,UAAU;AAAA,UACV,eAAY;AAAA,UACZ,WAAU;AAAA,UACV,OAAO,qBAAqB,KAAK;AAAA,UACjC,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEnD,UACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,gDAAgD,UAAA,QAAO;AAAA,MAExEA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAWD,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,SAAS,MAAM;;AACb,6BAAW,YAAX,mBAAoB;AACpB,kCAAU,YAAV,mBAAmB,eAAnB;AAAA,UACF;AAAA,UAEA,UAAAC,2BAAAA,IAACC,WAAA,EAAK,MAAMC,WAAAA,YAAY,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,SAAS,qBAAqB,OAAe;AAC3C,QAAM,UAAU,MAAM,KAAA;AACtB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,YAAY,SAAS,QAAQ,WAAW,KAAK,EAAG,QAAO;AAE3D,QAAM,WAAW,sBAAsB,KAAK,OAAO,IAAI,GAAG,OAAO,WAAW;AAE5E,SAAO,iCAAiC,KAAK,QAAQ,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AACnF;;"}
+{"version":3,"file":"DateTimePicker.cjs","sources":["../../src/components/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCalendar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\nexport type DateTimePickerProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  // `prefix` is a global HTML attribute typed as string; omit it so our\n  // ReactNode adornment prop below is not intersected down to `string & ReactNode`.\n  \"type\" | \"value\" | \"onChange\" | \"prefix\"\n> & {\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n  inputClassName?: string;\n  buttonClassName?: string;\n  openButtonLabel?: string;\n  /** Trailing in-field adornment, rendered left of the calendar button. */\n  suffix?: ReactNode;\n  /** Leading in-field adornment, rendered at the left edge of the input. */\n  prefix?: ReactNode;\n};\n\nexport const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(\n  (\n    {\n      value = \"\",\n      onChange,\n      className,\n      inputClassName,\n      buttonClassName,\n      openButtonLabel = \"Open time picker\",\n      suffix,\n      prefix,\n      ...props\n    },\n    ref,\n  ) => {\n    const visibleRef = useRef<HTMLInputElement | null>(null);\n    const pickerRef = useRef<HTMLInputElement | null>(null);\n\n    function assignRef(node: HTMLInputElement | null) {\n      visibleRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    }\n\n    return (\n      <div data-jsf-control className={cn(\"relative\", className)}>\n        {prefix && <div className=\"absolute inset-y-0 left-1.5 flex items-center\">{prefix}</div>}\n        <input\n          {...props}\n          ref={assignRef}\n          type=\"text\"\n          value={value}\n          className={cn(\n            \"h-control-h w-full rounded-md border border-input bg-background px-control-px pr-8 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n            prefix && \"pl-8\",\n            inputClassName,\n          )}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        <input\n          ref={pickerRef}\n          type=\"datetime-local\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0\"\n          value={toDateTimeLocalValue(value)}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        {suffix && (\n          <div className=\"absolute inset-y-0 right-7 flex items-center\">{suffix}</div>\n        )}\n        <button\n          type=\"button\"\n          aria-label={openButtonLabel}\n          disabled={props.disabled}\n          className={cn(\n            \"absolute inset-y-0 right-1 inline-flex items-center text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n            buttonClassName,\n          )}\n          onClick={() => {\n            visibleRef.current?.focus();\n            pickerRef.current?.showPicker?.();\n          }}\n        >\n          <Icon icon={UiCalendar} className=\"text-sm\" />\n        </button>\n      </div>\n    );\n  },\n);\n\nDateTimePicker.displayName = \"DateTimePicker\";\n\nfunction toDateTimeLocalValue(value: string) {\n  const trimmed = value.trim();\n  if (!trimmed) return \"\";\n  if (trimmed === \"now\" || trimmed.startsWith(\"now\")) return \"\";\n\n  const withTime = /^\\d{4}-\\d{2}-\\d{2}$/.test(trimmed) ? `${trimmed}T00:00` : trimmed;\n\n  return /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}/.test(withTime) ? withTime.slice(0, 16) : \"\";\n}\n"],"names":["forwardRef","useRef","jsxs","cn","jsx","Icon","UiCalendar"],"mappings":";;;;;;;AAuBO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAaC,MAAAA,OAAgC,IAAI;AACvD,UAAM,YAAYA,MAAAA,OAAgC,IAAI;AAEtD,aAAS,UAAU,MAA+B;AAChD,iBAAW,UAAU;AACrB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,WAAW,KAAK;AACd,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AAEA,WACEC,gCAAC,SAAI,oBAAgB,MAAC,WAAWC,MAAAA,GAAG,YAAY,SAAS,GACtD,UAAA;AAAA,MAAA,UAAUC,2BAAAA,IAAC,OAAA,EAAI,WAAU,iDAAiD,UAAA,QAAO;AAAA,MAClFA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAWD,MAAAA;AAAAA,YACT;AAAA,YACA,UAAU;AAAA,YACV;AAAA,UAAA;AAAA,UAEF,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEpDC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,UAAU;AAAA,UACV,eAAY;AAAA,UACZ,WAAU;AAAA,UACV,OAAO,qBAAqB,KAAK;AAAA,UACjC,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEnD,UACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,gDAAgD,UAAA,QAAO;AAAA,MAExEA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAWD,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,SAAS,MAAM;;AACb,6BAAW,YAAX,mBAAoB;AACpB,kCAAU,YAAV,mBAAmB,eAAnB;AAAA,UACF;AAAA,UAEA,UAAAC,2BAAAA,IAACC,WAAA,EAAK,MAAMC,WAAAA,YAAY,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,SAAS,qBAAqB,OAAe;AAC3C,QAAM,UAAU,MAAM,KAAA;AACtB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,YAAY,SAAS,QAAQ,WAAW,KAAK,EAAG,QAAO;AAE3D,QAAM,WAAW,sBAAsB,KAAK,OAAO,IAAI,GAAG,OAAO,WAAW;AAE5E,SAAO,iCAAiC,KAAK,QAAQ,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AACnF;;"}

package/dist/components/DateTimePicker.js

@@ -35,7 +35,7 @@ const DateTimePicker = forwardRef(
           type: "text",
           value,
           className: cn(
-            "h-8 w-full rounded-md border border-input bg-background px-2 pr-8 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            "h-control-h w-full rounded-md border border-input bg-background px-control-px pr-8 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
             prefix && "pl-8",
             inputClassName
           ),

package/dist/components/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.js","sources":["../../src/components/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCalendar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\nexport type DateTimePickerProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  // `prefix` is a global HTML attribute typed as string; omit it so our\n  // ReactNode adornment prop below is not intersected down to `string & ReactNode`.\n  \"type\" | \"value\" | \"onChange\" | \"prefix\"\n> & {\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n  inputClassName?: string;\n  buttonClassName?: string;\n  openButtonLabel?: string;\n  /** Trailing in-field adornment, rendered left of the calendar button. */\n  suffix?: ReactNode;\n  /** Leading in-field adornment, rendered at the left edge of the input. */\n  prefix?: ReactNode;\n};\n\nexport const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(\n  (\n    {\n      value = \"\",\n      onChange,\n      className,\n      inputClassName,\n      buttonClassName,\n      openButtonLabel = \"Open time picker\",\n      suffix,\n      prefix,\n      ...props\n    },\n    ref,\n  ) => {\n    const visibleRef = useRef<HTMLInputElement | null>(null);\n    const pickerRef = useRef<HTMLInputElement | null>(null);\n\n    function assignRef(node: HTMLInputElement | null) {\n      visibleRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    }\n\n    return (\n      <div data-jsf-control className={cn(\"relative\", className)}>\n        {prefix && <div className=\"absolute inset-y-0 left-1.5 flex items-center\">{prefix}</div>}\n        <input\n          {...props}\n          ref={assignRef}\n          type=\"text\"\n          value={value}\n          className={cn(\n            \"h-8 w-full rounded-md border border-input bg-background px-2 pr-8 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n            prefix && \"pl-8\",\n            inputClassName,\n          )}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        <input\n          ref={pickerRef}\n          type=\"datetime-local\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0\"\n          value={toDateTimeLocalValue(value)}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        {suffix && (\n          <div className=\"absolute inset-y-0 right-7 flex items-center\">{suffix}</div>\n        )}\n        <button\n          type=\"button\"\n          aria-label={openButtonLabel}\n          disabled={props.disabled}\n          className={cn(\n            \"absolute inset-y-0 right-1 inline-flex items-center text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n            buttonClassName,\n          )}\n          onClick={() => {\n            visibleRef.current?.focus();\n            pickerRef.current?.showPicker?.();\n          }}\n        >\n          <Icon icon={UiCalendar} className=\"text-sm\" />\n        </button>\n      </div>\n    );\n  },\n);\n\nDateTimePicker.displayName = \"DateTimePicker\";\n\nfunction toDateTimeLocalValue(value: string) {\n  const trimmed = value.trim();\n  if (!trimmed) return \"\";\n  if (trimmed === \"now\" || trimmed.startsWith(\"now\")) return \"\";\n\n  const withTime = /^\\d{4}-\\d{2}-\\d{2}$/.test(trimmed) ? `${trimmed}T00:00` : trimmed;\n\n  return /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}/.test(withTime) ? withTime.slice(0, 16) : \"\";\n}\n"],"names":[],"mappings":";;;;;AAuBO,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAa,OAAgC,IAAI;AACvD,UAAM,YAAY,OAAgC,IAAI;AAEtD,aAAS,UAAU,MAA+B;AAChD,iBAAW,UAAU;AACrB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,WAAW,KAAK;AACd,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AAEA,WACE,qBAAC,SAAI,oBAAgB,MAAC,WAAW,GAAG,YAAY,SAAS,GACtD,UAAA;AAAA,MAAA,UAAU,oBAAC,OAAA,EAAI,WAAU,iDAAiD,UAAA,QAAO;AAAA,MAClF;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,UAAU;AAAA,YACV;AAAA,UAAA;AAAA,UAEF,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEpD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,UAAU;AAAA,UACV,eAAY;AAAA,UACZ,WAAU;AAAA,UACV,OAAO,qBAAqB,KAAK;AAAA,UACjC,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEnD,UACC,oBAAC,OAAA,EAAI,WAAU,gDAAgD,UAAA,QAAO;AAAA,MAExE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,SAAS,MAAM;;AACb,6BAAW,YAAX,mBAAoB;AACpB,kCAAU,YAAV,mBAAmB,eAAnB;AAAA,UACF;AAAA,UAEA,UAAA,oBAAC,MAAA,EAAK,MAAM,YAAY,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,SAAS,qBAAqB,OAAe;AAC3C,QAAM,UAAU,MAAM,KAAA;AACtB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,YAAY,SAAS,QAAQ,WAAW,KAAK,EAAG,QAAO;AAE3D,QAAM,WAAW,sBAAsB,KAAK,OAAO,IAAI,GAAG,OAAO,WAAW;AAE5E,SAAO,iCAAiC,KAAK,QAAQ,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AACnF;"}
+{"version":3,"file":"DateTimePicker.js","sources":["../../src/components/DateTimePicker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCalendar } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\nexport type DateTimePickerProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  // `prefix` is a global HTML attribute typed as string; omit it so our\n  // ReactNode adornment prop below is not intersected down to `string & ReactNode`.\n  \"type\" | \"value\" | \"onChange\" | \"prefix\"\n> & {\n  value?: string;\n  onChange?: (value: string) => void;\n  className?: string;\n  inputClassName?: string;\n  buttonClassName?: string;\n  openButtonLabel?: string;\n  /** Trailing in-field adornment, rendered left of the calendar button. */\n  suffix?: ReactNode;\n  /** Leading in-field adornment, rendered at the left edge of the input. */\n  prefix?: ReactNode;\n};\n\nexport const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(\n  (\n    {\n      value = \"\",\n      onChange,\n      className,\n      inputClassName,\n      buttonClassName,\n      openButtonLabel = \"Open time picker\",\n      suffix,\n      prefix,\n      ...props\n    },\n    ref,\n  ) => {\n    const visibleRef = useRef<HTMLInputElement | null>(null);\n    const pickerRef = useRef<HTMLInputElement | null>(null);\n\n    function assignRef(node: HTMLInputElement | null) {\n      visibleRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    }\n\n    return (\n      <div data-jsf-control className={cn(\"relative\", className)}>\n        {prefix && <div className=\"absolute inset-y-0 left-1.5 flex items-center\">{prefix}</div>}\n        <input\n          {...props}\n          ref={assignRef}\n          type=\"text\"\n          value={value}\n          className={cn(\n            \"h-control-h w-full rounded-md border border-input bg-background px-control-px pr-8 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n            prefix && \"pl-8\",\n            inputClassName,\n          )}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        <input\n          ref={pickerRef}\n          type=\"datetime-local\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0\"\n          value={toDateTimeLocalValue(value)}\n          onChange={(event) => onChange?.(event.target.value)}\n        />\n        {suffix && (\n          <div className=\"absolute inset-y-0 right-7 flex items-center\">{suffix}</div>\n        )}\n        <button\n          type=\"button\"\n          aria-label={openButtonLabel}\n          disabled={props.disabled}\n          className={cn(\n            \"absolute inset-y-0 right-1 inline-flex items-center text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n            buttonClassName,\n          )}\n          onClick={() => {\n            visibleRef.current?.focus();\n            pickerRef.current?.showPicker?.();\n          }}\n        >\n          <Icon icon={UiCalendar} className=\"text-sm\" />\n        </button>\n      </div>\n    );\n  },\n);\n\nDateTimePicker.displayName = \"DateTimePicker\";\n\nfunction toDateTimeLocalValue(value: string) {\n  const trimmed = value.trim();\n  if (!trimmed) return \"\";\n  if (trimmed === \"now\" || trimmed.startsWith(\"now\")) return \"\";\n\n  const withTime = /^\\d{4}-\\d{2}-\\d{2}$/.test(trimmed) ? `${trimmed}T00:00` : trimmed;\n\n  return /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}/.test(withTime) ? withTime.slice(0, 16) : \"\";\n}\n"],"names":[],"mappings":";;;;;AAuBO,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAa,OAAgC,IAAI;AACvD,UAAM,YAAY,OAAgC,IAAI;AAEtD,aAAS,UAAU,MAA+B;AAChD,iBAAW,UAAU;AACrB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,WAAW,KAAK;AACd,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AAEA,WACE,qBAAC,SAAI,oBAAgB,MAAC,WAAW,GAAG,YAAY,SAAS,GACtD,UAAA;AAAA,MAAA,UAAU,oBAAC,OAAA,EAAI,WAAU,iDAAiD,UAAA,QAAO;AAAA,MAClF;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,UAAU;AAAA,YACV;AAAA,UAAA;AAAA,UAEF,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEpD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,UAAU;AAAA,UACV,eAAY;AAAA,UACZ,WAAU;AAAA,UACV,OAAO,qBAAqB,KAAK;AAAA,UACjC,UAAU,CAAC,UAAU,qCAAW,MAAM,OAAO;AAAA,QAAK;AAAA,MAAA;AAAA,MAEnD,UACC,oBAAC,OAAA,EAAI,WAAU,gDAAgD,UAAA,QAAO;AAAA,MAExE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,SAAS,MAAM;;AACb,6BAAW,YAAX,mBAAoB;AACpB,kCAAU,YAAV,mBAAmB,eAAnB;AAAA,UACF;AAAA,UAEA,UAAA,oBAAC,MAAA,EAAK,MAAM,YAAY,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9C,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,SAAS,qBAAqB,OAAe;AAC3C,QAAM,UAAU,MAAM,KAAA;AACtB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,YAAY,SAAS,QAAQ,WAAW,KAAK,EAAG,QAAO;AAE3D,QAAM,WAAW,sBAAsB,KAAK,OAAO,IAAI,GAAG,OAAO,WAAW;AAE5E,SAAO,iCAAiC,KAAK,QAAQ,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI;AACnF;"}