margo-ui 2.0.0 → 2.1.0

package/package.json

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

package/src/components/button/style.ts

@@ -1,9 +1,9 @@
 export const buttonBaseClassName = `group/button flex h-8 w-fit shrink-0 items-center px-2 rounded-lg border-2 text-on-main
 hover:border-on-main hover:text-on-main focus-visible:border-primary
 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main
-select-none origin-center transition-transform duration-[160ms] ease-out active:scale-[0.95]`;
+select-none origin-center transition-transform duration-[160ms] ease-out active:scale-[0.95] bg-main`;
 
-export const buttonSurfaceClassName = "border-border bg-main";
+export const buttonSurfaceClassName = "border-border";
 
 export const buttonActiveClassName = "border-primary shadow-button";
 

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/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-input
+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/snippet/snippet.tsx

@@ -12,15 +12,22 @@ import {
   snippetBaseClassName,
   snippetCodeClassName,
   snippetCopyClassName,
+  snippetPreviewClassName,
   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";
+import type { SnippetPreviewProps, SnippetProps } from "./type.js";
 
-export const Snippet = <T extends ElementType = "div">({ snippet, title, className, ...rest }: SnippetProps<T>) => {
+export const Snippet = <T extends ElementType = "div">({
+  snippet,
+  title,
+  className,
+  children,
+  ...rest
+}: SnippetProps<T>) => {
   const [isCopied, setIsCopied] = useState(false);
   const source = snippet.trim();
 
@@ -61,6 +68,13 @@ export const Snippet = <T extends ElementType = "div">({ snippet, title, classNa
           </code>
         </pre>
       </MaskGradientX>
+      {children}
     </Tag>
   );
 };
+
+Snippet.Preview = <T extends ElementType = "div">({ className, children, ...rest }: SnippetPreviewProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(snippetPreviewClassName, className)}>
+    {children}
+  </Tag>
+);

package/src/components/snippet/style.ts

@@ -1,14 +1,17 @@
 import type { SnippetTokenType } from "./type.js";
 
-export const snippetBaseClassName = "overflow-hidden rounded-lg border-2 border-border bg-(--margo-code-surface)";
+export const snippetBaseClassName = "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 snippetBarClassName = `flex items-center justify-between gap-4 border-b-2 border-border
+rounded-t-[calc(var(--radius-lg)-var(--margo-border-width-2))] 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 snippetPreviewClassName =
+  "flex flex-wrap items-center justify-center gap-6 rounded-b-lg border-t-2 border-border p-8";
+
 export const snippetCodeClassName = "overflow-x-auto p-4 text-xs leading-relaxed";
 
 export const snippetTokenClassName: Record<SnippetTokenType, string> = {

package/src/components/snippet/type.ts

@@ -1,5 +1,5 @@
 import type { TagProps } from "react-renderable";
-import type { ElementType } from "react";
+import type { ElementType, ReactNode } from "react";
 
 export type SnippetTokenType =
   | "plain"
@@ -21,6 +21,9 @@ export type SnippetToken = {
 export type SnippetOwnProps = {
   snippet: string;
   title?: string;
+  children?: ReactNode;
 };
 
 export type SnippetProps<T extends ElementType = "div"> = TagProps<T, SnippetOwnProps>;
+
+export type SnippetPreviewProps<T extends ElementType = "div"> = TagProps<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/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;
@@ -114,5 +118,6 @@
 @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,9 +12,12 @@ 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";
@@ -31,6 +35,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 +49,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 +64,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 +75,11 @@ 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 { SnippetPreviewProps, 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";