@planningcenter/tapestry 3.2.3-rc.9 → 3.3.0-rc.1

package/dist/components/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,WAAW,GAAG;IACjB,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;IAE7D,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAuBD,eAAO,MAAM,MAAM,uCAKhB,WAAW,sBAcb,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,WAAW,GAAG;IACjB,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;IAE7D,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAuBD,eAAO,MAAM,MAAM,GAAI,oCAKpB,WAAW,sBAcb,CAAA;AAED,eAAe,MAAM,CAAA"}

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

@@ -2,11 +2,13 @@ import "../button/btn.css";
 import "./index.css";
 import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
 import React, { type ReactNode } from "react";
-import type { ComboBoxProps as AriaComboBoxProps, Key, ListBoxItemProps, ListBoxRenderProps, ListBoxSectionProps } from "react-aria-components";
+import type { ComboBoxProps as AriaComboBoxProps, Key, ListBoxItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps } from "react-aria-components";
 export type ComboBoxSize = "md" | "lg";
+export type ComboBoxLoadingState = "error" | "filtering" | "idle" | "loading" | "loadingMore" | "sorting";
+type ComboBoxChildren<T extends object> = NonNullable<AriaListBoxProps<T>["children"]>;
 export interface ComboBoxProps<T extends object = object> {
-    /** The children of the combo box (ComboBoxItem elements or a render function). */
-    children: ReactNode | ((item: T) => ReactNode);
+    /** The contents of the listbox. */
+    children: ComboBoxChildren<T>;
     /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
     description?: string;
     /** Disables the field and trigger button. */
@@ -19,17 +21,26 @@ export interface ComboBoxProps<T extends object = object> {
     invalid?: boolean;
     /** Accessible label for the field. */
     label: string;
+    /**
+     * Async loading state for the listbox.
+     * - `"loading"`: while the collection is empty, replaces the empty state with a spinner.
+     * - `"loadingMore"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).
+     * - Other values render as `"idle"`.
+     */
+    loadingState?: ComboBoxLoadingState;
     /**
      * Called when the selected value(s) change.
      * Receives `Key[]` when `selectionMode` is `"multiple"`, otherwise `Key | null`.
      */
     onChange?: ((value: Key | null) => void) | ((value: Key[]) => void);
+    /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */
+    onLoadMore?: () => void;
     /** Placeholder text for the input. */
     placeholder?: string;
     /** If `true`, allows the value to be read but not changed. */
     readOnly?: boolean;
-    /** Provides content to display when there are no items in the list. */
-    renderEmptyState?: (props: ListBoxRenderProps) => ReactNode;
+    /** Content to display when there are no items in the list. Defaults to "No results". */
+    renderEmptyState?: ReactNode | (() => ReactNode);
     /** If `true`, appends an asterisk at the end of the label text. */
     required?: boolean;
     /** The size of the combo box. */
@@ -38,7 +49,7 @@ export interface ComboBoxProps<T extends object = object> {
 type AriaComboBoxPropsToOmit = "slot";
 type AriaComboBoxPropsToInclude = "allowsEmptyCollection" | "defaultInputValue" | "defaultItems" | "defaultValue" | "disabledKeys" | "inputValue" | "items" | "menuTrigger" | "name" | "onInputChange" | "selectionMode" | "value";
 export type ComboBoxElementProps<T extends object = object> = CombineAriaPropsWithCustomProps<AriaComboBoxProps<T, "single" | "multiple">, ComboBoxProps<T>, AriaComboBoxPropsToOmit, AriaComboBoxPropsToInclude>;
-export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, description, disabled, filter, hideLabel, invalid, label, menuTrigger, onChange, placeholder, readOnly, renderEmptyState, required, size, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
+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 {
     /** Disables the item. */
     disabled?: boolean;

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":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,GAAG,EACH,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,uBAAuB,CAAA;AAe9B,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,kFAAkF;IAClF,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,CAAA;IAC9C,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAA;IAC3D,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC,CAAA;IACnE,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAA;IAC3D,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,KAAK,uBAAuB,GAAG,MAAM,CAAA;AAErC,KAAK,0BAA0B,GAC3B,uBAAuB,GACvB,mBAAmB,GACnB,cAAc,GACd,cAAc,GACd,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,MAAM,GACN,eAAe,GACf,eAAe,GACf,OAAO,CAAA;AAEX,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IACxD,+BAA+B,CAC7B,iBAAiB,CAAC,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC,EAC3C,aAAa,CAAC,CAAC,CAAC,EAChB,uBAAuB,EACvB,0BAA0B,CAC3B,CAAA;AAEH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,qBAA4B,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,gBAAqC,EACrC,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,oBAAoB,CAAC,CAAC,CAAC,qBAmEzB;AAED,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,KAAK,0BAA0B,GAAG,YAAY,CAAA;AAE9C,KAAK,6BAA6B,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAA;AAEvE,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAC5D,+BAA+B,CAC7B,gBAAgB,CAAC,CAAC,CAAC,EACnB,iBAAiB,EACjB,0BAA0B,EAC1B,6BAA6B,CAC9B,CAAA;AAEH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,EAC7C,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,wBAAwB,CAAC,CAAC,CAAC,qBAQ7B;AAED,MAAM,WAAW,oBAAoB;IACnC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,KAAK,gCAAgC,GAAG,cAAc,CAAA;AAEtD,MAAM,MAAM,2BAA2B,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAC/D,+BAA+B,CAC7B,mBAAmB,CAAC,CAAC,CAAC,EACtB,oBAAoB,EACpB,KAAK,EACL,gCAAgC,CACjC,CAAA;AAEH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,2BAA2B,CAAC,CAAC,CAAC,qBAYhC"}
+{"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

@@ -1,10 +1,23 @@
+import LoadingSpinner from '../internal/LoadingSpinner.js';
 import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
 import React__default from 'react';
-import { ComboBox as ComboBox$1, Label, Group, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Header } from 'react-aria-components';
+import { ListBoxLoadMoreItem, ComboBox as ComboBox$1, Label, Group, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Header, Collection } from 'react-aria-components';
 
-function ComboBox({ allowsEmptyCollection = true, children, className, description, disabled, filter, hideLabel, invalid, label, menuTrigger, onChange, placeholder, readOnly, renderEmptyState = () => "No results", required, size = "md", ...restProps }) {
+function resolveEmptyState(value) {
+    return typeof value === "function" ? value() : value;
+}
+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 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))));
+    const renderChildren = () => {
+        if (typeof children === "function") {
+            return (React__default.createElement(Collection, { items: restProps.items ?? restProps.defaultItems }, children));
+        }
+        return children;
+    };
     return (
     // React Aria's ComboBox is generic over selection mode (M). We instantiate
     // it with the union "single" | "multiple" so value/defaultValue/selectionMode
@@ -20,8 +33,10 @@ function ComboBox({ allowsEmptyCollection = true, children, className, descripti
                 React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#down-caret" }))),
         React__default.createElement(Popover, { className: "tds-combo-box-popover" },
             React__default.createElement(ListBox, { className: "tds-combo-box-list", renderEmptyState: allowsEmptyCollection
-                    ? (props) => (React__default.createElement("div", { className: "tds-combo-box-empty-state" }, renderEmptyState(props)))
-                    : undefined }, children)),
+                    ? () => (React__default.createElement("div", { "aria-label": loadingState === "loading" ? "Loading" : undefined, className: "tds-combo-box-empty-state", role: loadingState === "loading" ? "status" : undefined }, loadingState === "loading" ? (React__default.createElement(LoadingSpinner, null)) : (resolveEmptyState(renderEmptyState))))
+                    : 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))));

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 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  ListBoxRenderProps,\n  ListBoxSectionProps,\n} from \"react-aria-components\"\nimport {\n  Button,\n  ComboBox as AriaComboBox,\n  Group,\n  Header,\n  Input,\n  Label,\n  ListBox,\n  ListBoxItem,\n  ListBoxSection,\n  Popover,\n  Text,\n} from \"react-aria-components\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport interface ComboBoxProps<T extends object = object> {\n  /** The children of the combo box (ComboBoxItem elements or a render function). */\n  children: ReactNode | ((item: T) => ReactNode)\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   * 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  /** Placeholder text for the input. */\n  placeholder?: string\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** Provides content to display when there are no items in the list. */\n  renderEmptyState?: (props: ListBoxRenderProps) => 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\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  menuTrigger,\n  onChange,\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  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        <Button\n          className={classNames(\n            \"tds-combo-box-button\",\n            menuTrigger !== \"focus\" && \"tds-btn tds-btn--infield\"\n          )}\n        >\n          <Icon aria-hidden symbol=\"general#down-caret\" />\n        </Button>\n      </Group>\n      <Popover className=\"tds-combo-box-popover\">\n        <ListBox\n          className=\"tds-combo-box-list\"\n          renderEmptyState={\n            allowsEmptyCollection\n              ? (props) => (\n                  <div className=\"tds-combo-box-empty-state\">\n                    {renderEmptyState(props)}\n                  </div>\n                )\n              : undefined\n          }\n        >\n          {children}\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\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\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":";;;;;AAsFM,SAAU,QAAQ,CAAmB,EACzC,qBAAqB,GAAG,IAAI,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,gBAAgB,GAAG,MAAM,YAAY,EACrC,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACY,EAAA;AACxB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,eAAe,EACf,EAAE,mBAAmB,EAAE,IAAI,KAAK,IAAI,EAAE,EACtC,SAAS,CACV;IAED;;;;;;;IAOEA,cAAA,CAAA,aAAA,CAACC,UAAY,OACP,SAAS,EACb,qBAAqB,EAAE,qBAAqB,EAAA,YAAA,EAChC,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAA+C,EAAA;QAExD,CAAC,SAAS,IAAID,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAA,EAAE,KAAK,CAAS;AACrE,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAA;YACpCA,cAAA,CAAA,aAAA,CAAC,KAAK,IAAC,SAAS,EAAC,qBAAqB,EAAC,WAAW,EAAE,WAAW,EAAA,CAAI;AACnE,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,UAAU,CACnB,sBAAsB,EACtB,WAAW,KAAK,OAAO,IAAI,0BAA0B,CACtD,EAAA;AAED,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,oBAAoB,EAAA,CAAG,CACzC,CACH;AACR,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA;YACxCA,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,SAAS,EAAC,oBAAoB,EAC9B,gBAAgB,EACd;AACE,sBAAE,CAAC,KAAK,MACJA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,EACvC,gBAAgB,CAAC,KAAK,CAAC,CACpB;AAEV,sBAAE,SAAS,EAAA,EAGd,QAAQ,CACD,CACF;QACT,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2BAA2B,EAAC,IAAI,EAAC,aAAa,EAAA;YAC5DA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,wCAAwC,EAClD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACY;AAEnB;AAmBM,SAAU,YAAY,CAAmB,EAC7C,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACgB,EAAA;IAC5B,QACEA,6BAAC,WAAW,EAAA,EAAA,GACN,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,yBAAyB,EAAE,SAAS,CAAC,EAC3D,UAAU,EAAE,QAAQ,EAAA,CACpB;AAEN;AAmBM,SAAU,eAAe,CAAmB,EAChD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACmB,EAAA;AAC/B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAA,GACT,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,SAAS,CAAC,EAAA;QAE7D,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,8BAA8B,EAAA,EAAE,KAAK,CAAU,CAClE;QACA,QAAQ,CACM;AAErB;;;;"}
+{"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\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        <Button\n          className={classNames(\n            \"tds-combo-box-button\",\n            menuTrigger !== \"focus\" && \"tds-btn tds-btn--infield\"\n          )}\n        >\n          <Icon aria-hidden symbol=\"general#down-caret\" />\n        </Button>\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\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\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/combo-box/index.d.ts

@@ -1,4 +1,4 @@
 import "./index.css";
-export type { ComboBoxElementProps, ComboBoxItemElementProps, ComboBoxItemProps, ComboBoxProps, ComboBoxSectionElementProps, ComboBoxSectionProps, ComboBoxSize, } from "./ComboBox";
+export type { ComboBoxElementProps, ComboBoxItemElementProps, ComboBoxItemProps, ComboBoxLoadingState, ComboBoxProps, ComboBoxSectionElementProps, ComboBoxSectionProps, ComboBoxSize, } from "./ComboBox";
 export { ComboBox, ComboBoxItem, ComboBoxSection } from "./ComboBox";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,iBAAiB,EACjB,aAAa,EACb,2BAA2B,EAC3B,oBAAoB,EACpB,YAAY,GACb,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,2BAA2B,EAC3B,oBAAoB,EACpB,YAAY,GACb,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA"}

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;AAsOD,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,qBA8ExB;yBA/Fe,UAAU"}
+{"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;AAsOD,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,qBAmFxB;yBApGe,UAAU"}

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

@@ -57,7 +57,7 @@ function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
                 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", style: {
+                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"
@@ -66,7 +66,7 @@ function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
                         state.setFocusedDate(today);
                         state.setFocused(true);
                     }, slot: null },
