@payfit/unity-components 0.0.0-alpha.6 → 0.0.0-alpha.8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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/DatePicker.js

@@ -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.js"),W=require("./parts/DateCalendar.js"),R=require("./parts/DateInput.js"),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-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)},j=r=>{l==null||l(r),r?i==null||i():o==null||o()},k=r=>e.isDateUnavailable?e.isDateUnavailable(r):!1,V=()=>{d==null||d()};return a.jsxs(s.DatePicker,{...e,className:h(),value:f,defaultValue:b,minValue:e.minValue,maxValue:e.maxValue,isReadOnly:!!u,isDisabled:!!t,onChange:c,onFocus:i,onBlur:o,onOpenChange:j,isDateUnavailable:k,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/hooks/useMonthsList.d.ts

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

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

@@ -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/useYearsList.d.ts

@@ -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/hooks/useYearsList.js

@@ -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/parts/DateCalendar.d.ts

@@ -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/DateCalendar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),d=require("@internationalized/date"),t=require("react-aria-components"),G=require("tailwind-variants"),g=require("../../icon-button/IconButton.js"),I=require("../hooks/useMonthsList.js"),Y=require("../hooks/useYearsList.js"),f=require("./DateSegmentSelect.js"),B=G.tv({slots:{dialog:"uy-p-150",calendarWrapper:"uy-flex uy-flex-col uy-gap-150",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-0 uy-w-full",calendarHeaderCell:"uy-typography-body-strong uy-text-content-neutral-low uy-w-[44px] uy-h-[44px] uy-uppercase",calendarCell:["uy-typography-body uy-relative uy-text-content-form-enabled uy-w-[44px] uy-h-[44px] 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:n,...s}){const y=d.today(d.getLocalTimeZone()),[m,v]=h.useState(c??l??y),[o,i]=h.useState(c??l??y),C=I.useMonthsList(),p=Y.useYearsList({startYear:r==null?void 0:r.year,endYear:n==null?void 0:n.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(),children:e.jsx(t.Calendar,{...s,minValue:r,maxValue:n,value:m,defaultValue:l,onChange:a=>{v(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:C,value:o.month.toString(),onChange:D,isDisabled:s.isDisabled}),e.jsx(f.DateSegmentSelect,{type:"year",items:p,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":d.isToday(a,d.getLocalTimeZone())?!0:void 0,className:L()})})]})]})})})}x.displayName="DateCalendar";exports.DateCalendar=x;

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

@@ -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').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').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/DateInput.js

@@ -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.js"),j=require("../../icon/Icon.js"),h=require("../../spinner/Spinner.js"),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:form-field:form-input: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/DateSegmentSelect.d.ts

@@ -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/parts/DateSegmentSelect.js

@@ -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 c=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(),l=j.useIntl(),[h,b]=v.useState(c(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":"unity:component:form-field:date-picker:segment-select:year",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:l.formatMessage({id:f,defaultMessage:`Change current ${e}`})}),n.jsx("select",{id:u,value:i,onChange:t=>{g(t.target.value),b(c(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:l.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/utils.d.ts

@@ -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;