@mastra/playground-ui 64.0.1-alpha.0 → 65.0.0-alpha.10

package/README.md

@@ -21,6 +21,24 @@ export function SaveButton() {
 }
 ```
 
+With a Tailwind build of your own, compile one sheet instead of `style.css`: import the components' stylesheet uncompiled, and `sources.css` so Tailwind emits the classes the compiled components use.
+
+```css
+@import 'tailwindcss';
+@import '@mastra/playground-ui/components.css';
+@import '@mastra/playground-ui/sources.css';
+```
+
+### Subtle buttons
+
+Use `variant="subtle"` for a persistent neutral fill, such as a selected view. It keeps the same dimensions as `default`, so switching between the two does not move surrounding controls. Set `aria-pressed` on toggle buttons to expose selection to assistive technology.
+
+```tsx
+<Button variant={selected ? 'subtle' : 'default'} aria-pressed={selected}>
+  My PRs
+</Button>
+```
+
 ### Tool approvals
 
 `ToolApproval` renders a standalone approval request in the shared activity layout: the tool name
@@ -227,7 +245,7 @@ Text fields, textareas, input groups, and the default Select, Combobox, and Date
 
 A field in an error state sets `--field-rim` and `--field-rim-focus` to `--destructive-indicator`, so the red outline shows on every surface and stays red while focused.
 
-If your app generates additional semantic utilities, import `@mastra/playground-ui/theme.css` into its Tailwind stylesheet so Tailwind can read the `@theme inline` mappings.
+If your app keeps `style.css` and generates additional semantic utilities, import `@mastra/playground-ui/theme.css` into its Tailwind stylesheet so Tailwind can read the `@theme inline` mappings. `components.css` already includes it.
 
 ### Brand colors
 
@@ -263,7 +281,7 @@ import { ProductBadge } from '@mastra/playground-ui/components/ProductBadge';
 
 Charts use hue-named roles for categories (`--chart-blue`, `--chart-blue-deep`, `--chart-amber`, `--chart-green`, `--chart-purple`, `--chart-orange`, `--chart-pink`, `--chart-red`) and `--chart-sequential-1` through `--chart-sequential-5` for ordered values. Span colors use `--span-agent`, `--span-workflow`, and the other span names. Pastel chart colors are fills, not text colors; keep labels on `--foreground` or `--muted-foreground`.
 
-Numbered `accent*` tokens, `positive1`, `negative1`, `warning1`, `notice-success/destructive/warning/info`, and `--brand-green-*` are removed. The `yellow` ramp is now `amber`: `--yellow-*`, `--yellow-soft-*`, `--badge-yellow-*`, `--chart-yellow`, and the Badge `yellow` tone are removed in favor of their `amber` names. `--color-brand-yellow` is unchanged. Status consumers use the existing `success`, `destructive`, `warning`, or `info` roles. Focus styling uses `border-focus`; categorical charts and span icons use their own roles. CodeMirror uses five local `--syntax-*` properties scoped to `.cm-editor`, not a global palette.
+Numbered `accent*` tokens, `positive1`, `negative1`, `warning1`, `notice-success/destructive/warning/info`, and `--brand-green-*` are removed. The `yellow` ramp is now `amber`: `--yellow-*`, `--yellow-soft-*`, `--badge-yellow-*`, `--chart-yellow`, and the Badge `yellow` tone are removed in favor of their `amber` names. `--color-brand-yellow` is unchanged. Status consumers use the existing `success`, `destructive`, `warning`, or `info` roles. Focus styling uses `border-focus`; categorical charts and span icons use their own roles. CodeMirror reads five `--syntax-*` roles from `theme/code.css`, not a global palette.
 
 Every badge hue (`green`, `red`, `amber`, `blue`, `purple`, `orange`, `cyan`, `pink`) is a categorical tone built from the ramps, with `--badge-{hue}-strong`, `-subtle`, `-edge`, `-foreground`, and `-indicator`. `-strong` and `-subtle` are the fills behind `emphasis="strong"` and `emphasis="subtle"`. Badge backgrounds are translucent tints, so a badge follows the surface under it when a card or row changes on hover: `--{hue}-600` at 32% (strong) and 13% (subtle) in dark mode, `--{hue}-400` at 20% and 10% in light mode. On a resting card they match the solid fills they replaced. Product avatars stay solid (`--{hue}-soft-900` / `--{hue}-soft-950` in dark mode, `--{hue}-100` / `--{hue}-50` in light mode) because they overlap each other. The soft steps keep the lightness and hue of `900`/`950` at 75% chroma, and are available as utilities such as `bg-green-soft-900`. `--badge-{hue}-indicator` colors dots, icons, and labels for a category: `--{hue}-soft-300` in dark mode and `--{hue}-soft-600` in light mode, which hold every hue at the same 0.1 chroma so no hue shouts. Use the status role with `-subtle`, `-edge`, `-subtle-foreground`, or `-indicator` for its intended job. Notice variants are unchanged. Badge status variants are `success`, `destructive`, `warning`, and `info`, for states. `green`, `red`, `amber`, and `blue` are categorical tones like `purple` and `orange`, for labels that are not states. `Badge` takes `emphasis="strong"` (the default) or `emphasis="subtle"` (a quieter tinted fill). Use `--green-*` for the shared chromatic ramp.
 

package/components.css

@@ -0,0 +1,390 @@
+/* The components' stylesheet, uncompiled: tokens, plugins, custom utilities, base styles,
+ * keyframes. An app compiles it into its own sheet after `@import 'tailwindcss'`, with
+ * `sources.css` beside it. `sources.css` is not imported here: `src/index.css` builds
+ * `dist/style.css` from this file and would scan its own output. */
+@import 'tw-animate-css';
+
+@import './theme.css';
+
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= theme(--breakpoint-3xl)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/* Assembled here, not in `theme.css`, so `--surface-rim` resolves against the
+ * element wearing the utility: a custom property that referenced it would be
+ * substituted once on the root and inherited as a finished string.
+ *
+ * `--surface-tint` is the state layer of a surface that cannot carry a
+ * pseudo-element — an `<input>`. An inset shadow paints over the element's own
+ * fill and under its content, so a wash there behaves like `state-layer`'s
+ * `::before` without needing a child, and it sits below the rim layer so the
+ * boundary keeps its resting weight while the fill moves. Each utility resets
+ * it, because a custom property would otherwise inherit into every raised
+ * surface nested inside a hovered one. */
+@utility shadow-raised {
+  --surface-tint: transparent;
+
+  box-shadow:
+    var(--elevation-lip),
+    inset 0 0 0 1px var(--surface-rim),
+    inset 0 0 0 9999px var(--surface-tint),
+    var(--elevation-raised);
+}
+
+@utility shadow-input {
+  --surface-tint: transparent;
+  --surface-rim: var(--field-rim);
+
+  box-shadow:
+    var(--elevation-lip),
+    inset 0 0 0 1px var(--surface-rim),
+    inset 0 0 0 9999px var(--surface-tint),
+    var(--elevation-raised);
+}
+
+@utility shadow-inset {
+  box-shadow:
+    inset 0 1px 0 var(--inset-highlight),
+    inset 0 0 0 1px var(--inset-rim);
+}
+
+@utility shadow-rim {
+  box-shadow: inset 0 0 0 1px var(--surface-rim);
+}
+
+@utility shadow-overlay {
+  --surface-tint: transparent;
+
+  box-shadow:
+    var(--elevation-lip),
+    inset 0 0 0 1px var(--surface-rim),
+    inset 0 0 0 9999px var(--surface-tint),
+    var(--elevation-overlay);
+}
+
+/* Interaction states for a surface that already has an opaque fill.
+ *
+ * A `hover:bg-fill-subtle` on such a surface *replaces* its `background-color`,
+ * so the rung composites over the parent instead of over the surface. Measured
+ * on `bg-muted`, that lands 3 levels darker in dark and 5 lighter in light — the
+ * hover inverts across themes. Layered, the same rung is +9/-9 from whatever it
+ * sits on, in both themes, whatever the resting rung.
+ *
+ * The layer is a pseudo-element rather than a `background-image` so it can still
+ * transition, and it stops a pixel short of the edge to leave the inset rim of
+ * `shadow-raised` visible. `isolation` is what keeps a negative z-index from
+ * escaping to an ancestor's stacking context.
+ *
+ * It does not touch the rim: `--surface-rim` inherits, so brightening it here
+ * would repaint the rim of every raised surface nested inside the hovered one.
+ *
+ * This and `--surface-tint` are the same rung by two mechanisms, and both stay:
+ * the pseudo-element transitions its colour and stops a pixel short of the rim,
+ * which is what a surface with content inside it wants; the tint paints edge to
+ * edge, cannot transition (a box-shadow list transitions as a whole, so the rim
+ * and the drops would animate with it), and is the only option for an element
+ * that cannot own a child — an `<input>`. Reach for this one unless the element
+ * is a bare control. */
+@utility state-layer {
+  position: relative;
+  isolation: isolate;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    z-index: -1;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: background-color var(--duration-fast) var(--ease-out-custom);
+  }
+
+  &:not(:disabled, [aria-disabled='true']) {
+    &:hover::before,
+    &:focus-visible::before {
+      background-color: var(--fill-subtle);
+    }
+
+    &:active::before {
+      background-color: var(--fill);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before {
+      transition: none;
+    }
+  }
+}
+
+/* Pulls a ScrollArea's scrollbar ends in from a rounded container's corners, keyed to the same
+   radius steps as `rounded-*`: pair `rounded-xl` with `scrollbar-inset-xl`. At 0.7 of the radius
+   the corner's curve no longer cuts into the 6px bar. An arbitrary radius takes an arbitrary
+   inset, `scrollbar-inset-[22px]`. ScrollBar reads the variable and defaults to 0. */
+@utility scrollbar-inset-* {
+  --scroll-area-scrollbar-inset: calc(--value(--radius-*, [length]) * 0.7);
+}
+
+@utility rounded-studio-frame {
+  border-radius: var(--studio-frame-radius, 1.5rem);
+}
+
+@utility rounded-studio-panel {
+  border-radius: max(0px, calc(var(--studio-frame-radius, 1.5rem) - var(--studio-frame-inset, 0.5rem)));
+}
+
+@utility rounded-tr-studio-panel {
+  border-top-right-radius: max(0px, calc(var(--studio-frame-radius, 1.5rem) - var(--studio-frame-inset, 0.5rem)));
+}
+
+@layer utilities {
+  /* Syntax roles from `syntaxHighlighter`, shared by the <Code> viewer and every CodeMirror editor. */
+  .syntax-comment {
+    color: var(--placeholder);
+  }
+
+  .syntax-string {
+    color: var(--syntax-string);
+  }
+
+  .syntax-literal {
+    color: var(--syntax-literal);
+  }
+
+  .syntax-keyword {
+    color: var(--syntax-keyword);
+  }
+
+  .syntax-name {
+    color: var(--syntax-name);
+  }
+
+  .syntax-definition {
+    color: var(--syntax-link);
+  }
+
+  .syntax-link {
+    color: var(--syntax-link);
+    text-decoration: underline;
+  }
+
+  .syntax-heading {
+    color: var(--syntax-link);
+    font-weight: bold;
+  }
+
+  .syntax-emphasis {
+    color: var(--foreground);
+    font-style: italic;
+  }
+
+  .syntax-strong {
+    color: var(--foreground);
+    font-weight: bold;
+  }
+
+  .syntax-strike {
+    text-decoration: line-through;
+  }
+
+  .syntax-invalid {
+    color: var(--destructive-foreground);
+  }
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  :where(code, samp, pre, .font-mono) {
+    font-size-adjust: var(--font-mono-size-adjust, none);
+  }
+
+  kbd {
+    font-size-adjust: none;
+  }
+
+  /* Every lucide icon draws its line from one token instead of lucide's default
+     `stroke-width="2"`. The value is in the icon's 24-unit grid, so the line still
+     thickens a little as the icon grows. Components size icons; none sets a stroke. */
+  :where(svg.lucide) {
+    stroke-width: var(--icon-stroke-width);
+  }
+
+  :focus-visible {
+    outline: 1px solid var(--border-focus);
+    outline-offset: 0;
+  }
+
+  body {
+    background-color: var(--sidebar);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-strong) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--border-strong);
+    border-radius: 9999px;
+    border: 3px solid transparent;
+    background-clip: padding-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--border-focus);
+  }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+@utility wrap-break-word {
+  overflow-wrap: break-word;
+}
+
+@utility time-input {
+  &::-webkit-calendar-picker-indicator {
+    @apply cursor-pointer;
+    background: url('/icons/clock.svg') no-repeat center;
+    background-size: 1em 1em;
+    filter: invert(50%);
+  }
+}
+
+.thread-viewport > [data-radix-scroll-area-content] {
+  @apply flex flex-col items-center self-stretch bg-inherit;
+}
+
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}
+
+.unset-position {
+  position: unset;
+}
+
+.react-flow__controls-button {
+  --xy-controls-button-color: var(--foreground);
+  --xy-controls-button-color-hover: var(--foreground);
+  --xy-controls-button-background-color: var(--surface-panel);
+  --xy-controls-button-background-color-hover: var(--gray-2);
+  --xy-controls-button-border-color: transparent;
+}
+
+/* Skeleton highlight: enters off the left edge and leaves off the right before it loops. It
+   moves `translate` (what Tailwind v4's translate utilities set), so it doesn't stack on the
+   skeleton's own `-translate-x-full` start position. */
+@keyframes shimmer {
+  from {
+    translate: -100% 0;
+  }
+
+  to {
+    translate: 100% 0;
+  }
+}
+
+/* Chart ghost sweep, in SVG user units (a 0-100 viewBox): a 40-unit band of light from off the
+   left edge to off the right, on the same 2s loop as the skeleton shimmer. */
+@keyframes chart-ghost-sweep {
+  from {
+    transform: translateX(-40px);
+  }
+
+  to {
+    transform: translateX(140px);
+  }
+}
+
+@keyframes click-ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.animate-click-ripple {
+  animation: click-ripple 300ms ease-out forwards;
+}
+
+@keyframes fade-row-highlight {
+  0% {
+    background-color: var(--fill-hover);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
+.animate-row-highlight {
+  animation: fade-row-highlight 2000ms ease-out forwards;
+}
+
+/* Sort arrows are "drawn" in their pointing direction: asc reveals from the
+   bottom up, desc from the top down. */
+@keyframes sort-arrow-reveal-up {
+  0% {
+    clip-path: inset(100% 0 0 0);
+    transform: translateY(20%);
+  }
+
+  100% {
+    clip-path: inset(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes sort-arrow-reveal-down {
+  0% {
+    clip-path: inset(0 0 100% 0);
+    transform: translateY(-20%);
+  }
+
+  100% {
+    clip-path: inset(0);
+    transform: translateY(0);
+  }
+}
+
+.animate-sort-arrow-up {
+  animation: sort-arrow-reveal-up 200ms var(--ease-out-custom) both;
+}
+
+.animate-sort-arrow-down {
+  animation: sort-arrow-reveal-down 200ms var(--ease-out-custom) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-sort-arrow-up,
+  .animate-sort-arrow-down {
+    animation: none;
+  }
+}

package/dist/{Avatar-98bsFrSV.js → Avatar-BjaG9NU_.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext, useState, Children } from 'react';
-import { A as AvatarSizeContext, a as avatarSizeClasses, b as avatarIconClasses, c as avatarTextClasses } from './avatar-size-CNR0U-LW.js';
+import { A as AvatarSizeContext, a as avatarSizeClasses, b as avatarIconClasses, c as avatarTextClasses } from './avatar-size-BXzy28Bx.js';
 import { c as cn } from './cn-CQUhN5Jx.js';
 import { T as Txt } from './Txt-BtIGLRk1.js';
 import { controlStateColorTransition } from './primitives/transitions.es.js';
@@ -15,6 +15,7 @@ const toneClasses = {
 };
 const badgeSizeClasses = {
   xs: "min-h-1.5 min-w-1.5 [&>svg]:hidden",
+  inline: "min-h-1.5 min-w-1.5 [&>svg]:hidden",
   sm: "min-h-2 min-w-2 [&>svg]:hidden",
   md: "min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs",
   lg: "min-h-3 min-w-3 [&>svg]:size-icon-xs",
@@ -116,15 +117,16 @@ function AvatarFallback({ className, ...props }) {
 }
 
 const groupSizeClasses = {
-  xs: "[--avatar-group-size:var(--spacing-icon-xs)]",
-  sm: "[--avatar-group-size:var(--spacing-avatar-sm)]",
-  md: "[--avatar-group-size:var(--spacing-avatar-md)]",
-  lg: "[--avatar-group-size:var(--spacing-avatar-lg)]",
-  control: "[--avatar-group-size:var(--spacing-control-md)]"
+  xs: "[--avatar-group-size:var(--spacing-icon-xs)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]",
+  inline: "[--avatar-group-size:var(--spacing-icon-md)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]",
+  sm: "[--avatar-group-size:var(--spacing-avatar-sm)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+  md: "[--avatar-group-size:var(--spacing-avatar-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+  lg: "[--avatar-group-size:var(--spacing-avatar-lg)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+  control: "[--avatar-group-size:var(--spacing-control-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]"
 };
 const overlapClasses = [
   "*:not-first:ml-[calc(var(--avatar-group-size)/-4)]",
-  "*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+--spacing(0.5)),black_calc(var(--avatar-group-size)/2+--spacing(0.75)))]"
+  "*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)),black_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)+var(--avatar-group-edge)))]"
 ];
 function AvatarGroup({ size = "sm", className, children, ...props }) {
   const items = Children.toArray(children);
@@ -179,4 +181,4 @@ const Avatar = Object.assign(AvatarElement, {
 });
 
 export { Avatar as A };
-//# sourceMappingURL=Avatar-98bsFrSV.js.map
+//# sourceMappingURL=Avatar-BjaG9NU_.js.map

package/dist/Avatar-BjaG9NU_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-BjaG9NU_.js","sources":["../src/ds/components/Avatar/avatar-badge.tsx","../src/ds/components/Avatar/avatar-named.tsx","../src/ds/components/Avatar/avatar-root.tsx","../src/ds/components/Avatar/avatar-element.tsx","../src/ds/components/Avatar/avatar-fallback.tsx","../src/ds/components/Avatar/avatar-group.tsx","../src/ds/components/Avatar/avatar-group-count.tsx","../src/ds/components/Avatar/avatar-image.tsx","../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { AvatarSizeContext } from './avatar-size';\nimport type { AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarBadgeTone = 'neutral' | 'success' | 'warning' | 'destructive' | 'info';\n\nexport type AvatarBadgeProps = ComponentProps<'span'> & {\n  tone?: AvatarBadgeTone;\n};\n\nconst toneClasses: Record<AvatarBadgeTone, string> = {\n  neutral: 'bg-fill-inverse text-background',\n  success: 'bg-success-indicator text-background',\n  warning: 'bg-warning-indicator text-background',\n  destructive: 'bg-destructive-indicator text-background',\n  info: 'bg-info-indicator text-background',\n};\n\nconst badgeSizeClasses: Record<AvatarSize, string> = {\n  xs: 'min-h-1.5 min-w-1.5 [&>svg]:hidden',\n  inline: 'min-h-1.5 min-w-1.5 [&>svg]:hidden',\n  sm: 'min-h-2 min-w-2 [&>svg]:hidden',\n  md: 'min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs',\n  lg: 'min-h-3 min-w-3 [&>svg]:size-icon-xs',\n  control: 'min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs',\n};\n\nexport function AvatarBadge({ tone, className, children, ...props }: AvatarBadgeProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar-badge\"\n      className={cn(\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 ring-card select-none',\n        '[&>[data-slot=avatar]]:border-0 [&>[data-slot=avatar]]:after:hidden',\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:shadow-inset',\n        tone ? toneClasses[tone] : 'bg-card text-foreground',\n        badgeSizeClasses[size],\n        className,\n      )}\n    >\n      <AvatarSizeContext.Provider value=\"xs\">{children}</AvatarSizeContext.Provider>\n    </span>\n  );\n}\n","import { useContext, useState } from 'react';\n\nimport { Txt } from '../Txt/Txt';\nimport { AvatarSizeContext, avatarSizeClasses } from './avatar-size';\nimport type { AvatarSize } from './avatar-size';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarProps = {\n  src?: string;\n  name: string;\n  size?: AvatarSize;\n  interactive?: boolean;\n  color?: string;\n  textColor?: string;\n};\n\nexport function AvatarNamed({ src, name, size, interactive = false, color, textColor }: AvatarProps) {\n  const contextSize = useContext(AvatarSizeContext);\n  const [failedSrc, setFailedSrc] = useState<string>();\n  const resolvedSize = size ?? contextSize ?? 'sm';\n  const initial = name.trim()[0]?.toUpperCase() ?? 'A';\n  const showImage = Boolean(src) && failedSrc !== src;\n  const showFallbackTint = !showImage && Boolean(color);\n\n  return (\n    <div\n      data-slot=\"avatar\"\n      data-size={resolvedSize}\n      className={cn(\n        avatarSizeClasses[resolvedSize],\n        'flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border',\n        !showFallbackTint && 'bg-fill',\n        controlStateColorTransition,\n        interactive && 'cursor-pointer hover:border-border-hover',\n      )}\n      style={showFallbackTint ? { backgroundColor: color } : undefined}\n    >\n      {showImage ? (\n        <img src={src} alt={name} className=\"size-full object-cover\" onError={() => setFailedSrc(src)} />\n      ) : (\n        <Txt\n          variant={resolvedSize === 'xs' ? 'meta' : 'body'}\n          tone={showFallbackTint ? undefined : 'muted'}\n          className=\"text-center\"\n          style={showFallbackTint && textColor ? { color: textColor } : undefined}\n        >\n          {initial}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { useContext } from 'react';\n\nimport { AvatarSizeContext, avatarSizeClasses } from './avatar-size';\nimport type { AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarRootProps = Omit<BaseAvatar.Root.Props, 'className'> & {\n  size?: AvatarSize;\n  className?: string;\n  name?: never;\n};\n\nexport function AvatarRoot({ size, className, ...props }: AvatarRootProps) {\n  const contextSize = useContext(AvatarSizeContext);\n  const resolvedSize = size ?? contextSize ?? 'sm';\n\n  return (\n    <AvatarSizeContext.Provider value={resolvedSize}>\n      <BaseAvatar.Root\n        {...props}\n        data-slot=\"avatar\"\n        data-size={resolvedSize}\n        className={cn(\n          'relative inline-flex shrink-0 rounded-full select-none',\n          'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border',\n          avatarSizeClasses[resolvedSize],\n          className,\n        )}\n      />\n    </AvatarSizeContext.Provider>\n  );\n}\n","import { AvatarNamed } from './avatar-named';\nimport type { AvatarProps } from './avatar-named';\nimport { AvatarRoot } from './avatar-root';\nimport type { AvatarRootProps } from './avatar-root';\n\nexport function AvatarElement(props: AvatarProps | AvatarRootProps) {\n  if (props.name === undefined) return <AvatarRoot {...props} />;\n  return <AvatarNamed {...props} />;\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { useContext } from 'react';\n\nimport { AvatarSizeContext, avatarIconClasses, avatarTextClasses } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarFallbackProps = Omit<BaseAvatar.Fallback.Props, 'className'> & {\n  className?: string;\n};\n\nexport function AvatarFallback({ className, ...props }: AvatarFallbackProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <BaseAvatar.Fallback\n      {...props}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground',\n        avatarTextClasses[size],\n        avatarIconClasses[size],\n        className,\n      )}\n    />\n  );\n}\n","import { Children } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { AvatarSizeContext } from './avatar-size';\nimport type { AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarGroupProps = ComponentProps<'div'> & {\n  size?: AvatarSize;\n};\n\n// Small avatars get a thinner gap around the avatar on top, so it doesn't\n// swallow the avatar behind.\nconst groupSizeClasses: Record<AvatarSize, string> = {\n  xs: '[--avatar-group-size:var(--spacing-icon-xs)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]',\n  inline: '[--avatar-group-size:var(--spacing-icon-md)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]',\n  sm: '[--avatar-group-size:var(--spacing-avatar-sm)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n  md: '[--avatar-group-size:var(--spacing-avatar-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n  lg: '[--avatar-group-size:var(--spacing-avatar-lg)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n  control:\n    '[--avatar-group-size:var(--spacing-control-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n};\n\nconst overlapClasses = [\n  '*:not-first:ml-[calc(var(--avatar-group-size)/-4)]',\n  '*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)),black_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)+var(--avatar-group-edge)))]',\n];\n\nexport function AvatarGroup({ size = 'sm', className, children, ...props }: AvatarGroupProps) {\n  const items = Children.toArray(children);\n\n  return (\n    <AvatarSizeContext.Provider value={size}>\n      <div\n        {...props}\n        data-slot=\"avatar-group\"\n        className={cn('flex items-center', groupSizeClasses[size], overlapClasses, className)}\n      >\n        {items.map((item, index) => (\n          <div key={index} data-slot=\"avatar-group-item\" className=\"flex\" style={{ zIndex: items.length - index }}>\n            {item}\n          </div>\n        ))}\n      </div>\n    </AvatarSizeContext.Provider>\n  );\n}\n","import { useContext } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { AvatarSizeContext, avatarIconClasses, avatarSizeClasses, avatarTextClasses } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarGroupCountProps = ComponentProps<'div'>;\n\nexport function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <div\n      {...props}\n      data-slot=\"avatar-group-count\"\n      data-size={size}\n      className={cn(\n        'relative flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground tabular-nums',\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border',\n        avatarSizeClasses[size],\n        avatarTextClasses[size],\n        avatarIconClasses[size],\n        className,\n      )}\n    />\n  );\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\n\nimport { cn } from '@/lib/utils';\n\nexport type AvatarImageProps = Omit<BaseAvatar.Image.Props, 'className' | 'alt'> & {\n  alt: string;\n  className?: string;\n};\n\nexport function AvatarImage({ className, ...props }: AvatarImageProps) {\n  return (\n    <BaseAvatar.Image\n      {...props}\n      data-slot=\"avatar-image\"\n      className={cn('size-full rounded-full object-cover', className)}\n    />\n  );\n}\n","import { AvatarBadge } from './avatar-badge';\nimport { AvatarElement } from './avatar-element';\nimport { AvatarFallback } from './avatar-fallback';\nimport { AvatarGroup } from './avatar-group';\nimport { AvatarGroupCount } from './avatar-group-count';\nimport { AvatarImage } from './avatar-image';\n\nexport type { AvatarSize } from './avatar-size';\nexport type { AvatarProps } from './avatar-named';\nexport type { AvatarRootProps } from './avatar-root';\nexport type { AvatarImageProps } from './avatar-image';\nexport type { AvatarFallbackProps } from './avatar-fallback';\nexport type { AvatarBadgeProps, AvatarBadgeTone } from './avatar-badge';\nexport type { AvatarGroupProps } from './avatar-group';\nexport type { AvatarGroupCountProps } from './avatar-group-count';\n\nexport const Avatar = Object.assign(AvatarElement, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n  Badge: AvatarBadge,\n  Group: AvatarGroup,\n  GroupCount: AvatarGroupCount,\n});\n"],"names":["BaseAvatar"],"mappings":";;;;;;;;AAaA,MAAM,WAAA,GAA+C;AAAA,EACnD,OAAA,EAAS,iCAAA;AAAA,EACT,OAAA,EAAS,sCAAA;AAAA,EACT,OAAA,EAAS,sCAAA;AAAA,EACT,WAAA,EAAa,0CAAA;AAAA,EACb,IAAA,EAAM;AACR,CAAA;AAEA,MAAM,gBAAA,GAA+C;AAAA,EACnD,EAAA,EAAI,oCAAA;AAAA,EACJ,MAAA,EAAQ,oCAAA;AAAA,EACR,EAAA,EAAI,gCAAA;AAAA,EACJ,EAAA,EAAI,0CAAA;AAAA,EACJ,EAAA,EAAI,sCAAA;AAAA,EACJ,OAAA,EAAS;AACX,CAAA;AAEO,SAAS,YAAY,EAAE,IAAA,EAAM,WAAW,QAAA,EAAU,GAAG,OAAM,EAAqB;AACrF,EAAA,MAAM,IAAA,GAAO,UAAA,CAAW,iBAAiB,CAAA,IAAK,IAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,kHAAA;AAAA,QACA,qEAAA;AAAA,QACA,8FAAA;AAAA,QACA,IAAA,GAAO,WAAA,CAAY,IAAI,CAAA,GAAI,yBAAA;AAAA,QAC3B,iBAAiB,IAAI,CAAA;AAAA,QACrB;AAAA,OACF;AAAA,MAEA,8BAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAM,MAAM,QAAA,EAAS;AAAA;AAAA,GACnD;AAEJ;;AChCO,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,IAAA,EAAM,MAAM,WAAA,GAAc,KAAA,EAAO,KAAA,EAAO,SAAA,EAAU,EAAgB;AACnG,EAAA,MAAM,WAAA,GAAc,WAAW,iBAAiB,CAAA;AAChD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,EAAiB;AACnD,EAAA,MAAM,YAAA,GAAe,QAAQ,WAAA,IAAe,IAAA;AAC5C,EAAA,MAAM,UAAU,IAAA,CAAK,IAAA,GAAO,CAAC,CAAA,EAAG,aAAY,IAAK,GAAA;AACjD,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,GAAG,CAAA,IAAK,SAAA,KAAc,GAAA;AAChD,EAAA,MAAM,gBAAA,GAAmB,CAAC,SAAA,IAAa,OAAA,CAAQ,KAAK,CAAA;AAEpD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,WAAA,EAAW,YAAA;AAAA,MACX,SAAA,EAAW,EAAA;AAAA,QACT,kBAAkB,YAAY,CAAA;AAAA,QAC9B,6FAAA;AAAA,QACA,CAAC,gBAAA,IAAoB,SAAA;AAAA,QACrB,2BAAA;AAAA,QACA,WAAA,IAAe;AAAA,OACjB;AAAA,MACA,KAAA,EAAO,gBAAA,GAAmB,EAAE,eAAA,EAAiB,OAAM,GAAI,MAAA;AAAA,MAEtD,QAAA,EAAA,SAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,GAAA,EAAK,IAAA,EAAM,SAAA,EAAU,wBAAA,EAAyB,OAAA,EAAS,MAAM,YAAA,CAAa,GAAG,GAAG,CAAA,mBAE/F,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,YAAA,KAAiB,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,UAC1C,IAAA,EAAM,mBAAmB,MAAA,GAAY,OAAA;AAAA,UACrC,SAAA,EAAU,aAAA;AAAA,UACV,OAAO,gBAAA,IAAoB,SAAA,GAAY,EAAE,KAAA,EAAO,WAAU,GAAI,MAAA;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ;;ACvCO,SAAS,WAAW,EAAE,IAAA,EAAM,SAAA,EAAW,GAAG,OAAM,EAAoB;AACzE,EAAA,MAAM,WAAA,GAAc,WAAW,iBAAiB,CAAA;AAChD,EAAA,MAAM,YAAA,GAAe,QAAQ,WAAA,IAAe,IAAA;AAE5C,EAAA,uBACE,GAAA,CAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,OAAO,YAAA,EACjC,QAAA,kBAAA,GAAA;AAAA,IAACA,QAAA,CAAW,IAAA;AAAA,IAAX;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,QAAA;AAAA,MACV,WAAA,EAAW,YAAA;AAAA,MACX,SAAA,EAAW,EAAA;AAAA,QACT,wDAAA;AAAA,QACA,4GAAA;AAAA,QACA,kBAAkB,YAAY,CAAA;AAAA,QAC9B;AAAA;AACF;AAAA,GACF,EACF,CAAA;AAEJ;;AC3BO,SAAS,cAAc,KAAA,EAAsC;AAClE,EAAA,IAAI,MAAM,IAAA,KAAS,MAAA,yBAAkB,GAAA,CAAC,UAAA,EAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AAC5D,EAAA,uBAAO,GAAA,CAAC,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AACjC;;ACEO,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC3E,EAAA,MAAM,IAAA,GAAO,UAAA,CAAW,iBAAiB,CAAA,IAAK,IAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA,CAAW,QAAA;AAAA,IAAX;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,wGAAA;AAAA,QACA,kBAAkB,IAAI,CAAA;AAAA,QACtB,kBAAkB,IAAI,CAAA;AAAA,QACtB;AAAA;AACF;AAAA,GACF;AAEJ;;ACZA,MAAM,gBAAA,GAA+C;AAAA,EACnD,EAAA,EAAI,mGAAA;AAAA,EACJ,MAAA,EAAQ,mGAAA;AAAA,EACR,EAAA,EAAI,8GAAA;AAAA,EACJ,EAAA,EAAI,8GAAA;AAAA,EACJ,EAAA,EAAI,8GAAA;AAAA,EACJ,OAAA,EACE;AACJ,CAAA;AAEA,MAAM,cAAA,GAAiB;AAAA,EACrB,oDAAA;AAAA,EACA;AACF,CAAA;AAEO,SAAS,WAAA,CAAY,EAAE,IAAA,GAAO,IAAA,EAAM,WAAW,QAAA,EAAU,GAAG,OAAM,EAAqB;AAC5F,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AAEvC,EAAA,uBACE,GAAA,CAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,OAAO,IAAA,EACjC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,cAAA;AAAA,MACV,WAAW,EAAA,CAAG,mBAAA,EAAqB,iBAAiB,IAAI,CAAA,EAAG,gBAAgB,SAAS,CAAA;AAAA,MAEnF,QAAA,EAAA,KAAA,CAAM,IAAI,CAAC,IAAA,EAAM,0BAChB,GAAA,CAAC,KAAA,EAAA,EAAgB,aAAU,mBAAA,EAAoB,SAAA,EAAU,QAAO,KAAA,EAAO,EAAE,QAAQ,KAAA,CAAM,MAAA,GAAS,OAAM,EACnG,QAAA,EAAA,IAAA,EAAA,EADO,KAEV,CACD;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;ACtCO,SAAS,gBAAA,CAAiB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA0B;AAC/E,EAAA,MAAM,IAAA,GAAO,UAAA,CAAW,iBAAiB,CAAA,IAAK,IAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,oBAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA;AAAA,QACT,6GAAA;AAAA,QACA,4GAAA;AAAA,QACA,kBAAkB,IAAI,CAAA;AAAA,QACtB,kBAAkB,IAAI,CAAA;AAAA,QACtB,kBAAkB,IAAI,CAAA;AAAA,QACtB;AAAA;AACF;AAAA,GACF;AAEJ;;ACjBO,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAqB;AACrE,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA,CAAW,KAAA;AAAA,IAAX;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,qCAAA,EAAuC,SAAS;AAAA;AAAA,GAChE;AAEJ;;ACDO,MAAM,MAAA,GAAS,MAAA,CAAO,MAAA,CAAO,aAAA,EAAe;AAAA,EACjD,KAAA,EAAO,WAAA;AAAA,EACP,QAAA,EAAU,cAAA;AAAA,EACV,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,UAAA,EAAY;AACd,CAAC;;;;"}

package/dist/{Avatar-BCj8SvOb.cjs → Avatar-DM90rmwx.cjs}

@@ -2,7 +2,7 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const avatarSize = require('./avatar-size-DxStOo5A.cjs');
+const avatarSize = require('./avatar-size-DIFE4I8A.cjs');
 const utils_cn = require('./cn-DlOJCxrS.cjs');
 const Txt = require('./Txt-CIS2G5Jx.cjs');
 const primitives_transitions = require('./primitives/transitions.cjs.js');
@@ -17,6 +17,7 @@ const toneClasses = {
 };
 const badgeSizeClasses = {
   xs: "min-h-1.5 min-w-1.5 [&>svg]:hidden",
+  inline: "min-h-1.5 min-w-1.5 [&>svg]:hidden",
   sm: "min-h-2 min-w-2 [&>svg]:hidden",
   md: "min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs",
   lg: "min-h-3 min-w-3 [&>svg]:size-icon-xs",
@@ -118,15 +119,16 @@ function AvatarFallback({ className, ...props }) {
 }
 
 const groupSizeClasses = {
-  xs: "[--avatar-group-size:var(--spacing-icon-xs)]",
-  sm: "[--avatar-group-size:var(--spacing-avatar-sm)]",
-  md: "[--avatar-group-size:var(--spacing-avatar-md)]",
-  lg: "[--avatar-group-size:var(--spacing-avatar-lg)]",
-  control: "[--avatar-group-size:var(--spacing-control-md)]"
+  xs: "[--avatar-group-size:var(--spacing-icon-xs)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]",
+  inline: "[--avatar-group-size:var(--spacing-icon-md)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]",
+  sm: "[--avatar-group-size:var(--spacing-avatar-sm)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+  md: "[--avatar-group-size:var(--spacing-avatar-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+  lg: "[--avatar-group-size:var(--spacing-avatar-lg)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+  control: "[--avatar-group-size:var(--spacing-control-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]"
 };
 const overlapClasses = [
   "*:not-first:ml-[calc(var(--avatar-group-size)/-4)]",
-  "*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+--spacing(0.5)),black_calc(var(--avatar-group-size)/2+--spacing(0.75)))]"
+  "*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)),black_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)+var(--avatar-group-edge)))]"
 ];
 function AvatarGroup({ size = "sm", className, children, ...props }) {
   const items = React.Children.toArray(children);
@@ -181,4 +183,4 @@ const Avatar = Object.assign(AvatarElement, {
 });
 
 exports.Avatar = Avatar;
-//# sourceMappingURL=Avatar-BCj8SvOb.cjs.map
+//# sourceMappingURL=Avatar-DM90rmwx.cjs.map

package/dist/Avatar-DM90rmwx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-DM90rmwx.cjs","sources":["../src/ds/components/Avatar/avatar-badge.tsx","../src/ds/components/Avatar/avatar-named.tsx","../src/ds/components/Avatar/avatar-root.tsx","../src/ds/components/Avatar/avatar-element.tsx","../src/ds/components/Avatar/avatar-fallback.tsx","../src/ds/components/Avatar/avatar-group.tsx","../src/ds/components/Avatar/avatar-group-count.tsx","../src/ds/components/Avatar/avatar-image.tsx","../src/ds/components/Avatar/Avatar.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { AvatarSizeContext } from './avatar-size';\nimport type { AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarBadgeTone = 'neutral' | 'success' | 'warning' | 'destructive' | 'info';\n\nexport type AvatarBadgeProps = ComponentProps<'span'> & {\n  tone?: AvatarBadgeTone;\n};\n\nconst toneClasses: Record<AvatarBadgeTone, string> = {\n  neutral: 'bg-fill-inverse text-background',\n  success: 'bg-success-indicator text-background',\n  warning: 'bg-warning-indicator text-background',\n  destructive: 'bg-destructive-indicator text-background',\n  info: 'bg-info-indicator text-background',\n};\n\nconst badgeSizeClasses: Record<AvatarSize, string> = {\n  xs: 'min-h-1.5 min-w-1.5 [&>svg]:hidden',\n  inline: 'min-h-1.5 min-w-1.5 [&>svg]:hidden',\n  sm: 'min-h-2 min-w-2 [&>svg]:hidden',\n  md: 'min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs',\n  lg: 'min-h-3 min-w-3 [&>svg]:size-icon-xs',\n  control: 'min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs',\n};\n\nexport function AvatarBadge({ tone, className, children, ...props }: AvatarBadgeProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar-badge\"\n      className={cn(\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 ring-card select-none',\n        '[&>[data-slot=avatar]]:border-0 [&>[data-slot=avatar]]:after:hidden',\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:shadow-inset',\n        tone ? toneClasses[tone] : 'bg-card text-foreground',\n        badgeSizeClasses[size],\n        className,\n      )}\n    >\n      <AvatarSizeContext.Provider value=\"xs\">{children}</AvatarSizeContext.Provider>\n    </span>\n  );\n}\n","import { useContext, useState } from 'react';\n\nimport { Txt } from '../Txt/Txt';\nimport { AvatarSizeContext, avatarSizeClasses } from './avatar-size';\nimport type { AvatarSize } from './avatar-size';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarProps = {\n  src?: string;\n  name: string;\n  size?: AvatarSize;\n  interactive?: boolean;\n  color?: string;\n  textColor?: string;\n};\n\nexport function AvatarNamed({ src, name, size, interactive = false, color, textColor }: AvatarProps) {\n  const contextSize = useContext(AvatarSizeContext);\n  const [failedSrc, setFailedSrc] = useState<string>();\n  const resolvedSize = size ?? contextSize ?? 'sm';\n  const initial = name.trim()[0]?.toUpperCase() ?? 'A';\n  const showImage = Boolean(src) && failedSrc !== src;\n  const showFallbackTint = !showImage && Boolean(color);\n\n  return (\n    <div\n      data-slot=\"avatar\"\n      data-size={resolvedSize}\n      className={cn(\n        avatarSizeClasses[resolvedSize],\n        'flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border',\n        !showFallbackTint && 'bg-fill',\n        controlStateColorTransition,\n        interactive && 'cursor-pointer hover:border-border-hover',\n      )}\n      style={showFallbackTint ? { backgroundColor: color } : undefined}\n    >\n      {showImage ? (\n        <img src={src} alt={name} className=\"size-full object-cover\" onError={() => setFailedSrc(src)} />\n      ) : (\n        <Txt\n          variant={resolvedSize === 'xs' ? 'meta' : 'body'}\n          tone={showFallbackTint ? undefined : 'muted'}\n          className=\"text-center\"\n          style={showFallbackTint && textColor ? { color: textColor } : undefined}\n        >\n          {initial}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { useContext } from 'react';\n\nimport { AvatarSizeContext, avatarSizeClasses } from './avatar-size';\nimport type { AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarRootProps = Omit<BaseAvatar.Root.Props, 'className'> & {\n  size?: AvatarSize;\n  className?: string;\n  name?: never;\n};\n\nexport function AvatarRoot({ size, className, ...props }: AvatarRootProps) {\n  const contextSize = useContext(AvatarSizeContext);\n  const resolvedSize = size ?? contextSize ?? 'sm';\n\n  return (\n    <AvatarSizeContext.Provider value={resolvedSize}>\n      <BaseAvatar.Root\n        {...props}\n        data-slot=\"avatar\"\n        data-size={resolvedSize}\n        className={cn(\n          'relative inline-flex shrink-0 rounded-full select-none',\n          'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border',\n          avatarSizeClasses[resolvedSize],\n          className,\n        )}\n      />\n    </AvatarSizeContext.Provider>\n  );\n}\n","import { AvatarNamed } from './avatar-named';\nimport type { AvatarProps } from './avatar-named';\nimport { AvatarRoot } from './avatar-root';\nimport type { AvatarRootProps } from './avatar-root';\n\nexport function AvatarElement(props: AvatarProps | AvatarRootProps) {\n  if (props.name === undefined) return <AvatarRoot {...props} />;\n  return <AvatarNamed {...props} />;\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { useContext } from 'react';\n\nimport { AvatarSizeContext, avatarIconClasses, avatarTextClasses } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarFallbackProps = Omit<BaseAvatar.Fallback.Props, 'className'> & {\n  className?: string;\n};\n\nexport function AvatarFallback({ className, ...props }: AvatarFallbackProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <BaseAvatar.Fallback\n      {...props}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground',\n        avatarTextClasses[size],\n        avatarIconClasses[size],\n        className,\n      )}\n    />\n  );\n}\n","import { Children } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { AvatarSizeContext } from './avatar-size';\nimport type { AvatarSize } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarGroupProps = ComponentProps<'div'> & {\n  size?: AvatarSize;\n};\n\n// Small avatars get a thinner gap around the avatar on top, so it doesn't\n// swallow the avatar behind.\nconst groupSizeClasses: Record<AvatarSize, string> = {\n  xs: '[--avatar-group-size:var(--spacing-icon-xs)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]',\n  inline: '[--avatar-group-size:var(--spacing-icon-md)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]',\n  sm: '[--avatar-group-size:var(--spacing-avatar-sm)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n  md: '[--avatar-group-size:var(--spacing-avatar-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n  lg: '[--avatar-group-size:var(--spacing-avatar-lg)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n  control:\n    '[--avatar-group-size:var(--spacing-control-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]',\n};\n\nconst overlapClasses = [\n  '*:not-first:ml-[calc(var(--avatar-group-size)/-4)]',\n  '*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)),black_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)+var(--avatar-group-edge)))]',\n];\n\nexport function AvatarGroup({ size = 'sm', className, children, ...props }: AvatarGroupProps) {\n  const items = Children.toArray(children);\n\n  return (\n    <AvatarSizeContext.Provider value={size}>\n      <div\n        {...props}\n        data-slot=\"avatar-group\"\n        className={cn('flex items-center', groupSizeClasses[size], overlapClasses, className)}\n      >\n        {items.map((item, index) => (\n          <div key={index} data-slot=\"avatar-group-item\" className=\"flex\" style={{ zIndex: items.length - index }}>\n            {item}\n          </div>\n        ))}\n      </div>\n    </AvatarSizeContext.Provider>\n  );\n}\n","import { useContext } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { AvatarSizeContext, avatarIconClasses, avatarSizeClasses, avatarTextClasses } from './avatar-size';\nimport { cn } from '@/lib/utils';\n\nexport type AvatarGroupCountProps = ComponentProps<'div'>;\n\nexport function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps) {\n  const size = useContext(AvatarSizeContext) ?? 'sm';\n\n  return (\n    <div\n      {...props}\n      data-slot=\"avatar-group-count\"\n      data-size={size}\n      className={cn(\n        'relative flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground tabular-nums',\n        'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border',\n        avatarSizeClasses[size],\n        avatarTextClasses[size],\n        avatarIconClasses[size],\n        className,\n      )}\n    />\n  );\n}\n","import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\n\nimport { cn } from '@/lib/utils';\n\nexport type AvatarImageProps = Omit<BaseAvatar.Image.Props, 'className' | 'alt'> & {\n  alt: string;\n  className?: string;\n};\n\nexport function AvatarImage({ className, ...props }: AvatarImageProps) {\n  return (\n    <BaseAvatar.Image\n      {...props}\n      data-slot=\"avatar-image\"\n      className={cn('size-full rounded-full object-cover', className)}\n    />\n  );\n}\n","import { AvatarBadge } from './avatar-badge';\nimport { AvatarElement } from './avatar-element';\nimport { AvatarFallback } from './avatar-fallback';\nimport { AvatarGroup } from './avatar-group';\nimport { AvatarGroupCount } from './avatar-group-count';\nimport { AvatarImage } from './avatar-image';\n\nexport type { AvatarSize } from './avatar-size';\nexport type { AvatarProps } from './avatar-named';\nexport type { AvatarRootProps } from './avatar-root';\nexport type { AvatarImageProps } from './avatar-image';\nexport type { AvatarFallbackProps } from './avatar-fallback';\nexport type { AvatarBadgeProps, AvatarBadgeTone } from './avatar-badge';\nexport type { AvatarGroupProps } from './avatar-group';\nexport type { AvatarGroupCountProps } from './avatar-group-count';\n\nexport const Avatar = Object.assign(AvatarElement, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n  Badge: AvatarBadge,\n  Group: AvatarGroup,\n  GroupCount: AvatarGroupCount,\n});\n"],"names":["useContext","AvatarSizeContext","jsx","cn","useState","avatarSizeClasses","controlStateColorTransition","Txt","BaseAvatar","avatarTextClasses","avatarIconClasses","Children"],"mappings":"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"}