@noya-app/noya-designsystem 0.1.77 → 0.1.78

package/src/components/SegmentedControl.tsx

@@ -1,14 +1,18 @@
 "use client";
 
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
 import { memoGeneric } from "@noya-app/react-utils";
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import React, {
   createContext,
   forwardRef,
   ReactNode,
   useCallback,
   useContext,
+  useLayoutEffect,
   useMemo,
+  useRef,
+  useState,
 } from "react";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
@@ -22,12 +26,16 @@ type SegmentedControlVariant = "default" | "tabs" | "buttons";
 type SegmentedControlContextValue = {
   /** @default primary */
   colorScheme?: SegmentedControlColorScheme;
+  onSelect?: (value: string) => void;
+  itemWidth?: SegmentedControlItemWidth;
 };
 
 const SegmentedControlContext = createContext<SegmentedControlContextValue>({
   colorScheme: "primary",
 });
 
+type SegmentedControlItemWidth = "auto" | "equal" | "fit";
+
 export interface SegmentedControlProps<T extends string> {
   id?: string;
   value?: T;
@@ -39,6 +47,14 @@ export interface SegmentedControlProps<T extends string> {
   className?: string;
   style?: React.CSSProperties;
   variant?: SegmentedControlVariant;
+  /**
+   * Controls item width distribution.
+   * - "auto": Items try to be equal width, but won't shrink below their content
+   * - "equal": Items are always equal width (may truncate content)
+   * - "fit": Items fit their content
+   * @default "auto"
+   */
+  itemWidth?: SegmentedControlItemWidth;
 }
 
 export type SegmentedControlItemProps<T extends string> = {
@@ -67,17 +83,31 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
   }: SegmentedControlItemProps<T>,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>
 ) {
-  const { colorScheme } = useContext(SegmentedControlContext);
+  const { colorScheme, onSelect, itemWidth = "auto" } =
+    useContext(SegmentedControlContext);
+
+  const handlePointerDown = useCallback(
+    (event: React.PointerEvent) => {
+      if (disabled) return;
+      onSelect?.((value ?? "").toString());
+      // Prevent default to avoid double-triggering on click
+      event.preventDefault();
+    },
+    [disabled, onSelect, value]
+  );
 
   const itemElement = (
-    <ToggleGroupPrimitive.Item
+    <Toggle
       ref={forwardedRef}
       value={(value ?? "").toString()}
       disabled={disabled}
+      onPointerDown={handlePointerDown}
       className={cx(
         "n-group",
         "n-flex n-items-center n-justify-center",
-        "n-font-sans n-text-button n-relative n-flex-1 n-appearance-none focus:n-outline-none n-transition-colors",
+        "n-font-sans n-text-button n-relative n-appearance-none focus:n-outline-none n-transition-colors",
+        // item width distribution (only for default variant with fit mode)
+        variant === "default" && itemWidth === "fit" && "n-flex-none",
         // text color
         variant === "buttons"
           ? "n-text-button-text"
@@ -88,36 +118,44 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
           : variant === "buttons"
             ? "n-font-medium"
             : "n-font-normal",
-        // focus ring
+        // focus ring (visible for keyboard users only)
         variant === "tabs"
           ? ""
           : variant === "buttons"
-            ? "focus:n-ring-2 focus:n-ring-primary focus:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all"
+            ? "focus-visible:n-ring-2 focus-visible:n-ring-primary focus-visible:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all"
             : colorScheme === "secondary"
-              ? "focus:n-ring-2 focus:n-ring-secondary focus:n-ring-offset-1"
-              : "focus:n-ring-2 focus:n-ring-primary focus:n-ring-offset-1",
+              ? "focus-visible:n-ring-2 focus-visible:n-ring-secondary focus-visible:n-ring-offset-1"
+              : "focus-visible:n-ring-2 focus-visible:n-ring-primary focus-visible:n-ring-offset-1",
         // checked
         variant === "tabs"
-          ? "aria-checked:n-text-primary"
+          ? "data-[pressed]:n-text-primary"
           : variant === "buttons"
-            ? "active:n-text-button-text-active active:n-bg-button-background-active aria-checked:n-text-button-text-active aria-checked:n-bg-button-background-active"
-            : colorScheme === "secondary"
-              ? "aria-checked:n-bg-secondary aria-checked:n-text-white"
-              : colorScheme === "primary"
-                ? "aria-checked:n-bg-primary aria-checked:n-text-white"
-                : "aria-checked:n-bg-segmented-control-item-active-background aria-checked:n-text-segmented-control-item-active-text",
-        "focus:n-z-interactable",
-        // checked default (all colorSchemes)
+            ? "active:n-text-button-text-active active:n-bg-button-background-active data-[pressed]:n-text-button-text-active data-[pressed]:n-bg-button-background-active"
+            : variant === "default"
+              ? // default variant: only text color, background handled by sliding indicator
+                colorScheme === "secondary"
+                ? "data-[pressed]:n-text-white"
+                : colorScheme === "primary"
+                  ? "data-[pressed]:n-text-white"
+                  : "data-[pressed]:n-text-segmented-control-item-active-text"
+              : colorScheme === "secondary"
+                ? "data-[pressed]:n-bg-secondary data-[pressed]:n-text-white"
+                : colorScheme === "primary"
+                  ? "data-[pressed]:n-bg-primary data-[pressed]:n-text-white"
+                  : "data-[pressed]:n-bg-segmented-control-item-active-background data-[pressed]:n-text-segmented-control-item-active-text",
+        "focus-visible:n-z-interactable",
+        // checked default (all colorSchemes) - hide separators near selected
         variant === "default" &&
-          "aria-checked:n-border-r-transparent [&:has(+[aria-checked=true])]:n-border-r-transparent aria-checked:n-shadow-segment",
+          "data-[pressed]:after:n-hidden [&:has(+[data-pressed])]:after:n-hidden",
         // hover
         variant === "buttons" && "hover:n-bg-button-background-hover",
         // spacing and borders
+        "n-px-input-padding-x",
         variant === "default"
-          ? "n-px-1 n-rounded n-border-r n-border-divider last:n-border-r-0"
+          ? "n-rounded after:n-content-[''] after:n-absolute after:n-right-0 after:n-top-0.5 after:n-bottom-0.5 after:n-w-px after:n-bg-divider last:after:n-hidden"
           : variant === "buttons"
-            ? "n-px-1.5 n-rounded-sm n-max-w-fit"
-            : "n-px-1.5 n-border-y-2 n-border-y-transparent aria-checked:n-border-b-primary",
+            ? "n-rounded-sm n-max-w-fit"
+            : "n-border-y-2 n-border-y-transparent data-[pressed]:n-border-b-primary",
         // icon only buttons
         variant === "buttons" && title === "" && icon && "n-min-w-input-height",
         className
@@ -134,7 +172,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
         {icon && renderIcon(icon)}
         {title}
       </span>
-    </ToggleGroupPrimitive.Item>
+    </Toggle>
   );
 
   return tooltip ? (
@@ -156,42 +194,132 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
   variant = "default",
   className,
   style,
+  itemWidth = "auto",
 }: SegmentedControlProps<T>) {
-  const contextValue = useMemo(() => ({ colorScheme }), [colorScheme]);
   const { fieldId: id } = useLabel({ fieldId: idProp });
 
-  const handleValueChange = useCallback(
-    (value: T) => {
-      if (!allowEmpty && !value) return;
-      onValueChange?.(value);
+  // Track if we should animate (skip initial mount)
+  const hasInitialized = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Indicator position based on measured item dimensions
+  const [indicatorStyle, setIndicatorStyle] = useState<{
+    left: number;
+    width: number;
+  } | null>(null);
+
+  const selectedIndex = useMemo(() => {
+    if (!value) return -1;
+    return items.findIndex((item) => item.value === value);
+  }, [value, items]);
+
+  useLayoutEffect(() => {
+    if (variant !== "default" || selectedIndex < 0) {
+      setIndicatorStyle(null);
+      return;
+    }
+
+    const container = containerRef.current;
+    const selectedItem = itemRefs.current[selectedIndex];
+
+    if (!container || !selectedItem) {
+      setIndicatorStyle(null);
+      return;
+    }
+
+    const containerRect = container.getBoundingClientRect();
+    const itemRect = selectedItem.getBoundingClientRect();
+
+    setIndicatorStyle({
+      left: itemRect.left - containerRect.left,
+      width: itemRect.width,
+    });
+
+    // Enable animation after first measurement
+    hasInitialized.current = true;
+  }, [selectedIndex, variant, items.length]);
+
+  const handleSelect = useCallback(
+    (newValue: string) => {
+      if (!allowEmpty && !newValue) return;
+      onValueChange?.(newValue as T);
     },
     [allowEmpty, onValueChange]
   );
 
+  const handleGroupValueChange = useCallback(
+    (groupValue: string[]) => handleSelect(groupValue[0] ?? ""),
+    [handleSelect]
+  );
+
+  const contextValue = useMemo(
+    () => ({ colorScheme, onSelect: handleSelect, itemWidth }),
+    [colorScheme, handleSelect, itemWidth]
+  );
+
+  const indicatorBgClass =
+    colorScheme === "secondary"
+      ? "n-bg-secondary"
+      : colorScheme === "primary"
+        ? "n-bg-primary"
+        : "n-bg-segmented-control-item-active-background";
+
   return (
     <SegmentedControlContext.Provider value={contextValue}>
-      <ToggleGroupPrimitive.Root
+      <ToggleGroup
+        ref={containerRef}
         id={id}
-        type="single"
-        value={value}
-        onValueChange={handleValueChange}
+        value={value ? [value] : []}
+        onValueChange={handleGroupValueChange}
         className={cx(
-          `n-appearance-none n-relative n-outline-none`,
+          "n-appearance-none n-relative n-outline-none",
           variant === "default" &&
-            "n-grid n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 n-px-0.5",
-          variant === "tabs" && "n-flex n-gap-1.5 n-min-h-[33px]",
-          variant === "buttons" && "n-flex n-gap-1.5 n-min-h-input-height",
+            (itemWidth === "fit" ? "n-flex n-w-fit" : "n-grid"),
+          variant === "default" &&
+            "n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 n-px-0.5",
+          variant !== "default" && "n-flex",
+          variant === "tabs" && "n-gap-1.5 n-min-h-[33px]",
+          variant === "buttons" && "n-gap-1.5 n-min-h-input-height",
           className
         )}
         style={{
           ...style,
-          gridTemplateColumns: `repeat(${items.length}, 1fr)`,
+          ...(variant === "default" &&
+            itemWidth !== "fit" && {
+              gridTemplateColumns:
+                itemWidth === "equal"
+                  ? `repeat(${items.length}, 1fr)`
+                  : `repeat(${items.length}, minmax(min-content, 1fr))`,
+            }),
         }}
       >
+        {/* Sliding indicator for default variant */}
+        {variant === "default" && indicatorStyle && (
+          <div
+            className={cx(
+              "n-absolute n-top-0.5 n-bottom-0.5 n-rounded n-shadow-segment n-pointer-events-none",
+              indicatorBgClass,
+              hasInitialized.current &&
+                "n-transition-[left,width] n-duration-200 n-ease-out"
+            )}
+            style={{
+              left: indicatorStyle.left,
+              width: indicatorStyle.width,
+            }}
+          />
+        )}
         {items.map((item, index) => (
-          <SegmentedControlItem key={index} {...item} variant={variant} />
+          <SegmentedControlItem
+            key={index}
+            ref={(el) => {
+              itemRefs.current[index] = el;
+            }}
+            {...item}
+            variant={variant}
+          />
         ))}
-      </ToggleGroupPrimitive.Root>
+      </ToggleGroup>
     </SegmentedControlContext.Provider>
   );
 });

package/src/components/SelectMenu.tsx

@@ -4,13 +4,14 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   DropdownChevronIcon,
+  CheckIcon,
 } from "@noya-app/noya-icons";
 import { memoGeneric } from "@noya-app/react-utils";
-import { Select } from "radix-ui";
-import { type SelectProps } from "@radix-ui/react-select";
+import { Select } from "@base-ui/react/select";
 import React, {
   CSSProperties,
   FocusEventHandler,
+  useCallback,
   useMemo,
   useState,
 } from "react";
@@ -23,15 +24,19 @@ import {
 } from "../contexts/PortalScopeContext";
 import { getInsetEndStyles } from "../utils/inputs";
 import { Button } from "./Button";
-import { renderIcon } from "./Icons";
+import { renderIcon, Icon, IconName } from "./Icons";
 import {
   isSelectableMenuItem,
   MenuItem,
   SelectableMenuItem,
   styles,
+  SectionHeaderMenuItem as SectionHeaderMenuItemComponent,
+  CHECKBOX_INDENT_WIDTH,
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
 } from "./internal/Menu";
-import { MenuComponents, MenuViewport } from "./internal/MenuViewport";
 import { Label } from "./Label";
+import { Spacer } from "./Spacer";
 
 type Props<T extends string> = {
   id?: string;
@@ -47,7 +52,9 @@ type Props<T extends string> = {
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
   contentStyle?: React.CSSProperties;
-} & Pick<SelectProps, "open" | "onOpenChange">;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
 
 const readOnlyStyle: CSSProperties = {
   justifyContent: "flex-start",
@@ -59,75 +66,118 @@ const scrollButtonStyles =
 
 const insetEndStyles = getInsetEndStyles();
 
-interface SelectMenuTriggerProps {
-  id?: string;
-  style?: React.CSSProperties;
-  className?: string;
-  disabled?: boolean;
-  icon?: React.ReactNode;
-  placeholder?: string;
-  isOpen?: boolean;
-  onFocus?: FocusEventHandler;
-  onBlur?: FocusEventHandler;
-  label?: React.ReactNode;
-}
+const itemStyle = (state: { disabled: boolean; highlighted: boolean }) =>
+  cx(
+    "n-flex-none n-select-none n-cursor-pointer n-rounded",
+    "n-py-1.5 n-px-2",
+    "n-transition-colors",
+    "n-flex n-items-center",
+    "n-font-sans n-text-button n-font-medium",
+    "focus:n-outline-none",
+    state.disabled && "n-text-text-disabled",
+    state.highlighted &&
+      "n-text-selected-list-item-text n-bg-selected-list-item-background"
+  );
 
-const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
-  style,
-  className,
-  disabled,
+function SelectItemContent({
   icon,
-  placeholder,
-  isOpen,
-  onFocus,
-  onBlur,
-  ...props
-}: SelectMenuTriggerProps) {
-  const { label, fieldId: id } = useLabel({
-    label: props.label,
-    fieldId: props.id,
-  });
-  const labelType = useLabelType();
-
+  checked,
+  indented,
+  children,
+}: {
+  icon?: React.ReactNode;
+  checked?: boolean;
+  indented?: boolean;
+  children: React.ReactNode;
+}) {
   return (
-    <Select.SelectTrigger asChild onFocus={onFocus} onBlur={onBlur}>
-      <Button
-        id={id}
-        style={style}
-        className={cx(
-          className ?? "n-flex n-w-full",
-          "n-flex-1 focus:n-z-interactable n-relative",
-          isOpen && "n-ring-2 n-ring-primary"
-        )}
-        disabled={disabled}
-      >
-        {icon && <span className="n-pr-1.5">{renderIcon(icon)}</span>}
-        {label && labelType === "inset" && (
-          <div className={insetEndStyles}>
-            <Label className="n-pr-4 n-text-text-disabled" htmlFor={id}>
-              {label}
-            </Label>
-          </div>
-        )}
-        <span className="n-flex-1 n-flex">
-          <Select.Value placeholder={placeholder} />
+    <>
+      {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
+      {checked ? (
+        <span
+          className="n-flex n-items-center n-relative -n-left-2.5"
+          style={{ marginRight: -CHECKBOX_RIGHT_INSET }}
+        >
+          <CheckIcon />
         </span>
-        <DropdownChevronIcon
-          className={cx(
-            "n-transition-transform n-duration-100 n-ml-1.5",
-            isOpen ? "n-rotate-180" : "n-rotate-0"
-          )}
-        />
-      </Button>
-    </Select.SelectTrigger>
+      ) : indented ? (
+        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
+      ) : null}
+      {icon &&
+        (typeof icon === "string" ? (
+          <Icon
+            name={icon as IconName}
+            className="n-mr-2 n-w-4 n-h-4 n-flex-shrink-0"
+          />
+        ) : (
+          <span className="n-mr-2 n-w-4 n-h-4 n-flex-shrink-0 n-flex n-items-center n-justify-center">
+            {icon}
+          </span>
+        ))}
+      <div className="n-flex n-items-center n-flex-1">{children}</div>
+    </>
   );
-});
+}
 
-const Components: MenuComponents = {
-  Item: Select.Item,
-  ItemText: Select.ItemText,
-  Separator: Select.Separator,
-};
+function SelectMenuItems<T extends string>({
+  items,
+  hasCheckedItem,
+}: {
+  items: MenuItem<T>[];
+  hasCheckedItem: boolean;
+}) {
+  return (
+    <>
+      {items.map((item, index) => {
+        switch (item.type) {
+          case "separator":
+            return (
+              <Select.Separator
+                key={index}
+                className={styles.separatorStyle}
+              />
+            );
+
+          case "sectionHeader":
+            return (
+              <SectionHeaderMenuItemComponent
+                isFirst={index === 0}
+                key={item.id}
+                {...item}
+                indented={hasCheckedItem}
+              />
+            );
+
+          case "popover":
+          case "submenu":
+            // Select doesn't support submenus/popovers
+            return null;
+
+          default:
+            return (
+              <div key={item.value} className="n-px-1">
+                <Select.Item
+                  value={item.value}
+                  disabled={item.disabled}
+                  className={itemStyle}
+                >
+                  <SelectItemContent
+                    icon={item.icon}
+                    checked={item.checked}
+                    indented={hasCheckedItem}
+                  >
+                    <Select.ItemText>
+                      {item.title ?? item.value}
+                    </Select.ItemText>
+                  </SelectItemContent>
+                </Select.Item>
+              </div>
+            );
+        }
+      })}
+    </>
+  );
+}
 
 export const SelectMenu = memoGeneric(function SelectMenu<
   T extends string = string,
@@ -154,19 +204,35 @@ export const SelectMenu = memoGeneric(function SelectMenu<
       isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
-  const [internalOpen, setInternalOpen] = useState(open);
+  const [internalOpen, setInternalOpen] = useState(open ?? false);
 
   const { label, fieldId: id } = useLabel({
     label: props.label,
     fieldId: props.id,
   });
 
-  const handleOpenChange = (open: boolean) => {
-    if (onOpenChange) {
-      onOpenChange(open);
-    }
-    setInternalOpen(open);
-  };
+  const labelType = useLabelType();
+
+  const handleOpenChange = useCallback(
+    (newOpen: boolean) => {
+      onOpenChange?.(newOpen);
+      setInternalOpen(newOpen);
+    },
+    [onOpenChange]
+  );
+
+  const handleValueChange = useCallback(
+    (newValue: T | null) => {
+      if (newValue !== null) {
+        onSelect?.(newValue);
+      }
+    },
+    [onSelect]
+  );
+
+  const hasCheckedItem = items.some(
+    (item) => isSelectableMenuItem(item) && item.checked
+  );
 
   const readOnlyButton = useMemo(
     () => (
@@ -186,7 +252,7 @@ export const SelectMenu = memoGeneric(function SelectMenu<
 
   const contentStyle = useMemo(() => {
     return {
-      width: "var(--radix-select-trigger-width)",
+      width: "var(--anchor-width)",
       minWidth: "max-content",
       maxHeight: "500px",
       ...contentStyleProp,
@@ -196,44 +262,70 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   const content = (
     <Select.Root
       value={value}
-      onValueChange={onSelect}
+      onValueChange={handleValueChange}
       open={open}
       onOpenChange={handleOpenChange}
+      disabled={disabled}
     >
-      <SelectMenuTrigger
+      <Select.Trigger
         id={id}
-        style={style}
-        className={className}
-        disabled={disabled}
-        icon={icon}
-        placeholder={placeholder}
-        isOpen={internalOpen}
         onFocus={onFocus}
         onBlur={onBlur}
-        label={label}
-      />
+        render={
+          <Button
+            style={style}
+            className={cx(
+              className ?? "n-flex n-w-full",
+              "n-flex-1 focus:n-z-interactable n-relative",
+              internalOpen && "n-ring-2 n-ring-primary"
+            )}
+            disabled={disabled}
+          />
+        }
+      >
+        {icon && <span className="n-pr-1.5">{renderIcon(icon)}</span>}
+        {label && labelType === "inset" && (
+          <div className={insetEndStyles}>
+            <Label className="n-pr-4 n-text-text-disabled" htmlFor={id}>
+              {label}
+            </Label>
+          </div>
+        )}
+        <span className="n-flex-1 n-flex">
+          <Select.Value>
+            {selectedItem?.title ?? value ?? placeholder}
+          </Select.Value>
+        </span>
+        <Select.Icon>
+          <DropdownChevronIcon
+            className={cx(
+              "n-transition-transform n-duration-100 n-ml-1.5",
+              internalOpen ? "n-rotate-180" : "n-rotate-0"
+            )}
+          />
+        </Select.Icon>
+      </Select.Trigger>
       <Select.Portal>
-        <Select.Content
+        <Select.Positioner
           {...portalScopeProps(portalScopeId)}
-          className={styles.contentStyle}
-          position="popper"
           sideOffset={6}
           collisionPadding={8}
           align="center"
           style={contentStyle}
+          className="n-z-menu"
         >
-          <Select.ScrollUpButton className={scrollButtonStyles}>
-            <ChevronUpIcon
-              className={cx("n-transition-transform n-duration-100")}
-            />
-          </Select.ScrollUpButton>
-          <Select.Viewport>
-            <MenuViewport items={items} Components={Components} />
-          </Select.Viewport>
-          <Select.ScrollDownButton className={scrollButtonStyles}>
-            <ChevronDownIcon />
-          </Select.ScrollDownButton>
-        </Select.Content>
+          <Select.Popup className={styles.contentStyle}>
+            <Select.ScrollUpArrow className={scrollButtonStyles}>
+              <ChevronUpIcon
+                className={cx("n-transition-transform n-duration-100")}
+              />
+            </Select.ScrollUpArrow>
+            <SelectMenuItems items={items} hasCheckedItem={hasCheckedItem} />
+            <Select.ScrollDownArrow className={scrollButtonStyles}>
+              <ChevronDownIcon />
+            </Select.ScrollDownArrow>
+          </Select.Popup>
+        </Select.Positioner>
       </Select.Portal>
     </Select.Root>
   );