shadcn-ui-react 0.3.0 → 0.3.1

package/dist/index.cjs

@@ -5673,7 +5673,7 @@ var import_class_variance_authority4 = require("class-variance-authority");
 var React41 = __toESM(require("react"), 1);
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority4.cva)(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-label"
 );
 var Label3 = React41.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -5712,6 +5712,7 @@ var Input = React42.forwardRef(
 Input.displayName = "Input";
 
 // src/components/Form/form-field.tsx
+var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var FormFieldContext = import_react33.default.createContext(
   null
@@ -5722,11 +5723,11 @@ var FormField = (_a) => {
     control,
     label,
     placeholder,
-    required,
+    requiredLabel,
     className = "px-4 py-6 shadow-inner drop-shadow-xl",
     labelClassName,
     messageClassName,
-    requiredClassName,
+    requiredLabelClassName,
     rules,
     shouldUnregister,
     defaultValue,
@@ -5736,11 +5737,11 @@ var FormField = (_a) => {
     "control",
     "label",
     "placeholder",
-    "required",
+    "requiredLabel",
     "className",
     "labelClassName",
     "messageClassName",
-    "requiredClassName",
+    "requiredLabelClassName",
     "rules",
     "shouldUnregister",
     "defaultValue",
@@ -5760,9 +5761,17 @@ var FormField = (_a) => {
       shouldUnregister,
       defaultValue,
       render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormItem, { children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormLabel, { className: labelClassName, children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormLabel, { className: cn("flex items-center self-center gap-0", labelClassName), children: [
           label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: cn("text-red-500", requiredClassName), children: "*" })
+          requiredLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            import_lucide_react2.Asterisk,
+            {
+              className: cn(
+                "h-3 w-3 text-red-500 ml-[1px]",
+                requiredLabelClassName
+              )
+            }
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Input,
@@ -5772,7 +5781,6 @@ var FormField = (_a) => {
               onChange == null ? void 0 : onChange(e.target.value);
             },
             placeholder,
-            required,
             className
           })
         ) }),
@@ -5902,35 +5910,35 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/components/icons.tsx
 var icon = __toESM(require("lucide-react"), 1);
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 var IconsApp = __spreadValues({
-  dashboard: import_lucide_react2.LayoutDashboardIcon,
-  logo: import_lucide_react2.Command,
-  login: import_lucide_react2.LogIn,
-  close: import_lucide_react2.X,
-  profile: import_lucide_react2.User2Icon,
-  spinner: import_lucide_react2.Loader2,
-  kanban: import_lucide_react2.CircuitBoardIcon,
-  chevronLeft: import_lucide_react2.ChevronLeft,
-  chevronRight: import_lucide_react2.ChevronRight,
-  trash: import_lucide_react2.Trash,
-  employee: import_lucide_react2.UserX2Icon,
-  post: import_lucide_react2.FileText,
-  page: import_lucide_react2.File,
-  media: import_lucide_react2.Image,
-  settings: import_lucide_react2.Settings,
-  billing: import_lucide_react2.CreditCard,
-  ellipsis: import_lucide_react2.MoreVertical,
-  add: import_lucide_react2.Plus,
-  warning: import_lucide_react2.AlertTriangle,
-  user: import_lucide_react2.User,
-  arrowRight: import_lucide_react2.ArrowRight,
-  help: import_lucide_react2.HelpCircle,
-  pizza: import_lucide_react2.Pizza,
-  sun: import_lucide_react2.SunMedium,
-  moon: import_lucide_react2.Moon,
-  laptop: import_lucide_react2.Laptop,
-  check: import_lucide_react2.Check
+  dashboard: import_lucide_react3.LayoutDashboardIcon,
+  logo: import_lucide_react3.Command,
+  login: import_lucide_react3.LogIn,
+  close: import_lucide_react3.X,
+  profile: import_lucide_react3.User2Icon,
+  spinner: import_lucide_react3.Loader2,
+  kanban: import_lucide_react3.CircuitBoardIcon,
+  chevronLeft: import_lucide_react3.ChevronLeft,
+  chevronRight: import_lucide_react3.ChevronRight,
+  trash: import_lucide_react3.Trash,
+  employee: import_lucide_react3.UserX2Icon,
+  post: import_lucide_react3.FileText,
+  page: import_lucide_react3.File,
+  media: import_lucide_react3.Image,
+  settings: import_lucide_react3.Settings,
+  billing: import_lucide_react3.CreditCard,
+  ellipsis: import_lucide_react3.MoreVertical,
+  add: import_lucide_react3.Plus,
+  warning: import_lucide_react3.AlertTriangle,
+  user: import_lucide_react3.User,
+  arrowRight: import_lucide_react3.ArrowRight,
+  help: import_lucide_react3.HelpCircle,
+  pizza: import_lucide_react3.Pizza,
+  sun: import_lucide_react3.SunMedium,
+  moon: import_lucide_react3.Moon,
+  laptop: import_lucide_react3.Laptop,
+  check: import_lucide_react3.Check
 }, icon);
 var Icons = IconsApp;
 
@@ -6315,7 +6323,7 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 // src/components/pagination.tsx
 var import_react_icons12 = require("@radix-ui/react-icons");
 var React48 = __toESM(require("react"), 1);
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Pagination = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -6384,7 +6392,7 @@ var PaginationPreviousLast = (_a) => {
       className: cn("gap-1 pl-2.5", className)
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react3.ChevronLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Previous Last" })
       ]
     })
