@stackone/malachite 2.49.1 → 2.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"SelectableCard.js","sources":["../../src/components/SelectableCard.tsx"],"sourcesContent":["import React, { useId, useRef } from 'react';\nimport Button from './Button';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport ExternalLinkIcon from './CustomIcons/ExternalLinkIcon';\nimport PinIcon from './CustomIcons/PinIcon';\nimport Tag, { type TagType } from './Tag';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport Text from './Typography/Text';\nimport { useCardStripSlot } from './cardStripSlot';\nimport { FOCUS_RING, FOCUS_RING_WITHIN_RADIO } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport interface SelectableCardStatus {\n label: string;\n /** Maps to Tag's palette — `default` (grey) for \"Disabled\", `warning` (amber) for \"Draft\". */\n type?: TagType;\n}\n\nexport interface SelectableCardLink {\n label: string;\n href: string;\n}\n\n/** The card's palette: `profile` is green, `library` neutral, `editing` amber for a\n * profile with unsaved changes. */\nexport type SelectableCardVariant = 'profile' | 'library' | 'editing';\n\nexport interface SelectableCardProps {\n /** Identifies the card inside its group; handed back to `onSelect`. */\n value: string;\n title: string;\n /** Leading glyph on the title line, e.g. a library/book icon. */\n titleIcon?: React.ReactNode;\n /** Pins the card as the account default, marked beside the title. */\n isDefault?: boolean;\n /** Palette only — gradient, borders, indicator and eyebrow; position is settled by the strip. */\n variant?: SelectableCardVariant;\n /** Small label above the title (\"Profile\", \"Explore\"). */\n eyebrow?: string;\n /** Status pill rendered next to the eyebrow — or in its place when there is no eyebrow. */\n status?: SelectableCardStatus;\n /** Supporting copy under the title, clamped to two lines. */\n description?: string;\n /** Bottom-left summary (\"16 Actions\", \"10 Selected\"). */\n countLabel?: string;\n /** A link along the bottom edge, opened in a new tab. Rendered beside the radio rather than\n * inside it, so it stays its own tab stop. */\n link?: SelectableCardLink;\n /** Top-right cluster (markers, an ActionMenu…). The eyebrow row gives way to one\n * xsmall control; a wider cluster needs a shorter eyebrow and status to clear it. */\n actions?: React.ReactNode;\n /** Renders an x after `actions`, tinted like the eyebrow, that calls this. */\n onDismiss?: () => void;\n /** Names the x for assistive tech and its tooltip. */\n dismissLabel?: string;\n /** Disables the x and shows this as its tooltip instead. */\n dismissDisabledReason?: string;\n selected?: boolean;\n /** Replaces the card's content with a centred in-progress message. */\n loading?: boolean;\n loadingLabel?: string;\n loadingHint?: string;\n /** Blocks selection. Draws no dimming of its own — a switched-off profile is signalled by its `status` tag. */\n disabled?: boolean;\n /** Mutes the title without blocking selection. */\n dimmed?: boolean;\n onSelect?: (value: string) => void;\n /** Tab stop for the card. */\n tabIndex?: number;\n /** Replaces the generated accessible name (eyebrow + title + status). */\n 'aria-label'?: string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const CARD_WIDTH_PX = 240;\nconst CARD_WIDTH = `${CARD_WIDTH_PX}px`;\nconst CARD_HEIGHT = '116px';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\n\nconst MUTED = 'var(--malachite-selectable-card-muted-foreground, #7b7b7b)';\nconst EYEBROW = 'var(--malachite-text-secondary, #7b7b7b)';\n\nconst PROFILE_ACCENT = 'var(--malachite-selectable-card-accent, #047b43)';\nconst PROFILE_TINT = 'var(--malachite-selectable-card-selected-tint, #e7f8f1)';\nconst PROFILE_SELECTED_BORDER = 'var(--malachite-selectable-card-selected-border, #047b43)';\nconst PROFILE_EYEBROW_OPACITY = 0.7;\n\nconst LIBRARY_TINT = 'var(--malachite-selectable-card-library-selected-tint, #f1f1f1)';\nconst LIBRARY_SELECTED_BORDER = 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)';\n\nconst EDITING_ACCENT = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\nconst EDITING_TINT = 'var(--malachite-selectable-card-editing-tint, #f9f2e9)';\n\nconst SELECTED_SURFACE_END = 'var(--malachite-selectable-card-selected-surface-end, #ffffff)';\n\nconst RESTING_SURFACE = 'var(--malachite-selectable-card-background, #f1f1f1)';\nconst RESTING_BORDER = '1px solid var(--malachite-selectable-card-border, #dddddd)';\n\nconst HOVER_SURFACE_FILL = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\n\n/** How far a selected card's outline sweeps past its own edge. The strip keeps this much\n * clear of its scroller's clip. */\nexport const CARD_FLARE_PX = 14;\nconst FLARE_PX = CARD_FLARE_PX;\nconst STROKE_PX = 2;\nconst CARD_HEIGHT_PX = 116;\nconst CORNER_PX = 14;\n\n/** Weight of the strip's bottom rule, which a selected card's flare reaches down through. */\nexport const STRIP_RULE_PX = 2;\n\n/** Where the strip's rule meets the flare. The stroke is centred on its path, so the tip\n * stops half a stroke inside the flare box. */\nexport const CARD_FLARE_TIP_PX = FLARE_PX - STROKE_PX / 2;\n\nconst FLARE_BOX_WIDTH = CARD_WIDTH_PX + FLARE_PX * 2;\nconst FLARE_BOX_HEIGHT = CARD_HEIGHT_PX + STRIP_RULE_PX + STROKE_PX;\n\n/** Stroke is centred on the path, so the card's own edges sit half a stroke inside the box. */\nconst pathTo = (base: number): string => {\n const inset = STROKE_PX / 2;\n const left = FLARE_PX + inset;\n const right = FLARE_PX + CARD_WIDTH_PX - inset;\n const top = inset;\n const r = CORNER_PX - inset;\n return [\n `M${left - FLARE_PX} ${base}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${left} ${base - FLARE_PX}`,\n `L${left} ${top + r}`,\n `A${r} ${r} 0 0 1 ${left + r} ${top}`,\n `L${right - r} ${top}`,\n `A${r} ${r} 0 0 1 ${right} ${top + r}`,\n `L${right} ${base - FLARE_PX}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${right + FLARE_PX} ${base}`,\n ].join(' ');\n};\n\nconst OUTLINE_PATH = pathTo(CARD_HEIGHT_PX + STRIP_RULE_PX / 2);\n\nconst FILL_PATH = `${OUTLINE_PATH} Z`;\n\nexport const FLARE_CLASS = 'malachite-selectable-card-outline';\n\nconst ROOT_CLASS = 'malachite-selectable-card';\nconst STYLE_ID = 'malachite-selectable-card-style';\n\nconst OUTLINE_PROPERTY = '--malachite-selectable-card-state-outline';\nconst TINT_PROPERTY = '--malachite-selectable-card-state-tint';\n\ntype CardState = 'resting' | 'hover' | 'selected';\ntype SettledState = Exclude<CardState, 'hover'>;\n\ntype Declarations = Record<string, string>;\n\nconst HOVER_SURFACE: Declarations = {\n 'background-color': HOVER_SURFACE_FILL,\n 'border-left-color': 'transparent',\n};\n\nconst RESTING_SURFACE_DECLARATIONS: Declarations = {\n 'background-color': RESTING_SURFACE,\n};\n\n/** Never inline styles: an inline declaration outranks the sheet, so `:hover` could never repaint the card. */\nconst SURFACES: Record<SelectableCardVariant, Record<CardState, Declarations>> = {\n profile: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: PROFILE_SELECTED_BORDER,\n [TINT_PROPERTY]: PROFILE_TINT,\n },\n },\n library: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: LIBRARY_SELECTED_BORDER,\n [TINT_PROPERTY]: LIBRARY_TINT,\n },\n },\n editing: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: EDITING_ACCENT,\n [TINT_PROPERTY]: EDITING_TINT,\n },\n },\n};\n\nconst RESTING_EYEBROW: React.CSSProperties = { color: EYEBROW };\n\nconst EYEBROWS: Record<SelectableCardVariant, Record<SettledState, React.CSSProperties>> = {\n profile: {\n resting: RESTING_EYEBROW,\n selected: { color: PROFILE_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n library: { resting: RESTING_EYEBROW, selected: RESTING_EYEBROW },\n editing: {\n resting: RESTING_EYEBROW,\n selected: { color: EDITING_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n};\n\nconst SCROLLED_SURFACE: Declarations = { 'border-left': RESTING_BORDER };\n\nconst OUTLINE_CSS = `\n.${ROOT_CLASS}[data-state='selected'] {\n z-index: 5;\n}\n.${ROOT_CLASS} > .${FLARE_CLASS} {\n position: absolute;\n left: -${FLARE_PX}px;\n top: 0;\n z-index: 0;\n overflow: visible;\n pointer-events: none;\n}\n.${ROOT_CLASS} > *:not(.${FLARE_CLASS}):not([data-selectable-card-actions]) {\n position: relative;\n z-index: 1;\n}\n.${ROOT_CLASS} > [data-selectable-card-actions] {\n z-index: 2;\n}`;\n\nconst bodyOf = (declarations: Declarations): string =>\n Object.entries(declarations)\n .map(([property, value]) => ` ${property}: ${value};`)\n .join('\\n');\n\nconst selectorFor = (variant: SelectableCardVariant, state: CardState): string =>\n state === 'hover'\n ? `.${ROOT_CLASS}[data-variant='${variant}'][data-state='resting'][data-hoverable]:hover`\n : `.${ROOT_CLASS}[data-variant='${variant}'][data-state='${state}']`;\n\nconst ruleFor = (\n variant: SelectableCardVariant,\n state: CardState,\n declarations: Declarations,\n): string => `${selectorFor(variant, state)} {\\n${bodyOf(declarations)}\\n}`;\n\nconst SURFACE_CSS = (Object.keys(SURFACES) as SelectableCardVariant[])\n .flatMap((variant) =>\n (Object.keys(SURFACES[variant]) as CardState[]).map((state) =>\n ruleFor(variant, state, SURFACES[variant][state]),\n ),\n )\n .join('\\n');\n\nconst SLOT_CSS = `.${ROOT_CLASS}[data-pinned='false'][data-state='resting'] {\\n${bodyOf(\n SCROLLED_SURFACE,\n)}\\n}`;\n\nconst CARD_CSS = `${SLOT_CSS}\\n${SURFACE_CSS}\\n${OUTLINE_CSS}`;\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n color: MUTED,\n lineHeight: 1.6,\n};\n\nconst COUNT_STYLE: React.CSSProperties = { color: MUTED, letterSpacing: '0.11px' };\n\nconst LINK_CLASS = `rounded-xs text-[length:var(--malachite-font-size-xsmall,11px)] text-[var(--malachite-text-muted,rgb(76,75,75))] no-underline transition-colors hover:text-[var(--malachite-text-primary)] ${FOCUS_RING}`;\nconst LINK_STYLE: React.CSSProperties = { lineHeight: 1.6 };\nconst LINK_ICON_STYLE: React.CSSProperties = { marginLeft: 2, verticalAlign: '-1px' };\nconst LINK_ICON_SIZE_PX = 12;\n\nconst PENDING = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\n\nconst LOADING_LABEL_STYLE: React.CSSProperties = { color: PENDING };\nconst LOADING_HINT_STYLE: React.CSSProperties = { color: PENDING, opacity: 0.7 };\n\nconst PENDING_BODY_TOP_PX = 36;\nconst PENDING_BODY_BOTTOM_PX = 38;\n\n// The 16px library icon's glyph inset, so it lines up with the text below.\nconst TITLE_ICON_INSET_PX = 2.25;\nconst TITLE_ICON_STYLE: React.CSSProperties = {\n color: 'var(--malachite-text-primary)',\n marginLeft: -TITLE_ICON_INSET_PX,\n};\n\n// Offsets the outline button's 1px drop shadow so it centres on the eyebrow.\nconst ACTIONS_STYLE: React.CSSProperties = { transform: 'translateY(-1px)' };\n\nconst DISMISS_ICON_BOX = 'inline-flex items-center justify-center [&_svg]:size-[10px]!';\nconst DISABLED_DISMISS_STYLE: React.CSSProperties = { color: MUTED };\n\nconst DEFAULT_MARKER_LABEL = 'Default profile';\nconst DEFAULT_MARKER_SIZE_PX = 16;\n// The tilted pin's glyph inset.\nconst DEFAULT_MARKER_INSET_PX = 3;\nconst DEFAULT_MARKER_STYLE: React.CSSProperties = {\n color: PROFILE_ACCENT,\n display: 'inline-flex',\n transform: 'rotate(45deg)',\n};\nconst LEADING_DEFAULT_MARKER_STYLE: React.CSSProperties = {\n ...DEFAULT_MARKER_STYLE,\n marginLeft: -DEFAULT_MARKER_INSET_PX,\n};\n\n/** Announced rather than shown alone: a bare glyph reads as an unnamed graphic, and the tooltip\n * travels by `aria-describedby`, which describes rather than names. */\nconst DefaultMarker: React.FC<{ leading: boolean }> = ({ leading }) => (\n <Tooltip text={DEFAULT_MARKER_LABEL} triggerAs=\"span\" describesTrigger={false}>\n <span\n role=\"img\"\n aria-label={DEFAULT_MARKER_LABEL}\n style={leading ? LEADING_DEFAULT_MARKER_STYLE : DEFAULT_MARKER_STYLE}\n >\n <PinIcon size={DEFAULT_MARKER_SIZE_PX} />\n </span>\n </Tooltip>\n);\n\nconst joinIds = (ids: Array<string | undefined>): string | undefined => {\n const present = ids.filter((id): id is string => id !== undefined);\n return present.length > 0 ? present.join(' ') : undefined;\n};\n\n/** A fixed-size card that behaves as one option in a radio group: a card-shaped `Surface.Row`. */\nconst SelectableCard: React.FC<SelectableCardProps> = ({\n value,\n title,\n titleIcon,\n isDefault = false,\n variant = 'profile',\n eyebrow,\n status,\n description,\n countLabel,\n link,\n actions,\n onDismiss,\n dismissLabel = 'Dismiss',\n dismissDisabledReason,\n selected = false,\n loading = false,\n loadingLabel = 'Loading…',\n loadingHint,\n disabled = false,\n dimmed = false,\n onSelect,\n tabIndex,\n 'aria-label': ariaLabel,\n className = '',\n style,\n}) => {\n const { pinned } = useCardStripSlot();\n const hoverable = !selected && !disabled;\n\n const rootRef = useRef<HTMLDivElement>(null);\n useAdoptedStyleSheet(rootRef, CARD_CSS, STYLE_ID);\n\n const instanceId = `mal-selectable-card-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;\n const outlineGradientId = `${instanceId}-outline`;\n const eyebrowId = `${instanceId}-eyebrow`;\n const statusId = `${instanceId}-status`;\n const titleId = `${instanceId}-title`;\n const descriptionId = `${instanceId}-description`;\n const countId = `${instanceId}-count`;\n\n const labelledBy = ariaLabel\n ? undefined\n : joinIds([eyebrow ? eyebrowId : undefined, titleId, status ? statusId : undefined]);\n const describedBy = joinIds([\n description ? descriptionId : undefined,\n countLabel ? countId : undefined,\n ]);\n\n if (loading) {\n return (\n <div\n ref={rootRef}\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n data-variant=\"editing\"\n data-state=\"selected\"\n className={`${ROOT_CLASS} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${className}`.trim()}\n style={\n {\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n paddingTop: `${PENDING_BODY_TOP_PX}px`,\n paddingBottom: `${PENDING_BODY_BOTTOM_PX}px`,\n justifyContent: 'center',\n [OUTLINE_PROPERTY]: PENDING,\n [TINT_PROPERTY]: EDITING_TINT,\n ...style,\n } as React.CSSProperties\n }\n >\n {/* The same outline a selected card wears: this IS the selection while a profile\n is being built, so it has to break the strip's rule rather than sit on it. */}\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n <Text size=\"small\" fontWeight=\"semi-bold\" style={LOADING_LABEL_STYLE}>\n {loadingLabel}\n </Text>\n {loadingHint ? (\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={LOADING_HINT_STYLE}>\n {loadingHint}\n </Text>\n ) : null}\n </div>\n );\n }\n\n const titleInTopRow = variant === 'library';\n\n const eyebrowStyle = EYEBROWS[variant][selected ? 'selected' : 'resting'];\n const hasCornerCluster = Boolean(actions) || Boolean(onDismiss);\n const isDismissDisabled = dismissDisabledReason !== undefined;\n const eyebrowRowEnd =\n actions && onDismiss ? 'pr-[48px]' : hasCornerCluster ? 'pr-[18px]' : 'pr-1';\n\n return (\n <div\n ref={rootRef}\n data-variant={variant}\n data-pinned={pinned ? 'true' : 'false'}\n data-state={selected ? 'selected' : 'resting'}\n data-hoverable={hoverable ? '' : undefined}\n className={`${ROOT_CLASS} group relative grid shrink-0 grid-rows-[1fr_auto] ${FOCUS_RING_WITHIN_RADIO} ${className}`.trim()}\n style={{\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n ...style,\n }}\n >\n {selected ? (\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n ) : null}\n <button\n type=\"button\"\n role=\"radio\"\n data-value={value}\n aria-checked={selected}\n aria-label={ariaLabel}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n aria-disabled={disabled || undefined}\n tabIndex={tabIndex ?? (selected ? 0 : -1)}\n onClick={() => {\n if (disabled || selected) {\n return;\n }\n onSelect?.(value);\n }}\n className={`flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n }`}\n style={{ borderRadius: CARD_RADIUS }}\n >\n {/* Clears the corner buttons: 18px for one, 48px for `actions` and the x. */}\n <div className={`flex h-[13px] shrink-0 items-center gap-2 ${eyebrowRowEnd}`}>\n <div className=\"flex min-w-0 items-center gap-1.5\">\n {titleInTopRow ? (\n <span id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker leading={!titleIcon} />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </span>\n ) : null}\n {eyebrow ? (\n <span id={eyebrowId} className=\"flex min-w-0\">\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={eyebrowStyle}>\n {eyebrow}\n </Text>\n </span>\n ) : null}\n {status ? (\n <span id={statusId} className=\"flex min-w-0\">\n <Tag\n value={status.label}\n type={status.type ?? 'default'}\n textTransform=\"none\"\n paddingSize=\"compact\"\n />\n </span>\n ) : null}\n </div>\n </div>\n\n <div\n className={`mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${\n titleInTopRow ? 'justify-end' : 'justify-between'\n }`}\n >\n {titleInTopRow ? null : (\n <div id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker leading={!titleIcon} />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </div>\n )}\n {description ? (\n <span id={descriptionId} className=\"block min-w-0\">\n <Text size=\"xsmall\" style={DESCRIPTION_STYLE}>\n {description}\n </Text>\n </span>\n ) : null}\n </div>\n </button>\n\n <div className=\"flex min-w-0 flex-col gap-1 self-end pr-4 pb-3 pl-4\">\n {link ? (\n <span className=\"min-w-0\" style={LINK_STYLE}>\n <a\n href={link.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={LINK_CLASS}\n data-selectable-card-link=\"\"\n >\n {link.label}\n <span aria-hidden=\"true\">\n <ExternalLinkIcon\n size={LINK_ICON_SIZE_PX}\n style={LINK_ICON_STYLE}\n />\n </span>{' '}\n <span className=\"sr-only\">(opens in a new tab)</span>\n </a>\n </span>\n ) : null}\n {countLabel ? (\n <span id={countId} className=\"min-w-0 truncate\">\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={COUNT_STYLE}>\n {countLabel}\n </Text>\n </span>\n ) : null}\n </div>\n\n {/* Lifted out of the flow rather than given a grid cell, so it can sit on the\n eyebrow row — which belongs to the control and cannot hold a second one. */}\n {hasCornerCluster ? (\n <div\n data-selectable-card-actions=\"\"\n className=\"absolute top-3 right-2 flex h-[13px] shrink-0 items-center gap-2.5\"\n >\n {actions ? (\n <span className=\"flex items-center gap-2.5\" style={ACTIONS_STYLE}>\n {actions}\n </span>\n ) : null}\n {onDismiss ? (\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"xsmall\"\n iconOnly\n aria-label={dismissLabel}\n tooltip={dismissDisabledReason ?? dismissLabel}\n disabled={isDismissDisabled}\n className=\"shrink-0\"\n onClick={onDismiss}\n >\n <span\n className={DISMISS_ICON_BOX}\n style={isDismissDisabled ? DISABLED_DISMISS_STYLE : eyebrowStyle}\n >\n <DismissIcon />\n </span>\n </Button>\n ) : null}\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default SelectableCard;\nexport { SelectableCard };\n"],"names":["CARD_WIDTH_PX","CARD_WIDTH","CARD_HEIGHT","CARD_CORNER","CARD_RADIUS","MUTED","EYEBROW","PROFILE_ACCENT","PROFILE_TINT","PROFILE_SELECTED_BORDER","PROFILE_EYEBROW_OPACITY","LIBRARY_TINT","LIBRARY_SELECTED_BORDER","EDITING_ACCENT","EDITING_TINT","SELECTED_SURFACE_END","RESTING_SURFACE","RESTING_BORDER","HOVER_SURFACE_FILL","CARD_FLARE_PX","FLARE_PX","STROKE_PX","CARD_HEIGHT_PX","CORNER_PX","STRIP_RULE_PX","CARD_FLARE_TIP_PX","FLARE_BOX_WIDTH","FLARE_BOX_HEIGHT","pathTo","base","inset","left","right","top","r","OUTLINE_PATH","FILL_PATH","FLARE_CLASS","ROOT_CLASS","STYLE_ID","OUTLINE_PROPERTY","TINT_PROPERTY","HOVER_SURFACE","RESTING_SURFACE_DECLARATIONS","SURFACES","RESTING_EYEBROW","EYEBROWS","SCROLLED_SURFACE","OUTLINE_CSS","bodyOf","declarations","property","value","selectorFor","variant","state","ruleFor","SURFACE_CSS","SLOT_CSS","CARD_CSS","DESCRIPTION_STYLE","COUNT_STYLE","LINK_CLASS","FOCUS_RING","LINK_STYLE","LINK_ICON_STYLE","LINK_ICON_SIZE_PX","PENDING","LOADING_LABEL_STYLE","LOADING_HINT_STYLE","PENDING_BODY_TOP_PX","PENDING_BODY_BOTTOM_PX","TITLE_ICON_STYLE","ACTIONS_STYLE","DISMISS_ICON_BOX","DISABLED_DISMISS_STYLE","DEFAULT_MARKER_LABEL","DEFAULT_MARKER_SIZE_PX","DEFAULT_MARKER_STYLE","LEADING_DEFAULT_MARKER_STYLE","DefaultMarker","leading","jsx","Tooltip","PinIcon","joinIds","ids","present","id","SelectableCard","title","titleIcon","isDefault","eyebrow","status","description","countLabel","link","actions","onDismiss","dismissLabel","dismissDisabledReason","selected","loading","loadingLabel","loadingHint","disabled","dimmed","onSelect","tabIndex","ariaLabel","className","style","pinned","useCardStripSlot","hoverable","rootRef","useRef","useAdoptedStyleSheet","instanceId","useId","outlineGradientId","eyebrowId","statusId","titleId","descriptionId","countId","labelledBy","describedBy","jsxs","Text","titleInTopRow","eyebrowStyle","hasCornerCluster","isDismissDisabled","eyebrowRowEnd","FOCUS_RING_WITHIN_RADIO","TruncatedTooltip","Tag","ExternalLinkIcon","Button","DismissIcon"],"mappings":"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"}
1
+ {"version":3,"file":"SelectableCard.js","sources":["../../src/components/SelectableCard.tsx"],"sourcesContent":["import React, { useEffect, useId, useRef, useState } from 'react';\nimport Button from './Button';\nimport CheckIcon from './CustomIcons/CheckIcon';\nimport CopyIcon from './CustomIcons/CopyIcon';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport ExternalLinkIcon from './CustomIcons/ExternalLinkIcon';\nimport GlobeIcon from './CustomIcons/GlobeIcon';\nimport PinIcon from './CustomIcons/PinIcon';\nimport Tag, { type TagType } from './Tag';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport Text from './Typography/Text';\nimport { useCardStripSlot } from './cardStripSlot';\nimport { FOCUS_RING, FOCUS_RING_WITHIN_RADIO } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport interface SelectableCardStatus {\n label: string;\n /** Maps to Tag's palette — `default` (grey) for \"Disabled\", `warning` (amber) for \"Draft\". */\n type?: TagType;\n}\n\nexport interface SelectableCardLink {\n label: string;\n href: string;\n}\n\n/** A copyable address, such as a server URL: `label` is what fits on the card (its host, say),\n * `value` the full address shown on hover and copied on click. */\nexport interface SelectableCardAddress {\n label: string;\n value: string;\n}\n\n/** The card's palette: `profile` is green, `library` neutral, `editing` amber for a\n * profile with unsaved changes. */\nexport type SelectableCardVariant = 'profile' | 'library' | 'editing';\n\nexport interface SelectableCardProps {\n /** Identifies the card inside its group; handed back to `onSelect`. */\n value: string;\n title: string;\n /** Leading glyph on the title line, e.g. a library/book icon. */\n titleIcon?: React.ReactNode;\n /** Pins the card as the account default, marked beside the title. */\n isDefault?: boolean;\n /** Palette only — gradient, borders, indicator and eyebrow; position is settled by the strip. */\n variant?: SelectableCardVariant;\n /** Small label above the title (\"Profile\", \"Explore\"). */\n eyebrow?: string;\n /** Status pill rendered next to the eyebrow — or in its place when there is no eyebrow. */\n status?: SelectableCardStatus;\n /** Supporting copy under the title, clamped to two lines. */\n description?: string;\n /** A one-line chip above the count that copies its `value` on click. Takes the place of\n * `description`, which is not shown while it is set: the card has room for one or the other. */\n address?: SelectableCardAddress;\n /** Bottom-left summary (\"16 Actions\", \"10 Selected\"). */\n countLabel?: string;\n /** A link along the bottom edge, opened in a new tab. Rendered beside the radio rather than\n * inside it, so it stays its own tab stop. */\n link?: SelectableCardLink;\n /** Top-right cluster (markers, an ActionMenu…). The eyebrow row gives way to one\n * xsmall control; a wider cluster needs a shorter eyebrow and status to clear it. */\n actions?: React.ReactNode;\n /** Renders an x after `actions`, tinted like the eyebrow, that calls this. */\n onDismiss?: () => void;\n /** Names the x for assistive tech and its tooltip. */\n dismissLabel?: string;\n /** Disables the x and shows this as its tooltip instead. */\n dismissDisabledReason?: string;\n selected?: boolean;\n /** Replaces the card's content with a centred in-progress message. */\n loading?: boolean;\n loadingLabel?: string;\n loadingHint?: string;\n /** Blocks selection. Draws no dimming of its own — a switched-off profile is signalled by its `status` tag. */\n disabled?: boolean;\n /** Mutes the title without blocking selection. */\n dimmed?: boolean;\n onSelect?: (value: string) => void;\n /** Tab stop for the card. */\n tabIndex?: number;\n /** Replaces the generated accessible name (eyebrow + title + status). */\n 'aria-label'?: string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const CARD_WIDTH_PX = 240;\nconst CARD_WIDTH = `${CARD_WIDTH_PX}px`;\nconst CARD_HEIGHT = '116px';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\n\nconst MUTED = 'var(--malachite-selectable-card-muted-foreground, #7b7b7b)';\nconst EYEBROW = 'var(--malachite-text-secondary, #7b7b7b)';\n\nconst PROFILE_ACCENT = 'var(--malachite-selectable-card-accent, #047b43)';\nconst PROFILE_TINT = 'var(--malachite-selectable-card-selected-tint, #e7f8f1)';\nconst PROFILE_SELECTED_BORDER = 'var(--malachite-selectable-card-selected-border, #047b43)';\nconst PROFILE_EYEBROW_OPACITY = 0.7;\n\nconst LIBRARY_TINT = 'var(--malachite-selectable-card-library-selected-tint, #f1f1f1)';\nconst LIBRARY_SELECTED_BORDER = 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)';\n\nconst EDITING_ACCENT = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\nconst EDITING_TINT = 'var(--malachite-selectable-card-editing-tint, #f9f2e9)';\n\nconst SELECTED_SURFACE_END = 'var(--malachite-selectable-card-selected-surface-end, #ffffff)';\n\nconst RESTING_SURFACE = 'var(--malachite-selectable-card-background, #f1f1f1)';\nconst RESTING_BORDER = '1px solid var(--malachite-selectable-card-border, #dddddd)';\n\nconst HOVER_SURFACE_FILL = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\n\n/** How far a selected card's outline sweeps past its own edge. The strip keeps this much\n * clear of its scroller's clip. */\nexport const CARD_FLARE_PX = 14;\nconst FLARE_PX = CARD_FLARE_PX;\nconst STROKE_PX = 2;\nconst CARD_HEIGHT_PX = 116;\nconst CORNER_PX = 14;\n\n/** Weight of the strip's bottom rule, which a selected card's flare reaches down through. */\nexport const STRIP_RULE_PX = 2;\n\n/** Where the strip's rule meets the flare. The stroke is centred on its path, so the tip\n * stops half a stroke inside the flare box. */\nexport const CARD_FLARE_TIP_PX = FLARE_PX - STROKE_PX / 2;\n\nconst FLARE_BOX_WIDTH = CARD_WIDTH_PX + FLARE_PX * 2;\nconst FLARE_BOX_HEIGHT = CARD_HEIGHT_PX + STRIP_RULE_PX + STROKE_PX;\n\n/** Stroke is centred on the path, so the card's own edges sit half a stroke inside the box. */\nconst pathTo = (base: number): string => {\n const inset = STROKE_PX / 2;\n const left = FLARE_PX + inset;\n const right = FLARE_PX + CARD_WIDTH_PX - inset;\n const top = inset;\n const r = CORNER_PX - inset;\n return [\n `M${left - FLARE_PX} ${base}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${left} ${base - FLARE_PX}`,\n `L${left} ${top + r}`,\n `A${r} ${r} 0 0 1 ${left + r} ${top}`,\n `L${right - r} ${top}`,\n `A${r} ${r} 0 0 1 ${right} ${top + r}`,\n `L${right} ${base - FLARE_PX}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${right + FLARE_PX} ${base}`,\n ].join(' ');\n};\n\nconst OUTLINE_PATH = pathTo(CARD_HEIGHT_PX + STRIP_RULE_PX / 2);\n\nconst FILL_PATH = `${OUTLINE_PATH} Z`;\n\nexport const FLARE_CLASS = 'malachite-selectable-card-outline';\n\nconst ROOT_CLASS = 'malachite-selectable-card';\nconst STYLE_ID = 'malachite-selectable-card-style';\n\nconst OUTLINE_PROPERTY = '--malachite-selectable-card-state-outline';\nconst TINT_PROPERTY = '--malachite-selectable-card-state-tint';\n\ntype CardState = 'resting' | 'hover' | 'selected';\ntype SettledState = Exclude<CardState, 'hover'>;\n\ntype Declarations = Record<string, string>;\n\nconst HOVER_SURFACE: Declarations = {\n 'background-color': HOVER_SURFACE_FILL,\n 'border-left-color': 'transparent',\n};\n\nconst RESTING_SURFACE_DECLARATIONS: Declarations = {\n 'background-color': RESTING_SURFACE,\n};\n\n/** Never inline styles: an inline declaration outranks the sheet, so `:hover` could never repaint the card. */\nconst SURFACES: Record<SelectableCardVariant, Record<CardState, Declarations>> = {\n profile: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: PROFILE_SELECTED_BORDER,\n [TINT_PROPERTY]: PROFILE_TINT,\n },\n },\n library: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: LIBRARY_SELECTED_BORDER,\n [TINT_PROPERTY]: LIBRARY_TINT,\n },\n },\n editing: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: EDITING_ACCENT,\n [TINT_PROPERTY]: EDITING_TINT,\n },\n },\n};\n\nconst RESTING_EYEBROW: React.CSSProperties = { color: EYEBROW };\n\nconst EYEBROWS: Record<SelectableCardVariant, Record<SettledState, React.CSSProperties>> = {\n profile: {\n resting: RESTING_EYEBROW,\n selected: { color: PROFILE_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n library: { resting: RESTING_EYEBROW, selected: RESTING_EYEBROW },\n editing: {\n resting: RESTING_EYEBROW,\n selected: { color: EDITING_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n};\n\nconst SCROLLED_SURFACE: Declarations = { 'border-left': RESTING_BORDER };\n\nconst OUTLINE_CSS = `\n.${ROOT_CLASS}[data-state='selected'] {\n z-index: 5;\n}\n.${ROOT_CLASS} > .${FLARE_CLASS} {\n position: absolute;\n left: -${FLARE_PX}px;\n top: 0;\n z-index: 0;\n overflow: visible;\n pointer-events: none;\n}\n.${ROOT_CLASS} > *:not(.${FLARE_CLASS}):not([data-selectable-card-actions]) {\n position: relative;\n z-index: 1;\n}\n.${ROOT_CLASS} > [data-selectable-card-actions] {\n z-index: 2;\n}`;\n\nconst bodyOf = (declarations: Declarations): string =>\n Object.entries(declarations)\n .map(([property, value]) => ` ${property}: ${value};`)\n .join('\\n');\n\nconst selectorFor = (variant: SelectableCardVariant, state: CardState): string =>\n state === 'hover'\n ? `.${ROOT_CLASS}[data-variant='${variant}'][data-state='resting'][data-hoverable]:hover`\n : `.${ROOT_CLASS}[data-variant='${variant}'][data-state='${state}']`;\n\nconst ruleFor = (\n variant: SelectableCardVariant,\n state: CardState,\n declarations: Declarations,\n): string => `${selectorFor(variant, state)} {\\n${bodyOf(declarations)}\\n}`;\n\nconst SURFACE_CSS = (Object.keys(SURFACES) as SelectableCardVariant[])\n .flatMap((variant) =>\n (Object.keys(SURFACES[variant]) as CardState[]).map((state) =>\n ruleFor(variant, state, SURFACES[variant][state]),\n ),\n )\n .join('\\n');\n\nconst SLOT_CSS = `.${ROOT_CLASS}[data-pinned='false'][data-state='resting'] {\\n${bodyOf(\n SCROLLED_SURFACE,\n)}\\n}`;\n\nconst CARD_CSS = `${SLOT_CSS}\\n${SURFACE_CSS}\\n${OUTLINE_CSS}`;\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n color: MUTED,\n lineHeight: 1.6,\n};\n\nconst COUNT_STYLE: React.CSSProperties = { color: MUTED, letterSpacing: '0.11px' };\n\nconst LINK_CLASS = `rounded-xs text-[length:var(--malachite-font-size-xsmall,11px)] text-[var(--malachite-text-muted,rgb(76,75,75))] no-underline transition-colors hover:text-[var(--malachite-text-primary)] ${FOCUS_RING}`;\nconst LINK_STYLE: React.CSSProperties = { lineHeight: 1.6 };\nconst LINK_ICON_STYLE: React.CSSProperties = { marginLeft: 2, verticalAlign: '-1px' };\nconst LINK_ICON_SIZE_PX = 12;\n\nconst ADDRESS_CLASS = `inline-flex h-4 max-w-full min-w-0 cursor-pointer items-center gap-1 self-start rounded-[5px] border-0 bg-[var(--malachite-tag-default-background,rgba(123,123,123,0.1))] px-1.5 text-[length:var(--malachite-font-size-xsmall,11px)] text-[var(--malachite-selectable-card-muted-foreground,#7b7b7b)] transition-colors hover:text-[var(--malachite-text-primary)] hover:[background-image:linear-gradient(var(--malachite-tag-default-background,rgba(123,123,123,0.1)),var(--malachite-tag-default-background,rgba(123,123,123,0.1)))] ${FOCUS_RING}`;\nconst ADDRESS_ICON_PX = 11;\nconst COPIED_FEEDBACK_MS = 1200;\n// Inline: the tooltip is portaled outside the shadow root, where utility classes do not apply.\nconst ADDRESS_TIP_STYLE: React.CSSProperties = {\n display: 'inline-flex',\n alignItems: 'center',\n gap: 8,\n};\nconst ADDRESS_TIP_VALUE_STYLE: React.CSSProperties = {\n fontFamily: 'var(--malachite-font-mono, monospace)',\n fontSize: 'var(--malachite-font-size-xsmall, 11px)',\n overflowWrap: 'anywhere',\n};\nconst ADDRESS_ICON_STYLE: React.CSSProperties = { flexShrink: 0 };\n\nconst PENDING = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\n\nconst LOADING_LABEL_STYLE: React.CSSProperties = { color: PENDING };\nconst LOADING_HINT_STYLE: React.CSSProperties = { color: PENDING, opacity: 0.7 };\n\nconst PENDING_BODY_TOP_PX = 36;\nconst PENDING_BODY_BOTTOM_PX = 38;\n\n// The 16px library icon's glyph inset, so it lines up with the text below.\nconst TITLE_ICON_INSET_PX = 2.25;\nconst TITLE_ICON_STYLE: React.CSSProperties = {\n color: 'var(--malachite-text-primary)',\n marginLeft: -TITLE_ICON_INSET_PX,\n};\n\n// Offsets the outline button's 1px drop shadow so it centres on the eyebrow.\nconst ACTIONS_STYLE: React.CSSProperties = { transform: 'translateY(-1px)' };\n\nconst DISMISS_ICON_BOX = 'inline-flex items-center justify-center [&_svg]:size-[10px]!';\nconst DISABLED_DISMISS_STYLE: React.CSSProperties = { color: MUTED };\n\nconst DEFAULT_MARKER_LABEL = 'Default profile';\nconst DEFAULT_MARKER_SIZE_PX = 16;\n// The tilted pin's glyph inset.\nconst DEFAULT_MARKER_INSET_PX = 3;\nconst DEFAULT_MARKER_STYLE: React.CSSProperties = {\n color: PROFILE_ACCENT,\n display: 'inline-flex',\n transform: 'rotate(45deg)',\n};\nconst LEADING_DEFAULT_MARKER_STYLE: React.CSSProperties = {\n ...DEFAULT_MARKER_STYLE,\n marginLeft: -DEFAULT_MARKER_INSET_PX,\n};\n\n/** Announced rather than shown alone: a bare glyph reads as an unnamed graphic, and the tooltip\n * travels by `aria-describedby`, which describes rather than names. */\nconst DefaultMarker: React.FC<{ leading: boolean }> = ({ leading }) => (\n <Tooltip text={DEFAULT_MARKER_LABEL} triggerAs=\"span\" describesTrigger={false}>\n <span\n role=\"img\"\n aria-label={DEFAULT_MARKER_LABEL}\n style={leading ? LEADING_DEFAULT_MARKER_STYLE : DEFAULT_MARKER_STYLE}\n >\n <PinIcon size={DEFAULT_MARKER_SIZE_PX} />\n </span>\n </Tooltip>\n);\n\nconst AddressChip: React.FC<{\n address: SelectableCardAddress;\n labelId: string;\n tuckIntoCount: boolean;\n}> = ({ address, labelId, tuckIntoCount }) => {\n // A fresh timestamp per copy restarts the timer, so a second copy gets its full second.\n const [copiedAt, setCopiedAt] = useState<number | null>(null);\n const copied = copiedAt !== null;\n useEffect(() => {\n if (copiedAt === null) {\n return undefined;\n }\n const timer = setTimeout(() => setCopiedAt(null), COPIED_FEEDBACK_MS);\n return () => clearTimeout(timer);\n }, [copiedAt]);\n\n const tip = copied ? (\n <span style={ADDRESS_TIP_STYLE}>\n <CheckIcon size={ADDRESS_ICON_PX} style={ADDRESS_ICON_STYLE} />\n Copied\n </span>\n ) : (\n <span style={ADDRESS_TIP_STYLE}>\n <span style={ADDRESS_TIP_VALUE_STYLE}>{address.value}</span>\n <CopyIcon size={ADDRESS_ICON_PX} style={ADDRESS_ICON_STYLE} />\n </span>\n );\n\n // items-start keeps the tooltip trigger to the chip's width rather than the row's, so it\n // opens over the chip; max-w-full still lets a long label shrink and truncate. Directly above\n // the count, the negative margin tucks the chip into the count's leading, so the count stays\n // level with the count of a card without an address; above a link it would overlap the link.\n return (\n <span\n className={`${tuckIntoCount ? '-mb-[7px] ' : ''}flex min-w-0 flex-col items-start *:max-w-full`}\n >\n <Tooltip text={tip} triggerAs=\"span\" describesTrigger={false} placement=\"bottom\">\n <button\n type=\"button\"\n aria-label={`Copy ${address.value}`}\n data-selectable-card-address=\"\"\n className={ADDRESS_CLASS}\n onClick={() => {\n // `?.` no-ops when the clipboard API is absent (insecure context).\n navigator.clipboard?.writeText(address.value)?.then(\n () => setCopiedAt(Date.now()),\n () => undefined,\n );\n }}\n >\n <GlobeIcon size={ADDRESS_ICON_PX} style={ADDRESS_ICON_STYLE} />\n <span id={labelId} className=\"min-w-0 truncate\">\n {address.label}\n </span>\n </button>\n </Tooltip>\n {/* The tooltip is hidden from assistive tech, so the confirmation is announced here. */}\n <span role=\"status\" className=\"sr-only\">\n {copied ? 'Copied' : ''}\n </span>\n </span>\n );\n};\n\nconst joinIds = (ids: Array<string | undefined>): string | undefined => {\n const present = ids.filter((id): id is string => id !== undefined);\n return present.length > 0 ? present.join(' ') : undefined;\n};\n\n/** A fixed-size card that behaves as one option in a radio group: a card-shaped `Surface.Row`. */\nconst SelectableCard: React.FC<SelectableCardProps> = ({\n value,\n title,\n titleIcon,\n isDefault = false,\n variant = 'profile',\n eyebrow,\n status,\n description,\n address,\n countLabel,\n link,\n actions,\n onDismiss,\n dismissLabel = 'Dismiss',\n dismissDisabledReason,\n selected = false,\n loading = false,\n loadingLabel = 'Loading…',\n loadingHint,\n disabled = false,\n dimmed = false,\n onSelect,\n tabIndex,\n 'aria-label': ariaLabel,\n className = '',\n style,\n}) => {\n const { pinned } = useCardStripSlot();\n const hoverable = !selected && !disabled;\n\n const rootRef = useRef<HTMLDivElement>(null);\n useAdoptedStyleSheet(rootRef, CARD_CSS, STYLE_ID);\n\n const instanceId = `mal-selectable-card-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;\n const outlineGradientId = `${instanceId}-outline`;\n const eyebrowId = `${instanceId}-eyebrow`;\n const statusId = `${instanceId}-status`;\n const titleId = `${instanceId}-title`;\n const descriptionId = `${instanceId}-description`;\n const shownDescription = address ? undefined : description;\n const countId = `${instanceId}-count`;\n const addressId = `${instanceId}-address`;\n\n const labelledBy = ariaLabel\n ? undefined\n : joinIds([eyebrow ? eyebrowId : undefined, titleId, status ? statusId : undefined]);\n const describedBy = joinIds([\n shownDescription ? descriptionId : undefined,\n address ? addressId : undefined,\n countLabel ? countId : undefined,\n ]);\n\n if (loading) {\n return (\n <div\n ref={rootRef}\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n data-variant=\"editing\"\n data-state=\"selected\"\n className={`${ROOT_CLASS} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${className}`.trim()}\n style={\n {\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n paddingTop: `${PENDING_BODY_TOP_PX}px`,\n paddingBottom: `${PENDING_BODY_BOTTOM_PX}px`,\n justifyContent: 'center',\n [OUTLINE_PROPERTY]: PENDING,\n [TINT_PROPERTY]: EDITING_TINT,\n ...style,\n } as React.CSSProperties\n }\n >\n {/* The same outline a selected card wears: this IS the selection while a profile\n is being built, so it has to break the strip's rule rather than sit on it. */}\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n <Text size=\"small\" fontWeight=\"semi-bold\" style={LOADING_LABEL_STYLE}>\n {loadingLabel}\n </Text>\n {loadingHint ? (\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={LOADING_HINT_STYLE}>\n {loadingHint}\n </Text>\n ) : null}\n </div>\n );\n }\n\n const titleInTopRow = variant === 'library';\n\n const eyebrowStyle = EYEBROWS[variant][selected ? 'selected' : 'resting'];\n const hasCornerCluster = Boolean(actions) || Boolean(onDismiss);\n const isDismissDisabled = dismissDisabledReason !== undefined;\n const eyebrowRowEnd =\n actions && onDismiss ? 'pr-[48px]' : hasCornerCluster ? 'pr-[18px]' : 'pr-1';\n\n return (\n <div\n ref={rootRef}\n data-variant={variant}\n data-pinned={pinned ? 'true' : 'false'}\n data-state={selected ? 'selected' : 'resting'}\n data-hoverable={hoverable ? '' : undefined}\n className={`${ROOT_CLASS} group relative grid shrink-0 grid-rows-[1fr_auto] ${FOCUS_RING_WITHIN_RADIO} ${className}`.trim()}\n style={{\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n ...style,\n }}\n >\n {selected ? (\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n ) : null}\n <button\n type=\"button\"\n role=\"radio\"\n data-value={value}\n aria-checked={selected}\n aria-label={ariaLabel}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n aria-disabled={disabled || undefined}\n tabIndex={tabIndex ?? (selected ? 0 : -1)}\n onClick={() => {\n if (disabled || selected) {\n return;\n }\n onSelect?.(value);\n }}\n className={`flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n }`}\n style={{ borderRadius: CARD_RADIUS }}\n >\n {/* Clears the corner buttons: 18px for one, 48px for `actions` and the x. */}\n <div className={`flex h-[13px] shrink-0 items-center gap-2 ${eyebrowRowEnd}`}>\n <div className=\"flex min-w-0 items-center gap-1.5\">\n {titleInTopRow ? (\n <span id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker leading={!titleIcon} />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </span>\n ) : null}\n {eyebrow ? (\n <span id={eyebrowId} className=\"flex min-w-0\">\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={eyebrowStyle}>\n {eyebrow}\n </Text>\n </span>\n ) : null}\n {status ? (\n <span id={statusId} className=\"flex min-w-0\">\n <Tag\n value={status.label}\n type={status.type ?? 'default'}\n textTransform=\"none\"\n paddingSize=\"compact\"\n />\n </span>\n ) : null}\n </div>\n </div>\n\n <div\n className={`mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${\n titleInTopRow ? 'justify-end' : 'justify-between'\n }`}\n >\n {titleInTopRow ? null : (\n <div id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker leading={!titleIcon} />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </div>\n )}\n {shownDescription ? (\n <span id={descriptionId} className=\"block min-w-0\">\n <Text size=\"xsmall\" style={DESCRIPTION_STYLE}>\n {shownDescription}\n </Text>\n </span>\n ) : null}\n </div>\n </button>\n\n <div className=\"flex min-w-0 flex-col gap-1 self-end pr-4 pb-3 pl-4\">\n {address ? (\n <AddressChip\n key={address.value}\n address={address}\n labelId={addressId}\n tuckIntoCount={!link && Boolean(countLabel)}\n />\n ) : null}\n {link ? (\n <span className=\"min-w-0\" style={LINK_STYLE}>\n <a\n href={link.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={LINK_CLASS}\n data-selectable-card-link=\"\"\n >\n {link.label}\n <span aria-hidden=\"true\">\n <ExternalLinkIcon\n size={LINK_ICON_SIZE_PX}\n style={LINK_ICON_STYLE}\n />\n </span>{' '}\n <span className=\"sr-only\">(opens in a new tab)</span>\n </a>\n </span>\n ) : null}\n {countLabel ? (\n <span id={countId} className=\"min-w-0 truncate\">\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={COUNT_STYLE}>\n {countLabel}\n </Text>\n </span>\n ) : null}\n </div>\n\n {/* Lifted out of the flow rather than given a grid cell, so it can sit on the\n eyebrow row — which belongs to the control and cannot hold a second one. */}\n {hasCornerCluster ? (\n <div\n data-selectable-card-actions=\"\"\n className=\"absolute top-3 right-2 flex h-[13px] shrink-0 items-center gap-2.5\"\n >\n {actions ? (\n <span className=\"flex items-center gap-2.5\" style={ACTIONS_STYLE}>\n {actions}\n </span>\n ) : null}\n {onDismiss ? (\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"xsmall\"\n iconOnly\n aria-label={dismissLabel}\n tooltip={dismissDisabledReason ?? dismissLabel}\n disabled={isDismissDisabled}\n className=\"shrink-0\"\n onClick={onDismiss}\n >\n <span\n className={DISMISS_ICON_BOX}\n style={isDismissDisabled ? DISABLED_DISMISS_STYLE : eyebrowStyle}\n >\n <DismissIcon />\n </span>\n </Button>\n ) : null}\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default SelectableCard;\nexport { SelectableCard };\n"],"names":["CARD_WIDTH_PX","CARD_WIDTH","CARD_HEIGHT","CARD_CORNER","CARD_RADIUS","MUTED","EYEBROW","PROFILE_ACCENT","PROFILE_TINT","PROFILE_SELECTED_BORDER","PROFILE_EYEBROW_OPACITY","LIBRARY_TINT","LIBRARY_SELECTED_BORDER","EDITING_ACCENT","EDITING_TINT","SELECTED_SURFACE_END","RESTING_SURFACE","RESTING_BORDER","HOVER_SURFACE_FILL","CARD_FLARE_PX","FLARE_PX","STROKE_PX","CARD_HEIGHT_PX","CORNER_PX","STRIP_RULE_PX","CARD_FLARE_TIP_PX","FLARE_BOX_WIDTH","FLARE_BOX_HEIGHT","pathTo","base","inset","left","right","top","OUTLINE_PATH","FILL_PATH","FLARE_CLASS","ROOT_CLASS","STYLE_ID","OUTLINE_PROPERTY","TINT_PROPERTY","HOVER_SURFACE","RESTING_SURFACE_DECLARATIONS","SURFACES","RESTING_EYEBROW","EYEBROWS","SCROLLED_SURFACE","OUTLINE_CSS","bodyOf","declarations","property","value","selectorFor","variant","state","ruleFor","SURFACE_CSS","SLOT_CSS","CARD_CSS","DESCRIPTION_STYLE","COUNT_STYLE","LINK_CLASS","FOCUS_RING","LINK_STYLE","LINK_ICON_STYLE","LINK_ICON_SIZE_PX","ADDRESS_CLASS","ADDRESS_ICON_PX","COPIED_FEEDBACK_MS","ADDRESS_TIP_STYLE","ADDRESS_TIP_VALUE_STYLE","ADDRESS_ICON_STYLE","PENDING","LOADING_LABEL_STYLE","LOADING_HINT_STYLE","PENDING_BODY_TOP_PX","PENDING_BODY_BOTTOM_PX","TITLE_ICON_STYLE","ACTIONS_STYLE","DISMISS_ICON_BOX","DISABLED_DISMISS_STYLE","DEFAULT_MARKER_LABEL","DEFAULT_MARKER_SIZE_PX","DEFAULT_MARKER_STYLE","LEADING_DEFAULT_MARKER_STYLE","DefaultMarker","leading","jsx","Tooltip","PinIcon","AddressChip","address","labelId","tuckIntoCount","copiedAt","setCopiedAt","useState","copied","useEffect","timer","tip","jsxs","CheckIcon","CopyIcon","_b","_a","GlobeIcon","joinIds","ids","present","id","SelectableCard","title","titleIcon","isDefault","eyebrow","status","description","countLabel","link","actions","onDismiss","dismissLabel","dismissDisabledReason","selected","loading","loadingLabel","loadingHint","disabled","dimmed","onSelect","tabIndex","ariaLabel","className","style","pinned","useCardStripSlot","hoverable","rootRef","useRef","useAdoptedStyleSheet","instanceId","useId","outlineGradientId","eyebrowId","statusId","titleId","descriptionId","shownDescription","countId","addressId","labelledBy","describedBy","Text","titleInTopRow","eyebrowStyle","hasCornerCluster","isDismissDisabled","eyebrowRowEnd","FOCUS_RING_WITHIN_RADIO","TruncatedTooltip","Tag","ExternalLinkIcon","Button","DismissIcon"],"mappings":"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"}
@@ -6,8 +6,9 @@ const e = [], s = (n) => {
6
6
  }, o = (n) => (e.length === 0 && document.addEventListener("keydown", s), e.push(n), () => {
7
7
  const t = e.lastIndexOf(n);
8
8
  t !== -1 && e.splice(t, 1), e.length === 0 && document.removeEventListener("keydown", s);
9
- });
9
+ }), c = (n) => e[e.length - 1] === n;
10
10
  export {
11
+ c as isTopEscapeLayer,
11
12
  o as pushEscapeLayer
12
13
  };
