@umituz/web-dashboard 2.0.0 → 2.0.2

package/dist/settings/components/SettingsLayout.js

@@ -0,0 +1,170 @@
+"use client";
+
+// src/domains/settings/components/SettingsLayout.tsx
+import { useState } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+
+// src/domains/settings/components/SettingsSection.tsx
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SettingsSection = ({
+  section,
+  currentPath,
+  onNavigate,
+  collapsed = false
+}) => {
+  const filteredItems = section.items.filter((item) => item.enabled !== false);
+  if (filteredItems.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6 last:mb-0", children: [
+    !collapsed && /* @__PURE__ */ jsx("h3", { className: "px-2 mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: section.title }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredItems.map((item) => {
+      const isActive = currentPath === item.path;
+      const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        item.icon && /* @__PURE__ */ jsx(
+          item.icon,
+          {
+            className: cn(
+              "h-4 w-4 shrink-0",
+              isActive && "scale-110"
+            )
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: item.label }),
+          item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-destructive-foreground", children: item.badge > 99 ? "99+" : item.badge }),
+          item.path && /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+        ] })
+      ] });
+      const itemClassName = cn(
+        "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 w-full",
+        "hover:bg-accent hover:text-accent-foreground",
+        isActive && "bg-accent text-accent-foreground",
+        collapsed ? "justify-center" : "justify-start"
+      );
+      if (item.path) {
+        return /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: item.path,
+            onClick: () => onNavigate?.(item.path),
+            className: itemClassName,
+            title: collapsed ? item.label : void 0,
+            children: itemContent
+          },
+          item.key
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+          },
+          className: itemClassName,
+          title: collapsed ? item.label : void 0,
+          children: itemContent
+        },
+        item.key
+      );
+    }) })
+  ] });
+};
+
+// src/domains/settings/components/SettingsLayout.tsx
+import { Skeleton } from "@umituz/web-design-system/atoms";
+import { ChevronLeft, Menu } from "lucide-react";
+import { Button } from "@umituz/web-design-system/atoms";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SettingsLayout = ({
+  config
+}) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  useState(() => {
+    setLoading(true);
+    const timer = setTimeout(() => setLoading(false), 200);
+    return () => clearTimeout(timer);
+  });
+  const handleNavigate = (path) => {
+    navigate(path);
+    setMobileOpen(false);
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-screen w-full bg-background font-sans", children: [
+    /* @__PURE__ */ jsxs2(
+      "aside",
+      {
+        className: `hidden md:flex flex-col shrink-0 border-r border-border bg-card transition-all duration-300 ${collapsed ? "w-16" : "w-64"}`,
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex h-14 items-center justify-between border-b border-border px-4", children: [
+            !collapsed && /* @__PURE__ */ jsx2("h2", { className: "text-lg font-semibold text-foreground", children: config.brandName || "Settings" }),
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: () => setCollapsed(!collapsed),
+                className: "ml-auto",
+                children: collapsed ? /* @__PURE__ */ jsx2(Menu, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(ChevronLeft, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("nav", { className: "flex-1 overflow-y-auto p-2", children: config.sections.map((section) => /* @__PURE__ */ jsx2(
+            SettingsSection,
+            {
+              section,
+              currentPath: location.pathname,
+              onNavigate: handleNavigate,
+              collapsed
+            },
+            section.key
+          )) })
+        ]
+      }
+    ),
+    mobileOpen && /* @__PURE__ */ jsxs2("div", { className: "fixed inset-0 z-50 md:hidden", children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
+          onClick: () => setMobileOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs2("aside", { className: "absolute left-0 top-0 h-full w-64 border-r border-border bg-card shadow-xl", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex h-14 items-center justify-between border-b border-border px-4", children: [
+          /* @__PURE__ */ jsx2("h2", { className: "text-lg font-semibold text-foreground", children: config.brandName || "Settings" }),
+          /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "icon", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsx2(Menu, { className: "h-4 w-4" }) })
+        ] }),
+        /* @__PURE__ */ jsx2("nav", { className: "flex-1 overflow-y-auto p-2", children: config.sections.map((section) => /* @__PURE__ */ jsx2(
+          SettingsSection,
+          {
+            section,
+            currentPath: location.pathname,
+            onNavigate: handleNavigate
+          },
+          section.key
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: [
+      /* @__PURE__ */ jsx2("header", { className: "flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 md:hidden", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "icon", onClick: () => setMobileOpen(true), children: /* @__PURE__ */ jsx2(Menu, { className: "h-5 w-5" }) }),
+        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-foreground", children: config.brandName || "Settings" })
+      ] }) }),
+      /* @__PURE__ */ jsx2("main", { className: "flex-1 overflow-y-auto p-4 md:p-8", children: loading ? /* @__PURE__ */ jsxs2("div", { className: "mx-auto w-full max-w-4xl space-y-6", children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-8 w-1/3 rounded-xl" }),
+        /* @__PURE__ */ jsx2("div", { className: "grid gap-4", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx2(Skeleton, { className: "h-24 rounded-xl" }, i)) })
+      ] }) : /* @__PURE__ */ jsx2(Outlet, {}) })
+    ] })
+  ] });
+};
+var SettingsLayout_default = SettingsLayout;
+export {
+  SettingsLayout,
+  SettingsLayout_default as default
+};
+//# sourceMappingURL=SettingsLayout.js.map

