@noya-app/noya-designsystem 0.1.40 → 0.1.42

package/src/components/SelectMenu.tsx

@@ -6,7 +6,12 @@ import {
 import { memoGeneric } from "@noya-app/react-utils";
 import * as Select from "@radix-ui/react-select";
 import { type SelectProps } from "@radix-ui/react-select";
-import React, { CSSProperties, FocusEventHandler, useMemo } from "react";
+import React, {
+  CSSProperties,
+  FocusEventHandler,
+  useMemo,
+  useState,
+} from "react";
 import { cx } from "../utils/classNames";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
@@ -26,14 +31,15 @@ type Props<T extends string> = {
   label?: React.ReactNode;
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
-} & Pick<SelectProps, "open">;
+} & Pick<SelectProps, "open" | "onOpenChange">;
 
 const readOnlyStyle: CSSProperties = {
   justifyContent: "flex-start",
   textAlign: "left",
 };
 
-const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center absolute top-0 bottom-0 right-[1.3rem] z-label`;
+export const labelTextStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%]`;
+const labelStyles = `pointer-events-none flex items-center absolute top-0 bottom-0 right-[1.3rem] z-label`;
 
 const scrollButtonStyles = `
   flex 
@@ -61,12 +67,21 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   open,
   onFocus,
   onBlur,
+  onOpenChange,
 }: Props<T>) {
   const selectedItem = menuItems.find(
     (item): item is RegularMenuItem<T> =>
       typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
+  const [internalOpen, setInternalOpen] = useState(open);
+
+  const handleOpenChange = (open: boolean) => {
+    if (onOpenChange) {
+      onOpenChange(open);
+    }
+    setInternalOpen(open);
+  };
 
   const readOnlyButton = useMemo(
     () => (
@@ -95,7 +110,11 @@ export const SelectMenu = memoGeneric(function SelectMenu<
         <Button
           id={id}
           style={style}
-          className={`${className ?? "w-full"} flex-1 focus:z-interactable relative`}
+          className={cx(
+            className ?? "w-full",
+            "flex-1 focus:z-interactable relative",
+            internalOpen && "ring-2 ring-primary"
+          )}
           disabled={disabled}
         >
           {icon && (
@@ -108,15 +127,31 @@ export const SelectMenu = memoGeneric(function SelectMenu<
             <Select.Value placeholder={placeholder} />
           </span>
           {label && (
-            <label htmlFor={id} className={labelStyles}>
+            <label htmlFor={id} className={cx(labelStyles, labelTextStyles)}>
               {label}
             </label>
           )}
-          <DropdownChevronIcon />
+          <DropdownChevronIcon
+            className={cx(
+              "transition-transform duration-100",
+              internalOpen ? "rotate-180" : "rotate-0"
+            )}
+          />
         </Button>
       </Select.SelectTrigger>
     ),
-    [onFocus, onBlur, id, style, className, disabled, icon, placeholder, label]
+    [
+      onFocus,
+      onBlur,
+      id,
+      style,
+      className,
+      disabled,
+      icon,
+      placeholder,
+      label,
+      internalOpen,
+    ]
   );
 
   if (readOnly) {
@@ -133,12 +168,28 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   }
 
   return (
-    <Select.Root value={value} onValueChange={onSelect} open={open}>
+    <Select.Root
+      value={value}
+      onValueChange={onSelect}
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
       {trigger}
       <Select.Portal>
-        <Select.Content className={styles.contentStyle}>
+        <Select.Content
+          className={styles.contentStyle}
+          position="popper"
+          sideOffset={6}
+          collisionPadding={8}
+          align="end"
+          style={{
+            width: "var(--radix-select-trigger-width)",
+          }}
+        >
           <Select.ScrollUpButton className={scrollButtonStyles}>
-            <ChevronUpIcon />
+            <ChevronUpIcon
+              className={cx("transition-transform duration-100")}
+            />
           </Select.ScrollUpButton>
           <Select.Viewport>
             {menuItems.map((menuItem) => {

package/src/components/Slider.tsx

@@ -1,5 +1,5 @@
 import * as RadixSlider from "@radix-ui/react-slider";
-import React, { FocusEventHandler, useCallback, useMemo } from "react";
+import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
 import { cx } from "../utils/classNames";
 
 type ColorScheme = "primary" | "secondary";
@@ -12,15 +12,23 @@ interface Props {
   onValueChange: (value: number) => void;
   min: number;
   max: number;
+  step?: number;
   colorScheme?: ColorScheme;
   label?: React.ReactNode;
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
+  readOnly?: boolean;
 }
 
 const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center z-label`;
 
