@proyecto-viviana/ui 0.5.0 → 0.6.0

package/dist/calendar/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../src/calendar/DatePicker.tsx"],"sourcesContent":["// @ts-nocheck - style-system types need a dedicated pass; removing this would require\n// fixing ~20 style-definition type mismatches unrelated to component behavior.\nimport {\n  createContext,\n  createSignal,\n  type JSX,\n  mergeProps,\n  splitProps,\n  Show,\n  useContext,\n} from \"solid-js\";\nimport { pressScale } from \"../pressScale\";\nimport {\n  DatePicker as HeadlessDatePicker,\n  DatePickerLabel as HeadlessDatePickerLabel,\n  DatePickerDescription as HeadlessDatePickerDescription,\n  DatePickerErrorMessage as HeadlessDatePickerErrorMessage,\n  DatePickerButton,\n  DatePickerContent,\n  DateInput,\n  DateSegment,\n  useDatePickerContext,\n  type DatePickerProps as HeadlessDatePickerProps,\n  type CalendarDate,\n  type DateValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { createHover, useLocale } from \"@proyecto-viviana/solidaria\";\nimport { Calendar } from \"./index\";\nimport { TimeField } from \"../datepicker\";\nimport {\n  baseColor,\n  focusRing,\n  fontRelative,\n  lightDark,\n  setColorScheme,\n  style,\n} from \"../style\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport S2CalendarIcon from \"../icon/s2wf-icons/CalendarIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps, useTheme } from \"../provider\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\n\nexport type DatePickerSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype NormalizedDatePickerSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type DatePickerFirstDayOfWeek = \"sun\" | \"mon\" | \"tue\" | \"wed\" | \"thu\" | \"fri\" | \"sat\";\n\nexport interface DatePickerProps<T extends DateValue = DateValue> extends Omit<\n  HeadlessDatePickerProps<T>,\n  \"class\" | \"style\" | \"children\" | \"firstDayOfWeek\" | \"visibleMonths\"\n> {\n  /** The size of the picker. @default 'md' */\n  size?: DatePickerSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Label for the field. */\n  label?: string;\n  /** Description text. */\n  description?: string;\n  /** Error message. */\n  errorMessage?: string;\n  /** A ContextualHelp element to place next to the label. */\n  contextualHelp?: JSX.Element;\n  /** Placeholder text. */\n  placeholder?: string;\n  /**\n   * The maximum number of months to display at once in the calendar popover.\n   *\n   * @default 1\n   */\n  maxVisibleMonths?: number;\n  /** The day that starts the week. */\n  firstDayOfWeek?: DatePickerFirstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const DatePickerContext = createContext<SpectrumContextValue<DatePickerProps<any>>>(null);\n\nfunction normalizeDatePickerSize(size: DatePickerSize | undefined): NormalizedDatePickerSize {\n  switch (size) {\n    case \"S\":\n    case \"sm\":\n      return \"S\";\n    case \"L\":\n    case \"lg\":\n      return \"L\";\n    case \"XL\":\n      return \"XL\";\n    case \"M\":\n    case \"md\":\n    default:\n      return \"M\";\n  }\n}\n\nfunction normalizeFirstDayOfWeek(\n  firstDayOfWeek: DatePickerFirstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined,\n): 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined {\n  switch (firstDayOfWeek) {\n    case \"sun\":\n      return 0;\n    case \"mon\":\n      return 1;\n    case \"tue\":\n      return 2;\n    case \"wed\":\n      return 3;\n    case \"thu\":\n      return 4;\n    case \"fri\":\n      return 5;\n    case \"sat\":\n      return 6;\n    default:\n      return firstDayOfWeek;\n  }\n}\n\nfunction requiredIconStyle(size: NormalizedDatePickerSize): JSX.CSSProperties {\n  const pixelSize = size === \"L\" || size === \"XL\" ? 10 : 8;\n  return {\n    width: `${pixelSize}px`,\n    height: `${pixelSize}px`,\n  };\n}\n\nfunction datePickerFieldGroupStyle(size: NormalizedDatePickerSize): JSX.CSSProperties | undefined {\n  if (size !== \"L\" && size !== \"XL\") return undefined;\n\n  return {\n    \"padding-inline-end\": \"6px\",\n    width: size === \"L\" ? \"224px\" : \"240px\",\n  };\n}\n\nconst datePickerRoot = style(\n  {\n    ...field(),\n    position: \"relative\",\n  },\n  getAllowedOverrides(),\n);\n\nconst datePickerLabelWrapper = style({\n  gridArea: \"label\",\n  display: \"inline\",\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst datePickerLabel = style<any>({\n  ...fieldLabel(),\n});\n\nconst datePickerFieldGroup = style({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  transition: \"default\",\n  textWrap: \"nowrap\",\n  paddingStart: \"edge-to-text\",\n  paddingEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: \"[6px]\",\n      XL: \"[6px]\",\n    },\n  },\n  backgroundColor: {\n    // S2 `fieldGroupStyles.backgroundColor` (Field.tsx) is a FLAT `gray-25` with\n    // no `isHovered` variant — the field surface does not lighten/darken on hover\n    // (only its `color: baseColor(\"neutral\")` does). Wrapping this in\n    // `baseColor(\"gray-25\")` injected a phantom `gray-25:hovered` that darkened\n    // the field to 248 on hover while S2 stays at 255 (matches certified\n    // DateField/TimeField, which use the flat token).\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  borderColor: {\n    default: \"well-border\",\n    isInvalid: {\n      default: baseColor(\"negative\"),\n      forcedColors: \"Mark\",\n    },\n    isFocusWithin: {\n      default: \"gray-900\",\n      isInvalid: \"negative-1000\",\n      forcedColors: \"Highlight\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    // Mirror S2 `fieldGroupStyles.color` (Field.tsx): the disabled color nests\n    // its own forced-colors branch so a disabled field in forced-colors resolves\n    // to `GrayText`, not the flat `ButtonText`. A flat `isDisabled: \"disabled\"`\n    // loses that branch and paints CanvasText in forced-colors.\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst dateInputContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: \"full\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  scrollbarWidth: \"none\",\n  display: \"flex\",\n  alignItems: \"center\",\n  textWrap: \"nowrap\",\n});\n\nconst dateSegment = style<{ isFocused?: boolean; isPunctuation?: boolean }>({\n  outlineStyle: \"none\",\n  caretColor: \"transparent\",\n  backgroundColor: {\n    default: \"transparent\",\n    isFocused: \"blue-800\",\n    forcedColors: {\n      default: \"transparent\",\n      isFocused: \"Highlight\",\n    },\n  },\n  color: {\n    isFocused: \"white\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      isFocused: \"HighlightText\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  borderRadius: \"[2px]\",\n  paddingX: {\n    default: 2,\n    isPunctuation: 0,\n  },\n  paddingY: 2,\n  forcedColorAdjust: \"none\",\n});\n\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst calendarIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  size: fontRelative(14),\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nconst calendarButton = style<{\n  isOpen?: boolean;\n  isDisabled?: boolean;\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isFocusVisible?: boolean;\n  size: NormalizedDatePickerSize;\n}>({\n  ...focusRing(),\n  ...controlBorderRadius(\"sm\"),\n  position: \"relative\",\n  font: {\n    size: {\n      S: \"ui-sm\",\n      M: \"ui\",\n      L: \"ui-lg\",\n      XL: \"ui-xl\",\n    },\n  },\n  cursor: \"default\",\n  display: \"flex\",\n  textAlign: \"center\",\n  borderStyle: \"none\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32,\n    },\n  },\n  height: \"auto\",\n  marginStart: \"text-to-control\",\n  aspectRatio: \"square\",\n  flexShrink: 0,\n  transition: {\n    default: \"default\",\n    forcedColors: \"none\",\n  },\n  backgroundColor: {\n    default: baseColor(\"gray-100\"),\n    isOpen: \"gray-200\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"ButtonText\",\n      isHovered: \"Highlight\",\n      isOpen: \"Highlight\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: \"disabled\",\n    forcedColors: \"ButtonFace\",\n  },\n});\n\nconst helpText = style<{ isInvalid?: boolean; isDisabled?: boolean }>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  margin: 0,\n  alignItems: \"baseline\",\n  gap: \"text-to-visual\",\n  font: controlFont(),\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  // Mirror S2's `helpTextStyles` (Field.mjs) exactly — the same style the\n  // certified DateField help text carries. `--iconPrimary` tints the FieldError\n  // icon and `cursor` is set on the help text ITSELF (class `rD151`/`ri151`), not\n  // inherited: `text` at rest, `default` when disabled.\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  contain: \"inline-size\",\n  paddingTop: \"--field-gap\",\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst datePickerPopover = style<{\n  colorScheme: \"light\" | \"dark\" | \"light dark\";\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  isEntering?: boolean;\n  isExiting?: boolean;\n}>({\n  ...setColorScheme(),\n  \"--s2-container-bg\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"layer-2\",\n      forcedColors: \"Background\",\n    },\n  },\n  backgroundColor: \"--s2-container-bg\",\n  // Glasselated: frost the scene behind the surface — the container bg is the\n  // translucent `--surface-card`; the blur is what makes it read as glass.\n  backdropFilter: \"var(--blur-card)\",\n  boxShadow: \"elevated\",\n  borderRadius: \"panel\",\n  display: \"flex\",\n  width: \"[max-content]\",\n  maxWidth: \"calc(100vw - 24px)\",\n  padding: 0,\n  minHeight: 0,\n  overflow: \"visible\",\n  boxSizing: \"border-box\",\n  isolation: \"isolate\",\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark(\"transparent-white-25\", \"gray-200\"),\n    forcedColors: \"ButtonBorder\",\n  },\n  // Byte-copied from the shared `popoverStyles` enter/exit motion (which is\n  // itself S2 `Popover.tsx`'s `popover()` motion). S2's DatePicker popover is a\n  // plain `<Popover>`, so its enter transition IS this generic opacity/translate\n  // fade — NOT a bespoke keyframe. The port's DatePicker owns a private\n  // `DatePickerContent` that bypasses the shared Popover, so the same tokens are\n  // mirrored here and driven by `createEnterAnimation` (data-entering) below.\n  opacity: {\n    isEntering: 0,\n    isExiting: 0,\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n  },\n  transition: \"[opacity, translate]\",\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: \"in\",\n  },\n  pointerEvents: {\n    isExiting: \"none\",\n  },\n});\n\nconst datePickerPopoverInner = style({\n  padding: 0,\n  boxSizing: \"border-box\",\n  outlineStyle: \"none\",\n  borderRadius: \"inherit\",\n  overflow: \"auto\",\n  position: \"relative\",\n  width: \"full\",\n  maxSize: \"[inherit]\",\n});\n\nconst datePickerPopoverFrame = style({\n  paddingX: 16,\n  paddingY: 24,\n  overflow: \"auto\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 16,\n  boxSizing: \"border-box\",\n  size: \"full\",\n});\n\nconst datePickerCalendarPopoverStyle: JSX.CSSProperties = {\n  width: \"272px\",\n  \"max-width\": \"100%\",\n};\n\n/**\n * A date picker combines a date field and a calendar popup.\n */\n/**\n * The presentation FieldGroup shell. Mirrors the S2/RAC oracle's `_r_3_` node:\n * a `role=\"presentation\"` div carrying the field label (`aria-labelledby`) +\n * describedby + the arrow-navigation/press layer, all sourced from\n * `pickerAria.groupProps`. A context-consuming component (not inline JSX in the\n * DatePicker body) so `useDatePickerContext()` resolves the provider inside\n * `HeadlessDatePicker`. The styled class/style/onClick layer on top.\n */\nfunction DatePickerFieldGroup(props: {\n  size: NormalizedDatePickerSize;\n  isInvalid: boolean;\n  isDisabled: boolean;\n  style?: JSX.CSSProperties;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  children?: JSX.Element;\n}): JSX.Element {\n  const datePicker = useDatePickerContext();\n  // S2's FieldGroup renders on RAC's <Group>, whose `useHover` publishes\n  // `data-hovered`. The field text color is `baseColor(\"neutral\")`, which\n  // brightens one gray step (gray-800 → gray-900) on hover. S2's style macro\n  // applies that hover step as a *renderProps-gated atomic class* — the class\n  // is included in `fieldGroupStyles({isHovered})` only when the Group reports\n  // `isHovered`, NOT via a bare `[data-hovered]` CSS selector. So the class\n  // itself must be recomputed here with `isHovered`; emitting the attribute\n  // alone never brightens the text (D7). Suppress hover while disabled,\n  // matching `useHover({isDisabled})`.\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return props.isDisabled;\n    },\n  });\n  return (\n    <div\n      {...datePicker.pickerAria.groupProps}\n      {...hoverProps}\n      // S2 seeds its FieldGroup's RAC <Group> with role=\"presentation\", overriding\n      // the faithful role=\"group\" that `createDatePicker` returns (RAC useDatePicker\n      // groupProps). Placed after the spread so it wins (JSX later-attr precedence).\n      role=\"presentation\"\n      class={datePickerFieldGroup({\n        size: props.size,\n        isInvalid: props.isInvalid,\n        isDisabled: props.isDisabled,\n        isHovered: isHovered(),\n      })}\n      style={props.style}\n      onClick={props.onClick}\n      data-hovered={isHovered() ? \"true\" : undefined}\n    >\n      {props.children}\n    </div>\n  );\n}\n\nexport function DatePicker<T extends DateValue = CalendarDate>(\n  props: DatePickerProps<T>,\n): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useContext(DatePickerContext), (props as any).slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, calendarProps, rest] = splitProps(\n    merged,\n    [\n      \"size\",\n      \"class\",\n      \"label\",\n      \"description\",\n      \"errorMessage\",\n      \"contextualHelp\",\n      \"isInvalid\",\n      \"placeholder\",\n      \"maxVisibleMonths\",\n    ],\n    [\n      \"minValue\",\n      \"maxValue\",\n      \"isDateUnavailable\",\n      \"firstDayOfWeek\",\n      \"pageBehavior\",\n      \"placeholderValue\",\n      \"createCalendar\",\n    ],\n  );\n\n  const size = () => normalizeDatePickerSize(local.size);\n  const isInvalid = () => local.isInvalid === true;\n  const isDisabled = () => rest.isDisabled === true;\n  const visibleMonths = () => Math.max(1, Number(local.maxVisibleMonths ?? 1));\n  const locale = useLocale();\n  // Mirrors S2's CalendarButton `buttonRef` → `pressScale(buttonRef)`: the port\n  // sizes the press transform against the real trigger element.\n  const [buttonEl, setButtonEl] = createSignal<HTMLButtonElement>();\n\n  const hasTime = () => {\n    const granularity = (rest as { granularity?: string }).granularity;\n    if (granularity && granularity !== \"day\") return true;\n    const value = (rest as { value?: DateValue }).value;\n    if (value && \"hour\" in value) return true;\n    const defaultValue = (rest as { defaultValue?: DateValue }).defaultValue;\n    if (defaultValue && \"hour\" in defaultValue) return true;\n    return false;\n  };\n\n  return (\n    <HeadlessDatePicker\n      {...calendarProps}\n      {...rest}\n      firstDayOfWeek={normalizeFirstDayOfWeek(calendarProps.firstDayOfWeek)}\n      visibleMonths={visibleMonths()}\n      locale={(rest as { locale?: string }).locale ?? locale().locale}\n      label={local.label}\n      description={local.description}\n      errorMessage={local.errorMessage}\n      isInvalid={isInvalid()}\n      class={(renderProps) =>\n        [\n          local.class,\n          datePickerRoot({\n            ...renderProps,\n            size: size(),\n            labelPosition: \"top\",\n            isInForm: false,\n          }),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n    >\n      <Show when={local.label}>\n        <div class={datePickerLabelWrapper({ size: size(), labelPosition: \"top\" })}>\n          <HeadlessDatePickerLabel\n            class={datePickerLabel({ size: size(), isDisabled: isDisabled() })}\n          >\n            {local.label}\n            <Show when={rest.isRequired}>\n              <span class={noWrap}>\n                &nbsp;\n                <AsteriskIcon\n                  size={size() === \"S\" ? \"M\" : size()}\n                  styles={requiredIcon}\n                  style={requiredIconStyle(size())}\n                  aria-hidden=\"true\"\n                />\n              </span>\n            </Show>\n          </HeadlessDatePickerLabel>\n          <Show when={local.contextualHelp}>\n            <span data-slot=\"contextualHelp\" class={noWrap}>\n              {local.contextualHelp}\n            </span>\n          </Show>\n        </div>\n      </Show>\n\n      <DatePickerFieldGroup\n        size={size()}\n        isInvalid={isInvalid()}\n        isDisabled={isDisabled()}\n        style={datePickerFieldGroupStyle(size())}\n        onClick={(e) => {\n          const target = e.target as HTMLElement;\n          if (!target.closest('button, [role=\"spinbutton\"]')) {\n            const segments = Array.from(\n              e.currentTarget.querySelectorAll<HTMLElement>(\n                '[role=\"spinbutton\"]:not([aria-disabled=\"true\"])',\n              ),\n            );\n            for (let i = segments.length - 1; i >= 0; i--) {\n              if (!segments[i].hasAttribute(\"data-placeholder\")) {\n                segments[i].focus();\n                return;\n              }\n            }\n            segments[0]?.focus();\n          }\n        }}\n      >\n        {/*\n          Mirror S2 DatePicker's `<DateInputContainer><DateInput /></…>` nesting\n          (DatePicker.tsx line 248) — and the port's own DateField. The flex\n          container (`dateInputContainer`) lives on a WRAPPING div; the\n          AriaDateInput group keeps an EMPTY class so it stays an unstyled block\n          div. This matters: if the flex class sits on the group itself, the\n          segments become direct flex items and CSS blockifies them\n          (display:inline → block) and sizes them as flex items — the segment\n          must stay inline/auto to match the S2 oracle.\n        */}\n        <div class={dateInputContainer}>\n          <DateInput class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={({ isFocused, isDisabled }) =>\n                  dateSegment({\n                    isFocused,\n                    isDisabled,\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={isInvalid()}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n\n        <DatePickerButton\n          ref={setButtonEl}\n          class={({ isDisabled, isOpen, isHovered, isPressed, isFocusVisible }) =>\n            calendarButton({ isDisabled, isOpen, isHovered, isPressed, isFocusVisible, size: size() })\n          }\n          style={pressScale(buttonEl)}\n        >\n          <S2CalendarIcon styles={calendarIcon} />\n        </DatePickerButton>\n\n        <DatePickerPopup\n          size={size()}\n          hasTime={hasTime()}\n          maxVisibleMonths={visibleMonths()}\n          calendarProps={calendarProps}\n          hourCycle={(rest as { hourCycle?: 12 | 24 }).hourCycle}\n          shouldForceLeadingZeros={\n            (rest as { shouldForceLeadingZeros?: boolean }).shouldForceLeadingZeros\n          }\n        />\n      </DatePickerFieldGroup>\n\n      <Show when={local.description && !isInvalid()}>\n        <HeadlessDatePickerDescription\n          class={helpText({ size: size(), isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {local.description}\n        </HeadlessDatePickerDescription>\n      </Show>\n\n      <Show when={isInvalid() && local.errorMessage}>\n        <HeadlessDatePickerErrorMessage\n          class={helpText({ size: size(), isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {local.errorMessage}\n        </HeadlessDatePickerErrorMessage>\n      </Show>\n    </HeadlessDatePicker>\n  );\n}\n\nfunction DatePickerPopup(props: {\n  size: NormalizedDatePickerSize;\n  hasTime?: boolean;\n  maxVisibleMonths?: number;\n  calendarProps?: Record<string, unknown>;\n  hourCycle?: 12 | 24;\n  shouldForceLeadingZeros?: boolean;\n}): JSX.Element {\n  const theme = useTheme();\n  const datePicker = useDatePickerContext();\n  const timeGranularity = () =>\n    datePicker.datePickerState.granularity === \"day\"\n      ? \"minute\"\n      : datePicker.datePickerState.granularity;\n\n  return (\n    <DatePickerContent\n      class={(rp) =>\n        datePickerPopover({\n          colorScheme: theme.colorScheme,\n          placement: rp.placement ?? undefined,\n          isEntering: rp.isEntering,\n          isExiting: rp.isExiting,\n        })\n      }\n    >\n      <div class={datePickerPopoverInner}>\n        <div class={datePickerPopoverFrame}>\n          <Calendar\n            size=\"md\"\n            visibleMonths={props.maxVisibleMonths}\n            UNSAFE_style={datePickerCalendarPopoverStyle}\n            {...(props.calendarProps ?? {})}\n          />\n          <Show when={props.hasTime}>\n            <TimeField\n              size=\"md\"\n              label=\"Time\"\n              value={datePicker.datePickerState.timeValue() ?? undefined}\n              granularity={timeGranularity()}\n              hourCycle={props.hourCycle}\n              shouldForceLeadingZeros={props.shouldForceLeadingZeros}\n              onChange={(nextValue) => {\n                if (nextValue) {\n                  datePicker.datePickerState.setTimeValue(nextValue);\n                }\n              }}\n            />\n          </Show>\n        </div>\n      </div>\n    </DatePickerContent>\n  );\n}\n\nexport type { CalendarDate, DateValue };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqFA,MAAa,oBAAoB,cAA0D,IAAA;AAE3F,SAAS,wBAAwB,MAAmC;CAClE,QAAQ,MAAR;EACE,KAAK;EACL,KAAK,MACH,OAAO;EACT,KAAK;EACL,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EAGT,SACE,OAAO;CACX;AACF;AAEA,SAAS,wBACP,gBACsC;CACtC,QAAQ,gBAAR;EACE,KAAK,OACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAS,kBAAkB,MAAqC;CAC9D,MAAM,YAAY,SAAS,OAAO,SAAS,OAAO,KAAK;CACvD,OAAO;EACL,OAAO,GAAG,UAAA;EACV,QAAQ,GAAG,UAAA;CACb;AACF;AAEA,SAAS,0BAA0B,MAA8D;CAC/F,IAAI,SAAS,OAAO,SAAS,MAAM,OAAO,KAAA;CAE1C,OAAO;EACL,sBAAsB;EACtB,OAAO,SAAS,MAAM,UAAU;CAClC;AACF;AAEA,MAAM,iBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQN,MAAM,yBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;AAeN,MAAM,kBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM,uBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEN,MAAM,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;AA4BN,MAAM,iBAAA;AAcN,MAAM,eAAA;AAON,MAAM,eAAA;AAYN,MAAM,iBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DN,MAAM,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCN,MAAM,oBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoGN,MAAM,iCAAoD;CACxD,OAAO;CACP,aAAa;AACf;;;;;;;;;;;AAaA,SAAS,qBAAqB,OAOtB;CACN,MAAM,aAAa,qBAAA;CAUnB,MAAM,EAAE,WAAW,eAAe,YAAY,EAC5C,IAAI,aAAa;EACf,OAAO,MAAM;CACf,EACF,CAAA;CACA,cAAA;EAAA,IAAA,OAAA,eAAA,MAAA;EAAA,OAAA,MAAA,iBAEQ,WAAW,WAAW,YACtB,YAAU;GAAA,QAIT;GAAA,KAAA,WAAA;IAAA,OACE,qBAAqB;KAC1B,MAAM,MAAM;KACZ,WAAW,MAAM;KACjB,YAAY,MAAM;KAClB,WAAW,UAAA;IACb,CAAA;GAAA;GAAA,IACA,QAAA;IAAA,OAAO,MAAM;GAAK;GAAA,IAClB,UAAA;IAAA,OAAS,MAAM;GAAO;GAAA,KAAA,kBAAA;IAAA,OACR,UAAA,IAAc,SAAS,KAAA;GAAA;EAAA,CAAA,GAAA,OAAA,IAAA;EAAA,OAAA,YAEpC,MAAM,QAAQ;EAAA,mBAAA;EAAA,OAAA;CAAA,GAAA;AAGrB;AAEA,SAAgB,WACd,OACK;CAIL,MAAM,CAAC,OAAO,eAAe,QAAQ,WADtB,aAFO,iBAAiB,KAEb,GADL,uBAAuB,WAAW,iBAAA,GAAqB,MAAc,IACjD,KAAgB,CAAC,GAAG,KAE3D,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAA,GAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CAAA,CACD;CAGH,MAAM,aAAa,wBAAwB,MAAM,IAAI;CACrD,MAAM,kBAAkB,MAAM,cAAc;CAC5C,MAAM,mBAAmB,KAAK,eAAe;CAC7C,MAAM,sBAAsB,KAAK,IAAI,GAAG,OAAO,MAAM,oBAAoB,CAAA,CAAA;CACzE,MAAM,SAAS,UAAA;CAGf,MAAM,CAAC,UAAU,eAAe,aAAa;CAE7C,MAAM,gBAAU;EACd,MAAM,cAAe,KAAkC;EACvD,IAAI,eAAe,gBAAgB,OAAO,OAAO;EACjD,MAAM,QAAS,KAA+B;EAC9C,IAAI,SAAS,UAAU,OAAO,OAAO;EACrC,MAAM,eAAgB,KAAsC;EAC5D,IAAI,gBAAgB,UAAU,cAAc,OAAO;EACnD,OAAO;CACT;CAEA,OAAA,gBACG,cAAA,WACK,eACA,MAAI;EAAA,IACR,iBAAA;GAAA,OAAgB,wBAAwB,cAAc,cAAc;EAAA;EAAA,IACpE,gBAAA;GAAA,OAAe,cAAA;EAAA;EAAA,IACf,SAAA;GAAA,OAAS,KAA6B,UAAU,OAAA,EAAS;EAAM;EAAA,IAC/D,QAAA;GAAA,OAAO,MAAM;EAAK;EAAA,IAClB,cAAA;GAAA,OAAa,MAAM;EAAW;EAAA,IAC9B,eAAA;GAAA,OAAc,MAAM;EAAY;EAAA,IAChC,YAAA;GAAA,OAAW,UAAA;EAAA;EAAA,UACH,gBACN,CACE,MAAM,OACN,eAAe;GACb,GAAG;GACH,MAAM,KAAA;GACN,eAAe;GACf,UAAU;EACZ,CAAA,CAAA,EAEC,OAAO,OAAA,EACP,KAAK,GAAA;EAAA,IAAA,WAAA;GAAA,OAAA;IAAA,gBAGT,MAAA;KAAA,IAAK,OAAA;MAAA,OAAM,MAAM;KAAK;KAAA,IAAA,WAAA;MAAA,IAAA,QAAA,eAAA,OAAA,GAAA,QAAA,MAAA,YAAA,CAAA,OAAA,SAAA,cAAA,MAAA,WAAA,GAAA,QAAA,MAAA,aAAA,CAAA,OAAA,SAAA,cAAA,MAAA,WAAA;MAAA,OAAA,OAAA,gBAElB,iBAAA;OAAA,KAAA,WAAA;QAAA,OACQ,gBAAgB;SAAE,MAAM,KAAA;SAAQ,YAAY,WAAA;QAAa,CAAA;OAAA;OAAA,IAAA,WAAA;QAAA,OAAA,CAAA,WAE/D,MAAM,KAAK,GAAA,gBACX,MAAA;SAAA,IAAK,OAAA;UAAA,OAAM,KAAK;SAAU;SAAA,IAAA,WAAA;UAAA,IAAA,QAAA,eAAA,OAAA,GAAA,QAAA,MAAA,WAAA,aAAA,CAAA,OAAA,QAAA,cAAA,MAAA,WAAA;UAAA,OAAA,OAAA,gBAGtB,UAAA;WAAA,IACC,OAAA;YAAA,OAAM,WAAA,KAAA,MAAW,GAAA,EAAA,IAAM,MAAM,KAAA;WAAA;WAC7B,QAAQ;WAAA,IACR,QAAA;YAAA,OAAO,kBAAkB,KAAA,CAAA;WAAA;WAAA,eAAA;UAAA,CAAA,GAAA,OAAA,IAAA;UAAA,OAAA;SAAA;QAAA,CAAA,CAAA;OAAA;MAAA,CAAA,GAAA,OAAA,KAAA;MAAA,OAAA,OAAA,gBAMhC,MAAA;OAAA,IAAK,OAAA;QAAA,OAAM,MAAM;OAAc;OAAA,IAAA,WAAA;QAAA,IAAA,QAAA,eAAA,OAAA;QAAA,OAAA,aAE3B,MAAM,cAAc;QAAA,OAAA;OAAA;MAAA,CAAA,GAAA,OAAA,KAAA;MAAA,aAAA,UAAA,OAnBf,uBAAuB;OAAE,MAAM,KAAA;OAAQ,eAAe;MAAM,CAAA,CAAA,CAAA;MAAA,OAAA;KAAA;IAAA,CAAA;IAAA,gBAyBzE,sBAAA;KAAA,IACC,OAAA;MAAA,OAAM,KAAA;KAAA;KAAA,IACN,YAAA;MAAA,OAAW,UAAA;KAAA;KAAA,IACX,aAAA;MAAA,OAAY,WAAA;KAAA;KAAA,IACZ,QAAA;MAAA,OAAO,0BAA0B,KAAA,CAAA;KAAA;KACjC,UAAU,MAAA;MAER,IAAI,CADW,EAAE,OACL,QAAQ,+BAAA,GAAgC;OAClD,MAAM,WAAW,MAAM,KACrB,EAAE,cAAc,iBACd,qDAAA,CAAA;OAGJ,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,KAAK,GAAG,KACxC,IAAI,CAAC,SAAS,GAAG,aAAa,kBAAA,GAAqB;QACjD,SAAS,GAAG,MAAK;QACjB;OACF;OAEF,SAAS,IAAI,MAAA;MACf;KACF;KAAA,IAAA,WAAA;MAAA,OAAA;cAAA;QAAA,IAAA,SAAA,eAAA,OAAA;QAAA,OAAA,QAAA,gBAaG,WAAA;SAAA,SAAA;SAAA,WACG,YAAA,gBACC,aAAA;UACU;UAAA,UACD,EAAE,WAAW,iBACnB,YAAY;WACV;WACA;WACA,eAAe,QAAQ,SAAS;UAClC,CAAA;SAAA,CAAA;QAGN,CAAA,CAAA;QAAA,OAAA;OAAA,GAAA;OAAA,gBAIH,MAAA;QAAA,IAAK,OAAA;SAAA,OAAM,UAAA;QAAA;QAAA,IAAA,WAAA;SAAA,OAAA,gBACT,gBAAA,EAAA,IAAA,WAAA;UAAA,OAAA,gBACE,mBAAA,EAAkB,QAAQ,eAAA,CAAA;SAAA,EAAA,CAAA;QAAA;OAAA,CAAA;OAAA,gBAI9B,kBAAA;QAAA,KACM;QAAA,UACG,EAAE,YAAY,QAAQ,WAAW,WAAW,qBAClD,eAAe;SAAE;SAAY;SAAQ;SAAW;SAAW;SAAgB,MAAM,KAAA;QAAO,CAAA;QAAA,IAE1F,QAAA;SAAA,OAAO,WAAW,QAAA;QAAA;QAAA,IAAA,WAAA;SAAA,OAAA,gBAEjB,cAAA,EAAe,QAAQ,aAAA,CAAA;QAAA;OAAA,CAAA;OAAA,gBAGzB,iBAAA;QAAA,IACC,OAAA;SAAA,OAAM,KAAA;QAAA;QAAA,IACN,UAAA;SAAA,OAAS,QAAA;QAAA;QAAA,IACT,mBAAA;SAAA,OAAkB,cAAA;QAAA;QACH;QAAA,IACf,YAAA;SAAA,OAAY,KAAiC;QAAS;QAAA,IACtD,0BAAA;SAAA,OACG,KAA+C;QAAuB;OAAA,CAAA;MAAA;KAAA;IAAA,CAAA;IAAA,gBAK5E,MAAA;KAAA,IAAK,OAAA;MAAA,OAAM,WAAA,CAAA,CAAA,MAAM,WAAW,EAAA,KAAI,CAAC,UAAA;KAAA;KAAA,IAAA,WAAA;MAAA,OAAA,gBAC/B,uBAAA;OAAA,KAAA,WAAA;QAAA,OACQ,SAAS;SAAE,MAAM,KAAA;SAAQ,WAAW;SAAO,YAAY,WAAA;QAAa,CAAA;OAAA;OAAA,IAAA,WAAA;QAAA,OAE1E,MAAM;OAAW;MAAA,CAAA;KAAA;IAAA,CAAA;IAAA,gBAIrB,MAAA;KAAA,IAAK,OAAA;MAAA,OAAM,WAAA,CAAA,CAAA,UAAA,CAAA,EAAA,KAAe,MAAM;KAAY;KAAA,IAAA,WAAA;MAAA,OAAA,gBAC1C,wBAAA;OAAA,KAAA,WAAA;QAAA,OACQ,SAAS;SAAE,MAAM,KAAA;SAAQ,WAAW;SAAM,YAAY,WAAA;QAAa,CAAA;OAAA;OAAA,IAAA,WAAA;QAAA,OAEzE,MAAM;OAAY;MAAA,CAAA;KAAA;IAAA,CAAA;GAAA;EAAA;CAAA,CAAA,CAAA;AAK7B;AAEA,SAAS,gBAAgB,OAOjB;CACN,MAAM,QAAQ,SAAA;CACd,MAAM,aAAa,qBAAA;CACnB,MAAM,wBACJ,WAAW,gBAAgB,gBAAgB,QACvC,WACA,WAAW,gBAAgB;CAEjC,OAAA,gBACG,mBAAA;EAAA,UACS,OACN,kBAAkB;GAChB,aAAa,MAAM;GACnB,WAAW,GAAG,aAAa,KAAA;GAC3B,YAAY,GAAG;GACf,WAAW,GAAG;EAChB,CAAA;EAAA,IAAA,WAAA;GAAA,IAAA,SAAA,eAAA,OAAA,GAAA,SAAA,OAAA,YAAA,SAAA,OAAA,YAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,SAAA,OAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA;GAAA,OAAA,QAAA,gBAKG,YAAA,WAAA;IACC,MAAA;IAAA,IACA,gBAAA;KAAA,OAAe,MAAM;IAAgB;IACrC,cAAc;GAAA,SACT,MAAM,iBAAiB,CAAC,CAAC,CAAA,GAAA,QAAA,KAAA;GAAA,OAAA,QAAA,gBAE/B,MAAA;IAAA,IAAK,OAAA;KAAA,OAAM,MAAM;IAAO;IAAA,IAAA,WAAA;KAAA,OAAA,gBACtB,aAAA;MACC,MAAA;MACA,OAAA;MAAA,IACA,QAAA;OAAA,OAAO,WAAW,gBAAgB,UAAS,KAAM,KAAA;MAAA;MAAA,IACjD,cAAA;OAAA,OAAa,gBAAA;MAAA;MAAA,IACb,YAAA;OAAA,OAAW,MAAM;MAAS;MAAA,IAC1B,0BAAA;OAAA,OAAyB,MAAM;MAAuB;MACtD,WAAW,cAAA;OACT,IAAI,WACF,WAAW,gBAAgB,aAAa,SAAA;MAE5C;KAAA,CAAA;IAAA;GAAA,CAAA,GAAA,QAAA,KAAA;GAAA,OAAA;EAAA;CAAA,CAAA;AAOd"}