@nurix/ui-component-library 1.1.3-stage.106 → 1.1.3-stage.108
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.d.mts +348 -76
- package/dist/index.d.ts +348 -76
- package/dist/index.js +1912 -1315
- package/dist/index.mjs +1915 -1322
- package/dist/styles.css +684 -257
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -10,8 +10,8 @@ import { Schema } from 'ajv';
|
|
|
10
10
|
import { OnMount } from '@monaco-editor/react';
|
|
11
11
|
|
|
12
12
|
type ButtonBorderRadius = "none" | "soft" | "rounded";
|
|
13
|
-
type ButtonVariant = "primary" | "secondary" | "destructive" | "outline" | "link" | "iconPrimary" | "iconSecondary" | "iconOutline";
|
|
14
|
-
type ButtonSize = "default" | "sm" | "
|
|
13
|
+
type ButtonVariant = "primary" | "secondary" | "destructive" | "outline" | "link" | "iconPrimary" | "iconSecondary" | "iconOutline" | "iconLink";
|
|
14
|
+
type ButtonSize = "lg" | "default" | "sm" | "xs" | "link" | "icon" | "iconMd" | "iconSm" | "iconXs";
|
|
15
15
|
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
16
16
|
variant?: ButtonVariant;
|
|
17
17
|
size?: ButtonSize;
|
|
@@ -36,7 +36,7 @@ declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.Re
|
|
|
36
36
|
|
|
37
37
|
type InputBorderRadius = "none" | "soft" | "rounded" | "pill";
|
|
38
38
|
type InputVariant = "grey" | "white";
|
|
39
|
-
type SupportingTextType = "help" | "error";
|
|
39
|
+
type SupportingTextType = "help" | "error" | "success";
|
|
40
40
|
type InputForceState = "active" | "focussed" | "disabled";
|
|
41
41
|
interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
42
42
|
/**
|
|
@@ -47,6 +47,19 @@ interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>,
|
|
|
47
47
|
* Whether to show a red "*" required indicator next to the label.
|
|
48
48
|
*/
|
|
49
49
|
mandatory?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Icon or element rendered in the leading slot (left side, 16px).
|
|
52
|
+
*/
|
|
53
|
+
leadingIcon?: React$1.ReactNode;
|
|
54
|
+
/**
|
|
55
|
+
* Icon or element rendered in the trailing slot (right side, 16px).
|
|
56
|
+
*/
|
|
57
|
+
trailingIcon?: React$1.ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* Suffix text rendered at the trailing end (e.g. ".com", "kg").
|
|
60
|
+
* Ignored when `trailingIcon` is provided.
|
|
61
|
+
*/
|
|
62
|
+
suffix?: string;
|
|
50
63
|
/**
|
|
51
64
|
* Supporting/help/error text shown below the field.
|
|
52
65
|
*/
|
|
@@ -271,7 +284,25 @@ interface DialogHeaderNavigationProps extends React$1.HTMLAttributes<HTMLDivElem
|
|
|
271
284
|
backButtonPosition?: BackButtonPosition;
|
|
272
285
|
disabled?: boolean;
|
|
273
286
|
}
|
|
274
|
-
type TabVariant = "top" | "side";
|
|
287
|
+
type TabVariant = "top" | "side" | "section";
|
|
288
|
+
interface ListNavItemProps {
|
|
289
|
+
/** Unique identifier */
|
|
290
|
+
id: string;
|
|
291
|
+
/** Primary text */
|
|
292
|
+
title: string;
|
|
293
|
+
/** Secondary text */
|
|
294
|
+
subtitle?: string;
|
|
295
|
+
/** Trailing content (badges, icons, etc.) */
|
|
296
|
+
trailing?: React$1.ReactNode;
|
|
297
|
+
}
|
|
298
|
+
interface ListNavigationProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
299
|
+
/** List of items */
|
|
300
|
+
items: ListNavItemProps[];
|
|
301
|
+
/** Currently selected item id */
|
|
302
|
+
selectedId?: string | null;
|
|
303
|
+
/** Callback when an item is clicked */
|
|
304
|
+
onSelect?: (id: string) => void;
|
|
305
|
+
}
|
|
275
306
|
interface TabsProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
276
307
|
value?: string;
|
|
277
308
|
defaultValue?: string;
|
|
@@ -297,6 +328,11 @@ declare function Tabs({ className, value, defaultValue, onValueChange, variant,
|
|
|
297
328
|
declare const TabsList: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
298
329
|
declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
299
330
|
declare function TabsContent({ value, forceMount, className, children, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
|
|
331
|
+
/**
|
|
332
|
+
* ListNavigation — A vertical list of selectable items (e.g. call history).
|
|
333
|
+
* Based on Figma design node: 5503:34142
|
|
334
|
+
*/
|
|
335
|
+
declare const ListNavigation: React$1.ForwardRefExoticComponent<ListNavigationProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
300
336
|
|
|
301
337
|
type AccordionType = "single" | "multiple";
|
|
302
338
|
type AccordionValue<TType extends AccordionType> = TType extends "multiple" ? string[] : string | null;
|
|
@@ -339,7 +375,7 @@ declare function AccordionContentPlaceholder({ className, children, }: {
|
|
|
339
375
|
children?: React$1.ReactNode;
|
|
340
376
|
}): react_jsx_runtime.JSX.Element;
|
|
341
377
|
|
|
342
|
-
type AvatarSize = "sm" | "default" | "lg";
|
|
378
|
+
type AvatarSize = "xxs" | "xs" | "sm" | "default" | "lg";
|
|
343
379
|
type AvatarShape = "circle" | "square";
|
|
344
380
|
interface AvatarProps {
|
|
345
381
|
/**
|
|
@@ -402,6 +438,19 @@ declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.Re
|
|
|
402
438
|
declare const AvatarGroup: React$1.ForwardRefExoticComponent<AvatarGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
403
439
|
|
|
404
440
|
type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning";
|
|
441
|
+
/**
|
|
442
|
+
* A tag option for the TagBadge dropdown menu.
|
|
443
|
+
*/
|
|
444
|
+
interface TagOption {
|
|
445
|
+
value: string;
|
|
446
|
+
label: string;
|
|
447
|
+
/** Badge variant to use when this tag is selected */
|
|
448
|
+
variant?: BadgeVariant;
|
|
449
|
+
/** Custom background color (overrides variant) */
|
|
450
|
+
background?: string;
|
|
451
|
+
/** Custom text color (overrides variant) */
|
|
452
|
+
color?: string;
|
|
453
|
+
}
|
|
405
454
|
interface BadgeProps {
|
|
406
455
|
/**
|
|
407
456
|
* The badge variant style.
|
|
@@ -434,6 +483,30 @@ interface BadgeProps {
|
|
|
434
483
|
* Badge content (alternative to label prop).
|
|
435
484
|
*/
|
|
436
485
|
children?: React$1.ReactNode;
|
|
486
|
+
/**
|
|
487
|
+
* Click handler. When provided, badge renders as a button.
|
|
488
|
+
*/
|
|
489
|
+
onClick?: (e: React$1.MouseEvent) => void;
|
|
490
|
+
className?: string;
|
|
491
|
+
style?: React$1.CSSProperties;
|
|
492
|
+
}
|
|
493
|
+
/**
|
|
494
|
+
* Props for TagBadge - an interactive badge that opens a dropdown to select a tag.
|
|
495
|
+
* Mirrors the TagsDropdown pattern from the zero repo.
|
|
496
|
+
*/
|
|
497
|
+
interface TagBadgeProps {
|
|
498
|
+
/** Currently selected tag value */
|
|
499
|
+
value: string | null;
|
|
500
|
+
/** Callback when a tag is selected */
|
|
501
|
+
onValueChange?: (value: string) => void;
|
|
502
|
+
/** Available tag options */
|
|
503
|
+
options: TagOption[];
|
|
504
|
+
/** When true, renders as a non-interactive badge (no dropdown) */
|
|
505
|
+
viewOnly?: boolean;
|
|
506
|
+
/** Placeholder text when no tag is selected */
|
|
507
|
+
placeholder?: string;
|
|
508
|
+
/** Default variant when no tag is selected */
|
|
509
|
+
defaultVariant?: BadgeVariant;
|
|
437
510
|
className?: string;
|
|
438
511
|
style?: React$1.CSSProperties;
|
|
439
512
|
}
|
|
@@ -472,6 +545,13 @@ declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefA
|
|
|
472
545
|
* Based on Figma design node: 3333:1629
|
|
473
546
|
*/
|
|
474
547
|
declare const NumberBadge: React$1.ForwardRefExoticComponent<NumberBadgeProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
548
|
+
/**
|
|
549
|
+
* TagBadge - An interactive badge that opens a dropdown to pick a tag.
|
|
550
|
+
* Mirrors the TagsDropdown behavior from the zero repo:
|
|
551
|
+
* - viewOnly=true: renders as a static badge
|
|
552
|
+
* - viewOnly=false (default): renders as a clickable badge with chevron that opens a tag menu
|
|
553
|
+
*/
|
|
554
|
+
declare const TagBadge: React$1.ForwardRefExoticComponent<TagBadgeProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
475
555
|
|
|
476
556
|
type SelectType = "Single Line Regular" | "Single Line Large" | "Double Line";
|
|
477
557
|
type SelectState = "Default" | "Open";
|
|
@@ -729,16 +809,35 @@ type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitiv
|
|
|
729
809
|
shortcut?: string;
|
|
730
810
|
};
|
|
731
811
|
|
|
732
|
-
|
|
812
|
+
/**
|
|
813
|
+
* Semantic text-style variants (mapped 1:1 from Figma text styles).
|
|
814
|
+
* Each has a predefined font-size, line-height, and font-weight.
|
|
815
|
+
*/
|
|
816
|
+
type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p1" | "p2" | "p3" | "b1" | "b2" | "subtext-xs" | "subtext-sm" | "input-xs" | "input-sm" | "label-sm" | "label-sm-mono" | "label-md" | "label-lg";
|
|
817
|
+
/** Utility text sizes (text-xs through text-6xl). Use with `weight` prop. */
|
|
818
|
+
type TypographySize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
|
|
819
|
+
/** Font weight options (maps to Figma weight tokens). */
|
|
820
|
+
type TypographyWeight = "thin" | "extra-light" | "light" | "regular" | "medium" | "semi-bold" | "bold" | "extra-bold" | "black";
|
|
733
821
|
type TypographyTone = "default" | "muted" | "inherit";
|
|
734
|
-
/** Font family. sans = Nunito (Figma design system). inherit = use parent. */
|
|
735
|
-
type TypographyFontFamily = "sans" | "inherit";
|
|
736
822
|
interface TypographyProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
737
823
|
/**
|
|
738
|
-
*
|
|
824
|
+
* Semantic typography variant (maps to Figma text styles).
|
|
825
|
+
* Provides predefined size + weight combos.
|
|
826
|
+
* Cannot be used together with `size`.
|
|
739
827
|
* @default "p2"
|
|
740
828
|
*/
|
|
741
829
|
variant?: TypographyVariant;
|
|
830
|
+
/**
|
|
831
|
+
* Utility text size. Use together with `weight` for fine-grained control.
|
|
832
|
+
* Cannot be used together with `variant`.
|
|
833
|
+
*/
|
|
834
|
+
size?: TypographySize;
|
|
835
|
+
/**
|
|
836
|
+
* Font weight. Used with `size` for utility text styles.
|
|
837
|
+
* When used with `variant`, overrides the variant's default weight.
|
|
838
|
+
* @default "regular" (when using `size`)
|
|
839
|
+
*/
|
|
840
|
+
weight?: TypographyWeight;
|
|
742
841
|
/**
|
|
743
842
|
* Text color tone.
|
|
744
843
|
* @default "default"
|
|
@@ -754,17 +853,15 @@ interface TypographyProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
|
754
853
|
* Ignored when `asChild` is true.
|
|
755
854
|
*/
|
|
756
855
|
as?: React$1.ElementType;
|
|
757
|
-
/**
|
|
758
|
-
* Font family. "sans" uses Nunito (Figma/Nurix design system).
|
|
759
|
-
* "inherit" uses the parent's font.
|
|
760
|
-
* @default "sans"
|
|
761
|
-
*/
|
|
762
|
-
fontFamily?: TypographyFontFamily;
|
|
763
856
|
}
|
|
764
857
|
|
|
765
858
|
/**
|
|
766
859
|
* Typography component
|
|
767
860
|
* Figma reference: 3732-2079 (Text aliases / use cases)
|
|
861
|
+
*
|
|
862
|
+
* Two usage modes:
|
|
863
|
+
* 1. Semantic: `<Typography variant="h1">` — uses predefined size+weight from Figma
|
|
864
|
+
* 2. Utility: `<Typography size="lg" weight="bold">` — fine-grained size × weight control
|
|
768
865
|
*/
|
|
769
866
|
declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
|
|
770
867
|
|
|
@@ -1188,6 +1285,55 @@ declare const DEFAULT_THEME: {
|
|
|
1188
1285
|
readonly filterInput: "#fff";
|
|
1189
1286
|
readonly primarySelected: "#fff";
|
|
1190
1287
|
readonly hoverSolid: "#efefef";
|
|
1288
|
+
readonly bgWhite: "#ffffff";
|
|
1289
|
+
readonly bgLightGrey: "#fafafa";
|
|
1290
|
+
readonly bgGrey: "#f5f5f5";
|
|
1291
|
+
readonly bgDarkGrey: "#e5e5e5";
|
|
1292
|
+
readonly bgDark: "#0a0a0a";
|
|
1293
|
+
readonly bgBrandPrimary: "#1d4885";
|
|
1294
|
+
readonly bgBrandSecondary: "#eff8ff";
|
|
1295
|
+
readonly bgDestructivePrimary: "#b91c1c";
|
|
1296
|
+
readonly bgDestructiveSecondary: "#fef2f2";
|
|
1297
|
+
readonly bgWarningPrimary: "#92400e";
|
|
1298
|
+
readonly bgWarningSecondary: "#fef3c7";
|
|
1299
|
+
readonly bgSuccessPrimary: "#047857";
|
|
1300
|
+
readonly bgSuccessSecondary: "#ecfdf5";
|
|
1301
|
+
readonly bgBluePrimary: "#0369a1";
|
|
1302
|
+
readonly bgBlueSecondary: "#f0f9ff";
|
|
1303
|
+
readonly borderXlight: "#f5f5f5";
|
|
1304
|
+
readonly borderLight: "#e5e5e5";
|
|
1305
|
+
readonly borderBrand: "#1d4885";
|
|
1306
|
+
readonly borderDestructive: "#b91c1c";
|
|
1307
|
+
readonly borderInput: "#e5e5e5";
|
|
1308
|
+
readonly hovSolidPrimary: "#fafafa";
|
|
1309
|
+
readonly hovSolidSecondary: "#f5f5f5";
|
|
1310
|
+
readonly pressedSolid: "#e5e5e5";
|
|
1311
|
+
readonly inFocusSolid: "#f5f5f5";
|
|
1312
|
+
readonly interactionSelected: "#eff8ff";
|
|
1313
|
+
readonly iconWhite: "#fafafa";
|
|
1314
|
+
readonly iconBlack: "#0a0a0a";
|
|
1315
|
+
readonly iconDisable: "#a3a3a3";
|
|
1316
|
+
readonly iconPlaceholder: "#a3a3a3";
|
|
1317
|
+
readonly iconGreyPrimary: "#a3a3a3";
|
|
1318
|
+
readonly iconGreySecondary: "#737373";
|
|
1319
|
+
readonly iconGreyTertiary: "#525252";
|
|
1320
|
+
readonly iconDestructive: "#b91c1c";
|
|
1321
|
+
readonly iconLink: "#1d4885";
|
|
1322
|
+
readonly iconSuccess: "#047857";
|
|
1323
|
+
readonly iconWarning: "#92400e";
|
|
1324
|
+
readonly iconBlue: "#0369a1";
|
|
1325
|
+
readonly textWhite: "#fafafa";
|
|
1326
|
+
readonly textBlack: "#0a0a0a";
|
|
1327
|
+
readonly textDisable: "#a3a3a3";
|
|
1328
|
+
readonly textPlaceholder: "#a3a3a3";
|
|
1329
|
+
readonly textGreyPrimary: "#a3a3a3";
|
|
1330
|
+
readonly textGreySecondary: "#737373";
|
|
1331
|
+
readonly textGreyTertiary: "#525252";
|
|
1332
|
+
readonly textDestructive: "#b91c1c";
|
|
1333
|
+
readonly textBrand: "#1d4885";
|
|
1334
|
+
readonly textSuccess: "#047857";
|
|
1335
|
+
readonly textWarning: "#92400e";
|
|
1336
|
+
readonly textBlue: "#0369a1";
|
|
1191
1337
|
readonly badgeDefaultBg: "#f0f9ff";
|
|
1192
1338
|
readonly badgeDefaultFg: "#0369a1";
|
|
1193
1339
|
readonly badgeSuccessBg: "#ecfdf5";
|
|
@@ -1242,6 +1388,55 @@ declare const DEFAULT_THEME: {
|
|
|
1242
1388
|
readonly warning: "#fde68a";
|
|
1243
1389
|
readonly warningForeground: "#78350f";
|
|
1244
1390
|
readonly filterInput: "#171717";
|
|
1391
|
+
readonly bgWhite: "#0a0a0a";
|
|
1392
|
+
readonly bgLightGrey: "#171717";
|
|
1393
|
+
readonly bgGrey: "#262626";
|
|
1394
|
+
readonly bgDarkGrey: "#262626";
|
|
1395
|
+
readonly bgDark: "#ffffff";
|
|
1396
|
+
readonly bgBrandPrimary: "#bfdbfe";
|
|
1397
|
+
readonly bgBrandSecondary: "#262626";
|
|
1398
|
+
readonly bgDestructivePrimary: "#f87171";
|
|
1399
|
+
readonly bgDestructiveSecondary: "#0a0a0a";
|
|
1400
|
+
readonly bgWarningPrimary: "#fbbf24";
|
|
1401
|
+
readonly bgWarningSecondary: "#0a0a0a";
|
|
1402
|
+
readonly bgSuccessPrimary: "#a7f3d0";
|
|
1403
|
+
readonly bgSuccessSecondary: "#0a0a0a";
|
|
1404
|
+
readonly bgBluePrimary: "#7dd3fc";
|
|
1405
|
+
readonly bgBlueSecondary: "#0a0a0a";
|
|
1406
|
+
readonly borderXlight: "#262626";
|
|
1407
|
+
readonly borderLight: "#404040";
|
|
1408
|
+
readonly borderBrand: "#bfdbfe";
|
|
1409
|
+
readonly borderDestructive: "#f87171";
|
|
1410
|
+
readonly borderInput: "#262626";
|
|
1411
|
+
readonly hovSolidPrimary: "#262626";
|
|
1412
|
+
readonly hovSolidSecondary: "#262626";
|
|
1413
|
+
readonly pressedSolid: "#171717";
|
|
1414
|
+
readonly inFocusSolid: "#262626";
|
|
1415
|
+
readonly interactionSelected: "#262626";
|
|
1416
|
+
readonly iconWhite: "#171717";
|
|
1417
|
+
readonly iconBlack: "#d4d4d4";
|
|
1418
|
+
readonly iconDisable: "#525252";
|
|
1419
|
+
readonly iconPlaceholder: "#a3a3a3";
|
|
1420
|
+
readonly iconGreyPrimary: "#737373";
|
|
1421
|
+
readonly iconGreySecondary: "#a3a3a3";
|
|
1422
|
+
readonly iconGreyTertiary: "#d4d4d4";
|
|
1423
|
+
readonly iconDestructive: "#f87171";
|
|
1424
|
+
readonly iconLink: "#bfdbfe";
|
|
1425
|
+
readonly iconSuccess: "#a7f3d0";
|
|
1426
|
+
readonly iconWarning: "#fbbf24";
|
|
1427
|
+
readonly iconBlue: "#7dd3fc";
|
|
1428
|
+
readonly textWhite: "#0a0a0a";
|
|
1429
|
+
readonly textBlack: "#d4d4d4";
|
|
1430
|
+
readonly textDisable: "#525252";
|
|
1431
|
+
readonly textPlaceholder: "#a3a3a3";
|
|
1432
|
+
readonly textGreyPrimary: "#737373";
|
|
1433
|
+
readonly textGreySecondary: "#a3a3a3";
|
|
1434
|
+
readonly textGreyTertiary: "#d4d4d4";
|
|
1435
|
+
readonly textDestructive: "#f87171";
|
|
1436
|
+
readonly textBrand: "#bfdbfe";
|
|
1437
|
+
readonly textSuccess: "#a7f3d0";
|
|
1438
|
+
readonly textWarning: "#fbbf24";
|
|
1439
|
+
readonly textBlue: "#7dd3fc";
|
|
1245
1440
|
readonly badgeDefaultBg: "#0c4a6e";
|
|
1246
1441
|
readonly badgeDefaultFg: "#7dd3fc";
|
|
1247
1442
|
readonly badgeSuccessBg: "#064e3b";
|
|
@@ -1260,11 +1455,11 @@ declare const DEFAULT_THEME: {
|
|
|
1260
1455
|
};
|
|
1261
1456
|
readonly components: {
|
|
1262
1457
|
readonly mode1: {
|
|
1263
|
-
readonly inputRadius:
|
|
1264
|
-
readonly inputHeight:
|
|
1458
|
+
readonly inputRadius: 12;
|
|
1459
|
+
readonly inputHeight: 40;
|
|
1265
1460
|
readonly inputHeightLarge: 56;
|
|
1266
|
-
readonly inputPaddingHorizontal:
|
|
1267
|
-
readonly inputPaddingVertical:
|
|
1461
|
+
readonly inputPaddingHorizontal: 12;
|
|
1462
|
+
readonly inputPaddingVertical: 10;
|
|
1268
1463
|
readonly buttonHeight: 40;
|
|
1269
1464
|
readonly buttonRadius: 24;
|
|
1270
1465
|
readonly inputActiveBg: "#2e3034";
|
|
@@ -1475,6 +1670,19 @@ interface StepperBarProps {
|
|
|
1475
1670
|
className?: string;
|
|
1476
1671
|
style?: React$1.CSSProperties;
|
|
1477
1672
|
}
|
|
1673
|
+
interface ProgressBarProps {
|
|
1674
|
+
/**
|
|
1675
|
+
* Progress value from 0 to 100.
|
|
1676
|
+
*/
|
|
1677
|
+
value: number;
|
|
1678
|
+
/**
|
|
1679
|
+
* Maximum value.
|
|
1680
|
+
* @default 100
|
|
1681
|
+
*/
|
|
1682
|
+
max?: number;
|
|
1683
|
+
className?: string;
|
|
1684
|
+
style?: React$1.CSSProperties;
|
|
1685
|
+
}
|
|
1478
1686
|
|
|
1479
1687
|
/**
|
|
1480
1688
|
* StepperBar — Segmented progress bar indicating how many steps are complete.
|
|
@@ -1487,6 +1695,126 @@ declare const StepperBar: React$1.ForwardRefExoticComponent<StepperBarProps & Re
|
|
|
1487
1695
|
* Based on Figma design node: 3729:2600
|
|
1488
1696
|
*/
|
|
1489
1697
|
declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1698
|
+
/**
|
|
1699
|
+
* ProgressBar — Continuous progress bar with fill percentage.
|
|
1700
|
+
* Based on Figma design node: 3357:4677
|
|
1701
|
+
*/
|
|
1702
|
+
declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1703
|
+
|
|
1704
|
+
/**
|
|
1705
|
+
* Icon component tokens.
|
|
1706
|
+
* Maps semantic color names to the icon CSS variable tokens.
|
|
1707
|
+
* These automatically adapt to light/dark mode.
|
|
1708
|
+
*/
|
|
1709
|
+
declare const ICON_TOKENS: {
|
|
1710
|
+
readonly color: {
|
|
1711
|
+
readonly default: "text-icon-black";
|
|
1712
|
+
readonly white: "text-icon-white";
|
|
1713
|
+
readonly black: "text-icon-black";
|
|
1714
|
+
readonly disable: "text-icon-disable";
|
|
1715
|
+
readonly placeholder: "text-icon-placeholder";
|
|
1716
|
+
readonly "grey-primary": "text-icon-grey-primary";
|
|
1717
|
+
readonly "grey-secondary": "text-icon-grey-secondary";
|
|
1718
|
+
readonly "grey-tertiary": "text-icon-grey-tertiary";
|
|
1719
|
+
readonly destructive: "text-icon-destructive";
|
|
1720
|
+
readonly link: "text-icon-link";
|
|
1721
|
+
readonly success: "text-icon-success";
|
|
1722
|
+
readonly warning: "text-icon-warning";
|
|
1723
|
+
readonly blue: "text-icon-blue";
|
|
1724
|
+
};
|
|
1725
|
+
readonly size: {
|
|
1726
|
+
readonly xs: "size-3";
|
|
1727
|
+
readonly sm: "size-4";
|
|
1728
|
+
readonly md: "size-5";
|
|
1729
|
+
readonly lg: "size-6";
|
|
1730
|
+
readonly xl: "size-8";
|
|
1731
|
+
};
|
|
1732
|
+
readonly picker: {
|
|
1733
|
+
readonly trigger: "inline-flex items-center justify-center border border-border-token-light rounded-xl p-2 cursor-pointer hover:bg-foreground/5 transition-colors";
|
|
1734
|
+
readonly dropdown: "bg-card rounded-xl p-3 shadow-sm border border-border-token-xlight w-[320px] max-h-[400px] flex flex-col gap-2";
|
|
1735
|
+
readonly search: "bg-bg-token-light-grey rounded-xl px-3 py-2 text-xs text-text-black placeholder:text-text-placeholder outline-none border border-border-token-xlight focus:border-border-token-brand w-full";
|
|
1736
|
+
readonly grid: "grid grid-cols-8 gap-1 overflow-y-auto max-h-[280px] p-1";
|
|
1737
|
+
readonly gridItem: "flex items-center justify-center p-2 rounded-xl cursor-pointer hover:bg-interaction-hov-solid-primary transition-colors";
|
|
1738
|
+
readonly gridItemSelected: "bg-bg-token-brand-secondary";
|
|
1739
|
+
readonly emptyText: "text-xs text-text-grey-secondary text-center py-4";
|
|
1740
|
+
};
|
|
1741
|
+
};
|
|
1742
|
+
type IconColor = keyof typeof ICON_TOKENS.color;
|
|
1743
|
+
type IconSize = keyof typeof ICON_TOKENS.size;
|
|
1744
|
+
|
|
1745
|
+
interface IconWrapperProps {
|
|
1746
|
+
/**
|
|
1747
|
+
* Semantic icon color. Automatically adapts to light/dark mode.
|
|
1748
|
+
* @default "default" (icon-black in light, icon-d4d4d4 in dark)
|
|
1749
|
+
*/
|
|
1750
|
+
color?: IconColor;
|
|
1751
|
+
/**
|
|
1752
|
+
* Icon size preset.
|
|
1753
|
+
* @default "sm" (16px)
|
|
1754
|
+
*/
|
|
1755
|
+
size?: IconSize;
|
|
1756
|
+
/**
|
|
1757
|
+
* The icon to render. Can be a Lucide icon element or any ReactNode.
|
|
1758
|
+
*/
|
|
1759
|
+
children: React$1.ReactNode;
|
|
1760
|
+
className?: string;
|
|
1761
|
+
style?: React$1.CSSProperties;
|
|
1762
|
+
}
|
|
1763
|
+
interface IconPickerProps {
|
|
1764
|
+
/**
|
|
1765
|
+
* Currently selected icon name (e.g. "Home", "Search").
|
|
1766
|
+
*/
|
|
1767
|
+
value?: string | null;
|
|
1768
|
+
/**
|
|
1769
|
+
* Callback when an icon is selected.
|
|
1770
|
+
*/
|
|
1771
|
+
onValueChange?: (iconName: string) => void;
|
|
1772
|
+
/**
|
|
1773
|
+
* Subset of Lucide icon names to show. If not provided, shows all common icons.
|
|
1774
|
+
*/
|
|
1775
|
+
icons?: string[];
|
|
1776
|
+
/**
|
|
1777
|
+
* Icon color for the trigger and grid.
|
|
1778
|
+
* @default "default"
|
|
1779
|
+
*/
|
|
1780
|
+
color?: IconColor;
|
|
1781
|
+
/**
|
|
1782
|
+
* Icon size in the trigger.
|
|
1783
|
+
* @default "md"
|
|
1784
|
+
*/
|
|
1785
|
+
size?: IconSize;
|
|
1786
|
+
/**
|
|
1787
|
+
* Placeholder text when no icon is selected.
|
|
1788
|
+
* @default "Pick icon"
|
|
1789
|
+
*/
|
|
1790
|
+
placeholder?: string;
|
|
1791
|
+
className?: string;
|
|
1792
|
+
style?: React$1.CSSProperties;
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1795
|
+
/**
|
|
1796
|
+
* IconWrapper — Wraps any icon (Lucide or custom SVG) with theme-aware colors.
|
|
1797
|
+
*
|
|
1798
|
+
* Automatically adapts icon color to light/dark mode using the icon/* CSS variable tokens.
|
|
1799
|
+
* Solves the problem of icons breaking when switching themes.
|
|
1800
|
+
*
|
|
1801
|
+
* Usage:
|
|
1802
|
+
* ```tsx
|
|
1803
|
+
* <IconWrapper color="destructive" size="lg">
|
|
1804
|
+
* <Trash2 />
|
|
1805
|
+
* </IconWrapper>
|
|
1806
|
+
* ```
|
|
1807
|
+
*/
|
|
1808
|
+
declare const IconWrapper: React$1.ForwardRefExoticComponent<IconWrapperProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1809
|
+
/**
|
|
1810
|
+
* IconPicker — A dropdown grid of Lucide icons for the user to pick from.
|
|
1811
|
+
*
|
|
1812
|
+
* Usage:
|
|
1813
|
+
* ```tsx
|
|
1814
|
+
* <IconPicker value={icon} onValueChange={setIcon} />
|
|
1815
|
+
* ```
|
|
1816
|
+
*/
|
|
1817
|
+
declare const IconPicker: React$1.ForwardRefExoticComponent<IconPickerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1490
1818
|
|
|
1491
1819
|
interface ShadowDOMWrapperProps {
|
|
1492
1820
|
children: React$1.ReactNode;
|
|
@@ -2016,60 +2344,4 @@ interface KeyValueEditorProps {
|
|
|
2016
2344
|
*/
|
|
2017
2345
|
declare const KeyValueEditor: React$1.ForwardRefExoticComponent<KeyValueEditorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2018
2346
|
|
|
2019
|
-
type
|
|
2020
|
-
interface KeyValueJsonEditorProps {
|
|
2021
|
-
/**
|
|
2022
|
-
* Current mode: key-value table or JSON editor.
|
|
2023
|
-
*/
|
|
2024
|
-
mode?: KeyValueJsonEditorMode;
|
|
2025
|
-
/**
|
|
2026
|
-
* Initial mode when uncontrolled.
|
|
2027
|
-
*/
|
|
2028
|
-
defaultMode?: KeyValueJsonEditorMode;
|
|
2029
|
-
/**
|
|
2030
|
-
* Called when mode changes (e.g. via toggle).
|
|
2031
|
-
*/
|
|
2032
|
-
onModeChange?: (mode: KeyValueJsonEditorMode) => void;
|
|
2033
|
-
/**
|
|
2034
|
-
* Key-value pairs (controlled). Used when mode is "keyValue".
|
|
2035
|
-
*/
|
|
2036
|
-
pairs?: KeyValuePair[];
|
|
2037
|
-
/**
|
|
2038
|
-
* JSON string (controlled). Used when mode is "json".
|
|
2039
|
-
*/
|
|
2040
|
-
jsonValue?: string;
|
|
2041
|
-
/**
|
|
2042
|
-
* Called when pairs change (key-value mode).
|
|
2043
|
-
*/
|
|
2044
|
-
onPairsChange?: (pairs: KeyValuePair[]) => void;
|
|
2045
|
-
/**
|
|
2046
|
-
* Called when JSON changes (json mode).
|
|
2047
|
-
*/
|
|
2048
|
-
onJsonChange?: (json: string) => void;
|
|
2049
|
-
/**
|
|
2050
|
-
* Initial pairs when uncontrolled.
|
|
2051
|
-
*/
|
|
2052
|
-
defaultPairs?: KeyValuePair[];
|
|
2053
|
-
/**
|
|
2054
|
-
* Initial JSON when uncontrolled.
|
|
2055
|
-
*/
|
|
2056
|
-
defaultJson?: string;
|
|
2057
|
-
keyPlaceholder?: string;
|
|
2058
|
-
valuePlaceholder?: string;
|
|
2059
|
-
jsonHeight?: string;
|
|
2060
|
-
jsonLabel?: string;
|
|
2061
|
-
/**
|
|
2062
|
-
* JsonEditor language when in JSON mode.
|
|
2063
|
-
*/
|
|
2064
|
-
jsonLanguage?: JsonEditorLanguage;
|
|
2065
|
-
className?: string;
|
|
2066
|
-
style?: React.CSSProperties;
|
|
2067
|
-
}
|
|
2068
|
-
|
|
2069
|
-
/**
|
|
2070
|
-
* KeyValueJsonEditor - Unified component with toggle between Key-Value and JSON modes.
|
|
2071
|
-
* Figma reference: 258:10275, 298:6652
|
|
2072
|
-
*/
|
|
2073
|
-
declare const KeyValueJsonEditor: React$1.ForwardRefExoticComponent<KeyValueJsonEditorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2074
|
-
|
|
2075
|
-
export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, KeyValueJsonEditor, type KeyValueJsonEditorMode, type KeyValueJsonEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyFontFamily, type TypographyProps, type TypographyTone, type TypographyVariant, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };
|
|
2347
|
+
export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };
|