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

package/dist/esm/components/nav/parts/NavGroup.js

@@ -0,0 +1,105 @@
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import s, { useState as G, useCallback as j } from "react";
+import { Button as B } from "react-aria-components";
+import { twMerge as D } from "tailwind-merge";
+import { tv as _ } from "tailwind-variants";
+import $ from "../../../hooks/use-id.js";
+import { Icon as k } from "../../icon/Icon.js";
+import { navItemBase as z } from "./NavItem.js";
+const H = _({
+  extend: z,
+  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 M({
+  children: y,
+  label: p,
+  prefix: i,
+  suffix: m,
+  defaultExpanded: f = !1,
+  isExpanded: l,
+  onToggle: n,
+  ...x
+}) {
+  const u = $(), [h, b] = G(f), r = l !== void 0, e = r ? l : h, v = j(() => {
+    r || b((t) => !t), n == null || n(!e);
+  }, [r, e, n]), N = s.Children.map(y, (t) => s.isValidElement(t) ? s.cloneElement(t, { isDisabled: !e, level: 1 }) : t), c = `${u}-toggle`, d = `${u}-content`, {
+    base: I,
+    prefix: g,
+    label: w,
+    suffix: E,
+    content: S,
+    contentWrapper: C,
+    caret: W
+  } = H({ level: 0, expanded: e });
+  return /* @__PURE__ */ o("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+    /* @__PURE__ */ o(
+      B,
+      {
+        id: c,
+        className: D(I(), "uy:w-full"),
+        onPress: v,
+        "aria-expanded": e,
+        "aria-controls": d,
+        ...x,
+        children: [
+          i && /* @__PURE__ */ a("span", { className: g(), children: i({ isExpanded: e }) }),
+          /* @__PURE__ */ a("span", { className: w(), children: p }),
+          /* @__PURE__ */ o("span", { className: E(), role: "presentation", children: [
+            m,
+            /* @__PURE__ */ a(
+              k,
+              {
+                src: "CaretDownOutlined",
+                alt: "expand group",
+                size: 20,
+                className: W(),
+                color: "inherit"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: C(),
+        style: { maxHeight: e ? 1e3 : 0 },
+        children: /* @__PURE__ */ a(
+          "ul",
+          {
+            id: d,
+            className: S(),
+            "aria-labelledby": c,
+            "aria-hidden": !e,
+            children: N
+          }
+        )
+      }
+    )
+  ] });
+}
+M.displayName = "NavGroup";
+export {
+  M as NavGroup
+};

package/dist/esm/components/nav/parts/NavItem.d.ts

@@ -0,0 +1,164 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { DataAttributes } from '../../../types/DataAttributes.js';
+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, {
+    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, unknown, unknown, undefined>>;
+declare const navItem: import('tailwind-variants').TVReturnType<{
+    isActive: {
+        true: {
+            base: string;
+            prefix: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            prefix: string;
+            label: string;
+        };
+    };
+}, undefined, undefined, {
+    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, {
+    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, 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/esm/components/nav/parts/NavItem.js

@@ -0,0 +1,96 @@
+import { jsx as u, jsxs as h } from "react/jsx-runtime";
+import { Link as w, Button as N } from "react-aria-components";
+import { twMerge as I } from "tailwind-merge";
+import { tv as l } from "tailwind-variants";
+import { useRouter as j } from "../../../providers/router/RouterProvider.js";
+const A = l({
+  slots: {
+    base: [
+      "uy:group 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 uy:transition-all",
+      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-active uy:data-[pressed]:bg-surface-neutral-pressed",
+      "uy:focus:outline-0 uy:data-[focus-visible]:outline-none uy:data-[focus-visible]:ring-2 uy:data-[focus-visible]:ring-utility-focus-ring uy:data-[focus-visible]:ring-offset-2"
+    ],
+    prefix: "uy:p-25 uy:empty:hidden uy:text-content-neutral-low",
+    suffix: "uy:flex uy:gap-100 uy:items-center uy:text-content-neutral-low uy:justify-self-end uy:text-right uy:empty:hidden",
+    label: [
+      "uy:flex-1 uy:basis-full uy:text-left uy:truncate uy:overflow-hidden uy:whitespace-break-spaces uy:typography-body uy:text-content-neutral"
+    ]
+  },
+  variants: {
+    level: {
+      0: "uy:pl-150",
+      1: "uy:pl-600"
+    },
+    isDisabled: {
+      true: {
+        base: "uy:pointer-events-none",
+        label: "uy:text-content-neutral-disabled"
+      },
+      false: ""
+    }
+  }
+}), S = l({
+  extend: A,
+  variants: {
+    isActive: {
+      true: {
+        base: "uy:bg-surface-neutral-active",
+        prefix: "uy:text-content-neutral",
+        label: "uy:typography-body-strong"
+      },
+      false: {
+        base: "",
+        prefix: "uy:text-content-neutral-low",
+        label: "uy:typography-body"
+      }
+    }
+  }
+});
+function k({
+  children: y,
+  level: s = 0,
+  prefix: n,
+  suffix: r,
+  onPress: c,
+  href: e,
+  isCurrent: p,
+  isDisabled: a = !1,
+  isExact: f = !1,
+  ...d
+}) {
+  const i = j(), b = e ? w : N, t = i && e ? i.isActive(e.toString(), f) : p, {
+    base: v,
+    label: o,
+    prefix: m,
+    suffix: g
+  } = S({ level: s, isActive: t, isDisabled: a }), x = Object.assign(
+    {},
+    t !== void 0 && {
+      "data-current": t,
+      "aria-current": t ? "page" : void 0
+    },
+    !e && { tabIndex: a ? -1 : void 0 }
+  );
+  return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ h(
+    b,
+    {
+      className: I(v(), o()),
+      href: e,
+      onPress: c,
+      isDisabled: a,
+      "data-level": s,
+      ...x,
+      ...d,
+      children: [
+        n && /* @__PURE__ */ u("span", { className: m(), children: n({ isCurrent: t ?? !1 }) }),
+        /* @__PURE__ */ u("span", { className: o(), children: y }),
+        r && /* @__PURE__ */ u("span", { className: g(), children: r })
+      ]
+    }
+  ) });
+}
+k.displayName = "NavItem";
+export {
+  k as NavItem,
+  A as navItemBase
+};

package/dist/esm/components/number-field/NumberField.d.ts

@@ -0,0 +1,47 @@
+import { ForwardedRef, JSX, 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 { LabelProps } from '../label/Label.js';
+import { NumberProps } from '../number-input/NumberInput.js';
+export declare const numberField: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-100", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-100", unknown, unknown, undefined>>;
+export interface NumberFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<NumberProps, 'name'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the text field. */
+    label: string;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the text field. */
+    feedbackText?: ReactNode;
+    /** A contextual link to display below the text field. */
+    contextualLink?: ReactNode;
+}
+type NumberFieldComponent = (<TSchema extends Schema>(props: NumberFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * NumberField is a form control component that combines a number input with form field functionality.
+ * It integrates with React Hook Form and provides features like validation, labels, helper text, and feedback.
+ * @template TFieldValues - The type of the form values
+ * @template TName - The type of the field name (must be a key of TFieldValues)
+ * @example
+ * ```tsx
+ * import { NumberField } from '@payfit/unity-components'
+ *
+ * <NumberField
+ *   name="age"
+ *   label="Age"
+ *   helperText="Enter your age in years"
+ *   isRequired
+ * />
+ * ```
+ * @template TSchema - The Zod schema type for form validation
+ * @param {NumberFieldProps<ZodInfer<TSchema>>} props - The props for the NumberField component
+ * @param {ForwardedRef<HTMLInputElement>} ref - Ref forwarded to the underlying input element
+ * @returns {JSX.Element} A NumberField component
+ */
+declare const NumberField: NumberFieldComponent;
+export { NumberField };

package/dist/esm/components/number-field/NumberField.js

@@ -0,0 +1,71 @@
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { useFormContext as I } from "react-hook-form";
+import { tv as j } from "tailwind-variants";
+import { FormField as B } from "../form-field/FormField.js";
+import { FormControl as P } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as T } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as g } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as k } from "../form-field/parts/FormLabel.js";
+import { NumberInput as v } from "../number-input/NumberInput.js";
+const w = j({
+  base: "uy:flex uy:flex-col uy:gap-100"
+});
+function H({
+  name: o,
+  label: e,
+  defaultValue: t,
+  helperText: m,
+  feedbackText: n,
+  contextualLink: i,
+  isRequired: l,
+  isInvalid: s,
+  isLoading: u,
+  isDisabled: c,
+  isReadOnly: p,
+  requiredVariant: f,
+  onClearButtonPress: d,
+  ...a
+}, F) {
+  const { control: b, setValue: x } = I(), N = {
+    isRequired: l,
+    isInvalid: s,
+    isLoading: u,
+    isDisabled: c,
+    isReadOnly: p
+  }, h = d ?? (() => {
+    x(o, NaN);
+  });
+  return /* @__PURE__ */ y(
+    B,
+    {
+      control: b,
+      name: o,
+      className: w(),
+      ...N,
+      children: [
+        /* @__PURE__ */ r(k, { requiredVariant: f, children: e }),
+        m && /* @__PURE__ */ r(g, { children: m }),
+        /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(
+          v,
+          {
+            ref: F,
+            onClearButtonPress: h,
+            defaultValue: t,
+            ...a
+          }
+        ) }),
+        /* @__PURE__ */ r(T, { children: n }),
+        i
+      ]
+    }
+  );
+}
+const L = C(function(e, t) {
+  return H(e, t);
+});
+L.displayName = "NumberField";
+export {
+  L as NumberField,
+  w as numberField
+};

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

@@ -0,0 +1,140 @@
+import { ReactElement } from 'react';
+import { NumberFieldProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+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<HTMLDivElement>>;
+export { NumberInput };