@hanzo/ui 8.33.2 → 8.33.3

package/NOTICE

@@ -44,8 +44,8 @@ This product includes the colour scales of Radix Colors
 
     Copyright (c) 2021 Radix
 
-They are the data palette in pkg/tokens/src/data.ts: twenty-four of its
-twenty-five pickable hues and all five tinted neutrals are Radix Colors 3.0.0
+They are the data palette in pkg/tokens/src/data.ts: twenty of its
+twenty-one pickable hues and all five tinted neutrals are Radix Colors 3.0.0
 scales (its `blue` is Radix indigo, its `teal` Radix teal), as twenty-ui ships
 them, converted from display-p3 to sRGB. Its `gray` is twenty-ui's own.
 

package/dist/gallery/display.cjs

@@ -39,7 +39,7 @@ const AVATAR_SHAPES = ['square', 'rounded', 'circle'];
 const BADGE_SIZES = ['xs', 'sm', 'md'];
 const PEOPLE = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Edsger Dijkstra', 'Barbara Liskov', 'Donald Knuth'];
 function Parts() {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "tag", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: hue, children: hue }, `s-${hue}`))), ALL.map((hue) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: hue, variant: "solid", children: hue }, `f-${hue}`))), TAG_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "blue", variant: variant, weight: "medium", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, {}), children: variant }, variant))), (0, jsx_runtime_1.jsx)(tag_1.Tag, { variant: "outline", color: "transparent", borderStyle: "dashed", children: "No value" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "transparent", children: "transparent" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "green", onPress: NOOP, children: "pressable" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "red", disabled: true, children: "disabled" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "blue", maxW: 96, children: "A tag whose label is far too long for it" }), (0, jsx_runtime_1.jsx)(tags_1.Tags, { tags: [{ id: 'a', label: 'Lead', color: 'sky' }, { id: 'b', label: 'Plain' }], onRemove: NOOP })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "chip", children: [CHIP_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { variant: variant, label: variant }, variant))), CHIP_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { variant: variant, label: `${variant} press`, onPress: NOOP }, `p-${variant}`))), (0, jsx_runtime_1.jsx)(chip_1.Chip, { size: "md", label: "Acme", startElement: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: "Acme" }), onPress: NOOP }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { shape: "round", variant: "soft", color: "secondary", label: "Round" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { weight: "medium", label: "Medium" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Not shared", startElement: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Lock, { size: 14 }), variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "With end", endElementDivider: true, endElement: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 12 }), variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Disabled", disabled: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "A chip whose name runs past its width", maxW: 120, variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { href: "https://hanzo.ai", label: "Link chip" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "truncated-text", children: [(0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: "One line that is far too long for the narrow box it sits in, cut with an ellipsis", maxW: 180, size: "$2" }), (0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: 'Two lines, clamped, wrapping anywhere, with a word that is longer than everything else', lineClamp: 2, maxW: 180, size: "$2" }), (0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: "Focusable", isFocusable: true, size: "$2" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "avatar-record", children: [AVATAR_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: size, name: "Ada Lovelace" }, size))), AVATAR_SHAPES.map((shape) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: shape, name: shape }, shape))), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Grace Hopper", variant: "outline" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, {}) }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Ring", ring: true }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Pulsing", pulsing: true }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: "Press", onPress: NOOP }), data_1.hues.map((hue) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: hue, colorSeed: hue }, hue)))] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "avatar-group", children: [(0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)) }), (0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.slice(0, 3).map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: p, ring: true }, p)), total: 12 }), (0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)), overflowShape: "circle", overlap: "left" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "shortcut", children: [(0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'K'], platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'K'], platform: "other" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: [['G'], ['P']] }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Shift', 'Enter'], variant: "text", platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'Enter'], variant: "button", platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Escape'], visibility: "desktop" }), (0, jsx_runtime_1.jsx)(kbd_1.Kbd, { variant: "cap", children: "\u2318" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "overflowing-list", children: [(0, jsx_runtime_1.jsx)(overflowing_list_1.OverflowingList, { maxW: 220, maxInlineCount: 3, showOverflowCount: "always", children: ['Lead', 'Customer', 'Partner', 'Investor', 'Press'].map((t, i) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: data_1.hues[i * 3], children: t }, t))) }), (0, jsx_runtime_1.jsx)(overflowing_list_1.OverflowingList, { maxW: 200, children: ['ada@hanzo.ai', 'grace@hanzo.ai', 'alan@hanzo.ai'].map((e) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { label: e, variant: "soft" }, e))) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "badge-record", children: [BADGE_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(badge_1.Badge, { size: size, variant: "muted", children: size === 'xs' ? '3' : '12' }, size))), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", variant: "secondary", children: "Soon" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "md", variant: "accent", children: "New" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", variant: "inherit", children: "4" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", shape: "circle", variant: "muted", children: "2" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "status-record", children: [['gray', 'red', 'teal', 'orange', 'blue', 'chartreuse'].map((c) => ((0, jsx_runtime_1.jsx)(status_1.Status, { color: c, children: c }, c))), ['success', 'warning', 'error', 'info', 'default'].map((c) => ((0, jsx_runtime_1.jsx)(status_1.Status, { color: c, children: c }, c))), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "teal", loading: true, children: "Importing" }), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "green", weight: "medium", dot: false, children: "Synced" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "icon-tile", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(icon_tile_1.IconTile, { color: hue, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, {}) }, hue))), (0, jsx_runtime_1.jsx)(icon_tile_1.IconTile, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, {}) }), (0, jsx_runtime_1.jsx)(stack_icon_1.StackIcon, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 16 }), stackedIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 10 }) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "color-sample", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { colorName: hue }, hue))), (0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { colorName: "blue", variant: "circle" }), (0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { color: "#3e63dd", variant: "circle" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "heading-label", children: [(0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$2", tone: "primary", children: "Section title" }), (0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$1", tone: "secondary", children: "Group header" }), (0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$4", tone: "tertiary", children: "Dialog title" }), (0, jsx_runtime_1.jsx)(label_1.Label, { variant: "section", children: "Favorites" }), (0, jsx_runtime_1.jsx)(label_1.Label, { variant: "section-sm", children: "Workspace" }), (0, jsx_runtime_1.jsx)(motion_1.Crossfade, { isActive: true, activeIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 14 }), inactiveIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Pencil, { size: 14 }) }), (0, jsx_runtime_1.jsx)(motion_1.Crossfade, { isActive: false, activeIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Heart, { size: 14 }), inactiveIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Heart, { size: 14 }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "tag", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: hue, children: hue }, `s-${hue}`))), ALL.map((hue) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: hue, variant: "solid", children: hue }, `f-${hue}`))), TAG_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "blue", variant: variant, weight: "medium", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, {}), children: variant }, variant))), (0, jsx_runtime_1.jsx)(tag_1.Tag, { variant: "outline", color: "transparent", borderStyle: "dashed", children: "No value" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "transparent", children: "transparent" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "green", onPress: NOOP, children: "pressable" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "red", disabled: true, children: "disabled" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "blue", maxW: 96, children: "A tag whose label is far too long for it" }), (0, jsx_runtime_1.jsx)(tags_1.Tags, { tags: [{ id: 'a', label: 'Lead', color: 'sky' }, { id: 'b', label: 'Plain' }], onRemove: NOOP })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "chip", children: [CHIP_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { variant: variant, label: variant }, variant))), CHIP_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { variant: variant, label: `${variant} press`, onPress: NOOP }, `p-${variant}`))), (0, jsx_runtime_1.jsx)(chip_1.Chip, { size: "md", label: "Acme", startElement: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: "Acme" }), onPress: NOOP }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { shape: "round", variant: "soft", color: "secondary", label: "Round" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { weight: "medium", label: "Medium" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Not shared", startElement: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Lock, { size: 14 }), variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "With end", endElementDivider: true, endElement: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 12 }), variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Disabled", disabled: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "A chip whose name runs past its width", maxW: 120, variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { href: "https://hanzo.ai", label: "Link chip" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "truncated-text", children: [(0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: "One line that is far too long for the narrow box it sits in, cut with an ellipsis", maxW: 180, size: "$2" }), (0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: 'Two lines, clamped, wrapping anywhere, with a word that is longer than everything else', lineClamp: 2, maxW: 180, size: "$2" }), (0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: "Focusable", isFocusable: true, size: "$2" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "avatar-record", children: [AVATAR_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: size, name: "Ada Lovelace" }, size))), AVATAR_SHAPES.map((shape) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: shape, name: shape }, shape))), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Grace Hopper", variant: "outline" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, {}) }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Ring", ring: true }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Pulsing", pulsing: true }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: "Press", onPress: NOOP }), data_1.hues.map((hue) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: hue, colorSeed: hue }, hue)))] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "avatar-group", children: [(0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)) }), (0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.slice(0, 3).map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: p, ring: true }, p)), total: 12 }), (0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)), overflowShape: "circle", overlap: "left" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "shortcut", children: [(0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'K'], platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'K'], platform: "other" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: [['G'], ['P']] }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Shift', 'Enter'], variant: "text", platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'Enter'], variant: "button", platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Escape'], visibility: "desktop" }), (0, jsx_runtime_1.jsx)(kbd_1.Kbd, { variant: "cap", children: "\u2318" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "overflowing-list", children: [(0, jsx_runtime_1.jsx)(overflowing_list_1.OverflowingList, { maxW: 220, maxInlineCount: 3, showOverflowCount: "always", children: ['Lead', 'Customer', 'Partner', 'Investor', 'Press'].map((t, i) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: data_1.hues[i * 3], children: t }, t))) }), (0, jsx_runtime_1.jsx)(overflowing_list_1.OverflowingList, { maxW: 200, children: ['ada@hanzo.ai', 'grace@hanzo.ai', 'alan@hanzo.ai'].map((e) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { label: e, variant: "soft" }, e))) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "badge-record", children: [BADGE_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(badge_1.Badge, { size: size, variant: "muted", children: size === 'xs' ? '3' : '12' }, size))), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", variant: "secondary", children: "Soon" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "md", variant: "accent", children: "New" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", variant: "inherit", children: "4" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", shape: "circle", variant: "muted", children: "2" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "status-record", children: [['gray', 'red', 'teal', 'orange', 'blue', 'chartreuse'].map((c) => ((0, jsx_runtime_1.jsx)(status_1.Status, { color: c, children: c }, c))), ['success', 'warning', 'error', 'info', 'default'].map((c) => ((0, jsx_runtime_1.jsx)(status_1.Status, { color: c, children: c }, c))), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "teal", loading: true, children: "Importing" }), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "green", weight: "medium", dot: false, children: "Synced" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "icon-tile", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(icon_tile_1.IconTile, { color: hue, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, {}) }, hue))), (0, jsx_runtime_1.jsx)(icon_tile_1.IconTile, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, {}) }), (0, jsx_runtime_1.jsx)(stack_icon_1.StackIcon, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 16 }), stackedIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 10 }) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "color-sample", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { colorName: hue }, hue))), (0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { colorName: "blue", variant: "circle" }), (0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { color: "#6e6e6e", variant: "circle" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "heading-label", children: [(0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$2", tone: "primary", children: "Section title" }), (0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$1", tone: "secondary", children: "Group header" }), (0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$4", tone: "tertiary", children: "Dialog title" }), (0, jsx_runtime_1.jsx)(label_1.Label, { variant: "section", children: "Favorites" }), (0, jsx_runtime_1.jsx)(label_1.Label, { variant: "section-sm", children: "Workspace" }), (0, jsx_runtime_1.jsx)(motion_1.Crossfade, { isActive: true, activeIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 14 }), inactiveIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Pencil, { size: 14 }) }), (0, jsx_runtime_1.jsx)(motion_1.Crossfade, { isActive: false, activeIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Heart, { size: 14 }), inactiveIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Heart, { size: 14 }) })] })] }));
 }
 /** The parts regular, then the density-sensitive ones (chips, tags) under compact. */
 function Display() {

package/dist/gallery/display.js

@@ -36,7 +36,7 @@ const AVATAR_SHAPES = ['square', 'rounded', 'circle'];
 const BADGE_SIZES = ['xs', 'sm', 'md'];
 const PEOPLE = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Edsger Dijkstra', 'Barbara Liskov', 'Donald Knuth'];
 function Parts() {
-    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "tag", children: [ALL.map((hue) => (_jsx(Tag, { color: hue, children: hue }, `s-${hue}`))), ALL.map((hue) => (_jsx(Tag, { color: hue, variant: "solid", children: hue }, `f-${hue}`))), TAG_VARIANTS.map((variant) => (_jsx(Tag, { color: "blue", variant: variant, weight: "medium", startIcon: _jsx(Building2, {}), children: variant }, variant))), _jsx(Tag, { variant: "outline", color: "transparent", borderStyle: "dashed", children: "No value" }), _jsx(Tag, { color: "transparent", children: "transparent" }), _jsx(Tag, { color: "green", onPress: NOOP, children: "pressable" }), _jsx(Tag, { color: "red", disabled: true, children: "disabled" }), _jsx(Tag, { color: "blue", maxW: 96, children: "A tag whose label is far too long for it" }), _jsx(Tags, { tags: [{ id: 'a', label: 'Lead', color: 'sky' }, { id: 'b', label: 'Plain' }], onRemove: NOOP })] }), _jsxs(Section, { name: "chip", children: [CHIP_VARIANTS.map((variant) => (_jsx(Chip, { variant: variant, label: variant }, variant))), CHIP_VARIANTS.map((variant) => (_jsx(Chip, { variant: variant, label: `${variant} press`, onPress: NOOP }, `p-${variant}`))), _jsx(Chip, { size: "md", label: "Acme", startElement: _jsx(Avatar, { size: "md", name: "Acme" }), onPress: NOOP }), _jsx(Chip, { shape: "round", variant: "soft", color: "secondary", label: "Round" }), _jsx(Chip, { weight: "medium", label: "Medium" }), _jsx(Chip, { label: "Not shared", startElement: _jsx(Lock, { size: 14 }), variant: "soft" }), _jsx(Chip, { label: "With end", endElementDivider: true, endElement: _jsx(X, { size: 12 }), variant: "soft" }), _jsx(Chip, { label: "Disabled", disabled: true, onPress: NOOP }), _jsx(Chip, { label: "A chip whose name runs past its width", maxW: 120, variant: "soft" }), _jsx(Chip, { href: "https://hanzo.ai", label: "Link chip" })] }), _jsxs(Section, { name: "truncated-text", children: [_jsx(TruncatedText, { text: "One line that is far too long for the narrow box it sits in, cut with an ellipsis", maxW: 180, size: "$2" }), _jsx(TruncatedText, { text: 'Two lines, clamped, wrapping anywhere, with a word that is longer than everything else', lineClamp: 2, maxW: 180, size: "$2" }), _jsx(TruncatedText, { text: "Focusable", isFocusable: true, size: "$2" })] }), _jsxs(Section, { name: "avatar-record", children: [AVATAR_SIZES.map((size) => (_jsx(Avatar, { size: size, name: "Ada Lovelace" }, size))), AVATAR_SHAPES.map((shape) => (_jsx(Avatar, { size: "lg", shape: shape, name: shape }, shape))), _jsx(Avatar, { size: "lg", name: "Grace Hopper", variant: "outline" }), _jsx(Avatar, { size: "lg", icon: _jsx(User, {}) }), _jsx(Avatar, { size: "lg", name: "" }), _jsx(Avatar, { size: "lg", name: "Ring", ring: true }), _jsx(Avatar, { size: "lg", name: "Pulsing", pulsing: true }), _jsx(Avatar, { size: "lg", shape: "circle", name: "Press", onPress: NOOP }), hues.map((hue) => (_jsx(Avatar, { size: "md", name: hue, colorSeed: hue }, hue)))] }), _jsxs(Section, { name: "avatar-group", children: [_jsx(AvatarGroup, { avatars: PEOPLE.map((p) => _jsx(Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)) }), _jsx(AvatarGroup, { avatars: PEOPLE.slice(0, 3).map((p) => _jsx(Avatar, { size: "md", name: p, ring: true }, p)), total: 12 }), _jsx(AvatarGroup, { avatars: PEOPLE.map((p) => _jsx(Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)), overflowShape: "circle", overlap: "left" })] }), _jsxs(Section, { name: "shortcut", children: [_jsx(Shortcut, { keys: ['Mod', 'K'], platform: "mac" }), _jsx(Shortcut, { keys: ['Mod', 'K'], platform: "other" }), _jsx(Shortcut, { keys: [['G'], ['P']] }), _jsx(Shortcut, { keys: ['Shift', 'Enter'], variant: "text", platform: "mac" }), _jsx(Shortcut, { keys: ['Mod', 'Enter'], variant: "button", platform: "mac" }), _jsx(Shortcut, { keys: ['Escape'], visibility: "desktop" }), _jsx(Kbd, { variant: "cap", children: "\u2318" })] }), _jsxs(Section, { name: "overflowing-list", children: [_jsx(OverflowingList, { maxW: 220, maxInlineCount: 3, showOverflowCount: "always", children: ['Lead', 'Customer', 'Partner', 'Investor', 'Press'].map((t, i) => (_jsx(Tag, { color: hues[i * 3], children: t }, t))) }), _jsx(OverflowingList, { maxW: 200, children: ['ada@hanzo.ai', 'grace@hanzo.ai', 'alan@hanzo.ai'].map((e) => (_jsx(Chip, { label: e, variant: "soft" }, e))) })] }), _jsxs(Section, { name: "badge-record", children: [BADGE_SIZES.map((size) => (_jsx(Badge, { size: size, variant: "muted", children: size === 'xs' ? '3' : '12' }, size))), _jsx(Badge, { size: "sm", variant: "secondary", children: "Soon" }), _jsx(Badge, { size: "md", variant: "accent", children: "New" }), _jsx(Badge, { size: "sm", variant: "inherit", children: "4" }), _jsx(Badge, { size: "sm", shape: "circle", variant: "muted", children: "2" })] }), _jsxs(Section, { name: "status-record", children: [['gray', 'red', 'teal', 'orange', 'blue', 'chartreuse'].map((c) => (_jsx(Status, { color: c, children: c }, c))), ['success', 'warning', 'error', 'info', 'default'].map((c) => (_jsx(Status, { color: c, children: c }, c))), _jsx(Status, { color: "teal", loading: true, children: "Importing" }), _jsx(Status, { color: "green", weight: "medium", dot: false, children: "Synced" })] }), _jsxs(Section, { name: "icon-tile", children: [ALL.map((hue) => (_jsx(IconTile, { color: hue, icon: _jsx(Building2, {}) }, hue))), _jsx(IconTile, { icon: _jsx(User, {}) }), _jsx(StackIcon, { icon: _jsx(Building2, { size: 16 }), stackedIcon: _jsx(Plus, { size: 10 }) })] }), _jsxs(Section, { name: "color-sample", children: [ALL.map((hue) => (_jsx(ColorSample, { colorName: hue }, hue))), _jsx(ColorSample, { colorName: "blue", variant: "circle" }), _jsx(ColorSample, { color: "#3e63dd", variant: "circle" })] }), _jsxs(Section, { name: "heading-label", children: [_jsx(Heading, { size: "$2", tone: "primary", children: "Section title" }), _jsx(Heading, { size: "$1", tone: "secondary", children: "Group header" }), _jsx(Heading, { size: "$4", tone: "tertiary", children: "Dialog title" }), _jsx(Label, { variant: "section", children: "Favorites" }), _jsx(Label, { variant: "section-sm", children: "Workspace" }), _jsx(Crossfade, { isActive: true, activeIcon: _jsx(X, { size: 14 }), inactiveIcon: _jsx(Pencil, { size: 14 }) }), _jsx(Crossfade, { isActive: false, activeIcon: _jsx(Heart, { size: 14 }), inactiveIcon: _jsx(Heart, { size: 14 }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "tag", children: [ALL.map((hue) => (_jsx(Tag, { color: hue, children: hue }, `s-${hue}`))), ALL.map((hue) => (_jsx(Tag, { color: hue, variant: "solid", children: hue }, `f-${hue}`))), TAG_VARIANTS.map((variant) => (_jsx(Tag, { color: "blue", variant: variant, weight: "medium", startIcon: _jsx(Building2, {}), children: variant }, variant))), _jsx(Tag, { variant: "outline", color: "transparent", borderStyle: "dashed", children: "No value" }), _jsx(Tag, { color: "transparent", children: "transparent" }), _jsx(Tag, { color: "green", onPress: NOOP, children: "pressable" }), _jsx(Tag, { color: "red", disabled: true, children: "disabled" }), _jsx(Tag, { color: "blue", maxW: 96, children: "A tag whose label is far too long for it" }), _jsx(Tags, { tags: [{ id: 'a', label: 'Lead', color: 'sky' }, { id: 'b', label: 'Plain' }], onRemove: NOOP })] }), _jsxs(Section, { name: "chip", children: [CHIP_VARIANTS.map((variant) => (_jsx(Chip, { variant: variant, label: variant }, variant))), CHIP_VARIANTS.map((variant) => (_jsx(Chip, { variant: variant, label: `${variant} press`, onPress: NOOP }, `p-${variant}`))), _jsx(Chip, { size: "md", label: "Acme", startElement: _jsx(Avatar, { size: "md", name: "Acme" }), onPress: NOOP }), _jsx(Chip, { shape: "round", variant: "soft", color: "secondary", label: "Round" }), _jsx(Chip, { weight: "medium", label: "Medium" }), _jsx(Chip, { label: "Not shared", startElement: _jsx(Lock, { size: 14 }), variant: "soft" }), _jsx(Chip, { label: "With end", endElementDivider: true, endElement: _jsx(X, { size: 12 }), variant: "soft" }), _jsx(Chip, { label: "Disabled", disabled: true, onPress: NOOP }), _jsx(Chip, { label: "A chip whose name runs past its width", maxW: 120, variant: "soft" }), _jsx(Chip, { href: "https://hanzo.ai", label: "Link chip" })] }), _jsxs(Section, { name: "truncated-text", children: [_jsx(TruncatedText, { text: "One line that is far too long for the narrow box it sits in, cut with an ellipsis", maxW: 180, size: "$2" }), _jsx(TruncatedText, { text: 'Two lines, clamped, wrapping anywhere, with a word that is longer than everything else', lineClamp: 2, maxW: 180, size: "$2" }), _jsx(TruncatedText, { text: "Focusable", isFocusable: true, size: "$2" })] }), _jsxs(Section, { name: "avatar-record", children: [AVATAR_SIZES.map((size) => (_jsx(Avatar, { size: size, name: "Ada Lovelace" }, size))), AVATAR_SHAPES.map((shape) => (_jsx(Avatar, { size: "lg", shape: shape, name: shape }, shape))), _jsx(Avatar, { size: "lg", name: "Grace Hopper", variant: "outline" }), _jsx(Avatar, { size: "lg", icon: _jsx(User, {}) }), _jsx(Avatar, { size: "lg", name: "" }), _jsx(Avatar, { size: "lg", name: "Ring", ring: true }), _jsx(Avatar, { size: "lg", name: "Pulsing", pulsing: true }), _jsx(Avatar, { size: "lg", shape: "circle", name: "Press", onPress: NOOP }), hues.map((hue) => (_jsx(Avatar, { size: "md", name: hue, colorSeed: hue }, hue)))] }), _jsxs(Section, { name: "avatar-group", children: [_jsx(AvatarGroup, { avatars: PEOPLE.map((p) => _jsx(Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)) }), _jsx(AvatarGroup, { avatars: PEOPLE.slice(0, 3).map((p) => _jsx(Avatar, { size: "md", name: p, ring: true }, p)), total: 12 }), _jsx(AvatarGroup, { avatars: PEOPLE.map((p) => _jsx(Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)), overflowShape: "circle", overlap: "left" })] }), _jsxs(Section, { name: "shortcut", children: [_jsx(Shortcut, { keys: ['Mod', 'K'], platform: "mac" }), _jsx(Shortcut, { keys: ['Mod', 'K'], platform: "other" }), _jsx(Shortcut, { keys: [['G'], ['P']] }), _jsx(Shortcut, { keys: ['Shift', 'Enter'], variant: "text", platform: "mac" }), _jsx(Shortcut, { keys: ['Mod', 'Enter'], variant: "button", platform: "mac" }), _jsx(Shortcut, { keys: ['Escape'], visibility: "desktop" }), _jsx(Kbd, { variant: "cap", children: "\u2318" })] }), _jsxs(Section, { name: "overflowing-list", children: [_jsx(OverflowingList, { maxW: 220, maxInlineCount: 3, showOverflowCount: "always", children: ['Lead', 'Customer', 'Partner', 'Investor', 'Press'].map((t, i) => (_jsx(Tag, { color: hues[i * 3], children: t }, t))) }), _jsx(OverflowingList, { maxW: 200, children: ['ada@hanzo.ai', 'grace@hanzo.ai', 'alan@hanzo.ai'].map((e) => (_jsx(Chip, { label: e, variant: "soft" }, e))) })] }), _jsxs(Section, { name: "badge-record", children: [BADGE_SIZES.map((size) => (_jsx(Badge, { size: size, variant: "muted", children: size === 'xs' ? '3' : '12' }, size))), _jsx(Badge, { size: "sm", variant: "secondary", children: "Soon" }), _jsx(Badge, { size: "md", variant: "accent", children: "New" }), _jsx(Badge, { size: "sm", variant: "inherit", children: "4" }), _jsx(Badge, { size: "sm", shape: "circle", variant: "muted", children: "2" })] }), _jsxs(Section, { name: "status-record", children: [['gray', 'red', 'teal', 'orange', 'blue', 'chartreuse'].map((c) => (_jsx(Status, { color: c, children: c }, c))), ['success', 'warning', 'error', 'info', 'default'].map((c) => (_jsx(Status, { color: c, children: c }, c))), _jsx(Status, { color: "teal", loading: true, children: "Importing" }), _jsx(Status, { color: "green", weight: "medium", dot: false, children: "Synced" })] }), _jsxs(Section, { name: "icon-tile", children: [ALL.map((hue) => (_jsx(IconTile, { color: hue, icon: _jsx(Building2, {}) }, hue))), _jsx(IconTile, { icon: _jsx(User, {}) }), _jsx(StackIcon, { icon: _jsx(Building2, { size: 16 }), stackedIcon: _jsx(Plus, { size: 10 }) })] }), _jsxs(Section, { name: "color-sample", children: [ALL.map((hue) => (_jsx(ColorSample, { colorName: hue }, hue))), _jsx(ColorSample, { colorName: "blue", variant: "circle" }), _jsx(ColorSample, { color: "#6e6e6e", variant: "circle" })] }), _jsxs(Section, { name: "heading-label", children: [_jsx(Heading, { size: "$2", tone: "primary", children: "Section title" }), _jsx(Heading, { size: "$1", tone: "secondary", children: "Group header" }), _jsx(Heading, { size: "$4", tone: "tertiary", children: "Dialog title" }), _jsx(Label, { variant: "section", children: "Favorites" }), _jsx(Label, { variant: "section-sm", children: "Workspace" }), _jsx(Crossfade, { isActive: true, activeIcon: _jsx(X, { size: 14 }), inactiveIcon: _jsx(Pencil, { size: 14 }) }), _jsx(Crossfade, { isActive: false, activeIcon: _jsx(Heart, { size: 14 }), inactiveIcon: _jsx(Heart, { size: 14 }) })] })] }));
 }
 /** The parts regular, then the density-sensitive ones (chips, tags) under compact. */
 export function Display() {