@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/avatar/parts/AvatarFallback.d.cts

@@ -0,0 +1,170 @@
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
+    color: {
+        blue: {
+            background: string;
+            foreground: string;
+        };
+        sunglow: {
+            background: string;
+            foreground: string;
+        };
+        peach: {
+            background: string;
+            foreground: string;
+        };
+    };
+}, {
+    base: string;
+    background: string;
+    foreground: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    color: {
+        blue: {
+            background: string;
+            foreground: string;
+        };
+        sunglow: {
+            background: string;
+            foreground: string;
+        };
+        peach: {
+            background: string;
+            foreground: string;
+        };
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, unknown, unknown, undefined>>>;
+type AvatarFallbackBaseProps = Pick<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, 'delayMs'>;
+type AvatarFallbackInitialsProps = AvatarFallbackBaseProps & {
+    /** The fallback's variant. It can be one of: `initials`, `placeholder` */
+    variant: 'initials';
+    /** The initials to display as fallback content. Only available when variant is set to `initials` */
+    children: string | null | undefined;
+    color?: never;
+};
+type AvatarFallbackPlaceholderProps = AvatarFallbackBaseProps & {
+    /** The variant of the fallback, should be 'placeholder' */
+    variant: 'placeholder';
+    /**
+     * The color variant for the placeholder. Can be one of: `blue`, `peach`, `sunglow`. Only available when variant is set to `placeholder`
+     * @default 'blue'
+     */
+    color?: VariantProps<typeof avatarPlaceholder>['color'];
+    children?: never;
+};
+type AvatarFallbackProps = AvatarFallbackInitialsProps | AvatarFallbackPlaceholderProps;
+/**
+ * The AvatarFallback component displays a fallback content for an `Avatar` component when no image is provided or failed to load.
+ */
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+export { AvatarFallback };

package/dist/cjs/components/avatar/parts/AvatarImage.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),m=require("@radix-ui/react-avatar"),v=require("tailwind-merge"),f=require("tailwind-variants"),g=require("../Avatar.context.cjs"),p=require("../Avatar.variants.cjs");function n(e){if(e&&typeof e=="object"&&"default"in e)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const d=n(l),s=n(m),y=f.tv({extend:p.avatarBase,base:"uy-aspect-square uy-w-full uy-h-full uy-object-cover uy-bg-surface-neutral-lowest"}),i=d.forwardRef(({className:e,...a},t)=>{const{variant:r,size:c}=g.useAvatarContext(),o=v.twMerge(y({variant:r,size:c}),e);return u.jsx(s.Image,{ref:t,className:o,...a})});i.displayName=s.Image.displayName;exports.AvatarImage=i;

package/dist/cjs/components/avatar/parts/AvatarImage.d.cts

@@ -0,0 +1,8 @@
+import { AvatarImageProps as RadixAvatarImageProps } from '@radix-ui/react-avatar';
+import * as React from 'react';
+type AvatarImageProps = Omit<RadixAvatarImageProps, 'style' | 'width' | 'height' | 'slot' | 'asChild'>;
+/**
+ * The AvatarImage component displays an image for the avatar.
+ */
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+export { AvatarImage };

package/dist/cjs/components/avatar/parts/AvatarPair.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),y=require("react"),m=require("@radix-ui/react-avatar"),p=require("tailwind-variants"),o=require("../Avatar.context.cjs"),b=require("../Avatar.variants.cjs");function c(e){if(e&&typeof e=="object"&&"default"in e)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const P=c(y),g=c(m),x=p.tv({extend:b.avatarBase,base:"uy-absolute uy-overflow-hidden uy-leading-[0] uy-border uy-border-solid uy-border-content-inverted -uy-bottom-[var(--pair-offset)] -uy-right-[var(--pair-offset)] uy-transition-transform uy-origin-center",variants:{size:{xs:"uy-size-200",sm:"uy-size-300"},isHidden:{true:"uy-scale-0",false:"uy-scale-100"}},defaultVariants:{size:"sm",variant:"circle",isHidden:!1}}),u=P.forwardRef(({variant:e,isHidden:t,children:r,...a},l)=>{const{size:d}=o.useAvatarContext(),i=d==="xl",s=i?"sm":"xs",f=i?0:4,v=x({variant:e,size:s,isHidden:t});return n.jsx(o.AvatarProvider,{variant:e,size:s,hasPair:!0,children:n.jsx(g.Root,{ref:l,role:"img",className:v,"aria-hidden":t,style:{"--pair-offset":`${f}px`},...a,children:r})})});u.displayName="AvatarPair";exports.AvatarPair=u;

package/dist/cjs/components/avatar/parts/AvatarPair.d.cts

@@ -0,0 +1,48 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { avatarBase } from '../Avatar.variants.cjs';
+import * as React from 'react';
+export type AvatarPairProps = PropsWithChildren<{
+    /** Variant of the avatar pair. they match the variants of the Avatar component */
+    variant: NonNullable<VariantProps<typeof avatarBase>['variant']>;
+    /**
+     * Set to true to visually hide the avatar pair
+     * @default false
+     */
+    isHidden?: boolean;
+    /** Accessible label for the avatar */
+    'aria-label'?: string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+}>;
+/**
+ * The `AvatarPair` component displays a paired, smaller avatar in the bottom-right corner of the containing avatar.
+ */
+declare const AvatarPair: React.ForwardRefExoticComponent<{
+    /** Variant of the avatar pair. they match the variants of the Avatar component */
+    variant: NonNullable<VariantProps<typeof avatarBase>["variant"]>;
+    /**
+     * Set to true to visually hide the avatar pair
+     * @default false
+     */
+    isHidden?: boolean;
+    /** Accessible label for the avatar */
+    'aria-label'?: string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export { AvatarPair };

package/dist/cjs/components/avatar/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=t=>t?t.length<=2?t:t.replace(/[^a-z0-9 ]+/gi,"").split(" ").map(e=>e.charAt(0).toUpperCase()).filter((e,r,n)=>r===0||n.length>0&&r===n.length-1).join(""):"";exports.getInitials=i;

package/dist/cjs/components/avatar/utils.d.cts

@@ -0,0 +1 @@
+export declare const getInitials: (value: string | null | undefined) => string;

package/dist/cjs/components/badge/Badge.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),i=require("react"),d=require("@radix-ui/react-slot"),g=require("tailwind-merge"),b=require("tailwind-variants"),w=b.tv({base:"uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center",variants:{variant:{success:"uy-bg-surface-success-low uy-text-content-neutral",warning:"uy-bg-surface-warning-low uy-text-content-neutral",danger:"uy-bg-surface-danger-low uy-text-content-neutral",neutral:"uy-bg-surface-neutral-lowest uy-text-content-neutral",promo:"uy-bg-surface-promo-low uy-text-content-neutral",attention:"uy-bg-surface-danger uy-text-content-inverted",numeric:"uy-bg-surface-primary-low uy-text-blue-L10",contextual:"uy-bg-surface-neutral uy-border uy-border-solid uy-border-border-neutral uy-text-content-neutral"}},defaultVariants:{variant:"neutral"}},{twMerge:!1}),f={success:"status",warning:"alert",danger:"alert",neutral:"status",promo:"status",attention:"alert",contextual:"status",numeric:"status"},t=i.forwardRef(({className:a,variant:e="neutral",role:r,asChild:n=!1,children:u,...s},o)=>{const l=r??f[e]??"status",c=n?d.Slot:"span";return y.jsx(c,{"data-dd-privacy":"allow",ref:o,className:g.twMerge(w({variant:e}),a),role:l,...s,children:u})});t.displayName="Badge";exports.Badge=t;

package/dist/cjs/components/badge/Badge.d.cts

@@ -0,0 +1,94 @@
+import { AriaRole, PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const badge: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: string;
+        numeric: string;
+        contextual: string;
+    };
+}, undefined, "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center", {
+    twMerge: false;
+}, {
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: string;
+        numeric: string;
+        contextual: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: string;
+        numeric: string;
+        contextual: string;
+    };
+}, undefined, "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center", {
+    twMerge: false;
+}, unknown, unknown, undefined>>;
+export type BadgeProps = PropsWithChildren<{
+    /**
+     * To add classes to the badge
+     */
+    className?: string;
+    /**
+     * Defines the visual style of the badge
+     * @default 'neutral'
+     */
+    variant?: VariantProps<typeof badge>['variant'];
+    /**
+     * Explicit ARIA role for the badge. If not provided, will be determined by variant
+     */
+    role?: Extract<AriaRole, 'status' | 'alert'>;
+    /**
+     * Changes the root element to a different HTML element. The default element is a `<span>`.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Accessible label for the badge
+     */
+    'aria-label'?: string;
+}>;
+/**
+ * The Badge component is a visual label or indicator used to convey status or highlight content.
+ */
+declare const Badge: import('react').ForwardRefExoticComponent<{
+    /**
+     * To add classes to the badge
+     */
+    className?: string;
+    /**
+     * Defines the visual style of the badge
+     * @default 'neutral'
+     */
+    variant?: VariantProps<typeof badge>["variant"];
+    /**
+     * Explicit ARIA role for the badge. If not provided, will be determined by variant
+     */
+    role?: Extract<AriaRole, "status" | "alert">;
+    /**
+     * Changes the root element to a different HTML element. The default element is a `<span>`.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Accessible label for the badge
+     */
+    'aria-label'?: string;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { Badge };

package/dist/cjs/components/bottom-sheet/BottomSheet.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),t=require("react-aria-components"),x=require("tailwind-variants"),g=require("./parts/BottomSheetDragIndicator.cjs"),a=x.tv({slots:{overlay:["uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto","uy-backdrop-blur-sm uy-bg-utility-backdrop/65","data-[entering]:uy-animate-fade-in data-[exiting]:uy-animate-fade-out"],wrapper:["uy-w-full md:uy-max-w-[50svw]","uy-fixed uy-bottom-0 uy-left-0 uy-right-0 md:uy-left-0 md:uy-right-0 md:uy-mx-auto uy-z-[100]","uy-bg-surface-neutral uy-rounded-t-200","uy-shadow-flying","uy-flex uy-flex-col uy-max-h-[95svh]","uy-overflow-hidden","data-[entering]:uy-animate-slide-up-fade-in data-[exiting]:uy-animate-slide-down-fade-out"],content:["uy-flex uy-flex-col uy-h-full uy-min-h-[40svh] uy-overflow-hidden uy-outline-none"]}}),o=h.forwardRef(({children:u,isOpen:r,onOpenChange:n,defaultOpen:i,isDismissable:y=!0,isKeyboardDismissDisabled:l=!1,...d},s)=>{const{overlay:m,wrapper:c,content:f}=a();return e.jsx(t.ModalOverlay,{className:m(),isOpen:r,onOpenChange:n,defaultOpen:i,isDismissable:y,isKeyboardDismissDisabled:l,children:e.jsxs(t.Modal,{"data-dd-privacy":"allow",...d,ref:s,className:c(),"data-unity-bottom-sheet":!0,children:[e.jsx(g.BottomSheetDragIndicator,{}),e.jsx(t.Dialog,{className:f(),children:u})]})})});o.displayName="BottomSheet";exports.BottomSheet=o;exports.bottomSheet=a;

