@omnibase/shadcn 0.7.2 → 0.8.0

package/dist/index.cjs

@@ -1886,19 +1886,96 @@ function CommandItem({
 // src/permissions-selector/index.tsx
 var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
+function groupOptions(options) {
+  const result = {
+    ungrouped: [],
+    groups: {}
+  };
+  for (const option of options) {
+    if (!option.group) {
+      result.ungrouped.push(option);
+      continue;
+    }
+    if (!result.groups[option.group]) {
+      result.groups[option.group] = { options: [], subGroups: {} };
+    }
+    if (option.subGroup) {
+      if (!result.groups[option.group].subGroups[option.subGroup]) {
+        result.groups[option.group].subGroups[option.subGroup] = [];
+      }
+      result.groups[option.group].subGroups[option.subGroup].push(option);
+    } else {
+      result.groups[option.group].options.push(option);
+    }
+  }
+  return result;
+}
+function renderCommandItem(option, value, onChange, setOpen, indent = 0) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    CommandItem,
+    {
+      value: option.label,
+      onSelect: () => {
+        onChange(option.value);
+        setOpen(false);
+      },
+      className: indent > 0 ? "pl-8" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_lucide_react5.Check,
+          {
+            className: cn(
+              "mr-2 h-4 w-4",
+              value === option.value ? "opacity-100" : "opacity-0"
+            )
+          }
+        ),
+        option.label
+      ]
+    },
+    option.value
+  );
+}
 function Combobox({
   options,
   value,
   onChange,
+  onSelectMultiple,
   placeholder,
   searchPlaceholder = "Search...",
   emptyText = "No results found.",
   disabled = false,
-  className = ""
+  className = "",
+  grouped = false
 }) {
   const [open, setOpen] = (0, import_react3.useState)(false);
   const selectedOption = options.find((opt) => opt.value === value);
   const isEmpty = options.length === 0;
+  const groupedOpts = (0, import_react3.useMemo)(
+    () => grouped ? groupOptions(options) : null,
+    [options, grouped]
+  );
+  const hasGroups = groupedOpts && Object.keys(groupedOpts.groups).length > 0;
+  const handleSelectGroup = (groupName) => {
+    if (!groupedOpts || !onSelectMultiple) return;
+    const group = groupedOpts.groups[groupName];
+    if (!group) return;
+    const allValues = [
+      ...group.options.map((o) => o.value),
+      ...Object.values(group.subGroups).flatMap(
+        (opts) => opts.map((o) => o.value)
+      )
+    ];
+    onSelectMultiple(allValues);
+    setOpen(false);
+  };
+  const handleSelectSubGroup = (groupName, subGroupName) => {
+    if (!groupedOpts || !onSelectMultiple) return;
+    const subOpts = groupedOpts.groups[groupName]?.subGroups[subGroupName];
+    if (!subOpts) return;
+    onSelectMultiple(subOpts.map((o) => o.value));
+    setOpen(false);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       Button,
@@ -1927,29 +2004,69 @@ function Combobox({
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CommandInput, { placeholder: searchPlaceholder }),
           /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CommandList, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CommandEmpty, { children: emptyText }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CommandGroup, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-              CommandItem,
-              {
-                value: option.label,
-                onSelect: () => {
-                  onChange(option.value);
-                  setOpen(false);
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                    import_lucide_react5.Check,
-                    {
-                      className: cn(
-                        "mr-2 h-4 w-4",
-                        value === option.value ? "opacity-100" : "opacity-0"
+            grouped && hasGroups ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+              groupedOpts.ungrouped.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CommandGroup, { children: groupedOpts.ungrouped.map(
+                (opt) => renderCommandItem(opt, value, onChange, setOpen)
+              ) }),
+              Object.entries(groupedOpts.groups).map(
+                ([groupName, group]) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                  CommandGroup,
+                  {
+                    heading: onSelectMultiple ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleSelectGroup(groupName);
+                        },
+                        className: "flex items-center gap-1.5 hover:text-foreground transition-colors group w-full text-left",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react5.Plus, { className: "h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: groupName })
+                        ]
+                      }
+                    ) : groupName,
+                    children: [
+                      group.options.map(
+                        (opt) => renderCommandItem(opt, value, onChange, setOpen)
+                      ),
+                      Object.entries(group.subGroups).map(
+                        ([subGroupName, subOpts]) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-1", children: [
+                          onSelectMultiple ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleSelectSubGroup(groupName, subGroupName);
+                              },
+                              className: "flex items-center gap-1.5 px-2 py-1 text-[11px] text-muted-foreground/70 uppercase tracking-wider hover:text-muted-foreground transition-colors group w-full text-left",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-muted-foreground/40 group-hover:text-muted-foreground/70", children: "\u2014" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react5.Plus, { className: "h-2.5 w-2.5 opacity-0 group-hover:opacity-70 transition-opacity" }),
+                                subGroupName
+                              ]
+                            }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1.5 px-2 py-1 text-[11px] text-muted-foreground/70 uppercase tracking-wider", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-muted-foreground/40", children: "\u2014" }),
+                            subGroupName
+                          ] }),
+                          subOpts.map(
+                            (opt) => renderCommandItem(opt, value, onChange, setOpen, 1)
+                          )
+                        ] }, subGroupName)
                       )
-                    }
-                  ),
-                  option.label
-                ]
-              },
-              option.value
-            )) })
+                    ]
+                  },
+                  groupName
+                )
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CommandGroup, { children: options.map(
+              (option) => renderCommandItem(option, value, onChange, setOpen)
+            ) })
           ] })
         ] })
       }
@@ -1992,8 +2109,20 @@ function PermissionsSelector({
   const getRelationsForNamespace = (namespace) => {
     const def = definitions.find((d) => d.namespace === namespace);
     if (!def) return [];
+    if (def.relationsMetadata && def.relationsMetadata.length > 0) {
+      return def.relationsMetadata.map((rm) => ({
+        value: rm.name,
+        label: rm.displayName,
+        group: rm.group ?? null,
+        subGroup: rm.subGroup ?? null
+      }));
+    }
     return def.relations.filter((rel) => rel.startsWith("can_") || rel.startsWith("is_")).map((rel) => ({ value: rel, label: formatRelation(rel) }));
   };
+  const hasRelationsMetadata = (namespace) => {
+    const def = definitions.find((d) => d.namespace === namespace);
+    return !!(def?.relationsMetadata && def.relationsMetadata.length > 0);
+  };
   const getObjectsForNamespace = (namespace) => {
     if (namespace.toLowerCase() === "tenant") {
       return null;
@@ -2034,6 +2163,42 @@ function PermissionsSelector({
       return finalRows;
     });
   };
+  const addMultiplePermissions = (rowId, namespace, relations) => {
+    if (relations.length === 0) return;
+    setPermissionRows((currentRows) => {
+      const rowIndex = currentRows.findIndex((r) => r.id === rowId);
+      if (rowIndex === -1) return currentRows;
+      const existingRelations = new Set(
+        currentRows.filter((r) => r.namespace === namespace && r.relation).map((r) => r.relation)
+      );
+      const newRelations = relations.filter((r) => !existingRelations.has(r));
+      if (newRelations.length === 0) return currentRows;
+      const updatedRows = [...currentRows];
+      updatedRows[rowIndex] = {
+        ...updatedRows[rowIndex],
+        namespace,
+        relation: newRelations[0]
+      };
+      const additionalRows = newRelations.slice(1).map((relation) => ({
+        id: generateId(),
+        namespace,
+        relation,
+        objectId: ""
+      }));
+      updatedRows.splice(rowIndex + 1, 0, ...additionalRows);
+      const lastRow = updatedRows[updatedRows.length - 1];
+      if (hasAnyValue(lastRow)) {
+        updatedRows.push({
+          id: generateId(),
+          namespace: "",
+          relation: "",
+          objectId: ""
+        });
+      }
+      onPermissionsChange?.(updatedRows);
+      return updatedRows;
+    });
+  };
   const buildPermissions = () => {
     return permissionRows.filter((row) => row.namespace && row.relation).map((row) => buildPermissionString(row)).filter((perm) => perm !== "");
   };
@@ -2079,9 +2244,11 @@ function PermissionsSelector({
               options: relationOptions,
               value: row.relation,
               onChange: (value) => updatePermissionRow(row.id, "relation", value),
+              onSelectMultiple: (relations) => addMultiplePermissions(row.id, row.namespace, relations),
               placeholder: "Permission",
               searchPlaceholder: "Search permissions...",
               disabled: disabled || !row.namespace,
+              grouped: hasRelationsMetadata(row.namespace),
               className: cn(
                 "min-w-40 ease-out duration-450",
                 showObjectSelect ? "w-1/3 rounded-none border-r-0" : "w-2/3 rounded-l-none"

package/dist/index.js

@@ -1827,21 +1827,98 @@ function CommandItem({
 }
 
 // src/permissions-selector/index.tsx
-import { Trash2, Check as Check3, ChevronsUpDown } from "lucide-react";
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Trash2, Check as Check3, ChevronsUpDown, Plus } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+function groupOptions(options) {
+  const result = {
+    ungrouped: [],
+    groups: {}
+  };
+  for (const option of options) {
+    if (!option.group) {
+      result.ungrouped.push(option);
+      continue;
+    }
+    if (!result.groups[option.group]) {
+      result.groups[option.group] = { options: [], subGroups: {} };
+    }
+    if (option.subGroup) {
+      if (!result.groups[option.group].subGroups[option.subGroup]) {
+        result.groups[option.group].subGroups[option.subGroup] = [];
+      }
+      result.groups[option.group].subGroups[option.subGroup].push(option);
+    } else {
+      result.groups[option.group].options.push(option);
+    }
+  }
+  return result;
+}
+function renderCommandItem(option, value, onChange, setOpen, indent = 0) {
+  return /* @__PURE__ */ jsxs18(
+    CommandItem,
+    {
+      value: option.label,
+      onSelect: () => {
+        onChange(option.value);
+        setOpen(false);
+      },
+      className: indent > 0 ? "pl-8" : void 0,
+      children: [
+        /* @__PURE__ */ jsx29(
+          Check3,
+          {
+            className: cn(
+              "mr-2 h-4 w-4",
+              value === option.value ? "opacity-100" : "opacity-0"
+            )
+          }
+        ),
+        option.label
+      ]
+    },
+    option.value
+  );
+}
 function Combobox({
   options,
   value,
   onChange,
+  onSelectMultiple,
   placeholder,
   searchPlaceholder = "Search...",
   emptyText = "No results found.",
   disabled = false,
-  className = ""
+  className = "",
+  grouped = false
 }) {
   const [open, setOpen] = useState6(false);
   const selectedOption = options.find((opt) => opt.value === value);
   const isEmpty = options.length === 0;
+  const groupedOpts = useMemo2(
+    () => grouped ? groupOptions(options) : null,
+    [options, grouped]
+  );
+  const hasGroups = groupedOpts && Object.keys(groupedOpts.groups).length > 0;
+  const handleSelectGroup = (groupName) => {
+    if (!groupedOpts || !onSelectMultiple) return;
+    const group = groupedOpts.groups[groupName];
+    if (!group) return;
+    const allValues = [
+      ...group.options.map((o) => o.value),
+      ...Object.values(group.subGroups).flatMap(
+        (opts) => opts.map((o) => o.value)
+      )
+    ];
+    onSelectMultiple(allValues);
+    setOpen(false);
+  };
+  const handleSelectSubGroup = (groupName, subGroupName) => {
+    if (!groupedOpts || !onSelectMultiple) return;
+    const subOpts = groupedOpts.groups[groupName]?.subGroups[subGroupName];
+    if (!subOpts) return;
+    onSelectMultiple(subOpts.map((o) => o.value));
+    setOpen(false);
+  };
   return /* @__PURE__ */ jsxs18(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx29(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs18(
       Button,
@@ -1870,29 +1947,69 @@ function Combobox({
           /* @__PURE__ */ jsx29(CommandInput, { placeholder: searchPlaceholder }),
           /* @__PURE__ */ jsxs18(CommandList, { children: [
             /* @__PURE__ */ jsx29(CommandEmpty, { children: emptyText }),
-            /* @__PURE__ */ jsx29(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs18(
-              CommandItem,
-              {
-                value: option.label,
-                onSelect: () => {
-                  onChange(option.value);
-                  setOpen(false);
-                },
-                children: [
-                  /* @__PURE__ */ jsx29(
-                    Check3,
-                    {
-                      className: cn(
-                        "mr-2 h-4 w-4",
-                        value === option.value ? "opacity-100" : "opacity-0"
+            grouped && hasGroups ? /* @__PURE__ */ jsxs18(Fragment3, { children: [
+              groupedOpts.ungrouped.length > 0 && /* @__PURE__ */ jsx29(CommandGroup, { children: groupedOpts.ungrouped.map(
+                (opt) => renderCommandItem(opt, value, onChange, setOpen)
+              ) }),
+              Object.entries(groupedOpts.groups).map(
+                ([groupName, group]) => /* @__PURE__ */ jsxs18(
+                  CommandGroup,
+                  {
+                    heading: onSelectMultiple ? /* @__PURE__ */ jsxs18(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleSelectGroup(groupName);
+                        },
+                        className: "flex items-center gap-1.5 hover:text-foreground transition-colors group w-full text-left",
+                        children: [
+                          /* @__PURE__ */ jsx29(Plus, { className: "h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity" }),
+                          /* @__PURE__ */ jsx29("span", { children: groupName })
+                        ]
+                      }
+                    ) : groupName,
+                    children: [
+                      group.options.map(
+                        (opt) => renderCommandItem(opt, value, onChange, setOpen)
+                      ),
+                      Object.entries(group.subGroups).map(
+                        ([subGroupName, subOpts]) => /* @__PURE__ */ jsxs18("div", { className: "mt-1", children: [
+                          onSelectMultiple ? /* @__PURE__ */ jsxs18(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleSelectSubGroup(groupName, subGroupName);
+                              },
+                              className: "flex items-center gap-1.5 px-2 py-1 text-[11px] text-muted-foreground/70 uppercase tracking-wider hover:text-muted-foreground transition-colors group w-full text-left",
+                              children: [
+                                /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground/40 group-hover:text-muted-foreground/70", children: "\u2014" }),
+                                /* @__PURE__ */ jsx29(Plus, { className: "h-2.5 w-2.5 opacity-0 group-hover:opacity-70 transition-opacity" }),
+                                subGroupName
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1.5 px-2 py-1 text-[11px] text-muted-foreground/70 uppercase tracking-wider", children: [
+                            /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground/40", children: "\u2014" }),
+                            subGroupName
+                          ] }),
+                          subOpts.map(
+                            (opt) => renderCommandItem(opt, value, onChange, setOpen, 1)
+                          )
+                        ] }, subGroupName)
                       )
-                    }
-                  ),
-                  option.label
-                ]
-              },
-              option.value
-            )) })
+                    ]
+                  },
+                  groupName
+                )
+              )
+            ] }) : /* @__PURE__ */ jsx29(CommandGroup, { children: options.map(
+              (option) => renderCommandItem(option, value, onChange, setOpen)
+            ) })
           ] })
         ] })
       }
@@ -1935,8 +2052,20 @@ function PermissionsSelector({
   const getRelationsForNamespace = (namespace) => {
     const def = definitions.find((d) => d.namespace === namespace);
     if (!def) return [];
+    if (def.relationsMetadata && def.relationsMetadata.length > 0) {
+      return def.relationsMetadata.map((rm) => ({
+        value: rm.name,
+        label: rm.displayName,
+        group: rm.group ?? null,
+        subGroup: rm.subGroup ?? null
+      }));
+    }
     return def.relations.filter((rel) => rel.startsWith("can_") || rel.startsWith("is_")).map((rel) => ({ value: rel, label: formatRelation(rel) }));
   };
+  const hasRelationsMetadata = (namespace) => {
+    const def = definitions.find((d) => d.namespace === namespace);
+    return !!(def?.relationsMetadata && def.relationsMetadata.length > 0);
+  };
   const getObjectsForNamespace = (namespace) => {
     if (namespace.toLowerCase() === "tenant") {
       return null;
@@ -1977,6 +2106,42 @@ function PermissionsSelector({
       return finalRows;
     });
   };
+  const addMultiplePermissions = (rowId, namespace, relations) => {
+    if (relations.length === 0) return;
+    setPermissionRows((currentRows) => {
+      const rowIndex = currentRows.findIndex((r) => r.id === rowId);
+      if (rowIndex === -1) return currentRows;
+      const existingRelations = new Set(
+        currentRows.filter((r) => r.namespace === namespace && r.relation).map((r) => r.relation)
+      );
+      const newRelations = relations.filter((r) => !existingRelations.has(r));
+      if (newRelations.length === 0) return currentRows;
+      const updatedRows = [...currentRows];
+      updatedRows[rowIndex] = {
+        ...updatedRows[rowIndex],
+        namespace,
+        relation: newRelations[0]
+      };
+      const additionalRows = newRelations.slice(1).map((relation) => ({
+        id: generateId(),
+        namespace,
+        relation,
+        objectId: ""
+      }));
+      updatedRows.splice(rowIndex + 1, 0, ...additionalRows);
+      const lastRow = updatedRows[updatedRows.length - 1];
+      if (hasAnyValue(lastRow)) {
+        updatedRows.push({
+          id: generateId(),
+          namespace: "",
+          relation: "",
+          objectId: ""
+        });
+      }
+      onPermissionsChange?.(updatedRows);
+      return updatedRows;
+    });
+  };
   const buildPermissions = () => {
     return permissionRows.filter((row) => row.namespace && row.relation).map((row) => buildPermissionString(row)).filter((perm) => perm !== "");
   };
@@ -2022,9 +2187,11 @@ function PermissionsSelector({
               options: relationOptions,
               value: row.relation,
               onChange: (value) => updatePermissionRow(row.id, "relation", value),
+              onSelectMultiple: (relations) => addMultiplePermissions(row.id, row.namespace, relations),
               placeholder: "Permission",
               searchPlaceholder: "Search permissions...",
               disabled: disabled || !row.namespace,
+              grouped: hasRelationsMetadata(row.namespace),
               className: cn(
                 "min-w-40 ease-out duration-450",
                 showObjectSelect ? "w-1/3 rounded-none border-r-0" : "w-2/3 rounded-l-none"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnibase/shadcn",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "OmniBase ShadCN UI Package",
   "repository": {
     "type": "git",
@@ -40,9 +40,10 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@omnibase/core-js": "0.14.0",
+    "@omnibase/core-js": "0.17.0",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",