@szum-tech/design-system 2.5.1 → 2.6.0

package/dist/components/stepper/index.d.cts

@@ -0,0 +1,162 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+import { Direction } from '../../contexts/index.cjs';
+
+type StepperProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onValueComplete?: (value: string, completed: boolean) => void;
+    onValueAdd?: (value: string) => void;
+    onValueRemove?: (value: string) => void;
+    onValidate?: (value: string, direction: StepperNavigationDirection) => boolean | Promise<boolean>;
+    activationMode?: StepperActivationMode;
+    dir?: Direction;
+    orientation?: StepperOrientation;
+    disabled?: boolean;
+    loop?: boolean;
+    nonInteractive?: boolean;
+    indicators?: StepIndicators;
+};
+declare function Stepper({ value, defaultValue, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate, id: idProp, dir: dirProp, orientation, activationMode, asChild, disabled, nonInteractive, loop, className, indicators, ...rootProps }: StepperProps): react_jsx_runtime.JSX.Element;
+
+declare const StepperFocusIntent: {
+    readonly FIRST: "first";
+    readonly LAST: "last";
+    readonly PREV: "prev";
+    readonly NEXT: "next";
+};
+type StepperFocusIntent = (typeof StepperFocusIntent)[keyof typeof StepperFocusIntent];
+declare const StepperOrientation: {
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};
+type StepperOrientation = (typeof StepperOrientation)[keyof typeof StepperOrientation];
+declare const StepperNavigationDirection: {
+    readonly NEXT: "next";
+    readonly PREV: "prev";
+};
+type StepperNavigationDirection = (typeof StepperNavigationDirection)[keyof typeof StepperNavigationDirection];
+declare const StepperActivationMode: {
+    readonly AUTOMATIC: "automatic";
+    readonly MANUAL: "manual";
+};
+type StepperActivationMode = (typeof StepperActivationMode)[keyof typeof StepperActivationMode];
+declare const StepperDataState: {
+    readonly INACTIVE: "inactive";
+    readonly ACTIVE: "active";
+    readonly COMPLETED: "completed";
+};
+type StepperDataState = (typeof StepperDataState)[keyof typeof StepperDataState];
+type StepIndicators = {
+    active?: React.ReactNode;
+    completed?: React.ReactNode;
+    inactive?: React.ReactNode;
+    loading?: React.ReactNode;
+};
+
+interface StepperContextValue {
+    id: string;
+    dir: Direction;
+    orientation: StepperOrientation;
+    activationMode: StepperActivationMode;
+    disabled: boolean;
+    nonInteractive: boolean;
+    loop: boolean;
+    indicators: StepIndicators;
+}
+declare function useStepperContext(consumerName: string): StepperContextValue;
+
+type StepperTriggerElement = React.ComponentRef<typeof StepperTrigger>;
+type StepperTriggerProps = React.ComponentProps<"button"> & {
+    asChild?: boolean;
+};
+declare function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps }: StepperTriggerProps): react_jsx_runtime.JSX.Element;
+
+type StepperItemData = {
+    id: string;
+    ref: React.RefObject<StepperTriggerElement | null>;
+    value: string;
+    active: boolean;
+    disabled: boolean;
+};
+type StepperFocusContextValue = {
+    tabStopId: string | null;
+    onItemFocus: (tabStopId: string) => void;
+    onItemShiftTab: () => void;
+    onFocusableItemAdd: () => void;
+    onFocusableItemRemove: () => void;
+    onItemRegister: (item: StepperItemData) => void;
+    onItemUnregister: (id: string) => void;
+    getItems: () => StepperItemData[];
+};
+declare function useStepperFocusContext(consumerName: string): StepperFocusContextValue;
+
+type StepperNavProps = React.ComponentProps<"nav"> & {
+    asChild?: boolean;
+};
+declare function StepperNav({ className, children, asChild, ref, ...listProps }: StepperNavProps): react_jsx_runtime.JSX.Element;
+
+type StepperItemProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    value: string;
+    completed?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+};
+declare function StepperItem({ value: itemValue, completed, disabled, loading, asChild, className, children, ...props }: StepperItemProps): react_jsx_runtime.JSX.Element;
+
+type StepperStepState = {
+    value: string;
+    completed: boolean;
+    disabled: boolean;
+    loading: boolean;
+};
+
+type StepperItemContextValue = {
+    value: string;
+    stepState: StepperStepState | undefined;
+};
+declare function useStepperItemContext(consumerName: string): StepperItemContextValue;
+
+type StepperIndicatorProps = Omit<React.ComponentProps<"div">, "children"> & {
+    asChild?: boolean;
+    children?: React.ReactNode | ((dataState: StepperDataState) => React.ReactNode);
+};
+declare function StepperIndicator({ className, children, asChild, ref, ...props }: StepperIndicatorProps): react_jsx_runtime.JSX.Element;
+
+type StepperTitleProps = React.ComponentProps<"h3"> & {
+    asChild?: boolean;
+};
+declare function StepperTitle({ className, asChild, ...props }: StepperTitleProps): react_jsx_runtime.JSX.Element;
+
+type StepperDescriptionProps = React.ComponentProps<"span"> & {
+    asChild?: boolean;
+};
+declare function StepperDescription({ className, asChild, ...props }: StepperDescriptionProps): react_jsx_runtime.JSX.Element;
+
+type StepperPanelProps = React__default.ComponentProps<"div"> & {
+    asChild?: boolean;
+};
+declare function StepperPanel({ children, asChild, className, ...props }: StepperPanelProps): react_jsx_runtime.JSX.Element;
+
+type StepperContentProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    value: string;
+    forceMount?: boolean;
+};
+declare function StepperContent({ value: valueProp, asChild, forceMount, className, ...props }: StepperContentProps): react_jsx_runtime.JSX.Element | null;
+
+type StepperNextTriggerProps = React.ComponentProps<"button"> & {
+    asChild?: boolean;
+};
+declare function StepperNextTrigger({ asChild, onClick, disabled, ...props }: StepperNextTriggerProps): react_jsx_runtime.JSX.Element;
+
+type StepperPrevTriggerProps = React.ComponentProps<"button"> & {
+    asChild?: boolean;
+};
+declare function StepperPrevTrigger({ asChild, disabled, onClick, ...props }: StepperPrevTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { type StepIndicators, Stepper, StepperActivationMode, StepperContent, type StepperContentProps, StepperDataState, StepperDescription, type StepperDescriptionProps, StepperFocusIntent, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, StepperNav, type StepperNavProps, StepperNavigationDirection, StepperNextTrigger, type StepperNextTriggerProps, StepperOrientation, StepperPanel, type StepperPanelProps, StepperPrevTrigger, type StepperPrevTriggerProps, type StepperProps, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerElement, type StepperTriggerProps, useStepperContext, useStepperFocusContext, useStepperItemContext };

package/dist/components/stepper/index.d.ts

@@ -0,0 +1,162 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+import { Direction } from '../../contexts/index.js';
+
+type StepperProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onValueComplete?: (value: string, completed: boolean) => void;
+    onValueAdd?: (value: string) => void;
+    onValueRemove?: (value: string) => void;
+    onValidate?: (value: string, direction: StepperNavigationDirection) => boolean | Promise<boolean>;
+    activationMode?: StepperActivationMode;
+    dir?: Direction;
+    orientation?: StepperOrientation;
+    disabled?: boolean;
+    loop?: boolean;
+    nonInteractive?: boolean;
+    indicators?: StepIndicators;
+};
+declare function Stepper({ value, defaultValue, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate, id: idProp, dir: dirProp, orientation, activationMode, asChild, disabled, nonInteractive, loop, className, indicators, ...rootProps }: StepperProps): react_jsx_runtime.JSX.Element;
+
+declare const StepperFocusIntent: {
+    readonly FIRST: "first";
+    readonly LAST: "last";
+    readonly PREV: "prev";
+    readonly NEXT: "next";
+};
+type StepperFocusIntent = (typeof StepperFocusIntent)[keyof typeof StepperFocusIntent];
+declare const StepperOrientation: {
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};
+type StepperOrientation = (typeof StepperOrientation)[keyof typeof StepperOrientation];
+declare const StepperNavigationDirection: {
+    readonly NEXT: "next";
+    readonly PREV: "prev";
+};
+type StepperNavigationDirection = (typeof StepperNavigationDirection)[keyof typeof StepperNavigationDirection];
+declare const StepperActivationMode: {
+    readonly AUTOMATIC: "automatic";
+    readonly MANUAL: "manual";
+};
+type StepperActivationMode = (typeof StepperActivationMode)[keyof typeof StepperActivationMode];
+declare const StepperDataState: {
+    readonly INACTIVE: "inactive";
+    readonly ACTIVE: "active";
+    readonly COMPLETED: "completed";
+};
+type StepperDataState = (typeof StepperDataState)[keyof typeof StepperDataState];
+type StepIndicators = {
+    active?: React.ReactNode;
+    completed?: React.ReactNode;
+    inactive?: React.ReactNode;
+    loading?: React.ReactNode;
+};
+
+interface StepperContextValue {
+    id: string;
+    dir: Direction;
+    orientation: StepperOrientation;
+    activationMode: StepperActivationMode;
+    disabled: boolean;
+    nonInteractive: boolean;
+    loop: boolean;
+    indicators: StepIndicators;
+}
+declare function useStepperContext(consumerName: string): StepperContextValue;
+
+type StepperTriggerElement = React.ComponentRef<typeof StepperTrigger>;
+type StepperTriggerProps = React.ComponentProps<"button"> & {
+    asChild?: boolean;
+};
+declare function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps }: StepperTriggerProps): react_jsx_runtime.JSX.Element;
+
+type StepperItemData = {
+    id: string;
+    ref: React.RefObject<StepperTriggerElement | null>;
+    value: string;
+    active: boolean;
+    disabled: boolean;
+};
+type StepperFocusContextValue = {
+    tabStopId: string | null;
+    onItemFocus: (tabStopId: string) => void;
+    onItemShiftTab: () => void;
+    onFocusableItemAdd: () => void;
+    onFocusableItemRemove: () => void;
+    onItemRegister: (item: StepperItemData) => void;
+    onItemUnregister: (id: string) => void;
+    getItems: () => StepperItemData[];
+};
+declare function useStepperFocusContext(consumerName: string): StepperFocusContextValue;
+
+type StepperNavProps = React.ComponentProps<"nav"> & {
+    asChild?: boolean;
+};
+declare function StepperNav({ className, children, asChild, ref, ...listProps }: StepperNavProps): react_jsx_runtime.JSX.Element;
+
+type StepperItemProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    value: string;
+    completed?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+};
+declare function StepperItem({ value: itemValue, completed, disabled, loading, asChild, className, children, ...props }: StepperItemProps): react_jsx_runtime.JSX.Element;
+
+type StepperStepState = {
+    value: string;
+    completed: boolean;
+    disabled: boolean;
+    loading: boolean;
+};
+
+type StepperItemContextValue = {
+    value: string;
+    stepState: StepperStepState | undefined;
+};
+declare function useStepperItemContext(consumerName: string): StepperItemContextValue;
+
+type StepperIndicatorProps = Omit<React.ComponentProps<"div">, "children"> & {
+    asChild?: boolean;
+    children?: React.ReactNode | ((dataState: StepperDataState) => React.ReactNode);
+};
+declare function StepperIndicator({ className, children, asChild, ref, ...props }: StepperIndicatorProps): react_jsx_runtime.JSX.Element;
+
+type StepperTitleProps = React.ComponentProps<"h3"> & {
+    asChild?: boolean;
+};
+declare function StepperTitle({ className, asChild, ...props }: StepperTitleProps): react_jsx_runtime.JSX.Element;
+
+type StepperDescriptionProps = React.ComponentProps<"span"> & {
+    asChild?: boolean;
+};
+declare function StepperDescription({ className, asChild, ...props }: StepperDescriptionProps): react_jsx_runtime.JSX.Element;
+
+type StepperPanelProps = React__default.ComponentProps<"div"> & {
+    asChild?: boolean;
+};
+declare function StepperPanel({ children, asChild, className, ...props }: StepperPanelProps): react_jsx_runtime.JSX.Element;
+
+type StepperContentProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    value: string;
+    forceMount?: boolean;
+};
+declare function StepperContent({ value: valueProp, asChild, forceMount, className, ...props }: StepperContentProps): react_jsx_runtime.JSX.Element | null;
+
+type StepperNextTriggerProps = React.ComponentProps<"button"> & {
+    asChild?: boolean;
+};
+declare function StepperNextTrigger({ asChild, onClick, disabled, ...props }: StepperNextTriggerProps): react_jsx_runtime.JSX.Element;
+
+type StepperPrevTriggerProps = React.ComponentProps<"button"> & {
+    asChild?: boolean;
+};
+declare function StepperPrevTrigger({ asChild, disabled, onClick, ...props }: StepperPrevTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { type StepIndicators, Stepper, StepperActivationMode, StepperContent, type StepperContentProps, StepperDataState, StepperDescription, type StepperDescriptionProps, StepperFocusIntent, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, StepperNav, type StepperNavProps, StepperNavigationDirection, StepperNextTrigger, type StepperNextTriggerProps, StepperOrientation, StepperPanel, type StepperPanelProps, StepperPrevTrigger, type StepperPrevTriggerProps, type StepperProps, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerElement, type StepperTriggerProps, useStepperContext, useStepperFocusContext, useStepperItemContext };

package/dist/components/stepper/index.js

@@ -0,0 +1,21 @@
+export { Stepper, StepperActivationMode, StepperContent, StepperDataState, StepperDescription, StepperFocusIntent, StepperIndicator, StepperItem, StepperNav, StepperNavigationDirection, StepperNextTrigger, StepperOrientation, StepperPanel, StepperPrevTrigger, StepperTitle, StepperTrigger, useStepperContext, useStepperFocusContext, useStepperItemContext } from '../../chunk-5RNHEHRL.js';
+import '../../chunk-MI3CQBHC.js';
+import '../../chunk-P5IUC7HJ.js';
+import '../../chunk-DTSFPOLX.js';
+import '../../chunk-RXYZURP4.js';
+import '../../chunk-IAI7BIAG.js';
+import '../../chunk-HJJPEVIH.js';
+import '../../chunk-YJFJLF7Y.js';
+import '../../chunk-V5OVQTDR.js';
+import '../../chunk-AGVEKVWD.js';
+import '../../chunk-5PBHBOXI.js';
+import '../../chunk-UW6GOD7J.js';
+import '../../chunk-VZKTT6CG.js';
+import '../../chunk-36YD6ICC.js';
+import '../../chunk-H5O5L6XT.js';
+import '../../chunk-DFD2WUOU.js';
+import '../../chunk-XTO7CMIM.js';
+import '../../chunk-5MJPZUTO.js';
+import '../../chunk-EU7G37IS.js';
+import '../../chunk-7V34QHYR.js';
+import '../../chunk-ZD2QRAOX.js';

package/dist/components/textarea/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunk6L3QPLRR_cjs = require('../../chunk-6L3QPLRR.cjs');
+var chunkOIWEXHFE_cjs = require('../../chunk-OIWEXHFE.cjs');
 
 
 
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
-  get: function () { return chunk6L3QPLRR_cjs.Textarea; }
+  get: function () { return chunkOIWEXHFE_cjs.Textarea; }
 });

