@noya-app/noya-designsystem 0.1.53 → 0.1.54

package/dist/index.mjs

@@ -2178,7 +2178,7 @@ var getMenuItemKey = (item, index) => {
   }
 };
 var CHECKBOX_WIDTH = 15;
-var CHECKBOX_RIGHT_INSET = 8;
+var CHECKBOX_RIGHT_INSET = 6;
 var CHECKBOX_INDENT_WIDTH = 6;
 var styles = {
   separatorStyle: "h-px bg-divider mx-3 my-1",
@@ -2281,7 +2281,6 @@ import { ChevronRightIcon } from "@noya-app/noya-icons";
 import React24 from "react";
 
 // src/components/internal/SelectItem.tsx
-import { CheckIcon } from "@noya-app/noya-icons";
 import React23, { useCallback as useCallback14 } from "react";
 var SelectItem = React23.forwardRef(
   ({
@@ -2321,7 +2320,7 @@ var SelectItem = React23.forwardRef(
           )
         },
         /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }),
-        Components4.ItemIndicator && /* @__PURE__ */ React23.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ React23.createElement(CheckIcon, null)),
+        Components4.ItemIndicator && /* @__PURE__ */ React23.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ React23.createElement(Checkmark, null)),
         icon && /* @__PURE__ */ React23.createElement(React23.Fragment, null, renderIcon(icon), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 8 })),
         children,
         shortcut && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React23.createElement(KeyboardShortcut, { shortcut }))
@@ -2342,10 +2341,34 @@ var SelectItem = React23.forwardRef(
         onSelect: handleSelectItem,
         ...props
       },
-      /* @__PURE__ */ React23.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ React23.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React23.createElement(CheckIcon, null)) : indented ? /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ React23.createElement(React23.Fragment, null, renderIcon(icon), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React23.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React23.createElement(KeyboardShortcut, { shortcut })))
+      /* @__PURE__ */ React23.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ React23.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React23.createElement(Checkmark, null)) : indented ? /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ React23.createElement(React23.Fragment, null, renderIcon(icon), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React23.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React23.createElement(KeyboardShortcut, { shortcut })))
     ));
   }
 );
+function Checkmark() {
+  return /* @__PURE__ */ React23.createElement(
+    "svg",
+    {
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      width: 15,
+      height: 15
+    },
+    /* @__PURE__ */ React23.createElement(
+      "path",
+      {
+        className: "scale-90 origin-center",
+        d: "M3 8L6 11L12 5",
+        strokeWidth: "1.1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        stroke: "currentColor"
+      }
+    )
+  );
+}
 
 // src/components/internal/MenuViewport.tsx
 var MenuViewport = ({
@@ -5681,9 +5704,9 @@ var ColorSwatch = forwardRef20(function ColorSwatch2({ color, size: size2 = "sma
         width: sizePx,
         height: sizePx,
         borderRadius: "4px",
-        outline: checked ? "2px solid rgba(0,0,0,0.2)" : "1px solid rgba(0,0,0,0.1)",
+        outline: checked ? `2px solid ${cssVars.colors.primary}` : "1px solid rgba(0,0,0,0.1)",
         outlineOffset: -1,
-        boxShadow: checked ? `inset 0 0 0 2px rgba(0,0,0,0.2)` : void 0,
+        boxShadow: checked ? `inset 0 0 0 2px ${cssVars.colors.background}` : void 0,
         ...style2
       }
     }
@@ -6096,7 +6119,7 @@ function useComboboxState(state) {
 }
 
 // src/components/ComboboxMenu.tsx
-import { CheckIcon as CheckIcon2 } from "@noya-app/noya-icons";
+import { CheckIcon } from "@noya-app/noya-icons";
 import React50 from "react";
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
@@ -6149,7 +6172,7 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ React50.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React50.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React50.createElement(CheckIcon2, null)) : indented ? /* @__PURE__ */ React50.createElement(
+            /* @__PURE__ */ React50.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React50.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React50.createElement(CheckIcon, null)) : indented ? /* @__PURE__ */ React50.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
@@ -6874,14 +6897,14 @@ var ConnectedUsersMenuLayout = ({
           backgroundColor: isAssistantOpen ? colorFromString(currentUserId ?? "") : void 0
         }
       },
-      "AI",
-      /* @__PURE__ */ React55.createElement(Spacer.Horizontal, { size: 8 }),
       /* @__PURE__ */ React55.createElement(
         ChatBubbleWithDotsIcon,
         {
           color: isAssistantOpen ? void 0 : cssVars.colors.icon
         }
-      )
+      ),
+      /* @__PURE__ */ React55.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      "AI"
     )
   ));
 };
