@proyecto-viviana/ui 0.6.3 → 0.8.0-rc.0

package/dist/calendar/DateField.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.jsx","names":[],"sources":["../../src/calendar/DateField.tsx"],"sourcesContent":["// @ts-nocheck - style-system generics need the same dedicated pass as DatePicker.\nimport {\n  createContext,\n  createEffect,\n  createSignal,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  DateField as HeadlessDateField,\n  DateFieldLabel as HeadlessDateFieldLabel,\n  DateFieldDescription as HeadlessDateFieldDescription,\n  DateFieldErrorMessage as HeadlessDateFieldErrorMessage,\n  DateInput,\n  DateSegment,\n  useDateFieldContext,\n  type DateFieldProps as HeadlessDateFieldProps,\n  type DateFieldRenderProps,\n  type DateSegmentRenderProps,\n  type CalendarDate,\n  type DateValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport {\n  useLocale,\n  createFocusVisibleListener,\n  isFocusVisible as isGlobalFocusVisible,\n} from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport {\n  control,\n  controlFont,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\n\nexport type DateFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2DateFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type DateFieldLabelPosition = \"top\" | \"side\";\nexport type DateFieldLabelAlign = \"start\" | \"end\";\nexport type DateFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface DateFieldProps<T extends DateValue = DateValue> extends Omit<\n  HeadlessDateFieldProps<T>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the field. @default 'M' */\n  size?: DateFieldSize;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Label for the field. */\n  label?: JSX.Element;\n  /** A ContextualHelp element to render next to the label. */\n  contextualHelp?: JSX.Element;\n  /** Description text. */\n  description?: JSX.Element;\n  /** Error message. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the field. */\n  labelPosition?: DateFieldLabelPosition;\n  /** Label alignment for side labels. */\n  labelAlign?: DateFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: DateFieldNecessityIndicator;\n}\n\nexport const DateFieldContext = createContext<SpectrumContextValue<DateFieldProps<any>>>(null);\n\ninterface DateFieldStyleProps extends DateFieldRenderProps {\n  size?: S2DateFieldSize;\n  labelPosition?: DateFieldLabelPosition;\n  labelAlign?: DateFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isFocusVisible?: boolean;\n  isInForm?: boolean;\n}\n\nconst dateFieldRoot = style<DateFieldStyleProps>(\n  {\n    ...field(),\n  },\n  getAllowedOverrides(),\n);\n\nconst dateFieldLabelWrapper = style<DateFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst dateFieldLabel = style<DateFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst dateFieldGroup = style<DateFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  textWrap: \"nowrap\",\n  paddingX: \"edge-to-text\",\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\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  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst segmentContainer = 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<DateSegmentRenderProps & { 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 helpText = style<DateFieldStyleProps>({\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  \"--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 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 noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nfunction normalizeDateFieldSize(size: DateFieldSize | undefined): S2DateFieldSize {\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: S2DateFieldSize): 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 focusFirstEditableSegment(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n  if (target?.closest('[role=\"spinbutton\"]')) {\n    return;\n  }\n\n  event.preventDefault();\n  const segments = Array.from(\n    event.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\nfunction DateFieldContent(props: {\n  label?: JSX.Element;\n  contextualHelp?: JSX.Element;\n  description?: JSX.Element;\n  errorMessage?: JSX.Element;\n  size: S2DateFieldSize;\n  labelPosition: DateFieldLabelPosition;\n  labelAlign: DateFieldLabelAlign;\n  necessityIndicator: DateFieldNecessityIndicator;\n}): JSX.Element {\n  const { state, aria } = useDateFieldContext();\n  const isDisabled = () => state.isDisabled();\n  const isInvalid = () => state.isInvalid();\n  const isRequired = () => state.isRequired();\n  // S2's FieldGroup is a RAC <Group role=\"presentation\"> that consumes the SAME\n  // GroupContext as the inner DateInput group, so upstream both elements carry\n  // the field's aria-labelledby (label) and aria-describedby (value description\n  // + help text). We render the FieldGroup as a styled div, so surface those two\n  // identity attributes here; the D6 AX driver walks every element with\n  // aria-describedby, and the presentation wrapper must match React's. The group\n  // event handlers stay local — they're pruned from the AX tree and duplicating\n  // the arrow-nav onKeyDown would double-advance focus (RAC relies on synthetic\n  // stopPropagation ordering we can't guarantee across Solid's delegation).\n  const groupAria = () => aria.inputProps as Record<string, string | undefined>;\n  // Mirror the RAC Group that S2's FieldGroup renders on. Its `useFocusRing({\n  // within: true })` exposes TWO states the styled FieldGroup reads\n  // (Field.tsx:281-284): `isFocusWithin` drives the border color, while\n  // `isFocusVisible` (focus-within AND keyboard modality) drives the outline\n  // focus ring (`...focusRing()`) and brightens the text to `neutral:focused`\n  // (`baseColor('neutral').isFocusVisible`). The headless field tracks focus on\n  // the inner role=\"group\"; this bordered presentation wrapper is a separate,\n  // non-focusable element, so track focus-within here via the reliably-bubbling\n  // onFocusIn/onFocusOut (Solid's onFocus does not bubble to a container) and\n  // compose focus-visible from the global interaction modality — exactly how\n  // createFocusRing derives `isFocusVisible = isFocused && focusVisibleFlag`.\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n  const [isFocusVisibleModality, setIsFocusVisibleModality] = createSignal(isGlobalFocusVisible());\n  createEffect(() => {\n    const cleanup = createFocusVisibleListener((visible) => setIsFocusVisibleModality(visible));\n    onCleanup(cleanup);\n  });\n  const isFocusVisibleWithin = () => isFocusWithin() && isFocusVisibleModality();\n\n  return (\n    <>\n      <Show when={props.label}>\n        <div\n          class={dateFieldLabelWrapper({\n            size: props.size,\n            labelPosition: props.labelPosition,\n            labelAlign: props.labelAlign,\n          })}\n        >\n          <HeadlessDateFieldLabel\n            class={dateFieldLabel({\n              size: props.size,\n              labelPosition: props.labelPosition,\n              isDisabled: isDisabled(),\n            })}\n          >\n            {props.label}\n            <Show when={isRequired() || props.necessityIndicator === \"label\"}>\n              <span class={noWrap}>\n                &nbsp;\n                <Show\n                  when={props.necessityIndicator === \"icon\"}\n                  fallback={\n                    <span aria-hidden={isRequired() ? true : undefined}>\n                      {isRequired() ? \"(required)\" : \"(optional)\"}\n                    </span>\n                  }\n                >\n                  <AsteriskIcon\n                    size={props.size === \"S\" ? \"M\" : props.size}\n                    styles={requiredIcon}\n                    style={requiredIconStyle(props.size)}\n                    aria-hidden=\"true\"\n                  />\n                </Show>\n              </span>\n            </Show>\n          </HeadlessDateFieldLabel>\n          <Show when={props.contextualHelp}>\n            <span data-slot=\"contextualHelp\" class={noWrap}>\n              {props.contextualHelp}\n            </span>\n          </Show>\n        </div>\n      </Show>\n\n      <div\n        role=\"presentation\"\n        aria-labelledby={groupAria()[\"aria-labelledby\"]}\n        aria-describedby={groupAria()[\"aria-describedby\"]}\n        class={dateFieldGroup({\n          size: props.size,\n          isInvalid: isInvalid(),\n          isDisabled: isDisabled(),\n          isFocusWithin: isFocusWithin(),\n          isFocusVisible: isFocusVisibleWithin(),\n        })}\n        onPointerDown={(event) => {\n          if (event.pointerType === \"mouse\") {\n            focusFirstEditableSegment(event);\n          }\n        }}\n        onTouchEnd={focusFirstEditableSegment}\n        onFocusIn={() => setIsFocusWithin(true)}\n        onFocusOut={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n            setIsFocusWithin(false);\n          }\n        }}\n        data-focused={isFocusWithin() ? \"true\" : undefined}\n        data-focus-visible={isFocusVisibleWithin() ? \"true\" : undefined}\n        data-disabled={isDisabled() ? \"true\" : undefined}\n        data-invalid={isInvalid() ? \"true\" : undefined}\n      >\n        {/*\n          S2 layers the segments: FieldGroup (this bordered role=\"presentation\"\n          wrapper) → DateInputContainer (segmentContainer div) → AriaDateInput\n          (the unstyled role=\"group\"). Keep the segmentContainer styling on the\n          wrapper and leave the group unstyled so its computed box matches.\n        */}\n        <div class={segmentContainer}>\n          <DateInput class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={(renderProps) =>\n                  dateSegment({\n                    ...renderProps,\n                    isDisabled: isDisabled(),\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={isInvalid() && !isDisabled()}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n      </div>\n\n      <Show when={props.description && !isInvalid()}>\n        <HeadlessDateFieldDescription\n          class={helpText({ size: props.size, isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {props.description}\n        </HeadlessDateFieldDescription>\n      </Show>\n\n      <Show when={props.errorMessage && isInvalid()}>\n        <HeadlessDateFieldErrorMessage\n          class={helpText({ size: props.size, isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {props.errorMessage}\n        </HeadlessDateFieldErrorMessage>\n      </Show>\n    </>\n  );\n}\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n */\nexport function DateField<T extends DateValue = CalendarDate>(\n  props: DateFieldProps<T>,\n): JSX.Element {\n  // Slotted context props sit below explicit props; `useFormProps`/`useProviderProps`\n  // wrap the result so the form/Skeleton disabled-force stays outermost (mirrors\n  // upstream's `useSpectrumContextProps` → `useFormProps` order).\n  const contextProps = getSlottedContextProps(useContext(DateFieldContext), props.slot);\n  const merged = useProviderProps(useFormProps(mergeProps(contextProps ?? {}, props)));\n  const isInForm = useIsInForm();\n  const [local, rest] = splitProps(merged, [\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"contextualHelp\",\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n  ]);\n\n  const size = () => normalizeDateFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const isInvalid = () => local.isInvalid === true;\n  const locale = useLocale();\n\n  const rootClassName = (renderProps: DateFieldRenderProps) =>\n    [\n      \"solidaria-DateField\",\n      local.UNSAFE_className,\n      local.class,\n      dateFieldRoot(\n        {\n          ...renderProps,\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessDateField\n      {...rest}\n      locale={(rest as { locale?: string }).locale ?? locale().locale}\n      validationState={\n        isInvalid()\n          ? \"invalid\"\n          : (rest as { validationState?: \"valid\" | \"invalid\" }).validationState\n      }\n      label={local.label as string | undefined}\n      description={local.description as string | undefined}\n      errorMessage={local.errorMessage as string | undefined}\n      class={rootClassName}\n      style={local.UNSAFE_style}\n    >\n      <DateFieldContent\n        label={local.label}\n        contextualHelp={local.contextualHelp}\n        description={local.description}\n        errorMessage={local.errorMessage}\n        size={size()}\n        labelPosition={labelPosition()}\n        labelAlign={labelAlign()}\n        necessityIndicator={necessityIndicator()}\n      />\n    </HeadlessDateField>\n  );\n}\n\nexport type { CalendarDate, DateValue };\n"],"mappings":"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"}
+{"version":3,"file":"DateField.jsx","names":[],"sources":["../../src/calendar/DateField.tsx"],"sourcesContent":["// @ts-nocheck\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/DateField.tsx\n\n// Port of packages/@react-spectrum/s2/src/DateField.tsx.\n\n// Style-system generics need the same dedicated pass as DatePicker.\nimport {\n  createContext,\n  createEffect,\n  createSignal,\n  onCleanup,\n  Show,\n  useContext,\n  createTrackedEffect,\n} from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  DateField as HeadlessDateField,\n  DateFieldLabel as HeadlessDateFieldLabel,\n  DateFieldDescription as HeadlessDateFieldDescription,\n  DateFieldErrorMessage as HeadlessDateFieldErrorMessage,\n  DateInput,\n  DateSegment,\n  useDateFieldContext,\n  type DateFieldProps as HeadlessDateFieldProps,\n  type DateFieldRenderProps,\n  type DateSegmentRenderProps,\n  type CalendarDate,\n  type DateValue,\n} from \"@proyecto-viviana/solidaria-components\";\nimport {\n  mergeProps,\n  useLocale,\n  createFocusVisibleListener,\n  getInteractionModality,\n} from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport {\n  control,\n  controlFont,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport { s2IntlStrings } from \"../intl\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport { getSlottedContextProps, type SpectrumContextValue } from \"../button/spectrum-context\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type DateFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2DateFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type DateFieldLabelPosition = \"top\" | \"side\";\nexport type DateFieldLabelAlign = \"start\" | \"end\";\nexport type DateFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface DateFieldProps<T extends DateValue = DateValue> extends Omit<\n  HeadlessDateFieldProps<T>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The size of the field. @default 'M' */\n  size?: DateFieldSize;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Label for the field. */\n  label?: JSX.Element;\n  /** A ContextualHelp element to render next to the label. */\n  contextualHelp?: JSX.Element;\n  /** Description text. */\n  description?: JSX.Element;\n  /** Error message. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the field. */\n  labelPosition?: DateFieldLabelPosition;\n  /** Label alignment for side labels. */\n  labelAlign?: DateFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: DateFieldNecessityIndicator;\n}\n\nexport const DateFieldContext = createContext<SpectrumContextValue<DateFieldProps<any>>>(null);\n\ninterface DateFieldStyleProps extends DateFieldRenderProps {\n  size?: S2DateFieldSize;\n  labelPosition?: DateFieldLabelPosition;\n  labelAlign?: DateFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isFocusVisible?: boolean;\n  isInForm?: boolean;\n}\n\nconst dateFieldRoot = style<DateFieldStyleProps>(\n  {\n    ...field(),\n  },\n  getAllowedOverrides(),\n);\n\nconst dateFieldLabelWrapper = style<DateFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n  },\n});\n\nconst dateFieldLabel = style<DateFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst dateFieldGroup = style<DateFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  textWrap: \"nowrap\",\n  paddingX: \"edge-to-text\",\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\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  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst segmentContainer = 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<DateSegmentRenderProps & { 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 helpText = style<DateFieldStyleProps>({\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-1000\",\n      forcedColors: \"Mark\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\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 fieldErrorIcon = style({\n  size: \"1lh\",\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative-1000\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nfunction normalizeDateFieldSize(size: DateFieldSize | undefined): S2DateFieldSize {\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: S2DateFieldSize): 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 focusFirstEditableSegment(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n  if (target?.closest('[role=\"spinbutton\"]')) {\n    return;\n  }\n\n  event.preventDefault();\n  const segments = Array.from(\n    event.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\nfunction DateFieldContent(props: {\n  label?: JSX.Element;\n  contextualHelp?: JSX.Element;\n  description?: JSX.Element;\n  errorMessage?: JSX.Element;\n  size: S2DateFieldSize;\n  labelPosition: DateFieldLabelPosition;\n  labelAlign: DateFieldLabelAlign;\n  necessityIndicator: DateFieldNecessityIndicator;\n}): JSX.Element {\n  const { state, aria } = useDateFieldContext();\n  const isDisabled = () => state.isDisabled();\n  const isInvalid = () => state.isInvalid();\n  const isRequired = () => state.isRequired();\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  // S2's FieldGroup is a RAC <Group role=\"presentation\"> that consumes the SAME\n  // GroupContext as the inner DateInput group, so upstream both elements carry\n  // the field's aria-labelledby (label) and aria-describedby (value description\n  // + help text). We render the FieldGroup as a styled div, so surface those two\n  // identity attributes here; the D6 AX driver walks every element with\n  // aria-describedby, and the presentation wrapper must match React's. The group\n  // event handlers stay local — they're pruned from the AX tree and duplicating\n  // the arrow-nav onKeyDown would double-advance focus (RAC relies on synthetic\n  // stopPropagation ordering we can't guarantee across Solid's delegation).\n  const groupAria = () => aria.inputProps as Record<string, string | undefined>;\n  // Mirror the RAC Group that S2's FieldGroup renders on. Its `useFocusRing({\n  // within: true })` exposes TWO states the styled FieldGroup reads\n  // (Field.tsx:281-284): `isFocusWithin` drives the border color, while\n  // `isFocusVisible` (focus-within AND keyboard modality) drives the outline\n  // focus ring (`...focusRing()`) and brightens the text to `neutral:focused`\n  // (`baseColor('neutral').isFocusVisible`). The headless field tracks focus on\n  // the inner role=\"group\"; this bordered presentation wrapper is a separate,\n  // non-focusable element, so track focus-within here via the reliably-bubbling\n  // onFocusIn/onFocusOut (Solid's onFocus does not bubble to a container) and\n  // compose focus-visible from the global interaction modality — exactly how\n  // createFocusRing derives `isFocusVisible = isFocused && focusVisibleFlag`.\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n  const [isFocusVisibleModality, setIsFocusVisibleModality] = createSignal(\n    getInteractionModality() !== \"pointer\",\n  );\n  createTrackedEffect(() => {\n    const _s2Cleanups: Array<() => void> = [];\n\n    const cleanup = createFocusVisibleListener((visible) => setIsFocusVisibleModality(visible));\n    _s2Cleanups.push(cleanup);\n\n    return () => {\n      for (const c of _s2Cleanups) c();\n    };\n  });\n  const isFocusVisibleWithin = () => isFocusWithin() && isFocusVisibleModality();\n\n  return (\n    <>\n      <Show when={props.label}>\n        <div\n          class={dateFieldLabelWrapper({\n            size: props.size,\n            labelPosition: props.labelPosition,\n            labelAlign: props.labelAlign,\n          })}\n        >\n          <HeadlessDateFieldLabel\n            class={dateFieldLabel({\n              size: props.size,\n              labelPosition: props.labelPosition,\n              isDisabled: isDisabled(),\n            })}\n          >\n            {props.label}\n            <Show when={isRequired() || props.necessityIndicator === \"label\"}>\n              <span class={noWrap}>\n                &nbsp;\n                <Show\n                  when={props.necessityIndicator === \"icon\"}\n                  fallback={\n                    <span aria-hidden={isRequired() ? true : undefined}>\n                      {stringFormatter().format(\n                        isRequired() ? \"label.(required)\" : \"label.(optional)\",\n                      )}\n                    </span>\n                  }\n                >\n                  <AsteriskIcon\n                    size={props.size === \"S\" ? \"M\" : props.size}\n                    styles={requiredIcon}\n                    style={requiredIconStyle(props.size)}\n                    aria-hidden=\"true\"\n                  />\n                </Show>\n              </span>\n            </Show>\n          </HeadlessDateFieldLabel>\n          <Show when={props.contextualHelp}>\n            <span data-slot=\"contextualHelp\" class={noWrap}>\n              {props.contextualHelp}\n            </span>\n          </Show>\n        </div>\n      </Show>\n\n      <div\n        role=\"presentation\"\n        aria-labelledby={groupAria()[\"aria-labelledby\"]}\n        aria-describedby={groupAria()[\"aria-describedby\"]}\n        class={dateFieldGroup({\n          size: props.size,\n          isInvalid: isInvalid(),\n          isDisabled: isDisabled(),\n          isFocusWithin: isFocusWithin(),\n          isFocusVisible: isFocusVisibleWithin(),\n        })}\n        onPointerDown={(event) => {\n          if (event.pointerType === \"mouse\") {\n            focusFirstEditableSegment(event);\n          }\n        }}\n        onTouchEnd={focusFirstEditableSegment}\n        onFocusIn={() => setIsFocusWithin(true)}\n        onFocusOut={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n            setIsFocusWithin(false);\n          }\n        }}\n        data-focused={isFocusWithin() ? \"true\" : undefined}\n        data-focus-visible={isFocusVisibleWithin() ? \"true\" : undefined}\n        data-disabled={isDisabled() ? \"true\" : undefined}\n        data-invalid={isInvalid() ? \"true\" : undefined}\n      >\n        {/*\n          S2 layers the segments: FieldGroup (this bordered role=\"presentation\"\n          wrapper) → DateInputContainer (segmentContainer div) → AriaDateInput\n          (the unstyled role=\"group\"). Keep the segmentContainer styling on the\n          wrapper and leave the group unstyled so its computed box matches.\n        */}\n        <div class={segmentContainer}>\n          <DateInput class=\"\">\n            {(segment) => (\n              <DateSegment\n                segment={segment}\n                class={(renderProps) =>\n                  dateSegment({\n                    ...renderProps,\n                    isDisabled: isDisabled(),\n                    isPunctuation: segment.type === \"literal\",\n                  })\n                }\n              />\n            )}\n          </DateInput>\n        </div>\n\n        <Show when={isInvalid() && !isDisabled()}>\n          <CenterBaseline>\n            <AlertTriangleIcon styles={fieldErrorIcon} />\n          </CenterBaseline>\n        </Show>\n      </div>\n\n      <Show when={props.description && !isInvalid()}>\n        <HeadlessDateFieldDescription\n          class={helpText({ size: props.size, isInvalid: false, isDisabled: isDisabled() })}\n        >\n          {props.description}\n        </HeadlessDateFieldDescription>\n      </Show>\n\n      <Show when={props.errorMessage && isInvalid()}>\n        <HeadlessDateFieldErrorMessage\n          class={helpText({ size: props.size, isInvalid: true, isDisabled: isDisabled() })}\n        >\n          {props.errorMessage}\n        </HeadlessDateFieldErrorMessage>\n      </Show>\n    </>\n  );\n}\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n */\nexport function DateField<T extends DateValue = CalendarDate>(\n  props: DateFieldProps<T>,\n): JSX.Element {\n  // Slotted context props sit below explicit props; `useFormProps`/`useProviderProps`\n  // wrap the result so the form/Skeleton disabled-force stays outermost (mirrors\n  // upstream's `useSpectrumContextProps` → `useFormProps` order).\n  const contextProps = getSlottedContextProps(useContext(DateFieldContext), props.slot);\n  const merged = useProviderProps(useFormProps(mergeProps(contextProps ?? {}, props)));\n  const isInForm = useIsInForm();\n  const [local, rest] = splitProps(merged, [\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"contextualHelp\",\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n  ]);\n\n  const size = () => normalizeDateFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const isInvalid = () => local.isInvalid === true;\n  const locale = useLocale();\n\n  const rootClassName = (renderProps: DateFieldRenderProps) =>\n    [\n      \"solidaria-DateField\",\n      local.UNSAFE_className,\n      local.class,\n      dateFieldRoot(\n        {\n          ...renderProps,\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessDateField\n      {...rest}\n      locale={(rest as { locale?: string }).locale ?? locale().locale}\n      validationState={\n        isInvalid()\n          ? \"invalid\"\n          : (rest as { validationState?: \"valid\" | \"invalid\" }).validationState\n      }\n      label={local.label as string | undefined}\n      description={local.description as string | undefined}\n      errorMessage={local.errorMessage as string | undefined}\n      class={rootClassName}\n      style={local.UNSAFE_style}\n    >\n      <DateFieldContent\n        label={local.label}\n        contextualHelp={local.contextualHelp}\n        description={local.description}\n        errorMessage={local.errorMessage}\n        size={size()}\n        labelPosition={labelPosition()}\n        labelAlign={labelAlign()}\n        necessityIndicator={necessityIndicator()}\n      />\n    </HeadlessDateField>\n  );\n}\n\nexport type { CalendarDate, DateValue };\n"],"mappings":"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"}

