@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.81

package/dist/components/settings/layouts/SettingsSidebar.js

@@ -3,8 +3,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState, useCallback, useMemo } from "react";
-import { cn } from "../../../lib/utils";
-import { useUserProfile } from "../../../hooks/useUserProfile";
+import { cn } from "../../../lib/utils/index.js";
+import { useUserProfile } from "../../../hooks/useUserProfile.js";
+import { usePrefetchSettings } from "../../../hooks/usePrefetch.js";
 import {
   User,
   Users,
@@ -16,9 +17,9 @@ import {
   Key,
   Share2
 } from "lucide-react";
-import { createTestId, createCyId, createAriaLabel, sel } from "../../../lib/test";
+import { createAriaLabel, sel } from "../../../lib/test/index.js";
 import { useTranslations } from "next-intl";
-import { getEnabledSettingsPages } from "../../../lib/config";
+import { getEnabledSettingsPages } from "../../../lib/config/index.js";
 const settingsIcons = {
   profile: User,
   password: Lock,
@@ -34,8 +35,19 @@ function SettingsSidebar({ className }) {
   const pathname = usePathname();
   const [statusMessage, setStatusMessage] = useState("");
   const { hasPassword } = useUserProfile();
+  const { prefetchProfile, prefetchTeams } = usePrefetchSettings();
   const t = useTranslations("common");
   const tSettings = useTranslations("settings");
+  const getPrefetchHandler = useCallback((pageName) => {
+    switch (pageName) {
+      case "profile":
+        return prefetchProfile;
+      case "teams":
+        return prefetchTeams;
+      default:
+        return void 0;
+    }
+  }, [prefetchProfile, prefetchTeams]);
   const filteredNavigation = useMemo(() => {
     const enabledPages = getEnabledSettingsPages();
     console.log("[SettingsSidebar] enabledPages:", enabledPages);
@@ -69,7 +81,6 @@ function SettingsSidebar({ className }) {
         "aria-live": "polite",
         "aria-atomic": "true",
         className: "sr-only",
-        ...createTestId("settings-sidebar", "status", "message") && { "data-testid": createTestId("settings-sidebar", "status", "message") },
         children: statusMessage
       }
     ),
@@ -79,15 +90,13 @@ function SettingsSidebar({ className }) {
         className: cn("space-y-2", className),
         role: "navigation",
         "aria-label": "Navegaci\xF3n de configuraci\xF3n",
-        ...createTestId("settings-sidebar", "container") && { "data-testid": createTestId("settings-sidebar", "container") },
-        ...createCyId("settings-sidebar", "main") && { "data-cy": createCyId("settings-sidebar", "main") },
+        "data-cy": sel("settings.sidebar.container"),
         children: /* @__PURE__ */ jsxs("div", { className: "px-3 py-2", children: [
           /* @__PURE__ */ jsxs(
             "header",
             {
               className: "flex items-center gap-2 mb-4",
-              ...createTestId("settings-sidebar", "header") && { "data-testid": createTestId("settings-sidebar", "header") },
-              ...createCyId("settings-sidebar", "header") && { "data-cy": createCyId("settings-sidebar", "header") },
+              "data-cy": sel("settings.sidebar.header"),
               children: [
                 /* @__PURE__ */ jsx(
                   Settings,
@@ -101,7 +110,6 @@ function SettingsSidebar({ className }) {
                   {
                     id: "settings-heading",
                     className: "text-lg font-semibold tracking-tight",
-                    ...createTestId("settings-sidebar", "heading") && { "data-testid": createTestId("settings-sidebar", "heading") },
                     children: t("navigation.settings")
                   }
                 )
@@ -112,17 +120,16 @@ function SettingsSidebar({ className }) {
             "section",
             {
               "aria-labelledby": "settings-heading",
-              ...createTestId("settings-sidebar", "nav", "section") && { "data-testid": createTestId("settings-sidebar", "nav", "section") },
               children: /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: "space-y-1",
                   role: "list",
-                  ...createTestId("settings-sidebar", "nav", "items") && { "data-testid": createTestId("settings-sidebar", "nav", "items") },
-                  ...createCyId("settings-sidebar", "nav-items") && { "data-cy": createCyId("settings-sidebar", "nav-items") },
+                  "data-cy": sel("settings.sidebar.nav.items"),
                   children: filteredNavigation.map((item) => {
                     const isActive = pathname === item.href;
                     const Icon = item.icon;
+                    const prefetchHandler = getPrefetchHandler(item.name);
                     return /* @__PURE__ */ jsxs(
                       Link,
                       {
@@ -130,6 +137,7 @@ function SettingsSidebar({ className }) {
                         role: "listitem",
                         onClick: () => handleNavigation(tSettings(`navigation.${item.name}`), tSettings(`overview.${item.name}Description`)),
                         onKeyDown: (e) => handleKeyDown(e, item.href, tSettings(`navigation.${item.name}`), tSettings(`overview.${item.name}Description`)),
+                        onMouseEnter: prefetchHandler,
                         "aria-current": isActive ? "page" : void 0,
                         "aria-label": createAriaLabel(
                           "{name} - {description}{current}",
@@ -143,8 +151,7 @@ function SettingsSidebar({ className }) {
                           "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all hover:text-accent-foreground group focus:outline-none focus:ring-2 focus:ring-accent",
                           isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/50"
                         ),
-                        ...createTestId("settings-sidebar", "nav", "item") && { "data-testid": createTestId("settings-sidebar", "nav", "item") },
-                        "data-cy": sel("settings.sidebar.navItem", { section: item.name.toLowerCase() }),
+                        "data-cy": sel("settings.sidebar.nav.item", { section: item.name.toLowerCase() }),
                         "data-nav-item": item.name.toLowerCase(),
                         "data-active": isActive,
                         children: [
@@ -166,7 +173,6 @@ function SettingsSidebar({ className }) {
                                   "font-medium transition-colors",
                                   isActive ? "text-accent-foreground" : "text-foreground"
                                 ),
-                                ...createTestId("settings-sidebar", "nav", "title") && { "data-testid": createTestId("settings-sidebar", "nav", "title") },
                                 children: tSettings(`navigation.${item.name}`)
                               }
                             ),
@@ -177,7 +183,6 @@ function SettingsSidebar({ className }) {
                                   "text-xs transition-colors",
                                   isActive ? "text-accent-foreground/70" : "text-muted-foreground"
                                 ),
-                                ...createTestId("settings-sidebar", "nav", "description") && { "data-testid": createTestId("settings-sidebar", "nav", "description") },
                                 children: tSettings(`overview.${item.name}Description`)
                               }
                             )

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

@@ -1,4 +1,4 @@
-import { SettingsSidebar } from "./SettingsSidebar";
+import { SettingsSidebar } from "./SettingsSidebar.js";
 export {
   SettingsSidebar
 };

package/dist/components/shared/CopyableId.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Copy, Check } from "lucide-react";
-import { createCyId } from "../../lib/test";
+import { sel } from "../../lib/test/index.js";
 function CopyableId({
   id,
   truncateAt = 8,
@@ -21,7 +21,7 @@ function CopyableId({
     {
       onClick: handleCopy,
       className: `flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer ${className || ""}`,
-      "data-cy": entitySlug ? createCyId(entitySlug, "copy-id") : "copy-id",
+      "data-cy": entitySlug ? sel("entities.detail.copyId", { slug: entitySlug }) : sel("entities.detail.copyId", { slug: "generic" }),
       children: [
         /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
           "ID: ",

package/dist/components/shared/MultiSelectFilter.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
-import { Button } from "../ui/button";
+import { cn } from "../../lib/utils/index.js";
+import { Button } from "../ui/button.js";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "../ui/popover";
+} from "../ui/popover.js";
 import { ChevronDown, Check, X } from "lucide-react";
 import { useState } from "react";
 function MultiSelectFilter({

package/dist/components/shared/SearchInput.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
-import { Input } from "../ui/input";
+import { cn } from "../../lib/utils/index.js";
+import { Input } from "../ui/input.js";
 import { Search } from "lucide-react";
 import { forwardRef } from "react";
 const SearchInput = forwardRef(

package/dist/components/shared/index.js

@@ -1,6 +1,6 @@
-import { CopyableId } from "./CopyableId";
-import { SearchInput } from "./SearchInput";
-import { MultiSelectFilter } from "./MultiSelectFilter";
+import { CopyableId } from "./CopyableId.js";
+import { SearchInput } from "./SearchInput.js";
+import { MultiSelectFilter } from "./MultiSelectFilter.js";
 export {
   CopyableId,
   MultiSelectFilter,

package/dist/components/superadmin/filters/FilterDropdown.js

@@ -7,8 +7,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "../../ui/select";
-import { cn } from "../../../lib/utils";
+} from "../../ui/select.js";
+import { cn } from "../../../lib/utils/index.js";
 function FilterDropdown({
   value,
   onChange,

package/dist/components/superadmin/filters/PaginationControls.d.ts

@@ -7,12 +7,14 @@ interface PaginationControlsProps {
     onLimitChange?: (limit: number) => void;
     showPageSize?: boolean;
     pageSizeOptions?: number[];
+    /** Context for selectors: 'users' | 'teams' | 'subscriptions' */
+    context: 'users' | 'teams' | 'subscriptions';
 }
 /**
  * PaginationControls Component
  *
  * Server-side pagination controls with page navigation and optional page size selector.
  */
-export declare function PaginationControls({ page, totalPages, total, limit, onPageChange, onLimitChange, showPageSize, pageSizeOptions, }: PaginationControlsProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationControls({ page, totalPages, total, limit, onPageChange, onLimitChange, showPageSize, pageSizeOptions, context, }: PaginationControlsProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PaginationControls.d.ts.map

package/dist/components/superadmin/filters/PaginationControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationControls.d.ts","sourceRoot":"","sources":["../../../../src/components/superadmin/filters/PaginationControls.tsx"],"names":[],"mappings":"AAaA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,YAAmB,EACnB,eAAmC,GACpC,EAAE,uBAAuB,2CAoGzB"}
+{"version":3,"file":"PaginationControls.d.ts","sourceRoot":"","sources":["../../../../src/components/superadmin/filters/PaginationControls.tsx"],"names":[],"mappings":"AAaA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,iEAAiE;IACjE,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,eAAe,CAAC;CAC9C;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,YAAmB,EACnB,eAAmC,EACnC,OAAO,GACR,EAAE,uBAAuB,2CAoGzB"}

package/dist/components/superadmin/filters/PaginationControls.js

@@ -1,15 +1,15 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
-import { Button } from "../../ui/button";
+import { Button } from "../../ui/button.js";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "../../ui/select";
-import { sel } from "../../../lib/test";
+} from "../../ui/select.js";
+import { sel } from "../../../lib/test/index.js";
 function PaginationControls({
   page,
   totalPages,
@@ -18,7 +18,8 @@ function PaginationControls({
   onPageChange,
   onLimitChange,
   showPageSize = true,
-  pageSizeOptions = [10, 20, 50, 100]
+  pageSizeOptions = [10, 20, 50, 100],
+  context
 }) {
   const startItem = total === 0 ? 0 : (page - 1) * limit + 1;
   const endItem = Math.min(page * limit, total);
@@ -45,7 +46,7 @@ function PaginationControls({
             value: String(limit),
             onValueChange: (value) => onLimitChange(Number(value)),
             children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", "data-cy": sel("superadmin.pagination.pageSize"), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: String(limit) }) }),
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", "data-cy": sel(`superadmin.${context}.pagination.pageSize`), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: String(limit) }) }),
               /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
             ]
           }
@@ -66,7 +67,7 @@ function PaginationControls({
             className: "h-8 w-8",
             onClick: () => onPageChange(1),
             disabled: !canGoPrevious,
-            "data-cy": sel("superadmin.pagination.first"),
+            "data-cy": sel(`superadmin.${context}.pagination.first`),
             children: [
               /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "First page" })
@@ -81,7 +82,7 @@ function PaginationControls({
             className: "h-8 w-8",
             onClick: () => onPageChange(page - 1),
             disabled: !canGoPrevious,
-            "data-cy": sel("superadmin.pagination.prev"),
+            "data-cy": sel(`superadmin.${context}.pagination.prev`),
             children: [
               /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous page" })
@@ -96,7 +97,7 @@ function PaginationControls({
             className: "h-8 w-8",
             onClick: () => onPageChange(page + 1),
             disabled: !canGoNext,
-            "data-cy": sel("superadmin.pagination.next"),
+            "data-cy": sel(`superadmin.${context}.pagination.next`),
             children: [
               /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next page" })
@@ -111,7 +112,7 @@ function PaginationControls({
             className: "h-8 w-8",
             onClick: () => onPageChange(totalPages),
             disabled: !canGoNext,
-            "data-cy": sel("superadmin.pagination.last"),
+            "data-cy": sel(`superadmin.${context}.pagination.last`),
             children: [
               /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Last page" })

package/dist/components/superadmin/filters/SearchInput.js

@@ -2,9 +2,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
 import { Search, X } from "lucide-react";
-import { Input } from "../../ui/input";
-import { Button } from "../../ui/button";
-import { cn } from "../../../lib/utils";
+import { Input } from "../../ui/input.js";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils/index.js";
 function SearchInput({
   value,
   onChange,

package/dist/components/superadmin/filters/index.js

@@ -1,6 +1,6 @@
-import { SearchInput } from "./SearchInput";
-import { PaginationControls } from "./PaginationControls";
-import { FilterDropdown } from "./FilterDropdown";
+import { SearchInput } from "./SearchInput.js";
+import { PaginationControls } from "./PaginationControls.js";
+import { FilterDropdown } from "./FilterDropdown.js";
 export {
   FilterDropdown,
   PaginationControls,

package/dist/components/superadmin/index.js

@@ -1,11 +1,11 @@
-import { SuperadminSidebar } from "./layouts/SuperadminSidebar";
-import { TeamsTable } from "./tables/TeamsTable";
-import { PlanFeaturesMatrix } from "./tables/PlanFeaturesMatrix";
-import { RolesPermissionsMatrix } from "./tables/RolesPermissionsMatrix";
-import { SearchInput, PaginationControls, FilterDropdown } from "./filters";
-import { ComponentGallery } from "./misc/ComponentGallery";
-import { FieldTypesGallery } from "./misc/FieldTypesGallery";
-import { ThemePreview } from "./misc/ThemePreview";
+import { SuperadminSidebar } from "./layouts/SuperadminSidebar.js";
+import { TeamsTable } from "./tables/TeamsTable.js";
+import { PlanFeaturesMatrix } from "./tables/PlanFeaturesMatrix.js";
+import { RolesPermissionsMatrix } from "./tables/RolesPermissionsMatrix.js";
+import { SearchInput, PaginationControls, FilterDropdown } from "./filters/index.js";
+import { ComponentGallery } from "./misc/ComponentGallery.js";
+import { FieldTypesGallery } from "./misc/FieldTypesGallery.js";
+import { ThemePreview } from "./misc/ThemePreview.js";
 export {
   ComponentGallery,
   FieldTypesGallery,

package/dist/components/superadmin/layouts/SuperadminSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuperadminSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/superadmin/layouts/SuperadminSidebar.tsx"],"names":[],"mappings":"AA8BA;;;;;GAKG;AACH,wBAAgB,iBAAiB,4CAgMhC"}
+{"version":3,"file":"SuperadminSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/superadmin/layouts/SuperadminSidebar.tsx"],"names":[],"mappings":"AA+BA;;;;;GAKG;AACH,wBAAgB,iBAAiB,4CAuMhC"}

package/dist/components/superadmin/layouts/SuperadminSidebar.js

@@ -12,11 +12,12 @@ import {
   ArrowLeft,
   ChevronLeft,
   ChevronRight,
-  CreditCard
+  CreditCard,
+  FileText
 } from "lucide-react";
-import { cn } from "../../../lib/utils";
-import { Button } from "../../ui/button";
-import { sel } from "../../../lib/test";
+import { cn } from "../../../lib/utils/index.js";
+import { Button } from "../../ui/button.js";
+import { sel } from "../../../lib/test/index.js";
 import { useState } from "react";
 function SuperadminSidebar() {
   const pathname = usePathname();
@@ -50,6 +51,13 @@ function SuperadminSidebar() {
       description: "View roles & permissions matrix",
       selectorKey: "teamRoles"
     },
+    {
+      title: "Documentation",
+      href: "/superadmin/docs",
+      icon: FileText,
+      description: "Admin guides and references",
+      selectorKey: "docs"
+    },
     {
       title: "Subscriptions",
       href: "/superadmin/subscriptions",
@@ -128,7 +136,7 @@ function SuperadminSidebar() {
         Link,
         {
           href: item.href,
-          "data-cy": item.selectorKey ? sel(`superadmin.navigation.${item.selectorKey}`) : void 0,
+          "data-cy": item.selectorKey ? sel(`superadmin.sidebar.nav.${item.selectorKey}`) : void 0,
           className: cn(
             "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors",
             "hover:bg-accent hover:text-accent-foreground",
@@ -159,7 +167,7 @@ function SuperadminSidebar() {
           ),
           title: isCollapsed ? "Exit Super Admin" : "Return to main dashboard",
           "aria-label": "Exit Super Admin and return to main dashboard",
-          "data-cy": sel("superadmin.navigation.exitToDashboard"),
+          "data-cy": sel("superadmin.sidebar.exitButton"),
           children: [
             /* @__PURE__ */ jsx(ArrowLeft, { className: "h-5 w-5 flex-shrink-0" }),
             !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [

package/dist/components/superadmin/layouts/index.js

@@ -1,4 +1,4 @@
-import { SuperadminSidebar } from "./SuperadminSidebar";
+import { SuperadminSidebar } from "./SuperadminSidebar.js";
 export {
   SuperadminSidebar
 };

package/dist/components/superadmin/misc/ComponentGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/superadmin/misc/ComponentGallery.tsx"],"names":[],"mappings":"AAuCA;;;;;GAKG;AACH,wBAAgB,gBAAgB,4CAupB/B"}
+{"version":3,"file":"ComponentGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/superadmin/misc/ComponentGallery.tsx"],"names":[],"mappings":"AAyCA;;;;;GAKG;AACH,wBAAgB,gBAAgB,4CAuuB/B"}

package/dist/components/superadmin/misc/ComponentGallery.js

@@ -1,21 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "../../ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card";
-import { Badge } from "../../ui/badge";
-import { Input } from "../../ui/input";
-import { Label } from "../../ui/label";
-import { Textarea } from "../../ui/textarea";
-import { Switch } from "../../ui/switch";
-import { Checkbox } from "../../ui/checkbox";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
-import { Progress } from "../../ui/progress";
-import { Alert, AlertDescription, AlertTitle } from "../../ui/alert";
-import { Avatar, AvatarFallback } from "../../ui/avatar";
-import { Separator } from "../../ui/separator";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table";
-import { Calendar } from "../../ui/calendar";
+import { Button } from "../../ui/button.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card.js";
+import { Badge } from "../../ui/badge.js";
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
+import { Textarea } from "../../ui/textarea.js";
+import { Switch } from "../../ui/switch.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.js";
+import { Progress } from "../../ui/progress.js";
+import { Slider } from "../../ui/slider.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion.js";
+import { Alert, AlertDescription, AlertTitle } from "../../ui/alert.js";
+import { Avatar, AvatarFallback } from "../../ui/avatar.js";
+import { Separator } from "../../ui/separator.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table.js";
+import { Calendar } from "../../ui/calendar.js";
 import {
   AlertTriangle,
   CheckCircle,
@@ -113,6 +115,23 @@ function ComponentGallery() {
             ] })
           ] })
         ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-3", children: "Slider" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(Label, { children: "Default Slider" }),
+              /* @__PURE__ */ jsx(Slider, { defaultValue: [50], max: 100, step: 1 })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(Label, { children: "Volume: 25%" }),
+              /* @__PURE__ */ jsx(Slider, { defaultValue: [25], max: 100, step: 5 })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(Label, { children: "Disabled Slider" }),
+              /* @__PURE__ */ jsx(Slider, { defaultValue: [75], max: 100, step: 1, disabled: true })
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-3", children: "Avatars" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
@@ -177,6 +196,52 @@ function ComponentGallery() {
         ] }) })
       ] }) })
     ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Accordion" }),
+        /* @__PURE__ */ jsx(CardDescription, { children: "Collapsible content sections for FAQs and grouped information" })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Single Mode (collapsible)" }),
+          /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, className: "w-full", children: [
+            /* @__PURE__ */ jsxs(AccordionItem, { value: "item-1", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { children: "Is it accessible?" }),
+              /* @__PURE__ */ jsx(AccordionContent, { children: "Yes. It adheres to the WAI-ARIA design pattern for accordions." })
+            ] }),
+            /* @__PURE__ */ jsxs(AccordionItem, { value: "item-2", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { children: "Is it styled?" }),
+              /* @__PURE__ */ jsx(AccordionContent, { children: "Yes. It comes with default styles that match the other components' aesthetic." })
+            ] }),
+            /* @__PURE__ */ jsxs(AccordionItem, { value: "item-3", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { children: "Is it animated?" }),
+              /* @__PURE__ */ jsx(AccordionContent, { children: "Yes. It's animated by default, but you can disable it if you prefer." })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Multiple Mode" }),
+          /* @__PURE__ */ jsxs(Accordion, { type: "multiple", className: "w-full", children: [
+            /* @__PURE__ */ jsxs(AccordionItem, { value: "faq-1", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { children: "How do I get started?" }),
+              /* @__PURE__ */ jsxs(AccordionContent, { children: [
+                "Simply clone the repository and run ",
+                /* @__PURE__ */ jsx("code", { className: "bg-muted px-1 rounded", children: "pnpm install" }),
+                " to install dependencies."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(AccordionItem, { value: "faq-2", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { children: "Can I customize the theme?" }),
+              /* @__PURE__ */ jsx(AccordionContent, { children: "Absolutely! All components use CSS variables that can be customized in your theme configuration." })
+            ] }),
+            /* @__PURE__ */ jsxs(AccordionItem, { value: "faq-3", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { children: "Is there mobile support?" }),
+              /* @__PURE__ */ jsx(AccordionContent, { children: "Yes! All components have native React Native implementations in the @nextsparkjs/ui package." })
+            ] })
+          ] })
+        ] })
+      ] }) })
+    ] }),
     /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsxs(CardHeader, { children: [
         /* @__PURE__ */ jsx(CardTitle, { children: "Layout Elements" }),

package/dist/components/superadmin/misc/FieldTypesGallery.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Card } from "../../ui/card";
-import { Badge } from "../../ui/badge";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
-import { EntityFieldRenderer } from "../../entities/EntityFieldRenderer";
-import { ArrayField } from "../../dashboard/block-editor/array-field";
+import { Card } from "../../ui/card.js";
+import { Badge } from "../../ui/badge.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.js";
+import { EntityFieldRenderer } from "../../entities/EntityFieldRenderer.js";
+import { ArrayField } from "../../dashboard/block-editor/array-field.js";
 function FieldTypesGallery() {
   const [fieldValues, setFieldValues] = useState({});
   const [blockEditorValues, setBlockEditorValues] = useState({

package/dist/components/superadmin/misc/ThemePreview.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card";
-import { Badge } from "../../ui/badge";
-import { Button } from "../../ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card.js";
+import { Badge } from "../../ui/badge.js";
+import { Button } from "../../ui/button.js";
 import { Copy, Palette, Monitor, Sun, Moon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";

package/dist/components/superadmin/misc/index.js

@@ -1,6 +1,6 @@
-import { ComponentGallery } from "./ComponentGallery";
-import { FieldTypesGallery } from "./FieldTypesGallery";
-import { ThemePreview } from "./ThemePreview";
+import { ComponentGallery } from "./ComponentGallery.js";
+import { FieldTypesGallery } from "./FieldTypesGallery.js";
+import { ThemePreview } from "./ThemePreview.js";
 export {
   ComponentGallery,
   FieldTypesGallery,

package/dist/components/superadmin/tables/PlanFeaturesMatrix.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, X, Infinity } from "lucide-react";
-import { Badge } from "../../ui/badge";
+import { Badge } from "../../ui/badge.js";
 import {
   Table,
   TableBody,
@@ -9,9 +9,9 @@ import {
   TableHead,
   TableHeader,
   TableRow
-} from "../../ui/table";
-import { cn } from "../../../lib/utils";
-import { sel } from "../../../lib/test";
+} from "../../ui/table.js";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
 function PlanFeaturesMatrix({
   plans,
   features,
@@ -92,7 +92,7 @@ function PlanFeaturesMatrix({
       featureSlugs.map((featureSlug) => /* @__PURE__ */ jsxs(
         TableRow,
         {
-          "data-cy": sel("superadmin.planFeatures.featureRow", { slug: featureSlug }),
+          "data-cy": sel("superadmin.teamRoles.plans.matrix.featureRow", { slug: featureSlug }),
           className: "hover:bg-muted/30",
           children: [
             /* @__PURE__ */ jsx(TableCell, { className: "font-medium text-sm text-muted-foreground pl-6", children: formatFeatureLabel(featureSlug, features[featureSlug]) }),
@@ -125,7 +125,7 @@ function PlanFeaturesMatrix({
         return /* @__PURE__ */ jsxs(
           TableRow,
           {
-            "data-cy": sel("superadmin.planFeatures.limitRow", { slug: limitSlug }),
+            "data-cy": sel("superadmin.teamRoles.plans.matrix.limitRow", { slug: limitSlug }),
             className: "hover:bg-muted/30",
             children: [
               /* @__PURE__ */ jsx(TableCell, { className: "font-medium text-sm text-muted-foreground pl-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [