shad-m 1.0.2 → 1.0.3

package/dist/common/display/sidebar/sidebar-sheet.mjs

@@ -0,0 +1,118 @@
+import { jsx } from 'react/jsx-runtime';
+import { useSidebar } from '@/components/sidebar';
+import { useDevice } from '@/hooks/useDevice';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { SheetWrapper } from '../../interactive/sheet-wrapper';
+
+function SidebarSheet({
+  open,
+  onClose,
+  title,
+  headerClassName,
+  childrenClassName,
+  contentClassName,
+  children,
+  ...props
+}) {
+  const { isDesktop } = useDevice();
+  const { config, customWidth, state, isHovered } = useSidebar();
+  const sidebarWidth = React.useMemo(() => {
+    if (!isDesktop) return 0;
+    if (state === "collapsed" && isHovered) {
+      const width2 = config.width;
+      return width2.endsWith("rem") ? parseFloat(width2) * 16 : parseFloat(width2);
+    }
+    if (state === "collapsed") {
+      const iconWidth = config.widthIcon;
+      return iconWidth.endsWith("rem") ? parseFloat(iconWidth) * 16 : parseFloat(iconWidth);
+    }
+    if (customWidth) {
+      return customWidth;
+    }
+    const width = config.width;
+    return width.endsWith("rem") ? parseFloat(width) * 16 : parseFloat(width);
+  }, [isDesktop, state, config, customWidth, isHovered]);
+  React.useEffect(() => {
+    if (!isDesktop || !open) return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (target.closest("[data-notification-trigger]")) {
+        return;
+      }
+      if (target.closest('[role="dialog"]')) {
+        return;
+      }
+      if (target.closest('[data-sidebar="inset"]')) {
+        onClose();
+        return;
+      }
+      if (target.closest("[data-sidebar] a")) {
+        return;
+      }
+      if (target.closest("[data-sidebar]")) {
+        return;
+      }
+      onClose();
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside, true);
+    }, 100);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside, true);
+    };
+  }, [isDesktop, open, onClose]);
+  const handleInteractOutside = React.useCallback((event) => {
+    const target = event.target;
+    if (target.closest("[data-notification-trigger]")) {
+      event.preventDefault();
+      return;
+    }
+    if (target.closest('[data-sidebar="inset"]')) {
+      return;
+    }
+    if (target.closest("[data-sidebar] a")) {
+      event.preventDefault();
+      return;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    SheetWrapper,
+    {
+      open,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          onClose();
+        }
+      },
+      modal: !isDesktop,
+      side: !isDesktop ? "bottom" : "left",
+      sideOffset: isDesktop ? sidebarWidth : void 0,
+      showHeader: !!title,
+      title,
+      headerClassName,
+      childrenClassName,
+      contentClassName: cn(
+        "p-0 gap-0",
+        // Mobile styles - with backdrop overlay, full screen height
+        !isDesktop && `h-[100dvh] !max-h-[100dvh]`,
+        // Desktop styles - positioned next to sidebar, no backdrop
+        isDesktop && `!z-[35] !w-[390px]`,
+        contentClassName
+      ),
+      onOpenAutoFocus: (e) => {
+        if (!isDesktop) {
+          e.preventDefault();
+        }
+      },
+      onInteractOutside: handleInteractOutside,
+      ...props,
+      children
+    }
+  );
+}
+
+export { SidebarSheet };
+//# sourceMappingURL=sidebar-sheet.mjs.map
+//# sourceMappingURL=sidebar-sheet.mjs.map

