@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/checkbox/Checkbox.variants.d.cts

@@ -0,0 +1,123 @@
+export declare const checkbox: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    asterisk: string;
+    optionalTag: string;
+    descriptionsContainer: string;
+    helperText: string;
+    feedbackText: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}>, {
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    asterisk: string;
+    optionalTag: string;
+    descriptionsContainer: string;
+    helperText: string;
+    feedbackText: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    asterisk: string;
+    optionalTag: string;
+    descriptionsContainer: string;
+    helperText: string;
+    feedbackText: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/cjs/components/checkbox/CheckboxStandalone.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),y=require("react-aria"),j=require("react-aria-components"),k=require("./Checkbox.variants.cjs"),m=require("./parts/CheckboxIndicator.cjs"),r=h.forwardRef(({children:o,...a},c)=>{const n=y.useId(),{isDisabled:l,isReadOnly:i,isInvalid:t}=a,{base:d,wrapper:b}=k.checkbox({isDisabled:l,isReadOnly:i,isInvalid:t}),s=[a["aria-labelledby"],`${n}-label`].filter(Boolean),x=s.length>0?s.join(" "):void 0;return e.jsx("div",{className:d(),children:e.jsx(j.Checkbox,{...a,ref:c,className:b(),"aria-labelledby":x,children:u=>e.jsxs(e.Fragment,{children:[e.jsx(m.CheckboxIndicator,{...u}),e.jsx("span",{id:`${n}-label`,className:"uy-sr-only",children:o})]})})})});r.displayName="CheckboxStandalone";exports.CheckboxStandalone=r;

package/dist/cjs/components/checkbox/CheckboxStandalone.d.cts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+export interface CheckboxStandaloneProps extends AriaCheckboxProps {
+    /**
+     * The content to display as the checkbox label.
+     * This is required for accessibility.
+     */
+    children: ReactNode;
+    /**
+     * Whether the checkbox is disabled.
+     * When true, the checkbox cannot be interacted with and appears dimmed.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the checkbox is in a read-only state.
+     * When true, the checkbox cannot be modified but maintains normal appearance and can be focused.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the checkbox is in an invalid state.
+     * Use this for form validation feedback.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the checkbox is selected (controlled).
+     * Use this with `onChange` for controlled checkbox state.
+     */
+    isSelected?: boolean;
+    /**
+     * The default selected state (uncontrolled).
+     * Use this when you don't need to control the checkbox state.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * Useful for parent checkboxes in a tree structure.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Handler called when the checkbox's selected state changes.
+     * @param isSelected The new selected state
+     */
+    onChange?: (isSelected: boolean) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: () => void;
+}
+/**
+ * This is an inner version of the checkbox that does not have any label.
+ * Used for internal purposes as part of other components, like table row selection.
+ */
+declare const CheckboxStandalone: import('react').ForwardRefExoticComponent<CheckboxStandaloneProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { CheckboxStandalone };

