@luxfi/ui 7.4.11 → 7.4.13

package/dist/rating.cjs

@@ -1,9 +1,8 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -27,11 +26,8 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/rating.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
-var StarOutlineIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
+var StarFilledIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
+var StarOutlineIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
 var Rating = React__namespace.forwardRef(
   function Rating2(props, ref) {
     const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
@@ -51,28 +47,30 @@ var Rating = React__namespace.forwardRef(
     const handleMouseLeave = React__namespace.useCallback(() => {
       setHoveredIndex(-1);
     }, []);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { ref, display: "inline-flex", alignItems: "center", gap: 4, className, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { display: "inline-flex", alignItems: "center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
         const filled = index < highlightedIndex;
         const starIndex = index + 1;
         return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          gui.View,
           {
-            type: "button",
+            render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
             tabIndex: readOnly ? -1 : 0,
             "aria-label": `Rate ${starIndex} of ${count}`,
-            className: cn(
-              "inline-flex items-center justify-center w-5 h-5 text-current",
-              readOnly ? "cursor-default" : "cursor-pointer"
-            ),
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 20,
+            height: 20,
+            cursor: readOnly ? "default" : "pointer",
             onClick: handleClick(starIndex),
             onMouseEnter: handleMouseEnter(index),
-            children: filled ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(StarOutlineIcon, { className: "w-5 h-5" })
+            children: filled ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(StarOutlineIcon, {})
           },
           index
         );
       }) }),
-      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: label })
+      label && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, children: label })
     ] });
   }
 );

package/dist/rating.js

@@ -1,15 +1,11 @@
 "use client";
+import { XStack, View, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/rating.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
-var StarOutlineIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
+var StarFilledIcon = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
+var StarOutlineIcon = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
 var Rating = React.forwardRef(
   function Rating2(props, ref) {
     const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
@@ -29,28 +25,30 @@ var Rating = React.forwardRef(
     const handleMouseLeave = React.useCallback(() => {
       setHoveredIndex(-1);
     }, []);
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
-      /* @__PURE__ */ jsx("div", { className: "inline-flex items-center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
+    return /* @__PURE__ */ jsxs(XStack, { ref, display: "inline-flex", alignItems: "center", gap: 4, className, ...rest, children: [
+      /* @__PURE__ */ jsx(XStack, { display: "inline-flex", alignItems: "center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
         const filled = index < highlightedIndex;
         const starIndex = index + 1;
         return /* @__PURE__ */ jsx(
-          "button",
+          View,
           {
-            type: "button",
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
             tabIndex: readOnly ? -1 : 0,
             "aria-label": `Rate ${starIndex} of ${count}`,
-            className: cn(
-              "inline-flex items-center justify-center w-5 h-5 text-current",
-              readOnly ? "cursor-default" : "cursor-pointer"
-            ),
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 20,
+            height: 20,
+            cursor: readOnly ? "default" : "pointer",
             onClick: handleClick(starIndex),
             onMouseEnter: handleMouseEnter(index),
-            children: filled ? /* @__PURE__ */ jsx(StarFilledIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(StarOutlineIcon, { className: "w-5 h-5" })
+            children: filled ? /* @__PURE__ */ jsx(StarFilledIcon, {}) : /* @__PURE__ */ jsx(StarOutlineIcon, {})
           },
           index
         );
       }) }),
-      label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: label })
+      label && /* @__PURE__ */ jsx(Text, { fontSize: 14, children: label })
     ] });
   }
 );

package/dist/slider.cjs

@@ -3,8 +3,6 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,9 +26,11 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/slider.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
+var MUTED = "var(--color-text-secondary)";
+var TRACK = "var(--color-border-divider)";
+var ACTIVE = "var(--color-link-primary)";
+var ACTIVE_HOVER = "var(--color-link-primary-hover)";
+var WHITE = "var(--color-white)";
 var Slider = React__namespace.forwardRef(
   function Slider2(props, ref) {
     const {
@@ -63,21 +63,22 @@ var Slider = React__namespace.forwardRef(
     const handleSlideEnd = React__namespace.useCallback(() => {
       onValueCommit?.(latest.current);
     }, [onValueCommit]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-      label && !showValue && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-      label && showValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { className, gap: 4, children: [
+      label && !showValue && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+      label && showValue && /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, color: MUTED, children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         gui.Slider,
         {
           ref,
-          unstyled: true,
-          className: cn(
-            "relative flex w-full touch-none select-none items-center",
-            hasMarkLabel && "mb-6"
-          ),
+          position: "relative",
+          flexDirection: "row",
+          width: "100%",
+          userSelect: "none",
+          alignItems: "center",
+          marginBottom: hasMarkLabel ? 24 : 0,
           value,
           defaultValue,
           min,
@@ -89,33 +90,23 @@ var Slider = React__namespace.forwardRef(
           onValueChange: handleValueChange,
           onSlideEnd: handleSlideEnd,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              gui.Slider.Track,
-              {
-                unstyled: true,
-                className: "relative grow h-1.5 rounded-full bg-border-divider",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  gui.Slider.TrackActive,
-                  {
-                    unstyled: true,
-                    className: "absolute h-full rounded-full bg-link-primary"
-                  }
-                )
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(gui.Slider.Track, { unstyled: true, position: "relative", flexGrow: 1, height: 6, borderRadius: 9999, backgroundColor: TRACK, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Slider.TrackActive, { unstyled: true, position: "absolute", height: "100%", borderRadius: 9999, backgroundColor: ACTIVE }) }),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
               gui.Slider.Thumb,
               {
                 index,
                 unstyled: true,
-                className: cn(
-                  "block h-5 w-5",
-                  "rounded-full border-2 border-link-primary bg-white",
-                  "shadow-sm transition-colors",
-                  "hover:border-link-primary-hover",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2",
-                  "disabled:pointer-events-none disabled:opacity-50"
-                )
+                width: 20,
+                height: 20,
+                borderRadius: 9999,
+                borderWidth: 2,
+                borderColor: ACTIVE,
+                backgroundColor: WHITE,
+                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                transition: "quick",
+                hoverStyle: { borderColor: ACTIVE_HOVER },
+                focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },
+                disabledStyle: { pointerEvents: "none", opacity: 0.5 }
               },
               index
             ))
@@ -130,20 +121,12 @@ function SliderMarks(props) {
   const { marks, min, max } = props;
   if (!marks?.length) return null;
   const range = max - min;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-4", children: marks.map((mark, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "relative", width: "100%", height: 16, children: marks.map((mark, index) => {
     const percent = (mark.value - min) / range * 100;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "absolute flex flex-col items-center -translate-x-1/2",
-        style: { left: `${percent}%` },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-0.5 bg-border-divider" }),
-          mark.label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-xs text-text-secondary whitespace-nowrap", children: mark.label })
-        ]
-      },
-      index
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.View, { position: "absolute", left: `${percent}%`, alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(gui.View, { width: 2, height: 6, backgroundColor: TRACK }),
+      mark.label != null && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { marginTop: 2, fontSize: 12, color: MUTED, children: mark.label })
+    ] }, index);
   }) });
 }
 

