@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/navigation-card/NavigationCard.variants.js

@@ -0,0 +1,164 @@
+import { uyTv as e } from "@payfit/unity-themes";
+const u = e({
+  slots: {
+    base: [
+      "uy:flex uy:flex-row uy:items-center",
+      "uy:rounded-lg uy:border-solid uy:border-1 uy:transition-colors uy:group",
+      "uy:cursor-pointer uy:disabled:cursor-not-allowed uy:aria-disabled:cursor-not-allowed",
+      "uy:bg-surface-neutral uy:border-border-neutral uy:text-content-neutral-low",
+      "uy:hover:bg-surface-neutral-hover uy:hover:border-border-neutral-hover",
+      "uy:active:bg-surface-neutral-pressed uy:active:border-border-neutral-pressed",
+      "uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:border-border-neutral-pressed",
+      "uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2",
+      "uy:disabled:bg-surface-neutral-disabled uy:disabled:border-border-neutral-disabled uy:aria-disabled:bg-surface-neutral-disabled uy:aria-disabled:border-border-neutral-disabled"
+    ],
+    prefix: ["uy:w-fit uy:contents uy:grow-0 uy:shrink-1"],
+    body: ["uy:flex-1 uy:space-y-50"],
+    suffix: ["uy:w-fit uy:grow-0 uy:shrink-1"]
+  },
+  variants: {
+    gap: {
+      $0: { base: "uy:gap-0" },
+      $25: { base: "uy:gap-25" },
+      $50: { base: "uy:gap-50" },
+      $75: { base: "uy:gap-75" },
+      $100: { base: "uy:gap-100" },
+      $125: { base: "uy:gap-125" },
+      $150: { base: "uy:gap-150" },
+      $200: { base: "uy:gap-200" },
+      $250: { base: "uy:gap-250" },
+      $300: { base: "uy:gap-300" },
+      $400: { base: "uy:gap-400" },
+      $500: { base: "uy:gap-500" },
+      $600: { base: "uy:gap-600" },
+      $800: { base: "uy:gap-800" },
+      $1000: { base: "uy:gap-1000" }
+    },
+    padding: {
+      $0: { base: "uy:p-0" },
+      $25: { base: "uy:p-25" },
+      $50: { base: "uy:p-50" },
+      $75: { base: "uy:p-75" },
+      $100: { base: "uy:p-100" },
+      $125: { base: "uy:p-125" },
+      $150: { base: "uy:p-150" },
+      $200: { base: "uy:p-200" },
+      $250: { base: "uy:p-250" },
+      $300: { base: "uy:p-300" },
+      $400: { base: "uy:p-400" },
+      $500: { base: "uy:p-500" },
+      $600: { base: "uy:p-600" },
+      $800: { base: "uy:p-800" },
+      $1000: { base: "uy:p-1000" }
+    },
+    paddingBlock: {
+      $0: { base: "uy:py-0" },
+      $25: { base: "uy:py-25" },
+      $50: { base: "uy:py-50" },
+      $75: { base: "uy:py-75" },
+      $100: { base: "uy:py-100" },
+      $125: { base: "uy:py-125" },
+      $150: { base: "uy:py-150" },
+      $200: { base: "uy:py-200" },
+      $250: { base: "uy:py-250" },
+      $300: { base: "uy:py-300" },
+      $400: { base: "uy:py-400" },
+      $500: { base: "uy:py-500" },
+      $600: { base: "uy:py-600" },
+      $800: { base: "uy:py-800" },
+      $1000: { base: "uy:py-1000" }
+    },
+    paddingInline: {
+      $0: { base: "uy:px-0" },
+      $25: { base: "uy:px-25" },
+      $50: { base: "uy:px-50" },
+      $75: { base: "uy:px-75" },
+      $100: { base: "uy:px-100" },
+      $125: { base: "uy:px-125" },
+      $150: { base: "uy:px-150" },
+      $200: { base: "uy:px-200" },
+      $250: { base: "uy:px-250" },
+      $300: { base: "uy:px-300" },
+      $400: { base: "uy:px-400" },
+      $500: { base: "uy:px-500" },
+      $600: { base: "uy:px-600" },
+      $800: { base: "uy:px-800" },
+      $1000: { base: "uy:px-1000" }
+    },
+    paddingTop: {
+      $0: { base: "uy:pt-0" },
+      $25: { base: "uy:pt-25" },
+      $50: { base: "uy:pt-50" },
+      $75: { base: "uy:pt-75" },
+      $100: { base: "uy:pt-100" },
+      $125: { base: "uy:pt-125" },
+      $150: { base: "uy:pt-150" },
+      $200: { base: "uy:pt-200" },
+      $250: { base: "uy:pt-250" },
+      $300: { base: "uy:pt-300" },
+      $400: { base: "uy:pt-400" },
+      $500: { base: "uy:pt-500" },
+      $600: { base: "uy:pt-600" },
+      $800: { base: "uy:pt-800" },
+      $1000: { base: "uy:pt-1000" }
+    },
+    paddingRight: {
+      $0: { base: "uy:pr-0" },
+      $25: { base: "uy:pr-25" },
+      $50: { base: "uy:pr-50" },
+      $75: { base: "uy:pr-75" },
+      $100: { base: "uy:pr-100" },
+      $125: { base: "uy:pr-125" },
+      $150: { base: "uy:pr-150" },
+      $200: { base: "uy:pr-200" },
+      $250: { base: "uy:pr-250" },
+      $300: { base: "uy:pr-300" },
+      $400: { base: "uy:pr-400" },
+      $500: { base: "uy:pr-500" },
+      $600: { base: "uy:pr-600" },
+      $800: { base: "uy:pr-800" },
+      $1000: { base: "uy:pr-1000" }
+    },
+    paddingBottom: {
+      $0: { base: "uy:pb-0" },
+      $25: { base: "uy:pb-25" },
+      $50: { base: "uy:pb-50" },
+      $75: { base: "uy:pb-75" },
+      $100: { base: "uy:pb-100" },
+      $125: { base: "uy:pb-125" },
+      $150: { base: "uy:pb-150" },
+      $200: { base: "uy:pb-200" },
+      $250: { base: "uy:pb-250" },
+      $300: { base: "uy:pb-300" },
+      $400: { base: "uy:pb-400" },
+      $500: { base: "uy:pb-500" },
+      $600: { base: "uy:pb-600" },
+      $800: { base: "uy:pb-800" },
+      $1000: { base: "uy:pb-1000" }
+    },
+    paddingLeft: {
+      $0: { base: "uy:pl-0" },
+      $25: { base: "uy:pl-25" },
+      $50: { base: "uy:pl-50" },
+      $75: { base: "uy:pl-75" },
+      $100: { base: "uy:pl-100" },
+      $125: { base: "uy:pl-125" },
+      $150: { base: "uy:pl-150" },
+      $200: { base: "uy:pl-200" },
+      $250: { base: "uy:pl-250" },
+      $300: { base: "uy:pl-300" },
+      $400: { base: "uy:pl-400" },
+      $500: { base: "uy:pl-500" },
+      $600: { base: "uy:pl-600" },
+      $800: { base: "uy:pl-800" },
+      $1000: { base: "uy:pl-1000" }
+    }
+  },
+  defaultVariants: {
+    padding: "$300",
+    gap: "$150"
+  }
+});
+export {
+  u as navigationCard
+};

