@torch-ui/solid 0.1.3

package/src/components/overlays/HoverCard.tsx

@@ -0,0 +1,107 @@
+import { type JSX, splitProps } from 'solid-js'
+import { HoverCard as KobalteHoverCard, type HoverCardRootProps as KobalteHoverCardRootProps, type HoverCardContentProps as KobalteHoverCardContentProps } from '@kobalte/core/hover-card'
+import { cn } from '../../utilities/classNames'
+
+const SIDES = ['top', 'bottom', 'left', 'right'] as const
+const ALIGNMENTS = ['start', 'center', 'end'] as const
+
+export type HoverCardSide = (typeof SIDES)[number]
+export type HoverCardAlign = (typeof ALIGNMENTS)[number]
+type NonCenterAlign = Exclude<HoverCardAlign, 'center'>
+type DerivedPlacement = HoverCardSide | `${HoverCardSide}-${NonCenterAlign}`
+export type HoverCardPlacement = DerivedPlacement
+
+export interface HoverCardRootProps extends Omit<KobalteHoverCardRootProps, 'placement'> {
+	/** Side of the trigger the card appears on. Default 'bottom'. */
+	side?: HoverCardSide
+	/** Alignment relative to the trigger. Default 'center'. */
+	align?: HoverCardAlign
+	/** Override placement directly. If not provided, derived from side + align. */
+	placement?: HoverCardPlacement
+}
+
+export function HoverCardRoot(props: HoverCardRootProps) {
+	const [local, others] = splitProps(props, ['align', 'side', 'placement'])
+
+	const side = () => local.side ?? 'bottom'
+	const align = () => local.align ?? 'center'
+
+	const placement = (): HoverCardPlacement => {
+		if (local.placement) return local.placement
+		const s = side()
+		const a = align()
+		return a === 'center' ? s : `${s}-${a}`
+	}
+
+	return (
+		<KobalteHoverCard
+			{...others}
+			placement={placement()}
+		/>
+	)
+}
+
+export const HoverCardTrigger = KobalteHoverCard.Trigger
+export const HoverCardPortal = KobalteHoverCard.Portal
+export const HoverCardArrow = KobalteHoverCard.Arrow
+
+export interface HoverCardContentProps extends KobalteHoverCardContentProps {
+	class?: string
+	children?: JSX.Element
+	/** Show an arrow pointing to the trigger. Default false. */
+	showArrow?: boolean
+}
+
+export function HoverCardContent(props: HoverCardContentProps) {
+	const [local, others] = splitProps(props, ['class', 'children', 'showArrow'])
+	return (
+		<KobalteHoverCard.Portal>
+			<KobalteHoverCard.Content
+				class={cn(
+					'z-50 min-w-[220px] max-w-sm rounded-xl border border-surface-border bg-surface-raised shadow-lg',
+					'data-[expanded]:animate-in data-[closed]:animate-out',
+					'data-[expanded]:fade-in-0 data-[closed]:fade-out-0',
+					'data-[expanded]:zoom-in-95 data-[closed]:zoom-out-95',
+					'data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2',
+					'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',
+					local.class,
+				)}
+				{...others}
+			>
+				{local.children}
+				{local.showArrow && (
+					<KobalteHoverCard.Arrow class="fill-surface-raised stroke-surface-border" />
+				)}
+			</KobalteHoverCard.Content>
+		</KobalteHoverCard.Portal>
+	)
+}
+
+/** Convenience sub-components for structured card content */
+export function HoverCardHeader(props: { class?: string; children: JSX.Element }) {
+	return (
+		<div class={cn('px-4 pt-4 pb-2', props.class)}>
+			{props.children}
+		</div>
+	)
+}
+
+export function HoverCardBody(props: { class?: string; children: JSX.Element }) {
+	return (
+		<div class={cn('px-4 py-3', props.class)}>
+			{props.children}
+		</div>
+	)
+}
+
+export function HoverCardFooter(props: { class?: string; children: JSX.Element }) {
+	return (
+		<div class={cn('px-4 pb-4 pt-2 border-t border-surface-border', props.class)}>
+			{props.children}
+		</div>
+	)
+}
+
+export function HoverCardSeparator(props: { class?: string }) {
+	return <div class={cn('h-px bg-surface-border', props.class)} />
+}

package/src/components/overlays/Popover.tsx

