{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-time-picker",
  "type": "registry:ui",
  "title": "Date Time Picker",
  "description": "Native <input type=\"date|time|datetime-local|month|week\"> family styled like Input, with min/max/step constraints and normalized machine-readable values. The browser supplies the calendar/clock picker, segment editing, locale-aware display and constraint validation — no JS calendar library. Ships in five flavours.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/date-time-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/date-time-picker.tsx",
      "content": "/** @jsxImportSource hono/jsx */\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Date Time Picker — shadcn-htmx, htmx v4 + Tailwind v4.\n//\n// A family of native temporal fields. The control IS a real\n// <input type=\"date|time|datetime-local|month|week\"> — there is no JS calendar\n// library and no userland popup. The browser ships the picker UI, the keyboard\n// editing of each segment, locale-aware display, and constraint validation; we\n// only restyle to match the rest of the form controls.\n//\n// Per MDN every variant normalises its submitted value to a fixed,\n// machine-readable, locale-independent format regardless of how it is shown:\n//   - date            → \"yyyy-mm-dd\"            step is days  (default 1)\n//   - time            → \"HH:mm\" / \"HH:mm:ss\"    step is seconds (default 60);\n//                        min/max have a *periodic domain* (may cross midnight)\n//   - datetime-local  → \"yyyy-mm-ddTHH:mm\"      (a local date + time, no zone)\n//   - month           → \"YYYY-MM\"\n//   - week            → \"yyyy-Www\"              (ISO 8601 week number)\n//\n// Sources read for this component:\n//   repos/mdn/files/en-us/web/html/reference/elements/input/date/index.md\n//   repos/mdn/files/en-us/web/html/reference/elements/input/time/index.md\n//   repos/mdn/files/en-us/web/html/reference/elements/input/datetime-local/index.md\n//   repos/mdn/files/en-us/web/html/reference/elements/input/month/index.md\n//   repos/mdn/files/en-us/web/html/reference/elements/input/week/index.md\n//   htmx attrs verified against repos/htmx/www/reference.md\n// Style analogue: registry/ui/input.tsx (same base + tokens, kept in sync).\n\nexport type DateTimeType = \"date\" | \"time\" | \"datetime-local\" | \"month\" | \"week\"\n\n// Shared <Input> base — kept byte-for-byte in sync with registry/ui/input.tsx\n// so a temporal field looks identical to every other control. We append rules\n// to tame the engine-specific picker affordances:\n//   - the calendar/clock indicator inherits the foreground colour and shows a\n//     pointer cursor (it is the only chrome the browser exposes to CSS);\n//   - the inner spin/edit fields drop their padding so the value sits flush.\nconst base =\n  \"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none \" +\n  \"selection:bg-primary selection:text-primary-foreground \" +\n  \"placeholder:text-muted-foreground \" +\n  \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 \" +\n  \"md:text-sm dark:bg-input/30 \" +\n  \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 \" +\n  \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 \" +\n  // htmx-request: dim while a request triggered by this field is in flight.\n  \"[&.htmx-request]:opacity-70 \" +\n  // Style the native calendar/clock picker indicator (Chromium only exposes\n  // this pseudo-element). Tint it to the foreground + show it is clickable.\n  \"[&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert \" +\n  \"[&::-webkit-datetime-edit]:px-0 [&::-webkit-datetime-edit-fields-wrapper]:px-0\"\n\nexport function dateTimePickerClasses(opts?: { class?: ClassValue }): string {\n  return cn(base, opts?.class)\n}\n\ntype DateTimePickerProps = {\n  // Which native temporal control to render. Drives the picker UI, the value\n  // format and the meaning of min/max/step.\n  type?: DateTimeType\n\n  id?: string\n  name?: string\n  // Initial value, in the variant's normalised format (e.g. \"2026-06-02\").\n  value?: string\n  required?: boolean\n  disabled?: boolean\n  readonly?: boolean\n  autofocus?: boolean\n  form?: string\n  // Id of a <datalist> of suggested values.\n  list?: string\n\n  // Temporal constraints, enforced natively by the browser. Each must be a\n  // string in the same normalised format as the value (e.g. min=\"09:00\").\n  min?: string\n  max?: string\n  // Granularity. date: days (default 1); time/datetime-local: seconds\n  // (default 60 → minutes, \"1\" → seconds); month: months; week: weeks.\n  // \"any\" removes stepping.\n  step?: number | string\n\n  // ARIA / labelling. A native input already exposes its value to AT; pair it\n  // with a <label for> or supply an accessible name here.\n  ariaLabel?: string\n  ariaLabelledby?: string\n  ariaDescribedby?: string\n  ariaInvalid?: boolean | \"grammar\" | \"spelling\"\n  ariaRequired?: boolean\n\n  class?: ClassValue\n\n  // htmx v4 passthrough — fires on the input's native change event by default\n  // (the picker dispatches it on selection). Use hx-trigger to override.\n  // See repos/htmx/www/reference.md.\n  [key: `hx-${string}`]: any\n  [key: `data-${string}`]: any\n  [key: `aria-${string}`]: any\n}\n\nexport function DateTimePicker(props: DateTimePickerProps) {\n  const {\n    type = \"date\",\n    class: className,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaInvalid,\n    ariaRequired,\n    ...rest\n  } = props\n\n  return (\n    <input\n      type={type}\n      class={dateTimePickerClasses({ class: className })}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n      aria-invalid={ariaInvalid === undefined ? undefined : String(ariaInvalid)}\n      aria-required={ariaRequired === undefined ? undefined : String(ariaRequired)}\n      data-slot=\"date-time-picker\"\n      {...rest}\n    />\n  )\n}\n"
    },
    {
      "path": "registry/jinja2/date-time-picker.html",
      "type": "registry:file",
      "target": "templates/components/date-time-picker.html",
      "content": "{# Date Time Picker macro — shadcn-htmx, htmx v4 + Tailwind v4.\n   Mirrors registry/ui/date-time-picker.tsx for Python/Flask/FastAPI/Django/Jinja2.\n\n   The control is a native <input type=\"date|time|datetime-local|month|week\">.\n   The browser ships the picker UI, segment editing, locale-aware display and\n   constraint validation; the submitted value is always normalised\n   (date → yyyy-mm-dd, time → HH:mm[:ss], month → YYYY-MM, week → yyyy-Www).\n   No JS — this is a zero-script component.\n\n   Usage:\n       {% from \"components/date-time-picker.html\" import date_time_picker %}\n       {{ date_time_picker(name=\"bday\", type=\"date\", min=\"1900-01-01\") }}\n       {{ date_time_picker(name=\"slot\", type=\"time\", min=\"09:00\", max=\"18:00\", step=900) }}\n\n   All hx-* attributes pass through via **attrs (underscores become dashes).\n   See repos/mdn/files/en-us/web/html/reference/elements/input/ for native\n   attribute semantics. #}\n\n{% macro date_time_picker(\n    type=\"date\",\n    id=none,\n    name=none,\n    value=none,\n    required=false,\n    disabled=false,\n    readonly=false,\n    autofocus=false,\n    form=none,\n    list=none,\n    min=none,\n    max=none,\n    step=none,\n    aria_label=none,\n    aria_labelledby=none,\n    aria_describedby=none,\n    aria_invalid=none,\n    aria_required=none,\n    extra_class=\"\",\n    **attrs\n) %}\n{%- set base -%}\nflex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert [&::-webkit-datetime-edit]:px-0 [&::-webkit-datetime-edit-fields-wrapper]:px-0\n{%- endset -%}\n<input type=\"{{ type }}\"\n       class=\"{{ base }} {{ extra_class }}\"\n       {%- if id %} id=\"{{ id }}\"{% endif %}\n       {%- if name %} name=\"{{ name }}\"{% endif %}\n       {%- if value is not none %} value=\"{{ value }}\"{% endif %}\n       {%- if required %} required{% endif %}\n       {%- if disabled %} disabled{% endif %}\n       {%- if readonly %} readonly{% endif %}\n       {%- if autofocus %} autofocus{% endif %}\n       {%- if form %} form=\"{{ form }}\"{% endif %}\n       {%- if list %} list=\"{{ list }}\"{% endif %}\n       {%- if min is not none %} min=\"{{ min }}\"{% endif %}\n       {%- if max is not none %} max=\"{{ max }}\"{% endif %}\n       {%- if step is not none %} step=\"{{ step }}\"{% endif %}\n       {%- if aria_label %} aria-label=\"{{ aria_label }}\"{% endif %}\n       {%- if aria_labelledby %} aria-labelledby=\"{{ aria_labelledby }}\"{% endif %}\n       {%- if aria_describedby %} aria-describedby=\"{{ aria_describedby }}\"{% endif %}\n       {%- if aria_invalid is not none %} aria-invalid=\"{{ aria_invalid|string|lower }}\"{% endif %}\n       {%- if aria_required is not none %} aria-required=\"{{ aria_required|string|lower }}\"{% endif %}\n       data-slot=\"date-time-picker\"\n       {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}\n>\n{% endmacro %}\n"
    },
    {
      "path": "registry/go-templates/date-time-picker.tmpl",
      "type": "registry:file",
      "target": "components/date-time-picker.tmpl",
      "content": "{{/*\n  Date Time Picker template — shadcn-htmx, htmx v4 + Tailwind v4.\n  Mirrors registry/ui/date-time-picker.tsx for Go projects using html/template.\n\n  The control is a native <input type=\"date|time|datetime-local|month|week\">.\n  The browser ships the picker UI, segment editing, locale-aware display and\n  constraint validation; the submitted value is always normalised\n  (date → yyyy-mm-dd, time → HH:mm[:ss], month → YYYY-MM, week → yyyy-Www).\n  No JS — this is a zero-script component.\n\n  Args (via dict):\n      Type    string  // date | time | datetime-local | month | week\n      ID, Name, Value string\n      Required, Disabled, Readonly, Autofocus bool\n      Form, List      string\n      Min, Max, Step  string  // temporal constraints, in the value's format\n      AriaLabel, AriaLabelledby, AriaDescribedby string\n      AriaInvalid, AriaRequired string  // \"true\" | \"false\"\n      Attrs   map[string]string // hx-*, data-*, …\n\n      {{template \"date-time-picker\" (dict \"Name\" \"bday\" \"Type\" \"date\" \"Min\" \"1900-01-01\")}}\n\n  See repos/mdn/files/en-us/web/html/reference/elements/input/ for native\n  attribute semantics.\n*/}}\n\n{{define \"date-time-picker\"}}\n{{- $type := or .Type \"date\" -}}\n{{- $base := \"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert [&::-webkit-datetime-edit]:px-0 [&::-webkit-datetime-edit-fields-wrapper]:px-0\" -}}\n<input type=\"{{$type}}\"\n       class=\"{{$base}}\"\n       {{- if .ID}} id=\"{{.ID}}\"{{end}}\n       {{- if .Name}} name=\"{{.Name}}\"{{end}}\n       {{- if .Value}} value=\"{{.Value}}\"{{end}}\n       {{- if .Required}} required{{end}}\n       {{- if .Disabled}} disabled{{end}}\n       {{- if .Readonly}} readonly{{end}}\n       {{- if .Autofocus}} autofocus{{end}}\n       {{- if .Form}} form=\"{{.Form}}\"{{end}}\n       {{- if .List}} list=\"{{.List}}\"{{end}}\n       {{- if .Min}} min=\"{{.Min}}\"{{end}}\n       {{- if .Max}} max=\"{{.Max}}\"{{end}}\n       {{- if .Step}} step=\"{{.Step}}\"{{end}}\n       {{- if .AriaLabel}} aria-label=\"{{.AriaLabel}}\"{{end}}\n       {{- if .AriaLabelledby}} aria-labelledby=\"{{.AriaLabelledby}}\"{{end}}\n       {{- if .AriaDescribedby}} aria-describedby=\"{{.AriaDescribedby}}\"{{end}}\n       {{- if .AriaInvalid}} aria-invalid=\"{{.AriaInvalid}}\"{{end}}\n       {{- if .AriaRequired}} aria-required=\"{{.AriaRequired}}\"{{end}}\n       data-slot=\"date-time-picker\"\n       {{- range $k, $v := .Attrs}} {{$k}}=\"{{$v}}\"{{end -}}\n>\n{{end}}\n"
    },
    {
      "path": "registry/phoenix/date_time_picker.ex",
      "type": "registry:file",
      "target": "lib/my_app_web/components/date_time_picker.ex",
      "content": "defmodule ShadcnHtmx.Components.DateTimePicker do\n  @moduledoc \"\"\"\n  Date Time Picker — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n  Mirrors registry/ui/date-time-picker.tsx. The control is a native\n  `<input type=\"date|time|datetime-local|month|week\">`, so the picker UI,\n  segment editing, locale-aware display and constraint validation all come from\n  the platform. The submitted value is always normalised (date → yyyy-mm-dd,\n  time → HH:mm[:ss], month → YYYY-MM, week → yyyy-Www). No JS.\n\n  Works with plain HEEx and LiveView forms; htmx attributes and any other input\n  attribute pass through via `:rest`.\n\n  ## Examples\n\n      <.date_time_picker name=\"bday\" type=\"date\" min=\"1900-01-01\" />\n      <.date_time_picker name=\"slot\" type=\"time\" min=\"09:00\" max=\"18:00\" step=\"900\" />\n\n  See repos/mdn/files/en-us/web/html/reference/elements/input/ for native\n  attribute semantics.\n  \"\"\"\n\n  use Phoenix.Component\n\n  @base \"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs \" <>\n          \"transition-[color,box-shadow] outline-none \" <>\n          \"selection:bg-primary selection:text-primary-foreground \" <>\n          \"placeholder:text-muted-foreground \" <>\n          \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 \" <>\n          \"md:text-sm dark:bg-input/30 \" <>\n          \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 \" <>\n          \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 \" <>\n          \"[&.htmx-request]:opacity-70 \" <>\n          \"[&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert \" <>\n          \"[&::-webkit-datetime-edit]:px-0 [&::-webkit-datetime-edit-fields-wrapper]:px-0\"\n\n  attr :type, :string,\n    default: \"date\",\n    values: ~w(date time datetime-local month week)\n\n  attr :class, :string, default: nil\n\n  attr :rest, :global,\n    include:\n      ~w(hx-get hx-post hx-put hx-patch hx-delete hx-target hx-swap hx-trigger hx-indicator hx-vals hx-include hx-disable\n         id name value required disabled readonly autofocus form list\n         min max step\n         aria-label aria-labelledby aria-describedby aria-invalid aria-required)\n\n  def date_time_picker(assigns) do\n    assigns = assign(assigns, :base_class, @base)\n\n    ~H\"\"\"\n    <input\n      type={@type}\n      class={[@base_class, @class]}\n      data-slot=\"date-time-picker\"\n      {@rest}\n    />\n    \"\"\"\n  end\nend\n"
    },
    {
      "path": "registry/html/date-time-picker.html",
      "type": "registry:file",
      "target": "snippets/date-time-picker.html",
      "content": "<!--\n  shadcn-htmx — raw Date Time Picker snippets.\n\n  Mirrors registry/ui/date-time-picker.tsx. Drop onto any page that loads\n  Tailwind CSS v4 and the shadcn theme variables (background, foreground, input,\n  ring, destructive, primary). See app/styles/input.css for the defaults.\n\n  The control is a native <input type=\"date|time|datetime-local|month|week\">.\n  The browser ships the picker UI, segment editing, locale-aware display and\n  constraint validation (min/max/step/required). The submitted value is always\n  normalised regardless of how it is displayed:\n    date           → yyyy-mm-dd\n    time           → HH:mm or HH:mm:ss\n    datetime-local → yyyy-mm-ddTHH:mm\n    month          → YYYY-MM\n    week           → yyyy-Www  (ISO 8601 week number)\n  No JavaScript — this is a zero-script component.\n\n  BASE (shared by every variant):\n    flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent\n    px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none\n    selection:bg-primary selection:text-primary-foreground\n    placeholder:text-muted-foreground\n    disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\n    md:text-sm dark:bg-input/30\n    focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\n    aria-invalid:border-destructive aria-invalid:ring-destructive/20\n    dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70\n    [&::-webkit-calendar-picker-indicator]:cursor-pointer\n    [&::-webkit-calendar-picker-indicator]:opacity-60\n    [&::-webkit-calendar-picker-indicator]:hover:opacity-100\n    dark:[&::-webkit-calendar-picker-indicator]:invert\n    [&::-webkit-datetime-edit]:px-0\n    [&::-webkit-datetime-edit-fields-wrapper]:px-0\n-->\n\n<!-- ─── Date — value normalises to yyyy-mm-dd ───────────────────────── -->\n<input type=\"date\" name=\"bday\" min=\"1900-01-01\" max=\"2026-12-31\" data-slot=\"date-time-picker\"\n  class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert [&::-webkit-datetime-edit]:px-0 [&::-webkit-datetime-edit-fields-wrapper]:px-0\">\n\n<!-- ─── Time — step=\"900\" snaps to 15-minute slots (seconds units) ──── -->\n<input type=\"time\" name=\"slot\" min=\"09:00\" max=\"18:00\" step=\"900\" required data-slot=\"date-time-picker\"\n  class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert [&::-webkit-datetime-edit]:px-0 [&::-webkit-datetime-edit-fields-wrapper]:px-0\">\n\n<!-- ─── Datetime-local — value normalises to yyyy-mm-ddTHH:mm ───────── -->\n<input type=\"datetime-local\" name=\"start\" data-slot=\"date-time-picker\"\n  class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert [&::-webkit-datetime-edit]:px-0 [&::-webkit-datetime-edit-fields-wrapper]:px-0\">\n\n<!-- ─── Month — value normalises to YYYY-MM ─────────────────────────── -->\n<input type=\"month\" name=\"period\" data-slot=\"date-time-picker\"\n  class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert [&::-webkit-datetime-edit]:px-0 [&::-webkit-datetime-edit-fields-wrapper]:px-0\">\n\n<!-- ─── Week — value normalises to yyyy-Www (ISO 8601) ──────────────── -->\n<input type=\"week\" name=\"reporting-week\" data-slot=\"date-time-picker\"\n  class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&.htmx-request]:opacity-70 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert [&::-webkit-datetime-edit]:px-0 [&::-webkit-datetime-edit-fields-wrapper]:px-0\">\n\n<!-- ─── Invalid — pair with an error message via aria-describedby ───── -->\n<div>\n  <input type=\"date\" name=\"bday\" aria-invalid=\"true\" aria-describedby=\"bday-error\" data-slot=\"date-time-picker\"\n    class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 dark:[&::-webkit-calendar-picker-indicator]:invert\">\n  <p id=\"bday-error\" class=\"mt-1 text-sm text-destructive\">Choose a date in the past.</p>\n</div>\n\n<!-- ─── Disabled — also removes from tab order ──────────────────────── -->\n<input type=\"date\" value=\"2026-06-02\" disabled data-slot=\"date-time-picker\"\n  class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30\">\n"
    }
  ]
}