@sableui/react 0.9.1 → 0.11.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/AGENTS.md +1 -1
- package/CHANGELOG.md +109 -0
- package/CONTRIBUTING.md +2 -2
- package/DESIGN.md +55 -16
- package/README.md +12 -0
- package/dist/{_contract-C2M1SjBf.d.ts → _contract-CkqXDVww.d.ts} +25 -2
- package/dist/blocks/danger-zone-block.js +3 -3
- package/dist/blocks/danger-zone-block.meta.js +1 -1
- package/dist/blocks/faq-block.js +3 -3
- package/dist/blocks/goal-progress-block.js +1 -1
- package/dist/blocks/notification-list-block.js +1 -1
- package/dist/blocks/pricing-table-block.js +12 -12
- package/dist/blocks/product-card-block.js +3 -3
- package/dist/blocks/product-card-block.meta.js +3 -3
- package/dist/blocks/profile-card-block.js +1 -1
- package/dist/blocks/profile-form-block.js +3 -3
- package/dist/blocks/revenue-breakdown-block.js +5 -5
- package/dist/blocks/stat-row-block.js +3 -3
- package/dist/blocks/task-list-block.js +2 -2
- package/dist/blocks/team-members-block.js +1 -1
- package/dist/blocks/wallet-block.js +4 -4
- package/dist/blocks/wallet-block.meta.js +3 -3
- package/dist/components/accordion/accordion.meta.js +2 -2
- package/dist/components/app-header/app-header.meta.js +1 -1
- package/dist/components/app-shell/app-shell.meta.js +2 -2
- package/dist/components/area-chart/area-chart.meta.js +3 -3
- package/dist/components/badge/badge.js +13 -4
- package/dist/components/badge/badge.meta.js +24 -13
- package/dist/components/badge/badge.variants.js +37 -23
- package/dist/components/banner/banner.meta.js +8 -8
- package/dist/components/banner/banner.variants.js +3 -3
- package/dist/components/bar-chart/bar-chart.meta.js +4 -4
- package/dist/components/breadcrumbs/breadcrumbs.meta.js +1 -1
- package/dist/components/button/button.meta.js +3 -3
- package/dist/components/card/card.js +16 -7
- package/dist/components/card/card.meta.js +4 -4
- package/dist/components/checkbox-card/checkbox-card.meta.js +10 -10
- package/dist/components/checkbox-card/checkbox-card.variants.js +15 -15
- package/dist/components/code-block/code-block.meta.js +1 -1
- package/dist/components/command-menu/command-menu.meta.js +1 -1
- package/dist/components/context-card/context-card.meta.js +2 -2
- package/dist/components/destructive-action-modal/destructive-action-modal.meta.js +1 -1
- package/dist/components/dialog/dialog.meta.js +2 -2
- package/dist/components/disclosure-picker/disclosure-picker.js +48 -2
- package/dist/components/disclosure-picker/disclosure-picker.meta.js +3 -2
- package/dist/components/empty-state/empty-state.meta.js +4 -4
- package/dist/components/gradient-art/gradient-art.meta.js +3 -3
- package/dist/components/label/label.meta.js +1 -1
- package/dist/components/line-chart/line-chart.meta.js +3 -3
- package/dist/components/meter/meter.js +1 -1
- package/dist/components/meter/meter.meta.js +2 -2
- package/dist/components/meter/meter.variants.js +1 -1
- package/dist/components/middle-truncate/middle-truncate.meta.js +4 -4
- package/dist/components/note/note.meta.js +3 -3
- package/dist/components/page-header/page-header.js +1 -1
- package/dist/components/pagination/pagination.meta.js +2 -2
- package/dist/components/panel-section/index.js +2 -1
- package/dist/components/panel-section/panel-section.js +15 -0
- package/dist/components/panel-section/panel-section.meta.js +32 -0
- package/dist/components/phone/phone.meta.js +1 -1
- package/dist/components/pie-chart/pie-chart.meta.js +3 -3
- package/dist/components/pill/pill.js +4 -2
- package/dist/components/pill/pill.meta.js +19 -2
- package/dist/components/pill/pill.variants.js +23 -2
- package/dist/components/popover/popover.meta.js +2 -2
- package/dist/components/radar-chart/radar-chart.meta.js +3 -3
- package/dist/components/radial-chart/radial-chart.meta.js +3 -3
- package/dist/components/radio/radio.meta.js +2 -2
- package/dist/components/radio-card/radio-card.meta.js +6 -6
- package/dist/components/radio-card/radio-card.variants.js +15 -15
- package/dist/components/scroller/scroller.meta.js +1 -1
- package/dist/components/search-input/search-input.meta.js +1 -1
- package/dist/components/section-header/section-header.js +1 -1
- package/dist/components/segmented-bar/segmented-bar.js +1 -1
- package/dist/components/segmented-bar/segmented-bar.meta.js +6 -6
- package/dist/components/segmented-bar/segmented-bar.variants.js +4 -4
- package/dist/components/select/select.meta.js +2 -2
- package/dist/components/sheet/sheet.meta.js +1 -1
- package/dist/components/side-nav/side-nav.meta.js +1 -1
- package/dist/components/sidebar/sidebar.meta.js +1 -1
- package/dist/components/sparkline/sparkline.meta.js +4 -4
- package/dist/components/spinner/spinner.meta.js +1 -1
- package/dist/components/status-dot/status-dot.js +4 -1
- package/dist/components/status-dot/status-dot.meta.js +8 -16
- package/dist/components/status-dot/status-dot.variants.js +13 -4
- package/dist/components/table/table.meta.js +4 -4
- package/dist/components/tabs/tabs.meta.js +1 -1
- package/dist/components/textarea/textarea.meta.js +2 -2
- package/dist/components/toast/toast.meta.js +1 -1
- package/dist/components/tooltip/tooltip.meta.js +2 -2
- package/dist/file-hashes.json +123 -121
- package/dist/foundations/spacing.js +8 -8
- package/dist/index.d.ts +171 -76
- package/dist/index.js +12 -1
- package/dist/lib/chart/types.js +3 -3
- package/dist/lib/palette.js +103 -0
- package/dist/lib/selection-card.js +4 -4
- package/dist/palette.css +669 -0
- package/dist/patterns/auth-page.js +6 -6
- package/dist/patterns/auth-page.meta.js +3 -3
- package/dist/patterns/brand-landing-page.js +2 -2
- package/dist/patterns/chat-panel.js +2 -2
- package/dist/patterns/dashboard-page.js +71 -71
- package/dist/patterns/dashboard-page.meta.js +5 -5
- package/dist/patterns/feed-page.js +25 -25
- package/dist/patterns/feed-page.meta.js +3 -3
- package/dist/patterns/landing-page.js +1 -1
- package/dist/patterns/list-detail-page.js +17 -17
- package/dist/patterns/settings-page.js +17 -17
- package/dist/presets/index.d.ts +1 -1
- package/dist/presets/index.js +17 -2
- package/dist/styles.css +115 -50
- package/dist/{theme-provider-S0NVJs2Y.d.ts → theme-provider-CdSicAad.d.ts} +1 -1
- package/dist/themes/_contract.js +22 -8
- package/dist/themes/atelier/atelier.css +13 -13
- package/dist/themes/atelier/index.d.ts +1 -1
- package/dist/themes/ember/ember.css +13 -13
- package/dist/themes/ember/index.d.ts +1 -1
- package/dist/themes/index.d.ts +2 -2
- package/dist/themes/meridian/index.d.ts +1 -1
- package/dist/themes/meridian/meridian.css +13 -13
- package/dist/themes/poppy/index.d.ts +1 -1
- package/dist/themes/poppy/poppy.css +19 -16
- package/dist/themes/prism/index.d.ts +1 -1
- package/dist/themes/prism/prism.css +18 -15
- package/dist/themes/sable/index.d.ts +1 -1
- package/dist/themes/sable/sable.css +18 -22
- package/dist/themes/verdant/index.d.ts +1 -1
- package/dist/themes/verdant/verdant.css +15 -15
- package/llms/blocks/danger-zone-block.md +4 -4
- package/llms/blocks/faq-block.md +3 -3
- package/llms/blocks/goal-progress-block.md +1 -1
- package/llms/blocks/notification-list-block.md +1 -1
- package/llms/blocks/pricing-table-block.md +12 -12
- package/llms/blocks/product-card-block.md +6 -6
- package/llms/blocks/profile-card-block.md +1 -1
- package/llms/blocks/profile-form-block.md +3 -3
- package/llms/blocks/revenue-breakdown-block.md +5 -5
- package/llms/blocks/stat-row-block.md +3 -3
- package/llms/blocks/task-list-block.md +2 -2
- package/llms/blocks/team-members-block.md +1 -1
- package/llms/blocks/wallet-block.md +7 -7
- package/llms/components/accordion.md +2 -2
- package/llms/components/app-header.md +1 -1
- package/llms/components/app-shell.md +2 -2
- package/llms/components/area-chart.md +1 -1
- package/llms/components/badge.md +15 -7
- package/llms/components/banner.md +6 -6
- package/llms/components/bar-chart.md +2 -2
- package/llms/components/breadcrumbs.md +1 -1
- package/llms/components/button.md +3 -3
- package/llms/components/card.md +4 -4
- package/llms/components/checkbox-card.md +5 -5
- package/llms/components/code-block.md +1 -1
- package/llms/components/command-menu.md +1 -1
- package/llms/components/context-card.md +2 -2
- package/llms/components/destructive-action-modal.md +1 -1
- package/llms/components/dialog.md +2 -2
- package/llms/components/disclosure-picker.md +2 -1
- package/llms/components/empty-state.md +4 -4
- package/llms/components/gradient-art.md +3 -3
- package/llms/components/label.md +1 -1
- package/llms/components/line-chart.md +1 -1
- package/llms/components/meter.md +2 -2
- package/llms/components/middle-truncate.md +5 -5
- package/llms/components/note.md +3 -3
- package/llms/components/pagination.md +2 -2
- package/llms/components/panel-section.md +28 -0
- package/llms/components/phone.md +1 -1
- package/llms/components/pie-chart.md +1 -1
- package/llms/components/pill.md +12 -2
- package/llms/components/popover.md +2 -2
- package/llms/components/radar-chart.md +1 -1
- package/llms/components/radial-chart.md +1 -1
- package/llms/components/radio-card.md +4 -4
- package/llms/components/radio.md +2 -2
- package/llms/components/scroller.md +1 -1
- package/llms/components/search-input.md +1 -1
- package/llms/components/segmented-bar.md +7 -7
- package/llms/components/select.md +2 -2
- package/llms/components/sheet.md +1 -1
- package/llms/components/side-nav.md +1 -1
- package/llms/components/sidebar.md +1 -1
- package/llms/components/sparkline.md +2 -2
- package/llms/components/spinner.md +1 -1
- package/llms/components/status-dot.md +4 -4
- package/llms/components/table.md +8 -8
- package/llms/components/tabs.md +1 -1
- package/llms/components/textarea.md +2 -2
- package/llms/components/toast.md +1 -1
- package/llms/components/tooltip.md +2 -2
- package/llms/foundations/spacing.md +7 -7
- package/llms/layout/grid.md +1 -1
- package/llms/layout/page.md +1 -1
- package/llms/layout/region.md +1 -1
- package/llms/layout/split-pane.md +1 -1
- package/llms/patterns/auth-page.md +11 -11
- package/llms/patterns/brand-landing-page.md +2 -2
- package/llms/patterns/chat-panel.md +2 -2
- package/llms/patterns/dashboard-page.md +78 -78
- package/llms/patterns/feed-page.md +31 -31
- package/llms/patterns/landing-page.md +1 -1
- package/llms/patterns/list-detail-page.md +18 -18
- package/llms/patterns/settings-page.md +18 -18
- package/llms/reference/token-intent.md +25 -11
- package/llms/reference/utilities.md +1 -1
- package/llms/tasks/adding-a-component.md +4 -1
- package/llms/tasks/building-a-page.md +40 -0
- package/llms/tasks/converting-an-app.md +3 -1
- package/llms/tasks/using-presets.md +4 -0
- package/llms-full.txt +457 -347
- package/llms.txt +8 -8
- package/package.json +4 -4
- package/registry.json +397 -233
- package/scripts/lint-rules.mjs +26 -5
- package/skills/sable/SKILL.md +14 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ClassValue } from 'clsx';
|
|
2
2
|
import { C as ComponentMeta } from './meta-DVG8ceze.js';
|
|
3
3
|
export { A as AnatomyMeta, a as BestPracticeMeta, E as ExampleMeta, M as MotionMeta, b as MotionSlot, c as PropMeta, R as RelatedMeta, S as SubcomponentMeta, U as UsageMeta } from './meta-DVG8ceze.js';
|
|
4
|
-
import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-
|
|
5
|
-
export { A as ART_TOKENS, D as DENSITY_TOKENS, b as DensityToken, M as MOTION_TOKENS, c as MotionToken, R as RADIUS_TOKENS, d as RadiusToken, S as SEMANTIC_TOKENS,
|
|
6
|
-
import { T as ThemeId } from './theme-provider-
|
|
7
|
-
export { D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-
|
|
4
|
+
import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-CkqXDVww.js';
|
|
5
|
+
export { A as ART_TOKENS, D as DENSITY_TOKENS, b as DensityToken, M as MOTION_TOKENS, c as MotionToken, P as PALETTE_TOKENS, R as RADIUS_TOKENS, d as RHYTHM_TOKENS, e as RadiusToken, f as RhythmToken, S as SEMANTIC_TOKENS, g as SemanticToken, h as TYPE_OVERLINE_TOKENS, i as TYPE_REFINEMENT_TOKENS, j as TYPE_SCALE_TOKENS, k as TYPE_UI_TOKENS, l as TypeOverlineToken, m as TypeRefinementToken, n as TypeScaleToken, o as TypeUiToken, W as WORKSPACE_SURFACE_TOKENS, p as WorkspaceSurfaceToken } from './_contract-CkqXDVww.js';
|
|
6
|
+
import { T as ThemeId } from './theme-provider-CdSicAad.js';
|
|
7
|
+
export { D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-CdSicAad.js';
|
|
8
8
|
export { AspectBox, AspectBoxProps, Bleed, BleedProps, Breakpoint, Center, CenterProps, Col, ColProps, Columns, ColumnsProps, Grid, GridOverlay, GridOverlayProps, GridProps, Page, PageProps, Region, RegionMax, RegionProps, Responsive, Row, RowProps, SafeArea, SafeAreaProps, Spacer, SpacerProps, SplitPane, SplitPaneProps, Stack, StackProps } from './layout/index.js';
|
|
9
9
|
export { Icon, IconContextValue, IconProps, IconProvider, IconProviderProps, composeIconSets, useIconSet } from './icon/index.js';
|
|
10
10
|
export { a as IconRenderProps, I as IconSet, b as IconVariant } from './registry-CyL28OzJ.js';
|
|
@@ -309,7 +309,7 @@ interface PresenceProps {
|
|
|
309
309
|
* mount/unmount with no animation). The child must accept a `ref`.
|
|
310
310
|
*
|
|
311
311
|
* <Presence show={open}>
|
|
312
|
-
* <Banner>Heads up —
|
|
312
|
+
* <Banner>Heads up — your trial ends soon.</Banner>
|
|
313
313
|
* </Presence>
|
|
314
314
|
*/
|
|
315
315
|
declare function Presence({ show, children, duration, easing, offset, onExitComplete, }: PresenceProps): ReactElement<{
|
|
@@ -423,7 +423,7 @@ declare namespace Button {
|
|
|
423
423
|
declare const buttonMeta: ComponentMeta;
|
|
424
424
|
|
|
425
425
|
interface CardProps extends ComponentPropsWithRef<"div"> {
|
|
426
|
-
/** "default" = raised surface (bg-card +
|
|
426
|
+
/** "default" = raised surface (bg-card + edge + soft shadow). "flat" = transparent. */
|
|
427
427
|
variant?: "default" | "flat";
|
|
428
428
|
/**
|
|
429
429
|
* Padding scale for the Header/Content/Footer parts. "comfortable" = p-6 (the
|
|
@@ -554,20 +554,23 @@ declare const cardMeta: ComponentMeta;
|
|
|
554
554
|
* ("● Ready"). Neutral and the calm tones keep the body ink;
|
|
555
555
|
* destructive turns the label itself.
|
|
556
556
|
*/
|
|
557
|
-
declare const BADGE_TONES: readonly ["neutral", "
|
|
557
|
+
declare const BADGE_TONES: readonly ["neutral", "1", "2", "3", "info", "success", "warning", "destructive", "red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"];
|
|
558
558
|
type BadgeTone = (typeof BADGE_TONES)[number];
|
|
559
559
|
declare const BADGE_APPEARANCES: readonly ["soft", "outline", "solid", "overlay", "plain"];
|
|
560
560
|
type BadgeAppearance = (typeof BADGE_APPEARANCES)[number];
|
|
561
561
|
declare const badgeVariants: (props?: ({
|
|
562
562
|
appearance?: "overlay" | "outline" | "solid" | "soft" | "plain" | null | undefined;
|
|
563
|
-
tone?: "destructive" | "success" | "
|
|
563
|
+
tone?: "1" | "2" | "3" | "destructive" | "success" | "blue" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "neutral" | "warning" | "info" | null | undefined;
|
|
564
564
|
size?: "sm" | "md" | null | undefined;
|
|
565
565
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
566
566
|
|
|
567
567
|
interface BadgeProps extends ComponentPropsWithRef<"span"> {
|
|
568
568
|
/** How it is drawn: soft fill, outline, solid, on media, or plain text. @default "soft" */
|
|
569
569
|
appearance?: BadgeAppearance;
|
|
570
|
-
/**
|
|
570
|
+
/**
|
|
571
|
+
* What it means — or, for a palette family (`red` … `pink`), a category
|
|
572
|
+
* with no meaning attached: a tag, a label, a project colour. @default "neutral"
|
|
573
|
+
*/
|
|
571
574
|
tone?: BadgeTone;
|
|
572
575
|
/** @default "md" */
|
|
573
576
|
size?: "sm" | "md";
|
|
@@ -586,9 +589,10 @@ interface BadgeProps extends ComponentPropsWithRef<"span"> {
|
|
|
586
589
|
* Pill; for an unread count on an icon, NotificationBadge.
|
|
587
590
|
*
|
|
588
591
|
* <Badge>Draft</Badge>
|
|
589
|
-
* <Badge tone="
|
|
592
|
+
* <Badge tone="1">12 of 50</Badge>
|
|
590
593
|
* <Badge appearance="overlay">0:42</Badge>
|
|
591
594
|
* <Badge appearance="plain" tone="success" dot>Ready</Badge>
|
|
595
|
+
* <Badge tone="teal">Design</Badge>
|
|
592
596
|
*/
|
|
593
597
|
declare function Badge({ appearance, tone, size, icon, dot, pulse, className, children, ...props }: BadgeProps): react.JSX.Element;
|
|
594
598
|
declare namespace Badge {
|
|
@@ -1047,7 +1051,7 @@ interface LabelProps$2 extends ComponentPropsWithRef<"label">, VariantProps<type
|
|
|
1047
1051
|
* for a dotted-underline label that reveals help text in a tooltip.
|
|
1048
1052
|
*
|
|
1049
1053
|
* <Label htmlFor="email">Email</Label>
|
|
1050
|
-
* <Label htmlFor="
|
|
1054
|
+
* <Label htmlFor="discount" hint="Taken off every order this code is used on.">Discount</Label>
|
|
1051
1055
|
*/
|
|
1052
1056
|
declare function Label({ size, eyebrow, hint, className, tabIndex, ...props }: LabelProps$2): react.JSX.Element;
|
|
1053
1057
|
declare namespace Label {
|
|
@@ -1160,7 +1164,7 @@ declare const tabsMeta: ComponentMeta;
|
|
|
1160
1164
|
* <TooltipProvider>
|
|
1161
1165
|
* <Tooltip>
|
|
1162
1166
|
* <TooltipTrigger render={<Button variant="ghost">?</Button>} />
|
|
1163
|
-
* <TooltipContent>
|
|
1167
|
+
* <TooltipContent>Saved to your workspace.</TooltipContent>
|
|
1164
1168
|
* </Tooltip>
|
|
1165
1169
|
* </TooltipProvider>
|
|
1166
1170
|
*/
|
|
@@ -1206,7 +1210,7 @@ type SimpleTooltipProps = Omit<ComponentProps<typeof Tooltip$1.Root>, "children"
|
|
|
1206
1210
|
/**
|
|
1207
1211
|
* Shorthand tooltip for the common case — no Trigger/Content boilerplate:
|
|
1208
1212
|
*
|
|
1209
|
-
* <SimpleTooltip content="
|
|
1213
|
+
* <SimpleTooltip content="Saved to your workspace">
|
|
1210
1214
|
* <Button variant="ghost">?</Button>
|
|
1211
1215
|
* </SimpleTooltip>
|
|
1212
1216
|
*
|
|
@@ -1710,7 +1714,7 @@ declare const progressTrackVariants: (props?: ({
|
|
|
1710
1714
|
|
|
1711
1715
|
declare const progressMeta: ComponentMeta;
|
|
1712
1716
|
|
|
1713
|
-
type MeterTone = "primary" | "
|
|
1717
|
+
type MeterTone = "primary" | "3" | "success" | "warning" | "destructive";
|
|
1714
1718
|
type MeterSize = "sm" | "md" | "lg";
|
|
1715
1719
|
type RootProps$2 = Omit<ComponentProps<typeof Meter$1.Root>, "className"> & {
|
|
1716
1720
|
className?: string;
|
|
@@ -1807,7 +1811,7 @@ declare namespace MeterValue {
|
|
|
1807
1811
|
* the call site from thresholds you own; the component does not guess them.
|
|
1808
1812
|
*/
|
|
1809
1813
|
declare const meterIndicatorVariants: (props?: ({
|
|
1810
|
-
tone?: "
|
|
1814
|
+
tone?: "3" | "primary" | "destructive" | "success" | "warning" | null | undefined;
|
|
1811
1815
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1812
1816
|
/**
|
|
1813
1817
|
* Bar thickness, per size. Shared with Progress (`progressTrackVariants`): a
|
|
@@ -1827,7 +1831,7 @@ declare const meterMeta: ComponentMeta;
|
|
|
1827
1831
|
* failed).
|
|
1828
1832
|
*/
|
|
1829
1833
|
declare const segmentedBarSegmentVariants: (props?: ({
|
|
1830
|
-
tone?: "
|
|
1834
|
+
tone?: "1" | "2" | "3" | "primary" | "destructive" | "success" | "neutral" | "warning" | "info" | null | undefined;
|
|
1831
1835
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1832
1836
|
/** Bar thickness — the same three rails as Meter and Progress. */
|
|
1833
1837
|
declare const segmentedBarVariants: (props?: ({
|
|
@@ -1861,7 +1865,7 @@ declare const SEGMENTED_BAR_TONES: readonly SegmentedBarTone[];
|
|
|
1861
1865
|
* it, in a table — depends on the card.
|
|
1862
1866
|
*
|
|
1863
1867
|
* The bar is one image to assistive tech, named by `label` and every
|
|
1864
|
-
* segment's share ("Revenue by
|
|
1868
|
+
* segment's share ("Revenue by channel: Direct 42%, Partners 27%, …"), so a
|
|
1865
1869
|
* legend that repeats it visually can stay out of the accessible reading.
|
|
1866
1870
|
*/
|
|
1867
1871
|
declare function SegmentedBar({ segments, label, locale, size, className, ...props }: SegmentedBarProps): react.JSX.Element;
|
|
@@ -1880,11 +1884,11 @@ type ChartCurve = "smooth" | "linear" | "step";
|
|
|
1880
1884
|
|
|
1881
1885
|
/**
|
|
1882
1886
|
* A series colour by role. The decorative tones lead — a chart names
|
|
1883
|
-
* categories (desktop / mobile,
|
|
1887
|
+
* categories (desktop / mobile, plans / channels), not good and bad —
|
|
1884
1888
|
* and they follow the active theme and Customize → Color → Palette. The
|
|
1885
1889
|
* status tones are for a series that IS a judgement (errors, warnings).
|
|
1886
1890
|
*/
|
|
1887
|
-
type ChartTone = "
|
|
1891
|
+
type ChartTone = "1" | "2" | "3" | "info" | "warning" | "primary" | "neutral" | "success" | "destructive";
|
|
1888
1892
|
/** How many series colours the palette holds (--chart-1 … --chart-8). */
|
|
1889
1893
|
declare const CHART_SERIES_COUNT = 8;
|
|
1890
1894
|
/**
|
|
@@ -1903,7 +1907,7 @@ declare function chartColor(index: number): string;
|
|
|
1903
1907
|
* (`tone: "success"`), not for default series (see chartColor). Tones are
|
|
1904
1908
|
* tuned to be legible as TEXT (dark, restrained); a plotted mark keeps the hue
|
|
1905
1909
|
* but is lifted into the chart lightness band with a chroma floor, so a quiet
|
|
1906
|
-
* tone (a slate "
|
|
1910
|
+
* tone (a slate "3") still reads as colour rather than grey.
|
|
1907
1911
|
*/
|
|
1908
1912
|
declare function toneColor(tone: ChartTone): string;
|
|
1909
1913
|
/** One plotted measure: which field of each datum, what to call it, how to colour it. */
|
|
@@ -2499,7 +2503,7 @@ declare const toolbarMeta: ComponentMeta;
|
|
|
2499
2503
|
*
|
|
2500
2504
|
* <RadioGroup defaultValue="standard">
|
|
2501
2505
|
* <Field label="Standard" orientation="horizontal"><Radio value="standard" /></Field>
|
|
2502
|
-
* <Field label="
|
|
2506
|
+
* <Field label="Poll" orientation="horizontal"><Radio value="poll" /></Field>
|
|
2503
2507
|
* </RadioGroup>
|
|
2504
2508
|
*
|
|
2505
2509
|
* Controlled via value + onValueChange; uncontrolled via defaultValue. Give each
|
|
@@ -2630,8 +2634,8 @@ declare const selectMeta: ComponentMeta;
|
|
|
2630
2634
|
* <Popover>
|
|
2631
2635
|
* <PopoverTrigger render={<Button variant="secondary">Open</Button>} />
|
|
2632
2636
|
* <PopoverContent>
|
|
2633
|
-
* <PopoverTitle>
|
|
2634
|
-
* <PopoverDescription>
|
|
2637
|
+
* <PopoverTitle>Plan details</PopoverTitle>
|
|
2638
|
+
* <PopoverDescription>Billed monthly, per seat.</PopoverDescription>
|
|
2635
2639
|
* <PopoverClose render={<Button variant="ghost" size="sm">Close</Button>} />
|
|
2636
2640
|
* </PopoverContent>
|
|
2637
2641
|
* </Popover>
|
|
@@ -2742,11 +2746,11 @@ type SeparatorProps$1 = Omit<ComponentProps<typeof Menu$1.Separator>, "className
|
|
|
2742
2746
|
};
|
|
2743
2747
|
/** A hairline rule between item runs. Bleeds past the popup padding. */
|
|
2744
2748
|
declare function MenuSeparator({ className, ...props }: SeparatorProps$1): react.JSX.Element;
|
|
2745
|
-
type GroupProps$
|
|
2749
|
+
type GroupProps$3 = Omit<ComponentProps<typeof Menu$1.Group>, "className"> & {
|
|
2746
2750
|
className?: string;
|
|
2747
2751
|
};
|
|
2748
2752
|
/** Groups related items with a label for screen readers. */
|
|
2749
|
-
declare function MenuGroup({ className, ...props }: GroupProps$
|
|
2753
|
+
declare function MenuGroup({ className, ...props }: GroupProps$3): react.JSX.Element;
|
|
2750
2754
|
type GroupLabelProps$2 = Omit<ComponentProps<typeof Menu$1.GroupLabel>, "className"> & {
|
|
2751
2755
|
className?: string;
|
|
2752
2756
|
};
|
|
@@ -3060,6 +3064,7 @@ declare const pillVariants: (props?: ({
|
|
|
3060
3064
|
appearance?: "outline" | "solid" | null | undefined;
|
|
3061
3065
|
size?: "sm" | "md" | null | undefined;
|
|
3062
3066
|
selected?: boolean | null | undefined;
|
|
3067
|
+
tone?: "blue" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "neutral" | null | undefined;
|
|
3063
3068
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3064
3069
|
|
|
3065
3070
|
interface PillProps extends ComponentPropsWithRef<"button">, Omit<VariantProps<typeof pillVariants>, "selected"> {
|
|
@@ -3077,9 +3082,10 @@ interface PillProps extends ComponentPropsWithRef<"button">, Omit<VariantProps<t
|
|
|
3077
3082
|
* `appearance="outline"` is the quiet chip for choices that annotate other
|
|
3078
3083
|
* content (a reaction, a tag on a card); `size="sm"` puts it on the xs control
|
|
3079
3084
|
* height. Use these rather than restyling a Pill with classes — an override is
|
|
3080
|
-
* a look that exists nowhere else in the system.
|
|
3085
|
+
* a look that exists nowhere else in the system. `tone="blue"` (any palette
|
|
3086
|
+
* family) colours the chip as a category, like a tag picker's choices.
|
|
3081
3087
|
*/
|
|
3082
|
-
declare function Pill({ selected, appearance, size, icon, className, children, type, ...props }: PillProps): react.JSX.Element;
|
|
3088
|
+
declare function Pill({ selected, appearance, size, tone, icon, className, children, type, ...props }: PillProps): react.JSX.Element;
|
|
3083
3089
|
declare namespace Pill {
|
|
3084
3090
|
var displayName: string;
|
|
3085
3091
|
}
|
|
@@ -3142,7 +3148,7 @@ declare const notificationBadgeMeta: ComponentMeta;
|
|
|
3142
3148
|
* rounded-full and shrink-0 so it holds its shape inline next to text.
|
|
3143
3149
|
*/
|
|
3144
3150
|
declare const statusDotVariants: (props?: ({
|
|
3145
|
-
tone?: "destructive" | "success" | "
|
|
3151
|
+
tone?: "1" | "2" | "3" | "destructive" | "success" | "blue" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "neutral" | "warning" | "info" | null | undefined;
|
|
3146
3152
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
3147
3153
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3148
3154
|
|
|
@@ -3361,8 +3367,8 @@ declare const useToastManager: typeof useToast;
|
|
|
3361
3367
|
*
|
|
3362
3368
|
* toast.success("Saved")
|
|
3363
3369
|
* toast.error("Upload failed", { description: err.message })
|
|
3364
|
-
* const id = toast.loading("
|
|
3365
|
-
* toast.update(id, { title: "
|
|
3370
|
+
* const id = toast.loading("Uploading report…")
|
|
3371
|
+
* toast.update(id, { title: "Uploaded", type: "success", timeout: 4000 })
|
|
3366
3372
|
* toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Failed" })
|
|
3367
3373
|
*/
|
|
3368
3374
|
declare const toast: ToastApi;
|
|
@@ -3492,12 +3498,12 @@ declare const toastMeta: ComponentMeta;
|
|
|
3492
3498
|
*
|
|
3493
3499
|
* <Accordion defaultValue={["faq-1"]}>
|
|
3494
3500
|
* <AccordionItem value="faq-1">
|
|
3495
|
-
* <AccordionTrigger>
|
|
3496
|
-
* <AccordionPanel>Yes —
|
|
3501
|
+
* <AccordionTrigger>Can I cancel anytime?</AccordionTrigger>
|
|
3502
|
+
* <AccordionPanel>Yes — from billing settings.</AccordionPanel>
|
|
3497
3503
|
* </AccordionItem>
|
|
3498
3504
|
* <AccordionItem value="faq-2">
|
|
3499
3505
|
* <AccordionTrigger>How much does it cost?</AccordionTrigger>
|
|
3500
|
-
* <AccordionPanel
|
|
3506
|
+
* <AccordionPanel>$16 per seat each month.</AccordionPanel>
|
|
3501
3507
|
* </AccordionItem>
|
|
3502
3508
|
* </Accordion>
|
|
3503
3509
|
*
|
|
@@ -3983,11 +3989,11 @@ type SeparatorProps = Omit<ComponentProps<typeof ContextMenu$1.Separator>, "clas
|
|
|
3983
3989
|
};
|
|
3984
3990
|
/** A hairline rule between item runs. Bleeds past the popup padding. */
|
|
3985
3991
|
declare function ContextMenuSeparator({ className, ...props }: SeparatorProps): react.JSX.Element;
|
|
3986
|
-
type GroupProps$
|
|
3992
|
+
type GroupProps$2 = Omit<ComponentProps<typeof ContextMenu$1.Group>, "className"> & {
|
|
3987
3993
|
className?: string;
|
|
3988
3994
|
};
|
|
3989
3995
|
/** Groups related items with a label for screen readers. */
|
|
3990
|
-
declare function ContextMenuGroup({ className, ...props }: GroupProps$
|
|
3996
|
+
declare function ContextMenuGroup({ className, ...props }: GroupProps$2): react.JSX.Element;
|
|
3991
3997
|
type GroupLabelProps = Omit<ComponentProps<typeof ContextMenu$1.GroupLabel>, "className"> & {
|
|
3992
3998
|
className?: string;
|
|
3993
3999
|
};
|
|
@@ -4005,7 +4011,7 @@ declare const contextMenuMeta: ComponentMeta;
|
|
|
4005
4011
|
* <BreadcrumbSeparator />
|
|
4006
4012
|
* <BreadcrumbItem><BreadcrumbLink href="/library">Library</BreadcrumbLink></BreadcrumbItem>
|
|
4007
4013
|
* <BreadcrumbSeparator />
|
|
4008
|
-
* <BreadcrumbItem><BreadcrumbPage>
|
|
4014
|
+
* <BreadcrumbItem><BreadcrumbPage>Reports</BreadcrumbPage></BreadcrumbItem>
|
|
4009
4015
|
* </Breadcrumbs>
|
|
4010
4016
|
*
|
|
4011
4017
|
* The trail is a single horizontal row; the final crumb is the current page
|
|
@@ -4333,7 +4339,7 @@ declare const inlineStatusMeta: ComponentMeta;
|
|
|
4333
4339
|
/**
|
|
4334
4340
|
* Full-width announcement bar, two axes:
|
|
4335
4341
|
*
|
|
4336
|
-
* - `tone` — the meaning (neutral or info/success/warning/
|
|
4342
|
+
* - `tone` — the meaning (neutral or info/success/warning/1/destructive).
|
|
4337
4343
|
* - `appearance` — the emphasis. `soft` (default) is a low-alpha tint of the tone
|
|
4338
4344
|
* over the page foreground; `solid` is the full tone fill with its
|
|
4339
4345
|
* paired tone-foreground ink, for loud, can't-miss states
|
|
@@ -4344,7 +4350,7 @@ declare const inlineStatusMeta: ComponentMeta;
|
|
|
4344
4350
|
* and `sticky` positioning live in `banner.tsx`.
|
|
4345
4351
|
*/
|
|
4346
4352
|
declare const bannerVariants: (props?: ({
|
|
4347
|
-
tone?: "destructive" | "success" | "neutral" | "warning" | "info" |
|
|
4353
|
+
tone?: "1" | "destructive" | "success" | "neutral" | "warning" | "info" | null | undefined;
|
|
4348
4354
|
appearance?: "solid" | "soft" | null | undefined;
|
|
4349
4355
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
4350
4356
|
|
|
@@ -4673,6 +4679,36 @@ declare function PropertyPair({ labels, className, children, ...props }: PairPro
|
|
|
4673
4679
|
declare namespace PropertyPair {
|
|
4674
4680
|
var displayName: string;
|
|
4675
4681
|
}
|
|
4682
|
+
type GroupProps$1 = Omit<ComponentProps<typeof Collapsible>, "children" | "className"> & {
|
|
4683
|
+
/** The group's name. */
|
|
4684
|
+
label: ReactNode;
|
|
4685
|
+
/**
|
|
4686
|
+
* What the group is set to, readable while it is closed: a value ("Cool",
|
|
4687
|
+
* "200% pull"), a few swatches, or both. Sits before the indicator.
|
|
4688
|
+
*/
|
|
4689
|
+
summary?: ReactNode;
|
|
4690
|
+
className?: string;
|
|
4691
|
+
children: ReactNode;
|
|
4692
|
+
};
|
|
4693
|
+
/**
|
|
4694
|
+
* PropertyGroup — a set of properties that folds behind one row, inside a
|
|
4695
|
+
* PanelSection: the row names the group and summarises its value, and opens to
|
|
4696
|
+
* the controls beneath it. The +/− tools use for "more here" (Figma's
|
|
4697
|
+
* collapsible layer properties), at the panel's own scale — an Accordion is
|
|
4698
|
+
* page furniture, its title-sized trigger twice the height of a property row.
|
|
4699
|
+
*
|
|
4700
|
+
* Each group opens on its own, so two can be compared side by side. Groups
|
|
4701
|
+
* stack with a hairline between them; the summary is what keeps a closed
|
|
4702
|
+
* group honest, so give it the value, not a restatement of the label.
|
|
4703
|
+
*
|
|
4704
|
+
* <PropertyGroup label="Neutrals" summary="Cool">
|
|
4705
|
+
* <PropertyRow label="Tint">…</PropertyRow>
|
|
4706
|
+
* </PropertyGroup>
|
|
4707
|
+
*/
|
|
4708
|
+
declare function PropertyGroup({ label, summary, className, children, ...props }: GroupProps$1): react.JSX.Element;
|
|
4709
|
+
declare namespace PropertyGroup {
|
|
4710
|
+
var displayName: string;
|
|
4711
|
+
}
|
|
4676
4712
|
|
|
4677
4713
|
declare const panelSectionMeta: ComponentMeta;
|
|
4678
4714
|
|
|
@@ -5336,7 +5372,7 @@ interface AppHeaderProps extends Omit<ComponentPropsWithRef<"header">, "title">
|
|
|
5336
5372
|
leading?: ReactNode;
|
|
5337
5373
|
/** Center slot — the brand wordmark or the contextual page title. */
|
|
5338
5374
|
title?: ReactNode;
|
|
5339
|
-
/** Trailing slot —
|
|
5375
|
+
/** Trailing slot — account menu, action buttons. */
|
|
5340
5376
|
actions?: ReactNode;
|
|
5341
5377
|
}
|
|
5342
5378
|
/**
|
|
@@ -5345,7 +5381,7 @@ interface AppHeaderProps extends Omit<ComponentPropsWithRef<"header">, "title">
|
|
|
5345
5381
|
* into the top safe-area (notch). A 3-column grid keeps the center title
|
|
5346
5382
|
* optically centered regardless of the leading/trailing slot widths.
|
|
5347
5383
|
*
|
|
5348
|
-
* <AppHeader leading={<BackButton />} title="Notifications" actions={<
|
|
5384
|
+
* <AppHeader leading={<BackButton />} title="Notifications" actions={<AccountMenu />} />
|
|
5349
5385
|
*/
|
|
5350
5386
|
declare function AppHeader({ leading, title, actions, className, ...props }: AppHeaderProps): react.JSX.Element;
|
|
5351
5387
|
declare namespace AppHeader {
|
|
@@ -5736,23 +5772,23 @@ declare const radioCardToneClasses: {
|
|
|
5736
5772
|
readonly dot: "bg-primary";
|
|
5737
5773
|
readonly glyph: "text-foreground";
|
|
5738
5774
|
};
|
|
5739
|
-
readonly
|
|
5775
|
+
readonly "3": {
|
|
5740
5776
|
readonly card: string;
|
|
5741
|
-
readonly marker: "group-data-[checked]:border-tone-
|
|
5742
|
-
readonly dot: "bg-tone-
|
|
5743
|
-
readonly glyph: "text-tone-
|
|
5777
|
+
readonly marker: "group-data-[checked]:border-tone-3";
|
|
5778
|
+
readonly dot: "bg-tone-3";
|
|
5779
|
+
readonly glyph: "text-tone-3";
|
|
5744
5780
|
};
|
|
5745
|
-
readonly
|
|
5781
|
+
readonly "2": {
|
|
5746
5782
|
readonly card: string;
|
|
5747
|
-
readonly marker: "group-data-[checked]:border-tone-
|
|
5748
|
-
readonly dot: "bg-tone-
|
|
5749
|
-
readonly glyph: "text-tone-
|
|
5783
|
+
readonly marker: "group-data-[checked]:border-tone-2";
|
|
5784
|
+
readonly dot: "bg-tone-2";
|
|
5785
|
+
readonly glyph: "text-tone-2";
|
|
5750
5786
|
};
|
|
5751
|
-
readonly
|
|
5787
|
+
readonly "1": {
|
|
5752
5788
|
readonly card: string;
|
|
5753
|
-
readonly marker: "group-data-[checked]:border-tone-
|
|
5754
|
-
readonly dot: "bg-tone-
|
|
5755
|
-
readonly glyph: "text-tone-
|
|
5789
|
+
readonly marker: "group-data-[checked]:border-tone-1";
|
|
5790
|
+
readonly dot: "bg-tone-1";
|
|
5791
|
+
readonly glyph: "text-tone-1";
|
|
5756
5792
|
};
|
|
5757
5793
|
readonly info: {
|
|
5758
5794
|
readonly card: string;
|
|
@@ -5780,13 +5816,13 @@ type RadioCardTone = keyof typeof radioCardToneClasses;
|
|
|
5780
5816
|
* arrow-key navigation, ARIA radiogroup/radio wiring, form integration, and the
|
|
5781
5817
|
* data-[checked] / data-disabled state attributes. We own the visual surface.
|
|
5782
5818
|
*
|
|
5783
|
-
* <RadioGroup defaultValue="
|
|
5784
|
-
* <RadioCard value="post" tone="
|
|
5785
|
-
* title="
|
|
5786
|
-
* <RadioCard value="
|
|
5787
|
-
* title="
|
|
5788
|
-
* <RadioCard value="
|
|
5789
|
-
* title="
|
|
5819
|
+
* <RadioGroup defaultValue="studio" className="grid sm:grid-cols-3">
|
|
5820
|
+
* <RadioCard value="post" tone="3" icon={<Icon name="plus" />}
|
|
5821
|
+
* title="Starter" description="Free for one person" />
|
|
5822
|
+
* <RadioCard value="studio" tone="2" icon={<Icon name="gem" />}
|
|
5823
|
+
* title="Studio" description="For small teams" />
|
|
5824
|
+
* <RadioCard value="business" tone="1" icon={<Icon name="image-stack" />}
|
|
5825
|
+
* title="Business" description="SSO and audit log" />
|
|
5790
5826
|
* </RadioGroup>
|
|
5791
5827
|
*
|
|
5792
5828
|
* Controlled via value + onValueChange; uncontrolled via defaultValue.
|
|
@@ -5847,23 +5883,23 @@ declare const checkboxCardToneClasses: {
|
|
|
5847
5883
|
readonly check: "text-primary-foreground";
|
|
5848
5884
|
readonly glyph: "text-foreground";
|
|
5849
5885
|
};
|
|
5850
|
-
readonly
|
|
5886
|
+
readonly "3": {
|
|
5851
5887
|
readonly card: string;
|
|
5852
|
-
readonly box: "group-data-[checked]:border-tone-
|
|
5853
|
-
readonly check: "text-tone-
|
|
5854
|
-
readonly glyph: "text-tone-
|
|
5888
|
+
readonly box: "group-data-[checked]:border-tone-3 group-data-[checked]:bg-tone-3 group-data-[indeterminate]:border-tone-3 group-data-[indeterminate]:bg-tone-3";
|
|
5889
|
+
readonly check: "text-tone-3-foreground";
|
|
5890
|
+
readonly glyph: "text-tone-3";
|
|
5855
5891
|
};
|
|
5856
|
-
readonly
|
|
5892
|
+
readonly "2": {
|
|
5857
5893
|
readonly card: string;
|
|
5858
|
-
readonly box: "group-data-[checked]:border-tone-
|
|
5859
|
-
readonly check: "text-tone-
|
|
5860
|
-
readonly glyph: "text-tone-
|
|
5894
|
+
readonly box: "group-data-[checked]:border-tone-2 group-data-[checked]:bg-tone-2 group-data-[indeterminate]:border-tone-2 group-data-[indeterminate]:bg-tone-2";
|
|
5895
|
+
readonly check: "text-tone-2-foreground";
|
|
5896
|
+
readonly glyph: "text-tone-2";
|
|
5861
5897
|
};
|
|
5862
|
-
readonly
|
|
5898
|
+
readonly "1": {
|
|
5863
5899
|
readonly card: string;
|
|
5864
|
-
readonly box: "group-data-[checked]:border-tone-
|
|
5865
|
-
readonly check: "text-tone-
|
|
5866
|
-
readonly glyph: "text-tone-
|
|
5900
|
+
readonly box: "group-data-[checked]:border-tone-1 group-data-[checked]:bg-tone-1 group-data-[indeterminate]:border-tone-1 group-data-[indeterminate]:bg-tone-1";
|
|
5901
|
+
readonly check: "text-tone-1-foreground";
|
|
5902
|
+
readonly glyph: "text-tone-1";
|
|
5867
5903
|
};
|
|
5868
5904
|
readonly info: {
|
|
5869
5905
|
readonly card: string;
|
|
@@ -6254,6 +6290,14 @@ interface DisclosurePickerOptionProps extends Omit<ComponentProps<"div">, "class
|
|
|
6254
6290
|
disabled?: boolean;
|
|
6255
6291
|
/** What type-ahead matches, when the name is not plain text. @default the name's text */
|
|
6256
6292
|
textValue?: string;
|
|
6293
|
+
/**
|
|
6294
|
+
* Makes the option removable: a trash glyph at the row's end (on hover or
|
|
6295
|
+
* focus; always on touch) and Delete or Backspace on the focused row call it.
|
|
6296
|
+
* Focus moves to the next option first. Removing never picks.
|
|
6297
|
+
*/
|
|
6298
|
+
onRemove?: () => void;
|
|
6299
|
+
/** The remove glyph's tooltip. @default "Remove" */
|
|
6300
|
+
removeLabel?: string;
|
|
6257
6301
|
className?: string;
|
|
6258
6302
|
}
|
|
6259
6303
|
/**
|
|
@@ -6261,7 +6305,7 @@ interface DisclosurePickerOptionProps extends Omit<ComponentProps<"div">, "class
|
|
|
6261
6305
|
* (from arrow keys, Home/End or type-ahead) rings it; Enter, Space or a click
|
|
6262
6306
|
* picks it and closes the row.
|
|
6263
6307
|
*/
|
|
6264
|
-
declare function DisclosurePickerOption({ value, children, media, note, disabled, textValue, className, onClick, ...props }: DisclosurePickerOptionProps): react.JSX.Element;
|
|
6308
|
+
declare function DisclosurePickerOption({ value, children, media, note, disabled, textValue, onRemove, removeLabel, className, ref, onClick, ...props }: DisclosurePickerOptionProps): react.JSX.Element;
|
|
6265
6309
|
declare namespace DisclosurePickerOption {
|
|
6266
6310
|
var displayName: string;
|
|
6267
6311
|
}
|
|
@@ -6796,7 +6840,7 @@ declare const overflowMenuMeta: ComponentMeta;
|
|
|
6796
6840
|
* ContextCard — a themed rich hover/preview card over Base UI's PreviewCard
|
|
6797
6841
|
* (hover/focus open with delay, collision-aware positioning, Esc/outside
|
|
6798
6842
|
* dismissal, ARIA wiring all come from Base UI). Unlike Tooltip it holds rich,
|
|
6799
|
-
* non-interactive context (a profile,
|
|
6843
|
+
* non-interactive context (a profile, a project summary) and opens on hover or
|
|
6800
6844
|
* focus of an inline anchor. Compose:
|
|
6801
6845
|
*
|
|
6802
6846
|
* <ContextCard>
|
|
@@ -7309,7 +7353,7 @@ declare const carouselMeta: ComponentMeta;
|
|
|
7309
7353
|
type ArtVariant = "mesh" | "grain";
|
|
7310
7354
|
|
|
7311
7355
|
/** The decorative tones art can be painted from — the palette's `--tone-*` family. */
|
|
7312
|
-
type ArtTone = "info" | "
|
|
7356
|
+
type ArtTone = "info" | "3" | "2" | "1" | "warning";
|
|
7313
7357
|
interface GradientArtProps extends ComponentProps<"div"> {
|
|
7314
7358
|
/**
|
|
7315
7359
|
* `mesh` (default) — soft spots of colour pulled together by gentle waves
|
|
@@ -8378,6 +8422,57 @@ interface UseCopyResult {
|
|
|
8378
8422
|
*/
|
|
8379
8423
|
declare function useCopy(text: string, { timeout }?: UseCopyOptions): UseCopyResult;
|
|
8380
8424
|
|
|
8381
|
-
|
|
8425
|
+
/**
|
|
8426
|
+
* The palette: nine colour families and a scale under every tone, generated
|
|
8427
|
+
* for whatever theme is painting. `scripts/build-palette.mjs` writes this into
|
|
8428
|
+
* `src/palette.css`; `palette.test.ts` holds every built-in theme to it.
|
|
8429
|
+
*
|
|
8430
|
+
* The contract is roles, and roles are not enough for a product. Tags, avatars,
|
|
8431
|
+
* labels and illustration need more colours than three tones, and raw Tailwind
|
|
8432
|
+
* steps ignore the theme, so they were banned outright. These follow it:
|
|
8433
|
+
*
|
|
8434
|
+
* - A **family** (red, orange, yellow, green, teal, blue, purple, pink) keeps
|
|
8435
|
+
* its own hue and leans toward the brand by half the gap, at most 15°, and
|
|
8436
|
+
* only as far as the brand has colour to lean toward (an ink-black primary
|
|
8437
|
+
* pulls nothing). Material 3's harmonize, the same lean the customizer gives
|
|
8438
|
+
* status colours. Lightness and chroma are fixed per step, fitted inside sRGB
|
|
8439
|
+
* across the whole lean, so no brand can push a step out of gamut.
|
|
8440
|
+
* - **neutral** is the theme's own page and ink mixed in steps, so it carries
|
|
8441
|
+
* whatever tint the theme's surfaces do.
|
|
8442
|
+
* - Every **tone** (tone-1…3, info, warning, success, destructive) gets a scale
|
|
8443
|
+
* anchored on itself: step 500 IS the tone, the rest walk from it toward the
|
|
8444
|
+
* page and toward the ink.
|
|
8445
|
+
*
|
|
8446
|
+
* Steps follow the mode rather than literal lightness: a low step is always
|
|
8447
|
+
* near the page and a high step always far from it, so 800 text on a 100
|
|
8448
|
+
* wash reads in both modes with no `dark:` (Sable has none).
|
|
8449
|
+
*/
|
|
8450
|
+
declare const PALETTE_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
8451
|
+
type PaletteStep = (typeof PALETTE_STEPS)[number];
|
|
8452
|
+
interface PaletteFamily {
|
|
8453
|
+
name: string;
|
|
8454
|
+
/** The family's own hue, before the lean. */
|
|
8455
|
+
hue: number;
|
|
8456
|
+
/** Step 500, per mode: lightness and the chroma the family is aiming for. */
|
|
8457
|
+
light: {
|
|
8458
|
+
l: number;
|
|
8459
|
+
c: number;
|
|
8460
|
+
};
|
|
8461
|
+
dark: {
|
|
8462
|
+
l: number;
|
|
8463
|
+
c: number;
|
|
8464
|
+
};
|
|
8465
|
+
}
|
|
8466
|
+
declare const PALETTE_FAMILIES: readonly PaletteFamily[];
|
|
8467
|
+
/** The hue families by name — the values Badge, Pill and StatusDot take on `tone`. */
|
|
8468
|
+
declare const PALETTE_COLORS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"];
|
|
8469
|
+
type PaletteColor = (typeof PALETTE_COLORS)[number];
|
|
8470
|
+
declare const isPaletteColor: (value: unknown) => value is PaletteColor;
|
|
8471
|
+
/** Tokens that get a scale of their own, `--<token>-50` … `--<token>-950`. */
|
|
8472
|
+
declare const PALETTE_TONES: readonly ["tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
|
|
8473
|
+
/** Everything the palette names: neutral, the families, then the tone scales. */
|
|
8474
|
+
declare const PALETTE_SCALES: readonly ["neutral", ...string[], "tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
|
|
8475
|
+
|
|
8476
|
+
declare const SABLE_UI_VERSION: "0.11.0";
|
|
8382
8477
|
|
|
8383
|
-
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
|
|
8478
|
+
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
|
package/dist/index.js
CHANGED
|
@@ -16,8 +16,10 @@ import {
|
|
|
16
16
|
TYPE_REFINEMENT_TOKENS,
|
|
17
17
|
TYPE_OVERLINE_TOKENS,
|
|
18
18
|
DENSITY_TOKENS,
|
|
19
|
+
RHYTHM_TOKENS,
|
|
19
20
|
WORKSPACE_SURFACE_TOKENS,
|
|
20
21
|
ART_TOKENS,
|
|
22
|
+
PALETTE_TOKENS,
|
|
21
23
|
TYPE_UI_TOKENS
|
|
22
24
|
} from "./themes/_contract.js";
|
|
23
25
|
import {
|
|
@@ -160,7 +162,8 @@ import { PresentationProvider, usePresentation } from "./lib/presentation.js";
|
|
|
160
162
|
import { useScrollActivity } from "./lib/use-scroll-activity.js";
|
|
161
163
|
import { useCopy } from "./lib/use-copy.js";
|
|
162
164
|
import { STATUS_TONES, STATUS_TONE_ICON } from "./lib/status-tone.js";
|
|
163
|
-
|
|
165
|
+
import { PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, isPaletteColor } from "./lib/palette.js";
|
|
166
|
+
var SABLE_UI_VERSION = "0.11.0";
|
|
164
167
|
export {
|
|
165
168
|
ART_TOKENS,
|
|
166
169
|
CHART_SERIES_COUNT,
|
|
@@ -171,8 +174,15 @@ export {
|
|
|
171
174
|
Density,
|
|
172
175
|
DensityProvider,
|
|
173
176
|
MOTION_TOKENS,
|
|
177
|
+
PALETTE_COLORS,
|
|
178
|
+
PALETTE_FAMILIES,
|
|
179
|
+
PALETTE_SCALES,
|
|
180
|
+
PALETTE_STEPS,
|
|
181
|
+
PALETTE_TOKENS,
|
|
182
|
+
PALETTE_TONES,
|
|
174
183
|
PresentationProvider,
|
|
175
184
|
RADIUS_TOKENS,
|
|
185
|
+
RHYTHM_TOKENS,
|
|
176
186
|
SABLE_COLOR_STORAGE_KEY,
|
|
177
187
|
SABLE_THEME_ATTRIBUTE,
|
|
178
188
|
SABLE_THEME_STORAGE_KEY,
|
|
@@ -197,6 +207,7 @@ export {
|
|
|
197
207
|
componentsInGroup,
|
|
198
208
|
defaultThemeId,
|
|
199
209
|
getThemeManifest,
|
|
210
|
+
isPaletteColor,
|
|
200
211
|
isThemeId,
|
|
201
212
|
switchMeta,
|
|
202
213
|
themeIds,
|