@glyphui/ui 0.0.0-stage → 0.1.1

package/dist/registry-BGSJoiLq.d.ts

@@ -0,0 +1,9 @@
+import { ComponentEntry } from "@glyphui/tokens";
+import { VariantProps } from "tailwind-variants";
+//#region src/utils/registry.d.ts
+/** Derives a registry entry (variant props + slot names) from a component's `tv()` styles. */
+type StylesEntry<T extends ((...args: any) => any) & {
+  slots: unknown;
+}> = ComponentEntry<VariantProps<T>, Extract<keyof NonNullable<T['slots']>, string>>;
+//#endregion
+export { StylesEntry as t };

package/dist/states-BxPjCUxz.js

@@ -0,0 +1,287 @@
+"use client";
+import { E as tv, O as useComponentConfig, S as focusRing, T as transition, _ as Button, b as Spinner, d as InboxIcon, n as useFieldControl, o as CheckIcon, p as MinusIcon, r as AlertIcon, w as themedBorder } from "./field-context-B8cYheXz.js";
+import { Checkbox } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/checkbox/checkbox.tsx
+const checkboxStyles = tv({ slots: {
+	root: [
+		"peer mt-0.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-xs border-input bg-surface text-primary-foreground shadow-xs",
+		themedBorder,
+		transition,
+		focusRing,
+		"hover:border-border-strong aria-invalid:border-danger",
+		"data-[state=checked]:border-primary data-[state=checked]:bg-primary",
+		"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
+		"disabled:cursor-not-allowed disabled:opacity-50"
+	],
+	indicator: "flex items-center justify-center [&>svg]:size-3.5 [&>svg]:stroke-[3]"
+} });
+function Checkbox$1(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Checkbox", useFieldControl(inProps));
+	const s = checkboxStyles();
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: s.indicator({ class: slots.indicator }),
+			children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+		})
+	});
+}
+//#endregion
+//#region src/components/input/input.styles.ts
+/** Shared by Input, Textarea and the Select trigger so all fields look alike. */
+const fieldControl = [
+	"w-full rounded-md border-input bg-surface text-foreground shadow-xs",
+	themedBorder,
+	transition,
+	"hover:border-border-strong",
+	"data-invalid:border-danger aria-invalid:border-danger"
+];
+const inputStyles = tv({
+	slots: {
+		root: [
+			...fieldControl,
+			"flex items-center gap-2 px-3",
+			"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20",
+			"data-invalid:focus-within:ring-danger/20",
+			"has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50"
+		],
+		input: "h-full w-full min-w-0 bg-transparent text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
+		adornment: "flex shrink-0 items-center text-faint-foreground [&>svg]:size-4"
+	},
+	variants: { size: {
+		sm: { root: "h-(--glyph-control-sm) text-small" },
+		md: { root: "h-(--glyph-control-md) text-small" },
+		lg: { root: "h-(--glyph-control-lg) text-body" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/input/input.tsx
+function Input(inProps) {
+	const [props, slots] = useComponentConfig("Input", useFieldControl(inProps));
+	const { size, prefix, suffix, className, inputClassName, ...rest } = props;
+	const s = inputStyles({ size });
+	const invalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input",
+		"data-invalid": invalid || void 0,
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				className: s.adornment({ class: slots.adornment }),
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				className: s.input({ class: [slots.input, inputClassName] }),
+				...rest
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				className: s.adornment({ class: slots.adornment }),
+				children: suffix
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/skeleton/skeleton.tsx
+const skeletonStyles = tv({ slots: { base: "animate-pulse rounded-sm bg-muted" } });
+/** Placeholder block shown while content loads. Size it with classes: `h-4 w-32`. */
+function Skeleton(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Skeleton", inProps);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		"aria-hidden": "true",
+		className: skeletonStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/table/table.tsx
+const tableStyles = tv({ slots: {
+	wrapper: "relative w-full overflow-x-auto",
+	table: "w-full caption-bottom border-collapse text-small tabular-nums",
+	header: "[&_tr]:border-b [&_tr]:border-border",
+	body: "[&_tr:last-child]:border-0",
+	row: "border-b border-border transition-colors duration-(--glyph-duration-fast) hover:bg-muted/50 data-[state=selected]:bg-primary/6",
+	head: "h-10 whitespace-nowrap px-3 first:pl-4 last:pr-4 text-left align-middle text-caption font-medium text-muted-foreground [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0",
+	cell: "px-3 py-2.5 align-middle first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0",
+	caption: "mt-3 text-small text-faint-foreground"
+} });
+const s = tableStyles();
+function useSlots() {
+	return useComponentConfig("Table", {})[1];
+}
+/** Semantic table primitives styled by the theme. For sorting and pagination use DataTable. */
+function Table({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-wrapper",
+		className: s.wrapper({ class: slots.wrapper }),
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: s.table({ class: [slots.table, className] }),
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: s.body({ class: [slots.body, className] }),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: s.row({ class: [slots.row, className] }),
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: s.head({ class: [slots.head, className] }),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: s.cell({ class: [slots.cell, className] }),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: s.caption({ class: [slots.caption, className] }),
+		...props
+	});
+}
+//#endregion
+//#region src/patterns/async/states.tsx
+const stateStyles = tv({
+	slots: {
+		root: "flex flex-col items-center justify-center gap-3 px-6 py-12 text-center",
+		icon: "flex size-10 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&>svg]:size-5",
+		text: "grid max-w-sm gap-1",
+		title: "text-body font-medium text-foreground",
+		description: "text-small text-muted-foreground",
+		action: "mt-1 flex items-center gap-2"
+	},
+	variants: { tone: {
+		neutral: {},
+		danger: { icon: "border-danger/30 bg-danger/10 text-danger" }
+	} }
+});
+/** Shown when a list or page has no content yet. Say what will appear and how to add it. */
+function EmptyState(inProps) {
+	const [props, slots] = useComponentConfig("EmptyState", inProps);
+	const { icon = /* @__PURE__ */ jsx(InboxIcon, {}), title, description, action, className, ...rest } = props;
+	const s = stateStyles({ tone: "neutral" });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "empty-state",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: s.text({ class: slots.text }),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: s.title({ class: slots.title }),
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: s.description({ class: slots.description }),
+					children: description
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: s.action({ class: slots.action }),
+				children: action
+			})
+		]
+	});
+}
+function messageOf(error) {
+	if (error instanceof Error) return error.message;
+	if (typeof error === "string") return error;
+}
+/** Shown when loading failed. Explains what went wrong and offers a retry. */
+function ErrorState(inProps) {
+	const [props, slots] = useComponentConfig("EmptyState", inProps);
+	const { icon = /* @__PURE__ */ jsx(AlertIcon, {}), title = "Couldn’t load this", description, error, onRetry, action, className, ...rest } = props;
+	const s = stateStyles({ tone: "danger" });
+	const detail = description ?? messageOf(error);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "error-state",
+		role: "alert",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: s.text({ class: slots.text }),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: s.title({ class: slots.title }),
+					children: title
+				}), detail && /* @__PURE__ */ jsx("p", {
+					className: s.description({ class: slots.description }),
+					children: detail
+				})]
+			}),
+			(action || onRetry) && /* @__PURE__ */ jsxs("div", {
+				className: s.action({ class: slots.action }),
+				children: [onRetry && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => onRetry(),
+					children: "Try again"
+				}), action]
+			})
+		]
+	});
+}
+/** A centered spinner with a label, for content that has no natural skeleton. */
+function LoadingState({ label = "Loading…", className, ...props }) {
+	const s = stateStyles();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "loading-state",
+		role: "status",
+		className: s.root({ class: className }),
+		...props,
+		children: [/* @__PURE__ */ jsx(Spinner, {
+			size: "lg",
+			className: "text-faint-foreground"
+		}), /* @__PURE__ */ jsx("p", {
+			className: s.description(),
+			children: label
+		})]
+	});
+}
+//#endregion
+export { inputStyles as _, Table as a, TableCell as c, TableRow as d, tableStyles as f, fieldControl as g, Input as h, stateStyles as i, TableHead as l, skeletonStyles as m, ErrorState as n, TableBody as o, Skeleton as p, LoadingState as r, TableCaption as s, EmptyState as t, TableHeader as u, Checkbox$1 as v, checkboxStyles as y };

