fina-react-ds 1.0.13 → 1.0.14

package/dist/components/date-picker.d.ts

@@ -2,5 +2,5 @@ export declare function DatePicker({ placeholder, onChange, value, isClearable,
     placeholder?: string;
     onChange?: (date: Date | null) => void;
     value?: Date | null | undefined;
-    isClearable: boolean;
+    isClearable?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-date.d.ts

@@ -0,0 +1,6 @@
+import { DatePicker } from "./date-picker";
+export declare function FormDate({ name, label, required, ...props }: {
+    name: string;
+    label: string;
+    required?: boolean;
+} & React.ComponentProps<typeof DatePicker>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-date.js

@@ -0,0 +1,30 @@
+var s = Object.defineProperty;
+var m = (o, e) => s(o, "name", { value: e, configurable: !0 });
+import { jsx as r, jsxs as F } from "react/jsx-runtime";
+import { useFormContext as a } from "react-hook-form";
+import { FormField as c, FormItem as f, FormLabel as d, FormControl as p, FormMessage as u } from "./form.js";
+import { DatePicker as x } from "./date-picker.js";
+function g({
+  name: o,
+  label: e,
+  required: t = !1,
+  ...i
+}) {
+  const { control: n } = a();
+  return /* @__PURE__ */ r(
+    c,
+    {
+      control: n,
+      name: o,
+      render: /* @__PURE__ */ m(({ field: l }) => /* @__PURE__ */ F(f, { children: [
+        /* @__PURE__ */ r(d, { required: t, children: e }),
+        /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(x, { ...l, ...i, isClearable: !0 }) }),
+        /* @__PURE__ */ r(u, {})
+      ] }), "render")
+    }
+  );
+}
+m(g, "FormDate");
+export {
+  g as FormDate
+};

package/dist/components/form-file-uploader.d.ts

@@ -0,0 +1,6 @@
+import { FileUploader } from "./file-uploader";
+export declare function FormFileUploader({ name, label, required, ...props }: {
+    name: string;
+    label: string;
+    required?: boolean;
+} & React.ComponentProps<typeof FileUploader>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-file-uploader.js

@@ -0,0 +1,30 @@
+var F = Object.defineProperty;
+var m = (o, e) => F(o, "name", { value: e, configurable: !0 });
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { useFormContext as s } from "react-hook-form";
+import { FormField as f, FormItem as p, FormLabel as a, FormControl as c, FormMessage as u } from "./form.js";
+import { FileUploader as x } from "./file-uploader.js";
+function v({
+  name: o,
+  label: e,
+  required: l = !1,
+  ...t
+}) {
+  const { control: i } = s();
+  return /* @__PURE__ */ r(
+    f,
+    {
+      control: i,
+      name: o,
+      render: /* @__PURE__ */ m(({ field: { value: h, ...n } }) => /* @__PURE__ */ d(p, { children: [
+        /* @__PURE__ */ r(a, { required: l, children: e }),
+        /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(x, { ...n, ...t }) }),
+        /* @__PURE__ */ r(u, {})
+      ] }), "render")
+    }
+  );
+}
+m(v, "FormFileUploader");
+export {
+  v as FormFileUploader
+};

package/dist/components/form-input.d.ts

@@ -0,0 +1,6 @@
+import { Input } from "./input";
+export declare function FormInput({ name, label, required, ...props }: {
+    name: string;
+    label: string;
+    required: boolean;
+} & React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-input.js

@@ -0,0 +1,33 @@
+var u = Object.defineProperty;
+var t = (o, e) => u(o, "name", { value: e, configurable: !0 });
+import { jsx as r, jsxs as F } from "react/jsx-runtime";
+import { useFormContext as c } from "react-hook-form";
+import { FormField as f, FormItem as d, FormLabel as a, FormControl as x, FormMessage as h } from "./form.js";
+import { Input as I } from "./input.js";
+function L({
+  name: o,
+  label: e,
+  required: m = !1,
+  ...n
+}) {
+  const { control: l } = c();
+  return /* @__PURE__ */ r(
+    f,
+    {
+      control: l,
+      name: o,
+      render: /* @__PURE__ */ t(({ field: i }) => {
+        const { value: s, ...p } = i;
+        return /* @__PURE__ */ F(d, { children: [
+          /* @__PURE__ */ r(a, { required: m, children: e }),
+          /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(I, { value: s ?? "", ...p, ...n }) }),
+          /* @__PURE__ */ r(h, {})
+        ] });
+      }, "render")
+    }
+  );
+}
+t(L, "FormInput");
+export {
+  L as FormInput
+};

