@planningcenter/tapestry 3.3.0-rc.8 → 3.3.0-rc.9

package/dist/components/checkbox-group/CheckboxGroup.d.ts

@@ -17,7 +17,7 @@ export type CheckboxGroupElementProps = Omit<FieldsetHTMLAttributes<HTMLFieldSet
  * Use it to group two or more checkboxes that share a common question or label.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-checkbox-group--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-checkbox-group--docs | Storybook Documentation}
  */
 export declare function CheckboxGroup({ children, className, description, invalid, label, size, ...restProps }: CheckboxGroupElementProps): React.JSX.Element;
 //# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/components/checkbox-group/CheckboxGroup.js

@@ -8,7 +8,7 @@ import React__default from 'react';
  * Use it to group two or more checkboxes that share a common question or label.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-checkbox-group--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-checkbox-group--docs | Storybook Documentation}
  */
 function CheckboxGroup({ children, className, description, invalid, label, size = "md", ...restProps }) {
     const combinedClassName = classNames("tds-checkbox-group", size === "sm" && "tds-checkbox-group--sm", className);

package/dist/components/checkbox-group/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../src/components/checkbox-group/CheckboxGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type CheckboxGroupSize = \"md\" | \"sm\"\n\nexport interface CheckboxGroupProps {\n  /** Optional description or error message rendered below the legend. */\n  description?: string\n  /** If true, adds aria-invalid and styles the description as an error. */\n  invalid?: boolean\n  /** The group label. Renders as <legend>. Required. */\n  label: string\n  /** Sets font size for the legend and description. */\n  size?: CheckboxGroupSize\n}\n\nexport type CheckboxGroupElementProps = Omit<\n  FieldsetHTMLAttributes<HTMLFieldSetElement>,\n  keyof CheckboxGroupProps\n> &\n  CheckboxGroupProps\n\n/**\n * A checkbox group allows a user to select multiple items from a list of options.\n * Use it to group two or more checkboxes that share a common question or label.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-checkbox-group--docs | Storybook Documentation}\n */\nexport function CheckboxGroup({\n  children,\n  className,\n  description,\n  invalid,\n  label,\n  size = \"md\",\n  ...restProps\n}: CheckboxGroupElementProps) {\n  const combinedClassName = classNames(\n    \"tds-checkbox-group\",\n    size === \"sm\" && \"tds-checkbox-group--sm\",\n    className\n  )\n  const stableId = useId()\n\n  const displayDescription =\n    description || (invalid ? \"One or more checkboxes are invalid.\" : undefined)\n  const descriptionId = `tds-checkbox-group-${stableId}-description`\n\n  return (\n    <fieldset\n      {...restProps}\n      aria-describedby={displayDescription ? descriptionId : undefined}\n      aria-invalid={invalid || undefined}\n      className={combinedClassName}\n    >\n      <legend>{label}</legend>\n      {displayDescription && (\n        <p id={descriptionId} className=\"tds-checkbox-group-description\">\n          <Icon\n            aria-hidden\n            className=\"tds-checkbox-group-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {displayDescription}\n        </p>\n      )}\n      <div className=\"tds-checkbox-group-fields\">{children}</div>\n    </fieldset>\n  )\n}\n"],"names":["React"],"mappings":";;;;;AA0BA;;;;;;AAMG;AACG,SAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,oBAAoB,EACpB,IAAI,KAAK,IAAI,IAAI,wBAAwB,EACzC,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,qCAAqC,GAAG,SAAS,CAAC;AAC9E,IAAA,MAAM,aAAa,GAAG,CAAA,mBAAA,EAAsB,QAAQ,cAAc;IAElE,QACEA,8CACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,IAAI,SAAS,EAClC,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,gCAAgC,EAAA;YAC9DA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,6CAA6C,EACvD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,EAAE,QAAQ,CAAO,CAClD;AAEf;;;;"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../src/components/checkbox-group/CheckboxGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type CheckboxGroupSize = \"md\" | \"sm\"\n\nexport interface CheckboxGroupProps {\n  /** Optional description or error message rendered below the legend. */\n  description?: string\n  /** If true, adds aria-invalid and styles the description as an error. */\n  invalid?: boolean\n  /** The group label. Renders as <legend>. Required. */\n  label: string\n  /** Sets font size for the legend and description. */\n  size?: CheckboxGroupSize\n}\n\nexport type CheckboxGroupElementProps = Omit<\n  FieldsetHTMLAttributes<HTMLFieldSetElement>,\n  keyof CheckboxGroupProps\n> &\n  CheckboxGroupProps\n\n/**\n * A checkbox group allows a user to select multiple items from a list of options.\n * Use it to group two or more checkboxes that share a common question or label.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-checkbox-group--docs | Storybook Documentation}\n */\nexport function CheckboxGroup({\n  children,\n  className,\n  description,\n  invalid,\n  label,\n  size = \"md\",\n  ...restProps\n}: CheckboxGroupElementProps) {\n  const combinedClassName = classNames(\n    \"tds-checkbox-group\",\n    size === \"sm\" && \"tds-checkbox-group--sm\",\n    className\n  )\n  const stableId = useId()\n\n  const displayDescription =\n    description || (invalid ? \"One or more checkboxes are invalid.\" : undefined)\n  const descriptionId = `tds-checkbox-group-${stableId}-description`\n\n  return (\n    <fieldset\n      {...restProps}\n      aria-describedby={displayDescription ? descriptionId : undefined}\n      aria-invalid={invalid || undefined}\n      className={combinedClassName}\n    >\n      <legend>{label}</legend>\n      {displayDescription && (\n        <p id={descriptionId} className=\"tds-checkbox-group-description\">\n          <Icon\n            aria-hidden\n            className=\"tds-checkbox-group-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {displayDescription}\n        </p>\n      )}\n      <div className=\"tds-checkbox-group-fields\">{children}</div>\n    </fieldset>\n  )\n}\n"],"names":["React"],"mappings":";;;;;AA0BA;;;;;;AAMG;AACG,SAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,oBAAoB,EACpB,IAAI,KAAK,IAAI,IAAI,wBAAwB,EACzC,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,qCAAqC,GAAG,SAAS,CAAC;AAC9E,IAAA,MAAM,aAAa,GAAG,CAAA,mBAAA,EAAsB,QAAQ,cAAc;IAElE,QACEA,8CACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,IAAI,SAAS,EAClC,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,gCAAgC,EAAA;YAC9DA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,6CAA6C,EACvD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,EAAE,QAAQ,CAAO,CAClD;AAEf;;;;"}

package/dist/components/combo-box/ComboBox.d.ts

@@ -1,4 +1,5 @@
 import "../button/btn.css";
+import "../input-text-base/index.css";
 import "./index.css";
 import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
 import React, { type ReactNode } from "react";
@@ -60,7 +61,7 @@ export type ComboBoxElementProps<T extends object = object> = CombineAriaPropsWi
  * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-combobox--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
  */
 export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger, onChange, onLoadMore, placeholder, readOnly, renderEmptyState, required, size, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
 export interface ComboBoxItemProps {

package/dist/components/combo-box/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"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"}

package/dist/components/combo-box/ComboBox.js

