@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/SegmentedControl.tsx

@@ -75,60 +75,60 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
       value={(value ?? "").toString()}
       disabled={disabled}
       className={cx(
-        "group",
-        "flex items-center justify-center",
-        "font-sans text-button relative flex-1 appearance-none focus:outline-none transition-colors",
+        "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",
         // text color
         variant === "buttons"
-          ? "text-button-text"
-          : "text-segmented-control-item",
+          ? "n-text-button-text"
+          : "n-text-segmented-control-item",
         // font weight
         variant === "tabs"
-          ? "font-semibold"
+          ? "n-font-semibold"
           : variant === "buttons"
-            ? "font-medium"
-            : "font-normal",
+            ? "n-font-medium"
+            : "n-font-normal",
         // focus ring
         variant === "tabs"
           ? ""
           : variant === "buttons"
-            ? "focus-visible:ring-2 focus-visible:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all"
+            ? "focus-visible:n-ring-2 focus-visible:n-ring-primary focus:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all"
             : colorScheme === "secondary"
-              ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
-              : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
+              ? "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",
         // checked
         variant === "tabs"
-          ? "aria-checked:text-primary"
+          ? "aria-checked:n-text-primary"
           : variant === "buttons"
-            ? "active:text-button-text-active active:bg-button-background-active aria-checked:text-button-text-active aria-checked:bg-button-background-active"
+            ? "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:bg-secondary aria-checked:text-white"
+              ? "aria-checked:n-bg-secondary aria-checked:n-text-white"
               : colorScheme === "primary"
-                ? "aria-checked:bg-primary aria-checked:text-white"
-                : "aria-checked:bg-segmented-control-item-active-background aria-checked:text-segmented-control-item-active-text",
-        "focus:z-interactable",
+                ? "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)
         variant === "default" &&
-          "aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent aria-checked:shadow-segment",
+          "aria-checked:n-border-r-transparent [&:has(+[aria-checked=true])]:n-border-r-transparent aria-checked:n-shadow-segment",
         // hover
-        variant === "buttons" && "hover:bg-button-background-hover",
+        variant === "buttons" && "hover:n-bg-button-background-hover",
         // spacing and borders
         variant === "default"
-          ? "px-1 rounded border-r border-divider last:border-r-0"
+          ? "n-px-1 n-rounded n-border-r n-border-divider last:n-border-r-0"
           : variant === "buttons"
-            ? "px-1 rounded-sm max-w-fit"
-            : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+            ? "n-px-1 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",
         // icon only buttons
-        variant === "buttons" && title === "" && icon && "min-w-input-height",
+        variant === "buttons" && title === "" && icon && "n-min-w-input-height",
         className
       )}
       {...props}
     >
       <span
         className={cx(
-          "inline-flex whitespace-pre flex-nowrap gap-1.5 items-center justify-center align-middle text-center",
+          "n-inline-flex n-whitespace-pre n-flex-nowrap n-gap-1.5 n-items-center n-justify-center n-align-middle n-text-center",
           variant === "tabs" &&
-            "group-focus-visible:ring-2 group-focus-visible:ring-primary-pastel group-focus-visible:ring-offset-2"
+            "group-focus-visible:n-ring-2 group-focus-visible:n-ring-primary-pastel group-focus-visible:n-ring-offset-2"
         )}
       >
         {icon && renderIcon(icon)}