package/dist/tv-DuMh7UH2.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps as VariantProps$1 } from "tailwind-variants";
+//#region src/utils/tv.d.ts
+/** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
+declare const tv: import("tailwind-variants").TV;
+//#endregion
+export { tv as n, VariantProps$1 as t };

package/package.json

@@ -1,6 +1,116 @@
 {
   "name": "@glyphui/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "React components on Tailwind CSS v4 that take their entire look from one theme file. Forms, data tables, app layouts and async states included.",
+  "license": "MIT",
+  "author": "Mohak Gupta (https://github.com/khalmohak)",
+  "homepage": "https://github.com/khalmohak/glyph#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/khalmohak/glyph.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/khalmohak/glyph/issues"
+  },
+  "keywords": [
+    "react",
+    "tailwindcss",
+    "tailwind",
+    "components",
+    "ui",
+    "design-system",
+    "radix-ui",
+    "theme",
+    "dark-mode",
+    "forms",
+    "data-table"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "@glyphui/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./form": {
+      "@glyphui/source": "./src/patterns/form/index.ts",
+      "types": "./dist/form.d.ts",
+      "default": "./dist/form.js"
+    },
+    "./data-table": {
+      "@glyphui/source": "./src/patterns/data-table/index.ts",
+      "types": "./dist/data-table.d.ts",
+      "default": "./dist/data-table.js"
+    },
+    "./styles.css": "./styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "styles.css",
+    "!src/**/*.test.tsx",
+    "!src/**/*.test-d.tsx",
+    "!src/test"
+  ],
+  "dependencies": {
+    "@glyphui/tokens": "^0.1.1",
+    "@standard-schema/spec": "^1.1.0",
+    "clsx": "^2.1.1",
+    "radix-ui": "^1.6.7",
+    "tailwind-merge": "^3.7.0",
+    "tailwind-variants": "^3.3.1"
+  },
+  "peerDependencies": {
+    "@hookform/resolvers": ">=5.1.0",
+    "@tanstack/react-table": "^8.20.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-hook-form": "^7.55.0",
+    "tailwindcss": ">=4.1"
+  },
+  "peerDependenciesMeta": {
+    "@hookform/resolvers": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@glyphui/tsconfig": "0.0.0",
+    "@hookform/resolvers": "^5.9.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@testing-library/jest-dom": "^6.10.0",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "jsdom": "^27.4.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-hook-form": "^7.89.0",
+    "tsdown": "^0.23.0",
+    "typescript": "~5.9.3",
+    "vitest": "^3.2.7",
+    "zod": "^4.6.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc",
+    "test": "vitest run",
+    "check:exports": "attw --pack . --profile esm-only --exclude-entrypoints ./styles.css"
+  }
 }