@@ -18,10 +18,13 @@ function resolveEmptyState(value) {
  * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-combobox--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
  */
 function ComboBox({ allowsEmptyCollection = true, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger, onChange, onLoadMore, placeholder, readOnly, renderEmptyState = "No results", required, size = "md", ...restProps }) {
-    const combinedClassName = classNames("tds-combo-box", { "tds-combo-box--lg": size === "lg" }, className);
+    const combinedClassName = classNames("tds-field tds-combo-box", {
+        "tds-combo-box--lg": size === "lg",
+        "tds-field--lg": size === "lg",
+    }, className);
     const loadMoreItem = onLoadMore && (React__default.createElement(ListBoxLoadMoreItem, { className: "tds-combo-box-load-more", isLoading: loadingState === "loadingMore", onLoadMore: onLoadMore },
         React__default.createElement("div", { "aria-label": "Loading more", role: "status" },
             React__default.createElement(LoadingSpinner, null))));
@@ -39,8 +42,8 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
     // `setValue: (Key|null) => void`), which isn't assignable to RAC's
     // single-function signature.
     React__default.createElement(ComboBox$1, { ...restProps, allowsEmptyCollection: allowsEmptyCollection, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultFilter: filter, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, menuTrigger: menuTrigger, onChange: onChange },
-        !hideLabel && React__default.createElement(Label, { className: "tds-combo-box-label" }, label),
-        React__default.createElement(Group, { className: "tds-combo-box-field" },
+        !hideLabel && React__default.createElement(Label, { className: "tds-field-label" }, label),
+        React__default.createElement(Group, { className: "tds-field-control tds-combo-box-field" },
             React__default.createElement(Input, { className: "tds-combo-box-input", placeholder: placeholder }),
             menuTrigger !== "focus" && !readOnly && (React__default.createElement(Button, { className: "tds-combo-box-button tds-btn tds-btn--infield" },
                 React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#down-caret" })))),
@@ -50,8 +53,8 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
                     : undefined },
                 renderChildren(),
                 loadMoreItem)),
-        description && (React__default.createElement(Text, { className: "tds-combo-box-description", slot: "description" },
-            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-combo-box-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+        description && (React__default.createElement(Text, { className: "tds-field-description", slot: "description" },
+            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
             description))));
 }
 /**

package/dist/components/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport LoadingSpinner from \"@components/internal/LoadingSpinner\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode } from \"react\"\nimport type {\n  ComboBoxProps as AriaComboBoxProps,\n  Key,\n  ListBoxItemProps,\n  ListBoxProps as AriaListBoxProps,\n  ListBoxSectionProps,\n} from \"react-aria-components\"\nimport {\n  Button,\n  Collection,\n  ComboBox as AriaComboBox,\n  Group,\n  Header,\n  Input,\n  Label,\n  ListBox,\n  ListBoxItem,\n  ListBoxLoadMoreItem,\n  ListBoxSection,\n  Popover,\n  Text,\n} from \"react-aria-components\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport type ComboBoxLoadingState =\n  | \"error\"\n  | \"filtering\"\n  | \"idle\"\n  | \"loading\"\n  | \"loadingMore\"\n  | \"sorting\"\n\ntype ComboBoxChildren<T extends object> = NonNullable<\n  AriaListBoxProps<T>[\"children\"]\n>\n\nexport interface ComboBoxProps<T extends object = object> {\n  /** The contents of the listbox. */\n  children: ComboBoxChildren<T>\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the field and trigger button. */\n  disabled?: boolean\n  /** Custom filter function for determining if an item should appear in the list. */\n  filter?: (textValue: string, inputValue: string) => boolean\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /**\n   * Async loading state for the listbox.\n   * - `\"loading\"`: while the collection is empty, replaces the empty state with a spinner.\n   * - `\"loadingMore\"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).\n   * - Other values render as `\"idle\"`.\n   */\n  loadingState?: ComboBoxLoadingState\n  /**\n   * Called when the selected value(s) change.\n   * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n   */\n  onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n  /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */\n  onLoadMore?: () => void\n  /** Placeholder text for the input. */\n  placeholder?: string\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** Content to display when there are no items in the list. Defaults to \"No results\". */\n  renderEmptyState?: ReactNode | (() => ReactNode)\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /** The size of the combo box. */\n  size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n  | \"allowsEmptyCollection\"\n  | \"defaultInputValue\"\n  | \"defaultItems\"\n  | \"defaultValue\"\n  | \"disabledKeys\"\n  | \"inputValue\"\n  | \"items\"\n  | \"menuTrigger\"\n  | \"name\"\n  | \"onInputChange\"\n  | \"selectionMode\"\n  | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    AriaComboBoxProps<T, \"single\" | \"multiple\">,\n    ComboBoxProps<T>,\n    AriaComboBoxPropsToOmit,\n    AriaComboBoxPropsToInclude\n  >\n\nfunction resolveEmptyState(value: ReactNode | (() => ReactNode)): ReactNode {\n  return typeof value === \"function\" ? value() : value\n}\n\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-combobox--docs | Storybook Documentation}\n */\nexport function ComboBox<T extends object>({\n  allowsEmptyCollection = true,\n  children,\n  className,\n  description,\n  disabled,\n  filter,\n  hideLabel,\n  invalid,\n  label,\n  loadingState,\n  menuTrigger,\n  onChange,\n  onLoadMore,\n  placeholder,\n  readOnly,\n  renderEmptyState = \"No results\",\n  required,\n  size = \"md\",\n  ...restProps\n}: ComboBoxElementProps<T>) {\n  const combinedClassName = classNames(\n    \"tds-combo-box\",\n    { \"tds-combo-box--lg\": size === \"lg\" },\n    className\n  )\n\n  const loadMoreItem = onLoadMore && (\n    <ListBoxLoadMoreItem\n      className=\"tds-combo-box-load-more\"\n      isLoading={loadingState === \"loadingMore\"}\n      onLoadMore={onLoadMore}\n    >\n      <div aria-label=\"Loading more\" role=\"status\">\n        <LoadingSpinner />\n      </div>\n    </ListBoxLoadMoreItem>\n  )\n\n  const renderChildren = () => {\n    if (typeof children === \"function\") {\n      return (\n        <Collection items={restProps.items ?? restProps.defaultItems}>\n          {children}\n        </Collection>\n      )\n    }\n    return children\n  }\n\n  return (\n    // React Aria's ComboBox is generic over selection mode (M). We instantiate\n    // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n    // accept both shapes. onChange still needs a cast because our type is a union\n    // of function types (to allow narrower handlers like\n    // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n    // single-function signature.\n    <AriaComboBox<T, \"single\" | \"multiple\">\n      {...restProps}\n      allowsEmptyCollection={allowsEmptyCollection}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultFilter={filter}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      menuTrigger={menuTrigger}\n      onChange={onChange as (value: Key | Key[] | null) => void}\n    >\n      {!hideLabel && <Label className=\"tds-combo-box-label\">{label}</Label>}\n      <Group className=\"tds-combo-box-field\">\n        <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n        {menuTrigger !== \"focus\" && !readOnly && (\n          <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n            <Icon aria-hidden symbol=\"general#down-caret\" />\n          </Button>\n        )}\n      </Group>\n      <Popover className=\"tds-combo-box-popover\">\n        <ListBox\n          className=\"tds-combo-box-list\"\n          renderEmptyState={\n            allowsEmptyCollection\n              ? () => (\n                  <div\n                    aria-label={\n                      loadingState === \"loading\" ? \"Loading\" : undefined\n                    }\n                    className=\"tds-combo-box-empty-state\"\n                    role={loadingState === \"loading\" ? \"status\" : undefined}\n                  >\n                    {loadingState === \"loading\" ? (\n                      <LoadingSpinner />\n                    ) : (\n                      resolveEmptyState(renderEmptyState)\n                    )}\n                  </div>\n                )\n              : undefined\n          }\n        >\n          {renderChildren()}\n          {loadMoreItem}\n        </ListBox>\n      </Popover>\n      {description && (\n        <Text className=\"tds-combo-box-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-combo-box-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaComboBox>\n  )\n}\n\nexport interface ComboBoxItemProps {\n  /** Disables the item. */\n  disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxItemProps<T>,\n    ComboBoxItemProps,\n    AriaListBoxItemPropsToOmit,\n    AriaListBoxItemPropsToInclude\n  >\n\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n */\nexport function ComboBoxItem<T extends object>({\n  className,\n  disabled,\n  ...restProps\n}: ComboBoxItemElementProps<T>) {\n  return (\n    <ListBoxItem\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-item\", className)}\n      isDisabled={disabled}\n    />\n  )\n}\n\nexport interface ComboBoxSectionProps {\n  /** The items rendered within the section. */\n  children: ReactNode\n  /** Optional heading text rendered above the section's items. */\n  title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxSectionProps<T>,\n    ComboBoxSectionProps,\n    never,\n    AriaListBoxSectionPropsToInclude\n  >\n\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n */\nexport function ComboBoxSection<T extends object>({\n  children,\n  className,\n  title,\n  ...restProps\n}: ComboBoxSectionElementProps<T>) {\n  return (\n    <ListBoxSection\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-section\", className)}\n    >\n      {title && (\n        <Header className=\"tds-combo-box-section-header\">{title}</Header>\n      )}\n      {children}\n    </ListBoxSection>\n  )\n}\n"],"names":["React","AriaComboBox"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../input-text-base/index.css\"\nimport \"./index.css\"\n\nimport LoadingSpinner from \"@components/internal/LoadingSpinner\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode } from \"react\"\nimport type {\n  ComboBoxProps as AriaComboBoxProps,\n  Key,\n  ListBoxItemProps,\n  ListBoxProps as AriaListBoxProps,\n  ListBoxSectionProps,\n} from \"react-aria-components\"\nimport {\n  Button,\n  Collection,\n  ComboBox as AriaComboBox,\n  Group,\n  Header,\n  Input,\n  Label,\n  ListBox,\n  ListBoxItem,\n  ListBoxLoadMoreItem,\n  ListBoxSection,\n  Popover,\n  Text,\n} from \"react-aria-components\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport type ComboBoxLoadingState =\n  | \"error\"\n  | \"filtering\"\n  | \"idle\"\n  | \"loading\"\n  | \"loadingMore\"\n  | \"sorting\"\n\ntype ComboBoxChildren<T extends object> = NonNullable<\n  AriaListBoxProps<T>[\"children\"]\n>\n\nexport interface ComboBoxProps<T extends object = object> {\n  /** The contents of the listbox. */\n  children: ComboBoxChildren<T>\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the field and trigger button. */\n  disabled?: boolean\n  /** Custom filter function for determining if an item should appear in the list. */\n  filter?: (textValue: string, inputValue: string) => boolean\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /**\n   * Async loading state for the listbox.\n   * - `\"loading\"`: while the collection is empty, replaces the empty state with a spinner.\n   * - `\"loadingMore\"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).\n   * - Other values render as `\"idle\"`.\n   */\n  loadingState?: ComboBoxLoadingState\n  /**\n   * Called when the selected value(s) change.\n   * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n   */\n  onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n  /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */\n  onLoadMore?: () => void\n  /** Placeholder text for the input. */\n  placeholder?: string\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** Content to display when there are no items in the list. Defaults to \"No results\". */\n  renderEmptyState?: ReactNode | (() => ReactNode)\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /** The size of the combo box. */\n  size?: ComboBoxSize\n}\n\ntype AriaComboBoxPropsToOmit = \"slot\"\n\ntype AriaComboBoxPropsToInclude =\n  | \"allowsEmptyCollection\"\n  | \"defaultInputValue\"\n  | \"defaultItems\"\n  | \"defaultValue\"\n  | \"disabledKeys\"\n  | \"inputValue\"\n  | \"items\"\n  | \"menuTrigger\"\n  | \"name\"\n  | \"onInputChange\"\n  | \"selectionMode\"\n  | \"value\"\n\nexport type ComboBoxElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    AriaComboBoxProps<T, \"single\" | \"multiple\">,\n    ComboBoxProps<T>,\n    AriaComboBoxPropsToOmit,\n    AriaComboBoxPropsToInclude\n  >\n\nfunction resolveEmptyState(value: ReactNode | (() => ReactNode)): ReactNode {\n  return typeof value === \"function\" ? value() : value\n}\n\n/**\n * A combo box combines a text input with a filterable popover\n * listbox, allowing users to type to search and select from a list of options.\n *\n * It supports both single and multiple selection (`selectionMode`), custom filtering,\n * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).\n * Collections can be either static or dynamic, managed via the `children`, `items`,\n * or `defaultItems` props. To construct the dropdown list, compose this component\n * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}\n */\nexport function ComboBox<T extends object>({\n  allowsEmptyCollection = true,\n  children,\n  className,\n  description,\n  disabled,\n  filter,\n  hideLabel,\n  invalid,\n  label,\n  loadingState,\n  menuTrigger,\n  onChange,\n  onLoadMore,\n  placeholder,\n  readOnly,\n  renderEmptyState = \"No results\",\n  required,\n  size = \"md\",\n  ...restProps\n}: ComboBoxElementProps<T>) {\n  const combinedClassName = classNames(\n    \"tds-field tds-combo-box\",\n    {\n      \"tds-combo-box--lg\": size === \"lg\",\n      \"tds-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const loadMoreItem = onLoadMore && (\n    <ListBoxLoadMoreItem\n      className=\"tds-combo-box-load-more\"\n      isLoading={loadingState === \"loadingMore\"}\n      onLoadMore={onLoadMore}\n    >\n      <div aria-label=\"Loading more\" role=\"status\">\n        <LoadingSpinner />\n      </div>\n    </ListBoxLoadMoreItem>\n  )\n\n  const renderChildren = () => {\n    if (typeof children === \"function\") {\n      return (\n        <Collection items={restProps.items ?? restProps.defaultItems}>\n          {children}\n        </Collection>\n      )\n    }\n    return children\n  }\n\n  return (\n    // React Aria's ComboBox is generic over selection mode (M). We instantiate\n    // it with the union \"single\" | \"multiple\" so value/defaultValue/selectionMode\n    // accept both shapes. onChange still needs a cast because our type is a union\n    // of function types (to allow narrower handlers like\n    // `setValue: (Key|null) => void`), which isn't assignable to RAC's\n    // single-function signature.\n    <AriaComboBox<T, \"single\" | \"multiple\">\n      {...restProps}\n      allowsEmptyCollection={allowsEmptyCollection}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultFilter={filter}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      menuTrigger={menuTrigger}\n      onChange={onChange as (value: Key | Key[] | null) => void}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-combo-box-field\">\n        <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n        {menuTrigger !== \"focus\" && !readOnly && (\n          <Button className=\"tds-combo-box-button tds-btn tds-btn--infield\">\n            <Icon aria-hidden symbol=\"general#down-caret\" />\n          </Button>\n        )}\n      </Group>\n      <Popover className=\"tds-combo-box-popover\">\n        <ListBox\n          className=\"tds-combo-box-list\"\n          renderEmptyState={\n            allowsEmptyCollection\n              ? () => (\n                  <div\n                    aria-label={\n                      loadingState === \"loading\" ? \"Loading\" : undefined\n                    }\n                    className=\"tds-combo-box-empty-state\"\n                    role={loadingState === \"loading\" ? \"status\" : undefined}\n                  >\n                    {loadingState === \"loading\" ? (\n                      <LoadingSpinner />\n                    ) : (\n                      resolveEmptyState(renderEmptyState)\n                    )}\n                  </div>\n                )\n              : undefined\n          }\n        >\n          {renderChildren()}\n          {loadMoreItem}\n        </ListBox>\n      </Popover>\n      {description && (\n        <Text className=\"tds-field-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaComboBox>\n  )\n}\n\nexport interface ComboBoxItemProps {\n  /** Disables the item. */\n  disabled?: boolean\n}\n\ntype AriaListBoxItemPropsToOmit = \"isDisabled\"\n\ntype AriaListBoxItemPropsToInclude = \"onAction\" | \"textValue\" | \"value\"\n\nexport type ComboBoxItemElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxItemProps<T>,\n    ComboBoxItemProps,\n    AriaListBoxItemPropsToOmit,\n    AriaListBoxItemPropsToInclude\n  >\n\n/**\n * A selectable option within a {@link ComboBox}. Renders as a listbox item.\n *\n * Provide an `id` (or `key` when rendering from a collection) to identify the\n * option, and `textValue` when the visible children are not plain text so\n * type-ahead and screen readers have a stable label to use.\n *\n * @component\n */\nexport function ComboBoxItem<T extends object>({\n  className,\n  disabled,\n  ...restProps\n}: ComboBoxItemElementProps<T>) {\n  return (\n    <ListBoxItem\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-item\", className)}\n      isDisabled={disabled}\n    />\n  )\n}\n\nexport interface ComboBoxSectionProps {\n  /** The items rendered within the section. */\n  children: ReactNode\n  /** Optional heading text rendered above the section's items. */\n  title?: string\n}\n\ntype AriaListBoxSectionPropsToInclude = \"dependencies\"\n\nexport type ComboBoxSectionElementProps<T extends object = object> =\n  CombineAriaPropsWithCustomProps<\n    ListBoxSectionProps<T>,\n    ComboBoxSectionProps,\n    never,\n    AriaListBoxSectionPropsToInclude\n  >\n\n/**\n * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders\n * an optional `title` heading above its items.\n *\n * @component\n */\nexport function ComboBoxSection<T extends object>({\n  children,\n  className,\n  title,\n  ...restProps\n}: ComboBoxSectionElementProps<T>) {\n  return (\n    <ListBoxSection\n      {...restProps}\n      className={classNames(\"tds-combo-box-list-section\", className)}\n    >\n      {title && (\n        <Header className=\"tds-combo-box-section-header\">{title}</Header>\n      )}\n      {children}\n    </ListBoxSection>\n  )\n}\n"],"names":["React","AriaComboBox"],"mappings":"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"}

package/dist/components/date-picker/DatePicker.d.ts

@@ -1,4 +1,5 @@
 import "../button/btn.css";
+import "../input-text-base/index.css";
 import "./index.css";
 import { type DateValue } from "@internationalized/date";
 import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
@@ -53,7 +54,7 @@ export type DatePickerElementProps = CombineAriaPropsWithCustomProps<AriaDatePic
  * individual dates as unavailable via `isDateUnavailable`.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-datepicker--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-datepicker--docs | Storybook Documentation}
  */
 export declare function DatePicker({ className, description, disabled, firstDayOfWeek, hideLabel, invalid, isDateUnavailable, label, max, min, onChange, readOnly, required, size, value, ...restProps }: DatePickerElementProps): React.JSX.Element;
 export declare namespace DatePicker {

package/dist/components/date-picker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,aAAa,CAAA;AAEpB,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,EAWL,KAAK,eAAe,IAAI,mBAAmB,EAS5C,MAAM,uBAAuB,CAAA;AAU9B,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAA;AAepD,MAAM,WAAW,eAAe;IAC9B,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IACtE,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAA;IAChD,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;CACnC;AAED,KAAK,yBAAyB,GAC1B,UAAU,GACV,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,GACd,WAAW,GACX,cAAc,GACd,kBAAkB,GAClB,qBAAqB,GACrB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,4BAA4B,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;AAEtE,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,CAClE,mBAAmB,CAAC,SAAS,CAAC,EAC9B,eAAe,EACf,yBAAyB,EACzB,4BAA4B,CAC7B,CAAA;AAoOD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,KAAK,EACL,GAAG,SAAS,EACb,EAAE,sBAAsB,qBAqFxB;yBAtGe,UAAU"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,8BAA8B,CAAA;AACrC,OAAO,aAAa,CAAA;AAEpB,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,EAWL,KAAK,eAAe,IAAI,mBAAmB,EAS5C,MAAM,uBAAuB,CAAA;AAU9B,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAA;AAepD,MAAM,WAAW,eAAe;IAC9B,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IACtE,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAA;IAChD,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,uEAAuE;IACvE,GAAG,CAAC,EAAE,mBAAmB,CAAA;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;CACnC;AAED,KAAK,yBAAyB,GAC1B,UAAU,GACV,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,GACd,WAAW,GACX,cAAc,GACd,kBAAkB,GAClB,qBAAqB,GACrB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,4BAA4B,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;AAEtE,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,CAClE,mBAAmB,CAAC,SAAS,CAAC,EAC9B,eAAe,EACf,yBAAyB,EACzB,4BAA4B,CAC7B,CAAA;AAoOD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,KAAK,EACL,GAAG,SAAS,EACb,EAAE,sBAAsB,qBAwFxB;yBAzGe,UAAU"}

