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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,30 +0,0 @@
-import { TextProps } from '../../text/Text.cjs';
-export interface PageHeadingProps extends Omit<TextProps, 'variant' | 'color'> {
-    /**
-     * The variant of the page heading.
-     * @default 'title'
-     */
-    variant: 'title' | 'subtitle';
-}
-/**
- * The PageHeading component provides typography for page titles and subtitles with consistent styling.
- *
- * You can create properly styled page titles and subtitles using this component, which ensures correct
- * font sizes, weights and colors according to the design system.
- * @param {PageHeadingProps} props - Props for the PageHeading component
- * @example
- * ```tsx
- * import { PageHeading } from '@payfit/unity-components'
- *
- * // For main page title
- * <PageHeading variant="title">Employee Management</PageHeading>
- *
- * // For page subtitle
- * <PageHeading variant="subtitle">View and manage employee information</PageHeading>
- * ```
- * @see {@link PageHeadingProps} for all available props
- * @remarks
- * [API](https://unity-components.payfit.io/?path=/docs/layout-page-pageheading--docs) • [Design docs](https://www.payfit.design/24f360409/p/202477-page-header)
- */
-declare const PageHeading: import('react').ForwardRefExoticComponent<PageHeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
-export { PageHeading };