@payfit/unity-components 0.0.0-alpha.12 → 0.0.0-alpha.13

package/dist/esm/components/definition-tooltip/DefinitionTooltip.js

@@ -0,0 +1,29 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { Focusable as u } from "react-aria-components";
+import { tv as l } from "tailwind-variants";
+import { Text as f } from "../text/Text.js";
+import { Tooltip as s } from "../tooltip/Tooltip.js";
+const a = l({
+  base: [
+    "uy-text-content-neutral-enabled uy-rounded-50 uy-py-75",
+    "hover:uy-text-content-neutral-hover",
+    "active:uy-text-content-neutral-active",
+    "focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"
+  ]
+}), c = r(
+  ({ children: t, title: i, asElement: e = "span", ...n }, m) => /* @__PURE__ */ o(s, { title: i, ...n, children: /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
+    f,
+    {
+      variant: "actionInfo",
+      asElement: e,
+      role: "button",
+      className: a(),
+      children: t
+    }
+  ) }) })
+);
+c.displayName = "DefinitionTooltip";
+export {
+  c as DefinitionTooltip
+};

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.d.ts

@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
 import { ButtonProps } from '../../../button/Button.js';
 type ButtonVariant = 'close' | 'confirm' | 'danger';
 type OnPressParameters = Parameters<NonNullable<ButtonProps['onPress']>>[0];
