margo-ui 2.0.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",

package/src/components/checkbox/checkbox.css

@@ -0,0 +1,28 @@
+.margo-checkbox {
+  appearance: none;
+}
+
+.margo-checkbox::before {
+  content: "";
+  display: block;
+  block-size: 100%;
+  inline-size: 100%;
+  background-color: currentColor;
+  clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 16%, 85% 0, 39% 69%);
+  scale: 0.6;
+  opacity: 0;
+  transition:
+    scale 160ms ease-out,
+    opacity 160ms ease-out;
+}
+
+.margo-checkbox:checked::before {
+  scale: 1;
+  opacity: 1;
+}
+
+.margo-checkbox:indeterminate::before {
+  clip-path: inset(44% 12% 44% 12% round 1px);
+  scale: 1;
+  opacity: 1;
+}

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+
+import { cn } from "../../utils/cn/cn.js";
+import { checkboxBaseClassName } from "./style.js";
+
+import type { CheckboxProps } from "./type.js";
+
+import "./checkbox.css";
+
+export const Checkbox = ({ indeterminate = false, className, ref, ...rest }: CheckboxProps) => {
+  const checkboxRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (checkboxRef.current) checkboxRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  return (
+    <input
+      {...rest}
+      ref={(node) => {
+        checkboxRef.current = node;
+
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      }}
+      type="checkbox"
+      className={cn(checkboxBaseClassName, className)}
+    />
+  );
+};

package/src/components/checkbox/style.ts

@@ -0,0 +1,5 @@
+export const checkboxBaseClassName = `margo-checkbox size-5 flex-none cursor-pointer rounded-md border-2 border-border
+bg-main p-1 text-on-main enabled:hover:border-on-main focus-visible:border-primary focus-visible:outline
+focus-visible:outline-offset-1 focus-visible:outline-on-main checked:border-primary indeterminate:border-primary
+select-none origin-center transition-transform duration-[120ms] ease-out active:scale-[0.95] disabled:cursor-auto
+disabled:opacity-40`;

package/src/components/checkbox/type.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef } from "react";
+
+export type CheckboxProps = Omit<ComponentPropsWithRef<"input">, "type"> & {
+  indeterminate?: boolean;
+};

package/src/components/chip/style.ts

@@ -1,4 +1,5 @@
-export const chipBaseClassName =
-  "bg-on-main/8 margo-text-box-trim flex items-center justify-center px-3 py-0.5 whitespace-nowrap lowercase flex-none leading-none rounded-md text-mc shadow-chip";
+export const chipBaseClassName = `bg-on-main/8 margo-text-box-trim flex items-center justify-center px-3 py-0.5
+whitespace-nowrap lowercase flex-none leading-none rounded-md text-mc shadow-chip
+focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main`;
 
 export const chipActiveClassName = "bg-on-main text-main";

package/src/components/input/style.ts

@@ -1,6 +1,6 @@
 export const inputBaseClassName = `group/input flex w-full cursor-text items-center gap-1 rounded-lg border-2 px-3 py-2 text-on-main
 text-sm select-none min-h-[2.5rem] bg-low
-border-transparent text-medium hover:border-on-main hover:text-on-main hover:shadow-input
+border-transparent text-medium hover:border-on-main hover:text-on-main hover:shadow-item
 focus-within:border-primary focus-within:text-on-main
 has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-auto has-[input:disabled]:opacity-40`;
 

package/src/components/layer/layer.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import { cn } from "../../utils/cn/cn.js";
+import { isMargoLayerSupported } from "../../utils/support/support.js";
 import { layerBaseClassName } from "./style.js";
 
 import type { MouseEvent, SyntheticEvent } from "react";
