@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/multi-select/parts/MultiSelectOption.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),r=require("@ariakit/react"),p=require("tailwind-variants"),v=require("../../../hooks/use-id.cjs"),m=require("../../checkbox/parts/CheckboxIndicator.cjs"),h=require("../Multiselect.context.cjs"),S=p.tv({slots:{base:["uy-flex uy-flex-col uy-transition","uy-w-full uy-px-150 uy-py-100","uy-rounded-50 uy-cursor-pointer","hover:uy-bg-surface-neutral-hover","active:uy-bg-surface-neutral-pressed","focus-visible:uy-outline focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2","data-[active-item=true]:uy-outline data-[active-item=true]:uy-outline-2 data-[active-item=true]:uy-outline-utility-focus-ring data-[active-item=true]:uy-outline-offset-2"],label:"uy-inline-flex uy-items-center uy-gap-100 uy-text-content-neutral uy-typography-body",helperText:"uy-inline-block uy-typography-body uy-text-content-neutral-low uy-pl-300"},variants:{isDisabled:{true:{base:"!uy-cursor-not-allowed",label:"uy-text-content-neutral-disabled"},false:{base:""}}}});function g({isDisabled:u}){return e.jsx(r.SelectItemCheck,{render:t=>e.jsx(m.CheckboxIndicator,{isSelected:"children"in t&&!!t.children,isDisabled:u,"data-dd-privacy":"hidden"})})}function a({value:u,children:t,isDisabled:n,helperText:o,autoFocus:s=!1,...c},y){const i=v(),d=l.useContext(h.MultiSelectContext),{base:b,label:f,helperText:x}=S({isDisabled:n});return l.createElement(r.SelectItem,{"data-dd-privacy":"mask",...c,ref:y,id:i,key:i,value:String(u),disabled:n,className:b(),autoFocus:s,focusOnHover:!1,"aria-describedby":o?`${i}-helper-text`:void 0,render:d.isSearchable?e.jsx(r.ComboboxItem,{}):void 0},e.jsxs("div",{className:f(),children:[e.jsx(g,{isDisabled:n}),t]}),o&&e.jsx("span",{id:`${i}-helper-text`,className:x(),children:o}))}a.displayName="MultiSelectOption";const C=l.forwardRef(a);exports.MultiSelectOption=C;

package/dist/cjs/components/multi-select/parts/MultiSelectOption.d.cts

@@ -0,0 +1,20 @@
+import { default as React, ReactNode } from 'react';
+/**
+ * Props for the MultiSelectOption component.
+ * @template T - The type of the value this option represents (string or number)
+ */
+export interface MultiSelectOptionProps<T> {
+    /** The value associated with this option. Must be unique within the MultiSelect */
+    value: T;
+    /** The content to display for this option */
+    children: ReactNode;
+    /** Whether the option is disabled. When true, the option cannot be selected */
+    isDisabled?: boolean;
+    /** Whether the option should receive focus when rendered. Use sparingly */
+    autoFocus?: boolean;
+    /** Additional text displayed below the option to provide more context */
+    helperText?: string;
+}
+export declare const MultiSelectOption: <T>(props: MultiSelectOptionProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/cjs/components/multi-select/parts/MultiSelectPopover.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),t=require("@ariakit/react"),i=require("tailwind-variants"),f=require("../../icon/Icon.cjs"),x=require("../Multiselect.context.cjs"),v=i.tv({slots:{base:"uy-shadow-floating uy-absolute uy-top-full uy-left-0 uy-z-50 uy-w-full uy-rounded-75 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-overflow-auto uy-max-h-[min(var(--popover-available-height,300px),300px)] uy-outline-none",list:"uy-p-100"}}),h=i.tv({slots:{wrapper:"uy-sticky uy-top-0 uy-bg-surface-neutral uy-pt-100 uy-px-100",base:"uy-flex uy-w-full uy-gap-100 uy-h-500 uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-border-border-form-enabled uy-bg-surface-form-enabled uy-px-150 uy-typography-body 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",input:"focus-visible:uy-outline-none",divider:"uy-my-100 uy-border-t uy-border-border-neutral"}});function g({children:r,...l}){const a=s.useContext(x.MultiSelectContext),{base:c,list:u}=v(),{base:y,input:d,wrapper:b,divider:p}=h(),{onBlur:o,...m}=l;return e.jsx(t.SelectPopover,{portal:!0,sameWidth:!0,unmountOnHide:!0,className:c(),onClose:()=>o==null?void 0:o(),...m,children:a.isSearchable?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:b(),children:[e.jsxs("div",{className:y(),children:[e.jsx(f.Icon,{src:"MagnifyingGlassOutlined",color:"content.neutral.lowest","aria-hidden":!0}),e.jsx(t.Combobox,{autoSelect:!0,placeholder:"Search...",className:d()})]}),e.jsx("hr",{className:p()})]}),e.jsx(t.ComboboxList,{className:u(),children:r})]}):e.jsx("div",{className:u(),children:r})})}const n=s.memo(g);n.displayName="MultiSelectPopover";exports.MultiSelectPopover=n;

