@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

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

@@ -1,152 +0,0 @@
-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').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').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/SidePanel.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),a=require("react-aria-components"),x=require("tailwind-variants"),h=require("./parts/SidePanelDragIndicator.js"),t=x.tv({slots:{overlay:["md:uy-bg-gradient-to-r md:uy-from-grayscale-L12/0 md:uy-to-grayscale-L12/10 md:uy-from-70% md:uy-via-100%","uy-fixed uy-inset-0 uy-isolate","data-[entering]:uy-animate-fade-in data-[exiting]:uy-animate-fade-out"],wrapper:["uy-w-full md:uy-w-[400px]","uy-fixed uy-bottom-0 md:uy-inset-y-200 md:uy-right-200 uy-z-[100]","uy-bg-surface-neutral uy-rounded-t-200 md:uy-rounded-200 uy-shadow-flying","uy-flex uy-flex-col uy-h-[95svh] md:uy-max-h-[calc(100vh-2rem)]","uy-overflow-hidden","data-[entering]:uy-animate-slide-up-fade-in data-[exiting]:uy-animate-slide-down-fade-out md:data-[entering]:uy-animate-slide-right-fade-in md:data-[exiting]:uy-animate-slide-right-fade-out"],content:["uy-flex uy-flex-col uy-h-full uy-overflow-hidden uy-outline-none"]}}),i=g.forwardRef(({children:d,isOpen:n,onOpenChange:u,defaultOpen:r,isDismissable:l=!0,isKeyboardDismissDisabled:o=!1,...y},s)=>{const{overlay:m,wrapper:c,content:f}=t();return e.jsx(a.ModalOverlay,{className:m(),isOpen:n,onOpenChange:u,defaultOpen:r,isDismissable:l,isKeyboardDismissDisabled:o,children:e.jsxs(a.Modal,{"data-dd-privacy":"allow",...y,ref:s,className:c(),"data-unity-side-panel":!0,children:[e.jsx(h.SidePanelDragIndicator,{}),e.jsx(a.Dialog,{className:f(),children:d})]})})});i.displayName="SidePanel";exports.SidePanel=i;exports.sidePanel=t;

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

@@ -1,71 +0,0 @@
-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').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').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/SidePanelContent.js

@@ -1 +0,0 @@
-"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/SidePanelDragIndicator.d.ts

@@ -1,54 +0,0 @@
-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').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').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/SidePanelDragIndicator.js

@@ -1 +0,0 @@
-"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.js"),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/SidePanelFooter.d.ts

@@ -1,27 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-export declare const sidePanelFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config').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/SidePanelFooter.js

@@ -1 +0,0 @@
-"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/SidePanelHeader.d.ts

@@ -1,75 +0,0 @@
-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').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').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/side-panel/parts/SidePanelHeader.js

@@ -1 +0,0 @@
-"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.js"),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/spinner/Spinner.js

@@ -1 +0,0 @@
-"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.js"),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/tabs/Tabs.context.d.ts

@@ -1,11 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-import { tabsVariant } from './Tabs.variant.js';
-interface TabsContextValue {
-    variant: VariantProps<typeof tabsVariant>['variant'];
-    scrollable: boolean;
-}
-export declare const TabsContext: import('react').Context<TabsContextValue>;
-export declare function TabsProvider({ children, variant, scrollable, }: PropsWithChildren<TabsContextValue>): import("react/jsx-runtime").JSX.Element;
-export declare function useTabsContext(): TabsContextValue;
-export {};

package/dist/cjs/components/tabs/Tabs.context.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),t=r.createContext({variant:"primary",scrollable:!1});function a({children:e,variant:n,scrollable:o}){return s.jsx(t.Provider,{value:{variant:n,scrollable:o},children:e})}function i(){const e=r.useContext(t);if(!e)throw new Error("useTabsContext must be used within an TabsProvider");return e}exports.TabsContext=t;exports.TabsProvider=a;exports.useTabsContext=i;

package/dist/cjs/components/tabs/Tabs.d.ts

