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

package/dist/cjs/components/multi-select-field/MultiSelectField.d.ts

@@ -0,0 +1,59 @@
+import { ForwardedRef, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.js';
+import { LabelProps } from '../label/Label.js';
+import { MultiSelectProps } from '../multi-select/Multiselect.types.js';
+type Key = string | number;
+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 multi-select field. */
+    label: string;
+    /** Helper text to display below the multi-select field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the multi-select field. */
+    feedbackText?: ReactNode;
+    /** A contextual link to display below the multi-select field. */
+    contextualLink?: ReactNode;
+}
+type BaseMultiSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> = Omit<MultiSelectProps<TItem, TItemKey, TKeyType>, 'value' | 'defaultValue' | 'onChange' | 'aria-labelledby' | 'aria-label'>;
+export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TItem = unknown, TItemKey extends keyof TItem = keyof TItem, TKeyType extends TItem[TItemKey] & Key = TItem[TItemKey] & Key> = FieldProps<TFieldValues, TName> & BaseMultiSelectProps<TItem, TItemKey, TKeyType>;
+/**
+ * The `MultiSelectField` component renders a full field that allows selecting multiple items from a dropdown list, and integrates with the `Form` component automatically.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   fruits: z.set(z.string()),
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <MultiSelectField<typeof schema>
+ *         name="fruits"
+ *         label="Select fruits"
+ *       >
+ *         <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ *         <MultiSelectOption value="banana">Banana</MultiSelectOption>
+ *         <MultiSelectOption value="orange">Orange</MultiSelectOption>
+ *       </MultiSelectField>
+ *     </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.
+ * @remarks
+ * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-multiselectfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
+ */
+export declare const MultiSelectField: {
+    <TSchema extends Schema, TItem = unknown>(props: MultiSelectFieldProps<ZodInfer<TSchema>, FieldPath<ZodInfer<TSchema>>, TItem, keyof TItem, TItem[keyof TItem] & Key> & {
+        ref?: ForwardedRef<HTMLButtonElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
+export {};

package/dist/cjs/components/multi-select-field/MultiSelectField.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),I=require("react"),T=require("react-hook-form"),g=require("tailwind-variants"),P=require("../form-field/FormField.js"),R=require("../form-field/parts/FormControl.js"),k=require("../form-field/parts/FormFeedbackText.js"),L=require("../form-field/parts/FormHelperText.js"),v=require("../form-field/parts/FormLabel.js"),m=require("../multi-select/MultiSelect.js"),w=g.tv({base:"uy-flex uy-flex-col uy-gap-100"});function C(e,l){const{control:i,setValue:x}=T.useFormContext(),{name:n,label:S,helperText:c,feedbackText:b,contextualLink:q,isRequired:h,isInvalid:j,isLoading:o,isDisabled:s,isReadOnly:u,requiredVariant:y,children:a,onClearButtonPress:r,...M}=e,f={isRequired:h,isInvalid:j,isLoading:o,isDisabled:s,isReadOnly:u},V="items"in e&&"getItemValue"in e,d={onClearButtonPress:()=>{x(n,new Set),r==null||r()},placeholder:e.placeholder,isSearchable:e.isSearchable,maxVisibleItems:e.maxVisibleItems,isDisabled:s,isReadOnly:u,isLoading:o,renderValue:e.renderValue};return t.jsxs(P.FormField,{control:i,name:n,className:w(),...f,children:[t.jsx(v.FormLabel,{requiredVariant:y,children:S}),c&&t.jsx(L.FormHelperText,{children:c}),t.jsx(R.FormControl,{children:V?t.jsx(m.MultiSelect,{...M,...d,ref:l,children:a}):t.jsx(m.MultiSelect,{...d,ref:l,children:a})}),t.jsx(k.FormFeedbackText,{children:b}),q]})}const F=I.forwardRef(function(l,i){return C(l,i)});F.displayName="MultiSelectField";exports.MultiSelectField=F;

package/dist/cjs/components/pill/Pill.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),o=require("react"),y=require("tailwind-variants"),d=y.tv({base:"uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small",variants:{variant:{critical:"uy-bg-surface-danger uy-text-content-inverted",info:"uy-bg-surface-primary uy-text-content-inverted",neutral:"uy-bg-surface-neutral-lowest uy-text-content-neutral"},shape:{circle:"uy-rounded-circle",pill:"uy-rounded-pill uy-px-50"},isVisible:{true:"uy-visible",false:"uy-invisible"}},defaultVariants:{variant:"critical",shape:"pill",isVisible:!0}}),p=(e,i)=>{const t=10**i-1;return e>t?`${t}+`:e.toString()},a=o.forwardRef(({variant:e="critical",isVisible:i=!0,maxDigits:t=2,value:l,...n},u)=>{const r=p(Math.abs(l),t),s=d({variant:e,isVisible:i,shape:r.length===1?"circle":"pill"});return c.jsx("span",{...n,ref:u,role:"status",className:s,"aria-atomic":"true",children:r})});a.displayName="Pill";exports.Pill=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),o=require("react"),y=require("tailwind-variants"),d=y.tv({base:"uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small",variants:{variant:{critical:"uy-bg-surface-danger uy-text-content-inverted",info:"uy-bg-surface-primary uy-text-content-inverted",neutral:"uy-bg-surface-neutral-lowest uy-text-content-neutral"},shape:{circle:"uy-rounded-circle",pill:"uy-rounded-pill uy-px-50"},isVisible:{true:"uy-visible",false:"uy-invisible"}},defaultVariants:{variant:"critical",shape:"pill",isVisible:!0}}),p=(e,i)=>{const t=10**i-1;return e>t?`${t}+`:e.toString()},r=o.forwardRef(({variant:e="critical",isVisible:i=!0,maxDigits:t=2,value:l,...n},u)=>{const a=p(Math.abs(l),t),s=d({variant:e,isVisible:i,shape:a.length===1?"circle":"pill"});return c.jsx("span",{"data-dd-privacy":"allow",...n,ref:u,role:"status",className:s,"aria-atomic":"true",children:a})});r.displayName="Pill";exports.Pill=r;