@@ -0,0 +1,73 @@
+import { type JSX, splitProps } from 'solid-js'
+import { Popover as KobaltePopover, type PopoverRootProps as KobaltePopoverRootProps, type PopoverContentProps as KobaltePopoverContentProps } from '@kobalte/core/popover'
+import { cn } from '../../utilities/classNames'
+
+const SIDES = ['top', 'bottom', 'left', 'right'] as const
+const ALIGNMENTS = ['start', 'center', 'end'] as const
+
+export type PopoverSide = (typeof SIDES)[number]
+export type PopoverAlign = (typeof ALIGNMENTS)[number]
+type NonCenterAlign = Exclude<PopoverAlign, 'center'>
+type DerivedPlacement = PopoverSide | `${PopoverSide}-${NonCenterAlign}`
+
+// Valid placement combinations derived from SIDES and ALIGNMENTS
+export type PopoverPlacement = DerivedPlacement
+
+export interface PopoverRootProps extends Omit<KobaltePopoverRootProps, 'placement'> {
+	/** Horizontal alignment relative to trigger. Use 'end' to right-align panel to trigger. Ignored if placement is set. */
+	align?: PopoverAlign
+	/** Side of the trigger the panel appears on. Ignored if placement is set. Default 'bottom'. */
+	side?: PopoverSide
+	/** Override placement. If not provided, derived from side + align. */
+	placement?: PopoverPlacement
+}
+
+/** Root with align/side support; placement is derived as side + align (e.g. bottom-end). */
+export function PopoverRoot(props: PopoverRootProps) {
+	const [local, others] = splitProps(props, ['align', 'side', 'placement'])
+
+	const side = () => local.side ?? 'bottom'
+	const align = () => local.align ?? 'center'
+
+	const placement = (): PopoverPlacement => {
+		if (local.placement) return local.placement
+		const s = side()
+		const a = align()
+		return a === 'center' ? s : `${s}-${a}`
+	}
+
+	return (
+		<KobaltePopover
+			{...others}
+			placement={placement()}
+		/>
+	)
+}
+
+export const PopoverTrigger = KobaltePopover.Trigger
+export const PopoverAnchor = KobaltePopover.Anchor
+export const PopoverPortal = KobaltePopover.Portal
+export const PopoverContentPrimitive = KobaltePopover.Content
+export const PopoverArrow = KobaltePopover.Arrow
+
+export interface PopoverContentProps extends KobaltePopoverContentProps {
+	class?: string
+	children?: JSX.Element
+}
+
+export function PopoverContent(props: PopoverContentProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobaltePopover.Portal>
+			<KobaltePopover.Content
+				class={cn(
+					'z-50 min-w-[180px] rounded-lg border border-surface-border bg-surface-raised p-2 shadow-lg',
+					local.class
+				)}
+				{...others}
+			>
+				{local.children}
+			</KobaltePopover.Content>
+		</KobaltePopover.Portal>
+	)
+}

package/src/components/overlays/Tooltip.tsx

@@ -0,0 +1,31 @@
+import { type JSX, splitProps } from 'solid-js'
+import { Tooltip as KobalteTooltip, type TooltipContentProps as KobalteTooltipContentProps } from '@kobalte/core/tooltip'
+import { cn } from '../../utilities/classNames'
+
+export const TooltipRoot = KobalteTooltip
+export const TooltipTrigger = KobalteTooltip.Trigger
+export const TooltipPortal = KobalteTooltip.Portal
+export const TooltipContentPrimitive = KobalteTooltip.Content
+export const TooltipArrow = KobalteTooltip.Arrow
+
+export interface TooltipContentProps extends KobalteTooltipContentProps {
+	class?: string
+	children?: JSX.Element
+}
+
+export function TooltipContent(props: TooltipContentProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteTooltip.Portal>
+			<KobalteTooltip.Content
+				class={cn(
+					'z-50 max-w-xs rounded-md border border-ink-200 bg-ink-900 px-3 py-2 text-sm text-white shadow-md',
+					local.class
+				)}
+				{...others}
+			>
+				{local.children}
+			</KobalteTooltip.Content>
+		</KobalteTooltip.Portal>
+	)
+}

package/src/components/overlays/index.ts