-                    React__default.createElement("svg", { "aria-hidden": true, fill: "currentColor", viewBox: "0 0 16 16", height: "14", width: "16", xmlns: "http://www.w3.org/2000/svg" },
+                    React__default.createElement("svg", { "aria-hidden": true, fill: "currentColor", viewBox: "0 0 16 16", height: "0.875em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
                         React__default.createElement("path", { d: "M13.444 14.222H2.556V5.667H13.444V14.222ZM13.444 1.778H12.667V0.222H11.111V1.778H4.889V0.222H3.333V1.778H2.556C2.35212 1.778 2.15025 1.81827 1.96199 1.8965C1.77372 1.97473 1.60275 2.08938 1.45892 2.23387C1.31508 2.37836 1.2012 2.54984 1.12382 2.73846C1.04644 2.92708 1.00708 3.12913 1.008 3.333L1 14.222C0.999869 14.4264 1.04003 14.6288 1.11818 14.8176C1.19633 15.0065 1.31093 15.178 1.45545 15.3226C1.59996 15.4671 1.77155 15.5817 1.96039 15.6598C2.14923 15.738 2.35163 15.7781 2.556 15.778H13.444C13.8564 15.7769 14.2515 15.6127 14.5431 15.3211C14.8347 15.0295 14.9989 14.6344 15 14.222V3.333C14.9987 2.92082 14.8343 2.52592 14.5427 2.23455C14.2512 1.94319 13.8562 1.77905 13.444 1.778Z" }),
                         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" },
@@ -108,7 +108,9 @@ function DatePicker({ className, description, disabled, firstDayOfWeek, hideLabe
                     : "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: "tds-date-picker-popover" },
+        React__default.createElement(Popover, { className: classNames("tds-date-picker-popover", {
+                "tds-date-picker-popover--lg": size === "lg",
+            }), offset: 2 },
             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" },

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  Group,\n  Heading,\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        <Heading className=\"tds-date-picker-calendar-title tds-date-picker-calendar-title--visually-hidden\" />\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\"\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                fill=\"currentColor\"\n                viewBox=\"0 0 16 16\"\n                height=\"14\"\n                width=\"16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M13.444 14.222H2.556V5.667H13.444V14.222ZM13.444 1.778H12.667V0.222H11.111V1.778H4.889V0.222H3.333V1.778H2.556C2.35212 1.778 2.15025 1.81827 1.96199 1.8965C1.77372 1.97473 1.60275 2.08938 1.45892 2.23387C1.31508 2.37836 1.2012 2.54984 1.12382 2.73846C1.04644 2.92708 1.00708 3.12913 1.008 3.333L1 14.222C0.999869 14.4264 1.04003 14.6288 1.11818 14.8176C1.19633 15.0065 1.31093 15.178 1.45545 15.3226C1.59996 15.4671 1.77155 15.5817 1.96039 15.6598C2.14923 15.738 2.35163 15.7781 2.556 15.778H13.444C13.8564 15.7769 14.2515 15.6127 14.5431 15.3211C14.8347 15.0295 14.9989 14.6344 15 14.222V3.333C14.9987 2.92082 14.8343 2.52592 14.5427 2.23455C14.2512 1.94319 13.8562 1.77905 13.444 1.778Z\" />\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\"\n                date={date}\n              />\n            )}\n          </CalendarGridBody>\n        </CalendarGrid>\n      </div>\n    </>\n  )\n}\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 className=\"tds-date-picker-popover\">\n        <Calendar\n          className=\"tds-date-picker-calendar\"\n          firstDayOfWeek={firstDayOfWeek}\n        >\n          <DatePickerCalendarBody\n            activeOverlay={activeOverlay}\n            setActiveOverlay={setActiveOverlay}\n          />\n        </Calendar>\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 \"./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  Group,\n  Heading,\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        <Heading className=\"tds-date-picker-calendar-title tds-date-picker-calendar-title--visually-hidden\" />\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                fill=\"currentColor\"\n                viewBox=\"0 0 16 16\"\n                height=\"0.875em\"\n                width=\"1em\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M13.444 14.222H2.556V5.667H13.444V14.222ZM13.444 1.778H12.667V0.222H11.111V1.778H4.889V0.222H3.333V1.778H2.556C2.35212 1.778 2.15025 1.81827 1.96199 1.8965C1.77372 1.97473 1.60275 2.08938 1.45892 2.23387C1.31508 2.37836 1.2012 2.54984 1.12382 2.73846C1.04644 2.92708 1.00708 3.12913 1.008 3.333L1 14.222C0.999869 14.4264 1.04003 14.6288 1.11818 14.8176C1.19633 15.0065 1.31093 15.178 1.45545 15.3226C1.59996 15.4671 1.77155 15.5817 1.96039 15.6598C2.14923 15.738 2.35163 15.7781 2.556 15.778H13.444C13.8564 15.7769 14.2515 15.6127 14.5431 15.3211C14.8347 15.0295 14.9989 14.6344 15 14.222V3.333C14.9987 2.92082 14.8343 2.52592 14.5427 2.23455C14.2512 1.94319 13.8562 1.77905 13.444 1.778Z\" />\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\"\n                date={date}\n              />\n            )}\n          </CalendarGridBody>\n        </CalendarGrid>\n      </div>\n    </>\n  )\n}\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        <Calendar\n          className=\"tds-date-picker-calendar\"\n          firstDayOfWeek={firstDayOfWeek}\n        >\n          <DatePickerCalendarBody\n            activeOverlay={activeOverlay}\n            setActiveOverlay={setActiveOverlay}\n          />\n        </Calendar>\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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"}

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

@@ -1,4 +1,4 @@
-import '../../packages/tapestry-wc/dist/components/p-D8qDXp6N.js';
+import '../../packages/tapestry-wc/dist/components/p-Bz1SUsfn.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-D8qDXp6N.js';
+import '../../packages/tapestry-wc/dist/components/p-Bz1SUsfn.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';

package/dist/index.css

@@ -912,7 +912,7 @@
     --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
     --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
     --tds-page-header-color:var(--t-text-color);
-    --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
+    --tds-page-header-bottom-border-color:transparent;
     --tds-page-header-headline-color:var(--t-text-color-headline);
     --tds-page-header-headline-font-size:var(--t-font-size-2xl);
     --tds-page-header-padding-x:var(--t-spacing-2);
@@ -927,7 +927,7 @@
     --tds-page-header-nav-item-border-width:1px;
 
     --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
-    --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
+    --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
 
     --tds-page-header-nav-item-color-hover:var(--t-text-color);
     --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
@@ -971,6 +971,7 @@
       --tds-page-header-nav-item-border-width:1px;
       --tds-page-header-nav-item-color:var(--t-text-color);
       --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
+      --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
       --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
       --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
       --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
@@ -1051,20 +1052,34 @@
           --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
           --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
           --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
+          --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
         }
 
 :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
           background-color:var(--tds-page-header-nav-item-background-color-active);
           border-color:var(--tds-page-header-nav-item-border-color-active);
+          border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
         }
 
 :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
+          --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
           color:var(--tds-page-header-nav-item-color-disabled);
           cursor:not-allowed;
           background-color:var(--tds-page-header-nav-item-background-color-disabled);
           opacity:1;
         }
 
+@media (min-width: 600px){
+          :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
+            position:absolute;
+            inset:auto -1px -1px;
+            height:1px;
+            pointer-events:none;
+            content:"";
+            background-color:var(--tds-page-header-bottom-border-color);
+          }
+        }
+
 :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
       position:relative;
     }
