@nuvia/components 0.1.0

package/dist/ui/form.cjs

@@ -0,0 +1,179 @@
+'use strict';
+
+var ssr = require('@phosphor-icons/react/dist/ssr');
+var reactSlot = require('@radix-ui/react-slot');
+var React2 = require('react');
+var reactHookForm = require('react-hook-form');
+var LabelPrimitive = require('@radix-ui/react-label');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+require('sonner');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+
+var cn = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
+var labelVariants = classVarianceAuthority.cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      required: {
+        true: "after:content-['*'] after:text-destructive after:ml-1"
+      }
+    }
+  }
+);
+var Label = React2__namespace.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  LabelPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(labelVariants({ required }), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive__namespace.Root.displayName;
+var Form = reactHookForm.FormProvider;
+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 FormItemContext = React2__namespace.createContext(
+  {}
+);
+var FormItem = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+  const id = React2__namespace.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-danger-foreground", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactSlot.Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`,
+      "aria-invalid": !!error,
+      className: cn(
+        "peer group ",
+        className
+      ),
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn(
+        "token-font-extra-small text-muted-foreground leading-4 peer-aria-[invalid=true]:text-danger-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React2__namespace.forwardRef(({ t, iconClassName, className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ssr.WarningCircle,
+      {
+        className: cn(
+          "opacity-0 absolute right-3 translate-y-[24px] bottom-[34px] text-danger-foreground transition-all",
+          body ? "opacity-100 translate-y-0" : "",
+          iconClassName
+        ),
+        size: 20
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref,
+        id: formMessageId,
+        className: cn(
+          "token-font-extra-small flex h-0 items-center overflow-hidden text-danger-foreground transition-all",
+          body ? "h-6" : "",
+          className
+        ),
+        ...props,
+        children: body ? t(body) : ""
+      }
+    )
+  ] });
+});
+FormMessage.displayName = "FormMessage";
+
+exports.Form = Form;
+exports.FormControl = FormControl;
+exports.FormDescription = FormDescription;
+exports.FormField = FormField;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
+exports.useFormField = useFormField;
+//# sourceMappingURL=form.cjs.map
+//# sourceMappingURL=form.cjs.map

package/dist/ui/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/ui/label.tsx","../../src/ui/form.tsx"],"names":["twMerge","clsx","cva","React","jsx","LabelPrimitive","FormProvider","React2","Controller","useFormContext","Slot","jsxs","Fragment","WarningCircle"],"mappings":"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","file":"form.cjs","sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { toast } from \"sonner\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\nexport const capitalize = (str: string) =>\n  str?.charAt(0)?.toUpperCase() + str?.slice(1);\n\nexport const handleError = (error: { message: string }): void => {\n  toast.error(error.message);\n};\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n  {\n    variants: {\n      required: {\n        true: \"after:content-['*'] after:text-destructive after:ml-1\",\n      },\n    },\n  }\n)\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, required, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants({ required }), className)}\n    {...props}\n  />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n","'use client';\n\nimport { WarningCircle } from '@phosphor-icons/react/dist/ssr';\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n} from 'react-hook-form';\n\nimport { Label } from './label';\nimport { cn } from '../lib/utils';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn('relative', className)} {...props} />\n    </FormItemContext.Provider>\n  );\n});\nFormItem.displayName = 'FormItem';\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && 'text-danger-foreground', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`\n      }\n      aria-invalid={!!error}\n      className={cn(\n        'peer group ',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = 'FormControl';\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\n        'token-font-extra-small text-muted-foreground leading-4 peer-aria-[invalid=true]:text-danger-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFormDescription.displayName = 'FormDescription';\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement> & {\n    t: (key: string) => string;\n    iconClassName?: string;\n  }\n>(({ t, iconClassName, className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message) : '';\n\n  return (\n    <>\n      <WarningCircle\n        className={cn(\n          'opacity-0 absolute right-3 translate-y-[24px] bottom-[34px] text-danger-foreground transition-all',\n          body ? 'opacity-100 translate-y-0' : '',\n          iconClassName\n        )}\n        size={20}\n      />\n      <p\n        ref={ref}\n        id={formMessageId}\n        className={cn(\n          'token-font-extra-small flex h-0 items-center overflow-hidden text-danger-foreground transition-all',\n          body ? 'h-6' : '',\n          className\n        )}\n        {...props}\n      >\n        {body ? t(body) : ''}\n      </p>\n    </>\n  );\n});\nFormMessage.displayName = 'FormMessage';\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"]}