package/dist/common/display/sidebar/sidebar-sheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/display/sidebar/sidebar-sheet.tsx"],"names":["width"],"mappings":";;;;;;;AAkDO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,SAAA,EAAU;AAChC,EAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAa,KAAA,EAAO,SAAA,KAAc,UAAA,EAAW;AAG7D,EAAA,MAAM,YAAA,GAAe,KAAA,CAAM,OAAA,CAAQ,MAAM;AACvC,IAAA,IAAI,CAAC,WAAW,OAAO,CAAA;AAGvB,IAAA,IAAI,KAAA,KAAU,eAAe,SAAA,EAAW;AACtC,MAAA,MAAMA,SAAQ,MAAA,CAAO,KAAA;AACrB,MAAA,OAAOA,MAAAA,CAAM,SAAS,KAAK,CAAA,GAAI,WAAWA,MAAK,CAAA,GAAI,EAAA,GAAK,UAAA,CAAWA,MAAK,CAAA;AAAA,IAC1E;AAGA,IAAA,IAAI,UAAU,WAAA,EAAa;AACzB,MAAA,MAAM,YAAY,MAAA,CAAO,SAAA;AACzB,MAAA,OAAO,SAAA,CAAU,SAAS,KAAK,CAAA,GAAI,WAAW,SAAS,CAAA,GAAI,EAAA,GAAK,UAAA,CAAW,SAAS,CAAA;AAAA,IACtF;AAGA,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,OAAO,WAAA;AAAA,IACT;AAEA,IAAA,MAAM,QAAQ,MAAA,CAAO,KAAA;AACrB,IAAA,OAAO,KAAA,CAAM,SAAS,KAAK,CAAA,GAAI,WAAW,KAAK,CAAA,GAAI,EAAA,GAAK,UAAA,CAAW,KAAK,CAAA;AAAA,EAC1E,GAAG,CAAC,SAAA,EAAW,OAAO,MAAA,EAAQ,WAAA,EAAa,SAAS,CAAC,CAAA;AAGrD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,IAAA,EAAM;AAEzB,IAAA,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAAsB;AAChD,MAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AAGrB,MAAA,IAAI,MAAA,CAAO,OAAA,CAAQ,6BAA6B,CAAA,EAAG;AACjD,QAAA;AAAA,MACF;AAGA,MAAA,IAAI,MAAA,CAAO,OAAA,CAAQ,iBAAiB,CAAA,EAAG;AACrC,QAAA;AAAA,MACF;AAGA,MAAA,IAAI,MAAA,CAAO,OAAA,CAAQ,wBAAwB,CAAA,EAAG;AAC5C,QAAA,OAAA,EAAQ;AACR,QAAA;AAAA,MACF;AAGA,MAAA,IAAI,MAAA,CAAO,OAAA,CAAQ,kBAAkB,CAAA,EAAG;AACtC,QAAA;AAAA,MACF;AAGA,MAAA,IAAI,MAAA,CAAO,OAAA,CAAQ,gBAAgB,CAAA,EAAG;AACpC,QAAA;AAAA,MACF;AAGA,MAAA,OAAA,EAAQ;AAAA,IACV,CAAA;AAIA,IAAA,MAAM,SAAA,GAAY,WAAW,MAAM;AACjC,MAAA,QAAA,CAAS,gBAAA,CAAiB,WAAA,EAAa,kBAAA,EAAoB,IAAI,CAAA;AAAA,IACjE,GAAG,GAAG,CAAA;AAEN,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,SAAS,CAAA;AACtB,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAA,EAAa,kBAAA,EAAoB,IAAI,CAAA;AAAA,IACpE,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,IAAA,EAAM,OAAO,CAAC,CAAA;AAI7B,EAAA,MAAM,qBAAA,GAAwB,KAAA,CAAM,WAAA,CAAY,CAAC,KAAA,KAAiB;AAChE,IAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AAGrB,IAAA,IAAI,MAAA,CAAO,OAAA,CAAQ,6BAA6B,CAAA,EAAG;AACjD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,MAAA,CAAO,OAAA,CAAQ,wBAAwB,CAAA,EAAG;AAE5C,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,MAAA,CAAO,OAAA,CAAQ,kBAAkB,CAAA,EAAG;AACtC,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA;AAAA,IACF;AAAA,EAGF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,MAAA,KAAW;AACxB,QAAA,IAAI,CAAC,MAAA,EAAQ;AAGX,UAAA,OAAA,EAAQ;AAAA,QACV;AAAA,MACF,CAAA;AAAA,MACA,OAAO,CAAC,SAAA;AAAA,MACR,IAAA,EAAM,CAAC,SAAA,GAAY,QAAA,GAAW,MAAA;AAAA,MAC9B,UAAA,EAAY,YAAY,YAAA,GAAe,MAAA;AAAA,MACvC,UAAA,EAAY,CAAC,CAAC,KAAA;AAAA,MACd,KAAA;AAAA,MACA,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA,EAAkB,EAAA;AAAA,QAChB,WAAA;AAAA;AAAA,QAEA,CAAC,SAAA,IAAa,CAAA,0BAAA,CAAA;AAAA;AAAA,QAEd,SAAA,IAAa,CAAA,kBAAA,CAAA;AAAA,QACb;AAAA,OACF;AAAA,MACA,eAAA,EAAiB,CAAC,CAAA,KAAM;AAEtB,QAAA,IAAI,CAAC,SAAA,EAAW;AACd,UAAA,CAAA,CAAE,cAAA,EAAe;AAAA,QACnB;AAAA,MACF,CAAA;AAAA,MACA,iBAAA,EAAmB,qBAAA;AAAA,MAClB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"sidebar-sheet.mjs","sourcesContent":["'use client';\n\nimport { useSidebar } from '@/components/sidebar';\nimport { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { SheetWrapper, SheetWrapperProps } from '../../interactive/sheet-wrapper';\n\ninterface SidebarSheetProps extends Omit<SheetWrapperProps, 'side' | 'sideOffset' | 'modal'> {\n  /**\n   * Whether the sheet is open\n   */\n  open: boolean;\n  /**\n   * Callback when the sheet should close\n   */\n  onClose: () => void;\n  /**\n   * The title of the sheet header\n   */\n  title?: string;\n  /**\n   * Custom header class name\n   */\n  headerClassName?: string;\n  /**\n   * Custom children container class name\n   */\n  childrenClassName?: string;\n  /**\n   * Custom content class name\n   */\n  contentClassName?: string;\n  /**\n   * Children content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * A reusable sheet component that positions itself next to the sidebar on desktop\n * and slides from bottom on mobile.\n *\n * Features:\n * - Desktop: Slides from left, positioned next to sidebar (no backdrop)\n * - Mobile: Slides from bottom (with backdrop overlay)\n * - Only closes when clicking to the RIGHT of the sheet on desktop\n * - Clicking on sidebar or sheet itself doesn't close it\n * - Clicking on notification trigger button toggles the sheet\n */\nexport function SidebarSheet({\n  open,\n  onClose,\n  title,\n  headerClassName,\n  childrenClassName,\n  contentClassName,\n  children,\n  ...props\n}: SidebarSheetProps) {\n  const { isDesktop } = useDevice();\n  const { config, customWidth, state, isHovered } = useSidebar();\n\n  // Calculate actual sidebar width based on state and hover\n  const sidebarWidth = React.useMemo(() => {\n    if (!isDesktop) return 0;\n\n    // When sidebar is collapsed but hovering, use expanded width\n    if (state === 'collapsed' && isHovered) {\n      const width = config.width;\n      return width.endsWith('rem') ? parseFloat(width) * 16 : parseFloat(width);\n    }\n\n    // When sidebar is collapsed (not hovering), use icon width\n    if (state === 'collapsed') {\n      const iconWidth = config.widthIcon;\n      return iconWidth.endsWith('rem') ? parseFloat(iconWidth) * 16 : parseFloat(iconWidth);\n    }\n\n    // When expanded, use custom width if available, otherwise use config width\n    if (customWidth) {\n      return customWidth;\n    }\n\n    const width = config.width;\n    return width.endsWith('rem') ? parseFloat(width) * 16 : parseFloat(width);\n  }, [isDesktop, state, config, customWidth, isHovered]);\n\n  // Handle click outside on desktop (since modal=false doesn't trigger onInteractOutside)\n  React.useEffect(() => {\n    if (!isDesktop || !open) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      const target = event.target as HTMLElement;\n\n      // Check if clicking on notification trigger\n      if (target.closest('[data-notification-trigger]')) {\n        return; // Let the toggle handler deal with it\n      }\n\n      // Check if clicking inside the sheet\n      if (target.closest('[role=\"dialog\"]')) {\n        return; // Don't close when clicking inside sheet\n      }\n\n      // Check if clicking on SidebarContent (data-sidebar=\"inset\") - CLOSE the sheet\n      if (target.closest('[data-sidebar=\"inset\"]')) {\n        onClose();\n        return;\n      }\n\n      // Check if clicking on sidebar navigation links - ALLOW navigation, pathname change will close sheet\n      if (target.closest('[data-sidebar] a')) {\n        return; // Allow navigation to proceed\n      }\n\n      // Check if clicking on other sidebar elements (trigger, rail, etc)\n      if (target.closest('[data-sidebar]')) {\n        return; // Don't close for other sidebar interactions\n      }\n\n      // Click outside (to the right of sheet) - close it\n      onClose();\n    };\n\n    // Use capture phase to intercept clicks before they bubble\n    // Add small delay to avoid immediate closing when opening\n    const timeoutId = setTimeout(() => {\n      document.addEventListener('mousedown', handleClickOutside, true);\n    }, 100);\n\n    return () => {\n      clearTimeout(timeoutId);\n      document.removeEventListener('mousedown', handleClickOutside, true);\n    };\n  }, [isDesktop, open, onClose]);\n\n  // Custom onInteractOutside handler for mobile (modal=true)\n  // This only works on mobile where modal=true\n  const handleInteractOutside = React.useCallback((event: Event) => {\n    const target = event.target as HTMLElement;\n\n    // Check if clicking on the notification trigger button\n    if (target.closest('[data-notification-trigger]')) {\n      event.preventDefault();\n      return;\n    }\n\n    // Check if clicking on SidebarContent (data-sidebar=\"inset\") - allow close\n    if (target.closest('[data-sidebar=\"inset\"]')) {\n      // Let default behavior close the sheet\n      return;\n    }\n\n    // Check if clicking on sidebar navigation links - ALLOW navigation, pathname change will close sheet\n    if (target.closest('[data-sidebar] a')) {\n      event.preventDefault();\n      return; // Allow navigation, pathname change will close sheet\n    }\n\n    // For mobile, let default behavior close the sheet for other clicks\n  }, []);\n\n  return (\n    <SheetWrapper\n      open={open}\n      onOpenChange={(isOpen) => {\n        if (!isOpen) {\n          // Call onClose for both mobile and desktop\n          // This handles the close button (X) click properly\n          onClose();\n        }\n      }}\n      modal={!isDesktop}\n      side={!isDesktop ? 'bottom' : 'left'}\n      sideOffset={isDesktop ? sidebarWidth : undefined}\n      showHeader={!!title}\n      title={title}\n      headerClassName={headerClassName}\n      childrenClassName={childrenClassName}\n      contentClassName={cn(\n        'p-0 gap-0',\n        // Mobile styles - with backdrop overlay, full screen height\n        !isDesktop && `h-[100dvh] !max-h-[100dvh]`,\n        // Desktop styles - positioned next to sidebar, no backdrop\n        isDesktop && `!z-[35] !w-[390px]`,\n        contentClassName,\n      )}\n      onOpenAutoFocus={(e) => {\n        // Prevent auto-focus on desktop to avoid closing sidebar\n        if (!isDesktop) {\n          e.preventDefault();\n        }\n      }}\n      onInteractOutside={handleInteractOutside}\n      {...props}\n    >\n      {children}\n    </SheetWrapper>\n  );\n}\n\nexport type { SidebarSheetProps };\n"]}

