@noya-app/noya-designsystem 0.1.40 → 0.1.41

package/dist/index.mjs

@@ -2047,7 +2047,7 @@ var Checkbox = memo3(
             bg-input-background
             transition-colors
             border
-            border-input-border
+            border-divider
             disabled:opacity-50
             disabled:cursor-not-allowed
             focus:ring-2
@@ -2235,7 +2235,7 @@ var config = {
         "popover-divider": "var(--popover-divider)",
         "listview-raised-background": "var(--listview-raised-background)",
         "listview-editing-background": "var(--listview-editing-background)",
-        "slider-background": "var(--slider-background)",
+        "slider-thumb-background": "var(--slider-thumb-background)",
         "slider-border": "var(--slider-border)",
         "radio-group-background": "var(--radio-group-background)",
         mask: "var(--mask)",
@@ -14579,9 +14579,13 @@ var SelectItem = React66.forwardRef(
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React67, { useCallback as useCallback24, useMemo as useMemo26 } from "react";
+import React67, { memo as memo24, useCallback as useCallback24, useMemo as useMemo26 } from "react";
 var labelStyles2 = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center z-label`;
-var Slider = function Slider2({
+var THUMB_WIDTH = 8;
+var thumbStyle = {
+  width: THUMB_WIDTH
+};
+var Slider = memo24(function Slider2({
   id,
   style: style5,
   className,
@@ -14589,6 +14593,7 @@ var Slider = function Slider2({
   onValueChange,
   min,
   max,
+  step,
   colorScheme,
   label,
   onFocus,
@@ -14598,33 +14603,50 @@ var Slider = function Slider2({
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const percentage = useMemo26(() => {
-    const percent = (arrayValue[0] - min) / (max - min) * 100;
-    return `${percent}%`;
-  }, [arrayValue, min, max]);
   const handleValueChange = useCallback24(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
+  const percentage = useMemo26(() => {
+    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 = useMemo26(
+    () => ({
+      clipPath: `inset(0 ${100 - percentage.adjusted}% 0 0)`
+    }),
+    [percentage.adjusted]
+  );
+  const labelStyle = useMemo26(
+    () => ({
+      clipPath: `inset(0 ${100 - percentage.raw}% 0 0)`
+    }),
+    [percentage.raw]
+  );
   return /* @__PURE__ */ React67.createElement(
     RadixSlider.Root,
     {
       min,
       max,
+      step,
       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",
         className
       ),
       style: style5,
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React67.createElement(RadixSlider.Track, { className: "bg-divider relative flex-grow h-full rounded overflow-hidden" }, label && /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React67.createElement(RadixSlider.Track, { className: "relative flex-grow h-full rounded overflow-hidden bg-input-background" }, label && /* @__PURE__ */ React67.createElement(
       "label",
       {
         htmlFor: id,
@@ -14632,10 +14654,11 @@ var Slider = function Slider2({
       },
       label
     ), /* @__PURE__ */ React67.createElement(
-      RadixSlider.Range,
+      "div",
       {
+        style: trackFillStyle,
         className: cx(
-          "absolute h-full rounded",
+          "absolute inset-0 w-full h-full rounded overflow-hidden",
           colorScheme === void 0 && "bg-slider-border",
           colorScheme === "primary" && "bg-primary",
           colorScheme === "secondary" && "bg-secondary"
@@ -14645,8 +14668,9 @@ var Slider = function Slider2({
     /* @__PURE__ */ React67.createElement(
       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 focus:outline-none cursor-ew-resize",
           colorScheme === void 0 && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"
@@ -14661,12 +14685,12 @@ var Slider = function Slider2({
           labelStyles2,
           "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
     )
   );
-};
+});
 
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
@@ -14706,7 +14730,7 @@ var Switch = function Switch2({
 };
 
 // src/components/TextArea.tsx
-import React69, { forwardRef as forwardRef19, memo as memo24, useCallback as useCallback25, useEffect as useEffect16, useRef as useRef20 } from "react";
+import React69, { forwardRef as forwardRef19, memo as memo25, useCallback as useCallback25, useEffect as useEffect16, useRef as useRef20 } from "react";
 var useAutoResize = (value) => {
   const textareaRef = useRef20(null);
   useEffect16(() => {
@@ -14716,7 +14740,7 @@ var useAutoResize = (value) => {
   }, [value]);
   return textareaRef;
 };
-var AutoResizingTextArea = memo24(
+var AutoResizingTextArea = memo25(
   forwardRef19(function AutoResizingTextArea2({
     value,
     onChangeText,
@@ -14786,8 +14810,8 @@ var TreeView;
 })(TreeView || (TreeView = {}));
 
 // src/components/UserPointer.tsx
-import React71, { memo as memo25, useMemo as useMemo27 } from "react";
-var UserPointerContainer = memo25(function UserPointerContainer2({
+import React71, { memo as memo26, useMemo as useMemo27 } from "react";
+var UserPointerContainer = memo26(function UserPointerContainer2({
   point,
   visible,
   children: children2,
@@ -14811,7 +14835,7 @@ var UserPointerContainer = memo25(function UserPointerContainer2({
     children2
   );
 });
-var UserNameTag = memo25(function UserNameTag2({
+var UserNameTag = memo26(function UserNameTag2({
   backgroundColor,
   className,
   style: style5,
@@ -14833,7 +14857,7 @@ var UserNameTag = memo25(function UserNameTag2({
     children2
   );
 });
-var UserPointerIcon = memo25(function PointerIcon({
+var UserPointerIcon = memo26(function PointerIcon({
   size: size3,
   color = "black",
   className,
@@ -14868,7 +14892,7 @@ var UserPointerIcon = memo25(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = memo25(function UserPointer2({
+var UserPointer = memo26(function UserPointer2({
   userId,
   name,
   visible = true,
@@ -15351,11 +15375,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React74, { memo as memo26, useCallback as useCallback28 } from "react";
+import React74, { memo as memo27, useCallback as useCallback28 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = memo26(function DimensionInput2({
+var DimensionInput = memo27(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -15402,7 +15426,7 @@ __export(InspectorPrimitives_exports, {
 });
 import React75, {
   forwardRef as forwardRef21,
-  memo as memo27
+  memo as memo28
 } from "react";
 var Section2 = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ React75.createElement(
   "div",
@@ -15476,7 +15500,7 @@ var RowLabel = forwardRef21(function RowLabel2({
     }
   );
 });
-var LabeledRow = memo27(function LabeledRow2({
+var LabeledRow = memo28(function LabeledRow2({
   id,
   children: children2,
   label,