@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,94 @@
+import { default as React } from 'react';
+import { Row, Table as TableType } from '@tanstack/react-table';
+import { TablePaginationProps } from '../table/parts/TablePagination.cjs';
+export interface DataTablePaginationLabels {
+    /** Label for the "rows per page" and pagination label dropdown */
+    itemLabel?: string;
+}
+export interface DataTablePaginationOptions {
+    /** Available options in the "rows per page" dropdown */
+    pageSizeOptions?: TablePaginationProps['pageSizeOptions'];
+    /** Custom labels for pagination */
+    labels?: DataTablePaginationLabels;
+}
+export interface DataTableProps<TData> {
+    /** 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 */
+    error?: Error | null;
+    /** Custom empty state when there's no data */
+    emptyState?: React.ReactNode;
+    /** Custom loading state */
+    loadingState?: React.ReactNode;
+    /** Custom error state */
+    errorState?: React.ReactNode;
+    /** Pagination customization */
+    pagination?: DataTablePaginationOptions;
+    /** Render function for table rows */
+    children: (row: Row<TData>) => React.ReactNode;
+}
+/**
+ * A powerful and flexible data table component that integrates Unity's Table with @tanstack/react-table
+ *
+ * The DataTable component provides a standardized way to display tabular data with built-in support for
+ * pagination, sorting, filtering, and row selection. It handles common table patterns like loading states,
+ * empty states, and consistent table heights.
+ * @param props - The props for the `DataTable` component
+ * @param props.table - The table instance from @tanstack/react-table
+ * @param props.minRows - The minimum number of rows to display, affecting the minimum height
+ * @param props.maxRows - The maximum number of rows to display, affecting the maximum height
+ * @param props.isLoading - Custom loading state to show when isLoading is true
+ * @param props.error - Custom error state
+ * @param props.emptyState - Custom empty state to show when there's no data
+ * @param props.loadingState - Custom loading state to show when `isLoading` is true
+ * @param props.errorState - Custom error state to show when `error` is not null
+ * @param props.pagination - Optional pagination customization, see {@link DataTablePaginationOptions}
+ * @param props.children - Render function that takes care of rendering the table rows
+ * @see {@link DataTableProps} for all available props
+ * @example
+ * ```tsx
+ * import { DataTable, TableRow, TableCell } from '@payfit/unity-components'
+ * import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'
+ * import { useState } from 'react'
+ *
+ * function EmployeeTable() {
+ *   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
+ *
+ *   const table = useReactTable({
+ *     data: employees,
+ *     columns: employeeColumns,
+ *     state: { pagination },
+ *     onPaginationChange: setPagination,
+ *     getCoreRowModel: getCoreRowModel(),
+ *     getPaginationRowModel: getPaginationRowModel(),
+ *   })
+ *
+ *   return (
+ *     <DataTable table={table} minRows={5} maxRows={10}>
+ *       {row => (
+ *         <TableRow key={row.id}>
+ *           {row.getVisibleCells().map(cell => (
+ *             <TableCell key={cell.id}>
+ *               {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ *             </TableCell>
+ *           ))}
+ *         </TableRow>
+ *       )}
+ *     </DataTable>
+ *   )
+ * }
+ * ```
+ * @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 namespace DataTable {
+    var displayName: string;
+}
+export { DataTable };

package/dist/cjs/components/data-table/mocks/employee-columns.d.cts

@@ -0,0 +1,3 @@
+import { Employee } from './employee-data.cjs';
+export declare const employeeColumns: (import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>)[];
+export declare const employeeColumnsWithCheckbox: ((import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>) | import('@tanstack/table-core').DisplayColumnDef<Employee, unknown>)[];

package/dist/cjs/components/data-table/mocks/employee-data.d.cts

@@ -0,0 +1,17 @@
+export type Employee = {
+    id: string;
+    name: string;
+    position: string;
+    avatarUrl: string;
+    team: string;
+    workingAgreement: 'Full-time' | 'Part-time' | 'Freelance' | 'Contractor';
+    startWorkingDate: string;
+    endWorkingDate: string;
+    status: 'active' | 'onboarding' | 'offboarding' | 'inactive' | 'retired';
+    manager: {
+        name: string;
+        position: string;
+        team: string;
+    } | null;
+};
+export declare const employees: Employee[];

package/dist/cjs/components/data-table/parts/ColumnSortHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("../../actionable/Actionable.cjs"),l=require("../../icon/Icon.cjs");function n({children:t,header:e,...r}){return o.jsx(u.Actionable,{...r,className:"uy-flex uy-items-center uy-gap-50",onPress:()=>{e.column.getCanSort()&&e.column.toggleSorting()},children:({isHovered:s})=>{const c=e.column.getCanSort()&&(e.column.getIsSorted()||s);return o.jsxs(o.Fragment,{children:[t,c&&o.jsx(l.Icon,{src:e.column.getIsSorted()==="asc"?"ArrowUpOutlined":"ArrowDownOutlined",role:"presentation",size:20})]})}})}n.displayName="ColumnSortHeader";exports.ColumnSortHeader=n;

package/dist/cjs/components/data-table/parts/ColumnSortHeader.d.cts

@@ -0,0 +1,10 @@
+import { Header } from '@tanstack/react-table';
+import { ActionableProps } from '../../actionable/Actionable.cjs';
+export interface ColumnSortHeaderProps<TData, TValue> extends ActionableProps {
+    header: Header<TData, TValue>;
+}
+declare function ColumnSortHeader<TData, TValue>({ children, header, ...props }: ColumnSortHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare namespace ColumnSortHeader {
+    var displayName: string;
+}
+export { ColumnSortHeader };

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

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

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

@@ -0,0 +1,67 @@
+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;
+    /** The default selected date (uncontrolled) */
+    defaultValue?: CalendarDate;
+    /** The minimum allowed date */
+    minValue?: CalendarDate;
+    /** The maximum allowed date */
+    maxValue?: CalendarDate;
+    /** Callback fired when the date value changes */
+    onChange?: (value: CalendarDate | undefined) => void;
+    /** Callback fired when the clear button is clicked */
+    onClearButtonPress?: () => void;
+    /** Callback fired when the picker loses focus */
+    onBlur?: () => void;
+    /** Callback fired when the picker gains focus */
+    onFocus?: () => void;
+    /** Callback fired when the calendar overlay's open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Whether the picker is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the picker is in a loading state */
+    isLoading?: boolean;
+    /** Whether the picker is disabled */
+    isDisabled?: boolean;
+    /** Whether the picker is read-only */
+    isReadOnly?: boolean;
+    /** Function to determine if a date should be disabled */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** Whether to force leading zeros for days and months */
+    shouldForceLeadingZeros?: boolean;
+    /** Whether to close the calendar after a date is selected */
+    shouldCloseOnSelect?: boolean;
+    /** Whether to open the calendar by default */
+    defaultOpen?: boolean;
+}
+/**
+ * The DatePicker component allows users to select a date either by typing it in directly or choosing from a calendar overlay, providing a standardized way to handle date selection across the application.
+ * @param {DatePickerProps} props - Props for configuring the DatePicker's behavior and appearance
+ * @see {@link DatePickerProps} for all available props
+ * @example
+ * ```tsx
+ * import { DatePicker } from '@payfit/unity-components'
+ * import { parseDate } from '@internationalized/date'
+ *
+ * function Example() {
+ *   const [selectedDate, setSelectedDate] = useState<CalendarDate>()
+ *
+ *   return (
+ *     <DatePicker
+ *       value={selectedDate}
+ *       onChange={setSelectedDate}
+ *       minValue={parseDate('2024-01-01')}  // Restrict dates before Jan 1, 2024
+ *       isDateUnavailable={(date) => date.dayOfWeek === 0}  // Disable Sundays
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/inputs-datepicker--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/719ac2-date-picker)
+ * @note
+ * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
+ */
+declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DatePicker };