package/dist/cjs/components/checkbox/parts/CheckboxIndicator.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("tailwind-variants"),c=n.tv({slots:{base:["uy-flex uy-items-center uy-justify-center uy-rounded-50 uy-w-200 uy-h-200 uy-text-content-inverted uy-border uy-border-solid uy-transition-all uy-duration-100"],checkmark:["uy-w-[16px] uy-fill-none uy-stroke-[2px] uy-stroke-content-inverted uy-transition-all uy-duration-500"]},variants:{isSelected:{true:{base:"uy-border-border-form-active uy-bg-surface-form-active"}},isDisabled:{true:""},isReadOnly:{true:""},isInvalid:{true:""}},defaultVariants:{isSelected:!1,isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isSelected:!1,isDisabled:!1,isInvalid:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled"}},{isSelected:!1,isDisabled:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isDisabled:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-border-form-disabled"}},{isSelected:!1,isInvalid:!0,className:{base:"uy-border-border-form-error uy-bg-surface-form-enabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isInvalid:!0,className:{base:"!uy-border-border-danger !uy-bg-surface-danger",checkmark:"uy-text-content-inverted"}},{isSelected:!1,isReadOnly:!0,className:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isReadOnly:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-border-form-read-only"}}]});function s({isSelected:r,isDisabled:t,isIndeterminate:a,isInvalid:d,isReadOnly:i,className:o}){const{base:l,checkmark:u}=c({isSelected:r||a,isDisabled:t,isInvalid:d,isReadOnly:i});return e.jsx("div",{className:l({className:o}),"data-dd-privacy":"mask",children:e.jsx("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 16 16","aria-hidden":"true",className:u(),style:{strokeDashoffset:r?44:66},children:a?e.jsx("rect",{x:"3",y:"7",width:"10",height:"2",rx:"0.5",stroke:"none",fill:"currentColor"}):e.jsx("polyline",{points:"3.5,8 6.5,11 12.5,5",stroke:"currentColor",strokeDasharray:"22",strokeLinecap:"butt",strokeLinejoin:"bevel"})})})}s.displayName="CheckboxIndicator";exports.CheckboxIndicator=s;

package/dist/cjs/components/checkbox/parts/CheckboxIndicator.d.cts

@@ -0,0 +1,13 @@
+export interface CheckboxIndicatorProps {
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    className?: string;
+}
+declare function CheckboxIndicator({ isSelected, isDisabled, isIndeterminate, isInvalid, isReadOnly, className, }: CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CheckboxIndicator {
+    var displayName: string;
+}
+export { CheckboxIndicator };

package/dist/cjs/components/checkbox-field/CheckboxField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),q=require("react-hook-form"),y=require("../checkbox/Checkbox.cjs"),j=require("../form-field/FormField.cjs"),p=require("../form-field/parts/FormControl.cjs"),T=require("../form-field/parts/FormFeedbackText.cjs");function g({name:o,children:r,defaultSelected:c,helperText:n,contextualLink:i,isRequired:s,isInvalid:l,isLoading:u,isDisabled:x,isReadOnly:d,requiredVariant:F,...a},m){const{control:b,watch:k}=q.useFormContext(),h=k(o),C={isRequired:s,isInvalid:l,isLoading:u,isDisabled:x,isReadOnly:d};return e.jsxs(j.FormField,{control:b,name:o,className:"uy-flex uy-flex-col uy-gap-100",...C,children:[e.jsx(p.FormControl,{children:e.jsx(y.Checkbox,{ref:m,defaultSelected:c,isSelected:h,requiredVariant:F,helperText:n,feedbackText:e.jsx(T.FormFeedbackText,{}),...a,children:r})}),i]})}const t=f.forwardRef(function(r,c){return g(r,c)});t.displayName="CheckboxField";exports.CheckboxField=t;

package/dist/cjs/components/checkbox-field/CheckboxField.d.cts

