@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-ny774h8p.js

@@ -0,0 +1,293 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  GooIndicator
+} from "./components-chacnk61.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/inputs/radio-group/index.tsx
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+  const ctx = useContext(RadioGroupContext);
+  if (!ctx)
+    throw new Error("useRadioGroup must be used within a RadioGroup");
+  return ctx;
+}
+var RadioGroup2 = forwardRef(({
+  children,
+  selectedIndex: selectedIndexProp,
+  defaultSelectedIndex,
+  onSelectedIndexChange,
+  value: valueProp,
+  defaultValue,
+  onValueChange: onValueChangeProp,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const [selectedIndex, selectIndex] = useControllableState(selectedIndexProp, defaultSelectedIndex, onSelectedIndexChange);
+  const [value, onValueChange] = useControllableState(valueProp, defaultValue, onValueChangeProp);
+  const containerRef = useRef(null);
+  const childValues = Children.toArray(children).filter(isValidElement).map((child) => child.props.value);
+  const hover = useFluidHover2(containerRef);
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const resolvedSelectedIndex = value !== undefined ? childValues.findIndex((childValue) => childValue === value) : selectedIndex ?? -1;
+  const hasSelection = resolvedSelectedIndex >= 0 || Children.toArray(children).filter(isValidElement).some((child) => child.props.selected === true);
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const selectedRect = resolvedSelectedIndex >= 0 ? itemRects[resolvedSelectedIndex] : null;
+  const shape = useShape();
+  const content = /* @__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;
+      const preventBaseUI = e.preventBaseUIHandler;
+      if (["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(e.key)) {
+        e.preventDefault();
+        preventBaseUI?.();
+        const next = ["ArrowDown", "ArrowRight"].includes(e.key) ? (currentIdx + 1) % items.length : (currentIdx - 1 + items.length) % items.length;
+        items[next]?.focus();
+        items[next]?.click();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        preventBaseUI?.();
+        items[0]?.focus();
+        items[0]?.click();
+      } else if (e.key === "End") {
+        e.preventDefault();
+        preventBaseUI?.();
+        items[items.length - 1]?.focus();
+        items[items.length - 1]?.click();
+      }
+    },
+    role: "radiogroup",
+    className: cn2("relative flex flex-col w-72 max-w-full select-none", className),
+    ...props,
+    children: [
+      selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+        rect: selectedRect,
+        className: cn2("bg-active", shape.bg)
+      }),
+      /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+        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: spring2.fast.exit },
+          transition: {
+            ...spring2.fast,
+            opacity: { duration: spring2.fast.duration }
+          }
+        })
+      }),
+      children
+    ]
+  });
+  const withSize = (node) => size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: node
+  }) : node;
+  if (value !== undefined) {
+    return withSize(/* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+      value: {
+        registerItem,
+        activeIndex,
+        selectedIndex: resolvedSelectedIndex >= 0 ? resolvedSelectedIndex : null,
+        selectedValue: value,
+        onValueChange,
+        hasSelection,
+        selectIndex
+      },
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive, {
+        value,
+        onValueChange: (v) => onValueChange(v),
+        render: content
+      })
+    }));
+  }
+  return withSize(/* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+    value: {
+      registerItem,
+      activeIndex,
+      selectedIndex: selectedIndex ?? null,
+      hasSelection,
+      selectIndex
+    },
+    children: content
+  }));
+});
+RadioGroup2.displayName = "RadioGroup";
+var RadioItem2 = forwardRef(({ label, index, selected, onSelect, value, className, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const hasMounted = useRef(false);
+  const { registerItem, activeIndex, selectedIndex, selectedValue, onValueChange, hasSelection, selectIndex } = useRadioGroupContext();
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
+  useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  const isActive = activeIndex === index;
+  const skipAnimation = !hasMounted.current;
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  const isSelected = value !== undefined && selectedValue !== undefined ? selectedValue === value : selected ?? selectedIndex === index;
+  const handleSelect = () => {
+    if (value !== undefined) {
+      onValueChange?.(value);
+    }
+    onSelect?.();
+    selectIndex(index);
+  };
+  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: isSelected ? 0 : !hasSelection && index === 0 ? 0 : -1,
+    role: "radio",
+    "aria-checked": isSelected,
+    "aria-label": label,
+    onClick: handleSelect,
+    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();
+        handleSelect();
+      }
+    },
+    className: cn2(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none`, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: cn2("relative shrink-0", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: cn2("absolute inset-0 rounded-full border-solid transition-all duration-fast", isSelected ? "border-[1.5px] border-transparent" : isActive ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
+          }),
+          /* @__PURE__ */ jsx(AnimatePresence, {
+            children: isSelected && /* @__PURE__ */ jsx(motion.div, {
+              className: "absolute inset-0 flex items-center justify-center",
+              initial: {
+                opacity: skipAnimation ? 1 : 0,
+                scale: skipAnimation ? 1 : 0.3
+              },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.3, transition: { duration: 0.04 } },
+              transition: spring2.fast,
+              children: /* @__PURE__ */ jsx("div", {
+                className: cn2("rounded-full bg-foreground", compact ? "w-[7px] h-[7px]" : "w-[8px] h-[8px]")
+              })
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: cn2("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: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isSelected || isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      }),
+      value !== undefined && /* @__PURE__ */ jsx(RadioPrimitive.Root, {
+        value,
+        className: "sr-only",
+        tabIndex: -1,
+        "aria-hidden": true
+      })
+    ]
+  });
+});
+RadioItem2.displayName = "RadioItem";
+Object.assign(RadioGroup2, { Item: RadioItem2 });
+var radio_group_default = RadioGroup2;
+
+export { RadioGroup2, RadioItem2, radio_group_default };

package/dist/shared/components-q4daerx0.js

@@ -0,0 +1,58 @@
+import {
+  fieldLabel,
+  ScrollColumn
+} from "./components-9jvzzvt1.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+
+// components/inputs/date-time/time-columns.tsx
+import { format } from "date-fns";
+import { useMemo } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var pad = (n) => String(n).padStart(2, "0");
+function TimeColumns({
+  value,
+  onValueChange,
+  hourCycle,
+  minuteStep,
+  locale,
+  orientation,
+  fill = false
+}) {
+  const twelve = hourCycle === "h12" || hourCycle === "h11";
+  const hours = value?.hours ?? null;
+  const minutes = value?.minutes ?? 0;
+  const hourOptions = useMemo(() => Array.from({ length: 24 }, (_, h) => ({
+    value: h,
+    label: twelve ? format(new Date(2000, 0, 1, h), hourCycle === "h11" ? "K a" : "h a", { locale }) : pad(h)
+  })), [twelve, hourCycle, locale]);
+  const minuteOptions = useMemo(() => Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({
+    value: i * minuteStep,
+    label: pad(i * minuteStep)
+  })), [minuteStep]);
+  const vertical = orientation === "vertical";
+  const width = (fixed) => !vertical ? "w-full" : fill ? "min-w-0 flex-1" : cn2("shrink-0", fixed);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(ScrollColumn, {
+        label: fieldLabel(locale, "hour"),
+        options: hourOptions,
+        value: hours,
+        onValueChange: (h) => onValueChange({ hours: h, minutes }),
+        orientation,
+        className: width(twelve ? "w-15" : "w-12")
+      }),
+      /* @__PURE__ */ jsx(ScrollColumn, {
+        label: fieldLabel(locale, "minute"),
+        options: minuteOptions,
+        value: hours === null ? null : minutes,
+        onValueChange: (m) => onValueChange({ hours: hours ?? 0, minutes: m }),
+        orientation,
+        className: width("w-12")
+      })
+    ]
+  });
+}
+
+export { pad, TimeColumns };