@@ -21,6 +22,13 @@ export const Layer = ({ open = false, onClose, dismissible = true, className, ch
     const layer = layerRef.current;
 
     if (!layer) return;
+
+    if (!isMargoLayerSupported()) {
+      setIsMounted(open);
+
+      return;
+    }
+
     if (open && !layer.open) layer.showModal();
     if (open || !layer.open) return;
 

package/src/components/popover/popover.css

@@ -0,0 +1,18 @@
+.margo-popover {
+  opacity: 0;
+  scale: 0.98;
+  transition:
+    opacity var(--margo-popover-duration) var(--margo-popover-easing),
+    scale var(--margo-popover-duration) var(--margo-popover-easing),
+    visibility var(--margo-popover-duration) var(--margo-popover-easing);
+}
+
+.margo-popover:not([data-margo-open="true"]) {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.margo-popover[data-margo-open="true"] {
+  opacity: 1;
+  scale: 1;
+}

package/src/components/popover/popover.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useRef, useState } from "react";
+
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import {
+  popoverAnchorClassName,
+  popoverBaseClassName,
+  popoverBodyClassName,
+  popoverOriginClassName,
+  popoverPositionClassName,
+} from "./style.js";
+
+import type { ElementType } from "react";
+import type { PopoverAnchorProps, PopoverBodyProps, PopoverProps } from "./type.js";
+
+import "./popover.css";
+
+export const Popover = ({
+  open = false,
+  onClose,
+  dismissible = true,
+  position = "down",
+  align = "center",
+  className,
+  children,
+  ...rest
+}: PopoverProps) => {
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const childrenRef = useRef(children);
+
+  const [isMounted, setIsMounted] = useState(open);
+
+  if (open) childrenRef.current = children;
+  if (open && !isMounted) setIsMounted(true);
+
+  useEffect(() => {
+    const popover = popoverRef.current;
+
+    if (!popover || open || !isMounted) return;
+
+    const controller = new AbortController();
+
+    const frame = requestAnimationFrame(() => {
+      const animations = popover.getAnimations({ subtree: true }).map((animation) => animation.finished);
+
+      void Promise.allSettled(animations).then(() => {
+        if (controller.signal.aborted) return;
+
+        setIsMounted(false);
+      });
+    });
+
+    return () => {
+      controller.abort();
+      cancelAnimationFrame(frame);
+    };
+  }, [isMounted, open]);
+
+  useEffect(() => {
+    const popover = popoverRef.current;
+
+    if (!popover || !open || !dismissible) return;
+
+    const anchor = popover.offsetParent;
+    const controller = new AbortController();
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+
+      if (!target || popover.contains(target) || anchor?.contains(target)) return;
+
+      onClose?.();
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose?.();
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown, { signal: controller.signal });
+    document.addEventListener("keydown", handleKeyDown, { signal: controller.signal });
+
+    return () => controller.abort();
+  }, [dismissible, onClose, open]);
+
+  return (
+    <div
+      {...rest}
+      ref={popoverRef}
+      data-margo-open={open}
+      className={cn(
+        popoverBaseClassName,
+        popoverPositionClassName[position][align],
+        popoverOriginClassName[position],
+        className,
+      )}
+    >
+      {isMounted ? childrenRef.current : null}
+    </div>
+  );
+};
+
+Popover.Anchor = <T extends ElementType = "div">({ className, children, ...rest }: PopoverAnchorProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(popoverAnchorClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Popover.Body = <T extends ElementType = "div">({ className, children, ...rest }: PopoverBodyProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(popoverBodyClassName, className)}>
+    {children}
+  </Tag>
+);

package/src/components/popover/style.ts

@@ -0,0 +1,39 @@
+import type { PopoverAlign, PopoverPosition } from "./type.js";
+
+export const popoverAnchorClassName = "relative inline-block size-fit";
+
+export const popoverBaseClassName = `margo-popover absolute z-20 m-0 flex w-max max-w-[calc(100vw-2rem)] flex-col
+overflow-clip rounded-lg border-2 border-border bg-main text-on-main shadow-card outline-none`;
+
+export const popoverBodyClassName = `flex min-h-0 max-h-56 flex-col gap-1
+overflow-y-auto overscroll-contain w-64 p-2 text-sm`;
+
+export const popoverPositionClassName: Record<PopoverPosition, Record<PopoverAlign, string>> = {
+  up: {
+    start: "bottom-full left-0 my-1",
+    center: "bottom-full left-1/2 my-1 -translate-x-1/2",
+    end: "right-0 bottom-full my-1",
+  },
+  down: {
+    start: "top-full left-0 my-1",
+    center: "top-full left-1/2 my-1 -translate-x-1/2",
+    end: "top-full right-0 my-1",
+  },
+  left: {
+    start: "top-0 right-full mx-1",
+    center: "top-1/2 right-full mx-1 -translate-y-1/2",
+    end: "right-full bottom-0 mx-1",
+  },
+  right: {
+    start: "top-0 left-full mx-1",
+    center: "top-1/2 left-full mx-1 -translate-y-1/2",
+    end: "bottom-0 left-full mx-1",
+  },
+};
+
+export const popoverOriginClassName: Record<PopoverPosition, string> = {
+  up: "origin-bottom",
+  down: "origin-top",
+  left: "origin-right",
+  right: "origin-left",
+};

package/src/components/popover/type.ts

@@ -0,0 +1,19 @@
+import type { TagProps } from "react-renderable";
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+
+export type PopoverPosition = "up" | "down" | "left" | "right";
+
+export type PopoverAlign = "start" | "center" | "end";
+
+export type PopoverProps = ComponentPropsWithoutRef<"div"> & {
+  open?: boolean;
+  onClose?: () => void;
+  dismissible?: boolean;
+  position?: PopoverPosition;
+  align?: PopoverAlign;
+  children?: ReactNode;
+};
+
+export type PopoverAnchorProps<T extends ElementType = "div"> = TagProps<T>;
+
+export type PopoverBodyProps<T extends ElementType = "div"> = TagProps<T>;

package/src/components/select/select.tsx

@@ -0,0 +1,49 @@
+import { MdKeyboardArrowDown } from "react-icons/md";
+
+import { List } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { selectActiveClassName, selectBaseClassName, selectControlClassName, selectIconClassName } from "./style.js";
+
+import type { SelectProps } from "./type.js";
+
+export const Select = <T,>({
+  options = [],
+  itemExtractor = null,
+  valueExtractor = null,
+  placeholder = "",
+  canBeEmpty = false,
+  active = false,
+  clickable = true,
+  className,
+  ...rest
+}: SelectProps<T>) => {
+  return (
+    <div
+      data-margo-active={active}
+      inert={!clickable || undefined}
+      className={cn(selectBaseClassName, active && selectActiveClassName, className)}
+    >
+      <select {...rest} className={selectControlClassName}>
+        {placeholder ? (
+          <option value="" disabled={!canBeEmpty} hidden={!canBeEmpty}>
+            {placeholder}
+          </option>
+        ) : null}
+
+        <List
+          array={options}
+          itemExtractor={({ row, index }) => (
+            <option key={valueExtractor?.({ row, index }) ?? index} value={valueExtractor?.({ row, index })}>
+              {itemExtractor?.({ row, index })}
+            </option>
+          )}
+        />
+      </select>
+
+      <span className={selectIconClassName}>
+        <MdKeyboardArrowDown className="text-md translate-x-0.5" />
+      </span>
+    </div>
+  );
+};

package/src/components/select/style.ts

@@ -0,0 +1,15 @@
+export const selectBaseClassName = `group/select relative flex min-h-[2.5rem] w-full items-center gap-1 rounded-lg
+border-2 border-transparent bg-low text-sm text-medium select-none
+hover:border-on-main hover:text-on-main hover:shadow-item
+focus-within:border-primary focus-within:text-on-main
+has-[select:disabled]:pointer-events-none has-[select:disabled]:opacity-40`;
+
+export const selectActiveClassName = "border-primary";
+
+export const selectControlClassName = `min-w-0 flex-1 cursor-pointer appearance-none truncate rounded-lg
+bg-transparent px-3 py-2 text-left text-on-main outline-none disabled:cursor-auto
+has-[option[value='']:checked]:text-medium
+[&>option]:bg-main [&>option]:text-on-main
+[&>option:checked]:bg-primary-darken [&>option:checked]:text-on-main`;
+
+export const selectIconClassName = "pointer-events-none mr-3 flex size-4 flex-none items-center justify-center";

package/src/components/select/type.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithRef } from "react";
+
+export type SelectOwnProps<T> = {
+  options?: readonly T[];
+  itemExtractor?: ((args: { row: T; index: number }) => string) | null;
+  valueExtractor?: ((args: { row: T; index: number }) => string | number) | null;
+  placeholder?: string;
+  canBeEmpty?: boolean;
+  active?: boolean;
+  clickable?: boolean;
+};
+
+export type SelectProps<T> = Omit<ComponentPropsWithRef<"select">, "children"> & SelectOwnProps<T>;

package/src/components/splash/splash.tsx

@@ -4,6 +4,8 @@ import type { ElementType } from "react";
 import type { SplashProps, SplashServeProps } from "./type.js";
 
 import { cn } from "../../utils/cn/cn.js";
+import { splashBaseClassName, splashOverrideClassName } from "./style.js";
+
 import "./splash.css";
 
 export const Splash = <T extends ElementType = "div">({ initial = true, className, ...rest }: SplashProps<T>) => (
@@ -14,11 +16,7 @@ export const Splash = <T extends ElementType = "div">({ initial = true, classNam
     role="presentation"
     data-margo-splash=""
     data-margo-splash-initial={initial}
-    className={cn(
-      "fixed inset-0 z-max",
-      className && "[clip-path:none] margo-splash-idle:[clip-path:none]",
-      className,
-    )}
+    className={cn(splashBaseClassName, className && splashOverrideClassName, className)}
   />
 );
 

package/src/components/splash/style.ts

@@ -1 +1,3 @@
-export const splashBaseClassName = "margo-splash";
+export const splashBaseClassName = "fixed inset-0 z-max";
+
+export const splashOverrideClassName = "[clip-path:none] margo-splash-idle:[clip-path:none]";

package/src/components/toggle/style.ts

@@ -0,0 +1,4 @@
+export const toggleBaseClassName = `margo-toggle h-5 w-9 flex-none cursor-pointer rounded-full border-2 border-border
+bg-main p-0.5 text-on-main enabled:hover:border-on-main focus-visible:border-primary focus-visible:outline
+focus-visible:outline-offset-1 focus-visible:outline-on-main checked:border-primary select-none origin-center
+transition-transform duration-[160ms] ease-out active:scale-[0.98] disabled:cursor-auto disabled:opacity-40`;

package/src/components/toggle/toggle.css

@@ -0,0 +1,18 @@
+.margo-toggle {
+  appearance: none;
+}
+
+/* the thumb travels the track's width minus its height: borders and padding cancel out on both axes */
+.margo-toggle::before {
+  content: "";
+  display: block;
+  block-size: 100%;
+  aspect-ratio: 1;
+  border-radius: 9999px;
+  background-color: currentColor;
+  transition: translate 160ms ease-out;
+}
+
+.margo-toggle:checked::before {
+  translate: var(--margo-toggle-travel, 1rem) 0;
+}

package/src/components/toggle/toggle.tsx

@@ -0,0 +1,10 @@
+import { cn } from "../../utils/cn/cn.js";
+import { toggleBaseClassName } from "./style.js";
+
+import type { ToggleProps } from "./type.js";
+
+import "./toggle.css";
+
+export const Toggle = ({ className, ...rest }: ToggleProps) => (
+  <input {...rest} type="checkbox" role="switch" className={cn(toggleBaseClassName, className)} />
+);

package/src/components/toggle/type.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithRef } from "react";
+
+export type ToggleProps = Omit<ComponentPropsWithRef<"input">, "type" | "role">;

package/src/css/theme.css

@@ -29,7 +29,6 @@
   --shadow-card: var(--margo-shadow-card);
   --shadow-button: var(--margo-shadow-button);
   --shadow-item: var(--margo-shadow-item);
-  --shadow-input: var(--margo-shadow-input);
   --shadow-chip: var(--margo-shadow-chip);
 
   /* Durations */

package/src/css/variables.css

@@ -34,6 +34,10 @@
   --margo-layer-duration: 750ms;
   --margo-layer-easing: cubic-bezier(0.32, 0.72, 0, 1);
   --margo-layer-z-index: 100;
+
+  --margo-popover-duration: 200ms;
+  --margo-popover-easing: cubic-bezier(0.32, 0.72, 0, 1);
+
   --margo-max-z-index: 9999;
 
   --margo-grid-max-width: 80rem;
@@ -60,21 +64,7 @@
   --margo-shadow-card: 0 8px 6px -4px rgb(220, 220, 220, 0.5);
   --margo-shadow-button: 0 2px 3px -1px rgb(220, 220, 220, 0.6);
   --margo-shadow-item: 0 3px 3px -3px rgba(139, 139, 139, 0.6);
-  --margo-shadow-input: 0 3px 3px -3px rgba(139, 139, 139, 0.6);
   --margo-shadow-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.6);
-
-  --margo-code-surface: #fbfbfb;
-  --margo-code-bar: #f1f1f1;
-  --margo-code-plain: #24292f;
-  --margo-code-comment: #8b949e;
-  --margo-code-string: #0a7d3f;
-  --margo-code-keyword: #a5309a;
-  --margo-code-number: #b3510f;
-  --margo-code-tag: #1f6fd6;
-  --margo-code-attr: #7a5cd6;
-  --margo-code-fn: #0f7c93;
-  --margo-code-type: #1f6fd6;
-  --margo-code-punct: #6e7781;
 }
 
 .dark {
@@ -94,25 +84,12 @@
   --margo-shadow-card: 0 4px 12px -4px rgb(0, 0, 0, 0.5);
   --margo-shadow-button: 0 2px 6px -2px rgb(0, 0, 0, 0.5);
   --margo-shadow-item: 0 2px 3px -2px rgb(0, 0, 0, 0.5);
-  --margo-shadow-input: 0 2px 3px -2px rgb(0, 0, 0, 0.5);
   --margo-shadow-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.5);