13
14
  //# sourceMappingURL=escapeLayers.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"escapeLayers.js","sources":["../../src/components/escapeLayers.ts"],"sourcesContent":["type EscapeHandler = () => void;\n\nconst layers: EscapeHandler[] = [];\n\nconst handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key !== 'Escape' || event.defaultPrevented) {\n return;\n }\n const top = layers[layers.length - 1];\n if (top) {\n top();\n }\n};\n\nexport const pushEscapeLayer = (handler: () => void): EscapeHandler => {\n if (layers.length === 0) {\n document.addEventListener('keydown', handleKeyDown);\n }\n layers.push(handler);\n return () => {\n const index = layers.lastIndexOf(handler);\n if (index !== -1) {\n layers.splice(index, 1);\n }\n if (layers.length === 0) {\n document.removeEventListener('keydown', handleKeyDown);\n }\n };\n};\n"],"names":["layers","handleKeyDown","event","top","pushEscapeLayer","handler","index"],"mappings":"AAEA,MAAMA,IAA0B,CAAA,GAE1BC,IAAgB,CAACC,MAA+B;AAClD,MAAIA,EAAM,QAAQ,YAAYA,EAAM;AAChC;AAEJ,QAAMC,IAAMH,EAAOA,EAAO,SAAS,CAAC;AACpC,EAAIG,KACAA,EAAA;AAER,GAEaC,IAAkB,CAACC,OACxBL,EAAO,WAAW,KAClB,SAAS,iBAAiB,WAAWC,CAAa,GAEtDD,EAAO,KAAKK,CAAO,GACZ,MAAM;AACT,QAAMC,IAAQN,EAAO,YAAYK,CAAO;AACxC,EAAIC,MAAU,MACVN,EAAO,OAAOM,GAAO,CAAC,GAEtBN,EAAO,WAAW,KAClB,SAAS,oBAAoB,WAAWC,CAAa;AAE7D;"}