package/dist/cjs/components/progress-bar/ProgressBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),m=require("react-aria-components"),f=require("tailwind-variants"),b=f.tv({slots:{base:"uy-rounded-150 uy-bg-surface-neutral-disabled uy-h-150 uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-w-full",meter:"uy-rounded-l-150 uy-absolute uy-h-full uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-rounded-full uy-bg-surface-success"},variants:{isFull:{true:{meter:"uy-rounded-r-150"}}},defaultVariants:{isFull:!1}}),a=d.forwardRef(({value:r,range:t=[0,100],...u},l)=>{const[n,s]=t,o=r>=s,{base:i,meter:y}=b({isFull:o});return e.jsx(m.ProgressBar,{ref:l,value:r,minValue:n,maxValue:s,"aria-label":u["aria-label"],children:({percentage:c})=>e.jsx("div",{className:i(),children:e.jsx("div",{className:y(),style:{width:`${c}%`}})})})});a.displayName="ProgressBar";exports.ProgressBar=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),m=require("react-aria-components"),f=require("tailwind-variants"),b=f.tv({slots:{base:"uy-rounded-150 uy-bg-surface-neutral-disabled uy-h-150 uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-w-full",meter:"uy-rounded-l-150 uy-absolute uy-h-full uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-rounded-full uy-bg-surface-success"},variants:{isFull:{true:{meter:"uy-rounded-r-150"}}},defaultVariants:{isFull:!1}}),a=c.forwardRef(({value:e,range:t=[0,100],...u},l)=>{const[n,s]=t,o=e>=s,{base:i,meter:d}=b({isFull:o});return r.jsx(m.ProgressBar,{ref:l,value:e,minValue:n,maxValue:s,"aria-label":u["aria-label"],"data-dd-privacy":"allow",children:({percentage:y})=>r.jsx("div",{className:i(),children:r.jsx("div",{className:d(),style:{width:`${y}%`}})})})});a.displayName="ProgressBar";exports.ProgressBar=a;