-
-  --margo-code-surface: #0d0d0d;
-  --margo-code-bar: #161616;
-  --margo-code-plain: #e6e6e6;
-  --margo-code-comment: #6b6b6b;
-  --margo-code-string: #7ee787;
-  --margo-code-keyword: #ff7bd5;
-  --margo-code-number: #ffab70;
-  --margo-code-tag: #79c0ff;
-  --margo-code-attr: #c3a6ff;
-  --margo-code-fn: #56d4dd;
-  --margo-code-type: #79c0ff;
-  --margo-code-punct: #8b949e;
 }
 
 @media (prefers-reduced-motion: reduce) {
   :root {
     --margo-layer-duration: 1ms;
+    --margo-popover-duration: 1ms;
   }
 }

package/src/index.ts

@@ -2,6 +2,7 @@ export { Blockquote } from "./components/blockquote/blockquote.js";
 export { Button } from "./components/button/button.js";
 export { ButtonMicro } from "./components/button_micro/button_micro.js";
 export { Card } from "./components/card/card.js";
+export { Checkbox } from "./components/checkbox/checkbox.js";
 export { Chip } from "./components/chip/chip.js";
 export { Code } from "./components/code/code.js";
 export { Dialog } from "./components/dialog/dialog.js";
@@ -11,11 +12,13 @@ export { Layer } from "./components/layer/layer.js";
 export { Input } from "./components/input/input.js";
 export { Item } from "./components/item/item.js";
 export { NavigationBar } from "./components/navigation_bar/navigation_bar.js";