@@ -0,0 +1,74 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.cjs';
+import { LabelProps } from '../label/Label.cjs';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the checkbox. */
+    children: ReactNode;
+    /** Helper text to display below the checkbox. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the checkbox. */
+    contextualLink?: ReactNode;
+    /** The default selected value of the checkbox. */
+    defaultSelected?: boolean;
+    /** Whether the checkbox is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox is loading. */
+    isLoading?: boolean;
+}
+export type CheckboxFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
+type CheckboxFieldComponent = (<TSchema extends Schema>(props: CheckboxFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLLabelElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `CheckboxField` component enhances the base Checkbox with form integration capabilities,
+ * making it easy to handle boolean values in forms with proper validation and feedback.
+ *
+ * It provides form validation, helper text, and error feedback while maintaining the same
+ * API as the base Checkbox component. The component automatically integrates with Unity's
+ * form context and handles value updates through the form's state management.
+ * @param {CheckboxFieldProps} props - Props for the CheckboxField component
+ * @see {@link CheckboxFieldProps} for all available props
+ * @example
+ * ```tsx
+ * import { useUnityForm, CheckboxField } from '@payfit/unity-components'
+ * import * as z from 'zod'
+ *
+ * function Example() {
+ *   const schema = z.object({
+ *     acceptTerms: z.boolean().refine(Boolean, {
+ *       message: 'You must accept the terms',
+ *     }),
+ *   })
+ *
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <CheckboxField<typeof schema>
+ *         name="acceptTerms"
+ *         helperText="Please read our terms carefully"
+ *       >
+ *         Accept terms and conditions
+ *       </CheckboxField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](/?path=/docs/forms-checkboxfield--docs) • [Demo](/?path=/story/forms-checkboxfield--primary)
+ * @note The schema type parameter is needed to ensure type safety with the form's
+ schema.
+ * If you omit it, the `name` prop will not be type-safe.
+ */
+declare const CheckboxField: CheckboxFieldComponent;
+export { CheckboxField };

package/dist/cjs/components/checkbox-group/CheckboxGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),g=require("react-aria-components"),j=require("tailwind-variants"),f=require("../label/Label.cjs"),l=require("../text/Text.cjs"),a=j.tv({base:"uy-flex uy-flex-col uy-gap-50"}),i=r.forwardRef(({label:t,helperText:s,feedbackText:e,isDisabled:u,isReadOnly:y,isInvalid:n,isRequired:c,isLoading:m,children:p,requiredVariant:x,...d},b)=>{const h={isDisabled:u,isReadOnly:y,isInvalid:n,isRequired:c,isLoading:m};return o.jsxs(g.CheckboxGroup,{...h,...d,ref:b,className:a(),children:[t&&o.jsx(f.Label,{isRequired:c,requiredVariant:x,children:t}),s&&o.jsx(l.Text,{variant:"bodySmall",color:"content.neutral.low",slot:"description",children:s}),o.jsx("div",{className:"uy-mt-100 uy-flex uy-flex-col uy-gap-150 uy-py-25","data-dd-privacy":"mask",children:p}),n&&(typeof e=="string"?o.jsx(l.Text,{variant:"bodySmallStrong",color:"content.form.invalid",slot:"errorMessage",children:e}):r.isValidElement(e)&&r.cloneElement(e,{slot:"errorMessage"}))]})});i.displayName="CheckboxGroup";exports.CheckboxGroup=i;exports.checkboxGroup=a;

package/dist/cjs/components/checkbox-group/CheckboxGroup.d.cts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const checkboxGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface CheckboxGroupProps extends VariantProps<typeof checkboxGroup>, Omit<AriaCheckboxGroupProps, 'className' | 'class'> {
+    /** The label for the checkbox group. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the checkbox group. */
+    feedbackText?: ReactNode;
+    /** The default selected values of the checkbox group. */
+    defaultValue?: string[];
+    /** The current selected values of the checkbox group (controlled). */
+    value?: string[];
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox group is required. */
+    isRequired?: boolean;
+    /** Whether the checkbox group is loading. */
+    isLoading?: boolean;
+    /** The variant of the required indicator. */
+    requiredVariant?: 'required' | 'optional';
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: AriaCheckboxGroupProps['onFocus'];
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: AriaCheckboxGroupProps['onBlur'];
+    /**
+     * Handler that is called when the element's focus status changes.
+     * @param isFocused
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * The `CheckboxGroup` component is an accessible group of related checkboxes.
+ * It provides a way to select multiple options from a list of choices.
+ * @param {CheckboxGroupProps} props - The props for the `CheckboxGroup` component
+ * @example
+ * ```tsx
+ * import { CheckboxGroup, Checkbox } from '@payfit/unity-components'
+ *
+ * <CheckboxGroup
+ *   label="Notification preferences"
+ *   helperText="Choose how you want to receive notifications"
+ * >
+ *   <Checkbox value="email">Email notifications</Checkbox>
+ *   <Checkbox value="sms">SMS notifications</Checkbox>
+ *   <Checkbox value="push">Push notifications</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ * @see {@link CheckboxProps} for all available props
+ */
+declare const CheckboxGroup: import('react').ForwardRefExoticComponent<CheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CheckboxGroup };

package/dist/cjs/components/checkbox-group-field/CheckboxGroupField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("react"),G=require("react-hook-form"),f=require("../checkbox-group/CheckboxGroup.cjs"),j=require("../form-field/FormField.cjs"),y=require("../form-field/parts/FormControl.cjs"),T=require("../form-field/parts/FormFeedbackText.cjs");function R({name:o,label:r,defaultValue:t,helperText:n,contextualLink:i,isRequired:u,isInvalid:s,isLoading:l,isDisabled:F,isReadOnly:d,requiredVariant:x,children:m,...b},a){const{control:k,watch:p}=G.useFormContext(),h=p(o),C={isRequired:u,isInvalid:s,isLoading:l,isDisabled:F,isReadOnly:d};return e.jsxs(j.FormField,{control:k,name:o,...C,children:[e.jsx(y.FormControl,{children:e.jsx(f.CheckboxGroup,{ref:a,label:r,defaultValue:t,value:h,helperText:n,feedbackText:e.jsx(T.FormFeedbackText,{}),requiredVariant:x,...b,children:m})}),i]})}const c=q.forwardRef(function(r,t){return R(r,t)});c.displayName="CheckboxGroupField";exports.CheckboxGroupField=c;

package/dist/cjs/components/checkbox-group-field/CheckboxGroupField.d.cts

@@ -0,0 +1,79 @@
+import { ForwardedRef, JSX, PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.cjs';
+import { CheckboxGroupProps } from '../checkbox-group/CheckboxGroup.cjs';
+import { LabelProps } from '../label/Label.cjs';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the checkbox group. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the checkbox group. */
+    contextualLink?: ReactNode;
+    /** The default selected values of the checkbox group. */
+    defaultValue?: string[];
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox group is loading. */
+    isLoading?: boolean;
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: CheckboxGroupProps['onFocus'];
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: CheckboxGroupProps['onBlur'];
+    /**
+     * Handler that is called when the element's focus status changes.
+     * @param isFocused
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+}
+export type CheckboxGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
+type CheckboxGroupFieldComponent = (<TSchema extends Schema>(props: CheckboxGroupFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `CheckboxGroupField` component renders a group of related checkboxes that can be used in forms.
+ * It integrates with the `Form` component automatically and provides form validation, helper text,
+ * and error feedback.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   preferences: z.array(z.string())
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <CheckboxGroupField<typeof schema>
+ *         name="preferences"
+ *         label="Select your preferences"
+ *         helperText="Choose all that apply"
+ *       >
+ *         <Checkbox value="email">Email notifications</Checkbox>
+ *         <Checkbox value="sms">SMS notifications</Checkbox>
+ *       </CheckboxGroupField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @note The schema type parameter is needed to ensure type safety with the form's schema.
+ * If you omit it, the `name` prop will not be type-safe.
+ */
+declare const CheckboxGroupField: CheckboxGroupFieldComponent;
+export { CheckboxGroupField };

package/dist/cjs/components/collapsible/Collapsible.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=require("react"),n=require("react-aria-components"),r=require("tailwind-variants"),a=r.tv({base:"uy-w-full uy-rounded-50 focus-within:uy-outline-2 focus-within:uy-outline focus-within:uy-outline-offset-2 focus-within:uy-outline-utility-focus-ring"}),e=u.forwardRef(({children:i,isExpanded:t,...o},l)=>s.jsx(n.Disclosure,{"data-dd-privacy":"allow",...o,className:a(),ref:l,isExpanded:t,children:i}));e.displayName="Collapsible";exports.Collapsible=e;

package/dist/cjs/components/collapsible/Collapsible.d.cts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { DisclosureProps } from 'react-aria-components';
+export interface CollapsibleProps extends Omit<DisclosureProps, 'isDisabled' | 'defaultExpanded' | 'className'> {
+    /**
+     * The content of the collapsible component.
+     * Typically includes a CollapsibleTitle and CollapsibleContent.
+     */
+    children: ReactNode;
+    /**
+     * Controls whether the collapsible is expanded by default.
+     * @default false
+     */
+    isExpanded?: boolean;
+}
+/**
+ * @description
+ * The Collapsible component provides an expandable/collapsible container that can show or hide content.
+ * It's typically used to organize information in a space-efficient way, allowing users to focus on relevant content.
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTitle>Section Title</CollapsibleTitle>
+ *   <CollapsibleContent>
+ *     Content that can be shown or hidden
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ * @component
+ * @see {@link CollapsibleTitle} - The clickable title component that toggles the expanded state
+ * @see {@link CollapsibleContent} - The content component that is shown/hidden based on the expanded state
+ */
+declare const Collapsible: import('react').ForwardRefExoticComponent<CollapsibleProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Collapsible };

package/dist/cjs/components/collapsible/parts/CollapsibleContent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),n=require("react-aria-components"),t=a.forwardRef(({children:o,...l},r)=>e.jsx(n.DisclosurePanel,{ref:r,"data-dd-privacy":"allow",...l,children:e.jsx("div",{className:"uy-ml-400 uy-typography-body",children:o})}));t.displayName="CollapsibleContent";exports.CollapsibleContent=t;