package/dist/components/form-select.d.ts

@@ -0,0 +1,13 @@
+import { Select } from "./select";
+export declare function FormSelect({ name, label, required, options, isMulti, isClearable, onChange, ...props }: {
+    name: string;
+    label: string;
+    required?: boolean;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    isMulti?: boolean;
+    isClearable?: boolean;
+    onChange?: (value: unknown) => void;
+} & React.ComponentProps<typeof Select>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-select.js

@@ -0,0 +1,49 @@
+var h = Object.defineProperty;
+var o = (e, t) => h(e, "name", { value: t, configurable: !0 });
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { useFormContext as x } from "react-hook-form";
+import { FormField as C, FormItem as g, FormLabel as j, FormControl as S, FormMessage as b } from "./form.js";
+import { Select as I } from "./select.js";
+function q({
+  name: e,
+  label: t,
+  required: i = !1,
+  options: l,
+  isMulti: s = !1,
+  isClearable: f = !0,
+  onChange: n = void 0,
+  ...c
+}) {
+  const { control: d } = x();
+  return /* @__PURE__ */ r(
+    C,
+    {
+      control: d,
+      name: e,
+      render: /* @__PURE__ */ o(({ field: F }) => {
+        const { onChange: p, ...a } = F;
+        return /* @__PURE__ */ u(g, { children: [
+          /* @__PURE__ */ r(j, { required: i, children: t }),
+          /* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(
+            I,
+            {
+              onChange: /* @__PURE__ */ o((m) => {
+                p(m), n && n(m);
+              }, "onChange"),
+              ...a,
+              options: l,
+              isMulti: s,
+              isClearable: f,
+              ...c
+            }
+          ) }),
+          /* @__PURE__ */ r(b, {})
+        ] });
+      }, "render")
+    }
+  );
+}
+o(q, "FormSelect");
+export {
+  q as FormSelect
+};

package/dist/components/form-switch.d.ts

