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

package/dist/cjs/components/button/Button.d.cts

@@ -28,15 +28,18 @@ type UnityButtonProps = AriaButtonProps & ButtonBase & {
      */
     isLoading?: boolean;
 };
-export type ButtonProps = (UnityButtonProps & {
+type UnionButtonProps = (UnityButtonProps & {
     variant: 'primary';
 } & ButtonFilled) | (UnityButtonProps & {
     variant: 'secondary';
 } & ButtonOutlined) | (UnityButtonProps & {
     variant: 'ghost';
 } & ButtonGhost);
+export type ButtonProps = PropsWithChildren<Omit<UnionButtonProps, 'style'>>;
 /**
  * Buttons allow users to take actions, and make choices, with a single tap.
  */
-declare const Button: import('react').ForwardRefExoticComponent<PropsWithChildren<ButtonProps> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const Button: import('react').ForwardRefExoticComponent<Omit<UnionButtonProps, "style"> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 export { Button };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),a=e.tv({slots:{base:"uy-group uy-inline-flex uy-flex-col uy-gap-50 uy-py-[1px]",wrapper:"uy-inline-flex uy-items-start uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25",asterisk:"uy-text-content-danger",optionalTag:"uy-typography-body",descriptionsContainer:"uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",helperText:"uy-typography-body-small uy-text-content-neutral-low",feedbackText:"uy-typography-body-small-strong uy-text-content-form-invalid"},variants:{isDisabled:{true:{base:"!uy-text-content-form-disabled"}},isInvalid:{true:{}},isReadOnly:{true:{base:"uy-cursor-not-allowed"}}},defaultVariants:{isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isDisabled:!1,isReadOnly:!1,className:{wrapper:"uy-cursor-pointer"}},{isDisabled:!0,isReadOnly:!1,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!1,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!0,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}}]});exports.checkbox=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),a=e.tv({slots:{base:"uy-group uy-inline-flex uy-flex-col uy-gap-50 uy-py-[1px]",wrapper:"uy-inline-flex uy-items-start uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25 uy-leading-[1lh]",asterisk:"uy-text-content-danger",optionalTag:"uy-typography-body uy-leading-[1lh]",descriptionsContainer:"uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",helperText:"uy-typography-body-small uy-text-content-neutral-low",feedbackText:"uy-typography-body-small-strong uy-text-content-form-invalid"},variants:{isDisabled:{true:{base:"!uy-text-content-form-disabled"}},isInvalid:{true:{}},isReadOnly:{true:{base:"uy-cursor-not-allowed"}}},defaultVariants:{isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isDisabled:!1,isReadOnly:!1,className:{wrapper:"uy-cursor-pointer"}},{isDisabled:!0,isReadOnly:!1,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!1,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!0,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}}]});exports.checkbox=a;

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

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

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

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { Row, Table as TableType } from '@tanstack/react-table';
 import { TablePaginationProps } from '../table/parts/TablePagination.cjs';