package/dist/cjs/components/multi-select/parts/MultiSelectPopover.d.cts

@@ -0,0 +1,7 @@
+import { SelectPopoverProps } from '@ariakit/react';
+type MultiSelectPopoverProps = SelectPopoverProps & {
+    onBlur?: () => void;
+};
+declare function MultiSelectPopoverComponent({ children, ...props }: MultiSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectPopover: import('react').MemoExoticComponent<typeof MultiSelectPopoverComponent>;
+export {};

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

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

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

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

package/dist/cjs/components/nav/Nav.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../hooks/use-id.cjs");function a({children:s,title:u,...n}){const l=`nav-title-${t()}`;return e.jsxs("nav",{...n,className:"uy-flex uy-flex-col uy-gap-50 uy-min-w-[264px]","aria-labelledby":l,children:[e.jsx("h3",{id:l,className:"uy-typography-body-strong uy-py-100 uy-px-150",children:u}),e.jsx("ul",{className:"uy-flex uy-flex-col uy-gap-50 uy-list-none",children:s})]})}a.displayName="Nav";exports.Nav=a;

package/dist/cjs/components/nav/Nav.d.cts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export type NavProps = PropsWithChildren<Pick<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-describedby' | 'aria-labelledby' | 'aria-hidden' | 'aria-live'> & {
+    /** The title of the navigation menu. */
+    title?: string;
+}>;
+/**
+ * The `Nav` component represents a vertical navigation menu with optional title and navigation items of multiple types.
+ */
+export declare function Nav({ children, title, ...rest }: NavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Nav {
+    var displayName: string;
+}

package/dist/cjs/components/nav/parts/NavGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),G=require("react-aria-components"),W=require("tailwind-merge"),D=require("tailwind-variants"),M=require("../../../hooks/use-id.cjs"),R=require("../../icon/Icon.cjs"),_=require("./NavItem.cjs"),B=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},o=B(i),O=D.tv({extend:_.navItemBase,slots:{caret:"uy-transition-transform uy-duration-150 uy-delay-25 uy-ease-linear motion-reduce:transition-none",contentWrapper:"uy-transition-[max-height] uy-duration-200 uy-ease-linear motion-reduce:transition-none",content:"uy-list-none uy-flex uy-flex-col uy-gap-50 uy-transition-opacity uy-duration-150 uy-delay-25 uy-ease-linear"},variants:{expanded:{true:{caret:"uy-rotate-180",contentWrapper:"uy-max-h-[1000px] uy-overflow-visible",label:"uy-typography-body-strong",content:"uy-opacity-100 uy-visible"},false:{caret:"uy-rotate-0",contentWrapper:"uy-max-h-0 uy-overflow-hidden",content:"uy-opacity-0 uy-invisible uy-pointer-events-none",label:"uy-typography-body"}}}});function p({children:n,label:x,prefix:l,suffix:f,defaultExpanded:m=!1,isExpanded:u,onToggle:s,...b}){const c=M(),[v,h]=i.useState(m),r=u!==void 0,e=r?u:v,N=i.useCallback(()=>{r||h(a=>!a),s==null||s(!e)},[r,e,s]),j=o.default.Children.map(n,a=>o.default.isValidElement(a)?o.default.cloneElement(a,{isDisabled:!e,level:1}):a),d=`${c}-toggle`,y=`${c}-content`,{base:g,prefix:q,label:I,suffix:w,content:S,contentWrapper:C,caret:E}=O({level:0,expanded:e});return t.jsxs("li",{className:"uy-flex uy-flex-col uy-gap-50",children:[t.jsxs(G.Button,{id:d,className:W.twMerge(g(),"uy-w-full"),onPress:N,"aria-expanded":e,"aria-controls":y,...b,children:[l&&t.jsx("span",{className:q(),children:l({isExpanded:e})}),t.jsx("span",{className:I(),children:x}),t.jsxs("span",{className:w(),role:"presentation",children:[f,t.jsx(R.Icon,{src:"CaretDownOutlined",alt:"expand group",size:20,className:E(),color:"inherit"})]})]}),t.jsx("div",{className:C(),style:{maxHeight:e?1e3:0},children:t.jsx("ul",{id:y,className:S(),"aria-labelledby":d,"aria-hidden":!e,children:j})})]})}p.displayName="NavGroup";exports.NavGroup=p;

