@borisj74/bv-ds 0.1.2 → 0.1.3
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 +105 -10
- package/dist/index.d.cts +47 -25
- package/dist/index.d.ts +47 -25
- package/dist/index.js +105 -11
- package/package.json +11 -9
- package/src/components/Button/Button.tsx +1 -1
- package/src/components/ButtonDestructive/ButtonDestructive.tsx +2 -2
- package/src/components/CalendarColumnHeader/CalendarColumnHeader.tsx +1 -1
- package/src/components/CalendarViewDropdown/CalendarViewDropdown.tsx +1 -1
- package/src/components/ChartTooltip/ChartTooltip.tsx +1 -1
- package/src/components/Checkbox/checkboxBase.tsx +1 -1
- package/src/components/ContentFeatureText/ContentFeatureText.tsx +3 -2
- package/src/components/ContextMenu/ContextMenu.tsx +1 -1
- package/src/components/FeaturedIcon/FeaturedIcon.tsx +146 -0
- package/src/components/FeaturedIcon/index.ts +7 -0
- package/src/components/MessageAction/MessageAction.tsx +1 -1
- package/src/components/NavAccountCard/NavAccountCard.tsx +1 -1
- package/src/components/NavAccountCardMenuItem/NavAccountCardMenuItem.tsx +1 -1
- package/src/components/NavButton/NavButton.tsx +1 -1
- package/src/components/NavFeaturedCard/NavFeaturedCard.tsx +1 -1
- package/src/components/NavItemBase/NavItemBase.tsx +1 -1
- package/src/components/NavItemDropdownBase/NavItemDropdownBase.tsx +1 -1
- package/src/components/PageHeader/PageHeader.tsx +1 -1
- package/src/components/PaginationDotIndicator/PaginationDotIndicator.tsx +1 -1
- package/src/components/ProgressBar/ProgressBar.tsx +1 -1
- package/src/components/RadioGroupItem/RadioGroupItem.tsx +1 -1
- package/src/components/SelectMenuItem/SelectMenuItem.tsx +2 -2
- package/src/components/SidebarNavigation/SidebarNavigation.tsx +1 -1
- package/src/components/SocialButton/SocialButton.tsx +2 -2
- package/src/components/TableHeaderLabel/TableHeaderLabel.tsx +1 -1
- package/src/components/Toggle/Toggle.tsx +1 -1
- package/src/components/Tooltip/Tooltip.tsx +1 -1
- package/src/components/TreeViewItem/TreeViewItem.tsx +1 -1
- package/src/components/VerificationCodeInput/VerificationCodeInput.tsx +1 -1
- package/src/index.ts +1 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode, ButtonHTMLAttributes, MouseEventHandler, HTMLAttributes, CSSProperties, InputHTMLAttributes, ElementType, TextareaHTMLAttributes, SVGProps } from 'react';
|
|
2
|
+
import react__default, { ReactNode, ButtonHTMLAttributes, MouseEventHandler, HTMLAttributes, CSSProperties, InputHTMLAttributes, ElementType, TextareaHTMLAttributes, SVGProps } from 'react';
|
|
3
3
|
|
|
4
4
|
type ActivityFeedDivider = "line" | "connector" | "divider" | "none";
|
|
5
5
|
interface ActivityFeedProps {
|
|
@@ -576,7 +576,7 @@ interface ChartTooltipProps {
|
|
|
576
576
|
}
|
|
577
577
|
/**
|
|
578
578
|
* Themed tooltip card for the Recharts chart wrappers — pass as the chart's
|
|
579
|
-
* `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-primary` card with the
|
|
579
|
+
* `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-bg-primary` card with the
|
|
580
580
|
* point label and one colored-dot row per series. Returns null when inactive.
|
|
581
581
|
*/
|
|
582
582
|
declare function ChartTooltip({ active, payload, label, formatValue }: ChartTooltipProps): react.JSX.Element | null;
|
|
@@ -837,7 +837,7 @@ interface ContextMenuProps {
|
|
|
837
837
|
}
|
|
838
838
|
/**
|
|
839
839
|
* A thin positioned panel for right-click menus. Reuses the dropdown panel
|
|
840
|
-
* tokens (shadow-lg, border-secondary-alt, radius-md) and renders whatever
|
|
840
|
+
* tokens (shadow-lg, border-border-secondary-alt, radius-md) and renders whatever
|
|
841
841
|
* rows you pass — compose DropdownMenuListItem children; it does NOT
|
|
842
842
|
* reimplement list items. Pair with `useContextMenu`.
|
|
843
843
|
*/
|
|
@@ -1042,6 +1042,28 @@ interface EmptyStateProps {
|
|
|
1042
1042
|
*/
|
|
1043
1043
|
declare function EmptyState({ icon, title, description, actions, size, className, }: EmptyStateProps): react.JSX.Element;
|
|
1044
1044
|
|
|
1045
|
+
type FeaturedIconColor = "brand" | "gray" | "error" | "warning" | "success";
|
|
1046
|
+
type FeaturedIconTheme = "light" | "dark" | "gradient" | "modern" | "modern-neue";
|
|
1047
|
+
type FeaturedIconSize = "sm" | "md" | "lg" | "xl";
|
|
1048
|
+
interface FeaturedIconProps extends Omit<react__default.HTMLAttributes<HTMLSpanElement>, "color"> {
|
|
1049
|
+
/** Icon element (e.g. from @borisj74/bv-ds-icons). Inherits currentColor. */
|
|
1050
|
+
icon: react__default.ReactNode;
|
|
1051
|
+
color?: FeaturedIconColor;
|
|
1052
|
+
theme?: FeaturedIconTheme;
|
|
1053
|
+
size?: FeaturedIconSize;
|
|
1054
|
+
}
|
|
1055
|
+
/**
|
|
1056
|
+
* FeaturedIcon — Untitled UI "Featured icon" (node 1102:5338).
|
|
1057
|
+
*
|
|
1058
|
+
* A coloured container wrapping an icon, used by Empty state, Alert, Metric,
|
|
1059
|
+
* Notification, etc. Pass the icon via the `icon` slot — it inherits
|
|
1060
|
+
* currentColor, so no fill/stroke props are needed.
|
|
1061
|
+
*
|
|
1062
|
+
* `modern` and `modern-neue` are neutral white-card treatments (gray-only in
|
|
1063
|
+
* Figma); the `color` prop is ignored for those two themes.
|
|
1064
|
+
*/
|
|
1065
|
+
declare function FeaturedIcon({ icon, color, theme, size, className, ...rest }: FeaturedIconProps): react__default.JSX.Element;
|
|
1066
|
+
|
|
1045
1067
|
type FeedItemSize = "sm" | "md";
|
|
1046
1068
|
interface FeedItemBaseProps {
|
|
1047
1069
|
/** Display name of the actor (e.g. "Olivia Rhye"). */
|
|
@@ -1284,7 +1306,7 @@ interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1284
1306
|
arrow?: TooltipArrow;
|
|
1285
1307
|
}
|
|
1286
1308
|
/**
|
|
1287
|
-
* Presentational tooltip bubble (dark `bg-primary-solid`, white text). `text` is
|
|
1309
|
+
* Presentational tooltip bubble (dark `bg-bg-primary-solid`, white text). `text` is
|
|
1288
1310
|
* the heading; `supportingText` adds a second `utility-neutral-300` line (max
|
|
1289
1311
|
* 296px). `arrow` positions a small pointer on the bubble edge (rendered as a
|
|
1290
1312
|
* rotated square). Positioning relative to a trigger is the caller's job.
|
|
@@ -1497,7 +1519,7 @@ interface MessageActionProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
|
|
|
1497
1519
|
* - **minimal** — single-line field + square send button (row).
|
|
1498
1520
|
* - **textarea** — multiline box, attach/emoji + brand Send pinned bottom-right,
|
|
1499
1521
|
* record button top-right.
|
|
1500
|
-
* - **advanced** — AI prompt box on `bg-secondary`; author chip + Shortcuts/Attach
|
|
1522
|
+
* - **advanced** — AI prompt box on `bg-bg-secondary`; author chip + Shortcuts/Attach
|
|
1501
1523
|
* footer, mic top-right, resize handle.
|
|
1502
1524
|
*
|
|
1503
1525
|
* Renders real `<input>`/`<textarea>` (controlled via `value`/`onValueChange`);
|
|
@@ -1720,7 +1742,7 @@ interface NavAccountCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "titl
|
|
|
1720
1742
|
* with a sign-out button; `card` renders a boxed trigger that, when `open`,
|
|
1721
1743
|
* reveals a dropdown (the `menu` slot — compose `NavAccountCardMenuItem` rows).
|
|
1722
1744
|
*
|
|
1723
|
-
* The active account is marked with `bg-brand-solid` (the radio inside the
|
|
1745
|
+
* The active account is marked with `bg-bg-brand-solid` (the radio inside the
|
|
1724
1746
|
* account menu items). Note: Figma opens the desktop menu as a right-side
|
|
1725
1747
|
* flyout; this opens it above the trigger (`bottom-full`) — a layout
|
|
1726
1748
|
* simplification (see figma-map). Width defaults to 280px; override via
|
|
@@ -1751,12 +1773,12 @@ interface NavAccountCardMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButt
|
|
|
1751
1773
|
* A single row inside `NavAccountCard`'s dropdown. Two shapes:
|
|
1752
1774
|
* - `menu-item` — icon + label + optional shortcut chip (View profile, Settings…).
|
|
1753
1775
|
* - `account` — avatar + name/email with a radio indicator; `current` fills the
|
|
1754
|
-
* radio with `bg-brand-solid` (the active-account marker).
|
|
1776
|
+
* radio with `bg-bg-brand-solid` (the active-account marker).
|
|
1755
1777
|
*/
|
|
1756
1778
|
declare function NavAccountCardMenuItem({ type, current, icon, label, shortcut, avatar, name, email, className, ...rest }: NavAccountCardMenuItemProps): react.JSX.Element;
|
|
1757
1779
|
|
|
1758
1780
|
interface NavButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
1759
|
-
/** Active route — applies the selected (`bg-secondary`) background. */
|
|
1781
|
+
/** Active route — applies the selected (`bg-bg-secondary`) background. */
|
|
1760
1782
|
current?: boolean;
|
|
1761
1783
|
/** Render only the leading icon (square button). */
|
|
1762
1784
|
iconOnly?: boolean;
|
|
@@ -1781,7 +1803,7 @@ interface NavFeaturedCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "tit
|
|
|
1781
1803
|
children?: ReactNode;
|
|
1782
1804
|
/** CTA row — compose Button(s) / link buttons. */
|
|
1783
1805
|
action?: ReactNode;
|
|
1784
|
-
/** Bordered surface (`bg-primary` + border) vs subtle (`bg-secondary`). */
|
|
1806
|
+
/** Bordered surface (`bg-bg-primary` + border) vs subtle (`bg-bg-secondary`). */
|
|
1785
1807
|
bordered?: boolean;
|
|
1786
1808
|
/** Renders an x-close button top-right. */
|
|
1787
1809
|
onClose?: () => void;
|
|
@@ -1796,7 +1818,7 @@ interface NavFeaturedCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "tit
|
|
|
1796
1818
|
declare function NavFeaturedCard({ icon, title, subtitle, children, action, bordered, onClose, className, ...rest }: NavFeaturedCardProps): react.JSX.Element;
|
|
1797
1819
|
|
|
1798
1820
|
interface NavItemBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
1799
|
-
/** Active route — selected (`bg-secondary`) background. */
|
|
1821
|
+
/** Active route — selected (`bg-bg-secondary`) background. */
|
|
1800
1822
|
current?: boolean;
|
|
1801
1823
|
/** Leading icon (20px). */
|
|
1802
1824
|
icon?: ReactNode;
|
|
@@ -1815,7 +1837,7 @@ interface NavItemBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
|
|
|
1815
1837
|
declare function NavItemBase({ current, icon, label, dot, badge, trailingChevron, className, type, ...rest }: NavItemBaseProps): react.JSX.Element;
|
|
1816
1838
|
|
|
1817
1839
|
interface NavItemDropdownBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
1818
|
-
/** Active group — selected (`bg-secondary`) background on the trigger. */
|
|
1840
|
+
/** Active group — selected (`bg-bg-secondary`) background on the trigger. */
|
|
1819
1841
|
current?: boolean;
|
|
1820
1842
|
/** Expanded state — reveals the submenu. */
|
|
1821
1843
|
open?: boolean;
|
|
@@ -1901,7 +1923,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" |
|
|
|
1901
1923
|
actions?: ReactNode;
|
|
1902
1924
|
/** Optional breadcrumbs slot above the title. */
|
|
1903
1925
|
breadcrumbs?: ReactNode;
|
|
1904
|
-
/** Banner background image (banner styles); falls back to `bg-tertiary`. */
|
|
1926
|
+
/** Banner background image (banner styles); falls back to `bg-bg-tertiary`. */
|
|
1905
1927
|
bannerUrl?: string;
|
|
1906
1928
|
}
|
|
1907
1929
|
/**
|
|
@@ -1991,7 +2013,7 @@ interface PaginationDotIndicatorProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1991
2013
|
}
|
|
1992
2014
|
/**
|
|
1993
2015
|
* Single pagination indicator — a dot or a line. `current` fills it with the
|
|
1994
|
-
* brand colour, otherwise `bg-quaternary`. Dimensions per size/variant match
|
|
2016
|
+
* brand colour, otherwise `bg-bg-quaternary`. Dimensions per size/variant match
|
|
1995
2017
|
* Figma (dot md 8 / lg 10; line md h6 / lg h8, both 40 wide).
|
|
1996
2018
|
*/
|
|
1997
2019
|
declare function PaginationDotIndicator({ current, size, variant, className, ...rest }: PaginationDotIndicatorProps): react.JSX.Element;
|
|
@@ -2045,7 +2067,7 @@ interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
2045
2067
|
}
|
|
2046
2068
|
/**
|
|
2047
2069
|
* Progress bar — pure CSS, no chart lib. `value` (0–100) drives an animated fill
|
|
2048
|
-
* (`fg-brand-primary` on a `bg-quaternary` track). `label`: none / right (inline
|
|
2070
|
+
* (`fg-brand-primary` on a `bg-bg-quaternary` track). `label`: none / right (inline
|
|
2049
2071
|
* %) / bottom (% under) / top|bottom-floating (tooltip bubble tracking the fill).
|
|
2050
2072
|
*/
|
|
2051
2073
|
declare function ProgressBar({ value, label, className, ...rest }: ProgressBarProps): react.JSX.Element;
|
|
@@ -2167,7 +2189,7 @@ interface RadioGroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
2167
2189
|
}
|
|
2168
2190
|
/**
|
|
2169
2191
|
* Selectable radio/checkbox card. One component over the 6 Figma `type`s — the
|
|
2170
|
-
* shared shell (border, padding, `radius-xl`, selected `border-brand`) is
|
|
2192
|
+
* shared shell (border, padding, `radius-xl`, selected `border-border-brand`) is
|
|
2171
2193
|
* constant; only the leading element and control placement change. `radioButton`
|
|
2172
2194
|
* uses a radio (leading); `checkbox` a checkbox (leading); `iconSimple`/`avatar`/
|
|
2173
2195
|
* `paymentIcon` put a `leading` visual on the left and the checkbox trailing;
|
|
@@ -2279,8 +2301,8 @@ interface SelectMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
2279
2301
|
/**
|
|
2280
2302
|
* List-item primitive for `Select` and Multi-select dropdowns. One component over
|
|
2281
2303
|
* both: `multi` swaps the trailing selected-check for a leading checkbox. The
|
|
2282
|
-
* shared shell is a full-width row with hover `bg-primary-hover`; `label` is
|
|
2283
|
-
* `text-primary`, `supportingText` sits inline in `text-tertiary`.
|
|
2304
|
+
* shared shell is a full-width row with hover `bg-bg-primary-hover`; `label` is
|
|
2305
|
+
* `text-text-primary`, `supportingText` sits inline in `text-text-tertiary`.
|
|
2284
2306
|
*/
|
|
2285
2307
|
declare function SelectMenuItem({ label, supportingText, selected, size, leading, multi, disabled, className, ...rest }: SelectMenuItemProps): react.JSX.Element;
|
|
2286
2308
|
|
|
@@ -2304,7 +2326,7 @@ interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "titl
|
|
|
2304
2326
|
* a fixed-width rail (`slim` collapses to 68px). Composes existing `Nav*`
|
|
2305
2327
|
* components via slots/children — it does not reimplement nav items. On mobile
|
|
2306
2328
|
* the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
|
|
2307
|
-
* `bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
|
|
2329
|
+
* `bg-bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
|
|
2308
2330
|
*
|
|
2309
2331
|
* NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
|
|
2310
2332
|
* 280px column here — compose the icon rail separately if you need the two-tier
|
|
@@ -2394,8 +2416,8 @@ interface SocialButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
2394
2416
|
children?: ReactNode;
|
|
2395
2417
|
}
|
|
2396
2418
|
/**
|
|
2397
|
-
* Social-login button. All themes share the neutral white shell (border-primary,
|
|
2398
|
-
* shadow-xs, `text-secondary` label) — `theme` only controls the brand glyph:
|
|
2419
|
+
* Social-login button. All themes share the neutral white shell (border-border-primary,
|
|
2420
|
+
* shadow-xs, `text-text-secondary` label) — `theme` only controls the brand glyph:
|
|
2399
2421
|
* `color`/`brand` = full color, `gray` = monochrome (CSS grayscale, flagged
|
|
2400
2422
|
* approximation of UntitledUI's true single-color gray logos). `iconOnly` drops
|
|
2401
2423
|
* the label for a square button.
|
|
@@ -2532,7 +2554,7 @@ interface TableHeaderLabelProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
2532
2554
|
helpIcon?: ReactNode;
|
|
2533
2555
|
}
|
|
2534
2556
|
/**
|
|
2535
|
-
* Column-header label — `text-xs` semibold in `text-quaternary` (→ `text-tertiary`
|
|
2557
|
+
* Column-header label — `text-xs` semibold in `text-text-quaternary` (→ `text-text-tertiary`
|
|
2536
2558
|
* on hover), with an optional sort `arrow` and trailing `helpIcon` slot. Consumed
|
|
2537
2559
|
* by `TableHeaderCell`.
|
|
2538
2560
|
*/
|
|
@@ -2647,7 +2669,7 @@ interface ToggleProps {
|
|
|
2647
2669
|
"aria-label"?: string;
|
|
2648
2670
|
}
|
|
2649
2671
|
/**
|
|
2650
|
-
* Switch toggle. `default` = filled track (`bg-brand-solid` when on); `slim` = a
|
|
2672
|
+
* Switch toggle. `default` = filled track (`bg-bg-brand-solid` when on); `slim` = a
|
|
2651
2673
|
* thinner track with a bordered knob (uses the `toggle-slim-border-pressed`
|
|
2652
2674
|
* tokens when on). The `_Toggle base` control is inline (not a separate export).
|
|
2653
2675
|
* Controlled via `checked`/`onCheckedChange`; optional `label`/`supportingText`.
|
|
@@ -2691,7 +2713,7 @@ interface TreeViewItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "onTogg
|
|
|
2691
2713
|
/**
|
|
2692
2714
|
* One row of a `TreeView`. Composes `TreeViewConnector` for the `level` indent
|
|
2693
2715
|
* guides, plus an optional expand chevron, `checkbox`, `icon` and label. Selected
|
|
2694
|
-
* → `bg-secondary`; hover → `bg-primary-hover`. Width is fluid (parent controls).
|
|
2716
|
+
* → `bg-bg-secondary`; hover → `bg-bg-primary-hover`. Width is fluid (parent controls).
|
|
2695
2717
|
*/
|
|
2696
2718
|
declare function TreeViewItem({ size, level, selected, expandable, open, onToggle, checkbox, checked, onCheckedChange, icon, dragHandle, children, className, ...rest }: TreeViewItemProps): react.JSX.Element;
|
|
2697
2719
|
|
|
@@ -2742,7 +2764,7 @@ interface VerificationCodeInputProps {
|
|
|
2742
2764
|
* OTP-style verification code input. `digits` 4 or 6 separate single-character
|
|
2743
2765
|
* cells (6 shows a centre "-" separator); large display typography
|
|
2744
2766
|
* (`display-lg`/`display-xl`). Controlled via `value`/`onChange`; auto-advances
|
|
2745
|
-
* focus on entry and steps back on backspace. Cell borders use `border-primary`
|
|
2767
|
+
* focus on entry and steps back on backspace. Cell borders use `border-border-primary`
|
|
2746
2768
|
* (= `utility-neutral-300` #d4d4d4, same value).
|
|
2747
2769
|
*/
|
|
2748
2770
|
declare function VerificationCodeInput({ digits, value, onChange, size, label, hint, destructive, disabled, className, "aria-label": ariaLabel, }: VerificationCodeInputProps): react.JSX.Element;
|
|
@@ -2767,4 +2789,4 @@ declare namespace index {
|
|
|
2767
2789
|
export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
|
|
2768
2790
|
}
|
|
2769
2791
|
|
|
2770
|
-
export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, CalendarCell, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerProps, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, type NavAccountCardBreakpoint, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };
|
|
2792
|
+
export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, CalendarCell, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerProps, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, type FeaturedIconTheme, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, type NavAccountCardBreakpoint, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };
|
package/dist/index.js
CHANGED
|
@@ -5073,7 +5073,7 @@ function AdvancedFilterBar({
|
|
|
5073
5073
|
}
|
|
5074
5074
|
var hierarchyClasses = {
|
|
5075
5075
|
Primary: "bg-bg-brand-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-brand-solid-hover",
|
|
5076
|
-
Secondary: "bg-bg-primary text-text-secondary border border-border-
|
|
5076
|
+
Secondary: "bg-bg-primary text-text-secondary border border-border-primary shadow-skeuomorphic hover:bg-bg-primary-hover",
|
|
5077
5077
|
Tertiary: "bg-transparent text-text-tertiary border-0 hover:bg-bg-secondary",
|
|
5078
5078
|
"Link color": "bg-transparent text-text-brand-secondary border-0 p-0 hover:text-text-brand-secondary-hover",
|
|
5079
5079
|
"Link gray": "bg-transparent text-text-tertiary border-0 p-0 hover:text-text-tertiary-hover"
|
|
@@ -5961,7 +5961,7 @@ function ButtonCloseX({
|
|
|
5961
5961
|
}
|
|
5962
5962
|
var hierarchyClasses2 = {
|
|
5963
5963
|
Primary: "bg-bg-error-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-error-solid-hover",
|
|
5964
|
-
Secondary: "bg-bg-primary text-text-error-primary border border-border-
|
|
5964
|
+
Secondary: "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
|
|
5965
5965
|
Tertiary: "bg-transparent text-text-error-primary border-0 hover:bg-bg-error-primary",
|
|
5966
5966
|
Link: "bg-transparent text-text-error-primary border-0 p-0 hover:text-text-error-primary"
|
|
5967
5967
|
};
|
|
@@ -6219,7 +6219,7 @@ function CalendarColumnHeader({
|
|
|
6219
6219
|
{
|
|
6220
6220
|
className: clsx_default(
|
|
6221
6221
|
"flex items-center justify-center text-xs font-semibold",
|
|
6222
|
-
current ? "size-6 rounded-full bg-brand-solid text-white" : "text-text-secondary"
|
|
6222
|
+
current ? "size-6 rounded-full bg-bg-brand-solid text-white" : "text-text-secondary"
|
|
6223
6223
|
),
|
|
6224
6224
|
"aria-current": current ? "date" : void 0,
|
|
6225
6225
|
children: date2
|
|
@@ -6478,7 +6478,7 @@ function CalendarViewDropdown({
|
|
|
6478
6478
|
"flex size-4 shrink-0 items-center justify-center rounded-full border",
|
|
6479
6479
|
isSelected ? "border-border-brand" : "border-border-primary"
|
|
6480
6480
|
),
|
|
6481
|
-
children: isSelected ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-brand-solid" }) : null
|
|
6481
|
+
children: isSelected ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-bg-brand-solid" }) : null
|
|
6482
6482
|
}
|
|
6483
6483
|
),
|
|
6484
6484
|
/* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: opt.label }),
|
|
@@ -28849,7 +28849,7 @@ function CheckControlVisual({
|
|
|
28849
28849
|
"peer-focus-visible:ring-2 peer-focus-visible:ring-border-brand peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-primary",
|
|
28850
28850
|
type === "radio" ? "rounded-full" : "rounded-sm",
|
|
28851
28851
|
boxSize[size],
|
|
28852
|
-
disabled ? "border-border-primary bg-bg-tertiary" : active ? "border-brand-solid bg-brand-solid" : "border-border-primary bg-bg-primary"
|
|
28852
|
+
disabled ? "border-border-primary bg-bg-tertiary" : active ? "border-bg-brand-solid bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
|
|
28853
28853
|
),
|
|
28854
28854
|
children: [
|
|
28855
28855
|
type === "checkbox" && checked && !indeterminate ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: glyphSize[size], "aria-hidden": true, children: /* @__PURE__ */ jsx(
|
|
@@ -29298,7 +29298,7 @@ function ContentDivider({
|
|
|
29298
29298
|
);
|
|
29299
29299
|
}
|
|
29300
29300
|
var sizeConfig = {
|
|
29301
|
-
sm: { box: "p-3xl rounded-
|
|
29301
|
+
sm: { box: "p-3xl rounded-2xl", heading: "text-lg", body: "text-md" },
|
|
29302
29302
|
md: { box: "p-4xl rounded-2xl", heading: "text-xl", body: "text-lg" }
|
|
29303
29303
|
};
|
|
29304
29304
|
function ContentFeatureText({
|
|
@@ -29949,6 +29949,100 @@ function EmptyState({
|
|
|
29949
29949
|
}
|
|
29950
29950
|
);
|
|
29951
29951
|
}
|
|
29952
|
+
var boxSize2 = {
|
|
29953
|
+
sm: "size-8",
|
|
29954
|
+
// 32px
|
|
29955
|
+
md: "size-10",
|
|
29956
|
+
// 40px
|
|
29957
|
+
lg: "size-12",
|
|
29958
|
+
// 48px
|
|
29959
|
+
xl: "size-14"
|
|
29960
|
+
// 56px
|
|
29961
|
+
};
|
|
29962
|
+
var iconPx = {
|
|
29963
|
+
sm: 16,
|
|
29964
|
+
md: 20,
|
|
29965
|
+
lg: 24,
|
|
29966
|
+
xl: 28
|
|
29967
|
+
};
|
|
29968
|
+
function radiusFor(theme) {
|
|
29969
|
+
if (theme === "light") return "rounded-full";
|
|
29970
|
+
if (theme === "modern-neue") return "rounded-lg";
|
|
29971
|
+
return "rounded-xl";
|
|
29972
|
+
}
|
|
29973
|
+
var lightBg = {
|
|
29974
|
+
brand: "bg-bg-brand-secondary",
|
|
29975
|
+
gray: "bg-bg-secondary",
|
|
29976
|
+
error: "bg-bg-error-secondary",
|
|
29977
|
+
warning: "bg-bg-warning-secondary",
|
|
29978
|
+
success: "bg-bg-success-secondary"
|
|
29979
|
+
};
|
|
29980
|
+
var lightFg = {
|
|
29981
|
+
brand: "text-fg-brand-primary",
|
|
29982
|
+
gray: "text-fg-secondary",
|
|
29983
|
+
error: "text-fg-error-primary",
|
|
29984
|
+
warning: "text-fg-warning-primary",
|
|
29985
|
+
success: "text-fg-success-primary"
|
|
29986
|
+
};
|
|
29987
|
+
var darkBg = {
|
|
29988
|
+
brand: "bg-bg-brand-solid",
|
|
29989
|
+
gray: "bg-bg-secondary-solid",
|
|
29990
|
+
error: "bg-bg-error-solid",
|
|
29991
|
+
warning: "bg-bg-warning-solid",
|
|
29992
|
+
success: "bg-bg-success-solid"
|
|
29993
|
+
};
|
|
29994
|
+
var gradientFill = {
|
|
29995
|
+
brand: "bg-gradient-to-br from-utility-brand-50 to-utility-brand-200",
|
|
29996
|
+
gray: "bg-gradient-to-br from-utility-neutral-50 to-utility-neutral-200",
|
|
29997
|
+
error: "bg-gradient-to-br from-utility-red-50 to-utility-red-200",
|
|
29998
|
+
warning: "bg-gradient-to-br from-utility-amber-50 to-utility-amber-200",
|
|
29999
|
+
success: "bg-gradient-to-br from-utility-green-50 to-utility-green-200"
|
|
30000
|
+
};
|
|
30001
|
+
function FeaturedIcon({
|
|
30002
|
+
icon,
|
|
30003
|
+
color: color2 = "brand",
|
|
30004
|
+
theme = "light",
|
|
30005
|
+
size = "md",
|
|
30006
|
+
className,
|
|
30007
|
+
...rest
|
|
30008
|
+
}) {
|
|
30009
|
+
const px = iconPx[size];
|
|
30010
|
+
const themeClasses = clsx_default(
|
|
30011
|
+
theme === "light" && [lightBg[color2], lightFg[color2]],
|
|
30012
|
+
theme === "dark" && [
|
|
30013
|
+
darkBg[color2],
|
|
30014
|
+
"text-fg-white border-2 border-[rgba(255,255,255,0.12)] shadow-skeuomorphic"
|
|
30015
|
+
],
|
|
30016
|
+
theme === "gradient" && [gradientFill[color2], "text-fg-white"],
|
|
30017
|
+
theme === "modern" && [
|
|
30018
|
+
"bg-bg-primary text-fg-secondary border border-border-primary shadow-skeuomorphic"
|
|
30019
|
+
],
|
|
30020
|
+
theme === "modern-neue" && [
|
|
30021
|
+
"bg-bg-primary text-fg-secondary border border-border-primary shadow-xs"
|
|
30022
|
+
]
|
|
30023
|
+
);
|
|
30024
|
+
return /* @__PURE__ */ jsx(
|
|
30025
|
+
"span",
|
|
30026
|
+
{
|
|
30027
|
+
className: clsx_default(
|
|
30028
|
+
"inline-flex shrink-0 items-center justify-center",
|
|
30029
|
+
boxSize2[size],
|
|
30030
|
+
radiusFor(theme),
|
|
30031
|
+
themeClasses,
|
|
30032
|
+
className
|
|
30033
|
+
),
|
|
30034
|
+
...rest,
|
|
30035
|
+
children: /* @__PURE__ */ jsx(
|
|
30036
|
+
"span",
|
|
30037
|
+
{
|
|
30038
|
+
"aria-hidden": "true",
|
|
30039
|
+
style: { width: px, height: px, display: "inline-flex" },
|
|
30040
|
+
children: icon
|
|
30041
|
+
}
|
|
30042
|
+
)
|
|
30043
|
+
}
|
|
30044
|
+
);
|
|
30045
|
+
}
|
|
29952
30046
|
var avatarSize2 = {
|
|
29953
30047
|
sm: "size-8",
|
|
29954
30048
|
// 32px
|
|
@@ -31399,7 +31493,7 @@ function MetricItem({
|
|
|
31399
31493
|
}
|
|
31400
31494
|
);
|
|
31401
31495
|
}
|
|
31402
|
-
var
|
|
31496
|
+
var FeaturedIcon2 = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs", children });
|
|
31403
31497
|
var XClose2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
31404
31498
|
function ModalHeader({
|
|
31405
31499
|
title,
|
|
@@ -31433,7 +31527,7 @@ function ModalHeader({
|
|
|
31433
31527
|
isCenter && "items-center"
|
|
31434
31528
|
),
|
|
31435
31529
|
children: [
|
|
31436
|
-
icon && /* @__PURE__ */ jsx(
|
|
31530
|
+
icon && /* @__PURE__ */ jsx(FeaturedIcon2, { children: icon }),
|
|
31437
31531
|
/* @__PURE__ */ jsxs(
|
|
31438
31532
|
"div",
|
|
31439
31533
|
{
|
|
@@ -32091,7 +32185,7 @@ var GLYPH = {
|
|
|
32091
32185
|
error: "M10 6.67V10m0 3.33h.01M18.33 10a8.33 8.33 0 1 1-16.66 0 8.33 8.33 0 0 1 16.66 0Z"
|
|
32092
32186
|
};
|
|
32093
32187
|
var XClose5 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
32094
|
-
var
|
|
32188
|
+
var FeaturedIcon3 = ({ variant }) => /* @__PURE__ */ jsxs("span", { className: clsx_default("relative inline-flex size-5 shrink-0 items-center justify-center", RING[variant].split(" ")[1]), children: [
|
|
32095
32189
|
/* @__PURE__ */ jsx("span", { className: clsx_default("absolute inset-[-20%] rounded-full border-2 opacity-30", RING[variant].split(" ")[0]) }),
|
|
32096
32190
|
/* @__PURE__ */ jsx("span", { className: clsx_default("absolute inset-[-45%] rounded-full border-2 opacity-10", RING[variant].split(" ")[0]) }),
|
|
32097
32191
|
/* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "relative size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: GLYPH[variant], stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
@@ -32116,7 +32210,7 @@ function Notification({
|
|
|
32116
32210
|
),
|
|
32117
32211
|
...rest,
|
|
32118
32212
|
children: [
|
|
32119
|
-
leadingMedia ?? /* @__PURE__ */ jsx(
|
|
32213
|
+
leadingMedia ?? /* @__PURE__ */ jsx(FeaturedIcon3, { variant }),
|
|
32120
32214
|
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-lg pr-8", children: [
|
|
32121
32215
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs", children: [
|
|
32122
32216
|
/* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }),
|
|
@@ -33852,6 +33946,6 @@ object-assign/index.js:
|
|
|
33852
33946
|
*)
|
|
33853
33947
|
*/
|
|
33854
33948
|
|
|
33855
|
-
export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu };
|
|
33949
|
+
export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeaturedIcon, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu };
|
|
33856
33950
|
//# sourceMappingURL=index.js.map
|
|
33857
33951
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@borisj74/bv-ds",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -38,20 +38,22 @@
|
|
|
38
38
|
"react-dom": ">=18.0.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
+
"@borisj74/bv-ds-icons": "^0.1.0",
|
|
42
|
+
"@storybook/addon-a11y": "^8.0.0",
|
|
43
|
+
"@storybook/addon-essentials": "^8.6.14",
|
|
44
|
+
"@storybook/react-vite": "^8.0.0",
|
|
41
45
|
"@types/react": "^18.2.0",
|
|
42
46
|
"@types/react-dom": "^18.2.0",
|
|
47
|
+
"autoprefixer": "^10.4.0",
|
|
48
|
+
"clsx": "^2.1.0",
|
|
49
|
+
"postcss": "^8.4.0",
|
|
43
50
|
"react": "^18.2.0",
|
|
44
51
|
"react-dom": "^18.2.0",
|
|
52
|
+
"recharts": "^2.15.4",
|
|
53
|
+
"storybook": "^8.0.0",
|
|
45
54
|
"tailwindcss": "^3.4.0",
|
|
46
|
-
"postcss": "^8.4.0",
|
|
47
|
-
"autoprefixer": "^10.4.0",
|
|
48
|
-
"clsx": "^2.1.0",
|
|
49
55
|
"tsup": "^8.0.0",
|
|
50
|
-
"typescript": "^5.4.0"
|
|
51
|
-
"@storybook/react-vite": "^8.0.0",
|
|
52
|
-
"@storybook/addon-essentials": "^8.0.0",
|
|
53
|
-
"@storybook/addon-a11y": "^8.0.0",
|
|
54
|
-
"storybook": "^8.0.0"
|
|
56
|
+
"typescript": "^5.4.0"
|
|
55
57
|
},
|
|
56
58
|
"publishConfig": {
|
|
57
59
|
"access": "public"
|
|
@@ -34,7 +34,7 @@ const hierarchyClasses: Record<ButtonHierarchy, string> = {
|
|
|
34
34
|
"bg-bg-brand-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic " +
|
|
35
35
|
"hover:bg-bg-brand-solid-hover",
|
|
36
36
|
Secondary:
|
|
37
|
-
"bg-bg-primary text-text-secondary border border-border-
|
|
37
|
+
"bg-bg-primary text-text-secondary border border-border-primary shadow-skeuomorphic " +
|
|
38
38
|
"hover:bg-bg-primary-hover",
|
|
39
39
|
Tertiary:
|
|
40
40
|
"bg-transparent text-text-tertiary border-0 " +
|
|
@@ -17,12 +17,12 @@ export interface ButtonDestructiveProps
|
|
|
17
17
|
|
|
18
18
|
// Destructive palette (design.md §3 / Figma Button destructive 6218:85578).
|
|
19
19
|
// Primary/Secondary carry the skeuomorphic shadow stack; focus ring is the
|
|
20
|
-
// error ring (border-error).
|
|
20
|
+
// error ring (border-border-error).
|
|
21
21
|
const hierarchyClasses: Record<ButtonDestructiveHierarchy, string> = {
|
|
22
22
|
Primary:
|
|
23
23
|
"bg-bg-error-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-error-solid-hover",
|
|
24
24
|
Secondary:
|
|
25
|
-
"bg-bg-primary text-text-error-primary border border-border-
|
|
25
|
+
"bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
|
|
26
26
|
Tertiary:
|
|
27
27
|
"bg-transparent text-text-error-primary border-0 hover:bg-bg-error-primary",
|
|
28
28
|
Link: "bg-transparent text-text-error-primary border-0 p-0 hover:text-text-error-primary",
|
|
@@ -33,7 +33,7 @@ export function CalendarColumnHeader({
|
|
|
33
33
|
className={clsx(
|
|
34
34
|
"flex items-center justify-center text-xs font-semibold",
|
|
35
35
|
current
|
|
36
|
-
? "size-6 rounded-full bg-brand-solid text-white"
|
|
36
|
+
? "size-6 rounded-full bg-bg-brand-solid text-white"
|
|
37
37
|
: "text-text-secondary",
|
|
38
38
|
)}
|
|
39
39
|
aria-current={current ? "date" : undefined}
|
|
@@ -83,7 +83,7 @@ export function CalendarViewDropdown({
|
|
|
83
83
|
)}
|
|
84
84
|
>
|
|
85
85
|
{isSelected ? (
|
|
86
|
-
<span className="size-2 rounded-full bg-brand-solid" />
|
|
86
|
+
<span className="size-2 rounded-full bg-bg-brand-solid" />
|
|
87
87
|
) : null}
|
|
88
88
|
</span>
|
|
89
89
|
<span className="flex-1 text-left">{opt.label}</span>
|
|
@@ -20,7 +20,7 @@ export interface ChartTooltipProps {
|
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* Themed tooltip card for the Recharts chart wrappers — pass as the chart's
|
|
23
|
-
* `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-primary` card with the
|
|
23
|
+
* `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-bg-primary` card with the
|
|
24
24
|
* point label and one colored-dot row per series. Returns null when inactive.
|
|
25
25
|
*/
|
|
26
26
|
export function ChartTooltip({ active, payload, label, formatValue }: ChartTooltipProps) {
|
|
@@ -14,12 +14,13 @@ export interface ContentFeatureTextProps {
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
// md verified (p-4xl, rounded-2xl, heading text-xl, body text-lg).
|
|
17
|
-
// sm
|
|
17
|
+
// sm verified 2026-06-27 (node 3959:413352): p-3xl, rounded-2xl, heading text-lg,
|
|
18
|
+
// body text-md. Radius corrected rounded-xl→rounded-2xl (was inferred wrong).
|
|
18
19
|
const sizeConfig: Record<
|
|
19
20
|
ContentFeatureTextSize,
|
|
20
21
|
{ box: string; heading: string; body: string }
|
|
21
22
|
> = {
|
|
22
|
-
sm: { box: "p-3xl rounded-
|
|
23
|
+
sm: { box: "p-3xl rounded-2xl", heading: "text-lg", body: "text-md" },
|
|
23
24
|
md: { box: "p-4xl rounded-2xl", heading: "text-xl", body: "text-lg" },
|
|
24
25
|
};
|
|
25
26
|
|
|
@@ -18,7 +18,7 @@ export interface ContextMenuProps {
|
|
|
18
18
|
|
|
19
19
|
/**
|
|
20
20
|
* A thin positioned panel for right-click menus. Reuses the dropdown panel
|
|
21
|
-
* tokens (shadow-lg, border-secondary-alt, radius-md) and renders whatever
|
|
21
|
+
* tokens (shadow-lg, border-border-secondary-alt, radius-md) and renders whatever
|
|
22
22
|
* rows you pass — compose DropdownMenuListItem children; it does NOT
|
|
23
23
|
* reimplement list items. Pair with `useContextMenu`.
|
|
24
24
|
*/
|