@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-x2xyckd5.js

@@ -0,0 +1,198 @@
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.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;
+}
+
+// lib/scroll-column.tsx
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function centre(list, item, behavior) {
+  const l = list.getBoundingClientRect();
+  const i = item.getBoundingClientRect();
+  const sx = l.width / list.offsetWidth || 1;
+  const sy = l.height / list.offsetHeight || 1;
+  list.scrollTo({
+    top: list.scrollTop + (i.top - l.top) / sy - (list.clientHeight - item.offsetHeight) / 2,
+    left: list.scrollLeft + (i.left - l.left) / sx - (list.clientWidth - item.offsetWidth) / 2,
+    behavior
+  });
+}
+var dividedColumns = "flex [&>*+*]:border-s [&>*]:border-border";
+var STEP = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+function ScrollColumn({
+  label,
+  options,
+  value,
+  onValueChange,
+  inView,
+  follow = value,
+  orientation = "vertical",
+  className
+}) {
+  const listRef = useRef(null);
+  const containerRef = useRef(null);
+  const pointerInside = useRef(false);
+  const centred = useRef(false);
+  const reduceMotion = useReduceMotion();
+  const horizontal = orientation === "horizontal";
+  const hover = useFluidHover(containerRef, { axis: horizontal ? "x" : "y" });
+  const shape = useShape();
+  const axis = useRef(horizontal);
+  useEffect(() => {
+    const list = listRef.current;
+    const item = list?.querySelector(`[data-value="${follow}"]`);
+    if (!list || !item || pointerInside.current)
+      return;
+    const glide = centred.current && axis.current === horizontal && !reduceMotion;
+    centre(list, item, glide ? "smooth" : "instant");
+    centred.current = true;
+    axis.current = horizontal;
+  }, [follow, horizontal]);
+  const followed = useRef(follow);
+  followed.current = follow;
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list)
+      return;
+    const observer = new ResizeObserver(() => {
+      const item = list.querySelector(`[data-value="${followed.current}"]`);
+      if (item && !pointerInside.current)
+        centre(list, item, "instant");
+    });
+    observer.observe(list);
+    return () => observer.disconnect();
+  }, []);
+  const banded = options.map((o) => inView?.(o.value) ?? false);
+  const tabStop = options.some((o) => o.value === value) ? value : follow ?? options[0]?.value;
+  const onKeyDown = (e) => {
+    const items = [
+      ...containerRef.current?.querySelectorAll('[role="option"]:not(:disabled)') ?? []
+    ];
+    const at = items.indexOf(document.activeElement);
+    const next = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : STEP[e.key] ? at + (STEP[e.key] ?? 0) : undefined;
+    if (next === undefined)
+      return;
+    e.preventDefault();
+    const item = items[Math.max(0, Math.min(items.length - 1, next))];
+    item?.focus({ preventScroll: true });
+    if (item && listRef.current)
+      centre(listRef.current, item, reduceMotion ? "instant" : "smooth");
+  };
+  return /* @__PURE__ */ jsx("div", {
+    ref: listRef,
+    role: "listbox",
+    "aria-label": label,
+    "aria-orientation": orientation,
+    onKeyDown,
+    onPointerEnter: () => {
+      pointerInside.current = true;
+    },
+    onPointerLeave: () => {
+      pointerInside.current = false;
+    },
+    className: cn("scrollbar-hide [--scroll-fade-size:24px]", horizontal ? "overflow-x-auto overflow-y-hidden scroll-fade-x" : "overflow-y-auto overflow-x-hidden scroll-fade", className),
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: containerRef,
+      onMouseMove: hover.handlers.onMouseMove,
+      onMouseEnter: hover.handlers.onMouseEnter,
+      onMouseLeave: hover.handlers.onMouseLeave,
+      onClick: hover.handlers.onClick,
+      className: cn("relative flex p-1", horizontal ? "w-max flex-row" : "flex-col"),
+      children: [
+        /* @__PURE__ */ jsx(FluidHoverHighlight, {
+          hover,
+          className: shape.bg
+        }),
+        options.map((option, index) => /* @__PURE__ */ jsx(ScrollColumnItem, {
+          index,
+          registerItem: hover.registerItem,
+          option,
+          selected: option.value === value,
+          band: !banded[index] ? undefined : banded[index - 1] ? banded[index + 1] ? "middle" : "end" : banded[index + 1] ? "start" : "single",
+          horizontal,
+          tabStop: option.value === tabStop,
+          onSelect: () => onValueChange(option.value)
+        }, option.value))
+      ]
+    })
+  });
+}
+function ScrollColumnItem({
+  index,
+  registerItem,
+  option,
+  selected,
+  band,
+  horizontal,
+  tabStop,
+  onSelect
+}) {
+  const ref = useRef(null);
+  useRegisterFluidHoverItem(registerItem, index, ref);
+  const shape = useShape();
+  const sizeClasses = useSize();
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    type: "button",
+    role: "option",
+    "aria-selected": selected,
+    tabIndex: tabStop ? 0 : -1,
+    disabled: option.disabled,
+    "data-value": option.value,
+    "data-fluid-hover-index": index,
+    onClick: onSelect,
+    className: cn("relative z-[1] flex shrink-0 items-center justify-center px-2 tabular-nums whitespace-nowrap outline-none", "transition-[color,background-color] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring", "disabled:opacity-50 disabled:pointer-events-none", sizeClasses.segmentItem, sizeClasses.text, shape.item, band && !selected && "bg-accent/20 dark:bg-accent/12", selected && "bg-active", band && band !== "single" && "rounded-none", band === "start" && (horizontal ? "rounded-s-lg" : "rounded-t-lg"), band === "end" && (horizontal ? "rounded-e-lg" : "rounded-b-lg"), selected ? "text-foreground weight-semibold" : band ? "text-foreground" : "text-muted-foreground"),
+    children: [
+      selected && /* @__PURE__ */ jsx("span", {
+        "aria-hidden": true,
+        className: "absolute start-1 top-1/2 size-1 -translate-y-1/2 rounded-full bg-current"
+      }),
+      option.label
+    ]
+  });
+}
+
+export { defaultLocale, hourCycleOf, parseDateText, parseTimeText, parseMonthText, fieldLabel, dividedColumns, ScrollColumn };