package/dist/components/date-picker/DatePicker.js

@@ -1,139 +1,11 @@
-import { CalendarDate as $35ea8db9cb2ccb90$export$99faa760c7908e4f } from './../../ext/@internationalized/date/dist/CalendarDate.js';
 import { today as $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3, getLocalTimeZone as $14e0f24ef4ac5c92$export$aa8b41735afcabd2 } from './../../ext/@internationalized/date/dist/queries.js';
-import { parseDate as $fae977aafc393c5c$export$6b862160d295c8e } from './../../ext/@internationalized/date/dist/string.js';
-import Icon from '../../utilities/Icon.js';
-import classNames from 'classnames';
-import React__default, { useState, useContext } from 'react';
-import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button, Popover, Dialog, Calendar, Text, CalendarStateContext, ListBox, ListBoxItem, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
+import '@planningcenter/icons/sprites/general.svg';
+import '@planningcenter/icons/symbol';
+import 'react';
+import 'classnames';
+import 'react-aria-components';
 
 const _today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
-const MONTHS = Array.from({ length: 12 }, (_, i) => i);
-const YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i);
-const shortMonthFormatter = new Intl.DateTimeFormat(undefined, {
-    month: "short",
-});
-const longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: "long" });
-function toCalendarDate(input) {
-    if (input === null)
-        return null;
-    if (input === undefined)
-        return undefined;
-    if (typeof input === "object" && "calendar" in input) {
-        return input;
-    }
-    return $fae977aafc393c5c$export$6b862160d295c8e(input);
-}
-function DatePickerOverlay({ children, variant, }) {
-    return (React__default.createElement("div", { "aria-label": `Select ${variant}`, "aria-modal": "true", className: `tds-date-picker-overlay tds-date-picker-overlay--${variant}`, role: "dialog" }, children));
-}
-function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
-    // Read and drive Calendar's focused date through its state context. This
-    // lets react-aria-components own the "open to selected month" behavior:
-    // when the popover opens, Calendar mounts and auto-focuses the DatePicker's
-    // current value (whether typed into the input segments or set via `value`).
-    const state = useContext(CalendarStateContext);
-    const focusedDate = state.focusedDate;
-    const today = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
-    function handleOverlaySelectionChange(keys, onSelect) {
-        if (keys === "all")
-            return;
-        const [first] = Array.from(keys);
-        if (first !== undefined)
-            onSelect(Number(first));
-    }
-    function handleMonthSelect(monthIndex) {
-        state.setFocusedDate(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(focusedDate.year, monthIndex + 1, 1));
-        setActiveOverlay(null);
-    }
-    function handleYearSelect(year) {
-        state.setFocusedDate(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(year, focusedDate.month, 1));
-        setActiveOverlay(null);
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("header", { className: "tds-date-picker-calendar-header" },
-            React__default.createElement("div", { className: "tds-date-picker-calendar-heading" },
-                React__default.createElement(Button, { "aria-expanded": activeOverlay === "month", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => setActiveOverlay(activeOverlay === "month" ? null : "month"), slot: null }, longMonthFormatter.format(new Date(2000, focusedDate.month - 1, 1))),
-                React__default.createElement(Button, { "aria-expanded": activeOverlay === "year", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => setActiveOverlay(activeOverlay === "year" ? null : "year"), slot: null }, focusedDate.year)),
-            activeOverlay ? (React__default.createElement(Button, { "aria-label": `Close ${activeOverlay} picker`, className: "tds-date-picker-calendar-nav", onPress: () => setActiveOverlay(null), slot: null },
-                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#x" }))) : (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Button, { "aria-label": "Go to today", className: "tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg", style: {
-                        visibility: focusedDate.month === today.month &&
-                            focusedDate.year === today.year
-                            ? "hidden"
-                            : undefined,
-                    }, onPress: () => {
-                        state.setFocusedDate(today);
-                        state.setFocused(true);
-                    }, slot: null },
-                    React__default.createElement("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16", className: "symbol" },
-                        React__default.createElement("path", { d: "M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555" }),
-                        React__default.createElement("circle", { cx: "8", cy: "9.75", r: "2.25" }))),
-                React__default.createElement(Button, { "aria-label": "Previous month", className: "tds-date-picker-calendar-nav", slot: "previous" },
-                    React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#left-chevron" })),
-                React__default.createElement(Button, { "aria-label": "Next month", className: "tds-date-picker-calendar-nav", slot: "next" },
-                    React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#right-chevron" }))))),
-        React__default.createElement("div", { className: "tds-date-picker-calendar-body" },
-            activeOverlay === "month" && (React__default.createElement(DatePickerOverlay, { variant: "month" },
-                React__default.createElement(ListBox, { "aria-label": "Months", 
-                    // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices
-                    autoFocus: true, className: "tds-date-picker-overlay-list", disallowEmptySelection: true, escapeKeyBehavior: "none", layout: "grid", onSelectionChange: (keys) => handleOverlaySelectionChange(keys, handleMonthSelect), selectedKeys: [String(focusedDate.month - 1)], selectionMode: "single" }, MONTHS.map((i) => {
-                    const date = new Date(2000, i, 1);
-                    const shortMonth = shortMonthFormatter.format(date);
-                    const longMonth = longMonthFormatter.format(date);
-                    return (React__default.createElement(ListBoxItem, { className: "tds-date-picker-overlay-cell", id: String(i), key: i, "aria-label": longMonth, textValue: longMonth }, shortMonth));
-                })))),
-            activeOverlay === "year" && (React__default.createElement(DatePickerOverlay, { variant: "year" },
-                React__default.createElement(ListBox, { "aria-label": "Years", 
-                    // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices
-                    autoFocus: true, className: "tds-date-picker-overlay-list", disallowEmptySelection: true, escapeKeyBehavior: "none", layout: "grid", onSelectionChange: (keys) => handleOverlaySelectionChange(keys, handleYearSelect), selectedKeys: [String(focusedDate.year)], selectionMode: "single" }, YEARS.map((year) => (React__default.createElement(ListBoxItem, { className: "tds-date-picker-overlay-cell", id: String(year), key: year, textValue: String(year) }, year)))))),
-            React__default.createElement(CalendarGrid, { className: "tds-date-picker-calendar-grid" },
-                React__default.createElement(CalendarGridHeader, { className: "tds-date-picker-calendar-grid-header" }, (day) => (React__default.createElement(CalendarHeaderCell, { className: "tds-date-picker-calendar-header-cell" }, day))),
-                React__default.createElement(CalendarGridBody, { className: "tds-date-picker-calendar-grid-body" }, (date) => (React__default.createElement(CalendarCell, { className: "tds-date-picker-calendar-cell-button", date: date })))))));
-}
-/**
- * A date picker allows a user to select a particular date.
- * The input supports keyboard entry of individual day, month, and year segments;
- * the calendar offers month and year quick-pick overlays plus a "go to today" shortcut.
- *
- * The date picker automatically displays the value and calendar from the user's locale,
- * and does not require a specific date format.
- *
- * Values are exchanged as `DateValue` from `@internationalized/date`, but
- * `value`, `min`, and `max` also accept ISO date strings (`"YYYY-MM-DD"`) for
- * convenience. Restrict the selectable range with `min`/`max`, or mark
- * individual dates as unavailable via `isDateUnavailable`.
- *
- * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-datepicker--docs | Storybook Documentation}
- */
-function DatePicker({ className, description, disabled, firstDayOfWeek, hideLabel, invalid, isDateUnavailable, label, max, min, onChange, readOnly, required, size = "md", value, ...restProps }) {
-    const convertedValue = toCalendarDate(value);
-    const convertedMin = toCalendarDate(min) ?? undefined;
-    const convertedMax = toCalendarDate(max) ?? undefined;
-    const combinedClassName = classNames("tds-date-picker", { "tds-date-picker--lg": size === "lg" }, className);
-    const [activeOverlay, setActiveOverlay] = useState(null);
-    return (React__default.createElement(DatePicker$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, isDateUnavailable: isDateUnavailable, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: convertedMax, minValue: convertedMin, onChange: onChange ?? undefined, onOpenChange: (isOpen) => {
-            if (!isOpen)
-                setActiveOverlay(null);
-        }, value: convertedValue },
-        !hideLabel && React__default.createElement(Label, { className: "tds-date-picker-label" }, label),
-        React__default.createElement(Group, { className: "tds-date-picker-field" },
-            React__default.createElement(DateInput, { className: "tds-date-picker-input" }, (segment) => (React__default.createElement(DateSegment, { className: segment.type === "literal"
-                    ? "tds-date-picker-segment-separator"
-                    : "tds-date-picker-segment", segment: segment }))),
-            React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-date-picker-button" },
-                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#calendar" }))),
-        React__default.createElement(Popover, { className: classNames("tds-date-picker-popover", {
-                "tds-date-picker-popover--lg": size === "lg",
-            }), offset: 2 },
-            React__default.createElement(Dialog, null,
-                React__default.createElement(Calendar, { className: "tds-date-picker-calendar", firstDayOfWeek: firstDayOfWeek },
-                    React__default.createElement(DatePickerCalendarBody, { activeOverlay: activeOverlay, setActiveOverlay: setActiveOverlay })))),
-        description && (React__default.createElement(Text, { elementType: "p", className: "tds-date-picker-description", slot: "description" },
-            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-date-picker-description-invalid-icon", symbol: "general#exclamation-triangle" }),
-            description))));
-}
-DatePicker.displayName = "DatePicker";
-
-export { DatePicker };
+Array.from({ length: 12 }, (_, i) => i);
+Array.from({ length: 131 }, (_, i) => _today.year - 100 + i);
 //# sourceMappingURL=DatePicker.js.map