@@ -1849,6 +1864,10 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   font-family:inherit;
   font-style:inherit;
   vertical-align:inherit;
+  text-align:inherit;
+  -webkit-user-select:auto;
+     -moz-user-select:auto;
+          user-select:auto;
 }
 
 .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
@@ -2669,12 +2688,11 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-select-dropdown-border-radius:var(--t-border-radius);
   --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
   --tds-select-dropdown-scroll-behavior:smooth;
-  --tds-select-dropdown-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
-  --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
+  --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
   --tds-select-dropdown-closed-opacity:0;
   --tds-select-dropdown-open-opacity:1;
-  --tds-select-dropdown-closed-transform:translateY(-8px);
-  --tds-select-dropdown-open-transform:translateY(0);
+  --tds-select-dropdown-closed-translate:0 -8px;
+  --tds-select-dropdown-open-translate:0 0;
 
   --tds-select-option-gap:var(--t-spacing-1);
   --tds-select-option-padding-block:var(--t-spacing-1);
@@ -2872,11 +2890,10 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
 .tds-select{
     --tds-select-transition-property:none;
-    --tds-select-dropdown-transition-enter:none;
-    --tds-select-dropdown-transition-exit:none;
+    --tds-select-dropdown-transition:none;
     --tds-select-dropdown-scroll-behavior:auto;
-    --tds-select-dropdown-closed-transform:none;
-    --tds-select-dropdown-open-transform:none;
+    --tds-select-dropdown-closed-translate:none;
+    --tds-select-dropdown-open-translate:none;
     --tds-select-caret-transition:none;
 }
   }