package/dist/shared/components-x3rz4cyn.js

@@ -0,0 +1,61 @@
+// lib/size-context.tsx
+import { createContext, useContext } from "react";
+var sizeMap = {
+  default: {
+    variant: "default",
+    control: "h-9",
+    controlHeight: 36,
+    segmentItem: "h-7",
+    segmentPad: "p-1",
+    text: "text-body",
+    px: "px-3",
+    itemPx: "px-2",
+    gap: "gap-2",
+    icon: 16
+  },
+  compact: {
+    variant: "compact",
+    control: "h-7",
+    controlHeight: 28,
+    segmentItem: "h-6",
+    segmentPad: "p-0.5",
+    text: "text-body-compact",
+    px: "px-2.5",
+    itemPx: "px-1.5",
+    gap: "gap-1",
+    icon: 14
+  }
+};
+var typeScale = {
+  display: { default: 28, compact: 24 },
+  title: { default: 16, compact: 15 },
+  subtitle: { default: 14, compact: 13 },
+  body: { default: 13, compact: 12 },
+  caption: { default: 12, compact: 11 }
+};
+function useTypeScale(override) {
+  const variant = useSizeVariant(override);
+  return {
+    display: typeScale.display[variant],
+    title: typeScale.title[variant],
+    subtitle: typeScale.subtitle[variant],
+    body: typeScale.body[variant],
+    caption: typeScale.caption[variant]
+  };
+}
+var SizeContext = createContext(null);
+function useSizeVariant(override) {
+  const ctx = useContext(SizeContext);
+  return override ?? ctx?.size ?? "default";
+}
+function useSize(override) {
+  return sizeMap[useSizeVariant(override)];
+}
+function useSizeContext() {
+  const ctx = useContext(SizeContext);
+  if (!ctx)
+    throw new Error("useSizeContext must be used within a SizeProvider");
+  return ctx;
+}
+
+export { sizeMap, typeScale, useTypeScale, SizeContext, useSizeVariant, useSize, useSizeContext };

package/dist/shared/components-xszag63d.js

