@zyncat/ui 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tabsir Ahammed
+
+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,133 @@
+# Zyncat UI
+
+A premium React design system - modern CSS + a small, closed token vocabulary, applied
+consistently. Restraint, calm motion, no Tailwind, no CSS-in-JS, no UI libraries.
+
+**React 19 - TypeScript - ships compiled ESM + types.** Import the whole library or a single
+component; link one base stylesheet - each component loads its own CSS automatically.
+
+## Install
+
+```bash
+pnpm add @zyncat/ui
+# peers (you likely already have them):
+pnpm add react react-dom
+```
+
+| Peer                  | Range | Used for                                                             |
+| --------------------- | ----- | -------------------------------------------------------------------- |
+| `react` / `react-dom` | `^19` | components; `createRoot`/`createPortal` for imperative toast/tooltip |
+
+Enter/exit, layout and gesture animation are built in (a small WAAPI engine) - no animation library to install.
+
+Icons are **bundled** (a small curated Phosphor set) - there is no icon peer to install.
+
+## Use it
+
+No bundler config and no `transpilePackages` - the package ships built ESM with the `'use client'`
+directives intact, so Next.js App Router boundaries just work.
+
+```tsx
+import { Button, toast } from '@zyncat/ui';
+import '@zyncat/ui/styles.css'; // base layer - link once, at the app root
+```
+
+`styles.css` is the **base layer only** - fonts, design tokens (the `:root` custom
+properties) and the shared `glass` utility. Link it exactly once at the app root.
+
+You never import per-component CSS: every component imports its own stylesheet, so your
+bundler code-splits and lazy-loads it with the component. Import `@zyncat/ui/dialog` and
+only `dialog.css` ships (plus the `overlay`/`icon` styles it reuses, deduped) - not the
+other 30 components' CSS.
+
+### Import a single component
+
+Every component is also a subpath export, so you can pull just one:
+
+```tsx
+import { Button } from '@zyncat/ui/button';
+import { DateField } from '@zyncat/ui/date-field';
+```
+
+The barrel is side-effect-free and tree-shakes, so `import { Button } from '@zyncat/ui'` is
+equally lean in a bundler - subpaths help in non-bundled or explicit setups. CSS follows the
+same module graph: components you don't use drop their stylesheets too.
+
+## Components
+
+| Group               | Components                                                                                    |
+| ------------------- | --------------------------------------------------------------------------------------------- |
+| Primitives          | Button, Collapse, Badge, StatusBadge, CountBadge                                              |
+| Forms               | TextField, NumberField, OtpField, Textarea, Checkbox, Toggle, RadioGroup, Select, MultiSelect |
+| Data                | Avatar, AvatarGroup, Tag, ToggleTag, Table, Pagination                                        |
+| Date, time & tabs   | DateField, DateTimeField, DateRangeField, TimeField, Tabs                                     |
+| Overlays & feedback | Alert, Toast, Tooltip, Dialog, Popover, Sheet                                                 |
+
+Each is a named export from the barrel and a subpath (`@zyncat/ui/<kebab-name>`). Props are
+documented inline in the types; see [`llms.txt`](./llms.txt) for per-component examples.
+
+## For AI coding agents
+
+**MCP server (preferred).** The package bundles a zero-dependency MCP server (stdio) so agents
+query the API surface instead of grepping `node_modules`: `list_components` (index + conventions),
+`get_component` (usage docs + complete prop types, shared type chunks inlined), `search_api`
+(which component owns a prop/type/token), `get_tokens` (the token vocabulary with real values).
+Register it in the consuming project - for Claude Code, `.mcp.json` at the project root:
+
+```json
+{ "mcpServers": { "zyncat-ui": { "command": "node", "args": ["./node_modules/@zyncat/ui/dist/mcp.js"] } } }
+```
+
+Any MCP client works (also exposed as the `zyncat-ui-mcp` bin). The server reads the installed
+package's `llms.txt`, `dist/*.d.ts` and `src/tokens/*.css` at call time, so answers always match
+the installed version.
+
+Without MCP, the same contract is readable directly:
+
+- **`node_modules/@zyncat/ui/dist/*.d.ts`** - every component's props carry inline TSDoc. This is
+  the machine-readable source of truth (e.g. `dist/button.d.ts` fully describes `ButtonProps`).
+- **`llms.txt`** (package root) - a compact, per-component index: purpose - import - a minimal
+  example. Cheaper to scan than every `.d.ts`.
+- This README.
+
+## Copy-paste instead
+
+The tarball also ships `src/`, so you can lift a component straight from
+`node_modules/@zyncat/ui/src/components/<name>/` into your project. Components aren't fully
+self-contained - they share `src/tokens/`, the `motion-tokens` bridge, the internal `icon/`, and a
+few `*-core` helpers - so copy those alongside. (A shadcn-style registry/CLI could automate this
+later.)
+
+## Icons
+
+Components render their own glyphs from a small curated Phosphor set, **bundled in** - no icon peer
+to install. Zyncat UI does **not** export an `Icon` component, so where a prop takes an icon
+(`iconLeft`, `leadingIcon`, a `Tag`'s `icon`, ...) pass your own node - any `ReactNode` (e.g. an
+`@phosphor-icons/react` element, if you choose to use it).
+
+## What's inside
+
+```
+src/                source (also shipped, for copy-paste)
+-- index.ts         public barrel
+-- styles.css       base layer: fonts + tokens + glass (link once)
+-- tokens/          CSS custom properties + motion-tokens.ts (JS and CSS motion bridge)
+-- components/      <domain>/Name.tsx + name.css (each Tsx imports its own CSS -> lazy-loaded)
+dist/               compiled ESM + .d.ts - what you import
+```
+
+## Notes
+
+- **Fonts.** `src/tokens/fonts.css` pulls Geist + Geist Mono from Google Fonts via a remote
+  `@import`. Self-host the families to drop the render-blocking network hop.
+- **Styling is token-driven.** Re-skin by overriding the CSS custom properties in your own
+  stylesheet loaded after `@zyncat/ui/styles.css` - never fork the source.
+
+## Develop
+
+```bash
+pnpm install
+pnpm build       # tsup - dist/ (ESM + .d.ts)
+pnpm typecheck   # tsc --noEmit
+pnpm format      # prettier --write
+```