@@ -0,0 +1,71 @@
+/** Overlays: AlertDialog, Dialog, Drawer, Popover, Tooltip, ContextMenu, HoverCard */
+export { AlertDialog, type AlertDialogProps } from './AlertDialog'
+
+export {
+	Dialog,
+	type DialogProps,
+	type DialogSize,
+	type DialogOverlayAnimation,
+	type DialogPanelAnimation,
+} from './Dialog'
+
+export {
+	Drawer,
+	type DrawerProps,
+	type DrawerSize,
+	type DrawerSide,
+	type DrawerOffset,
+	type DrawerActionsPosition,
+} from './Drawer'
+
+export {
+	TooltipRoot,
+	TooltipTrigger,
+	TooltipPortal,
+	TooltipContentPrimitive,
+	TooltipArrow,
+	TooltipContent,
+	type TooltipContentProps,
+} from './Tooltip'
+
+export {
+	PopoverRoot,
+	PopoverTrigger,
+	PopoverAnchor,
+	PopoverPortal,
+	PopoverContentPrimitive,
+	PopoverArrow,
+	PopoverContent,
+	type PopoverContentProps,
+	type PopoverRootProps,
+	type PopoverSide,
+	type PopoverAlign,
+} from './Popover'
+
+export {
+	ContextMenuRoot,
+	ContextMenuTrigger,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	type ContextMenuContentProps,
+	type ContextMenuItemProps,
+	type ContextMenuSeparatorProps,
+} from './ContextMenu'
+
+export {
+	HoverCardRoot,
+	HoverCardTrigger,
+	HoverCardPortal,
+	HoverCardArrow,
+	HoverCardContent,
+	HoverCardHeader,
+	HoverCardBody,
+	HoverCardFooter,
+	HoverCardSeparator,
+	type HoverCardRootProps,
+	type HoverCardContentProps,
+	type HoverCardSide,
+	type HoverCardAlign,
+	type HoverCardPlacement,
+} from './HoverCard'

package/src/components/typography/Code.tsx

@@ -0,0 +1,72 @@
+import { type JSX, Show, splitProps } from 'solid-js'
+import { Copy } from '../actions'
+import { cn } from '../../utilities/classNames'
+
+type InlineProps = JSX.HTMLAttributes<HTMLElement> & { block?: false }
+type BlockProps = JSX.HTMLAttributes<HTMLDivElement> & { block: true }
+
+type Copyable = { copyable: true; text: string }
+type NotCopyable = { copyable?: false; text?: string }
+
+type BaseProps = {
+	/** Inline or single-line code. */
+	children?: JSX.Element
+	/** Optional class. */
+	class?: string
+} & (Copyable | NotCopyable)
+
+export type CodeProps = (InlineProps | BlockProps) & BaseProps
+
+/**
+ * Inline or single-line code. Use for variable names, commands, or short snippets in text.
+ * Set block to get a one-line block with optional copy button.
+ */
+export function Code(props: CodeProps) {
+	// mx-0.5: intentional horizontal spacing so inline code doesn't touch adjacent text.
+	const inlineClass =
+		'rounded bg-surface-overlay px-2 py-1 text-[0.9em] font-mono text-ink-800 mx-0.5'
+
+	const blockClass =
+		'flex items-center gap-2 rounded-lg border border-surface-border bg-surface-base px-3 py-2 text-sm font-mono text-ink-800'
+
+	if (props.block) {
+		const [local, divProps] = splitProps(props, [
+			'children',
+			'block',
+			'copyable',
+			'text',
+			'class',
+		])
+
+		const copyText = () => (local.text ?? '').trim()
+
+		return (
+			<div
+				class={cn('w-full relative', blockClass, local.copyable && 'pr-12', local.class)}
+				{...divProps}
+			>
+				<code class="flex-1 min-w-0 truncate block">{local.children}</code>
+
+				<Show when={local.copyable && copyText()}>
+					<div class="absolute right-2 top-1/2 -translate-y-1/2 shrink-0">
+						<Copy text={copyText()} display="icon-only" variant="ghost" size="xs" />
+					</div>
+				</Show>
+			</div>
+		)
+	}
+
+	const [local, codeProps] = splitProps(props, [
+		'children',
+		'block',
+		'copyable',
+		'text',
+		'class',
+	])
+
+	return (
+		<code class={cn(inlineClass, local.class)} {...codeProps}>
+			{local.children}
+		</code>
+	)
+}

package/src/components/typography/Icon.tsx