package/dist/cjs/components/segmented-button-group/SegmentedButtonGroup.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { RadioGroupProps } from 'react-aria-components';
+export interface BasedSegmentedButtonGroupProps extends Omit<RadioGroupProps, 'children' | 'style' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'validationBehavior' | 'isRequired' | 'validate' | 'defaultValue'> {
+    /**
+     * The content of the `SegmentedButtonGroup`. Should contain `ToggleButton` components as children.
+     */
+    children: ReactNode;
+}
+export interface UncontrolledSegmentedButtonGroupProps extends BasedSegmentedButtonGroupProps, Required<Pick<RadioGroupProps, 'defaultValue'>> {
+}
+/**
+ * The `SegmentedButtonGroup` component is an accessible control that allows users to select one option from a set of mutually exclusive options.
+ * It's similar to a radio group but styled as connected buttons, providing a more compact and visually distinct selection mechanism.
+ * Use this component when you need to:
+ * - Present a small set of related but mutually exclusive options
+ * - Create a toggle between different views or modes
+ * - Provide a compact alternative to radio buttons or tabs
+ * - Allow users to switch between different states of the same content*
+ * The component supports both controlled and uncontrolled usage patterns.
+ * @see {@link ToggleButton} - The child component used within SegmentedButtonGroup
+ * @see {@link https://react-spectrum.adobe.com/react-aria/useRadioGroup.html|React Aria useRadioGroup} - The underlying hook used for accessibility
+ * @see {@link https://www.payfit.design/24f360409/p/2745fe-segmented-control|Design System Documentation}
+ * @example
+ * Basic usage:
+ * ```tsx
+ * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
+ *
+ * function Example() {
+ *   return (
+ *     <SegmentedButtonGroup>
+ *       <ToggleButton value="option1">Option 1</ToggleButton>
+ *       <ToggleButton value="option2">Option 2</ToggleButton>
+ *       <ToggleButton value="option3">Option 3</ToggleButton>
+ *     </SegmentedButtonGroup>
+ *   )
+ * }
+ * ```
+ */
+declare const SegmentedButtonGroup: {
+    (props: UncontrolledSegmentedButtonGroupProps | BasedSegmentedButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SegmentedButtonGroup };

package/dist/cjs/components/segmented-button-group/SegmentedButtonGroups.context.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { RadioGroupState } from 'react-stately';
+interface SegmentedButtonGroupContextValue {
+    state: RadioGroupState;
+}
+export declare const SegmentedButtonGroupContext: import('react').Context<SegmentedButtonGroupContextValue>;
+export declare function SegmentedButtonGroupProvider({ children, state, }: PropsWithChildren<SegmentedButtonGroupContextValue>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/segmented-button-group/parts/ToggleButton.d.ts

@@ -0,0 +1,47 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { AriaRadioProps } from 'react-aria';
+import { IconName } from '../../../types/utils.js';
+export interface ToggleButtonProps extends AriaRadioProps {
+    /**
+     * The icon to display before the button text.
+     * The icon will automatically switch between outlined and filled variants based on the selection state:
+     * - When selected: Uses the filled variant (`${prefixIcon}Filled`)
+     * - When not selected: Uses the outlined variant (`${prefixIcon}Outlined`)
+     */
+    prefixIcon?: IconName<UnityIcon>;
+    /**
+     * Whether the button is in a loading state.
+     * When `true`, the button content is replaced with a spinner and the button becomes non-interactive.
+     * Use this prop to indicate that an action is being processed after the button is clicked.
+     * @default false
+     */
+    isLoading?: boolean;
+}
+/**
+ * The `ToggleButton` component is a specialized button used within a `SegmentedButtonGroup`.
+ * It functions like a radio button but is styled as a button, providing a more visual selection mechanism.
+ *
+ * `ToggleButton`s can display text, icons, or both, and support various states including selected, loading, and focused.
+ * They should always be used as children of a `SegmentedButtonGroup` component, which manages their selection state.
+ * @remarks
+ * This component must be used inside a SegmentedButtonGroup component
+ * @see {@link SegmentedButtonGroup} - The parent component required for ToggleButton
+ * @see {@link https://react-spectrum.adobe.com/react-aria/useRadio.html|React Aria useRadio} - The underlying hook used for accessibility
+ * @example
+ * Basic usage within a SegmentedButtonGroup:
+ * ```tsx
+ * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
+ *
+ * function Example() {
+ *   return (
+ *     <SegmentedButtonGroup defaultValue="option1">
+ *       <ToggleButton value="option1">Option 1</ToggleButton>
+ *       <ToggleButton value="option2">Option 2</ToggleButton>
+ *       <ToggleButton value="option3">Option 3</ToggleButton>
+ *     </SegmentedButtonGroup>
+ *   )
+ * }
+ * ```
+ */
+declare const ToggleButton: import('react').ForwardRefExoticComponent<ToggleButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { ToggleButton };

package/dist/cjs/components/select/Select.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("react-aria-components"),v=require("tailwind-variants"),q=require("./parts/SearchInput.js"),w=require("./parts/SelectButton.js"),N=v.tv({slots:{base:"uy-flex uy-flex-col uy-gap-100 uy-w-full",popover:"uy-rounded-75 uy-border uy-border-border-neutral uy-w-[var(--trigger-width)] uy-bg-surface-neutral",listbox:"uy-overflow-y-auto uy-max-h-[296px] uy-pt-100 uy-pb-100 uy-pl-100 uy-pr-100"}}),B=({children:s,items:o,placeholder:r,name:p,isDisabled:n,isInvalid:c,isReadOnly:u,value:y,onChange:d,isSearchable:x=!1,...f},S)=>{const[b,m]=a.useState(!1),{contains:g}=t.useFilter({sensitivity:"base"}),{base:h,popover:j,listbox:l}=N();return e.jsxs(t.Select,{onOpenChange:m,...f,ref:S,className:h(),placeholder:n?void 0:r,name:p,isDisabled:n||u,isInvalid:c,selectedKey:y,onSelectionChange:d,children:[e.jsx(w.SelectButton,{isDisabled:n,isInvalid:c,isReadOnly:u,isOpen:b}),e.jsx(t.Popover,{offset:1,containerPadding:8,className:j(),children:x?e.jsxs(t.Autocomplete,{filter:g,children:[e.jsx(q.SearchInput,{}),e.jsx(t.ListBox,{items:o,className:l(),children:s})]}):e.jsx(t.ListBox,{items:o,className:l(),children:s})})]})},i=a.forwardRef(function(o,r){return B(o,r)});i.displayName="Select";exports.Select=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("react-aria-components"),v=require("tailwind-variants"),q=require("./parts/SearchInput.js"),w=require("./parts/SelectButton.js"),N=v.tv({slots:{base:"uy-flex uy-flex-col uy-gap-100 uy-w-full",popover:"uy-rounded-75 uy-border uy-border-solid uy-border-border-neutral uy-w-[var(--trigger-width)] uy-bg-surface-neutral",listbox:"uy-overflow-y-auto uy-max-h-[296px] uy-pt-100 uy-pb-100 uy-pl-100 uy-pr-100"}}),B=({children:r,items:o,placeholder:s,name:p,isDisabled:n,isInvalid:c,isReadOnly:u,value:y,onChange:d,isSearchable:x=!1,...f},S)=>{const[b,m]=a.useState(!1),{contains:g}=t.useFilter({sensitivity:"base"}),{base:h,popover:j,listbox:l}=N();return e.jsxs(t.Select,{onOpenChange:m,...f,ref:S,className:h(),placeholder:n?void 0:s,name:p,isDisabled:n||u,isInvalid:c,selectedKey:y,onSelectionChange:d,children:[e.jsx(w.SelectButton,{isDisabled:n,isInvalid:c,isReadOnly:u,isOpen:b}),e.jsx(t.Popover,{offset:1,containerPadding:8,className:j(),children:x?e.jsxs(t.Autocomplete,{filter:g,children:[e.jsx(q.SearchInput,{}),e.jsx(t.ListBox,{items:o,className:l(),children:r})]}):e.jsx(t.ListBox,{items:o,className:l(),children:r})})]})},i=a.forwardRef(function(o,s){return B(o,s)});i.displayName="Select";exports.Select=i;

package/dist/cjs/components/select/parts/SearchInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("react-aria-components"),l=require("react-intl"),y=require("tailwind-variants"),d=require("../../icon-button/CircularIconButton.js"),m=require("../../icon/Icon.js"),p=y.tv({slots:{base:"uy-flex uy-gap-100 uy-border uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-border-border-form-active uy-text-content-form-active uy-mt-100 uy-mb-100 uy-ml-100 uy-mr-100",input:"uy-flex-grow uy-outline-none [&::-webkit-search-cancel-button]:uy-hidden",button:"uy-text-content-neutral-enabled",separator:"uy-h-[1px] uy-bg-surface-neutral-lowest uy-w-full uy-mt-100"}}),r=i.forwardRef((b,n)=>{const u=l.useIntl(),{base:a,input:s,button:o,separator:c}=p();return e.jsxs(e.Fragment,{children:[e.jsxs(t.SearchField,{className:a(),ref:n,children:[e.jsx(m.Icon,{src:"MagnifyingGlassOutlined","aria-hidden":"true"}),e.jsx(t.Input,{className:s()}),e.jsx(d.CircularIconButton,{title:u.formatMessage({id:"unity:component:form-field:form-input:clear:title",defaultMessage:"Clear"}),className:o(),icon:"CloseOutlined"})]}),e.jsx("div",{"aria-hidden":"true",className:c()})]})});r.displayName="SearchInput";exports.SearchInput=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),t=require("react-aria-components"),l=require("react-intl"),y=require("tailwind-variants"),d=require("../../icon-button/CircularIconButton.js"),p=require("../../icon/Icon.js"),m=y.tv({slots:{base:"uy-flex uy-gap-100 uy-border uy-border-solid uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-border-border-form-active uy-text-content-form-active uy-mt-100 uy-mb-100 uy-ml-100 uy-mr-100 uy-typography-body",input:"uy-flex-grow uy-outline-none [&::-webkit-search-cancel-button]:uy-hidden",button:"uy-text-content-neutral-enabled",separator:"uy-h-[1px] uy-bg-surface-neutral-lowest uy-w-full uy-mt-100"}}),r=c.forwardRef((b,n)=>{const u=l.useIntl(),{base:a,input:s,button:o,separator:i}=m();return e.jsxs(e.Fragment,{children:[e.jsxs(t.SearchField,{className:a(),ref:n,"data-dd-privacy":"mask",children:[e.jsx(p.Icon,{src:"MagnifyingGlassOutlined","aria-hidden":"true"}),e.jsx(t.Input,{className:s()}),e.jsx(d.CircularIconButton,{title:u.formatMessage({id:"unity:component:form-field:form-input:clear:title",defaultMessage:"Clear"}),className:o(),icon:"CloseOutlined"})]}),e.jsx("div",{"aria-hidden":"true",className:i()})]})});r.displayName="SearchInput";exports.SearchInput=r;

package/dist/cjs/components/select/parts/SelectButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),o=require("react-aria-components"),m=require("react-intl"),p=require("tailwind-variants"),a=require("../../icon/Icon.js"),v=p.tv({slots:{base:"uy-flex uy-flex-row uy-gap-100 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100 focus-visible:uy-ring-2 focus-visible:uy-ring-utility-focus-ring focus-visible:uy-ring-offset-2 uy-outline-none uy-border",selectValue:"uy-whitespace-nowrap uy-text-ellipsis uy-typography-body uy-flex-grow uy-text-left data-[placeholder]:uy-text-content-neutral-lowest",iconWrapper:"uy-flex uy-gap-50",icon:""},variants:{isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",selectValue:"uy-text-content-form-disabled"}},isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled",selectValue:"uy-text-content-form-readonly",icon:"uy-text-content-primary-disabled"}}},compoundVariants:[{isDisabled:!1,isInvalid:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled hover:uy-border-border-form-hover uy-bg-surface-form-enabled hover:uy-bg-surface-form-hover active:uy-border-border-form-active",selectValue:"uy-text-content-neutral-enabled hover:uy-text-content-neutral-hover",icon:"uy-text-content-form-enabled hover:uy-text-content-form-hover"}}],defaultVariants:{isDisabled:!1,isInvalid:!1,isReadOnly:!1}}),n=b.forwardRef(({isDisabled:r,isInvalid:t,isReadOnly:s,isOpen:u},l)=>{const i=m.useIntl(),{base:c,selectValue:d,iconWrapper:y,icon:f}=v({isDisabled:r,isInvalid:t,isReadOnly:s});return e.jsxs(o.Button,{className:c(),ref:l,isDisabled:r,children:[e.jsx(o.SelectValue,{className:d()}),e.jsxs("div",{className:y(),children:[t&&e.jsx(a.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:i.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),e.jsx(a.Icon,{className:f(),"aria-hidden":"true",src:u?"CaretUpOutlined":"CaretDownOutlined"})]})]})});n.displayName="SelectButton";exports.SelectButton=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),o=require("react-aria-components"),m=require("react-intl"),p=require("tailwind-variants"),a=require("../../icon/Icon.js"),v=p.tv({slots:{base:"uy-flex uy-flex-row uy-gap-100 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100 uy-border-solid focus-visible:uy-ring-2 focus-visible:uy-ring-utility-focus-ring focus-visible:uy-ring-offset-2 uy-outline-none uy-border",selectValue:"uy-whitespace-nowrap uy-text-ellipsis uy-typography-body uy-flex-grow uy-text-left data-[placeholder]:uy-text-content-neutral-lowest",iconWrapper:"uy-flex uy-gap-50",icon:""},variants:{isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",selectValue:"uy-text-content-form-disabled"}},isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled",selectValue:"uy-text-content-form-readonly",icon:"uy-text-content-primary-disabled"}}},compoundVariants:[{isDisabled:!1,isInvalid:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled hover:uy-border-border-form-hover uy-bg-surface-form-enabled hover:uy-bg-surface-form-hover active:uy-border-border-form-active",selectValue:"uy-text-content-neutral-enabled hover:uy-text-content-neutral-hover",icon:"uy-text-content-form-enabled hover:uy-text-content-form-hover"}}],defaultVariants:{isDisabled:!1,isInvalid:!1,isReadOnly:!1}}),s=b.forwardRef(({isDisabled:r,isInvalid:t,isReadOnly:n,isOpen:u},l)=>{const i=m.useIntl(),{base:c,selectValue:d,iconWrapper:y,icon:f}=v({isDisabled:r,isInvalid:t,isReadOnly:n});return e.jsxs(o.Button,{"data-dd-privacy":"mask",className:c(),ref:l,isDisabled:r,children:[e.jsx(o.SelectValue,{className:d()}),e.jsxs("div",{className:y(),children:[t&&e.jsx(a.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:i.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),e.jsx(a.Icon,{className:f(),"aria-hidden":"true",src:u?"CaretUpOutlined":"CaretDownOutlined"})]})]})});s.displayName="SelectButton";exports.SelectButton=s;