package/dist/components/textarea/index.js

@@ -1 +1 @@
-export { Textarea } from '../../chunk-3PV6NLP5.js';
+export { Textarea } from '../../chunk-IAI7BIAG.js';

package/dist/contexts/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunkEW6TE3N5_cjs = require('../chunk-EW6TE3N5.cjs');
+
+
+
+Object.defineProperty(exports, "Direction", {
+  enumerable: true,
+  get: function () { return chunkEW6TE3N5_cjs.Direction; }
+});
+Object.defineProperty(exports, "DirectionContext", {
+  enumerable: true,
+  get: function () { return chunkEW6TE3N5_cjs.DirectionContext; }
+});
+Object.defineProperty(exports, "useDirection", {
+  enumerable: true,
+  get: function () { return chunkEW6TE3N5_cjs.useDirection; }
+});

package/dist/contexts/index.d.cts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+declare const Direction: {
+    readonly LTR: "ltr";
+    readonly RTL: "rtl";
+};
+type Direction = (typeof Direction)[keyof typeof Direction];
+declare const DirectionContext: React.Context<Direction | undefined>;
+declare function useDirection(dirProp?: Direction): Direction;
+
+export { Direction, DirectionContext, useDirection };

package/dist/contexts/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+declare const Direction: {
+    readonly LTR: "ltr";
+    readonly RTL: "rtl";
+};
+type Direction = (typeof Direction)[keyof typeof Direction];
+declare const DirectionContext: React.Context<Direction | undefined>;
+declare function useDirection(dirProp?: Direction): Direction;
+
+export { Direction, DirectionContext, useDirection };