package/dist/shared/components-q5xj5c16.js

@@ -0,0 +1,79 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  button_default
+} from "./components-b2wyq2cq.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// primitives/motion/index.tsx
+import { MotionConfig, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Motion2({
+  tier = "moderate",
+  show,
+  defaultShow = true,
+  onShowChange,
+  sameExit = false,
+  reducedMotion = "user",
+  className,
+  children
+}) {
+  const [shown, setShown] = useControllableState(show, defaultShow, onShowChange);
+  const enter = spring2[tier];
+  const leave = sameExit ? enter : enter.exit;
+  return /* @__PURE__ */ jsx(MotionConfig, {
+    reducedMotion,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: cn2("flex flex-col items-center gap-3", className),
+      children: [
+        /* @__PURE__ */ jsx(motion.div, {
+          initial: false,
+          "aria-hidden": shown ? undefined : true,
+          animate: shown ? { opacity: 1, scale: 1, y: 0, visibility: "visible", transition: enter } : {
+            opacity: 0,
+            scale: 0.95,
+            y: 6,
+            visibility: "visible",
+            transition: leave,
+            transitionEnd: { visibility: "hidden" }
+          },
+          children
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-1",
+          children: [
+            /* @__PURE__ */ jsx(button_default, {
+              variant: "tertiary",
+              size: "compact",
+              "aria-pressed": shown,
+              "aria-label": `${shown ? "Hide" : "Show"} (spring.${tier})`,
+              onClick: () => setShown((v) => !v),
+              children: shown ? "Hide" : "Show"
+            }),
+            /* @__PURE__ */ jsxs("span", {
+              className: "font-mono text-caption-compact text-muted-foreground",
+              children: [
+                "spring.",
+                tier,
+                " ",
+                enter.duration,
+                "s",
+                enter.bounce ? ` bounce ${enter.bounce}` : "",
+                " · exit ",
+                leave.duration,
+                "s"
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+export { Motion2 };

package/dist/shared/components-rr7a6ja9.js

@@ -0,0 +1,160 @@
+import {
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useDialogState2,
+  DialogTrigger2,
+  DialogClose2,
+  DialogHeader2,
+  DialogFooter2,
+  DialogTitle2,
+  DialogDescription2,
+  DialogState2
+} from "./components-zfnmn5d4.js";
+
+// components/overlays/sheet/index.tsx
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SheetContext = createContext({ side: "bottom", swiped: false });
+var SWIPE = {
+  top: "up",
+  right: "right",
+  bottom: "down",
+  left: "left"
+};
+var PLACEMENT = {
+  top: "inset-x-2 top-2 mx-auto max-w-[36rem] max-h-[calc(100dvh-4rem)]",
+  bottom: "inset-x-2 bottom-2 mx-auto max-w-[36rem] max-h-[calc(100dvh-4rem)]",
+  left: "inset-y-2 left-2 w-[min(24rem,calc(100%-1rem))]",
+  right: "inset-y-2 right-2 w-[min(24rem,calc(100%-1rem))]"
+};
+var DRAWER_OFFSET = 4;
+var INDENT_RADIUS = { pill: "data-[active]:rounded-3xl", rounded: "data-[active]:rounded-xl" };
+var SheetContent2 = forwardRef(({ from, effect, hideSource, tier, container, className, children, ...props }, ref) => {
+  const { side, swiped } = useContext(SheetContext);
+  const { open, origin } = useDialogState2();
+  const morph = useMorph(open, origin, {
+    from: from ?? side,
+    effect,
+    hideSource,
+    tier,
+    exit: swiped ? { effect: "slide", from: side } : undefined
+  });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  const shape = useShape();
+  const level = Math.min(useSurface2() + DRAWER_OFFSET, 8);
+  const edge = side === "top" || side === "bottom";
+  return /* @__PURE__ */ jsxs(DrawerPrimitive.Portal, {
+    container: container ?? undefined,
+    children: [
+      /* @__PURE__ */ jsx(DrawerPrimitive.Backdrop, {
+        render: /* @__PURE__ */ jsx(motion.div, {
+          style: { opacity: morph.progress }
+        }),
+        className: cn2(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
+      }),
+      /* @__PURE__ */ jsx(DrawerPrimitive.Viewport, {
+        className: cn2(container ? "absolute" : "fixed", "inset-0 z-50"),
+        children: /* @__PURE__ */ jsx(DrawerPrimitive.Popup, {
+          ref: morph.popupRef,
+          ...props,
+          className: cn2("absolute flex flex-col focus:outline-none", PLACEMENT[side], "[transform:translate(var(--drawer-swipe-movement-x),calc(var(--drawer-snap-point-offset)_+_var(--drawer-swipe-movement-y)))]", "transition-[transform] duration-slow"),
+          children: /* @__PURE__ */ jsx(SurfaceProvider2, {
+            value: level,
+            children: /* @__PURE__ */ jsxs(MorphSurface, {
+              morph,
+              bg: SURFACE_BG[level],
+              shadow: SURFACE_SHADOW[level],
+              radius: shape.container,
+              className: cn2("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-6", edge && "pt-3", className),
+              children: [
+                edge && /* @__PURE__ */ jsx("div", {
+                  "aria-hidden": true,
+                  className: "mx-auto h-1 w-10 shrink-0 rounded-full bg-overlay/16"
+                }),
+                children
+              ]
+            })
+          })
+        })
+      })
+    ]
+  });
+});
+SheetContent2.displayName = "SheetContent";
+var SheetIndent2 = forwardRef(({ className, ...props }, ref) => {
+  const shape = useShape();
+  return /* @__PURE__ */ jsx(DrawerPrimitive.Indent, {
+    ref,
+    className: cn2("origin-top transition-[transform] duration-slow data-[active]:scale-[0.96] data-[active]:overflow-hidden", INDENT_RADIUS[shape.variant], className),
+    ...props
+  });
+});
+SheetIndent2.displayName = "SheetIndent";
+function Sheet2({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  side = "bottom",
+  snapPoints,
+  defaultSnapPoint,
+  modal = true
+}) {
+  const [swiped, setSwiped] = useState(false);
+  return /* @__PURE__ */ jsx(SheetContext.Provider, {
+    value: { side, swiped },
+    children: /* @__PURE__ */ jsx(DialogState2, {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: (root) => /* @__PURE__ */ jsx(DrawerPrimitive.Root, {
+        open: root.open,
+        onOpenChange: (next, details) => {
+          setSwiped(!next && details.reason === "swipe");
+          root.onOpenChange(next, details);
+        },
+        swipeDirection: SWIPE[side],
+        snapPoints,
+        defaultSnapPoint,
+        modal,
+        children
+      })
+    })
+  });
+}
+Sheet2.Trigger = DialogTrigger2;
+Sheet2.Content = SheetContent2;
+Sheet2.Header = DialogHeader2;
+Sheet2.Footer = DialogFooter2;
+Sheet2.Title = DialogTitle2;
+Sheet2.Description = DialogDescription2;
+Sheet2.Close = DialogClose2;
+Sheet2.Provider = DrawerPrimitive.Provider;
+Sheet2.Indent = SheetIndent2;
+var sheet_default = Sheet2;
+
+export { SheetContent2, SheetIndent2, Sheet2, sheet_default };

package/dist/shared/components-s2bz1xpk.js

@@ -0,0 +1,63 @@
+import {
+  SURFACE_BG,
+  useSurface2
+} from "./components-zx6b6yby.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  scroll_area_default
+} from "./components-hawvy2qz.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 Code2({
+  children,
+  language = "tsx",
+  className
+}) {
+  const level = Math.min(useSurface2() + 1, 8);
+  const source = children.trim();
+  const id = lang(language);
+  return /* @__PURE__ */ jsx(scroll_area_default, {
+    orientation: "horizontal",
+    viewportClassName: "scroll-fade-x",
+    className: cn2("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 { Code2 };