@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.13

package/dist/cjs/components/number-input/NumberInput.d.cts

@@ -0,0 +1,216 @@
+import { ReactElement } from 'react';
+import { NumberFieldProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const numberInput: import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    input: string[];
+    prefix: string[];
+    suffix: string[];
+    state: string[];
+    controls: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}>, {
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    input: string[];
+    prefix: string[];
+    suffix: string[];
+    state: string[];
+    controls: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    input: string[];
+    prefix: string[];
+    suffix: string[];
+    state: string[];
+    controls: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type StyleWithoutCurrency = Exclude<Intl.NumberFormatOptions['style'], 'currency'>;
+interface FormatOptions extends Omit<Intl.NumberFormatOptions, 'currency' | 'style'> {
+    style?: StyleWithoutCurrency;
+}
+export interface NumberProps extends VariantProps<typeof numberInput>, Omit<NumberFieldProps, 'className' | 'style' | 'formatOptions' | 'children'> {
+    withControls?: boolean;
+    /** Element to display before the input field */
+    prefix?: ReactElement;
+    /** Element to display after the input field */
+    suffix?: ReactElement;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /**
+     * Clear button click handler
+     */
+    onClearButtonPress?: () => void;
+    /** Format options for the number input */
+    formatOptions?: FormatOptions;
+}
+/**
+ * The `NumberInput` component renders an input field specifically designed for numeric values. It provides features like
+ * increment/decrement controls, formatting options, and various states including loading, invalid, disabled, and read-only.
+ * The component supports prefix and suffix elements, clear button functionality, and can be integrated with form validation.
+ * @param {NumberProps} props - The props for the `NumberInput` component
+ * @example
+ * ```tsx
+ * import { NumberInput } from '@payfit/unity-components'
+ *
+ * // Basic usage
+ * <NumberInput aria-label="Amount" />
+ *
+ * // With controls and formatting
+ * <NumberInput
+ *   withControls
+ *   minValue={0}
+ *   maxValue={1000}
+ *   step={10}
+ *   formatOptions={{
+ *     minimumFractionDigits: 2,
+ *     maximumFractionDigits: 2
+ *   }}
+ *   aria-label="Amount"
+ * />
+ *
+ * // With prefix
+ * <NumberInput
+ *   prefix={<Icon src="CurrencyEuroOutlined" size={20} />}
+ *   aria-label="Amount"
+ * />
+ * ```
+ * @see {@link NumberProps} for all available props
+ * @remarks {@link https://www.payfit.design/24f360409/p/545bd2-number-field|Design docs}
+ */
+declare const NumberInput: import('react').ForwardRefExoticComponent<NumberProps & import('react').RefAttributes<HTMLDivElement>>;
+export { NumberInput };

package/dist/cjs/components/pagination/Pagination.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),P=require("react-aria"),N=require("react-intl"),R=require("react-stately"),S=require("tailwind-variants"),T=require("./hooks/use-pagination.cjs"),E=require("./parts/PaginationEllipsis.cjs"),W=require("./parts/PaginationJumpDialog.cjs"),J=require("./parts/PaginationLink.cjs"),w=require("./parts/PaginationNavButton.cjs"),O=require("./utils/pagination-window.cjs"),D=S.tv({slots:{base:"uy-flex uy-gap-100 uy-relative",pagesList:"uy-flex uy-gap-100 uy-list-none uy-m-0 uy-p-0"}}),$=7,A=d.forwardRef(({pageCount:i,defaultPage:f,currentPage:v,onPageHover:l,onPageChange:y,onNextPress:c,onPreviousPress:u,...L},j)=>{const p=P.useId(),m=N.useIntl(),h=v!==void 0&&y!==void 0&&f===void 0,{currentPage:r,goToPage:s}=T.usePagination({pageCount:i,initialPage:h?v:f,onPageChange:y}),g=R.useOverlayTriggerState({}),o=d.useRef(new Map),k=d.useMemo(()=>O.generatePaginationWithWindow(i,r,$),[i,r]),x=new Intl.NumberFormat(m.locale,{notation:"standard"}),I=a=>{s(a),g.close(),requestAnimationFrame(()=>{const t=o.current.get(a);t&&t.focus()})},b=(a,t)=>{switch(a.key){case"ArrowLeft":case"ArrowUp":a.preventDefault(),t>1&&(s(t-1),requestAnimationFrame(()=>{var e;(e=o.current.get(t-1))==null||e.focus()}));break;case"ArrowRight":case"ArrowDown":a.preventDefault(),t<i&&(s(t+1),requestAnimationFrame(()=>{var e;(e=o.current.get(t+1))==null||e.focus()}));break;case"Home":a.preventDefault(),s(1),requestAnimationFrame(()=>{var e;(e=o.current.get(1))==null||e.focus()});break;case"End":a.preventDefault(),s(i),requestAnimationFrame(()=>{var e;(e=o.current.get(i))==null||e.focus()});break}},q={paginationLabel:m.formatMessage({id:"unity:component:pagination:label",defaultMessage:"Pagination"}),pageListLabel:m.formatMessage({id:"unity:component:pagination:page-list:label",defaultMessage:"Page {current} of {total}"},{current:r,total:i})},{base:F,pagesList:M}=D();return n.jsxs("nav",{"data-dd-privacy":"allow",...L,ref:j,className:F(),"aria-labelledby":q.paginationLabel,children:[n.jsx(W.PaginationJumpDialog,{pageCount:i,onJumpToPage:I,state:g}),n.jsx(w.PaginationNavButton,{variant:"previous",isDisabled:r===1,onClick:()=>{s("previous"),u==null||u()}}),n.jsx("ul",{className:M(),"aria-label":q.pageListLabel,children:k.map((a,t)=>a.type==="page"?n.jsx("li",{"aria-setsize":i,"aria-posinset":a.value,children:n.jsx(J.PaginationLink,{ref:e=>{e?o.current.set(a.value,e):o.current.delete(a.value)},onPress:()=>{s(a.value)},onHoverChange:e=>{e&&(l==null||l(a.value))},onKeyDown:e=>{b(e,a.value)},isActive:a.value===r,value:a.value,children:x.format(a.value)})},`uy-pagination-${p}-item-${t}`):n.jsx("li",{children:n.jsx(E.PaginationEllipsis,{value:a.value,onKeyDown:e=>{b(e,-1)},onPress:()=>{g.open()}})},`uy-pagination-${p}-item-${t}`))}),n.jsx(w.PaginationNavButton,{variant:"next",isDisabled:r===i,onClick:()=>{s("next"),c==null||c()}})]})});A.displayName="Pagination";exports.Pagination=A;exports.pagination=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),P=require("react-aria"),N=require("react-intl"),R=require("react-stately"),S=require("tailwind-variants"),T=require("./hooks/use-pagination.cjs"),E=require("./parts/PaginationEllipsis.cjs"),W=require("./parts/PaginationJumpDialog.cjs"),J=require("./parts/PaginationLink.cjs"),D=require("./parts/PaginationNavButton.cjs"),O=require("./utils/pagination-window.cjs"),A=S.tv({slots:{base:"uy-flex uy-gap-100 uy-relative",pagesList:"uy-flex uy-gap-100 uy-list-none uy-m-0 uy-p-0"}}),$=7,L=d.forwardRef(({pageCount:i,defaultPage:f,currentPage:v,onPageHover:l,onPageChange:y,onNextPress:c,onPreviousPress:u,...j},h)=>{const p=P.useId(),m=N.useIntl(),b=v!==void 0&&y!==void 0&&f===void 0,{currentPage:r,goToPage:s}=T.usePagination({pageCount:i,initialPage:b?v:f,onPageChange:y,isControlled:b}),g=R.useOverlayTriggerState({}),o=d.useRef(new Map),k=d.useMemo(()=>O.generatePaginationWithWindow(i,r,$),[i,r]),x=new Intl.NumberFormat(m.locale,{notation:"standard"}),I=a=>{s(a),g.close(),requestAnimationFrame(()=>{const t=o.current.get(a);t&&t.focus()})},q=(a,t)=>{switch(a.key){case"ArrowLeft":case"ArrowUp":a.preventDefault(),t>1&&(s(t-1),requestAnimationFrame(()=>{var e;(e=o.current.get(t-1))==null||e.focus()}));break;case"ArrowRight":case"ArrowDown":a.preventDefault(),t<i&&(s(t+1),requestAnimationFrame(()=>{var e;(e=o.current.get(t+1))==null||e.focus()}));break;case"Home":a.preventDefault(),s(1),requestAnimationFrame(()=>{var e;(e=o.current.get(1))==null||e.focus()});break;case"End":a.preventDefault(),s(i),requestAnimationFrame(()=>{var e;(e=o.current.get(i))==null||e.focus()});break}},w={paginationLabel:m.formatMessage({id:"unity:component:pagination:label",defaultMessage:"Pagination"}),pageListLabel:m.formatMessage({id:"unity:component:pagination:page-list:label",defaultMessage:"Page {current} of {total}"},{current:r,total:i})},{base:F,pagesList:M}=A();return n.jsxs("nav",{"data-dd-privacy":"allow",...j,ref:h,className:F(),"aria-labelledby":w.paginationLabel,children:[n.jsx(W.PaginationJumpDialog,{pageCount:i,onJumpToPage:I,state:g}),n.jsx(D.PaginationNavButton,{variant:"previous",isDisabled:r===1,onClick:()=>{s("previous"),u==null||u()}}),n.jsx("ul",{className:M(),"aria-label":w.pageListLabel,children:k.map((a,t)=>a.type==="page"?n.jsx("li",{"aria-setsize":i,"aria-posinset":a.value,children:n.jsx(J.PaginationLink,{ref:e=>{e?o.current.set(a.value,e):o.current.delete(a.value)},onPress:()=>{s(a.value)},onHoverChange:e=>{e&&(l==null||l(a.value))},onKeyDown:e=>{q(e,a.value)},isActive:a.value===r,value:a.value,children:x.format(a.value)})},`uy-pagination-${p}-item-${t}`):n.jsx("li",{children:n.jsx(E.PaginationEllipsis,{value:a.value,onKeyDown:e=>{q(e,-1)},onPress:()=>{g.open()}})},`uy-pagination-${p}-item-${t}`))}),n.jsx(D.PaginationNavButton,{variant:"next",isDisabled:r===i,onClick:()=>{s("next"),c==null||c()}})]})});L.displayName="Pagination";exports.Pagination=L;exports.pagination=A;