package/dist/settings/components/SettingsLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/domains/settings/components/SettingsLayout.tsx","../../../src/domains/settings/components/SettingsSection.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Outlet, useLocation, useNavigate } from \"react-router-dom\";\nimport { SettingsSection } from \"./SettingsSection\";\nimport type { SettingsConfig } from \"../types/settings\";\nimport { Skeleton } from \"@umituz/web-design-system/atoms\";\nimport { ChevronLeft, Menu } from \"lucide-react\";\nimport { Button } from \"@umituz/web-design-system/atoms\";\n\ninterface SettingsLayoutProps {\n  /** Settings configuration */\n  config: SettingsConfig;\n}\n\n/**\n * Settings Layout Component\n *\n * Main layout wrapper for settings pages.\n * Provides sidebar navigation and content area.\n *\n * @param props - Settings layout props\n */\nexport const SettingsLayout = ({\n  config,\n}: SettingsLayoutProps) => {\n  const location = useLocation();\n  const navigate = useNavigate();\n  const [collapsed, setCollapsed] = useState(false);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const [loading, setLoading] = useState(true);\n\n  // Simulate loading on route change\n  useState(() => {\n    setLoading(true);\n    const timer = setTimeout(() => setLoading(false), 200);\n    return () => clearTimeout(timer);\n  });\n\n  const handleNavigate = (path: string) => {\n    navigate(path);\n    setMobileOpen(false);\n  };\n\n  return (\n    <div className=\"flex h-screen w-full bg-background font-sans\">\n      {/* Desktop Sidebar */}\n      <aside\n        className={`hidden md:flex flex-col shrink-0 border-r border-border bg-card transition-all duration-300 ${\n          collapsed ? \"w-16\" : \"w-64\"\n        }`}\n      >\n        <div className=\"flex h-14 items-center justify-between border-b border-border px-4\">\n          {!collapsed && (\n            <h2 className=\"text-lg font-semibold text-foreground\">\n              {config.brandName || \"Settings\"}\n            </h2>\n          )}\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => setCollapsed(!collapsed)}\n            className=\"ml-auto\"\n          >\n            {collapsed ? <Menu className=\"h-4 w-4\" /> : <ChevronLeft className=\"h-4 w-4\" />}\n          </Button>\n        </div>\n\n        <nav className=\"flex-1 overflow-y-auto p-2\">\n          {config.sections.map((section) => (\n            <SettingsSection\n              key={section.key}\n              section={section}\n              currentPath={location.pathname}\n              onNavigate={handleNavigate}\n              collapsed={collapsed}\n            />\n          ))}\n        </nav>\n      </aside>\n\n      {/* Mobile Menu Overlay */}\n      {mobileOpen && (\n        <div className=\"fixed inset-0 z-50 md:hidden\">\n          <div\n            className=\"absolute inset-0 bg-background/80 backdrop-blur-sm\"\n            onClick={() => setMobileOpen(false)}\n          />\n          <aside className=\"absolute left-0 top-0 h-full w-64 border-r border-border bg-card shadow-xl\">\n            <div className=\"flex h-14 items-center justify-between border-b border-border px-4\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {config.brandName || \"Settings\"}\n              </h2>\n              <Button variant=\"ghost\" size=\"icon\" onClick={() => setMobileOpen(false)}>\n                <Menu className=\"h-4 w-4\" />\n              </Button>\n            </div>\n\n            <nav className=\"flex-1 overflow-y-auto p-2\">\n              {config.sections.map((section) => (\n                <SettingsSection\n                  key={section.key}\n                  section={section}\n                  currentPath={location.pathname}\n                  onNavigate={handleNavigate}\n                />\n              ))}\n            </nav>\n          </aside>\n        </div>\n      )}\n\n      {/* Main Content Area */}\n      <div className=\"flex flex-1 flex-col overflow-hidden min-w-0\">\n        {/* Mobile Header */}\n        <header className=\"flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 md:hidden\">\n          <div className=\"flex items-center gap-3\">\n            <Button variant=\"ghost\" size=\"icon\" onClick={() => setMobileOpen(true)}>\n              <Menu className=\"h-5 w-5\" />\n            </Button>\n            <h2 className=\"text-sm font-semibold text-foreground\">\n              {config.brandName || \"Settings\"}\n            </h2>\n          </div>\n        </header>\n\n        <main className=\"flex-1 overflow-y-auto p-4 md:p-8\">\n          {loading ? (\n            <div className=\"mx-auto w-full max-w-4xl space-y-6\">\n              <Skeleton className=\"h-8 w-1/3 rounded-xl\" />\n              <div className=\"grid gap-4\">\n                {Array.from({ length: 3 }).map((_, i) => (\n                  <Skeleton key={i} className=\"h-24 rounded-xl\" />\n                ))}\n              </div>\n            </div>\n          ) : (\n            <Outlet />\n          )}\n        </main>\n      </div>\n    </div>\n  );\n};\n\nexport default SettingsLayout;\n","import { Link } from \"react-router-dom\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"@umituz/web-design-system/utils\";\nimport type { SettingsSection as SettingsSectionType } from \"../types/settings\";\n\ninterface SettingsSectionProps {\n  /** Section configuration */\n  section: SettingsSectionType;\n  /** Current path */\n  currentPath?: string;\n  /** On navigate callback */\n  onNavigate?: (path: string) => void;\n  /** Collapsed state */\n  collapsed?: boolean;\n}\n\n/**\n * Settings Section Component\n *\n * Displays a section of settings items.\n *\n * @param props - Settings section props\n */\nexport const SettingsSection = ({\n  section,\n  currentPath,\n  onNavigate,\n  collapsed = false,\n}: SettingsSectionProps) => {\n  const filteredItems = section.items.filter((item) => item.enabled !== false);\n\n  if (filteredItems.length === 0) return null;\n\n  return (\n    <div className=\"mb-6 last:mb-0\">\n      {!collapsed && (\n        <h3 className=\"px-2 mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground\">\n          {section.title}\n        </h3>\n      )}\n\n      <div className=\"space-y-1\">\n        {filteredItems.map((item) => {\n          const isActive = currentPath === item.path;\n\n          const itemContent = (\n            <>\n              {item.icon && (\n                <item.icon\n                  className={cn(\n                    \"h-4 w-4 shrink-0\",\n                    isActive && \"scale-110\"\n                  )}\n                />\n              )}\n              {!collapsed && (\n                <>\n                  <span className=\"flex-1 text-left\">{item.label}</span>\n                  {item.badge !== undefined && item.badge > 0 && (\n                    <span className=\"ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-destructive-foreground\">\n                      {item.badge > 99 ? \"99+\" : item.badge}\n                    </span>\n                  )}\n                  {item.path && <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />}\n                </>\n              )}\n            </>\n          );\n\n          const itemClassName = cn(\n            \"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 w-full\",\n            \"hover:bg-accent hover:text-accent-foreground\",\n            isActive && \"bg-accent text-accent-foreground\",\n            collapsed ? \"justify-center\" : \"justify-start\"\n          );\n\n          if (item.path) {\n            return (\n              <Link\n                key={item.key}\n                to={item.path}\n                onClick={() => onNavigate?.(item.path!)}\n                className={itemClassName}\n                title={collapsed ? item.label : undefined}\n              >\n                {itemContent}\n              </Link>\n            );\n          }\n\n          return (\n            <button\n              key={item.key}\n              type=\"button\"\n              onClick={() => {}}\n              className={itemClassName}\n              title={collapsed ? item.label : undefined}\n            >\n              {itemContent}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/settings/components/SettingsSection.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SettingsSection as SettingsSection$1 } from '../types/settings.js';
+import 'lucide-react';
+
+interface SettingsSectionProps {
+    /** Section configuration */
+    section: SettingsSection$1;
+    /** Current path */
+    currentPath?: string;
+    /** On navigate callback */
+    onNavigate?: (path: string) => void;
+    /** Collapsed state */
+    collapsed?: boolean;
+}
+/**
+ * Settings Section Component
+ *
+ * Displays a section of settings items.
+ *
+ * @param props - Settings section props
+ */
+declare const SettingsSection: ({ section, currentPath, onNavigate, collapsed, }: SettingsSectionProps) => react_jsx_runtime.JSX.Element | null;
+
+export { SettingsSection };

