@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/Popover.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useControlledOrUncontrolled } from "@noya-app/react-utils";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import React, {
   ComponentProps,
   useCallback,
@@ -44,13 +46,15 @@ interface Props
   onClickClose?: () => void;
   showArrow?: boolean;
   className?: string;
+  style?: React.CSSProperties;
   portalContainer?: HTMLElement | null;
 }
 
 export const popoverStyle = {
-  base: "rounded font-[14px] bg-popover-background shadow-popover max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
-  large: "w-[680px]",
-  normal: "w-[240px]",
+  base:
+    "n-rounded n-font-[14px] n-bg-popover-background n-shadow-popover n-max-h-[600px] n-overflow-y-auto n-text-text-muted n-z-[1000]",
+  large: "n-w-[680px]",
+  normal: "n-w-[240px]",
 };
 
 export function Popover({
@@ -71,6 +75,7 @@ export function Popover({
   onClickClose,
   className,
   portalContainer,
+  style,
 }: Props) {
   const defaultId = useId();
   const portalScopeId = usePortalScopeId();
@@ -101,6 +106,7 @@ export function Popover({
         <PopoverPrimitive.Content
           {...portalScopeProps(portalScopeId)}
           ref={contentRef}
+          style={style}
           className={cx(
             popoverStyle.base,
             variant === "large" && popoverStyle.large,
@@ -138,11 +144,11 @@ export function Popover({
         >
           {typeof children === "function" ? children({ close }) : children}
           {showArrow && (
-            <PopoverPrimitive.Arrow className="fill-popover-background" />
+            <PopoverPrimitive.Arrow className="n-fill-popover-background" />
           )}
           {closable && (
             <PopoverPrimitive.Close
-              className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center absolute top-[5px] right-[5px]"
+              className="n-rounded-full n-h-[25px] n-w-[25px] n-inline-flex n-items-center n-justify-center n-absolute n-top-[5px] n-right-[5px]"
               style={closeStyles}
             >
               <IconButton iconName="Cross2Icon" onClick={onClickClose} />

package/src/components/Progress.tsx

@@ -1,35 +1,58 @@
+"use client";
+
 import { clamp } from "@noya-app/noya-utils";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { Progress as ProgressPrimitive } from "radix-ui";
 import * as React from "react";
 import { cx } from "../utils/classNames";
 
-type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
+type ColorScheme = "normal" | "warning" | "primary" | "secondary";
 
 export function Progress({
   value,
-  variant = "normal",
+  colorScheme = "normal",
+  color,
   className,
+  style: styleProp,
 }: {
+  /** A value between 0 and 100. */
   value: number;
-  variant?: ProgressVariant;
+
+  colorScheme?: ColorScheme;
+  color?: string;
   className?: string;
+  style?: React.CSSProperties;
 }) {
   const clampedValue = clamp(value, 0, 100);
   const transformStyles = React.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`,
+      backgroundColor: color,
     }),
-    [clampedValue]
+    [color, clampedValue]
+  );
+
+  const style = React.useMemo(
+    () => ({ transform: "translateZ(0)", ...styleProp }),
+    [styleProp]
   );
 
   return (
     <ProgressPrimitive.Root
-      className={cx(`relative hidden bg-input-background h-[5px] `, className)}
-      style={{ transform: "translateZ(0)" }}
+      className={cx(
+        `n-relative n-overflow-hidden n-bg-input-background n-h-[5px]`,
+        className
+      )}
+      style={style}
       value={clampedValue}
     >
       <ProgressPrimitive.Indicator
-        className={`${variant === "primary" ? "bg-primary" : variant === "secondary" ? "bg-secondary" : variant === "warning" ? "bg-warning" : "bg-text"} transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1) w-full h-full`}
+        className={cx(
+          "n-transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1)] n-w-full n-h-full",
+          colorScheme === "primary" && "n-bg-primary",
+          colorScheme === "secondary" && "n-bg-secondary",
+          colorScheme === "warning" && "n-bg-warning",
+          colorScheme === "normal" && "n-bg-text"
+        )}
         style={transformStyles}
       />
     </ProgressPrimitive.Root>

package/src/components/ResizableContainer.tsx

@@ -0,0 +1,187 @@
+"use client";
+import { createClickCounter } from "@noya-app/react-utils";
+import React, { ReactNode, useCallback, useRef, useState } from "react";
+
+interface ResizableContainerProps {
+  children: ReactNode | ((children: { width?: number }) => ReactNode);
+  minWidth: number;
+  maxWidth?: number;
+  style?: React.CSSProperties;
+  innerStyle?: React.CSSProperties;
+  handleContainerStyle?: React.CSSProperties;
+  handleStyle?: React.CSSProperties;
+  className?: string;
+  onChangeWidth?: (width: number) => void;
+  shouldResetWidthOnGestureEnd?: boolean;
+}
+
+export const ResizableContainer: React.FC<ResizableContainerProps> = ({
+  children,
+  minWidth,
+  maxWidth,
+  style,
+  innerStyle,
+  handleContainerStyle,
+  handleStyle,
+  className,
+  onChangeWidth,
+  shouldResetWidthOnGestureEnd: shouldResetWidth,
+}) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const resizeableRef = useRef<HTMLDivElement | null>(null);
+  const handleRef = useRef<HTMLDivElement | null>(null);
+  const clickCounter = useRef(createClickCounter({ delay: 250 }));
+
+  const [width, setWidth] = useState<number>();
+  const [drag, setDrag] = useState<{
+    startX: number;
+    initialWidth: number;
+    minWidth: number;
+    maxWidth: number;
+  }>();
+
+  const handlePointerDown = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const containerWidth =
+        containerRef.current?.getBoundingClientRect().width;
+      const resizeableWidth =
+        resizeableRef.current?.getBoundingClientRect().width;
+
+      if (containerWidth === undefined) return;
+      if (resizeableWidth === undefined) return;
+
+      // start pointer capture
+      handleRef.current?.setPointerCapture(event.pointerId);
+
+      setDrag({
+        startX: event.clientX,
+        initialWidth: resizeableWidth,
+        minWidth: minWidth,
+        maxWidth: maxWidth ?? containerWidth,
+      });
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [maxWidth, minWidth]
+  );
+
+  const handlePointerMove = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (!drag) return;
+
+      const delta = event.clientX - drag.startX;
+
+      let newWidth = clamp(
+        drag.initialWidth + delta,
+        drag.minWidth,
+        drag.maxWidth
+      );
+
+      setWidth(newWidth);
+      onChangeWidth?.(newWidth);
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [drag, onChangeWidth]
+  );
+
+  const handlePointerUp = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      setDrag(undefined);
+
+      // Release pointer
+      handleRef.current?.releasePointerCapture(event.pointerId);
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const clickCount = clickCounter.current.handleClick({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      if (clickCount >= 2 || shouldResetWidth) {
+        setWidth(undefined);
+      }
+    },
+    [shouldResetWidth]
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      id={"resize"}
+      style={{ position: "relative", ...style }}
+      className={className}
+    >
+      <div
+        ref={resizeableRef}
+        style={{
+          position: "relative",
+          width: width !== undefined ? `${width}px` : "auto",
+          ...innerStyle,
+        }}
+      >
+        {typeof children === "function" ? children({ width }) : children}
+        <div
+          ref={handleRef}
+          style={{
+            position: "absolute",
+            right: "-1.25rem",
+            bottom: 0,
+            top: 0,
+            display: "flex",
+            width: "1rem",
+            cursor: "ew-resize",
+            touchAction: "none",
+            flexDirection: "column",
+            justifyContent: "center",
+            paddingLeft: "5px",
+            paddingRight: "5px",
+            opacity: 1,
+            ...handleContainerStyle,
+          }}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        >
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              height: "2.5rem",
+              width: "100%",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "9999px",
+              backgroundColor: "rgba(17, 24, 39, 0.5)",
+              ...handleStyle,
+            }}
+          ></div>
+        </div>
+        {/* Prevent iframe from capturing pointer events */}
+        {drag && (
+          <div
+            style={{
+              position: "fixed",
+              inset: 0,
+              zIndex: 50,
+              cursor: "ew-resize",
+            }}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            onPointerCancel={handlePointerUp}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}

package/src/components/RingProgress.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { clamp } from "@noya-app/noya-utils";
+import * as React from "react";
+import { cx } from "../utils/classNames";
+
+type ColorScheme = "normal" | "warning" | "primary" | "secondary";
+
+export function RingProgress({
+  value,
+  dividedBy = 100,
+  size = 24,
+  thickness = 3,
+  colorScheme = "normal",
+  color,
+  trackColor,
+  className,
+  style,
+  ariaLabel,
+}: {
+  /** Current value (numerator). */
+  value: number;
+  /** Total value representing 100%. Defaults to 100. */
+  dividedBy?: number;
+  /** Diameter in pixels of the ring (outer size). */
+  size?: number;
+  /** Stroke width of the ring in pixels. */
+  thickness?: number;
+  /** Ring color scheme, aligned with Progress component. */
+  colorScheme?: ColorScheme;
+  /** Optional custom color overrides. */
+  color?: string;
+  trackColor?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** Optional aria-label when no visible label is adjacent. */
+  ariaLabel?: string;
+}) {
+  const safeDivisor = dividedBy > 0 ? dividedBy : 1;
+  const clampedRaw = clamp(value, 0, safeDivisor);
+  const clampedPercent = (clampedRaw / safeDivisor) * 100;
+
+  // Geometry
+  const radius = React.useMemo(() => (size - thickness) / 2, [size, thickness]);
+  const circumference = React.useMemo(() => 2 * Math.PI * radius, [radius]);
+  const dashOffset = React.useMemo(
+    () => ((100 - clampedPercent) / 100) * circumference,
+    [circumference, clampedPercent]
+  );
+
+  // Colors: prefer explicit color props, fall back to colorScheme tokens (with safe fallbacks)
+  const trackStroke =
+    trackColor ?? "var(--n-input-background, rgba(0,0,0,0.08))";
+  const colorClass = React.useMemo(() => {
+    switch (colorScheme) {
+      case "primary":
+        return "n-stroke-primary";
+      case "secondary":
+        return "n-stroke-secondary";
+      case "warning":
+        return "n-stroke-warning";
+      case "normal":
+      default:
+        return "n-stroke-text";
+    }
+  }, [colorScheme]);
+
+  const computedStroke = React.useMemo(() => {
+    if (color) return color;
+    switch (colorScheme) {
+      case "primary":
+        return "var(--n-primary, currentColor)";
+      case "secondary":
+        return "var(--n-secondary, currentColor)";
+      case "warning":
+        return "var(--n-warning, currentColor)";
+      case "normal":
+      default:
+        return "var(--n-text, currentColor)";
+    }
+  }, [color, colorScheme]);
+
+  return (
+    <span
+      className={cx("n-inline-flex n-items-center n-justify-center", className)}
+      style={style}
+      role="progressbar"
+      aria-valuenow={clampedRaw}
+      aria-valuemin={0}
+      aria-valuemax={safeDivisor}
+      aria-label={ariaLabel}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        style={{ display: "block" }}
+      >
+        {/* Track */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke={trackStroke}
+          strokeWidth={thickness}
+        />
+        {/* Indicator */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          className={cx(
+            "n-transition-[stroke-dashoffset] n-duration-500 n-ease-[cubic-bezier(0.65,0,0.35,1)]",
+            !color && colorClass
+          )}
+          style={{ stroke: computedStroke }}
+          strokeWidth={thickness}
+          strokeLinecap="round"
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={dashOffset}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+      </svg>
+    </span>
+  );
+}

package/src/components/ScrollArea.tsx

@@ -1,4 +1,6 @@
-import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+"use client";
+
+import { ScrollArea as RadixScrollArea } from "radix-ui";
 import * as React from "react";
 
 interface Props {
@@ -12,10 +14,10 @@ export const ScrollArea = React.memo(function ScrollArea({ children }: Props) {
     React.useState<HTMLDivElement | null>(null);
 
   return (
-    <div className="flex-1 min-h-0">
+    <div className="n-flex-1 n-min-h-0">
       <RadixScrollArea.Root style={{ width: "100%", height: "100%" }}>
         <RadixScrollArea.Viewport
-          className="w-full h-full [&>div]:block"
+          className="n-w-full n-h-full [&>div]:n-block"
           ref={React.useCallback(
             (ref: HTMLDivElement | null) => setScrollElementRef(ref),
             []
@@ -29,9 +31,9 @@ export const ScrollArea = React.memo(function ScrollArea({ children }: Props) {
         </RadixScrollArea.Viewport>
         <RadixScrollArea.Scrollbar
           orientation="vertical"
-          className="scroll-component flex p-[3px] data-[orientation=vertical]:w-[10px]"
+          className="n-scroll-component n-flex n-p-[3px] data-[orientation=vertical]:n-w-[10px]"
         >
-          <RadixScrollArea.Thumb className="scroll-component flex-1 rounded-[10px] bg-scrollbar" />
+          <RadixScrollArea.Thumb className="n-scroll-component n-flex-1 n-rounded-[10px] n-bg-scrollbar" />
         </RadixScrollArea.Scrollbar>
       </RadixScrollArea.Root>
     </div>

package/src/components/ScrollableSidebar.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { ScrollArea } from "./ScrollArea";
+
+export function ScrollableSidebar({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="n-relative n-flex n-flex-col n-flex-1 n-max-h-full">
+      <ScrollArea>{children}</ScrollArea>
+    </div>
+  );
+}

package/src/components/SearchCompletionMenu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { getCurrentPlatform, handleKeyboardEvent } from "@noya-app/noya-keymap";
 import React, {
   forwardRef,
@@ -153,8 +155,8 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
   }));
 
   return (
-    <div {...elementSize} className="flex flex-col overflow-hidden">
-      <InputField.Root className="flex flex-0">
+    <div {...elementSize} className="n-flex n-flex-col n-overflow-hidden">
+      <InputField.Root className="n-flex n-flex-0">
         <InputField.Input
           ref={inputRef}
           value={search}
@@ -194,7 +196,7 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
       ) : (
         <div
           {...listSize}
-          className="flex flex-col p-20 items-center justify-center"
+          className="n-flex n-flex-col n-p-20 n-items-center n-justify-center"
         >
           <Small color="textDisabled">No results</Small>
         </div>