@hanzo/ui 8.27.90 → 8.28.0

package/dist/backends/gui/avatar.d.ts

@@ -1,15 +1,57 @@
 /**
- * Avatar — circular image with a text fallback.
+ * Avatar — an image with an initial or an icon behind it.
  *
  * @hanzogui/avatar owns the load/error state machine and the fallback delay, so
  * this only names the three parts and dresses them in tokens.
+ *
+ * Two looks, one component. With no `size`, it is the account avatar every
+ * Hanzo surface already draws: a 32px circle, its fallback on the edge rung.
+ * With a `size` it is a RECORD avatar (re-expressed from twenty-ui's Avatar,
+ * MIT, see NOTICE): xs 12 · sm 14 · md 16 · lg 24 · xl 40, square by default
+ * (2px), rounded (4px) or a circle, and its initial drawn in the record's own
+ * hue — twenty-ui's string hash over `colorSeed` (a record id, so a rename keeps
+ * the colour) or `name`, the hue's step 12 on step 4 (soft) or on step 5 inside
+ * a step 6 edge (outline). Given `src` or `name` directly it draws its own
+ * image and fallback; given children it is the compound it always was.
  */
 import { Avatar as GuiAvatar } from '@hanzo/gui';
-import type { ComponentProps } from 'react';
-export type AvatarProps = ComponentProps<typeof GuiAvatar>;
+import { type ComponentProps, type ReactNode } from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'square' | 'rounded' | 'circle';
+type GuiSize = ComponentProps<typeof GuiAvatar>['size'];
+export type AvatarProps = Omit<ComponentProps<typeof GuiAvatar>, 'size'> & {
+    /**
+     * A record size (xs…xl), or — as before the record sizes — any box gui's
+     * Avatar takes (`size={64}`), which keeps the circular account look. Unset,
+     * the 32px account avatar.
+     */
+    size?: AvatarSize | GuiSize;
+    /** Square (default for a record size), rounded, or circle (the default with no size). */
+    shape?: AvatarShape;
+    /** The image. With `name`, the avatar draws its own image and fallback. */
+    src?: string | null;
+    /** Whose avatar: its first character is the initial, and it seeds the colour. */
+    name?: string | null;
+    /** What the colour is derived from, when it should outlive the name (a record id). */
+    colorSeed?: string;
+    /** An icon in place of the initial; the avatar then takes its parent's ground. */
+    icon?: ReactNode;
+    /** `outline` draws the hue's edge around a lighter fill. */
+    variant?: 'soft' | 'outline';
+    /** A ground-coloured halo that separates stacked avatars. */
+    ring?: boolean;
+    /** Breathe while something about it is pending. */
+    pulsing?: boolean;
+    /** Makes the avatar a button; it gains a halo under the pointer. */
+    onPress?: () => void;
+    /** The image's accessible description. */
+    alt?: string;
+};
 export type AvatarImageProps = ComponentProps<typeof GuiAvatar.Image>;
 export type AvatarFallbackProps = ComponentProps<typeof GuiAvatar.Fallback>;
-declare const Avatar: (props: AvatarProps) => import("react").JSX.Element;
+/** The first character of the trimmed name, uppercased; `-` with none. */
+export declare const initialOf: (name?: string | null) => string;
+declare const Avatar: ({ size, shape, src, name, colorSeed, icon, variant, ring, pulsing, onPress, alt, children, style, ...props }: AvatarProps) => import("react").JSX.Element;
 declare const AvatarImage: (props: AvatarImageProps) => import("react").JSX.Element;
 /** Bare text needs a Text host to render on native; elements pass through. */
 declare const AvatarFallback: ({ children, ...props }: AvatarFallbackProps) => import("react").JSX.Element;

package/dist/backends/gui/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/avatar.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAe,MAAM,YAAY,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAC1D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAA;AACrE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAA;AAE3E,QAAA,MAAM,MAAM,UAAW,WAAW,gCAEjC,CAAA;AAED,QAAA,MAAM,WAAW,UAAW,gBAAgB,gCAE3C,CAAA;AAED,8EAA8E;AAC9E,QAAA,MAAM,cAAc,2BAA4B,mBAAmB,gCAgBlE,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/avatar.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAe,MAAM,YAAY,CAAA;AAE7D,OAAO,EAAgC,KAAK,cAAc,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAO5G,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACzD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;AAiBzD,KAAK,OAAO,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACzE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;IAC3B,yFAAyF;IACzF,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,sFAAsF;IACtF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kFAAkF;IAClF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AACD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAA;AACrE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAA;AAE3E,0EAA0E;AAC1E,eAAO,MAAM,SAAS,UAAW,MAAM,GAAG,IAAI,KAAG,MAGhD,CAAA;AAED,QAAA,MAAM,MAAM,iHAeT,WAAW,gCA0Db,CAAA;AAED,QAAA,MAAM,WAAW,UAAW,gBAAgB,gCAE3C,CAAA;AAED,8EAA8E;AAC9E,QAAA,MAAM,cAAc,2BAA4B,mBAAmB,gCAgBlE,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}