package/dist/settings/components/SettingsSection.js

@@ -0,0 +1,73 @@
+"use client";
+
+// src/domains/settings/components/SettingsSection.tsx
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SettingsSection = ({
+  section,
+  currentPath,
+  onNavigate,
+  collapsed = false
+}) => {
+  const filteredItems = section.items.filter((item) => item.enabled !== false);
+  if (filteredItems.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6 last:mb-0", children: [
+    !collapsed && /* @__PURE__ */ jsx("h3", { className: "px-2 mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: section.title }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredItems.map((item) => {
+      const isActive = currentPath === item.path;
+      const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        item.icon && /* @__PURE__ */ jsx(
+          item.icon,
+          {
+            className: cn(
+              "h-4 w-4 shrink-0",
+              isActive && "scale-110"
+            )
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: item.label }),
+          item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-destructive-foreground", children: item.badge > 99 ? "99+" : item.badge }),
+          item.path && /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+        ] })
+      ] });
+      const itemClassName = cn(
+        "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 w-full",
+        "hover:bg-accent hover:text-accent-foreground",
+        isActive && "bg-accent text-accent-foreground",
+        collapsed ? "justify-center" : "justify-start"
+      );
+      if (item.path) {
+        return /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: item.path,
+            onClick: () => onNavigate?.(item.path),
+            className: itemClassName,
+            title: collapsed ? item.label : void 0,
+            children: itemContent
+          },
+          item.key
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+          },
+          className: itemClassName,
+          title: collapsed ? item.label : void 0,
+          children: itemContent
+        },
+        item.key
+      );
+    }) })
+  ] });
+};
+export {
+  SettingsSection
+};
+//# sourceMappingURL=SettingsSection.js.map