@@ -0,0 +1,141 @@
+import {
+  calendar_default
+} from "./components-6phwsry6.js";
+import {
+  PickerInput,
+  PickerShell
+} from "./components-hzfp4tjb.js";
+import {
+  defaultLocale,
+  parseDateText
+} from "./components-x2xyckd5.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+
+// components/inputs/date-time/date-range-picker/index.tsx
+import { endOfMonth, format } from "date-fns";
+import { useRef, useState } from "react";
+import { dateMatchModifiers } from "react-day-picker";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function DateRangePicker({
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  locale = defaultLocale,
+  placeholder,
+  disabled,
+  startMonth,
+  endMonth,
+  invalid,
+  size,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  dir,
+  columnsSide,
+  id,
+  from: growFrom,
+  effect,
+  hideSource,
+  tier,
+  className
+}) {
+  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
+  const [open, setOpenState] = useControllableState(openProp, defaultOpen, onOpenChange);
+  const [picking, setPicking] = useState(false);
+  const fromInput = useRef(null);
+  const off = typeof disabled === "boolean" && disabled;
+  const days = off ? undefined : disabled;
+  const from = value?.from;
+  const to = value?.to;
+  const setOpen = (next) => {
+    setPicking(false);
+    setOpenState(next);
+  };
+  const allowed = (date) => (!startMonth || date >= startMonth) && (!endMonth || date <= endOfMonth(endMonth)) && !(days && dateMatchModifiers(date, days));
+  const pick = (day) => {
+    if (!picking || !from) {
+      setValue({ from: day, to: undefined });
+      setPicking(true);
+      return;
+    }
+    setValue(day < from ? { from: day, to: from } : { from, to: day });
+    setOpen(false);
+  };
+  const readEnd = (end) => (text) => {
+    if (!text.trim()) {
+      setValue(end === "from" ? null : from ? { from, to: undefined } : null);
+      return true;
+    }
+    const date = parseDateText(text, locale, (end === "from" ? from : to) ?? undefined);
+    if (!date || !allowed(date))
+      return false;
+    if (end === "from")
+      setValue({ from: date, to: to && to >= date ? to : undefined });
+    else if (!from || date < from)
+      return false;
+    else
+      setValue({ from, to: date });
+    return true;
+  };
+  const display = from ? to ? new Intl.DateTimeFormat(locale.code, { dateStyle: "medium" }).formatRange(from, to) : `${format(from, "PP", { locale })} –` : "";
+  const header = /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(PickerInput, {
+        ref: fromInput,
+        "aria-label": "Start date",
+        placeholder,
+        formatted: from ? format(from, "PP", { locale }) : "",
+        onText: readEnd("from"),
+        onEnter: () => setOpen(false),
+        className: "min-w-0 flex-1"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        "aria-hidden": true,
+        className: "px-0.5 text-muted-foreground",
+        children: "–"
+      }),
+      /* @__PURE__ */ jsx(PickerInput, {
+        "aria-label": "End date",
+        formatted: to ? format(to, "PP", { locale }) : "",
+        onText: readEnd("to"),
+        onEnter: () => setOpen(false),
+        className: "min-w-0 flex-1"
+      })
+    ]
+  });
+  return /* @__PURE__ */ jsx(PickerShell, {
+    open,
+    onOpenChange: setOpen,
+    size,
+    invalid,
+    disabled: off,
+    icon: "calendar",
+    display,
+    placeholder,
+    header,
+    initialFocus: fromInput,
+    id,
+    dir,
+    from: growFrom,
+    effect,
+    hideSource,
+    tier,
+    className,
+    children: /* @__PURE__ */ jsx(calendar_default, {
+      mode: "range",
+      locale,
+      selected: value ?? undefined,
+      onSelect: (_, day) => pick(day),
+      disabled: days,
+      startMonth,
+      endMonth,
+      dir,
+      columnsSide
+    })
+  });
+}
+var date_range_picker_default = DateRangePicker;
+
+export { DateRangePicker, date_range_picker_default };

package/dist/shared/components-y3cqdrgy.js