package/dist/alert.css

@@ -0,0 +1,132 @@
+/* alert.css - the persistent in-flow status message: a lit tinted pane per tone. */
+
+.alert-shell {
+  overflow: hidden;
+}
+
+.alert {
+  /* tone hooks - repointed by [data-tone] below; info is the default */
+  --alert-hue: var(--info);
+  --alert-fg: var(--info-text);
+  --alert-bg: var(--info-subtle);
+  --alert-wash: var(--accent-wash); /* info's wash = accent (teal) */
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  /* the lit pane: top-light gradient over the tint + 1px inner highlight (Button's lighting model) */
+  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-surface) 45%, var(--alert-bg)), var(--alert-bg));
+  border: var(--border-hairline) solid color-mix(in oklab, var(--alert-hue) 30%, transparent);
+  border-radius: var(--radius-lg);
+  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
+}
+
+.alert[data-tone='success'] {
+  --alert-hue: var(--success);
+  --alert-fg: var(--success-text);
+  --alert-bg: var(--success-subtle);
+  --alert-wash: var(--success-wash);
+}
+.alert[data-tone='warning'] {
+  --alert-hue: var(--warning);
+  --alert-fg: var(--warning-text);
+  --alert-bg: var(--warning-subtle);
+  --alert-wash: var(--warning-wash);
+}
+.alert[data-tone='danger'] {
+  --alert-hue: var(--danger);
+  --alert-fg: var(--danger-text);
+  --alert-bg: var(--danger-subtle);
+  --alert-wash: var(--danger-wash);
+}
+
+/* with a description: glyph rides the title line, controls stay centered */
+.alert:has(.alert__desc) {
+  align-items: flex-start;
+}
+.alert:has(.alert__desc) .alert__action,
+.alert:has(.alert__desc) .alert__close {
+  align-self: center;
+}
+
+.alert--banner {
+  border-radius: 0;
+  border-block-start: 0;
+  border-inline: 0;
+  padding-inline: var(--space-6);
+}
+
+/* Glyph - one --leading-body tall so it centers on the title line. */
+.alert__icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+  height: var(--leading-body);
+  color: var(--alert-hue);
+}
+
+.alert__body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.alert__title {
+  margin: 0;
+  font: var(--type-label);
+  color: var(--alert-fg);
+  text-wrap: pretty;
+}
+.alert__desc {
+  margin: var(--space-1) 0 0;
+  font: var(--type-caption);
+  color: color-mix(in oklab, var(--alert-fg) 56%, var(--text-body));
+  text-wrap: pretty;
+}
+
+/* Action - the system .btn .btn--sm re-skinned to the pane's tone (alert-local chrome, not a global Button variant). */
+.alert__action {
+  flex: none;
+  color: var(--alert-fg);
+  background: transparent;
+}
+.alert__action:hover:not(:disabled) {
+  color: var(--alert-fg);
+  background: var(--alert-wash);
+}
+.alert__action:active:not(:disabled) {
+  background: color-mix(in oklab, var(--alert-hue) 16%, transparent);
+  transform: translateY(var(--space-px));
+}
+.alert[data-tone='danger'] .alert__action {
+  --btn-ring: var(--ring-danger);
+}
+
+/* Dismiss - always visible (alerts persist; no hover-reveal like toast). */
+.alert__close {
+  flex: none;
+  appearance: none;
+  display: grid;
+  place-items: center;
+  width: var(--space-6);
+  height: var(--space-6);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: color-mix(in oklab, var(--alert-fg) 64%, transparent);
+  cursor: pointer;
+  transition: var(--transition-control);
+}
+.alert__close:hover {
+  background: color-mix(in oklab, var(--alert-fg) 9%, transparent);
+  color: var(--alert-fg);
+}
+.alert__close:active {
+  background: color-mix(in oklab, var(--alert-fg) 14%, transparent);
+}
+.alert__close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}