package/dist/settings/components/SettingsSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/domains/settings/components/SettingsSection.tsx"],"sourcesContent":["import { Link } from \"react-router-dom\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"@umituz/web-design-system/utils\";\nimport type { SettingsSection as SettingsSectionType } from \"../types/settings\";\n\ninterface SettingsSectionProps {\n  /** Section configuration */\n  section: SettingsSectionType;\n  /** Current path */\n  currentPath?: string;\n  /** On navigate callback */\n  onNavigate?: (path: string) => void;\n  /** Collapsed state */\n  collapsed?: boolean;\n}\n\n/**\n * Settings Section Component\n *\n * Displays a section of settings items.\n *\n * @param props - Settings section props\n */\nexport const SettingsSection = ({\n  section,\n  currentPath,\n  onNavigate,\n  collapsed = false,\n}: SettingsSectionProps) => {\n  const filteredItems = section.items.filter((item) => item.enabled !== false);\n\n  if (filteredItems.length === 0) return null;\n\n  return (\n    <div className=\"mb-6 last:mb-0\">\n      {!collapsed && (\n        <h3 className=\"px-2 mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground\">\n          {section.title}\n        </h3>\n      )}\n\n      <div className=\"space-y-1\">\n        {filteredItems.map((item) => {\n          const isActive = currentPath === item.path;\n\n          const itemContent = (\n            <>\n              {item.icon && (\n                <item.icon\n                  className={cn(\n                    \"h-4 w-4 shrink-0\",\n                    isActive && \"scale-110\"\n                  )}\n                />\n              )}\n              {!collapsed && (\n                <>\n                  <span className=\"flex-1 text-left\">{item.label}</span>\n                  {item.badge !== undefined && item.badge > 0 && (\n                    <span className=\"ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-destructive-foreground\">\n                      {item.badge > 99 ? \"99+\" : item.badge}\n                    </span>\n                  )}\n                  {item.path && <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />}\n                </>\n              )}\n            </>\n          );\n\n          const itemClassName = cn(\n            \"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 w-full\",\n            \"hover:bg-accent hover:text-accent-foreground\",\n            isActive && \"bg-accent text-accent-foreground\",\n            collapsed ? \"justify-center\" : \"justify-start\"\n          );\n\n          if (item.path) {\n            return (\n              <Link\n                key={item.key}\n                to={item.path}\n                onClick={() => onNavigate?.(item.path!)}\n                className={itemClassName}\n                title={collapsed ? item.label : undefined}\n              >\n                {itemContent}\n              </Link>\n            );\n          }\n\n          return (\n            <button\n              key={item.key}\n              type=\"button\"\n              onClick={() => {}}\n              className={itemClassName}\n              title={collapsed ? item.label : undefined}\n            >\n              {itemContent}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AAkCX,SAoBQ,UApBR,KAoBQ,YApBR;AAbD,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAA4B;AAC1B,QAAM,gBAAgB,QAAQ,MAAM,OAAO,CAAC,SAAS,KAAK,YAAY,KAAK;AAE3E,MAAI,cAAc,WAAW,EAAG,QAAO;AAEvC,SACE,qBAAC,SAAI,WAAU,kBACZ;AAAA,KAAC,aACA,oBAAC,QAAG,WAAU,8EACX,kBAAQ,OACX;AAAA,IAGF,oBAAC,SAAI,WAAU,aACZ,wBAAc,IAAI,CAAC,SAAS;AAC3B,YAAM,WAAW,gBAAgB,KAAK;AAEtC,YAAM,cACJ,iCACG;AAAA,aAAK,QACJ;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,YAAY;AAAA,YACd;AAAA;AAAA,QACF;AAAA,QAED,CAAC,aACA,iCACE;AAAA,8BAAC,UAAK,WAAU,oBAAoB,eAAK,OAAM;AAAA,UAC9C,KAAK,UAAU,UAAa,KAAK,QAAQ,KACxC,oBAAC,UAAK,WAAU,6IACb,eAAK,QAAQ,KAAK,QAAQ,KAAK,OAClC;AAAA,UAED,KAAK,QAAQ,oBAAC,gBAAa,WAAU,iCAAgC;AAAA,WACxE;AAAA,SAEJ;AAGF,YAAM,gBAAgB;AAAA,QACpB;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,YAAY,mBAAmB;AAAA,MACjC;AAEA,UAAI,KAAK,MAAM;AACb,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,IAAI,KAAK;AAAA,YACT,SAAS,MAAM,aAAa,KAAK,IAAK;AAAA,YACtC,WAAW;AAAA,YACX,OAAO,YAAY,KAAK,QAAQ;AAAA,YAE/B;AAAA;AAAA,UANI,KAAK;AAAA,QAOZ;AAAA,MAEJ;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM;AAAA,UAAC;AAAA,UAChB,WAAW;AAAA,UACX,OAAO,YAAY,KAAK,QAAQ;AAAA,UAE/B;AAAA;AAAA,QANI,KAAK;AAAA,MAOZ;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,5 @@
+export { SettingsLayout } from './SettingsLayout.js';
+export { SettingsSection } from './SettingsSection.js';
+import 'react/jsx-runtime';
+import '../types/settings.js';
+import 'lucide-react';

