@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/side-panel/SidePanel.d.cts

@@ -0,0 +1,152 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanel: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface SidePanelProps extends PropsWithChildren<VariantProps<typeof sidePanel>> {
+    /**
+     * Controls whether the panel can be dismissed by clicking outside or using escape key.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /**
+     * When true, pressing the Escape key will not close the panel.
+     * This is useful when you need to prevent accidental dismissal.
+     * @default false
+     */
+    isKeyboardDismissDisabled?: boolean;
+    /**
+     * Controls the open state of the panel in controlled mode.
+     * Must be used together with `onOpenChange`.
+     */
+    isOpen?: boolean;
+    /**
+     * Sets the initial open state in uncontrolled mode.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     * Required when using controlled mode with `isOpen`.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * The SidePanel component provides contextual space for supplementary content without fully
+ * interrupting the user's workflow. It slides in from the right on desktop and from the bottom on mobile.
+ *
+ * You can use SidePanel to display detailed information, forms, or secondary actions while keeping
+ * the main interface visible and accessible. It's ideal for multi-step processes, editing items in a list,
+ * or displaying contextual details.
+ *
+ * Control the panel using either uncontrolled mode with `defaultOpen` or controlled mode with
+ * `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
+ * `isKeyboardDismissDisabled` props.
+ * @param {SidePanelProps} props - The props for the SidePanel component
+ * @see {@link SidePanelProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   SidePanel,
+ *   SidePanelHeader,
+ *   SidePanelContent,
+ *   SidePanelFooter,
+ *   Button
+ * } from '@payfit/unity-components'
+ *
+ * // Uncontrolled example
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open panel</Button>
+ *       <SidePanel>
+ *         <SidePanelHeader>Panel title</SidePanelHeader>
+ *         <SidePanelContent>Your content here</SidePanelContent>
+ *         <SidePanelFooter>
+ *           <Button variant="secondary">Cancel</Button>
+ *           <Button variant="primary">Save</Button>
+ *         </SidePanelFooter>
+ *       </SidePanel>
+ *     </DialogTrigger>
+ *   )
+ * }
+ *
+ * // Controlled example
+ * function ControlledExample() {
+ *   const [isOpen, setIsOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button onPress={() => setIsOpen(true)}>Open panel</Button>
+ *
+ *       <SidePanel isOpen={isOpen} onOpenChange={setIsOpen}>
+ *         <SidePanelHeader>Panel title</SidePanelHeader>
+ *         <SidePanelContent>Your content here</SidePanelContent>
+ *         <SidePanelFooter>
+ *           <Button
+ *             variant="primary"
+ *             onPress={() => setIsOpen(false)}
+ *           >
+ *             Close
+ *           </Button>
+ *         </SidePanelFooter>
+ *       </SidePanel>
+ *     </>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanel: import('react').ForwardRefExoticComponent<SidePanelProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanel };

package/dist/cjs/components/side-panel/parts/SidePanelContent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),i=require("tailwind-variants"),n=i.tv({slots:{base:["uy-bg-surface-neutral","uy-flex uy-flex-col uy-flex-1 uy-min-h-0 uy-overflow-hidden","uy-w-full"],scroller:["uy-flex-1 uy-overflow-y-auto uy-overflow-x-hidden uy-p-300","uy-h-full uy-min-h-0"]}}),t=a.forwardRef(({children:l,...o},s)=>{const{base:u,scroller:r}=n();return e.jsx("section",{ref:s,className:u(),...o,children:e.jsx("div",{className:r(),children:l})})});t.displayName="SidePanelContent";exports.SidePanelContent=t;exports.sidePanelContent=n;

package/dist/cjs/components/side-panel/parts/SidePanelContent.d.cts

@@ -0,0 +1,71 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanelContent: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    scroller: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    scroller: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    scroller: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface SidePanelContentProps extends PropsWithChildren<VariantProps<typeof sidePanelContent>> {
+    className?: string;
+}
+/**
+ * The `SidePanelContent` component renders the main content area of a side panel.
+ * It takes up the majority of the space between the header and footer components
+ * and adjusts for both mobile (bottom sheet) and desktop (side panel) views.
+ * The content is scrollable when it exceeds the available space.
+ * @component
+ * @param {SidePanelContentProps} props - The props for the `SidePanelContent` component
+ * @example
+ * ```tsx
+ * import { SidePanelContent } from '@payfit/unity-components'
+ *
+ * <SidePanelContent>
+ *   Your panel content here
+ * </SidePanelContent>
+ * ```
+ * @see {@link SidePanelContentProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelContent: import('react').ForwardRefExoticComponent<SidePanelContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelContent };

package/dist/cjs/components/side-panel/parts/SidePanelDragIndicator.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("react"),v=require("@use-gesture/react"),P=require("react-aria-components"),S=require("tailwind-variants"),h=require("../../../hooks/use-breakpoint-listener.cjs"),c=S.tv({slots:{base:["md:uy-hidden uy-mx-auto uy-pt-300 uy-w-500","uy-cursor-grab uy-touch-action-none"],indicator:"uy-h-50 uy-rounded-pill uy-bg-content-neutral-lowest"}}),q=100;function l(){const n=o.useRef(null),r=o.useContext(P.OverlayTriggerStateContext),s=h.useBreakpointListener(),{base:u,indicator:d}=c(),y=s==="xs"||s==="sm",m=v.useDrag(f=>{var a;const{movement:[I,t],direction:[R,g],intentional:p,cancel:x,last:D,event:b}=f;if(!y){x();return}b.preventDefault();const e=(a=n.current)==null?void 0:a.closest("[data-unity-side-panel]");if(e){if(t<0){e.style.transform="translate3d(0, 0, 0)";return}e.style.transform=`translate3d(0, ${t}px, 0)`,e.style.transition="none",D&&p&&(t>q||g>0?r&&setTimeout(()=>{r.close()},50):(e.style.transform="translate3d(0, 0, 0)",e.style.transition="transform 0.3s ease"))}},{axis:"y",filterTaps:!0,threshold:5});return i.jsx("div",{className:u(),"aria-hidden":"true",ref:n,...m(),children:i.jsx("div",{className:d()})})}l.displayName="SidePanelDragIndicator";exports.SidePanelDragIndicator=l;exports.sidePanelDragIndicator=c;

package/dist/cjs/components/side-panel/parts/SidePanelDragIndicator.d.cts

@@ -0,0 +1,54 @@
+export declare const sidePanelDragIndicator: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    indicator: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+/**
+ * A drag indicator component that connects to the overlay state context and
+ * provides swipe-to-dismiss functionality for the SidePanel.
+ * @internal
+ */
+export declare function SidePanelDragIndicator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidePanelDragIndicator {
+    var displayName: string;
+}

package/dist/cjs/components/side-panel/parts/SidePanelFooter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),n=require("tailwind-variants"),e=n.tv({base:["uy-py-200 uy-px-300 uy-w-full","uy-flex uy-items-center uy-justify-end uy-gap-100 uy-shrink-0","uy-bg-surface-neutral uy-rounded-bl-200 uy-rounded-br-200 uy-border-t uy-border-solid uy-border-t-solid uy-border-border-neutral","uy-sticky uy-bottom-0 uy-z-10","uy-mt-auto","uy-pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] md:uy-pb-200"]}),r=y.forwardRef(({children:t,...u},o)=>a.jsx("footer",{ref:o,className:e(),...u,children:t}));r.displayName="SidePanelFooter";exports.SidePanelFooter=r;exports.sidePanelFooter=e;

