margo-ui 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "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/blockquote/blockquote.tsx

@@ -0,0 +1,11 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { blockquoteBaseClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { BlockquoteProps } from "./type.js";
+
+export const Blockquote = <T extends ElementType = "blockquote">({ className, ...rest }: BlockquoteProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "blockquote")} className={cn(blockquoteBaseClassName, className)} />
+);

package/src/components/blockquote/style.ts

@@ -0,0 +1 @@
+export const blockquoteBaseClassName = "border-l-2 border-primary-darken py-0.5 pl-4";

package/src/components/blockquote/type.ts

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

package/src/components/button/button.tsx

@@ -0,0 +1,83 @@
+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,
+  onClickBlur,
+  className,
+  onClick,
+  ...rest
+}: ButtonProps<T>) => {
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    onClick?.(event);
+    if (typeof onClickBlur === "function") {
+      const target = event.currentTarget;
+      onClickBlur(event);
+      setTimeout(() => target.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 shadow-button`;
+
+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;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onClickBlur?: 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 shadow-card";
+
+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 shadow-chip";
+
+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/progress_bar/progress_bar.css

@@ -0,0 +1,33 @@
+.margo-progress-bar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(
+    --margo-progress-bar-fill,
+    linear-gradient(to right, var(--color-primary-darken), var(--color-primary))
+  );
+}
+
+.margo-progress-bar[data-mode="determinate"]::before {
+  clip-path: inset(0 calc(100% - var(--margo-progress-bar-value, 0%)) 0 0);
+}
+
+.margo-progress-bar[data-mode="determinate"][data-animate="true"]::before {
+  transition: clip-path 300ms ease-out;
+}
+
+.margo-progress-bar[data-mode="indeterminate"]::before {
+  inset: 0 auto 0 0;
+  width: 40%;
+  animation: margo-progress-bar-indeterminate 800ms ease-in-out infinite;
+}
+
+@keyframes margo-progress-bar-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(250%);
+  }
+}

package/src/components/progress_bar/progress_bar.tsx

@@ -0,0 +1,35 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { progressBarBaseClassName } from "./style.js";
+
+import type { CSSProperties, ElementType } from "react";
+import type { ProgressBarProps } from "./type.js";
+
+import "./progress_bar.css";
+
+export const ProgressBar = <T extends ElementType = "div">({
+  animate = true,
+  className,
+  mode = "indeterminate",
+  style,
+  value = 0,
+  ...rest
+}: ProgressBarProps<T>) => {
+  const isDeterminate = mode === "determinate";
+  const progress = Math.min(100, Math.max(0, value));
+
+  return (
+    <Tag
+      {...Tag.forward<T>(rest)}
+      role="progressbar"
+      aria-valuemin={isDeterminate ? 0 : undefined}
+      aria-valuemax={isDeterminate ? 100 : undefined}
+      aria-valuenow={isDeterminate ? progress : undefined}
+      data-mode={mode}
+      data-animate={animate}
+      style={{ ...style, "--margo-progress-bar-value": `${progress}%` } as CSSProperties}
+      className={cn(progressBarBaseClassName, className)}
+    />
+  );
+};

package/src/components/progress_bar/style.ts

@@ -0,0 +1 @@
+export const progressBarBaseClassName = "margo-progress-bar relative h-0.5 overflow-hidden";

package/src/components/progress_bar/type.ts

@@ -0,0 +1,12 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type ProgressBarMode = "determinate" | "indeterminate";
+
+export type ProgressBarOwnProps = {
+  animate?: boolean;
+  mode?: ProgressBarMode;
+  value?: number;
+};
+
+export type ProgressBarProps<T extends ElementType = "div"> = TagProps<T, ProgressBarOwnProps>;

package/src/components/spinner/spinner.tsx

@@ -0,0 +1,21 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { spinnerBaseClassName, spinnerIconClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { SpinnerProps } from "./type.js";
+
+export const Spinner = <T extends ElementType = "span">({ className, label = "Loading", ...rest }: SpinnerProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest, "span")}
+    role="status"
+    aria-label={label}
+    className={cn(spinnerBaseClassName, className)}
+  >
+    <svg viewBox="0 0 24 24" aria-hidden className={spinnerIconClassName}>
+      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
+      <path d="M12 3a9 9 0 0 1 9 9" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="3" />
+    </svg>
+  </Tag>
+);

package/src/components/spinner/style.ts

@@ -0,0 +1,3 @@
+export const spinnerBaseClassName = "inline-flex size-4 animate-spin";
+
+export const spinnerIconClassName = "size-full";

package/src/components/spinner/type.ts

@@ -0,0 +1,8 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type SpinnerOwnProps = {
+  label?: string;
+};
+
+export type SpinnerProps<T extends ElementType = "span"> = Omit<TagProps<T, SpinnerOwnProps>, "aria-label">;

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/css/theme.css

@@ -23,6 +23,11 @@
   --color-medium: var(--margo-color-medium);
   --color-border: var(--margo-color-border);
 
+  /* Shadows */
+  --shadow-card: var(--margo-shadow-card);
+  --shadow-button: var(--margo-shadow-button);
+  --shadow-chip: var(--margo-shadow-chip);
+
   /* Border widths */
   --border-width-2: var(--margo-border-width-2);
 

package/src/css/variables.css

@@ -30,34 +30,44 @@
   --margo-font-weight-black: 900;
 
   --margo-border-width-2: 1.5px;
+
+  --margo-shadow-card-color: 0 0 0;
+  --margo-shadow-button-color: 0 0 0;
+  --margo-shadow-chip-color: 0 0 0;
 }
 
-/* Colors Theme Light */
 :root {
   color-scheme: light;
 
   --margo-color-neutral: #ffffff;
   --margo-color-on-neutral: #000000;
-  --margo-color-main: #e9e9e9;
-  --margo-color-on-main: #222222;
-  --margo-color-primary: #2c4ee7;
-  --margo-color-primary-darken: #1b24a5;
+  --margo-color-main: #f6f6f6;
+  --margo-color-on-main: #151515;
+  --margo-color-primary: #57e550;
+  --margo-color-primary-darken: #45b93f;
   --margo-color-secondary: #d3d3d3;
   --margo-color-medium: #7e7e7e;
-  --margo-color-border: #d3d3d3;
+  --margo-color-border: #dcdcdc;
+
+  --margo-shadow-card: 0 4px 12px -4px rgb(var(--margo-shadow-card-color) / 0.1);
+  --margo-shadow-button: 0 2px 6px -2px rgb(var(--margo-shadow-button-color) / 0.1);
+  --margo-shadow-chip: 0 1px 3px -1px rgb(var(--margo-shadow-chip-color) / 0.5);
 }
 
-/* Colors Theme Dark */
 .dark {
   color-scheme: dark;
 
   --margo-color-neutral: #000000;
   --margo-color-on-neutral: #ffffff;
-  --margo-color-main: #141414;
-  --margo-color-on-main: #f9f9f9;
-  --margo-color-primary: #f5cb77;
-  --margo-color-primary-darken: #ad9055;
+  --margo-color-main: #151515;
+  --margo-color-on-main: #eeeeee;
+  --margo-color-primary: #57e550;
+  --margo-color-primary-darken: #45b93f;
   --margo-color-secondary: #2c2c2c;
   --margo-color-medium: #999999;
   --margo-color-border: #2c2c2c;
+
+  --margo-shadow-card: 0 4px 12px -4px rgb(var(--margo-shadow-card-color) / 0.5);
+  --margo-shadow-button: 0 2px 6px -2px rgb(var(--margo-shadow-button-color) / 0.5);
+  --margo-shadow-chip: 0 1px 3px -1px rgb(var(--margo-shadow-chip-color) / 0.5);
 }

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/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,23 +1,14 @@
 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-darken" }: RippleProps) => {
   const { endRipple, ripple, startRipple } = useRipple();

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,22 +1,39 @@
-export { BackgroundGlow } from "./components/background_glow";
-export { BorderGlow } from "./components/border_glow";
-export { Button } from "./components/button";
-export { Card } from "./components/card";
-export { Chip } from "./components/chip";
-export { MetaColorScheme } from "./components/meta_color_scheme";
-export { Ripple } from "./components/ripple";
-export { Tooltip } from "./components/tooltip";
-
-export { useTheme } from "./hooks/use_theme";
-
-export { cn } from "./helpers/cn";
-export { THEME, themeClient } from "./helpers/theme";
-
-export type { BackgroundGlowChildProps, BackgroundGlowProps, BackgroundGlowSize } from "./components/background_glow";
-export type { BorderGlowChildProps, BorderGlowPosition, BorderGlowProps } from "./components/border_glow";
-export type { ButtonIconLabelSide, ButtonProps } from "./components/button";
-export type { CardProps } from "./components/card";
-export type { ChipProps } from "./components/chip";
-export type { RippleChildProps, RippleProps } from "./components/ripple";
-export type { TooltipPosition, TooltipProps } from "./components/tooltip";
-export type { Theme } from "./helpers/theme";
+export { Blockquote } from "./components/blockquote/blockquote.js";
+export { Button } from "./components/button/button.js";
+export { Card } from "./components/card/card.js";
+export { Chip } from "./components/chip/chip.js";
+export { ProgressBar } from "./components/progress_bar/progress_bar.js";
+export { Spinner } from "./components/spinner/spinner.js";
+export { Tooltip } from "./components/tooltip/tooltip.js";
+
+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 { 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 { margoTheme, margoThemeClient } from "./utils/theme/theme.js";
+
+export type { BlockquoteProps } from "./components/blockquote/type.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 { ProgressBarMode, ProgressBarProps } from "./components/progress_bar/type.js";
+export type { SpinnerProps } from "./components/spinner/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/background_glow.tsx

@@ -1,45 +0,0 @@
-import { cloneElement } from "react";
-
-import { cn } from "../helpers/cn";
-
-import type { PointerEvent, PointerEventHandler, ReactElement } from "react";
-
-import "./background_glow.css";
-
-export type BackgroundGlowSize = "sm" | "md" | "lg";
-
-export type BackgroundGlowChildProps = {
-  className?: string;
-  onPointerMove?: PointerEventHandler<HTMLElement>;
-};
-
-export type BackgroundGlowProps = {
-  children: ReactElement<BackgroundGlowChildProps>;
-  size?: BackgroundGlowSize;
-};
-
-const BACKGROUND_GLOW_SIZE_CLASS: Record<BackgroundGlowSize, string> = {
-  sm: "margo-background-glow--size-sm",
-  md: "margo-background-glow--size-md",
-  lg: "margo-background-glow--size-lg",
-};
-
-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(
-      "relative isolate margo-background-glow",
-      BACKGROUND_GLOW_SIZE_CLASS[size],
-      children.props.className,
-    ),
-    onPointerMove: handlePointerMove,
-  });
-};

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,98 +0,0 @@
-import { Tag } from "react-renderable";
-import { cn } from "../helpers/cn";
-import { Ripple } from "./ripple";
-
-import type { CSSProperties, ElementType, MouseEvent, MouseEventHandler, 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 ButtonIconLabelSide = "start" | "end";
-
-export type ButtonProps<T extends ElementType = "button"> = TagProps<T> & {
-  clickable?: boolean;
-  active?: boolean;
-  open?: boolean;
-  blurOnClick?: boolean;
-};
-
-export const Button = <T extends ElementType = "button">(props: ButtonProps<T>) => {
-  const { as, clickable = true, active = false, open = false, blurOnClick = true, ...restProps } = props;
-  const nativeProps = { as: as ?? "button", ...restProps } as TagProps<T>;
-  const onClick = props.onClick as MouseEventHandler<HTMLElement> | undefined;
-
-  const handleClick = (event: MouseEvent<HTMLElement>) => {
-    onClick?.(event);
-    if (blurOnClick && event.detail > 0) setTimeout(() => event.currentTarget.blur(), 150);
-  };
-
-  return (
-    <Ripple>
-      <Tag
-        {...nativeProps}
-        data-open={open}
-        onClick={handleClick}
-        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?: ButtonIconLabelSide;
-  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,26 +0,0 @@
-import { Tag } from "react-renderable";
-import { cn } from "../helpers/cn";
-
-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 (
-    <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>
-  );
-};

package/src/components/chip.tsx

@@ -1,27 +0,0 @@
-import { Tag } from "react-renderable";
-import { cn } from "../helpers/cn";
-
-import type { ElementType } from "react";
-import type { TagProps } from "react-renderable";
-
-export type ChipProps<T extends ElementType = "div"> = TagProps<T> & {
-  active?: boolean;
-};
-
-export const Chip = <T extends ElementType = "div">(props: ChipProps<T>) => {
-  const { as, active = false, className, children, ...restProps } = props;
-  const nativeProps = { as: as ?? "div", ...restProps } as TagProps<T>;
-
-  return (
-    <Tag
-      {...nativeProps}
-      className={cn(
-        "bg-secondary px-3 py-0.5 whitespace-nowrap lowercase flex-none leading-none rounded-md text-mc",
-        className,
-        active && "bg-on-main text-main",
-      )}
-    >
-      {children}
-    </Tag>
-  );
-};

package/src/components/tooltip.tsx

@@ -1,55 +0,0 @@
-import { Tag } from "react-renderable";
-import { cn } from "../helpers/cn";
-
-import { useRef } from "react";
-
-import type { ElementType, ReactNode } from "react";
-import type { TagProps } from "react-renderable";
-
-export type TooltipPosition = "up" | "down" | "left" | "right";
-
-export type TooltipProps<T extends ElementType = "div"> = Omit<TagProps<T>, "aria-label" | "children" | "id"> & {
-  ariaLabel?: string;
-  id?: string;
-  placeholder?: ReactNode;
-  position?: TooltipPosition;
-  children?: ReactNode;
-};
-
-const TOOLTIP_POSITION_CLASS: 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",
-};
-
-export const Tooltip = <T extends ElementType = "div">(props: TooltipProps<T>) => {
-  const { as, ariaLabel, children, className, id, placeholder, position = "down", ...restProps } = props;
-  const nativeProps = { as: as ?? "div", ...restProps } as TagProps<T>;
-
-  const placeholderRef = useRef<ReactNode>(null);
-
-  const isFilled = placeholder !== null && placeholder !== undefined;
-
-  if (isFilled) placeholderRef.current = placeholder;
-
-  return (
-    <Tag {...nativeProps} className={cn("group relative inline-block size-fit", className)}>
-      {children}
-      <span
-        id={id}
-        role="tooltip"
-        aria-label={isFilled ? undefined : ariaLabel}
-        className={cn(
-          `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`,
-          "transition-opacity duration-[250ms] ease-in-out",
-          isFilled && "group-hover:opacity-100 group-focus-within:opacity-100",
-          TOOLTIP_POSITION_CLASS[position],
-        )}
-      >
-        {placeholderRef.current}
-      </span>
-    </Tag>
-  );
-};

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,
-};