@@ -0,0 +1,4 @@
+export declare function FormSwitch({ name, label }: {
+    name: string;
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-switch.js

@@ -0,0 +1,35 @@
+var s = Object.defineProperty;
+var o = (r, e) => s(r, "name", { value: e, configurable: !0 });
+import { jsx as m, jsxs as f } from "react/jsx-runtime";
+import { useId as h } from "react";
+import { FormField as l, FormItem as d } from "./form.js";
+import { Switch as p } from "./switch.js";
+import { Label as a } from "./label.js";
+import { useFormContext as F } from "react-hook-form";
+function I({ name: r, label: e }) {
+  const { control: n } = F(), t = h();
+  return /* @__PURE__ */ m(
+    l,
+    {
+      control: n,
+      name: r,
+      render: /* @__PURE__ */ o(({ field: c }) => /* @__PURE__ */ f(d, { className: "fc:flex fc:items-center", children: [
+        /* @__PURE__ */ m(
+          p,
+          {
+            id: t,
+            checked: c.value,
+            onCheckedChange: /* @__PURE__ */ o((i) => {
+              c.onChange(i);
+            }, "onCheckedChange")
+          }
+        ),
+        /* @__PURE__ */ m(a, { htmlFor: t, children: e })
+      ] }), "render")
+    }
+  );
+}
+o(I, "FormSwitch");
+export {
+  I as FormSwitch
+};

package/dist/components/form-textarea.d.ts

@@ -0,0 +1,6 @@
+import { Textarea } from "./textarea";
+export declare function FormTextarea({ name, label, required, ...props }: {
+    name: string;
+    label: string;
+    required?: boolean;
+} & React.ComponentProps<typeof Textarea>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-textarea.js

@@ -0,0 +1,33 @@
+var F = Object.defineProperty;
+var t = (o, e) => F(o, "name", { value: e, configurable: !0 });
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { useFormContext as f } from "react-hook-form";
+import { FormField as d, FormItem as p, FormLabel as u, FormControl as x, FormMessage as h } from "./form.js";
+import { Textarea as j } from "./textarea.js";
+function I({
+  name: o,
+  label: e,
+  required: m = !1,
+  ...n
+}) {
+  const { control: l } = f();
+  return /* @__PURE__ */ r(
+    d,
+    {
+      control: l,
+      name: o,
+      render: /* @__PURE__ */ t(({ field: i }) => {
+        const { value: s, ...a } = i;
+        return /* @__PURE__ */ c(p, { children: [
+          /* @__PURE__ */ r(u, { required: m, children: e }),
+          /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(j, { value: s ?? "", ...a, ...n }) }),
+          /* @__PURE__ */ r(h, {})
+        ] });
+      }, "render")
+    }
+  );
+}
+t(I, "FormTextarea");
+export {
+  I as FormTextarea
+};

package/dist/components/form.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FormLabel({ className, required, ...props }: React.ComponentProps<typeof LabelPrimitive.Root> & {
+    required: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/dist/components/form.js

@@ -0,0 +1,110 @@
+var u = Object.defineProperty;
+var n = (t, e) => u(t, "name", { value: e, configurable: !0 });
+import { jsx as s } from "react/jsx-runtime";
+import * as i from "react";
+import { Root as F } from "../node_modules/@radix-ui/react-slot/dist/index.js";
+import { FormProvider as x, useFormContext as I, useFormState as p, Controller as g } from "react-hook-form";
+import { cn as c } from "../lib/utils.js";
+import { Label as C } from "./label.js";
+const M = x, f = i.createContext(
+  {}
+), N = /* @__PURE__ */ n(({
+  ...t
+}) => /* @__PURE__ */ s(f.Provider, { value: { name: t.name }, children: /* @__PURE__ */ s(g, { ...t }) }), "FormField"), d = /* @__PURE__ */ n(() => {
+  const t = i.useContext(f), e = i.useContext(l), { getFieldState: o } = I(), r = p({ name: t.name }), m = o(t.name, r);
+  if (!t)
+    throw new Error("useFormField should be used within <FormField>");
+  const { id: a } = e;
+  return {
+    id: a,
+    name: t.name,
+    formItemId: `${a}-form-item`,
+    formDescriptionId: `${a}-form-item-description`,
+    formMessageId: `${a}-form-item-message`,
+    ...m
+  };
+}, "useFormField"), l = i.createContext(
+  {}
+);
+function w({ className: t, ...e }) {
+  const o = i.useId();
+  return /* @__PURE__ */ s(l.Provider, { value: { id: o }, children: /* @__PURE__ */ s(
+    "div",
+    {
+      "data-slot": "form-item",
+      className: c("fc:grid fc:gap-2", t),
+      ...e
+    }
+  ) });
+}
+n(w, "FormItem");
+function P({
+  className: t,
+  required: e = !1,
+  ...o
+}) {
+  const { error: r, formItemId: m } = d();
+  return /* @__PURE__ */ s(
+    C,
+    {
+      "data-slot": "form-label",
+      "data-error": !!r,
+      className: c("fc:data-[error=true]:text-destructive", t),
+      htmlFor: m,
+      required: e,
+      ...o
+    }
+  );
+}
+n(P, "FormLabel");
+function y({ ...t }) {
+  const { error: e, formItemId: o, formDescriptionId: r, formMessageId: m } = d();
+  return /* @__PURE__ */ s(
+    F,
+    {
+      "data-slot": "form-control",
+      id: o,
+      "aria-describedby": e ? `${r} ${m}` : `${r}`,
+      "aria-invalid": !!e,
+      ...t
+    }
+  );
+}
+n(y, "FormControl");
+function L({ className: t, ...e }) {
+  const { formDescriptionId: o } = d();
+  return /* @__PURE__ */ s(
+    "p",
+    {
+      "data-slot": "form-description",
+      id: o,
+      className: c("fc:text-muted fc:text-sm", t),
+      ...e
+    }
+  );
+}
+n(L, "FormDescription");
+function R({ className: t, ...e }) {
+  const { error: o, formMessageId: r } = d(), m = o ? String((o == null ? void 0 : o.message) ?? "") : e.children;
+  return m ? /* @__PURE__ */ s(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: r,
+      className: c("fc:text-destructive fc:text-sm", t),
+      ...e,
+      children: m
+    }
+  ) : null;
+}
+n(R, "FormMessage");
+export {
+  M as Form,
+  y as FormControl,
+  L as FormDescription,
+  N as FormField,
+  w as FormItem,
+  P as FormLabel,
+  R as FormMessage,
+  d as useFormField
+};

package/dist/index.d.ts

@@ -31,4 +31,11 @@ export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableC
 export { Tabs, TabsList, TabsTrigger, TabsContent } from "./components/tabs";
 export { Textarea } from "./components/textarea";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, } from "./components/tooltip";
+export { FormDate } from "./components/form-date";
+export { FormFileUploader } from "./components/form-file-uploader";
+export { FormInput } from "./components/form-input";
+export { FormSelect } from "./components/form-select";
+export { FormSwitch } from "./components/form-switch";
+export { FormTextarea } from "./components/form-textarea";
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, } from "./components/form";
 export { ThemeProvider, useTheme } from "./providers/theme-provider";