package/src/components/avatar/avatar.styles.ts

@@ -0,0 +1,22 @@
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const avatarStyles = tv({
+  slots: {
+    root: 'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-pill bg-muted align-middle',
+    image: 'size-full object-cover',
+    fallback: 'flex size-full items-center justify-center font-medium text-muted-foreground',
+    group:
+      'flex items-center -space-x-2 [&>[data-slot=avatar]]:ring-2 [&>[data-slot=avatar]]:ring-background',
+  },
+  variants: {
+    size: {
+      xs: { root: 'size-5', fallback: 'text-[0.5625rem]' },
+      sm: { root: 'size-6', fallback: 'text-[0.625rem]' },
+      md: { root: 'size-8', fallback: 'text-caption' },
+      lg: { root: 'size-11', fallback: 'text-small' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type AvatarVariants = VariantProps<typeof avatarStyles>

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,62 @@
+import { Avatar as AvatarPrimitive } from 'radix-ui'
+import type { ComponentProps, CSSProperties } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { type AvatarVariants, avatarStyles } from './avatar.styles'
+
+export interface AvatarProps extends ComponentProps<typeof AvatarPrimitive.Root>, AvatarVariants {
+  /** Used for the image alt text and the initials fallback. */
+  name: string
+  src?: string | undefined
+}
+
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/)
+  const first = parts[0]?.[0] ?? ''
+  const last = parts.length > 1 ? (parts.at(-1)?.[0] ?? '') : ''
+  return (first + last).toUpperCase()
+}
+
+/** A stable hue per name, so fallback avatars are distinguishable but not random. */
+function hue(name: string): number {
+  let h = 0
+  for (const char of name) h = (h * 31 + char.charCodeAt(0)) % 360
+  return h
+}
+
+export function Avatar(inProps: AvatarProps) {
+  const [props, slots] = useComponentConfig('Avatar', inProps)
+  const { name, src, size, className, style, ...rest } = props
+  const s = avatarStyles({ size })
+  const tint = { '--avatar-hue': hue(name), ...style } as CSSProperties
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={s.root({ class: [slots.root, className] })}
+      style={tint}
+      {...rest}
+    >
+      {src && (
+        <AvatarPrimitive.Image src={src} alt={name} className={s.image({ class: slots.image })} />
+      )}
+      <AvatarPrimitive.Fallback
+        className={s.fallback({
+          class: ['bg-[oklch(68%_0.11_var(--avatar-hue)/0.22)] text-foreground', slots.fallback],
+        })}
+        aria-label={src ? undefined : name}
+      >
+        {initials(name)}
+      </AvatarPrimitive.Fallback>
+    </AvatarPrimitive.Root>
+  )
+}
+
+export function AvatarGroup({ className, ...props }: ComponentProps<'div'>) {
+  const [, slots] = useComponentConfig('Avatar', {})
+  return (
+    <div
+      data-slot="avatar-group"
+      className={avatarStyles().group({ class: [slots.group, className] })}
+      {...props}
+    />
+  )
+}

package/src/components/avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup, type AvatarProps } from './avatar'
+export { type AvatarVariants, avatarStyles } from './avatar.styles'

package/src/components/badge/badge.styles.ts

@@ -0,0 +1,69 @@
+import { themedBorder } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+// Tinted text is mixed toward the foreground so it stays readable on light and dark surfaces.
+const tones = {
+  neutral: {
+    soft: 'bg-muted text-muted-foreground',
+    solid: 'bg-secondary text-secondary-foreground',
+    outline: 'border-border-strong text-foreground',
+  },
+  primary: {
+    soft: 'bg-primary/14 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]',
+    solid: 'bg-primary text-primary-foreground',
+    outline:
+      'border-primary/50 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]',
+  },
+  success: {
+    soft: 'bg-success/14 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]',
+    solid: 'bg-success text-success-foreground',
+    outline:
+      'border-success/50 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]',
+  },
+  warning: {
+    soft: 'bg-warning/16 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]',
+    solid: 'bg-warning text-warning-foreground',
+    outline:
+      'border-warning/50 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]',
+  },
+  danger: {
+    soft: 'bg-danger/14 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]',
+    solid: 'bg-danger text-danger-foreground',
+    outline:
+      'border-danger/50 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]',
+  },
+  info: {
+    soft: 'bg-info/14 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]',
+    solid: 'bg-info text-info-foreground',
+    outline:
+      'border-info/50 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]',
+  },
+} as const
+
+type Tone = keyof typeof tones
+type Variant = keyof (typeof tones)[Tone]
+
+export const badgeStyles = tv({
+  slots: {
+    base: [
+      'inline-flex h-5.5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-pill border-transparent px-2',
+      'text-caption tabular-nums',
+      themedBorder,
+    ],
+    dot: 'size-1.5 shrink-0 rounded-pill bg-current',
+  },
+  variants: {
+    tone: { neutral: {}, primary: {}, success: {}, warning: {}, danger: {}, info: {} },
+    variant: { soft: {}, solid: {}, outline: { base: 'bg-transparent' } },
+  },
+  compoundVariants: (Object.keys(tones) as Tone[]).flatMap((tone) =>
+    (Object.keys(tones[tone]) as Variant[]).map((variant) => ({
+      tone,
+      variant,
+      class: { base: tones[tone][variant] },
+    })),
+  ),
+  defaultVariants: { tone: 'neutral', variant: 'soft' },
+})
+
+export type BadgeVariants = VariantProps<typeof badgeStyles>

package/src/components/badge/badge.tsx

@@ -0,0 +1,30 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { type BadgeVariants, badgeStyles } from './badge.styles'
+
+export interface BadgeProps extends ComponentProps<'span'>, BadgeVariants {
+  /** Leading status dot in the badge's color. */
+  dot?: boolean
+  asChild?: boolean
+}
+
+export function Badge(inProps: BadgeProps) {
+  const [props, slots] = useComponentConfig('Badge', inProps)
+  const { tone, variant, dot, asChild, className, children, ...rest } = props
+  const s = badgeStyles({ tone, variant })
+  const Comp = asChild ? Slot.Root : 'span'
+  return (
+    <Comp
+      data-slot="badge"
+      data-tone={tone ?? 'neutral'}
+      className={s.base({ class: [slots.base, className] })}
+      {...rest}
+    >
+      {dot && (
+        <span data-slot="badge-dot" className={s.dot({ class: slots.dot })} aria-hidden="true" />
+      )}
+      <Slot.Slottable>{children}</Slot.Slottable>
+    </Comp>
+  )
+}

package/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge, type BadgeProps } from './badge'
+export { type BadgeVariants, badgeStyles } from './badge.styles'