-export const Slider = function Slider({
+const THUMB_WIDTH = 8; // Width of the thumb in pixels
+
+const thumbStyle = {
+  width: THUMB_WIDTH,
+};
+
+export const Slider = memo(function Slider({
   id,
   style,
   className,
@@ -28,21 +36,18 @@ export const Slider = function Slider({
   onValueChange,
   min,
   max,
+  step,
   colorScheme,
   label,
   onFocus,
   onBlur,
+  readOnly = false,
 }: Props) {
   const arrayValue = useMemo(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
 
-  const percentage = useMemo(() => {
-    const percent = ((arrayValue[0] - min) / (max - min)) * 100;
-    return `${percent}%`;
-  }, [arrayValue, min, max]);
-
   const handleValueChange = useCallback(
     (arrayValue: number[]) => {
       onValueChange(arrayValue[0]);
@@ -50,22 +55,50 @@ export const Slider = function Slider({
     [onValueChange]
   );
 
+  const percentage = useMemo(() => {
+    // Calculate the raw percentage (for label)
+    const rawPercent = (arrayValue[0] - min) / (max - min);
+    // Adjust the percentage to account for thumb width (for fill)
+    const adjustedPercent =
+      rawPercent * (100 - (THUMB_WIDTH * 100) / 300) + (THUMB_WIDTH * 50) / 300;
+    return {
+      raw: rawPercent * 100,
+      adjusted: adjustedPercent,
+    };
+  }, [arrayValue, min, max]);
+
+  const trackFillStyle = useMemo(
+    () => ({
+      clipPath: `inset(0 ${100 - percentage.adjusted}% 0 0)`,
+    }),
+    [percentage.adjusted]
+  );
+
+  const labelStyle = useMemo(
+    () => ({
+      clipPath: `inset(0 ${100 - percentage.raw}% 0 0)`,
+    }),
+    [percentage.raw]
+  );
+
   return (
     <RadixSlider.Root
       min={min}
       max={max}
+      step={step}
       id={id}
       value={arrayValue}
       onValueChange={handleValueChange}
       className={cx(
-        "flex relative items-center select-none touch-none h-[27px]",
+        "flex relative items-center select-none touch-none h-[27px] rounded overflow-hidden w-full",
         className
       )}
       style={style}
       onFocus={onFocus}
       onBlur={onBlur}
+      disabled={readOnly}
     >
-      <RadixSlider.Track className="bg-divider relative flex-grow h-full rounded overflow-hidden">
+      <RadixSlider.Track className="relative flex-grow h-full rounded overflow-hidden bg-input-background">
         {label && (
           <label
             htmlFor={id}
@@ -74,9 +107,10 @@ export const Slider = function Slider({
             {label}
           </label>
         )}
-        <RadixSlider.Range
+        <div
+          style={trackFillStyle}
           className={cx(
-            "absolute h-full rounded",
+            "absolute inset-0 w-full h-full rounded overflow-hidden",
             colorScheme === undefined && "bg-slider-border",
             colorScheme === "primary" && "bg-primary",
             colorScheme === "secondary" && "bg-secondary"
@@ -84,8 +118,9 @@ export const Slider = function Slider({
         />
       </RadixSlider.Track>
       <RadixSlider.Thumb
+        style={thumbStyle}
         className={cx(
-          "block w-2 h-[27px] rounded border border-solid bg-slider-background focus:outline-none cursor-ew-resize",
+          "block h-[27px] rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
           colorScheme === undefined && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"
@@ -98,11 +133,11 @@ export const Slider = function Slider({
             labelStyles,
             "absolute top-0 bottom-0 left-2 right-2 text-white overflow-hidden flex justify-end"
           )}
-          style={{ clipPath: `inset(0 ${100 - parseFloat(percentage)}% 0 0)` }}
+          style={labelStyle}
         >
           {label}
         </label>
       )}
     </RadixSlider.Root>
   );
-};
+});

package/src/components/Sortable.tsx

@@ -16,17 +16,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { memoGeneric } from "@noya-app/react-utils";
-import React, {
-  createContext,
-  ReactNode,
-  Ref,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import * as React from "react";
 import { createPortal } from "react-dom";
 
 export type RelativeDropPosition = "above" | "below" | "inside";
@@ -60,7 +50,7 @@ const defaultAcceptsDrop: DropValidator = (
   return true;
 };
 
-const SortableItemContext = createContext<{
+const SortableItemContext = React.createContext<{
   keys: string[];
   position: Translate;
   acceptsDrop: DropValidator;
@@ -119,7 +109,7 @@ interface ItemProps<T> {
   disabled?: boolean;
   children: (
     props: {
-      ref: Ref<T>;
+      ref: React.Ref<T>;
       relativeDropPosition?: RelativeDropPosition;
       [key: string]: any;
     } & UseSortableReturnType["attributes"]
@@ -132,7 +122,7 @@ function SortableItem<T extends HTMLElement>({
   children,
 }: ItemProps<T>) {
   const { keys, position, acceptsDrop, setActivatorEvent, axis } =
-    useContext(SortableItemContext);
+    React.useContext(SortableItemContext);
   const sortable = useSortable({ id, disabled });
 
   const {
@@ -156,7 +146,7 @@ function SortableItem<T extends HTMLElement>({
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
 
-  const ref = useCallback((node: T) => setNodeRef(node), [setNodeRef]);
+  const ref = React.useCallback((node: T) => setNodeRef(node), [setNodeRef]);
 
   return children({
     ref,
@@ -183,8 +173,8 @@ function SortableItem<T extends HTMLElement>({
 
 interface RootProps {
   keys: string[];
-  children: ReactNode;
-  renderOverlay?: (index: number) => ReactNode;
+  children: React.ReactNode;
+  renderOverlay?: (index: number) => React.ReactNode;
   onMoveItem?: (
     sourceIndex: number,
     destinationIndex: number,
@@ -210,27 +200,27 @@ function SortableRoot({
     })
   );
 
-  const [activeIndex, setActiveIndex] = useState<number | undefined>();
-  const activatorEvent = useRef<PointerEvent | null>(null);
+  const [activeIndex, setActiveIndex] = React.useState<number | undefined>();
+  const activatorEvent = React.useRef<PointerEvent | null>(null);
 
-  const setActivatorEvent = useCallback((event: PointerEvent) => {
+  const setActivatorEvent = React.useCallback((event: PointerEvent) => {
     activatorEvent.current = event;
   }, []);
 
-  const [position, setPosition] = useState<Translate>({ x: 0, y: 0 });
+  const [position, setPosition] = React.useState<Translate>({ x: 0, y: 0 });
 
-  const handleDragStart = useCallback(
+  const handleDragStart = React.useCallback(
     (event: DragStartEvent) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
 
-  const handleDragMove = useCallback((event: DragMoveEvent) => {
+  const handleDragMove = React.useCallback((event: DragMoveEvent) => {
     setPosition({ ...event.delta });
   }, []);
 
-  const handleDragEnd = useCallback(
+  const handleDragEnd = React.useCallback(
     (event: DragEndEvent) => {
       const { active, over } = event;
 
@@ -263,15 +253,15 @@ function SortableRoot({
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
 
-  const [mounted, setMounted] = useState(false);
+  const [mounted, setMounted] = React.useState(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setMounted(true);
   }, []);
 
   return (
     <SortableItemContext.Provider
-      value={useMemo(
+      value={React.useMemo(
         () => ({
           keys,
           acceptsDrop,

package/src/components/Spacer.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/jsx-pascal-case */
-import React, { ForwardedRef, forwardRef } from "react";
+import type { ForwardedRef } from "react";
+import * as React from "react";
 
 interface Props {
   size?: number | string;
@@ -10,12 +11,21 @@ interface Props {
  * Vertical
  * ------------------------------------------------------------------------- */
 
-const SpacerVertical = forwardRef<HTMLSpanElement, Props>(
+const SpacerVertical = React.forwardRef<HTMLSpanElement, Props>(
   ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
     return (
-      <span className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`} style={size ? {
-        minHeight: `${size}px`,
-      } : undefined} {...props} ref={ref} />
+      <span
+        className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`}
+        style={
+          size
+            ? {
+                minHeight: `${size}px`,
+              }
+            : undefined
+        }
+        {...props}
+        ref={ref}
+      />
     );
   }
 );
@@ -24,12 +34,21 @@ const SpacerVertical = forwardRef<HTMLSpanElement, Props>(
  * Horizontal
  * ------------------------------------------------------------------------- */
 
-const SpacerHorizontal = forwardRef<HTMLSpanElement, Props>(
+const SpacerHorizontal = React.forwardRef<HTMLSpanElement, Props>(
   ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
     return (
-      <span className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`} style={size ? {
-        minWidth: `${size}px`,
-      } : undefined} {...props} ref={ref} />
+      <span
+        className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`}
+        style={
+          size
+            ? {
+                minWidth: `${size}px`,
+              }
+            : undefined
+        }
+        {...props}
+        ref={ref}
+      />
     );
   }
 );

package/src/components/Switch.tsx

@@ -1,8 +1,8 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React, { CSSProperties, FocusEventHandler } from "react";
+import * as React from "react";
 import { cx } from "../utils/classNames";
 
-type SwitchColorScheme = "normal" | "primary" | "secondary";
+type SwitchColorScheme = "primary" | "secondary";
 
 interface Props {
   id?: string;
@@ -11,17 +11,17 @@ interface Props {
   /** @default normal */
   colorScheme?: SwitchColorScheme;
   disabled?: boolean;
-  onFocus?: FocusEventHandler;
-  onBlur?: FocusEventHandler;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
   className?: string;
-  style?: CSSProperties;
+  style?: React.CSSProperties;
 }
 
 export const Switch = function Switch({
   id,
   value,
   onChange,
-  colorScheme = "normal",
+  colorScheme = "primary",
   disabled,
   onFocus,
   onBlur,
@@ -38,7 +38,7 @@ export const Switch = function Switch({
         onChange(newValue);
       }}
       className={cx(
-        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary",
+        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
         colorScheme === "secondary" && "data-[state=checked]:bg-secondary",
         "focus:z-interactable",
         className
@@ -46,7 +46,7 @@ export const Switch = function Switch({
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" />
+      <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" />
     </SwitchPrimitive.Root>
   );
 };

package/src/components/TextArea.tsx

@@ -21,19 +21,26 @@ export const AutoResizingTextArea = memo(
       value,
       onChangeText,
       className,
+      end,
+      endClassName,
+      onChange,
       ...rest
     }: {
       onChangeText: (value: string) => void;
       value?: string;
+      end?: React.ReactNode;
+      endClassName?: string;
     } & React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
   ) {
     const ref = useAutoResize(value || rest.placeholder || "");
 
     const handleChange = useCallback(
-      (event: React.ChangeEvent<HTMLTextAreaElement>) =>
-        onChangeText(event.target.value),
-      [onChangeText]
+      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        onChangeText(event.target.value);
+        onChange?.(event);
+      },
+      [onChangeText, onChange]
     );
 
     const handleRef = useCallback(
@@ -45,16 +52,19 @@ export const AutoResizingTextArea = memo(
     );
 
     return (
-      <textarea
-        className={cx(
-          `font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable `,
-          className
-        )}
-        ref={handleRef}
-        {...rest}
-        onChange={handleChange}
-        value={value}
-      />
+      <div className="relative w-full h-full">
+        <textarea
+          className={cx(
+            `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-24 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
+            className
+          )}
+          ref={handleRef}
+          {...rest}
+          onChange={handleChange}
+          value={value}
+        />
+        <div className={cx("absolute right-1 top-4", endClassName)}>{end}</div>
+      </div>
     );
   })
 );