package/dist/cjs/components/pagination/hooks/use-pagination.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react");function P({pageCount:a,initialPage:o=1,onPageChange:n}){const[e,r]=i.useState(o),u=e-1,c=e+1,s=i.useCallback(t=>{n&&n(t,e,Math.sign(t-e)),r(Math.max(1,Math.min(a,t)))},[e,a,n]),l=i.useCallback(t=>{s(t==="previous"?e-1:t==="next"?e+1:t)},[e,s]);return{currentPage:e,previousPage:u,nextPage:c,goToPage:l}}exports.usePagination=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");function b({isControlled:c=!1,pageCount:o,initialPage:r=1,onPageChange:n}){const[i,u]=a.useState(r),e=c?r:i,l=e-1,P=e+1,s=a.useCallback(t=>{n&&n(t,e,Math.sign(t-e)),u(Math.max(1,Math.min(o,t)))},[e,o,n]),f=a.useCallback(t=>{s(t==="previous"?e-1:t==="next"?e+1:t)},[e,s]);return{currentPage:e,previousPage:l,nextPage:P,goToPage:f}}exports.usePagination=b;

package/dist/cjs/components/pagination/hooks/use-pagination.d.cts

@@ -1,9 +1,10 @@
 export interface PaginationOptions {
     pageCount: number;
     initialPage?: number;
+    isControlled?: boolean;
     onPageChange?: (page: number, previous: number, direction: -1 | 1) => void;
 }
