@cimpress-ui/react 0.1.0 → 0.3.0

package/dist/esm/components/popover/popover.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import { type PopoverProps as RACPopoverProps } from 'react-aria-components';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface PopoverRootProps {
+    /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */
+    children: ReactNode;
+    /** Whether the popover is open (controlled). */
+    isOpen?: boolean;
+    /** Whether the popover is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the popover's open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Encapsulates a popover trigger and its associated popover.
+ * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.
+ */
+export declare function PopoverRoot(props: PopoverRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PopoverRoot {
+    var displayName: string;
+}
+export interface PopoverRenderProps {
+    /** Closes the popover when called. */
+    close: () => void;
+}
+export interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement' | 'triggerRef'> {
+    /** The contents of the popover. A function may be provided to access a function to close the popover. */
+    children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);
+    /** The title of the popover. */
+    title?: string;
+    /**
+     * Whether the popover is open (controlled).
+     * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the popover is open by default (uncontrolled).
+     * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Handler that is called when the popover's open state changes.
+     * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Displays an overlay element positioned relative to a trigger.
+ *
+ * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).
+ */
+declare const _Popover: (props: PopoverProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
+export { _Popover as Popover };
+//# sourceMappingURL=popover.d.ts.map

package/dist/esm/components/popover/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAIrC,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,YAAY,CAAC;IACnD,yGAAyG;IACzG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA8DD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,0GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

package/dist/esm/components/popover/popover.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useEffect } from 'react';
+import { DialogTrigger as RACDialogTrigger, Popover as RACPopover, OverlayArrow as RACOverlayArrow, Dialog as RACDialog, Heading as RACHeading, } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
+import { textStyle } from '../typography/utils.js';
+/**
+ * Encapsulates a popover trigger and its associated popover.
+ * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.
+ */
+export function PopoverRoot(props) {
+    return _jsx(RACDialogTrigger, { ...props });
+}
+PopoverRoot.displayName = 'PopoverRoot';
+function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, placement, triggerRef, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useEffect(() => {
+        if (!title && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');
+        }
+    }, [title, ariaLabel, ariaLabelledBy]);
+    return (_jsxs(RACPopover, { className: clsx('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, "data-cim-style-root": true, children: [_jsx(RACOverlayArrow, { className: "cim-popover-arrow", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: _jsx("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), _jsx(RACDialog, { ...props, ref: ref, className: "cim-popover-dialog", children: (renderProps) => (_jsxs(_Fragment, { children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-popover-title', textStyle({ variant: 'title-5' })), children: title })), _jsx(FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })) })] }));
+}
+/**
+ * Displays an overlay element positioned relative to a trigger.
+ *
+ * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).
+ */
+const _Popover = forwardRef(Popover, 'Popover');
+export { _Popover as Popover };
+//# sourceMappingURL=popover.js.map

package/dist/esm/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAqB,SAAS,EAAkB,MAAM,OAAO,CAAC;AACrE,OAAO,EACL,aAAa,IAAI,gBAAgB,EACjC,OAAO,IAAI,UAAU,EAErB,YAAY,IAAI,eAAe,EAC/B,MAAM,IAAI,SAAS,EACnB,OAAO,IAAI,UAAU,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAanD;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAgCxC,SAAS,OAAO,CACd,EACE,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACK,EACf,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;QACjG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,EAAE,EACpB,MAAM,EAAE,CAAC,EACT,mBAAmB,EAAE,CAAC,0CAGtB,KAAC,eAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,YAChF,eAAM,CAAC,EAAC,mEAAmE,GAAG,GAC1E,GACU,EAClB,KAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,oBAAoB,YAC3D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,8BACG,KAAK,IAAI,CACR,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAC7F,KAAK,GACK,CACd,EACD,KAAC,kBAAkB,IAAC,SAAS,EAAC,qBAAqB,EAAC,eAAe,EAAC,UAAU,YAC3E,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,GAC/C,IACpB,CACJ,GACS,IACD,CACd,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, useEffect, type ReactNode } from 'react';\nimport {\n  DialogTrigger as RACDialogTrigger,\n  Popover as RACPopover,\n  type PopoverProps as RACPopoverProps,\n  OverlayArrow as RACOverlayArrow,\n  Dialog as RACDialog,\n  Heading as RACHeading,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n  /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n  children: ReactNode;\n  /** Whether the popover is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the popover is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the popover's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\nexport interface PopoverRenderProps {\n  /** Closes the popover when called. */\n  close: () => void;\n}\n\nexport interface PopoverProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<RACPopoverProps, 'placement' | 'triggerRef'> {\n  /** The contents of the popover. A function may be provided to access a function to close the popover. */\n  children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n  /** The title of the popover. */\n  title?: string;\n  /**\n   * Whether the popover is open (controlled).\n   * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the popover is open by default (uncontrolled).\n   * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the popover's open state changes.\n   * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction Popover(\n  {\n    children,\n    title,\n    UNSAFE_className,\n    UNSAFE_style,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    placement,\n    triggerRef,\n    ...props\n  }: PopoverProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACPopover\n      className={clsx('cim-popover', UNSAFE_className)}\n      style={UNSAFE_style}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      triggerRef={triggerRef}\n      placement={placement}\n      containerPadding={16}\n      offset={5} // 1px border + 4px actual offset\n      arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n      data-cim-style-root\n    >\n      <RACOverlayArrow className=\"cim-popover-arrow\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n          <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n        </svg>\n      </RACOverlayArrow>\n      <RACDialog {...props} ref={ref} className=\"cim-popover-dialog\">\n        {(renderProps) => (\n          <>\n            {title && (\n              <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n                {title}\n              </RACHeading>\n            )}\n            <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n              {typeof children === 'function' ? children(renderProps) : children}\n            </FocusableContainer>\n          </>\n        )}\n      </RACDialog>\n    </RACPopover>\n  );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}

package/dist/esm/components/radio/radio.d.ts

@@ -1,6 +1,6 @@
 import { type RadioProps as RACRadioProps } from 'react-aria-components';
-import type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';
-export interface RadioProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACRadioProps, 'value' | 'isDisabled'> {
+import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
+export interface RadioProps extends CommonProps, AriaLabelingProps, Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {
     /** The label rendered next to the radio. */
     children?: StringLikeChildren;
 }