package/dist/settings/components/index.js

@@ -0,0 +1,169 @@
+"use client";
+
+// src/domains/settings/components/SettingsLayout.tsx
+import { useState } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+
+// src/domains/settings/components/SettingsSection.tsx
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SettingsSection = ({
+  section,
+  currentPath,
+  onNavigate,
+  collapsed = false
+}) => {
+  const filteredItems = section.items.filter((item) => item.enabled !== false);
+  if (filteredItems.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6 last:mb-0", children: [
+    !collapsed && /* @__PURE__ */ jsx("h3", { className: "px-2 mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: section.title }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredItems.map((item) => {
+      const isActive = currentPath === item.path;
+      const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        item.icon && /* @__PURE__ */ jsx(
+          item.icon,
+          {
+            className: cn(
+              "h-4 w-4 shrink-0",
+              isActive && "scale-110"
+            )
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: item.label }),
+          item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-destructive-foreground", children: item.badge > 99 ? "99+" : item.badge }),
+          item.path && /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+        ] })
+      ] });
+      const itemClassName = cn(
+        "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 w-full",
+        "hover:bg-accent hover:text-accent-foreground",
+        isActive && "bg-accent text-accent-foreground",
+        collapsed ? "justify-center" : "justify-start"
+      );
+      if (item.path) {
+        return /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: item.path,
+            onClick: () => onNavigate?.(item.path),
+            className: itemClassName,
+            title: collapsed ? item.label : void 0,
+            children: itemContent
+          },
+          item.key
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+          },
+          className: itemClassName,
+          title: collapsed ? item.label : void 0,
+          children: itemContent
+        },
+        item.key
+      );
+    }) })
+  ] });
+};
+
+// src/domains/settings/components/SettingsLayout.tsx
+import { Skeleton } from "@umituz/web-design-system/atoms";
+import { ChevronLeft, Menu } from "lucide-react";
+import { Button } from "@umituz/web-design-system/atoms";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SettingsLayout = ({
+  config
+}) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  useState(() => {
+    setLoading(true);
+    const timer = setTimeout(() => setLoading(false), 200);
+    return () => clearTimeout(timer);
+  });
+  const handleNavigate = (path) => {
+    navigate(path);
+    setMobileOpen(false);
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-screen w-full bg-background font-sans", children: [
+    /* @__PURE__ */ jsxs2(
+      "aside",
+      {
+        className: `hidden md:flex flex-col shrink-0 border-r border-border bg-card transition-all duration-300 ${collapsed ? "w-16" : "w-64"}`,
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex h-14 items-center justify-between border-b border-border px-4", children: [
+            !collapsed && /* @__PURE__ */ jsx2("h2", { className: "text-lg font-semibold text-foreground", children: config.brandName || "Settings" }),
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: () => setCollapsed(!collapsed),
+                className: "ml-auto",
+                children: collapsed ? /* @__PURE__ */ jsx2(Menu, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(ChevronLeft, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("nav", { className: "flex-1 overflow-y-auto p-2", children: config.sections.map((section) => /* @__PURE__ */ jsx2(
+            SettingsSection,
+            {
+              section,
+              currentPath: location.pathname,
+              onNavigate: handleNavigate,
+              collapsed
+            },
+            section.key
+          )) })
+        ]
+      }
+    ),
+    mobileOpen && /* @__PURE__ */ jsxs2("div", { className: "fixed inset-0 z-50 md:hidden", children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
+          onClick: () => setMobileOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs2("aside", { className: "absolute left-0 top-0 h-full w-64 border-r border-border bg-card shadow-xl", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex h-14 items-center justify-between border-b border-border px-4", children: [
+          /* @__PURE__ */ jsx2("h2", { className: "text-lg font-semibold text-foreground", children: config.brandName || "Settings" }),
+          /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "icon", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsx2(Menu, { className: "h-4 w-4" }) })
+        ] }),
+        /* @__PURE__ */ jsx2("nav", { className: "flex-1 overflow-y-auto p-2", children: config.sections.map((section) => /* @__PURE__ */ jsx2(
+          SettingsSection,
+          {
+            section,
+            currentPath: location.pathname,
+            onNavigate: handleNavigate
+          },
+          section.key
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: [
+      /* @__PURE__ */ jsx2("header", { className: "flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 md:hidden", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "icon", onClick: () => setMobileOpen(true), children: /* @__PURE__ */ jsx2(Menu, { className: "h-5 w-5" }) }),
+        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-foreground", children: config.brandName || "Settings" })
+      ] }) }),
+      /* @__PURE__ */ jsx2("main", { className: "flex-1 overflow-y-auto p-4 md:p-8", children: loading ? /* @__PURE__ */ jsxs2("div", { className: "mx-auto w-full max-w-4xl space-y-6", children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-8 w-1/3 rounded-xl" }),
+        /* @__PURE__ */ jsx2("div", { className: "grid gap-4", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx2(Skeleton, { className: "h-24 rounded-xl" }, i)) })
+      ] }) : /* @__PURE__ */ jsx2(Outlet, {}) })
+    ] })
+  ] });
+};
+export {
+  SettingsLayout,
+  SettingsSection
+};
+//# sourceMappingURL=index.js.map