@@ -10973,12 +10996,15 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
       value: (value ?? "").toString(),
       disabled,
       className: cx(
-        "font-sans text-heading5 font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
+        "font-sans text-button font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
         colorScheme === "secondary" ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1" : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
         colorScheme === "secondary" ? "aria-checked:bg-secondary aria-checked:text-white" : colorScheme === "primary" ? "aria-checked:bg-primary aria-checked:text-white" : "aria-checked:bg-background aria-checked:text-text",
         "focus:z-interactable",
         "aria-checked:shadow-segment",
-        "whitespace-pre",
+        "whitespace-pre px-1",
+        "border-r border-divider last:border-r-0",
+        "aria-checked:border-r-transparent",
+        "[&:has(+[aria-checked=true])]:border-r-transparent",
         className
       ),
       ...props
@@ -10988,15 +11014,6 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
   );
   return tooltip ? /* @__PURE__ */ React74.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var Separator3 = ({ transparent }) => /* @__PURE__ */ React74.createElement(
-  "div",
-  {
-    className: cx(
-      "w-[1px] my-1 self-stretch bg-divider",
-      transparent && "bg-transparent"
-    )
-  }
-);
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
   value,
@@ -11004,7 +11021,6 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   colorScheme,
   allowEmpty,
   items,
-  separator: separator2 = true,
   className,
   style: style2
 }) {
@@ -11017,7 +11033,6 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     },
     [allowEmpty, onValueChange]
   );
-  const selectedIndex = items.findIndex((item) => item?.value === value);
   return /* @__PURE__ */ React74.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React74.createElement(
     ToggleGroupPrimitive2.Root,
     {
@@ -11026,17 +11041,15 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       value,
       onValueChange: handleValueChange,
       className: cx(
-        `flex items-stretch flex-auto appearance-none relative outline-none min-h-input-height rounded bg-input-background py-[2px] px-[2px]`,
+        `grid appearance-none relative outline-none min-h-input-height rounded bg-input-background py-0.5 px-0.5`,
         className
       ),
-      style: style2
+      style: {
+        ...style2,
+        gridTemplateColumns: `repeat(${items.length}, 1fr)`
+      }
     },
-    separator2 ? items.map((item, index) => {
-      const isLastItem = index === items.length - 1;
-      const currentValue = item?.value;
-      const showSeparator = currentValue !== value && (selectedIndex === 0 && selectedIndex !== index ? true : index !== selectedIndex - 1);
-      return /* @__PURE__ */ React74.createElement(React74.Fragment, { key: index }, /* @__PURE__ */ React74.createElement(SegmentedControlItem, { key: index, ...item }), !isLastItem && /* @__PURE__ */ React74.createElement(Separator3, { transparent: !showSeparator }));
-    }) : items.map((item, index) => /* @__PURE__ */ React74.createElement(SegmentedControlItem, { key: index, ...item }))
+    items.map((item, index) => /* @__PURE__ */ React74.createElement(SegmentedControlItem, { key: index, ...item }))
   ));
 });
 
