@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/calendar/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","names":[],"sources":["../../src/calendar/DateRangePicker.tsx"],"sourcesContent":["// @ts-nocheck - style-system types need a dedicated pass; removing this would require\n// fixing style-definition type mismatches unrelated to component behavior.\nimport {\n  createContext,\n  createSignal,\n  type JSX,\n  mergeProps,\n  Show,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { pressScale } from \"../pressScale\";\nimport {\n  DateRangePicker as HeadlessDateRangePicker,\n  DateRangePickerLabel as HeadlessDateRangePickerLabel,\n  DateRangePickerDescription as HeadlessDateRangePickerDescription,\n  DateRangePickerErrorMessage as HeadlessDateRangePickerErrorMessage,\n  DateRangePickerButton,\n  DateRangePickerContent,\n  DateInput,\n  DateSegment,\n  useDateRangePickerContext,\n  type DateRangePickerProps as HeadlessDateRangePickerProps,\n  type CalendarDate,\n  type DateValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { createHover, useLocale } from \"@proyecto-viviana/solidaria\";\nimport {\n  type CalendarDateTime,\n  type TimeValue,\n  toCalendarDateTime,\n  toZoned,\n} from \"@proyecto-viviana/solid-stately\";\nimport { RangeCalendar } from \"./RangeCalendar\";\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 DateRangePickerSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype NormalizedDateRangePickerSize = \"S\" | \"M\" | \"L\" | \"XL\";\ntype DateRangePickerFirstDayOfWeek = \"sun\" | \"mon\" | \"tue\" | \"wed\" | \"thu\" | \"fri\" | \"sat\";\n\nexport interface DateRangePickerProps<T extends DateValue = DateValue> extends Omit<\n  HeadlessDateRangePickerProps<T>,\n  \"class\" | \"style\" | \"children\" | \"firstDayOfWeek\"\n> {\n  /** The size of the picker. @default 'M' */\n  size?: DateRangePickerSize;\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  /** The maximum number of months to display in the range calendar popover. */\n  maxVisibleMonths?: number;\n  /** The day that starts the week. */\n  firstDayOfWeek?: DateRangePickerFirstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const DateRangePickerContext =\n  createContext<SpectrumContextValue<DateRangePickerProps<any>>>(null);\n\nfunction normalizeDateRangePickerSize(\n  size: DateRangePickerSize | undefined,\n): NormalizedDateRangePickerSize {\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 requiredIconStyle(size: NormalizedDateRangePickerSize): 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 normalizeFirstDayOfWeek(\n  firstDayOfWeek: DateRangePickerFirstDayOfWeek | 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\nconst dateRangePickerRoot = style(\n  {\n    ...field(),\n    position: \"relative\",\n  },\n  getAllowedOverrides(),\n);\n\nconst dateRangePickerLabelWrapper = 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 dateRangePickerLabel = style<any>({\n  ...fieldLabel(),\n});\n\nconst dateRangePickerFieldGroup = style({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  transition: \"default\",\n  textWrap: \"nowrap\",\n  paddingStart: \"edge-to-text\",\n  paddingEnd: 4,\n  backgroundColor: {\n    // Flat `gray-25` to match S2 `fieldGroupStyles` — see the DatePicker note.\n    // `baseColor(\"gray-25\")` would inject a phantom hover-darkening the field\n    // surface does not have.\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 ButtonText in forced-colors (matches the\n    // certified single DatePicker).\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst dateRangeInputContainer = 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<{\n  isFocused?: boolean;\n  isPunctuation?: boolean;\n  isDisabled?: boolean;\n}>({\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 dateRangeSeparator = style({\n  flexShrink: 0,\n  paddingX: 2,\n});\n\nconst calendarButtonWrapper = style({\n  flexShrink: 0,\n  flexGrow: 1,\n  display: \"flex\",\n  justifyContent: \"end\",\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: NormalizedDateRangePickerSize;\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/DatePicker help text carries. `--iconPrimary` tints the\n  // FieldError icon and `cursor` is set on the help text ITSELF (not inherited):\n  // `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 dateRangePickerPopover = 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 single DatePicker's `datePickerPopover` motion, which\n  // is itself the shared `popover()` enter/exit fade. S2's DateRangePicker\n  // popover is a plain `<Popover>`, so the enter transition IS this generic\n  // opacity/translate fade — driven here by `createEnterAnimation`\n  // (data-entering) inside the shared `DateRangePickerContent`.\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 dateRangePickerPopoverFrame = style({\n  paddingX: 16,\n  paddingY: 24,\n  overflow: \"auto\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 16,\n  boxSizing: \"content-box\",\n  width: \"[max-content]\",\n});\n\nconst dateRangePickerTimeFields = style({\n  display: \"flex\",\n  gap: 16,\n  alignItems: \"start\",\n  flexWrap: \"wrap\",\n  maxWidth: \"[272px]\",\n});\n\nfunction DateRangeDisplay(props: {\n  size: NormalizedDateRangePickerSize;\n  isInvalid: boolean;\n  label?: string;\n  description?: string;\n  errorMessage?: string;\n  isRequired?: boolean;\n  maxVisibleMonths?: number;\n  minValue?: DateValue;\n  maxValue?: DateValue;\n  // Anchor-aware, matching the RangeCalendar / RangeCalendarStateProps callback\n  // this forwards through (the second arg is the in-progress range's anchor date,\n  // null outside an active range selection). Mirrors upstream's\n  // useRangeCalendarState / DateRangePicker signature.\n  isDateUnavailable?: (date: DateValue, anchorDate: CalendarDate | null) => boolean;\n  allowsNonContiguousRanges?: boolean;\n  createCalendar?: HeadlessDateRangePickerProps[\"createCalendar\"];\n  firstDayOfWeek?: DateRangePickerFirstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  pageBehavior?: \"single\" | \"visible\";\n  hourCycle?: 12 | 24;\n  hideTimeZone?: boolean;\n  placeholderValue?: DateValue;\n}): JSX.Element {\n  const context = useDateRangePickerContext();\n  const theme = useTheme();\n  const state = context.calendarState;\n  const isDisabled = () => state.isDisabled();\n  // S2's FieldGroup renders on RAC's <Group>, whose `useHover` publishes\n  // `data-hovered`; the field text `baseColor(\"neutral\")` brightens one gray step\n  // on hover via a renderProps-gated atomic class (NOT a bare `[data-hovered]`\n  // selector). So the class must be recomputed with `isHovered`; emitting the\n  // attribute alone never brightens the text (D7). Suppress hover while disabled.\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n  // Mirrors S2's shared CalendarButton `buttonRef` → `pressScale(buttonRef)`: the\n  // port sizes the press transform against the real trigger element.\n  const [buttonEl, setButtonEl] = createSignal<HTMLButtonElement>();\n  const timeGranularity = () => {\n    const granularity = context.startFieldState.granularity;\n    return granularity === \"hour\" || granularity === \"minute\" || granularity === \"second\"\n      ? granularity\n      : undefined;\n  };\n  const timeValueFor = (part: \"start\" | \"end\"): TimeValue | null => {\n    const value =\n      part === \"start\" ? context.startFieldState.value() : context.endFieldState.value();\n    return value && \"hour\" in value ? (value as unknown as TimeValue) : null;\n  };\n  const commitTimeValue = (part: \"start\" | \"end\", nextTime: TimeValue | null) => {\n    if (!nextTime) {\n      return;\n    }\n\n    const fieldState = part === \"start\" ? context.startFieldState : context.endFieldState;\n    const currentValue = fieldState.value();\n    if (!currentValue) {\n      return;\n    }\n\n    let nextValue: DateValue = toCalendarDateTime(currentValue, nextTime);\n    if (\"timeZone\" in currentValue && !(\"timeZone\" in nextValue)) {\n      nextValue = toZoned(nextValue as CalendarDateTime, currentValue.timeZone);\n    }\n    fieldState.setValue(nextValue);\n  };\n  const timeMinValue = () =>\n    props.minValue && \"hour\" in props.minValue\n      ? (props.minValue as unknown as TimeValue)\n      : undefined;\n  const timeMaxValue = () =>\n    props.maxValue && \"hour\" in props.maxValue\n      ? (props.maxValue as unknown as TimeValue)\n      : undefined;\n\n  return (\n    <>\n      <Show when={props.label}>\n        <div class={dateRangePickerLabelWrapper({ size: props.size, labelPosition: \"top\" })}>\n          <HeadlessDateRangePickerLabel\n            class={dateRangePickerLabel({ size: props.size, isDisabled: isDisabled() })}\n          >\n            {props.label}\n            <Show when={props.isRequired}>\n              <span class={noWrap}>\n                &nbsp;\n                <AsteriskIcon\n                  size={props.size === \"S\" ? \"M\" : props.size}\n                  styles={requiredIcon}\n                  style={requiredIconStyle(props.size)}\n                  aria-hidden=\"true\"\n                />\n              </span>\n            </Show>\n          </HeadlessDateRangePickerLabel>\n        </div>\n      </Show>\n\n      <div\n        {...context.pickerAria.groupProps}\n        {...hoverProps}\n        // S2 seeds its FieldGroup's RAC <Group> with role=\"presentation\", overriding\n        // the faithful role=\"group\" that `createDateRangePicker` returns (RAC\n        // useDateRangePicker groupProps). Placed after the spread so it wins.\n        role=\"presentation\"\n        class={dateRangePickerFieldGroup({\n          size: props.size,\n          isInvalid: props.isInvalid,\n          isDisabled: isDisabled(),\n          isHovered: isHovered(),\n        })}\n        onClick={(event) => {\n          const target = event.target as HTMLElement;\n          if (target.closest('button, [role=\"spinbutton\"]')) {\n            return;\n          }\n          event.currentTarget.querySelector<HTMLElement>('[role=\"spinbutton\"]')?.focus();\n        }}\n        data-hovered={isHovered() ? \"true\" : undefined}\n      >\n        <div class={dateRangeInputContainer}>\n          <DateInput slot=\"start\" class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={({ isFocused, isEditable }) =>\n                  dateSegment({\n                    isFocused,\n                    isDisabled: !isEditable && isDisabled(),\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n          <span class={dateRangeSeparator} aria-hidden=\"true\">\n            &ndash;\n          </span>\n          <DateInput slot=\"end\" class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={({ isFocused, isEditable }) =>\n                  dateSegment({\n                    isFocused,\n                    isDisabled: !isEditable && isDisabled(),\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={props.isInvalid}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n\n        <div class={calendarButtonWrapper}>\n          <DateRangePickerButton\n            ref={setButtonEl}\n            class={({ isDisabled, isOpen, isHovered, isPressed, isFocusVisible }) =>\n              calendarButton({\n                isDisabled,\n                isOpen,\n                isHovered,\n                isPressed,\n                isFocusVisible,\n                size: props.size,\n              })\n            }\n            style={pressScale(buttonEl)}\n          >\n            <S2CalendarIcon styles={calendarIcon} />\n          </DateRangePickerButton>\n        </div>\n\n        <DateRangePickerContent\n          class={(rp) =>\n            dateRangePickerPopover({\n              colorScheme: theme.colorScheme,\n              placement: rp.placement ?? undefined,\n              isEntering: rp.isEntering,\n              isExiting: rp.isExiting,\n            })\n          }\n        >\n          <div class={dateRangePickerPopoverFrame} style={{ \"min-width\": \"240px\" }}>\n            <RangeCalendar\n              size=\"md\"\n              value={state.value?.() ?? undefined}\n              onChange={(value) => state.setValue(value)}\n              minValue={props.minValue}\n              maxValue={props.maxValue}\n              isDateUnavailable={props.isDateUnavailable}\n              allowsNonContiguousRanges={props.allowsNonContiguousRanges}\n              createCalendar={props.createCalendar}\n              firstDayOfWeek={props.firstDayOfWeek}\n              pageBehavior={props.pageBehavior}\n              isInvalid={props.isInvalid}\n              errorMessage={props.isInvalid ? props.errorMessage : undefined}\n              visibleMonths={props.maxVisibleMonths ?? 1}\n            />\n            <Show when={timeGranularity()}>\n              <div class={dateRangePickerTimeFields}>\n                <TimeField\n                  size=\"md\"\n                  label=\"Start time\"\n                  value={timeValueFor(\"start\") ?? undefined}\n                  minValue={timeMinValue()}\n                  maxValue={timeMaxValue()}\n                  granularity={timeGranularity()}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  placeholderValue={\n                    props.placeholderValue && \"hour\" in props.placeholderValue\n                      ? (props.placeholderValue as unknown as TimeValue)\n                      : undefined\n                  }\n                  onChange={(nextValue) => commitTimeValue(\"start\", nextValue)}\n                />\n                <TimeField\n                  size=\"md\"\n                  label=\"End time\"\n                  value={timeValueFor(\"end\") ?? undefined}\n                  minValue={timeMinValue()}\n                  maxValue={timeMaxValue()}\n                  granularity={timeGranularity()}\n                  hourCycle={props.hourCycle}\n                  hideTimeZone={props.hideTimeZone}\n                  placeholderValue={\n                    props.placeholderValue && \"hour\" in props.placeholderValue\n                      ? (props.placeholderValue as unknown as TimeValue)\n                      : undefined\n                  }\n                  onChange={(nextValue) => commitTimeValue(\"end\", nextValue)}\n                />\n              </div>\n            </Show>\n          </div>\n        </DateRangePickerContent>\n      </div>\n\n      <Show when={props.description && !props.isInvalid}>\n        <HeadlessDateRangePickerDescription\n          class={helpText({ size: props.size, isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {props.description}\n        </HeadlessDateRangePickerDescription>\n      </Show>\n\n      <Show when={props.isInvalid && props.errorMessage}>\n        <HeadlessDateRangePickerErrorMessage\n          class={helpText({ size: props.size, isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {props.errorMessage}\n        </HeadlessDateRangePickerErrorMessage>\n      </Show>\n    </>\n  );\n}\n\n/**\n * A date range picker combines two date display fields with a range calendar popup.\n */\nexport function DateRangePicker<T extends DateValue = CalendarDate>(\n  props: DateRangePickerProps<T>,\n): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(\n    useContext(DateRangePickerContext),\n    (props as any).slot,\n  );\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, calendarProps, rest] = splitProps(\n    merged,\n    [\"size\", \"class\", \"label\", \"description\", \"errorMessage\", \"isInvalid\", \"maxVisibleMonths\"],\n    [\n      \"minValue\",\n      \"maxValue\",\n      \"isDateUnavailable\",\n      \"firstDayOfWeek\",\n      \"pageBehavior\",\n      \"allowsNonContiguousRanges\",\n      \"placeholderValue\",\n      \"createCalendar\",\n    ],\n  );\n\n  const size = () => normalizeDateRangePickerSize(local.size);\n  const isInvalid = () => local.isInvalid === true;\n  const maxVisibleMonths = () => Math.max(1, Number(local.maxVisibleMonths ?? 1));\n  const locale = useLocale();\n\n  return (\n    <HeadlessDateRangePicker\n      {...calendarProps}\n      {...rest}\n      firstDayOfWeek={normalizeFirstDayOfWeek(calendarProps.firstDayOfWeek)}\n      visibleMonths={maxVisibleMonths()}\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          dateRangePickerRoot({\n            ...renderProps,\n            size: size(),\n            labelPosition: \"top\",\n            isInForm: false,\n          }),\n        ]\n          .filter(Boolean)\n          .join(\" \")\n      }\n    >\n      <DateRangeDisplay\n        size={size()}\n        isInvalid={isInvalid()}\n        label={local.label}\n        description={local.description}\n        errorMessage={local.errorMessage}\n        isRequired={rest.isRequired}\n        maxVisibleMonths={maxVisibleMonths()}\n        minValue={calendarProps.minValue}\n        maxValue={calendarProps.maxValue}\n        isDateUnavailable={calendarProps.isDateUnavailable}\n        allowsNonContiguousRanges={calendarProps.allowsNonContiguousRanges}\n        createCalendar={calendarProps.createCalendar}\n        firstDayOfWeek={calendarProps.firstDayOfWeek}\n        pageBehavior={calendarProps.pageBehavior}\n        hourCycle={(rest as { hourCycle?: 12 | 24 }).hourCycle}\n        hideTimeZone={(rest as { hideTimeZone?: boolean }).hideTimeZone}\n        placeholderValue={calendarProps.placeholderValue}\n      />\n    </HeadlessDateRangePicker>\n  );\n}\n\nexport type { CalendarDate, DateValue };\n"],"mappings":"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"}