package/dist/settings/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/domains/settings/components/SettingsLayout.tsx","../../../src/domains/settings/components/SettingsSection.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Outlet, useLocation, useNavigate } from \"react-router-dom\";\nimport { SettingsSection } from \"./SettingsSection\";\nimport type { SettingsConfig } from \"../types/settings\";\nimport { Skeleton } from \"@umituz/web-design-system/atoms\";\nimport { ChevronLeft, Menu } from \"lucide-react\";\nimport { Button } from \"@umituz/web-design-system/atoms\";\n\ninterface SettingsLayoutProps {\n  /** Settings configuration */\n  config: SettingsConfig;\n}\n\n/**\n * Settings Layout Component\n *\n * Main layout wrapper for settings pages.\n * Provides sidebar navigation and content area.\n *\n * @param props - Settings layout props\n */\nexport const SettingsLayout = ({\n  config,\n}: SettingsLayoutProps) => {\n  const location = useLocation();\n  const navigate = useNavigate();\n  const [collapsed, setCollapsed] = useState(false);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const [loading, setLoading] = useState(true);\n\n  // Simulate loading on route change\n  useState(() => {\n    setLoading(true);\n    const timer = setTimeout(() => setLoading(false), 200);\n    return () => clearTimeout(timer);\n  });\n\n  const handleNavigate = (path: string) => {\n    navigate(path);\n    setMobileOpen(false);\n  };\n\n  return (\n    <div className=\"flex h-screen w-full bg-background font-sans\">\n      {/* Desktop Sidebar */}\n      <aside\n        className={`hidden md:flex flex-col shrink-0 border-r border-border bg-card transition-all duration-300 ${\n          collapsed ? \"w-16\" : \"w-64\"\n        }`}\n      >\n        <div className=\"flex h-14 items-center justify-between border-b border-border px-4\">\n          {!collapsed && (\n            <h2 className=\"text-lg font-semibold text-foreground\">\n              {config.brandName || \"Settings\"}\n            </h2>\n          )}\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => setCollapsed(!collapsed)}\n            className=\"ml-auto\"\n          >\n            {collapsed ? <Menu className=\"h-4 w-4\" /> : <ChevronLeft className=\"h-4 w-4\" />}\n          </Button>\n        </div>\n\n        <nav className=\"flex-1 overflow-y-auto p-2\">\n          {config.sections.map((section) => (\n            <SettingsSection\n              key={section.key}\n              section={section}\n              currentPath={location.pathname}\n              onNavigate={handleNavigate}\n              collapsed={collapsed}\n            />\n          ))}\n        </nav>\n      </aside>\n\n      {/* Mobile Menu Overlay */}\n      {mobileOpen && (\n        <div className=\"fixed inset-0 z-50 md:hidden\">\n          <div\n            className=\"absolute inset-0 bg-background/80 backdrop-blur-sm\"\n            onClick={() => setMobileOpen(false)}\n          />\n          <aside className=\"absolute left-0 top-0 h-full w-64 border-r border-border bg-card shadow-xl\">\n            <div className=\"flex h-14 items-center justify-between border-b border-border px-4\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {config.brandName || \"Settings\"}\n              </h2>\n              <Button variant=\"ghost\" size=\"icon\" onClick={() => setMobileOpen(false)}>\n                <Menu className=\"h-4 w-4\" />\n              </Button>\n            </div>\n\n            <nav className=\"flex-1 overflow-y-auto p-2\">\n              {config.sections.map((section) => (\n                <SettingsSection\n                  key={section.key}\n                  section={section}\n                  currentPath={location.pathname}\n                  onNavigate={handleNavigate}\n                />\n              ))}\n            </nav>\n          </aside>\n        </div>\n      )}\n\n      {/* Main Content Area */}\n      <div className=\"flex flex-1 flex-col overflow-hidden min-w-0\">\n        {/* Mobile Header */}\n        <header className=\"flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 md:hidden\">\n          <div className=\"flex items-center gap-3\">\n            <Button variant=\"ghost\" size=\"icon\" onClick={() => setMobileOpen(true)}>\n              <Menu className=\"h-5 w-5\" />\n            </Button>\n            <h2 className=\"text-sm font-semibold text-foreground\">\n              {config.brandName || \"Settings\"}\n            </h2>\n          </div>\n        </header>\n\n        <main className=\"flex-1 overflow-y-auto p-4 md:p-8\">\n          {loading ? (\n            <div className=\"mx-auto w-full max-w-4xl space-y-6\">\n              <Skeleton className=\"h-8 w-1/3 rounded-xl\" />\n              <div className=\"grid gap-4\">\n                {Array.from({ length: 3 }).map((_, i) => (\n                  <Skeleton key={i} className=\"h-24 rounded-xl\" />\n                ))}\n              </div>\n            </div>\n          ) : (\n            <Outlet />\n          )}\n        </main>\n      </div>\n    </div>\n  );\n};\n\nexport default SettingsLayout;\n","import { Link } from \"react-router-dom\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"@umituz/web-design-system/utils\";\nimport type { SettingsSection as SettingsSectionType } from \"../types/settings\";\n\ninterface SettingsSectionProps {\n  /** Section configuration */\n  section: SettingsSectionType;\n  /** Current path */\n  currentPath?: string;\n  /** On navigate callback */\n  onNavigate?: (path: string) => void;\n  /** Collapsed state */\n  collapsed?: boolean;\n}\n\n/**\n * Settings Section Component\n *\n * Displays a section of settings items.\n *\n * @param props - Settings section props\n */\nexport const SettingsSection = ({\n  section,\n  currentPath,\n  onNavigate,\n  collapsed = false,\n}: SettingsSectionProps) => {\n  const filteredItems = section.items.filter((item) => item.enabled !== false);\n\n  if (filteredItems.length === 0) return null;\n\n  return (\n    <div className=\"mb-6 last:mb-0\">\n      {!collapsed && (\n        <h3 className=\"px-2 mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground\">\n          {section.title}\n        </h3>\n      )}\n\n      <div className=\"space-y-1\">\n        {filteredItems.map((item) => {\n          const isActive = currentPath === item.path;\n\n          const itemContent = (\n            <>\n              {item.icon && (\n                <item.icon\n                  className={cn(\n                    \"h-4 w-4 shrink-0\",\n                    isActive && \"scale-110\"\n                  )}\n                />\n              )}\n              {!collapsed && (\n                <>\n                  <span className=\"flex-1 text-left\">{item.label}</span>\n                  {item.badge !== undefined && item.badge > 0 && (\n                    <span className=\"ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-destructive-foreground\">\n                      {item.badge > 99 ? \"99+\" : item.badge}\n                    </span>\n                  )}\n                  {item.path && <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />}\n                </>\n              )}\n            </>\n          );\n\n          const itemClassName = cn(\n            \"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 w-full\",\n            \"hover:bg-accent hover:text-accent-foreground\",\n            isActive && \"bg-accent text-accent-foreground\",\n            collapsed ? \"justify-center\" : \"justify-start\"\n          );\n\n          if (item.path) {\n            return (\n              <Link\n                key={item.key}\n                to={item.path}\n                onClick={() => onNavigate?.(item.path!)}\n                className={itemClassName}\n                title={collapsed ? item.label : undefined}\n              >\n                {itemContent}\n              </Link>\n            );\n          }\n\n          return (\n            <button\n              key={item.key}\n              type=\"button\"\n              onClick={() => {}}\n              className={itemClassName}\n              title={collapsed ? item.label : undefined}\n            >\n              {itemContent}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/settings/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useSettings } from './useSettings.js';
+import '../types/settings.js';
+import 'lucide-react';