1
+ {"version":3,"file":"escapeLayers.js","sources":["../../src/components/escapeLayers.ts"],"sourcesContent":["type EscapeHandler = () => void;\n\nconst layers: EscapeHandler[] = [];\n\nconst handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key !== 'Escape' || event.defaultPrevented) {\n return;\n }\n const top = layers[layers.length - 1];\n if (top) {\n top();\n }\n};\n\nexport const pushEscapeLayer = (handler: () => void): EscapeHandler => {\n if (layers.length === 0) {\n document.addEventListener('keydown', handleKeyDown);\n }\n layers.push(handler);\n return () => {\n const index = layers.lastIndexOf(handler);\n if (index !== -1) {\n layers.splice(index, 1);\n }\n if (layers.length === 0) {\n document.removeEventListener('keydown', handleKeyDown);\n }\n };\n};\n\n/** Whether `handler` is the overlay a document-level Escape would close right now. */\nexport const isTopEscapeLayer = (handler: EscapeHandler): boolean =>\n layers[layers.length - 1] === handler;\n"],"names":["layers","handleKeyDown","event","top","pushEscapeLayer","handler","index","isTopEscapeLayer"],"mappings":"AAEA,MAAMA,IAA0B,CAAA,GAE1BC,IAAgB,CAACC,MAA+B;AAClD,MAAIA,EAAM,QAAQ,YAAYA,EAAM;AAChC;AAEJ,QAAMC,IAAMH,EAAOA,EAAO,SAAS,CAAC;AACpC,EAAIG,KACAA,EAAA;AAER,GAEaC,IAAkB,CAACC,OACxBL,EAAO,WAAW,KAClB,SAAS,iBAAiB,WAAWC,CAAa,GAEtDD,EAAO,KAAKK,CAAO,GACZ,MAAM;AACT,QAAMC,IAAQN,EAAO,YAAYK,CAAO;AACxC,EAAIC,MAAU,MACVN,EAAO,OAAOM,GAAO,CAAC,GAEtBN,EAAO,WAAW,KAClB,SAAS,oBAAoB,WAAWC,CAAa;AAE7D,IAISM,IAAmB,CAACF,MAC7BL,EAAOA,EAAO,SAAS,CAAC,MAAMK;"}
package/dist/index.d.ts CHANGED
@@ -3993,6 +3993,13 @@ export declare type SegmentedControlSize = 'small' | 'medium' | 'large';
3993
3993
  /** A fixed-size card that behaves as one option in a radio group: a card-shaped `Surface.Row`. */
3994
3994
  export declare const SelectableCard: default_2.FC<SelectableCardProps>;
3995
3995
 
3996
+ /** A copyable address, such as a server URL: `label` is what fits on the card (its host, say),
3997
+ * `value` the full address shown on hover and copied on click. */
3998
+ export declare interface SelectableCardAddress {
3999
+ label: string;
4000
+ value: string;
4001
+ }
4002
+
3996
4003
  export declare interface SelectableCardLink {
3997
4004
  label: string;
3998
4005
  href: string;
@@ -4014,6 +4021,9 @@ export declare interface SelectableCardProps {
4014
4021
  status?: SelectableCardStatus;
4015
4022
  /** Supporting copy under the title, clamped to two lines. */
4016
4023
  description?: string;
4024
+ /** A one-line chip above the count that copies its `value` on click. Takes the place of
4025
+ * `description`, which is not shown while it is set: the card has room for one or the other. */
4026
+ address?: SelectableCardAddress;
4017
4027
  /** Bottom-left summary ("16 Actions", "10 Selected"). */
4018
4028
  countLabel?: string;
4019
4029
  /** A link along the bottom edge, opened in a new tab. Rendered beside the radio rather than