package/dist/cjs/components/side-panel/parts/SidePanelFooter.d.cts

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanelFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface SidePanelFooterProps extends PropsWithChildren<VariantProps<typeof sidePanelFooter>> {
+    className?: string;
+}
+/**
+ * The `SidePanelFooter` component renders the footer section of a side panel.
+ * It provides a space for action buttons and stays fixed at the bottom of the panel.
+ * On mobile devices, it respects the safe area to avoid being obscured by device UI elements.
+ * @component
+ * @param {SidePanelFooterProps} props - The props for the `SidePanelFooter` component
+ * @example
+ * ```tsx
+ * import { SidePanelFooter, Button } from '@payfit/unity-components'
+ *
+ * <SidePanelFooter>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button>Save</Button>
+ * </SidePanelFooter>
+ * ```
+ * @see {@link SidePanelFooterProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelFooter: import('react').ForwardRefExoticComponent<SidePanelFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelFooter };

package/dist/cjs/components/side-panel/parts/SidePanelHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),c=require("react-aria-components"),y=require("tailwind-variants"),d=require("../../icon-button/CircularIconButton.cjs"),t=y.tv({slots:{base:["uy-py-200 uy-px-300 uy-w-full","uy-flex uy-flex-col uy-shrink-0","uy-bg-surface-neutral uy-rounded-tl-200 uy-rounded-tr-200 uy-shadow-raising","uy-sticky uy-top-0 uy-z-10"],content:["uy-flex uy-items-center uy-justify-between uy-w-full"],heading:["uy-typography-h2 md:uy-typography-h3 uy-text-content-neutral uy-truncate"]}}),n=i.forwardRef(({children:r,...u},a)=>{const{base:s,content:l,heading:o}=t();return e.jsx("header",{ref:a,className:s(),...u,children:e.jsxs("div",{className:l(),children:[e.jsx(c.Heading,{slot:"title",className:o(),children:r}),e.jsx(d.CircularIconButton,{asElement:"button",slot:"close",icon:"CloseOutlined",title:"Close",size:"large",color:"content.neutral.low"})]})})});n.displayName="SidePanelHeader";exports.SidePanelHeader=n;exports.sidePanelHeader=t;

package/dist/cjs/components/side-panel/parts/SidePanelHeader.d.cts

@@ -0,0 +1,75 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanelHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface SidePanelHeaderProps extends PropsWithChildren<VariantProps<typeof sidePanelHeader>> {
+    className?: string;
+}
+/**
+ * The `SidePanelHeader` component renders the header section of a side panel.
+ * It includes a title and close button, and on mobile it displays a drag handle for bottom sheet interaction.
+ * @component
+ * @param {SidePanelHeaderProps} props - The props for the `SidePanelHeader` component
+ * @example
+ * ```tsx
+ * import { SidePanelHeader } from '@payfit/unity-components'
+ *
+ * <SidePanelHeader>Title of the panel</SidePanelHeader>
+ * ```
+ * @see {@link SidePanelHeaderProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelHeader: import('react').ForwardRefExoticComponent<SidePanelHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelHeader };

package/dist/cjs/components/spinner/Spinner.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),p=require("tailwind-variants"),m=require("../../hooks/use-id.cjs"),x=p.tv({slots:{base:"uy-flex uy-flex-col uy-items-center uy-gap-200",indicator:"",label:"uy-typography-body uy-text-left uy-truncate"},variants:{size:{small:{indicator:"uy-w-200 uy-h-200",label:"uy-hidden"},medium:{indicator:"uy-w-300 uy-h-300"}},color:{primary:{indicator:"uy-text-content-primary"},inverted:{indicator:"uy-text-content-inverted",label:"uy-text-content-inverted"},inherit:{indicator:""}}},defaultVariants:{size:"small",color:"primary"}});function n({label:a,color:s,size:i,role:t="status",...l},c){const r=`uy-spinner-label-${m()}`,{base:o,indicator:d,label:u}=x({size:i,color:s});return e.jsxs("div",{...l,ref:c,role:t,className:o(),"aria-labelledby":t==="status"?r:void 0,"aria-live":"polite","data-dd-privacy":"allow",children:[e.jsxs("svg",{viewBox:"0 0 100 100","aria-hidden":"true",className:d(),children:[e.jsx("title",{children:"Loading"}),e.jsx("circle",{cx:"50",cy:"50",r:"45",fill:"none",stroke:"currentColor",style:{"--r":"45px","--1deg":"calc(2 * pi * var(--r) / 360)",strokeWidth:"9.6px",shapeRendering:"geometricPrecision",strokeDasharray:"calc(40 * var(--1deg)) calc(80 * var(--1deg))",transformOrigin:"50% 50%",animation:"arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"}})]}),e.jsx("span",{id:r,className:u(),"aria-hidden":i!=="small",children:a})]})}n.displayName="Spinner";const h=y.forwardRef(n);exports.Spinner=h;

package/dist/cjs/components/spinner/Spinner.d.cts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+export type SpinnerProps = Pick<HTMLAttributes<HTMLDivElement>, 'aria-hidden' | 'role'> & {
+    /** The label text for the spinner */
+    label: string;
+    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
+    size: 'small' | 'medium';
+    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
+    color?: 'primary' | 'inverted' | 'inherit';
+};
+export declare const Spinner: import('react').ForwardRefExoticComponent<Pick<HTMLAttributes<HTMLDivElement>, "role" | "aria-hidden"> & {
+    /** The label text for the spinner */
+    label: string;
+    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
+    size: "small" | "medium";
+    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
+    color?: "primary" | "inverted" | "inherit";
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/spinner/dynamic-content.d.cts

@@ -0,0 +1,2 @@
+declare const DynamicContent: () => import("react/jsx-runtime").JSX.Element;
+export default DynamicContent;

package/dist/cjs/components/stepper/Stepper.context.d.cts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+interface StepperContextValue {
+    currentStep: number;
+}
+export declare const StepperContext: import('react').Context<StepperContextValue>;
+export declare function StepperProvider({ children, currentStep, }: PropsWithChildren<StepperContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useStepperContext(): StepperContextValue;
+export {};

package/dist/cjs/components/stepper/Stepper.d.cts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+export interface StepperProps extends Pick<HTMLAttributes<HTMLOListElement>, 'aria-label'> {
+    /**
+     * The current step number, it comes from the `useStepper` hook
+     */
+    currentStep: number;
+}
+/**
+ * Use the `Stepper` component to navigate between a discrete number of steps in a linear fashion.
+ *
+ * The `Stepper` defines its list of steps as children using the `Step` component.
+ *
+ * The `Stepper` component is a controlled component by default. You can manage its state using the `useStepper` hook as a companion for this component.
+ *
+ * The type signature for this hook is the following:
+ *
+ * ```ts
+ * interface StepperState {
+ *   currentStep: number
+ *   goNext: () => void
+ *   goPrevious: () => void
+ *   isLastStep: boolean
+ *   isFirstStep: boolean
+ * }
+ * type useStepper = ({initialStep: number, totalSteps: number}) => StepperState
+ * ```
+ *
+ * Where:
+ * - `totalSteps`is the total number of steps in the stepper
+ * - `initialStep` is the index of the step that should be shown on first render
+ *
+ * The returned state provides:
+ * - `currentStep`: The currently active step.
+ * - `goNext`: a callback to trigger navigation to the next step
+ * - `goPrevious`: a callback to go to the previous step
+ * - `isLastStep`: a boolean flag indicating if the current step is the last one
+ * - `isFirstStep`: a boolean flag indicating if the current step is the first one
+ *
+ * Use these state variables to determine the `currenStep` property of the `Stepper` component.
+ *
+ */
+declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLOListElement>>;
+export { Stepper };

package/dist/cjs/components/stepper/hooks/useStepper.d.cts

@@ -0,0 +1,12 @@
+export interface StepperState {
+    currentStep: number;
+    goNext: () => void;
+    goPrevious: () => void;
+    isLastStep: boolean;
+    isFirstStep: boolean;
+}
+declare const useStepper: ({ initialStep, totalSteps, }: {
+    initialStep: number;
+    totalSteps: number;
+}) => StepperState;
+export { useStepper };

package/dist/cjs/components/stepper/parts/Step.d.cts

@@ -0,0 +1,15 @@
+interface StepProps {
+    /**
+     * The label of the step which will be displayed under the step number
+     */
+    label: string;
+    /**
+     * The step number used to identify the step among the step list
+     */
+    stepNumber: number;
+}
+/**
+ * The `Step` component is used to display a step belonging the `Stepper`.
+ */
+declare const Step: import('react').ForwardRefExoticComponent<StepProps & import('react').RefAttributes<HTMLLIElement>>;
+export { Step };

package/dist/cjs/components/table/Table.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),R=require("tailwind-variants"),V=require("usehooks-ts"),j=require("./Table.context.cjs"),q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=q(s),H=R.tv({slots:{root:"uy-w-full uy-border uy-border-solid uy-border-border-neutral-enabled uy-rounded-100 uy-overflow-hidden",scroller:["uy-relative uy-flex uy-flex-col","uy-min-h-[var(--uy-table-min-rows)] uy-max-h-[var(--uy-table-max-rows)]","uy-w-full"]}}),N=s.forwardRef(({minRows:e=10,maxRows:d=50,children:l},o)=>{const{root:u,scroller:y}=H();return t.jsx("div",{ref:o,className:u(),"data-unity-slot":"table-root",children:t.jsx("div",{className:y(),"data-unity-slot":"table-scroller",style:{"--uy-table-min-rows":`calc(var(--uy-spacing-600) * ${e})`,"--uy-table-max-rows":`calc(var(--uy-spacing-600) * ${d})`},children:l})})});N.displayName="TableRoot";const D=R.tv({slots:{wrapper:["uy-flex-1 uy-h-full uy-bg-surface-neutral","uy-overflow-auto","uy-w-full"],table:["uy-min-w-full","uy-w-max","uy-text-left uy-typography-body uy-text-content-neutral uy-border-collapse","focus:uy-outline-2 focus:uy-outline-utility-focus-ring focus:uy-outline-offset-[-2px]"]}}),k=s.forwardRef((e,d)=>{const{children:l,label:o,description:u,...y}=e,i=s.useRef(null),{height:p=0}=V.useResizeObserver({ref:i,box:"border-box"}),{rowCount:r,columnCount:f}=s.useMemo(()=>{let b=0,m=0;return n.default.Children.forEach(l,h=>{if(!n.default.isValidElement(h))return;const c=n.default.Children.toArray(h.props.children).filter(a=>n.default.isValidElement(a));m+=c.length,c.forEach(a=>{if(!n.default.isValidElement(a))return;const w=n.default.Children.toArray(a.props.children).filter(x=>n.default.isValidElement(x));b=Math.max(b,w.length)})}),{rowCount:m,columnCount:b}},[l]);return s.useImperativeHandle(d,()=>({scrollToTop:()=>{i.current&&i.current.scrollTo({top:0,behavior:"smooth"})}})),t.jsx(j.TableContextProvider,{rowCount:r,columnCount:f,children:t.jsx(E,{scrollContainerRef:i,containerHeight:p,rowCount:r,columnCount:f,label:o,description:u,...y,children:l})})});k.displayName="Table";const E=e=>{var T,g,C;const{children:d,label:l,description:o,scrollContainerRef:u,containerHeight:y,rowCount:i,columnCount:p,onKeyDown:r,...f}=e,{wrapper:b,table:m}=D(),{keyboardNavigation:h}=j.useTableContext(),{tableRef:c,handleTableKeyDown:a}=h,w=s.useCallback(v=>{v.key!=="Tab"&&(a(v),r==null||r(v))},[a,r]),x=(((T=u.current)==null?void 0:T.scrollHeight)??0)>Math.floor(y);return t.jsxs("div",{className:b(),ref:u,style:{"--uy-table-is-scrollable":x?"1":"0"},children:[t.jsxs("table",{ref:c,className:m(),role:"grid","aria-rowcount":i,"aria-colcount":p,"aria-label":l,"aria-describedby":o?`table-desc-${(g=c.current)==null?void 0:g.id}`:void 0,onKeyDown:w,...f,children:[d,o&&t.jsx("caption",{id:`table-desc-${(C=c.current)==null?void 0:C.id}`,className:"uy-sr-only",children:o})]}),t.jsx("div",{className:"uy-sr-only","aria-live":"polite",children:"Table navigation: Use arrow keys to move between cells. Tab key exits the table. Home and End keys navigate to the first and last cell in a row. Page Up and Page Down move between rows."})]})};E.displayName="TableContent";exports.Table=k;exports.TableRoot=N;

package/dist/cjs/components/table/Table.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),o=require("react"),r=require("./hooks/useTableKeyboardNavigation.cjs"),i={focusedCell:{rowIndex:0,colIndex:0},isCellFocused:()=>!1,handleCellKeyDown:()=>{},handleTableKeyDown:()=>{},handleTableFocus:()=>{},handleCellFocus:()=>{},tableRef:{current:null},focusCell:()=>{},focusRow:()=>{}},d={rowCount:0,columnCount:0,keyboardNavigation:i},e=o.createContext(d);function s(){return o.useContext(e)}function c({children:t,...n}){const a=r.useTableKeyboardNavigation(),l={...n,keyboardNavigation:a};return u.jsx(e.Provider,{value:l,children:t})}exports.TableContext=e;exports.TableContextProvider=c;exports.useTableContext=s;