@@ -11353,7 +11366,7 @@ var Slider = memo34(function Slider2({
       {
         style: trackFillStyle,
         className: cx(
-          "absolute inset-0 w-full h-full rounded overflow-hidden",
+          "absolute inset-0 w-full h-full rounded overflow-hidden bg-primary-pastel",
           colorScheme === "primary" && "bg-primary",
           colorScheme === "secondary" && "bg-secondary"
         )
@@ -12390,6 +12403,11 @@ function BaseToolbar({
 import { DropdownChevronIcon as DropdownChevronIcon4 } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
 import React87 from "react";
+var iconButtonStyle = {
+  height: 27,
+  width: 27,
+  minWidth: 27
+};
 var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
@@ -12407,7 +12425,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ React87.createElement(Button, { disabled: item.disabled, active: item.checked || open }, item.title, item.title && item.icon && /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { inline: true, size: 6 }), item.icon && renderIcon(item.icon), /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React87.createElement(DropdownChevronIcon4, null))
+    /* @__PURE__ */ React87.createElement(Button, { disabled: item.disabled, active: item.checked || open }, item.icon && renderIcon(item.icon), item.title && item.icon && /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { inline: true, size: 6 }), item.title, /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { inline: true, size: 6 }), /* @__PURE__ */ React87.createElement(DropdownChevronIcon4, null))
   );
 });
 var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
@@ -12419,18 +12437,47 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
     {
       disabled: item.disabled,
       active: item.checked,
+      style: item.icon && !item.title ? iconButtonStyle : void 0,
       onClick: () => {
         if (onSelectMenuItem && item.value) {
           onSelectMenuItem(item.value);
         }
       }
     },
-    item.title,
+    item.icon && renderIcon(item.icon),
     item.title && item.icon && /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
-    item.icon && renderIcon(item.icon)
+    item.title
   );
   return item.tooltip ? /* @__PURE__ */ React87.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
 });
+var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
+  item,
+  onSelectMenuItem
+}) {
+  if (item.type === "sectionHeader") return null;
+  if (item.type === "separator") {
+    return /* @__PURE__ */ React87.createElement(DividerVertical, { overflow: 4 });
+  }
+  if (isSelectableMenuItem(item)) {
+    return /* @__PURE__ */ React87.createElement(ToolbarMenuButton, { item, onSelectMenuItem });
+  }
+  return /* @__PURE__ */ React87.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+});
+var ToolbarMenu = memoGeneric(function ToolbarMenu2({
+  items,
+  onSelectMenuItem
+}) {
+  return /* @__PURE__ */ React87.createElement(React87.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ React87.createElement(
+      ToolbarMenuItem,
+      {
+        key: i,
+        item,
+        onSelectMenuItem
+      }
+    );
+  }));
+});
 function Toolbar({
   children,
   logo,
@@ -12471,35 +12518,6 @@ function Toolbar({
     children
   );
 }
-var ToolbarMenu = memoGeneric(function ToolbarMenu2({
-  items,
-  onSelectMenuItem
-}) {
-  return /* @__PURE__ */ React87.createElement(React87.Fragment, null, items.map((item, i) => {
-    if (item.type === "sectionHeader") return null;
-    if (item.type === "separator") {
-      return /* @__PURE__ */ React87.createElement(DividerVertical, { key: i, overflow: 4 });
-    }
-    if (isSelectableMenuItem(item)) {
-      return /* @__PURE__ */ React87.createElement(
-        ToolbarMenuButton,
-        {
-          key: i,
-          item,
-          onSelectMenuItem
-        }
-      );
-    }
-    return /* @__PURE__ */ React87.createElement(
-      ToolbarMenuDropdown,
-      {
-        key: i,
-        item,
-        onSelectMenuItem
-      }
-    );
-  }));
-});
 export {
   AIAssistantInput,
   AIAssistantLayout,
@@ -12614,6 +12632,7 @@ export {
   ToolbarMenu,
   ToolbarMenuButton,
   ToolbarMenuDropdown,
+  ToolbarMenuItem,
   Tooltip,
   TreeView,
   UserAvatar,