-export declare function usePagination({ pageCount, initialPage, onPageChange, }: PaginationOptions): {
+export declare function usePagination({ isControlled, pageCount, initialPage, onPageChange, }: PaginationOptions): {
     currentPage: number;
     previousPage: number;
     nextPage: number;

package/dist/cjs/components/popover/Popover.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),o=require("react-aria-components"),y=require("tailwind-variants"),g=require("./parts/PopoverContent.cjs"),f=require("./parts/PopoverHeader.cjs"),v=y.tv({slots:{base:["uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-200 uy-p-200 uy-shadow-floating uy-min-w-[320px] uy-max-w-[800px]"],dialog:["uy-flex uy-flex-col","focus:uy-outline-2 focus:uy-outline-offset-2"]}}),r=p.forwardRef((t,s)=>{const{children:i,title:n,isTitleSrOnly:a,displayCloseButton:u,...l}=t,{base:c,dialog:d}=v();return e.jsx(o.Popover,{ref:s,className:c(),offset:8,...l,children:e.jsxs(o.Dialog,{className:d(),role:"dialog",children:[e.jsx(f.PopoverHeader,{title:n,isTitleSrOnly:a,displayCloseButton:u}),e.jsx(g.PopoverContent,{children:i})]})})});r.displayName="Popover";o.DialogTrigger.displayName="PopoverTrigger";Object.defineProperty(exports,"PopoverTrigger",{enumerable:!0,get:()=>o.DialogTrigger});exports.Popover=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),e=require("react-aria-components"),g=require("tailwind-variants"),p=require("./parts/PopoverHeader.cjs"),m=g.tv({slots:{base:["uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-200 uy-p-200 uy-shadow-floating uy-min-w-[320px] uy-max-w-[800px] uy-overflow-auto","uy-transition-all uy-duration-200 uy-linear data-[entering]:uy-opacity-100 data-[exiting]:uy-opacity-0",'data-[entering]:data-[placement="bottom"]:-uy-translate-y-100 data-[entering]:data-[placement="bottom"]:uy-translate-x-0 data-[exiting]:data-[placement="bottom"]:uy-translate-y-0','data-[entering]:data-[placement="top"]:uy-translate-y-100 data-[entering]:data-[placement="top"]:uy-translate-x-0 data-[exiting]:data-[placement="top"]:uy-translate-y-0','data-[entering]:data-[placement="left"]:uy-translate-x-100 data-[entering]:data-[placement="left"]:uy-translate-y-0 data-[exiting]:data-[placement="bottom"]:uy-translate-x-0','data-[entering]:data-[placement="right"]:-uy-translate-x-100 data-[entering]:data-[placement="right"]:uy-translate-y-0 data-[exiting]:data-[placement="right"]:uy-translate-y-0'],dialog:["uy-flex uy-flex-col","focus:uy-outline-2 focus:uy-outline-offset-2"]}}),a=c.forwardRef((r,n)=>{const{children:o,title:i,isTitleSrOnly:l,displayCloseButton:u,...s}=r,{base:d,dialog:y}=m();return t.jsx(e.Popover,{ref:n,className:d(),offset:8,...s,children:t.jsxs(e.Dialog,{className:y(),role:"dialog",children:[t.jsx(p.PopoverHeader,{title:i,isTitleSrOnly:l,displayCloseButton:u}),o]})})});a.displayName="Popover";e.DialogTrigger.displayName="PopoverTrigger";Object.defineProperty(exports,"PopoverTrigger",{enumerable:!0,get:()=>e.DialogTrigger});exports.Popover=a;