package/dist/backends/gui/avatar.js

@@ -1,14 +1,63 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Avatar — circular image with a text fallback.
+ * Avatar — an image with an initial or an icon behind it.
  *
  * @hanzogui/avatar owns the load/error state machine and the fallback delay, so
  * this only names the three parts and dresses them in tokens.
+ *
+ * Two looks, one component. With no `size`, it is the account avatar every
+ * Hanzo surface already draws: a 32px circle, its fallback on the edge rung.
+ * With a `size` it is a RECORD avatar (re-expressed from twenty-ui's Avatar,
+ * MIT, see NOTICE): xs 12 · sm 14 · md 16 · lg 24 · xl 40, square by default
+ * (2px), rounded (4px) or a circle, and its initial drawn in the record's own
+ * hue — twenty-ui's string hash over `colorSeed` (a record id, so a rename keeps
+ * the colour) or `name`, the hue's step 12 on step 4 (soft) or on step 5 inside
+ * a step 6 edge (outline). Given `src` or `name` directly it draws its own
+ * image and fallback; given children it is the compound it always was.
  */
 import { Avatar as GuiAvatar, SizableText } from '@hanzo/gui';
+import { hueOf } from '@hanzo/tokens/data';
+import { cloneElement, isValidElement } from 'react';
+import { useTone } from './hue.js';
+import { press, RING } from './press.js';
 const SIZE = 32;
-const Avatar = (props) => (_jsx(GuiAvatar, { "data-slot": "avatar", circular: true, size: SIZE, shrink: 0, overflow: "hidden", ...props }));
+/**
+ * The record sizes: box, and the initial's rung. xs and sm sit on Hanzo's text
+ * floor, 12px (design's --text-floor): twenty-ui draws 8 and 10px initials there,
+ * which Hanzo does not render. The box clips, so the glyph never spills.
+ */
+const RECORD = {
+    xs: { box: 12, font: '$1' },
+    sm: { box: 14, font: '$1' },
+    md: { box: 16, font: '$1' },
+    lg: { box: 24, font: '$2' },
+    xl: { box: 40, font: '$4' },
+};
+const RADIUS = { square: '$2xs', rounded: '$xs', circle: '$10' };
+/** The first character of the trimmed name, uppercased; `-` with none. */
+export const initialOf = (name) => {
+    const first = [...(name ?? '').trim()][0];
+    return first ? first.toLocaleUpperCase() : '-';
+};
+const Avatar = ({ size, shape, src, name, colorSeed, icon, variant = 'soft', ring = false, pulsing = false, onPress, alt, children, style, ...props }) => {
+    const record = typeof size === 'string' && size in RECORD ? RECORD[size] : null;
+    // A box gui's Avatar takes directly: the account look at that size.
+    const box = record?.box ?? (size != null && !record ? size : SIZE);
+    const corner = RADIUS[shape ?? (record ? 'square' : 'circle')];
+    const seed = colorSeed ?? name ?? '';
+    const { style: hueStyle, tone } = useTone(hueOf(seed), [4, 5, 6, 12]);
+    const own = children == null && (src != null || name != null || icon != null);
+    const trimmed = (name ?? '').trim();
+    const fallback = own ? (_jsx(AvatarFallback, { bg: icon ? 'transparent' : trimmed ? tone(variant === 'outline' ? 5 : 4) : '$hover', ...(variant === 'outline' && trimmed && !icon ? { borderWidth: 1, borderColor: tone(6) } : null), rounded: corner, children: icon ? (isValidElement(icon) && icon.props.size == null
+            ? cloneElement(icon, { size: box })
+            : icon) : (_jsx(SizableText, { fontSize: (record?.font ?? '$2'), lineHeight: box, fontWeight: "500", color: trimmed ? tone(12) : '$hint', select: "none", children: initialOf(name) })) })) : null;
+    return (_jsxs(GuiAvatar, { "data-slot": "avatar", ...(record ? { 'data-size': size } : null), ...(onPress ? press(onPress) : null), circular: corner === '$10', size: box, ...(record || shape ? { rounded: corner } : null), shrink: 0, overflow: "hidden", ...(onPress ? { cursor: 'pointer', hoverStyle: { outlineColor: '$hover', outlineWidth: 4, outlineStyle: 'solid' }, focusVisibleStyle: RING } : null), ...(pulsing ? { 'data-motion': 'pulse' } : null), style: {
+            ...(own && trimmed ? hueStyle : null),
+            ...(ring ? { boxShadow: '0 0 0 1px var(--border), 0 0 0 3px var(--background)' } : null),
+            ...style,
+        }, ...props, children: [own && src ? _jsx(AvatarImage, { src: src, ...(alt ? { alt } : null) }) : null, fallback, children] }));
+};
 const AvatarImage = (props) => (_jsx(GuiAvatar.Image, { "data-slot": "avatar-image", width: "100%", height: "100%", ...props }));
 /** Bare text needs a Text host to render on native; elements pass through. */
 const AvatarFallback = ({ children, ...props }) => (_jsx(GuiAvatar.Fallback, { "data-slot": "avatar-fallback", bg: "$edge", items: "center", justify: "center", ...props, children: typeof children === 'string' || typeof children === 'number' ? (_jsx(SizableText, { size: "$2", color: "$quiet", children: children })) : (children) }));

package/dist/backends/gui/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/backends/gui/avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;GAKG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAG7D,MAAM,IAAI,GAAG,EAAE,CAAA;AAMf,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CACrC,KAAC,SAAS,iBAAW,QAAQ,EAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,KAAK,KAAK,GAAI,CAC9F,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,CAC/C,KAAC,SAAS,CAAC,KAAK,iBAAW,cAAc,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,KAAK,KAAK,GAAI,CACnF,CAAA;AAED,8EAA8E;AAC9E,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB,EAAE,EAAE,CAAC,CACtE,KAAC,SAAS,CAAC,QAAQ,iBACP,iBAAiB,EAC3B,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,KACZ,KAAK,YAER,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9D,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,YAClC,QAAQ,GACG,CACf,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACkB,CACtB,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/backends/gui/avatar.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/badge.cjs

@@ -14,6 +14,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * Surface and ink are two concerns, so they are two styled parts sharing one
  * `variant` through a styled context — the frame owns background/border, the
  * text owns color/weight/case. Nothing reads `variant` twice by hand.
+ *
+ * `size` xs 14 · sm 16 · md 18 and `shape="circle"` are the record counts — a
+ * navigation item's unread count, a filter's rule count — on the pill, with the
+ * `muted`, `accent` and `inherit` colours (re-expressed from twenty-ui's Badge,
+ * MIT, see NOTICE). With no `size` a badge is the 24px label it always was,
+ * named `lg`.
  */
 const gui_1 = require("@hanzo/gui");
 const sx_1 = require("../../sx.cjs");
@@ -54,10 +60,31 @@ const BadgeFrame = (0, gui_1.styled)(gui_1.XStack, {
             link: { bg: 'transparent' },
             inputAdornment: { bg: '$hover', px: '$2' },
             tags: { bg: '$hover', borderColor: '$borderColor', rounded: '$3' },
+            muted: { bg: '$hover' },
+            accent: { bg: 'var(--primary)' },
+            // Its fill is 16% of whatever ink it sits in (inline, below): a count that
+            // takes its row's colour.
+            inherit: { bg: 'transparent' },
+        },
+        // After `variant`, so a record size's pill wins over a variant's radius.
+        size: {
+            xs: { minH: 14, height: 14, px: '$1', py: 0, gap: '$1', rounded: '$10' },
+            sm: { minH: 16, height: 16, px: '$2', py: 0, gap: '$1', rounded: '$10' },
+            md: { minH: 18, height: 18, px: '$1.5', py: 0, gap: '$0.5', rounded: '$10' },
+            lg: {},
+        },
+        circle: {
+            true: { px: 0, justify: 'center' },
         },
     },
     defaultVariants: { variant: 'default' },
 });
+/** The record sizes' type, all on the 12px rung — Hanzo's text floor (twenty-ui's xs is 8px). */
+const TYPE = {
+    xs: { size: '$1', lineHeight: 14, fontWeight: '600' },
+    sm: { size: '$1', lineHeight: 16, fontWeight: '500' },
+    md: { size: '$1', lineHeight: 18, fontWeight: '500' },
+};
 const BadgeText = (0, gui_1.styled)(gui_1.SizableText, {
     name: 'BadgeText',
     context: BadgeContext,
@@ -73,6 +100,9 @@ const BadgeText = (0, gui_1.styled)(gui_1.SizableText, {
             link: { color: '$ink', textDecorationLine: 'underline' },
             inputAdornment: { color: '$ink', fontWeight: '500' },
             tags: { color: '$quiet', fontWeight: '400', textTransform: 'capitalize' },
+            muted: { color: '$hint', fontWeight: '500' },
+            accent: { color: 'var(--primary-foreground)', fontWeight: '500' },
+            inherit: {},
         },
     },
 });