package/dist/common/display/sidebar/types.js

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/common/display/sidebar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

package/dist/common/display/sidebar/types.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=types.mjs.map
+//# sourceMappingURL=types.mjs.map

package/dist/common/display/sidebar/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.mjs"}

package/dist/common/display/status-state.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Image = require('../../assets/Image');
+var button = require('../../components/button');
+var utils = require('../../lib/utils');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const StatusState = ({
+  type,
+  title,
+  subTitle,
+  buttonAction,
+  assetsComponent,
+  wrapperClassName,
+  titleClassName,
+  subTitleClassName
+}) => {
+  const states = {
+    systemError: {
+      title: "L\u1ED7i h\u1EC7 th\u1ED1ng",
+      subTitle: "Vui l\xF2ng th\u1EED l\u1EA1i sau b\u1EA1n nh\xE9",
+      icon: Image.EmptyUnknownErrorImage192,
+      buttonAction: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: () => window.location.reload(), className: "mt-3 w-[200px]", children: "T\u1EA3i l\u1EA1i trang" })
+    },
+    notFound: {
+      title: "Kh\xF4ng t\xECm th\u1EA5y th\xF4ng tin",
+      subTitle: "Nh\u01B0ng v\u1EABn c\xF2n r\u1EA5t nhi\u1EC1u \u0111i\u1EC1u th\xFA v\u1ECB \u0111ang ch\u1EDD b\u1EA1n kh\xE1m ph\xE1",
+      icon: Image.Empty404NotfoundImage192,
+      buttonAction: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: () => window.location.href = "/", className: "mt-3 w-[200px]", children: "V\u1EC1 trang ch\u1EE7" })
+    },
+    networkError: {
+      title: "M\u1EA5t k\u1EBFt n\u1ED1i m\u1EA1ng",
+      subTitle: "B\u1EA1n vui l\xF2ng ki\u1EC3m tra m\u1EA1ng v\xE0 t\u1EA3i l\u1EA1i trang",
+      icon: Image.EmptyUnknownErrorImage192,
+      buttonAction: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: () => window.location.reload(), className: "mt-3 w-[200px]", children: "T\u1EA3i l\u1EA1i trang" })
+    },
+    noData: {
+      title: "Ch\u01B0a c\xF3 d\u1EEF li\u1EC7u",
+      subTitle: "Hi\u1EC7n t\u1EA1i ch\u01B0a c\xF3 th\xF4ng tin n\xE0o \u0111\u1EC3 hi\u1EC3n th\u1ECB",
+      icon: Image.EmptyNothingOtherImage192,
+      buttonAction: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+    },
+    maintenance: {
+      title: "\u0110ang b\u1EA3o tr\xEC",
+      subTitle: "H\u1EC7 th\u1ED1ng \u0111ang \u0111\u01B0\u1EE3c n\xE2ng c\u1EA5p, vui l\xF2ng quay l\u1EA1i sau",
+      icon: Image.EmptyMaintenanceImage192,
+      buttonAction: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: () => window.location.href = "/", className: "mt-3 w-[200px]", children: "V\u1EC1 trang ch\u1EE7" })
+    },
+    comingSoon: {
+      title: "S\u1EAFp ra m\u1EAFt",
+      subTitle: "T\xEDnh n\u0103ng n\xE0y s\u1EBD s\u1EDBm \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt",
+      icon: Image.EmptyComingSoonImage192,
+      buttonAction: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: () => window.location.href = "/", className: "mt-3 w-[200px]", children: "V\u1EC1 trang ch\u1EE7" })
+    }
+  };
+  const presetState = type ? states[type] : null;
+  const displayTitle = title ?? presetState?.title;
+  const displaySubTitle = subTitle ?? presetState?.subTitle;
+  const displayAssetsComponent = assetsComponent ?? presetState?.icon;
+  const displayButtonAction = buttonAction ?? presetState?.buttonAction;
+  const renderAssetsComponent = () => {
+    if (!displayAssetsComponent) return null;
+    if (React__default.default.isValidElement(displayAssetsComponent)) {
+      return displayAssetsComponent;
+    }
+    const Component = displayAssetsComponent;
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { className: "h-full w-full" });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex h-full w-full flex-col items-center justify-center gap-2",
+        wrapperClassName
+      ),
+      children: [
+        displayAssetsComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[150px] w-[150px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderAssetsComponent() }) }),
+        displayTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("text-ink-500s mt-1 text-center text-lg font-medium", titleClassName), children: displayTitle }),
+        displaySubTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("text-ink-400s text-center text-sm font-medium", subTitleClassName), children: displaySubTitle }),
+        displayButtonAction && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayButtonAction })
+      ]
+    }
+  );
+};
+var status_state_default = StatusState;
+
+exports.StatusState = StatusState;
+exports.default = status_state_default;
+//# sourceMappingURL=status-state.js.map
+//# sourceMappingURL=status-state.js.map