package/dist/cjs/components/popover/parts/PopoverHeader.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),o=require("react-aria-components"),y=require("react-intl"),g=require("tailwind-variants"),m=require("../../icon-button/IconButton.cjs"),p=g.tv({slots:{base:"uy-flex uy-justify-between",heading:"uy-content-center"},variants:{isTitleSrOnly:{true:{heading:"uy-sr-only"},false:{base:"uy-mb-150",heading:"uy-typography-h2 uy-min-h-500 uy-align-center"}}}}),r=n.forwardRef(({title:a,isTitleSrOnly:s,displayCloseButton:i},l)=>{const e=n.useContext(o.OverlayTriggerStateContext),c=y.useIntl(),{base:u,heading:d}=p({isTitleSrOnly:s});return t.jsxs("div",{className:u(),children:[t.jsx(o.Heading,{ref:l,slot:"title",className:d(),"data-dd-privacy":"allow",children:a}),i&&t.jsx(m.IconButton,{variant:"ghost",color:"neutral",label:c.formatMessage({id:"unity:component:common:close:label",defaultMessage:"Close"}),icon:"CloseOutlined",onClick:()=>e==null?void 0:e.close()})]})});r.displayName="PopoverTitle";exports.PopoverHeader=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),o=require("react-aria-components"),g=require("react-intl"),m=require("tailwind-variants"),p=require("../../icon-button/IconButton.cjs"),v=m.tv({slots:{base:"uy-flex uy-justify-between",heading:"uy-content-center",iconButton:"uy-ml-200"},variants:{isTitleSrOnly:{true:{heading:"uy-sr-only"},false:{base:"uy-mb-150",heading:"uy-typography-h2 uy-min-h-500 uy-align-center"}}}}),a=n.forwardRef(({title:s,isTitleSrOnly:r,displayCloseButton:i},l)=>{const e=n.useContext(o.OverlayTriggerStateContext),c=g.useIntl(),{base:u,heading:d,iconButton:y}=v({isTitleSrOnly:r});return t.jsxs("div",{className:u(),children:[t.jsx(o.Heading,{ref:l,slot:"title",className:d(),"data-dd-privacy":"allow",children:s}),i&&t.jsx(p.IconButton,{variant:"ghost",color:"neutral",className:y(),label:c.formatMessage({id:"unity:component:common:close:label",defaultMessage:"Close"}),icon:"CloseOutlined",onClick:()=>e==null?void 0:e.close()})]})});a.displayName="PopoverTitle";exports.PopoverHeader=a;