package/dist/calendar/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type DatePickerProps as HeadlessDatePickerProps, type CalendarDate, type DateValue } from "@proyecto-viviana/solidaria-components";
 import { type SpectrumContextValue } from "../button/spectrum-context";
 export type DatePickerSize = "S" | "M" | "L" | "XL" | "sm" | "md" | "lg";

package/dist/calendar/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/calendar/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,GAAG,EAKT,MAAM,UAAU,CAAC;AAElB,OAAO,EAUL,KAAK,eAAe,IAAI,uBAAuB,EAC/C,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AAiBhD,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAW/F,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzE,MAAM,MAAM,wBAAwB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7F,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,IAAI,CAC5E,uBAAuB,CAAC,CAAC,CAAC,EAC1B,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,GAAG,eAAe,CACpE;IACC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oCAAoC;IACpC,cAAc,CAAC,EAAE,wBAAwB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,iBAAiB,wEAAkE,CAAC;AA0djG,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EAC3D,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GACxB,GAAG,CAAC,OAAO,CAwMb;AAyDD,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/calendar/DatePicker.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAUL,KAAK,eAAe,IAAI,uBAAuB,EAC/C,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AAmBhD,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAY/F,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzE,MAAM,MAAM,wBAAwB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7F,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,IAAI,CAC5E,uBAAuB,CAAC,CAAC,CAAC,EAC1B,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,GAAG,eAAe,CACpE;IACC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oCAAoC;IACpC,cAAc,CAAC,EAAE,wBAAwB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,iBAAiB,wEAAkE,CAAC;AAydjG,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EAC3D,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GACxB,GAAG,CAAC,OAAO,CA4Mb;AA0DD,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}