package/dist/settings/hooks/index.js

@@ -0,0 +1,59 @@
+"use client";
+
+// src/domains/settings/hooks/useSettings.ts
+import { useState, useCallback } from "react";
+function useSettings(initialConfig) {
+  const [config, setConfig] = useState(initialConfig);
+  const updateItem = useCallback(
+    (sectionKey, itemKey, updates) => {
+      setConfig((prev) => ({
+        ...prev,
+        sections: prev.sections.map(
+          (section) => section.key === sectionKey ? {
+            ...section,
+            items: section.items.map(
+              (item) => item.key === itemKey ? { ...item, ...updates } : item
+            )
+          } : section
+        )
+      }));
+    },
+    []
+  );
+  const toggleItem = useCallback((sectionKey, itemKey) => {
+    setConfig((prev) => ({
+      ...prev,
+      sections: prev.sections.map(
+        (section) => section.key === sectionKey ? {
+          ...section,
+          items: section.items.map(
+            (item) => item.key === itemKey ? { ...item, enabled: item.enabled === void 0 ? true : !item.enabled } : item
+          )
+        } : section
+      )
+    }));
+  }, []);
+  const setItemBadge = useCallback((sectionKey, itemKey, badge) => {
+    setConfig((prev) => ({
+      ...prev,
+      sections: prev.sections.map(
+        (section) => section.key === sectionKey ? {
+          ...section,
+          items: section.items.map(
+            (item) => item.key === itemKey ? { ...item, badge } : item
+          )
+        } : section
+      )
+    }));
+  }, []);
+  return {
+    config,
+    updateItem,
+    toggleItem,
+    setItemBadge
+  };
+}
+export {
+  useSettings
+};
+//# sourceMappingURL=index.js.map