package/dist/cjs/components/radio-button-group/parts/RadioButton.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),d=require("react-aria-components"),m=require("tailwind-variants"),x=require("../../flex/Flex.cjs"),p=require("../../text/Text.cjs"),v=require("./radio-input-selected.svg.cjs"),R=require("./radio-input-unselected.svg.cjs"),j=require("./RadioButtonHelper.cjs"),n=m.tv({slots:{base:["uy-group uy-flex uy-gap-100 uy-rounded-50 uy-items-center","data-[disabled]:uy-cursor-not-allowed","data-[readonly]:uy-cursor-not-allowed"],radio:["uy-border-border-form-enabled uy-border-solid uy-bg-surface-form-enabled","group-data-[disabled]:uy-border-border-form-disabled"],label:["uy-text-content-neutral","group-data-[disabled]:uy-text-content-neutral-disabled","group-data-[readonly]:uy-text-content-neutral group-data-[readonly]:uy-cursor-text"]},variants:{isFocusVisible:{true:"uy-outline-none uy-ring-2 uy-ring-offset-2 uy-ring-utility-focus-ring"}}}),u=t.forwardRef(({children:l,value:i,isDisabled:s,helperText:a,...c},y)=>{const{base:b,label:g}=n(),r=t.useContext(d.RadioGroupStateContext),f=t.useMemo(()=>r!=null&&r.isReadOnly?{"--radio-fill-color":"rgb(var(--uy-colors-border-form-read-only))","--radio-border-color":"rgb(var(--uy-colors-border-form-disabled))"}:{"--radio-fill-color":"rgb(var(--uy-colors-surface-primary-active))","--radio-border-color":"rgb(var(--uy-colors-border-form-active))"},[r==null?void 0:r.isReadOnly]);return o.jsxs(x.Flex,{direction:"col",gap:"50",children:[o.jsx(d.Radio,{...c,value:i,isDisabled:s,className:({isFocusVisible:e})=>b({isFocusVisible:e}),ref:y,children:({isSelected:e})=>o.jsxs(o.Fragment,{children:[e?o.jsx(v,{style:f}):o.jsx(R,{style:r!=null&&r.isReadOnly?{"--radio-border-color":"rgb(var(--uy-colors-border-form-disabled))"}:{"--radio-border-color":"rgb(var(--uy-colors-border-form-enabled))"}}),o.jsx(p.Text,{variant:"body",className:g(),children:l})]})}),a?o.jsx(j.RadioButtonHelper,{children:a}):null]})});u.displayName="RadioButton";exports.RadioButton=u;exports.radioButton=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),d=require("react-aria-components"),m=require("tailwind-variants"),x=require("../../flex/Flex.cjs"),p=require("../../text/Text.cjs"),v=require("./radio-input-selected.svg.cjs"),R=require("./radio-input-unselected.svg.cjs"),j=require("./RadioButtonHelper.cjs"),n=m.tv({slots:{base:["uy-group uy-flex uy-gap-100 uy-rounded-50 uy-items-center uy-cursor-pointer","data-[disabled]:uy-cursor-not-allowed","data-[readonly]:uy-cursor-not-allowed"],radio:["uy-border-border-form-enabled uy-border-solid uy-bg-surface-form-enabled","group-data-[disabled]:uy-border-border-form-disabled"],label:["uy-text-content-neutral","group-data-[disabled]:uy-text-content-neutral-disabled","group-data-[readonly]:uy-text-content-neutral group-data-[readonly]:uy-cursor-text"]},variants:{isFocusVisible:{true:"uy-outline-none uy-ring-2 uy-ring-offset-2 uy-ring-utility-focus-ring"}}}),u=t.forwardRef(({children:i,value:l,isDisabled:s,helperText:a,...c},y)=>{const{base:b,label:g}=n(),r=t.useContext(d.RadioGroupStateContext),f=t.useMemo(()=>r!=null&&r.isReadOnly?{"--radio-fill-color":"rgb(var(--uy-colors-border-form-read-only))","--radio-border-color":"rgb(var(--uy-colors-border-form-disabled))"}:{"--radio-fill-color":"rgb(var(--uy-colors-surface-primary-active))","--radio-border-color":"rgb(var(--uy-colors-border-form-active))"},[r==null?void 0:r.isReadOnly]);return o.jsxs(x.Flex,{direction:"col",gap:"50",children:[o.jsx(d.Radio,{...c,value:l,isDisabled:s,className:({isFocusVisible:e})=>b({isFocusVisible:e}),ref:y,children:({isSelected:e})=>o.jsxs(o.Fragment,{children:[e?o.jsx(v,{style:f}):o.jsx(R,{style:r!=null&&r.isReadOnly?{"--radio-border-color":"rgb(var(--uy-colors-border-form-disabled))"}:{"--radio-border-color":"rgb(var(--uy-colors-border-form-enabled))"}}),o.jsx(p.Text,{variant:"body",className:g(),children:i})]})}),a?o.jsx(j.RadioButtonHelper,{children:a}):null]})});u.displayName="RadioButton";exports.RadioButton=u;exports.radioButton=n;

