@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-9jvzzvt1.js

@@ -0,0 +1,198 @@
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.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;
+}
+
+// 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 = useFluidHover2(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: cn2("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: cn2("relative flex p-1", horizontal ? "w-max flex-row" : "flex-col"),
+      children: [
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+          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);
+  useRegisterFluidHoverItem2(registerItem, index, ref);
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  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: cn2("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-apdwtweq.js

@@ -0,0 +1,484 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+
+// components/card/index.tsx
+import {
+  Children,
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var CardGroupContext = createContext(null);
+var CardContext = createContext({
+  emphasized: false,
+  orientation: "card",
+  clickable: false,
+  hasImage: false
+});
+var CardGroup2 = forwardRef(({
+  orientation = "card",
+  columns = 1,
+  border = "none",
+  separated = false,
+  fluidHover = true,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const shape = useShape();
+  const axis = columns > 1 ? "xy" : "y";
+  const hover = useFluidHover2(containerRef, { axis, gapClick: { maxDistance: 16 } });
+  const { activeIndex, handlers, registerItem } = hover;
+  const childArray = Children.toArray(children).filter(isValidElement);
+  const count = childArray.length;
+  const indexed = childArray.map((child, i) => cloneElement(child, { index: i }));
+  const selectedIndex = childArray.findIndex((child) => child.props.selected);
+  const outlined = border === "outlined";
+  const divided = !separated;
+  const contextValue = useMemo(() => ({
+    registerItem,
+    activeIndex,
+    selectedIndex,
+    orientation,
+    columns,
+    count,
+    separated,
+    divided,
+    outlined
+  }), [registerItem, activeIndex, selectedIndex, orientation, columns, count, separated, divided, outlined]);
+  return /* @__PURE__ */ jsx(CardGroupContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      ...props,
+      "data-slot": "card-group",
+      "data-orientation": orientation,
+      className: cn2("relative grid", outlined && !separated && `border border-border/60 overflow-hidden ${shape.container}`, separated ? "gap-2" : "gap-0", className),
+      style: {
+        gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`
+      },
+      onMouseEnter: fluidHover ? handlers.onMouseEnter : undefined,
+      onMouseMove: fluidHover ? handlers.onMouseMove : undefined,
+      onMouseLeave: fluidHover ? handlers.onMouseLeave : undefined,
+      onClick: fluidHover ? handlers.onClick : undefined,
+      children: [
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+          hover,
+          hidden: !fluidHover,
+          className: cn2("z-0", shape.container)
+        }),
+        indexed
+      ]
+    })
+  });
+});
+CardGroup2.displayName = "CardGroup";
+var Card2 = forwardRef(({
+  onClick,
+  href,
+  external,
+  label,
+  selected = false,
+  disabled = false,
+  dismissible = false,
+  dismissOnHover = true,
+  onDismiss,
+  size,
+  index,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const internalRef = useRef(null);
+  const shape = useShape();
+  const sizeClasses = useSize2(size);
+  const compact = sizeClasses.variant === "compact";
+  const group = useContext(CardGroupContext);
+  const XIcon = useIcon("x");
+  const orientation = group?.orientation ?? "card";
+  const columns = group?.columns ?? 1;
+  const count = group?.count ?? 1;
+  const separated = group?.separated ?? true;
+  const divided = group?.divided ?? false;
+  const outlined = group?.outlined ?? false;
+  const activeIndex = group?.activeIndex ?? null;
+  const selectedIndex = group?.selectedIndex ?? -1;
+  const registerItem = href || onClick ? group?.registerItem : undefined;
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
+  const col = index !== undefined ? index % columns : 0;
+  const hasBelow = index !== undefined && index + columns < count;
+  const hasRight = index !== undefined && col < columns - 1 && index + 1 < count;
+  const self = index ?? -1;
+  const touchesBelow = (i) => i === self || i === self + columns;
+  const touchesRight = (i) => i === self || i === self + 1;
+  const showBottom = divided && hasBelow && !(touchesBelow(activeIndex ?? -1) || touchesBelow(selectedIndex));
+  const showRight = divided && hasRight && !(touchesRight(activeIndex ?? -1) || touchesRight(selectedIndex));
+  const isInline = orientation === "inline";
+  const isCardImage = (child) => isValidElement(child) && (child.type === CardImage2 || child.type?.displayName === "CardImage");
+  const hasImage = Children.toArray(children).some(isCardImage);
+  const inlineImage = isInline && hasImage;
+  const clickable = !!href || !!onClick;
+  const emphasized = selected;
+  const tileShape = !group ? cn2(shape.container, "overflow-hidden") : separated && outlined ? cn2(shape.container, "overflow-hidden border border-border/60") : "";
+  const overlay = clickable && !disabled ? href ? /* @__PURE__ */ jsx("a", {
+    href,
+    onClick,
+    target: external ? "_blank" : undefined,
+    rel: external ? "noopener noreferrer" : undefined,
+    "aria-label": label,
+    className: "absolute inset-0 z-20 outline-none focus-visible:ring-1 focus-visible:ring-focus-ring rounded-[inherit]"
+  }) : /* @__PURE__ */ jsx("button", {
+    type: "button",
+    onClick,
+    "aria-label": label,
+    "aria-pressed": selected || undefined,
+    className: "absolute inset-0 z-20 outline-none focus-visible:ring-1 focus-visible:ring-focus-ring rounded-[inherit]"
+  }) : null;
+  const cardContext = useMemo(() => ({ emphasized, orientation, clickable, hasImage }), [emphasized, orientation, clickable, hasImage]);
+  let body = children;
+  if (inlineImage) {
+    const parts = Children.toArray(children);
+    const image = parts.find(isCardImage);
+    const rest = parts.filter((part) => part !== image);
+    body = /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        image,
+        /* @__PURE__ */ jsx("div", {
+          className: cn2("flex min-w-0 flex-1 flex-col justify-center gap-2", compact ? "py-2.5 pr-3" : "py-3.5 pr-4"),
+          children: rest
+        })
+      ]
+    });
+  }
+  const card = /* @__PURE__ */ jsx(CardContext.Provider, {
+    value: cardContext,
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      "data-slot": "card",
+      "data-fluid-hover-index": index,
+      "data-selected": selected || undefined,
+      "data-orientation": orientation,
+      "aria-disabled": disabled || undefined,
+      className: cn2("group/card relative z-10 min-w-0 min-h-[60px]", inlineImage ? cn2("flex flex-row items-center", compact ? "gap-2.5" : "gap-3") : isInline ? cn2("flex flex-row items-center", compact ? "gap-2.5 pl-3" : "gap-3 pl-4") : cn2("flex flex-col", compact ? "pb-3" : "pb-4"), !group && clickable && !disabled && "transition-colors duration-fast hover:bg-hover", dismissible && isInline && (dismissOnHover ? "[&:hover_[data-slot=card-header]]:pr-10 [&:focus-within_[data-slot=card-header]]:pr-10" : "[&_[data-slot=card-header]]:pr-10"), tileShape, disabled && "opacity-50 pointer-events-none", className),
+      ...props,
+      children: [
+        selected && /* @__PURE__ */ jsx("span", {
+          "aria-hidden": true,
+          className: cn2("absolute inset-0 -z-10 bg-active pointer-events-none", shape.container)
+        }),
+        showBottom && /* @__PURE__ */ jsx("span", {
+          "aria-hidden": true,
+          className: "absolute inset-x-0 bottom-0 h-px bg-border/60 pointer-events-none -z-10"
+        }),
+        showRight && /* @__PURE__ */ jsx("span", {
+          "aria-hidden": true,
+          className: cn2("absolute top-0 right-0 w-px bg-border/60 pointer-events-none -z-10", showBottom ? "bottom-px" : "bottom-0")
+        }),
+        overlay,
+        body,
+        dismissible && /* @__PURE__ */ jsx("button", {
+          type: "button",
+          onClick: onDismiss,
+          "aria-label": "Dismiss",
+          className: cn2("absolute right-2 top-2 z-30 flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground cursor-pointer outline-none transition-colors duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring", hasImage ? "bg-card/70 backdrop-blur-sm hover:bg-card" : "hover:bg-hover", dismissOnHover && "pointer-events-none opacity-0 transition-opacity duration-fast group-hover/card:pointer-events-auto group-hover/card:opacity-100 group-focus-within/card:pointer-events-auto group-focus-within/card:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100", shape.button),
+          children: /* @__PURE__ */ jsx(XIcon, {
+            size: compact ? 13 : 15,
+            strokeWidth: 1.5
+          })
+        })
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: card
+  }) : card;
+});
+Card2.displayName = "Card";
+var CardHeader2 = forwardRef(({ className, ...props }, ref) => {
+  const { orientation, hasImage } = useContext(CardContext);
+  const inlineImage = orientation === "inline" && hasImage;
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    "data-slot": "card-header",
+    className: cn2("grid auto-rows-min items-start gap-1 has-data-[slot=card-action]:grid-cols-[1fr_auto]", inlineImage ? "min-w-0" : orientation === "inline" ? cn2("min-w-0 flex-1", compact ? "py-2.5" : "py-3.5") : compact ? "px-3 pt-3" : "px-4 pt-4", className),
+    ...props
+  });
+});
+CardHeader2.displayName = "CardHeader";
+var CardTitle2 = forwardRef(({ className, children, ...props }, ref) => {
+  const { emphasized, orientation } = useContext(CardContext);
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  const trim = orientation === "inline" ? "[text-box:trim-both_cap_alphabetic]" : "";
+  return /* @__PURE__ */ jsxs("span", {
+    ref,
+    "data-slot": "card-title",
+    className: cn2("inline-grid grid-cols-[minmax(0,1fr)] leading-snug", compact ? "text-subtitle-compact" : "text-subtitle", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: cn2("col-start-1 row-start-1 invisible min-w-0 overflow-hidden text-ellipsis", trim, "weight-semibold"),
+        "aria-hidden": "true",
+        children
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: cn2("col-start-1 row-start-1 min-w-0 overflow-hidden text-ellipsis text-foreground transition-[font-variation-settings] duration-fast", trim, emphasized ? "weight-semibold" : "weight-normal"),
+        children
+      })
+    ]
+  });
+});
+CardTitle2.displayName = "CardTitle";
+var CardDescription2 = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsx("p", {
+    ref,
+    "data-slot": "card-description",
+    className: cn2("leading-normal text-muted-foreground", compact ? "text-subtitle-compact" : "text-subtitle", className),
+    ...props
+  });
+});
+CardDescription2.displayName = "CardDescription";
+var CardAction2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  "data-slot": "card-action",
+  className: cn2("relative z-30 col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+  ...props
+}));
+CardAction2.displayName = "CardAction";
+var CardContent2 = forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useContext(CardContext);
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    "data-slot": "card-content",
+    className: cn2(orientation === "inline" ? "" : compact ? "px-3 pt-2.5" : "px-4 pt-3", className),
+    ...props
+  });
+});
+CardContent2.displayName = "CardContent";
+var CardFooter2 = forwardRef(({ className, ...props }, ref) => {
+  const { orientation, hasImage } = useContext(CardContext);
+  const inlineImage = orientation === "inline" && hasImage;
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    "data-slot": "card-footer",
+    className: cn2("relative z-30 flex items-center gap-1", inlineImage ? "flex-wrap" : orientation === "inline" ? cn2("shrink-0 ml-auto", compact ? "pr-3" : "pr-4") : cn2("flex-wrap", compact ? "px-3 pt-2.5" : "px-4 pt-3"), className),
+    ...props
+  });
+});
+CardFooter2.displayName = "CardFooter";
+function CardMedia2({ logo, logoAlt, icon: Icon, size = 22, className }) {
+  const { orientation } = useContext(CardContext);
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  const wrap = cn2(orientation === "inline" ? "" : "mb-2", className);
+  if (logo) {
+    const logos = Array.isArray(logo) ? logo : [logo];
+    return /* @__PURE__ */ jsx("span", {
+      "data-slot": "card-media",
+      className: cn2("inline-flex items-center gap-1.5 shrink-0", wrap),
+      children: logos.map((src, i) => /* @__PURE__ */ jsxs("span", {
+        className: "inline-flex items-center gap-1.5",
+        children: [
+          i > 0 && /* @__PURE__ */ jsx("span", {
+            "aria-hidden": true,
+            className: "w-2 h-px bg-border"
+          }),
+          /* @__PURE__ */ jsx("img", {
+            src,
+            alt: logoAlt ?? "",
+            width: size,
+            height: size,
+            className: cn2("object-contain", shape.bg),
+            style: { width: size, height: size }
+          })
+        ]
+      }, i))
+    });
+  }
+  if (Icon) {
+    return /* @__PURE__ */ jsx("span", {
+      "data-slot": "card-media",
+      className: cn2("inline-flex items-center justify-center shrink-0 size-8 bg-hover", shape.bg, wrap),
+      children: /* @__PURE__ */ jsx(Icon, {
+        size: compact ? 16 : 18,
+        strokeWidth: 1.5,
+        className: "text-muted-foreground"
+      })
+    });
+  }
+  return null;
+}
+function CardImage2({ src, alt, className }) {
+  const { orientation } = useContext(CardContext);
+  return /* @__PURE__ */ jsx("img", {
+    src,
+    alt: alt ?? "",
+    "data-slot": "card-image",
+    className: cn2("object-cover rounded-xs", orientation === "inline" ? "size-40 shrink-0" : "w-full aspect-[16/9]", className)
+  });
+}
+CardImage2.displayName = "CardImage";
+var CardEyebrow2 = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSize2().variant === "compact";
+  return /* @__PURE__ */ jsx("span", {
+    ref,
+    "data-slot": "card-eyebrow",
+    className: cn2(compact ? "text-caption-compact" : "text-caption", "uppercase tracking-wide text-muted-foreground", "weight-semibold", className),
+    ...props
+  });
+});
+CardEyebrow2.displayName = "CardEyebrow";
+function CardFeature2({ icon: Icon, title, description }) {
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("div", {
+    "data-slot": "card-feature",
+    className: cn2("flex items-start", sizeClasses.gap),
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: 1.5,
+        className: "mt-0.5 shrink-0 text-muted-foreground"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col gap-0.5 min-w-0",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cn2("text-foreground [text-box:trim-both_cap_alphabetic]", sizeClasses.text, "weight-medium"),
+            children: title
+          }),
+          description && /* @__PURE__ */ jsx("span", {
+            className: cn2("leading-relaxed text-muted-foreground", compact ? "text-caption-compact" : "text-caption"),
+            children: description
+          })
+        ]
+      })
+    ]
+  });
+}
+var CARD_BUTTON_VARIANTS = {
+  primary: "bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80",
+  secondary: "bg-accent text-foreground hover:bg-accent/80 active:bg-accent",
+  ghost: "text-muted-foreground hover:text-foreground hover:bg-hover active:bg-active",
+  link: "text-foreground underline-offset-4 hover:underline !px-0 !h-auto"
+};
+function CardButton2({
+  children,
+  onClick,
+  href,
+  variant = "ghost",
+  icon: Icon,
+  iconPosition,
+  external = false,
+  disabled = false
+}) {
+  const shape = useShape();
+  const ArrowRight = useIcon("arrow-right");
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  const position = iconPosition ?? (external ? "end" : "start");
+  const glyph = Icon ? /* @__PURE__ */ jsx(Icon, {
+    size: compact ? 12 : 14,
+    strokeWidth: 1.5,
+    className: "shrink-0 transition-[stroke-width] duration-fast group-hover/action:stroke-[2]"
+  }) : null;
+  const externalGlyph = external ? /* @__PURE__ */ jsx(ArrowRight, {
+    size: 13,
+    strokeWidth: 1.5,
+    className: "shrink-0 -rotate-45 transition-[stroke-width] duration-fast group-hover/action:stroke-[2]"
+  }) : null;
+  const inner = /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      position === "start" && glyph,
+      /* @__PURE__ */ jsx("span", {
+        className: "[text-box:trim-both_cap_alphabetic]",
+        children
+      }),
+      position === "end" && glyph,
+      externalGlyph
+    ]
+  });
+  const classes = cn2("group/action relative z-30 inline-flex items-center justify-center gap-1.5 h-7 px-2.5 cursor-pointer outline-none", compact ? "text-caption-compact" : "text-caption", "weight-medium", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring", "disabled:opacity-50 disabled:pointer-events-none", shape.button, CARD_BUTTON_VARIANTS[variant]);
+  if (href) {
+    return /* @__PURE__ */ jsx("a", {
+      href,
+      onClick,
+      target: external ? "_blank" : undefined,
+      rel: external ? "noopener noreferrer" : undefined,
+      className: classes,
+      children: inner
+    });
+  }
+  return /* @__PURE__ */ jsx("button", {
+    type: "button",
+    onClick,
+    disabled,
+    className: classes,
+    children: inner
+  });
+}
+Object.assign(Card2, {
+  Group: CardGroup2,
+  Header: CardHeader2,
+  Title: CardTitle2,
+  Description: CardDescription2,
+  Action: CardAction2,
+  Content: CardContent2,
+  Footer: CardFooter2,
+  Media: CardMedia2,
+  Image: CardImage2,
+  Eyebrow: CardEyebrow2,
+  Feature: CardFeature2,
+  Button: CardButton2
+});
+var card_default = Card2;
+
+export { CardGroup2, Card2, CardHeader2, CardTitle2, CardDescription2, CardAction2, CardContent2, CardFooter2, CardMedia2, CardImage2, CardEyebrow2, CardFeature2, CardButton2, card_default };