margo-ui 1.0.1 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",
@@ -36,15 +36,13 @@
   },
   "scripts": {
     "ts:check": "tsc --noEmit",
-    "build": "rm -rf dist && tsc",
-    "change": "changeset",
-    "change:status": "changeset status --verbose",
-    "release:version": "changeset version",
-    "release": "npm run ts:check && changeset publish"
+    "changeset:add": "changeset",
+    "changeset:bump": "changeset version",
+    "build:release": "npm run ts:check && npm pack && changeset publish && git push --follow-tags"
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "react-renderable": "^1.0.1",
+    "react-renderable": "^1.0.4",
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {

package/src/components/button/button.tsx

@@ -0,0 +1,79 @@
+import { Tag } from "react-renderable";
+
+import { Ripple } from "../../hoc/ripple/ripple.js";
+import { cn } from "../../utils/cn/cn.js";
+import {
+  buttonActiveClassName,
+  buttonBaseClassName,
+  buttonGridClassName,
+  buttonGridForwardClassName,
+  buttonGridReverseClassName,
+  buttonIconClassName,
+  buttonLabelClassName,
+  buttonSlotClassName,
+  buttonSurfaceClassName,
+} from "./style.js";
+
+import type { CSSProperties, ElementType, MouseEvent } from "react";
+import type { ButtonIconLabelProps, ButtonIconProps, ButtonLabelProps, ButtonProps } from "./type.js";
+
+export const Button = <T extends ElementType = "button">({
+  clickable = true,
+  active = false,
+  open = false,
+  blurOnClick = true,
+  className,
+  onClick,
+  ...rest
+}: ButtonProps<T>) => {
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    onClick?.(event);
+    if (blurOnClick && event.detail > 0) setTimeout(() => event.currentTarget.blur(), 150);
+  };
+
+  return (
+    <Ripple>
+      <Tag
+        {...Tag.forward<T>(rest, "button")}
+        data-open={open}
+        onClick={handleClick}
+        className={cn(
+          buttonBaseClassName,
+          active ? buttonActiveClassName : buttonSurfaceClassName,
+          !clickable && "pointer-events-none",
+          className,
+        )}
+      />
+    </Ripple>
+  );
+};
+
+Button.Icon = ({ icon, className = null }: ButtonIconProps) => (
+  <span className={cn(buttonIconClassName, className)}>{icon}</span>
+);
+
+Button.Label = ({ label, className = null }: ButtonLabelProps) => (
+  <span className={cn(buttonLabelClassName, className)}>{label}</span>
+);
+
+Button.IconLabel = ({
+  icon,
+  label,
+  gap = "0.5rem",
+  reverse = false,
+  side = "end",
+  className = null,
+}: ButtonIconLabelProps) => (
+  <span
+    style={{ "--button-gap": gap } as CSSProperties}
+    className={cn(
+      buttonGridClassName,
+      side === "start" && "[direction:rtl]",
+      reverse ? buttonGridReverseClassName : buttonGridForwardClassName,
+      className,
+    )}
+  >
+    {reverse ? label : icon}
+    <span className={buttonSlotClassName}>{reverse ? icon : label}</span>
+  </span>
+);

package/src/components/button/style.ts

@@ -0,0 +1,27 @@
+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:margo-border-gradient-primary
+focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main`;
+
+export const buttonSurfaceClassName = "border-border bg-main";
+
+export const buttonActiveClassName = "margo-border-gradient-primary";
+
+export const buttonIconClassName =
+  "relative z-10 flex size-4 min-w-0 shrink-0 items-center justify-center [direction:ltr]";
+
+export const buttonLabelClassName =
+  "relative z-10 flex items-center text-sm whitespace-nowrap lowercase [direction:ltr] px-0.5";
+
+export const buttonGridClassName =
+  "grid items-center gap-0 transition-[grid-template-columns,gap] duration-[180ms] ease-in-out";
+
+export const buttonGridForwardClassName = `grid-cols-[1rem_0fr] group-hover/button:grid-cols-[1rem_1fr] group-hover/button:gap-(--button-gap)
+group-focus-visible/button:grid-cols-[1rem_1fr] group-focus-visible/button:gap-(--button-gap)
+group-data-[open=true]/button:grid-cols-[1rem_1fr] group-data-[open=true]/button:gap-(--button-gap)`;
+
+export const buttonGridReverseClassName = `grid-cols-[auto_0rem] group-hover/button:grid-cols-[auto_1rem] group-hover/button:gap-(--button-gap)
+group-focus-visible/button:grid-cols-[auto_1rem] group-focus-visible/button:gap-(--button-gap)
+group-data-[open=true]/button:grid-cols-[auto_1rem] group-data-[open=true]/button:gap-(--button-gap)`;
+
+export const buttonSlotClassName = `min-w-0 overflow-hidden opacity-0 transition-opacity duration-[180ms] ease-in
+group-hover/button:opacity-100 group-focus-visible/button:opacity-100 group-data-[open=true]/button:opacity-100`;

package/src/components/button/type.ts

@@ -0,0 +1,33 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType, MouseEventHandler, ReactNode } from "react";
+
+export type ButtonIconLabelSide = "start" | "end";
+
+export type ButtonOwnProps = {
+  clickable?: boolean;
+  active?: boolean;
+  open?: boolean;
+  blurOnClick?: boolean;
+  onClick?: MouseEventHandler<HTMLElement>;
+};
+
+export type ButtonProps<T extends ElementType = "button"> = TagProps<T, ButtonOwnProps>;
+
+export type ButtonIconProps = {
+  icon: ReactNode;
+  className?: string | null;
+};
+
+export type ButtonLabelProps = {
+  label: string;
+  className?: string | null;
+};
+
+export type ButtonIconLabelProps = {
+  icon: ReactNode;
+  label: ReactNode;
+  gap?: string;
+  reverse?: boolean;
+  side?: ButtonIconLabelSide;
+  className?: string | null;
+};

package/src/components/card/card.tsx

@@ -0,0 +1,13 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { cardBaseClassName, cardFocusClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { CardProps } from "./type.js";
+
+export const Card = <T extends ElementType = "div">({ className, children, ...rest }: CardProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(cardBaseClassName, cardFocusClassName, className)}>
+    {children}
+  </Tag>
+);

package/src/components/card/style.ts

@@ -0,0 +1,4 @@
+export const cardBaseClassName = "rounded-lg border-2 border-border bg-main p-5 text-on-main";
+
+export const cardFocusClassName = `focus:margo-border-gradient-primary focus-visible:outline focus-visible:outline-offset-1
+focus-visible:outline-on-main`;

package/src/components/card/type.ts

@@ -0,0 +1,4 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type CardProps<T extends ElementType = "div"> = TagProps<T>;

package/src/components/chip/chip.tsx

@@ -0,0 +1,13 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { chipActiveClassName, chipBaseClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { ChipProps } from "./type.js";
+
+export const Chip = <T extends ElementType = "div">({ active = false, className, children, ...rest }: ChipProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(chipBaseClassName, className, active && chipActiveClassName)}>
+    {children}
+  </Tag>
+);

package/src/components/chip/style.ts

@@ -0,0 +1,4 @@
+export const chipBaseClassName =
+  "bg-secondary px-3 py-0.5 whitespace-nowrap lowercase flex-none leading-none rounded-md text-mc";
+
+export const chipActiveClassName = "bg-on-main text-main";

package/src/components/chip/type.ts

@@ -0,0 +1,8 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type ChipOwnProps = {
+  active?: boolean;
+};
+
+export type ChipProps<T extends ElementType = "div"> = TagProps<T, ChipOwnProps>;

package/src/components/tooltip/style.ts

@@ -0,0 +1,17 @@
+import type { TooltipPosition } from "./type.js";
+
+export const tooltipAnchorClassName = "group relative inline-block size-fit";
+
+export const tooltipBubbleClassName = `pointer-events-none absolute z-10 rounded-sm bg-on-main px-2 py-0.5 text-xs text-main lowercase
+whitespace-nowrap opacity-0`;
+
+export const tooltipTransitionClassName = "transition-opacity duration-[250ms] ease-in-out";
+
+export const tooltipVisibleClassName = "group-hover:opacity-100 group-focus-within:opacity-100";
+
+export const tooltipPositionClassName: Record<TooltipPosition, string> = {
+  up: "bottom-[120%] left-1/2 -translate-x-1/2",
+  down: "top-[120%] left-1/2 -translate-x-1/2",
+  left: "top-1/2 right-[calc(100%+0.5rem)] -translate-y-1/2",
+  right: "top-1/2 left-[calc(100%+0.5rem)] -translate-y-1/2",
+};

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,50 @@
+import { useRef } from "react";
+
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import {
+  tooltipAnchorClassName,
+  tooltipBubbleClassName,
+  tooltipPositionClassName,
+  tooltipTransitionClassName,
+  tooltipVisibleClassName,
+} from "./style.js";
+
+import type { ElementType, ReactNode } from "react";
+import type { TooltipProps } from "./type.js";
+
+export const Tooltip = <T extends ElementType = "div">({
+  ariaLabel,
+  children,
+  className,
+  id,
+  placeholder,
+  position = "down",
+  ...rest
+}: TooltipProps<T>) => {
+  const placeholderRef = useRef<ReactNode>(null);
+
+  const isFilled = placeholder !== null && placeholder !== undefined;
+
+  if (isFilled) placeholderRef.current = placeholder;
+
+  return (
+    <Tag {...Tag.forward<T>(rest)} className={cn(tooltipAnchorClassName, className)}>
+      {children}
+      <span
+        id={id}
+        role="tooltip"
+        aria-label={isFilled ? undefined : ariaLabel}
+        className={cn(
+          tooltipBubbleClassName,
+          tooltipTransitionClassName,
+          isFilled && tooltipVisibleClassName,
+          tooltipPositionClassName[position],
+        )}
+      >
+        {placeholderRef.current}
+      </span>
+    </Tag>
+  );
+};

package/src/components/tooltip/type.ts

@@ -0,0 +1,17 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType, ReactNode } from "react";
+
+export type TooltipPosition = "up" | "down" | "left" | "right";
+
+export type TooltipOwnProps = {
+  ariaLabel?: string;
+  id?: string;
+  placeholder?: ReactNode;
+  position?: TooltipPosition;
+  children?: ReactNode;
+};
+
+export type TooltipProps<T extends ElementType = "div"> = Omit<
+  TagProps<T, TooltipOwnProps>,
+  "aria-label"
+>;

package/src/hoc/background_glow/background_glow.css

@@ -0,0 +1,32 @@
+.margo-background-glow::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    var(--margo-background-glow-size) circle at var(--margo-background-glow-x, 50%) var(--margo-background-glow-y, 50%),
+    var(--color-primary),
+    transparent 70%
+  );
+  transition: opacity 300ms ease-out;
+}
+
+.margo-background-glow:hover::before,
+.margo-background-glow:focus-within::before {
+  opacity: var(--margo-background-glow-opacity, 0.1);
+}
+
+.margo-background-glow--size-sm {
+  --margo-background-glow-size: 200px;
+}
+
+.margo-background-glow--size-md {
+  --margo-background-glow-size: 320px;
+}
+
+.margo-background-glow--size-lg {
+  --margo-background-glow-size: 480px;
+}

package/src/hoc/background_glow/background_glow.tsx

@@ -0,0 +1,25 @@
+import { cloneElement } from "react";
+
+import { cn } from "../../utils/cn/cn.js";
+import { backgroundGlowBaseClassName, backgroundGlowSizeClassName } from "./style.js";
+
+import type { PointerEvent } from "react";
+import type { BackgroundGlowProps } from "./type.js";
+
+import "./background_glow.css";
+
+export const BackgroundGlow = ({ children, size = "md" }: BackgroundGlowProps) => {
+  const handlePointerMove = (event: PointerEvent<HTMLElement>) => {
+    const bounds = event.currentTarget.getBoundingClientRect();
+
+    event.currentTarget.style.setProperty("--margo-background-glow-x", `${event.clientX - bounds.left}px`);
+    event.currentTarget.style.setProperty("--margo-background-glow-y", `${event.clientY - bounds.top}px`);
+
+    children.props.onPointerMove?.(event);
+  };
+
+  return cloneElement(children, {
+    className: cn(backgroundGlowBaseClassName, backgroundGlowSizeClassName[size], children.props.className),
+    onPointerMove: handlePointerMove,
+  });
+};

package/src/hoc/background_glow/style.ts

@@ -0,0 +1,9 @@
+import type { BackgroundGlowSize } from "./type.js";
+
+export const backgroundGlowBaseClassName = "relative isolate margo-background-glow";
+
+export const backgroundGlowSizeClassName: Record<BackgroundGlowSize, string> = {
+  sm: "margo-background-glow--size-sm",
+  md: "margo-background-glow--size-md",
+  lg: "margo-background-glow--size-lg",
+};

package/src/hoc/background_glow/type.ts

@@ -0,0 +1,13 @@
+import type { PointerEventHandler, ReactElement } from "react";
+
+export type BackgroundGlowSize = "sm" | "md" | "lg";
+
+export type BackgroundGlowChildProps = {
+  className?: string;
+  onPointerMove?: PointerEventHandler<HTMLElement>;
+};
+
+export type BackgroundGlowProps = {
+  children: ReactElement<BackgroundGlowChildProps>;
+  size?: BackgroundGlowSize;
+};

package/src/{components → hoc/border_glow}/border_glow.css

@@ -6,7 +6,7 @@
   opacity: 0;
   background: radial-gradient(
     480px circle at var(--margo-border-glow-x, 70%) var(--margo-border-glow-y, 70%),
-    var(--color-primary),
+    var(--color-primary-darken),
     transparent 70%
   );
   transition: opacity 300ms ease-out;

package/src/hoc/border_glow/border_glow.tsx

@@ -0,0 +1,27 @@
+import { cloneElement } from "react";
+
+import { cn } from "../../utils/cn/cn.js";
+import { borderGlowBaseClassName, borderGlowPositionClassName } from "./style.js";
+
+import type { PointerEvent } from "react";
+import type { BorderGlowProps } from "./type.js";
+
+import "./border_glow.css";
+
+export const BorderGlow = ({ children, position = "all" }: BorderGlowProps) => {
+  const handlePointerMove = (event: PointerEvent<HTMLElement>) => {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - bounds.left;
+    const y = event.clientY - bounds.top;
+
+    event.currentTarget.style.setProperty("--margo-border-glow-x", `${position === "right" ? bounds.width - x : x}px`);
+    event.currentTarget.style.setProperty("--margo-border-glow-y", `${position === "down" ? bounds.height - y : y}px`);
+
+    children.props.onPointerMove?.(event);
+  };
+
+  return cloneElement(children, {
+    className: cn(borderGlowBaseClassName, borderGlowPositionClassName[position], children.props.className),
+    onPointerMove: handlePointerMove,
+  });
+};

package/src/hoc/border_glow/style.ts

@@ -0,0 +1,11 @@
+import type { BorderGlowPosition } from "./type.js";
+
+export const borderGlowBaseClassName = "relative isolate margo-border-glow";
+
+export const borderGlowPositionClassName: Record<BorderGlowPosition, string> = {
+  up: "margo-border-glow--edge-top",
+  down: "margo-border-glow--edge-bottom",
+  left: "margo-border-glow--edge-left",
+  right: "margo-border-glow--edge-right",
+  all: "margo-border-glow--ring",
+};

package/src/hoc/border_glow/type.ts

@@ -0,0 +1,13 @@
+import type { PointerEventHandler, ReactElement } from "react";
+
+export type BorderGlowPosition = "up" | "down" | "left" | "right" | "all";
+
+export type BorderGlowChildProps = {
+  className?: string;
+  onPointerMove?: PointerEventHandler<HTMLElement>;
+};
+
+export type BorderGlowProps = {
+  children: ReactElement<BorderGlowChildProps>;
+  position?: BorderGlowPosition;
+};

package/src/{components → hoc/ripple}/ripple.tsx

@@ -1,25 +1,16 @@
 import { cloneElement } from "react";
 
 import { Guard } from "react-renderable";
-import { cn } from "../helpers/cn";
-import { useRipple } from "../hooks/use_ripple";
 
-import type { PointerEvent, PointerEventHandler, ReactElement, ReactNode } from "react";
+import { cn } from "../../utils/cn/cn.js";
+import { useRipple } from "./use_ripple.js";
 
-import "./ripple.css";
-
-export type RippleChildProps = {
-  children?: ReactNode;
-  className?: string;
-  onPointerDown?: PointerEventHandler<HTMLElement>;
-};
+import type { PointerEvent } from "react";
+import type { RippleProps } from "./type.js";
 
-export type RippleProps = {
-  children: ReactElement<RippleChildProps>;
-  rippleClassName?: string;
-};
+import "./ripple.css";
 
-export const Ripple = ({ children, rippleClassName = "bg-primary" }: RippleProps) => {
+export const Ripple = ({ children, rippleClassName = "bg-primary-darken" }: RippleProps) => {
   const { endRipple, ripple, startRipple } = useRipple();
 
   const handlePointerDown = (event: PointerEvent<HTMLElement>) => {

package/src/hoc/ripple/type.ts

@@ -0,0 +1,25 @@
+import type { PointerEvent, PointerEventHandler, ReactElement, ReactNode } from "react";
+
+export type RippleChildProps = {
+  children?: ReactNode;
+  className?: string;
+  onPointerDown?: PointerEventHandler<HTMLElement>;
+};
+
+export type RippleProps = {
+  children: ReactElement<RippleChildProps>;
+  rippleClassName?: string;
+};
+
+export type RippleState = {
+  id: number;
+  size: number;
+  x: number;
+  y: number;
+};
+
+export type UseRipple = {
+  ripple: RippleState | null;
+  endRipple: () => void;
+  startRipple: (event: PointerEvent<HTMLElement>) => void;
+};

package/src/{hooks → hoc/ripple}/use_ripple.ts

@@ -1,22 +1,10 @@
 import { useState } from "react";
 
 import type { PointerEvent } from "react";
-
-type Ripple = {
-  id: number;
-  size: number;
-  x: number;
-  y: number;
-};
-
-type UseRipple = {
-  ripple: Ripple | null;
-  endRipple: () => void;
-  startRipple: (event: PointerEvent<HTMLElement>) => void;
-};
+import type { RippleState, UseRipple } from "./type.js";
 
 export const useRipple = (): UseRipple => {
-  const [ripple, setRipple] = useState<Ripple | null>(null);
+  const [ripple, setRipple] = useState<RippleState | null>(null);
 
   const startRipple = (event: PointerEvent<HTMLElement>) => {
     const bounds = event.currentTarget.getBoundingClientRect();

package/src/hooks/use_theme.ts

@@ -1,20 +1,20 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { themeClient } from "../helpers/theme";
+import { margoThemeClient } from "../utils/theme/theme.js";
 
-import type { Theme } from "../helpers/theme";
+import type { MargoTheme } from "../utils/theme/type.js";
 
-export const useTheme = (): [Theme, (next: Theme | ((current: Theme) => Theme)) => void] => {
-  const [theme, setThemeState] = useState<Theme>(() => themeClient.get());
+export const useMargoTheme = (): [MargoTheme, (next: MargoTheme | ((current: MargoTheme) => MargoTheme)) => void] => {
+  const [theme, setThemeState] = useState<MargoTheme>(() => margoThemeClient.get());
 
   useEffect(() => {
     if (typeof document === "undefined") return;
 
     const root = document.documentElement;
-    setThemeState(themeClient.get());
+    setThemeState(margoThemeClient.get());
 
     const observer = new MutationObserver(() => {
-      setThemeState(themeClient.get());
+      setThemeState(margoThemeClient.get());
     });
 
     observer.observe(root, { attributes: true, attributeFilter: ["class"] });
@@ -22,8 +22,8 @@ export const useTheme = (): [Theme, (next: Theme | ((current: Theme) => Theme))
     return () => observer.disconnect();
   }, []);
 
-  const setTheme = useCallback((next: Theme | ((current: Theme) => Theme)) => {
-    themeClient.set(typeof next === "function" ? next(themeClient.get()) : next);
+  const setTheme = useCallback((next: MargoTheme | ((current: MargoTheme) => MargoTheme)) => {
+    margoThemeClient.set(typeof next === "function" ? next(margoThemeClient.get()) : next);
   }, []);
 
   return [theme, setTheme];

package/src/index.ts

@@ -1,16 +1,32 @@
-export { BorderGlow } from "./components/border_glow";
-export { Button } from "./components/button";
-export { Card } from "./components/card";
-export { MetaColorScheme } from "./components/meta_color_scheme";
-export { Ripple } from "./components/ripple";
+export { Button } from "./components/button/button.js";
+export { Card } from "./components/card/card.js";
+export { Chip } from "./components/chip/chip.js";
+export { Tooltip } from "./components/tooltip/tooltip.js";
 
-export { useTheme } from "./hooks/use_theme";
+export { BackgroundGlow } from "./hoc/background_glow/background_glow.js";
+export { BorderGlow } from "./hoc/border_glow/border_glow.js";
+export { Ripple } from "./hoc/ripple/ripple.js";
 
-export { cn } from "./helpers/cn";
-export { THEME, themeClient } from "./helpers/theme";
+export { MetaColorScheme } from "./meta/meta_color_scheme/meta_color_scheme.js";
 
-export type { BorderGlowChildProps, BorderGlowPosition, BorderGlowProps } from "./components/border_glow";
-export type { ButtonProps } from "./components/button";
-export type { CardProps } from "./components/card";
-export type { RippleChildProps, RippleProps } from "./components/ripple";
-export type { Theme } from "./helpers/theme";
+export { useMargoTheme } from "./hooks/use_theme.js";
+
+export { cn } from "./utils/cn/cn.js";
+export { margoTheme, margoThemeClient } from "./utils/theme/theme.js";
+
+export type {
+  ButtonIconLabelProps,
+  ButtonIconLabelSide,
+  ButtonIconProps,
+  ButtonLabelProps,
+  ButtonProps,
+} from "./components/button/type.js";
+export type { CardProps } from "./components/card/type.js";
+export type { ChipProps } from "./components/chip/type.js";
+export type { TooltipPosition, TooltipProps } from "./components/tooltip/type.js";
+
+export type { BackgroundGlowProps, BackgroundGlowSize } from "./hoc/background_glow/type.js";
+export type { BorderGlowPosition, BorderGlowProps } from "./hoc/border_glow/type.js";
+export type { RippleProps } from "./hoc/ripple/type.js";
+
+export type { MargoTheme, MargoThemeClient } from "./utils/theme/type.js";

package/src/utils/theme/theme.ts

@@ -0,0 +1,26 @@
+import type { MargoTheme, MargoThemeClient, MargoThemeConstants } from "./type.js";
+
+export const margoTheme: MargoThemeConstants = {
+  LIGHT: "light",
+  DARK: "dark",
+};
+
+const get = (): MargoTheme => {
+  if (typeof document === "undefined") return margoTheme.DARK;
+
+  return document.documentElement.classList.contains(margoTheme.DARK) ? margoTheme.DARK : margoTheme.LIGHT;
+};
+
+const set = (next: MargoTheme) => {
+  if (typeof document === "undefined") return;
+
+  document.documentElement.classList.toggle(margoTheme.DARK, next === margoTheme.DARK);
+};
+
+const toggle = () => set(get() === margoTheme.DARK ? margoTheme.LIGHT : margoTheme.DARK);
+
+export const margoThemeClient: MargoThemeClient = {
+  get,
+  set,
+  toggle,
+};

package/src/utils/theme/type.ts

@@ -0,0 +1,12 @@
+export type MargoTheme = "light" | "dark";
+
+export type MargoThemeConstants = {
+  readonly LIGHT: MargoTheme;
+  readonly DARK: MargoTheme;
+};
+
+export type MargoThemeClient = {
+  get: () => MargoTheme;
+  set: (next: MargoTheme) => void;
+  toggle: () => void;
+};

package/src/components/border_glow.tsx

@@ -1,45 +0,0 @@
-import { cloneElement } from "react";
-
-import { cn } from "../helpers/cn";
-
-import type { PointerEvent, PointerEventHandler, ReactElement } from "react";
-
-import "./border_glow.css";
-
-export type BorderGlowPosition = "up" | "down" | "left" | "right" | "all";
-
-export type BorderGlowChildProps = {
-  className?: string;
-  onPointerMove?: PointerEventHandler<HTMLElement>;
-};
-
-export type BorderGlowProps = {
-  children: ReactElement<BorderGlowChildProps>;
-  position?: BorderGlowPosition;
-};
-
-const BORDER_GLOW_POSITION_CLASS: Record<BorderGlowPosition, string> = {
-  up: "margo-border-glow--edge-top",
-  down: "margo-border-glow--edge-bottom",
-  left: "margo-border-glow--edge-left",
-  right: "margo-border-glow--edge-right",
-  all: "margo-border-glow--ring",
-};
-
-export const BorderGlow = ({ children, position = "all" }: BorderGlowProps) => {
-  const handlePointerMove = (event: PointerEvent<HTMLElement>) => {
-    const bounds = event.currentTarget.getBoundingClientRect();
-    const x = event.clientX - bounds.left;
-    const y = event.clientY - bounds.top;
-
-    event.currentTarget.style.setProperty("--margo-border-glow-x", `${position === "right" ? bounds.width - x : x}px`);
-    event.currentTarget.style.setProperty("--margo-border-glow-y", `${position === "down" ? bounds.height - y : y}px`);
-
-    children.props.onPointerMove?.(event);
-  };
-
-  return cloneElement(children, {
-    className: cn("relative isolate margo-border-glow", BORDER_GLOW_POSITION_CLASS[position], children.props.className),
-    onPointerMove: handlePointerMove,
-  });
-};

package/src/components/button.tsx

@@ -1,88 +0,0 @@
-import { Tag } from "react-renderable";
-import { cn } from "../helpers/cn";
-import { Ripple } from "./ripple";
-
-import type { CSSProperties, ElementType, ReactNode } from "react";
-import type { TagProps } from "react-renderable";
-
-const CLASSNAME_BASE = `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:margo-border-gradient-primary
-focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main`;
-const CLASSNAME_SURFACE = "border-border bg-main";
-const CLASSNAME_ICON = "relative z-10 flex size-4 min-w-0 shrink-0 items-center justify-center [direction:ltr]";
-const CLASSNAME_LABEL = "relative z-10 flex items-center text-sm whitespace-nowrap lowercase [direction:ltr] px-0.5";
-const CLASSNAME_GRID = "grid items-center gap-0 transition-[grid-template-columns,gap] duration-[180ms] ease-in-out";
-const CLASSNAME_SLOT = `min-w-0 overflow-hidden opacity-0 transition-opacity duration-[180ms] ease-in
-group-hover/button:opacity-100 group-focus-visible/button:opacity-100 group-data-[open=true]/button:opacity-100`;
-
-export type ButtonProps<T extends ElementType = "button"> = TagProps<T> & {
-  clickable?: boolean;
-  active?: boolean;
-  open?: boolean;
-};
-
-export const Button = <T extends ElementType = "button">(props: ButtonProps<T>) => {
-  const { as, clickable = true, active = false, open = false, ...restProps } = props;
-  const nativeProps = { as: as ?? "button", ...restProps } as TagProps<T>;
-
-  return (
-    <Ripple>
-      <Tag
-        {...nativeProps}
-        data-open={open}
-        className={cn(
-          CLASSNAME_BASE,
-          active ? "margo-border-gradient-primary" : CLASSNAME_SURFACE,
-          !clickable && "pointer-events-none",
-          props.className,
-        )}
-      />
-    </Ripple>
-  );
-};
-
-Button.Icon = ({ icon, className = null }: { icon: ReactNode; className?: string | null }) => (
-  <span className={cn(CLASSNAME_ICON, className)}>{icon}</span>
-);
-
-Button.Label = ({ label, className = null }: { label: string; className?: string | null }) => (
-  <span className={cn(CLASSNAME_LABEL, className)}>{label}</span>
-);
-
-Button.IconLabel = ({
-  icon,
-  label,
-  gap = "0.5rem",
-  reverse = false,
-  side = "end",
-  className = null,
-}: {
-  icon: ReactNode;
-  label: ReactNode;
-  gap?: string;
-  reverse?: boolean;
-  side?: "start" | "end";
-  className?: string | null;
-}) => {
-  return (
-    <span
-      style={{ "--button-gap": gap } as CSSProperties}
-      className={cn(
-        CLASSNAME_GRID,
-        side === "start" && "[direction:rtl]",
-        !reverse &&
-          `grid-cols-[1rem_0fr] group-hover/button:grid-cols-[1rem_1fr] group-hover/button:gap-(--button-gap)
-          group-focus-visible/button:grid-cols-[1rem_1fr] group-focus-visible/button:gap-(--button-gap)
-          group-data-[open=true]/button:grid-cols-[1rem_1fr] group-data-[open=true]/button:gap-(--button-gap)`,
-        reverse &&
-          `grid-cols-[auto_0rem] group-hover/button:grid-cols-[auto_1rem] group-hover/button:gap-(--button-gap)
-          group-focus-visible/button:grid-cols-[auto_1rem] group-focus-visible/button:gap-(--button-gap)
-          group-data-[open=true]/button:grid-cols-[auto_1rem] group-data-[open=true]/button:gap-(--button-gap)`,
-        className,
-      )}
-    >
-      {reverse ? label : icon}
-      <span className={CLASSNAME_SLOT}>{reverse ? icon : label}</span>
-    </span>
-  );
-};

package/src/components/card.tsx

@@ -1,29 +0,0 @@
-import { Tag } from "react-renderable";
-import { cn } from "../helpers/cn";
-import { BorderGlow } from "./border_glow";
-
-import type { ElementType } from "react";
-import type { TagProps } from "react-renderable";
-
-export type CardProps<T extends ElementType = "div"> = TagProps<T>;
-
-export const Card = <T extends ElementType = "div">(props: CardProps<T>) => {
-  const { as, className, children, ...restProps } = props;
-  const nativeProps = { as: as ?? "div", ...restProps } as TagProps<T>;
-
-  return (
-    <BorderGlow>
-      <Tag
-        {...nativeProps}
-        className={cn(
-          "rounded-lg border-2 border-border bg-main p-5 text-on-main",
-          `focus:margo-border-gradient-primary focus-visible:outline focus-visible:outline-offset-1
-          focus-visible:outline-on-main`,
-          className,
-        )}
-      >
-        {children}
-      </Tag>
-    </BorderGlow>
-  );
-};

package/src/helpers/theme.ts

@@ -1,31 +0,0 @@
-export type Theme = "light" | "dark";
-
-type ThemeConstants = {
-  readonly LIGHT: Theme;
-  readonly DARK: Theme;
-};
-
-export const THEME: ThemeConstants = {
-  LIGHT: "light",
-  DARK: "dark",
-};
-
-const get = (): Theme => {
-  if (typeof document === "undefined") return THEME.DARK;
-
-  return document.documentElement.classList.contains(THEME.DARK) ? THEME.DARK : THEME.LIGHT;
-};
-
-const set = (next: Theme) => {
-  if (typeof document === "undefined") return;
-
-  document.documentElement.classList.toggle(THEME.DARK, next === THEME.DARK);
-};
-
-const toggle = () => set(get() === THEME.DARK ? THEME.LIGHT : THEME.DARK);
-
-export const themeClient = {
-  get,
-  set,
-  toggle,
-};