package/dist/cjs/components/collapsible/parts/CollapsibleContent.d.cts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/**
+ * @description
+ * The CollapsibleContent component renders the content that is shown or hidden
+ * when the parent Collapsible component is expanded or collapsed.
+ */
+export interface CollapsibleContentProps {
+    /**
+     * The content to be shown or hidden.
+     */
+    children: ReactNode;
+}
+/**
+ * The content component for a Collapsible.
+ *
+ * This component renders a DisclosurePanel that shows or hides its content
+ * based on the expanded state of the parent Collapsible component.
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTitle>Section Title</CollapsibleTitle>
+ *   <CollapsibleContent>
+ *     This content will be shown or hidden based on the expanded state.
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ * @component
+ * @see {@link Collapsible} - The parent component
+ * @see {@link CollapsibleTitle} - The title component that toggles the expanded state
+ * @param {CollapsibleContentProps} props - The component props
+ * @param {ReactNode} props.children - The content to be shown or hidden
+ * @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element
+ * @returns {JSX.Element} The rendered CollapsibleContent component
+ */
+declare const CollapsibleContent: import('react').ForwardRefExoticComponent<CollapsibleContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CollapsibleContent };

package/dist/cjs/components/collapsible/parts/CollapsibleTitle.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),n=require("react-aria-components"),p=require("tailwind-variants"),b=require("../../icon/Icon.cjs"),o=require("../../text/Text.cjs"),f=p.tv({slots:{base:"uy-w-full",button:"uy-flex uy-pb-100 uy-pt-100 uy-w-full hover:uy-text-content-neutral-hover focus-visible:uy-outline-none",title:"uy-flex uy-grow uy-text-left uy-items-center",icon:"uy-mr-100"},variants:{isExpanded:{true:{icon:"uy-rotate-180"},false:{icon:"uy-rotate-0"}}},defaultVariants:{isExpanded:!1}}),a=l.forwardRef(({children:i,suffix:s,...r},u)=>{const t=l.useContext(n.DisclosureStateContext),{base:c,button:d,title:y,icon:x}=f({isExpanded:t==null?void 0:t.isExpanded});return e.jsx(n.Heading,{"data-dd-privacy":"allow",...r,ref:u,className:c(),children:e.jsxs(n.Button,{className:d(),slot:"trigger",children:[e.jsxs(o.Text,{variant:"bodyStrong",className:y(),children:[e.jsx(b.Icon,{src:"CaretDownOutlined",className:x(),role:"presentation"}),i]}),s?e.jsx(o.Text,{variant:"body",children:s}):null]})})});a.displayName="CollapsibleTitle";exports.CollapsibleTitle=a;

