@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/primitives/sizes/index.js

@@ -1,14 +1,16 @@
 import {
   SizeProvider2
-} from "../../shared/components-jjw69c4c.js";
+} from "../../shared/components-dcc02hs2.js";
 import {
-  sizeMap2,
-  typeScale2,
   useTypeScale2,
   useSizeVariant2,
   useSize2,
   useSizeContext2
-} from "../../shared/components-0sn7ypjw.js";
+} from "../../shared/components-h83az0bz.js";
+import {
+  sizeMap2,
+  typeScale2
+} from "../../shared/components-34txk9rj.js";
 export {
   SizeProvider2 as SizeProvider,
   SizeProvider2 as default,

package/dist/primitives/skeleton/index.d.ts

@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef } from "react";
+type SizeVariant = "default" | "compact";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+interface SkeletonProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+	/** Renders a stack of this many row placeholders, each one control tall and 4px apart, for a list or table still loading. Omitted, the skeleton is one block you size with `className`. */
+	rows?: number;
+	/** Frames the rows in a hairline container, like an outlined Card.Group. Only with `rows`. Defaults to `false`. */
+	bordered?: boolean;
+	/** Pins the rows to one step of the size ladder (36px default, 28px compact). Defaults to the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Classes for the block (its width, height and radius) or, with `rows`, for the stack. */
+	className?: string;
+}
+/**
+* A placeholder that holds the place of content still loading, so nothing
+* jumps when it arrives.
+*
+* One block by default: give it the size of what it stands for through
+* `className` (`h-4 w-40` for a line of text, `size-9 rounded-full` for an
+* avatar). With `rows` it becomes a stack of rows one control tall (36px,
+* 28px compact), the height of a list or menu row, 4px apart; `bordered`
+* frames them like an outlined group (the row corners nest inside the
+* frame's). It stands in for a table too, though a table's rows sit at their
+* own pitch (a control plus a 1px hairline), so the stack is a close match,
+* not a line-for-line one. The fill is a light mix of the foreground, so it
+* reads on any surface level in light and dark, and every placeholder pulses
+* in step, in opacity only: a fade, so it stays under reduced motion too.
+* Placeholders are hidden from assistive tech: mark the region that is
+* loading with `aria-busy`.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Skeleton: ForwardRefExoticComponent_tcubfn<SkeletonProps & RefAttributes_miuf56<HTMLDivElement>>;
+export { Skeleton, SkeletonProps, Skeleton as default };

package/dist/primitives/skeleton/index.js

@@ -0,0 +1,12 @@
+import {
+  Skeleton2,
+  skeleton_default
+} from "../../shared/components-wktrrb4m.js";
+import"../../shared/components-h83az0bz.js";
+import"../../shared/components-34txk9rj.js";
+import"../../shared/components-78x40gee.js";
+import"../../shared/components-jcnjay5g.js";
+export {
+  Skeleton2 as Skeleton,
+  skeleton_default as default
+};

package/dist/primitives/surface/index.js

@@ -1,13 +1,15 @@
 import {
   Elevated2,
   surface_default
-} from "../../shared/components-vc7vq5nz.js";
+} from "../../shared/components-9as3rf68.js";
+import {
+  surfaceClasses2
+} from "../../shared/components-vf45j12c.js";
 import {
-  surfaceClasses2,
   useSurface2,
   SurfaceProvider2
-} from "../../shared/components-zx6b6yby.js";
-import"../../shared/components-ezxhrmer.js";
+} from "../../shared/components-dhgk6mbt.js";
+import"../../shared/components-jcnjay5g.js";
 export {
   Elevated2 as Elevated,
   SurfaceProvider2 as SurfaceProvider,

package/dist/shared/{components-3mkepka5.js → components-0jmqhx2k.js}

@@ -1,27 +1,30 @@
+"use client";
 import {
-  MorphSurface
-} from "./components-0q0sqfh4.js";
-import {
-  opensInPlace,
-  inPlaceOffset,
-  useMorphOrigin,
-  useMorph
-} from "./components-hqeq3w9q.js";
+  opensInPlace2,
+  inPlaceOffset2,
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
+import {
+  MorphSurface2
+} from "./components-4y816hwp.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 
 // components/overlays/preview-card/index.tsx
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
@@ -55,17 +58,17 @@ var PreviewCardContent2 = forwardRef(({
   ...props
 }, ref) => {
   const { open, origin } = useContext(PreviewCardContext);
-  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
-  const inPlace = opensInPlace({ effect, hideSource });
+  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
+  const inPlace = opensInPlace2({ effect, hideSource });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
-  const shape = useShape();
+  const shape = useShape2();
   const level = Math.min(useSurface2() + 2, 8);
   return /* @__PURE__ */ jsx(PreviewCardPrimitive.Portal, {
     container: container ?? undefined,
     children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Positioner, {
       side,
       align: align ?? (inPlace ? "start" : "center"),
-      sideOffset: inPlace ? inPlaceOffset : sideOffset,
+      sideOffset: inPlace ? inPlaceOffset2 : sideOffset,
       className: "z-50 outline-none",
       children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Popup, {
         ref: morph.popupRef,
@@ -73,10 +76,10 @@ var PreviewCardContent2 = forwardRef(({
         ...props,
         children: /* @__PURE__ */ jsx(SurfaceProvider2, {
           value: level,
-          children: /* @__PURE__ */ jsx(MorphSurface, {
+          children: /* @__PURE__ */ jsx(MorphSurface2, {
             morph,
-            bg: SURFACE_BG[level],
-            shadow: SURFACE_SHADOW[3],
+            bg: SURFACE_BG2[level],
+            shadow: SURFACE_SHADOW2[3],
             radius: shape.container,
             className: cn2("flex w-max max-w-[min(92vw,20rem)] flex-col gap-3 p-4", className),
             children
@@ -88,8 +91,8 @@ var PreviewCardContent2 = forwardRef(({
 });
 PreviewCardContent2.displayName = "PreviewCardContent";
 function PreviewCard2({ open, defaultOpen = false, onOpenChange, children }) {
-  const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
-  const { origin, capture } = useMorphOrigin();
+  const [current, setCurrent] = useControllableState2(open, defaultOpen, onOpenChange);
+  const { origin, capture } = useMorphOrigin2();
   const ctx = useMemo(() => ({ open: current, origin }), [current, origin]);
   return /* @__PURE__ */ jsx(PreviewCardContext.Provider, {
     value: ctx,

package/dist/shared/components-124epb7f.js

@@ -0,0 +1,53 @@
+// lib/field-variants.ts
+import { cva } from "class-variance-authority";
+var fieldVariants2 = cva([
+  "group/field ring-1 cursor-text transition-[background-color,box-shadow,opacity] duration-fast",
+  "hover:bg-muted/50 hover:ring-border data-[active]:bg-muted/50 data-[active]:ring-border",
+  "focus-within:!bg-card focus-within:ring-border",
+  "data-[invalid]:!ring-destructive/50 data-[invalid]:hover:bg-destructive-light/60 data-[invalid]:data-[active]:bg-destructive-light/60",
+  "data-[disabled]:ring-border data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+  "data-[readonly]:cursor-default data-[readonly]:hover:!bg-transparent data-[readonly]:data-[active]:!bg-transparent data-[readonly]:focus-within:!bg-transparent"
+], {
+  variants: {
+    variant: {
+      borderless: "bg-transparent ring-transparent",
+      bordered: "bg-transparent ring-border"
+    }
+  },
+  defaultVariants: {
+    variant: "borderless"
+  }
+});
+var fieldIconClasses2 = "shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-hover/field:text-foreground group-hover/field:stroke-[2] group-data-[active]/field:text-foreground group-data-[active]/field:stroke-[2] group-focus-within/field:text-foreground group-focus-within/field:stroke-[2]";
+var fieldAdornmentClasses2 = "flex shrink-0 items-center whitespace-nowrap text-muted-foreground transition-[color] duration-fast group-hover/field:text-foreground group-data-[active]/field:text-foreground group-focus-within/field:text-foreground";
+var FIELD_ADORNMENT_ICON2 = {
+  default: "[&_svg]:size-4",
+  compact: "[&_svg]:size-3.5"
+};
+var FIELD_ACTION2 = {
+  default: "size-7 -mx-1.5 [&_svg]:size-4",
+  compact: "size-5 -mx-1 [&_svg]:size-3.5"
+};
+var FIELD_ACTION_BOX2 = {
+  default: "size-7 [&_svg]:size-4",
+  compact: "size-5 [&_svg]:size-3.5"
+};
+var FIELD_ACTION_END2 = {
+  default: "-mr-1.5",
+  compact: "-mr-1"
+};
+var FIELD_ACTION_RADIUS2 = {
+  rounded: "rounded-sm",
+  pill: "rounded-full"
+};
+var fieldActionClasses2 = "relative inline-flex shrink-0 cursor-pointer items-center justify-center text-muted-foreground outline-none transition-[color,background-color,opacity] duration-fast hover:bg-hover hover:text-foreground active:bg-active focus-visible:ring-1 focus-visible:ring-focus-ring disabled:pointer-events-none disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var FIELD_PX2 = {
+  default: "px-2.5",
+  compact: "px-2"
+};
+var FIELD_TEXT_INSET2 = {
+  default: "pl-2.5",
+  compact: "pl-2"
+};
+
+export { fieldVariants2, fieldIconClasses2, fieldAdornmentClasses2, FIELD_ADORNMENT_ICON2, FIELD_ACTION2, FIELD_ACTION_BOX2, FIELD_ACTION_END2, FIELD_ACTION_RADIUS2, fieldActionClasses2, FIELD_PX2, FIELD_TEXT_INSET2 };

package/dist/shared/{components-gz8zf3ec.js → components-1k0wv53d.js}

@@ -1,50 +1,23 @@
+"use client";
 import {
-  useReduceMotion
-} from "./components-men63rwj.js";
+  useReduceMotion2
+} from "./components-de99ykt7.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
   FluidHoverHighlight2
-} from "./components-kvr7f9hy.js";
+} from "./components-qdm3yh26.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-59efxjd9.js";
-
-// lib/date-locale.ts
-import { isValid, parse } from "date-fns";
-import { enUS } from "react-day-picker/locale";
-var defaultLocale = enUS;
-function hourCycleOf(locale) {
-  return new Intl.DateTimeFormat(locale.code, { hour: "numeric" }).resolvedOptions().hourCycle ?? "h23";
-}
-function parseWith(text, patterns, locale, reference) {
-  for (const pattern of patterns) {
-    const date = parse(text.trim(), pattern, reference, { locale });
-    if (isValid(date) && date.getFullYear() >= 1000)
-      return date;
-  }
-  return null;
-}
-function parseDateText(text, locale, reference = new Date) {
-  return parseWith(text, ["P", "PP", "PPP", "PPPP"], locale, reference);
-}
-function parseTimeText(text, locale, reference = new Date) {
-  return parseWith(text, ["p", "HH:mm", "H:mm"], locale, reference);
-}
-function parseMonthText(text, locale, reference = new Date) {
-  return parseWith(text, ["LLLL y", "LLL y", "MM/y", "M/y", "MM.y"], locale, reference);
-}
-function fieldLabel(locale, field) {
-  return new Intl.DisplayNames(locale.code, { type: "dateTimeField" }).of(field) ?? field;
-}
+} from "./components-yhgq0qxx.js";
 
 // lib/scroll-column.tsx
 import { useEffect, useRef } from "react";
@@ -60,9 +33,9 @@ function centre(list, item, behavior) {
     behavior
   });
 }
-var dividedColumns = "flex [&>*+*]:border-s [&>*]:border-border";
+var dividedColumns2 = "flex [&>*+*]:border-s [&>*]:border-border";
 var STEP = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
-function ScrollColumn({
+function ScrollColumn2({
   label,
   options,
   value,
@@ -76,10 +49,10 @@ function ScrollColumn({
   const containerRef = useRef(null);
   const pointerInside = useRef(false);
   const centred = useRef(false);
-  const reduceMotion = useReduceMotion();
+  const reduceMotion = useReduceMotion2();
   const horizontal = orientation === "horizontal";
   const hover = useFluidHover2(containerRef, { axis: horizontal ? "x" : "y" });
-  const shape = useShape();
+  const shape = useShape2();
   const axis = useRef(horizontal);
   useEffect(() => {
     const list = listRef.current;
@@ -172,7 +145,7 @@ function ScrollColumnItem({
 }) {
   const ref = useRef(null);
   useRegisterFluidHoverItem2(registerItem, index, ref);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   return /* @__PURE__ */ jsxs("button", {
     ref,
@@ -194,5 +167,4 @@ function ScrollColumnItem({
     ]
   });
 }
-
-export { defaultLocale, hourCycleOf, parseDateText, parseTimeText, parseMonthText, fieldLabel, dividedColumns, ScrollColumn };
+export { dividedColumns2, ScrollColumn2 };

package/dist/shared/components-26snnbs9.js

@@ -0,0 +1,322 @@
+// components/inputs/color-picker/variants.ts
+function clamp012(n) {
+  return Math.max(0, Math.min(1, n));
+}
+function clamp255(n) {
+  return Math.max(0, Math.min(255, n));
+}
+function hsvToRgb2(h, s, v) {
+  const c = v * s;
+  const hh = (h % 360 + 360) % 360 / 60;
+  const x = c * (1 - Math.abs(hh % 2 - 1));
+  let r = 0, g = 0, b = 0;
+  if (hh < 1) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (hh < 2) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (hh < 3) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (hh < 4) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (hh < 5) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  const m = v - c;
+  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 };
+}
+function rgbToHsv2(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const v = max;
+  const d = max - min;
+  const s = max === 0 ? 0 : d / max;
+  let h = 0;
+  if (d > 0) {
+    if (max === r)
+      h = (g - b) / d % 6;
+    else if (max === g)
+      h = (b - r) / d + 2;
+    else
+      h = (r - g) / d + 4;
+    h *= 60;
+    if (h < 0)
+      h += 360;
+  }
+  return { h, s, v };
+}
+function rgbToHsl2(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  const d = max - min;
+  let h = 0, s = 0;
+  if (d > 0) {
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r)
+      h = (g - b) / d % 6;
+    else if (max === g)
+      h = (b - r) / d + 2;
+    else
+      h = (r - g) / d + 4;
+    h *= 60;
+    if (h < 0)
+      h += 360;
+  }
+  return { h, s, l };
+}
+function hslToRgb2(h, s, l) {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const hh = (h % 360 + 360) % 360 / 60;
+  const x = c * (1 - Math.abs(hh % 2 - 1));
+  let r = 0, g = 0, b = 0;
+  if (hh < 1) {
+    r = c;
+    g = x;
+  } else if (hh < 2) {
+    r = x;
+    g = c;
+  } else if (hh < 3) {
+    g = c;
+    b = x;
+  } else if (hh < 4) {
+    g = x;
+    b = c;
+  } else if (hh < 5) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const m = l - c / 2;
+  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 };
+}
+function srgbToLinear(c) {
+  c = c / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function linearToSrgb(c) {
+  const v = c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+  return clamp012(v) * 255;
+}
+function linearRgbToOklab(r, g, b) {
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+  return {
+    L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+    a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+    b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_
+  };
+}
+function oklabToLinearRgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  return {
+    r: 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    b: -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  };
+}
+function rgbToOklch2(r, g, b) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+  const lab = linearRgbToOklab(lr, lg, lb);
+  const C = Math.sqrt(lab.a * lab.a + lab.b * lab.b);
+  let H = Math.atan2(lab.b, lab.a) * 180 / Math.PI;
+  if (H < 0)
+    H += 360;
+  return { L: lab.L, C, H };
+}
+function oklchToRgb2(L, C, H) {
+  const a = C * Math.cos(H * Math.PI / 180);
+  const b = C * Math.sin(H * Math.PI / 180);
+  const lin = oklabToLinearRgb(L, a, b);
+  return {
+    r: clamp255(linearToSrgb(lin.r)),
+    g: clamp255(linearToSrgb(lin.g)),
+    b: clamp255(linearToSrgb(lin.b))
+  };
+}
+function to2hex(n) {
+  return Math.round(clamp255(n)).toString(16).padStart(2, "0");
+}
+function rgbToHexStr2(r, g, b, a) {
+  if (a >= 1)
+    return `#${to2hex(r)}${to2hex(g)}${to2hex(b)}`;
+  return `#${to2hex(r)}${to2hex(g)}${to2hex(b)}${to2hex(a * 255)}`;
+}
+function expandShortHex(h) {
+  if (h.length === 3)
+    return h.split("").map((c) => c + c).join("");
+  if (h.length === 4)
+    return h.split("").map((c) => c + c).join("");
+  return h;
+}
+function parseHex(input) {
+  const m = input.trim().match(/^#?([0-9a-fA-F]{3,8})$/);
+  if (!m)
+    return null;
+  let h = m[1];
+  if (h.length === 3 || h.length === 4)
+    h = expandShortHex(h);
+  if (h.length === 6) {
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16),
+      a: 1
+    };
+  }
+  if (h.length === 8) {
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16),
+      a: parseInt(h.slice(6, 8), 16) / 255
+    };
+  }
+  return null;
+}
+function parseAlphaPart(part) {
+  if (part === undefined)
+    return 1;
+  return part.endsWith("%") ? parseFloat(part) / 100 : parseFloat(part);
+}
+function parseColor2(input) {
+  const s = input.trim();
+  if (!s)
+    return null;
+  if (s.startsWith("#") || /^[0-9a-fA-F]{3,8}$/.test(s)) {
+    return parseHex(s);
+  }
+  const rgbM = s.match(/^rgba?\(\s*([^)]+)\)$/i);
+  if (rgbM) {
+    const parts = rgbM[1].split(/[\s,/]+/).filter(Boolean);
+    if (parts.length < 3)
+      return null;
+    const r = parseFloat(parts[0]);
+    const g = parseFloat(parts[1]);
+    const b = parseFloat(parts[2]);
+    const a = parseAlphaPart(parts[3]);
+    if ([r, g, b, a].some(Number.isNaN))
+      return null;
+    return { r: clamp255(r), g: clamp255(g), b: clamp255(b), a: clamp012(a) };
+  }
+  const hslM = s.match(/^hsla?\(\s*([^)]+)\)$/i);
+  if (hslM) {
+    const parts = hslM[1].split(/[\s,/]+/).filter(Boolean);
+    if (parts.length < 3)
+      return null;
+    const h = parseFloat(parts[0]);
+    const sat = parts[1].endsWith("%") ? parseFloat(parts[1]) / 100 : parseFloat(parts[1]);
+    const l = parts[2].endsWith("%") ? parseFloat(parts[2]) / 100 : parseFloat(parts[2]);
+    const a = parseAlphaPart(parts[3]);
+    if ([h, sat, l, a].some(Number.isNaN))
+      return null;
+    const rgb = hslToRgb2(h, clamp012(sat), clamp012(l));
+    return { r: clamp255(rgb.r), g: clamp255(rgb.g), b: clamp255(rgb.b), a: clamp012(a) };
+  }
+  const oklchM = s.match(/^oklch\(\s*([^)]+)\)$/i);
+  if (oklchM) {
+    const parts = oklchM[1].split(/[\s,/]+/).filter(Boolean);
+    if (parts.length < 3)
+      return null;
+    const L = parts[0].endsWith("%") ? parseFloat(parts[0]) / 100 : parseFloat(parts[0]);
+    const C = parseFloat(parts[1]);
+    const H = parseFloat(parts[2]);
+    const a = parseAlphaPart(parts[3]);
+    if ([L, C, H, a].some(Number.isNaN))
+      return null;
+    const rgb = oklchToRgb2(clamp012(L), Math.max(0, C), H);
+    return { r: clamp255(rgb.r), g: clamp255(rgb.g), b: clamp255(rgb.b), a: clamp012(a) };
+  }
+  return null;
+}
+var cssColorCtx = null;
+function resolveCssColor2(input) {
+  const direct = parseColor2(input);
+  if (direct)
+    return direct;
+  const s = input.trim();
+  if (!s || typeof document === "undefined")
+    return null;
+  if (!cssColorCtx) {
+    cssColorCtx = document.createElement("canvas").getContext("2d");
+    if (!cssColorCtx)
+      return null;
+  }
+  const ctx = cssColorCtx;
+  ctx.fillStyle = "#000000";
+  ctx.fillStyle = s;
+  const first = String(ctx.fillStyle);
+  ctx.fillStyle = "#ffffff";
+  ctx.fillStyle = s;
+  const second = String(ctx.fillStyle);
+  if (first !== second)
+    return null;
+  return parseColor2(first);
+}
+function buildParsed2(h, s, v, a) {
+  const { r, g, b } = hsvToRgb2(h, s, v);
+  const hsl = rgbToHsl2(r, g, b);
+  const oklch = rgbToOklch2(r, g, b);
+  const hex = rgbToHexStr2(r, g, b, a);
+  const rgbStr = a >= 1 ? `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})` : `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${Number(a.toFixed(3))})`;
+  const hslStr = a >= 1 ? `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)` : `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%, ${Number(a.toFixed(3))})`;
+  const oklchStr = a >= 1 ? `oklch(${(oklch.L * 100).toFixed(1)}% ${oklch.C.toFixed(3)} ${oklch.H.toFixed(1)})` : `oklch(${(oklch.L * 100).toFixed(1)}% ${oklch.C.toFixed(3)} ${oklch.H.toFixed(1)} / ${Number(a.toFixed(3))})`;
+  return {
+    h,
+    s,
+    v,
+    a,
+    r: Math.round(r),
+    g: Math.round(g),
+    b: Math.round(b),
+    hex,
+    rgb: rgbStr,
+    hsl: hslStr,
+    oklch: oklchStr
+  };
+}
+function formatValueByFormat2(parsed, fmt) {
+  switch (fmt) {
+    case "hex":
+      return parsed.hex;
+    case "rgb":
+      return parsed.rgb;
+    case "hsl":
+      return parsed.hsl;
+    case "oklch":
+      return parsed.oklch;
+  }
+}
+export { clamp012, hsvToRgb2, rgbToHsv2, rgbToHsl2, hslToRgb2, rgbToOklch2, oklchToRgb2, rgbToHexStr2, parseColor2, resolveCssColor2, buildParsed2, formatValueByFormat2 };