+import { TableProps, TableRootProps } from '../table/Table.cjs';
 export interface DataTablePaginationLabels {
     /** Label for the "rows per page" and pagination label dropdown */
     itemLabel?: string;
@@ -11,13 +12,9 @@ export interface DataTablePaginationOptions {
     /** Custom labels for pagination */
     labels?: DataTablePaginationLabels;
 }
-export interface DataTableProps<TData> {
+export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>, Omit<TableProps, 'children'> {
     /** The table instance from @tanstack/react-table */
     table: TableType<TData>;
-    /** The minimum number of rows to display, affecting the minimum height */
-    minRows?: number;
-    /** The maximum number of rows to display, affecting the maximum height */
-    maxRows?: number;
     /** Optional loading state */
     isLoading?: boolean;
     /** Optional error state */
@@ -87,7 +84,7 @@ export interface DataTableProps<TData> {
  * @remarks
  * [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
  */
-declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, children, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, children, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }

package/dist/cjs/components/date-calendar/DateCalendar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),l=require("@internationalized/date"),t=require("react-aria-components"),Y=require("tailwind-variants"),g=require("../icon-button/IconButton.cjs"),B=require("./hooks/useMonthsList.cjs"),M=require("./hooks/useYearsList.cjs"),m=require("./parts/DateSegmentSelect.cjs"),T=Y.tv({slots:{base:"",calendarWrapper:"uy-flex uy-flex-col uy-gap-100",dialogHeader:"uy-flex uy-items-center uy-h-500 uy-w-full",dialogHeaderGroup:"uy-flex uy-items-center",calendarGrid:"uy-border-separate uy-border-spacing-25 uy-w-full",calendarHeaderCell:"uy-typography-body-strong uy-text-content-neutral-low uy-w-[44px] uy-h-[44px] uy-p-[1px] uy-uppercase",calendarCell:["uy-typography-body uy-relative uy-text-content-form-enabled uy-w-[44px] uy-h-[44px] uy-p-[1px] uy-outline-hidden uy-cursor-pointer uy-rounded-circle uy-flex uy-items-center uy-justify-center","hover:uy-bg-surface-neutral-hover active:uy-bg-surface-form-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2","data-[outside-month]:uy-text-content-neutral-disabled data-[outside-month]:uy-cursor-not-allowed data-[disabled]:uy-text-content-neutral-disabled data-[disabled]:uy-cursor-not-allowed data-[unavailable]:uy-text-content-neutral-disabled data-[unavailable]:uy-cursor-not-allowed","data-[selected]:uy-bg-surface-form-active data-[selected]:uy-text-content-inverted","data-[today]:after:uy-content-' ' data-[today]:after:uy-absolute data-[today]:after:uy-bottom-150 data-[today]:after:uy-w-100 data-[today]:after:uy-h-25 data-[today]:after:uy-bg-border-primary-active data-[today]:data-[selected]:after:uy-bg-content-inverted"]},variants:{isDisabled:{true:{calendarHeaderCell:"uy-text-content-form-disabled"}}},defaultVariants:{isDisabled:!1}});function p({value:b,defaultValue:n,minValue:r,maxValue:d,onChange:i,onFocusChange:o,...s}){const f=l.today(l.getLocalTimeZone()),[v,D]=x.useState(b??n??f),[u,c]=x.useState(b??n??f),j=B.useMonthsList(),C=M.useYearsList({startYear:r==null?void 0:r.year,endYear:d==null?void 0:d.year}),N=a=>{c(y=>y.set({month:parseInt(a,10)}))},S=a=>{c(y=>y.set({year:parseInt(a,10)}))},{base:w,calendarWrapper:H,dialogHeader:q,dialogHeaderGroup:h,calendarGrid:L,calendarHeaderCell:G,calendarCell:I}=T({isDisabled:s.isDisabled});return e.jsx("div",{className:w(),"data-dd-privacy":"mask",children:e.jsx(t.Calendar,{...s,minValue:r,maxValue:d,value:v,defaultValue:n,onChange:a=>{D(a),i==null||i(a)},focusedValue:u,onFocusChange:a=>{c(a),o==null||o(a)},children:e.jsxs("div",{className:H(),children:[e.jsxs("header",{className:q(),children:[e.jsx(t.Heading,{className:"uy-sr-only"}),e.jsxs("div",{className:h({className:"uy-pl-100 uy-gap-200"}),children:[e.jsx(m.DateSegmentSelect,{type:"month",items:j,value:u.month.toString(),onChange:N,isDisabled:s.isDisabled}),e.jsx(m.DateSegmentSelect,{type:"year",items:C,value:u.year.toString(),onChange:S,isDisabled:s.isDisabled})]}),e.jsxs("div",{className:h({className:"uy-ml-auto uy-gap-100"}),children:[e.jsx(g.IconButton,{slot:"previous",icon:"CaretLeftOutlined",color:"neutral",label:"Previous",variant:"ghost",isDisabled:s.isDisabled}),e.jsx(g.IconButton,{slot:"next",icon:"CaretRightOutlined",color:"neutral",label:"Next",variant:"ghost",isDisabled:s.isDisabled})]})]}),e.jsxs(t.CalendarGrid,{className:L(),weekdayStyle:"short",children:[e.jsx(t.CalendarGridHeader,{children:a=>e.jsx(t.CalendarHeaderCell,{className:G(),children:a})}),e.jsx(t.CalendarGridBody,{children:a=>e.jsx(t.CalendarCell,{date:a,"data-today":l.isToday(a,l.getLocalTimeZone())?!0:void 0,className:I()})})]})]})})})}p.displayName="DateCalendar";exports.DateCalendar=p;

package/dist/cjs/components/date-calendar/DateCalendar.d.cts

@@ -0,0 +1,23 @@
+import { DateValue } from '@internationalized/date';
+import { CalendarProps as AriaDateCalendarProps } from 'react-aria-components';
+type PropsFromAriaCalendar<TDate extends DateValue> = AriaDateCalendarProps<TDate>;
+export type DateCalendarProps<TDate extends DateValue> = PropsFromAriaCalendar<TDate>;
+/**
+ * The `DateCalendar` component displays one or more date grids and allows users to navigate through dates select a single date.
+ * @param {DateCalendarProps} props - The props for the `DateCalendar` component
+ * @example
+ * ```tsx
+ * import { DateCalendar } from '@payfit/unity-components'
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * const [date, setDate] = useState(new CalendatDate(2022, 1, 1))
+ * <DateCalendar value={date} onChange={setDate} />
+ * ```
+ * @see {@link DateCalendarProps} for all available props
+ * @remarks [API and Demos](https://unity-components.payfit.io/?path=/docs/date-and-time-datecalendar--docs)
+ */
+declare function DateCalendar<TDate extends DateValue>({ value, defaultValue, minValue, maxValue, onChange, onFocusChange, ...props }: DateCalendarProps<TDate>): import("react/jsx-runtime").JSX.Element;
+declare namespace DateCalendar {
+    var displayName: string;
+}
+export { DateCalendar };

package/dist/cjs/components/date-calendar/hooks/useMonthsList.d.cts

@@ -0,0 +1,4 @@
+export declare function useMonthsList(): {
+    id: string;
+    name: string;
+}[];

package/dist/cjs/components/date-calendar/hooks/useYearsList.d.cts

@@ -0,0 +1,10 @@
+export interface UseYearsListOptions {
+    yearsBefore?: number;
+    yearsAfter?: number;
+    startYear?: number;
+    endYear?: number;
+}
+export declare function useYearsList({ yearsBefore, yearsAfter, startYear, endYear, }?: UseYearsListOptions): {
+    id: string;
+    name: string;
+}[];

package/dist/cjs/components/date-picker/DatePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),I=require("react"),s=require("react-aria-components"),N=require("react-intl"),m=require("tailwind-variants"),P=require("../icon/Icon.cjs"),W=require("./parts/DateCalendar.cjs"),R=require("./parts/DateInput.cjs"),U=m.tv({slots:{base:["uy-group uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100","active:uy-border-border-form-active data-[focus-visible]:uy-border-border-form-active"],inputWrapper:["uy-flex uy-grow uy-rounded-75 uy-outline-none","focus-within:uy-outline-2 focus-within:uy-outline-utility-focus-ring focus-within:uy-outline-offset-2","group-[:has(button:focus)]:data-[focus-within]:uy-outline-none group-[:has(button:focus)]:data-[focus-within]:uy-outline-offset-0 group-[:has(button:focus)]:data-[focus-within]:uy-outline-transparent"],suffix:["uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100","hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-pressed active:uy-border-border-form-active data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-border-border-form-active","focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[3px]"]},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",suffix:"uy-bg-surface-form-error uy-border-border-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",suffix:"uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"}}]}),M=m.tv({base:"uy-overflow-auto uy-shadow-floating uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-75",variants:{isEntering:{true:"uy-animate-in uy-fade-in data-[placement-bottom]:uy-slide-in-from-top-1 data-[placement-top]:uy-slide-in-from-bottom-1 uy-duration-200 uy-ease-out"},isExiting:{true:"uy-animate-out uy-fade-out data-[placement-bottom]:uy-slide-out-to-top-1 data-[placement-top]:uy-slide-out-to-bottom-1 uy-duration-150 uy-ease-in"}}}),p=I.forwardRef(({value:f,defaultValue:b,isInvalid:y,isLoading:v,isDisabled:t,isReadOnly:u,onClearButtonPress:d,onBlur:o,onFocus:i,onChange:n,onOpenChange:l,id:x,...e},O)=>{const g=N.useIntl(),{base:h,inputWrapper:D,suffix:w}=U({isInvalid:!!y,isReadOnly:!!u,isDisabled:!!t}),c=r=>{n==null||n(r??void 0)},k=r=>{l==null||l(r),r?i==null||i():o==null||o()},j=r=>e.isDateUnavailable?e.isDateUnavailable(r):!1,V=()=>{d==null||d()};return a.jsxs(s.DatePicker,{"data-dd-privacy":"mask",...e,className:h(),value:f,defaultValue:b,minValue:e.minValue,maxValue:e.maxValue,isReadOnly:!!u,isDisabled:!!t,onChange:c,onFocus:i,onBlur:o,onOpenChange:k,isDateUnavailable:j,children:[a.jsxs(s.Group,{className:D(),id:x,children:[a.jsx(R.DateInput,{isLoading:v,isDisabled:t,isReadOnly:u,isInvalid:y,onClearButtonPress:V}),a.jsx(s.Button,{className:w(),isDisabled:u||t,children:a.jsx(P.Icon,{src:"CalendarBlankOutlined",color:"inherit",alt:g.formatMessage({id:"unity:component:form-field:date-picker:calendar-button",defaultMessage:"Open Calendar"})})})]}),a.jsx(s.Popover,{className:({isEntering:r,isExiting:q})=>M({isEntering:r,isExiting:q}),children:a.jsx(W.DateCalendar,{value:f,defaultValue:b,minValue:e.minValue,maxValue:e.maxValue,onChange:c,firstDayOfWeek:e.firstDayOfWeek})})]})});p.displayName="DatePicker";exports.DatePicker=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),I=require("react"),t=require("react-aria-components"),N=require("react-intl"),m=require("tailwind-variants"),P=require("../date-calendar/DateCalendar.cjs"),W=require("../icon/Icon.cjs"),R=require("./parts/DateInput.cjs"),U=m.tv({slots:{base:["uy-group uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100","active:uy-border-border-form-active data-[focus-visible]:uy-border-border-form-active"],inputWrapper:["uy-flex uy-grow uy-rounded-75 uy-outline-none","focus-within:uy-outline-2 focus-within:uy-outline-utility-focus-ring focus-within:uy-outline-offset-2","group-[:has(button:focus)]:data-[focus-within]:uy-outline-none group-[:has(button:focus)]:data-[focus-within]:uy-outline-offset-0 group-[:has(button:focus)]:data-[focus-within]:uy-outline-transparent"],suffix:["uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100","hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-pressed active:uy-border-border-form-active data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-border-border-form-active","focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[3px]"]},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",suffix:"uy-bg-surface-form-error uy-border-border-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",suffix:"uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"}}]}),M=m.tv({base:"uy-overflow-auto uy-shadow-floating uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-75",variants:{isEntering:{true:"uy-animate-in uy-fade-in data-[placement-bottom]:uy-slide-in-from-top-1 data-[placement-top]:uy-slide-in-from-bottom-1 uy-duration-200 uy-ease-out"},isExiting:{true:"uy-animate-out uy-fade-out data-[placement-bottom]:uy-slide-out-to-top-1 data-[placement-top]:uy-slide-out-to-bottom-1 uy-duration-150 uy-ease-in"}}}),p=I.forwardRef(({value:f,defaultValue:b,isInvalid:y,isLoading:v,isDisabled:u,isReadOnly:o,onClearButtonPress:d,onBlur:i,onFocus:s,onChange:n,onOpenChange:l,id:x,...e},O)=>{const g=N.useIntl(),{base:h,inputWrapper:D,suffix:w}=U({isInvalid:!!y,isReadOnly:!!o,isDisabled:!!u}),c=r=>{n==null||n(r)},k=r=>{l==null||l(r),r?s==null||s():i==null||i()},j=r=>e.isDateUnavailable?e.isDateUnavailable(r):!1,V=()=>{d==null||d()};return a.jsxs(t.DatePicker,{"data-dd-privacy":"mask",...e,className:h(),value:f,defaultValue:b,minValue:e.minValue,maxValue:e.maxValue,isReadOnly:!!o,isDisabled:!!u,onChange:c,onFocus:s,onBlur:i,onOpenChange:k,isDateUnavailable:j,children:[a.jsxs(t.Group,{className:D(),id:x,children:[a.jsx(R.DateInput,{isLoading:v,isDisabled:u,isReadOnly:o,isInvalid:y,onClearButtonPress:V}),a.jsx(t.Button,{className:w(),isDisabled:o||u,children:a.jsx(W.Icon,{src:"CalendarBlankOutlined",color:"inherit",alt:g.formatMessage({id:"unity:component:form-field:date-picker:calendar-button",defaultMessage:"Open Calendar"})})})]}),a.jsx(t.Popover,{className:({isEntering:r,isExiting:q})=>M({isEntering:r,isExiting:q}),children:a.jsx(t.Dialog,{className:"uy-p-150","data-dd-privacy":"mask",children:a.jsx(P.DateCalendar,{value:f,defaultValue:b,minValue:e.minValue,maxValue:e.maxValue,onChange:c,firstDayOfWeek:e.firstDayOfWeek})})})]})});p.displayName="DatePicker";exports.DatePicker=p;