@@ -6448,7 +6456,7 @@ var PaginationNextLast = (_a) => {
     }, props), {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Next Last" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react3.ChevronRight, { className: "h-4 w-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" })
       ]
     })
   );
@@ -7558,13 +7566,13 @@ var AlertModal = ({
 };
 
 // src/shared/breadcrumbs.tsx
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
 var import_react35 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function Breadcrumbs({ items, className, classNameList }) {
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Breadcrumb, { className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbList, { className: classNameList, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react35.Fragment, { children: [
     index !== items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbItem, { className: item.className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbLink, { href: item.link, children: item.title }) }),
-    index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react4.Slash, {}) }),
+    index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react5.Slash, {}) }),
     index === items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbPage, { children: item.title })
   ] }, item.title)) }) });
 }
@@ -7573,7 +7581,7 @@ function Breadcrumbs({ items, className, classNameList }) {
 var import_react36 = __toESM(require("react"), 1);
 var import_react_icons18 = require("@radix-ui/react-icons");
 var import_react_table = require("@tanstack/react-table");
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function DataTable({
   columns,
@@ -7727,7 +7735,7 @@ function DataTable({
                 pageIndex: pagination.pageIndex - 1
               })),
               disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react5.ChevronLeftIcon, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronLeftIcon, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -7740,7 +7748,7 @@ function DataTable({
                 pageIndex: pagination.pageIndex + 1
               })),
               disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react5.ChevronRightIcon, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronRightIcon, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -7802,7 +7810,7 @@ function DataTableSkeleton({
 
 // src/shared/fileupload.tsx
 var import_react_icons19 = require("@radix-ui/react-icons");
-var import_lucide_react6 = require("lucide-react");
+var import_lucide_react7 = require("lucide-react");
 var import_react37 = require("react");
 var import_react_dropzone = require("react-dropzone");
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -7834,7 +7842,7 @@ function FileUpload({
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("input", __spreadValues({}, getInputProps())),
         value && !!value.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ImagePreview, { file: value[0] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_icons19.AvatarIcon, { className: "h-36 w-36 text-gray-100" }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "absolute -bottom-5 left-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center bg-gray-300 bg-opacity-50 py-1 text-xs font-normal text-muted-foreground ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react6.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react7.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
           label
         ] })
       ] }))

package/dist/index.d.cts

@@ -318,12 +318,12 @@ type CustomFormFieldProps<TFieldValues extends FieldValues, TName extends FieldP
     className?: string;
     labelClassName?: string;
     messageClassName?: string;