@@ -0,0 +1,36 @@
+import { type JSX, splitProps } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export interface IconProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, 'children' | 'width' | 'height'> {
+	/** Image URL (local path or CDN). */
+	src: string
+	/** Size in pixels (sets both width and height). Default: 16. */
+	size?: number
+}
+
+/**
+ * Renders a custom icon image with consistent sizing and styling.
+ * Point src at a local asset or CDN URL.
+ *
+ * Decorative by default (`alt=""`, `aria-hidden="true"`). To make the icon
+ * meaningful to screen readers, pass both `alt="description"` and
+ * `aria-hidden="false"` — the spread overrides both defaults.
+ *
+ * <Icon src="/images/icons/solid.svg" size={20} />
+ */
+export function Icon(props: IconProps) {
+	const [local, others] = splitProps(props, ['src', 'size', 'class'])
+	const size = () => local.size ?? 16
+
+	return (
+		<img
+			alt=""
+			aria-hidden="true"
+			src={local.src}
+			width={size()}
+			height={size()}
+			class={cn('inline-block shrink-0', local.class)}
+			{...others}
+		/>
+	)
+}

package/src/components/typography/index.ts

@@ -0,0 +1,10 @@
+/** Typography: Block Quote, Code (sidebar-aligned entry point) */
+export { BlockQuote } from '../layout/BlockQuote'
+export type { BlockQuoteProps, BlockQuoteJustify } from '../layout/BlockQuote'
+
+export { Code } from './Code'
+export type { CodeProps } from './Code'
+
+export { Icon } from './Icon'
+export type { IconProps } from './Icon'
+

package/src/env.d.ts