package/dist/cjs/components/date-picker/DatePicker.d.cts

@@ -2,15 +2,15 @@ import { CalendarDate } from '@internationalized/date';
 import { DatePickerProps as AriaDatePickerProps } from 'react-aria-components';
 export interface DatePickerProps extends Pick<AriaDatePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek'> {
     /** The currently selected date */
-    value?: CalendarDate;
+    value?: CalendarDate | null;
     /** The default selected date (uncontrolled) */
-    defaultValue?: CalendarDate;
+    defaultValue?: CalendarDate | null;
     /** The minimum allowed date */
     minValue?: CalendarDate;
     /** The maximum allowed date */
     maxValue?: CalendarDate;
     /** Callback fired when the date value changes */
-    onChange?: (value: CalendarDate | undefined) => void;
+    onChange?: (value: CalendarDate | null) => void;
     /** Callback fired when the clear button is clicked */
     onClearButtonPress?: () => void;
     /** Callback fired when the picker loses focus */

package/dist/cjs/components/definition-tooltip/DefinitionTooltip.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),s=require("react-aria-components"),l=require("tailwind-variants"),c=require("../text/Text.cjs"),a=require("../tooltip/Tooltip.cjs"),f=l.tv({base:["uy-text-content-neutral-enabled uy-rounded-50 uy-py-75","hover:uy-text-content-neutral-hover","active:uy-text-content-neutral-active","focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"]}),t=r.forwardRef(({children:i,title:o,asElement:n="span",...u},y)=>e.jsx(a.Tooltip,{title:o,...u,children:e.jsx(s.Focusable,{children:e.jsx(c.Text,{variant:"actionInfo",asElement:n,role:"button",className:f(),children:i})})}));t.displayName="DefinitionTooltip";exports.DefinitionTooltip=t;