package/dist/ui/form.js

@@ -0,0 +1,149 @@
+import { WarningCircle } from '@phosphor-icons/react/dist/ssr';
+import { Slot } from '@radix-ui/react-slot';
+import * as React2 from 'react';
+import { useFormContext, FormProvider, Controller } from 'react-hook-form';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import 'sonner';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var cn = (...inputs) => twMerge(clsx(inputs));
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      required: {
+        true: "after:content-['*'] after:text-destructive after:ml-1"
+      }
+    }
+  }
+);
+var Label = React2.forwardRef(({ className, required, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants({ required }), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+var Form = FormProvider;
+var FormFieldContext = React2.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React2.useContext(FormFieldContext);
+  const itemContext = React2.useContext(FormItemContext);
+  const { getFieldState, formState } = 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 FormItemContext = React2.createContext(
+  {}
+);
+var FormItem = React2.forwardRef(({ className, ...props }, ref) => {
+  const id = React2.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("relative", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React2.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-danger-foreground", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React2.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`,
+      "aria-invalid": !!error,
+      className: cn(
+        "peer group ",
+        className
+      ),
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React2.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn(
+        "token-font-extra-small text-muted-foreground leading-4 peer-aria-[invalid=true]:text-danger-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React2.forwardRef(({ t, iconClassName, className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      WarningCircle,
+      {
+        className: cn(
+          "opacity-0 absolute right-3 translate-y-[24px] bottom-[34px] text-danger-foreground transition-all",
+          body ? "opacity-100 translate-y-0" : "",
+          iconClassName
+        ),
+        size: 20
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: formMessageId,
+        className: cn(
+          "token-font-extra-small flex h-0 items-center overflow-hidden text-danger-foreground transition-all",
+          body ? "h-6" : "",
+          className
+        ),
+        ...props,
+        children: body ? t(body) : ""
+      }
+    )
+  ] });
+});
+FormMessage.displayName = "FormMessage";
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+//# sourceMappingURL=form.js.map
+//# sourceMappingURL=form.js.map

package/dist/ui/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/ui/label.tsx","../../src/ui/form.tsx"],"names":["React","jsx"],"mappings":"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","file":"form.js","sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { toast } from \"sonner\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\nexport const capitalize = (str: string) =>\n  str?.charAt(0)?.toUpperCase() + str?.slice(1);\n\nexport const handleError = (error: { message: string }): void => {\n  toast.error(error.message);\n};\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n  {\n    variants: {\n      required: {\n        true: \"after:content-['*'] after:text-destructive after:ml-1\",\n      },\n    },\n  }\n)\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, required, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants({ required }), className)}\n    {...props}\n  />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n","'use client';\n\nimport { WarningCircle } from '@phosphor-icons/react/dist/ssr';\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n} from 'react-hook-form';\n\nimport { Label } from './label';\nimport { cn } from '../lib/utils';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn('relative', className)} {...props} />\n    </FormItemContext.Provider>\n  );\n});\nFormItem.displayName = 'FormItem';\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && 'text-danger-foreground', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`\n      }\n      aria-invalid={!!error}\n      className={cn(\n        'peer group ',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = 'FormControl';\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\n        'token-font-extra-small text-muted-foreground leading-4 peer-aria-[invalid=true]:text-danger-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFormDescription.displayName = 'FormDescription';\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement> & {\n    t: (key: string) => string;\n    iconClassName?: string;\n  }\n>(({ t, iconClassName, className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message) : '';\n\n  return (\n    <>\n      <WarningCircle\n        className={cn(\n          'opacity-0 absolute right-3 translate-y-[24px] bottom-[34px] text-danger-foreground transition-all',\n          body ? 'opacity-100 translate-y-0' : '',\n          iconClassName\n        )}\n        size={20}\n      />\n      <p\n        ref={ref}\n        id={formMessageId}\n        className={cn(\n          'token-font-extra-small flex h-0 items-center overflow-hidden text-danger-foreground transition-all',\n          body ? 'h-6' : '',\n          className\n        )}\n        {...props}\n      >\n        {body ? t(body) : ''}\n      </p>\n    </>\n  );\n});\nFormMessage.displayName = 'FormMessage';\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"]}

package/dist/ui/hover-card.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var HoverCardPrimitive = require('@radix-ui/react-hover-card');
+var clsx = require('clsx');
+require('sonner');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
+
+var cn = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
+var HoverCard = HoverCardPrimitive__namespace.Root;
+var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
+var HoverCardContent = React__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  HoverCardPrimitive__namespace.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-64 rounded-xl border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
+
+exports.HoverCard = HoverCard;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardTrigger = HoverCardTrigger;
+//# sourceMappingURL=hover-card.cjs.map
+//# sourceMappingURL=hover-card.cjs.map