package/dist/contexts/index.js

@@ -0,0 +1 @@
+export { Direction, DirectionContext, useDirection } from '../chunk-H5O5L6XT.js';

package/dist/hooks/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunk7EYMOUWG_cjs = require('../chunk-7EYMOUWG.cjs');
+
+
+
+Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
+  enumerable: true,
+  get: function () { return chunk7EYMOUWG_cjs.useIsomorphicLayoutEffect; }
+});
+Object.defineProperty(exports, "useLazyRef", {
+  enumerable: true,
+  get: function () { return chunk7EYMOUWG_cjs.useLazyRef; }
+});
+Object.defineProperty(exports, "useValidationLog", {
+  enumerable: true,
+  get: function () { return chunk7EYMOUWG_cjs.useValidationLog; }
+});

package/dist/hooks/index.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface UseValidationLogProps {
+    check: boolean;
+    scope: string;
+    message: string;
+}
+declare function useValidationLog({ check, scope, message }: UseValidationLogProps): void;
+
+declare function useLazyRef<T>(fn: () => T): React.RefObject<T>;
+
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+
+export { useIsomorphicLayoutEffect, useLazyRef, useValidationLog };

package/dist/hooks/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface UseValidationLogProps {
+    check: boolean;
+    scope: string;
+    message: string;
+}
+declare function useValidationLog({ check, scope, message }: UseValidationLogProps): void;
+
+declare function useLazyRef<T>(fn: () => T): React.RefObject<T>;
+
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+
+export { useIsomorphicLayoutEffect, useLazyRef, useValidationLog };

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export { useIsomorphicLayoutEffect, useLazyRef, useValidationLog } from '../chunk-DFD2WUOU.js';