package/dist/cjs/components/definition-tooltip/DefinitionTooltip.d.cts

@@ -0,0 +1,23 @@
+import { ValidTextElements } from '../text/Text.cjs';
+import { TooltipProps } from '../tooltip/Tooltip.cjs';
+export interface DefinitionTooltipProps extends Omit<TooltipProps, 'children'> {
+    /** The HTML element to render the definition tooltip as. Defaults to a `<span>`. */
+    asElement?: Extract<ValidTextElements, 'abbr' | 'dfn' | 'span'>;
+    /** The text to trigger the tooltip. */
+    children: string;
+}
+/**
+ * Definition tooltips provide brief definitions for words through a tooltip on hover.
+ * They may appear within a sentence or as standalone text, and should be used only to define terms or acronyms.
+ * @param {DefinitionTooltipProps} props - The props for the `DefinitionTooltip` component.
+ * @example
+ * ```tsx
+ * import { DefinitionTooltip } from '@payfit/unity-components'
+ *
+ * <DefinitionTooltip title="I am the description of the definition tooltip">I am an definition tooltip</DefinitionTooltip>
+ * ```
+ * @see {@link DefinitionTooltipProps} for all available props
+ * @remarks {@link https://www.payfit.design/24f360409/p/05d163-info-link|Design docs}
+ */
+declare const DefinitionTooltip: import('react').ForwardRefExoticComponent<DefinitionTooltipProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DefinitionTooltip };

