@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/Section.tsx

@@ -1,57 +1,129 @@
+"use client";
+
 import {
   Button,
   IconButton,
+  IconName,
   IndentContext,
   INPUT_HEIGHT,
   InspectorPrimitives,
+  renderIcon,
   Spacer,
+  Text,
   textStyles,
 } from "@noya-app/noya-designsystem";
 import { clientStorage, usePersistentStateString } from "@noya-app/react-utils";
 import React, { CSSProperties, memo, useMemo } from "react";
 
-type TitleIconOptions = {
-  inlineBlockWrapper?: boolean;
+const titleIconStyle: CSSProperties = {
+  marginRight: "6px",
+  alignSelf: "flex-start",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  minHeight: "27px",
+  flex: "none",
 };
 
-export type SectionProps = {
-  children: React.ReactNode;
+type SectionHeaderProps = {
+  style?: CSSProperties;
+  className?: string;
   title?: React.ReactNode;
-  onClickTitle?: () => void;
   titleTextStyle?: "small" | "heading5" | "heading4" | "heading3";
+  titleClassName?: string;
+  titleIcon?: Exclude<React.ReactNode, string> | IconName;
+  onClickTitle?: () => void;
   right?: React.ReactNode;
+  headerSeparator?: "space" | "dot";
+};
+
+export function SectionHeader({
+  style,
+  className,
+  title,
+  titleIcon,
+  right,
+  headerSeparator = "space",
+  titleTextStyle = "heading4",
+  titleClassName,
+  onClickTitle,
+}: SectionHeaderProps) {
+  const headerStyle: CSSProperties = useMemo(
+    () => ({
+      minHeight: INPUT_HEIGHT,
+      ...style,
+    }),
+    [style]
+  );
+
+  const titleElement = title ? (
+    <InspectorPrimitives.Title
+      $textStyle={titleTextStyle}
+      className={titleClassName}
+    >
+      {title}
+    </InspectorPrimitives.Title>
+  ) : null;
+
+  return (
+    <InspectorPrimitives.SectionHeader
+      style={headerStyle}
+      className={className}
+    >
+      {titleIcon && (
+        <div style={titleIconStyle} className={textStyles[titleTextStyle]}>
+          {"\u200B"}
+          {renderIcon(titleIcon)}
+        </div>
+      )}
+      {titleElement && (
+        <>
+          {onClickTitle ? (
+            <Button variant="none" onClick={onClickTitle}>
+              {titleElement}
+            </Button>
+          ) : (
+            titleElement
+          )}
+        </>
+      )}
+      {headerSeparator === "space" && <Spacer.Horizontal />}
+      {headerSeparator === "dot" && (
+        <Text
+          variant={titleTextStyle}
+          color="textDisabled"
+          style={{ padding: "0 4px" }}
+        >
+          •
+        </Text>
+      )}
+      {right}
+    </InspectorPrimitives.SectionHeader>
+  );
+}
+
+export type SectionProps = {
+  children: React.ReactNode;
   hideRightWhenCollapsed?: boolean;
   extraPadding?: boolean;
   className?: string;
   style?: CSSProperties;
-  titleIcon?: React.ReactNode;
-  titleIconOptions?: TitleIconOptions;
-};
-
-const titleIconStyle: CSSProperties = {
-  marginRight: "8px",
-  alignSelf: "flex-start",
-  position: "relative",
-  top: "2px",
-};
-
-const titleIconWrapperStyle: CSSProperties = {
-  display: "inline-block",
-};
+  headerStyle?: CSSProperties;
+} & Omit<SectionHeaderProps, "style" | "className">;
 
 const SectionInternal = ({
   children,
   title,
   onClickTitle,
-  titleTextStyle = "heading4",
+  titleTextStyle,
   right,
   extraPadding,
   className,
   style: styleProp,
   titleIcon,
-  titleIconOptions = {
-    inlineBlockWrapper: true,
-  },
+  headerSeparator,
+  titleClassName,
+  headerStyle: headerStyleProp,
 }: SectionProps) => {
   const style: CSSProperties = useMemo(
     () => ({
@@ -80,46 +152,26 @@ const SectionInternal = ({
   const headerStyle: CSSProperties = useMemo(
     () => ({
       marginBottom: hasChildren ? "4px" : undefined,
-      minHeight: INPUT_HEIGHT,
+      ...headerStyleProp,
     }),
-    [hasChildren]
+    [hasChildren, headerStyleProp]
   );
 
   return (
     <div style={style} className={className}>
       {(title || titleIcon || right) && (
-        <InspectorPrimitives.SectionHeader style={headerStyle}>
-          {titleIcon && (
-            <div style={titleIconStyle} className={textStyles[titleTextStyle]}>
-              {titleIconOptions.inlineBlockWrapper ? (
-                <div style={titleIconWrapperStyle}>{titleIcon}</div>
-              ) : (
-                titleIcon
-              )}
-            </div>
-          )}
-          {title && (
-            <>
-              {onClickTitle ? (
-                <Button variant="none" onClick={onClickTitle}>
-                  <InspectorPrimitives.Title $textStyle={titleTextStyle}>
-                    {title}
-                  </InspectorPrimitives.Title>
-                </Button>
-              ) : (
-                <InspectorPrimitives.Title $textStyle={titleTextStyle}>
-                  {title}
-                </InspectorPrimitives.Title>
-              )}
-            </>
-          )}
-          <Spacer.Horizontal />
-          {right}
-        </InspectorPrimitives.SectionHeader>
+        <SectionHeader
+          style={headerStyle}
+          title={title}
+          titleIcon={titleIcon}
+          titleTextStyle={titleTextStyle}
+          titleClassName={titleClassName}
+          onClickTitle={onClickTitle}
+          right={right}
+          headerSeparator={headerSeparator}
+        />
       )}
-      <IndentContext.Provider value={{ indentLevel: 1 }}>
-        {children}
-      </IndentContext.Provider>
+      <IndentContext.Provider value={0}>{children}</IndentContext.Provider>
     </div>
   );
 };
@@ -146,7 +198,7 @@ const ExpandableSection = ({
       {...props}
       right={!props.hideRightWhenCollapsed || expanded ? props.right : null}
       title={
-        <div className="flex gap-1 items-center">
+        <div className="n-flex n-gap-1 n-items-center">
           {props.title}
           <IconButton
             iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}

package/src/components/SegmentedControl.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { memoGeneric } from "@noya-app/react-utils";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import React, {
   createContext,
   forwardRef,
@@ -15,7 +17,7 @@ import { SelectableMenuItem } from "./internal/Menu";
 import { Tooltip } from "./Tooltip";
 
 type SegmentedControlColorScheme = "primary" | "secondary";
-type SegmentedControlVariant = "default" | "tabs";
+type SegmentedControlVariant = "default" | "tabs" | "buttons";
 
 type SegmentedControlContextValue = {
   /** @default primary */
@@ -73,37 +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 text-segmented-control-item focus:outline-none transition-colors",
-        variant === "tabs" ? "font-semibold" : "font-normal",
+        "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"
+          ? "n-text-button-text"
+          : "n-text-segmented-control-item",
+        // font weight
+        variant === "tabs"
+          ? "n-font-semibold"
+          : variant === "buttons"
+            ? "n-font-medium"
+            : "n-font-normal",
+        // focus ring
         variant === "tabs"
           ? ""
-          : colorScheme === "secondary"
-            ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
-            : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
+          : variant === "buttons"
+            ? "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: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"
-          : colorScheme === "secondary"
-            ? "aria-checked:bg-secondary aria-checked: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",
-        variant === "default"
-          ? "px-1 rounded aria-checked:shadow-segment"
-          : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+          ? "aria-checked: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)
         variant === "default" &&
-          "border-r border-divider last:border-r-0 aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent",
+          "aria-checked:n-border-r-transparent [&:has(+[aria-checked=true])]:n-border-r-transparent aria-checked:n-shadow-segment",
+        // hover
+        variant === "buttons" && "hover:n-bg-button-background-hover",
+        // spacing and borders
+        variant === "default"
+          ? "n-px-1 n-rounded n-border-r n-border-divider last:n-border-r-0"
+          : variant === "buttons"
+            ? "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 && "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)}
@@ -151,10 +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]",
+            "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

@@ -1,10 +1,12 @@
+"use client";
+
 import {
   ChevronDownIcon,
   ChevronUpIcon,
   DropdownChevronIcon,
 } from "@noya-app/noya-icons";
 import { memoGeneric } from "@noya-app/react-utils";
-import * as Select from "@radix-ui/react-select";
+import { Select } from "radix-ui";
 import { type SelectProps } from "@radix-ui/react-select";
 import React, {
   CSSProperties,
@@ -52,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();
 
@@ -100,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>
@@ -179,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]
@@ -229,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

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   cssVarNames,
   cx,
@@ -32,7 +34,7 @@ type PopperPrimitiveContentProps = ComponentProps<
 
 type SelectionToolbarContainerProps = Pick<
   PopperPrimitiveContentProps,
-  "side" | "sideOffset" | "align"
+  "side" | "sideOffset" | "align" | "avoidCollisions"
 > & {
   rect: Rect;
   children: React.ReactNode;
@@ -50,6 +52,7 @@ export const SelectionToolbarContainer = memo(
     side = "top",
     sideOffset = 10,
     align = "center",
+    avoidCollisions = true,
     containerClassName,
     containerStyle,
     transitionDuration = 0.2,
@@ -72,11 +75,11 @@ export const SelectionToolbarContainer = memo(
         side={side}
         sideOffset={sideOffset}
         align={align}
-        avoidCollisions
+        avoidCollisions={avoidCollisions}
         collisionPadding={10}
         contentEditable={false}
         style={{
-          zIndex: 1000,
+          zIndex: 10,
           opacity: size ? 1 : 0,
           transition: `opacity ${transitionDuration}s ease-in-out`,
           [cssVarNames.colors.inputBackground]: "transparent",
@@ -86,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

@@ -1,4 +1,6 @@
-import * as RadixSlider from "@radix-ui/react-slider";
+"use client";
+
+import { Slider as RadixSlider } from "radix-ui";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
@@ -68,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}
@@ -76,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)`,
@@ -95,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
             ? {