package/dist/index.js

@@ -1,68 +1,75 @@
-import { AlertDialog as r, AlertDialogAction as t, AlertDialogCancel as a, AlertDialogContent as i, AlertDialogDescription as n, AlertDialogFooter as l, AlertDialogHeader as p, AlertDialogOverlay as d, AlertDialogPortal as g, AlertDialogTitle as b, AlertDialogTrigger as S } from "./components/alert-dialog.js";
-import { Alert as m, AlertDescription as D, AlertTitle as x } from "./components/alert.js";
-import { Badge as f } from "./components/badge.js";
-import { Button as M, buttonVariants as s } from "./components/button.js";
-import { Avatar as P, AvatarFallback as c, AvatarImage as w } from "./components/avatar.js";
-import { Calendar as v } from "./components/calendar.js";
-import { Card as I, CardAction as k, CardContent as F, CardDescription as B, CardFooter as G, CardHeader as L, CardTitle as R } from "./components/card.js";
+import { AlertDialog as r, AlertDialogAction as t, AlertDialogCancel as a, AlertDialogContent as i, AlertDialogDescription as n, AlertDialogFooter as p, AlertDialogHeader as l, AlertDialogOverlay as d, AlertDialogPortal as m, AlertDialogTitle as g, AlertDialogTrigger as S } from "./components/alert-dialog.js";
+import { Alert as u, AlertDescription as x, AlertTitle as D } from "./components/alert.js";
+import { Badge as T } from "./components/badge.js";
+import { Button as s, buttonVariants as M } from "./components/button.js";
+import { Avatar as c, AvatarFallback as A, AvatarImage as P } from "./components/avatar.js";
+import { Calendar as h } from "./components/calendar.js";
+import { Card as I, CardAction as H, CardContent as k, CardDescription as B, CardFooter as L, CardHeader as G, CardTitle as R } from "./components/card.js";
 import { Checkbox as O } from "./components/checkbox.js";
-import { DatePicker as N } from "./components/date-picker.js";
+import { DatePicker as E } from "./components/date-picker.js";
 import { Dialog as V, DialogClose as j, DialogContent as q, DialogDescription as z, DialogFooter as J, DialogHeader as K, DialogOverlay as Q, DialogPortal as W, DialogTitle as X, DialogTrigger as Y } from "./components/dialog.js";
 import { DataLoader as _ } from "./components/data-loader.js";