package/dist/components/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport {\n  CalendarDate,\n  type DateValue,\n  getLocalTimeZone,\n  parseDate,\n  today as todayCalendar,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext, useState } from \"react\"\nimport {\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHeader,\n  CalendarHeaderCell,\n  CalendarStateContext,\n  DateInput,\n  DatePicker as AriaDatePicker,\n  type DatePickerProps as AriaDatePickerProps,\n  DateSegment,\n  Dialog,\n  Group,\n  Label,\n  ListBox,\n  ListBoxItem,\n  Popover,\n  Text,\n} from \"react-aria-components\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n  month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nexport type DatePickerSize = \"md\" | \"lg\"\n\nexport type DatePickerDateValue = DateValue | string\n\nfunction toCalendarDate(\n  input: DatePickerDateValue | null | undefined\n): DateValue | null | undefined {\n  if (input === null) return null\n  if (input === undefined) return undefined\n\n  if (typeof input === \"object\" && \"calendar\" in input) {\n    return input\n  }\n\n  return parseDate(input)\n}\n\nexport interface DatePickerProps {\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the input and calendar button. */\n  disabled?: boolean\n  /** Sets the first day of the week in the calendar. Defaults to locale-appropriate value. */\n  firstDayOfWeek?: \"fri\" | \"mon\" | \"sat\" | \"sun\" | \"thu\" | \"tue\" | \"wed\"\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Callback that returns `true` for dates that should be visible but not selectable. */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /** Accessible label for the field. */\n  label: string\n  /** Maximum selectable date. Accepts a DateValue or ISO date string. */\n  max?: DatePickerDateValue\n  /** Minimum selectable date. Accepts a DateValue or ISO date string. */\n  min?: DatePickerDateValue\n  /** Called when the selected date changes. */\n  onChange?: (value: DateValue | null) => void\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /** The size of the date picker. */\n  size?: DatePickerSize\n  /** The controlled value. Accepts a DateValue or ISO date string. */\n  value?: DatePickerDateValue | null\n}\n\ntype AriaDatePickerPropsToOmit =\n  | \"children\"\n  | \"defaultOpen\"\n  | \"defaultValue\"\n  | \"granularity\"\n  | \"hideTimeZone\"\n  | \"hourCycle\"\n  | \"pageBehavior\"\n  | \"placeholderValue\"\n  | \"shouldCloseOnSelect\"\n  | \"shouldForceLeadingZeros\"\n  | \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" | \"name\" | \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n  AriaDatePickerProps<DateValue>,\n  DatePickerProps,\n  AriaDatePickerPropsToOmit,\n  AriaDatePickerPropsToInclude\n>\n\nfunction DatePickerOverlay({\n  children,\n  variant,\n}: {\n  children: ReactNode\n  variant: \"month\" | \"year\"\n}) {\n  return (\n    <div\n      aria-label={`Select ${variant}`}\n      aria-modal=\"true\"\n      className={`tds-date-picker-overlay tds-date-picker-overlay--${variant}`}\n      role=\"dialog\"\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction DatePickerCalendarBody({\n  activeOverlay,\n  setActiveOverlay,\n}: {\n  activeOverlay: \"month\" | \"year\" | null\n  setActiveOverlay: (overlay: \"month\" | \"year\" | null) => void\n}) {\n  // Read and drive Calendar's focused date through its state context. This\n  // lets react-aria-components own the \"open to selected month\" behavior:\n  // when the popover opens, Calendar mounts and auto-focuses the DatePicker's\n  // current value (whether typed into the input segments or set via `value`).\n  const state = useContext(CalendarStateContext)!\n  const focusedDate = state.focusedDate\n  const today = todayCalendar(getLocalTimeZone())\n\n  function handleOverlaySelectionChange(\n    keys: \"all\" | Set<number | string>,\n    onSelect: (key: number) => void\n  ) {\n    if (keys === \"all\") return\n    const [first] = Array.from(keys)\n    if (first !== undefined) onSelect(Number(first))\n  }\n\n  function handleMonthSelect(monthIndex: number) {\n    state.setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n    setActiveOverlay(null)\n  }\n\n  function handleYearSelect(year: number) {\n    state.setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n    setActiveOverlay(null)\n  }\n\n  return (\n    <>\n      <header className=\"tds-date-picker-calendar-header\">\n        <div className=\"tds-date-picker-calendar-heading\">\n          <Button\n            aria-expanded={activeOverlay === \"month\"}\n            aria-haspopup=\"dialog\"\n            className=\"tds-date-picker-calendar-overlay-trigger\"\n            onPress={() =>\n              setActiveOverlay(activeOverlay === \"month\" ? null : \"month\")\n            }\n            slot={null}\n          >\n            {longMonthFormatter.format(\n              new Date(2000, focusedDate.month - 1, 1)\n            )}\n          </Button>\n          <Button\n            aria-expanded={activeOverlay === \"year\"}\n            aria-haspopup=\"dialog\"\n            className=\"tds-date-picker-calendar-overlay-trigger\"\n            onPress={() =>\n              setActiveOverlay(activeOverlay === \"year\" ? null : \"year\")\n            }\n            slot={null}\n          >\n            {focusedDate.year}\n          </Button>\n        </div>\n        {activeOverlay ? (\n          <Button\n            aria-label={`Close ${activeOverlay} picker`}\n            className=\"tds-date-picker-calendar-nav\"\n            onPress={() => setActiveOverlay(null)}\n            slot={null}\n          >\n            <Icon aria-hidden symbol=\"general#x\" />\n          </Button>\n        ) : (\n          <>\n            <Button\n              aria-label=\"Go to today\"\n              className=\"tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg\"\n              style={{\n                visibility:\n                  focusedDate.month === today.month &&\n                  focusedDate.year === today.year\n                    ? \"hidden\"\n                    : undefined,\n              }}\n              onPress={() => {\n                state.setFocusedDate(today)\n                state.setFocused(true)\n              }}\n              slot={null}\n            >\n              {/* TODO: Add to icon library and use Icon once icon is decided on */}\n              <svg\n                aria-hidden\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 16 16\"\n                className=\"symbol\"\n              >\n                <path d=\"M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555\" />\n                <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n              </svg>\n            </Button>\n            <Button\n              aria-label=\"Previous month\"\n              className=\"tds-date-picker-calendar-nav\"\n              slot=\"previous\"\n            >\n              <Icon aria-hidden symbol=\"general#left-chevron\" />\n            </Button>\n            <Button\n              aria-label=\"Next month\"\n              className=\"tds-date-picker-calendar-nav\"\n              slot=\"next\"\n            >\n              <Icon aria-hidden symbol=\"general#right-chevron\" />\n            </Button>\n          </>\n        )}\n      </header>\n      <div className=\"tds-date-picker-calendar-body\">\n        {activeOverlay === \"month\" && (\n          <DatePickerOverlay variant=\"month\">\n            <ListBox\n              aria-label=\"Months\"\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n              autoFocus\n              className=\"tds-date-picker-overlay-list\"\n              disallowEmptySelection\n              escapeKeyBehavior=\"none\"\n              layout=\"grid\"\n              onSelectionChange={(keys) =>\n                handleOverlaySelectionChange(keys, handleMonthSelect)\n              }\n              selectedKeys={[String(focusedDate.month - 1)]}\n              selectionMode=\"single\"\n            >\n              {MONTHS.map((i) => {\n                const date = new Date(2000, i, 1)\n                const shortMonth = shortMonthFormatter.format(date)\n                const longMonth = longMonthFormatter.format(date)\n\n                return (\n                  <ListBoxItem\n                    className=\"tds-date-picker-overlay-cell\"\n                    id={String(i)}\n                    key={i}\n                    aria-label={longMonth}\n                    textValue={longMonth}\n                  >\n                    {shortMonth}\n                  </ListBoxItem>\n                )\n              })}\n            </ListBox>\n          </DatePickerOverlay>\n        )}\n        {activeOverlay === \"year\" && (\n          <DatePickerOverlay variant=\"year\">\n            <ListBox\n              aria-label=\"Years\"\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n              autoFocus\n              className=\"tds-date-picker-overlay-list\"\n              disallowEmptySelection\n              escapeKeyBehavior=\"none\"\n              layout=\"grid\"\n              onSelectionChange={(keys) =>\n                handleOverlaySelectionChange(keys, handleYearSelect)\n              }\n              selectedKeys={[String(focusedDate.year)]}\n              selectionMode=\"single\"\n            >\n              {YEARS.map((year) => (\n                <ListBoxItem\n                  className=\"tds-date-picker-overlay-cell\"\n                  id={String(year)}\n                  key={year}\n                  textValue={String(year)}\n                >\n                  {year}\n                </ListBoxItem>\n              ))}\n            </ListBox>\n          </DatePickerOverlay>\n        )}\n        <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n          <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n            {(day) => (\n              <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n                {day}\n              </CalendarHeaderCell>\n            )}\n          </CalendarGridHeader>\n          <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n            {(date) => (\n              <CalendarCell\n                className=\"tds-date-picker-calendar-cell-button\"\n                date={date}\n              />\n            )}\n          </CalendarGridBody>\n        </CalendarGrid>\n      </div>\n    </>\n  )\n}\n\n/**\n * A date picker allows a user to select a particular date.\n * The input supports keyboard entry of individual day, month, and year segments;\n * the calendar offers month and year quick-pick overlays plus a \"go to today\" shortcut.\n *\n * The date picker automatically displays the value and calendar from the user's locale,\n * and does not require a specific date format.\n *\n * Values are exchanged as `DateValue` from `@internationalized/date`, but\n * `value`, `min`, and `max` also accept ISO date strings (`\"YYYY-MM-DD\"`) for\n * convenience. Restrict the selectable range with `min`/`max`, or mark\n * individual dates as unavailable via `isDateUnavailable`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-datepicker--docs | Storybook Documentation}\n */\nexport function DatePicker({\n  className,\n  description,\n  disabled,\n  firstDayOfWeek,\n  hideLabel,\n  invalid,\n  isDateUnavailable,\n  label,\n  max,\n  min,\n  onChange,\n  readOnly,\n  required,\n  size = \"md\",\n  value,\n  ...restProps\n}: DatePickerElementProps) {\n  const convertedValue = toCalendarDate(value)\n  const convertedMin = toCalendarDate(min) ?? undefined\n  const convertedMax = toCalendarDate(max) ?? undefined\n\n  const combinedClassName = classNames(\n    \"tds-date-picker\",\n    { \"tds-date-picker--lg\": size === \"lg\" },\n    className\n  )\n\n  const [activeOverlay, setActiveOverlay] = useState<\"month\" | \"year\" | null>(\n    null\n  )\n\n  return (\n    <AriaDatePicker\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      isDateUnavailable={isDateUnavailable}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={convertedMax}\n      minValue={convertedMin}\n      onChange={onChange ?? undefined}\n      onOpenChange={(isOpen) => {\n        if (!isOpen) setActiveOverlay(null)\n      }}\n      value={convertedValue}\n    >\n      {!hideLabel && <Label className=\"tds-date-picker-label\">{label}</Label>}\n      <Group className=\"tds-date-picker-field\">\n        <DateInput className=\"tds-date-picker-input\">\n          {(segment) => (\n            <DateSegment\n              className={\n                segment.type === \"literal\"\n                  ? \"tds-date-picker-segment-separator\"\n                  : \"tds-date-picker-segment\"\n              }\n              segment={segment}\n            />\n          )}\n        </DateInput>\n        <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n          <Icon aria-hidden symbol=\"general#calendar\" />\n        </Button>\n      </Group>\n      <Popover\n        className={classNames(\"tds-date-picker-popover\", {\n          \"tds-date-picker-popover--lg\": size === \"lg\",\n        })}\n        offset={2}\n      >\n        <Dialog>\n          <Calendar\n            className=\"tds-date-picker-calendar\"\n            firstDayOfWeek={firstDayOfWeek}\n          >\n            <DatePickerCalendarBody\n              activeOverlay={activeOverlay}\n              setActiveOverlay={setActiveOverlay}\n            />\n          </Calendar>\n        </Dialog>\n      </Popover>\n      {description && (\n        <Text\n          elementType=\"p\"\n          className=\"tds-date-picker-description\"\n          slot=\"description\"\n        >\n          <Icon\n            aria-hidden\n            className=\"tds-date-picker-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaDatePicker>\n  )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone","parseDate","React","CalendarDate","AriaDatePicker"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../input-text-base/index.css\"\nimport \"./index.css\"\n\nimport {\n  CalendarDate,\n  type DateValue,\n  getLocalTimeZone,\n  parseDate,\n  today as todayCalendar,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext, useState } from \"react\"\nimport {\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHeader,\n  CalendarHeaderCell,\n  CalendarStateContext,\n  DateInput,\n  DatePicker as AriaDatePicker,\n  type DatePickerProps as AriaDatePickerProps,\n  DateSegment,\n  Dialog,\n  Group,\n  Label,\n  ListBox,\n  ListBoxItem,\n  Popover,\n  Text,\n} from \"react-aria-components\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n  month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nexport type DatePickerSize = \"md\" | \"lg\"\n\nexport type DatePickerDateValue = DateValue | string\n\nfunction toCalendarDate(\n  input: DatePickerDateValue | null | undefined\n): DateValue | null | undefined {\n  if (input === null) return null\n  if (input === undefined) return undefined\n\n  if (typeof input === \"object\" && \"calendar\" in input) {\n    return input\n  }\n\n  return parseDate(input)\n}\n\nexport interface DatePickerProps {\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the input and calendar button. */\n  disabled?: boolean\n  /** Sets the first day of the week in the calendar. Defaults to locale-appropriate value. */\n  firstDayOfWeek?: \"fri\" | \"mon\" | \"sat\" | \"sun\" | \"thu\" | \"tue\" | \"wed\"\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Callback that returns `true` for dates that should be visible but not selectable. */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /** Accessible label for the field. */\n  label: string\n  /** Maximum selectable date. Accepts a DateValue or ISO date string. */\n  max?: DatePickerDateValue\n  /** Minimum selectable date. Accepts a DateValue or ISO date string. */\n  min?: DatePickerDateValue\n  /** Called when the selected date changes. */\n  onChange?: (value: DateValue | null) => void\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /** The size of the date picker. */\n  size?: DatePickerSize\n  /** The controlled value. Accepts a DateValue or ISO date string. */\n  value?: DatePickerDateValue | null\n}\n\ntype AriaDatePickerPropsToOmit =\n  | \"children\"\n  | \"defaultOpen\"\n  | \"defaultValue\"\n  | \"granularity\"\n  | \"hideTimeZone\"\n  | \"hourCycle\"\n  | \"pageBehavior\"\n  | \"placeholderValue\"\n  | \"shouldCloseOnSelect\"\n  | \"shouldForceLeadingZeros\"\n  | \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" | \"name\" | \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n  AriaDatePickerProps<DateValue>,\n  DatePickerProps,\n  AriaDatePickerPropsToOmit,\n  AriaDatePickerPropsToInclude\n>\n\nfunction DatePickerOverlay({\n  children,\n  variant,\n}: {\n  children: ReactNode\n  variant: \"month\" | \"year\"\n}) {\n  return (\n    <div\n      aria-label={`Select ${variant}`}\n      aria-modal=\"true\"\n      className={`tds-date-picker-overlay tds-date-picker-overlay--${variant}`}\n      role=\"dialog\"\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction DatePickerCalendarBody({\n  activeOverlay,\n  setActiveOverlay,\n}: {\n  activeOverlay: \"month\" | \"year\" | null\n  setActiveOverlay: (overlay: \"month\" | \"year\" | null) => void\n}) {\n  // Read and drive Calendar's focused date through its state context. This\n  // lets react-aria-components own the \"open to selected month\" behavior:\n  // when the popover opens, Calendar mounts and auto-focuses the DatePicker's\n  // current value (whether typed into the input segments or set via `value`).\n  const state = useContext(CalendarStateContext)!\n  const focusedDate = state.focusedDate\n  const today = todayCalendar(getLocalTimeZone())\n\n  function handleOverlaySelectionChange(\n    keys: \"all\" | Set<number | string>,\n    onSelect: (key: number) => void\n  ) {\n    if (keys === \"all\") return\n    const [first] = Array.from(keys)\n    if (first !== undefined) onSelect(Number(first))\n  }\n\n  function handleMonthSelect(monthIndex: number) {\n    state.setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n    setActiveOverlay(null)\n  }\n\n  function handleYearSelect(year: number) {\n    state.setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n    setActiveOverlay(null)\n  }\n\n  return (\n    <>\n      <header className=\"tds-date-picker-calendar-header\">\n        <div className=\"tds-date-picker-calendar-heading\">\n          <Button\n            aria-expanded={activeOverlay === \"month\"}\n            aria-haspopup=\"dialog\"\n            className=\"tds-date-picker-calendar-overlay-trigger\"\n            onPress={() =>\n              setActiveOverlay(activeOverlay === \"month\" ? null : \"month\")\n            }\n            slot={null}\n          >\n            {longMonthFormatter.format(\n              new Date(2000, focusedDate.month - 1, 1)\n            )}\n          </Button>\n          <Button\n            aria-expanded={activeOverlay === \"year\"}\n            aria-haspopup=\"dialog\"\n            className=\"tds-date-picker-calendar-overlay-trigger\"\n            onPress={() =>\n              setActiveOverlay(activeOverlay === \"year\" ? null : \"year\")\n            }\n            slot={null}\n          >\n            {focusedDate.year}\n          </Button>\n        </div>\n        {activeOverlay ? (\n          <Button\n            aria-label={`Close ${activeOverlay} picker`}\n            className=\"tds-date-picker-calendar-nav\"\n            onPress={() => setActiveOverlay(null)}\n            slot={null}\n          >\n            <Icon aria-hidden symbol=\"general#x\" />\n          </Button>\n        ) : (\n          <>\n            <Button\n              aria-label=\"Go to today\"\n              className=\"tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg\"\n              style={{\n                visibility:\n                  focusedDate.month === today.month &&\n                  focusedDate.year === today.year\n                    ? \"hidden\"\n                    : undefined,\n              }}\n              onPress={() => {\n                state.setFocusedDate(today)\n                state.setFocused(true)\n              }}\n              slot={null}\n            >\n              {/* TODO: Add to icon library and use Icon once icon is decided on */}\n              <svg\n                aria-hidden\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 16 16\"\n                className=\"symbol\"\n              >\n                <path d=\"M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555\" />\n                <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n              </svg>\n            </Button>\n            <Button\n              aria-label=\"Previous month\"\n              className=\"tds-date-picker-calendar-nav\"\n              slot=\"previous\"\n            >\n              <Icon aria-hidden symbol=\"general#left-chevron\" />\n            </Button>\n            <Button\n              aria-label=\"Next month\"\n              className=\"tds-date-picker-calendar-nav\"\n              slot=\"next\"\n            >\n              <Icon aria-hidden symbol=\"general#right-chevron\" />\n            </Button>\n          </>\n        )}\n      </header>\n      <div className=\"tds-date-picker-calendar-body\">\n        {activeOverlay === \"month\" && (\n          <DatePickerOverlay variant=\"month\">\n            <ListBox\n              aria-label=\"Months\"\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n              autoFocus\n              className=\"tds-date-picker-overlay-list\"\n              disallowEmptySelection\n              escapeKeyBehavior=\"none\"\n              layout=\"grid\"\n              onSelectionChange={(keys) =>\n                handleOverlaySelectionChange(keys, handleMonthSelect)\n              }\n              selectedKeys={[String(focusedDate.month - 1)]}\n              selectionMode=\"single\"\n            >\n              {MONTHS.map((i) => {\n                const date = new Date(2000, i, 1)\n                const shortMonth = shortMonthFormatter.format(date)\n                const longMonth = longMonthFormatter.format(date)\n\n                return (\n                  <ListBoxItem\n                    className=\"tds-date-picker-overlay-cell\"\n                    id={String(i)}\n                    key={i}\n                    aria-label={longMonth}\n                    textValue={longMonth}\n                  >\n                    {shortMonth}\n                  </ListBoxItem>\n                )\n              })}\n            </ListBox>\n          </DatePickerOverlay>\n        )}\n        {activeOverlay === \"year\" && (\n          <DatePickerOverlay variant=\"year\">\n            <ListBox\n              aria-label=\"Years\"\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n              autoFocus\n              className=\"tds-date-picker-overlay-list\"\n              disallowEmptySelection\n              escapeKeyBehavior=\"none\"\n              layout=\"grid\"\n              onSelectionChange={(keys) =>\n                handleOverlaySelectionChange(keys, handleYearSelect)\n              }\n              selectedKeys={[String(focusedDate.year)]}\n              selectionMode=\"single\"\n            >\n              {YEARS.map((year) => (\n                <ListBoxItem\n                  className=\"tds-date-picker-overlay-cell\"\n                  id={String(year)}\n                  key={year}\n                  textValue={String(year)}\n                >\n                  {year}\n                </ListBoxItem>\n              ))}\n            </ListBox>\n          </DatePickerOverlay>\n        )}\n        <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n          <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n            {(day) => (\n              <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n                {day}\n              </CalendarHeaderCell>\n            )}\n          </CalendarGridHeader>\n          <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n            {(date) => (\n              <CalendarCell\n                className=\"tds-date-picker-calendar-cell-button\"\n                date={date}\n              />\n            )}\n          </CalendarGridBody>\n        </CalendarGrid>\n      </div>\n    </>\n  )\n}\n\n/**\n * A date picker allows a user to select a particular date.\n * The input supports keyboard entry of individual day, month, and year segments;\n * the calendar offers month and year quick-pick overlays plus a \"go to today\" shortcut.\n *\n * The date picker automatically displays the value and calendar from the user's locale,\n * and does not require a specific date format.\n *\n * Values are exchanged as `DateValue` from `@internationalized/date`, but\n * `value`, `min`, and `max` also accept ISO date strings (`\"YYYY-MM-DD\"`) for\n * convenience. Restrict the selectable range with `min`/`max`, or mark\n * individual dates as unavailable via `isDateUnavailable`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-datepicker--docs | Storybook Documentation}\n */\nexport function DatePicker({\n  className,\n  description,\n  disabled,\n  firstDayOfWeek,\n  hideLabel,\n  invalid,\n  isDateUnavailable,\n  label,\n  max,\n  min,\n  onChange,\n  readOnly,\n  required,\n  size = \"md\",\n  value,\n  ...restProps\n}: DatePickerElementProps) {\n  const convertedValue = toCalendarDate(value)\n  const convertedMin = toCalendarDate(min) ?? undefined\n  const convertedMax = toCalendarDate(max) ?? undefined\n\n  const combinedClassName = classNames(\n    \"tds-field tds-date-picker\",\n    {\n      \"tds-date-picker--lg\": size === \"lg\",\n      \"tds-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const [activeOverlay, setActiveOverlay] = useState<\"month\" | \"year\" | null>(\n    null\n  )\n\n  return (\n    <AriaDatePicker\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      isDateUnavailable={isDateUnavailable}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={convertedMax}\n      minValue={convertedMin}\n      onChange={onChange ?? undefined}\n      onOpenChange={(isOpen) => {\n        if (!isOpen) setActiveOverlay(null)\n      }}\n      value={convertedValue}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-date-picker-field\">\n        <DateInput className=\"tds-date-picker-input\">\n          {(segment) => (\n            <DateSegment\n              className={\n                segment.type === \"literal\"\n                  ? \"tds-field-date-segment-separator\"\n                  : \"tds-field-date-segment\"\n              }\n              segment={segment}\n            />\n          )}\n        </DateInput>\n        <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n          <Icon aria-hidden symbol=\"general#calendar\" />\n        </Button>\n      </Group>\n      <Popover\n        className={classNames(\"tds-date-picker-popover\", {\n          \"tds-date-picker-popover--lg\": size === \"lg\",\n        })}\n        offset={2}\n      >\n        <Dialog>\n          <Calendar\n            className=\"tds-date-picker-calendar\"\n            firstDayOfWeek={firstDayOfWeek}\n          >\n            <DatePickerCalendarBody\n              activeOverlay={activeOverlay}\n              setActiveOverlay={setActiveOverlay}\n            />\n          </Calendar>\n        </Dialog>\n      </Popover>\n      {description && (\n        <Text\n          elementType=\"p\"\n          className=\"tds-field-description\"\n          slot=\"description\"\n        >\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaDatePicker>\n  )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone"],"mappings":";;;;;;;AAqCA,MAAM,MAAM,GAAGA,yCAAa,CAACC,yCAAgB,EAAE,CAAC;AACjC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;AACvC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC"}