-export type DialogButtonProps<T extends ButtonVariant> = {
+export type DialogButtonProps<T extends ButtonVariant> = Omit<ButtonProps, 'variant' | 'color'> & {
     /** the different variants for the button */
     variant: T;
     /** the icon, it is a discouraged practice, except for `danger` variant which has a `WarningCircleOutlined` as default */
@@ -16,7 +16,7 @@ export type DialogButtonProps<T extends ButtonVariant> = {
  *
  */
 declare const DialogButton: {
-    <T extends ButtonVariant>({ children, variant, onPress, isLoading, icon, }: PropsWithChildren<DialogButtonProps<T>>): import("react/jsx-runtime").JSX.Element | undefined;
+    <T extends ButtonVariant>({ children, variant, onPress, isLoading, icon, ...props }: PropsWithChildren<DialogButtonProps<T>>): import("react/jsx-runtime").JSX.Element | undefined;
     displayName: string;
 };
 export { DialogButton };

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.js

@@ -1,59 +1,63 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useContext as c } from "react";
-import { OverlayTriggerStateContext as f } from "react-aria-components";
-import { Button as n } from "../../../button/Button.js";
-const u = ({
-  children: o,
+import { jsx as n } from "react/jsx-runtime";
+import { useContext as p } from "react";
+import { OverlayTriggerStateContext as u } from "react-aria-components";
+import { Button as m } from "../../../button/Button.js";
+const l = ({
+  children: e,
   variant: s,
   onPress: r,
-  isLoading: m,
-  icon: e
+  isLoading: c,
+  icon: o,
+  ...a
 }) => {
-  const a = c(f);
+  const i = p(u);
   switch (s) {
     case "close":
-      const p = r;
-      return /* @__PURE__ */ i(
-        n,
+      const f = r;
+      return /* @__PURE__ */ n(
+        m,
         {
-          prefixIcon: e,
+          ...a,
+          prefixIcon: o,
           variant: "secondary",
           onPress: (t) => {
-            p && p(t), a == null || a.close();
+            f && f(t), i == null || i.close();
           },
-          children: o
+          children: e
         }
       );
     case "confirm":
-      return /* @__PURE__ */ i(
-        n,
+      return /* @__PURE__ */ n(
+        m,
         {
-          prefixIcon: e,
+          ...a,
+          prefixIcon: o,
           variant: "primary",
-          isLoading: m,
+          isLoading: c,
           onPress: (t) => {
             r && r(t);
           },
-          children: o
+          children: e
         }
       );
     case "danger":
-      return /* @__PURE__ */ i(
-        n,
+      return /* @__PURE__ */ n(
+        m,
         {
+          ...a,
           variant: "primary",
           color: "danger",
-          isLoading: m,
-          prefixIcon: e ?? "WarningCircleOutlined",
+          isLoading: c,
+          prefixIcon: o ?? "WarningCircleOutlined",
           onPress: (t) => {
             r && r(t);
           },
-          children: o
+          children: e
         }
       );
   }
 };
-u.displayName = "DialogButton";
+l.displayName = "DialogButton";
 export {
-  u as DialogButton
+  l as DialogButton
 };

package/dist/esm/components/icon-button/CircularIconButton.d.ts

@@ -10,9 +10,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
         default: string;
@@ -22,9 +19,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, {
     size: {
         default: string;
@@ -34,9 +28,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }>, {
     size: {
         default: string;
@@ -46,9 +37,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
         default: string;
@@ -58,9 +46,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
         default: string;
@@ -70,9 +55,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }, {
     size: {
         default: string;
@@ -82,9 +64,6 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         'content.neutral': string;
         'content.neutral.low': string;
     };
-    isDisabled: {
-        false: string;
-    };
 }>, unknown, unknown, undefined>>;
 export interface CircularIconButtonProps extends Omit<AriaButtonProps, 'className'>, VariantProps<typeof circularIconButton> {
     icon: UnityIcon;

package/dist/esm/components/icon-button/CircularIconButton.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Button as g, Pressable as x } from "react-aria-components";
+import { Button as v, Pressable as x } from "react-aria-components";
 import { tv as w } from "tailwind-variants";
 import z from "../../hooks/use-id.js";
 import { Icon as d } from "../icon/Icon.js";
@@ -11,7 +11,7 @@ const I = w({
     "active:uy-bg-surface-neutral-active",
     "data-[pressed]:uy-bg-surface-neutral-pressed",
     "focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",
-    "aria-disabled:uy-cursor-not-allowed aria-disabled:uy-text-content-neutral-disabled",
+    "data-[disabled]:uy-cursor-not-allowed data-[disabled]:uy-text-content-neutral-disabled",
     "aria-busy:uy-text-content-neutral-disabled aria-busy:uy-cursor-progress"
   ],
   variants: {
@@ -22,9 +22,6 @@ const I = w({
     color: {
       "content.neutral": "uy-text-content-neutral",
       "content.neutral.low": "uy-text-content-neutral-low"
-    },
-    isDisabled: {
-      false: "hover:uy-bg-surface-neutral-hover"
     }
   },
   defaultVariants: {
@@ -32,40 +29,40 @@ const I = w({
     color: "content.neutral"
   }
 });
-function N(f) {
-  const m = z(), {
+function N(m) {
+  const f = z(), {
     onPress: o,
     icon: s,
     color: p,
-    size: i,
-    isLoading: r,
+    size: l,
+    isLoading: t,
     title: a,
-    isDisabled: t,
+    isDisabled: i,
     asElement: h = "default",
-    className: v,
+    className: g,
     ...n
-  } = f, l = `icon-button-label-${m}`, u = I({ class: v, color: p, size: i, isDisabled: t });
+  } = m, r = `icon-button-label-${f}`, u = I({ class: g, color: p, size: l });
   return h === "button" ? /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ c(
-    g,
+    v,
     {
       "data-dd-privacy": "allow",
       ...n,
       onPress: o,
-      isDisabled: t || r,
-      "aria-labelledby": l,
-      "aria-busy": r,
+      isDisabled: i || t,
+      "aria-labelledby": r,
+      "aria-busy": t,
       className: u,
       children: [
-        r ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+        t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
           d,
           {
             src: s,
-            size: i === "large" ? 24 : 20,
+            size: l === "large" ? 24 : 20,
             color: "inherit",
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: l, className: "uy-sr-only", children: a })
+        /* @__PURE__ */ e("span", { id: r, className: "uy-sr-only", children: a })
       ]
     }
   ) }) : /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ e(
@@ -74,20 +71,20 @@ function N(f) {
       "data-dd-privacy": "allow",
       ...n,
       onPress: o,
-      isDisabled: t || r,
-      "aria-labelledby": l,
-      "aria-busy": r,
-      children: /* @__PURE__ */ c("div", { role: "button", "aria-disabled": t, className: u, children: [
-        r ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+      isDisabled: i || t,
+      "aria-labelledby": r,
+      "aria-busy": t,
+      children: /* @__PURE__ */ c("div", { role: "button", "aria-disabled": i, className: u, children: [
+        t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
           d,
           {
             src: s,
-            size: i === "large" ? 24 : 20,
+            size: l === "large" ? 24 : 20,
             color: "inherit",
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: l, className: "uy-sr-only", children: a })
+        /* @__PURE__ */ e("span", { id: r, className: "uy-sr-only", children: a })
       ] })
     }
   ) });

package/dist/esm/components/icon-button/IconButton.d.ts

@@ -7,7 +7,7 @@ interface IconButtonBaseProps {
     /** The icon to display inside the button */
     icon: UnityIcon;
     /** The function to trigger when the button is clicked */
-    onClick: () => void;
+    onClick?: () => void;
     /** Override the icon role */
     iconRole?: AriaRole;
     /** className to add to the button */

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", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-flex-col uy-gap-100", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, 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,216 @@
+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, import('tailwind-variants/dist/config.js').TVConfig<{
+    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;
+        };
+    };
+}, {
+    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;
+        };
+    };
+}>, {
+    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, import('tailwind-variants/dist/config.js').TVConfig<{
+    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;
+        };
+    };
+}, {
+    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;
+        };
+    };
+}>, 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 };