@mediaradar/design-components 0.15.0 → 0.16.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.
- package/dist/index.cjs +535 -471
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +103 -12
- package/dist/index.d.ts +103 -12
- package/dist/index.js +507 -444
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -229,6 +229,60 @@ interface BadgeProps {
|
|
|
229
229
|
*/
|
|
230
230
|
declare function Badge({ tone, kind, dot, children, className }: BadgeProps): react.JSX.Element;
|
|
231
231
|
|
|
232
|
+
interface DeltaProps {
|
|
233
|
+
/** The change itself. Its sign picks the direction; render the absolute value. */
|
|
234
|
+
value: number;
|
|
235
|
+
/** What the number is in -- "%" for a percentage, "pts" for share points. */
|
|
236
|
+
suffix?: string;
|
|
237
|
+
/**
|
|
238
|
+
* Adds a direction arrow before the number. For a column of deltas scanned
|
|
239
|
+
* rather than read, where the arrow is what the eye follows. A single delta
|
|
240
|
+
* beside a figure does not need one -- the sign already says which way.
|
|
241
|
+
*/
|
|
242
|
+
arrow?: boolean;
|
|
243
|
+
/** Appended after the suffix, e.g. "YoY". Keep it to one or two words. */
|
|
244
|
+
period?: string;
|
|
245
|
+
className?: string;
|
|
246
|
+
}
|
|
247
|
+
/**
|
|
248
|
+
* @pattern Delta
|
|
249
|
+
* @description A change over time -- the +6.2% / -2.1% beside a figure. Green
|
|
250
|
+
* up, red down, always with an explicit sign.
|
|
251
|
+
* @props
|
|
252
|
+
* value: number -- sign picks the direction
|
|
253
|
+
* suffix?: string -- "%" or "pts"
|
|
254
|
+
* arrow?: boolean (default false) -- direction arrow, for a column scanned rather than read
|
|
255
|
+
* period?: string -- e.g. "YoY"
|
|
256
|
+
* @tokens text-text-success, text-text-danger
|
|
257
|
+
* @dependencies lucide-react
|
|
258
|
+
* @behavior Takes the type size of whatever contains it rather than setting
|
|
259
|
+
* its own, because it is inline text inside a table cell or a card rather
|
|
260
|
+
* than a box of its own -- a fixed size would fight the density its table
|
|
261
|
+
* already chose.
|
|
262
|
+
* @a11y The sign is the point: colour alone cannot carry direction, for
|
|
263
|
+
* anyone who cannot distinguish the two and for anyone reading it printed or
|
|
264
|
+
* in greyscale. `+` and `-` are always rendered, so the colour is
|
|
265
|
+
* reinforcement rather than the only signal. The arrow is decorative and
|
|
266
|
+
* hidden, since the sign beside it already says the same thing.
|
|
267
|
+
* @use when showing a change against a previous period beside the figure it
|
|
268
|
+
* relates to.
|
|
269
|
+
* @use with `arrow` when deltas run down a column and the reader is scanning
|
|
270
|
+
* for the ones that moved.
|
|
271
|
+
* @avoid when the number is not a change -- a share, a total or a rate is
|
|
272
|
+
* just a number, and colouring it green or red tells the reader something
|
|
273
|
+
* untrue about it.
|
|
274
|
+
* @avoid when up is not good. Green-for-up reads as green-for-better, so a
|
|
275
|
+
* rising cost or a rising error rate needs its own treatment rather than this
|
|
276
|
+
* one inverted, which nobody will notice.
|
|
277
|
+
* @usage
|
|
278
|
+
* ```tsx
|
|
279
|
+
* <Delta value={6.2} suffix="%" />
|
|
280
|
+
* <Delta value={-2.1} suffix="%" period="YoY" />
|
|
281
|
+
* <Delta value={1.4} suffix="pts" arrow />
|
|
282
|
+
* ```
|
|
283
|
+
*/
|
|
284
|
+
declare function Delta({ value, suffix, arrow, period, className }: DeltaProps): react.JSX.Element;
|
|
285
|
+
|
|
232
286
|
/**
|
|
233
287
|
* @pattern CheckBox
|
|
234
288
|
* @description Tri-state checkbox rendered as a `<button>` (not a native
|
|
@@ -1409,8 +1463,9 @@ interface PublisherBreakdownListProps {
|
|
|
1409
1463
|
declare function PublisherBreakdownList({ rows, defaultVisibleCount, padded, viewAllHref, renderLogo }: PublisherBreakdownListProps): react.JSX.Element;
|
|
1410
1464
|
|
|
1411
1465
|
declare const buttonVariants: (props?: ({
|
|
1412
|
-
variant?: "link" | "danger" | "primary" | "secondary" | "ghost" | null | undefined;
|
|
1413
|
-
size?: "
|
|
1466
|
+
variant?: "link" | "danger" | "primary" | "secondary" | "ghost" | "dangerGhost" | null | undefined;
|
|
1467
|
+
size?: "xs" | "sm" | "md" | null | undefined;
|
|
1468
|
+
iconOnly?: boolean | null | undefined;
|
|
1414
1469
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1415
1470
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
1416
1471
|
/**
|
|
@@ -1433,18 +1488,21 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
|
|
|
1433
1488
|
}
|
|
1434
1489
|
/**
|
|
1435
1490
|
* @pattern Button
|
|
1436
|
-
* @description
|
|
1437
|
-
*
|
|
1491
|
+
* @description The one control for every clickable action, from the main call
|
|
1492
|
+
* to action on a screen down to a quiet toolbar utility. Six variants
|
|
1493
|
+
* (primary, secondary, ghost, danger, dangerGhost, link) across three sizes
|
|
1494
|
+
* (xs, sm, md), labelled or icon-only.
|
|
1438
1495
|
* Supports polymorphic rendering via `asChild` (Radix Slot) to apply button
|
|
1439
1496
|
* styling to a different element, e.g. a router `<Link>`. Also exports the
|
|
1440
1497
|
* raw `buttonVariants` cva function for consumers composing button styling
|
|
1441
1498
|
* onto something other than this component.
|
|
1442
|
-
* @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive
|
|
1499
|
+
* @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-strong, hover:border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-secondary, hover:text-text-danger, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive
|
|
1443
1500
|
* @dependencies class-variance-authority, @radix-ui/react-slot, lucide-react
|
|
1444
1501
|
* @variant primary - The one primary action on a screen. Solid brand fill.
|
|
1445
1502
|
* @variant secondary - Any other real action competing for attention (Cancel, Export). Bordered, neutral fill.
|
|
1446
1503
|
* @variant ghost - Low-emphasis action inside a dense toolbar or row where a border would add visual noise.
|
|
1447
|
-
* @variant danger -
|
|
1504
|
+
* @variant danger - Filled red. Only for a confirmed destructive action, typically the confirm button in a dialog. Never pair with `primary` in the same control group.
|
|
1505
|
+
* @variant dangerGhost - Neutral at rest, red on hover. For a destructive affordance inline in a row or toolbar -- what the product reaches for far more often than filled danger.
|
|
1448
1506
|
* @variant link - Reads as inline text, not a control. Use inside body copy or where a full button would overpower the surrounding content.
|
|
1449
1507
|
* @behavior `disabled` removes pointer events entirely (not just a style
|
|
1450
1508
|
* change) and dims to 40% opacity. Focus handling is a deliberate exception:
|
|
@@ -1461,9 +1519,29 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
|
|
|
1461
1519
|
* (with `asChild`, the child element's own semantics apply instead).
|
|
1462
1520
|
* `loading` sets aria-busy, and the spinner is aria-hidden. Icon-only
|
|
1463
1521
|
* usage needs an aria-label from the caller -- nothing here supplies one.
|
|
1522
|
+
* @use when the user is triggering an action in place -- saving, applying,
|
|
1523
|
+
* confirming, opening a dialog, running an export.
|
|
1524
|
+
* @use when you need a destructive affordance: dangerGhost inline in a row or
|
|
1525
|
+
* toolbar, danger only as the confirm button in a dialog already opened.
|
|
1526
|
+
* @use when an action sits inside a sentence -- variant="link", which drops
|
|
1527
|
+
* the box and the semibold weight so it does not read as emphasis.
|
|
1528
|
+
* @use when the action is icon-only in a dense toolbar -- iconOnly squares the
|
|
1529
|
+
* box at whichever size you picked, so it lines up with labelled buttons
|
|
1530
|
+
* beside it. Supply an aria-label; nothing here does.
|
|
1531
|
+
* @avoid when the control navigates to a different route -- render a real link
|
|
1532
|
+
* via asChild, so middle-click, right-click and open-in-new-tab keep working.
|
|
1533
|
+
* variant="link" styles a button as text; it does not make a button a link.
|
|
1534
|
+
* @avoid when there is already a primary on the screen -- a second primary
|
|
1535
|
+
* means neither reads as the main action. Use secondary or ghost.
|
|
1536
|
+
* @avoid when the control toggles a persistent on/off state -- use CheckBox or
|
|
1537
|
+
* a switch. A button fires; it does not hold a state.
|
|
1538
|
+
* @avoid when you are about to hand-roll a button with raw classes. There is
|
|
1539
|
+
* no case this does not cover, and every copy is a divergence in hover, focus,
|
|
1540
|
+
* disabled and loading behaviour at once.
|
|
1464
1541
|
* @usage
|
|
1465
1542
|
* ```tsx
|
|
1466
1543
|
* <Button variant="primary" size="md">Save changes</Button>
|
|
1544
|
+
* <Button variant="dangerGhost" size="sm" iconOnly aria-label="Remove row"><X size={15} /></Button>
|
|
1467
1545
|
* <Button variant="secondary" size="sm">Cancel</Button>
|
|
1468
1546
|
* <Button variant="danger">Delete</Button>
|
|
1469
1547
|
* <Button variant="primary" loading>Saving…</Button>
|
|
@@ -1748,11 +1826,24 @@ interface TagProps {
|
|
|
1748
1826
|
}
|
|
1749
1827
|
/**
|
|
1750
1828
|
* @pattern Tag
|
|
1751
|
-
* @description Canonical descriptive tag
|
|
1752
|
-
*
|
|
1753
|
-
*
|
|
1754
|
-
*
|
|
1755
|
-
*
|
|
1829
|
+
* @description Canonical descriptive tag -- a neutral chip naming what a
|
|
1830
|
+
* thing IS: a category, a media type, a focus area. Always neutral, never
|
|
1831
|
+
* semantic, never removable.
|
|
1832
|
+
*
|
|
1833
|
+
* The product separates three jobs that most systems collapse into one, by
|
|
1834
|
+
* who authored the label. Badge is the system's view of a thing (status,
|
|
1835
|
+
* count, AI-generated) and its colour means something. Tag is the thing
|
|
1836
|
+
* describing itself, and stays neutral. FilterChipBar is the user describing
|
|
1837
|
+
* what they want to see, and is the only one you can remove.
|
|
1838
|
+
* @use when labelling what something is -- a category, a media type, a focus
|
|
1839
|
+
* area, a property of the row rather than a judgement about it.
|
|
1840
|
+
* @avoid when the colour would mean something. A status, a count, an
|
|
1841
|
+
* AI marker or anything the system decided is a Badge.
|
|
1842
|
+
* @avoid when the user should be able to dismiss it. An applied filter is a
|
|
1843
|
+
* FilterChipBar chip, which belongs to the filter bar rather than to the row.
|
|
1844
|
+
* @avoid when there are more than a handful in a row. Tags are scanned, and a
|
|
1845
|
+
* dozen neutral chips read as texture rather than as information.
|
|
1846
|
+
* @tokens text-micro, bg-subtle, text-text-tertiary, rounded-full
|
|
1756
1847
|
* @usage
|
|
1757
1848
|
* ```tsx
|
|
1758
1849
|
* <Tag>Digital</Tag>
|
|
@@ -2014,4 +2105,4 @@ interface FreshnessProps {
|
|
|
2014
2105
|
*/
|
|
2015
2106
|
declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
|
|
2016
2107
|
|
|
2017
|
-
export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
|
|
2108
|
+
export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, Delta, type DeltaProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
|
package/dist/index.d.ts
CHANGED
|
@@ -229,6 +229,60 @@ interface BadgeProps {
|
|
|
229
229
|
*/
|
|
230
230
|
declare function Badge({ tone, kind, dot, children, className }: BadgeProps): react.JSX.Element;
|
|
231
231
|
|
|
232
|
+
interface DeltaProps {
|
|
233
|
+
/** The change itself. Its sign picks the direction; render the absolute value. */
|
|
234
|
+
value: number;
|
|
235
|
+
/** What the number is in -- "%" for a percentage, "pts" for share points. */
|
|
236
|
+
suffix?: string;
|
|
237
|
+
/**
|
|
238
|
+
* Adds a direction arrow before the number. For a column of deltas scanned
|
|
239
|
+
* rather than read, where the arrow is what the eye follows. A single delta
|
|
240
|
+
* beside a figure does not need one -- the sign already says which way.
|
|
241
|
+
*/
|
|
242
|
+
arrow?: boolean;
|
|
243
|
+
/** Appended after the suffix, e.g. "YoY". Keep it to one or two words. */
|
|
244
|
+
period?: string;
|
|
245
|
+
className?: string;
|
|
246
|
+
}
|
|
247
|
+
/**
|
|
248
|
+
* @pattern Delta
|
|
249
|
+
* @description A change over time -- the +6.2% / -2.1% beside a figure. Green
|
|
250
|
+
* up, red down, always with an explicit sign.
|
|
251
|
+
* @props
|
|
252
|
+
* value: number -- sign picks the direction
|
|
253
|
+
* suffix?: string -- "%" or "pts"
|
|
254
|
+
* arrow?: boolean (default false) -- direction arrow, for a column scanned rather than read
|
|
255
|
+
* period?: string -- e.g. "YoY"
|
|
256
|
+
* @tokens text-text-success, text-text-danger
|
|
257
|
+
* @dependencies lucide-react
|
|
258
|
+
* @behavior Takes the type size of whatever contains it rather than setting
|
|
259
|
+
* its own, because it is inline text inside a table cell or a card rather
|
|
260
|
+
* than a box of its own -- a fixed size would fight the density its table
|
|
261
|
+
* already chose.
|
|
262
|
+
* @a11y The sign is the point: colour alone cannot carry direction, for
|
|
263
|
+
* anyone who cannot distinguish the two and for anyone reading it printed or
|
|
264
|
+
* in greyscale. `+` and `-` are always rendered, so the colour is
|
|
265
|
+
* reinforcement rather than the only signal. The arrow is decorative and
|
|
266
|
+
* hidden, since the sign beside it already says the same thing.
|
|
267
|
+
* @use when showing a change against a previous period beside the figure it
|
|
268
|
+
* relates to.
|
|
269
|
+
* @use with `arrow` when deltas run down a column and the reader is scanning
|
|
270
|
+
* for the ones that moved.
|
|
271
|
+
* @avoid when the number is not a change -- a share, a total or a rate is
|
|
272
|
+
* just a number, and colouring it green or red tells the reader something
|
|
273
|
+
* untrue about it.
|
|
274
|
+
* @avoid when up is not good. Green-for-up reads as green-for-better, so a
|
|
275
|
+
* rising cost or a rising error rate needs its own treatment rather than this
|
|
276
|
+
* one inverted, which nobody will notice.
|
|
277
|
+
* @usage
|
|
278
|
+
* ```tsx
|
|
279
|
+
* <Delta value={6.2} suffix="%" />
|
|
280
|
+
* <Delta value={-2.1} suffix="%" period="YoY" />
|
|
281
|
+
* <Delta value={1.4} suffix="pts" arrow />
|
|
282
|
+
* ```
|
|
283
|
+
*/
|
|
284
|
+
declare function Delta({ value, suffix, arrow, period, className }: DeltaProps): react.JSX.Element;
|
|
285
|
+
|
|
232
286
|
/**
|
|
233
287
|
* @pattern CheckBox
|
|
234
288
|
* @description Tri-state checkbox rendered as a `<button>` (not a native
|
|
@@ -1409,8 +1463,9 @@ interface PublisherBreakdownListProps {
|
|
|
1409
1463
|
declare function PublisherBreakdownList({ rows, defaultVisibleCount, padded, viewAllHref, renderLogo }: PublisherBreakdownListProps): react.JSX.Element;
|
|
1410
1464
|
|
|
1411
1465
|
declare const buttonVariants: (props?: ({
|
|
1412
|
-
variant?: "link" | "danger" | "primary" | "secondary" | "ghost" | null | undefined;
|
|
1413
|
-
size?: "
|
|
1466
|
+
variant?: "link" | "danger" | "primary" | "secondary" | "ghost" | "dangerGhost" | null | undefined;
|
|
1467
|
+
size?: "xs" | "sm" | "md" | null | undefined;
|
|
1468
|
+
iconOnly?: boolean | null | undefined;
|
|
1414
1469
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1415
1470
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
1416
1471
|
/**
|
|
@@ -1433,18 +1488,21 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
|
|
|
1433
1488
|
}
|
|
1434
1489
|
/**
|
|
1435
1490
|
* @pattern Button
|
|
1436
|
-
* @description
|
|
1437
|
-
*
|
|
1491
|
+
* @description The one control for every clickable action, from the main call
|
|
1492
|
+
* to action on a screen down to a quiet toolbar utility. Six variants
|
|
1493
|
+
* (primary, secondary, ghost, danger, dangerGhost, link) across three sizes
|
|
1494
|
+
* (xs, sm, md), labelled or icon-only.
|
|
1438
1495
|
* Supports polymorphic rendering via `asChild` (Radix Slot) to apply button
|
|
1439
1496
|
* styling to a different element, e.g. a router `<Link>`. Also exports the
|
|
1440
1497
|
* raw `buttonVariants` cva function for consumers composing button styling
|
|
1441
1498
|
* onto something other than this component.
|
|
1442
|
-
* @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive
|
|
1499
|
+
* @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-strong, hover:border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-secondary, hover:text-text-danger, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive
|
|
1443
1500
|
* @dependencies class-variance-authority, @radix-ui/react-slot, lucide-react
|
|
1444
1501
|
* @variant primary - The one primary action on a screen. Solid brand fill.
|
|
1445
1502
|
* @variant secondary - Any other real action competing for attention (Cancel, Export). Bordered, neutral fill.
|
|
1446
1503
|
* @variant ghost - Low-emphasis action inside a dense toolbar or row where a border would add visual noise.
|
|
1447
|
-
* @variant danger -
|
|
1504
|
+
* @variant danger - Filled red. Only for a confirmed destructive action, typically the confirm button in a dialog. Never pair with `primary` in the same control group.
|
|
1505
|
+
* @variant dangerGhost - Neutral at rest, red on hover. For a destructive affordance inline in a row or toolbar -- what the product reaches for far more often than filled danger.
|
|
1448
1506
|
* @variant link - Reads as inline text, not a control. Use inside body copy or where a full button would overpower the surrounding content.
|
|
1449
1507
|
* @behavior `disabled` removes pointer events entirely (not just a style
|
|
1450
1508
|
* change) and dims to 40% opacity. Focus handling is a deliberate exception:
|
|
@@ -1461,9 +1519,29 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
|
|
|
1461
1519
|
* (with `asChild`, the child element's own semantics apply instead).
|
|
1462
1520
|
* `loading` sets aria-busy, and the spinner is aria-hidden. Icon-only
|
|
1463
1521
|
* usage needs an aria-label from the caller -- nothing here supplies one.
|
|
1522
|
+
* @use when the user is triggering an action in place -- saving, applying,
|
|
1523
|
+
* confirming, opening a dialog, running an export.
|
|
1524
|
+
* @use when you need a destructive affordance: dangerGhost inline in a row or
|
|
1525
|
+
* toolbar, danger only as the confirm button in a dialog already opened.
|
|
1526
|
+
* @use when an action sits inside a sentence -- variant="link", which drops
|
|
1527
|
+
* the box and the semibold weight so it does not read as emphasis.
|
|
1528
|
+
* @use when the action is icon-only in a dense toolbar -- iconOnly squares the
|
|
1529
|
+
* box at whichever size you picked, so it lines up with labelled buttons
|
|
1530
|
+
* beside it. Supply an aria-label; nothing here does.
|
|
1531
|
+
* @avoid when the control navigates to a different route -- render a real link
|
|
1532
|
+
* via asChild, so middle-click, right-click and open-in-new-tab keep working.
|
|
1533
|
+
* variant="link" styles a button as text; it does not make a button a link.
|
|
1534
|
+
* @avoid when there is already a primary on the screen -- a second primary
|
|
1535
|
+
* means neither reads as the main action. Use secondary or ghost.
|
|
1536
|
+
* @avoid when the control toggles a persistent on/off state -- use CheckBox or
|
|
1537
|
+
* a switch. A button fires; it does not hold a state.
|
|
1538
|
+
* @avoid when you are about to hand-roll a button with raw classes. There is
|
|
1539
|
+
* no case this does not cover, and every copy is a divergence in hover, focus,
|
|
1540
|
+
* disabled and loading behaviour at once.
|
|
1464
1541
|
* @usage
|
|
1465
1542
|
* ```tsx
|
|
1466
1543
|
* <Button variant="primary" size="md">Save changes</Button>
|
|
1544
|
+
* <Button variant="dangerGhost" size="sm" iconOnly aria-label="Remove row"><X size={15} /></Button>
|
|
1467
1545
|
* <Button variant="secondary" size="sm">Cancel</Button>
|
|
1468
1546
|
* <Button variant="danger">Delete</Button>
|
|
1469
1547
|
* <Button variant="primary" loading>Saving…</Button>
|
|
@@ -1748,11 +1826,24 @@ interface TagProps {
|
|
|
1748
1826
|
}
|
|
1749
1827
|
/**
|
|
1750
1828
|
* @pattern Tag
|
|
1751
|
-
* @description Canonical descriptive tag
|
|
1752
|
-
*
|
|
1753
|
-
*
|
|
1754
|
-
*
|
|
1755
|
-
*
|
|
1829
|
+
* @description Canonical descriptive tag -- a neutral chip naming what a
|
|
1830
|
+
* thing IS: a category, a media type, a focus area. Always neutral, never
|
|
1831
|
+
* semantic, never removable.
|
|
1832
|
+
*
|
|
1833
|
+
* The product separates three jobs that most systems collapse into one, by
|
|
1834
|
+
* who authored the label. Badge is the system's view of a thing (status,
|
|
1835
|
+
* count, AI-generated) and its colour means something. Tag is the thing
|
|
1836
|
+
* describing itself, and stays neutral. FilterChipBar is the user describing
|
|
1837
|
+
* what they want to see, and is the only one you can remove.
|
|
1838
|
+
* @use when labelling what something is -- a category, a media type, a focus
|
|
1839
|
+
* area, a property of the row rather than a judgement about it.
|
|
1840
|
+
* @avoid when the colour would mean something. A status, a count, an
|
|
1841
|
+
* AI marker or anything the system decided is a Badge.
|
|
1842
|
+
* @avoid when the user should be able to dismiss it. An applied filter is a
|
|
1843
|
+
* FilterChipBar chip, which belongs to the filter bar rather than to the row.
|
|
1844
|
+
* @avoid when there are more than a handful in a row. Tags are scanned, and a
|
|
1845
|
+
* dozen neutral chips read as texture rather than as information.
|
|
1846
|
+
* @tokens text-micro, bg-subtle, text-text-tertiary, rounded-full
|
|
1756
1847
|
* @usage
|
|
1757
1848
|
* ```tsx
|
|
1758
1849
|
* <Tag>Digital</Tag>
|
|
@@ -2014,4 +2105,4 @@ interface FreshnessProps {
|
|
|
2014
2105
|
*/
|
|
2015
2106
|
declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
|
|
2016
2107
|
|
|
2017
|
-
export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
|
|
2108
|
+
export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, Delta, type DeltaProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
|