-import { DropdownMenu as ee, DropdownMenuCheckboxItem as oe, DropdownMenuContent as re, DropdownMenuGroup as te, DropdownMenuItem as ae, DropdownMenuLabel as ie, DropdownMenuPortal as ne, DropdownMenuRadioGroup as le, DropdownMenuRadioItem as pe, DropdownMenuSeparator as de, DropdownMenuShortcut as ge, DropdownMenuSub as be, DropdownMenuSubContent as Se, DropdownMenuSubTrigger as ue, DropdownMenuTrigger as me } from "./components/dropdown-menu.js";
-import { FileUploader as xe } from "./components/file-uploader.js";
-import { HoverCard as fe, HoverCardContent as Ce, HoverCardTrigger as Me } from "./components/hover-card.js";
-import { Input as Ae } from "./components/input.js";
-import { Label as ce } from "./components/label.js";
-import { ModeToggle as he } from "./components/mode-toggle.js";
-import { Pagination as He, PaginationContent as Ie, PaginationEllipsis as ke, PaginationItem as Fe, PaginationLink as Be, PaginationNext as Ge, PaginationPrevious as Le } from "./components/pagination.js";
+import { DropdownMenu as ee, DropdownMenuCheckboxItem as oe, DropdownMenuContent as re, DropdownMenuGroup as te, DropdownMenuItem as ae, DropdownMenuLabel as ie, DropdownMenuPortal as ne, DropdownMenuRadioGroup as pe, DropdownMenuRadioItem as le, DropdownMenuSeparator as de, DropdownMenuShortcut as me, DropdownMenuSub as ge, DropdownMenuSubContent as Se, DropdownMenuSubTrigger as be, DropdownMenuTrigger as ue } from "./components/dropdown-menu.js";
+import { FileUploader as De } from "./components/file-uploader.js";
+import { HoverCard as Te, HoverCardContent as Ce, HoverCardTrigger as se } from "./components/hover-card.js";
+import { Input as Fe } from "./components/input.js";
+import { Label as Ae } from "./components/label.js";
+import { ModeToggle as we } from "./components/mode-toggle.js";
+import { Pagination as ve, PaginationContent as Ie, PaginationEllipsis as He, PaginationItem as ke, PaginationLink as Be, PaginationNext as Le, PaginationPrevious as Ge } from "./components/pagination.js";
 import { PasswordRulesChecker as ye } from "./components/password-rules-checker.js";
-import { Popover as Ee, PopoverAnchor as Ne, PopoverContent as Ue, PopoverTrigger as Ve } from "./components/popover.js";
+import { Popover as Ue, PopoverAnchor as Ee, PopoverContent as Ne, PopoverTrigger as Ve } from "./components/popover.js";
 import { Select as qe } from "./components/select.js";
 import { Separator as Je } from "./components/separator.js";
 import { Sheet as Qe, SheetBody as We, SheetClose as Xe, SheetContent as Ye, SheetDescription as Ze, SheetFooter as _e, SheetHeader as $e, SheetTitle as eo, SheetTrigger as oo } from "./components/sheet.js";
-import { Sidebar as to, SidebarContent as ao, SidebarFooter as io, SidebarGroup as no, SidebarGroupAction as lo, SidebarGroupContent as po, SidebarGroupLabel as go, SidebarHeader as bo, SidebarInput as So, SidebarInset as uo, SidebarMenu as mo, SidebarMenuAction as Do, SidebarMenuBadge as xo, SidebarMenuButton as To, SidebarMenuItem as fo, SidebarMenuSkeleton as Co, SidebarMenuSub as Mo, SidebarMenuSubButton as so, SidebarMenuSubItem as Ao, SidebarProvider as Po, SidebarRail as co, SidebarSeparator as wo, SidebarTrigger as ho, useSidebar as vo } from "./components/sidebar.js";
+import { Sidebar as to, SidebarContent as ao, SidebarFooter as io, SidebarGroup as no, SidebarGroupAction as po, SidebarGroupContent as lo, SidebarGroupLabel as mo, SidebarHeader as go, SidebarInput as So, SidebarInset as bo, SidebarMenu as uo, SidebarMenuAction as xo, SidebarMenuBadge as Do, SidebarMenuButton as fo, SidebarMenuItem as To, SidebarMenuSkeleton as Co, SidebarMenuSub as so, SidebarMenuSubButton as Mo, SidebarMenuSubItem as Fo, SidebarProvider as co, SidebarRail as Ao, SidebarSeparator as Po, SidebarTrigger as wo, useSidebar as ho } from "./components/sidebar.js";
 import { SimplePagination as Io } from "./components/simple-pagination.js";
-import { SimpleTooltip as Fo } from "./components/simple-tooltip.js";
-import { Skeleton as Go } from "./components/skeleton.js";
+import { SimpleTooltip as ko } from "./components/simple-tooltip.js";
+import { Skeleton as Lo } from "./components/skeleton.js";
 import { Switch as Ro } from "./components/switch.js";
 import { Toaster as Oo } from "./components/sonner.js";
