@justanarthur/modo-ui 0.1.0 → 0.2.0

package/dist/shared/components-vc7vq5nz.js

@@ -0,0 +1,32 @@
+import {
+  surfaceClasses2,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+
+// primitives/surface/index.tsx
+import {
+  forwardRef
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var Elevated2 = forwardRef(({ offset, shadowLevel, className, children, ...props }, ref) => {
+  const substrate = useSurface2();
+  const level = Math.min(substrate + offset, 8);
+  return /* @__PURE__ */ jsx(SurfaceProvider2, {
+    value: level,
+    children: /* @__PURE__ */ jsx("div", {
+      ref,
+      className: cn2(surfaceClasses2(level, shadowLevel ?? level), className),
+      ...props,
+      children
+    })
+  });
+});
+Elevated2.displayName = "Elevated";
+Object.assign(Elevated2, { Provider: SurfaceProvider2 });
+var surface_default = Elevated2;
+
+export { Elevated2, surface_default };

package/dist/shared/{components-6hzwfmfd.js → components-vfbhxf5r.js}

@@ -1,19 +1,19 @@
-import {
-  badge_default
-} from "./components-9p8s8n5q.js";
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  badge_default
+} from "./components-7r3etddy.js";
 
 // primitives/craft/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function Pane({ verdict, note, children }) {
   const shape = useShape();
   return /* @__PURE__ */ jsxs("figure", {
-    className: cn("row-span-2 m-0 grid min-w-0 grid-rows-subgrid gap-0 ring-1 ring-border", shape.container),
+    className: cn2("row-span-2 m-0 grid min-w-0 grid-rows-subgrid gap-0 ring-1 ring-border", shape.container),
     children: [
       /* @__PURE__ */ jsx("div", {
         className: "flex min-h-40 items-center justify-center p-4",
@@ -39,7 +39,7 @@ function Pane({ verdict, note, children }) {
 }
 function Craft({ bad, good, badNote, goodNote, className }) {
   return /* @__PURE__ */ jsxs("div", {
-    className: cn("grid w-full gap-3 sm:grid-cols-2", className),
+    className: cn2("grid w-full gap-3 sm:grid-cols-2", className),
     children: [
       /* @__PURE__ */ jsx(Pane, {
         verdict: "bad",

package/dist/shared/{components-8hk9ve3r.js → components-wvp1m52g.js}

@@ -1,18 +1,18 @@
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
 import {
-  useControllableState
-} from "./components-dg0w8g5p.js";
+  useSizeVariant2
+} from "./components-0sn7ypjw.js";
 import {
-  spring
-} from "./components-vc1k7yv2.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
-  useSizeVariant
-} from "./components-x3rz4cyn.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/inputs/slider/index.tsx
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
@@ -133,7 +133,7 @@ function ValueDisplay({
                     onCancelEdit();
                 },
                 "aria-label": `Edit slider value${isRange ? index === 0 ? " (start)" : " (end)" : ""}`,
-                className: cn("w-[5ch] bg-transparent text-foreground outline-none border-b border-border text-center", shape.input, "weight-medium")
+                className: cn2("w-[5ch] bg-transparent text-foreground outline-none border-b border-border text-center", shape.input, "weight-medium")
               })
             ]
           })
@@ -148,7 +148,7 @@ function ValueDisplay({
   };
   const widestValue = isRange ? `${label ? `${label}: ` : ""}${formatValue(max)} — ${formatValue(max)}` : `${label ? `${label}: ` : ""}${formatValue(max)}`;
   return /* @__PURE__ */ jsxs("span", {
-    className: cn("inline-grid shrink-0 text-body leading-none text-muted-foreground transition-[font-variation-settings] duration-100", "tabular-nums", isInteracting ? "weight-medium" : "weight-normal"),
+    className: cn2("inline-grid shrink-0 text-body leading-none text-muted-foreground transition-[font-variation-settings] duration-100", "tabular-nums", isInteracting ? "weight-medium" : "weight-normal"),
     children: [
       /* @__PURE__ */ jsx("span", {
         className: "col-start-1 row-start-1 invisible whitespace-nowrap weight-medium",
@@ -191,10 +191,10 @@ function TooltipValue({ value, formatValue, motionX }) {
     },
     initial: { opacity: 0, y: 4 },
     animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, y: 4, transition: spring.fast.exit },
-    transition: spring.fast,
+    exit: { opacity: 0, y: 4, transition: spring2.fast.exit },
+    transition: spring2.fast,
     children: /* @__PURE__ */ jsx("span", {
-      className: cn("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
+      className: cn2("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
       children: formatValue(value)
     })
   });
@@ -326,10 +326,10 @@ var CompactSlider = forwardRef(({
         const mn = minRef.current;
         const mx = maxRef.current;
         const px0 = valueToPixel(v[0], mn, mx, w);
-        animate(motionX0, px0, spring.moderate);
+        animate(motionX0, px0, spring2.moderate);
         if (isRange && v[1] !== undefined) {
           const px1 = valueToPixel(v[1], mn, mx, w);
-          animate(motionX1, px1, spring.moderate);
+          animate(motionX1, px1, spring2.moderate);
         }
       }
     });
@@ -347,10 +347,10 @@ var CompactSlider = forwardRef(({
       return;
     const v = valuesRef.current;
     const px0 = valueToPixel(v[0], min, max, tw);
-    animate(motionX0, px0, spring.moderate);
+    animate(motionX0, px0, spring2.moderate);
     if (isRange && v[1] !== undefined) {
       const px1 = valueToPixel(v[1], min, max, tw);
-      animate(motionX1, px1, spring.moderate);
+      animate(motionX1, px1, spring2.moderate);
     }
   }, [valuesKey, min, max, isRange, motionX0, motionX1]);
   const clampForRange = useCallback((px, thumbIndex) => {
@@ -400,7 +400,7 @@ var CompactSlider = forwardRef(({
     const snappedValue = pixelToValue(clamped, min, max, step, layoutWidth, stepValues);
     const snappedPx = valueToPixel(snappedValue, min, max, layoutWidth);
     const finalPx = clampForRange(snappedPx, activeDragThumb.current);
-    animate(motionX, finalPx, spring.moderate);
+    animate(motionX, finalPx, spring2.moderate);
     const finalValue = pixelToValue(finalPx, min, max, step, layoutWidth, stepValues);
     emitChange(activeDragThumb.current, finalValue);
     e.currentTarget.setPointerCapture(e.pointerId);
@@ -438,7 +438,7 @@ var CompactSlider = forwardRef(({
     const currentPx = motionX.get();
     const snapped = pixelToValue(currentPx, min, max, step, tw, stepValues);
     const snappedPx = valueToPixel(snapped, min, max, tw);
-    animate(motionX, snappedPx, spring.moderate);
+    animate(motionX, snappedPx, spring2.moderate);
   }, [min, max, step, stepValues, motionX0, motionX1]);
   const handleRadixChange = useCallback((newValues) => {
     if (dragging.current)
@@ -508,13 +508,13 @@ var CompactSlider = forwardRef(({
       initial: false,
       children: [
         /* @__PURE__ */ jsx(motion.span, {
-          className: cn("block rounded-full shadow-thumb", !thumbColor && "bg-thumb"),
+          className: cn2("block rounded-full shadow-thumb", !thumbColor && "bg-thumb"),
           initial: false,
           animate: {
             width: THUMB_SIZE_REST,
             height: THUMB_SIZE_REST
           },
-          transition: spring.fast,
+          transition: spring2.fast,
           style: {
             backgroundColor: thumbColor,
             border: thumbBorderColor ? `1px solid ${thumbBorderColor}` : undefined
@@ -528,14 +528,14 @@ var CompactSlider = forwardRef(({
             width: THUMB_SIZE + 4,
             height: THUMB_SIZE + 4
           },
-          transition: spring.fast
+          transition: spring2.fast
         })
       ]
     }, `visual-thumb-${index}`);
   };
   return /* @__PURE__ */ jsxs("div", {
     ref,
-    className: cn("flex flex-col gap-0 w-full select-none touch-none overflow-visible", valuePosition === "left" || valuePosition === "right" ? "flex-row items-center gap-2 mb-2" : "flex-col", disabled && "opacity-50 pointer-events-none", className),
+    className: cn2("flex flex-col gap-0 w-full select-none touch-none overflow-visible", valuePosition === "left" || valuePosition === "right" ? "flex-row items-center gap-2 mb-2" : "flex-col", disabled && "opacity-50 pointer-events-none", className),
     ...props,
     children: [
       (valuePosition === "top" || valuePosition === "left") && valueDisplay,
@@ -645,26 +645,26 @@ var CompactSlider = forwardRef(({
                   className: "absolute -translate-x-1/2 pointer-events-none z-20",
                   initial: { opacity: 0, y: 4 },
                   animate: { opacity: 1, y: 0 },
-                  exit: { opacity: 0, y: 4, transition: spring.fast.exit },
-                  transition: spring.fast,
+                  exit: { opacity: 0, y: 4, transition: spring2.fast.exit },
+                  transition: spring2.fast,
                   style: {
                     left: hoverPreview.cursorX,
                     top: -20
                   },
                   children: /* @__PURE__ */ jsx("span", {
-                    className: cn("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
+                    className: cn2("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
                     children: formatValue(hoverPreview.snappedValue)
                   })
                 }, "hover-tooltip")
               }),
               /* @__PURE__ */ jsxs(motion.div, {
-                className: cn("absolute bg-transparent border border-border overflow-hidden rounded-full", trackClassName),
+                className: cn2("absolute bg-transparent border border-border overflow-hidden rounded-full", trackClassName),
                 initial: false,
                 animate: {
                   height: TRACK_BG_HEIGHT,
                   top: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2
                 },
-                transition: spring.fast,
+                transition: spring2.fast,
                 style: {
                   left: TRACK_INSET,
                   right: TRACK_INSET,
@@ -672,7 +672,7 @@ var CompactSlider = forwardRef(({
                 },
                 children: [
                   !hideFill && /* @__PURE__ */ jsx(motion.div, {
-                    className: cn("absolute h-full bg-selected/50 dark:bg-accent/40", fillClassName),
+                    className: cn2("absolute h-full bg-selected/50 dark:bg-accent/40", fillClassName),
                     style: {
                       left: fillLeft,
                       width: fillWidth,
@@ -719,7 +719,7 @@ var CompactSlider = forwardRef(({
                       width: isHovered ? DOT_SIZE * 1.25 : DOT_SIZE,
                       height: isHovered ? DOT_SIZE * 1.25 : DOT_SIZE
                     },
-                    transition: spring.moderate
+                    transition: spring2.moderate
                   })
                 }, v))
               }),
@@ -833,8 +833,8 @@ var ComfortableSlider = forwardRef(({
     if (dragging.current || handleDragging.current)
       return;
     const percent = max === min ? 0 : Math.max(0, Math.min(1, (value - min) / (max - min)));
-    animate(fillPercent, percent, spring.fast);
-    animate(zeroOffset, value === min ? zeroTarget : 0, spring.fast);
+    animate(fillPercent, percent, spring2.fast);
+    animate(zeroOffset, value === min ? zeroTarget : 0, spring2.fast);
   }, [value, min, max, variant, fillPercent, zeroOffset, zeroTarget]);
   const getValueFromX = useCallback((clientX) => {
     const rect = containerRef.current?.getBoundingClientRect();
@@ -863,8 +863,8 @@ var ComfortableSlider = forwardRef(({
     const newVal = getValueFromX(e.clientX);
     onChange(newVal);
     const newPercent = Math.max(0, Math.min(1, (newVal - min) / (max - min)));
-    animate(fillPercent, newPercent, spring.fast);
-    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast);
+    animate(fillPercent, newPercent, spring2.fast);
+    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring2.fast);
     e.currentTarget.setPointerCapture(e.pointerId);
   }, [disabled, getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max]);
   const handlePointerMove = useCallback((e) => {
@@ -876,9 +876,9 @@ var ComfortableSlider = forwardRef(({
     if (variant === "scrubber") {
       fillPercent.set(newPercent);
     } else {
-      animate(fillPercent, newPercent, spring.fast);
+      animate(fillPercent, newPercent, spring2.fast);
     }
-    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast);
+    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring2.fast);
   }, [getValueFromX, onChange, variant, fillPercent, zeroOffset, zeroTarget, min, max]);
   const handlePointerUp = useCallback(() => {
     dragging.current = false;
@@ -897,7 +897,7 @@ var ComfortableSlider = forwardRef(({
     const newVal = getValueFromX(e.clientX);
     onChange(newVal);
     fillPercent.set(Math.max(0, Math.min(1, (newVal - min) / (max - min))));
-    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast);
+    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring2.fast);
     e.currentTarget.setPointerCapture(e.pointerId);
   }, [disabled, getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max]);
   const handleResizePointerMove = useCallback((e) => {
@@ -906,7 +906,7 @@ var ComfortableSlider = forwardRef(({
     const newVal = getValueFromX(e.clientX);
     onChange(newVal);
     fillPercent.set(Math.max(0, Math.min(1, (newVal - min) / (max - min))));
-    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast);
+    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring2.fast);
   }, [getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max]);
   const handleResizePointerUp = useCallback(() => {
     handleDragging.current = false;
@@ -948,26 +948,26 @@ var ComfortableSlider = forwardRef(({
           className: "absolute -translate-x-1/2 pointer-events-none z-20",
           initial: { opacity: 0, y: 4 },
           animate: { opacity: 1, y: 0 },
-          exit: { opacity: 0, y: 4, transition: spring.fast.exit },
-          transition: spring.fast,
+          exit: { opacity: 0, y: 4, transition: spring2.fast.exit },
+          transition: spring2.fast,
           style: {
             left: hoverPreview.cursorX,
             top: -30
           },
           children: /* @__PURE__ */ jsx("span", {
-            className: cn("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
+            className: cn2("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
             children: formatValue(hoverPreview.snappedValue)
           })
         }, "hover-tooltip")
       }),
       /* @__PURE__ */ jsxs(motion.div, {
         ref: mergedRef,
-        className: cn("relative w-full h-8 select-none touch-none border border-border overflow-hidden outline-offset-2", variant === "scrubber" ? "flex items-center gap-3 px-4 cursor-ew-resize" : "cursor-ew-resize", shape.bg, disabled && "opacity-50 pointer-events-none", className),
+        className: cn2("relative w-full h-8 select-none touch-none border border-border overflow-hidden outline-offset-2", variant === "scrubber" ? "flex items-center gap-3 px-4 cursor-ew-resize" : "cursor-ew-resize", shape.bg, disabled && "opacity-50 pointer-events-none", className),
         initial: false,
         animate: {
           outline: isFocused ? "1px solid var(--focus-ring)" : "1px solid transparent"
         },
-        transition: spring.fast,
+        transition: spring2.fast,
         onPointerDown: handlePointerDown,
         onPointerMove: handlePointerMove,
         onPointerUp: handlePointerUp,
@@ -1029,7 +1029,7 @@ var ComfortableSlider = forwardRef(({
                     backgroundColor: isActivePip ? "var(--foreground)" : "var(--muted-foreground)",
                     opacity: isActivePip ? 1 : 0.3
                   },
-                  transition: spring.fast,
+                  transition: spring2.fast,
                   style: { width: PIP_SIZE, height: PIP_SIZE }
                 })
               }, pipValue);
@@ -1064,7 +1064,7 @@ var ComfortableSlider = forwardRef(({
               bottom: isActive ? 7 : 8,
               backgroundColor: isFocused ? "var(--foreground)" : isHovered ? "color-mix(in srgb, var(--foreground) 50%, transparent)" : "color-mix(in srgb, var(--foreground) 25%, transparent)"
             },
-            transition: spring.fast,
+            transition: spring2.fast,
             style: {
               left: pipsHandleLineLeftStyle,
               width: 2
@@ -1077,14 +1077,14 @@ var ComfortableSlider = forwardRef(({
                 className: "text-body px-2",
                 initial: false,
                 animate: { color: isActive ? "var(--foreground)" : "var(--muted-foreground)" },
-                transition: spring.fast,
+                transition: spring2.fast,
                 children: label
               }),
               /* @__PURE__ */ jsx(motion.span, {
                 className: "text-body tabular-nums ml-auto px-2",
                 initial: false,
                 animate: { color: isActive ? "var(--foreground)" : "var(--muted-foreground)" },
-                transition: spring.fast,
+                transition: spring2.fast,
                 style: { minWidth: `${String(formatValue(max)).length}ch`, textAlign: "right" },
                 children: formatValue(value)
               })
@@ -1104,7 +1104,7 @@ var ComfortableSlider = forwardRef(({
               bottom: isActive ? 7 : 8,
               backgroundColor: isFocused ? "var(--foreground)" : isHovered ? "color-mix(in srgb, var(--foreground) 50%, transparent)" : "color-mix(in srgb, var(--foreground) 25%, transparent)"
             },
-            transition: spring.fast,
+            transition: spring2.fast,
             style: {
               left: handleLineLeftStyle,
               width: 2
@@ -1114,7 +1114,7 @@ var ComfortableSlider = forwardRef(({
             className: "text-body shrink-0 z-10",
             initial: false,
             animate: { color: isActive ? "var(--foreground)" : "var(--muted-foreground)" },
-            transition: spring.fast,
+            transition: spring2.fast,
             children: label
           }),
           variant === "scrubber" && /* @__PURE__ */ jsxs(Fragment, {
@@ -1126,7 +1126,7 @@ var ComfortableSlider = forwardRef(({
                 className: "text-body shrink-0 tabular-nums text-right z-10",
                 initial: false,
                 animate: { color: isActive ? "var(--foreground)" : "var(--muted-foreground)" },
-                transition: spring.fast,
+                transition: spring2.fast,
                 style: { minWidth: `${String(formatValue(max)).length}ch` },
                 children: formatValue(value)
               })
@@ -1146,10 +1146,10 @@ var ComfortableSlider = forwardRef(({
   });
 });
 ComfortableSlider.displayName = "SliderComfortable";
-var Slider = forwardRef(({ size, variant = "pips", value: valueProp, defaultValue, onChange: onChangeProp, ...rest }, ref) => {
+var Slider2 = forwardRef(({ size, variant = "pips", value: valueProp, defaultValue, onChange: onChangeProp, ...rest }, ref) => {
   const [value, onChange] = useControllableState(valueProp, defaultValue ?? (rest.steps && rest.steps.length > 0 ? Math.min(...rest.steps) : rest.min ?? 0), onChangeProp);
   const props = { ...rest, value, onChange };
-  const resolved = useSizeVariant(size);
+  const resolved = useSizeVariant2(size);
   const needsCompactEngine = Array.isArray(props.value) || props.steps !== undefined || props.showSteps !== undefined || props.showValue !== undefined || props.valuePosition !== undefined || props.trackClassName !== undefined || props.trackStyle !== undefined || props.fillClassName !== undefined || props.fillStyle !== undefined || props.hideFill !== undefined || props.thumbColor !== undefined || props.thumbBorderColor !== undefined;
   if (resolved === "compact" || needsCompactEngine) {
     return /* @__PURE__ */ jsx(CompactSlider, {
@@ -1193,8 +1193,8 @@ var Slider = forwardRef(({ size, variant = "pips", value: valueProp, defaultValu
     ...html
   });
 });
-Slider.displayName = "Slider";
-var SliderComfortable = ComfortableSlider;
-var slider_default = Slider;
+Slider2.displayName = "Slider";
+var SliderComfortable2 = ComfortableSlider;
+var slider_default = Slider2;
 
-export { Slider, SliderComfortable, slider_default };
+export { Slider2, SliderComfortable2, slider_default };