package/dist/slider.js

@@ -1,14 +1,14 @@
 "use client";
-import { Slider as Slider$1 } from '@hanzo/gui';
+import { YStack, Text, XStack, Slider as Slider$1, View } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/slider.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+var MUTED = "var(--color-text-secondary)";
+var TRACK = "var(--color-border-divider)";
+var ACTIVE = "var(--color-link-primary)";
+var ACTIVE_HOVER = "var(--color-link-primary-hover)";
+var WHITE = "var(--color-white)";
 var Slider = React.forwardRef(
   function Slider2(props, ref) {
     const {
@@ -41,21 +41,22 @@ var Slider = React.forwardRef(
     const handleSlideEnd = React.useCallback(() => {
       onValueCommit?.(latest.current);
     }, [onValueCommit]);
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-      label && !showValue && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-      label && showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
+    return /* @__PURE__ */ jsxs(YStack, { className, gap: 4, children: [
+      label && !showValue && /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+      label && showValue && /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+        /* @__PURE__ */ jsx(Text, { fontSize: 14, color: MUTED, children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxs(
         Slider$1,
         {
           ref,
-          unstyled: true,
-          className: cn(
-            "relative flex w-full touch-none select-none items-center",
-            hasMarkLabel && "mb-6"
-          ),
+          position: "relative",
+          flexDirection: "row",
+          width: "100%",
+          userSelect: "none",
+          alignItems: "center",
+          marginBottom: hasMarkLabel ? 24 : 0,
           value,
           defaultValue,
           min,
@@ -67,33 +68,23 @@ var Slider = React.forwardRef(
           onValueChange: handleValueChange,
           onSlideEnd: handleSlideEnd,
           children: [
-            /* @__PURE__ */ jsx(
-              Slider$1.Track,
-              {
-                unstyled: true,
-                className: "relative grow h-1.5 rounded-full bg-border-divider",
-                children: /* @__PURE__ */ jsx(
-                  Slider$1.TrackActive,
-                  {
-                    unstyled: true,
-                    className: "absolute h-full rounded-full bg-link-primary"
-                  }
-                )
-              }
-            ),
+            /* @__PURE__ */ jsx(Slider$1.Track, { unstyled: true, position: "relative", flexGrow: 1, height: 6, borderRadius: 9999, backgroundColor: TRACK, children: /* @__PURE__ */ jsx(Slider$1.TrackActive, { unstyled: true, position: "absolute", height: "100%", borderRadius: 9999, backgroundColor: ACTIVE }) }),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsx(
               Slider$1.Thumb,
               {
                 index,
                 unstyled: true,
-                className: cn(
-                  "block h-5 w-5",
-                  "rounded-full border-2 border-link-primary bg-white",
-                  "shadow-sm transition-colors",
-                  "hover:border-link-primary-hover",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2",
-                  "disabled:pointer-events-none disabled:opacity-50"
-                )
+                width: 20,
+                height: 20,
+                borderRadius: 9999,
+                borderWidth: 2,
+                borderColor: ACTIVE,
+                backgroundColor: WHITE,
+                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                transition: "quick",
+                hoverStyle: { borderColor: ACTIVE_HOVER },
+                focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },
+                disabledStyle: { pointerEvents: "none", opacity: 0.5 }
               },
               index
             ))
@@ -108,20 +99,12 @@ function SliderMarks(props) {
   const { marks, min, max } = props;
   if (!marks?.length) return null;
   const range = max - min;
-  return /* @__PURE__ */ jsx("div", { className: "relative w-full h-4", children: marks.map((mark, index) => {
+  return /* @__PURE__ */ jsx(View, { position: "relative", width: "100%", height: 16, children: marks.map((mark, index) => {
     const percent = (mark.value - min) / range * 100;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "absolute flex flex-col items-center -translate-x-1/2",
-        style: { left: `${percent}%` },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "h-1.5 w-0.5 bg-border-divider" }),
-          mark.label != null && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-text-secondary whitespace-nowrap", children: mark.label })
-        ]
-      },
-      index
-    );
+    return /* @__PURE__ */ jsxs(View, { position: "absolute", left: `${percent}%`, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(View, { width: 2, height: 6, backgroundColor: TRACK }),
+      mark.label != null && /* @__PURE__ */ jsx(Text, { marginTop: 2, fontSize: 12, color: MUTED, children: mark.label })
+    ] }, index);
   }) });
 }