package/dist/components/number-stepper/NumberStepper.d.ts

@@ -1,4 +1,5 @@
 import "../button/btn.css";
+import "../input-text-base/index.css";
 import "./index.css";
 import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
 import React from "react";
@@ -40,7 +41,7 @@ export type NumberStepperElementProps = CombineAriaPropsWithCustomProps<AriaNumb
  * (currency, percentage, decimal precision) via the `formatOptions` prop.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-numberstepper--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-numberstepper--docs | Storybook Documentation}
  */
 export declare function NumberStepper({ className, defaultValue, description, disabled, hideLabel, invalid, label, max, min, readOnly, required, size, ...restProps }: NumberStepperElementProps): React.JSX.Element;
 export {};

package/dist/components/number-stepper/NumberStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,gBAAgB,IAAI,oBAAoB,EAE9C,MAAM,uBAAuB,CAAA;AAE9B,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB;AAED,KAAK,0BAA0B,GAC3B,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,oBAAoB,CAAA;AAExB,KAAK,6BAA6B,GAC9B,eAAe,GACf,MAAM,GACN,UAAU,GACV,MAAM,GACN,OAAO,CAAA;AAEX,MAAM,MAAM,yBAAyB,GAAG,+BAA+B,CACrE,oBAAoB,EACpB,kBAAkB,EAClB,0BAA0B,EAC1B,6BAA6B,CAC9B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,yBAAyB,qBAkD3B"}
+{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,8BAA8B,CAAA;AACrC,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,gBAAgB,IAAI,oBAAoB,EAE9C,MAAM,uBAAuB,CAAA;AAE9B,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB;AAED,KAAK,0BAA0B,GAC3B,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,oBAAoB,CAAA;AAExB,KAAK,6BAA6B,GAC9B,eAAe,GACf,MAAM,GACN,UAAU,GACV,MAAM,GACN,OAAO,CAAA;AAEX,MAAM,MAAM,yBAAyB,GAAG,+BAA+B,CACrE,oBAAoB,EACpB,kBAAkB,EAClB,0BAA0B,EAC1B,6BAA6B,CAC9B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,yBAAyB,qBAmD3B"}

package/dist/components/number-stepper/NumberStepper.js

@@ -12,20 +12,23 @@ import { NumberField, Label, Group, Input, Button, Text } from 'react-aria-compo
  * (currency, percentage, decimal precision) via the `formatOptions` prop.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-numberstepper--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-numberstepper--docs | Storybook Documentation}
  */
 function NumberStepper({ className, defaultValue, description, disabled, hideLabel, invalid, label, max, min, readOnly, required, size = "md", ...restProps }) {
-    const combinedClassName = classNames("tds-number-stepper", { "tds-number-stepper--lg": size === "lg" }, className);
+    const combinedClassName = classNames("tds-field tds-number-stepper", {
+        "tds-field--lg": size === "lg",
+        "tds-number-stepper--lg": size === "lg",
+    }, className);
     return (React__default.createElement(NumberField, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultValue: defaultValue, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max, minValue: min },
-        !hideLabel && (React__default.createElement(Label, { className: "tds-number-stepper-label" }, label)),
-        React__default.createElement(Group, { className: "tds-number-stepper-field" },
+        !hideLabel && React__default.createElement(Label, { className: "tds-field-label" }, label),
+        React__default.createElement(Group, { className: "tds-field-control tds-number-stepper-field" },
             React__default.createElement(Input, { className: "tds-number-stepper-input" }),
             React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-number-stepper-button", slot: "decrement" },
                 React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#minus" })),
             React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-number-stepper-button", slot: "increment" },
                 React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#plus" }))),
-        description && (React__default.createElement(Text, { className: "tds-number-stepper-description", slot: "description" },
-            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-number-stepper-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+        description && (React__default.createElement(Text, { className: "tds-field-description", slot: "description" },
+            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
             description))));
 }
 

package/dist/components/number-stepper/NumberStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberStepper.js","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n  Button,\n  Group,\n  Input,\n  Label,\n  NumberField as AriaNumberField,\n  type NumberFieldProps as AriaNumberFieldProps,\n  Text,\n} from \"react-aria-components\"\n\nexport type NumberStepperSize = \"md\" | \"lg\"\n\nexport interface NumberStepperProps {\n  /** The default uncontrolled value. */\n  defaultValue?: number\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the input and stepper buttons. */\n  disabled?: boolean\n  /** If `true`, renders the label visually hidden. */\n  hideLabel?: boolean\n  /** If `true`, applies error styling to the field and description. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /** Maximum allowed value. */\n  max?: number\n  /** Minimum allowed value. */\n  min?: number\n  /** Allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk after the label text. */\n  required?: boolean\n  /** The size of the number stepper. */\n  size?: NumberStepperSize\n}\n\ntype AriaNumberFieldPropsToOmit =\n  | \"children\"\n  | \"render\"\n  | \"slot\"\n  | \"validate\"\n  | \"validationBehavior\"\n\ntype AriaNumberFieldPropsToInclude =\n  | \"formatOptions\"\n  | \"name\"\n  | \"onChange\"\n  | \"step\"\n  | \"value\"\n\nexport type NumberStepperElementProps = CombineAriaPropsWithCustomProps<\n  AriaNumberFieldProps,\n  NumberStepperProps,\n  AriaNumberFieldPropsToOmit,\n  AriaNumberFieldPropsToInclude\n>\n\n/**\n * A number stepper component that pairs a numeric input with increment and\n * decrement buttons. Use it when users need to enter or adjust a number by\n * small amounts, such as quantities or counts.\n *\n * Constrain the input with `min`, `max`, and `step`, and customize display\n * (currency, percentage, decimal precision) via the `formatOptions` prop.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-numberstepper--docs | Storybook Documentation}\n */\nexport function NumberStepper({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  hideLabel,\n  invalid,\n  label,\n  max,\n  min,\n  readOnly,\n  required,\n  size = \"md\",\n  ...restProps\n}: NumberStepperElementProps) {\n  const combinedClassName = classNames(\n    \"tds-number-stepper\",\n    { \"tds-number-stepper--lg\": size === \"lg\" },\n    className\n  )\n\n  return (\n    <AriaNumberField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={defaultValue}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={max}\n      minValue={min}\n    >\n      {!hideLabel && (\n        <Label className=\"tds-number-stepper-label\">{label}</Label>\n      )}\n      <Group className=\"tds-number-stepper-field\">\n        <Input className=\"tds-number-stepper-input\" />\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"decrement\"\n        >\n          <Icon aria-hidden symbol=\"general#minus\" />\n        </Button>\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"increment\"\n        >\n          <Icon aria-hidden symbol=\"general#plus\" />\n        </Button>\n      </Group>\n      {description && (\n        <Text className=\"tds-number-stepper-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-number-stepper-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaNumberField>\n  )\n}\n"],"names":["React","AriaNumberField"],"mappings":";;;;;AAiEA;;;;;;;;;;AAUG;AACG,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,oBAAoB,EACpB,EAAE,wBAAwB,EAAE,IAAI,KAAK,IAAI,EAAE,EAC3C,SAAS,CACV;IAED,QACEA,6BAACC,WAAe,EAAA,EAAA,GACV,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,GAAG,EAAA;AAEZ,QAAA,CAAC,SAAS,KACTD,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAS,CAC5D;AACD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA;AACzC,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;YAC9CA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,eAAe,GAAG,CACpC;YACTA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,cAAc,EAAA,CAAG,CACnC,CACH;QACP,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,EAAA;YACjEA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,6CAA6C,EACvD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACe;AAEtB;;;;"}
+{"version":3,"file":"NumberStepper.js","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../input-text-base/index.css\"\nimport \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n  Button,\n  Group,\n  Input,\n  Label,\n  NumberField as AriaNumberField,\n  type NumberFieldProps as AriaNumberFieldProps,\n  Text,\n} from \"react-aria-components\"\n\nexport type NumberStepperSize = \"md\" | \"lg\"\n\nexport interface NumberStepperProps {\n  /** The default uncontrolled value. */\n  defaultValue?: number\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the input and stepper buttons. */\n  disabled?: boolean\n  /** If `true`, renders the label visually hidden. */\n  hideLabel?: boolean\n  /** If `true`, applies error styling to the field and description. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /** Maximum allowed value. */\n  max?: number\n  /** Minimum allowed value. */\n  min?: number\n  /** Allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk after the label text. */\n  required?: boolean\n  /** The size of the number stepper. */\n  size?: NumberStepperSize\n}\n\ntype AriaNumberFieldPropsToOmit =\n  | \"children\"\n  | \"render\"\n  | \"slot\"\n  | \"validate\"\n  | \"validationBehavior\"\n\ntype AriaNumberFieldPropsToInclude =\n  | \"formatOptions\"\n  | \"name\"\n  | \"onChange\"\n  | \"step\"\n  | \"value\"\n\nexport type NumberStepperElementProps = CombineAriaPropsWithCustomProps<\n  AriaNumberFieldProps,\n  NumberStepperProps,\n  AriaNumberFieldPropsToOmit,\n  AriaNumberFieldPropsToInclude\n>\n\n/**\n * A number stepper component that pairs a numeric input with increment and\n * decrement buttons. Use it when users need to enter or adjust a number by\n * small amounts, such as quantities or counts.\n *\n * Constrain the input with `min`, `max`, and `step`, and customize display\n * (currency, percentage, decimal precision) via the `formatOptions` prop.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-numberstepper--docs | Storybook Documentation}\n */\nexport function NumberStepper({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  hideLabel,\n  invalid,\n  label,\n  max,\n  min,\n  readOnly,\n  required,\n  size = \"md\",\n  ...restProps\n}: NumberStepperElementProps) {\n  const combinedClassName = classNames(\n    \"tds-field tds-number-stepper\",\n    {\n      \"tds-field--lg\": size === \"lg\",\n      \"tds-number-stepper--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  return (\n    <AriaNumberField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={defaultValue}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={max}\n      minValue={min}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-number-stepper-field\">\n        <Input className=\"tds-number-stepper-input\" />\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"decrement\"\n        >\n          <Icon aria-hidden symbol=\"general#minus\" />\n        </Button>\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"increment\"\n        >\n          <Icon aria-hidden symbol=\"general#plus\" />\n        </Button>\n      </Group>\n      {description && (\n        <Text className=\"tds-field-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaNumberField>\n  )\n}\n"],"names":["React","AriaNumberField"],"mappings":";;;;;AAkEA;;;;;;;;;;AAUG;AACG,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,8BAA8B,EAC9B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,wBAAwB,EAAE,IAAI,KAAK,IAAI;KACxC,EACD,SAAS,CACV;IAED,QACEA,6BAACC,WAAe,EAAA,EAAA,GACV,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,GAAG,EAAA;QAEZ,CAAC,SAAS,IAAID,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA;AAC3D,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;YAC9CA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,eAAe,GAAG,CACpC;YACTA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,cAAc,EAAA,CAAG,CACnC,CACH;QACP,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,EAAA;YACxDA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACe;AAEtB;;;;"}

package/dist/components/page-header/index.js

@@ -1,4 +1,4 @@
-import '../../packages/tapestry-wc/dist/components/p-CUZotZ0O.js';
+import '../../packages/tapestry-wc/dist/components/p-D0vZ4she.js';
 import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-page-header.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-page-header-nav.js';
 

package/dist/components/sidenav/index.js

@@ -1,4 +1,4 @@
-import '../../packages/tapestry-wc/dist/components/p-CUZotZ0O.js';
+import '../../packages/tapestry-wc/dist/components/p-D0vZ4she.js';
 import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-sidenav.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-item.js';
 import { defineCustomElement as defineCustomElement$3 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js';