package/dist/cjs/components/select/parts/SelectOption.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),f=require("react-aria-components"),x=require("tailwind-variants"),p=require("../../icon/Icon.js"),b=require("./SelectOption.context.js"),m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=m(i),v=x.tv({base:"uy-flex uy-flex-col uy-typography-body uy-rounded-50 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-outline-none",variants:{isFocusVisible:{true:"uy-outline-offset-2 uy-outline-2 uy-outline-utility-focus-ring"},isHovered:{true:"uy-bg-surface-neutral-hover uy-text-content-neutral"},isPressed:{true:"uy-bg-surface-neutral-pressed uy-text-content-neutral-pressed"},isSelected:{true:"uy-bg-surface-neutral-active uy-text-content-neutral-active"},isDisabled:{true:"uy-text-content-neutral-disabled"}},compoundVariants:[{isFocusVisible:!1,isHovered:!1,isPressed:!1,isSelected:!1,isDisabled:!1,class:"uy-bg-surface-neutral-enabled uy-text-content-neutral-enabled"}]}),l=i.forwardRef((t,a)=>{const{children:s,isDisabled:u}=t,o=typeof r.default.Children.toArray(s)[0]=="string"?r.default.Children.toArray(s)[0]:void 0;return e.jsx(f.ListBoxItem,{ref:a,...t,textValue:o,className:({isHovered:n,isPressed:c,isFocusVisible:d,isSelected:y})=>v({isHovered:n,isPressed:c,isFocusVisible:d,isSelected:y,isDisabled:u}),children:({isSelected:n})=>e.jsx(b.SelectOptionProvider,{isDisabled:u,children:n?e.jsxs("div",{className:"uy-flex uy-justify-between",children:[e.jsx("div",{className:"uy-flex uy-flex-col",children:e.jsx(e.Fragment,{children:s})}),e.jsx(p.Icon,{src:"CheckOutlined"})]}):e.jsx(e.Fragment,{children:s})})})});l.displayName="SelectOption";exports.SelectOption=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),f=require("react-aria-components"),p=require("tailwind-variants"),x=require("../../icon/Icon.js"),b=require("./SelectOption.context.js"),m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=m(i),v=p.tv({base:"uy-flex uy-flex-col uy-typography-body uy-rounded-50 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-outline-none",variants:{isFocusVisible:{true:"uy-outline-offset-2 uy-outline-2 uy-outline-utility-focus-ring"},isHovered:{true:"uy-bg-surface-neutral-hover uy-text-content-neutral"},isPressed:{true:"uy-bg-surface-neutral-pressed uy-text-content-neutral-pressed"},isSelected:{true:"uy-bg-surface-neutral-active uy-text-content-neutral-active"},isDisabled:{true:"uy-text-content-neutral-disabled"}},compoundVariants:[{isFocusVisible:!1,isHovered:!1,isPressed:!1,isSelected:!1,isDisabled:!1,class:"uy-bg-surface-neutral-enabled uy-text-content-neutral-enabled"}]}),a=i.forwardRef((t,l)=>{const{children:s,isDisabled:u}=t,o=typeof r.default.Children.toArray(s)[0]=="string"?r.default.Children.toArray(s)[0]:void 0;return e.jsx(f.ListBoxItem,{ref:l,"data-dd-privacy":"mask",...t,textValue:o,className:({isHovered:n,isPressed:c,isFocusVisible:d,isSelected:y})=>v({isHovered:n,isPressed:c,isFocusVisible:d,isSelected:y,isDisabled:u}),children:({isSelected:n})=>e.jsx(b.SelectOptionProvider,{isDisabled:u,children:n?e.jsxs("div",{className:"uy-flex uy-justify-between",children:[e.jsx("div",{className:"uy-flex uy-flex-col",children:e.jsx(e.Fragment,{children:s})}),e.jsx(x.Icon,{src:"CheckOutlined"})]}):e.jsx(e.Fragment,{children:s})})})});a.displayName="SelectOption";exports.SelectOption=a;