package/dist/alert.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import './motion-scale-Canq4stZ.js';
+
+type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+interface AlertAction {
+    /** Sentence-case label, e.g. "Update billing". */
+    label: string;
+    onClick?: () => void;
+}
+interface AlertOwnProps {
+    /** Status of the message; info/success are polite, warning/danger assertive. Default 'info'. */
+    tone?: AlertTone;
+    /** The message - sentence case, ideally one line. */
+    title: ReactNode;
+    /** Optional description; stays neutral - tone marks the message, not the prose. */
+    children?: ReactNode;
+    /** One action max, rendered as the system secondary small button. */
+    action?: AlertAction;
+    /** Renders the always-visible close button. Uncontrolled unless `open` is given. */
+    dismissible?: boolean;
+    /** Fires on dismiss. With `open` set, the parent owns hiding the alert. */
+    onDismiss?: () => void;
+    /** Controlled visibility; omit for uncontrolled. Exit eases shut (height collapse). */
+    open?: boolean;
+    /** App-level strip: square corners, hairline below only. Paint modifier. */
+    banner?: boolean;
+    /** Override the tone glyph; pass null to render no glyph. */
+    icon?: ReactNode | null;
+    /** Extra class(es) merged onto the alert. */
+    className?: string;
+    /** Inline styles merged onto the alert. */
+    style?: CSSProperties;
+    /** Enter/exit timing - motion tokens only, or `null` to disable (the height collapse snaps).
+     *  @default height 'slow'/'entrance'; opacity in 'base'/'entrance', out 'fast'/'exit' */
+    animation?: DisableableAnimation;
+}
+interface AlertProps extends AlertOwnProps {
+    /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the alert. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof AlertOwnProps> & DataAttributes;
+}
+declare function Alert({ tone, title, children, action, dismissible, onDismiss, open, banner, icon, className, style, htmlProps, animation, }: AlertProps): react.JSX.Element;
+
+export { Alert, type AlertAction, type AlertProps, type AlertTone };

package/dist/alert.js