package/dist/esm/components/navigation-card/parts/NavigationCardDescription.d.ts

@@ -0,0 +1,39 @@
+import { TextProps } from '../../text/Text.js';
+export type NavigationCardDescriptionProps = Omit<TextProps, 'variant' | 'color' | 'className' | 'style'>;
+/**
+ * Displays supplementary descriptive text for a NavigationCard component.
+ * Use this component to provide additional context or details about the navigation card's destination, helping users understand what they'll find when they navigate.
+ * The description automatically connects to the parent NavigationCard for proper accessibility semantics.
+ * @param {NavigationCardDescriptionProps} props - Standard text element props (excluding variant, color, className, and style which are preset)
+ * @example
+ * ```tsx
+ * import {
+ *   RawNavigationCard,
+ *   NavigationCardLabel,
+ *   NavigationCardDescription
+ * } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <RawNavigationCard href="/reports">
+ *       <NavigationCardLabel>Monthly Reports</NavigationCardLabel>
+ *       <NavigationCardDescription>
+ *         Access and download your company's monthly reports
+ *       </NavigationCardDescription>
+ *     </RawNavigationCard>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be used within a `NavigationCard` component to function correctly
+ * - The description text is styled with the "body" typography variant and lower emphasis color
+ * - Automatically receives proper accessibility IDs from the parent NavigationCard
+ * - Supports all standard HTML text element props except styling props which are managed by the component
+ * @see {@link NavigationCardDescriptionProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/navigation-card/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=14505-64292 Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/navigation-navigationcard-navigationcarddescription--docs unity-components.payfit.io}
+ */
+declare const NavigationCardDescription: import('react').ForwardRefExoticComponent<NavigationCardDescriptionProps & import('react').RefAttributes<HTMLDivElement>>;
+export { NavigationCardDescription };