package/dist/cjs/components/select/parts/SelectOptionHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),l=require("tailwind-variants"),a=require("./SelectOption.context.js"),c=l.tv({base:"uy-typography-body",variants:{isDisabled:{true:"uy-text-content-neutral-disabled",false:"uy-text-content-neutral-low"}}}),e=i.forwardRef(({children:t},n)=>{const{isDisabled:s}=a.useSelectOptionContext(),o=c({isDisabled:s});return r.jsx("span",{className:o,ref:n,children:t})});e.displayName="SelectOptionHelper";exports.SelectOptionHelper=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),i=require("tailwind-variants"),l=require("./SelectOption.context.js"),c=i.tv({base:"uy-typography-body",variants:{isDisabled:{true:"uy-text-content-neutral-disabled",false:"uy-text-content-neutral-low"}}}),e=o.forwardRef(({children:t},n)=>{const{isDisabled:s}=l.useSelectOptionContext(),r=c({isDisabled:s});return a.jsx("span",{className:r,ref:n,"data-dd-privacy":"mask",children:t})});e.displayName="SelectOptionHelper";exports.SelectOptionHelper=e;

package/dist/cjs/components/selectable-button-group/SelectableButtonGroup.context.d.ts

@@ -0,0 +1,2 @@
+import { ToggleGroupState } from 'react-stately';
+export declare const SelectableButtonGroupContext: import('react').Context<ToggleGroupState | null>;