package/dist/icons/index.d.cts

@@ -3,6 +3,9 @@ import * as React from 'react';
 
 declare function GoogleLogoIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
+/**
+ * @deprecated
+ */
 declare function LoadingIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
 declare function Auth0LogoIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;

package/dist/icons/index.d.ts

@@ -3,6 +3,9 @@ import * as React from 'react';
 
 declare function GoogleLogoIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
+/**
+ * @deprecated
+ */
 declare function LoadingIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
 declare function Auth0LogoIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@szum-tech/design-system",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Szum-Tech design system with tailwindcss support",
   "keywords": [
     "szum-tech",
@@ -68,6 +68,26 @@
         "require": "./dist/utils/index.cjs"
       }
     },
+    "./hooks": {
+      "import": {
+        "types": "./dist/hooks/index.d.ts",
+        "import": "./dist/hooks/index.js"
+      },
+      "require": {
+        "types": "./dist/hooks/index.d.cts",
+        "require": "./dist/hooks/index.cjs"
+      }
+    },
+    "./contexts": {
+      "import": {
+        "types": "./dist/contexts/index.d.ts",
+        "import": "./dist/contexts/index.js"
+      },
+      "require": {
+        "types": "./dist/contexts/index.d.cts",
+        "require": "./dist/contexts/index.cjs"
+      }
+    },
     "./tailwind/*.css": "./tailwind/*.css",
     "./package.json": "./package.json"
   },