package/dist/cjs/components/date-picker/hooks/useMonthsList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),e=require("@internationalized/date"),i=require("react-aria-components");function d(){const{locale:a}=i.useLocale(),s=new Intl.DateTimeFormat().resolvedOptions().calendar,t=e.createCalendar(s);return l.useMemo(()=>{const n=e.today(e.getLocalTimeZone()),o=new e.CalendarDate(t,n.year,n.month,n.day);return Array.from({length:t.getMonthsInYear(o)}).map((u,c)=>{const r=new e.CalendarDate(t,o.year,c+1,1);return{id:r.month.toString(),name:r.toDate(e.getLocalTimeZone()).toLocaleString(a,{month:"long"})}})},[a,t])}exports.useMonthsList=d;

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

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

package/dist/cjs/components/date-picker/hooks/useYearsList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),e=require("@internationalized/date"),L=require("react-aria-components");function C({yearsBefore:s=100,yearsAfter:d=30,startYear:l,endYear:u}={}){const{locale:o}=L.useLocale(),n=e.today(e.getLocalTimeZone()),m=new Intl.DateTimeFormat().resolvedOptions().calendar,a=e.createCalendar(m),c=new e.CalendarDate(a,n.year,n.month,n.day);let t=l,r=u;return t===void 0&&(t=c.year-s),r===void 0&&(r=c.year+d),f.useMemo(()=>Array.from({length:r-t+1}).map((D,y)=>{const i=t+y,g=new e.CalendarDate(a,i,1,1);return{id:i.toString(),name:g.toDate(e.getLocalTimeZone()).toLocaleString(o,{year:"numeric",calendar:a.identifier})}}),[o,a,r,t])}exports.useYearsList=C;