package/dist/cjs/components/dialog/parts/DialogActions/DialogButton.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),g=require("react"),p=require("react-aria-components"),i=require("../../../button/Button.cjs"),c=({children:r,variant:l,onPress:t,isLoading:s,icon:n})=>{const o=g.useContext(p.OverlayTriggerStateContext);switch(l){case"close":const u=t;return a.jsx(i.Button,{prefixIcon:n,variant:"secondary",onPress:e=>{u&&u(e),o==null||o.close()},children:r});case"confirm":return a.jsx(i.Button,{prefixIcon:n,variant:"primary",isLoading:s,onPress:e=>{t&&t(e)},children:r});case"danger":return a.jsx(i.Button,{variant:"primary",color:"danger",isLoading:s,prefixIcon:n??"WarningCircleOutlined",onPress:e=>{t&&t(e)},children:r})}};c.displayName="DialogButton";exports.DialogButton=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),f=require("react"),x=require("react-aria-components"),s=require("../../../button/Button.cjs"),l=({children:r,variant:g,onPress:t,isLoading:u,icon:n,...o})=>{const a=f.useContext(x.OverlayTriggerStateContext);switch(g){case"close":const c=t;return i.jsx(s.Button,{...o,prefixIcon:n,variant:"secondary",onPress:e=>{c&&c(e),a==null||a.close()},children:r});case"confirm":return i.jsx(s.Button,{...o,prefixIcon:n,variant:"primary",isLoading:u,onPress:e=>{t&&t(e)},children:r});case"danger":return i.jsx(s.Button,{...o,variant:"primary",color:"danger",isLoading:u,prefixIcon:n??"WarningCircleOutlined",onPress:e=>{t&&t(e)},children:r})}};l.displayName="DialogButton";exports.DialogButton=l;

package/dist/cjs/components/dialog/parts/DialogActions/DialogButton.d.cts

@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
 import { ButtonProps } from '../../../button/Button.cjs';
 type ButtonVariant = 'close' | 'confirm' | 'danger';
 type OnPressParameters = Parameters<NonNullable<ButtonProps['onPress']>>[0];