@@ -2917,6 +2934,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     color:var(--tds-select-placeholder-color);
     white-space:nowrap;
     background-image:none;
+    anchor-name:--tds-select-anchor;
     transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
     -webkit-tap-highlight-color:transparent;
   }
@@ -2939,6 +2957,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   }
 
 .tds-select:has( > button) [popover]{
+    position-anchor:--tds-select-anchor;
     inset:auto;
     inline-size:-moz-max-content;
     inline-size:max-content;
@@ -2964,14 +2983,13 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     border-radius:var(--tds-select-dropdown-border-radius);
     box-shadow:var(--tds-select-dropdown-box-shadow);
     opacity:var(--tds-select-dropdown-open-opacity);
-    transform:var(--tds-select-dropdown-open-transform);
-    transition:var(--tds-select-dropdown-transition-enter);
+    translate:var(--tds-select-dropdown-open-translate);
+    transition:var(--tds-select-dropdown-transition);
   }
 
 :is(.tds-select:has( > button) [popover]):not(:popover-open){
       opacity:var(--tds-select-dropdown-closed-opacity);
-      transform:var(--tds-select-dropdown-closed-transform);
-      transition:var(--tds-select-dropdown-transition-exit);
+      translate:var(--tds-select-dropdown-closed-translate);
     }
 
 :is(.tds-select:has( > button) [popover]) ul{
@@ -2983,7 +3001,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 @starting-style{
       :is(.tds-select:has( > button) [popover]):popover-open{
         opacity:var(--tds-select-dropdown-closed-opacity);
-        transform:var(--tds-select-dropdown-closed-transform);
+        translate:var(--tds-select-dropdown-closed-translate);
       }
     }
 
@@ -3011,8 +3029,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
     :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
       opacity:var(--tds-select-dropdown-closed-opacity);
-      transform:var(--tds-select-dropdown-closed-transform);
-      transition:var(--tds-select-dropdown-transition-exit);
+      translate:var(--tds-select-dropdown-closed-translate);
     }
 
     :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
@@ -3060,8 +3077,8 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
       border-radius:var(--tds-select-dropdown-border-radius);
       box-shadow:var(--tds-select-dropdown-box-shadow);
       opacity:var(--tds-select-dropdown-open-opacity);
-      transform:var(--tds-select-dropdown-open-transform);
-      transition:var(--tds-select-dropdown-transition-enter);
+      translate:var(--tds-select-dropdown-open-translate);
+      transition:var(--tds-select-dropdown-transition);
     }
 
     :is(.tds-select select:has( > button)) option::checkmark{
@@ -3071,7 +3088,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     @starting-style{
       :is(.tds-select select:has( > button))::picker(select):popover-open{
         opacity:var(--tds-select-dropdown-closed-opacity);
-        transform:var(--tds-select-dropdown-closed-transform);
+        translate:var(--tds-select-dropdown-closed-translate);
       }
     }
 }