@noya-app/noya-designsystem 0.1.40 → 0.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -38,7 +38,7 @@
     "@radix-ui/react-progress": "^1.0.1",
     "@radix-ui/react-radio-group": "^1.1.0",
     "@radix-ui/react-scroll-area": "^1.0.2",
-    "@radix-ui/react-slider": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle-group": "^1.0.1",

package/src/components/Checkbox.tsx

@@ -39,7 +39,7 @@ export const Checkbox = memo(
             bg-input-background
             transition-colors
             border
-            border-input-border
+            border-divider
             disabled:opacity-50
             disabled:cursor-not-allowed
             focus:ring-2

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,6 +12,7 @@ interface Props {
   onValueChange: (value: number) => void;
   min: number;
   max: number;
+  step?: number;
   colorScheme?: ColorScheme;
   label?: React.ReactNode;
   onFocus?: FocusEventHandler;
@@ -20,7 +21,13 @@ interface Props {
 
 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,6 +35,7 @@ export const Slider = function Slider({
   onValueChange,
   min,
   max,
+  step,
   colorScheme,
   label,
   onFocus,
@@ -38,11 +46,6 @@ export const Slider = function Slider({
     [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 +53,49 @@ 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",
         className
       )}
       style={style}
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <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 +104,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 +115,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 focus:outline-none cursor-ew-resize",
           colorScheme === undefined && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"
@@ -98,11 +130,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/index.css

@@ -37,7 +37,7 @@
   --popover-divider: transparent;
   --listview-raised-background: rgba(0, 0, 0, 0.03);
   --listview-editing-background: #fff;
-  --slider-background: white;
+  --slider-thumb-background: white;
   --slider-border: #9698ac;
   --radio-group-background: white;
   --mask: rgb(12, 193, 67);
@@ -87,7 +87,7 @@
   --text: rgb(248, 248, 250);
   --text-muted: rgb(180, 179, 182);
   --text-subtle: rgb(180, 179, 182);
-  --text-disabled: rgb(100, 99, 102);
+  --text-disabled: rgb(115, 114, 126);
   --divider-subtle: rgba(255, 255, 255, 0.04);
   --divider: rgba(255, 255, 255, 0.08);
   --divider-strong: rgba(0, 0, 0, 1);
@@ -105,7 +105,7 @@
   --popover-divider: rgba(255, 255, 255, 0.08);
   --listview-raised-background: rgba(181, 178, 255, 0.1);
   --listview-editing-background: #000;
-  --slider-background: #bbb;
+  --slider-thumb-background: rgb(248, 248, 250);
   --radio-group-background: rgba(181, 178, 255, 0.08);
   --mask: rgb(102, 187, 106);
   --transparent-checker: rgba(255, 255, 255, 0.3);

package/tailwind.config.ts

@@ -44,7 +44,7 @@ const 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)",