package/dist/cjs/components/date-picker/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/parts/DateCalendar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),n=require("@internationalized/date"),t=require("react-aria-components"),G=require("tailwind-variants"),g=require("../../icon-button/IconButton.cjs"),I=require("../hooks/useMonthsList.cjs"),Y=require("../hooks/useYearsList.cjs"),f=require("./DateSegmentSelect.cjs"),B=G.tv({slots:{dialog:"uy-p-150",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 x({value:c,defaultValue:l,minValue:r,maxValue:d,...s}){const y=n.today(n.getLocalTimeZone()),[p,m]=h.useState(c??l??y),[o,i]=h.useState(c??l??y),v=I.useMonthsList(),C=Y.useYearsList({startYear:r==null?void 0:r.year,endYear:d==null?void 0:d.year}),D=a=>{i(u=>u.set({month:parseInt(a,10)}))},j=a=>{i(u=>u.set({year:parseInt(a,10)}))},{dialog:N,calendarWrapper:S,dialogHeader:w,dialogHeaderGroup:b,calendarGrid:H,calendarHeaderCell:q,calendarCell:L}=B({isDisabled:s.isDisabled});return e.jsx(t.Dialog,{className:N(),"data-dd-privacy":"mask",children:e.jsx(t.Calendar,{...s,minValue:r,maxValue:d,value:p,defaultValue:l,onChange:a=>{m(a)},focusedValue:o,onFocusChange:a=>{i(a)},children:e.jsxs("div",{className:S(),children:[e.jsxs("header",{className:w(),children:[e.jsx(t.Heading,{className:"uy-sr-only"}),e.jsxs("div",{className:b({className:"uy-pl-100 uy-gap-200"}),children:[e.jsx(f.DateSegmentSelect,{type:"month",items:v,value:o.month.toString(),onChange:D,isDisabled:s.isDisabled}),e.jsx(f.DateSegmentSelect,{type:"year",items:C,value:o.year.toString(),onChange:j,isDisabled:s.isDisabled})]}),e.jsxs("div",{className:b({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:H(),weekdayStyle:"short",children:[e.jsx(t.CalendarGridHeader,{children:a=>e.jsx(t.CalendarHeaderCell,{className:q(),children:a})}),e.jsx(t.CalendarGridBody,{children:a=>e.jsx(t.CalendarCell,{date:a,"data-today":n.isToday(a,n.getLocalTimeZone())?!0:void 0,className:L()})})]})]})})})}x.displayName="DateCalendar";exports.DateCalendar=x;

package/dist/cjs/components/date-picker/parts/DateCalendar.d.cts

@@ -0,0 +1,9 @@
+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>;
+declare function DateCalendar<TDate extends DateValue>({ value, defaultValue, minValue, maxValue, ...props }: DateCalendarProps<TDate>): import("react/jsx-runtime").JSX.Element;
+declare namespace DateCalendar {
+    var displayName: string;
+}
+export { DateCalendar };

package/dist/cjs/components/date-picker/parts/DateInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),s=require("react-aria-components"),I=require("react-intl"),c=require("tailwind-variants"),v=require("../../icon-button/CircularIconButton.cjs"),j=require("../../icon/Icon.cjs"),h=require("../../spinner/Spinner.cjs"),q=c.tv({base:"uy-group uy-box-content uy-rounded-25 uy-px-25 uy-text-end uy-tabular-nums uy-outline-none uy-typography-body focus:uy-bg-surface-form-active focus:uy-rounded-25 focus:uy-text-content-inverted data-[disabled]:uy-text-content-form-disabled",variants:{isPlaceholder:{true:"uy-text-content-neutral-lowest",false:"uy-text-content-form-enabled"},isLiteral:{true:"uy-text-content-form-enabled",false:""}}}),d=c.tv({slots:{base:"uy-flex uy-gap-50 uy-flex-grow uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100",input:"uy-flex uy-gap-25 uy-w-fit uy-grow",state:"uy-flex uy-gap-50 uy-items-center"},variants:{isInvalid:{true:{base:"uy-bg-surface-form-error",state:"uy-text-content-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled"}},isDisabled:{true:{base:"uy-bg-surface-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",state:"uy-text-content-neutral-disabled"}}]});function y({isLoading:u,isInvalid:o,isReadOnly:l,isDisabled:i,onClearButtonPress:a}){const n=I.useIntl(),t=g.useContext(s.DatePickerStateContext),{dateValue:f}=t,{base:m,input:b,state:p}=d({isInvalid:!!o,isReadOnly:!!l,isDisabled:!!i}),x=f&&!u&&!l&&!i;return e.jsxs("div",{className:m(),children:[e.jsx(s.DateInput,{className:b(),children:r=>e.jsx(s.DateSegment,{segment:r,className:q({isPlaceholder:r.isPlaceholder,isLiteral:r.type==="literal"})})}),e.jsxs("div",{className:p(),children:[u&&e.jsx(h.Spinner,{color:"inherit",size:"small",label:n.formatMessage({id:"unity:component:common:loading:label",defaultMessage:"Loading..."})}),o&&e.jsx(j.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:n.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),x&&e.jsx(v.CircularIconButton,{slot:null,title:n.formatMessage({id:"unity:component:common:clear:title",defaultMessage:"Clear"}),icon:"CloseOutlined",onPress:()=>{t==null||t.setValue(null),a==null||a()}})]})]})}y.displayName="DateInput";exports.DateInput=y;exports.dateInput=d;

package/dist/cjs/components/date-picker/parts/DateInput.d.cts

@@ -0,0 +1,155 @@
+import { CalendarDate } from '@internationalized/date';
+import { ReactElement } from 'react';
+import { DateFieldProps } from 'react-aria-components';
+export declare const dateInput: import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    state: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}>, {
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    state: string;
+}, import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    state: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    isInvalid: {
+        true: {
+            base: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface DateInputProps extends DateFieldProps<CalendarDate> {
+    /** Element to display after the input field */
+    suffix?: ReactElement;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** Clear button click handler */
+    onClearButtonPress?: () => void;
+}
+export declare function DateInput({ isLoading, isInvalid, isReadOnly, isDisabled, onClearButtonPress, }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DateInput {
+    var displayName: string;
+}

package/dist/cjs/components/date-picker/parts/DateSegmentSelect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("react"),I=require("@payfit/unity-icons"),S=require("react-aria"),j=require("react-intl");function m({items:s,value:i,onChange:g,type:e,isDisabled:o=!1}){const l=t=>()=>{const a=s.find(x=>x.id===t);return(a==null?void 0:a.name)??Array.from({length:3}).join("\0")},r=S.useId(),c=j.useIntl(),[h,b]=v.useState(l(i)),d=`${r}-calendar-${e}-select-label`,u=`${r}-calendar-${e}-select`,y=`${r}-calendar-${e}-select-description`,f=e==="month"?"unity:component:form-field:date-picker:segment-select:month:label":"unity:component:form-field:date-picker:segment-select:year:label",p=e==="month"?"unity:component:form-field:date-picker:segment-select:month:description":"unity:component:form-field:date-picker:segment-select:year:description";return n.jsxs("div",{className:"uy-isolation-isolate uy-relative uy-inline-flex uy-items-center uy-cursor-pointer",children:[n.jsx("label",{id:d,htmlFor:u,className:"uy-sr-only","aria-hidden":"true",children:c.formatMessage({id:f,defaultMessage:`Change current ${e}`})}),n.jsx("select",{id:u,value:i,onChange:t=>{g(t.target.value),b(l(t.target.value))},disabled:o,className:"uy-appearance-none uy-box-border uy-w-[var(--uy-selected-item-width)] uy-bg-transparent uy-border-none uy-rounded-50 uy-capitalize uy-text-content-form-enabled uy-typography-action-large uy-cursor-pointer uy-pr-300 disabled:uy-text-content-form-disabled focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring [-webkit-tap-highlight-color:transparent] [background-color:transparent]",style:{"--uy-selected-item-width":`calc(var(--uy-spacing-300) + ${h.length}ch)`},"aria-labelledby":d,"aria-describedby":y,children:s.map(t=>n.jsx("option",{value:t.id,children:t.name},t.id))}),n.jsx("div",{className:"uy-absolute uy-right-0 uy-pointer-events-none",children:n.jsx(I.IconSprite,{src:"CaretDownOutlined",width:20,height:20,color:"inherit",role:"presentation",className:o?"uy-text-content-form-disabled":""})}),n.jsx("span",{id:y,className:"uy-sr-only","aria-hidden":"true",children:c.formatMessage({id:p,defaultMessage:`Press Enter or Space to change ${e}, then use up and down arrows to select a ${e}`})})]})}m.displayName="DateSegmentSelect";exports.DateSegmentSelect=m;

package/dist/cjs/components/date-picker/parts/DateSegmentSelect.d.cts

@@ -0,0 +1,15 @@
+export interface DateSegmentSelectProps {
+    items: Array<{
+        id: string | number;
+        name: string;
+    }>;
+    value: string;
+    onChange: (value: string) => void;
+    type: 'month' | 'year';
+    isDisabled?: boolean;
+}
+declare function DateSegmentSelect({ items, value, onChange, type, isDisabled, }: DateSegmentSelectProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DateSegmentSelect {
+    var displayName: string;
+}
+export { DateSegmentSelect };

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

@@ -0,0 +1,12 @@
+import { CalendarDate } from '@internationalized/date';
+/**
+ * Converts a JS Date or string to a CalendarDate, preserving the local date components
+ * regardless of timezone.
+ */
+export declare const parseDateValue: (value: Date | string | undefined) => CalendarDate | undefined;
+/**
+ * Converts a CalendarDate to a JS Date, preserving the local date components.
+ * This ensures that "2024-03-15" becomes "March 15, 2024" in the local timezone,
+ * without any unexpected shifts due to timezone conversion.
+ */
+export declare const calendarDateToDate: (date: CalendarDate | null) => Date | undefined;

package/dist/cjs/components/date-picker-field/DatePickerField.cjs

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

package/dist/cjs/components/date-picker-field/DatePickerField.d.cts

@@ -0,0 +1,83 @@
+import { CalendarDate } from '@internationalized/date';
+import { ForwardedRef, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.cjs';
+import { DatePickerProps } from '../date-picker/DatePicker.cjs';
+import { LabelProps } from '../label/Label.cjs';
+export interface DatePickerFieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, DatePickerProps {
+    /** The name of the field, which should match the form schema. */
+    name: string;
+    /** The label for the date picker field. */
+    label: string;
+    /** The default value of the date picker field. */
+    defaultValue?: CalendarDate;
+    /** Helper text to display below the date picker field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the date picker field. */
+    feedbackText?: ReactNode;
+    /** A contextual link to display below the date picker field. */
+    contextualLink?: ReactNode;
+    /** Whether the field is in an invalid state. */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state. */
+    isLoading?: boolean;
+    /** Whether the field is disabled. */
+    isDisabled?: boolean;
+    /** Whether the field is read-only. */
+    isReadOnly?: boolean;
+    /** The minimum selectable date. */
+    minValue?: CalendarDate;
+    /** The maximum selectable date. */
+    maxValue?: CalendarDate;
+    /** Function to determine if a date should be disabled. */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** Handler called when the clear button is pressed. */
+    onClearButtonPress?: () => void;
+    /** Handler called when the calendar overlay opens or closes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Handler called when the field loses focus. */
+    onBlur?: () => void;
+    /** Handler called when the field gains focus. */
+    onFocus?: () => void;
+}
+export type TypedDatePickerFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<DatePickerFieldProps, 'name'> & {
+    name: TName;
+};
+type DatePickerFieldComponent = {
+    <TSchema extends Schema>(props: TypedDatePickerFieldProps<ZodInfer<TSchema>> & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
+/**
+ * The `DatePickerField` component renders a full field that can accept date input, integrating with the `Form` component automatically.
+ * It provides a calendar overlay for date selection and supports direct text input for dates.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   birthDate: z.custom<CalendarDate>(),
+ *   startDate: z.custom<CalendarDate>()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <DatePickerField<typeof schema>
+ *         name="birthDate"  // Only "birthDate" | "startDate" allowed
+ *         label="Birth Date"
+ *       />
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/forms-datepickerfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/719ac2-date-picker)
+ * @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.
+ * @note
+ * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
+ */
+declare const DatePickerField: DatePickerFieldComponent;
+export { DatePickerField };

package/dist/cjs/components/dialog/Dialog.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),r=require("react"),m=require("react-aria"),a=require("react-aria-components"),p=require("tailwind-variants"),f=require("./parts/DialogActions.cjs"),b=require("./parts/DialogActions/DialogButton.cjs"),u=p.tv({slots:{overlay:["uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto","uy-flex uy-min-h-full uy-items-center uy-justify-center uy-text-center","uy-backdrop-blur-sm uy-bg-utility-backdrop/65"],wrapper:["uy-w-full md:uy-max-w-[640px]","uy-m-400 md:uy-m-0","uy-overflow-hidden uy-rounded-200 uy-bg-white uy-p-300 md:uy-p-400","uy-text-left uy-align-middle uy-shadow-floating","uy-bg-surface-neutral"],content:["uy-outline-none uy-relative uy-flex uy-flex-col uy-gap-300 md:uy-gap-400"]}}),D=t=>{const i=r.Children.toArray(t).find(e=>r.isValidElement(e)&&e.type===f.DialogActions);return r.isValidElement(i)?r.Children.toArray(i.props.children).some(e=>r.isValidElement(e)&&e.type===b.DialogButton&&e.props.variant==="danger"):!1};function n({children:t,isOpen:i,onOpenChange:e,isDismissable:s=!0,...y}){const o=m.useId(),{overlay:d,wrapper:g,content:c}=u();return l.jsx(a.ModalOverlay,{isDismissable:s,isOpen:i,onOpenChange:e,className:d(),children:l.jsx(a.Modal,{className:g(),"data-unity-dialog":!0,"data-dd-privacy":"allow",children:l.jsx(a.DialogContext.Provider,{value:{"aria-describedby":o},children:l.jsx(a.Dialog,{role:D(t)?"alertdialog":"dialog","aria-modal":"true",className:c(),"aria-label":y["aria-label"],"aria-describedby":o,children:t})})})})}n.displayName="Dialog";a.DialogTrigger.displayName="DialogTrigger";Object.defineProperty(exports,"DialogTrigger",{enumerable:!0,get:()=>a.DialogTrigger});exports.Dialog=n;exports.dialog=u;