package/dist/cjs/components/table/Table.context.d.cts

@@ -0,0 +1,59 @@
+import { default as React, PropsWithChildren } from 'react';
+import { CellPosition } from './hooks/useTableKeyboardNavigation.cjs';
+interface TableKeyboardNavigationContextValue {
+    /** The currently focused cell position */
+    focusedCell: CellPosition;
+    /** Check if a specific cell is currently focused */
+    isCellFocused: (rowIndex: number, colIndex: number) => boolean;
+    /** Handle keyboard events on table cells */
+    handleCellKeyDown: (e: React.KeyboardEvent<HTMLTableCellElement>) => void;
+    /** Handle keyboard events on the table element */
+    handleTableKeyDown: (e: React.KeyboardEvent<HTMLTableElement>) => void;
+    /** Handle focus events on the table element */
+    handleTableFocus: (e: React.FocusEvent<HTMLTableElement>) => void;
+    /** Handle focus events on table cells */
+    handleCellFocus: (e: React.FocusEvent<HTMLTableCellElement>) => void;
+    /** Reference to the table element */
+    tableRef: React.RefObject<HTMLTableElement>;
+    /** Focus a specific cell by its row and column indices */
+    focusCell: (rowIndex: number, colIndex: number) => void;
+    /** Focus a specific row by its index */
+    focusRow: (rowIndex: number) => void;
+}
+interface TableContextValue {
+    /** The total number of rows in the table */
+    rowCount: number;
+    /** The total number of columns in the table */
+    columnCount: number;
+    /** Keyboard navigation functionality */
+    keyboardNavigation: TableKeyboardNavigationContextValue;
+}
+/**
+ * React context for the table component.
+ */
+export declare const TableContext: React.Context<TableContextValue>;
+/**
+ * Hook to access the table context.
+ * @example
+ * ```tsx
+ * const { rowCount, columnCount, keyboardNavigation } = useTableContext()
+ * ```
+ */
+export declare function useTableContext(): TableContextValue;
+/**
+ * Provider component for the table context.
+ * This component initializes the keyboard navigation and provides it to all table components.
+ * @param props - The TableContext props
+ * @param props.rowCount - The total number of rows in the table
+ * @param props.columnCount - The total number of columns in the table
+ * @param props.children - The children to render
+ * @see {@link TableContextValue} for available props
+ * @example
+ * ```tsx
+ * <TableContextProvider rowCount={10} columnCount={5}>
+ *   <Table>...</Table>
+ * </TableContextProvider>
+ * ```
+ */
+export declare function TableContextProvider({ children, ...props }: PropsWithChildren<Omit<TableContextValue, 'keyboardNavigation'>>): import("react/jsx-runtime").JSX.Element;
+export {};