package/dist/cjs/components/nav/parts/NavGroup.d.cts

@@ -0,0 +1,30 @@
+import { default as React, ReactNode } from 'react';
+import { DataAttributes } from '../../../types/DataAttributes.cjs';
+import { NavItem, NavItemProps } from './NavItem.cjs';
+type NavGroupChildren = React.ReactElement<NavItemProps, typeof NavItem>;
+type NavGroupProps = {
+    /** The child elements to be rendered inside the NavGroup. They must be `<NavItem>` components. */
+    children: NavGroupChildren | NavGroupChildren[];
+    /** The label to show for the NavGroup. */
+    label: string;
+    /** The prefix element to be displayed before the label. It can be any valid React element. */
+    prefix?: ({ isExpanded }: {
+        isExpanded: boolean;
+    }) => ReactNode;
+    /** The suffix element to be displayed after the label.  It can be any valid React element. */
+    suffix?: ReactNode;
+    /** Whether the NavGroup is currently expanded. Use it to switch the component to a controlled mode. */
+    isExpanded?: boolean;
+    /** Whether the NavGroup is expanded by default. It only has effect in uncontrolled mode */
+    defaultExpanded?: boolean;
+    /** Callback function to be called when the NavGroup is expanded or collapsed. */
+    onToggle?: (isExpanded: boolean) => void;
+} & DataAttributes;
+/**
+ * The `NavGroup` component represents a tree of navigation items grouped under a single root element in a `Nav` component. It can be expanded or collapsed to show or hide its children.
+ */
+export declare function NavGroup({ children, label, prefix, suffix, defaultExpanded, isExpanded: controlledIsExpanded, onToggle, ...dataAttributes }: NavGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavGroup {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/nav/parts/NavItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react-aria-components"),I=require("tailwind-merge"),y=require("tailwind-variants"),w=require("../../../providers/router/RouterProvider.cjs"),c=y.tv({slots:{base:"uy-grid uy-w-full uy-grid-cols-[auto_1fr_auto] uy-items-center uy-py-100 uy-px-150 uy-gap-100 uy-rounded-75 uy-outline-0 hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed uy-transition-all focus:uy-outline-0 data-[focus-visible]:uy-outline-none data-[focus-visible]:uy-ring-2 data-[focus-visible]:uy-ring-utility-focus-ring data-[focus-visible]:uy-ring-offset-2",prefix:"uy-p-25 empty:uy-hidden",suffix:"uy-flex uy-gap-100 uy-items-center uy-justify-self-end uy-text-right empty:uy-hidden",label:"uy-flex-1 uy-basis-full uy-text-left uy-truncate uy-overflow-hidden uy-whitespace-break-spaces uy-typography-body"},variants:{level:{0:"uy-pl-150",1:"uy-pl-600"},isDisabled:{true:{base:"uy-pointer-events-none",label:"uy-text-content-neutral-disabled"},false:""}}}),q=y.tv({extend:c,variants:{isActive:{true:{base:"uy-bg-surface-neutral-active",label:"uy-typography-body-strong"},false:{base:"",label:"uy-typography-body"}}}});function d({children:f,level:u=0,prefix:i,suffix:n,onPress:p,href:e,isCurrent:v,isDisabled:s=!1,isExact:b=!1,...g}){const r=w.useRouter(),m=e?o.Link:o.Button,t=r&&e?r.isActive(e.toString(),b):v,{base:x,label:l,prefix:h,suffix:j}=q({level:u,isActive:t,isDisabled:s}),N=Object.assign({},t!==void 0&&{"data-current":t,"aria-current":t?"page":void 0},!e&&{tabIndex:s?-1:void 0});return a.jsx("li",{children:a.jsxs(m,{className:I.twMerge(x(),l()),href:e,onPress:p,isDisabled:s,"data-level":u,...N,...g,children:[i&&a.jsx("span",{className:h(),children:i({isCurrent:t??!1})}),a.jsx("span",{className:l(),children:f}),n&&a.jsx("span",{className:j(),children:n})]})})}d.displayName="NavItem";exports.NavItem=d;exports.navItemBase=c;

package/dist/cjs/components/nav/parts/NavItem.d.cts

@@ -0,0 +1,281 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { DataAttributes } from '../../../types/DataAttributes.cjs';
+export declare const navItemBase: import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const navItem: import('tailwind-variants').TVReturnType<{
+    isActive: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            label: string;
+        };
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isActive: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            label: string;
+        };
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string;
+    prefix: string;
+    suffix: string;
+    label: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWithChildren<{
+    /** The prefix element to be displayed before the label. */
+    prefix?: ({ isCurrent }: {
+        isCurrent: boolean;
+    }) => ReactNode;
+    /** The suffix element to be displayed after the label. */
+    suffix?: ReactNode;
+    /** The click event handler for the nav item. Use it when the item executes an action that  does not redirect to another page */
+    onPress?: AriaButtonProps['onPress'];
+    /** The URL to navigate to when the nav item is clicked. Use it when the item should trigger a navigation to another page */
+    href?: string;
+    /** Whether the nav item is currently active. */
+    isCurrent?: boolean;
+    /** Whether the nav item is disabled. */
+    isDisabled?: boolean;
+    /** Whether the nav item should exactly match the route's path. */
+    isExact?: boolean;
+}> & DataAttributes;
+/**
+ * The `NavItem` component represents a single, fully accessible navigation item in a `Nav` component, with support for custom elements at the start or the end of the element. It can render a link or a button depending on the provided properties.
+ */
+export declare function NavItem({ children, level, prefix, suffix, onPress, href, isCurrent, isDisabled, isExact, ...dataAttributes }: NavItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavItem {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/page/Page.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("react"),i=require("tailwind-variants"),e=i.tv({base:"uy-min-h-dvh uy-flex uy-flex-col uy-gap-400",variants:{variant:{default:["uy-px-200 uy-py-300 md:uy-p-300 lg:uy-p-400","md:uy-ml-100","uy-bg-surface-neutral md:uy-border md:uy-border-solid md:uy-border-border-neutral uy-border-r-0 md:uy-rounded-tl-400 md:uy-rounded-bl-400 md:uy-shadow-raising"],legacy__midnight:["uy-bg-transparent","md:uy-mt-250 md:uy-mr-300","md:uy-ml-100"]}},defaultVariants:{variant:"default"}}),r=l.forwardRef(({children:u,variant:a,...d},t)=>{const y=e({variant:a});return n.jsx("main",{...d,ref:t,className:y,"data-dd-privacy":"allow","data-unity-page":a,children:u})});r.displayName="Page";exports.Page=r;exports.page=e;

package/dist/cjs/components/page/Page.d.cts

@@ -0,0 +1,75 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const page: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, undefined, "uy-min-h-dvh uy-flex uy-flex-col uy-gap-400", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, {
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}>, {
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, undefined, "uy-min-h-dvh uy-flex uy-flex-col uy-gap-400", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, {
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}>, unknown, unknown, undefined>>;
+export interface PageProps extends PropsWithChildren {
+    /**
+     * The variant of the page.
+     * @default 'default'
+     * @remarks
+     * - `default` - The default variant is a standard page with a left-aligned header and a right-aligned footer.
+     * - `legacy__midnight` - The legacy__midnight variant is a page with a left-aligned header and a right-aligned footer.
+     */
+    variant: VariantProps<typeof page>['variant'];
+}
+/**
+ * The Page component provides a consistent layout container for page content with predefined spacing and styling.
+ *
+ * Use this component as the main container for your content to ensure a consistent look and feel across the application.
+ * It works seamlessly with PageHeader for structured page layouts and adapts to different screen sizes.
+ * @param {PageProps} props - Standard props from HTMLDivElement with additional variant option
+ * @see {@link PageProps} for all available props
+ * @example
+ * ```tsx
+ * import { Page, PageHeader, PageHeading } from '@payfit/unity-components'
+ *
+ * function MyPage() {
+ *   return (
+ *     <Page variant="default">
+ *       <PageHeader>
+ *         <PageHeading variant="title">My Page</PageHeading>
+ *       </PageHeader>
+ *       <div>Content goes here</div>
+ *     </Page>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/layout-page--docs) • [Design docs](https://www.payfit.design/24f360409/p/99b0ae-app-body)
+ */
+declare const Page: import('react').ForwardRefExoticComponent<PageProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Page };

package/dist/cjs/components/page/parts/PageHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),f=require("tailwind-variants"),p=require("../../breadcrumbs/Breadcrumbs.cjs"),g=require("../../breadcrumbs/parts/Breadcrumb.cjs"),l=f.tv({slots:{base:"uy-flex uy-flex-col uy-gap-400",headingActionsWrapper:"uy-flex uy-flex-col uy-gap-400 md:uy-flex-row",titles:"uy-flex uy-flex-col uy-gap-100 uy-flex-1",actions:"uy-flex uy-flex-row uy-gap-100"}}),c=x.forwardRef(({children:i,actions:a,pagePath:r,...t},d)=>{const{base:u,titles:n,headingActionsWrapper:o,actions:y}=l();return e.jsxs("header",{"data-dd-privacy":"allow",...t,ref:d,className:u(),children:[r&&e.jsx(p.Breadcrumbs,{items:r,wrap:"nowrap",children:s=>e.jsx(g.Breadcrumb,{href:s.href,label:s.label})}),e.jsxs("div",{className:o(),children:[e.jsx("div",{className:n(),children:i}),a&&e.jsx("div",{className:y(),children:a})]})]})});c.displayName="PageHeader";exports.PageHeader=c;exports.pageHeader=l;

package/dist/cjs/components/page/parts/PageHeader.d.cts

@@ -0,0 +1,100 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { BreadcrumbProps } from '../../breadcrumbs/parts/Breadcrumb.cjs';
+export declare const pageHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface PageHeaderProps extends PropsWithChildren<VariantProps<typeof pageHeader>> {
+    pagePath?: BreadcrumbProps[];
+    actions?: ReactNode;
+}
+/**
+ * The PageHeader component provides a consistent layout for page headers with title, subtitle, and actions support.
+ *
+ * It creates a structured header for pages with support for breadcrumbs navigation, title/subtitle content, and action buttons.
+ * The component adapts to different screen sizes, reorganizing elements for optimal display on mobile and desktop views.
+ * @param {PageHeaderProps} props - Props for the PageHeader component
+ * @example
+ * ```tsx
+ * import { PageHeader, PageHeading, Button } from '@payfit/unity-components'
+ *
+ * <PageHeader
+ *   pagePath={[
+ *     { href: '/dashboard', label: 'Dashboard' },
+ *     { href: '/employees', label: 'Employees' }
+ *   ]}
+ *   actions={
+ *     <>
+ *       <Button variant="secondary">Cancel</Button>
+ *       <Button variant="primary">Save</Button>
+ *     </>
+ *   }
+ * >
+ *   <PageHeading variant="title">Employee List</PageHeading>
+ *   <PageHeading variant="subtitle">View and manage your employees</PageHeading>
+ * </PageHeader>
+ * ```
+ * @see {@link PageHeaderProps} for all available props
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/layout-page-pageheader--docs) • [Design docs](https://www.payfit.design/24f360409/p/202477-page-header)
+ */
+declare const PageHeader: import('react').ForwardRefExoticComponent<PageHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { PageHeader };

package/dist/cjs/components/page/parts/PageHeading.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("react"),s=require("../../text/Text.cjs"),t=c.forwardRef(({variant:e,...a},n)=>{const r=e==="title"?"h1":"subtitle",o=e==="title"?"content.neutral":"content.neutral.low";return i.jsx(s.Text,{"data-dd-privacy":"mask",...a,ref:n,variant:r,color:o})});t.displayName="PageHeading";exports.PageHeading=t;