package/dist/cjs/components/selectable-button-group/SelectableButtonGroup.context.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null);exports.SelectableButtonGroupContext=e;

package/dist/cjs/components/selectable-button-group/SelectableButtonGroup.d.ts

@@ -0,0 +1,59 @@
+import { AriaToggleButtonGroupProps } from 'react-aria';
+import { Key } from 'react-stately';
+import { VariantProps } from 'tailwind-variants';
+export declare const selectableButtonGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'className' | 'style'> {
+    /**
+     * The SelectableButton components to render within the group.
+     * Each child must be a SelectableButton component with a unique value prop.
+     */
+    children: React.ReactNode;
+    /**
+     * The currently selected values in controlled mode.
+     * Use this prop along with onChange to control the selection state externally.
+     * The values should match the value props of the SelectableButton children.
+     */
+    value?: AriaToggleButtonGroupProps['selectedKeys'];
+    /**
+     * The initially selected values in uncontrolled mode.
+     * Use this prop to set default selections without controlling the state.
+     * The values should match the value props of the SelectableButton children.
+     */
+    defaultValue?: AriaToggleButtonGroupProps['defaultSelectedKeys'];
+    /**
+     * Callback fired when the selection changes.
+     * Receives an array of the currently selected values.
+     * Required when using the component in controlled mode.
+     */
+    onChange?: (keys: Key[]) => void;
+}
+/**
+ * A group component that manages the selection state of multiple SelectableButton components.
+ * Supports both single and multiple selection modes with controlled and uncontrolled usage patterns.
+ * @component
+ * @param {SelectableButtonGroupProps} props - Props for configuring the group's behavior and selection mode
+ * @see {@link SelectableButtonGroupProps} for all available props
+ * @example
+ * ```tsx
+ * import { SelectableButtonGroup, SelectableButton } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const [selected, setSelected] = useState(['option1'])
+ *
+ *   return (
+ *     <SelectableButtonGroup
+ *       selectionMode="multiple"
+ *       value={selected}
+ *       onChange={keys => setSelected(keys)}
+ *     >
+ *       <SelectableButton value="option1">First Option</SelectableButton>
+ *       <SelectableButton value="option2">Second Option</SelectableButton>
+ *     </SelectableButtonGroup>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/inputs-selectablebuttongroup--docs) • [Design docs](https://www.payfit.design/24f360409/p/944b5d-selectable-button)
+ */
+declare const SelectableButtonGroup: import('react').ForwardRefExoticComponent<SelectableButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SelectableButtonGroup };

