@bizapps/design-system-testing 1.0.5 → 1.0.7

package/dist/main.cjs

@@ -404,8 +404,8 @@ var buttonVariants = classVarianceAuthority.cva(
         primary: "cursor-pointer bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30",
         secondary: "cursor-pointer bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30",
         cancel: "cursor-pointer bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30",
-        outline: " border-2 border-foreground/50 bg-transparent text-muted-foreground hover:bg-foreground/50 hover:text-white",
-        ghost: "cursor-pointer bg-transparent text-muted-foreground hover:bg-foreground/10 hover:text-primary focus-visible:ring-ring/30",
+        outline: "border border-foreground/50 bg-transparent text-muted-foreground hover:bg-foreground/50 hover:text-white",
+        ghost: "cursor-pointer bg-transparent text-muted-foreground hover:bg-foreground/10 hover:text-primary focus-visible:ring-ring/30 border-none",
         cancelGhost: "cursor-pointer bg-destructive/10 text-red-600 hover:bg-destructive/15 hover:text-red-600 focus-visible:ring-ring/30"
       },
       size: {
@@ -1004,7 +1004,7 @@ function CarouselPrevious({
       variant,
       size,
       className: cn(
-        "absolute touch-manipulation",
+        "cursor-pointer hover:bg-foreground/5 hover:text-foreground font-border border-solid border-foreground/10 absolute touch-manipulation",
         orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -1013,7 +1013,7 @@ function CarouselPrevious({
       "aria-label": "Previous slide",
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
@@ -1033,7 +1033,7 @@ function CarouselNext({
       variant,
       size,
       className: cn(
-        "absolute touch-manipulation",
+        "cursor-pointer hover:bg-foreground/5 hover:text-foreground border border-solid border-foreground/10 absolute touch-manipulation",
         orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -1042,7 +1042,7 @@ function CarouselNext({
       "aria-label": "Next slide",
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Next slide" })
       ]
     }
@@ -2376,10 +2376,7 @@ function DialogPortal({ children, ...props }) {
 function DialogClose({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "dialog-close", ...props });
 }
-function DialogOverlay({
-  className,
-  ...props
-}) {
+function DialogOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Overlay, { "data-slot": "dialog-overlay", asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     react$1.motion.div,
     {
@@ -2452,6 +2449,16 @@ function DialogHeader({ className, ...props }) {
     }
   );
 }
+function DialogBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-body",
+      className: cn("flex-1 overflow-y-auto px-6 pb-6", className),
+      ...props
+    }
+  );
+}
 function DialogFooter({
   className,
   showCloseButton = false,
@@ -3065,7 +3072,7 @@ var DropzoneContext = react.createContext(void 0);
 var dropzoneVariants = classVarianceAuthority.cva("", {
   variants: {
     border: {
-      default: "border-solid",
+      default: "border border-solid border-foreground/15",
       dashed: "border-dashed border-foreground/50"
     }
   },
@@ -3115,14 +3122,14 @@ var Dropzone = ({
           "data-slot": "dropzone",
           "data-border": border ?? "default",
           className: cn(
-            "relative h-auto w-full flex-col overflow-hidden p-8",
+            "cursor-auto relative h-auto w-full flex-col overflow-hidden p-8",
             dropzoneVariants({ border }),
-            isDragActive && "bg-muted outline-none",
+            isDragActive && "bg-foreground/10 outline-none",
             className
           ),
           disabled,
           type: "button",
-          variant: "outline",
+          variant: "ghost",
           ...getRootProps(),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps(), disabled }),
@@ -4648,6 +4655,84 @@ function NavigationMenuIndicator({
     }
   );
 }
+function matchPermission(pattern, permission) {
+  if (pattern === "*") return true;
+  if (pattern === permission) return true;
+  const patternParts = pattern.split(".");
+  const permParts = permission.split(".");
+  if (patternParts.length !== permParts.length) return false;
+  return patternParts.every((part, i) => part === "*" || part === permParts[i]);
+}
+function matchesAny(permissionSet, permission) {
+  if (permissionSet.has(permission)) return true;
+  for (const pattern of permissionSet) {
+    if (matchPermission(pattern, permission)) return true;
+  }
+  return false;
+}
+var AbilityContext = react.createContext(void 0);
+AbilityContext.displayName = "AbilityContext";
+function AbilityProvider({ children, permissions }) {
+  const [permissionSet, setPermissionSet] = react.useState(
+    () => new Set(permissions ?? [])
+  );
+  const can = react.useCallback(
+    (perms, mode = "any") => {
+      const list = Array.isArray(perms) ? perms : [perms];
+      if (list.length === 0) return false;
+      if (permissionSet.has("*")) return true;
+      if (mode === "all") {
+        return list.every((p) => matchesAny(permissionSet, p));
+      }
+      return list.some((p) => matchesAny(permissionSet, p));
+    },
+    [permissionSet]
+  );
+  const setAbilities = react.useCallback((perms) => {
+    setPermissionSet(new Set(perms));
+  }, []);
+  const clearAbilities = react.useCallback(() => {
+    setPermissionSet(/* @__PURE__ */ new Set());
+  }, []);
+  const syncedKey = react.useRef(permissions ? permissions.join("|") : null);
+  react.useEffect(() => {
+    if (permissions === void 0) return;
+    const key = permissions.join("|");
+    if (key === syncedKey.current) return;
+    syncedKey.current = key;
+    setPermissionSet(new Set(permissions));
+  }, [permissions]);
+  const value = react.useMemo(
+    () => ({ can, setAbilities, clearAbilities }),
+    [can, setAbilities, clearAbilities]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AbilityContext.Provider, { value, children });
+}
+function useAbility() {
+  const context = react.useContext(AbilityContext);
+  if (!context) {
+    throw new Error("useAbility must be used within an AbilityProvider");
+  }
+  return context;
+}
+function useCan(permissions, mode = "any") {
+  const { can } = useAbility();
+  return can(permissions, mode);
+}
+function Can({ permission, mode = "any", negate = false, fallback = null, children }) {
+  const { can } = useAbility();
+  const hasPermission = can(permission, mode);
+  const show = negate ? !hasPermission : hasPermission;
+  if (typeof children === "function") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(show) });
+  }
+  return show ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+}
+Can.displayName = "Can";
+function CanNot({ permission, mode = "any", fallback = null, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Can, { permission, mode, negate: true, fallback, children });
+}
+CanNot.displayName = "CanNot";
 var SidebarContext = react.createContext({
   open: true,
   setOpen: () => {
@@ -4876,7 +4961,7 @@ function SidebarBrand({ brandName }) {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold", children: brandName })
   ] });
 }
-function SideBar({
+function AppShell({
   items = defaultItems,
   activeItem,
   onItemClick,
@@ -4892,20 +4977,32 @@ function SideBar({
         /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0" }),
         /* @__PURE__ */ jsxRuntime.jsx(SidebarBrand, { brandName })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(SidebarContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        SidebarMenuButton,
-        {
-          isActive: activeItem === item.label || item.active,
-          onClick: () => {
-            item.onClick?.();
-            onItemClick?.(item.label);
+      /* @__PURE__ */ jsxRuntime.jsx(SidebarContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarMenu, { children: items.map((item) => {
+        const menuItem = /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          SidebarMenuButton,
+          {
+            isActive: activeItem === item.label || item.active,
+            onClick: () => {
+              item.onClick?.();
+              onItemClick?.(item.label);
+            },
+            children: [
+              item.icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+            ]
+          }
+        ) }, item.label);
+        if (!item.permission) return menuItem;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Can,
+          {
+            permission: item.permission,
+            mode: item.permissionMode,
+            children: menuItem
           },
-          children: [
-            item.icon,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
-          ]
-        }
-      ) }, item.label)) }) }) }) })
+          item.label
+        );
+      }) }) }) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
       showHeader && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "flex h-14 items-center justify-between border-b px-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: brandName }) }),
