@soroush.tech/design-system 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Masoud Soroush <https://soroush.tech>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,278 @@
+# @soroush.tech/design-system
+
+[![npm version](https://img.shields.io/npm/v/@soroush.tech/design-system.svg)](https://www.npmjs.com/package/@soroush.tech/design-system)
+[![npm downloads](https://img.shields.io/npm/dm/@soroush.tech/design-system.svg)](https://www.npmjs.com/package/@soroush.tech/design-system)
+[![coverage](https://codecov.io/gh/soroush-tech/core/branch/main/graph/badge.svg?flag=design-system)](https://app.codecov.io/gh/soroush-tech/core?flags%5B0%5D=design-system)
+[![unpacked size](https://img.shields.io/npm/unpacked-size/@soroush.tech/design-system.svg)](https://www.npmjs.com/package/@soroush.tech/design-system)
+[![types included](https://img.shields.io/npm/types/@soroush.tech/design-system.svg)](https://www.npmjs.com/package/@soroush.tech/design-system)
+[![license](https://img.shields.io/npm/l/@soroush.tech/design-system.svg)](./LICENSE)
+
+An Emotion + [@soroush.tech/styled-system](https://www.npmjs.com/package/@soroush.tech/styled-system) React component library with a token-driven, consumer-extensible theme — layout primitives, forms, overlays, data display, and a headless markdown editor/renderer.
+
+The library takes inspiration from [Material UI](https://mui.com/) — its component vocabulary and prop conventions will feel familiar — but it is written entirely in house. It is not a clone or a fork: every component is built from scratch on our own engine and token system, and the API is free to diverge wherever it serves its consumers better.
+
+For the conventions every component must follow (prop typing, `system()` wiring, `shouldForwardProp`, Storybook rules, testing), read **[`design-system.md`](./design-system.md)** — this README is the map, that file is the law.
+
+## Install
+
+```sh
+npm i @soroush.tech/design-system
+```
+
+`react`, `react-dom`, `@emotion/react`, and `@emotion/styled` are peer dependencies.
+
+---
+
+## Importing
+
+Import components by subpath, styling primitives from the barrel:
+
+```ts
+import { Typography } from '@soroush.tech/design-system/Typography'
+import { Flex } from '@soroush.tech/design-system/Flex'
+```
+
+Styling primitives (the engine) come from the barrel `@soroush.tech/design-system` — `styled`, `css`, `keyframes`, `useTheme`, the `Theme` type, styled-system functions, and `createShouldForwardProp`. The barrel (`src/index.ts`) is the engine abstraction layer: to swap the CSS-in-JS engine, only that file changes.
+
+```ts
+import { styled, css, useTheme, type Theme } from '@soroush.tech/design-system'
+```
+
+---
+
+## Folder map
+
+| Path               | What it is                                                                                                                 |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| `index.ts`         | Engine barrel — the themed `styled`, Emotion + `@soroush.tech/styled-system` re-exports                                    |
+| `styled.ts`        | The themed `styled` wrapper — `name`/`slot` options enable `theme.components` customization                                |
+| `themes.ts`        | `baseTheme` (the complete default theme — the only place hex values live), the `Theme` type layer, `createTheme`           |
+| `hooks/`           | `useTheme`, `useDefaultProps`, `useStyle`, `useCopyToClipboard`, `withTheme`, `withStyles`, `StylesConsumer`               |
+| `utils/`           | Style helpers — `alpha`, `spacing`, `clamp`, `luminance`, `generateBoxShadow`, `styleCache`, `createTheme`, `themeDefault` |
+| `utils/test/`      | `storiesOptions.ts` (token option arrays) and `storiesArgs.ts` (pre-built argTypes) for Storybook                          |
+| `docs/`            | Guides — [`theming.md`](./docs/theming.md) and [`customization.md`](./docs/customization.md)                               |
+| `design-system.md` | Architecture and conventions for building components                                                                       |
+| `ComponentName/`   | One folder per component (see inventory below)                                                                             |
+
+Every component folder contains `index.ts` (barrel), `ComponentName.tsx`, `README.md` (prop reference), `ComponentName.stories.tsx`, and `ComponentName.test.tsx`. Each component's own README documents its full prop API.
+
+---
+
+## Component inventory
+
+### Layout & surfaces
+
+| Component | Purpose                                           |
+| --------- | ------------------------------------------------- |
+| `View`    | Styled `div` primitive — the base building block  |
+| `Flex`    | `View` with flexbox defaults                      |
+| `Grid`    | CSS grid container                                |
+| `Paper`   | Elevated surface with background and shadow       |
+| `Card`    | Content container built on `Paper`                |
+| `Quote`   | Bordered quote / terminal-panel surface on `View` |
+| `AppBar`  | Top application bar                               |
+| `Drawer`  | Slide-in side panel                               |
+
+### Content & data display
+
+| Component    | Purpose                                                                                                                                                                                                                                      |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Typography` | Text with variant → element mapping — the reference implementation for all components                                                                                                                                                        |
+| `Link`       | Anchor with theme-aware styling                                                                                                                                                                                                              |
+| `Icon`       | Icon renderer                                                                                                                                                                                                                                |
+| `Image`      | Image with styled-system props                                                                                                                                                                                                               |
+| `Avatar`     | User/entity avatar                                                                                                                                                                                                                           |
+| `Table`      | Compound data table — exports `TableContainer`, `TableHead`, `TableBody`, `TableFooter`, `TableRow`, `TableCell`, `TablePagination`, `TablePaginationActions`, `TableSortLabel`, and `TableControl` from `@soroush.tech/design-system/Table` |
+| `CodeBlock`  | Scrollable fenced-code surface with a copy-to-clipboard button                                                                                                                                                                               |
+| `Markdown`   | Headless markdown editor + renderer — exports `Control`, `Toolbar`, `Editor`, and `Preview` from `@soroush.tech/design-system/Markdown`                                                                                                      |
+
+### Inputs & forms
+
+| Component                                            | Purpose                                       |
+| ---------------------------------------------------- | --------------------------------------------- |
+| `Button`, `ButtonGroup`, `ToggleButton`              | Actions and toggles                           |
+| `TextInput`                                          | Text field                                    |
+| `Checkbox`, `Radio`, `Switch`                        | Selection controls                            |
+| `NativeSelect`                                       | Platform `<select>`                           |
+| `Select`                                             | Custom select built on `Popover` + `MenuItem` |
+| `MenuItem`                                           | Option row for `Select`'s listbox             |
+| `Field`                                              | Composed input field                          |
+| `Form`, `FormControl`, `FormLabel`, `FormHelperText` | Form composition and labeling                 |
+| `Pagination`                                         | Page navigation control                       |
+
+### Feedback
+
+| Component                            | Purpose                                        |
+| ------------------------------------ | ---------------------------------------------- |
+| `CircularProgress`, `LinearProgress` | Determinate/indeterminate progress indicators  |
+| `Skeleton`                           | Loading placeholder with pulse/wave animations |
+| `Backdrop`                           | Dimmed overlay behind modal surfaces           |
+
+### Overlay & behavior primitives
+
+| Component       | Purpose                                                          |
+| --------------- | ---------------------------------------------------------------- |
+| `Portal`        | Renders children into a DOM node outside the parent hierarchy    |
+| `FocusTrap`     | Keeps focus inside a subtree                                     |
+| `Modal`         | Dialog primitive composing `Portal`, `Backdrop`, and `FocusTrap` |
+| `Popover`       | Anchored floating surface built on `Modal`                       |
+| `ThemeProvider` | Supplies the theme and global styles to the app                  |
+
+---
+
+## Theme tokens
+
+Components never hardcode colors or sizes — props resolve against scales on the `Theme` object:
+
+| Group              | Scales                                                                                                |
+| ------------------ | ----------------------------------------------------------------------------------------------------- |
+| Color              | `palette` (main/light/dark/contrastText per color) · `text` · `background` · `border` · `colorScheme` |
+| Typography         | `typography` (variant map) · `fonts` · `fontSizes` · `fontWeights` · `lineHeights` · `letterSpacings` |
+| Space & shape      | `space` · `sizes` · `radii` · `borderWidths` · `shadows`                                              |
+| Component scales   | `avatar` (size steps) · `skeleton` (wave highlight)                                                   |
+| Layering & effects | `zOrder` (appBar/drawer/modal) · `blur` · `logoFilter` · `portraitBlend` · `portraitOpacity`          |
+
+Prop types are derived from the interface (`keyof Theme['text']`), so adding a token to `themes.ts` propagates everywhere automatically. See [`design-system.md`](./design-system.md) for the full scale table and the palette rules.
+
+---
+
+## Theming
+
+The theme belongs to you — the package only ships defaults. This section is the overview; the full guides are [`docs/theming.md`](./docs/theming.md) and [`docs/customization.md`](./docs/customization.md).
+
+### One theme, yours
+
+`ThemeProvider` provides exactly one theme — the built-in dark theme when you pass nothing. Bring one theme, or as many as you like: switching between them is your state, not the provider's.
+
+```tsx
+import { ThemeProvider } from '@soroush.tech/design-system/ThemeProvider'
+import { baseTheme, createTheme } from '@soroush.tech/design-system/themes'
+
+// Zero-config: the built-in `baseTheme`.
+<ThemeProvider>{app}</ThemeProvider>
+
+// Your theme — written from scratch or extended from the base.
+const brand = createTheme(baseTheme, { palette: { primary: { main: '#00ff88' } } })
+<ThemeProvider theme={brand}>{app}</ThemeProvider>
+
+// Mode switching is app policy — own the state and pass the active theme:
+const [isDark, setIsDark] = useState(true)
+<ThemeProvider theme={isDark ? brandDark : brandLight}>{app}</ThemeProvider>
+```
+
+`createTheme(base, overrides)` (exported from `…/themes` and `…/utils`) is the merge primitive: plain objects recurse, arrays (`shadows`, `fontSizes`) and functions replace wholesale, `undefined` values are ignored — keys are added or replaced, never removed.
+
+### Component defaults
+
+Components carry visible literal fallbacks (`size = 'md'`, `variant = 'outside'`, …) resolved through `themeDefault(theme, key, fallback)` — so every default, including behavioral variants, is overridable via the optional `theme.defaults` map or the provider's `defaults` prop:
+
+| Key                                          | Fallback                           | Drives                                 |
+| -------------------------------------------- | ---------------------------------- | -------------------------------------- |
+| `size` / `compactSize`                       | `'md'` / `'sm'`                    | sized components / dense table actions |
+| `color` / `neutralColor`                     | `'primary'` / `'default'`          | accent controls / toggle controls      |
+| `textColor` / `accentTextColor`              | `'initial'` / `'primary'`          | body text / icons + input labels       |
+| `bg` / `surfaceBg` / `inputBg`               | `'default'`/`'paper'`/`'terminal'` | switch track / paper surfaces / inputs |
+| `borderRadius` / `surfaceRadius`             | `'md'` / `'sq'`                    | grouped controls / surfaces            |
+| `avatarSize` / `borderColor` / `borderWidth` | `'md'` / `'primary'` / `'thin'`    | avatars and rings                      |
+| `iconSize`                                   | `'lg'`                             | Icon default glyph size (`theme.icon`) |
+| `buttonVariant` / `switchVariant`            | `'contained'` / `'outside'`        | Button / Switch visual variants        |
+| `inputVariant`                               | `'default'`                        | TextInput, Select, NativeSelect frames |
+| `avatarVariant` / `cardVariant`              | `'circular'` / `'paper'`           | Avatar shape / Card treatment          |
+| `linkUnderline`                              | `'always'`                         | Link underline behavior                |
+| `paginationVariant` / `paginationShape`      | `'text'` / `'circular'`            | Pagination items                       |
+
+The built-in themes carry no `defaults` — the literals apply. A theme with entirely different size or palette keys stays valid by pointing the keys at its own tokens:
+
+```tsx
+<ThemeProvider defaults={{ size: 'compact', color: 'brand', switchVariant: 'inside' }}>
+```
+
+### Per-component customization (`theme.components`)
+
+Customize one component for the whole app — default prop values, per-slot CSS, and new variant values — without wrapping or forking:
+
+```tsx
+const brand = createTheme(baseTheme, {
+  components: {
+    Button: {
+      // Buttons default to sm + rounded; explicit props and ButtonGroup still win.
+      defaultProps: { size: 'sm', shape: 'rounded' },
+
+      // Per-slot CSS merged after Button's own styles — the theme wins the cascade,
+      // but per-instance props (m, p, width, …) still beat the theme.
+      styleOverrides: {
+        root: ({ theme, ownerState }) => ({
+          letterSpacing: theme.letterSpacings.wide,
+          ...(ownerState.variant === 'contained' && { textTransform: 'none' }),
+        }),
+        label: { fontStyle: 'italic' },
+      },
+
+      // A new variant value — register it first so it typechecks:
+      // declare module '@emotion/react' { interface ButtonVariants { dashed: true } }
+      variants: [
+        {
+          props: { variant: 'dashed' },
+          style: ({ theme }) => ({
+            backgroundColor: 'transparent',
+            border: `${theme.borderWidths.thin} dashed ${theme.border.primary}`,
+          }),
+        },
+      ],
+    },
+  },
+})
+```
+
+Style callbacks receive `{ theme, ownerState }`, where `ownerState` is the styled root's **resolved** props (after group context, `defaultProps`, and `theme.defaults`). `defaultProps` sits in the standard precedence chain: explicit prop → group context → `defaultProps` → `theme.defaults.*` → the component's literal fallback. `variants` arrays are replaced wholesale by `createTheme`, never merged.
+
+Your own components can join the same mechanism: create their roots with this package's `styled(tag, { name: 'MyWidget', slot: 'root' })` and register the name by augmenting `ThemeComponents`. Zero-config themes pay nothing — the resolver bails out on the first check when `theme.components` is absent.
+
+### Extending tokens (declaration merging)
+
+Every scale is an open interface declared on `@emotion/react`, so you can add palette colors, tokens, or whole scales — and every component prop union (`color`, `bg`, `size`, …) widens automatically:
+
+```ts
+import type { PaletteEntry } from '@soroush.tech/design-system/themes'
+
+declare module '@emotion/react' {
+  interface ThemePalette {
+    brand: PaletteEntry // new palette color
+  }
+  interface ThemeBackground {
+    tertiary: string // new background token
+  }
+  interface Theme {
+    elevations: Record<'low' | 'mid' | 'high', string> // whole new scale
+  }
+}
+```
+
+Then supply the values with `createTheme` and use the new keys:
+
+```tsx
+const brandDark = createTheme(baseTheme, {
+  palette: { brand: { main: '#00ff88', light: '#66ffb2', dark: '#00b25f', contrastText: '#000' } },
+  background: { tertiary: '#101418' },
+  elevations: { low: '0 1px 2px', mid: '0 2px 6px', high: '0 6px 18px' },
+})
+
+<ThemeProvider theme={brandDark}>
+  <Button color="brand" />
+  <View bg="tertiary" />
+</ThemeProvider>
+```
+
+Notes: new object-valued keys (like a `PaletteEntry`) must be supplied complete — components read `.main`/`.contrastText` at runtime; and TypeScript cannot verify at runtime that an augmented token was actually supplied, so always pair an augmentation with the matching override.
+
+---
+
+## Adding a component
+
+Scaffold with the skill — it reads the live `Typography` files and `design-system.md` so output matches the codebase:
+
+```
+/new_theme_component ComponentName
+```
+
+Then work through the checklist at the bottom of [`design-system.md`](./design-system.md).

package/dist/AppBar.cjs

@@ -0,0 +1,71 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_Flex = require("./Flex.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/AppBar/AppBar.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"elevation",
+	"size",
+	"blur"
+]);
+const colorSystem = (0, require_src.src_exports.system)({ color: {
+	property: "backgroundColor",
+	scale: "background"
+} });
+const elevationVariant = (0, require_src.src_exports.system)({ elevation: {
+	property: "boxShadow",
+	scale: "shadows"
+} });
+const blurSystem = ({ blur, theme }) => blur ? {
+	backdropFilter: `blur(${theme.blur})`,
+	WebkitBackdropFilter: `blur(${theme.blur})`
+} : void 0;
+const zOrderDefault = ({ theme }) => ({ zIndex: theme.zOrder.appBar });
+const sizeVariants = ({ theme, size }) => {
+	const s = theme.sizes[size ?? require_themeDefault.themeDefault(theme, "size", "md")];
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const AppBarBase = require_src.styled(require_Flex.Flex, {
+	name: "AppBar",
+	label: "AppBar",
+	shouldForwardProp,
+	systemProps: [
+		colorSystem,
+		blurSystem,
+		require_src.src_exports.border,
+		require_src.src_exports.borderTop,
+		require_src.src_exports.borderRight,
+		require_src.src_exports.borderBottom,
+		require_src.src_exports.borderLeft,
+		require_src.src_exports.borderWidth,
+		require_src.src_exports.borderStyle,
+		require_src.src_exports.borderColor,
+		require_src.src_exports.flexbox,
+		require_src.src_exports.space,
+		require_src.src_exports.layout,
+		zOrderDefault,
+		require_src.src_exports.position
+	]
+})({
+	flexShrink: 0,
+	width: "100%"
+}, elevationVariant, sizeVariants);
+function AppBar({ elevation = 4, size, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppBarBase, {
+		as: "header",
+		elevation,
+		size,
+		...rest
+	});
+}
+//#endregion
+exports.AppBar = AppBar;

package/dist/AppBar.d.cts

@@ -0,0 +1,23 @@
+import { o as Theme } from "./index-Bihpwn75.cjs";
+import { n as FlexProps } from "./index-B1rCD6Oo.cjs";
+//#region src/AppBar/AppBar.d.ts
+/** Valid values for the color prop — derived from theme.background keys. */
+type AppBarColor = keyof Theme['background'];
+type AppBarPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+/** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
+type AppBarSize = keyof Theme['sizes'];
+interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
+  /** Resolves against theme.background — sets the AppBar background color. */
+  color?: AppBarColor;
+  /** CSS position value for layout placement. Default: browser default (static). */
+  position?: AppBarPosition;
+  /** Box-shadow elevation (index into theme.shadows, 0–24). Default: `4`; use `0` for no shadow. */
+  elevation?: number;
+  /** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: AppBarSize;
+  /** Applies backdrop-filter: blur(theme.blur) + webkit prefix for frosted-glass effect. */
+  blur?: boolean;
+}
+declare function AppBar({ elevation, size, ...rest }: Readonly<AppBarProps>): import("react").JSX.Element;
+//#endregion
+export { AppBar, AppBarColor, AppBarPosition, AppBarProps, AppBarSize };

package/dist/AppBar.d.mts

@@ -0,0 +1,23 @@
+import { o as Theme } from "./index-Dm9HfgV6.mjs";
+import { n as FlexProps } from "./index-z35LEYG8.mjs";
+//#region src/AppBar/AppBar.d.ts
+/** Valid values for the color prop — derived from theme.background keys. */
+type AppBarColor = keyof Theme['background'];
+type AppBarPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+/** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
+type AppBarSize = keyof Theme['sizes'];
+interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
+  /** Resolves against theme.background — sets the AppBar background color. */
+  color?: AppBarColor;
+  /** CSS position value for layout placement. Default: browser default (static). */
+  position?: AppBarPosition;
+  /** Box-shadow elevation (index into theme.shadows, 0–24). Default: `4`; use `0` for no shadow. */
+  elevation?: number;
+  /** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: AppBarSize;
+  /** Applies backdrop-filter: blur(theme.blur) + webkit prefix for frosted-glass effect. */
+  blur?: boolean;
+}
+declare function AppBar({ elevation, size, ...rest }: Readonly<AppBarProps>): import("react").JSX.Element;
+//#endregion
+export { AppBar, AppBarColor, AppBarPosition, AppBarProps, AppBarSize };

package/dist/AppBar.mjs

@@ -0,0 +1,69 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { Flex } from "./Flex.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/AppBar/AppBar.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"elevation",
+	"size",
+	"blur"
+]);
+const colorSystem = (0, src_exports.system)({ color: {
+	property: "backgroundColor",
+	scale: "background"
+} });
+const elevationVariant = (0, src_exports.system)({ elevation: {
+	property: "boxShadow",
+	scale: "shadows"
+} });
+const blurSystem = ({ blur, theme }) => blur ? {
+	backdropFilter: `blur(${theme.blur})`,
+	WebkitBackdropFilter: `blur(${theme.blur})`
+} : void 0;
+const zOrderDefault = ({ theme }) => ({ zIndex: theme.zOrder.appBar });
+const sizeVariants = ({ theme, size }) => {
+	const s = theme.sizes[size ?? themeDefault(theme, "size", "md")];
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const AppBarBase = styled(Flex, {
+	name: "AppBar",
+	label: "AppBar",
+	shouldForwardProp,
+	systemProps: [
+		colorSystem,
+		blurSystem,
+		src_exports.border,
+		src_exports.borderTop,
+		src_exports.borderRight,
+		src_exports.borderBottom,
+		src_exports.borderLeft,
+		src_exports.borderWidth,
+		src_exports.borderStyle,
+		src_exports.borderColor,
+		src_exports.flexbox,
+		src_exports.space,
+		src_exports.layout,
+		zOrderDefault,
+		src_exports.position
+	]
+})({
+	flexShrink: 0,
+	width: "100%"
+}, elevationVariant, sizeVariants);
+function AppBar({ elevation = 4, size, ...rest }) {
+	return /* @__PURE__ */ jsx(AppBarBase, {
+		as: "header",
+		elevation,
+		size,
+		...rest
+	});
+}
+//#endregion
+export { AppBar };

package/dist/Avatar.cjs

@@ -0,0 +1,106 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_Flex = require("./Flex.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+let _emotion_react = require("@emotion/react");
+//#region src/Avatar/Avatar.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"variant",
+	"size",
+	"ring",
+	"ringColor",
+	"ringWidth"
+]);
+const avatarSizeSystem = (0, require_src.src_exports.system)({ size: {
+	properties: ["width", "height"],
+	scale: "avatar"
+} });
+const avatarVariants = (0, require_src.src_exports.variant)({
+	prop: "variant",
+	variants: {
+		circular: { borderRadius: "50%" },
+		rounded: { borderRadius: "md" },
+		square: { borderRadius: 0 }
+	}
+});
+const ringSystem = (0, require_src.src_exports.system)({
+	ringColor: {
+		property: "outlineColor",
+		scale: "border"
+	},
+	ringWidth: {
+		property: "outlineWidth",
+		scale: "borderWidths"
+	}
+});
+const AvatarRoot = require_src.styled(require_Flex.Flex, {
+	name: "Avatar",
+	label: "avatar",
+	shouldForwardProp
+})({
+	overflow: "hidden",
+	flexShrink: 0,
+	alignItems: "center",
+	justifyContent: "center",
+	flexDirection: "row"
+}, avatarSizeSystem, avatarVariants, ({ ring }) => ring ? {
+	outlineStyle: "solid",
+	outlineOffset: "2px"
+} : {}, ringSystem);
+const AvatarImg = require_src.styled("img", {
+	name: "Avatar",
+	slot: "img",
+	label: "AvatarImg"
+})({
+	width: "100%",
+	height: "100%",
+	objectFit: "cover",
+	display: "block"
+});
+function Avatar({ src, srcSet, alt, fallback, children, variant: variantProp, size: sizeProp, ring, ringColor: ringColorProp, ringWidth: ringWidthProp, ...rest }) {
+	const theme = (0, _emotion_react.useTheme)();
+	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "avatarVariant", "circular");
+	const size = sizeProp ?? require_themeDefault.themeDefault(theme, "avatarSize", "md");
+	const ringColor = ringColorProp ?? require_themeDefault.themeDefault(theme, "borderColor", "primary");
+	const ringWidth = ringWidthProp ?? require_themeDefault.themeDefault(theme, "borderWidth", "thin");
+	const [prevSrc, setPrevSrc] = (0, react.useState)(src);
+	const [prevSrcSet, setPrevSrcSet] = (0, react.useState)(srcSet);
+	const [prevFallback, setPrevFallback] = (0, react.useState)(fallback);
+	const [failed, setFailed] = (0, react.useState)(false);
+	const [useFallback, setUseFallback] = (0, react.useState)(false);
+	if (prevSrc !== src || prevSrcSet !== srcSet || prevFallback !== fallback) {
+		setPrevSrc(src);
+		setPrevSrcSet(srcSet);
+		setPrevFallback(fallback);
+		setFailed(false);
+		setUseFallback(false);
+	}
+	const hasPrimary = !!(src || srcSet);
+	const hasAnyImage = hasPrimary || !!fallback;
+	const handleError = () => {
+		if (!useFallback && fallback && hasPrimary) setUseFallback(true);
+		else setFailed(true);
+	};
+	const currentSrc = useFallback ? fallback : src ?? (srcSet ? void 0 : fallback);
+	const currentSrcSet = useFallback ? void 0 : srcSet;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarRoot, {
+		variant,
+		size,
+		ring,
+		ringColor: ring ? ringColor : void 0,
+		ringWidth: ring ? ringWidth : void 0,
+		...rest,
+		children: hasAnyImage && !failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarImg, {
+			src: currentSrc,
+			srcSet: currentSrcSet,
+			alt,
+			onError: handleError
+		}) : children
+	});
+}
+//#endregion
+exports.Avatar = Avatar;

package/dist/Avatar.d.cts

@@ -0,0 +1,28 @@
+import { o as Theme } from "./index-Bihpwn75.cjs";
+import { n as FlexProps } from "./index-B1rCD6Oo.cjs";
+//#region src/Avatar/Avatar.d.ts
+type AvatarVariant = 'circular' | 'rounded' | 'square';
+type AvatarSize = keyof Theme['avatar'];
+type AvatarRingColor = keyof Theme['border'];
+type AvatarRingWidth = keyof Theme['borderWidths'];
+type OmittedProps = 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'size';
+interface AvatarProps extends Omit<FlexProps, OmittedProps> {
+  src?: string;
+  srcSet?: string;
+  alt?: string;
+  /** Fallback image URL shown when src/srcSet fail. Children are shown when all sources fail. */
+  fallback?: string;
+  /** Shape of the avatar. Default: 'circular'. */
+  variant?: AvatarVariant;
+  /** Preset size — resolves against theme.avatar. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: AvatarSize;
+  /** Adds a CSS outline ring around the avatar. */
+  ring?: boolean;
+  /** Ring color — resolves against theme.border. */
+  ringColor?: AvatarRingColor;
+  /** Ring width — resolves against theme.borderWidths. */
+  ringWidth?: AvatarRingWidth;
+}
+declare function Avatar({ src, srcSet, alt, fallback, children, variant: variantProp, size: sizeProp, ring, ringColor: ringColorProp, ringWidth: ringWidthProp, ...rest }: Readonly<AvatarProps>): import("react").JSX.Element;
+//#endregion
+export { Avatar, AvatarProps, AvatarRingColor, AvatarRingWidth, AvatarSize, AvatarVariant };

package/dist/Avatar.d.mts

@@ -0,0 +1,28 @@
+import { o as Theme } from "./index-Dm9HfgV6.mjs";
+import { n as FlexProps } from "./index-z35LEYG8.mjs";
+//#region src/Avatar/Avatar.d.ts
+type AvatarVariant = 'circular' | 'rounded' | 'square';
+type AvatarSize = keyof Theme['avatar'];
+type AvatarRingColor = keyof Theme['border'];
+type AvatarRingWidth = keyof Theme['borderWidths'];
+type OmittedProps = 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'size';
+interface AvatarProps extends Omit<FlexProps, OmittedProps> {
+  src?: string;
+  srcSet?: string;
+  alt?: string;
+  /** Fallback image URL shown when src/srcSet fail. Children are shown when all sources fail. */
+  fallback?: string;
+  /** Shape of the avatar. Default: 'circular'. */
+  variant?: AvatarVariant;
+  /** Preset size — resolves against theme.avatar. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: AvatarSize;
+  /** Adds a CSS outline ring around the avatar. */
+  ring?: boolean;
+  /** Ring color — resolves against theme.border. */
+  ringColor?: AvatarRingColor;
+  /** Ring width — resolves against theme.borderWidths. */
+  ringWidth?: AvatarRingWidth;
+}
+declare function Avatar({ src, srcSet, alt, fallback, children, variant: variantProp, size: sizeProp, ring, ringColor: ringColorProp, ringWidth: ringWidthProp, ...rest }: Readonly<AvatarProps>): import("react").JSX.Element;
+//#endregion
+export { Avatar, AvatarProps, AvatarRingColor, AvatarRingWidth, AvatarSize, AvatarVariant };