@@ -0,0 +1,80 @@
+'use client';import { Motion } from './chunk-36WVAQKL.js';
+import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
+import { Presence } from './chunk-MXOPCFWR.js';
+import './chunk-W3SHPKSB.js';
+import './chunk-JSKXZMLH.js';
+import './chunk-L3Q3VDIW.js';
+import { IconSlot } from './chunk-2ERBBFZS.js';
+import { Icon } from './chunk-3SBCBYB7.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import './chunk-S5ZTZANS.js';
+import { Button } from './chunk-U5QQZC3U.js';
+import './chunk-VTJTGVZZ.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './alert.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ALERT_HEIGHT_TIMING = {
+  open: { duration: "slow", ease: "entrance" },
+  close: { duration: "slow", ease: "entrance" }
+};
+var ALERT_OPACITY_TIMING = {
+  open: { duration: "base", ease: "entrance" },
+  close: { duration: "fast", ease: "exit" }
+};
+var TONE_GLYPH = {
+  info: "info",
+  success: "check-circle",
+  warning: "warning",
+  danger: "warning-circle"
+};
+var TONE_ROLE = { info: "status", success: "status", warning: "alert", danger: "alert" };
+function Alert({
+  tone = "info",
+  title,
+  children = null,
+  action = null,
+  dismissible = false,
+  onDismiss,
+  open,
+  banner = false,
+  icon,
+  className = "",
+  style,
+  htmlProps,
+  animation
+}) {
+  const [isOpen, setOpen] = useControllable(open, true, onDismiss);
+  const dismiss = () => setOpen(false);
+  const h = resolveMotionTiming(animation, ALERT_HEIGHT_TIMING);
+  const o = resolveMotionTiming(animation, ALERT_OPACITY_TIMING);
+  const cls = cx("alert", banner && "alert--banner", className);
+  return /* @__PURE__ */ jsx(Presence, { initial: false, children: isOpen && /* @__PURE__ */ jsx(
+    Motion,
+    {
+      className: "alert-shell",
+      animate: [
+        { height: [0, "auto"], timing: h.open },
+        { opacity: [0, 1], timing: o.open }
+      ],
+      exit: [
+        { height: ["auto", 0], timing: h.close },
+        { opacity: [1, 0], timing: o.close }
+      ],
+      children: /* @__PURE__ */ jsxs("div", { className: cls, style, "data-tone": tone, role: TONE_ROLE[tone] || "status", ...htmlProps, children: [
+        icon === null ? null : /* @__PURE__ */ jsx("span", { className: "alert__icon", "aria-hidden": "true", children: icon !== void 0 ? /* @__PURE__ */ jsx(IconSlot, { size: "md", children: icon }) : /* @__PURE__ */ jsx(Icon, { name: TONE_GLYPH[tone] || "info", size: "md" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "alert__body", children: [
+          /* @__PURE__ */ jsx("p", { className: "alert__title", children: title }),
+          children != null && /* @__PURE__ */ jsx("p", { className: "alert__desc", children })
+        ] }),
+        action && /* @__PURE__ */ jsx(Button, { variant: "unstyled", size: "sm", className: "alert__action", onClick: action.onClick, children: action.label }),
+        dismissible && /* @__PURE__ */ jsx("button", { type: "button", className: "alert__close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: "sm" }) })
+      ] })
+    },
+    "alert-shell"
+  ) });
+}
+
+export { Alert };
+//# sourceMappingURL=alert.js.map
+//# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/alert/Alert.tsx"],"names":[],"mappings":"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","file":"alert.js","sourcesContent":["'use client';\n\nimport './alert.css';\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { Motion } from '../../../motion/element';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { Icon, type IconName } from '../../internal/icon/Icon';\nimport { Button } from '../../primitives/button/Button';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface AlertAction {\n  /** Sentence-case label, e.g. \"Update billing\". */\n  label: string;\n  onClick?: () => void;\n}\n\ninterface AlertOwnProps {\n  /** Status of the message; info/success are polite, warning/danger assertive. Default 'info'. */\n  tone?: AlertTone;\n  /** The message - sentence case, ideally one line. */\n  title: ReactNode;\n  /** Optional description; stays neutral - tone marks the message, not the prose. */\n  children?: ReactNode;\n  /** One action max, rendered as the system secondary small button. */\n  action?: AlertAction;\n  /** Renders the always-visible close button. Uncontrolled unless `open` is given. */\n  dismissible?: boolean;\n  /** Fires on dismiss. With `open` set, the parent owns hiding the alert. */\n  onDismiss?: () => void;\n  /** Controlled visibility; omit for uncontrolled. Exit eases shut (height collapse). */\n  open?: boolean;\n  /** App-level strip: square corners, hairline below only. Paint modifier. */\n  banner?: boolean;\n  /** Override the tone glyph; pass null to render no glyph. */\n  icon?: ReactNode | null;\n  /** Extra class(es) merged onto the alert. */\n  className?: string;\n  /** Inline styles merged onto the alert. */\n  style?: CSSProperties;\n  /** Enter/exit timing - motion tokens only, or `null` to disable (the height collapse snaps).\n   *  @default height 'slow'/'entrance'; opacity in 'base'/'entrance', out 'fast'/'exit' */\n  animation?: DisableableAnimation;\n}\n\nexport interface AlertProps extends AlertOwnProps {\n  /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the alert. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof AlertOwnProps> & DataAttributes;\n}\n\nconst ALERT_HEIGHT_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'slow', ease: 'entrance' },\n} as const;\nconst ALERT_OPACITY_TIMING = {\n  open: { duration: 'base', ease: 'entrance' },\n  close: { duration: 'fast', ease: 'exit' },\n} as const;\n\nconst TONE_GLYPH: Record<AlertTone, IconName> = {\n  info: 'info',\n  success: 'check-circle',\n  warning: 'warning',\n  danger: 'warning-circle',\n};\nconst TONE_ROLE: Record<AlertTone, string> = { info: 'status', success: 'status', warning: 'alert', danger: 'alert' };\n\nexport function Alert({\n  tone = 'info',\n  title,\n  children = null,\n  action = null,\n  dismissible = false,\n  onDismiss,\n  open,\n  banner = false,\n  icon,\n  className = '',\n  style,\n  htmlProps,\n  animation,\n}: AlertProps) {\n  const [isOpen, setOpen] = useControllable(open, true, onDismiss);\n  const dismiss = () => setOpen(false);\n\n  const h = resolveMotionTiming(animation, ALERT_HEIGHT_TIMING);\n  const o = resolveMotionTiming(animation, ALERT_OPACITY_TIMING);\n\n  const cls = cx('alert', banner && 'alert--banner', className);\n\n  return (\n    <Presence initial={false}>\n      {isOpen && (\n        <Motion\n          key=\"alert-shell\"\n          className=\"alert-shell\"\n          animate={[\n            { height: [0, 'auto'], timing: h.open },\n            { opacity: [0, 1], timing: o.open },\n          ]}\n          exit={[\n            { height: ['auto', 0], timing: h.close },\n            { opacity: [1, 0], timing: o.close },\n          ]}\n        >\n          <div className={cls} style={style} data-tone={tone} role={TONE_ROLE[tone] || 'status'} {...htmlProps}>\n            {icon === null ? null : (\n              <span className=\"alert__icon\" aria-hidden=\"true\">\n                {icon !== undefined ? (\n                  <IconSlot size=\"md\">{icon}</IconSlot>\n                ) : (\n                  <Icon name={TONE_GLYPH[tone] || 'info'} size=\"md\" />\n                )}\n              </span>\n            )}\n            <div className=\"alert__body\">\n              <p className=\"alert__title\">{title}</p>\n              {children != null && <p className=\"alert__desc\">{children}</p>}\n            </div>\n            {action && (\n              <Button variant=\"unstyled\" size=\"sm\" className=\"alert__action\" onClick={action.onClick}>\n                {action.label}\n              </Button>\n            )}\n            {dismissible && (\n              <button type=\"button\" className=\"alert__close\" aria-label=\"Dismiss\" onClick={dismiss}>\n                <Icon name=\"close\" size=\"sm\" />\n              </button>\n            )}\n          </div>\n        </Motion>\n      )}\n    </Presence>\n  );\n}\n"]}

package/dist/avatar-group.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, HTMLAttributes } from 'react';
+import { AvatarSize } from './avatar.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+interface AvatarGroupOwnProps {
+    /** The `Avatar` elements to stack; each is cloned to force `size`, then sliced to `max`. */
+    children: ReactNode;
+    /** Max visible avatars before "+N" overflow chip. Default 5. */
+    max?: number;
+    /** Uniform size applied to all children. Default 'md'. */
+    size?: AvatarSize;
+    /** Extra class(es) merged onto the group wrapper. */
+    className?: string;
+    /** Inline styles merged onto the group wrapper. */
+    style?: CSSProperties;
+}
+interface AvatarGroupProps extends AvatarGroupOwnProps {
+    /** Standard <span> attributes forwarded to the group wrapper. */
+    htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarGroupOwnProps> & DataAttributes;
+}
+declare function AvatarGroup({ children, max, size, className, style, htmlProps }: AvatarGroupProps): react.JSX.Element;
+
+export { AvatarGroup, type AvatarGroupProps };

package/dist/avatar-group.js

@@ -0,0 +1,23 @@
+'use client';import { cx } from './chunk-QGNC7LH5.js';
+import './avatar.css';
+import { Children, isValidElement, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function AvatarGroup({ children, max = 5, size = "md", className = "", style, htmlProps }) {
+  const items = Children.toArray(children);
+  const visible = max > 0 ? items.slice(0, max) : items;
+  const overflow = items.length - visible.length;
+  return /* @__PURE__ */ jsxs("span", { className: cx("avatar-group", className), style, ...htmlProps, children: [
+    visible.map(
+      (child, i) => isValidElement(child) ? cloneElement(child, { size, key: child.key ?? i }) : child
+    ),
+    overflow > 0 && /* @__PURE__ */ jsx("span", { className: `avatar avatar--${size} avatar--overflow`, role: "img", "aria-label": `${overflow} more`, children: /* @__PURE__ */ jsx("span", { className: "avatar__face", children: /* @__PURE__ */ jsxs("span", { className: "avatar__initials", children: [
+      "+",
+      overflow
+    ] }) }) })
+  ] });
+}
+
+export { AvatarGroup };
+//# sourceMappingURL=avatar-group.js.map
+//# sourceMappingURL=avatar-group.js.map

package/dist/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;AAkCO,SAAS,WAAA,CAAY,EAAE,QAAA,EAAU,GAAA,GAAM,CAAA,EAAG,IAAA,GAAO,IAAA,EAAM,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,SAAA,EAAU,EAAqB;AAClH,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AACvC,EAAA,MAAM,UAAU,GAAA,GAAM,CAAA,GAAI,MAAM,KAAA,CAAM,CAAA,EAAG,GAAG,CAAA,GAAI,KAAA;AAChD,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,MAAA,GAAS,OAAA,CAAQ,MAAA;AAExC,EAAA,uBACE,IAAA,CAAC,UAAK,SAAA,EAAW,EAAA,CAAG,gBAAgB,SAAS,CAAA,EAAG,KAAA,EAAe,GAAG,SAAA,EAC/D,QAAA,EAAA;AAAA,IAAA,OAAA,CAAQ,GAAA;AAAA,MAAI,CAAC,KAAA,EAAO,CAAA,KACnB,cAAA,CAAe,KAAK,CAAA,GAChB,YAAA,CAAa,KAAA,EAA8C,EAAE,MAAM,GAAA,EAAK,KAAA,CAAM,GAAA,IAAO,CAAA,EAAG,CAAA,GACxF;AAAA,KACN;AAAA,IACC,QAAA,GAAW,qBACV,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,CAAA,eAAA,EAAkB,IAAI,qBAAqB,IAAA,EAAK,KAAA,EAAM,cAAY,CAAA,EAAG,QAAQ,SAC5F,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,cAAA,EACd,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAmB,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAAE;AAAA,KAAA,EAAS,GAChD,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"avatar-group.js","sourcesContent":["'use client';\n\nimport './avatar.css';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport type { AvatarSize } from './Avatar';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\ninterface AvatarGroupOwnProps {\n  /** The `Avatar` elements to stack; each is cloned to force `size`, then sliced to `max`. */\n  children: ReactNode;\n  /** Max visible avatars before \"+N\" overflow chip. Default 5. */\n  max?: number;\n  /** Uniform size applied to all children. Default 'md'. */\n  size?: AvatarSize;\n  /** Extra class(es) merged onto the group wrapper. */\n  className?: string;\n  /** Inline styles merged onto the group wrapper. */\n  style?: CSSProperties;\n}\n\nexport interface AvatarGroupProps extends AvatarGroupOwnProps {\n  /** Standard <span> attributes forwarded to the group wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarGroupOwnProps> & DataAttributes;\n}\n\nexport function AvatarGroup({ children, max = 5, size = 'md', className = '', style, htmlProps }: AvatarGroupProps) {\n  const items = Children.toArray(children);\n  const visible = max > 0 ? items.slice(0, max) : items;\n  const overflow = items.length - visible.length;\n\n  return (\n    <span className={cx('avatar-group', className)} style={style} {...htmlProps}>\n      {visible.map((child, i) =>\n        isValidElement(child)\n          ? cloneElement(child as ReactElement<{ size?: AvatarSize }>, { size, key: child.key ?? i })\n          : child,\n      )}\n      {overflow > 0 && (\n        <span className={`avatar avatar--${size} avatar--overflow`} role=\"img\" aria-label={`${overflow} more`}>\n          <span className=\"avatar__face\">\n            <span className=\"avatar__initials\">+{overflow}</span>\n          </span>\n        </span>\n      )}\n    </span>\n  );\n}\n"]}