@noya-app/noya-designsystem 0.1.53 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.20",
+    "@noya-app/noya-colorpicker": "0.1.21",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-geometry": "0.1.11",
     "@noya-app/noya-icons": "0.1.8",

package/src/components/ColorSwatch.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { cssVars } from "../theme";
 
 export type ColorSwatchSize = "xsmall" | "small" | "medium" | "large";
 
@@ -31,10 +32,12 @@ export const ColorSwatch = forwardRef(function ColorSwatch(
         height: sizePx,
         borderRadius: "4px",
         outline: checked
-          ? "2px solid rgba(0,0,0,0.2)"
+          ? `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)` : undefined,
+        boxShadow: checked
+          ? `inset 0 0 0 2px ${cssVars.colors.background}`
+          : undefined,
         ...style,
       }}
     />

package/src/components/SegmentedControl.tsx

@@ -32,7 +32,6 @@ export interface SegmentedControlProps<T extends string> {
   /** @default primary */
   colorScheme?: SegmentedControlColorScheme;
   allowEmpty?: boolean;
-  separator?: boolean;
   items: SegmentedControlItemProps<T>[];
   className?: string;
   style?: React.CSSProperties;
@@ -70,7 +69,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
       value={(value ?? "").toString()}
       disabled={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",
@@ -81,7 +80,10 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
             : "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}
@@ -98,15 +100,6 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
   );
 });
 
-const Separator = ({ transparent }: { transparent: boolean }) => (
-  <div
-    className={cx(
-      "w-[1px] my-1 self-stretch bg-divider",
-      transparent && "bg-transparent"
-    )}
-  />
-);
-
 export const SegmentedControl = memoGeneric(function SegmentedControl<
   T extends string,
 >({
@@ -116,7 +109,6 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
   colorScheme,
   allowEmpty,
   items,
-  separator = true,
   className,
   style,
 }: SegmentedControlProps<T>) {
@@ -131,8 +123,6 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
     [allowEmpty, onValueChange]
   );
 
-  const selectedIndex = items.findIndex((item) => item?.value === value);
-
   return (
     <SegmentedControlContext.Provider value={contextValue}>
       <ToggleGroupPrimitive.Root
@@ -141,36 +131,17 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         value={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={style}
+        style={{
+          ...style,
+          gridTemplateColumns: `repeat(${items.length}, 1fr)`,
+        }}
       >
-        {separator
-          ? items.map((item, index) => {
-              const isLastItem = index === items.length - 1;
-              const currentValue = item?.value;
-
-              // Show separator if:
-              // 1. Current item is not selected AND
-              // 2. Current item is not immediately before the selected item (except when selected is 0)
-              // 3. Current item is not immediately after the selected item
-              const showSeparator =
-                currentValue !== value &&
-                (selectedIndex === 0 && selectedIndex !== index
-                  ? true
-                  : index !== selectedIndex - 1);
-
-              return (
-                <React.Fragment key={index}>
-                  <SegmentedControlItem key={index} {...item} />
-                  {!isLastItem && <Separator transparent={!showSeparator} />}
-                </React.Fragment>
-              );
-            })
-          : items.map((item, index) => (
-              <SegmentedControlItem key={index} {...item} />
-            ))}
+        {items.map((item, index) => (
+          <SegmentedControlItem key={index} {...item} />
+        ))}
       </ToggleGroupPrimitive.Root>
     </SegmentedControlContext.Provider>
   );

package/src/components/Slider.tsx

@@ -117,7 +117,7 @@ export const Slider = memo(function Slider({
         <div
           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"
           )}

package/src/components/Toolbar.tsx

@@ -18,6 +18,12 @@ import {
 import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 
+const iconButtonStyle = {
+  height: 27,
+  width: 27,
+  minWidth: 27,
+};
+
 export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
   T extends string,
 >({
@@ -41,10 +47,10 @@ export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
       }}
     >
       <Button disabled={item.disabled} active={item.checked || open}>
-        {item.title}
-        {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
         {item.icon && renderIcon(item.icon)}
-        <Spacer.Horizontal size={6} />
+        {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+        {item.title}
+        <Spacer.Horizontal inline size={6} />
         <DropdownChevronIcon />
       </Button>
     </DropdownMenu>
@@ -64,15 +70,16 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
     <Button
       disabled={item.disabled}
       active={item.checked}
+      style={item.icon && !item.title ? iconButtonStyle : undefined}
       onClick={() => {
         if (onSelectMenuItem && item.value) {
           onSelectMenuItem(item.value);
         }
       }}
     >
-      {item.title}
-      {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
       {item.icon && renderIcon(item.icon)}
+      {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+      {item.title}
     </Button>
   );
 
@@ -85,6 +92,54 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
   );
 });
 
+export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
+  T extends string,
+>({
+  item,
+  onSelectMenuItem,
+}: {
+  item: MenuItem<T>;
+  onSelectMenuItem?: (value: T) => void;
+}) {
+  if (item.type === "sectionHeader") return null;
+
+  if (item.type === "separator") {
+    return <DividerVertical overflow={4} />;
+  }
+
+  if (isSelectableMenuItem(item)) {
+    return (
+      <ToolbarMenuButton item={item} onSelectMenuItem={onSelectMenuItem} />
+    );
+  }
+
+  return (
+    <ToolbarMenuDropdown item={item} onSelectMenuItem={onSelectMenuItem} />
+  );
+});
+
+export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
+  items,
+  onSelectMenuItem,
+}: {
+  items: MenuItem<T>[];
+  onSelectMenuItem?: (value: T) => void;
+}) {
+  return (
+    <>
+      {items.map((item, i) => {
+        return (
+          <ToolbarMenuItem
+            key={i}
+            item={item}
+            onSelectMenuItem={onSelectMenuItem}
+          />
+        );
+      })}
+    </>
+  );
+});
+
 export interface ToolbarProps<T extends string = string> {
   children?: React.ReactNode;
   logo?: React.ReactNode;
@@ -147,41 +202,3 @@ export function Toolbar<T extends string = string>({
     </BaseToolbar>
   );
 }
-
-export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
-  items,
-  onSelectMenuItem,
-}: {
-  items: MenuItem<T>[];
-  onSelectMenuItem?: (value: T) => void;
-}) {
-  return (
-    <>
-      {items.map((item, i) => {
-        if (item.type === "sectionHeader") return null;
-
-        if (item.type === "separator") {
-          return <DividerVertical key={i} overflow={4} />;
-        }
-
-        if (isSelectableMenuItem(item)) {
-          return (
-            <ToolbarMenuButton
-              key={i}
-              item={item}
-              onSelectMenuItem={onSelectMenuItem}
-            />
-          );
-        }
-
-        return (
-          <ToolbarMenuDropdown
-            key={i}
-            item={item}
-            onSelectMenuItem={onSelectMenuItem}
-          />
-        );
-      })}
-    </>
-  );
-});

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -60,11 +60,11 @@ export const ConnectedUsersMenuLayout = ({
                 : undefined,
             }}
           >