package/dist/common/display/status-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/status-state.tsx"],"names":["EmptyUnknownErrorImage192","jsx","Button","Empty404NotfoundImage192","EmptyNothingOtherImage192","Fragment","EmptyMaintenanceImage192","EmptyComingSoonImage192","React","jsxs","cn"],"mappings":"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","file":"status-state.js","sourcesContent":["import {\n  Empty404NotfoundImage192,\n  EmptyComingSoonImage192,\n  EmptyMaintenanceImage192,\n  EmptyNothingOtherImage192,\n  EmptyUnknownErrorImage192,\n} from '../../assets/Image';\nimport { Button } from '../../components/button';\nimport { cn } from '../../lib/utils';\nimport React, { ComponentType, SVGProps } from 'react';\n\nexport type StatusStateType =\n  | 'systemError'\n  | 'notFound'\n  | 'networkError'\n  | 'noData'\n  | 'maintenance'\n  | 'comingSoon';\n\nexport interface IStatusState {\n  // Preset state type - if provided, will use predefined values\n  type?: StatusStateType;\n  // Custom props - will override preset values if provided\n  title?: string | React.ReactNode;\n  subTitle?: string | React.ReactNode;\n  buttonAction?: React.ReactNode;\n  assetsComponent?: React.ComponentType<React.SVGProps<SVGSVGElement>> | React.ReactNode;\n  wrapperClassName?: string;\n  titleClassName?: string;\n  subTitleClassName?: string;\n}\n\nconst StatusState = ({\n  type,\n  title,\n  subTitle,\n  buttonAction,\n  assetsComponent,\n  wrapperClassName,\n  titleClassName,\n  subTitleClassName,\n}: IStatusState) => {\n  const states = {\n    systemError: {\n      title: 'Lỗi hệ thống',\n      subTitle: 'Vui lòng thử lại sau bạn nhé',\n      icon: EmptyUnknownErrorImage192,\n      buttonAction: (\n        <Button onClick={() => window.location.reload()} className=\"mt-3 w-[200px]\">\n          Tải lại trang\n        </Button>\n      ),\n    },\n    notFound: {\n      title: 'Không tìm thấy thông tin',\n      subTitle: 'Nhưng vẫn còn rất nhiều điều thú vị đang chờ bạn khám phá',\n      icon: Empty404NotfoundImage192,\n      buttonAction: (\n        <Button onClick={() => (window.location.href = '/')} className=\"mt-3 w-[200px]\">\n          Về trang chủ\n        </Button>\n      ),\n    },\n    networkError: {\n      title: 'Mất kết nối mạng',\n      subTitle: 'Bạn vui lòng kiểm tra mạng và tải lại trang',\n      icon: EmptyUnknownErrorImage192,\n      buttonAction: (\n        <Button onClick={() => window.location.reload()} className=\"mt-3 w-[200px]\">\n          Tải lại trang\n        </Button>\n      ),\n    },\n    noData: {\n      title: 'Chưa có dữ liệu',\n      subTitle: 'Hiện tại chưa có thông tin nào để hiển thị',\n      icon: EmptyNothingOtherImage192,\n      buttonAction: <></>,\n    },\n    maintenance: {\n      title: 'Đang bảo trì',\n      subTitle: 'Hệ thống đang được nâng cấp, vui lòng quay lại sau',\n      icon: EmptyMaintenanceImage192,\n      buttonAction: (\n        <Button onClick={() => (window.location.href = '/')} className=\"mt-3 w-[200px]\">\n          Về trang chủ\n        </Button>\n      ),\n    },\n    comingSoon: {\n      title: 'Sắp ra mắt',\n      subTitle: 'Tính năng này sẽ sớm được cập nhật',\n      icon: EmptyComingSoonImage192,\n      buttonAction: (\n        <Button onClick={() => (window.location.href = '/')} className=\"mt-3 w-[200px]\">\n          Về trang chủ\n        </Button>\n      ),\n    },\n  };\n\n  // Get preset state if type is provided\n  const presetState = type ? states[type] : null;\n\n  // Use preset values as fallback, allow props to override\n  const displayTitle = title ?? presetState?.title;\n  const displaySubTitle = subTitle ?? presetState?.subTitle;\n  const displayAssetsComponent = assetsComponent ?? presetState?.icon;\n  const displayButtonAction = buttonAction ?? presetState?.buttonAction;\n\n  // Helper function to render the assets component\n  const renderAssetsComponent = () => {\n    if (!displayAssetsComponent) return null;\n\n    // ✅ Nếu là React element (JSX đã tạo sẵn), render trực tiếp\n    if (React.isValidElement(displayAssetsComponent)) {\n      return displayAssetsComponent;\n    }\n\n    // ✅ Nếu là component (chưa render), gọi như component\n    const Component = displayAssetsComponent as ComponentType<SVGProps<SVGSVGElement>>;\n    return <Component className=\"h-full w-full\" />;\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex h-full w-full flex-col items-center justify-center gap-2',\n        wrapperClassName,\n      )}\n    >\n      {displayAssetsComponent && (\n        <div className=\"flex h-[150px] w-[150px] items-center justify-center\">\n          <>{renderAssetsComponent()}</>\n        </div>\n      )}\n      {displayTitle && (\n        <div className={cn('text-ink-500s mt-1 text-center text-lg font-medium', titleClassName)}>\n          {displayTitle}\n        </div>\n      )}\n      {displaySubTitle && (\n        <div className={cn('text-ink-400s text-center text-sm font-medium', subTitleClassName)}>\n          {displaySubTitle}\n        </div>\n      )}\n      {displayButtonAction && <>{displayButtonAction}</>}\n    </div>\n  );\n};\n\nexport { StatusState };\nexport default StatusState;\n"]}

package/dist/common/display/status-state.mjs

@@ -0,0 +1,88 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { EmptyComingSoonImage192, EmptyMaintenanceImage192, EmptyNothingOtherImage192, EmptyUnknownErrorImage192, Empty404NotfoundImage192 } from '../../assets/Image';
+import { Button } from '../../components/button';
+import { cn } from '../../lib/utils';
+import React from 'react';
+
+const StatusState = ({
+  type,
+  title,
+  subTitle,
+  buttonAction,
+  assetsComponent,
+  wrapperClassName,
+  titleClassName,
+  subTitleClassName
+}) => {
+  const states = {
+    systemError: {
+      title: "L\u1ED7i h\u1EC7 th\u1ED1ng",
+      subTitle: "Vui l\xF2ng th\u1EED l\u1EA1i sau b\u1EA1n nh\xE9",
+      icon: EmptyUnknownErrorImage192,
+      buttonAction: /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), className: "mt-3 w-[200px]", children: "T\u1EA3i l\u1EA1i trang" })
+    },
+    notFound: {
+      title: "Kh\xF4ng t\xECm th\u1EA5y th\xF4ng tin",
+      subTitle: "Nh\u01B0ng v\u1EABn c\xF2n r\u1EA5t nhi\u1EC1u \u0111i\u1EC1u th\xFA v\u1ECB \u0111ang ch\u1EDD b\u1EA1n kh\xE1m ph\xE1",
+      icon: Empty404NotfoundImage192,
+      buttonAction: /* @__PURE__ */ jsx(Button, { onClick: () => window.location.href = "/", className: "mt-3 w-[200px]", children: "V\u1EC1 trang ch\u1EE7" })
+    },
+    networkError: {
+      title: "M\u1EA5t k\u1EBFt n\u1ED1i m\u1EA1ng",
+      subTitle: "B\u1EA1n vui l\xF2ng ki\u1EC3m tra m\u1EA1ng v\xE0 t\u1EA3i l\u1EA1i trang",
+      icon: EmptyUnknownErrorImage192,
+      buttonAction: /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), className: "mt-3 w-[200px]", children: "T\u1EA3i l\u1EA1i trang" })
+    },
+    noData: {
+      title: "Ch\u01B0a c\xF3 d\u1EEF li\u1EC7u",
+      subTitle: "Hi\u1EC7n t\u1EA1i ch\u01B0a c\xF3 th\xF4ng tin n\xE0o \u0111\u1EC3 hi\u1EC3n th\u1ECB",
+      icon: EmptyNothingOtherImage192,
+      buttonAction: /* @__PURE__ */ jsx(Fragment, {})
+    },
+    maintenance: {
+      title: "\u0110ang b\u1EA3o tr\xEC",
+      subTitle: "H\u1EC7 th\u1ED1ng \u0111ang \u0111\u01B0\u1EE3c n\xE2ng c\u1EA5p, vui l\xF2ng quay l\u1EA1i sau",
+      icon: EmptyMaintenanceImage192,
+      buttonAction: /* @__PURE__ */ jsx(Button, { onClick: () => window.location.href = "/", className: "mt-3 w-[200px]", children: "V\u1EC1 trang ch\u1EE7" })
+    },
+    comingSoon: {
+      title: "S\u1EAFp ra m\u1EAFt",
+      subTitle: "T\xEDnh n\u0103ng n\xE0y s\u1EBD s\u1EDBm \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt",
+      icon: EmptyComingSoonImage192,
+      buttonAction: /* @__PURE__ */ jsx(Button, { onClick: () => window.location.href = "/", className: "mt-3 w-[200px]", children: "V\u1EC1 trang ch\u1EE7" })
+    }
+  };
+  const presetState = type ? states[type] : null;
+  const displayTitle = title ?? presetState?.title;
+  const displaySubTitle = subTitle ?? presetState?.subTitle;
+  const displayAssetsComponent = assetsComponent ?? presetState?.icon;
+  const displayButtonAction = buttonAction ?? presetState?.buttonAction;
+  const renderAssetsComponent = () => {
+    if (!displayAssetsComponent) return null;
+    if (React.isValidElement(displayAssetsComponent)) {
+      return displayAssetsComponent;
+    }
+    const Component = displayAssetsComponent;
+    return /* @__PURE__ */ jsx(Component, { className: "h-full w-full" });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-full flex-col items-center justify-center gap-2",
+        wrapperClassName
+      ),
+      children: [
+        displayAssetsComponent && /* @__PURE__ */ jsx("div", { className: "flex h-[150px] w-[150px] items-center justify-center", children: /* @__PURE__ */ jsx(Fragment, { children: renderAssetsComponent() }) }),
+        displayTitle && /* @__PURE__ */ jsx("div", { className: cn("text-ink-500s mt-1 text-center text-lg font-medium", titleClassName), children: displayTitle }),
+        displaySubTitle && /* @__PURE__ */ jsx("div", { className: cn("text-ink-400s text-center text-sm font-medium", subTitleClassName), children: displaySubTitle }),
+        displayButtonAction && /* @__PURE__ */ jsx(Fragment, { children: displayButtonAction })
+      ]
+    }
+  );
+};
+var status_state_default = StatusState;
+
+export { StatusState, status_state_default as default };
+//# sourceMappingURL=status-state.mjs.map
+//# sourceMappingURL=status-state.mjs.map