package/src/components/button/button.styles.ts

@@ -0,0 +1,43 @@
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const buttonStyles = tv({
+  slots: {
+    base: [
+      'relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap',
+      'rounded-md border-transparent font-medium',
+      themedBorder,
+      transition,
+      focusRing,
+      'disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress',
+    ],
+    icon: 'inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-full',
+  },
+  variants: {
+    variant: {
+      primary: { base: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/88' },
+      secondary: { base: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/88' },
+      outline: {
+        base: 'border-border bg-surface text-foreground shadow-xs hover:border-border-strong hover:bg-muted',
+      },
+      ghost: { base: 'text-muted-foreground hover:bg-muted hover:text-foreground' },
+      danger: { base: 'bg-danger text-danger-foreground shadow-sm hover:bg-danger/88' },
+      link: { base: 'h-auto px-0 text-primary underline-offset-4 shadow-none hover:underline' },
+    },
+    size: {
+      sm: { base: 'h-(--glyph-control-sm) px-3 text-small', icon: 'size-3.5' },
+      md: { base: 'h-(--glyph-control-md) px-4 text-small' },
+      lg: { base: 'h-(--glyph-control-lg) px-5 text-body', icon: 'size-[1.125rem]' },
+    },
+    iconOnly: { true: { base: 'px-0' } },
+    fullWidth: { true: { base: 'w-full' } },
+  },
+  compoundVariants: [
+    { iconOnly: true, size: 'sm', class: { base: 'w-(--glyph-control-sm)' } },
+    { iconOnly: true, size: 'md', class: { base: 'w-(--glyph-control-md)' } },
+    { iconOnly: true, size: 'lg', class: { base: 'w-(--glyph-control-lg)' } },
+  ],
+  defaultVariants: { variant: 'primary', size: 'md' },
+})
+
+export type ButtonVariants = VariantProps<typeof buttonStyles>