package/dist/esm/components/navigation-card/parts/NavigationCardDescription.js

@@ -0,0 +1,22 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { Text as e } from "../../text/Text.js";
+import { useNavigationCardContext as n } from "../NavigationCard.context.js";
+const d = i((o, t) => {
+  const { descriptionId: r } = n();
+  return /* @__PURE__ */ a(
+    e,
+    {
+      id: r,
+      ...o,
+      ref: t,
+      variant: "body",
+      color: "content.neutral.low",
+      className: "uy:group-aria-disabled:text-content-neutral-disabled"
+    }
+  );
+});
+d.displayName = "NavigationCardDescription";
+export {
+  d as NavigationCardDescription
+};

package/dist/esm/components/navigation-card/parts/NavigationCardGroup.d.ts

@@ -0,0 +1,146 @@
+import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
+export declare const navigationCardGroup: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        horizontal: {
+            list: string;
+        };
+        vertical: {
+            list: string;
+        };
+    };
+    variant: {
+        compact: {
+            list: string;
+        };
+        comfortable: {
+            list: string;
+        };
+    };
+    showLabel: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    base: string[];
+    label: string[];
+    list: string[];
+    listItem: string[];
+}, undefined, {
+    orientation: {
+        horizontal: {
+            list: string;
+        };
+        vertical: {
+            list: string;
+        };
+    };
+    variant: {
+        compact: {
+            list: string;
+        };
+        comfortable: {
+            list: string;
+        };
+    };
+    showLabel: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    base: string[];
+    label: string[];
+    list: string[];
+    listItem: string[];
+}, import('tailwind-variants').TVReturnType<{
+    orientation: {
+        horizontal: {
+            list: string;
+        };
+        vertical: {
+            list: string;
+        };
+    };
+    variant: {
+        compact: {
+            list: string;
+        };
+        comfortable: {
+            list: string;
+        };
+    };
+    showLabel: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    base: string[];
+    label: string[];
+    list: string[];
+    listItem: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface NavigationCardGroupProps extends PropsWithChildren {
+    label: string;
+    isLabelHidden?: boolean;
+    orientation?: VariantProps<typeof navigationCardGroup>['orientation'];
+    variant?: VariantProps<typeof navigationCardGroup>['variant'];
+}
+/**
+ * Groups multiple NavigationCard components together with a shared label, consistent layout, and proper accessibility.
+ * Use this component to organize related navigation cards into logical sections, creating clear visual hierarchy and improving discoverability.
+ * The group automatically handles spacing, borders, and rounded corners for seamless visual integration between cards.
+ * @param {NavigationCardGroupProps} props - Props including label, isLabelHidden, orientation, variant, and children
+ * @example
+ * ```tsx
+ * import {
+ *   NavigationCardGroup,
+ *   RawNavigationCard,
+ *   NavigationCardLabel
+ * } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <NavigationCardGroup
+ *       label="Quick Actions"
+ *       variant="compact"
+ *     >
+ *       <RawNavigationCard href="/payroll">
+ *         <NavigationCardLabel>Run Payroll</NavigationCardLabel>
+ *       </RawNavigationCard>
+ *       <RawNavigationCard href="/reports">
+ *         <NavigationCardLabel>View Reports</NavigationCardLabel>
+ *       </RawNavigationCard>
+ *       <RawNavigationCard href="/settings">
+ *         <NavigationCardLabel>Settings</NavigationCardLabel>
+ *       </RawNavigationCard>
+ *     </NavigationCardGroup>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Set the `variant` prop to `"compact"` to remove spacing between cards and merge their borders for a unified look
+ * - Use `variant="comfortable"` (default) for cards with individual spacing and borders
+ * - Set `orientation` to `"horizontal"` for responsive layout (stacks vertically on mobile, horizontally on larger screens)
+ * - Use `isLabelHidden` to visually hide the label while keeping it accessible to screen readers
+ * - The label is required for accessibility and provides context for navigation landmarks
+ * - Only include NavigationCard components as direct children for proper styling
+ * @see {@link NavigationCardGroupProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/navigation-card/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=14505-64292 Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/navigation-navigationcard-navigationcardgroup--docs unity-components.payfit.io}
+ */
+declare const NavigationCardGroup: React.ForwardRefExoticComponent<NavigationCardGroupProps & React.RefAttributes<HTMLElement>>;
+export { NavigationCardGroup };

package/dist/esm/components/navigation-card/parts/NavigationCardGroup.js

@@ -0,0 +1,93 @@
+import { jsxs as N, jsx as l } from "react/jsx-runtime";
+import i, { forwardRef as w } from "react";
+import { uyTv as C } from "@payfit/unity-themes";
+import { useId as I } from "react-aria";
+const L = C({
+  // add the component styles
+  slots: {
+    base: ["uy:flex uy:flex-col uy:gap-100"],
+    label: ["uy:typography-action"],
+    list: ["uy:flex uy:list-none uy:group"],
+    listItem: [
+      "uy:contents",
+      "uy:data-[variant=compact]:*:rounded-none",
+      "uy:data-[variant=compact]:*:border-b-0",
+      "uy:data-[variant=compact]:first:*:rounded-t-lg",
+      "uy:data-[variant=compact]:last:*:rounded-b-lg",
+      "uy:data-[variant=compact]:last:*:border-b-1",
+      "uy:data-[variant=compact]:first:last:*:rounded-lg"
+    ]
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        list: "uy:flex-col uy:sm:flex-row"
+      },
+      vertical: {
+        list: "uy:flex-col"
+      }
+    },
+    variant: {
+      compact: {
+        list: "uy:gap-0"
+      },
+      comfortable: {
+        list: "uy:gap-100"
+      }
+    },
+    showLabel: {
+      true: {
+        label: ""
+      },
+      false: {
+        label: "uy:sr-only"
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "comfortable",
+    showLabel: !0
+  }
+}), G = w(
+  ({
+    children: s,
+    label: n,
+    isLabelHidden: c = !1,
+    orientation: u = "vertical",
+    variant: t = "comfortable",
+    ...d
+  }, y) => {
+    const m = I(), {
+      base: p,
+      label: b,
+      list: f,
+      listItem: v
+    } = L({ orientation: u, variant: t, showLabel: !c }), r = i.Children.toArray(s), g = r.length, o = `navcard-group-label-${m}`;
+    return /* @__PURE__ */ N("nav", { ...d, ref: y, className: p(), "aria-labelledby": o, children: [
+      /* @__PURE__ */ l("span", { className: b(), id: o, children: n }),
+      /* @__PURE__ */ l("ul", { className: f(), "data-variant": t, children: r.map((a, e) => {
+        if (i.isValidElement(a)) {
+          const h = e === 0, x = e === g - 1;
+          return /* @__PURE__ */ l(
+            "li",
+            {
+              className: v(),
+              "data-variant": t,
+              "data-unity-first": h ? "" : void 0,
+              "data-unity-last": x ? "" : void 0,
+              children: a
+            },
+            a.key
+          );
+        }
+        return a;
+      }) })
+    ] });
+  }
+);
+G.displayName = "NavigationCardGroup";
+export {
+  G as NavigationCardGroup,
+  L as navigationCardGroup
+};

package/dist/esm/components/navigation-card/parts/NavigationCardLabel.d.ts

@@ -0,0 +1,32 @@
+import { TextProps } from '../../text/Text.js';
+export type NavigationCardLabelProps = Omit<TextProps, 'variant' | 'color' | 'className' | 'style'>;
+/**
+ * Displays the primary label text for a NavigationCard component.
+ * Use this component to provide the main identifying text for your navigation card, which serves as the accessible label for the entire card.
+ * The label automatically connects to the parent NavigationCard for proper accessibility semantics.
+ * @param {NavigationCardLabelProps} props - Standard text element props (excluding variant, color, className, and style which are preset)
+ * @example
+ * ```tsx
+ * import { RawNavigationCard, NavigationCardLabel } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <RawNavigationCard href="/team">
+ *       <NavigationCardLabel>Team Members</NavigationCardLabel>
+ *     </RawNavigationCard>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be used within a `NavigationCard` component to function correctly
+ * - The label text is styled with the "action" typography variant for consistency
+ * - Automatically receives proper accessibility IDs from the parent NavigationCard
+ * - Supports all standard HTML text element props except styling props which are managed by the component
+ * @see {@link NavigationCardLabelProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/navigation-card/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=14505-64292 Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/navigation-navigationcard-navigationcardlabel--docs unity-components.payfit.io}
+ */
+declare const NavigationCardLabel: import('react').ForwardRefExoticComponent<NavigationCardLabelProps & import('react').RefAttributes<HTMLElement>>;
+export { NavigationCardLabel };

package/dist/esm/components/navigation-card/parts/NavigationCardLabel.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { Text as i } from "../../text/Text.js";
+import { useNavigationCardContext as n } from "../NavigationCard.context.js";
+const d = e(
+  (a, t) => {
+    const { labelId: o } = n();
+    return /* @__PURE__ */ r(
+      i,
+      {
+        id: o,
+        ...a,
+        ref: t,
+        variant: "action",
+        color: "content.neutral",
+        className: "uy:group-aria-disabled:text-content-neutral-disabled"
+      }
+    );
+  }
+);
+d.displayName = "NavigationCardLabel";
+export {
+  d as NavigationCardLabel
+};

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

@@ -42,6 +42,8 @@ type NumberFieldComponent = (<TSchema extends Schema>(props: NumberFieldProps<St
  * @param {NumberFieldProps<StandardSchemaV1.InferOutput<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
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const NumberField: NumberFieldComponent;
 export { NumberField };

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

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { TanstackNumberInputProps } from '../number-input/TanstackNumberInput.js';
+/**
+ * Base props shared by the TanstackNumberField, including label and field adornments.
+ * Inherits `isRequired` and `requiredVariant` from {@link LabelProps} to control
+ * the required indicator in the label.
+ */
+export interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The plain-text label associated with the number input (required for a11y). */
+    label: string;
+    /** Optional helper text displayed above the control to guide the user. */
+    helperText?: ReactNode;
+    /** Optional contextual link rendered below the control for additional info. */
+    contextualLink?: ReactNode;
+}
+/**
+ * Props for {@link TanstackNumberField}.
+ *
+ * Combines field chrome (label, helper/contextual link, feedback) with the
+ * input behavior from {@link TanstackNumberInput}. All value/validation aspects
+ * are handled by the TanStack Form field context, so you should not pass `name`,
+ * `value`, `defaultValue`, or `isInvalid` here.
+ */
+export type NumberFieldProps = FieldProps & TanstackNumberInputProps;
+/**
+ * TanstackNumberField renders a complete number field for TanStack forms:
+ * label, helper text, the numeric input itself, feedback message, and an
+ * optional contextual link.
+ *
+ * Behavior
+ * - Integrates with the TanStack Form field via `<form.AppField name="…">`.
+ * - Uses {@link TanstackNumberInput} for the numeric control and forwards visual
+ *   props such as `withControls`, `minValue`, `maxValue`, `step`, `formatOptions`,
+ *   `prefix`, `suffix`, and state props (`isReadOnly`, `isDisabled`, `isLoading`).
+ * - Invalid state is derived from the field meta (touched + !isValid) and is
+ *   displayed through the underlying input and feedback area.
+ *
+ * Accessibility
+ * - The surrounding {@link TanstackFormField} provides `aria-labelledby`,
+ *   `aria-describedby` (helper/feedback), and `aria-details` wiring so the input
+ *   is fully accessible out of the box.
+ *
+ * Example
+ * ```tsx
+ * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
+ * import { TanstackNumberField } from "@/components/number-field/TanstackNumberField"
+ *
+ * const form = useTanstackUnityForm<{ amount: number }>({ validators: {} })
+ *
+ * <form.AppForm>
+ *   <form.Form>
+ *     <form.AppField name="amount">
+ *       {() => (
+ *         <TanstackNumberField
+ *           label="Amount"
+ *           withControls
+ *           minValue={0}
+ *           step={5}
+ *           helperText="Enter a positive amount"
+ *         />
+ *       )}
+ *     </form.AppField>
+ *   </form.Form>
+ * </form.AppForm>
+ * ```
+ * @see TanstackNumberInput for the underlying numeric control
+ * @see TanstackFormField for the a11y and layout context
+ * @see useTanstackUnityForm to create a form and field context
+ * @returns A composite field bound to the current TanStack form field
+ */
+declare const TanstackNumberField: import('react').ForwardRefExoticComponent<FieldProps & TanstackNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export type { NumberFieldProps as TanstackNumberFieldProps };
+export { TanstackNumberField };

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

@@ -0,0 +1,44 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { TanstackFormFeedbackText as l } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as F } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as k } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as T } from "../form-field/TanstackFormField.js";
+import { TanstackNumberInput as u } from "../number-input/TanstackNumberInput.js";
+function b({
+  label: m,
+  helperText: o,
+  contextualLink: t,
+  isRequired: a,
+  isLoading: e,
+  isDisabled: n,
+  isReadOnly: c,
+  requiredVariant: i,
+  ...s
+}, p) {
+  return /* @__PURE__ */ d(T, { children: [
+    /* @__PURE__ */ r(
+      k,
+      {
+        requiredVariant: i,
+        isRequired: a,
+        children: m
+      }
+    ),
+    o && /* @__PURE__ */ r(F, { children: o }),
+    /* @__PURE__ */ r(u, { ref: p, ...{
+      isLoading: e,
+      isDisabled: n,
+      isReadOnly: c
+    }, ...s }),
+    /* @__PURE__ */ r(l, {}),
+    t
+  ] });
+}
+const N = f(
+  b
+);
+N.displayName = "TanstackNumberField";
+export {
+  N as TanstackNumberField
+};