package/dist/common/display/status-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/status-state.tsx"],"names":[],"mappings":";;;;;;AAgCA,MAAM,cAAc,CAAC;AAAA,EACnB,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,KAAoB;AAClB,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,WAAA,EAAa;AAAA,MACX,KAAA,EAAO,6BAAA;AAAA,MACP,QAAA,EAAU,mDAAA;AAAA,MACV,IAAA,EAAM,yBAAA;AAAA,MACN,YAAA,kBACE,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,MAAM,MAAA,CAAO,QAAA,CAAS,MAAA,EAAO,EAAG,SAAA,EAAU,gBAAA,EAAiB,QAAA,EAAA,yBAAA,EAE5E;AAAA,KAEJ;AAAA,IACA,QAAA,EAAU;AAAA,MACR,KAAA,EAAO,wCAAA;AAAA,MACP,QAAA,EAAU,yHAAA;AAAA,MACV,IAAA,EAAM,wBAAA;AAAA,MACN,YAAA,kBACE,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,MAAO,MAAA,CAAO,QAAA,CAAS,IAAA,GAAO,GAAA,EAAM,SAAA,EAAU,gBAAA,EAAiB,QAAA,EAAA,wBAAA,EAEhF;AAAA,KAEJ;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,KAAA,EAAO,sCAAA;AAAA,MACP,QAAA,EAAU,4EAAA;AAAA,MACV,IAAA,EAAM,yBAAA;AAAA,MACN,YAAA,kBACE,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,MAAM,MAAA,CAAO,QAAA,CAAS,MAAA,EAAO,EAAG,SAAA,EAAU,gBAAA,EAAiB,QAAA,EAAA,yBAAA,EAE5E;AAAA,KAEJ;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,KAAA,EAAO,mCAAA;AAAA,MACP,QAAA,EAAU,wFAAA;AAAA,MACV,IAAA,EAAM,yBAAA;AAAA,MACN,8BAAc,GAAA,CAAA,QAAA,EAAA,EAAE;AAAA,KAClB;AAAA,IACA,WAAA,EAAa;AAAA,MACX,KAAA,EAAO,2BAAA;AAAA,MACP,QAAA,EAAU,kGAAA;AAAA,MACV,IAAA,EAAM,wBAAA;AAAA,MACN,YAAA,kBACE,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,MAAO,MAAA,CAAO,QAAA,CAAS,IAAA,GAAO,GAAA,EAAM,SAAA,EAAU,gBAAA,EAAiB,QAAA,EAAA,wBAAA,EAEhF;AAAA,KAEJ;AAAA,IACA,UAAA,EAAY;AAAA,MACV,KAAA,EAAO,sBAAA;AAAA,MACP,QAAA,EAAU,kFAAA;AAAA,MACV,IAAA,EAAM,uBAAA;AAAA,MACN,YAAA,kBACE,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,MAAO,MAAA,CAAO,QAAA,CAAS,IAAA,GAAO,GAAA,EAAM,SAAA,EAAU,gBAAA,EAAiB,QAAA,EAAA,wBAAA,EAEhF;AAAA;AAEJ,GACF;AAGA,EAAA,MAAM,WAAA,GAAc,IAAA,GAAO,MAAA,CAAO,IAAI,CAAA,GAAI,IAAA;AAG1C,EAAA,MAAM,YAAA,GAAe,SAAS,WAAA,EAAa,KAAA;AAC3C,EAAA,MAAM,eAAA,GAAkB,YAAY,WAAA,EAAa,QAAA;AACjD,EAAA,MAAM,sBAAA,GAAyB,mBAAmB,WAAA,EAAa,IAAA;AAC/D,EAAA,MAAM,mBAAA,GAAsB,gBAAgB,WAAA,EAAa,YAAA;AAGzD,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,IAAI,CAAC,wBAAwB,OAAO,IAAA;AAGpC,IAAA,IAAI,KAAA,CAAM,cAAA,CAAe,sBAAsB,CAAA,EAAG;AAChD,MAAA,OAAO,sBAAA;AAAA,IACT;AAGA,IAAA,MAAM,SAAA,GAAY,sBAAA;AAClB,IAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAU,eAAA,EAAgB,CAAA;AAAA,EAC9C,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,+DAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,sBAAA,wBACE,KAAA,EAAA,EAAI,SAAA,EAAU,wDACb,QAAA,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,qBAAA,IAAwB,CAAA,EAC7B,CAAA;AAAA,QAED,YAAA,wBACE,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,oDAAA,EAAsD,cAAc,GACpF,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,QAED,eAAA,wBACE,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,+CAAA,EAAiD,iBAAiB,GAClF,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,QAED,mBAAA,oCAA0B,QAAA,EAAA,mBAAA,EAAoB;AAAA;AAAA;AAAA,GACjD;AAEJ;AAGA,IAAO,oBAAA,GAAQ","file":"status-state.mjs","sourcesContent":["import {\n  Empty404NotfoundImage192,\n  EmptyComingSoonImage192,\n  EmptyMaintenanceImage192,\n  EmptyNothingOtherImage192,\n  EmptyUnknownErrorImage192,\n} from '../../assets/Image';\nimport { Button } from '../../components/button';\nimport { cn } from '../../lib/utils';\nimport React, { ComponentType, SVGProps } from 'react';\n\nexport type StatusStateType =\n  | 'systemError'\n  | 'notFound'\n  | 'networkError'\n  | 'noData'\n  | 'maintenance'\n  | 'comingSoon';\n\nexport interface IStatusState {\n  // Preset state type - if provided, will use predefined values\n  type?: StatusStateType;\n  // Custom props - will override preset values if provided\n  title?: string | React.ReactNode;\n  subTitle?: string | React.ReactNode;\n  buttonAction?: React.ReactNode;\n  assetsComponent?: React.ComponentType<React.SVGProps<SVGSVGElement>> | React.ReactNode;\n  wrapperClassName?: string;\n  titleClassName?: string;\n  subTitleClassName?: string;\n}\n\nconst StatusState = ({\n  type,\n  title,\n  subTitle,\n  buttonAction,\n  assetsComponent,\n  wrapperClassName,\n  titleClassName,\n  subTitleClassName,\n}: IStatusState) => {\n  const states = {\n    systemError: {\n      title: 'Lỗi hệ thống',\n      subTitle: 'Vui lòng thử lại sau bạn nhé',\n      icon: EmptyUnknownErrorImage192,\n      buttonAction: (\n        <Button onClick={() => window.location.reload()} className=\"mt-3 w-[200px]\">\n          Tải lại trang\n        </Button>\n      ),\n    },\n    notFound: {\n      title: 'Không tìm thấy thông tin',\n      subTitle: 'Nhưng vẫn còn rất nhiều điều thú vị đang chờ bạn khám phá',\n      icon: Empty404NotfoundImage192,\n      buttonAction: (\n        <Button onClick={() => (window.location.href = '/')} className=\"mt-3 w-[200px]\">\n          Về trang chủ\n        </Button>\n      ),\n    },\n    networkError: {\n      title: 'Mất kết nối mạng',\n      subTitle: 'Bạn vui lòng kiểm tra mạng và tải lại trang',\n      icon: EmptyUnknownErrorImage192,\n      buttonAction: (\n        <Button onClick={() => window.location.reload()} className=\"mt-3 w-[200px]\">\n          Tải lại trang\n        </Button>\n      ),\n    },\n    noData: {\n      title: 'Chưa có dữ liệu',\n      subTitle: 'Hiện tại chưa có thông tin nào để hiển thị',\n      icon: EmptyNothingOtherImage192,\n      buttonAction: <></>,\n    },\n    maintenance: {\n      title: 'Đang bảo trì',\n      subTitle: 'Hệ thống đang được nâng cấp, vui lòng quay lại sau',\n      icon: EmptyMaintenanceImage192,\n      buttonAction: (\n        <Button onClick={() => (window.location.href = '/')} className=\"mt-3 w-[200px]\">\n          Về trang chủ\n        </Button>\n      ),\n    },\n    comingSoon: {\n      title: 'Sắp ra mắt',\n      subTitle: 'Tính năng này sẽ sớm được cập nhật',\n      icon: EmptyComingSoonImage192,\n      buttonAction: (\n        <Button onClick={() => (window.location.href = '/')} className=\"mt-3 w-[200px]\">\n          Về trang chủ\n        </Button>\n      ),\n    },\n  };\n\n  // Get preset state if type is provided\n  const presetState = type ? states[type] : null;\n\n  // Use preset values as fallback, allow props to override\n  const displayTitle = title ?? presetState?.title;\n  const displaySubTitle = subTitle ?? presetState?.subTitle;\n  const displayAssetsComponent = assetsComponent ?? presetState?.icon;\n  const displayButtonAction = buttonAction ?? presetState?.buttonAction;\n\n  // Helper function to render the assets component\n  const renderAssetsComponent = () => {\n    if (!displayAssetsComponent) return null;\n\n    // ✅ Nếu là React element (JSX đã tạo sẵn), render trực tiếp\n    if (React.isValidElement(displayAssetsComponent)) {\n      return displayAssetsComponent;\n    }\n\n    // ✅ Nếu là component (chưa render), gọi như component\n    const Component = displayAssetsComponent as ComponentType<SVGProps<SVGSVGElement>>;\n    return <Component className=\"h-full w-full\" />;\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex h-full w-full flex-col items-center justify-center gap-2',\n        wrapperClassName,\n      )}\n    >\n      {displayAssetsComponent && (\n        <div className=\"flex h-[150px] w-[150px] items-center justify-center\">\n          <>{renderAssetsComponent()}</>\n        </div>\n      )}\n      {displayTitle && (\n        <div className={cn('text-ink-500s mt-1 text-center text-lg font-medium', titleClassName)}>\n          {displayTitle}\n        </div>\n      )}\n      {displaySubTitle && (\n        <div className={cn('text-ink-400s text-center text-sm font-medium', subTitleClassName)}>\n          {displaySubTitle}\n        </div>\n      )}\n      {displayButtonAction && <>{displayButtonAction}</>}\n    </div>\n  );\n};\n\nexport { StatusState };\nexport default StatusState;\n"]}

package/dist/common/forms/auto-form.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@/lib/utils');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var form = require('../../components/form');
+
+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);
+
+function AutoFormRoot({ form: form$1, onSubmit, children, className, ...formProps }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...form$1, children: /* @__PURE__ */ jsxRuntime.jsx(form.Form, { ...form$1, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.stopPropagation();
+        form$1.handleSubmit(onSubmit)(e);
+      },
+      className: utils.cn("space-y-4", className),
+      ...formProps,
+      children
+    }
+  ) }) });
+}
+const getFieldError = (formState, name) => {
+  if (name.includes(".")) {
+    const paths = name.split(".");
+    let current = formState.errors;
+    for (let i = 0; i < paths.length - 1; i++) {
+      const path = paths[i];
+      if (!current || !current[path]) return void 0;
+      current = current[path];
+    }
+    const lastPath = paths[paths.length - 1];
+    if (!current || !current[lastPath]) return void 0;
+    return current[lastPath].message || current[lastPath].root?.message;
+  }
+  return formState.errors[name]?.message || formState.errors[name]?.root?.message;
+};
+const AutoFormField = ({
+  name,
+  label,
+  description,
+  children,
+  className,
+  disabled,
+  noShowError,
+  hidden,
+  ...props
+}) => {
+  const { control, formState } = reactHookForm.useFormContext();
+  if (hidden) return;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    form.FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => {
+        const errorMessage = getFieldError(formState, name);
+        return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className, children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(form.FormLabel, { className: "!text-t14m", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: typeof children === "function" ? children({ ...field, isError: !!errorMessage, errorMessage }) : React__namespace.cloneElement(children, {
+            ...field,
+            isError: !!errorMessage && !noShowError,
+            errorMessage
+          }) }),
+          description && (!errorMessage || noShowError) && /* @__PURE__ */ jsxRuntime.jsx(form.FormDescription, { children: description }),
+          !noShowError && /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+        ] });
+      },
+      disabled,
+      ...props
+    }
+  );
+};
+const AutoForm = Object.assign(AutoFormRoot, {
+  Field: AutoFormField
+});
+
+exports.AutoForm = AutoForm;
+exports.getFieldError = getFieldError;
+//# sourceMappingURL=auto-form.js.map
+//# sourceMappingURL=auto-form.js.map