@@ -7413,94 +7510,13 @@ function DataTableSearch({
     )
   ] });
 }
-function matchPermission(pattern, permission) {
-  if (pattern === "*") return true;
-  if (pattern === permission) return true;
-  const patternParts = pattern.split(".");
-  const permParts = permission.split(".");
-  if (patternParts.length !== permParts.length) return false;
-  return patternParts.every((part, i) => part === "*" || part === permParts[i]);
-}
-function matchesAny(permissionSet, permission) {
-  if (permissionSet.has(permission)) return true;
-  for (const pattern of permissionSet) {
-    if (matchPermission(pattern, permission)) return true;
-  }
-  return false;
-}
-var AbilityContext = react.createContext(void 0);
-AbilityContext.displayName = "AbilityContext";
-function AbilityProvider({ children, permissions }) {
-  const [permissionSet, setPermissionSet] = react.useState(
-    () => new Set(permissions ?? [])
-  );
-  const can = react.useCallback(
-    (perms, mode = "any") => {
-      const list = Array.isArray(perms) ? perms : [perms];
-      if (list.length === 0) return false;
-      if (permissionSet.has("*")) return true;
-      if (mode === "all") {
-        return list.every((p) => matchesAny(permissionSet, p));
-      }
-      return list.some((p) => matchesAny(permissionSet, p));
-    },
-    [permissionSet]
-  );
-  const setAbilities = react.useCallback((perms) => {
-    setPermissionSet(new Set(perms));
-  }, []);
-  const clearAbilities = react.useCallback(() => {
-    setPermissionSet(/* @__PURE__ */ new Set());
-  }, []);
-  const syncedKey = react.useRef(permissions ? permissions.join("|") : null);
-  react.useEffect(() => {
-    if (permissions === void 0) return;
-    const key = permissions.join("|");
-    if (key === syncedKey.current) return;
-    syncedKey.current = key;
-    setPermissionSet(new Set(permissions));
-  }, [permissions]);
-  const value = react.useMemo(
-    () => ({ can, setAbilities, clearAbilities }),
-    [can, setAbilities, clearAbilities]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(AbilityContext.Provider, { value, children });
-}
-function useAbility() {
-  const context = react.useContext(AbilityContext);
-  if (!context) {
-    throw new Error("useAbility must be used within an AbilityProvider");
-  }
-  return context;
-}
-function useCan(permissions, mode = "any") {
-  const { can } = useAbility();
-  return can(permissions, mode);
-}
-function Can({ permission, mode = "any", negate = false, fallback = null, children }) {
-  const { can } = useAbility();
-  const hasPermission = can(permission, mode);
-  const show = negate ? !hasPermission : hasPermission;
-  if (typeof children === "function") {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(show) });
-  }
-  return show ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
-}
-Can.displayName = "Can";
-function CanNot({ permission, mode = "any", fallback = null, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Can, { permission, mode, negate: true, fallback, children });
-}
-CanNot.displayName = "CanNot";
 function TCCEProvider({
   children,
   permissions,
   toasterPosition,
   tooltipDelayDuration
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: tooltipDelayDuration, children: /* @__PURE__ */ jsxRuntime.jsxs(AbilityProvider, { permissions, children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx(Toaster, { position: toasterPosition })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: tooltipDelayDuration, children: /* @__PURE__ */ jsxRuntime.jsx(AbilityProvider, { permissions, children: /* @__PURE__ */ jsxRuntime.jsx(Toaster, { position: toasterPosition, children }) }) });
 }
 
 Object.defineProperty(exports, "Controller", {
@@ -7535,6 +7551,7 @@ exports.AlertDialogPortal = AlertDialogPortal;
 exports.AlertDialogTitle = AlertDialogTitle;
 exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.AlertTitle = AlertTitle;
+exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.AvatarBadge = AvatarBadge;
 exports.AvatarFallback = AvatarFallback;
@@ -7587,6 +7604,7 @@ exports.DataTableSkeleton = DataTableSkeleton;
 exports.DataTableToolbar = DataTableToolbar;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
+exports.DialogBody = DialogBody;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
@@ -7684,7 +7702,6 @@ exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 exports.Separator = Separator;
-exports.SideBar = SideBar;
 exports.SidebarProvider = SidebarProvider;
 exports.SidebarTrigger = SidebarTrigger;
 exports.Skeleton = Skeleton;