@@ -82,6 +112,14 @@ const BadgeText = (0, gui_1.styled)(gui_1.SizableText, {
  */
 const style_1 = require("../../style.cjs");
 Object.defineProperty(exports, "badgeVariants", { enumerable: true, get: function () { return style_1.badgeVariants; } });
-function Badge({ className, variant = 'default', asChild = false, children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(BadgeFrame, { "data-slot": "badge", "data-variant": variant, variant: variant ?? 'default', asChild: asChild, render: asChild ? undefined : 'span', ...(0, gesture_1.touch)(HEIGHT, MIN_TOUCH, 'y'), ...(0, sx_1.sx)([(0, style_1.badgeVariants)({ variant }), className].filter(Boolean).join(' ')), ...props, children: asChild ? children : (0, ink_1.ink)(children, BadgeText) }));
+function Badge({ className, variant = 'default', size, shape = 'pill', asChild = false, children, ...props }) {
+    const record = size && size !== 'lg' ? size : null;
+    const box = record ? { xs: 14, sm: 16, md: 18 }[record] : HEIGHT;
+    const inherit = variant === 'inherit';
+    return ((0, jsx_runtime_1.jsx)(BadgeFrame, { "data-slot": "badge", "data-variant": variant, ...(size ? { 'data-size': size } : null), variant: variant ?? 'default', ...(size ? { size } : null), ...(shape === 'circle' ? { circle: true, width: box, minW: box } : null), asChild: asChild, render: asChild ? undefined : 'span', ...(0, gesture_1.touch)(box, MIN_TOUCH, 'y'), ...(0, sx_1.sx)([(0, style_1.badgeVariants)({ variant }), className].filter(Boolean).join(' ')), ...(inherit ? { style: { backgroundColor: 'color-mix(in srgb, currentColor 16%, transparent)' } } : null), ...props, children: asChild
+            ? children
+            : (0, ink_1.ink)(children, BadgeText, {
+                ...(record ? TYPE[record] : null),
+                ...(inherit ? { style: { color: 'inherit', fontWeight: 'inherit', fontVariantNumeric: 'tabular-nums' } } : null),
+            }) }));
 }

package/dist/backends/gui/badge.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'inputAdornment' | 'tags';
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'inputAdornment' | 'tags' | 'muted' | 'accent' | 'inherit';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
 /**
  * A stable class handle for hosts that hook badges from CSS. Styling lives in
  * the tokens; this only names the variant.
@@ -13,7 +14,11 @@ export { badgeVariants };
  */
 export type BadgeProps = React.ComponentProps<'span'> & {
     variant?: BadgeVariant | null;
+    /** A record count's size (14 / 16 / 18). Unset, the 24px label (`lg`). */
+    size?: BadgeSize | null;
+    /** Width equals height, for a single digit. */
+    shape?: 'pill' | 'circle';
     asChild?: boolean;
 };
-export declare function Badge({ className, variant, asChild, children, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ className, variant, size, shape, asChild, children, ...props }: BadgeProps): React.JSX.Element;
 //# sourceMappingURL=badge.d.ts.map

package/dist/backends/gui/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/badge.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,GACT,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,MAAM,CAAA;AAkEV;;;GAGG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,CAAA;AAExB;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,qBAeZ"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/badge.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,GACT,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,SAAS,CAAA;AAEb,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AA2FjD;;;GAGG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,CAAA;AAExB;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7B,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAI,EACJ,KAAc,EACd,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,qBA2BZ"}

package/dist/backends/gui/badge.js

@@ -10,6 +10,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Surface and ink are two concerns, so they are two styled parts sharing one
  * `variant` through a styled context — the frame owns background/border, the
  * text owns color/weight/case. Nothing reads `variant` twice by hand.
+ *
+ * `size` xs 14 · sm 16 · md 18 and `shape="circle"` are the record counts — a
+ * navigation item's unread count, a filter's rule count — on the pill, with the
+ * `muted`, `accent` and `inherit` colours (re-expressed from twenty-ui's Badge,
+ * MIT, see NOTICE). With no `size` a badge is the 24px label it always was,
+ * named `lg`.
  */
 import { SizableText, XStack, createStyledContext, styled } from '@hanzo/gui';
 import { sx } from '../../sx.js';
@@ -50,10 +56,31 @@ const BadgeFrame = styled(XStack, {
             link: { bg: 'transparent' },
             inputAdornment: { bg: '$hover', px: '$2' },
             tags: { bg: '$hover', borderColor: '$borderColor', rounded: '$3' },
+            muted: { bg: '$hover' },
+            accent: { bg: 'var(--primary)' },
+            // Its fill is 16% of whatever ink it sits in (inline, below): a count that
+            // takes its row's colour.
+            inherit: { bg: 'transparent' },
+        },
+        // After `variant`, so a record size's pill wins over a variant's radius.
+        size: {
+            xs: { minH: 14, height: 14, px: '$1', py: 0, gap: '$1', rounded: '$10' },
+            sm: { minH: 16, height: 16, px: '$2', py: 0, gap: '$1', rounded: '$10' },
+            md: { minH: 18, height: 18, px: '$1.5', py: 0, gap: '$0.5', rounded: '$10' },
+            lg: {},
+        },
+        circle: {
+            true: { px: 0, justify: 'center' },
         },
     },
     defaultVariants: { variant: 'default' },
 });
