@soroush.tech/design-system 0.1.0 → 1.0.0

package/dist/{themes.mjs → theme-V6lYzd3j.mjs}

@@ -1,5 +1,33 @@
-import { alpha, createTheme, generateBoxShadow, spacing } from "./utils.mjs";
-//#region src/themes.ts
+import { alpha, generateBoxShadow } from "./utils.mjs";
+import { a as useEmotionTheme, n as EmotionThemeContext, r as EmotionThemeProvider } from "./emotion-BAyqVw0c.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme/utils/spacing.ts
+const spacing = (units) => `${8 * units}px`;
+//#endregion
+//#region src/theme/utils/createTheme.ts
+const isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const deepMerge = (base, overrides) => {
+	const merged = { ...base };
+	for (const [key, value] of Object.entries(overrides)) {
+		if (value === void 0) continue;
+		const baseValue = merged[key];
+		merged[key] = isPlainObject(baseValue) && isPlainObject(value) ? deepMerge(baseValue, value) : value;
+	}
+	return merged;
+};
+/**
+* Builds a theme by deep-merging sparse `overrides` onto `base`.
+*
+* - Recurses only where both sides are plain objects; arrays (`shadows`,
+*   `fontSizes`) and functions replace wholesale.
+* - `undefined` override values are ignored — a key can be added or replaced,
+*   never removed.
+* - Neither argument is mutated; untouched branches keep referential identity.
+*/
+const createTheme = (base, overrides) => deepMerge(base, overrides);
+//#endregion
+//#region src/theme/themes.ts
 const shadow = {
 	color: "#000000",
 	opacity: .4
@@ -282,17 +310,6 @@ const baseTheme = {
 		dark: "#006413"
 	},
 	skeleton: { highlight: alpha("#363636", .65) },
-	syntax: {
-		base: "#BBBBBB",
-		keyword: "#CF8E6D",
-		string: "#6AAB73",
-		number: "#2AACB8",
-		title: "#6BA9FA",
-		constant: "#C77DBB",
-		type: "#2AACB8",
-		comment: "#919191",
-		tag: "#D5B778"
-	},
 	logoFilter: "brightness(0) invert(1)",
 	portraitBlend: "screen",
 	portraitOpacity: .8,
@@ -300,4 +317,41 @@ const baseTheme = {
 	shadows
 };
 //#endregion
-export { avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, typography, zOrder };
+//#region src/theme/ThemeProvider.tsx
+function ThemeProvider({ children, theme = baseTheme, defaults }) {
+	return /* @__PURE__ */ jsx(EmotionThemeProvider, {
+		theme: useMemo(() => defaults ? createTheme(theme, { defaults }) : theme, [theme, defaults]),
+		children
+	});
+}
+//#endregion
+//#region src/theme/hooks/useTheme.ts
+/**
+* The active theme, typed as this package's own `Theme` — Emotion is an
+* internal implementation detail, never part of the public type surface.
+*/
+const useTheme = () => useEmotionTheme();
+//#endregion
+//#region src/theme/hooks/useDefaultProps.ts
+/**
+* The theme-contributed default prop values for a component
+* (`theme.components[name].defaultProps`), or an empty object.
+*
+* Components apply it as one step of the default-resolution chain:
+* explicit prop → group context → `useDefaultProps` → `theme.defaults.*` → literal fallback.
+*/
+function useDefaultProps(name) {
+	return useTheme().components?.[name]?.defaultProps ?? {};
+}
+//#endregion
+//#region src/theme/hoc/withTheme.tsx
+function withTheme(WrappedComponent) {
+	return function WithTheme(props) {
+		return /* @__PURE__ */ jsx(EmotionThemeContext.Consumer, { children: (theme) => /* @__PURE__ */ jsx(WrappedComponent, {
+			...props,
+			theme
+		}) });
+	};
+}
+//#endregion
+export { typography as _, avatar as a, fontSizes as c, icon as d, letterSpacings as f, space as g, sizes as h, ThemeProvider as i, fontWeights as l, radii as m, useDefaultProps as n, baseTheme as o, lineHeights as p, useTheme as r, borderWidths as s, withTheme as t, fonts as u, zOrder as v, createTheme as y };

package/dist/theme.cjs

@@ -0,0 +1,23 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_theme = require("./theme-Du6xgPsg.cjs");
+exports.ThemeProvider = require_theme.ThemeProvider;
+exports.avatar = require_theme.avatar;
+exports.baseTheme = require_theme.baseTheme;
+exports.borderWidths = require_theme.borderWidths;
+exports.createTheme = require_theme.createTheme;
+exports.fontSizes = require_theme.fontSizes;
+exports.fontWeights = require_theme.fontWeights;
+exports.fonts = require_theme.fonts;
+exports.icon = require_theme.icon;
+exports.letterSpacings = require_theme.letterSpacings;
+exports.lineHeights = require_theme.lineHeights;
+exports.radii = require_theme.radii;
+exports.sizes = require_theme.sizes;
+exports.space = require_theme.space;
+exports.themeDefault = require_themeDefault.themeDefault;
+exports.typography = require_theme.typography;
+exports.useDefaultProps = require_theme.useDefaultProps;
+exports.useTheme = require_theme.useTheme;
+exports.withTheme = require_theme.withTheme;
+exports.zOrder = require_theme.zOrder;

package/dist/theme.d.cts

@@ -0,0 +1,3 @@
+import { $ as ThemeOverride, A as ThemeSkeleton, B as borderWidths, C as ThemeIconSizes, D as ThemeRadii, E as ThemePalette, F as ThemeZOrder, G as letterSpacings, H as fontWeights, I as TypographyVariant, J as sizes, K as lineHeights, L as TypographyVariantStyle, M as ThemeSwitch, N as ThemeText, O as ThemeShadow, P as ThemeTypographyVariants, Q as DeepPartial, R as avatar, S as ThemeFonts, T as ThemeLineHeights, U as fonts, V as fontSizes, W as icon, X as typography, Y as space, Z as zOrder, _ as ThemeBorder, a as CardSlotIconProps, b as ThemeDefaults, c as ComponentStyle, d as PaletteColor, et as createTheme, f as PaletteEntry, g as ThemeBackground, h as ThemeAvatarSizes, i as CardOwnerState, j as ThemeSpace, k as ThemeSizes, l as ComponentVariant, m as Theme, n as ButtonVariants, o as CardSlotTypographyProps, p as SizeEntry, q as radii, r as CSSObject, s as ComponentConfig, t as ButtonOwnerState, u as OpenScale, v as ThemeBorderWidths, w as ThemeLetterSpacings, x as ThemeFontWeights, y as ThemeComponents, z as baseTheme } from "./themes-BTGww2YK.cjs";
+import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-CJQXZ4hq.cjs";
+export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, OpenScale, PaletteColor, PaletteEntry, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };

package/dist/theme.d.mts

@@ -0,0 +1,3 @@
+import { $ as ThemeOverride, A as ThemeSkeleton, B as borderWidths, C as ThemeIconSizes, D as ThemeRadii, E as ThemePalette, F as ThemeZOrder, G as letterSpacings, H as fontWeights, I as TypographyVariant, J as sizes, K as lineHeights, L as TypographyVariantStyle, M as ThemeSwitch, N as ThemeText, O as ThemeShadow, P as ThemeTypographyVariants, Q as DeepPartial, R as avatar, S as ThemeFonts, T as ThemeLineHeights, U as fonts, V as fontSizes, W as icon, X as typography, Y as space, Z as zOrder, _ as ThemeBorder, a as CardSlotIconProps, b as ThemeDefaults, c as ComponentStyle, d as PaletteColor, et as createTheme, f as PaletteEntry, g as ThemeBackground, h as ThemeAvatarSizes, i as CardOwnerState, j as ThemeSpace, k as ThemeSizes, l as ComponentVariant, m as Theme, n as ButtonVariants, o as CardSlotTypographyProps, p as SizeEntry, q as radii, r as CSSObject, s as ComponentConfig, t as ButtonOwnerState, u as OpenScale, v as ThemeBorderWidths, w as ThemeLetterSpacings, x as ThemeFontWeights, y as ThemeComponents, z as baseTheme } from "./themes-BTGww2YK.mjs";
+import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-0J6U39Rl.mjs";
+export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, OpenScale, PaletteColor, PaletteEntry, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };

package/dist/theme.mjs

@@ -0,0 +1,3 @@
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { _ as typography, a as avatar, c as fontSizes, d as icon, f as letterSpacings, g as space, h as sizes, i as ThemeProvider, l as fontWeights, m as radii, n as useDefaultProps, o as baseTheme, p as lineHeights, r as useTheme, s as borderWidths, t as withTheme, u as fonts, v as zOrder, y as createTheme } from "./theme-V6lYzd3j.mjs";
+export { ThemeProvider, avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };

package/dist/{themeDefault-B-QjpGEO.cjs → themeDefault-Cebi08Cv.cjs}

@@ -1,4 +1,4 @@
-//#region src/utils/themeDefault.ts
+//#region src/theme/utils/themeDefault.ts
 /**
 * Resolves a component's default token/variant key: the theme's optional
 * `defaults` override wins, otherwise the component's literal `fallback`.

package/dist/{themeDefault-CjXaY3ok.mjs → themeDefault-Z3KmyIbm.mjs}

@@ -1,4 +1,4 @@
-//#region src/utils/themeDefault.ts
+//#region src/theme/utils/themeDefault.ts
 /**
 * Resolves a component's default token/variant key: the theme's optional
 * `defaults` override wins, otherwise the component's literal `fallback`.

package/dist/themes-BTGww2YK.d.cts

@@ -0,0 +1,488 @@
+import { CSSObject } from "@emotion/react";
+import { ElementType } from "react";
+//#region src/theme/utils/createTheme.d.ts
+/**
+ * Recursive partial of a theme shape. Plain objects recurse; arrays and
+ * functions are replaced wholesale by `createTheme`, so they stay intact here.
+ */
+type DeepPartial<T> = { [K in keyof T]?: T[K] extends readonly unknown[] ? T[K] : T[K] extends ((...args: never[]) => unknown) ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K]; };
+/** Sparse theme patch accepted by `createTheme` and `ThemeProvider`'s `themes` prop. */
+type ThemeOverride = DeepPartial<Theme>;
+/**
+ * Builds a theme by deep-merging sparse `overrides` onto `base`.
+ *
+ * - Recurses only where both sides are plain objects; arrays (`shadows`,
+ *   `fontSizes`) and functions replace wholesale.
+ * - `undefined` override values are ignored — a key can be added or replaced,
+ *   never removed.
+ * - Neither argument is mutated; untouched branches keep referential identity.
+ */
+declare const createTheme: (base: Theme, overrides: ThemeOverride) => Theme;
+//#endregion
+//#region src/theme/themes.d.ts
+/** Design-system's own style-object shape — Emotion stays an internal implementation detail. */
+type CSSObject$1 = CSSObject;
+/**
+ * Re-opens a named scale interface as an anonymous mapped type. Named
+ * interfaces have no implicit index signature, which styled-system's
+ * Record-based `Theme` constraint requires — the mapped copy restores it
+ * while keeping the literal keys (and any consumer-augmented keys).
+ */
+type OpenScale<T> = { [K in keyof T]: T[K]; };
+/** One semantic color of `theme.palette`. */
+interface PaletteEntry {
+  main: string;
+  light: string;
+  dark: string;
+  contrastText: string;
+}
+interface ThemePalette {
+  default: PaletteEntry;
+  primary: PaletteEntry;
+  secondary: PaletteEntry;
+  success: PaletteEntry;
+  error: PaletteEntry;
+  info: PaletteEntry;
+  warning: PaletteEntry;
+}
+interface ThemeText {
+  inherit: string;
+  initial: string;
+  primary: string;
+  secondary: string;
+  disabled: string;
+  error: string;
+  success: string;
+  info: string;
+  warning: string;
+}
+interface ThemeBackground {
+  backdrop: string;
+  /** App bar / sticky header surface. Light in light theme; `backdrop` stays dark for scrims. */
+  appBar: string;
+  glass: string;
+  modal: string;
+  default: string;
+  primary: string;
+  secondary?: string;
+  paper: string;
+  terminal: string;
+  grid: string;
+  transparent: string;
+}
+interface ThemeBorder {
+  default?: string;
+  light?: string;
+  primary: string;
+  dark?: string;
+}
+interface ThemeFonts {
+  body: string;
+  heading: string;
+  mono: string;
+}
+/** Skeleton placeholder tokens. `highlight` is the wave-animation shimmer band. */
+interface ThemeSkeleton {
+  highlight: string;
+}
+/** Switch control tokens. The thumb stays light in both modes so it reads on any track. */
+interface ThemeSwitch {
+  /** Thumb fill. Its elevation shadow composites from `theme.shadow.color`. */
+  thumb: string;
+}
+/**
+ * Shadow tokens — the single base color every shadow composites from
+ * (the `theme.shadows` elevation array and component shadows alike).
+ */
+interface ThemeShadow {
+  /** Opaque base color of all shadows. */
+  color: string;
+  /** Alpha applied per elevation step in the default `theme.shadows` array. */
+  opacity: number;
+}
+/** Stacking order for layered UI — ascending: appBar < drawer < modal. */
+interface ThemeZOrder {
+  appBar: number;
+  drawer: number;
+  modal: number;
+}
+interface ThemeRadii {
+  sq: string;
+  sm: string;
+  md: string;
+  lg: string;
+}
+interface ThemeBorderWidths {
+  none: string;
+  thin: string;
+  base: string;
+  thick: string;
+}
+interface ThemeAvatarSizes {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+}
+interface ThemeFontWeights {
+  thin: number;
+  extraLight: number;
+  light: number;
+  normal: number;
+  medium: number;
+  semiBold: number;
+  bold: number;
+  extraBold: number;
+  black: number;
+}
+interface ThemeLineHeights {
+  none: number;
+  tight: number;
+  snug: number;
+  base: number;
+  relaxed: number;
+  loose: number;
+}
+interface ThemeLetterSpacings {
+  tighter: string;
+  tight: string;
+  normal: string;
+  wide: string;
+  wider: string;
+  widest: string;
+}
+interface ThemeSpace {
+  auto: string;
+  0: number | string;
+  0.5: number | string;
+  1: number | string;
+  1.5: number | string;
+  2: number | string;
+  3: number | string;
+  4: number | string;
+  5: number | string;
+  6: number | string;
+  7: number | string;
+  8: number | string;
+  9: number | string;
+  10: number | string;
+}
+/** One padding/font preset of `theme.sizes`. */
+interface SizeEntry {
+  paddingTop: Exclude<keyof ThemeSpace, 'auto'>;
+  paddingBottom: Exclude<keyof ThemeSpace, 'auto'>;
+  paddingLeft: Exclude<keyof ThemeSpace, 'auto'>;
+  paddingRight: Exclude<keyof ThemeSpace, 'auto'>;
+  /** Index into `theme.fontSizes`. */
+  fontSize: number;
+}
+interface ThemeSizes {
+  sm: SizeEntry;
+  md: SizeEntry;
+  lg: SizeEntry;
+}
+/**
+ * Square glyph dimension per density key — Icon token sizes and the
+ * Checkbox/Radio glyphs. Mapped over `ThemeSizes` so augmenting a size key
+ * forces the matching icon size to be supplied.
+ */
+type ThemeIconSizes = { [K in keyof ThemeSizes]: string; };
+/** Style of one typography variant. */
+interface TypographyVariantStyle {
+  element: ElementType;
+  fontSize?: number;
+  fontWeight?: string;
+  letterSpacing?: string;
+  textTransform?: CSSObject$1['textTransform'];
+}
+interface ThemeTypographyVariants {
+  h1: TypographyVariantStyle;
+  h2: TypographyVariantStyle;
+  h3: TypographyVariantStyle;
+  h4: TypographyVariantStyle;
+  h5: TypographyVariantStyle;
+  h6: TypographyVariantStyle;
+  subtitle1: TypographyVariantStyle;
+  subtitle2: TypographyVariantStyle;
+  body1: TypographyVariantStyle;
+  body2: TypographyVariantStyle;
+  caption: TypographyVariantStyle;
+  overline: TypographyVariantStyle;
+  button: TypographyVariantStyle;
+  inherit: TypographyVariantStyle;
+}
+/**
+ * Optional theme-driven component defaults. Components carry their own
+ * literal fallbacks (`size = 'md'`, `variant = 'outside'`, …) and resolve
+ * them through `themeDefault(theme, key, fallback)` — set any key here (or
+ * via `ThemeProvider`'s `defaults` prop) to override that fallback globally,
+ * e.g. when your theme uses entirely different size or palette keys.
+ */
+interface ThemeDefaults {
+  /** Density token for sized components. Fallback: `'md'`. */
+  size?: keyof ThemeSizes;
+  /** Compact density for dense secondary UI (table pagination actions). Fallback: `'sm'`. */
+  compactSize?: keyof ThemeSizes;
+  /** Accent palette color (buttons, links, progress, pagination…). Fallback: `'primary'`. */
+  color?: keyof ThemePalette;
+  /** Neutral palette color for toggle controls (checkbox, radio, switch…). Fallback: `'default'`. */
+  neutralColor?: keyof ThemePalette;
+  /** Body text color. Fallback: `'initial'`. */
+  textColor?: keyof ThemeText;
+  /** Accent text color (icons, input labels). Fallback: `'primary'`. */
+  accentTextColor?: keyof ThemeText;
+  /** General control background (switch track). Fallback: `'default'`. */
+  bg?: keyof ThemeBackground;
+  /** Elevated surface background (paper, cards). Fallback: `'paper'`. */
+  surfaceBg?: keyof ThemeBackground;
+  /** Input surface background (selects, text inputs). Fallback: `'terminal'`. */
+  inputBg?: keyof ThemeBackground;
+  /** Corner radius for grouped controls. Fallback: `'md'`. */
+  borderRadius?: keyof ThemeRadii;
+  /** Corner radius for surfaces. Fallback: `'sq'`. */
+  surfaceRadius?: keyof ThemeRadii;
+  /** Avatar size step. Fallback: `'md'`. */
+  avatarSize?: keyof ThemeAvatarSizes;
+  /** Icon glyph size step. Fallback: `'lg'`. */
+  iconSize?: keyof ThemeIconSizes;
+  /** Border/ring color. Fallback: `'primary'`. */
+  borderColor?: keyof ThemeBorder;
+  /** Border/ring width. Fallback: `'thin'`. */
+  borderWidth?: keyof ThemeBorderWidths;
+  /** Button visual variant. Fallback: `'contained'`. */
+  buttonVariant?: keyof ButtonVariants;
+  /** Switch thumb/track layout. Fallback: `'outside'`. */
+  switchVariant?: 'outside' | 'inside';
+  /** Input frame style (TextInput, Select, NativeSelect). Fallback: `'default'`. */
+  inputVariant?: 'default' | 'outlined' | 'text' | 'underline';
+  /** Avatar shape. Fallback: `'circular'`. */
+  avatarVariant?: 'circular' | 'rounded' | 'square';
+  /** Link underline behavior. Fallback: `'always'`. */
+  linkUnderline?: 'always' | 'hover' | 'none';
+  /** Card surface treatment. Fallback: `'paper'`. */
+  cardVariant?: 'paper' | 'bracketBox' | 'interactive';
+  /** Pagination item visual variant. Fallback: `'text'`. */
+  paginationVariant?: 'text' | 'outlined';
+  /** Pagination item shape. Fallback: `'circular'`. */
+  paginationShape?: 'circular' | 'rounded';
+}
+/**
+ * A style contributed from `theme.components` — a plain CSS object, or a
+ * callback receiving the theme and the styled root's resolved props
+ * (`ownerState`) for conditional styling.
+ */
+type ComponentStyle<OwnerState> = CSSObject$1 | ((args: {
+  theme: Theme;
+  ownerState: OwnerState;
+}) => CSSObject$1);
+/** One theme-contributed variant: applied when every key in `props` matches the render props. */
+interface ComponentVariant<OwnerState> {
+  props: Partial<OwnerState>;
+  style: ComponentStyle<OwnerState>;
+}
+/** Per-component customization: default prop values, per-slot CSS, extra variants. */
+interface ComponentConfig<OwnerState = Record<string, unknown>, Slot extends string = 'root'> {
+  /** Default prop values — explicit props and group context always win. */
+  defaultProps?: Partial<OwnerState>;
+  /** Per-slot CSS merged after the component's own styles (theme wins). */
+  styleOverrides?: Partial<Record<Slot, ComponentStyle<OwnerState>>>;
+  /** Extra variants matched by props. Replaced wholesale by `createTheme`, never merged. */
+  variants?: ReadonlyArray<ComponentVariant<OwnerState>>;
+}
+/** Button's variant values — augment to register new ones (then style them via `variants`). */
+interface ButtonVariants {
+  contained: true;
+  outlined: true;
+  text: true;
+}
+/** The resolved props Button's styled roots receive — what `ownerState` exposes. */
+interface ButtonOwnerState {
+  variant?: keyof ButtonVariants;
+  color?: keyof ThemePalette;
+  size?: keyof ThemeSizes;
+  shape?: 'square' | 'rounded' | 'pill';
+  fullWidth?: boolean;
+  disabled?: boolean;
+}
+/** Token-typed Typography props a theme may set for Card's title/caption slots. */
+interface CardSlotTypographyProps {
+  variant?: keyof ThemeTypographyVariants;
+  color?: keyof ThemeText;
+  fontFamily?: keyof ThemeFonts;
+  mb?: keyof ThemeSpace;
+}
+/** Token-typed Icon props a theme may set for Card's icon slot. */
+interface CardSlotIconProps {
+  color?: keyof ThemeText;
+  size?: string | number;
+}
+/** Card's resolved props / theme-settable defaults. */
+interface CardOwnerState {
+  variant?: 'paper' | 'bracketBox' | 'interactive';
+  /** Merged under any per-instance `titleProps` (instance wins). */
+  titleProps?: CardSlotTypographyProps;
+  /** Merged under any per-instance `captionProps` (instance wins). */
+  captionProps?: CardSlotTypographyProps;
+  /** Merged under any per-instance `iconProps` (instance wins). */
+  iconProps?: CardSlotIconProps;
+}
+/**
+ * Per-component theme customization, keyed by component name. Augment this
+ * interface to register additional components (including your own, when their
+ * styled roots are created with this package's `styled(tag, { name })`).
+ */
+interface ThemeComponents {
+  AppBar?: ComponentConfig;
+  Avatar?: ComponentConfig<Record<string, unknown>, 'root' | 'img'>;
+  Backdrop?: ComponentConfig;
+  Button?: ComponentConfig<ButtonOwnerState, 'root' | 'label' | 'icon' | 'loader'>;
+  ButtonGroup?: ComponentConfig;
+  Card?: ComponentConfig<CardOwnerState, 'root' | 'title' | 'caption' | 'icon'>;
+  Checkbox?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'icon'>;
+  CircularProgress?: ComponentConfig<Record<string, unknown>, 'root' | 'track' | 'circle'>;
+  Drawer?: ComponentConfig;
+  Flex?: ComponentConfig;
+  FocusTrap?: ComponentConfig;
+  Form?: ComponentConfig;
+  FormControl?: ComponentConfig;
+  FormHelperText?: ComponentConfig;
+  FormLabel?: ComponentConfig;
+  Grid?: ComponentConfig;
+  Icon?: ComponentConfig;
+  Image?: ComponentConfig;
+  LinearProgress?: ComponentConfig<Record<string, unknown>, 'root' | 'track' | 'dash' | 'bar' | 'traveler' | 'segment' | 'secondaryBar'>;
+  Link?: ComponentConfig;
+  MenuItem?: ComponentConfig<Record<string, unknown>, 'root' | 'check'>;
+  Modal?: ComponentConfig;
+  NativeSelect?: ComponentConfig<Record<string, unknown>, 'root' | 'select' | 'icon'>;
+  Pagination?: ComponentConfig<Record<string, unknown>, 'root' | 'list'>;
+  PaginationItem?: ComponentConfig<Record<string, unknown>, 'root' | 'ellipsis'>;
+  Paper?: ComponentConfig;
+  Popover?: ComponentConfig<Record<string, unknown>, 'root' | 'positioner'>;
+  Quote?: ComponentConfig;
+  Radio?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'icon'>;
+  Select?: ComponentConfig<Record<string, unknown>, 'root' | 'value' | 'valueArea' | 'valueGhost' | 'listbox'>;
+  Skeleton?: ComponentConfig<Record<string, unknown>, 'root' | 'content'>;
+  Switch?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'track' | 'thumb'>;
+  Table?: ComponentConfig;
+  TableBody?: ComponentConfig;
+  TableCell?: ComponentConfig;
+  TableContainer?: ComponentConfig;
+  TableFooter?: ComponentConfig;
+  TableHead?: ComponentConfig;
+  TablePagination?: ComponentConfig;
+  TablePaginationActions?: ComponentConfig;
+  TableRow?: ComponentConfig;
+  TableSortLabel?: ComponentConfig<Record<string, unknown>, 'root' | 'icon'>;
+  TextInput?: ComponentConfig<Record<string, unknown>, 'root' | 'input'>;
+  ToggleButton?: ComponentConfig;
+  ToggleButtonGroup?: ComponentConfig;
+  Typography?: ComponentConfig;
+  View?: ComponentConfig;
+}
+interface Theme {
+  name: string;
+  /** Optional overrides for component default token/variant keys — see `ThemeDefaults`. */
+  defaults?: OpenScale<ThemeDefaults>;
+  /** Optional per-component customization — see `ThemeComponents`. */
+  components?: OpenScale<ThemeComponents>;
+  space: OpenScale<ThemeSpace>;
+  border: OpenScale<ThemeBorder>;
+  text: OpenScale<ThemeText>;
+  background: OpenScale<ThemeBackground>;
+  typography: OpenScale<ThemeTypographyVariants>;
+  fonts: OpenScale<ThemeFonts>;
+  lineHeights: OpenScale<ThemeLineHeights>;
+  letterSpacings: OpenScale<ThemeLetterSpacings>;
+  fontSizes: number[];
+  radii: OpenScale<ThemeRadii>;
+  borderWidths: OpenScale<ThemeBorderWidths>;
+  avatar: OpenScale<ThemeAvatarSizes>;
+  icon: ThemeIconSizes;
+  skeleton: OpenScale<ThemeSkeleton>;
+  switch: OpenScale<ThemeSwitch>;
+  shadow: OpenScale<ThemeShadow>;
+  sizes: { [K in keyof ThemeSizes]: OpenScale<ThemeSizes[K]>; };
+  colorScheme: 'light' | 'dark';
+  blur: string;
+  logoFilter: string;
+  /** mix-blend-mode for the AboutHero portrait — screen on dark, multiply on light. */
+  portraitBlend: string;
+  /** opacity for the AboutHero portrait. */
+  portraitOpacity: number;
+  shadows: string[];
+  fontWeights: OpenScale<ThemeFontWeights>;
+  palette: OpenScale<ThemePalette>;
+  zOrder: OpenScale<ThemeZOrder>;
+}
+/** The semantic color keys of `theme.palette`. */
+type PaletteColor = keyof ThemePalette;
+/** The variant keys of `theme.typography`. */
+type TypographyVariant = keyof ThemeTypographyVariants;
+declare const radii: {
+  sq: string;
+  sm: string;
+  md: string;
+  lg: string;
+};
+declare const borderWidths: {
+  none: string;
+  thin: string;
+  base: string;
+  thick: string;
+};
+declare const zOrder: {
+  appBar: number;
+  drawer: number;
+  modal: number;
+};
+declare const fontSizes: number[];
+declare const lineHeights: {
+  none: number;
+  tight: number;
+  snug: number;
+  base: number;
+  relaxed: number;
+  loose: number;
+};
+declare const letterSpacings: {
+  tighter: string;
+  tight: string;
+  normal: string;
+  wide: string;
+  wider: string;
+  widest: string;
+};
+declare const fonts: {
+  body: string;
+  heading: string;
+  mono: string;
+};
+declare const fontWeights: {
+  thin: number;
+  extraLight: number;
+  light: number;
+  normal: number;
+  medium: number;
+  semiBold: number;
+  bold: number;
+  extraBold: number;
+  black: number;
+};
+declare const avatar: {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+};
+declare const icon: ThemeIconSizes;
+declare const sizes: ThemeSizes;
+declare const space: ThemeSpace;
+declare const typography: ThemeTypographyVariants;
+/**
+ * The package's complete default theme (dark-schemed). Raw hex only — palettes
+ * belong to the consumer, who builds brand themes with `createTheme(baseTheme, …)`.
+ */
+declare const baseTheme: Theme;
+//#endregion
+export { ThemeOverride as $, ThemeSkeleton as A, borderWidths as B, ThemeIconSizes as C, ThemeRadii as D, ThemePalette as E, ThemeZOrder as F, letterSpacings as G, fontWeights as H, TypographyVariant as I, sizes as J, lineHeights as K, TypographyVariantStyle as L, ThemeSwitch as M, ThemeText as N, ThemeShadow as O, ThemeTypographyVariants as P, DeepPartial as Q, avatar as R, ThemeFonts as S, ThemeLineHeights as T, fonts as U, fontSizes as V, icon as W, typography as X, space as Y, zOrder as Z, ThemeBorder as _, CardSlotIconProps as a, ThemeDefaults as b, ComponentStyle as c, PaletteColor as d, createTheme as et, PaletteEntry as f, ThemeBackground as g, ThemeAvatarSizes as h, CardOwnerState as i, ThemeSpace as j, ThemeSizes as k, ComponentVariant as l, Theme as m, ButtonVariants as n, CardSlotTypographyProps as o, SizeEntry as p, radii as q, CSSObject$1 as r, ComponentConfig as s, ButtonOwnerState as t, OpenScale as u, ThemeBorderWidths as v, ThemeLetterSpacings as w, ThemeFontWeights as x, ThemeComponents as y, baseTheme as z };