@@ -0,0 +1,9 @@
+interface ImportMetaEnv {
+  readonly DEV: boolean
+  readonly PROD: boolean
+  readonly MODE: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+export * from './components/data-display'
+export * from './components/actions'
+export * from './components/forms'
+export * from './components/feedback'
+export * from './components/layout'
+export * from './components/navigation'
+export * from './components/overlays'
+export * from './components/typography'
+export * from './components/charts'
+export { cn } from './utilities/classNames'
+export { mergeRefs } from './utilities/mergeRefs'
+export { AppI18nProvider, useAppLocale } from './utilities/i18n'
+export { type ComponentSize, inputSizeConfig } from './utilities/componentSize'

package/src/styles/theme.css

@@ -0,0 +1,226 @@
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Surface */
+  --color-surface-base: var(--surface-base);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-dim: var(--surface-dim);
+  --color-surface-border: var(--surface-border);
+
+  /* Ink */
+  --color-ink-50: var(--ink-50);
+  --color-ink-100: var(--ink-100);
+  --color-ink-200: var(--ink-200);
+  --color-ink-300: var(--ink-300);
+  --color-ink-400: var(--ink-400);
+  --color-ink-500: var(--ink-500);
+  --color-ink-600: var(--ink-600);
+  --color-ink-700: var(--ink-700);
+  --color-ink-800: var(--ink-800);
+  --color-ink-850: var(--ink-850);
+  --color-ink-900: var(--ink-900);
+  --color-ink-950: var(--ink-950);
+
+  /* Primary */
+  --color-primary-50: var(--primary-50);
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+  --color-primary-950: var(--primary-950);
+
+  /* Success */
+  --color-success-50: var(--success-50);
+  --color-success-100: var(--success-100);
+  --color-success-200: var(--success-200);
+  --color-success-300: var(--success-300);
+  --color-success-400: var(--success-400);
+  --color-success-500: var(--success-500);
+  --color-success-600: var(--success-600);
+  --color-success-700: var(--success-700);
+  --color-success-800: var(--success-800);
+  --color-success-900: var(--success-900);
+  --color-success-950: var(--success-950);
+
+  /* Warning */
+  --color-warning-50: var(--warning-50);
+  --color-warning-100: var(--warning-100);
+  --color-warning-200: var(--warning-200);
+  --color-warning-300: var(--warning-300);
+  --color-warning-400: var(--warning-400);
+  --color-warning-500: var(--warning-500);
+  --color-warning-600: var(--warning-600);
+  --color-warning-700: var(--warning-700);
+  --color-warning-800: var(--warning-800);
+  --color-warning-900: var(--warning-900);
+  --color-warning-950: var(--warning-950);
+
+  /* Danger */
+  --color-danger-50: var(--danger-50);
+  --color-danger-100: var(--danger-100);
+  --color-danger-200: var(--danger-200);
+  --color-danger-300: var(--danger-300);
+  --color-danger-400: var(--danger-400);
+  --color-danger-500: var(--danger-500);
+  --color-danger-600: var(--danger-600);
+  --color-danger-700: var(--danger-700);
+  --color-danger-800: var(--danger-800);
+  --color-danger-900: var(--danger-900);
+  --color-danger-950: var(--danger-950);
+
+  /* Info */
+  --color-info-50: var(--info-50);
+  --color-info-100: var(--info-100);
+  --color-info-200: var(--info-200);
+  --color-info-300: var(--info-300);
+  --color-info-400: var(--info-400);
+  --color-info-500: var(--info-500);
+  --color-info-600: var(--info-600);
+  --color-info-700: var(--info-700);
+  --color-info-800: var(--info-800);
+  --color-info-900: var(--info-900);
+  --color-info-950: var(--info-950);
+}
+
+/* ─────────────────────────────────────────────────────────────
+   USER CONFIGURATION
+   These are the only variables you need to change to retheme
+   the entire design system.
+───────────────────────────────────────────────────────────── */
+:root {
+  --ink-light:     #18181c;
+  --ink-dark:      #f0f0f2;
+  --surface-light: #fafafa;
+  --surface-dark:  #0f1112;
+
+  --primary: #ff7547;
+  --success: #0dcd51;
+  --warning: #e6ba05;
+  --danger:  #f12828;
+  --info:    #10b3f4;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   LIGHT MODE
+───────────────────────────────────────────────────────────── */
+:root {
+  /* Surface — derived from --surface-light */
+  --surface-base:    var(--surface-light);
+  --surface-raised:  color-mix(in oklch, white 100%, var(--surface-light));
+  --surface-overlay: color-mix(in oklch, black 3%, var(--surface-light));
+  --surface-dim:     color-mix(in oklch, black 8%, var(--surface-light));
+  --surface-border:  color-mix(in oklch, black 8%, var(--surface-light));
+
+  /* Ink — derived from --ink-light, anchored at ink-900 */
+  --ink-50:  color-mix(in oklch, white 95%, var(--ink-light));
+  --ink-100: color-mix(in oklch, white 85%, var(--ink-light));
+  --ink-200: color-mix(in oklch, white 70%, var(--ink-light));
+  --ink-300: color-mix(in oklch, white 55%, var(--ink-light));
+  --ink-400: color-mix(in oklch, white 40%, var(--ink-light));
+  --ink-500: color-mix(in oklch, white 25%, var(--ink-light));
+  --ink-600: color-mix(in oklch, white 15%, var(--ink-light));
+  --ink-700: color-mix(in oklch, white 10%, var(--ink-light));
+  --ink-800: color-mix(in oklch, white 5%,  var(--ink-light));
+  --ink-850: color-mix(in oklch, white 2%,  var(--ink-light));
+  --ink-900: var(--ink-light);
+  --ink-950: color-mix(in oklch, black 30%, var(--ink-light));
+
+  /* Primary — derived from --primary, anchored at 500
+     Light: 20% steps toward white
+     Dark:  8 / 18 / 30 / 44 / 52% toward black  */
+  --primary-50:  color-mix(in oklch, white 90%, var(--primary));
+  --primary-100: color-mix(in oklch, white 80%, var(--primary));
+  --primary-200: color-mix(in oklch, white 60%, var(--primary));
+  --primary-300: color-mix(in oklch, white 40%, var(--primary));
+  --primary-400: color-mix(in oklch, white 20%, var(--primary));
+  --primary-500: var(--primary);
+  --primary-600: color-mix(in oklch, black 8%,  var(--primary));
+  --primary-700: color-mix(in oklch, black 18%, var(--primary));
+  --primary-800: color-mix(in oklch, black 30%, var(--primary));
+  --primary-900: color-mix(in oklch, black 44%, var(--primary));
+  --primary-950: color-mix(in oklch, black 52%, var(--primary));
+
+  /* Success */
+  --success-50:  color-mix(in oklch, white 90%, var(--success));
+  --success-100: color-mix(in oklch, white 80%, var(--success));
+  --success-200: color-mix(in oklch, white 60%, var(--success));
+  --success-300: color-mix(in oklch, white 40%, var(--success));
+  --success-400: color-mix(in oklch, white 20%, var(--success));
+  --success-500: var(--success);
+  --success-600: color-mix(in oklch, black 8%,  var(--success));
+  --success-700: color-mix(in oklch, black 18%, var(--success));
+  --success-800: color-mix(in oklch, black 30%, var(--success));
+  --success-900: color-mix(in oklch, black 44%, var(--success));
+  --success-950: color-mix(in oklch, black 52%, var(--success));
+
+  /* Warning */
+  --warning-50:  color-mix(in oklch, white 90%, var(--warning));
+  --warning-100: color-mix(in oklch, white 80%, var(--warning));
+  --warning-200: color-mix(in oklch, white 60%, var(--warning));
+  --warning-300: color-mix(in oklch, white 40%, var(--warning));
+  --warning-400: color-mix(in oklch, white 20%, var(--warning));
+  --warning-500: var(--warning);
+  --warning-600: color-mix(in oklch, black 8%,  var(--warning));
+  --warning-700: color-mix(in oklch, black 18%, var(--warning));
+  --warning-800: color-mix(in oklch, black 30%, var(--warning));
+  --warning-900: color-mix(in oklch, black 44%, var(--warning));
+  --warning-950: color-mix(in oklch, black 52%, var(--warning));
+
+  /* Danger */
+  --danger-50:  color-mix(in oklch, white 90%, var(--danger));
+  --danger-100: color-mix(in oklch, white 80%, var(--danger));
+  --danger-200: color-mix(in oklch, white 60%, var(--danger));
+  --danger-300: color-mix(in oklch, white 40%, var(--danger));
+  --danger-400: color-mix(in oklch, white 20%, var(--danger));
+  --danger-500: var(--danger);
+  --danger-600: color-mix(in oklch, black 8%,  var(--danger));
+  --danger-700: color-mix(in oklch, black 18%, var(--danger));
+  --danger-800: color-mix(in oklch, black 30%, var(--danger));
+  --danger-900: color-mix(in oklch, black 44%, var(--danger));
+  --danger-950: color-mix(in oklch, black 52%, var(--danger));
+
+  /* Info */
+  --info-50:  color-mix(in oklch, white 90%, var(--info));
+  --info-100: color-mix(in oklch, white 80%, var(--info));
+  --info-200: color-mix(in oklch, white 60%, var(--info));
+  --info-300: color-mix(in oklch, white 40%, var(--info));
+  --info-400: color-mix(in oklch, white 20%, var(--info));
+  --info-500: var(--info);
+  --info-600: color-mix(in oklch, black 8%,  var(--info));
+  --info-700: color-mix(in oklch, black 18%, var(--info));
+  --info-800: color-mix(in oklch, black 30%, var(--info));
+  --info-900: color-mix(in oklch, black 44%, var(--info));
+  --info-950: color-mix(in oklch, black 52%, var(--info));
+}
+
+/* ─────────────────────────────────────────────────────────────
+   DARK MODE
+───────────────────────────────────────────────────────────── */
+.dark {
+  /* Surface — derived from --surface-dark */
+  --surface-base:    var(--surface-dark);
+  --surface-raised:  color-mix(in oklch, white 6%, var(--surface-dark));
+  --surface-overlay: color-mix(in oklch, white 9%, var(--surface-dark));
+  --surface-dim:     color-mix(in oklch, white 22%, var(--surface-dark));
+  --surface-border:  color-mix(in oklch, white 22%, var(--surface-dark));
+
+  /* Ink — derived from --ink-dark, anchored at ink-900 (inverted: 900 = lightest) */
+  --ink-50:  color-mix(in oklch, black 90%, var(--ink-dark));
+  --ink-100: color-mix(in oklch, black 80%, var(--ink-dark));
+  --ink-200: color-mix(in oklch, black 60%, var(--ink-dark));
+  --ink-300: color-mix(in oklch, black 40%, var(--ink-dark));
+  --ink-400: color-mix(in oklch, black 20%, var(--ink-dark));
+  --ink-500: color-mix(in oklch, black 5%,  var(--ink-dark));
+  --ink-600: color-mix(in oklch, white 5%,  var(--ink-dark));
+  --ink-700: color-mix(in oklch, white 15%, var(--ink-dark));
+  --ink-800: color-mix(in oklch, white 25%, var(--ink-dark));
+  --ink-850: color-mix(in oklch, white 35%, var(--ink-dark));
+  --ink-900: var(--ink-dark);
+  --ink-950: color-mix(in oklch, white 30%, var(--ink-dark));
+}

package/src/types/avatar-types.ts

@@ -0,0 +1,11 @@
+export type AvatarShape = 'circle' | 'rounded' | 'square'
+
+export type AvatarColor =
+	| 'neutral'
+	| 'primary'
+	| 'success'
+	| 'warning'
+	| 'danger'
+	| 'info'
+
+export type SizeKey = 'sm' | 'md' | 'lg'