package/dist/settings/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/domains/settings/hooks/useSettings.ts"],"sourcesContent":["/**\n * Settings Hooks\n *\n * Custom React hooks for settings functionality\n */\n\nimport { useState, useCallback } from \"react\";\nimport type { SettingsConfig, SettingsItem } from \"../types/settings\";\n\n/**\n * Use Settings Hook\n *\n * Manages settings state and actions\n *\n * @param initialConfig - Initial settings configuration\n * @returns Settings state and actions\n */\nexport function useSettings(initialConfig: SettingsConfig) {\n  const [config, setConfig] = useState<SettingsConfig>(initialConfig);\n\n  const updateItem = useCallback(\n    (sectionKey: string, itemKey: string, updates: Partial<SettingsItem>) => {\n      setConfig((prev) => ({\n        ...prev,\n        sections: prev.sections.map((section) =>\n          section.key === sectionKey\n            ? {\n                ...section,\n                items: section.items.map((item) =>\n                  item.key === itemKey ? { ...item, ...updates } : item\n                ),\n              }\n            : section\n        ),\n      }));\n    },\n    []\n  );\n\n  const toggleItem = useCallback((sectionKey: string, itemKey: string) => {\n    setConfig((prev) => ({\n      ...prev,\n      sections: prev.sections.map((section) =>\n        section.key === sectionKey\n          ? {\n              ...section,\n              items: section.items.map((item) =>\n                item.key === itemKey\n                  ? { ...item, enabled: item.enabled === undefined ? true : !item.enabled }\n                  : item\n              ),\n            }\n          : section\n      ),\n    }));\n  }, []);\n\n  const setItemBadge = useCallback((sectionKey: string, itemKey: string, badge: number | undefined) => {\n    setConfig((prev) => ({\n      ...prev,\n      sections: prev.sections.map((section) =>\n        section.key === sectionKey\n          ? {\n              ...section,\n              items: section.items.map((item) =>\n                item.key === itemKey ? { ...item, badge } : item\n              ),\n            }\n          : section\n      ),\n    }));\n  }, []);\n\n  return {\n    config,\n    updateItem,\n    toggleItem,\n    setItemBadge,\n  };\n}\n"],"mappings":";;;AAMA,SAAS,UAAU,mBAAmB;AAW/B,SAAS,YAAY,eAA+B;AACzD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAyB,aAAa;AAElE,QAAM,aAAa;AAAA,IACjB,CAAC,YAAoB,SAAiB,YAAmC;AACvE,gBAAU,CAAC,UAAU;AAAA,QACnB,GAAG;AAAA,QACH,UAAU,KAAK,SAAS;AAAA,UAAI,CAAC,YAC3B,QAAQ,QAAQ,aACZ;AAAA,YACE,GAAG;AAAA,YACH,OAAO,QAAQ,MAAM;AAAA,cAAI,CAAC,SACxB,KAAK,QAAQ,UAAU,EAAE,GAAG,MAAM,GAAG,QAAQ,IAAI;AAAA,YACnD;AAAA,UACF,IACA;AAAA,QACN;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,aAAa,YAAY,CAAC,YAAoB,YAAoB;AACtE,cAAU,CAAC,UAAU;AAAA,MACnB,GAAG;AAAA,MACH,UAAU,KAAK,SAAS;AAAA,QAAI,CAAC,YAC3B,QAAQ,QAAQ,aACZ;AAAA,UACE,GAAG;AAAA,UACH,OAAO,QAAQ,MAAM;AAAA,YAAI,CAAC,SACxB,KAAK,QAAQ,UACT,EAAE,GAAG,MAAM,SAAS,KAAK,YAAY,SAAY,OAAO,CAAC,KAAK,QAAQ,IACtE;AAAA,UACN;AAAA,QACF,IACA;AAAA,MACN;AAAA,IACF,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,CAAC,YAAoB,SAAiB,UAA8B;AACnG,cAAU,CAAC,UAAU;AAAA,MACnB,GAAG;AAAA,MACH,UAAU,KAAK,SAAS;AAAA,QAAI,CAAC,YAC3B,QAAQ,QAAQ,aACZ;AAAA,UACE,GAAG;AAAA,UACH,OAAO,QAAQ,MAAM;AAAA,YAAI,CAAC,SACxB,KAAK,QAAQ,UAAU,EAAE,GAAG,MAAM,MAAM,IAAI;AAAA,UAC9C;AAAA,QACF,IACA;AAAA,MACN;AAAA,IACF,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/settings/hooks/useSettings.d.ts

@@ -0,0 +1,25 @@
+import { SettingsConfig, SettingsItem } from '../types/settings.js';
+import 'lucide-react';
+
+/**
+ * Settings Hooks
+ *
+ * Custom React hooks for settings functionality
+ */
+
+/**
+ * Use Settings Hook
+ *
+ * Manages settings state and actions
+ *
+ * @param initialConfig - Initial settings configuration
+ * @returns Settings state and actions
+ */
+declare function useSettings(initialConfig: SettingsConfig): {
+    config: SettingsConfig;
+    updateItem: (sectionKey: string, itemKey: string, updates: Partial<SettingsItem>) => void;
+    toggleItem: (sectionKey: string, itemKey: string) => void;
+    setItemBadge: (sectionKey: string, itemKey: string, badge: number | undefined) => void;
+};
+
+export { useSettings };