package/dist/cjs/components/select-field/test-utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("storybook/test"),i=n=>({selectOption:async({labelText:t,optionName:s})=>{await n.step(`Select option "${s}" in "${t}"`,async()=>{const c=e.within(n.canvasElement).getByLabelText(t,{exact:!1});if(!c)throw new Error(`Select not found for label ${t}`);await e.userEvent.click(c,{delay:100}),await e.userEvent.click(e.screen.getByRole("option",{name:s}),{delay:100}),await e.userEvent.tab({delay:100})})}});exports.getTestingUtilsSelect=i;

package/dist/cjs/components/select-field/test-utils.d.cts

@@ -0,0 +1,11 @@
+import { PlayCtx } from '../../types/testing.cjs';
+/**
+ * Factory to get select testing utils
+ * @param context the story context
+ */
+export declare const getTestingUtilsSelect: (context: PlayCtx) => {
+    selectOption: ({ labelText, optionName, }: {
+        labelText: string;
+        optionName: string;
+    }) => Promise<void>;
+};

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

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

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

@@ -1,2 +1,6 @@
 import { ToggleGroupState } from 'react-stately';
-export declare const SelectableButtonGroupContext: import('react').Context<ToggleGroupState | null>;
+export interface SelectableButtonGroupContextValue {
+    state: ToggleGroupState;
+    isInvalid?: boolean;
+}
+export declare const SelectableButtonGroupContext: import('react').Context<SelectableButtonGroupContextValue | null>;

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