@@ -1,12 +0,0 @@
-import { TabsProps as AriaTabsProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
-import { tabsVariant } from './Tabs.variant.js';
-export interface TabsProps extends Omit<AriaTabsProps, 'isDisabled' | 'orientation' | 'className' | 'style' | 'disabledKeys' | 'keyboardActivation' | 'slot'>, VariantProps<typeof tabsVariant> {
-    /** set to true to make the tabs scrollable */
-    scrollable?: boolean;
-}
-/**
- * Tabs allow users to explore and switch between different views.
- */
-declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
-export { Tabs };

package/dist/cjs/components/tabs/Tabs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("react"),b=require("react-aria-components"),u=require("./Tabs.context.js"),d=require("./Tabs.variant.js"),r=c.forwardRef(({children:t,variant:e,scrollable:a=!1,...n},o)=>{const{base:i}=d.tabsVariant({variant:e,scrollable:a});return s.jsx(u.TabsProvider,{variant:e,scrollable:a,children:s.jsx(b.Tabs,{"data-dd-privacy":"allow",ref:o,className:i(),...n,children:t})})});r.displayName="Tabs";exports.Tabs=r;

package/dist/cjs/components/tabs/Tabs.variant.d.ts

@@ -1,139 +0,0 @@
-export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
-    variant: {
-        primary: {
-            tab: string;
-        };
-        neutral: {
-            tab: string;
-        };
-    };
-    scrollable: {
-        true: {
-            tabList: string;
-        };
-        false: {
-            base: string;
-            tabList: string;
-        };
-    };
-}, {
-    base: string;
-    tabList: string;
-    tab: string[];
-}, undefined, import('tailwind-variants/dist/config').TVConfig<{
-    variant: {
-        primary: {
-            tab: string;
-        };
-        neutral: {
-            tab: string;
-        };
-    };
-    scrollable: {
-        true: {
-            tabList: string;
-        };
-        false: {
-            base: string;
-            tabList: string;
-        };
-    };
-}, {
-    variant: {
-        primary: {
-            tab: string;
-        };
-        neutral: {
-            tab: string;
-        };
-    };
-    scrollable: {
-        true: {
-            tabList: string;
-        };
-        false: {
-            base: string;
-            tabList: string;
-        };
-    };
-}>, {
-    variant: {
-        primary: {
-            tab: string;
-        };
-        neutral: {
-            tab: string;
-        };
-    };
-    scrollable: {
-        true: {
-            tabList: string;
-        };
-        false: {
-            base: string;
-            tabList: string;
-        };
-    };
-}, {
-    base: string;
-    tabList: string;
-    tab: string[];
-}, import('tailwind-variants').TVReturnType<{
-    variant: {
-        primary: {
-            tab: string;
-        };
-        neutral: {
-            tab: string;
-        };
-    };
-    scrollable: {
-        true: {
-            tabList: string;
-        };
-        false: {
-            base: string;
-            tabList: string;
-        };
-    };
-}, {
-    base: string;
-    tabList: string;
-    tab: string[];
-}, undefined, import('tailwind-variants/dist/config').TVConfig<{
-    variant: {
-        primary: {
-            tab: string;
-        };
-        neutral: {
-            tab: string;
-        };
-    };
-    scrollable: {
-        true: {
-            tabList: string;
-        };
-        false: {
-            base: string;
-            tabList: string;
-        };
-    };
-}, {
-    variant: {
-        primary: {
-            tab: string;
-        };
-        neutral: {
-            tab: string;
-        };
-    };
-    scrollable: {
-        true: {
-            tabList: string;
-        };
-        false: {
-            base: string;
-            tabList: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;

package/dist/cjs/components/tabs/Tabs.variant.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),t=e.tv({slots:{base:"uy-w-full",tabList:"uy-flex",tab:["uy-flex uy-relative uy-shrink-0 uy-gap-100 uy-whitespace-nowrap uy-min-w-[3ch] uy-text-center uy-text-content-form-enabled uy-text-action uy-pt-150 uy-pb-150 uy-pl-200 uy-pr-200 uy-rounded-25 uy-cursor-pointer",'data-[selected]:after:uy-content:" " data-[selected]:after:uy-w-full data-[selected]:after:uy-h-[4px] data-[selected]:after:uy-absolute data-[selected]:after:uy-bottom-[-1px] data-[selected]:after:uy-left-0 data-[selected]:after:uy-right-0',"hover:uy-cursor-pointer focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[4px]"]},variants:{variant:{primary:{tab:"data-[selected]:after:uy-bg-border-form-active"},neutral:{tab:"data-[selected]:after:uy-bg-content-neutral"}},scrollable:{true:{tabList:""},false:{base:"",tabList:"uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled"}}},defaultVariants:{variant:"primary",scrollable:!1}});exports.tabsVariant=t;

package/dist/cjs/components/tabs/parts/NavigationButton.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react-aria-components"),s=require("tailwind-variants"),a=require("../../icon/Icon.js"),l=s.tv({slots:{base:"uy-absolute uy-pt-150 uy-pb-150",button:"uy-rounded-circle hover:uy-text-content-neutral-hover focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",icon:"uy-text-content-neutral-enabled"},variants:{direction:{left:{base:"uy-top-0 uy-left-0 uy-z-10 uy-bg-gradient-to-r uy-from-surface-inverted/0 uy-from-surface-inverted/100 uy-pl-50 uy-pr-200"},right:{base:"uy-right-0 uy-top-0 uy-z-10 uy-bg-gradient-to-l uy-from-surface-inverted/100 uy-from-surface-inverted/0 uy-pl-200 uy-pr-50"}}}}),c=({direction:t,onPress:u})=>{const{base:r,button:n,icon:o}=l({direction:t});return e.jsx("div",{className:r(),children:e.jsx(i.Button,{id:`scroll-${t}`,className:n(),"aria-label":`Scroll ${t}`,onPress:u,children:e.jsx(a.Icon,{className:o(),"aria-labelledby":`scroll-${t}`,src:t==="left"?"CaretLeftOutlined":"CaretRightOutlined"})})})};exports.NavigationButton=c;

package/dist/cjs/components/tabs/parts/Tab.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-import { TabProps as AriaTabProps } from 'react-aria-components';
-export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className' | 'style' | 'download' | 'ping' | 'routerOptions'> {
-    suffix?: ReactNode;
-}
-declare const Tab: import('react').ForwardRefExoticComponent<TabProps & {
-    children?: ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>>;
-export { Tab };

package/dist/cjs/components/tabs/parts/Tab.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),l=require("react-aria-components"),u=require("../Tabs.context.js"),T=require("../Tabs.variant.js"),a=b.forwardRef(({children:r,suffix:e,...s},n)=>{const{variant:o,scrollable:c}=u.useTabsContext(),{tab:i}=T.tabsVariant({variant:o,scrollable:c});return t.jsxs(l.Tab,{ref:n,...s,className:i(),children:[r,e?t.jsx("span",{children:e}):null]})});a.displayName="Tab";exports.Tab=a;

package/dist/cjs/components/tabs/parts/TabList.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("react"),g=require("react-aria-components"),N=require("../Tabs.context.js"),W=require("../Tabs.variant.js"),L=require("./NavigationButton.js"),y=l.forwardRef(({children:f},b)=>{const e=l.useRef(null),[v,m]=l.useState(!1),[S,x]=l.useState(!0),{variant:R,scrollable:d}=N.useTabsContext(),{tabList:h}=W.tabsVariant({variant:R,scrollable:d}),T=t=>{const{scrollLeft:o,scrollWidth:s,clientWidth:r}=t.currentTarget;m(o>0),x(o+r<s)},j=()=>{var r;const t=(r=e.current)==null?void 0:r.querySelectorAll("div[role=tab]");if(!e.current||!t)return 0;const{scrollLeft:o}=e.current,s=Array.from(t);for(let a=s.length-1;a>=0;a--){const c=s[a];if(c.offsetLeft<o)return-c.offsetWidth}return 0},q=()=>{var c;const t=(c=e.current)==null?void 0:c.querySelectorAll("div[role=tab]");if(!e.current||!t)return 0;const{scrollLeft:o,clientWidth:s}=e.current,r=Array.from(t),a=o+s;for(let i=0;i<r.length-1;i++){const u=r[i];if(u.offsetLeft+u.offsetWidth>a)return u.offsetWidth}return 0};return d?n.jsxs("div",{className:"uy-relative",children:[v&&n.jsx(L.NavigationButton,{direction:"left",onPress:()=>{var t;(t=e.current)==null||t.scrollBy({behavior:"smooth",left:j()})}}),n.jsx("div",{ref:e,"data-testid":"scrollable-tab-list",className:"uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled",onScroll:T,children:n.jsx(g.TabList,{ref:b,className:h(),children:f})}),S&&n.jsx(L.NavigationButton,{direction:"right",onPress:()=>{var t;(t=e.current)==null||t.scrollBy({behavior:"smooth",left:q()})}})]}):n.jsx(g.TabList,{ref:b,className:h(),children:f})});y.displayName="TabList";exports.TabList=y;

package/dist/cjs/components/tabs/parts/TabPanel.d.ts

@@ -1,4 +0,0 @@
-import { TabPanelProps as AriaTabPanelProps } from 'react-aria-components';
-export type TabPanelProps = Omit<AriaTabPanelProps, 'classname' | 'style'>;
-declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;
-export { TabPanel };

package/dist/cjs/components/tabs/parts/TabPanel.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),s=require("react-aria-components"),e=o.forwardRef(({children:a,...r},t)=>n.jsx(s.TabPanel,{ref:t,...r,children:a}));e.displayName="TabPanel";exports.TabPanel=e;