@@ -176,11 +176,11 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         value={value}
         onValueChange={handleValueChange}
         className={cx(
-          `appearance-none relative outline-none`,
+          `n-appearance-none n-relative n-outline-none`,
           variant === "default" &&
-            "grid min-h-input-height bg-input-background rounded py-0.5 px-0.5",
-          variant === "tabs" && "flex gap-1.5 min-h-[33px]",
-          variant === "buttons" && "flex gap-1.5 min-h-input-height",
+            "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",
           className
         )}
         style={{

package/src/components/SelectMenu.tsx

@@ -54,15 +54,8 @@ const readOnlyStyle: CSSProperties = {
   textAlign: "left",
 };
 
-const scrollButtonStyles = `
-  flex 
-  items-center 
-  justify-center 
-  h-[25px] 
-  cursor-default
-  text-text-muted
-  hover:text-text
-`;
+const scrollButtonStyles =
+  "n-flex n-items-center n-justify-center n-h-[25px] n-cursor-default n-text-text-muted hover:n-text-text";
 
 const insetEndStyles = getInsetEndStyles();
 
@@ -102,27 +95,27 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
         id={id}
         style={style}
         className={cx(
-          className ?? "flex w-full",
-          "flex-1 focus:z-interactable relative",
-          isOpen && "ring-2 ring-primary"
+          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="pr-1.5">{renderIcon(icon)}</span>}
+        {icon && <span className="n-pr-1.5">{renderIcon(icon)}</span>}
         {label && labelType === "inset" && (
           <div className={insetEndStyles}>
-            <Label className="pr-4 text-text-disabled" htmlFor={id}>
+            <Label className="n-pr-4 n-text-text-disabled" htmlFor={id}>
               {label}
             </Label>
           </div>
         )}
-        <span className="flex-1 flex">
+        <span className="n-flex-1 n-flex">
           <Select.Value placeholder={placeholder} />
         </span>
         <DropdownChevronIcon
           className={cx(
-            "transition-transform duration-100 ml-1.5",
-            isOpen ? "rotate-180" : "rotate-0"
+            "n-transition-transform n-duration-100 n-ml-1.5",
+            isOpen ? "n-rotate-180" : "n-rotate-0"
           )}
         />
       </Button>
@@ -181,11 +174,11 @@ export const SelectMenu = memoGeneric(function SelectMenu<
         id={id}
         style={style}
         contentStyle={readOnlyStyle}
-        className={cx(`${className} flex-1 focus:z-interactable gap-1.5`)}
+        className={cx("n-flex-1 focus:n-z-interactable n-gap-1.5", className)}
         disabled={disabled}
       >
         {icon && renderIcon(icon)}
-        <span className="flex flex-1">{selectedItem?.title ?? value}</span>
+        <span className="n-flex n-flex-1">{selectedItem?.title ?? value}</span>
       </Button>
     ),
     [icon, id, style, className, disabled, value, selectedItem]
@@ -231,7 +224,7 @@ export const SelectMenu = memoGeneric(function SelectMenu<
         >
           <Select.ScrollUpButton className={scrollButtonStyles}>
             <ChevronUpIcon
-              className={cx("transition-transform duration-100")}
+              className={cx("n-transition-transform n-duration-100")}
             />
           </Select.ScrollUpButton>
           <Select.Viewport>

package/src/components/SelectionToolbar.tsx

@@ -34,7 +34,7 @@ type PopperPrimitiveContentProps = ComponentProps<
 
 type SelectionToolbarContainerProps = Pick<
   PopperPrimitiveContentProps,
-  "side" | "sideOffset" | "align"
+  "side" | "sideOffset" | "align" | "avoidCollisions"
 > & {
   rect: Rect;
   children: React.ReactNode;
@@ -52,6 +52,7 @@ export const SelectionToolbarContainer = memo(
     side = "top",
     sideOffset = 10,
     align = "center",
+    avoidCollisions = true,
     containerClassName,
     containerStyle,
     transitionDuration = 0.2,
@@ -74,7 +75,7 @@ export const SelectionToolbarContainer = memo(
         side={side}
         sideOffset={sideOffset}
         align={align}
-        avoidCollisions
+        avoidCollisions={avoidCollisions}
         collisionPadding={10}
         contentEditable={false}
         style={{
@@ -88,7 +89,7 @@ export const SelectionToolbarContainer = memo(
         <div
           ref={containerRef}
           className={cx(
-            "flex gap-1 bg-popover-background rounded shadow-popover p-1",
+            "n-flex n-gap-1 n-bg-popover-background n-rounded n-shadow-popover n-p-1",
             containerClassName
           )}
           style={containerStyle}

package/src/components/Slider.tsx

@@ -70,7 +70,7 @@ export const Slider = memo(function Slider({
       value={arrayValue}
       onValueChange={handleValueChange}
       className={cx(
-        "flex relative items-center select-none touch-none h-input-height rounded flex-grow max-h-input-height cursor-pointer",
+        "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",
         className
       )}
       style={style}
@@ -78,16 +78,16 @@ export const Slider = memo(function Slider({
       onBlur={onBlur}
       disabled={readOnly}
     >
-      <div className="relative flex-grow h-[3px] overflow-hidden">
+      <div className="n-relative n-flex-grow n-h-[3px] n-overflow-hidden">
         <div
-          className="absolute h-full rounded-l bg-slider-active-background"
+          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="absolute h-full rounded-r bg-input-background"
+          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)`,
@@ -97,12 +97,12 @@ export const Slider = memo(function Slider({
       <RadixSlider.Thumb
         style={thumbStyle}
         className={cx(
-          "block h-[21px] rounded-sm bg-slider-thumb-background shadow-sliderThumb transition-colors focus:outline-primary focus:outline-2",
-          "cursor-ew-resize",
+          "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 && "border-slider-border",
-          colorScheme === "primary" && "border-primary",
-          colorScheme === "secondary" && "border-secondary"
+          colorScheme === undefined && "n-border-slider-border",
+          colorScheme === "primary" && "n-border-primary",
+          colorScheme === "secondary" && "n-border-secondary"
         )}
       />
     </RadixSlider.Root>

package/src/components/Spacer.tsx

@@ -14,7 +14,7 @@ const SpacerVertical = React.forwardRef<HTMLSpanElement, Props>(
   ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
     return (
       <span
-        className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`}
+        className={`${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`}
         style={
           size
             ? {
@@ -37,7 +37,7 @@ const SpacerHorizontal = React.forwardRef<HTMLSpanElement, Props>(
   ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
     return (
       <span
-        className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`}
+        className={`${inline ? "n-inline-block" : "n-block"} ${size === undefined ? "n-flex n-flex-1" : ""}`}
         style={
           size
             ? {

package/src/components/StackNavigator.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import { Size } from "@noya-app/noya-geometry";
+import { isDeepEqual } from "@noya-app/noya-utils";
+import { useSize } from "@noya-app/react-utils";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cx } from "../utils/classNames";
+import {
+  AnimatePresence,
+  AnimatePresenceChildState,
+  AnimatePresenceProps,
+} from "./AnimatePresence";
+import { BaseToolbar } from "./BaseToolbar";
+import { Button } from "./Button";
+import { Body } from "./Text";
+
+type StackRenderContextValue = Record<string, () => React.ReactNode>;
+
+const StackRenderContext = React.createContext<StackRenderContextValue>({});
+
+export type StackItem = {
+  key: string;
+  title?: React.ReactNode;
+  right?: React.ReactNode;
+  renderContent: () => React.ReactNode;
+  /** Force hide/show back button for this item */
+  showBackButton?: boolean;
+  renderHeader?: StackNavigatorRenderHeader;
+};
+
+export type StackNavigatorHeaderProps = {
+  onBack?: () => void;
+  showBackButton: boolean;
+  showDivider: boolean;
+  right?: React.ReactNode;
+  title?: React.ReactNode;
+};
+
+export type StackNavigatorRenderHeader =
+  | React.ReactNode
+  | ((props: StackNavigatorHeaderProps) => React.ReactNode);
+
+export type StackNavigatorProps = {
+  /** Items ordered from root to top. The last item is shown. */
+  items: StackItem[];
+  /** Called when the back button is pressed */
+  onBack?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+  contentClassName?: string;
+  /** Whether to show the header. @default true */
+  showHeader?: boolean;
+  showDivider?: boolean;
+  cardStyle?: React.CSSProperties;
+  cardClassName?: string;
+  renderHeader?: StackNavigatorRenderHeader;
+};
+
+export function StackNavigator({
+  items,
+  onBack,
+  className,
+  style,
+  contentClassName,
+  cardStyle,
+  cardClassName,
+  showDivider = true,
+  showHeader = true,
+  renderHeader,
+}: StackNavigatorProps) {
+  const top = items.at(-1);
+
+  const previousLengthRef = useRef<number>(items.length);
+  const direction = useMemo<"forward" | "back">(() => {
+    const previous = previousLengthRef.current;
+    previousLengthRef.current = items.length;
+    return items.length >= previous ? "forward" : "back";
+  }, [items.length]);
+
+  const [cardSizes, setCardSizes] = useState<Record<string, Size>>({});
+  const [containerSize, setContainerSize] = useState<Size | undefined>();
+
+  const handleSizeChange = useCallback((key: string, size: Size) => {
+    setCardSizes((prev) => {
+      if (isDeepEqual(prev[key], size)) {
+        return prev;
+      }
+
+      return { ...prev, [key]: size };
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!top) {
+      setContainerSize(undefined);
+      return;
+    }
+
+    const measuredSize = cardSizes[top.key];
+
+    if (!measuredSize) return;
+
+    setContainerSize((prev) => {
+      if (prev && isDeepEqual(prev, measuredSize)) {
+        return prev;
+      }
+
+      return measuredSize;
+    });
+  }, [cardSizes, top]);
+
+  useEffect(() => {
+    setCardSizes((prev) => {
+      const next: Record<string, Size> = {};
+      let changed = false;
+
+      for (const item of items) {
+        const size = prev[item.key];
+        if (size) {
+          next[item.key] = size;
+        } else {
+          changed = true;
+        }
+      }
+
+      if (Object.keys(prev).length !== Object.keys(next).length) {
+        changed = true;
+      }
+
+      return changed ? next : prev;
+    });
+  }, [items]);
+
+  const animationStyles =
+    useMemo((): AnimatePresenceProps["animationStyles"] => {
+      return {
+        entering: {
+          opacity: 0,
+          transform:
+            direction === "forward" ? `translateX(20px)` : `translateX(-20px)`,
+          transition: `opacity 200ms ease, transform 200ms ease`,
+        },
+        entered: {
+          opacity: 1,
+          transform: "translateX(0px)",
+          transition: `opacity 200ms ease, transform 200ms ease`,
+        },
+        exiting: {
+          opacity: 0,
+          transform:
+            direction === "forward" ? `translateX(-20px)` : `translateX(20px)`,
+          transition: `opacity 200ms ease, transform 200ms ease`,
+        },
+      };
+    }, [direction]);
+
+  const shouldAnimateSize = containerSize !== undefined;
+
+  const contentStyle = useMemo(() => {
+    if (!containerSize) return undefined;
+
+    const style: React.CSSProperties = {
+      // width: containerSize.width,
+      height: containerSize.height,
+    };
+
+    if (shouldAnimateSize) {
+      style.transition = `height 200ms ease, width 200ms ease`;
+    } else {
+      style.transition = "none";
+    }
+
+    return style;
+  }, [containerSize, shouldAnimateSize]);
+
+  const [animationStates, setAnimationStates] = useState<
+    Record<string, AnimatePresenceChildState>
+  >({});
+
+  const [renderContentCache, setRenderContentCache] =
+    useState<StackRenderContextValue>(() =>
+      Object.fromEntries(items.map((item) => [item.key, item.renderContent]))
+    );
+
+  useEffect(() => {
+    setRenderContentCache((prev) => {
+      let changed = false;
+      const next: StackRenderContextValue = { ...prev };
+
+      for (const item of items) {
+        const state = animationStates[item.key];
+        const isFrozen = state && state !== "entered";
+        const existing = next[item.key];
+
+        if (
+          existing === undefined ||
+          (!isFrozen && existing !== item.renderContent)
+        ) {
+          next[item.key] = item.renderContent;
+          if (existing !== item.renderContent) {
+            changed = true;
+          }
+        }
+      }
+
+      return changed ? next : prev;
+    });
+  }, [animationStates, items]);
+
+  const handleChildStateChange = useCallback(
+    (key: string, state: AnimatePresenceChildState) => {
+      if (!key) return;
+
+      setAnimationStates((prev) => {
+        if (state === "exited") {
+          if (!(key in prev)) return prev;
+          const { [key]: _removed, ...rest } = prev;
+          return rest;
+        }
+
+        if (prev[key] === state) return prev;
+        return { ...prev, [key]: state };
+      });
+
+      if (state === "exited") {
+        setRenderContentCache((prev) => {
+          if (!(key in prev)) return prev;
+          const next = { ...prev } as StackRenderContextValue;
+          delete next[key];
+          return next;
+        });
+      }
+    },
+    []
+  );
+
+  if (!top) return null;
+
+  const canGoBack = items.length > 1;
+  const showBackButton = (top.showBackButton ?? true) && canGoBack;
+
+  const headerRenderer = top.renderHeader ?? renderHeader;
+
+  const renderHeaderContent = () => {
+    const headerProps: StackNavigatorHeaderProps = {
+      onBack,
+      showBackButton,
+      showDivider,
+      right: top.right,
+      title: top.title,
+    };
+
+    if (headerRenderer !== undefined) {
+      if (typeof headerRenderer === "function") {
+        return headerRenderer(headerProps);
+      }
+
+      return headerRenderer;
+    }
+
+    return defaultRenderHeader(headerProps);
+  };
+
+  return (
+    <div
+      className={cx("n-flex n-flex-col", className)}
+      style={style}
+      onClick={(e) => {
+        e.stopPropagation();
+        // e.preventDefault();
+      }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        // e.preventDefault();
+      }}
+      onPointerDown={(e) => {
+        e.stopPropagation();
+        // e.preventDefault();
+      }}
+    >
+      {showHeader && renderHeaderContent()}
+      <div
+        className={cx("n-relative n-overflow-hidden", contentClassName)}
+        style={contentStyle}
+      >
+        {/* Cache renderContent so we can keep showing the last frame while cards animate */}
+        <StackRenderContext.Provider value={renderContentCache}>
+          <AnimatePresence
+            duration={200}
+            animationStyles={animationStyles}
+            skipInitialAnimation
+            mode="wait"
+            onChildStateChange={handleChildStateChange}
+          >
+            <StackNavigatorCard
+              key={top.key}
+              item={top}
+              onSizeChange={handleSizeChange}
+              style={cardStyle}
+              className={cardClassName}
+            />
+          </AnimatePresence>
+        </StackRenderContext.Provider>
+      </div>
+    </div>
+  );
+}
+
+type StackNavigatorCardProps = {
+  item: StackItem;
+  onSizeChange: (key: string, size: Size) => void;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+const StackNavigatorCard = ({
+  item,
+  onSizeChange,
+  style,
+  className,
+}: StackNavigatorCardProps) => {
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  const size = useSize(ref);
+
+  const renderContext = React.useContext(StackRenderContext);
+  const renderContent = renderContext?.[item.key] ?? item.renderContent;
+
+  React.useEffect(() => {
+    if (!size || size.width === 0 || size.height === 0) return;
+
+    onSizeChange(item.key, size);
+  }, [item.key, onSizeChange, size]);
+
+  return (
+    <div ref={ref} className={cx("n-flex n-flex-col", className)} style={style}>
+      {renderContent?.()}
+    </div>
+  );
+};
+
+function defaultRenderHeader({
+  showDivider,
+  showBackButton,
+  onBack,
+  right,
+  title,
+}: StackNavigatorHeaderProps) {
+  return (
+    <BaseToolbar
+      innerClassName="n-px-1"
+      showDivider={showDivider}
+      enableAbsoluteBreakpoint={false}
+      left={
+        showBackButton && (
+          <Button
+            className="-n-mx-2"
+            icon="ArrowLeftIcon"
+            onClick={onBack}
+            aria-label="Back"
+          />
+        )
+      }
+      right={right}
+    >
+      {typeof title === "string" || typeof title === "number" ? (
+        <Body>{title}</Body>
+      ) : (
+        title
+      )}
+    </BaseToolbar>
+  );
+}