-    requiredClassName?: string;
+    requiredLabelClassName?: string;
     label?: string;
-    required?: boolean;
+    requiredLabel?: boolean;
     onChange?: (value: string) => void;
 } & React__default.InputHTMLAttributes<HTMLInputElement>;
-declare const FormField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, required, className, labelClassName, messageClassName, requiredClassName, rules, shouldUnregister, defaultValue, onChange, ...inputProps }: CustomFormFieldProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, requiredLabel, className, labelClassName, messageClassName, requiredLabelClassName, rules, shouldUnregister, defaultValue, onChange, ...inputProps }: CustomFormFieldProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 declare const FormItem: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 declare const FormLabel: React__default.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
 declare const useFormField: () => {

package/dist/index.d.ts

@@ -318,12 +318,12 @@ type CustomFormFieldProps<TFieldValues extends FieldValues, TName extends FieldP
     className?: string;
     labelClassName?: string;
     messageClassName?: string;
-    requiredClassName?: string;
+    requiredLabelClassName?: string;
     label?: string;
-    required?: boolean;
+    requiredLabel?: boolean;
     onChange?: (value: string) => void;
 } & React__default.InputHTMLAttributes<HTMLInputElement>;
-declare const FormField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, required, className, labelClassName, messageClassName, requiredClassName, rules, shouldUnregister, defaultValue, onChange, ...inputProps }: CustomFormFieldProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, requiredLabel, className, labelClassName, messageClassName, requiredLabelClassName, rules, shouldUnregister, defaultValue, onChange, ...inputProps }: CustomFormFieldProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 declare const FormItem: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 declare const FormLabel: React__default.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
 declare const useFormField: () => {

package/dist/index.js

@@ -5429,7 +5429,7 @@ import { cva as cva4 } from "class-variance-authority";
 import * as React41 from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var labelVariants = cva4(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-label"
 );
 var Label3 = React41.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -5468,6 +5468,7 @@ var Input = React42.forwardRef(
 Input.displayName = "Input";
 
 // src/components/Form/form-field.tsx
+import { Asterisk } from "lucide-react";
 import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var FormFieldContext = React43.createContext(
   null
@@ -5478,11 +5479,11 @@ var FormField = (_a) => {
     control,
     label,
     placeholder,
-    required,
+    requiredLabel,
     className = "px-4 py-6 shadow-inner drop-shadow-xl",
     labelClassName,
     messageClassName,
-    requiredClassName,
+    requiredLabelClassName,
     rules,
     shouldUnregister,
     defaultValue,
@@ -5492,11 +5493,11 @@ var FormField = (_a) => {
     "control",
     "label",
     "placeholder",
-    "required",
+    "requiredLabel",
     "className",
     "labelClassName",
     "messageClassName",
-    "requiredClassName",
+    "requiredLabelClassName",
     "rules",
     "shouldUnregister",
     "defaultValue",
@@ -5516,9 +5517,17 @@ var FormField = (_a) => {
       shouldUnregister,
       defaultValue,
       render: ({ field }) => /* @__PURE__ */ jsxs10(FormItem, { children: [
-        label && /* @__PURE__ */ jsxs10(FormLabel, { className: labelClassName, children: [
+        label && /* @__PURE__ */ jsxs10(FormLabel, { className: cn("flex items-center self-center gap-0", labelClassName), children: [
           label,
-          required && /* @__PURE__ */ jsx19("span", { className: cn("text-red-500", requiredClassName), children: "*" })
+          requiredLabel && /* @__PURE__ */ jsx19(
+            Asterisk,
+            {
+              className: cn(
+                "h-3 w-3 text-red-500 ml-[1px]",
+                requiredLabelClassName
+              )
+            }
+          )
         ] }),
         /* @__PURE__ */ jsx19(FormControl, { children: /* @__PURE__ */ jsx19(
           Input,
@@ -5528,7 +5537,6 @@ var FormField = (_a) => {
               onChange == null ? void 0 : onChange(e.target.value);
             },
             placeholder,
-            required,
             className
           })
         ) }),

package/dist/style.css

@@ -443,6 +443,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-\[1px\] {
+    margin-left: 1px;
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -726,6 +729,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -787,6 +793,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .self-center {
+    align-self: center;
+  }
   .overflow-auto {
     overflow: auto;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",
@@ -68,7 +68,7 @@
     "autoprefixer": "^10.4.21",
     "babel-jest": "^29.7.0",
     "cross-env": "^7.0.3",
-    "eslint": "^9.24.0",
+    "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "identity-obj-proxy": "^3.0.0",
@@ -97,48 +97,48 @@
     "access": "public"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.4",
-    "@radix-ui/react-alert-dialog": "^1.1.7",
-    "@radix-ui/react-aspect-ratio": "^1.1.3",
-    "@radix-ui/react-avatar": "^1.1.4",
-    "@radix-ui/react-checkbox": "^1.1.5",
-    "@radix-ui/react-collapsible": "^1.1.4",
-    "@radix-ui/react-context-menu": "^2.2.7",
-    "@radix-ui/react-dialog": "^1.1.7",
-    "@radix-ui/react-dropdown-menu": "^2.1.7",
-    "@radix-ui/react-hover-card": "^1.1.7",
+    "@radix-ui/react-accordion": "^1.2.7",
+    "@radix-ui/react-alert-dialog": "^1.1.10",
+    "@radix-ui/react-aspect-ratio": "^1.1.4",
+    "@radix-ui/react-avatar": "^1.1.6",
+    "@radix-ui/react-checkbox": "^1.2.2",
+    "@radix-ui/react-collapsible": "^1.1.7",
+    "@radix-ui/react-context-menu": "^2.2.11",
+    "@radix-ui/react-dialog": "^1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.11",
+    "@radix-ui/react-hover-card": "^1.1.10",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.3",
-    "@radix-ui/react-menubar": "^1.1.7",
-    "@radix-ui/react-navigation-menu": "^1.2.6",
-    "@radix-ui/react-popover": "^1.1.7",
-    "@radix-ui/react-progress": "^1.1.3",
-    "@radix-ui/react-radio-group": "^1.2.4",
-    "@radix-ui/react-scroll-area": "^1.2.4",
-    "@radix-ui/react-select": "^2.1.7",
-    "@radix-ui/react-separator": "^1.1.3",
-    "@radix-ui/react-slider": "^1.2.4",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-menubar": "^1.1.11",
+    "@radix-ui/react-navigation-menu": "^1.2.9",
+    "@radix-ui/react-popover": "^1.1.10",
+    "@radix-ui/react-progress": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.3.3",
+    "@radix-ui/react-scroll-area": "^1.2.5",
+    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-slider": "^1.3.2",
     "@radix-ui/react-slot": "^1.2.0",
-    "@radix-ui/react-switch": "^1.1.4",
-    "@radix-ui/react-tabs": "^1.1.4",
-    "@radix-ui/react-toast": "^1.2.7",
-    "@radix-ui/react-toggle": "^1.1.3",
-    "@radix-ui/react-toggle-group": "^1.1.3",
-    "@radix-ui/react-tooltip": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.8",
+    "@radix-ui/react-toast": "^1.2.10",
+    "@radix-ui/react-toggle": "^1.1.6",
+    "@radix-ui/react-toggle-group": "^1.1.7",
+    "@radix-ui/react-tooltip": "^1.2.3",
     "@tanstack/react-table": "^8.21.3",
-    "@vitejs/plugin-react": "^4.4.0",
+    "@vitejs/plugin-react": "^4.4.1",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.493.0",
+    "lucide-react": "^0.501.0",
     "next-themes": "^0.4.6",
     "react-dropzone": "^14.3.8",
     "react-helmet-next": "^0.0.1",
-    "react-hook-form": "^7.55.0",
-    "react-resizable-panels": "^2.1.7",
+    "react-hook-form": "^7.56.0",
+    "react-resizable-panels": "^2.1.8",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.2.0",
     "tailwind-variants": "^1.0.0",