+/** The record sizes' type, all on the 12px rung — Hanzo's text floor (twenty-ui's xs is 8px). */
+const TYPE = {
+    xs: { size: '$1', lineHeight: 14, fontWeight: '600' },
+    sm: { size: '$1', lineHeight: 16, fontWeight: '500' },
+    md: { size: '$1', lineHeight: 18, fontWeight: '500' },
+};
 const BadgeText = styled(SizableText, {
     name: 'BadgeText',
     context: BadgeContext,
@@ -69,6 +96,9 @@ const BadgeText = styled(SizableText, {
             link: { color: '$ink', textDecorationLine: 'underline' },
             inputAdornment: { color: '$ink', fontWeight: '500' },
             tags: { color: '$quiet', fontWeight: '400', textTransform: 'capitalize' },
+            muted: { color: '$hint', fontWeight: '500' },
+            accent: { color: 'var(--primary-foreground)', fontWeight: '500' },
+            inherit: {},
         },
     },
 });
@@ -78,7 +108,15 @@ const BadgeText = styled(SizableText, {
  */
 import { badgeVariants } from '../../style.js';
 export { badgeVariants };
-export function Badge({ className, variant = 'default', asChild = false, children, ...props }) {
-    return (_jsx(BadgeFrame, { "data-slot": "badge", "data-variant": variant, variant: variant ?? 'default', asChild: asChild, render: asChild ? undefined : 'span', ...touch(HEIGHT, MIN_TOUCH, 'y'), ...sx([badgeVariants({ variant }), className].filter(Boolean).join(' ')), ...props, children: asChild ? children : ink(children, BadgeText) }));
+export function Badge({ className, variant = 'default', size, shape = 'pill', asChild = false, children, ...props }) {
+    const record = size && size !== 'lg' ? size : null;
+    const box = record ? { xs: 14, sm: 16, md: 18 }[record] : HEIGHT;
+    const inherit = variant === 'inherit';
+    return (_jsx(BadgeFrame, { "data-slot": "badge", "data-variant": variant, ...(size ? { 'data-size': size } : null), variant: variant ?? 'default', ...(size ? { size } : null), ...(shape === 'circle' ? { circle: true, width: box, minW: box } : null), asChild: asChild, render: asChild ? undefined : 'span', ...touch(box, MIN_TOUCH, 'y'), ...sx([badgeVariants({ variant }), className].filter(Boolean).join(' ')), ...(inherit ? { style: { backgroundColor: 'color-mix(in srgb, currentColor 16%, transparent)' } } : null), ...props, children: asChild
+            ? children
+            : ink(children, BadgeText, {
+                ...(record ? TYPE[record] : null),
+                ...(inherit ? { style: { color: 'inherit', fontWeight: 'inherit', fontVariantNumeric: 'tabular-nums' } } : null),
+            }) }));
 }
 //# sourceMappingURL=badge.js.map

package/dist/backends/gui/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/backends/gui/badge.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/backends/gui/badge.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/banner.cjs

@@ -1,6 +1,7 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BannerAction = BannerAction;
 exports.Banner = Banner;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
@@ -21,6 +22,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * Message and icon paint from the hue's text rungs — step 12 for the message,
  * step 11 for the icon — because step 9 is a fill: on the light theme it reads
  * at 1.2:1 for yellow and about 3:1 for blue and green over the step-2 ground.
+ *
+ * ── The record kit's banner (twenty-ui's Banner and InlineBanner, MIT — NOTICE)
+ * Naming a `status`, a `color`, an `emphasis`, a `layout` or an `action` draws
+ * the other shape: content centred with a 12px gap, a 40px floor, 8px padding,
+ * 13px medium on a 1.5 line, the colour from the one status map (feedback.ts) —
+ * `solid` on the colour's fill, `soft` (the default for `inline` and `compact`)
+ * on its tint in its ink — and `action` a small outline button that takes its
+ * edge from the banner's ink. `layout="inline"` sits inside content (8px
+ * corners, 16 below unless `embedded`, the info icon unless one is given) and
+ * `layout="compact"` is sized to its content up to 512, ends apart. With none
+ * of those props a Banner renders exactly as it always has.
  */
 const react_1 = require("react");
 const gui_1 = require("@hanzo/gui");
@@ -28,6 +40,7 @@ const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const button_1 = require("./button.cjs");
+const feedback_1 = require("./feedback.cjs");
 const ICON = 16;
 const ICON_GUTTER = 28;
 const CLOSE = 24;
@@ -95,7 +108,33 @@ const IconSlot = (0, gui_1.styled)(gui_1.SizableText, {
         },
     },
 });