@@ -131,6 +151,7 @@
     "@vitest/ui": "^3.1.4",
     "cpy-cli": "^6.0.0",
     "eslint": "^9.32.0",
+    "happy-dom": "^20.0.2",
     "playwright": "^1.54.1",
     "prettier": "^3.6.2",
     "react": "^19.1.1",

package/dist/chunk-DH5YKYXV.cjs

@@ -1,116 +0,0 @@
-'use strict';
-
-var chunkP4J2TTH7_cjs = require('./chunk-P4J2TTH7.cjs');
-var chunkFVSO3RHT_cjs = require('./chunk-FVSO3RHT.cjs');
-var reactHookForm = require('react-hook-form');
-var React2 = require('react');
-var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
-
-var Form = reactHookForm.FormProvider;
-var FormItemContext = React2__namespace.createContext({});
-var FormItem = React2__namespace.forwardRef(function({ className, ...props }, ref) {
-  const id = React2__namespace.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: tailwindMerge.twMerge("space-y-2", className), ...props }) });
-});
-FormItem.displayName = "FormItem";
-var FormFieldContext = React2__namespace.createContext({});
-var FormField = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
-};
-var useFormField = () => {
-  const fieldContext = React2__namespace.useContext(FormFieldContext);
-  const itemContext = React2__namespace.useContext(FormItemContext);
-  const { getFieldState, formState } = reactHookForm.useFormContext();
-  const fieldState = getFieldState(fieldContext.name, formState);
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-  const { id } = itemContext;
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  };
-};
-var FormLabel = React2__namespace.forwardRef(
-  ({ className, caption, ...props }, ref) => {
-    const { error, formItemId } = useFormField();
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-end justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        chunkFVSO3RHT_cjs.Label,
-        {
-          ref,
-          className: tailwindMerge.twMerge(error ? "text-error-500" : null, className),
-          htmlFor: formItemId,
-          ...props
-        }
-      ),
-      caption ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-caption text-gray-200", children: caption }) : null
-    ] });
-  }
-);
-FormLabel.displayName = "FormLabel";
-var FormControl = React2__namespace.forwardRef(function(props, ref) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  const newProps = { ...props, invalid: !!error };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactSlot.Slot,
-    {
-      ref,
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error,
-      ...newProps
-    }
-  );
-});
-FormControl.displayName = "FormControl";
-var FormMessage = React2__namespace.forwardRef(function({ children, ...props }, ref) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkP4J2TTH7_cjs.HelperText, { ref, type: "error", id: formMessageId, ...props, children: body });
-});
-FormMessage.displayName = "FormMessage";
-var FormDescription = React2__namespace.forwardRef(function(props, ref) {
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkP4J2TTH7_cjs.HelperText, { ref, id: formDescriptionId, ...props });
-});
-FormDescription.displayName = "FormDescription";
-
-exports.Form = Form;
-exports.FormControl = FormControl;
-exports.FormDescription = FormDescription;
-exports.FormField = FormField;
-exports.FormItem = FormItem;
-exports.FormLabel = FormLabel;
-exports.FormMessage = FormMessage;