package/dist/common/forms/auto-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/forms/auto-form.tsx"],"names":["form","FormProvider","jsx","Form","cn","useFormContext","FormField","jsxs","FormItem","FormLabel","FormControl","React","FormDescription","FormMessage"],"mappings":"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","file":"auto-form.js","sourcesContent":["import { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { FormProvider, SubmitHandler, useFormContext } from 'react-hook-form';\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '../../components/form';\n\n// --- Định nghĩa Type cho Props ---\n\n// Props cho component AutoForm chính\ninterface AutoFormProps extends Omit<React.ComponentProps<'form'>, 'onSubmit'> {\n  form: any; // Type form as UseFormReturn with schema type\n  onSubmit: SubmitHandler<any>;\n  children: React.ReactNode;\n}\n\n// Props cho component AutoForm.Field\ninterface AutoFormFieldProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  name: string; // Bắt buộc phải có name để liên kết với schema\n  label?: string;\n  description?: string;\n  children: React.ReactNode | ((field: any) => React.ReactNode);\n  disabled?: boolean;\n  noShowError?: boolean;\n  hidden?: boolean;\n}\n\n// --- Component AutoForm chính ---\n\nfunction AutoFormRoot({ form, onSubmit, children, className, ...formProps }: any) {\n  return (\n    <FormProvider {...form}>\n      <Form {...form}>\n        <form\n          onSubmit={(e) => {\n            e.stopPropagation();\n            form.handleSubmit(onSubmit)(e);\n          }}\n          className={cn('space-y-4', className)}\n          {...formProps}\n        >\n          {children}\n        </form>\n      </Form>\n    </FormProvider>\n  );\n}\n\n// --- Component AutoForm.Field ---\nexport const getFieldError = (formState: any, name: string) => {\n  // Nếu name là một đường dẫn lồng nhau (có dấu chấm)\n  if (name.includes('.')) {\n    const paths = name.split('.');\n    let current = formState.errors;\n\n    // Duyệt qua các phần của đường dẫn, trừ phần cuối cùng\n    for (let i = 0; i < paths.length - 1; i++) {\n      const path: string = paths[i] as string;\n      if (!current || !current[path]) return undefined;\n      current = current[path] as Record<string, any>;\n    }\n\n    // Lấy thông báo lỗi từ phần cuối cùng\n    const lastPath: string = paths[paths.length - 1] as string;\n    if (!current || !current[lastPath]) return undefined;\n\n    // Trả về thông báo lỗi\n    return current[lastPath].message || current[lastPath].root?.message;\n  }\n\n  // Trường hợp name đơn giản\n  return formState.errors[name]?.message || formState.errors[name]?.root?.message;\n};\n\nconst AutoFormField = ({\n  name,\n  label,\n  description,\n  children,\n  className,\n  disabled,\n  noShowError,\n  hidden,\n  ...props\n}: AutoFormFieldProps) => {\n  // Lấy context từ FormProvider\n  const { control, formState } = useFormContext();\n\n  if (hidden) return;\n\n  return (\n    <FormField\n      control={control}\n      name={name}\n      render={({ field }) => {\n        const errorMessage = getFieldError(formState, name);\n\n        return (\n          <FormItem className={className}>\n            {label && <FormLabel className=\"!text-t14m\">{label}</FormLabel>}\n            <FormControl>\n              {typeof children === 'function'\n                ? children({ ...field, isError: !!errorMessage, errorMessage })\n                : React.cloneElement(children as React.ReactElement, {\n                  ...field,\n                  isError: !!errorMessage && !noShowError,\n                  errorMessage,\n                })}\n            </FormControl>\n            {description && (!errorMessage || noShowError) && (\n              <FormDescription>{description}</FormDescription>\n            )}\n            {!noShowError && <FormMessage />}\n          </FormItem>\n        );\n      }}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\n// --- Gán Field vào Root component để tạo thành Compound Component ---\nexport const AutoForm = Object.assign(AutoFormRoot, {\n  Field: AutoFormField,\n});\n"]}

package/dist/common/forms/auto-form.mjs

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { FormProvider, useFormContext } from 'react-hook-form';
+import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '../../components/form';
+
+function AutoFormRoot({ form, onSubmit, children, className, ...formProps }) {
+  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.stopPropagation();
+        form.handleSubmit(onSubmit)(e);
+      },
+      className: cn("space-y-4", className),
+      ...formProps,
+      children
+    }
+  ) }) });
+}
+const getFieldError = (formState, name) => {
+  if (name.includes(".")) {
+    const paths = name.split(".");
+    let current = formState.errors;
+    for (let i = 0; i < paths.length - 1; i++) {
+      const path = paths[i];
+      if (!current || !current[path]) return void 0;
+      current = current[path];
+    }
+    const lastPath = paths[paths.length - 1];
+    if (!current || !current[lastPath]) return void 0;
+    return current[lastPath].message || current[lastPath].root?.message;
+  }
+  return formState.errors[name]?.message || formState.errors[name]?.root?.message;
+};
+const AutoFormField = ({
+  name,
+  label,
+  description,
+  children,
+  className,
+  disabled,
+  noShowError,
+  hidden,
+  ...props
+}) => {
+  const { control, formState } = useFormContext();
+  if (hidden) return;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field }) => {
+        const errorMessage = getFieldError(formState, name);
+        return /* @__PURE__ */ jsxs(FormItem, { className, children: [
+          label && /* @__PURE__ */ jsx(FormLabel, { className: "!text-t14m", children: label }),
+          /* @__PURE__ */ jsx(FormControl, { children: typeof children === "function" ? children({ ...field, isError: !!errorMessage, errorMessage }) : React.cloneElement(children, {
+            ...field,
+            isError: !!errorMessage && !noShowError,
+            errorMessage
+          }) }),
+          description && (!errorMessage || noShowError) && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+          !noShowError && /* @__PURE__ */ jsx(FormMessage, {})
+        ] });
+      },
+      disabled,
+      ...props
+    }
+  );
+};
+const AutoForm = Object.assign(AutoFormRoot, {
+  Field: AutoFormField
+});
+
+export { AutoForm, getFieldError };
+//# sourceMappingURL=auto-form.mjs.map
+//# sourceMappingURL=auto-form.mjs.map