-function Banner({ variant = 'default', onClose, children, ...props }) {
+/** The paint a record-shape banner was drawn with, for its action. */
+const PaintContext = /* @__PURE__ */ (0, react_1.createContext)(null);
+/**
+ * A banner's own action: a small outline button whose edge is the banner's ink
+ * at 25% and whose hover fills at 10%, so it reads on a solid fill and on a tint
+ * alike.
+ */
+function BannerAction({ children, ...props }) {
+    const ctx = (0, react_1.useContext)(PaintContext);
+    const ink = ctx ? (ctx.solid ? ctx.paint.on : ctx.paint.ink) : '$ink';
+    const mix = (n) => `color-mix(in srgb, ${ink.startsWith('$') ? `var(--${ink.slice(1)})` : ink} ${n}%, transparent)`;
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('banner-action'), variant: "outline", size: "xs", bg: "transparent", borderColor: mix(25), hoverStyle: { bg: mix(10) }, pressStyle: { bg: mix(20) }, color: ink, ...props, children: children }));
+}
+function RecordBanner({ status, color, emphasis, layout = 'strip', embedded = false, action, icon, onClose, children, ...props }) {
+    const solid = (emphasis ?? (layout === 'strip' ? 'solid' : 'soft')) === 'solid';
+    const hue = (0, feedback_1.colorOf)(status ?? 'info', color);
+    const paint = feedback_1.STATUS_PAINT[hue];
+    const ink = solid ? paint.on : hue === 'gray' ? '$ink' : paint.ink;
+    const lead = icon ?? (layout === 'inline' ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Info, { size: 16, color: ink }) : null);
+    const compact = layout === 'compact';
+    const inline = layout === 'inline';
+    return ((0, jsx_runtime_1.jsx)(PaintContext.Provider, { value: { paint, solid }, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "alert", ...(0, slot_1.slot)('banner'), "data-variant": solid ? 'solid' : 'soft', "data-layout": layout, "data-color": hue, width: compact ? 'auto' : '100%', maxW: compact ? 512 : undefined, minH: compact ? undefined : 40, p: "$2", gap: compact ? '$2' : '$3', items: "center", justify: compact ? 'space-between' : inline ? 'flex-start' : 'center', bg: (solid ? paint.fill : paint.tint), rounded: inline || compact ? '$3' : 0, mb: inline && !embedded ? '$4' : 0, ...props, children: [lead ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('banner-icon'), shrink: 0, width: 16, height: 16, items: "center", justify: "center", children: lead })) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('banner-message'), render: "div", size: "$2", lineHeight: 20, fontWeight: "500", color: ink, flex: compact || inline ? 1 : undefined, minW: 0, children: children }), action, onClose ? ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('banner-close'), variant: "ghost", size: "icon-xs", color: ink, "aria-label": "Close", onPress: onClose, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { color: ink }) })) : null] }) }));
+}
+function Banner({ variant = 'default', onClose, children, status, color, emphasis, layout, embedded, action, icon: lead, ...props }) {
+    const record = [status, color, emphasis, layout, action, lead].some((v) => v !== undefined);
+    if (record)
+        return ((0, jsx_runtime_1.jsx)(RecordBanner, { status: status, color: color, emphasis: emphasis, layout: layout, embedded: embedded, action: action, icon: lead, onClose: onClose, ...props, children: children }));
     const resolved = variant ?? 'default';
     const items = react_1.Children.toArray(children);
     const head = items[0];

package/dist/backends/gui/banner.d.ts

@@ -16,18 +16,51 @@
  * Message and icon paint from the hue's text rungs — step 12 for the message,
  * step 11 for the icon — because step 9 is a fill: on the light theme it reads
  * at 1.2:1 for yellow and about 3:1 for blue and green over the step-2 ground.
+ *
+ * ── The record kit's banner (twenty-ui's Banner and InlineBanner, MIT — NOTICE)
+ * Naming a `status`, a `color`, an `emphasis`, a `layout` or an `action` draws
+ * the other shape: content centred with a 12px gap, a 40px floor, 8px padding,
+ * 13px medium on a 1.5 line, the colour from the one status map (feedback.ts) —
+ * `solid` on the colour's fill, `soft` (the default for `inline` and `compact`)
+ * on its tint in its ink — and `action` a small outline button that takes its
+ * edge from the banner's ink. `layout="inline"` sits inside content (8px
+ * corners, 16 below unless `embedded`, the info icon unless one is given) and
+ * `layout="compact"` is sized to its content up to 512, ends apart. With none
+ * of those props a Banner renders exactly as it always has.
  */