-import { Table as No, TableBody as Uo, TableCaption as Vo, TableCell as jo, TableFooter as qo, TableHead as zo, TableHeader as Jo, TableRow as Ko } from "./components/table.js";
+import { Table as Eo, TableBody as No, TableCaption as Vo, TableCell as jo, TableFooter as qo, TableHead as zo, TableHeader as Jo, TableRow as Ko } from "./components/table.js";
 import { Tabs as Wo, TabsContent as Xo, TabsList as Yo, TabsTrigger as Zo } from "./components/tabs.js";
 import { Textarea as $o } from "./components/textarea.js";
 import { Tooltip as or, TooltipContent as rr, TooltipProvider as tr, TooltipTrigger as ar } from "./components/tooltip.js";
-import { ThemeProvider as nr, useTheme as lr } from "./providers/theme-provider.js";
+import { FormDate as nr } from "./components/form-date.js";
+import { FormFileUploader as lr } from "./components/form-file-uploader.js";
+import { FormInput as mr } from "./components/form-input.js";
+import { FormSelect as Sr } from "./components/form-select.js";
+import { FormSwitch as ur } from "./components/form-switch.js";
+import { FormTextarea as Dr } from "./components/form-textarea.js";
+import { Form as Tr, FormControl as Cr, FormDescription as sr, FormField as Mr, FormItem as Fr, FormLabel as cr, FormMessage as Ar, useFormField as Pr } from "./components/form.js";
+import { ThemeProvider as hr, useTheme as vr } from "./providers/theme-provider.js";
 export {
-  m as Alert,
-  D as AlertDescription,
+  u as Alert,
+  x as AlertDescription,
   r as AlertDialog,
   t as AlertDialogAction,
   a as AlertDialogCancel,
   i as AlertDialogContent,
   n as AlertDialogDescription,
-  l as AlertDialogFooter,
-  p as AlertDialogHeader,
+  p as AlertDialogFooter,
+  l as AlertDialogHeader,
   d as AlertDialogOverlay,
-  g as AlertDialogPortal,
-  b as AlertDialogTitle,
+  m as AlertDialogPortal,
+  g as AlertDialogTitle,
   S as AlertDialogTrigger,
-  x as AlertTitle,
-  P as Avatar,
-  c as AvatarFallback,
-  w as AvatarImage,
-  f as Badge,
-  M as Button,
-  v as Calendar,
+  D as AlertTitle,
+  c as Avatar,
+  A as AvatarFallback,
+  P as AvatarImage,
+  T as Badge,
+  s as Button,
+  h as Calendar,
   I as Card,
-  k as CardAction,
-  F as CardContent,
+  H as CardAction,
+  k as CardContent,
   B as CardDescription,
-  G as CardFooter,
-  L as CardHeader,
+  L as CardFooter,
+  G as CardHeader,
   R as CardTitle,
   O as Checkbox,
   _ as DataLoader,
-  N as DatePicker,
+  E as DatePicker,
   V as Dialog,
   j as DialogClose,
   q as DialogContent,
@@ -80,32 +87,45 @@ export {
   ae as DropdownMenuItem,
   ie as DropdownMenuLabel,
   ne as DropdownMenuPortal,
-  le as DropdownMenuRadioGroup,
-  pe as DropdownMenuRadioItem,
+  pe as DropdownMenuRadioGroup,
+  le as DropdownMenuRadioItem,
   de as DropdownMenuSeparator,
-  ge as DropdownMenuShortcut,
-  be as DropdownMenuSub,
+  me as DropdownMenuShortcut,
+  ge as DropdownMenuSub,
   Se as DropdownMenuSubContent,
-  ue as DropdownMenuSubTrigger,
-  me as DropdownMenuTrigger,
-  xe as FileUploader,
-  fe as HoverCard,
+  be as DropdownMenuSubTrigger,
+  ue as DropdownMenuTrigger,
+  De as FileUploader,
+  Tr as Form,
+  Cr as FormControl,
+  nr as FormDate,
+  sr as FormDescription,
+  Mr as FormField,
+  lr as FormFileUploader,
+  mr as FormInput,
+  Fr as FormItem,
+  cr as FormLabel,
+  Ar as FormMessage,
+  Sr as FormSelect,
+  ur as FormSwitch,
+  Dr as FormTextarea,
+  Te as HoverCard,
   Ce as HoverCardContent,
-  Me as HoverCardTrigger,
-  Ae as Input,
-  ce as Label,
-  he as ModeToggle,
-  He as Pagination,
+  se as HoverCardTrigger,
+  Fe as Input,
+  Ae as Label,
+  we as ModeToggle,
+  ve as Pagination,
   Ie as PaginationContent,
-  ke as PaginationEllipsis,
-  Fe as PaginationItem,
+  He as PaginationEllipsis,
+  ke as PaginationItem,
   Be as PaginationLink,
-  Ge as PaginationNext,
-  Le as PaginationPrevious,
+  Le as PaginationNext,
+  Ge as PaginationPrevious,
   ye as PasswordRulesChecker,
-  Ee as Popover,
-  Ne as PopoverAnchor,
-  Ue as PopoverContent,
+  Ue as Popover,
+  Ee as PopoverAnchor,
+  Ne as PopoverContent,
   Ve as PopoverTrigger,
   qe as Select,
   Je as Separator,
@@ -122,31 +142,31 @@ export {
   ao as SidebarContent,
   io as SidebarFooter,
   no as SidebarGroup,
-  lo as SidebarGroupAction,
-  po as SidebarGroupContent,
-  go as SidebarGroupLabel,
-  bo as SidebarHeader,
+  po as SidebarGroupAction,
+  lo as SidebarGroupContent,
+  mo as SidebarGroupLabel,
+  go as SidebarHeader,
   So as SidebarInput,
-  uo as SidebarInset,
-  mo as SidebarMenu,
-  Do as SidebarMenuAction,
-  xo as SidebarMenuBadge,
-  To as SidebarMenuButton,
-  fo as SidebarMenuItem,
+  bo as SidebarInset,
+  uo as SidebarMenu,
+  xo as SidebarMenuAction,
+  Do as SidebarMenuBadge,
+  fo as SidebarMenuButton,
+  To as SidebarMenuItem,
   Co as SidebarMenuSkeleton,
-  Mo as SidebarMenuSub,
-  so as SidebarMenuSubButton,
-  Ao as SidebarMenuSubItem,
-  Po as SidebarProvider,
-  co as SidebarRail,
-  wo as SidebarSeparator,
-  ho as SidebarTrigger,
+  so as SidebarMenuSub,
+  Mo as SidebarMenuSubButton,
+  Fo as SidebarMenuSubItem,
+  co as SidebarProvider,
+  Ao as SidebarRail,
+  Po as SidebarSeparator,
+  wo as SidebarTrigger,
   Io as SimplePagination,
-  Fo as SimpleTooltip,
-  Go as Skeleton,
+  ko as SimpleTooltip,
+  Lo as Skeleton,
   Ro as Switch,
-  No as Table,
-  Uo as TableBody,
+  Eo as Table,
+  No as TableBody,
   Vo as TableCaption,
   jo as TableCell,
   qo as TableFooter,
@@ -158,13 +178,14 @@ export {
   Yo as TabsList,
   Zo as TabsTrigger,
   $o as Textarea,
-  nr as ThemeProvider,
+  hr as ThemeProvider,
   Oo as Toaster,
   or as Tooltip,
   rr as TooltipContent,
   tr as TooltipProvider,
   ar as TooltipTrigger,
-  s as buttonVariants,
-  vo as useSidebar,
-  lr as useTheme
+  M as buttonVariants,
+  Pr as useFormField,
+  ho as useSidebar,
+  vr as useTheme
 };

package/dist/themes/base.css

@@ -2111,6 +2111,11 @@
       opacity: 50%;
     }
   }
+  .fc\:data-\[error\=true\]\:text-destructive {
+    &[data-error="true"] {
+      color: var(--destructive);
+    }
+  }
   .fc\:data-\[inset\]\:pl-8 {
     &[data-inset] {
       padding-left: calc(var(--fc-spacing) * 8);

package/package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/F1na/fina-react-ds"
   },
   "private": false,
-  "version": "1.0.13",
+  "version": "1.0.14",
   "type": "module",
   "files": [
     "dist"
@@ -54,6 +54,7 @@
     "globals": "^15.15.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.60.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.43.0",
     "tailwindcss": "^4.1.11",
@@ -74,6 +75,7 @@
     "react-colorful": "^5.6.1",
     "react-day-picker": "9.7.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.60.0",
     "react-select": "^5.10.1",
     "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.1"