package/dist/esm/components/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGpF,MAAM,WAAW,UACf,SAAQ,WAAW,EACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,YAAY,CAAC;IAC7C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AA8BD;;;;GAIG;AACH,QAAA,MAAM,MAAM,8JAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,UACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;IAC3D,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AA8BD;;;;GAIG;AACH,QAAA,MAAM,MAAM,8JAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/esm/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,QAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,kBAAkB,YAC/B,cAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends CommonProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<RACRadioProps, 'value' | 'isDisabled'> {\n  /** The label rendered next to the radio. */\n  children?: StringLikeChildren;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\n/**\n * Renders a single option within `RadioGroup`.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,QAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,kBAAkB,YAC/B,cAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {\n  /** The label rendered next to the radio. */\n  children?: StringLikeChildren;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\n/**\n * Renders a single option within `RadioGroup`.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}

package/dist/esm/components/select/select.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useEffect } from 'react';
 import { Button as RACButton, Collection as RACCollection, Header as RACHeader, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, Select as RACSelect, SelectValue as RACSelectValue, Text as RACText, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
-import { IconCheckmark, IconChevronDownFill } from '../../icons/index.js';
+import { IconCheck, IconChevronDown } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
@@ -19,7 +19,7 @@ function Select({ children, items, label, description, error, UNSAFE_className,
     if (items != null && typeof children !== 'function') {
         console.warn('`Select` requires `children` to be a function when using `items` prop');
     }
-    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' })), children: ({ selectedText }) => selectedText }), _jsx(IconChevronDownFill, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(RACListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }) })] }));
+    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' })), children: ({ selectedText }) => selectedText }), _jsx(IconChevronDown, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(RACListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }) })] }));
 }
 /**
  * Allows users to select one item from a collapsible list.
@@ -31,7 +31,7 @@ export { _Select as Select };
 /** Renders a single list item within `Select`. */
 export function SelectItem({ children, ...props }) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return (_jsx(RACListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(IconCheckmark, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
+    return (_jsx(RACListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(IconCheck, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
 }
 SelectItem.displayName = 'SelectItem';
 /** Groups list items within `Select` into a section. */

package/dist/esm/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckmark, IconChevronDownFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    Pick<\n      RACSelectProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction Select<T extends CollectionItem>(\n  { children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDownFill />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACListBox className=\"cim-select-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps\n  extends Pick<RACListBoxItemProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheckmark />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    Pick<\n      RACSelectProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction Select<T extends CollectionItem>(\n  { children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDown />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACListBox className=\"cim-select-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps\n  extends Pick<RACListBoxItemProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}

package/dist/esm/components/table/contexts/column-collection.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode, type RefObject } from 'react';
+interface ColumnData {
+    number?: number;
+    width?: string | number;
+    contentAlignment: ColumnContentAlignment;
+}
+/** Represents the direction of content alignment within a table column. */
+export type ColumnContentAlignment = 'start' | 'center' | 'end';
+export declare function ColumnCollectionProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+type ColumnRegistrator = (key: string, data: ColumnData) => () => void;
+export declare function useColumnRegistration(): ColumnRegistrator;
+export declare function useColumnData(key: string): Readonly<ColumnData> | undefined;
+export interface UseEmptyStateCell {
+    columnKey: string;
+    colSpan: number;
+}
+export declare function useEmptyStateCell(ref: RefObject<HTMLTableCellElement | null>): UseEmptyStateCell;
+export {};
+//# sourceMappingURL=column-collection.d.ts.map

package/dist/esm/components/table/contexts/column-collection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-collection.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAQ7G,UAAU,UAAU;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gBAAgB,EAAE,sBAAsB,CAAC;CAC1C;AAED,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAMhE,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsB7E;AAED,KAAK,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,IAAI,CAAC;AAGvE,wBAAgB,qBAAqB,IAAI,iBAAiB,CAqBzD;AAGD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,SAAS,CAO3E;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAGD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAchG"}

package/dist/esm/components/table/contexts/column-collection.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef, useState } from 'react';
+import { useServerEffectEvent } from '../../../utils/use-server-effect-event.js';
+const ColumnCollectionContext = createContext(null);
+const EMPTY_OBJECT = {};
+export function ColumnCollectionProvider({ children }) {
+    // When column collection is updated, we want to trigger a re-render,
+    // but we also want immediate access to the updated collection during SSR.
+    // Hence why it is stored as both a ref and a state.
+    const columnsRef = useRef(EMPTY_OBJECT);
+    const [_columns, _setColumns] = useState(EMPTY_OBJECT);
+    const collection = useMemo(() => ({
+        get columns() {
+            return columnsRef.current;
+        },
+        setColumns: (columns) => {
+            columnsRef.current = columns;
+            _setColumns(columns);
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [_columns]);
+    return _jsx(ColumnCollectionContext.Provider, { value: collection, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useColumnRegistration() {
+    const columnCollection = useContext(ColumnCollectionContext);
+    if (!columnCollection) {
+        throw new Error('Cannot use column registration outside of a table');
+    }
+    return useServerEffectEvent((key, data) => {
+        columnCollection.setColumns({
+            ...columnCollection.columns,
+            [key]: data,
+        });
+        return () => {
+            const { columns } = columnCollection;
+            if (columns[key] === data) {
+                delete columns[key];
+                columnCollection.setColumns({ ...columns });
+            }
+        };
+    });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useColumnData(key) {
+    const columnCollection = useContext(ColumnCollectionContext);
+    if (!columnCollection) {
+        throw new Error('Cannot use column data outside of a table');
+    }
+    return columnCollection.columns[key];
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useEmptyStateCell(ref) {
+    const columnCollection = useContext(ColumnCollectionContext);
+    if (!columnCollection) {
+        throw new Error('Cannot use empty state cell outside of a table');
+    }
+    // Empty state cell should have the same column key as the first column in the table, so find it
+    const parentTableElement = ref.current?.closest('table');
+    const firstColumn = parentTableElement?.querySelector('[data-cell-row-key][data-cell-column-key]');
+    return {
+        columnKey: firstColumn?.dataset.cellColumnKey ?? '???',
+        colSpan: Object.keys(columnCollection.columns).length,
+    };
+}
+//# sourceMappingURL=column-collection.js.map

package/dist/esm/components/table/contexts/column-collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-collection.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, type ReactNode, type RefObject, useContext, useMemo, useRef, useState } from 'react';\nimport { useServerEffectEvent } from '../../../utils/use-server-effect-event.js';\n\ninterface ColumnCollection {\n  columns: Record<string, ColumnData>;\n  setColumns: (columns: Record<string, ColumnData>) => void;\n}\n\ninterface ColumnData {\n  number?: number;\n  width?: string | number;\n  contentAlignment: ColumnContentAlignment;\n}\n\n/** Represents the direction of content alignment within a table column. */\nexport type ColumnContentAlignment = 'start' | 'center' | 'end';\n\nconst ColumnCollectionContext = createContext<ColumnCollection | null>(null);\n\nconst EMPTY_OBJECT = {};\n\nexport function ColumnCollectionProvider({ children }: { children: ReactNode }) {\n  // When column collection is updated, we want to trigger a re-render,\n  // but we also want immediate access to the updated collection during SSR.\n  // Hence why it is stored as both a ref and a state.\n  const columnsRef = useRef<Record<string, ColumnData>>(EMPTY_OBJECT);\n  const [_columns, _setColumns] = useState<Record<string, ColumnData>>(EMPTY_OBJECT);\n\n  const collection: ColumnCollection = useMemo(\n    () => ({\n      get columns() {\n        return columnsRef.current;\n      },\n      setColumns: (columns) => {\n        columnsRef.current = columns;\n        _setColumns(columns);\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [_columns],\n  );\n\n  return <ColumnCollectionContext.Provider value={collection}>{children}</ColumnCollectionContext.Provider>;\n}\n\ntype ColumnRegistrator = (key: string, data: ColumnData) => () => void;\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnRegistration(): ColumnRegistrator {\n  const columnCollection = useContext(ColumnCollectionContext);\n  if (!columnCollection) {\n    throw new Error('Cannot use column registration outside of a table');\n  }\n\n  return useServerEffectEvent((key, data) => {\n    columnCollection.setColumns({\n      ...columnCollection.columns,\n      [key]: data,\n    });\n\n    return () => {\n      const { columns } = columnCollection;\n\n      if (columns[key] === data) {\n        delete columns[key];\n        columnCollection.setColumns({ ...columns });\n      }\n    };\n  });\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnData(key: string): Readonly<ColumnData> | undefined {\n  const columnCollection = useContext(ColumnCollectionContext);\n  if (!columnCollection) {\n    throw new Error('Cannot use column data outside of a table');\n  }\n\n  return columnCollection.columns[key];\n}\n\nexport interface UseEmptyStateCell {\n  columnKey: string;\n  colSpan: number;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useEmptyStateCell(ref: RefObject<HTMLTableCellElement | null>): UseEmptyStateCell {\n  const columnCollection = useContext(ColumnCollectionContext);\n  if (!columnCollection) {\n    throw new Error('Cannot use empty state cell outside of a table');\n  }\n\n  // Empty state cell should have the same column key as the first column in the table, so find it\n  const parentTableElement = ref.current?.closest('table');\n  const firstColumn = parentTableElement?.querySelector('[data-cell-row-key][data-cell-column-key]');\n\n  return {\n    columnKey: (firstColumn as HTMLTableCellElement | undefined)?.dataset.cellColumnKey ?? '???',\n    colSpan: Object.keys(columnCollection.columns).length,\n  };\n}\n"]}

package/dist/esm/components/table/contexts/focus.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export interface TableFocus {
+    focusedRowKey: string;
+    focusedColumnKey: string;
+    childFocusStrategy: ChildFocusStrategy;
+    setFocus: (rowKey: string, columnKey: string, childFocusStrategy?: ChildFocusStrategy) => void;
+}
+export type ChildFocusStrategy = 'first' | 'last';
+export declare function TableFocusProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTableFocus(): TableFocus;
+//# sourceMappingURL=focus.d.ts.map

package/dist/esm/components/table/contexts/focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/focus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAE7F,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChG;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,CAAC;AAIlD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAwCvE;AAGD,wBAAgB,aAAa,IAAI,UAAU,CAO1C"}

package/dist/esm/components/table/contexts/focus.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef, useState } from 'react';
+const TableFocusContext = createContext(null);
+export function TableFocusProvider({ children }) {
+    // When table focus is updated, we want to trigger a re-render,
+    // but we also want immediate access to the new values.
+    // Hence why they are stored as both a ref and a state.
+    const focusedRowKeyRef = useRef('');
+    const [_focusedRowKey, setFocusedRowKey] = useState('');
+    const focusedColumnKeyRef = useRef('');
+    const [_focusedColumnKey, setFocusedColumnKey] = useState('');
+    const childFocusStrategyRef = useRef('first');
+    const [_childFocusStrategy, setChildFocusStrategy] = useState('first');
+    const tableFocus = useMemo(() => ({
+        get focusedRowKey() {
+            return focusedRowKeyRef.current;
+        },
+        get focusedColumnKey() {
+            return focusedColumnKeyRef.current;
+        },
+        get childFocusStrategy() {
+            return childFocusStrategyRef.current;
+        },
+        setFocus: (rowKey, columnKey, childFocusStrategy) => {
+            focusedRowKeyRef.current = rowKey;
+            setFocusedRowKey(rowKey);
+            focusedColumnKeyRef.current = columnKey;
+            setFocusedColumnKey(columnKey);
+            if (childFocusStrategy) {
+                childFocusStrategyRef.current = childFocusStrategy;
+                setChildFocusStrategy(childFocusStrategy);
+            }
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [_focusedRowKey, _focusedColumnKey, _childFocusStrategy]);
+    return _jsx(TableFocusContext.Provider, { value: tableFocus, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useTableFocus() {
+    const tableFocus = useContext(TableFocusContext);
+    if (!tableFocus) {
+        throw new Error('Cannot use table focus outside of a table');
+    }
+    return tableFocus;
+}
+//# sourceMappingURL=focus.js.map

package/dist/esm/components/table/contexts/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/focus.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAW7F,MAAM,iBAAiB,GAAG,aAAa,CAAoB,IAAI,CAAC,CAAC;AAEjE,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAA2B;IACtE,+DAA+D;IAC/D,uDAAuD;IACvD,uDAAuD;IACvD,MAAM,gBAAgB,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAChE,MAAM,mBAAmB,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,iBAAiB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACtE,MAAM,qBAAqB,GAAG,MAAM,CAAqB,OAAO,CAAC,CAAC;IAClE,MAAM,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAqB,OAAO,CAAC,CAAC;IAE3F,MAAM,UAAU,GAAe,OAAO,CACpC,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,aAAa;YACf,OAAO,gBAAgB,CAAC,OAAO,CAAC;QAClC,CAAC;QACD,IAAI,gBAAgB;YAClB,OAAO,mBAAmB,CAAC,OAAO,CAAC;QACrC,CAAC;QACD,IAAI,kBAAkB;YACpB,OAAO,qBAAqB,CAAC,OAAO,CAAC;QACvC,CAAC;QACD,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAE;YAClD,gBAAgB,CAAC,OAAO,GAAG,MAAM,CAAC;YAClC,gBAAgB,CAAC,MAAM,CAAC,CAAC;YAEzB,mBAAmB,CAAC,OAAO,GAAG,SAAS,CAAC;YACxC,mBAAmB,CAAC,SAAS,CAAC,CAAC;YAE/B,IAAI,kBAAkB,EAAE,CAAC;gBACvB,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;gBACnD,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD,CAAC,cAAc,EAAE,iBAAiB,EAAE,mBAAmB,CAAC,CACzD,CAAC;IAEF,OAAO,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,QAAQ,GAA8B,CAAC;AAChG,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,aAAa;IAC3B,MAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["import { createContext, type ReactNode, useContext, useMemo, useRef, useState } from 'react';\n\nexport interface TableFocus {\n  focusedRowKey: string;\n  focusedColumnKey: string;\n  childFocusStrategy: ChildFocusStrategy;\n  setFocus: (rowKey: string, columnKey: string, childFocusStrategy?: ChildFocusStrategy) => void;\n}\n\nexport type ChildFocusStrategy = 'first' | 'last';\n\nconst TableFocusContext = createContext<TableFocus | null>(null);\n\nexport function TableFocusProvider({ children }: { children: ReactNode }) {\n  // When table focus is updated, we want to trigger a re-render,\n  // but we also want immediate access to the new values.\n  // Hence why they are stored as both a ref and a state.\n  const focusedRowKeyRef = useRef<string>('');\n  const [_focusedRowKey, setFocusedRowKey] = useState<string>('');\n  const focusedColumnKeyRef = useRef<string>('');\n  const [_focusedColumnKey, setFocusedColumnKey] = useState<string>('');\n  const childFocusStrategyRef = useRef<ChildFocusStrategy>('first');\n  const [_childFocusStrategy, setChildFocusStrategy] = useState<ChildFocusStrategy>('first');\n\n  const tableFocus: TableFocus = useMemo(\n    () => ({\n      get focusedRowKey() {\n        return focusedRowKeyRef.current;\n      },\n      get focusedColumnKey() {\n        return focusedColumnKeyRef.current;\n      },\n      get childFocusStrategy() {\n        return childFocusStrategyRef.current;\n      },\n      setFocus: (rowKey, columnKey, childFocusStrategy) => {\n        focusedRowKeyRef.current = rowKey;\n        setFocusedRowKey(rowKey);\n\n        focusedColumnKeyRef.current = columnKey;\n        setFocusedColumnKey(columnKey);\n\n        if (childFocusStrategy) {\n          childFocusStrategyRef.current = childFocusStrategy;\n          setChildFocusStrategy(childFocusStrategy);\n        }\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [_focusedRowKey, _focusedColumnKey, _childFocusStrategy],\n  );\n\n  return <TableFocusContext.Provider value={tableFocus}>{children}</TableFocusContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableFocus(): TableFocus {\n  const tableFocus = useContext(TableFocusContext);\n  if (!tableFocus) {\n    throw new Error('Cannot use table focus outside of a table');\n  }\n\n  return tableFocus;\n}\n"]}

package/dist/esm/components/table/contexts/row-state.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+export interface TableRowState {
+    rowKey: string;
+    isSelected?: boolean;
+    onSelectionToggle?: (value?: boolean) => void;
+}
+export declare function TableRowStateProvider({ children, rowKey, isSelected, onSelectionToggle, }: {
+    children: ReactNode;
+    rowKey: string;
+    isSelected?: boolean;
+    onSelectionToggle?: (value?: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTableRowState(): TableRowState;
+//# sourceMappingURL=row-state.d.ts.map

package/dist/esm/components/table/contexts/row-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAID,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,iBAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C,2CAaA;AAGD,wBAAgB,gBAAgB,IAAI,aAAa,CAOhD"}

package/dist/esm/components/table/contexts/row-state.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffectEvent } from '@react-aria/utils';
+import { createContext, useContext, useMemo } from 'react';
+const TableRowStateContext = createContext(null);
+export function TableRowStateProvider({ children, rowKey, isSelected, onSelectionToggle, }) {
+    const onSelectionToggleMemoized = useEffectEvent(onSelectionToggle);
+    const tableRowState = useMemo(() => ({
+        rowKey,
+        isSelected,
+        onSelectionToggle: onSelectionToggleMemoized,
+    }), [rowKey, isSelected, onSelectionToggleMemoized]);
+    return _jsx(TableRowStateContext.Provider, { value: tableRowState, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useTableRowState() {
+    const tableRowState = useContext(TableRowStateContext);
+    if (!tableRowState) {
+        throw new Error('Cannot use table row state outside of a table row');
+    }
+    return tableRowState;
+}
+//# sourceMappingURL=row-state.js.map

package/dist/esm/components/table/contexts/row-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQ3E,MAAM,oBAAoB,GAAG,aAAa,CAAuB,IAAI,CAAC,CAAC;AAEvE,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,iBAAiB,GAMlB;IACC,MAAM,yBAAyB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;IAEpE,MAAM,aAAa,GAAkB,OAAO,CAC1C,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;QACN,UAAU;QACV,iBAAiB,EAAE,yBAAyB;KAC7C,CAAC,EACF,CAAC,MAAM,EAAE,UAAU,EAAE,yBAAyB,CAAC,CAChD,CAAC;IAEF,OAAO,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAAG,QAAQ,GAAiC,CAAC;AACzG,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,aAAa,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,aAAa,CAAC;AACvB,CAAC","sourcesContent":["import { useEffectEvent } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\n\nexport interface TableRowState {\n  rowKey: string;\n  isSelected?: boolean;\n  onSelectionToggle?: (value?: boolean) => void;\n}\n\nconst TableRowStateContext = createContext<TableRowState | null>(null);\n\nexport function TableRowStateProvider({\n  children,\n  rowKey,\n  isSelected,\n  onSelectionToggle,\n}: {\n  children: ReactNode;\n  rowKey: string;\n  isSelected?: boolean;\n  onSelectionToggle?: (value?: boolean) => void;\n}) {\n  const onSelectionToggleMemoized = useEffectEvent(onSelectionToggle);\n\n  const tableRowState: TableRowState = useMemo(\n    () => ({\n      rowKey,\n      isSelected,\n      onSelectionToggle: onSelectionToggleMemoized,\n    }),\n    [rowKey, isSelected, onSelectionToggleMemoized],\n  );\n\n  return <TableRowStateContext.Provider value={tableRowState}>{children}</TableRowStateContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableRowState(): TableRowState {\n  const tableRowState = useContext(TableRowStateContext);\n  if (!tableRowState) {\n    throw new Error('Cannot use table row state outside of a table row');\n  }\n\n  return tableRowState;\n}\n"]}

package/dist/esm/components/table/contexts/table-state.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+/** Represents the type of row selection allowed within a table. */
+export type RowSelectionMode = 'single' | 'multiple' | 'none';
+export interface TableState {
+    rowSelectionMode: RowSelectionMode;
+    areAllRowsSelected?: boolean;
+    areSomeRowsSelected?: boolean;
+    onAllRowsSelectionToggle?: (value?: boolean) => void;
+    /** The selection state that will be applied to the next focused row. */
+    pendingRowSelectionState?: boolean;
+    setPendingRowSelectionState: (value: boolean | undefined) => void;
+}
+export declare function TableStateProvider({ children, rowSelectionMode, areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, }: {
+    children: ReactNode;
+    rowSelectionMode: RowSelectionMode;
+    areAllRowsSelected?: boolean;
+    areSomeRowsSelected?: boolean;
+    onAllRowsSelectionToggle?: (value?: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTableState(): TableState;
+//# sourceMappingURL=table-state.d.ts.map

package/dist/esm/components/table/contexts/table-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAE7F,mEAAmE;AACnE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,2BAA2B,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;CACnE;AAID,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GACzB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACtD,2CAkCA;AAGD,wBAAgB,aAAa,IAAI,UAAU,CAO1C"}

package/dist/esm/components/table/contexts/table-state.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffectEvent } from '@react-aria/utils';
+import { createContext, useContext, useMemo, useRef, useState } from 'react';
+const TableStateContext = createContext(null);
+export function TableStateProvider({ children, rowSelectionMode, areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, }) {
+    // When the pending selection state is updated, we want to trigger a re-render,
+    // but we also want immediate access to the new value.
+    // Hence why it is stored as both a ref and a state.
+    const pendingRowSelectionStateRef = useRef(undefined);
+    const [_pendingRowSelectionState, _setPendingRowSelectionState] = useState(undefined);
+    const onAllRowsSelectionToggleMemoized = useEffectEvent(onAllRowsSelectionToggle);
+    const tableState = useMemo(() => ({
+        rowSelectionMode,
+        areAllRowsSelected,
+        areSomeRowsSelected,
+        onAllRowsSelectionToggle: onAllRowsSelectionToggleMemoized,
+        get pendingRowSelectionState() {
+            return pendingRowSelectionStateRef.current;
+        },
+        setPendingRowSelectionState(pendingRowSelectionState) {
+            pendingRowSelectionStateRef.current = pendingRowSelectionState;
+            _setPendingRowSelectionState(pendingRowSelectionState);
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        rowSelectionMode,
+        areAllRowsSelected,
+        areSomeRowsSelected,
+        onAllRowsSelectionToggleMemoized,
+        _pendingRowSelectionState,
+    ]);
+    return _jsx(TableStateContext.Provider, { value: tableState, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useTableState() {
+    const tableState = useContext(TableStateContext);
+    if (!tableState) {
+        throw new Error('Cannot use table state outside of a table');
+    }
+    return tableState;
+}
+//# sourceMappingURL=table-state.js.map

package/dist/esm/components/table/contexts/table-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAe7F,MAAM,iBAAiB,GAAG,aAAa,CAAoB,IAAI,CAAC,CAAC;AAEjE,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GAOzB;IACC,+EAA+E;IAC/E,sDAAsD;IACtD,oDAAoD;IACpD,MAAM,2BAA2B,GAAG,MAAM,CAAsB,SAAS,CAAC,CAAC;IAC3E,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAE3G,MAAM,gCAAgC,GAAG,cAAc,CAAC,wBAAwB,CAAC,CAAC;IAElF,MAAM,UAAU,GAAe,OAAO,CACpC,GAAG,EAAE,CAAC,CAAC;QACL,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,wBAAwB,EAAE,gCAAgC;QAC1D,IAAI,wBAAwB;YAC1B,OAAO,2BAA2B,CAAC,OAAO,CAAC;QAC7C,CAAC;QACD,2BAA2B,CAAC,wBAA6C;YACvE,2BAA2B,CAAC,OAAO,GAAG,wBAAwB,CAAC;YAC/D,4BAA4B,CAAC,wBAAwB,CAAC,CAAC;QACzD,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD;QACE,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,gCAAgC;QAChC,yBAAyB;KAC1B,CACF,CAAC;IAEF,OAAO,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,QAAQ,GAA8B,CAAC;AAChG,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,aAAa;IAC3B,MAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["import { useEffectEvent } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo, useRef, useState } from 'react';\n\n/** Represents the type of row selection allowed within a table. */\nexport type RowSelectionMode = 'single' | 'multiple' | 'none';\n\nexport interface TableState {\n  rowSelectionMode: RowSelectionMode;\n  areAllRowsSelected?: boolean;\n  areSomeRowsSelected?: boolean;\n  onAllRowsSelectionToggle?: (value?: boolean) => void;\n  /** The selection state that will be applied to the next focused row. */\n  pendingRowSelectionState?: boolean;\n  setPendingRowSelectionState: (value: boolean | undefined) => void;\n}\n\nconst TableStateContext = createContext<TableState | null>(null);\n\nexport function TableStateProvider({\n  children,\n  rowSelectionMode,\n  areAllRowsSelected,\n  areSomeRowsSelected,\n  onAllRowsSelectionToggle,\n}: {\n  children: ReactNode;\n  rowSelectionMode: RowSelectionMode;\n  areAllRowsSelected?: boolean;\n  areSomeRowsSelected?: boolean;\n  onAllRowsSelectionToggle?: (value?: boolean) => void;\n}) {\n  // When the pending selection state is updated, we want to trigger a re-render,\n  // but we also want immediate access to the new value.\n  // Hence why it is stored as both a ref and a state.\n  const pendingRowSelectionStateRef = useRef<boolean | undefined>(undefined);\n  const [_pendingRowSelectionState, _setPendingRowSelectionState] = useState<boolean | undefined>(undefined);\n\n  const onAllRowsSelectionToggleMemoized = useEffectEvent(onAllRowsSelectionToggle);\n\n  const tableState: TableState = useMemo(\n    () => ({\n      rowSelectionMode,\n      areAllRowsSelected,\n      areSomeRowsSelected,\n      onAllRowsSelectionToggle: onAllRowsSelectionToggleMemoized,\n      get pendingRowSelectionState() {\n        return pendingRowSelectionStateRef.current;\n      },\n      setPendingRowSelectionState(pendingRowSelectionState: boolean | undefined) {\n        pendingRowSelectionStateRef.current = pendingRowSelectionState;\n        _setPendingRowSelectionState(pendingRowSelectionState);\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      rowSelectionMode,\n      areAllRowsSelected,\n      areSomeRowsSelected,\n      onAllRowsSelectionToggleMemoized,\n      _pendingRowSelectionState,\n    ],\n  );\n\n  return <TableStateContext.Provider value={tableState}>{children}</TableStateContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableState(): TableState {\n  const tableState = useContext(TableStateContext);\n  if (!tableState) {\n    throw new Error('Cannot use table state outside of a table');\n  }\n\n  return tableState;\n}\n"]}

package/dist/esm/components/table/hooks/use-selectable-row.d.ts

@@ -0,0 +1,6 @@
+import type { NativeElementProps } from '../../types.js';
+export interface UseSelectableRow {
+    rowProps: NativeElementProps<HTMLTableRowElement>;
+}
+export declare function useSelectableRow(): UseSelectableRow;
+//# sourceMappingURL=use-selectable-row.d.ts.map

package/dist/esm/components/table/hooks/use-selectable-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selectable-row.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAIzD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACnD;AAED,wBAAgB,gBAAgB,IAAI,gBAAgB,CAoCnD"}

package/dist/esm/components/table/hooks/use-selectable-row.js

@@ -0,0 +1,37 @@
+import { useTableRowState } from '../contexts/row-state.js';
+import { useTableState } from '../contexts/table-state.js';
+export function useSelectableRow() {
+    const { rowSelectionMode, setPendingRowSelectionState } = useTableState();
+    const { isSelected, onSelectionToggle } = useTableRowState();
+    // Handles row selection using a keyboard.
+    const onKeyDownCapture = (e) => {
+        // Ignore keyboard events bubbling through portals
+        if (!e.currentTarget.contains(e.target)) {
+            return;
+        }
+        if (e.key === ' ' && e.shiftKey) {
+            // Toggle selection of current row
+            onSelectionToggle?.();
+        }
+        else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.shiftKey && rowSelectionMode === 'multiple') {
+            // Extend selection up/down by one row
+            // We're not going to stop propagation so that the arrow navigation handler runs as usual,
+            // and we'll set a special state variable so that the selection state gets updated when the new row receives focus.
+            setPendingRowSelectionState(isSelected);
+            return;
+        }
+        else {
+            // if we didn't handle anything, return early so we don't stop propagation and preventDefault
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const rowProps = {
+        onKeyDownCapture: rowSelectionMode !== 'none' ? onKeyDownCapture : undefined,
+    };
+    return {
+        rowProps,
+    };
+}
+//# sourceMappingURL=use-selectable-row.js.map

package/dist/esm/components/table/hooks/use-selectable-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selectable-row.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAM3D,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,aAAa,EAAE,CAAC;IAC1E,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE7D,0CAA0C;IAC1C,MAAM,gBAAgB,GAAyB,CAAC,CAAC,EAAE,EAAE;QACnD,kDAAkD;QAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAiB,CAAC,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;YAChC,kCAAkC;YAClC,iBAAiB,EAAE,EAAE,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YAC3G,sCAAsC;YACtC,0FAA0F;YAC1F,mHAAmH;YACnH,2BAA2B,CAAC,UAAU,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;aAAM,CAAC;YACN,6FAA6F;YAC7F,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAA4C;QACxD,gBAAgB,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;KAC7E,CAAC;IAEF,OAAO;QACL,QAAQ;KACT,CAAC;AACJ,CAAC","sourcesContent":["import type { KeyboardEventHandler } from 'react';\nimport type { NativeElementProps } from '../../types.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\n\nexport interface UseSelectableRow {\n  rowProps: NativeElementProps<HTMLTableRowElement>;\n}\n\nexport function useSelectableRow(): UseSelectableRow {\n  const { rowSelectionMode, setPendingRowSelectionState } = useTableState();\n  const { isSelected, onSelectionToggle } = useTableRowState();\n\n  // Handles row selection using a keyboard.\n  const onKeyDownCapture: KeyboardEventHandler = (e) => {\n    // Ignore keyboard events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Element)) {\n      return;\n    }\n\n    if (e.key === ' ' && e.shiftKey) {\n      // Toggle selection of current row\n      onSelectionToggle?.();\n    } else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.shiftKey && rowSelectionMode === 'multiple') {\n      // Extend selection up/down by one row\n      // We're not going to stop propagation so that the arrow navigation handler runs as usual,\n      // and we'll set a special state variable so that the selection state gets updated when the new row receives focus.\n      setPendingRowSelectionState(isSelected);\n      return;\n    } else {\n      // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const rowProps: NativeElementProps<HTMLTableRowElement> = {\n    onKeyDownCapture: rowSelectionMode !== 'none' ? onKeyDownCapture : undefined,\n  };\n\n  return {\n    rowProps,\n  };\n}\n"]}