+export { Popover } from "./components/popover/popover.js";
 export { ProgressBar } from "./components/progress_bar/progress_bar.js";
 export { Table } from "./components/table/table.js";
+export { Toggle } from "./components/toggle/toggle.js";
 export { Splash } from "./components/splash/splash.js";
+export { Select } from "./components/select/select.js";
 export { Sheet } from "./components/sheet/sheet.js";
-export { Snippet } from "./components/snippet/snippet.js";
 export { Spinner } from "./components/spinner/spinner.js";
 export { Tooltip } from "./components/tooltip/tooltip.js";
 
@@ -31,6 +34,7 @@ export { MetaColorScheme } from "./meta/meta_color_scheme/meta_color_scheme.js";
 export { useMargoTheme } from "./hooks/use_theme.js";
 
 export { cn } from "./utils/cn/cn.js";
+export { isMargoLayerSupported } from "./utils/support/support.js";
 export { margoTheme, margoThemeClient } from "./utils/theme/theme.js";
 
 export type { BlockquoteProps } from "./components/blockquote/type.js";
@@ -44,6 +48,7 @@ export type {
 } from "./components/button/type.js";
 export type { ButtonMicroProps } from "./components/button_micro/type.js";
 export type { CardProps } from "./components/card/type.js";
+export type { CheckboxProps } from "./components/checkbox/type.js";
 export type { ChipProps } from "./components/chip/type.js";
 export type { CodeOwnProps, CodeProps } from "./components/code/type.js";
 export type { DialogBodyProps, DialogFooterProps, DialogProps } from "./components/dialog/type.js";
