@noya-app/noya-designsystem 0.1.77 → 0.1.79

package/src/components/Slider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Slider as RadixSlider } from "radix-ui";
-import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import React, { FocusEventHandler, memo, useCallback } from "react";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
@@ -43,31 +43,28 @@ export const Slider = memo(function Slider({
   readOnly = false,
   ...props
 }: Props) {
-  const arrayValue = useMemo(
-    () => [Math.min(Math.max(value, min), max)],
-    [value, min, max]
-  );
+  const clampedValue = Math.min(Math.max(value, min), max);
 
   const { fieldId: id } = useLabel({
     fieldId: props.id,
   });
 
   const handleValueChange = useCallback(
-    (arrayValue: number[]) => {
-      onValueChange(arrayValue[0]);
+    (newValue: number) => {
+      onValueChange(newValue);
     },
     [onValueChange]
   );
 
-  const ratio = (arrayValue[0] - min) / (max - min);
+  const ratio = (clampedValue - min) / (max - min);
 
   return (
-    <RadixSlider.Root
+    <BaseSlider.Root
       min={min}
       max={max}
       step={step}
       id={id}
-      value={arrayValue}
+      value={clampedValue}
       onValueChange={handleValueChange}
       className={cx(
         "n-flex n-relative n-items-center n-select-none n-touch-none n-h-input-height n-rounded n-flex-grow n-max-h-input-height n-cursor-pointer",
@@ -77,34 +74,39 @@ export const Slider = memo(function Slider({
       onFocus={onFocus}
       onBlur={onBlur}
       disabled={readOnly}
+      thumbAlignment="edge"
     >
-      <div className="n-relative n-flex-grow n-h-[3px] n-overflow-hidden">
-        <div
-          className="n-absolute n-h-full n-rounded-l n-bg-slider-active-background"
-          style={{
-            left: 0,
-            width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`,
-          }}
-        />
-        <div
-          className="n-absolute n-h-full n-rounded-r n-bg-input-background"
-          style={{
-            right: 0,
-            width: `calc(100% - ${ratio * 100}% + ${ratio * 8}px - 10px)`,
-          }}
+      <BaseSlider.Control className="n-relative n-flex-grow n-h-[21px] n-flex n-items-center">
+        <BaseSlider.Track className="n-relative n-flex-grow n-h-[3px] n-overflow-hidden">
+          <div
+            className="n-absolute n-h-full n-rounded-l n-bg-slider-active-background"
+            style={{
+              left: 0,
+              // With thumbAlignment="edge", thumb ranges from 0 to (100% - THUMB_WIDTH)
+              // Active track fills from 0 to thumb left edge, minus a small gap
+              width: `calc(${ratio * 100}% - ${ratio * THUMB_WIDTH + 2}px)`,
+            }}
+          />
+          <div
+            className="n-absolute n-h-full n-rounded-r n-bg-input-background"
+            style={{
+              right: 0,
+              // Inactive track fills from thumb right edge to 100%, minus a small gap
+              width: `calc(${(1 - ratio) * 100}% - ${(1 - ratio) * THUMB_WIDTH + 2}px)`,
+            }}
+          />
+        </BaseSlider.Track>
+        <BaseSlider.Thumb
+          style={thumbStyle}
+          className={cx(
+            "n-block n-h-[21px] n-rounded-sm n-bg-slider-thumb-background n-shadow-sliderThumb n-transition-colors focus:n-outline-primary focus:n-outline-2",
+            "n-cursor-ew-resize",
+            colorScheme === undefined && "n-border-slider-border",
+            colorScheme === "primary" && "n-border-primary",
+            colorScheme === "secondary" && "n-border-secondary"
+          )}
         />
-      </div>
-      <RadixSlider.Thumb
-        style={thumbStyle}
-        className={cx(
-          "n-block n-h-[21px] n-rounded-sm n-bg-slider-thumb-background n-shadow-sliderThumb n-transition-colors focus:n-outline-primary focus:n-outline-2",
-          "n-cursor-ew-resize",
-          // "outline-none outline outline-2 outline-offset-[0px] outline-background",
-          colorScheme === undefined && "n-border-slider-border",
-          colorScheme === "primary" && "n-border-primary",
-          colorScheme === "secondary" && "n-border-secondary"
-        )}
-      />
-    </RadixSlider.Root>
+      </BaseSlider.Control>
+    </BaseSlider.Root>
   );
 });

package/src/components/Switch.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Switch as SwitchPrimitive } from "radix-ui";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import * as React from "react";
 import { cx } from "../utils/classNames";
 
@@ -40,15 +40,15 @@ export const Switch = function Switch({
         onChange(newValue);
       }}
       className={cx(
-        "n-all-unset n-w-8 n-h-[19px] n-bg-active-background n-rounded-full n-relative n-cursor-pointer n-ring-offset-background n-[-webkit-tap-highlight-color:rgba(0,0,0,0)] focus:n-ring-2 focus:n-ring-primary focus:n-ring-offset-[1px] n-outline-none data-[state=checked]:n-bg-primary n-transition-all",
-        colorScheme === "secondary" && "data-[state=checked]:n-bg-secondary",
+        "n-all-unset n-w-8 n-h-[19px] n-bg-active-background n-rounded-full n-relative n-cursor-pointer n-ring-offset-background n-[-webkit-tap-highlight-color:rgba(0,0,0,0)] focus:n-ring-2 focus:n-ring-primary focus:n-ring-offset-[1px] n-outline-none data-[checked]:n-bg-primary n-transition-all",
+        colorScheme === "secondary" && "data-[checked]:n-bg-secondary",
         "focus:n-z-interactable",
         className
       )}
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <SwitchPrimitive.Thumb className="n-block n-w-[15px] n-h-[15px] n-bg-background n-rounded-full n-transition-transform n-translate-x-[2px] data-[state=checked]:n-translate-x-[15px]" />
+      <SwitchPrimitive.Thumb className="n-block n-w-[15px] n-h-[15px] n-bg-background n-rounded-full n-transition-transform n-translate-x-[2px] n-translate-y-[2px] data-[checked]:n-translate-x-[15px]" />
     </SwitchPrimitive.Root>
   );
 };

package/src/components/TextArea.tsx

@@ -68,7 +68,7 @@ export const TextArea = memo(
     return (
       <textarea
         className={cx(
-          `n-font-sans n-text-heading5 n-font-normal n-text-text n-bg-input-background n-flex-1 n-py-1 n-px-1.5 n-border-none n-outline-none n-min-h-6 n-w-full n-rounded n-resize-none placeholder:n-text-text-disabled focus:n-ring-2 focus:n-ring-primary read-only:n-text-text-disabled focus:n-z-interactable n-transition-[box-shadow]`,
+          `n-font-sans n-text-heading5 n-font-normal n-text-text n-bg-input-background n-flex-1 n-py-1 n-px-input-padding-x n-border-none n-outline-none n-min-h-6 n-w-full n-rounded n-resize-none placeholder:n-text-text-disabled focus:n-ring-2 focus:n-ring-primary read-only:n-text-text-disabled focus:n-z-interactable n-transition-[box-shadow]`,
           className
         )}
         {...rest}

package/src/components/Toast.tsx

@@ -1,50 +1,123 @@
-import { Toast as ToastPrimitive } from "radix-ui";
-import React, { ReactNode } from "react";
+"use client";
+
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import React, { ReactNode, createContext, useCallback, useContext } from "react";
 import { IconButton } from "./IconButton";
 import { textStyles } from "./Text";
 
-export const Toast = ({
-  title,
-  content,
-  children,
-  ...props
-}: {
+// Types for toast data
+interface ToastData {
   title?: string;
   content: ReactNode;
-  children?: React.ReactNode;
-}) => {
+  action?: ReactNode;
+}
+
+// Context for toast functionality
+interface ToastContextValue {
+  showToast: (data: ToastData) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
+  return context;
+}
+
+// Toast object type (inferred from toast manager)
+type ToastObject = {
+  id: string;
+  data?: ToastData;
+};
+
+// Individual toast content renderer
+function ToastContent({ toast }: { toast: ToastObject }) {
   return (
     <ToastPrimitive.Root
+      toast={toast}
       className="n-px-2 n-py-2.5 n-grid n-grid-cols-[auto_max-content] n-gap-x-2.5 n-items-center n-rounded n-text-sm n-bg-popover-background n-shadow-popover n-text-text-muted"
-      {...props}
     >
-      {title && (
+      {toast.data?.title && (
         <ToastPrimitive.Title
           className={`n-mb-[5px] ${textStyles.label} n-font-bold n-text-text`}
         >
-          {title}
+          {toast.data.title}
         </ToastPrimitive.Title>
       )}
       <ToastPrimitive.Description
         className={`${textStyles.small} n-text-text-muted`}
       >
-        {content}
+        {toast.data?.content}
       </ToastPrimitive.Description>
-      {children && (
-        <ToastPrimitive.Action asChild altText="">
-          {children}
+      {toast.data?.action && (
+        <ToastPrimitive.Action render={<span />}>
+          {toast.data.action}
         </ToastPrimitive.Action>
       )}
-      <ToastPrimitive.Close aria-label="Close" asChild>
-        <IconButton iconName="Cross1Icon" />
-      </ToastPrimitive.Close>
+      <ToastPrimitive.Close
+        aria-label="Close"
+        render={<IconButton iconName="Cross1Icon" />}
+      />
     </ToastPrimitive.Root>
   );
+}
+
+// Inner component that uses the toast manager hook (must be inside Provider)
+function ToastProviderInner({ children }: { children: React.ReactNode }) {
+  const toastManager = ToastPrimitive.useToastManager();
+
+  const showToast = useCallback(
+    (data: ToastData) => {
+      toastManager.add({ data });
+    },
+    [toastManager]
+  );
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <ToastPrimitive.Viewport className="n-fixed n-bottom-0 n-right-0 n-flex n-flex-col n-p-5 n-gap-2.5 n-min-w-[200px] n-max-w-[100vw] n-m-0 n-list-none n-z-[2147483647] n-outline-none">
+        {toastManager.toasts.map((toast) => (
+          <ToastContent key={toast.id} toast={toast} />
+        ))}
+      </ToastPrimitive.Viewport>
+    </ToastContext.Provider>
+  );
+}
+
+// Provider component that maintains backwards compatibility
+export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ToastPrimitive.Provider>
+      <ToastProviderInner>{children}</ToastProviderInner>
+    </ToastPrimitive.Provider>
+  );
 };
 
-export const ToastProvider = ({ children }: { children: React.ReactNode }) => (
-  <ToastPrimitive.Provider>
-    {children}
-    <ToastPrimitive.Viewport className="n-fixed n-bottom-0 n-right-0 n-flex n-flex-col n-p-5 n-gap-2.5 n-min-w-[200px] n-max-w-[100vw] n-m-0 n-list-none n-z-[2147483647] n-outline-none" />
-  </ToastPrimitive.Provider>
-);
+// Legacy Toast component for direct rendering (if needed)
+export const Toast = ({
+  title,
+  content,
+  children,
+}: {
+  title?: string;
+  content: ReactNode;
+  children?: React.ReactNode;
+}) => {
+  // This is a simplified version for backwards compatibility
+  // In most cases, useToast().showToast() should be used instead
+  return (
+    <div className="n-px-2 n-py-2.5 n-grid n-grid-cols-[auto_max-content] n-gap-x-2.5 n-items-center n-rounded n-text-sm n-bg-popover-background n-shadow-popover n-text-text-muted">
+      {title && (
+        <div className={`n-mb-[5px] ${textStyles.label} n-font-bold n-text-text`}>
+          {title}
+        </div>
+      )}
+      <div className={`${textStyles.small} n-text-text-muted`}>{content}</div>
+      {children}
+    </div>
+  );
+};

package/src/components/Toolbar.tsx

@@ -31,6 +31,16 @@ const SIDE_OFFSET = 6;
 
 export const ToolbarMenuContext = createContext<{
   dividerOverflow?: number;
+  /** When true, PopoverMenuItem items show as dialogs on small screens */
+  useDialogOnSmallScreen?: boolean;
+  /** Function to detect if screen is small. Required when useDialogOnSmallScreen is true */
+  isSmallScreen?: boolean;
+  /** Function to open a dialog. Required when useDialogOnSmallScreen is true */
+  openDialog?: (options: {
+    title: ReactNode;
+    className?: string;
+    children: ReactNode | ((props: { close: () => void }) => ReactNode);
+  }) => Promise<void> & { close: () => void };
 }>({});
 
 export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
@@ -38,16 +48,26 @@ export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
 >({
   item,
   onSelectMenuItem,
+  onPopoverOpenChange,
 }: {
   item: SubMenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
+  onPopoverOpenChange?: (open: boolean) => void;
 }) {
   const [open, setOpen] = React.useState(false);
 
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      onPopoverOpenChange?.(newOpen);
+    },
+    [onPopoverOpenChange]
+  );
+
   return (
     <DropdownMenu
       open={open}
-      onOpenChange={setOpen}
+      onOpenChange={handleOpenChange}
       items={item.items}
       modal={false}
       onSelect={(value) => {
@@ -60,7 +80,11 @@ export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
         disabled={item.disabled}
         active={item.checked || open}
         icon={item.icon}
-        iconRight="DropdownChevronIcon"
+        iconRight={
+          item.icon === "DotsVerticalIcon" || item.icon === "DotsHorizontalIcon"
+            ? undefined
+            : "DropdownChevronIcon"
+        }
       >
         {item.title}
       </Button>
@@ -87,9 +111,11 @@ export const ToolbarShortcut = ({
 export const ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover({
   item,
   portalContainer,
+  onPopoverOpenChange,
 }: {
   item: PopoverMenuItem;
   portalContainer?: HTMLElement | null;
+  onPopoverOpenChange?: (open: boolean) => void;
 }) {
   const {
     disabled,
@@ -98,31 +124,88 @@ export const ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover({
     tooltip,
     content: itemContent,
     checked,
+    popoverClassName,
+    triggerProps: buttonProps,
   } = item;
   const [open, setOpen] = React.useState(false);
 
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      onPopoverOpenChange?.(newOpen);
+    },
+    [onPopoverOpenChange]
+  );
+
+  const { useDialogOnSmallScreen, isSmallScreen, openDialog } =
+    useContext(ToolbarMenuContext);
+
+  const shouldUseDialog = useDialogOnSmallScreen && isSmallScreen && openDialog;
+
+  const handleOpenDialog = React.useCallback(() => {
+    if (!openDialog) return;
+
+    handleOpenChange(true);
+    const dialogContent =
+      typeof itemContent === "function" ? (
+        (props: { close: () => void }) => (
+          <div className="-n-m-3">{itemContent(props)}</div>
+        )
+      ) : (
+        <div className="-n-m-3">{itemContent}</div>
+      );
+
+    const dialog = openDialog({
+      title,
+      className: "n-w-[90vw] n-max-w-[360px]",
+      children: dialogContent,
+    });
+    dialog.then(() => handleOpenChange(false));
+  }, [openDialog, itemContent, title, handleOpenChange]);
+
+  const trigger = (
+    <Button
+      disabled={disabled}
+      active={checked || open}
+      icon={icon}
+      iconRight="DropdownChevronIcon"
+      onClick={shouldUseDialog ? handleOpenDialog : undefined}
+      {...buttonProps}
+    >
+      {title}
+    </Button>
+  );
+
+  // On small screens with dialog mode enabled, just render the trigger button
+  if (shouldUseDialog) {
+    return tooltip && !open ? (
+      <Tooltip
+        sideOffset={SIDE_OFFSET}
+        side="top"
+        content={tooltip}
+        portalContainer={portalContainer}
+      >
+        {trigger}
+      </Tooltip>
+    ) : (
+      trigger
+    );
+  }
+
   const content = (
     <span>
       <Popover
         open={open}
-        onOpenChange={setOpen}
+        onOpenChange={handleOpenChange}
         side="top"
         showArrow={false}
         sideOffset={SIDE_OFFSET}
         portalContainer={portalContainer}
-        trigger={
-          <Button
-            disabled={disabled}
-            active={checked || open}
-            icon={icon}
-            iconRight="DropdownChevronIcon"
-          >
-            {title}
-          </Button>
-        }
+        trigger={trigger}
+        className={popoverClassName}
       >
         {typeof itemContent === "function"
-          ? itemContent({ close: () => setOpen(false) })
+          ? itemContent({ close: () => handleOpenChange(false) })
           : itemContent}
       </Popover>
     </span>
@@ -204,6 +287,7 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   portalContainer,
   displayFilter,
   dividerOverflow: dividerOverflowProp,
+  onPopoverOpenChange,
 }: {
   item: MenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
@@ -213,6 +297,7 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   portalContainer?: HTMLElement | null;
   displayFilter?: DisplayFilter;
   dividerOverflow?: number;
+  onPopoverOpenChange?: (open: boolean) => void;
 }) {
   const { dividerOverflow: contextDividerOverflow } =
     useContext(ToolbarMenuContext);
@@ -226,7 +311,13 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   }
 
   if (item.type === "popover") {
-    return <ToolbarMenuPopover item={item} portalContainer={portalContainer} />;
+    return (
+      <ToolbarMenuPopover
+        item={item}
+        portalContainer={portalContainer}
+        onPopoverOpenChange={onPopoverOpenChange}
+      />
+    );
   }
 
   if (isSelectableMenuItem(item)) {
@@ -243,7 +334,11 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
   }
 
   return (
-    <ToolbarMenuDropdown item={item} onSelectMenuItem={onSelectMenuItem} />
+    <ToolbarMenuDropdown
+      item={item}
+      onSelectMenuItem={onSelectMenuItem}
+      onPopoverOpenChange={onPopoverOpenChange}
+    />
   );
 });
 
@@ -258,6 +353,7 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   portalContainer,
   displayFilter = "iconAndText",
   dividerOverflow,
+  onPopoverOpenChange,
 }: {
   items: MenuItem<T>[];
   onSelectMenuItem?: (value: T) => void;
@@ -267,6 +363,7 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   portalContainer?: HTMLElement | null;
   displayFilter?: DisplayFilter;
   dividerOverflow?: number;
+  onPopoverOpenChange?: (open: boolean) => void;
 }) {
   return (
     <>
@@ -282,6 +379,7 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
             portalContainer={portalContainer}
             displayFilter={displayFilter}
             dividerOverflow={dividerOverflow}
+            onPopoverOpenChange={onPopoverOpenChange}
           />
         );
       })}

package/src/components/Tooltip.tsx

@@ -1,17 +1,19 @@
-import { Tooltip as TooltipPrimitive } from "radix-ui";
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 import * as React from "react";
-import { ComponentProps } from "react";
 import {
   portalScopeProps,
   usePortalScopeId,
 } from "../contexts/PortalScopeContext";
+import { cloneElementWithMergedProps } from "../utils/mergeProps";
 import { textStyles } from "./Text";
 
 interface Props {
   children: React.ReactNode;
   content: React.ReactNode;
   sideOffset?: number;
-  side?: ComponentProps<typeof TooltipPrimitive.Content>["side"];
+  side?: "top" | "bottom" | "left" | "right";
   portalContainer?: HTMLElement | null;
 }
 
@@ -27,18 +29,26 @@ export const Tooltip = React.memo(function Tooltip({
   return (
     <TooltipPrimitive.Provider>
       <TooltipPrimitive.Root>
-        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Trigger
+          render={(triggerProps) =>
+            cloneElementWithMergedProps(children, triggerProps)
+          }
+        />
         <TooltipPrimitive.Portal container={portalContainer}>
-          <TooltipPrimitive.Content
+          <TooltipPrimitive.Positioner
             {...portalScopeProps(portalScopeId)}
             side={side}
             align="center"
             sideOffset={sideOffset}
             collisionPadding={8}
-            className={`${textStyles.small} n-text-text n-rounded-sm n-p-2 n-bg-popover-background n-shadow-tooltip n-z-menu`}
+            className="n-z-menu"
           >
-            {content}
-          </TooltipPrimitive.Content>
+            <TooltipPrimitive.Popup
+              className={`${textStyles.small} n-text-text n-rounded-sm n-p-2 n-bg-popover-background n-shadow-tooltip n-z-menu`}
+            >
+              {content}
+            </TooltipPrimitive.Popup>
+          </TooltipPrimitive.Positioner>
         </TooltipPrimitive.Portal>
       </TooltipPrimitive.Root>
     </TooltipPrimitive.Provider>