package/dist/ui/hover-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/ui/hover-card.tsx"],"names":["twMerge","clsx","HoverCardPrimitive","React","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiCA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;ACE3E,IAAM,SAAA,GAA+BC,6BAAA,CAAA;AAErC,IAAM,gBAAA,GAAsCA,6BAAA,CAAA;AAE5C,IAAM,gBAAA,GAAyBC,gBAAA,CAAA,UAAA,CAG7B,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,QAAA,EAAU,UAAA,GAAa,CAAA,EAAG,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC5DC,cAAA;AAAA,EAAoBF,6BAAA,CAAA,OAAA;AAAA,EAAnB;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,4aAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,gBAAA,CAAiB,cAAiCA,6BAAA,CAAA,OAAA,CAAQ,WAAA","file":"hover-card.cjs","sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { toast } from \"sonner\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\nexport const capitalize = (str: string) =>\n  str?.charAt(0)?.toUpperCase() + str?.slice(1);\n\nexport const handleError = (error: { message: string }): void => {\n  toast.error(error.message);\n};\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"../lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-xl border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"]}

package/dist/ui/hover-card.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import { clsx } from 'clsx';
+import 'sonner';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var cn = (...inputs) => twMerge(clsx(inputs));
+var HoverCard = HoverCardPrimitive.Root;
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  HoverCardPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-64 rounded-xl border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+//# sourceMappingURL=hover-card.js.map
+//# sourceMappingURL=hover-card.js.map

package/dist/ui/hover-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/ui/hover-card.tsx"],"names":[],"mappings":";;;;;;;AAKO,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiC,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;ACE3E,IAAM,SAAA,GAA+B,kBAAA,CAAA;AAErC,IAAM,gBAAA,GAAsC,kBAAA,CAAA;AAE5C,IAAM,gBAAA,GAAyB,KAAA,CAAA,UAAA,CAG7B,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,QAAA,EAAU,UAAA,GAAa,CAAA,EAAG,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC5D,GAAA;AAAA,EAAoB,kBAAA,CAAA,OAAA;AAAA,EAAnB;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,4aAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,gBAAA,CAAiB,cAAiC,kBAAA,CAAA,OAAA,CAAQ,WAAA","file":"hover-card.js","sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { toast } from \"sonner\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\nexport const capitalize = (str: string) =>\n  str?.charAt(0)?.toUpperCase() + str?.slice(1);\n\nexport const handleError = (error: { message: string }): void => {\n  toast.error(error.message);\n};\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"../lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-xl border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"]}

package/dist/ui/input-otp.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var inputOtp = require('input-otp');
+var clsx = require('clsx');
+require('sonner');
+var tailwindMerge = require('tailwind-merge');
+var reactIcons = require('@radix-ui/react-icons');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var cn = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
+var InputOTP = React__namespace.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  inputOtp.OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
+  }
+));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center", className), ...props }));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React__namespace.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React__namespace.useContext(inputOtp.OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-xl first:border-l last:rounded-r-xl",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.MinusIcon, {}) }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+exports.InputOTP = InputOTP;
+exports.InputOTPGroup = InputOTPGroup;
+exports.InputOTPSeparator = InputOTPSeparator;
+exports.InputOTPSlot = InputOTPSlot;
+//# sourceMappingURL=input-otp.cjs.map
+//# sourceMappingURL=input-otp.cjs.map