@@ -0,0 +1,291 @@
+import {
+  SelectionBackgrounds,
+  useMergeSplitBlocks,
+  useSelectionRuns
+} from "./components-rc63qsy6.js";
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/checkbox-group/index.tsx
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckboxGroupContext = createContext(null);
+function useCheckboxGroup() {
+  const ctx = useContext(CheckboxGroupContext);
+  if (!ctx)
+    throw new Error("useCheckboxGroup must be used within a CheckboxGroup");
+  return ctx;
+}
+var CheckboxGroup = forwardRef(({
+  children,
+  checkedIndices: checkedIndicesProp,
+  defaultCheckedIndices,
+  onCheckedIndicesChange,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const [checkedIndices, setCheckedIndices] = useControllableState(checkedIndicesProp, new Set(defaultCheckedIndices), onCheckedIndicesChange);
+  const setItemChecked = useCallback((index, checked) => {
+    setCheckedIndices((prev) => {
+      if (prev.has(index) === checked)
+        return prev;
+      const next = new Set(prev);
+      if (checked)
+        next.add(index);
+      else
+        next.delete(index);
+      return next;
+    });
+  }, [setCheckedIndices]);
+  const hover = useFluidHover(containerRef);
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
+  const checkedGroups = useSelectionRuns([...checkedIndices]);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const shape = useShape();
+  const blocks = useMergeSplitBlocks(checkedGroups, itemRects, shape.mergedRadius);
+  const group = /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+    value: { registerItem, activeIndex, checkedIndices, setItemChecked },
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      onMouseEnter: handlers.onMouseEnter,
+      onMouseMove: handlers.onMouseMove,
+      onMouseLeave: handlers.onMouseLeave,
+      onClick: handlers.onClick,
+      onFocus: (e) => {
+        const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+        if (indexAttr != null) {
+          const idx = Number(indexAttr);
+          setActiveIndex(idx);
+          setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+        }
+      },
+      onBlur: (e) => {
+        if (containerRef.current?.contains(e.relatedTarget))
+          return;
+        setFocusedIndex(null);
+        setActiveIndex(null);
+      },
+      onKeyDown: (e) => {
+        const items = Array.from(containerRef.current?.querySelectorAll("[data-fluid-hover-index]") ?? []);
+        const currentIdx = items.indexOf(e.target);
+        if (currentIdx === -1)
+          return;
+        if (["ArrowDown", "ArrowUp"].includes(e.key)) {
+          e.preventDefault();
+          const next = e.key === "ArrowDown" ? (currentIdx + 1) % items.length : (currentIdx - 1 + items.length) % items.length;
+          items[next]?.focus();
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        }
+      },
+      role: "group",
+      className: cn("relative flex flex-col w-72 max-w-full select-none", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectionBackgrounds, {
+          blocks
+        }),
+        /* @__PURE__ */ jsx(FluidHoverHighlight, {
+          hover,
+          className: shape.bg
+        }),
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+            className: `absolute ${shape.focusRing} pointer-events-none z-20 border border-focus-ring`,
+            initial: false,
+            animate: {
+              left: focusRect.left - 2,
+              top: focusRect.top - 2,
+              width: focusRect.width + 4,
+              height: focusRect.height + 4
+            },
+            exit: { opacity: 0, transition: spring.fast.exit },
+            transition: {
+              ...spring.fast,
+              opacity: { duration: spring.fast.duration }
+            }
+          })
+        }),
+        children
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: group
+  }) : group;
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+var CheckboxItem = forwardRef(({ label, index, checked: checkedProp, onToggle: onToggleProp, className, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const hasMounted = useRef(false);
+  const { registerItem, activeIndex, checkedIndices, setItemChecked } = useCheckboxGroup();
+  const checked = checkedProp ?? checkedIndices.has(index);
+  const onToggle = () => {
+    onToggleProp?.();
+    setItemChecked(index, !checked);
+  };
+  useRegisterFluidHoverItem(registerItem, index, internalRef);
+  useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  const isActive = activeIndex === index;
+  const skipAnimation = !hasMounted.current;
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("div", {
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    "data-fluid-hover-index": index,
+    tabIndex: 0,
+    role: "checkbox",
+    "aria-checked": checked,
+    "aria-label": label,
+    onClick: onToggle,
+    onMouseDown: (e) => {
+      const interactive = e.target.closest('button:not([tabindex="-1"]), a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (interactive && interactive !== e.currentTarget)
+        return;
+      e.preventDefault();
+      e.currentTarget.focus();
+    },
+    onKeyDown: (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onToggle();
+      }
+    },
+    className: cn(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none`, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(CheckboxPrimitive.Root, {
+        checked,
+        onCheckedChange: () => onToggle(),
+        tabIndex: -1,
+        "aria-hidden": true,
+        className: cn("relative shrink-0 appearance-none bg-transparent p-0 border-0 outline-none cursor-pointer", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: cn("absolute inset-0 border-solid transition-all duration-fast", compact ? "rounded-sm" : "rounded-box", checked ? "border-[1.5px] border-transparent" : isActive ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
+          }),
+          /* @__PURE__ */ jsx(AnimatePresence, {
+            children: checked && /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+              keepMounted: true,
+              render: (indicatorProps) => {
+                const {
+                  style: _s,
+                  onDrag: _onDrag,
+                  onDragStart: _onDragStart,
+                  onDragEnd: _onDragEnd,
+                  onAnimationStart: _onAnimationStart,
+                  onAnimationEnd: _onAnimationEnd,
+                  onAnimationIteration: _onAnimationIteration,
+                  ...rest
+                } = indicatorProps;
+                return /* @__PURE__ */ jsx(motion.svg, {
+                  ...rest,
+                  width: compact ? 16 : 18,
+                  height: compact ? 16 : 18,
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-foreground",
+                  initial: { opacity: 1 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 1 },
+                  children: /* @__PURE__ */ jsx(motion.path, {
+                    d: "M6 12L10 16L18 8",
+                    initial: { pathLength: skipAnimation ? 1 : 0 },
+                    animate: {
+                      pathLength: 1,
+                      transition: { duration: spring.fast.duration, ease: "easeOut" }
+                    },
+                    exit: {
+                      pathLength: 0,
+                      transition: { duration: 0.04, ease: "easeIn" }
+                    }
+                  })
+                });
+              }
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: cn("inline-grid", sizeClasses.text),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
+            "aria-hidden": "true",
+            children: label
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: cn("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", checked || isActive ? "text-foreground" : "text-muted-foreground", checked ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      })
+    ]
+  });
+});
+CheckboxItem.displayName = "CheckboxItem";
+Object.assign(CheckboxGroup, { Item: CheckboxItem });
+var checkbox_group_default = CheckboxGroup;
+
+export { CheckboxGroup, CheckboxItem, checkbox_group_default };