@noya-app/noya-designsystem 0.1.59 → 0.1.61

package/dist/index.mjs

@@ -220,6 +220,7 @@ import { useEffect as useEffect3, useRef as useRef4 } from "react";
 
 // ../noya-react-utils/src/hooks/useIsomorphicLayoutEffect.ts
 import * as React5 from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React5.useLayoutEffect : React5.useEffect;
 
 // ../noya-react-utils/src/hooks/useLateReference.ts
 import { useCallback as useCallback5, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
@@ -296,12 +297,12 @@ import { isShallowEqual } from "@noya-app/noya-utils";
 import { useRef as useRef7 } from "react";
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-import { useCallback as useCallback9, useLayoutEffect as useLayoutEffect3, useRef as useRef8 } from "react";
+import { useCallback as useCallback9, useRef as useRef8 } from "react";
 var noop2 = () => {
 };
 function useStableCallback(callback) {
   const callbackRef = useRef8(callback || noop2);
-  useLayoutEffect3(() => {
+  useIsomorphicLayoutEffect(() => {
     callbackRef.current = callback || noop2;
   }, [callback]);
   return useCallback9(
@@ -725,7 +726,7 @@ var Tooltip = React10.memo(function Tooltip2({
 
 // src/components/Button.tsx
 var variantStyles = {
-  normal: "bg-input-background text-text hover:bg-input-background-light active:bg-active-background min-w-[31px]",
+  normal: "bg-button-background text-button-text hover:bg-button-background-hover active:bg-button-background-active min-w-[31px]",
   primary: "bg-primary text-white hover:bg-primary-light active:bg-primary min-w-[31px]",
   secondary: "bg-secondary text-white hover:bg-secondary-light active:bg-secondary min-w-[31px]",
   secondaryBright: "bg-[#0ab557] text-white hover:opacity-80 active:opacity-90",
@@ -763,7 +764,7 @@ var Button = forwardRef4(function Button2({
     "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all",
     disabled ? "opacity-25" : "",
     !className?.includes("flex") ? "flex-none" : "",
-    active ? "bg-primary-pastel text-primary hover:bg-primary-pastel-light min-w-[31px]" : variantStyles[variant],
+    active ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover min-w-[31px]" : variantStyles[variant],
     sizeStyles[variant === "thin" ? "thin" : variant === "floating" && size2 !== "small" ? "floating" : variant === "none" ? "none" : size2]
   );
   const buttonClassName = useMemo4(() => {
@@ -1065,7 +1066,7 @@ import React16, {
   forwardRef as forwardRef7,
   useCallback as useCallback11,
   useEffect as useEffect10,
-  useLayoutEffect as useLayoutEffect4,
+  useLayoutEffect as useLayoutEffect3,
   useRef as useRef10,
   useState as useState11
 } from "react";
@@ -1189,7 +1190,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   const userDidEdit = useRef10(false);
   const isSubmitTriggeredByEscapeKey = useRef10(false);
   const [internalValue, setInternalValue] = useState11("");
-  useLayoutEffect4(() => {
+  useLayoutEffect3(() => {
     setInternalValue(value);
   }, [value]);
   const handleSubmit = useCallback11(() => {
@@ -3141,7 +3142,7 @@ import React34, {
   isValidElement as isValidElement2,
   useCallback as useCallback16,
   useEffect as useEffect14,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect4,
   useRef as useRef14,
   useState as useState17
 } from "react";
@@ -3181,7 +3182,7 @@ var PresenceChild = ({
     willChange: "opacity",
     backfaceVisibility: "hidden"
   };
-  useLayoutEffect5(() => {
+  useLayoutEffect4(() => {
     let rafId;
     if (isPresent && animationState !== "entered") {
       if (isInitialMount.current && skipInitialAnimation) {
@@ -3382,7 +3383,7 @@ var colorSchemeStyles = {
   secondary: "text-secondary"
 };
 var Checkbox = React37.memo(
-  React37.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
+  React37.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "primary", ...props }, ref) {
     const { fieldId: id } = useLabel({ fieldId: props.id });
     return /* @__PURE__ */ React37.createElement(
       "div",
@@ -3407,10 +3408,10 @@ var Checkbox = React37.memo(
             m-0
             rounded
             bg-input-background
-            
             border
             border-divider
             disabled:opacity-50
+            cursor-pointer
             disabled:cursor-not-allowed
             focus:ring-2
             focus:ring-primary
@@ -4202,6 +4203,10 @@ var getGridSize = (size2) => {
       minColumnWidth: "220px",
       gap: 30
     },
+    mediumLarge: {
+      minColumnWidth: "250px",
+      gap: 35
+    },
     large: {
       minColumnWidth: "280px",
       gap: 40
@@ -4439,7 +4444,7 @@ import React49, {
   useCallback as useCallback23,
   useContext as useContext11,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo21,
   useRef as useRef19
 } from "react";
@@ -5158,7 +5163,7 @@ function ListViewEditableRowTitle({
   onKeyDown
 }) {
   const inputRef = useRef19(null);
-  useLayoutEffect6(() => {
+  useLayoutEffect5(() => {
     const element = inputRef.current;
     if (!element || !autoFocus) return;
     element.focus();
@@ -5482,7 +5487,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
       listRef.current?.scrollToItem(index);
     }
   }));
-  useLayoutEffect6(() => {
+  useLayoutEffect5(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
     // When items change, we need to re-render the virtualized list,
@@ -6116,6 +6121,7 @@ var pyMap = {
   xs: "py-0.5",
   small: "py-0.5",
   medium: "py-1",
+  mediumLarge: "py-1.5",
   large: "py-2",
   xl: "py-3"
 };
@@ -6124,6 +6130,7 @@ var thumbnailSizeMap = {
   xs: "w-5 h-5",
   small: "w-5 h-5",
   medium: "w-8 h-8",
+  mediumLarge: "w-12 h-12",
   large: "w-16 h-16",
   xl: "w-24 h-24"
 };
@@ -6132,6 +6139,7 @@ var rowGapMap = {
   xs: "gap-2",
   small: "gap-2",
   medium: "gap-3",
+  mediumLarge: "gap-3",
   large: "gap-3",
   xl: "gap-4"
 };
@@ -6140,6 +6148,7 @@ var fontStyleMap = {
   xs: "font-medium text-list-small",
   small: "font-medium text-list-small",
   medium: "font-medium",
+  mediumLarge: "font-medium",
   large: "font-medium",
   xl: "font-medium text-heading4 text-text"
 };
@@ -7099,11 +7108,8 @@ var Divider = memo20(function Divider2({
     "div",
     {
       className: cx(
-        `
-        h-px min-h-px
-        ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
-        self-stretch
-      `,
+        `h-px min-h-px self-stretch`,
+        variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider",
         className
       ),
       style: {
@@ -7125,12 +7131,11 @@ var DividerVertical = memo20(function DividerVertical2({
   return /* @__PURE__ */ React57.createElement(
     "div",
     {
-      className: cx(`
-        w-px min-w-px
-        ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
-        self-stretch
-        ${className}
-      `),
+      className: cx(
+        `w-px min-w-px self-stretch`,
+        variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider",
+        className
+      ),
       style: {
         marginTop: `-${overflow}px`,
         marginBottom: `-${overflow}px`,
@@ -7954,14 +7959,14 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-import { useLayoutEffect as useLayoutEffect7, useMemo as useMemo26 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useMemo as useMemo26 } from "react";
 function useObjectURL(object) {
   const objectURL = useMemo26(() => {
     if (object instanceof Blob) return URL.createObjectURL(object);
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);
-  useLayoutEffect7(() => {
+  useLayoutEffect6(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -11197,6 +11202,7 @@ var iconSizeMap = {
   xs: 12,
   small: 12,
   medium: "max(15px, 20%)",
+  mediumLarge: "max(15px, 20%)",
   large: "max(15px, 20%)",
   xl: "max(15px, 20%)"
 };
@@ -11451,7 +11457,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
         "font-sans text-button relative flex-1 appearance-none text-segmented-control-item focus:outline-none transition-colors",
         variant === "tabs" ? "font-semibold" : "font-normal",
         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 === "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-background aria-checked:text-text",
+        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",
         variant === "default" && "border-r border-divider last:border-r-0 aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent",
@@ -11561,7 +11567,8 @@ var SelectionToolbarContainer = memo33(
           zIndex: 1e3,
           opacity: size2 ? 1 : 0,
           transition: "opacity 0.2s ease-in-out",
-          ["--n-input-background"]: "transparent"
+          [cssVarNames.colors.inputBackground]: "transparent",
+          [cssVarNames.colors.buttonBackground]: "transparent"
         }
       },
       /* @__PURE__ */ React80.createElement(
@@ -11762,7 +11769,6 @@ var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
-var insetEndStyles2 = getInsetEndStyles();
 var Slider = memo34(function Slider2({
   style: style2,
   className,
@@ -11781,37 +11787,16 @@ var Slider = memo34(function Slider2({
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const { label, fieldId: id } = useLabel({
-    label: props.label,
+  const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const labelPosition = useLabelPosition();
   const handleValueChange = useCallback31(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  const percentage = useMemo38(() => {
-    const rawPercent = (arrayValue[0] - min) / (max - min);
-    const adjustedPercent = rawPercent * (100 - THUMB_WIDTH * 100 / 300) + THUMB_WIDTH * 50 / 300;
-    return {
-      raw: rawPercent * 100,
-      adjusted: adjustedPercent
-    };
-  }, [arrayValue, min, max]);
-  const trackFillStyle = useMemo38(
-    () => ({
-      clipPath: `inset(0 ${100 - percentage.adjusted}% 0 0)`
-    }),
-    [percentage.adjusted]
-  );
-  const labelStyle = useMemo38(
-    () => ({
-      clipPath: `inset(0 ${100 - percentage.raw}% 0 0)`
-    }),
-    [percentage.raw]
-  );
+  const ratio = (arrayValue[0] - min) / (max - min);
   return /* @__PURE__ */ React82.createElement(
     RadixSlider.Root,
     {
@@ -11822,7 +11807,7 @@ var Slider = memo34(function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange,
       className: cx(
-        "flex relative items-center select-none touch-none h-input-height rounded overflow-hidden flex-grow max-h-input-height",
+        "flex relative items-center select-none touch-none h-input-height rounded flex-grow max-h-input-height cursor-pointer",
         className
       ),
       style: style2,
@@ -11830,24 +11815,33 @@ var Slider = memo34(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ React82.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ React82.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React82.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React82.createElement("div", { className: "relative flex-grow h-[3px] overflow-hidden" }, /* @__PURE__ */ React82.createElement(
       "div",
       {
-        style: trackFillStyle,
-        className: cx(
-          "absolute inset-0 w-full h-full rounded overflow-hidden bg-primary-pastel",
-          colorScheme === "primary" && "bg-primary",
-          colorScheme === "secondary" && "bg-secondary"
-        )
+        className: "absolute h-full rounded-l bg-primary",
+        style: {
+          left: 0,
+          width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`
+        }
+      }
+    ), /* @__PURE__ */ React82.createElement(
+      "div",
+      {
+        className: "absolute h-full rounded-r bg-input-background",
+        style: {
+          right: 0,
+          width: `calc(100% - ${ratio * 100}% + ${ratio * 8}px - 10px)`
+        }
       }
     )),
-    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ React82.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React82.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
     /* @__PURE__ */ React82.createElement(
       RadixSlider.Thumb,
       {
         style: thumbStyle,
         className: cx(
-          "block h-input-height rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
+          "block h-[21px] rounded-sm bg-slider-thumb-background shadow-sliderThumb transition-colors focus:outline-primary focus:outline-2",
+          "cursor-ew-resize",
+          // "outline-none outline outline-2 outline-offset-[0px] outline-background",
           colorScheme === void 0 && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"
@@ -12078,10 +12072,10 @@ function useWindowSize() {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React87, { memo as memo36, useLayoutEffect as useLayoutEffect10, useRef as useRef26, useState as useState30 } from "react";
+import React87, { memo as memo36, useLayoutEffect as useLayoutEffect9, useRef as useRef26, useState as useState30 } from "react";
 
 // src/hooks/usePreservePanelSize.tsx
-import { useLayoutEffect as useLayoutEffect9, useRef as useRef25 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef25 } from "react";
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
 var LEFT_SIDEBAR_ID = "editor-left-sidebar";
 var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
@@ -12089,7 +12083,7 @@ var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
   const layoutRef = useRef25();
-  useLayoutEffect9(() => {
+  useLayoutEffect8(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -12132,7 +12126,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  useLayoutEffect9(() => {
+  useLayoutEffect8(() => {
     if (!layoutRef.current) return;
     const {
       windowWidth: oldWindowWidth,
@@ -12229,7 +12223,7 @@ var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
 }) {
   const portalContainer = useRef26(null);
   const [mounted, setMounted] = useState30(false);
-  useLayoutEffect10(() => {
+  useLayoutEffect9(() => {
     if (mounted) return;
     setMounted(true);
     handleChangeLayoutState({
@@ -12851,6 +12845,7 @@ var LabeledRow = memo40(function LabeledRow2({
 // src/components/BaseToolbar.tsx
 import React92 from "react";
 var toolbarStyle = {
+  [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent"
 };
 function BaseToolbar({