@@ -58,6 +63,7 @@ export type { LayerProps } from "./components/layer/type.js";
 export type { InputIconProps, InputProps, InputTextProps } from "./components/input/type.js";
 export type { ItemIconProps, ItemLabelProps, ItemProps } from "./components/item/type.js";
 export type { NavigationBarProps } from "./components/navigation_bar/type.js";
+export type { PopoverAlign, PopoverAnchorProps, PopoverBodyProps, PopoverPosition, PopoverProps } from "./components/popover/type.js";
 export type { ProgressBarMode, ProgressBarProps } from "./components/progress_bar/type.js";
 export type {
   TableBodyProps,
@@ -68,9 +74,10 @@ export type {
   TableRowProps,
 } from "./components/table/type.js";
 export type { SplashProps, SplashServeProps } from "./components/splash/type.js";
+export type { SelectOwnProps, SelectProps } from "./components/select/type.js";
 export type { SheetBodyProps, SheetFooterProps, SheetProps, SheetSide } from "./components/sheet/type.js";
-export type { SnippetProps, SnippetToken, SnippetTokenType } from "./components/snippet/type.js";
 export type { SpinnerProps } from "./components/spinner/type.js";
+export type { ToggleProps } from "./components/toggle/type.js";
 export type { TooltipPosition, TooltipProps } from "./components/tooltip/type.js";
 
 export type { BackgroundGlowProps } from "./hoc/background_glow/type.js";

package/src/utils/support/support.ts

@@ -0,0 +1,2 @@
+export const isMargoLayerSupported = (): boolean =>
+  typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";

package/src/components/snippet/highlight.ts

@@ -1,83 +0,0 @@
-import type { SnippetToken, SnippetTokenType } from "./type.js";
-
-const KEYWORDS = [
-  "as",
-  "async",
-  "await",
-  "break",
-  "case",
-  "catch",
-  "class",
-  "const",
-  "continue",
-  "default",
-  "delete",
-  "do",
-  "else",
-  "export",
-  "extends",
-  "false",
-  "for",
-  "from",
-  "function",
-  "if",
-  "implements",
-  "import",
-  "in",
-  "instanceof",
-  "interface",
-  "let",
-  "new",
-  "null",
-  "of",
-  "readonly",
-  "return",
-  "satisfies",
-  "switch",
-  "this",
-  "throw",
-  "true",
-  "try",
-  "type",
-  "typeof",
-  "undefined",
-  "var",
-  "void",
-  "while",
-  "yield",
-];
-
-const PATTERNS: readonly { type: SnippetTokenType; source: string }[] = [
-  { type: "comment", source: "\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/" },
-  { type: "string", source: "\"(?:[^\"\\\\]|\\\\.)*\"|'(?:[^'\\\\]|\\\\.)*'|`(?:[^`\\\\]|\\\\.)*`" },
-  { type: "tag", source: "<\\/?[A-Za-z][\\w.$]*" },
-  { type: "keyword", source: `\\b(?:${KEYWORDS.join("|")})\\b` },
-  { type: "number", source: "\\b\\d+(?:\\.\\d+)?\\b" },
-  { type: "attr", source: "\\b[A-Za-z_$][\\w$]*(?=\\s*[=:](?!=))" },
-  { type: "fn", source: "\\b[A-Za-z_$][\\w$]*(?=\\s*\\()" },
-  { type: "type", source: "\\b[A-Z][\\w$]*\\b" },
-  { type: "punct", source: "[{}()\\[\\]<>=;,.:!?|&+\\-*/]" },
-];
-
-const TOKENIZER = new RegExp(PATTERNS.map((pattern) => `(${pattern.source})`).join("|"), "g");
-
-export const snippetHighlight = (code: string): SnippetToken[] => {
-  const tokens: SnippetToken[] = [];
-  let cursor = 0;
-  let match: RegExpExecArray | null;
-
-  TOKENIZER.lastIndex = 0;
-
-  while ((match = TOKENIZER.exec(code)) !== null) {
-    if (match.index > cursor) tokens.push({ type: "plain", value: code.slice(cursor, match.index) });
-
-    const groupIndex = PATTERNS.findIndex((_, index) => match![index + 1] !== undefined);
-
-    tokens.push({ type: PATTERNS[groupIndex].type, value: match[0] });
-    cursor = match.index + match[0].length;
-  }
-
-  if (cursor < code.length) tokens.push({ type: "plain", value: code.slice(cursor) });
-
-  return tokens;
-};

package/src/components/snippet/snippet.tsx

@@ -1,66 +0,0 @@
-import { useState } from "react";
-
-import { MdCheck, MdContentCopy } from "react-icons/md";
-
-import { Guard, List, Swap, Tag } from "react-renderable";
-
-import { cn } from "../../utils/cn/cn.js";
-import { Button } from "../button/button.js";
-import { snippetHighlight } from "./highlight.js";
-import {
-  snippetBarClassName,
-  snippetBaseClassName,
-  snippetCodeClassName,
-  snippetCopyClassName,
-  snippetTitleClassName,
-  snippetTokenClassName,
-} from "./style.js";
-
-import type { ElementType } from "react";
-import { MaskGradientX } from "../../hoc/mask_gradient_x/mask_gradient_x.js";
-import type { SnippetProps } from "./type.js";
-
-export const Snippet = <T extends ElementType = "div">({ snippet, title, className, ...rest }: SnippetProps<T>) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const source = snippet.trim();
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(source);
-    setIsCopied(true);
-    window.setTimeout(() => setIsCopied(false), 1500);
-  };
-
-  return (
-    <Tag {...Tag.forward<T>(rest)} className={cn(snippetBaseClassName, className)}>
-      <div className={snippetBarClassName}>
-        <Guard guardIf={!title} shouldHide>
-          <span className={snippetTitleClassName}>{title}</span>
-        </Guard>
-        <Button onClickBlur={handleCopy} aria-label="copy" aria-pressed={isCopied} className={snippetCopyClassName}>
-          <Button.Icon
-            icon={
-              <Swap.Boolean
-                swapOn={isCopied}
-                components={[<MdContentCopy className="text-sm" />, <MdCheck className="text-sm" />]}
-              />
-            }
-          />
-        </Button>
-      </div>
-      <MaskGradientX fade="1rem">
-        <pre className={snippetCodeClassName}>
-          <code>
-            <List
-              array={snippetHighlight(source)}
-              itemExtractor={({ row, index }) => (
-                <span key={index} className={snippetTokenClassName[row.type]}>
-                  {row.value}
-                </span>
-              )}
-            />
-          </code>
-        </pre>
-      </MaskGradientX>
-    </Tag>
-  );
-};