-import { type ComponentProps } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ButtonProps } from './button.js';
+import { type FeedbackColor, type FeedbackStatus } from './feedback.js';
 export type BannerVariant = 'default' | 'info' | 'success' | 'warning' | 'error';
 declare const BannerFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, any, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
     fullscreen?: boolean | undefined;
     variant?: "default" | "error" | "info" | "success" | "warning" | undefined;
 }, import("@hanzogui/web").StaticConfigPublic>;
-export type BannerProps = Omit<ComponentProps<typeof BannerFrame>, 'variant'> & {
+export type BannerProps = Omit<ComponentProps<typeof BannerFrame>, 'variant' | 'color'> & {
     variant?: BannerVariant | null;
     onClose?: () => void;
+    /** What the banner reports; picks its colour through the status map. */
+    status?: FeedbackStatus;
+    /** The colour, when it is not the status's. */
+    color?: FeedbackColor;
+    /** `solid` (the full-width default) or `soft`. */
+    emphasis?: 'solid' | 'soft';
+    /** `strip` (full width, the default), `inline` (inside content) or `compact` (sized to content). */
+    layout?: 'strip' | 'inline' | 'compact';
+    /** `inline`: drop the 16px below, for a banner that is the last thing in its box. */
+    embedded?: boolean;
+    /** A trailing control — usually `<BannerAction>`. */
+    action?: ReactNode;
+    /** The leading icon, for the record shape (inline defaults to Info). */
+    icon?: ReactNode;
 };
-export declare function Banner({ variant, onClose, children, ...props }: BannerProps): import("react").JSX.Element;
+/**
+ * A banner's own action: a small outline button whose edge is the banner's ink
+ * at 25% and whose hover fills at 10%, so it reads on a solid fill and on a tint
+ * alike.
+ */
+export declare function BannerAction({ children, ...props }: Omit<ButtonProps, 'variant' | 'size'>): import("react").JSX.Element;
+export declare function Banner({ variant, onClose, children, status, color, emphasis, layout, embedded, action, icon: lead, ...props }: BannerProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=banner.d.ts.map

package/dist/backends/gui/banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/banner.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAOrE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAUhF,QAAA,MAAM,WAAW;;;;8CAsBf,CAAA;AA8CF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC9E,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BA0CvF"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/banner.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAuD,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKhH,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAyB,KAAK,aAAa,EAAsB,KAAK,cAAc,EAAE,MAAM,YAAY,CAAA;AAE/G,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAUhF,QAAA,MAAM,WAAW;;;;8CAsBf,CAAA;AA8CF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,GAAG;IACxF,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,wEAAwE;IACxE,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC3B,oGAAoG;IACpG,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACvC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAKD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,+BAmBzF;AA4ED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EAAE,IAAI,EACV,GAAG,KAAK,EACT,EAAE,WAAW,+BA2Db"}

package/dist/backends/gui/banner.js

@@ -18,13 +18,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Message and icon paint from the hue's text rungs — step 12 for the message,
  * step 11 for the icon — because step 9 is a fill: on the light theme it reads
  * at 1.2:1 for yellow and about 3:1 for blue and green over the step-2 ground.
+ *
+ * ── The record kit's banner (twenty-ui's Banner and InlineBanner, MIT — NOTICE)
+ * Naming a `status`, a `color`, an `emphasis`, a `layout` or an `action` draws
+ * the other shape: content centred with a 12px gap, a 40px floor, 8px padding,
+ * 13px medium on a 1.5 line, the colour from the one status map (feedback.ts) —
+ * `solid` on the colour's fill, `soft` (the default for `inline` and `compact`)
+ * on its tint in its ink — and `action` a small outline button that takes its
+ * edge from the banner's ink. `layout="inline"` sits inside content (8px
+ * corners, 16 below unless `embedded`, the info icon unless one is given) and
+ * `layout="compact"` is sized to its content up to 512, ends apart. With none
+ * of those props a Banner renders exactly as it always has.
  */