package/dist/cjs/components/bottom-sheet/BottomSheet.d.cts

@@ -0,0 +1,153 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const bottomSheet: 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 BottomSheetProps extends PropsWithChildren<VariantProps<typeof bottomSheet>> {
+    /**
+     * Controls whether the sheet can be dismissed by clicking outside or using escape key.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /**
+     * When true, pressing the Escape key will not close the sheet.
+     * This is useful when you need to prevent accidental dismissal.
+     * @default false
+     */
+    isKeyboardDismissDisabled?: boolean;
+    /**
+     * Controls the open state of the sheet 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 BottomSheet component provides a mobile-optimized interface for displaying content
+ * that slides up from the bottom of the screen. It's ideal for secondary tasks and supplementary
+ * information without leaving the current context.
+ *
+ * This component is specifically designed as a bottom-anchored variant, unlike the SidePanel
+ * which adapts to different viewports.
+ *
+ * Control the sheet using either uncontrolled mode with `defaultOpen` or controlled mode with
+ * `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
+ * `isKeyboardDismissDisabled` props.
+ * @param {BottomSheetProps} props - The props for the BottomSheet component
+ * @see {@link BottomSheetProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   BottomSheet,
+ *   BottomSheetHeader,
+ *   BottomSheetContent,
+ *   BottomSheetFooter,
+ *   Button,
+ *   DialogTrigger
+ * } from '@payfit/unity-components'
+ *
+ * // Uncontrolled example
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open bottom sheet</Button>
+ *       <BottomSheet>
+ *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
+ *         <BottomSheetContent>Your content here</BottomSheetContent>
+ *         <BottomSheetFooter>
+ *           <Button variant="secondary">Cancel</Button>
+ *           <Button variant="primary">Save</Button>
+ *         </BottomSheetFooter>
+ *       </BottomSheet>
+ *     </DialogTrigger>
+ *   )
+ * }
+ *
+ * // Controlled example
+ * function ControlledExample() {
+ *   const [isOpen, setIsOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button onPress={() => setIsOpen(true)}>Open bottom sheet</Button>
+ *
+ *       <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+ *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
+ *         <BottomSheetContent>Your content here</BottomSheetContent>
+ *         <BottomSheetFooter>
+ *           <Button
+ *             variant="primary"
+ *             onPress={() => setIsOpen(false)}
+ *           >
+ *             Close
+ *           </Button>
+ *         </BottomSheetFooter>
+ *       </BottomSheet>
+ *     </>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
+ */
+declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheet };

