@bcrumbs.net/bc-ui 0.0.17 → 0.0.19

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.
Files changed (24) hide show
  1. package/README.md +2 -1
  2. package/index.esm.js +2241 -2497
  3. package/package.json +4 -1
  4. package/src/index.d.ts +4 -0
  5. package/src/lib/charts/ChartLegend/ChartLegend.d.ts +3 -1
  6. package/src/lib/charts/NewBarChart/NewBarChart.d.ts +3 -1
  7. package/src/lib/charts/NewPieChart/NewPieChart.d.ts +3 -1
  8. package/src/lib/coloredTag/ColoredTag.d.ts +5 -1
  9. package/src/lib/constants/BoxShadow.d.ts +4 -3
  10. package/src/lib/constants/Color.d.ts +123 -110
  11. package/src/lib/constants/FontFamily.d.ts +9 -8
  12. package/src/lib/constants/LineHeight.d.ts +12 -11
  13. package/src/lib/constants/TextSize.d.ts +14 -13
  14. package/src/lib/constants/TextWeight.d.ts +11 -10
  15. package/src/lib/constants/index.d.ts +3 -0
  16. package/src/lib/hooks/useCopyToClipboard/index.d.ts +17 -0
  17. package/src/lib/icon/bcicon.d.ts +10 -0
  18. package/src/lib/newComponents/BCDrawer/BCDrawer.d.ts +29 -0
  19. package/src/lib/newComponents/BCInlineAlert/BCInlineAlert.d.ts +1 -1
  20. package/src/lib/newComponents/BCProgressDialog/BCProgressDialog.d.ts +4 -0
  21. package/src/lib/newComponents/BCProgressDialog/types.d.ts +20 -0
  22. package/src/lib/toaster/index.d.ts +1 -0
  23. package/src/lib/toaster/lightToast.d.ts +12 -0
  24. package/src/stories/NewColorsGallery.d.ts +4 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bcrumbs.net/bc-ui",
3
3
  "description": "The UI components of Bread Crumbs portals",