package/dist/ui/input-otp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/ui/input-otp.tsx"],"names":["twMerge","clsx","React","jsx","OTPInput","OTPInputContext","jsxs","MinusIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiCA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;ACE3E,IAAM,QAAA,GAAiBC,4BAGrB,CAAC,EAAE,WAAW,kBAAA,EAAoB,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC9CC,cAAA;AAAA,EAACC,iBAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,kBAAA,EAAoB,EAAA;AAAA,MAClB,oDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,IACrD,GAAG;AAAA;AACN,CACD;AACD,QAAA,CAAS,WAAA,GAAc,UAAA;AAEvB,IAAM,gBAAsBF,gBAAA,CAAA,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,EAAG,GAAA,oCACzB,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,EAAA,CAAG,mBAAA,EAAqB,SAAS,CAAA,EAAI,GAAG,OAAO,CAC1E;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAE5B,IAAM,YAAA,GAAqBA,4BAGzB,CAAC,EAAE,OAAO,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACzC,EAAA,MAAM,eAAA,GAAwBA,4BAAWG,wBAAe,CAAA;AACxD,EAAA,MAAM,EAAE,IAAA,EAAM,YAAA,EAAc,UAAS,GAAI,eAAA,CAAgB,MAAM,KAAK,CAAA;AAEpE,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,uKAAA;AAAA,QACA,QAAA,IAAY,uBAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA,YAAA,mCACE,KAAA,EAAA,EAAI,SAAA,EAAU,yEACb,QAAA,kBAAAH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0DAAA,EAA2D,CAAA,EAC5E;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;AAE3B,IAAM,oBAA0BD,gBAAA,CAAA,UAAA,CAG9B,CAAC,EAAE,GAAG,KAAA,IAAS,GAAA,qBACfC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,MAAK,WAAA,EAAa,GAAG,OAClC,QAAA,kBAAAA,cAAA,CAACI,oBAAA,EAAA,EAAU,GACb,CACD;AACD,iBAAA,CAAkB,WAAA,GAAc,mBAAA","file":"input-otp.cjs","sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { toast } from \"sonner\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\nexport const capitalize = (str: string) =>\n  str?.charAt(0)?.toUpperCase() + str?.slice(1);\n\nexport const handleError = (error: { message: string }): void => {\n  toast.error(error.message);\n};\n","\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { cn } from \"../lib/utils\"\nimport { MinusIcon } from \"@radix-ui/react-icons\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-xl first:border-l last:rounded-r-xl\",\n        isActive && \"z-10 ring-1 ring-ring\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <MinusIcon />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"]}

package/dist/ui/input-otp.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { clsx } from 'clsx';
+import 'sonner';
+import { twMerge } from 'tailwind-merge';
+import { MinusIcon } from '@radix-ui/react-icons';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var cn = (...inputs) => twMerge(clsx(inputs));
+var InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
+  }
+));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-xl first:border-l last:rounded-r-xl",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(MinusIcon, {}) }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+//# sourceMappingURL=input-otp.js.map
+//# sourceMappingURL=input-otp.js.map

package/dist/ui/input-otp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/ui/input-otp.tsx"],"names":[],"mappings":";;;;;;;;AAKO,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiC,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;ACE3E,IAAM,QAAA,GAAiB,iBAGrB,CAAC,EAAE,WAAW,kBAAA,EAAoB,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC9C,GAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,kBAAA,EAAoB,EAAA;AAAA,MAClB,oDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,IACrD,GAAG;AAAA;AACN,CACD;AACD,QAAA,CAAS,WAAA,GAAc,UAAA;AAEvB,IAAM,gBAAsB,KAAA,CAAA,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,EAAG,GAAA,yBACzB,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,EAAA,CAAG,mBAAA,EAAqB,SAAS,CAAA,EAAI,GAAG,OAAO,CAC1E;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAE5B,IAAM,YAAA,GAAqB,iBAGzB,CAAC,EAAE,OAAO,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACzC,EAAA,MAAM,eAAA,GAAwB,iBAAW,eAAe,CAAA;AACxD,EAAA,MAAM,EAAE,IAAA,EAAM,YAAA,EAAc,UAAS,GAAI,eAAA,CAAgB,MAAM,KAAK,CAAA;AAEpE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,uKAAA;AAAA,QACA,QAAA,IAAY,uBAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA,YAAA,wBACE,KAAA,EAAA,EAAI,SAAA,EAAU,yEACb,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0DAAA,EAA2D,CAAA,EAC5E;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;AAE3B,IAAM,oBAA0B,KAAA,CAAA,UAAA,CAG9B,CAAC,EAAE,GAAG,KAAA,IAAS,GAAA,qBACf,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,MAAK,WAAA,EAAa,GAAG,OAClC,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,GACb,CACD;AACD,iBAAA,CAAkB,WAAA,GAAc,mBAAA","file":"input-otp.js","sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { toast } from \"sonner\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\nexport const capitalize = (str: string) =>\n  str?.charAt(0)?.toUpperCase() + str?.slice(1);\n\nexport const handleError = (error: { message: string }): void => {\n  toast.error(error.message);\n};\n","\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { cn } from \"../lib/utils\"\nimport { MinusIcon } from \"@radix-ui/react-icons\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-xl first:border-l last:rounded-r-xl\",\n        isActive && \"z-10 ring-1 ring-ring\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <MinusIcon />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"]}