package/dist/cjs/components/selectable-button-group/SelectableButtonGroup.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),o=require("react-aria"),S=require("react-stately"),b=require("tailwind-variants"),y=require("./SelectableButtonGroup.context.js"),a=b.tv({base:"uy-flex uy-gap-100"}),c=l.forwardRef((e,s)=>{const t=l.useRef(null),r=S.useToggleGroupState({...e,selectedKeys:e.value,defaultSelectedKeys:e.defaultValue,onSelectionChange:g=>{var n;(n=e.onChange)==null||n.call(e,Array.from(g))}}),{groupProps:i}=o.useToggleButtonGroup(e,r,t),d=a(),{ref:f}=o.mergeProps({ref:t},{ref:s});return u.jsx("div",{...i,className:d,ref:f,"data-dd-privacy":"allow",children:u.jsx(y.SelectableButtonGroupContext.Provider,{value:r,children:e.children})})});c.displayName="SelectableButtonGroup";exports.SelectableButtonGroup=c;exports.selectableButtonGroup=a;

package/dist/cjs/components/selectable-button-group/parts/SelectableButton.d.ts

@@ -0,0 +1,127 @@
+import { AriaToggleButtonProps } from 'react-aria';
+import { UnityIcon } from '@payfit/unity-icons/dist/cjs/generated';
+import { ToggleButtonProps } from 'react-aria-components';
+export declare const selectableButton: import('tailwind-variants').TVReturnType<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}>, {
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    hasIcon: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type IconName<T extends string> = T extends `${infer Base}${'Filled' | 'Outlined'}` ? Base : T;
+export interface SelectableButtonProps extends Omit<AriaToggleButtonProps, 'id' | 'className' | 'style'> {
+    /**
+     * A unique identifier for the button that will be used as its selection value.
+     * This value must be unique within the SelectableButtonGroup.
+     */
+    value: NonNullable<ToggleButtonProps['id']>;
+    /**
+     * Optional icon to display before the button's text content.
+     * The icon will automatically switch between outlined and filled variants based on selection state.
+     * Specify the base name of the icon without the 'Filled' or 'Outlined' suffix.
+     */
+    prefixIcon?: IconName<UnityIcon>;
+    /**
+     * Set to true to show a loading spinner and disable interaction.
+     * Use this when the button's action requires asynchronous processing.
+     * @default false
+     */
+    isLoading?: boolean;
+}
+/**
+ * A toggleable button that works as part of a SelectableButtonGroup to create single or multiple choice selections.
+ * Provides visual feedback for selection state and supports icons for enhanced visual hierarchy.
+ * @component
+ * @param {SelectableButtonProps} props - Props for configuring the button's behavior and appearance
+ * @see {@link SelectableButtonProps} for all available props
+ * @example
+ * ```tsx
+ * import { SelectableButtonGroup, SelectableButton } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <SelectableButtonGroup selectionMode="single" defaultValue={['morning']}>
+ *       <SelectableButton value="morning">
+ *         Morning
+ *       </SelectableButton>
+ *       <SelectableButton value="afternoon" prefixIcon="Sun">
+ *         Afternoon
+ *       </SelectableButton>
+ *     </SelectableButtonGroup>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](mdc:components/selectable-button-group/parts/SelectableButton) • [Design docs](mdc:design/components/selectable-button-group)
+ */
+declare const SelectableButton: import('react').ForwardRefExoticComponent<SelectableButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { SelectableButton };

package/dist/cjs/components/selectable-button-group/parts/SelectableButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),i=require("react-aria"),h=require("tailwind-variants"),S=require("../../icon/Icon.js"),B=require("../../spinner/Spinner.js"),j=require("../SelectableButtonGroup.context.js"),c=h.tv({slots:{base:["uy-group uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-flex uy-gap-50 uy-items-center","uy-border-border-form-enabled uy-bg-surface-form-enabled","hover:uy-bg-surface-form-hover hover:uy-border-border-form-hover","active:uy-bg-surface-form-pressed active:uy-border-border-form-pressed","focus-visible:uy-bg-surface-form-focus focus-visible:uy-border-border-form-focus","focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring","data-[pressed=true]:uy-bg-surface-form-pressed data-[pressed=true]:uy-border-border-form-pressed data-[pressed=true]:uy-text-content-form-pressed","data-[selected=true]:uy-bg-surface-form-selected data-[selected=true]:uy-border-border-form-selected data-[selected=true]:uy-text-content-form-selected","disabled:uy-bg-surface-form-disabled disabled:uy-border-border-form-disabled disabled:uy-text-content-form-disabled disabled:uy-cursor-not-allowed","data-[loading=true]:uy-bg-surface-form-disabled data-[loading=true]:uy-border-border-form-disabled data-[loading=true]:uy-text-content-form-disabled data-[loading=true]:uy-cursor-wait"],icon:["uy-p-25","data-[loading=true]:uy-hidden"],label:["uy-typography-action"]},variants:{hasIcon:{true:{base:"uy-pl-100 uy-pr-200"},false:{base:"uy-px-200"}}},defaultVariants:{hasIcon:!1}}),b=o.forwardRef((s,f)=>{const a=o.useRef(null),u=o.useContext(j.SelectableButtonGroupContext);if(!u)throw new Error("SelectableButton must be used within a ToggleButtonGroup component");const{buttonProps:d,isPressed:y,isSelected:l}=i.useToggleButtonGroupItem({id:s.value,...s},u,a),{ref:m}=i.mergeProps({ref:a},{ref:f}),{isDisabled:p=!1,isLoading:r=!1,prefixIcon:t,children:n}=s,{base:g,icon:v,label:x}=c({hasIcon:!!t&&!r});return e.jsxs("button",{"data-dd-privacy":"allow",...d,ref:m,className:g(),disabled:d.disabled||p||r,"data-loading":r?!0:void 0,"data-pressed":y,"data-selected":l,"aria-busy":r,children:[t&&!r&&e.jsx(S.Icon,{src:l?`${t}Filled`:`${t}Outlined`,role:"presentation",className:v(),size:20}),r?e.jsxs(e.Fragment,{children:[e.jsx(B.Spinner,{label:"Loading",size:"small",color:"inherit"}),e.jsx("span",{className:"uy-sr-only",children:n})]}):e.jsx("span",{className:x(),children:n})]})});b.displayName="SelectableButton";exports.SelectableButton=b;exports.selectableButton=c;

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

@@ -0,0 +1,152 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanel: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, import('tailwind-variants/dist/config').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

@@ -0,0 +1 @@
+"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;