@@ -2,7 +2,7 @@ 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.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'className' | 'style'> {
+export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'style'> {
     /**
      * The SelectableButton components to render within the group.
      * Each child must be a SelectableButton component with a unique value prop.
@@ -26,6 +26,12 @@ export interface SelectableButtonGroupProps extends VariantProps<typeof selectab
      * Required when using the component in controlled mode.
      */
     onChange?: (keys: Key[]) => void;
+    /**
+     * Marks the group and all contained buttons as invalid, applying error styles.
+     * Use this to indicate a validation error for the group.
+     */
+    isInvalid?: boolean;
+    className?: string;
 }
 /**
  * A group component that manages the selection state of multiple SelectableButton components.

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

@@ -1 +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.cjs"),B=require("../../spinner/Spinner.cjs"),j=require("../SelectableButtonGroup.context.cjs"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),c=require("react-aria"),S=require("tailwind-variants"),B=require("../../icon/Icon.cjs"),j=require("../../spinner/Spinner.cjs"),w=require("../SelectableButtonGroup.context.cjs"),b=S.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"}},isInvalid:{true:{base:"uy-bg-surface-form-error uy-border-border-form-error"}}},defaultVariants:{hasIcon:!1,isInvalid:!1}}),f=o.forwardRef((s,y)=>{const a=o.useRef(null),u=o.useContext(w.SelectableButtonGroupContext);if(!u)throw new Error("SelectableButton must be used within a ToggleButtonGroup component");const{state:m,isInvalid:d}=u,{buttonProps:l,isPressed:p,isSelected:n}=c.useToggleButtonGroupItem({id:s.value,...s},m,a),{ref:g}=c.mergeProps({ref:a},{ref:y}),{isDisabled:v=!1,isLoading:r=!1,prefixIcon:t,children:i}=s,{base:x,icon:h,label:I}=b({hasIcon:!!t&&!r,isInvalid:!!d});return e.jsxs("button",{"data-dd-privacy":"allow",...l,ref:g,className:x(),disabled:l.disabled||v||r,"data-loading":r?!0:void 0,"data-pressed":p,"data-selected":n,"data-invalid":d,"aria-busy":r,children:[t&&!r&&e.jsx(B.Icon,{src:n?`${t}Filled`:`${t}Outlined`,role:"presentation",className:h(),size:20}),r?e.jsxs(e.Fragment,{children:[e.jsx(j.Spinner,{label:"Loading",size:"small",color:"inherit"}),e.jsx("span",{className:"uy-sr-only",children:i})]}):e.jsx("span",{className:I(),children:i})]})});f.displayName="SelectableButton";exports.SelectableButton=f;exports.selectableButton=b;

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

@@ -10,6 +10,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     icon: string[];
@@ -23,6 +28,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     hasIcon: {
         true: {
@@ -32,6 +42,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }>, {
     hasIcon: {
         true: {
@@ -41,6 +56,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     icon: string[];
@@ -54,6 +74,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     icon: string[];
@@ -67,6 +92,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     hasIcon: {
         true: {
@@ -76,6 +106,11 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
+    isInvalid: {
+        true: {
+            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'> {

package/dist/cjs/components/selectable-button-group-field/SelectableButtonGroupField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),p=require("react-hook-form"),x=require("../form-field/FormField.cjs"),q=require("../form-field/parts/FormControl.cjs"),S=require("../form-field/parts/FormFeedbackText.cjs"),j=require("../form-field/parts/FormHelperText.cjs"),B=require("../form-field/parts/FormLabel.cjs"),G=require("../selectable-button-group/SelectableButtonGroup.cjs");function y({name:t,label:o,helperText:r,contextualLink:n,isDisabled:c,requiredVariant:u,children:i,...s},a){const{control:F,watch:d}=p.useFormContext(),m=d(t);return e.jsxs(x.FormField,{control:F,name:t,ref:a,children:[e.jsx(B.FormLabel,{requiredVariant:u,children:o}),r&&e.jsx(j.FormHelperText,{children:r}),e.jsx(q.FormControl,{className:"uy-my-50",children:e.jsx(G.SelectableButtonGroup,{value:m,isDisabled:c,...s,children:i})}),e.jsx(S.FormFeedbackText,{}),n]})}const l=b.forwardRef(function(o,r){return y(o,r)});l.displayName="SelectableButtonGroupField";exports.SelectableButtonGroupField=l;

package/dist/cjs/components/selectable-button-group-field/SelectableButtonGroupField.d.cts

@@ -0,0 +1,59 @@
+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 { SelectableButtonGroupProps } from '../selectable-button-group/SelectableButtonGroup.cjs';
+import { LabelProps } from '../label/Label.cjs';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the field. */
+    label: string;
+    /** The required variant for the label. */
+    requiredVariant?: LabelProps['requiredVariant'];
+    /** Helper text to display below the field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the field. */
+    contextualLink?: ReactNode;
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+}
+export type SelectableButtonGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName> & Omit<SelectableButtonGroupProps, 'isDisabled' | 'children'> & {
+    /** The options to render as SelectableButton children. */
+    children: ReactNode;
+};
+type SelectableButtonGroupFieldComponent = (<TSchema extends Schema>(props: SelectableButtonGroupFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `SelectableButtonGroupField` component integrates the SelectableButtonGroup with Unity's form system, providing validation, accessibility, and helper/feedback text.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   choice: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <SelectableButtonGroupField<typeof schema>
+ *         name="choice"
+ *         label="Choose an option"
+ *       >
+ *         <SelectableButton value="a">A</SelectableButton>
+ *         <SelectableButton value="b">B</SelectableButton>
+ *       </SelectableButtonGroupField>
+ *     </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 SelectableButtonGroupField: SelectableButtonGroupFieldComponent;
+export { SelectableButtonGroupField };

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

@@ -1 +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.cjs"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),d=require("react-aria-components"),h=require("tailwind-variants"),v=require("./parts/SidePanelDragIndicator.cjs"),u=h.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 uy-z-10","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-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"]}}),r=i.forwardRef(({children:o,isOpen:a,onOpenChange:l,defaultOpen:t,isDismissable:y=!0,isKeyboardDismissDisabled:s=!1,disableScrollLocking:n=!1,...m},c)=>{const{overlay:f,wrapper:g,content:x}=u();return i.useEffect(()=>{n&&(a??t)&&(document.documentElement.style.overflow="",document.body.style.overflow="")},[n,a,t]),e.jsx(d.ModalOverlay,{className:f(),isOpen:a,onOpenChange:l,defaultOpen:t,isDismissable:y,isKeyboardDismissDisabled:s,children:e.jsxs(d.Modal,{"data-dd-privacy":"allow",...m,ref:c,className:g(),"data-unity-side-panel":!0,children:[e.jsx(v.SidePanelDragIndicator,{}),e.jsx(d.Dialog,{className:x(),children:o})]})})});r.displayName="SidePanel";exports.SidePanel=r;exports.sidePanel=u;

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

@@ -80,6 +80,12 @@ export interface SidePanelProps extends PropsWithChildren<VariantProps<typeof si
      * Required when using controlled mode with `isOpen`.
      */
     onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * If true, scroll locking will be disabled, allowing background scrolling while the panel is open.
+     * **Requires** controlled mode with `isOpen`/`onOpenChange`.
+     * @default false
+     */
+    disableScrollLocking?: boolean;
 }
 /**
  * The SidePanel component provides contextual space for supplementary content without fully

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

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

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

@@ -44,6 +44,10 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
      * ```
      */
     description?: string;
