@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

package/dist/esm/components/number-input/NumberInput.d.ts

@@ -0,0 +1,140 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ReactElement } from 'react';
+import { NumberFieldProps } from 'react-aria-components';
+export declare const numberInput: import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    input: string[];
+    prefix: string[];
+    suffix: string[];
+    state: string[];
+    controls: string[];
+}, undefined, {
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    input: string[];
+    prefix: string[];
+    suffix: string[];
+    state: string[];
+    controls: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    input: string[];
+    prefix: string[];
+    suffix: string[];
+    state: string[];
+    controls: string[];
+}, undefined, unknown, unknown, undefined>>;
+type StyleWithoutCurrency = Exclude<Intl.NumberFormatOptions['style'], 'currency'>;
+interface FormatOptions extends Omit<Intl.NumberFormatOptions, 'currency' | 'style'> {
+    style?: StyleWithoutCurrency;
+}
+export interface NumberProps extends VariantProps<typeof numberInput>, Omit<NumberFieldProps, 'className' | 'style' | 'formatOptions' | 'children'> {
+    withControls?: boolean;
+    /** Element to display before the input field */
+    prefix?: ReactElement;
+    /** Element to display after the input field */
+    suffix?: ReactElement;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /**
+     * Clear button click handler
+     */
+    onClearButtonPress?: () => void;
+    /** Format options for the number input */
+    formatOptions?: FormatOptions;
+}
+/**
+ * The `NumberInput` component renders an input field specifically designed for numeric values. It provides features like
+ * increment/decrement controls, formatting options, and various states including loading, invalid, disabled, and read-only.
+ * The component supports prefix and suffix elements, clear button functionality, and can be integrated with form validation.
+ * @param {NumberProps} props - The props for the `NumberInput` component
+ * @example
+ * ```tsx
+ * import { NumberInput } from '@payfit/unity-components'
+ *
+ * // Basic usage
+ * <NumberInput aria-label="Amount" />
+ *
+ * // With controls and formatting
+ * <NumberInput
+ *   withControls
+ *   minValue={0}
+ *   maxValue={1000}
+ *   step={10}
+ *   formatOptions={{
+ *     minimumFractionDigits: 2,
+ *     maximumFractionDigits: 2
+ *   }}
+ *   aria-label="Amount"
+ * />
+ *
+ * // With prefix
+ * <NumberInput
+ *   prefix={<Icon src="CurrencyEuroOutlined" size={20} />}
+ *   aria-label="Amount"
+ * />
+ * ```
+ * @see {@link NumberProps} for all available props
+ * @remarks {@link https://www.payfit.design/24f360409/p/545bd2-number-field|Design docs}
+ */
+declare const NumberInput: import('react').ForwardRefExoticComponent<NumberProps & import('react').RefAttributes<HTMLInputElement>>;
+export { NumberInput };

package/dist/esm/components/number-input/NumberInput.js

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

package/dist/esm/components/page/Page.d.ts

@@ -0,0 +1,55 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+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", {
+    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", 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/esm/components/page/Page.js

@@ -0,0 +1,44 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+const o = t({
+  base: "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400",
+  variants: {
+    variant: {
+      default: [
+        "uy:px-200 uy:py-300 uy:md:p-300 uy:lg:p-400",
+        // a tiny margin left so the shadow is visible
+        "uy:md:ml-100",
+        "uy:bg-surface-neutral uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:border-r-0 uy:md:rounded-tl-400 uy:md:rounded-bl-400 uy:md:shadow-raising"
+      ],
+      legacy__midnight: [
+        "uy:bg-transparent",
+        "uy:md:mt-250 uy:md:mr-300",
+        "uy:md:ml-100"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), l = m(
+  ({ children: r, variant: a, ...d }, u) => {
+    const e = o({ variant: a });
+    return /* @__PURE__ */ y(
+      "main",
+      {
+        ...d,
+        ref: u,
+        className: e,
+        "data-dd-privacy": "allow",
+        "data-unity-page": a,
+        children: r
+      }
+    );
+  }
+);
+l.displayName = "Page";
+export {
+  l as Page,
+  o as page
+};

package/dist/esm/components/page/parts/PageHeader.d.ts

@@ -0,0 +1,82 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren, ReactNode } from 'react';
+import { BreadcrumbProps } from '../../breadcrumbs/parts/Breadcrumb.js';
+export declare const pageHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: 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, 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/esm/components/page/parts/PageHeader.js

@@ -0,0 +1,34 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+import { Breadcrumbs as n } from "../../breadcrumbs/Breadcrumbs.js";
+import { Breadcrumb as y } from "../../breadcrumbs/parts/Breadcrumb.js";
+const x = u({
+  slots: {
+    base: "uy:flex uy:flex-col uy:gap-400",
+    headingActionsWrapper: "uy:flex uy:flex-col uy:gap-400 uy:md:flex-row",
+    titles: "uy:flex uy:flex-col uy:gap-100 uy:flex-1",
+    actions: "uy:flex uy:flex-row uy:gap-100"
+  }
+}), g = p(
+  ({ children: s, actions: a, pagePath: r, ...i }, c) => {
+    const {
+      base: d,
+      titles: t,
+      headingActionsWrapper: f,
+      actions: m
+    } = x();
+    return /* @__PURE__ */ o("header", { "data-dd-privacy": "allow", ...i, ref: c, className: d(), children: [
+      r && /* @__PURE__ */ e(n, { items: r, wrap: "nowrap", children: (l) => /* @__PURE__ */ e(y, { href: l.href, label: l.label }) }),
+      /* @__PURE__ */ o("div", { className: f(), children: [
+        /* @__PURE__ */ e("div", { className: t(), children: s }),
+        a && /* @__PURE__ */ e("div", { className: m(), children: a })
+      ] })
+    ] });
+  }
+);
+g.displayName = "PageHeader";
+export {
+  g as PageHeader,
+  x as pageHeader
+};

package/dist/esm/components/page/parts/PageHeading.d.ts

@@ -0,0 +1,30 @@
+import { TextProps } from '../../text/Text.js';
+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 };

package/dist/esm/components/page/parts/PageHeading.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { Text as n } from "../../text/Text.js";
+const i = a(
+  ({ variant: t, ...e }, o) => /* @__PURE__ */ r(
+    n,
+    {
+      "data-dd-privacy": "mask",
+      ...e,
+      ref: o,
+      variant: t === "title" ? "h1" : "subtitle",
+      color: t === "title" ? "content.neutral" : "content.neutral.low"
+    }
+  )
+);
+i.displayName = "PageHeading";
+export {
+  i as PageHeading
+};