-export type DialogButtonProps<T extends ButtonVariant> = {
+export type DialogButtonProps<T extends ButtonVariant> = Omit<ButtonProps, 'variant' | 'color'> & {
     /** the different variants for the button */
     variant: T;
     /** the icon, it is a discouraged practice, except for `danger` variant which has a `WarningCircleOutlined` as default */
@@ -16,7 +16,7 @@ export type DialogButtonProps<T extends ButtonVariant> = {
  *
  */
 declare const DialogButton: {
-    <T extends ButtonVariant>({ children, variant, onPress, isLoading, icon, }: PropsWithChildren<DialogButtonProps<T>>): import("react/jsx-runtime").JSX.Element | undefined;
+    <T extends ButtonVariant>({ children, variant, onPress, isLoading, icon, ...props }: PropsWithChildren<DialogButtonProps<T>>): import("react/jsx-runtime").JSX.Element | undefined;
     displayName: string;
 };
 export { DialogButton };

package/dist/cjs/components/icon-button/CircularIconButton.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react-aria-components"),v=require("tailwind-variants"),I=require("../../hooks/use-id.cjs"),d=require("../icon/Icon.cjs"),y=require("../spinner/Spinner.cjs"),b=require("../tooltip/Tooltip.cjs"),f=v.tv({base:["uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors","active:uy-bg-surface-neutral-active","data-[pressed]:uy-bg-surface-neutral-pressed","focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring","aria-disabled:uy-cursor-not-allowed aria-disabled:uy-text-content-neutral-disabled","aria-busy:uy-text-content-neutral-disabled aria-busy:uy-cursor-progress"],variants:{size:{default:"uy-w-300 uy-h-300",large:"uy-w-400 uy-h-400"},color:{"content.neutral":"uy-text-content-neutral","content.neutral.low":"uy-text-content-neutral-low"},isDisabled:{false:"hover:uy-bg-surface-neutral-hover"}},defaultVariants:{size:"default",color:"content.neutral"}});function p(x){const h=I(),{onPress:n,icon:l,color:j,size:i,isLoading:t,title:r,isDisabled:s,asElement:g="default",className:m,...o}=x,a=`icon-button-label-${h}`,u=f({class:m,color:j,size:i,isDisabled:s});return g==="button"?e.jsx(b.Tooltip,{title:r,children:e.jsxs(c.Button,{"data-dd-privacy":"allow",...o,onPress:n,isDisabled:s||t,"aria-labelledby":a,"aria-busy":t,className:u,children:[t?e.jsx(y.Spinner,{size:"small",label:"Loading",color:"inherit"}):e.jsx(d.Icon,{src:l,size:i==="large"?24:20,color:"inherit",role:"presentation"}),e.jsx("span",{id:a,className:"uy-sr-only",children:r})]})}):e.jsx(b.Tooltip,{title:r,children:e.jsx(c.Pressable,{"data-dd-privacy":"allow",...o,onPress:n,isDisabled:s||t,"aria-labelledby":a,"aria-busy":t,children:e.jsxs("div",{role:"button","aria-disabled":s,className:u,children:[t?e.jsx(y.Spinner,{size:"small",label:"Loading",color:"inherit"}):e.jsx(d.Icon,{src:l,size:i==="large"?24:20,color:"inherit",role:"presentation"}),e.jsx("span",{id:a,className:"uy-sr-only",children:r})]})})})}p.displayName="CircularIconButton";exports.CircularIconButton=p;exports.circularIconButton=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react-aria-components"),v=require("tailwind-variants"),I=require("../../hooks/use-id.cjs"),d=require("../icon/Icon.cjs"),y=require("../spinner/Spinner.cjs"),b=require("../tooltip/Tooltip.cjs"),p=v.tv({base:["uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors","active:uy-bg-surface-neutral-active","data-[pressed]:uy-bg-surface-neutral-pressed","focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring","data-[disabled]:uy-cursor-not-allowed data-[disabled]:uy-text-content-neutral-disabled","aria-busy:uy-text-content-neutral-disabled aria-busy:uy-cursor-progress"],variants:{size:{default:"uy-w-300 uy-h-300",large:"uy-w-400 uy-h-400"},color:{"content.neutral":"uy-text-content-neutral","content.neutral.low":"uy-text-content-neutral-low"}},defaultVariants:{size:"default",color:"content.neutral"}});function x(f){const j=I(),{onPress:i,icon:l,color:h,size:n,isLoading:t,title:r,isDisabled:a,asElement:m="default",className:g,...o}=f,s=`icon-button-label-${j}`,u=p({class:g,color:h,size:n});return m==="button"?e.jsx(b.Tooltip,{title:r,children:e.jsxs(c.Button,{"data-dd-privacy":"allow",...o,onPress:i,isDisabled:a||t,"aria-labelledby":s,"aria-busy":t,className:u,children:[t?e.jsx(y.Spinner,{size:"small",label:"Loading",color:"inherit"}):e.jsx(d.Icon,{src:l,size:n==="large"?24:20,color:"inherit",role:"presentation"}),e.jsx("span",{id:s,className:"uy-sr-only",children:r})]})}):e.jsx(b.Tooltip,{title:r,children:e.jsx(c.Pressable,{"data-dd-privacy":"allow",...o,onPress:i,isDisabled:a||t,"aria-labelledby":s,"aria-busy":t,children:e.jsxs("div",{role:"button","aria-disabled":a,className:u,children:[t?e.jsx(y.Spinner,{size:"small",label:"Loading",color:"inherit"}):e.jsx(d.Icon,{src:l,size:n==="large"?24:20,color:"inherit",role:"presentation"}),e.jsx("span",{id:s,className:"uy-sr-only",children:r})]})})})}x.displayName="CircularIconButton";exports.CircularIconButton=x;exports.circularIconButton=p;

package/dist/cjs/components/icon-button/CircularIconButton.d.cts

@@ -10,9 +10,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
         default: string;
@@ -22,9 +19,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, {
     size: {
         default: string;
@@ -34,9 +28,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }>, {
     size: {
         default: string;
@@ -46,9 +37,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
         default: string;
@@ -58,9 +46,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
         default: string;
@@ -70,9 +55,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, {
     size: {
         default: string;
@@ -82,9 +64,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }>, unknown, unknown, undefined>>;
 export interface CircularIconButtonProps extends Omit<AriaButtonProps, 'className'>, VariantProps<typeof circularIconButton> {
     icon: UnityIcon;

package/dist/cjs/components/icon-button/IconButton.d.cts

@@ -7,7 +7,7 @@ interface IconButtonBaseProps {
     /** The icon to display inside the button */
     icon: UnityIcon;
     /** The function to trigger when the button is clicked */
-    onClick: () => void;
+    onClick?: () => void;
     /** Override the icon role */
     iconRole?: AriaRole;
     /** className to add to the button */

package/dist/cjs/components/number-field/NumberField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),C=require("react-hook-form"),I=require("tailwind-variants"),T=require("../form-field/FormField.cjs"),g=require("../form-field/parts/FormControl.cjs"),k=require("../form-field/parts/FormFeedbackText.cjs"),H=require("../form-field/parts/FormHelperText.cjs"),P=require("../form-field/parts/FormLabel.cjs"),R=require("../number-input/NumberInput.cjs"),s=I.tv({base:"uy-flex uy-flex-col uy-gap-100"});function v({name:r,label:t,defaultValue:o,helperText:n,feedbackText:i,contextualLink:l,isRequired:c,isInvalid:m,isLoading:F,isDisabled:a,isReadOnly:d,requiredVariant:b,onClearButtonPress:x,...p},q){const{control:N,setValue:j}=C.useFormContext(),f={isRequired:c,isInvalid:m,isLoading:F,isDisabled:a,isReadOnly:d},y=x??(()=>{j(r,NaN)});return e.jsxs(T.FormField,{control:N,name:r,className:s(),...f,children:[e.jsx(P.FormLabel,{requiredVariant:b,children:t}),n&&e.jsx(H.FormHelperText,{children:n}),e.jsx(g.FormControl,{children:e.jsx(R.NumberInput,{ref:q,onClearButtonPress:y,defaultValue:o,...p})}),e.jsx(k.FormFeedbackText,{children:i}),l]})}const u=h.forwardRef(function(t,o){return v(t,o)});u.displayName="NumberField";exports.NumberField=u;exports.numberField=s;

package/dist/cjs/components/number-field/NumberField.d.cts

@@ -0,0 +1,47 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.cjs';
+import { LabelProps } from '../label/Label.cjs';
+import { NumberProps } from '../number-input/NumberInput.cjs';
+export declare const numberField: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-flex uy-flex-col uy-gap-100", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-flex-col uy-gap-100", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface NumberFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<NumberProps, 'name'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the text field. */
+    label: string;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the text field. */
+    feedbackText?: ReactNode;
+    /** A contextual link to display below the text field. */
+    contextualLink?: ReactNode;
+}
+type NumberFieldComponent = (<TSchema extends Schema>(props: NumberFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * NumberField is a form control component that combines a number input with form field functionality.
+ * It integrates with React Hook Form and provides features like validation, labels, helper text, and feedback.
+ * @template TFieldValues - The type of the form values
+ * @template TName - The type of the field name (must be a key of TFieldValues)
+ * @example
+ * ```tsx
+ * import { NumberField } from '@payfit/unity-components'
+ *
+ * <NumberField
+ *   name="age"
+ *   label="Age"
+ *   helperText="Enter your age in years"
+ *   isRequired
+ * />
+ * ```
+ * @template TSchema - The Zod schema type for form validation
+ * @param {NumberFieldProps<ZodInfer<TSchema>>} props - The props for the NumberField component
+ * @param {ForwardedRef<HTMLInputElement>} ref - Ref forwarded to the underlying input element
+ * @returns {JSX.Element} A NumberField component
+ */
+declare const NumberField: NumberFieldComponent;
+export { NumberField };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("react"),i=require("react-aria-components"),B=require("tailwind-variants"),F=require("../icon/Icon.cjs");require("@payfit/unity-icons");const G=require("react-intl"),l=require("../icon-button/CircularIconButton.cjs"),T=require("../spinner/Spinner.cjs"),p=B.tv({slots:{base:["uy-group uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100","focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2","active:uy-border-border-form-active"],wrapper:["uy-flex uy-gap-50 uy-flex-grow uy-flex-nowrap uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-max-w-full uy-justify-between uy-items-center"],input:["uy-w-full uy-flex-1 uy-outline-none uy-typography-body uy-min-w-0 uy-max-w-full","placeholder:uy-text-content-neutral-lowest"],prefix:["uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-border-solid uy-rounded-l-100","active:uy-border-border-form-active"],suffix:["uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100","active:uy-border-border-form-active"],state:["uy-flex uy-gap-50 uy-items-center uy-shrink-0 uy-text-content-neutral-disabled"],controls:["uy-flex uy-gap-50"]},variants:{isReadOnly:{true:{base:["uy-border-border-form-disabled uy-bg-surface-form-disabled"],prefix:["uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-read-only"],wrapper:["uy-bg-surface-form-disabled uy-text-content-form-disabled","group-data-[invalid=true]:uy-bg-surface-form-error"],input:["uy-bg-surface-form-disabled uy-text-content-form-read-only"],suffix:["uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-read-only"]},false:{base:["uy-border-border-form-enabled uy-bg-surface-form-enabled","data-[invalid=true]:uy-border-border-form-error data-[invalid=true]:uy-bg-surface-form-error","data-[disabled=true]:uy-border-border-form-disabled data-[disabled=true]:uy-bg-surface-form-disabled data-[disabled=true]:uy-cursor-not-allowed"],prefix:["uy-bg-surface-neutral-low uy-border-border-form-enabled uy-text-content-form-enabled","group-data-[invalid=true]:uy-bg-surface-form-error group-data-[invalid=true]:uy-border-border-form-error","group-data-[disabled=true]:uy-bg-surface-form-disabled group-data-[disabled=true]:uy-border-border-form-disabled group-data-[disabled=true]:uy-text-content-form-disabled data-[disabled=true]:uy-cursor-not-allowed"],suffix:["uy-bg-surface-neutral-low uy-border-border-form-enabled uy-text-content-form-enabled","group-data-[invalid=true]:uy-bg-surface-form-error group-data-[invalid=true]:uy-border-border-form-error","group-data-[disabled=true]:uy-bg-surface-form-disabled group-data-[disabled=true]:uy-border-border-form-disabled group-data-[disabled=true]:uy-text-content-form-disabled data-[disabled=true]:uy-cursor-not-allowed"],wrapper:["uy-border-border-form-enabled uy-bg-surface-form-enabled","group-data-[invalid=true]:uy-bg-surface-form-error group-data-[invalid=true]:uy-border-border-form-error","group-data-[disabled=true]:uy-bg-surface-form-disabled group-data-[disabled=true]:uy-text-content-form-disabled data-[disabled=true]:uy-cursor-not-allowed"],input:["uy-text-content-form-enabled uy-bg-surface-form-enabled","group-data-[invalid=true]:uy-bg-surface-form-error","group-data-[disabled=true]:uy-bg-surface-form-disabled group-data-[disabled=true]:uy-text-content-form-disabled data-[disabled=true]:uy-cursor-not-allowed"],state:["group-data-[invalid=true]:uy-text-content-form-error"],button:"data-[disabled=true]:uy-cursor-not-allowed"}}}}),g=A.forwardRef(({withControls:b=!1,defaultValue:u,formatOptions:x,isDisabled:y,isInvalid:c,isLoading:o,isReadOnly:a,isRequired:w,maxValue:d,minValue:n,prefix:f,onBlur:v,onChange:N,onClearButtonPress:s,step:h,suffix:m,value:r,...j},I)=>{const{base:M,wrapper:q,input:S,prefix:C,suffix:O,state:E,controls:D}=p({isReadOnly:a}),t=G.useIntl(),R=r!==void 0&&!isNaN(r),k=u!==void 0&&!isNaN(u),z=(R||k)&&!b&&!o&&!a&&!y;return e.jsxs(i.NumberField,{ref:I,className:M(),value:r,defaultValue:u,minValue:n,maxValue:d,step:h,isDisabled:y,isReadOnly:a,isInvalid:c,isRequired:w,"aria-busy":o,onChange:N,formatOptions:x,onBlur:v,...j,children:[f?e.jsx("span",{className:C(),children:f}):null,e.jsxs(i.Group,{className:q(),children:[e.jsx(i.Input,{className:S()}),e.jsxs("div",{className:E(),children:[o&&e.jsx(T.Spinner,{color:"inherit",size:"small",label:t.formatMessage({id:"unity:component:common:loading:label",defaultMessage:"Loading..."})}),c&&e.jsx(F.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:t.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),z&&e.jsx(l.CircularIconButton,{title:t.formatMessage({id:"unity:component:common:clear:title",defaultMessage:"Clear"}),className:"uy-text-content-neutral-enabled",icon:"CloseOutlined",onPress:()=>{s==null||s()}})]}),b&&e.jsxs("div",{className:D(),children:[e.jsx(l.CircularIconButton,{asElement:"button",icon:"MinusOutlined",slot:"decrement",isDisabled:n!==void 0&&r===n,title:t.formatMessage({id:"unity:component:form-field:number-input:decrement:title",defaultMessage:"decrement"})}),e.jsx(l.CircularIconButton,{asElement:"button",icon:"PlusOutlined",slot:"increment",isDisabled:d!==void 0&&r===d,title:t.formatMessage({id:"unity:component:form-field:number-input:increment:title",defaultMessage:"increment"})})]})]}),m?e.jsx("span",{className:O(),children:m}):null]})});g.displayName="NumberInput";exports.NumberInput=g;exports.numberInput=p;

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;