+    /**
+     * Enables horizontal scrolling if the table overflows its container. Enabled by default.
+     */
+    isHorizontalScrollEnabled?: boolean;
 }
 export interface TableImperativeHandler {
     /**

package/dist/cjs/components/table/parts/TableCell.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),m=require("react"),p=require("tailwind-variants"),q=require("../Table.context.cjs"),r=p.tv({base:["uy-px-200 uy-py-150 uy-w-max uy-text-content-neutral uy-typography-body","focus-visible:uy-outline-2 focus-visible:-uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"],variants:{align:{left:"uy-text-left",center:"uy-text-center",right:"uy-text-right"}}}),s=m.forwardRef(({children:u,colIndex:a=0,rowIndex:n=0,align:o,onKeyDown:t,onFocus:l,className:c,isRowHeader:i=!1,...y},b)=>{const{keyboardNavigation:d}=q.useTableContext(),{isCellFocused:f,handleCellKeyDown:x,handleCellFocus:g}=d,h=f(n,a),C=e=>{e.key!=="Tab"&&(x(e),t==null||t(e))},v=i?"th":"td";return T.jsx(v,{ref:b,role:i?"rowheader":"gridcell","aria-colindex":a+1,tabIndex:h?0:-1,className:r({align:o,className:c}),onKeyDown:C,onFocus:e=>{g(e),l==null||l(e)},"data-dd-privacy":"mask",...y,children:u})});s.displayName="TableCell";exports.TableCell=s;exports.tableCell=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),p=require("react"),m=require("tailwind-variants"),q=require("../Table.context.cjs"),r=m.tv({base:["uy-px-200 uy-py-150 uy-text-content-neutral uy-typography-body","focus-visible:uy-outline-2 focus-visible:-uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"],variants:{align:{left:"uy-text-left",center:"uy-text-center",right:"uy-text-right"}}}),s=p.forwardRef(({children:n,colIndex:a=0,rowIndex:u=0,align:o,onKeyDown:t,onFocus:l,className:c,isRowHeader:i=!1,...b},y)=>{const{keyboardNavigation:d}=q.useTableContext(),{isCellFocused:f,handleCellKeyDown:x,handleCellFocus:g}=d,h=f(u,a),C=e=>{e.key!=="Tab"&&(x(e),t==null||t(e))},v=i?"th":"td";return T.jsx(v,{ref:y,role:i?"rowheader":"gridcell","aria-colindex":a+1,tabIndex:h?0:-1,className:r({align:o,className:c}),onKeyDown:C,onFocus:e=>{g(e),l==null||l(e)},"data-dd-privacy":"mask",...b,children:n})});s.displayName="TableCell";exports.TableCell=s;exports.tableCell=r;

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

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

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

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

package/dist/cjs/components/text/Text.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),g=require("react"),u=require("./Text.variants.cjs"),b={inherit:"span",h1:"h1",h2:"h2",h3:"h3",h4:"h4",overline:"h6",subtitle:"h5",displayTitle:"h1",displayBody:"p",body:"p",bodyStrong:"strong",bodySmall:"small",bodySmallStrong:"strong",bodyLarge:"p",bodyLargeStrong:"strong",action:"span",actionLarge:"span",actionSmall:"span"},s=g.forwardRef(({children:o,variant:e,color:a,isTruncated:n,lineClamp:t,asElement:r,className:l,...i},c)=>{const d=t!==void 0,m=u.text({variant:e,color:a,isTruncated:n,isLineClamped:d,className:l}),y=b[e??"inherit"],p=r??y;return h.jsx(p,{"data-dd-privacy":"mask",...i,ref:c,className:m,style:{"--uy-text-line-clamp":t},children:o})});s.displayName="Text";exports.Text=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),g=require("react"),u=require("./Text.variants.cjs"),b={inherit:"span",h1:"h1",h2:"h2",h3:"h3",h4:"h4",overline:"h6",subtitle:"h5",displayTitle:"h1",displayBody:"p",body:"p",bodyStrong:"strong",bodySmall:"small",bodySmallStrong:"strong",bodyLarge:"p",bodyLargeStrong:"strong",action:"span",actionLarge:"span",actionSmall:"span",actionInfo:"span"},s=g.forwardRef(({children:n,variant:e,color:o,isTruncated:a,lineClamp:t,asElement:r,className:i,...l},c)=>{const d=t!==void 0,m=u.text({variant:e,color:o,isTruncated:a,isLineClamped:d,className:i}),p=b[e??"inherit"],y=r??p;return h.jsx(y,{"data-dd-privacy":"mask",...l,ref:c,className:m,style:{"--uy-text-line-clamp":t},children:n})});s.displayName="Text";exports.Text=s;

package/dist/cjs/components/text/Text.d.cts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
 import { VariantProps } from 'tailwind-variants';
 import { text } from './Text.variants.cjs';
-type ValidTextElements = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
+export type ValidTextElements = 'p' | 'span' | 'div' | 'abbr' | 'dfn' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
 export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
     /**
      * The HTML element to render the text as. Defaults to a recommended element based on the variant.