@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-bf2d9k02.js

@@ -0,0 +1,484 @@
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  useIcon
+} from "./components-m5br529r.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.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 CardGroup = 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 = useFluidHover(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: cn("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(FluidHoverHighlight, {
+          hover,
+          hidden: !fluidHover,
+          className: cn("z-0", shape.container)
+        }),
+        indexed
+      ]
+    })
+  });
+});
+CardGroup.displayName = "CardGroup";
+var Card = 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 = useSize(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;
+  useRegisterFluidHoverItem(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 === CardImage || 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 ? cn(shape.container, "overflow-hidden") : separated && outlined ? cn(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: cn("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: cn("group/card relative z-10 min-w-0 min-h-[60px]", inlineImage ? cn("flex flex-row items-center", compact ? "gap-2.5" : "gap-3") : isInline ? cn("flex flex-row items-center", compact ? "gap-2.5 pl-3" : "gap-3 pl-4") : cn("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: cn("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: cn("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: cn("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(SizeProvider, {
+    size,
+    children: card
+  }) : card;
+});
+Card.displayName = "Card";
+var CardHeader = forwardRef(({ className, ...props }, ref) => {
+  const { orientation, hasImage } = useContext(CardContext);
+  const inlineImage = orientation === "inline" && hasImage;
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    "data-slot": "card-header",
+    className: cn("grid auto-rows-min items-start gap-1 has-data-[slot=card-action]:grid-cols-[1fr_auto]", inlineImage ? "min-w-0" : orientation === "inline" ? cn("min-w-0 flex-1", compact ? "py-2.5" : "py-3.5") : compact ? "px-3 pt-3" : "px-4 pt-4", className),
+    ...props
+  });
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef(({ className, children, ...props }, ref) => {
+  const { emphasized, orientation } = useContext(CardContext);
+  const sizeClasses = useSize();
+  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: cn("inline-grid grid-cols-[minmax(0,1fr)] leading-snug", compact ? "text-subtitle-compact" : "text-subtitle", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: cn("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: cn("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
+      })
+    ]
+  });
+});
+CardTitle.displayName = "CardTitle";
+var CardDescription = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsx("p", {
+    ref,
+    "data-slot": "card-description",
+    className: cn("leading-normal text-muted-foreground", compact ? "text-subtitle-compact" : "text-subtitle", className),
+    ...props
+  });
+});
+CardDescription.displayName = "CardDescription";
+var CardAction = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  "data-slot": "card-action",
+  className: cn("relative z-30 col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+  ...props
+}));
+CardAction.displayName = "CardAction";
+var CardContent = forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useContext(CardContext);
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    "data-slot": "card-content",
+    className: cn(orientation === "inline" ? "" : compact ? "px-3 pt-2.5" : "px-4 pt-3", className),
+    ...props
+  });
+});
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef(({ className, ...props }, ref) => {
+  const { orientation, hasImage } = useContext(CardContext);
+  const inlineImage = orientation === "inline" && hasImage;
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    "data-slot": "card-footer",
+    className: cn("relative z-30 flex items-center gap-1", inlineImage ? "flex-wrap" : orientation === "inline" ? cn("shrink-0 ml-auto", compact ? "pr-3" : "pr-4") : cn("flex-wrap", compact ? "px-3 pt-2.5" : "px-4 pt-3"), className),
+    ...props
+  });
+});
+CardFooter.displayName = "CardFooter";
+function CardMedia({ logo, logoAlt, icon: Icon, size = 22, className }) {
+  const { orientation } = useContext(CardContext);
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  const wrap = cn(orientation === "inline" ? "" : "mb-2", className);
+  if (logo) {
+    const logos = Array.isArray(logo) ? logo : [logo];
+    return /* @__PURE__ */ jsx("span", {
+      "data-slot": "card-media",
+      className: cn("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: cn("object-contain", shape.bg),
+            style: { width: size, height: size }
+          })
+        ]
+      }, i))
+    });
+  }
+  if (Icon) {
+    return /* @__PURE__ */ jsx("span", {
+      "data-slot": "card-media",
+      className: cn("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 CardImage({ src, alt, className }) {
+  const { orientation } = useContext(CardContext);
+  return /* @__PURE__ */ jsx("img", {
+    src,
+    alt: alt ?? "",
+    "data-slot": "card-image",
+    className: cn("object-cover rounded-xs", orientation === "inline" ? "size-40 shrink-0" : "w-full aspect-[16/9]", className)
+  });
+}
+CardImage.displayName = "CardImage";
+var CardEyebrow = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSize().variant === "compact";
+  return /* @__PURE__ */ jsx("span", {
+    ref,
+    "data-slot": "card-eyebrow",
+    className: cn(compact ? "text-caption-compact" : "text-caption", "uppercase tracking-wide text-muted-foreground", "weight-semibold", className),
+    ...props
+  });
+});
+CardEyebrow.displayName = "CardEyebrow";
+function CardFeature({ icon: Icon, title, description }) {
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("div", {
+    "data-slot": "card-feature",
+    className: cn("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: cn("text-foreground [text-box:trim-both_cap_alphabetic]", sizeClasses.text, "weight-medium"),
+            children: title
+          }),
+          description && /* @__PURE__ */ jsx("span", {
+            className: cn("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 CardButton({
+  children,
+  onClick,
+  href,
+  variant = "ghost",
+  icon: Icon,
+  iconPosition,
+  external = false,
+  disabled = false
+}) {
+  const shape = useShape();
+  const ArrowRight = useIcon("arrow-right");
+  const sizeClasses = useSize();
+  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 = cn("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(Card, {
+  Group: CardGroup,
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Action: CardAction,
+  Content: CardContent,
+  Footer: CardFooter,
+  Media: CardMedia,
+  Image: CardImage,
+  Eyebrow: CardEyebrow,
+  Feature: CardFeature,
+  Button: CardButton
+});
+var card_default = Card;
+
+export { CardGroup, Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, CardMedia, CardImage, CardEyebrow, CardFeature, CardButton, card_default };

package/dist/shared/components-bkvb6nem.js

@@ -0,0 +1,63 @@
+import {
+  scroll_area_default
+} from "./components-ed7cmssr.js";
+import {
+  SURFACE_BG,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// primitives/code/index.tsx
+import { Fragment } from "react";
+import { parse } from "sugar-high/core";
+import { lang, languages } from "sugar-high/lang";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TOKEN_CLASS = {
+  keyword: "text-syntax-keyword",
+  string: "text-syntax-string",
+  class: "text-syntax-class",
+  entity: "text-syntax-entity",
+  property: "text-syntax-property",
+  comment: "text-syntax-comment italic",
+  identifier: "text-syntax-identifier",
+  jsxliterals: "text-syntax-jsx",
+  sign: "text-syntax-sign",
+  break: "",
+  space: ""
+};
+function highlight(source, language) {
+  const config = languages.find((l) => l.id === language)?.config;
+  return parse(source, config).lines.map((line) => /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      line.index > 0 && `
+`,
+      line.tokens.map((t, i) => /* @__PURE__ */ jsx("span", {
+        className: TOKEN_CLASS[t.type],
+        children: t.value
+      }, i))
+    ]
+  }, line.index));
+}
+function Code({
+  children,
+  language = "tsx",
+  className
+}) {
+  const level = Math.min(useSurface() + 1, 8);
+  const source = children.trim();
+  const id = lang(language);
+  return /* @__PURE__ */ jsx(scroll_area_default, {
+    orientation: "horizontal",
+    viewportClassName: "scroll-fade-x",
+    className: cn("rounded-xl", SURFACE_BG[level], className),
+    children: /* @__PURE__ */ jsx("pre", {
+      className: "m-0 w-max min-w-full p-4 font-mono text-caption leading-relaxed text-foreground",
+      children: /* @__PURE__ */ jsx("code", {
+        children: id && id !== "plaintext" ? highlight(source, id) : source
+      })
+    })
+  });
+}
+export { Code };