-            AI
-            <Spacer.Horizontal size={8} />
             <ChatBubbleWithDotsIcon
               color={isAssistantOpen ? undefined : cssVars.colors.icon}
             />
+            <Spacer.Horizontal inline size={6} />
+            AI
           </Button>
         </Tooltip>
       )}

package/src/components/internal/Menu.tsx

@@ -159,7 +159,7 @@ export const getMenuItemKey = <T extends string>(
 };
 
 export const CHECKBOX_WIDTH = 15;
-export const CHECKBOX_RIGHT_INSET = 8;
+export const CHECKBOX_RIGHT_INSET = 6;
 export const CHECKBOX_INDENT_WIDTH = 6;
 
 export const styles = {

package/src/components/internal/SelectItem.tsx

@@ -1,6 +1,5 @@
 import { renderIcon } from "../Icons";
 
-import { CheckIcon } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
 import React, { useCallback } from "react";
 import { cx } from "../../utils/classNames";
@@ -68,7 +67,7 @@ export const SelectItem = React.forwardRef(
             <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />
             {Components.ItemIndicator && (
               <Components.ItemIndicator {...styles.itemIndicator}>
-                <CheckIcon />
+                <Checkmark />
               </Components.ItemIndicator>
             )}
             {icon && (
@@ -109,7 +108,7 @@ export const SelectItem = React.forwardRef(
             {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
             {checked ? (
               <div {...styles.itemIndicator}>
-                <CheckIcon />
+                <Checkmark />
               </div>
             ) : indented ? (
               <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
@@ -134,3 +133,25 @@ export const SelectItem = React.forwardRef(
     );
   }
 );
+
+function Checkmark() {
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      width={15}
+      height={15}
+    >
+      <path
+        className="scale-90 origin-center"
+        d="M3 8L6 11L12 5"
+        strokeWidth="1.1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+}