package/dist/common/forms/auto-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/forms/auto-form.tsx"],"names":[],"mappings":"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","file":"auto-form.mjs","sourcesContent":["import { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { FormProvider, SubmitHandler, useFormContext } from 'react-hook-form';\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '../../components/form';\n\n// --- Định nghĩa Type cho Props ---\n\n// Props cho component AutoForm chính\ninterface AutoFormProps extends Omit<React.ComponentProps<'form'>, 'onSubmit'> {\n  form: any; // Type form as UseFormReturn with schema type\n  onSubmit: SubmitHandler<any>;\n  children: React.ReactNode;\n}\n\n// Props cho component AutoForm.Field\ninterface AutoFormFieldProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  name: string; // Bắt buộc phải có name để liên kết với schema\n  label?: string;\n  description?: string;\n  children: React.ReactNode | ((field: any) => React.ReactNode);\n  disabled?: boolean;\n  noShowError?: boolean;\n  hidden?: boolean;\n}\n\n// --- Component AutoForm chính ---\n\nfunction AutoFormRoot({ form, onSubmit, children, className, ...formProps }: any) {\n  return (\n    <FormProvider {...form}>\n      <Form {...form}>\n        <form\n          onSubmit={(e) => {\n            e.stopPropagation();\n            form.handleSubmit(onSubmit)(e);\n          }}\n          className={cn('space-y-4', className)}\n          {...formProps}\n        >\n          {children}\n        </form>\n      </Form>\n    </FormProvider>\n  );\n}\n\n// --- Component AutoForm.Field ---\nexport const getFieldError = (formState: any, name: string) => {\n  // Nếu name là một đường dẫn lồng nhau (có dấu chấm)\n  if (name.includes('.')) {\n    const paths = name.split('.');\n    let current = formState.errors;\n\n    // Duyệt qua các phần của đường dẫn, trừ phần cuối cùng\n    for (let i = 0; i < paths.length - 1; i++) {\n      const path: string = paths[i] as string;\n      if (!current || !current[path]) return undefined;\n      current = current[path] as Record<string, any>;\n    }\n\n    // Lấy thông báo lỗi từ phần cuối cùng\n    const lastPath: string = paths[paths.length - 1] as string;\n    if (!current || !current[lastPath]) return undefined;\n\n    // Trả về thông báo lỗi\n    return current[lastPath].message || current[lastPath].root?.message;\n  }\n\n  // Trường hợp name đơn giản\n  return formState.errors[name]?.message || formState.errors[name]?.root?.message;\n};\n\nconst AutoFormField = ({\n  name,\n  label,\n  description,\n  children,\n  className,\n  disabled,\n  noShowError,\n  hidden,\n  ...props\n}: AutoFormFieldProps) => {\n  // Lấy context từ FormProvider\n  const { control, formState } = useFormContext();\n\n  if (hidden) return;\n\n  return (\n    <FormField\n      control={control}\n      name={name}\n      render={({ field }) => {\n        const errorMessage = getFieldError(formState, name);\n\n        return (\n          <FormItem className={className}>\n            {label && <FormLabel className=\"!text-t14m\">{label}</FormLabel>}\n            <FormControl>\n              {typeof children === 'function'\n                ? children({ ...field, isError: !!errorMessage, errorMessage })\n                : React.cloneElement(children as React.ReactElement, {\n                  ...field,\n                  isError: !!errorMessage && !noShowError,\n                  errorMessage,\n                })}\n            </FormControl>\n            {description && (!errorMessage || noShowError) && (\n              <FormDescription>{description}</FormDescription>\n            )}\n            {!noShowError && <FormMessage />}\n          </FormItem>\n        );\n      }}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\n// --- Gán Field vào Root component để tạo thành Compound Component ---\nexport const AutoForm = Object.assign(AutoFormRoot, {\n  Field: AutoFormField,\n});\n"]}