-import { Children, isValidElement } from 'react';
-import { SizableText, YStack, createStyledContext, styled } from '@hanzo/gui';
-import { X } from '@hanzogui/lucide-icons-2';
+import { Children, createContext, isValidElement, useContext } from 'react';
+import { SizableText, XStack, YStack, createStyledContext, styled } from '@hanzo/gui';
+import { Info, X } from '@hanzogui/lucide-icons-2';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
 import { Button } from './button.js';
+import { colorOf, STATUS_PAINT } from './feedback.js';
 const ICON = 16;
 const ICON_GUTTER = 28;
 const CLOSE = 24;
@@ -92,7 +104,33 @@ const IconSlot = styled(SizableText, {
         },
     },
 });
-export function Banner({ variant = 'default', onClose, children, ...props }) {
+/** The paint a record-shape banner was drawn with, for its action. */
+const PaintContext = /* @__PURE__ */ createContext(null);
+/**
+ * A banner's own action: a small outline button whose edge is the banner's ink
+ * at 25% and whose hover fills at 10%, so it reads on a solid fill and on a tint
+ * alike.
+ */
+export function BannerAction({ children, ...props }) {
+    const ctx = useContext(PaintContext);
+    const ink = ctx ? (ctx.solid ? ctx.paint.on : ctx.paint.ink) : '$ink';
+    const mix = (n) => `color-mix(in srgb, ${ink.startsWith('$') ? `var(--${ink.slice(1)})` : ink} ${n}%, transparent)`;
+    return (_jsx(Button, { ...slot('banner-action'), variant: "outline", size: "xs", bg: "transparent", borderColor: mix(25), hoverStyle: { bg: mix(10) }, pressStyle: { bg: mix(20) }, color: ink, ...props, children: children }));
+}
+function RecordBanner({ status, color, emphasis, layout = 'strip', embedded = false, action, icon, onClose, children, ...props }) {
+    const solid = (emphasis ?? (layout === 'strip' ? 'solid' : 'soft')) === 'solid';
+    const hue = colorOf(status ?? 'info', color);
+    const paint = STATUS_PAINT[hue];
+    const ink = solid ? paint.on : hue === 'gray' ? '$ink' : paint.ink;
+    const lead = icon ?? (layout === 'inline' ? _jsx(Info, { size: 16, color: ink }) : null);
+    const compact = layout === 'compact';
+    const inline = layout === 'inline';
+    return (_jsx(PaintContext.Provider, { value: { paint, solid }, children: _jsxs(XStack, { role: "alert", ...slot('banner'), "data-variant": solid ? 'solid' : 'soft', "data-layout": layout, "data-color": hue, width: compact ? 'auto' : '100%', maxW: compact ? 512 : undefined, minH: compact ? undefined : 40, p: "$2", gap: compact ? '$2' : '$3', items: "center", justify: compact ? 'space-between' : inline ? 'flex-start' : 'center', bg: (solid ? paint.fill : paint.tint), rounded: inline || compact ? '$3' : 0, mb: inline && !embedded ? '$4' : 0, ...props, children: [lead ? (_jsx(XStack, { ...slot('banner-icon'), shrink: 0, width: 16, height: 16, items: "center", justify: "center", children: lead })) : null, _jsx(SizableText, { ...slot('banner-message'), render: "div", size: "$2", lineHeight: 20, fontWeight: "500", color: ink, flex: compact || inline ? 1 : undefined, minW: 0, children: children }), action, onClose ? (_jsx(Button, { ...slot('banner-close'), variant: "ghost", size: "icon-xs", color: ink, "aria-label": "Close", onPress: onClose, children: _jsx(X, { color: ink }) })) : null] }) }));
+}
+export function Banner({ variant = 'default', onClose, children, status, color, emphasis, layout, embedded, action, icon: lead, ...props }) {
+    const record = [status, color, emphasis, layout, action, lead].some((v) => v !== undefined);
+    if (record)
+        return (_jsx(RecordBanner, { status: status, color: color, emphasis: emphasis, layout: layout, embedded: embedded, action: action, icon: lead, onClose: onClose, ...props, children: children }));
     const resolved = variant ?? 'default';
     const items = Children.toArray(children);
     const head = items[0];

package/dist/backends/gui/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/backends/gui/banner.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/backends/gui/banner.tsx"],"names":[],"mappings":"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"}