package/dist/cjs/components/collapsible/parts/CollapsibleTitle.d.cts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+/**
+ * @description
+ * The CollapsibleTitle component renders the clickable header of a Collapsible component.
+ * It displays a title with an icon that rotates based on the expanded state.
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTitle>Section Title</CollapsibleTitle>
+ *   <CollapsibleContent>Content</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ * @component
+ * @see {@link Collapsible} - The parent component
+ * @see {@link CollapsibleContent} - The content component that is shown/hidden
+ */
+interface CollapsibleTitleProps {
+    /**
+     * The content of the collapsible title.
+     */
+    children: ReactNode;
+    /**
+     * Optional content to display after the title.
+     */
+    suffix?: ReactNode;
+}
+/**
+ * The title component for a Collapsible.
+ *
+ * This component renders a heading with a button that toggles the expanded state of the parent Collapsible.
+ * It displays an icon that rotates based on the expanded state to indicate the current state.
+ * @param {CollapsibleTitleProps} props - The component props
+ * @param {ReactNode} props.children - The content of the title
+ * @param {ReactNode} [props.suffix] - Optional content to display after the title
+ * @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element
+ * @returns {JSX.Element} The rendered CollapsibleTitle component
+ */
+declare const CollapsibleTitle: import('react').ForwardRefExoticComponent<CollapsibleTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CollapsibleTitle };

package/dist/cjs/components/data-table/DataTable.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),x=require("@tanstack/react-table"),R=require("../table/parts/TableBody.cjs"),h=require("../table/parts/TableColumnHeader.cjs"),s=require("../table/parts/TableEmptyState.cjs"),y=require("../table/parts/TableHeader.cjs"),w=require("../table/parts/TablePagination.cjs"),b=require("../table/Table.cjs"),D=require("./parts/ColumnSortHeader.cjs");function S({table:t,isLoading:a,error:l,emptyState:u,loadingState:f,errorState:j,pagination:o,minRows:C,maxRows:P,children:p}){var T;const c=m.useRef(null),{pageIndex:d,pageSize:i}=t.getState().pagination;m.useEffect(()=>{var r;(r=c.current)==null||r.scrollToTop()},[d,i]);const g=()=>{if(a)return f??e.jsx(s.TableEmptyStateLoading,{});if(l)return j??e.jsx(s.TableEmptyStateError,{})},q=()=>a||l?g():t.getRowModel().rows.length===0?u??e.jsx(s.TableEmptyStateNoData,{}):u;return e.jsxs(b.TableRoot,{minRows:C,maxRows:P,children:[e.jsxs(b.Table,{ref:c,children:[e.jsx(y.TableHeader,{children:t.getHeaderGroups().map(r=>r.headers.map(n=>e.jsx(h.TableColumnHeader,{children:n.column.getCanSort()?e.jsx(D.ColumnSortHeader,{header:n,children:e.jsx("span",{children:x.flexRender(n.column.columnDef.header,n.getContext())})}):e.jsx("span",{children:x.flexRender(n.column.columnDef.header,n.getContext())})},n.id)))}),e.jsx(R.TableBody,{renderEmptyState:q,renderDataState:g,children:!a&&!l&&t.getRowModel().rows.map(p)})]}),t.getPageCount()>1&&e.jsx(w.TablePagination,{pageCount:t.getPageCount(),rowCount:t.getPaginationRowModel().rows.length,currentPage:d+1,rowsPerPage:i,pageSizeOptions:o==null?void 0:o.pageSizeOptions,onPageChange:r=>{t.setPageIndex(r-1)},onPageSizeChange:r=>{t.setPageSize(r)},itemLabel:(T=o==null?void 0:o.labels)==null?void 0:T.itemLabel})]})}S.displayName="DataTable";exports.DataTable=S;