package/src/components/snippet/style.ts

@@ -1,25 +0,0 @@
-import type { SnippetTokenType } from "./type.js";
-
-export const snippetBaseClassName = "overflow-hidden rounded-lg border-2 border-border bg-(--margo-code-surface)";
-
-export const snippetBarClassName =
-  "flex items-center justify-between gap-4 border-b-2 border-border bg-(--margo-code-bar) px-3 py-2";
-
-export const snippetTitleClassName = "text-mc uppercase tracking-widest text-medium";
-
-export const snippetCopyClassName = "ml-auto bg-neutral/60";
-
-export const snippetCodeClassName = "overflow-x-auto p-4 text-xs leading-relaxed";
-
-export const snippetTokenClassName: Record<SnippetTokenType, string> = {
-  plain: "text-(--margo-code-plain)",
-  comment: "text-(--margo-code-comment) italic",
-  string: "text-(--margo-code-string)",
-  keyword: "text-(--margo-code-keyword)",
-  number: "text-(--margo-code-number)",
-  tag: "text-(--margo-code-tag)",
-  attr: "text-(--margo-code-attr)",
-  fn: "text-(--margo-code-fn)",
-  type: "text-(--margo-code-type)",
-  punct: "text-(--margo-code-punct)",
-};

package/src/components/snippet/type.ts

@@ -1,26 +0,0 @@
-import type { TagProps } from "react-renderable";
-import type { ElementType } from "react";
-
-export type SnippetTokenType =
-  | "plain"
-  | "comment"
-  | "string"
-  | "keyword"
-  | "number"
-  | "tag"
-  | "attr"
-  | "fn"
-  | "type"
-  | "punct";
-
-export type SnippetToken = {
-  type: SnippetTokenType;
-  value: string;
-};
-
-export type SnippetOwnProps = {
-  snippet: string;
-  title?: string;
-};
-
-export type SnippetProps<T extends ElementType = "div"> = TagProps<T, SnippetOwnProps>;