4
- "version": "0.0.17",
4
+ "version": "0.0.19",
5
5
  "keyword": [
6
6
  "bcrumbs",
7
7
  "bc-ui"
@@ -33,6 +33,9 @@
33
33
  "author": {
34
34
  "name": "Ahmad Mhaish"
35
35
  },
36
+ "publishConfig": {
37
+ "types": "./index.esm.d.ts"
38
+ },
36
39
  "module": "./index.esm.js",
37
40
  "type": "module",
38
41
  "main": "./index.esm.js"
package/src/index.d.ts CHANGED
@@ -50,9 +50,12 @@ export * from './lib/newComponents/BCNewTooltip/BCNewTooltip';
50
50
  export * from './lib/newComponents/BCNewAlertDialog/BCNewAlertDialog';
51
51
  export type { RAlertDialogProps } from './lib/newComponents/BCNewAlertDialog/BCNewAlertDialog';
52
52
  export * from './lib/newComponents/BCNewDialog/BCNewDialog';
53
+ export * from './lib/newComponents/BCDrawer/BCDrawer';
53
54
  export * from './lib/newComponents/BCRadioGroupItem/BCRadioItem';
54
55
  export * from './lib/newComponents/BCNewTabs/BCNewTabs';
55
56
  export * from './lib/newComponents/BCInlineAlert/BCInlineAlert';
57
+ export * from './lib/newComponents/BCProgressDialog/BCProgressDialog';
58
+ export * from './lib/newComponents/BCProgressDialog/types';
56
59
  export * from './lib/baseComponents/button';
57
60
  export * from './lib/sortableHeader/SortableHeader';
58
61
  export * from './lib/newComponents/BCNewTable/types';
@@ -77,4 +80,5 @@ export * from './lib/hooks/useDebounce';
77
80
  export * from './lib/hooks/useWindowSize';
78
81
  export * from './lib/hooks/useInterval';
79
82
  export * from './lib/hooks/useToggle';
83
+ export * from './lib/hooks/useCopyToClipboard';
80
84
  export * from './lib/constants';
package/src/lib/charts/ChartLegend/ChartLegend.d.ts CHANGED
@@ -8,5 +8,7 @@ export interface ChartLegendProps {
8
8
  /** When provided, displays percentage (value/total) instead of raw value */
9
9
  total?: number;
10
10
  loading?: boolean;
11
+ /** Caps the legend height; rows past it scroll inside the legend. */
12
+ maxHeight?: number | string;
11
13
  }
12
- export declare const ChartLegend: ({ items, total, loading }: ChartLegendProps) => import("@emotion/react/jsx-runtime").JSX.Element;
14
+ export declare const ChartLegend: ({ items, total, loading, maxHeight }: ChartLegendProps) => import("@emotion/react/jsx-runtime").JSX.Element;
package/src/lib/charts/NewBarChart/NewBarChart.d.ts CHANGED
@@ -41,5 +41,7 @@ export interface NewBarChartProps {
41
41
  tooltipWithCaret?: boolean;
42
42
  /** Reverses bar order and moves Y-axis to the right for RTL layouts */
43
43
  rtl?: boolean;
44
+ /** Hides both axes (labels and lines) for compact sparkline-style charts. */
45
+ hideAxes?: boolean;
44
46
  }
45
- export declare const NewBarChart: ({ data, height, primaryDataKey, secondaryDataKey, barColor, secondaryBarColor, activeBarColor, activeSecondaryBarColor, barSize, barRadius, barGap, horizontalGrid, margin, tooltipTitle, tooltipSubtitle, tooltipWithCaret, rtl, }: NewBarChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
47
+ export declare const NewBarChart: ({ data, height, primaryDataKey, secondaryDataKey, barColor, secondaryBarColor, activeBarColor, activeSecondaryBarColor, barSize, barRadius, barGap, horizontalGrid, margin, tooltipTitle, tooltipSubtitle, tooltipWithCaret, rtl, hideAxes, }: NewBarChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
package/src/lib/charts/NewPieChart/NewPieChart.d.ts CHANGED
@@ -8,6 +8,8 @@ interface NewPieChartProps {
8
8
  height?: number;
9
9
  value?: number;
10
10
  label?: string;
11
+ /** `donut` (default): ring with the total in the middle. `pie`: solid clockwise slices, no center label. */
12
+ variant?: 'donut' | 'pie';
11
13
  }
12
- export declare const NewPieChart: ({ data, value, label, width, height }: NewPieChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
14
+ export declare const NewPieChart: ({ data, value, label, width, height, variant }: NewPieChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
13
15
  export {};
package/src/lib/coloredTag/ColoredTag.d.ts CHANGED
@@ -7,9 +7,13 @@ export type ColoredTagProps = {
7
7
  onRemove?: () => void;
8
8
  /** Accessible title/tooltip for the remove button. */
9
9
  removeTitle?: string;
10
+ /** Renders the tag as a suggestion: same look, dashed border and reduced opacity. */
11
+ suggested?: boolean;
12
+ /** When provided, the whole tag is clickable (e.g. to add a suggested tag). */
13
+ onClick?: () => void;
10
14
  };
11
15
  /**
12
16
  * Generic tag chip with a stable, near-unique color derived from its label.
13
17
  * Same label always yields the same color across renders.
14
18
  */
15
- export declare const ColoredTag: ({ label, isMobile, onRemove, removeTitle }: ColoredTagProps) => import("@emotion/react/jsx-runtime").JSX.Element;
19
+ export declare const ColoredTag: ({ label, isMobile, onRemove, removeTitle, suggested, onClick, }: ColoredTagProps) => import("@emotion/react/jsx-runtime").JSX.Element;
package/src/lib/constants/BoxShadow.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export declare const BoxShadow: {
2
- S: string;
3
- M: string;
4
- L: string;
2
+ readonly S: "var(--elevation-s)";
3
+ readonly M: "var(--elevation-m)";
4
+ readonly L: "var(--elevation-l)";
5
5
  };
6
+ export type BoxShadow = (typeof BoxShadow)[keyof typeof BoxShadow];
6
7
  export default BoxShadow;
package/src/lib/constants/Color.d.ts CHANGED
@@ -1,112 +1,125 @@
1
- export declare enum NewColors {
2
- PRIMARY = "var(--bc-primary)",
3
- PRIMARY60 = "var(--bc-primary-60)",
4
- PRIMARY40 = "var(--bc-primary-40)",
5
- PRIMARY30 = "var(--bc-primary-30)",
6
- PRIMARY20 = "var(--bc-primary-20)",
7
- PRIMARY10 = "var(--bc-primary-10)",
8
- PRIMARY05 = "var(--bc-primary-05)",
9
- PRIMARY_400 = "var(--bc-primary-400)",
10
- PRIMARY_FOREGROUND = "var(--bc-primary-foreground)",
11
- PRIMARY_LIGHTER = "var(--bc-primary-lighter)",
12
- PRIMARY_BORDER = "var(--bc-primary-border)",
13
- PRIMARY_DARKER = "var(--bc-primary-darker)",
14
- PRIMARY_DARKER_2 = "var(--bc-primary-darker-2)",
15
- PRIMARY_PARAGRAPH = "var(--bc-primary-paragraph)",
16
- PRIMARY_PARAGRAPH_DARKER = "var(--bc-primary-paragraph-darker)",
17
- INBOX_BACKGROUND = "var(--bc-inbox-background)",
18
- BACKGROUND_DARKER = "var(--bc-background-darker)",
19
- BACKGROUND_LIGHT = "var(--bc-background-light)",
20
- INFO_COLOR = "var(--bc-info)",
21
- INFO_LIGHT = "var(--bc-info-light)",
22
- FONT_COLOR = "#000",
23
- PRIMARY_LIGHT = "var(--bc-primary-light)",
24
- SECONDARY = "var(--bc-secondary)",
25
- SECONDARY_HOVER = "var(--bc-secondary-hover)",
26
- SECONDARY_FOREGROUND = "var(--bc-secondary-foreground)",
27
- SECONDARY_LIGHT = "var(--bc-secondary-light)",
28
- SECONDARY_NEUTRAL = " var(--Border-border-neutral-secondary, #E5E7EB)",
29
- SECONDARY_HEADING = "var(--Secondary-Color-Heading, #3F434A)",
30
- DARK = "var(--bc-dark)",
31
- GRAY = "var(--bc-gray)",
32
- DISABLED = "var(--bc-disabled)",
33
- LIGHT_COLOR = "var(--bc-light-color)",
34
- DANGER = "var(--bc-danger)",
35
- DANGER_FOREGROUND = "var(--bc-danger-foreground)",
36
- DANGER_DARKER = "var(--bc-danger-darker)",
37
- DANGER_ALERT = "var(--bc-danger-alert)",
38
- DANGER_LIGHT = "var(--bc-danger-light)",
39
- SUCCESS = "var(--bc-success)",
40
- SUCCESS_DARKER = "var(--bc-success-darker)",
41
- SUCCESS_DARKER_2 = "var(--bc-success-darker-2)",
42
- SUCCESS_LIGHT = "var(--bc-success-light)",
43
- SUCCESS_LIGHT_2 = "var(--bc-success-light-2)",
44
- DROPDOWN_ITEM = "var(--bc-dropDown-item)",
45
- DROPDOWN_HOVER = "var(--bc-dropDown-hover)",
46
- SUB_SIDEBAR_TITLE = "var(--bc-sub-sidebar-title)",
47
- MUTED = "var(--bc-muted)",
48
- MUTED_FOREGROUND = "var(--bc-muted-foreground)",
49
- ACTIVE_COLOR = "var(--bc-active-color)",
50
- TABLE_HEADER = "var(--bc-table-header)",
51
- TABLE_HEADER_FOREGROUND = "var(--bc-table-header-foreground)",
52
- ALTERNATIVE_FOREGROUND = "var(--bc-alternative-foreground)",
53
- BORDER_COLOR = "var(--bc-border-color)",
54
- SECONDARY_BORDER = "var(--bc-secondary-border)",
55
- CONTROLS = "var(--bc-controls)",
56
- FOREGROUND = "var(--bc-foreground)",
57
- FOREGROUND_DARKER = "var(--bc-foreground-darker)",
58
- BACKGROUND = "var(--bc-background)",
59
- BACKGROUND_SECONDARY = "var(--bc-background-secondary)",
60
- PLACEHOLDER = "var(--bc-placeholder)",
61
- HOVER_BG = "var(--bc-hover-bg)",
62
- CARD = "var(--bc-card)",
63
- CARD_BORDER = "var(--bc-card-border)",
64
- ACTIVE_CARD_BORDER = "var(--bc-active-card-border)",
65
- CARD_HOVER = "var(--bc-card-hover)",
66
- CARD_HOVER_LIGHT = "var(--bc-card-hover-light)",
67
- TAG_BACKGROUND = "var(--bc-tag-background)",
68
- TAG_COLOR = "var(--bc-tag-color)",
69
- DARK_BLUE = "#457578",
70
- LIGHT_BLUE = "#e0f3e8",
71
- ACCENT10 = "rgba(89, 111, 255, 0.1)",
72
- CONTROLS_COLOR = "#fff",
73
- GREY_BORDER = "#D9D9D9",
74
- GREY_TEXT_COLOR = "#727272",
75
- GREY_LIGHT_BORDER = "#e4e4e4",
76
- WARNING_DOWNLOAD = "rgba(255, 153, 0, 0.1)",
77
- GREY_WHITE = "#f0f1f5",
78
- LIGHT_GRAY = "var(--bc-light-gray)",
79
- CHARTS_SUCCESS = "var(--bc-charts-success)",
80
- CHARTS_WARNING = "var(--bc-charts-warning)",
81
- CHARTS_DANGER = "var(--bc-charts-danger)",
82
- CHARTS_LABEL = "var(--bc-charts-label)",
83
- CHARTS_LEGEND_LABEL = "var(--bc-charts-legend-label)",
84
- CHARTS_TOOLTIP_TITLE = "var(--bc-charts-tooltip-title)",
85
- SECONDARY80 = "rgb(106, 107, 131, 0.8)",
86
- SECONDARY70 = "rgb(106, 107, 131, 0.7)",
87
- SECONDARY50 = "rgb(106, 107, 131, 0.5)",
88
- SECONDARY40 = "rgb(106, 107, 131, 0.4)",
89
- SECONDARY30 = "rgb(106, 107, 131, 0.3)",
90
- SECONDARY20 = "rgb(106, 107, 131, 0.2)",
91
- SECONDARY10 = "rgb(106, 107, 131, 0.1)",
92
- SECONDARY05 = "rgb(106, 107, 131, 0.05)",
93
- COLD_FUSION = "#6666FF",
94
- BLUEBERRY = "#330066",
95
- HOT_MAGENTA = "#FF3366",
96
- BURNING_ORANGE = "#FF6600",
97
- LEMON_YELLOW = "#FFCC00",
98
- KRYPTONITE_GREEN = "#CCFF00",
99
- GREEN = "#66FF66",
100
- CRAZY_CYAN = "#66FFFF",
101
- EXOPLANET_BLUE = "#66CCFF",
102
- PURPLE = "#9999FF",
103
- PURPLE_RAIN = "#9966FF",
104
- VIOLET = "#CC66FF",
105
- AEROSMITH_PINK = "#FF66FF",
106
- RED_HOT_HOOD = "#FF3300",
107
- MR_WOLF = "#330033",
108
- DAGOBAH_FOREST = "#003333",
109
- CHROME_ORANGE = "#FF9900"
110
- }
1
+ /**
2
+ * Token-backed color constants for bc-ui.
3
+ * Prefer these (or `tokens.*`) over hard-coded hex in components.
4
+ */
5
+ export declare const NewColors: {
6
+ readonly PRIMARY: "var(--color-action-primary)";
7
+ readonly PRIMARY60: "var(--color-overlay-primary60)";
8
+ readonly PRIMARY40: "var(--color-overlay-primary40)";
9
+ readonly PRIMARY30: "var(--color-overlay-primary30)";
10
+ readonly PRIMARY20: "var(--color-overlay-primary20)";
11
+ readonly PRIMARY10: "var(--color-overlay-primary10)";
12
+ readonly PRIMARY05: "var(--color-overlay-primary05)";
13
+ readonly PRIMARY_400: "var(--color-action-primaryMuted)";
14
+ readonly PRIMARY_FOREGROUND: "var(--color-action-primaryForeground)";
15
+ readonly PRIMARY_LIGHTER: "var(--color-action-primarySoft)";
16
+ readonly PRIMARY_BORDER: "var(--bc-primary-border)";
17
+ readonly PRIMARY_DARKER: "var(--color-action-primaryHover)";
18
+ readonly PRIMARY_DARKER_2: "var(--color-action-primaryDeep)";
19
+ readonly PRIMARY_PARAGRAPH: "var(--color-text-paragraph)";
20
+ readonly PRIMARY_PARAGRAPH_DARKER: "var(--bc-primary-paragraph-darker)";
21
+ readonly INBOX_BACKGROUND: "var(--bc-inbox-background)";
22
+ readonly BACKGROUND_DARKER: "var(--bc-background-darker)";
23
+ readonly BACKGROUND_LIGHT: "var(--bc-background-light)";
24
+ readonly INFO_COLOR: "var(--color-status-info)";
25
+ readonly INFO_LIGHT: "var(--color-status-infoLight)";
26
+ readonly FONT_COLOR: "#000";
27
+ readonly PRIMARY_LIGHT: "var(--color-action-primarySubtle)";
28
+ readonly SECONDARY: "var(--color-surface-secondary)";
29
+ readonly SECONDARY_HOVER: "var(--color-surface-hover)";
30
+ readonly SECONDARY_FOREGROUND: "var(--color-text-primary)";
31
+ readonly SECONDARY_LIGHT: "var(--color-text-muted)";
32
+ readonly SECONDARY_NEUTRAL: " var(--Border-border-neutral-secondary, #E5E7EB)";
33
+ readonly SECONDARY_HEADING: "var(--Secondary-Color-Heading, #3F434A)";
34
+ readonly DARK: "var(--bc-dark)";
35
+ readonly GRAY: "var(--bc-gray)";
36
+ readonly DISABLED: "var(--color-text-disabled)";
37
+ readonly LIGHT_COLOR: "var(--bc-light-color)";
38
+ readonly DANGER: "var(--color-status-danger)";
39
+ readonly DANGER_FOREGROUND: "var(--color-status-dangerForeground)";
40
+ readonly DANGER_DARKER: "var(--color-status-dangerDark)";
41
+ readonly DANGER_ALERT: "var(--color-status-dangerAlert)";
42
+ readonly DANGER_LIGHT: "var(--color-status-dangerLight)";
43
+ readonly SUCCESS: "var(--color-status-success)";
44
+ readonly SUCCESS_DARKER: "var(--color-status-successDark)";
45
+ readonly SUCCESS_DARKER_2: "var(--bc-success-darker-2)";
46
+ readonly SUCCESS_LIGHT: "var(--color-status-successLight)";
47
+ readonly SUCCESS_LIGHT_2: "var(--bc-success-light-2)";
48
+ readonly DROPDOWN_ITEM: "var(--bc-dropDown-item)";
49
+ readonly DROPDOWN_HOVER: "var(--bc-dropDown-hover)";
50
+ readonly SUB_SIDEBAR_TITLE: "var(--bc-sub-sidebar-title)";
51
+ readonly MUTED: "var(--color-text-secondary)";
52
+ readonly MUTED_FOREGROUND: "var(--color-text-muted)";
53
+ readonly ACTIVE_COLOR: "var(--bc-active-color)";
54
+ readonly TABLE_HEADER: "var(--bc-table-header)";
55
+ readonly TABLE_HEADER_FOREGROUND: "var(--bc-table-header-foreground)";
56
+ readonly ALTERNATIVE_FOREGROUND: "var(--bc-alternative-foreground)";
57
+ readonly BORDER_COLOR: "var(--color-border-default)";
58
+ readonly SECONDARY_BORDER: "var(--color-border-strong)";
59
+ readonly CONTROLS: "var(--bc-controls)";
60
+ readonly FOREGROUND: "var(--color-text-primary)";
61
+ readonly FOREGROUND_DARKER: "var(--bc-foreground-darker)";
62
+ readonly BACKGROUND: "var(--color-surface-default)";
63
+ readonly BACKGROUND_SECONDARY: "var(--color-surface-subtle)";
64
+ readonly PLACEHOLDER: "var(--color-text-placeholder)";
65
+ readonly HOVER_BG: "var(--color-surface-hover)";
66
+ readonly CARD: "var(--card-surface)";
67
+ readonly CARD_BORDER: "var(--card-border)";
68
+ readonly ACTIVE_CARD_BORDER: "var(--card-borderActive)";
69
+ /** Theme's light brand outline for highlighted cards (e.g. pricing). CARD_BORDER is the neutral one. */
70
+ readonly CARD_BRAND_BORDER: "var(--bc-card-border)";
71
+ readonly CARD_HOVER: "var(--bc-card-hover)";
72
+ readonly CARD_HOVER_LIGHT: "var(--bc-card-hover-light)";
73
+ readonly TAG_BACKGROUND: "var(--bc-tag-background)";
74
+ readonly TAG_COLOR: "var(--bc-tag-color)";
75
+ readonly DARK_BLUE: "#457578";
76
+ readonly LIGHT_BLUE: "#e0f3e8";
77
+ readonly ACCENT10: "rgba(89, 111, 255, 0.1)";
78
+ readonly CONTROLS_COLOR: "#fff";
79
+ readonly GREY_BORDER: "#D9D9D9";
80
+ readonly GREY_TEXT_COLOR: "#727272";
81
+ readonly GREY_LIGHT_BORDER: "#e4e4e4";
82
+ readonly WARNING_DOWNLOAD: "rgba(255, 153, 0, 0.1)";
83
+ readonly GREY_WHITE: "#f0f1f5";
84
+ readonly LIGHT_GRAY: "var(--bc-light-gray)";
85
+ readonly CHARTS_SUCCESS: "var(--color-chart-success)";
86
+ readonly CHARTS_WARNING: "var(--color-chart-warning)";
87
+ readonly CHARTS_DANGER: "var(--color-chart-danger)";
88
+ readonly CHARTS_LABEL: "var(--color-chart-label)";
89
+ readonly CHARTS_LEGEND_LABEL: "var(--color-chart-legend)";
90
+ readonly CHARTS_TOOLTIP_TITLE: "var(--color-chart-tooltipTitle)";
91
+ readonly CHARTS_SERIES_1: "var(--color-chart-series1)";
92
+ readonly CHARTS_SERIES_2: "var(--color-chart-series2)";
93
+ readonly CHARTS_SERIES_3: "var(--color-chart-series3)";
94
+ readonly CHARTS_SERIES_4: "var(--color-chart-series4)";
95
+ readonly CHARTS_SERIES_5: "var(--color-chart-series5)";
96
+ readonly CHARTS_SERIES_OTHER: "var(--color-chart-seriesOther)";
97
+ readonly SECONDARY80: "rgb(106, 107, 131, 0.8)";
98
+ readonly SECONDARY70: "rgb(106, 107, 131, 0.7)";
99
+ readonly SECONDARY50: "rgb(106, 107, 131, 0.5)";
100
+ readonly SECONDARY40: "rgb(106, 107, 131, 0.4)";
101
+ readonly SECONDARY30: "rgb(106, 107, 131, 0.3)";
102
+ readonly SECONDARY20: "rgb(106, 107, 131, 0.2)";
103
+ readonly SECONDARY10: "rgb(106, 107, 131, 0.1)";
104
+ readonly SECONDARY05: "rgb(106, 107, 131, 0.05)";
105
+ readonly COLD_FUSION: "#6666FF";
106
+ readonly BLUEBERRY: "#330066";
107
+ readonly HOT_MAGENTA: "#FF3366";
108
+ readonly BURNING_ORANGE: "#FF6600";
109
+ readonly LEMON_YELLOW: "#FFCC00";
110
+ readonly KRYPTONITE_GREEN: "#CCFF00";
111
+ readonly GREEN: "#66FF66";
112
+ readonly CRAZY_CYAN: "#66FFFF";
113
+ readonly EXOPLANET_BLUE: "#66CCFF";
114
+ readonly PURPLE: "#9999FF";
115
+ readonly PURPLE_RAIN: "#9966FF";
116
+ readonly VIOLET: "#CC66FF";
117
+ readonly AEROSMITH_PINK: "#FF66FF";
118
+ readonly RED_HOT_HOOD: "#FF3300";
119
+ readonly MR_WOLF: "#330033";
120
+ readonly DAGOBAH_FOREST: "#003333";
121
+ readonly CHROME_ORANGE: "#FF9900";
122
+ };
123
+ export type NewColors = (typeof NewColors)[keyof typeof NewColors];
111
124
  export default NewColors;
112
125
  export { NewColors as Color };
package/src/lib/constants/FontFamily.d.ts CHANGED
@@ -4,12 +4,13 @@ export declare enum FontFamily {
4
4
  Poppins = "Poppins",
5
5
  Inter = "Inter"
6
6
  }
7
- export declare enum FontFamilyStack {
8
- DEFAULT = "var(--bc-font-stack)",
9
- POPPINS_PRIMARY = "var(--bc-font-stack-poppins)",
10
- MONTSERRAT_PRIMARY = "var(--bc-font-stack-montserrat)",
11
- INTER_PRIMARY = "var(--bc-font-stack-inter)",
12
- POPPINS_ONLY = "var(--bc-font-stack-primary)",
13
- MONTSERRAT_ONLY = "var(--bc-font-stack-secondary)"
14
- }
7
+ export declare const FontFamilyStack: {
8
+ readonly DEFAULT: "var(--fontFamily-poppins)";
9
+ readonly POPPINS_PRIMARY: "var(--fontFamily-poppins)";
10
+ readonly MONTSERRAT_PRIMARY: "var(--fontFamily-montserrat)";
11
+ readonly INTER_PRIMARY: "var(--fontFamily-inter)";
12
+ readonly POPPINS_ONLY: "var(--fontFamily-poppins)";
13
+ readonly MONTSERRAT_ONLY: "var(--fontFamily-montserrat)";
14
+ };
15
+ export type FontFamilyStack = (typeof FontFamilyStack)[keyof typeof FontFamilyStack];
15
16
  export default FontFamily;
package/src/lib/constants/LineHeight.d.ts CHANGED
@@ -8,15 +8,16 @@ export declare const LineHeight: {
8
8
  32: string;
9
9
  48: string;
10
10
  };
11
- export declare enum LineHeightRem {
12
- XXS = "var(--bc-lineHeight-body-5)",
13
- XS = "var(--bc-lineHeight-body-4)",
14
- S = "var(--bc-lineHeight-body-3)",
15
- M = "var(--bc-lineHeight-body-2)",
16
- L = "var(--bc-lineHeight-body-1)",
17
- XL = "var(--bc-lineHeight-header-4)",
18
- XXL = "var(--bc-lineHeight-header-3)",
19
- XXXL = "var(--bc-lineHeight-header-2)",
20
- XXXXL = "var(--bc-lineHeight-header-1)"
21
- }
11
+ export declare const LineHeightRem: {
12
+ readonly XXS: "var(--lineHeight-body-5)";
13
+ readonly XS: "var(--lineHeight-body-4)";
14
+ readonly S: "var(--lineHeight-body-3)";
15
+ readonly M: "var(--lineHeight-body-2)";
16
+ readonly L: "var(--lineHeight-body-1)";
17
+ readonly XL: "var(--lineHeight-header-4)";
18
+ readonly XXL: "var(--lineHeight-header-3)";
19
+ readonly XXXL: "var(--lineHeight-header-2)";
20
+ readonly XXXXL: "var(--lineHeight-header-1)";
21
+ };
22
+ export type LineHeightRem = (typeof LineHeightRem)[keyof typeof LineHeightRem];
22
23
  export default LineHeight;
package/src/lib/constants/TextSize.d.ts CHANGED
@@ -8,17 +8,18 @@ export declare enum TextSize {
8
8
  XXL = 32,
9
9
  XXXL = 48
10
10
  }
11
- export declare enum TextSizeRem {
12
- XXS = "var(--bc-fontSize-body-5)",
13
- XS = "var(--bc-fontSize-body-4)",
14
- S = "var(--bc-fontSize-body-3)",
15
- M = "var(--bc-fontSize-body-2)",
16
- L = "var(--bc-fontSize-body-1)",
17
- XL = "var(--bc-fontSize-header-4)",
18
- XXL = "var(--bc-fontSize-header-3)",
19
- XXXL = "var(--bc-fontSize-header-2_5)",
20
- XXXXL = "var(--bc-fontSize-header-2)",
21
- XXXXXL = "var(--bc-fontSize-header-1)",
22
- BUTTON = "var(--bc-fontSize-button)"
23
- }
11
+ export declare const TextSizeRem: {
12
+ readonly XXS: "var(--fontSize-body-5)";
13
+ readonly XS: "var(--fontSize-body-4)";
14
+ readonly S: "var(--fontSize-body-3)";
15
+ readonly M: "var(--fontSize-body-2)";
16
+ readonly L: "var(--fontSize-body-1)";
17
+ readonly XL: "var(--fontSize-header-4)";
18
+ readonly XXL: "var(--fontSize-header-3)";
19
+ readonly XXXL: "var(--fontSize-header-2_5)";
20
+ readonly XXXXL: "var(--fontSize-header-2)";
21
+ readonly XXXXXL: "var(--fontSize-header-1)";
22
+ readonly BUTTON: "var(--fontSize-button)";
23
+ };
24
+ export type TextSizeRem = (typeof TextSizeRem)[keyof typeof TextSizeRem];
24
25
  export default TextSize;
package/src/lib/constants/TextWeight.d.ts CHANGED
@@ -5,14 +5,15 @@ export declare enum TextWeight {
5
5
  MEDIUM = 500,
6
6
  BOLD = 700
7
7
  }
8
- export declare enum NewTextWeight {
9
- LIGHT = "var(--bc-fontWeight-light)",
10
- REGULAR = "var(--bc-fontWeight-regular)",
11
- NORMAL = "var(--bc-fontWeight-normal)",
12
- MEDIUM = "var(--bc-fontWeight-medium)",
13
- SEMIBOLD = "var(--bc-fontWeight-semibold)",
14
- BOLD = "var(--bc-fontWeight-bold)",
15
- EXTRABOLD = "var(--bc-fontWeight-extraBold)",
16
- BLACK = "var(--bc-fontWeight-black)"
17
- }
8
+ export declare const NewTextWeight: {
9
+ readonly LIGHT: "var(--fontWeight-light)";
10
+ readonly REGULAR: "var(--fontWeight-regular)";
11
+ readonly NORMAL: "var(--fontWeight-normal)";
12
+ readonly MEDIUM: "var(--fontWeight-medium)";
13
+ readonly SEMIBOLD: "var(--fontWeight-semibold)";
14
+ readonly BOLD: "var(--fontWeight-bold)";
15
+ readonly EXTRABOLD: "var(--fontWeight-extraBold)";
16
+ readonly BLACK: "var(--fontWeight-black)";
17
+ };
18
+ export type NewTextWeight = (typeof NewTextWeight)[keyof typeof NewTextWeight];
18
19
  export default TextWeight;
package/src/lib/constants/index.d.ts CHANGED
@@ -12,3 +12,6 @@ export * from './DroplistSizes';
12
12
  export * from './LogoSize';
13
13
  export * from './Droplist';
14
14
  export * from './InputHeight';
15
+ export * from './BoxShadow';
16
+ export { tokens } from '@bcrumbs.net/design-tokens';
17
+ export type { DesignTokens } from '@bcrumbs.net/design-tokens';
package/src/lib/hooks/useCopyToClipboard/index.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ export type UseCopyToClipboardOptions = {
2
+ /** How long `copied` stays true after a successful copy. Defaults to 2000ms. */
3
+ resetMs?: number;
4
+ /** Already-translated toast title shown after a successful copy. */
5
+ successToast?: string;
6
+ /** Already-translated toast title shown when the browser blocks the copy. */
7
+ errorToast?: string;
8
+ };
9
+ /**
10
+ * Copies text to the clipboard. Exposes `copied` for button-state feedback and can
11
+ * show success/error toasts; clipboard failures are always caught.
12
+ * `copy` resolves to true when the text was copied.
13
+ */
14
+ export declare function useCopyToClipboard({ resetMs, successToast, errorToast }?: UseCopyToClipboardOptions): {
15
+ copy: (text: string | null | undefined) => Promise<boolean>;
16
+ copied: boolean;
17
+ };
package/src/lib/icon/bcicon.d.ts CHANGED
@@ -51,7 +51,9 @@ export declare const BCIcons: {
51
51
  ConvLifecycle: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
52
52
  Channels: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
53
53
  ShowPassword: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
54
+ HidePassword: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
54
55
  Flag: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
56
+ StarSquareRating: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
55
57
  RatingSettings: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
56
58
  CrumbySettings: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
57
59
  CrumbyAIIcon: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -69,6 +71,7 @@ export declare const BCIcons: {
69
71
  Text: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
70
72
  Website: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
71
73
  Integration: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
74
+ Qa: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
72
75
  FineTuning: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
73
76
  Prompts: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
74
77
  SuggestedQs: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -369,6 +372,7 @@ export declare const BCIcons: {
369
372
  height?: number | undefined;
370
373
  fill?: string | undefined;
371
374
  }) => import("@emotion/react/jsx-runtime").JSX.Element;
375
+ Headset: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
372
376
  WhatsappBackArrow: ({ width, height, fill }: {
373
377
  width?: number | undefined;
374
378
  height?: number | undefined;
@@ -496,7 +500,13 @@ export declare const BCIcons: {
496
500
  }) => import("@emotion/react/jsx-runtime").JSX.Element;
497
501
  WorkspacePanel: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
498
502
  Checkout: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
503
+ Personalization: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
499
504
  AlertWarning: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
500
505
  AlertError: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
501
506
  AlertSuccess: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
507
+ QuickReplies: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
508
+ FilledCheckCircle: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
509
+ FilledInfoCircle: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
510
+ CloseSmall: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
511
+ Automation: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
502
512
  };
package/src/lib/newComponents/BCDrawer/BCDrawer.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import React, { ReactNode } from 'react';
2
+ import { SerializedStyles } from '@emotion/react';
3
+ export type BCDrawerProps = {
4
+ isOpen: boolean;
5
+ closeDrawer: () => void;
6
+ /** Rendered in the sticky header, next to the close button. */
7
+ title?: ReactNode;
8
+ /** Scrollable content of the drawer. */
9
+ children: ReactNode;
10
+ /** Rendered in the sticky footer, which stays visible while the body scrolls. */
11
+ footer?: ReactNode;
12
+ rtl?: boolean;
13
+ /** `end` slides in from the trailing edge (right in LTR, left in RTL). */
14
+ side?: 'start' | 'end';
15
+ width?: string;
16
+ showCloseIcon?: boolean;
17
+ /** Closes the drawer when the overlay is clicked. Defaults to true. */
18
+ closeOnOverlayClick?: boolean;
19
+ panelCssStyle?: SerializedStyles;
20
+ bodyCssStyle?: SerializedStyles;
21
+ /** Overlay stacking level; the panel sits one above it. Defaults above the app chrome. */
22
+ zIndex?: number;
23
+ };
24
+ /**
25
+ * Side panel that slides in over the page, with a sticky header and footer around a scrollable
26
+ * body. Use it for editing flows that are too tall for a centred dialog.
27
+ */
28
+ export declare const BCDrawer: React.FC<BCDrawerProps>;
29
+ export default BCDrawer;
package/src/lib/newComponents/BCInlineAlert/BCInlineAlert.d.ts CHANGED
@@ -12,7 +12,7 @@ export type BCInlineAlertProps = {
12
12
  icon?: React.ReactNode;
13
13
  /** Hide the featured icon entirely. */
14
14
  showIcon?: boolean;
15
- /** Mirror layout for right-to-left languages (accent bar moves to the end). */
15
+ /** Force a right-to-left layout. Not needed inside an RTL page: the alert follows the inherited direction. */
16
16
  rtl?: boolean;
17
17
  className?: string;
18
18
  css?: SerializedStyles;
package/src/lib/newComponents/BCProgressDialog/BCProgressDialog.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { BCProgressDialogProps } from './types';
2
+ /** Full-screen progress dialog for long-running jobs (imports, exports, ...). */
3
+ export declare const BCProgressDialog: ({ isOpen, progress, status, title, completedTitle, failedTitle, onClose, onCancel, rtl, backgroundImage, }: BCProgressDialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
4
+ export default BCProgressDialog;
package/src/lib/newComponents/BCProgressDialog/types.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ /** Library-neutral progress state, so consumers can map from any job/status enum. */
2
+ export type BCProgressDialogStatus = 'processing' | 'completed' | 'failed';
3
+ export type BCProgressDialogProps = {
4
+ isOpen: boolean;
5
+ /** Progress percentage, 0-100. */
6
+ progress: number;
7
+ status: BCProgressDialogStatus;
8
+ /** Text shown while the job is processing. */
9
+ title: string;
10
+ /** Text shown once the job has completed. */
11
+ completedTitle: string;
12
+ /** Text shown when the job has failed. */
13
+ failedTitle: string;
14
+ onClose: () => void;
15
+ /** When provided, closing the dialog while processing cancels the job instead. */
16
+ onCancel?: () => void;
17
+ rtl: boolean;
18
+ /** Optional background image URL for the dialog surface; falls back to a dark gradient. */
19
+ backgroundImage?: string;
20
+ };
package/src/lib/toaster/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { ToastContainerProps, ToastPosition } from 'react-toastify';
3
+ export * from './lightToast';
3
4
  export type { ToastPosition };
4
5
  import 'react-toastify/dist/ReactToastify.css';
5
6
  import { IconType } from '../constants';