package/dist/cjs/components/bottom-sheet/parts/BottomSheetContent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),a=require("tailwind-variants"),t=a.tv({slots:{base:["uy-bg-surface-neutral uy-typography-body uy-text-content-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"]}}),o=y.forwardRef(({children:n,...u},l)=>{const{base:r,scroller:s}=t();return e.jsx("section",{ref:l,className:r(),...u,children:e.jsx("div",{className:s(),children:n})})});o.displayName="BottomSheetContent";exports.BottomSheetContent=o;exports.bottomSheetContent=t;

package/dist/cjs/components/bottom-sheet/parts/BottomSheetContent.d.cts

@@ -0,0 +1,70 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const bottomSheetContent: 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 BottomSheetContentProps extends PropsWithChildren<VariantProps<typeof bottomSheetContent>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetContent` component renders the main content area of a bottom sheet.
+ * It takes up the majority of the space between the header and footer components
+ * The content is scrollable when it exceeds the available space.
+ * @component
+ * @param {BottomSheetContentProps} props - The props for the `BottomSheetContent` component
+ * @example
+ * ```tsx
+ * import { BottomSheetContent } from '@payfit/unity-components'
+ *
+ * <BottomSheetContent>
+ *   Your panel content here
+ * </BottomSheetContent>
+ * ```
+ * @see {@link BottomSheetContentProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
+ */
+declare const BottomSheetContent: import('react').ForwardRefExoticComponent<BottomSheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetContent };

package/dist/cjs/components/bottom-sheet/parts/BottomSheetDragIndicator.cjs

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

package/dist/cjs/components/bottom-sheet/parts/BottomSheetDragIndicator.d.cts

@@ -0,0 +1,54 @@
+export declare const bottomSheetDragIndicator: 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 BottomSheetDragIndicator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace BottomSheetDragIndicator {
+    var displayName: string;
+}

package/dist/cjs/components/bottom-sheet/parts/BottomSheetFooter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),a=require("react"),n=require("tailwind-variants"),e=n.tv({base:["uy-py-150 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-border-t uy-border-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"]}),t=a.forwardRef(({children:o,className:r,...u},s)=>y.jsx("footer",{ref:s,className:e({class:r}),...u,children:o}));t.displayName="BottomSheetFooter";exports.BottomSheetFooter=t;exports.bottomSheetFooter=e;

package/dist/cjs/components/bottom-sheet/parts/BottomSheetFooter.d.cts

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const bottomSheetFooter: 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 BottomSheetFooterProps extends PropsWithChildren<VariantProps<typeof bottomSheetFooter>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetFooter` component renders the footer section of a bottom sheet.
+ * 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 {BottomSheetFooterProps} props - The props for the `BottomSheetFooter` component
+ * @example
+ * ```tsx
+ * import { BottomSheetFooter, Button } from '@payfit/unity-components'
+ *
+ * <BottomSheetFooter>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button>Save</Button>
+ * </BottomSheetFooter>
+ * ```
+ * @see {@link BottomSheetFooterProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/navigation-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const BottomSheetFooter: import('react').ForwardRefExoticComponent<BottomSheetFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetFooter };