@ai-matrx/design-system 0.49.59 → 0.50.0

package/dist/index.js

@@ -3644,7 +3644,7 @@ var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 // src/organization-picker.tsx
-import * as React31 from "react";
+import * as React30 from "react";
 
 // src/skeleton.tsx
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -3663,47 +3663,8 @@ function Skeleton({ className, animated = true, ...props }) {
   );
 }
 
-// src/switch.tsx
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React30 from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var SWITCH_SIZES = {
-  sm: {
-    root: "h-4 w-9 border-border data-[state=unchecked]:bg-input",
-    thumb: "h-4 w-4 border border-primary data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-  },
-  md: {
-    root: "h-5 w-9 border-transparent data-[state=unchecked]:bg-input",
-    thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-  }
-};
-var Switch = React30.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx39(
-  SwitchPrimitives.Root,
-  {
-    ref,
-    "data-slot": "switch",
-    className: cn(
-      "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
-      SWITCH_SIZES[size].root,
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx39(
-      SwitchPrimitives.Thumb,
-      {
-        "data-slot": "switch-thumb",
-        className: cn(
-          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
-          SWITCH_SIZES[size].thumb
-        )
-      }
-    )
-  }
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
 // src/organization-picker.tsx
-import { Fragment as Fragment3, jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var SEARCH_APPEARS_ABOVE = 8;
 function matchesQuery(org, query) {
   const q = query.trim().toLowerCase();
@@ -3712,45 +3673,71 @@ function matchesQuery(org, query) {
   const abbreviation = org.abbreviation?.trim().toLowerCase();
   return !!abbreviation && abbreviation.includes(q);
 }
-function OrganizationAbbreviation({
-  abbreviation,
+var ORGANIZATION_HUES = [217, 262, 330, 12, 32, 152, 189, 290];
+function organizationColor(seed) {
+  let hash = 0;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = hash * 31 + seed.charCodeAt(index) >>> 0;
+  }
+  const hue = ORGANIZATION_HUES[hash % ORGANIZATION_HUES.length];
+  return { background: `hsl(${hue} 62% 46%)`, color: "#fff" };
+}
+function OrganizationMark({
+  id,
   name,
+  abbreviation,
+  logoUrl,
+  size = 20,
   className
 }) {
-  const mark = abbreviation && abbreviation.trim() || name.trim().slice(0, 1) || "?";
-  return /* @__PURE__ */ jsx40(
+  const box = { width: size, height: size };
+  if (logoUrl) {
+    return /* @__PURE__ */ jsx39(
+      "span",
+      {
+        style: box,
+        className: cn("relative inline-flex shrink-0 overflow-hidden rounded-md bg-muted", className),
+        "data-slot": "organization-mark",
+        children: /* @__PURE__ */ jsx39("img", { src: logoUrl, alt: name, className: "h-full w-full object-cover" })
+      }
+    );
+  }
+  const letters = (abbreviation && abbreviation.trim() || name.trim().slice(0, 1) || "?").slice(0, 3).toUpperCase();
+  const fontSize = Math.round(size * (letters.length >= 3 ? 0.36 : 0.44));
+  return /* @__PURE__ */ jsx39(
     "span",
     {
+      style: { ...box, ...organizationColor(id || name), fontSize },
       className: cn(
-        "inline-flex shrink-0 items-center justify-center font-bold uppercase tracking-wide",
+        "inline-flex shrink-0 items-center justify-center rounded-md font-bold leading-none tracking-tight",
         className
       ),
-      "aria-label": `Organization abbreviation ${mark}`,
-      title: mark,
-      children: mark
+      "aria-label": `Organization abbreviation ${letters}`,
+      title: letters,
+      "data-slot": "organization-mark",
+      children: letters
     }
   );
 }
 function OrganizationPicker({
   organizations,
   activeOrganizationId,
-  defaultOrganizationId = null,
+  favoriteOrganizationIds = [],
   loading = false,
   loadFailed = false,
   onSelect,
-  onSetDefault,
+  onToggleFavorite,
   hideHeading = false,
   itemClassName,
-  hideStatus = false,
   foldedLabel = "More",
   className
 }) {
-  const [query, setQuery] = React31.useState("");
-  const [showFixtures, setShowFixtures] = React31.useState(false);
-  const [showFolded, setShowFolded] = React31.useState(false);
-  const active = organizations.find((o) => o.id === activeOrganizationId) ?? null;
-  const isDefault = (id) => !!defaultOrganizationId && id === defaultOrganizationId;
-  const rank = (org) => org.id === defaultOrganizationId ? 0 : org.isOwn ? 1 : 2;
+  const [query, setQuery] = React30.useState("");
+  const [showFixtures, setShowFixtures] = React30.useState(false);
+  const [showFolded, setShowFolded] = React30.useState(false);
+  const favorites = new Set(favoriteOrganizationIds);
+  const isFavorite = (id) => favorites.has(id);
+  const rank = (org) => isFavorite(org.id) ? 0 : org.isOwn ? 1 : 2;
   const ordered = [...organizations].sort((a, b) => rank(a) - rank(b));
   const matching = ordered.filter((org) => matchesQuery(org, query));
   const listed = matching.filter((org) => !org.isTestFixture && !org.folded);
@@ -3761,66 +3748,83 @@ function OrganizationPicker({
   const sharesItsName = (org) => organizations.filter((other) => other.name.trim() === org.name.trim()).length > 1;
   const renderRow = (org) => {
     const isActive = org.id === activeOrganizationId;
-    return /* @__PURE__ */ jsx40("li", { role: "none", children: /* @__PURE__ */ jsxs23(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": isActive,
-        "aria-pressed": isActive,
-        onClick: (event) => {
-          event.stopPropagation();
-          onSelect(org);
-        },
-        className: cn(
-          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent",
-          isActive && "bg-primary/10 font-medium text-primary",
-          itemClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsx40(
-            OrganizationAbbreviation,
-            {
-              abbreviation: org.abbreviation,
-              name: org.name,
-              className: cn(
-                "h-5 min-w-8 rounded border border-border bg-muted px-1 text-[9px]",
-                isActive ? "text-primary" : "text-muted-foreground"
-              )
-            }
+    const favorite = isFavorite(org.id);
+    return /* @__PURE__ */ jsxs23("li", { role: "none", className: "group/org relative flex items-center", children: [
+      /* @__PURE__ */ jsxs23(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": isActive,
+          "aria-pressed": isActive,
+          onClick: (event) => {
+            event.stopPropagation();
+            onSelect(org);
+          },
+          className: cn(
+            "flex w-full min-w-0 items-center gap-2.5 rounded-md py-1.5 pl-2 pr-8 text-left text-sm text-foreground transition-colors hover:bg-accent",
+            isActive && "bg-primary/10 font-semibold text-primary ring-1 ring-inset ring-primary/30 hover:bg-primary/15",
+            itemClassName
           ),
-          /* @__PURE__ */ jsxs23("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ jsx40("span", { className: "truncate", children: org.name }),
-            sharesItsName(org) && org.distinguisher ? /* @__PURE__ */ jsx40("span", { className: "truncate text-[10px] font-normal text-muted-foreground", children: org.distinguisher }) : null
-          ] }),
-          org.detail ? /* @__PURE__ */ jsx40(
-            "span",
-            {
-              className: "shrink-0 text-xs font-normal text-muted-foreground",
-              "data-slot": "organization-picker-detail",
-              children: org.detail
-            }
-          ) : null,
-          isDefault(org.id) && /* @__PURE__ */ jsx40(
+          "data-active": isActive ? "" : void 0,
+          children: [
+            /* @__PURE__ */ jsx39(OrganizationMark, { id: org.id, name: org.name, abbreviation: org.abbreviation, size: 20 }),
+            /* @__PURE__ */ jsxs23("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+              /* @__PURE__ */ jsx39("span", { className: "truncate", children: org.name }),
+              sharesItsName(org) && org.distinguisher ? /* @__PURE__ */ jsx39("span", { className: "truncate text-[10px] font-normal text-muted-foreground", children: org.distinguisher }) : null
+            ] }),
+            org.detail ? /* @__PURE__ */ jsx39(
+              "span",
+              {
+                className: "shrink-0 text-xs font-normal text-muted-foreground",
+                "data-slot": "organization-picker-detail",
+                children: org.detail
+              }
+            ) : null,
+            isActive && /* @__PURE__ */ jsx39(LucideCheckIcon, { className: "h-[15px] w-[15px] shrink-0 text-primary" })
+          ]
+        }
+      ),
+      onToggleFavorite ? /* @__PURE__ */ jsx39(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": favorite,
+          "aria-label": favorite ? `Remove ${org.name} from favorites` : `Add ${org.name} to favorites`,
+          title: favorite ? "Remove from favorites" : "Add to favorites",
+          onClick: (event) => {
+            event.stopPropagation();
+            onToggleFavorite(org.id, !favorite);
+          },
+          className: cn(
+            "absolute right-1 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100",
+            favorite ? "opacity-100" : "opacity-0 group-hover/org:opacity-100"
+          ),
+          "data-slot": "organization-picker-favorite",
+          children: /* @__PURE__ */ jsx39(
             StarIcon,
             {
-              className: "h-[13px] w-[13px] shrink-0 fill-warning text-warning",
-              "aria-hidden": false,
-              "aria-label": "Default organization",
-              role: "img"
+              className: cn("h-[14px] w-[14px]", favorite && "fill-warning text-warning")
             }
-          ),
-          isActive && /* @__PURE__ */ jsx40(LucideCheckIcon, { className: "h-[15px] w-[15px] shrink-0 text-primary" })
-        ]
-      }
-    ) }, org.id);
+          )
+        }
+      ) : favorite ? /* @__PURE__ */ jsx39(
+        StarIcon,
+        {
+          className: "absolute right-2 h-[13px] w-[13px] fill-warning text-warning",
+          "aria-hidden": false,
+          "aria-label": "Favorite",
+          role: "img"
+        }
+      ) : null
+    ] }, org.id);
   };
   return /* @__PURE__ */ jsxs23("div", { className: cn("flex flex-col", className), "data-slot": "organization-picker", children: [
-    !hideHeading && /* @__PURE__ */ jsx40("p", { className: "px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Organization" }),
+    !hideHeading && /* @__PURE__ */ jsx39("p", { className: "px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Organization" }),
     loading ? /* @__PURE__ */ jsxs23("div", { className: "space-y-1 px-1 py-1", "aria-busy": "true", "aria-label": "Loading organizations", children: [
-      /* @__PURE__ */ jsx40(Skeleton, { className: "h-7 rounded-md" }),
-      /* @__PURE__ */ jsx40(Skeleton, { className: "h-7 rounded-md" })
-    ] }) : loadFailed ? /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx39(Skeleton, { className: "h-7 rounded-md" }),
+      /* @__PURE__ */ jsx39(Skeleton, { className: "h-7 rounded-md" })
+    ] }) : loadFailed ? /* @__PURE__ */ jsx39(
       ErrorBox,
       {
         className: "px-2 py-2 text-xs text-destructive",
@@ -3828,13 +3832,8 @@ function OrganizationPicker({
         origin: "design-system/OrganizationPicker",
         children: "Could not load organizations."
       }
-    ) : organizations.length === 0 ? /* @__PURE__ */ jsx40("p", { className: "px-2 py-2 text-xs text-muted-foreground", children: "Your account is not a member of any organization. Ask an administrator to add you to one." }) : /* @__PURE__ */ jsxs23(Fragment3, { children: [
-      hideStatus ? null : active ? /* @__PURE__ */ jsxs23("p", { className: "px-2 pb-1 text-[11px] text-muted-foreground", "data-slot": "organization-picker-status", children: [
-        "Working in",
-        " ",
-        /* @__PURE__ */ jsx40("span", { className: "font-medium text-foreground", children: active.name })
-      ] }) : /* @__PURE__ */ jsx40("p", { className: "px-2 pb-1 text-[11px] text-muted-foreground", "data-slot": "organization-picker-status", children: "No organization selected \u2014 pick one below." }),
-      searchable && /* @__PURE__ */ jsx40("div", { className: "px-2 pb-1.5", children: /* @__PURE__ */ jsx40(
+    ) : organizations.length === 0 ? /* @__PURE__ */ jsx39("p", { className: "px-2 py-2 text-xs text-muted-foreground", children: "Your account is not a member of any organization. Ask an administrator to add you to one." }) : /* @__PURE__ */ jsxs23(Fragment3, { children: [
+      searchable && /* @__PURE__ */ jsx39("div", { className: "px-2 pb-1.5", children: /* @__PURE__ */ jsx39(
         Input,
         {
           type: "search",
@@ -3870,7 +3869,7 @@ function OrganizationPicker({
            clicking. So: count the matches, say where they are, and carry
            the click that reveals them — the same shape as the honest
            empty-filter twin one line down. (TAILS-3) */
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx39(
           "p",
           {
             className: "px-2 py-2 text-xs text-muted-foreground",
@@ -3879,7 +3878,7 @@ function OrganizationPicker({
               fixtures.length === 1 ? `1 match for \u201C${query.trim()}\u201D is in your test organizations` : `All ${fixtures.length} matches for \u201C${query.trim()}\u201D are in your test organizations`,
               showFixtures ? ", listed below." : /* @__PURE__ */ jsxs23(Fragment3, { children: [
                 " \u2014 ",
-                /* @__PURE__ */ jsx40(
+                /* @__PURE__ */ jsx39(
                   "button",
                   {
                     type: "button",
@@ -3897,8 +3896,8 @@ function OrganizationPicker({
             ] }) : `Every organization you belong to is a test organization \u2014 all ${fixtures.length} are below.`
           }
         )
-      ) : /* @__PURE__ */ jsx40("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": "Organizations", children: listed.map(renderRow) }),
-      /* @__PURE__ */ jsx40(
+      ) : /* @__PURE__ */ jsx39("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": "Organizations", children: listed.map(renderRow) }),
+      /* @__PURE__ */ jsx39(
         ArchivedDisclosure,
         {
           count: folded.length,
@@ -3906,10 +3905,10 @@ function OrganizationPicker({
           onOpenChange: setShowFolded,
           label: foldedLabel,
           className: "mt-0.5",
-          children: /* @__PURE__ */ jsx40("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": foldedLabel, children: folded.map(renderRow) })
+          children: /* @__PURE__ */ jsx39("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": foldedLabel, children: folded.map(renderRow) })
         }
       ),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx39(
         ArchivedDisclosure,
         {
           count: fixtures.length,
@@ -3917,7 +3916,7 @@ function OrganizationPicker({
           onOpenChange: setShowFixtures,
           label: "Test organizations",
           className: "mt-0.5",
-          children: /* @__PURE__ */ jsx40(
+          children: /* @__PURE__ */ jsx39(
             "ul",
             {
               className: "max-h-72 overflow-y-auto",
@@ -3927,50 +3926,49 @@ function OrganizationPicker({
             }
           )
         }
-      ),
-      onSetDefault && /* @__PURE__ */ jsxs23(Fragment3, { children: [
-        /* @__PURE__ */ jsx40("div", { className: "my-1 border-t border-border" }),
-        /* @__PURE__ */ jsx40(
-          DefaultOrganizationSwitch,
-          {
-            active,
-            checked: !!active && isDefault(active.id),
-            onChange: (on) => onSetDefault(on && active ? active.id : null)
-          }
-        )
-      ] })
+      )
     ] })
   ] });
 }
-function DefaultOrganizationSwitch({
-  active,
-  checked,
-  onChange
-}) {
-  const disabled = !active;
-  return /* @__PURE__ */ jsxs23(
-    "div",
-    {
-      className: "flex items-center justify-between gap-3 rounded-md px-2 py-1.5",
-      "data-slot": "organization-picker-default",
-      children: [
-        /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx40("p", { className: "text-xs font-medium text-foreground", children: "Keep it at the top" }),
-          /* @__PURE__ */ jsx40("p", { className: "truncate text-[11px] text-muted-foreground", children: disabled ? "Select an organization first" : checked ? `${active.name} is first in this list on every device` : "Star it so it is first in this list on every device" })
-        ] }),
-        /* @__PURE__ */ jsx40(
-          Switch,
-          {
-            checked,
-            disabled,
-            onCheckedChange: onChange,
-            "aria-label": "Keep this organization at the top of the list"
-          }
+
+// src/switch.tsx
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React31 from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var SWITCH_SIZES = {
+  sm: {
+    root: "h-4 w-9 border-border data-[state=unchecked]:bg-input",
+    thumb: "h-4 w-4 border border-primary data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+  },
+  md: {
+    root: "h-5 w-9 border-transparent data-[state=unchecked]:bg-input",
+    thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+  }
+};
+var Switch = React31.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx40(
+  SwitchPrimitives.Root,
+  {
+    ref,
+    "data-slot": "switch",
+    className: cn(
+      "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
+      SWITCH_SIZES[size].root,
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx40(
+      SwitchPrimitives.Thumb,
+      {
+        "data-slot": "switch-thumb",
+        className: cn(
+          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+          SWITCH_SIZES[size].thumb
         )
-      ]
-    }
-  );
-}
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/tabbed-bottom-sheet.tsx
 import { useState as useState8 } from "react";
@@ -5665,7 +5663,7 @@ export {
   MOTION_SHEET,
   MOTION_SPIN,
   NATIVE_TITLE_OPT_OUT_ATTR,
-  OrganizationAbbreviation,
+  OrganizationMark,
   OrganizationPicker,
   OverflowToolbar,
   POPPER_OFFSET,
@@ -5753,6 +5751,7 @@ export {
   isInsideFloatingLayer,
   isModalLayerOpen,
   keepFloatingLayersInside,
+  organizationColor,
   registerModalLayer,
   scoreAccentBgClasses,
   scoreRingColorClasses,