@konstructio/ui 0.1.0-alpha.9 → 0.1.1-alpha.2

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 (167) hide show
  1. package/dist/DatePicker.css +1 -1
  2. package/dist/{Modal-CrG0m703.js → Modal-0oht63vU.js} +32 -32
  3. package/dist/assets/icons/components/Search.js +26 -0
  4. package/dist/assets/icons/components/Warning.js +22 -0
  5. package/dist/assets/icons/components/index.js +6 -0
  6. package/dist/{chevron-down-UW8ts6wI.js → chevron-down-CVce9Mvh.js} +2 -2
  7. package/dist/components/Alert/Alert.js +23 -25
  8. package/dist/components/Alert/Alert.variants.js +1 -1
  9. package/dist/components/AlertDialog/AlertDialog.js +1 -1
  10. package/dist/components/AlertDialog/components/AlertDialogTrigger.js +1 -1
  11. package/dist/components/AlertDialog/components/index.js +1 -1
  12. package/dist/components/AlertDialog/hooks/useAlertDialog.js +7 -7
  13. package/dist/components/Autocomplete/Autocomplete.variants.js +3 -4
  14. package/dist/components/Autocomplete/components/List/List.variants.js +3 -7
  15. package/dist/components/Autocomplete/hooks/useAutocomplete.js +38 -43
  16. package/dist/components/Autocomplete/hooks/useNavigationList.js +29 -37
  17. package/dist/components/Badge/Badge.js +40 -42
  18. package/dist/components/Badge/Badge.variants.js +1 -1
  19. package/dist/components/Breadcrumb/Breadcrumb.variants.js +1 -1
  20. package/dist/components/Breadcrumb/components/Item/Item.js +22 -21
  21. package/dist/components/Breadcrumb/components/Item/Item.variants.js +1 -1
  22. package/dist/components/Breadcrumb/hooks/useBreadcrumb.js +1 -1
  23. package/dist/components/Button/Button.js +15 -15
  24. package/dist/components/Button/Button.variants.js +10 -77
  25. package/dist/components/Card/Card.variants.js +3 -5
  26. package/dist/components/Checkbox/Checkbox.js +48 -47
  27. package/dist/components/Checkbox/Checkbox.variants.js +3 -4
  28. package/dist/components/Command/Command.js +2 -2
  29. package/dist/components/Command/Command.variants.js +1 -1
  30. package/dist/components/Command/components/Command.js +1 -1
  31. package/dist/components/Command/components/CommandEmpty.js +1 -1
  32. package/dist/components/Command/components/CommandGroup.js +1 -1
  33. package/dist/components/Command/components/CommandInput.js +1 -1
  34. package/dist/components/Command/components/CommandItem.js +13 -13
  35. package/dist/components/Command/components/CommandList.js +1 -1
  36. package/dist/components/Command/components/CommandSeparator.js +1 -1
  37. package/dist/components/Command/components/DialogContent.js +1 -1
  38. package/dist/components/Command/components/DialogOverlay.js +1 -1
  39. package/dist/components/Datepicker/DatePicker.js +1496 -1577
  40. package/dist/components/Datepicker/DatePicker.variants.js +1 -1
  41. package/dist/components/Divider/Divider.variants.js +1 -1
  42. package/dist/components/Dropdown/Dropdown.js +28 -6
  43. package/dist/components/Dropdown/Dropdown.variants.js +43 -26
  44. package/dist/components/Dropdown/components/List/List.variants.js +1 -1
  45. package/dist/components/Dropdown/components/ListItem/ListItem.variants.js +5 -5
  46. package/dist/components/Dropdown/components/Wrapper.js +96 -86
  47. package/dist/components/Dropdown/contexts/dropdown.provider.js +12 -12
  48. package/dist/components/Dropdown/hooks/useDropdown.js +26 -30
  49. package/dist/components/Dropdown/hooks/useNavigationList.js +25 -31
  50. package/dist/components/DropdownButton/DropdownButton.js +135 -0
  51. package/dist/components/Filter/Filter.variants.js +1 -1
  52. package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.hook.js +47 -49
  53. package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js +1 -1
  54. package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.hook.js +41 -42
  55. package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.js +30 -30
  56. package/dist/components/Filter/components/ResetButton/ResetButton.js +22 -16
  57. package/dist/components/Input/Input.js +116 -109
  58. package/dist/components/Input/Input.variants.js +18 -5
  59. package/dist/components/Loading/Loading.js +2 -2
  60. package/dist/components/Loading/Loading.variants.js +1 -2
  61. package/dist/components/Modal/Modal.js +2 -2
  62. package/dist/components/Modal/components/Body/Body.js +1 -1
  63. package/dist/components/Modal/components/Footer/Footer.js +1 -1
  64. package/dist/components/Modal/components/Header/Header.js +1 -1
  65. package/dist/components/Modal/components/Wrapper/Wrapper.js +2 -2
  66. package/dist/components/Modal/components/Wrapper/Wrapper.variants.js +7 -9
  67. package/dist/components/Modal/components/index.js +1 -1
  68. package/dist/components/Modal/hooks/useModal.js +16 -17
  69. package/dist/components/NumberInput/NumberInput.js +91 -91
  70. package/dist/components/NumberInput/NumberInput.variants.js +1 -1
  71. package/dist/components/PieChart/PieChart.js +5138 -0
  72. package/dist/components/ProgressBar/ProgressBar.js +58 -26
  73. package/dist/components/ProgressBar/ProgressBar.variants.js +1 -1
  74. package/dist/components/Radio/Radio.js +64 -48
  75. package/dist/components/Radio/Radio.variants.js +3 -3
  76. package/dist/components/RadioCard/RadioCard.js +26 -23
  77. package/dist/components/RadioCard/RadioCard.variants.js +1 -1
  78. package/dist/components/RadioCardGroup/RadioCardGroup.js +28 -28
  79. package/dist/components/RadioCardGroup/RadioCardGroup.variants.js +1 -1
  80. package/dist/components/RadioGroup/RadioGroup.js +37 -37
  81. package/dist/components/RadioGroup/RadioGroup.variants.js +1 -1
  82. package/dist/components/Range/Range.js +1 -1
  83. package/dist/components/Range/Range.variants.js +2 -3
  84. package/dist/components/Sidebar/Sidebar.js +4 -3
  85. package/dist/components/Sidebar/Sidebar.variants.js +1 -1
  86. package/dist/components/Sidebar/components/Footer/Footer.js +5 -4
  87. package/dist/components/Sidebar/components/Footer/Footer.variants.js +1 -1
  88. package/dist/components/Sidebar/components/Logo/Logo.js +6 -5
  89. package/dist/components/Sidebar/components/Logo/Logo.variants.js +1 -1
  90. package/dist/components/Sidebar/components/Navigation/Navigation.js +5 -4
  91. package/dist/components/Sidebar/components/Navigation/Navigation.variants.js +1 -1
  92. package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.js +14 -13
  93. package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.variants.js +1 -1
  94. package/dist/components/Sidebar/components/NavigationOption/NavigationOption.js +13 -12
  95. package/dist/components/Sidebar/components/NavigationOption/NavigationOption.variants.js +1 -1
  96. package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.js +5 -6
  97. package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.variants.js +1 -1
  98. package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.js +9 -8
  99. package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.variants.js +1 -1
  100. package/dist/components/Sidebar/components/Wrapper/Wrapper.js +15 -14
  101. package/dist/components/Slider/Slider.js +1 -1
  102. package/dist/components/Slider/Slider.variants.js +2 -8
  103. package/dist/components/Switch/Switch.js +54 -54
  104. package/dist/components/Switch/Switch.variants.js +2 -3
  105. package/dist/components/Table/Table.variants.js +1 -1
  106. package/dist/components/Tabs/Tabs.js +20 -16
  107. package/dist/components/Tabs/Tabs.variants.js +3 -5
  108. package/dist/components/Tabs/components/Content.js +10 -13
  109. package/dist/components/Tabs/components/List.js +9 -8
  110. package/dist/components/Tabs/components/Trigger.js +12 -16
  111. package/dist/components/Tabs/components/index.js +8 -0
  112. package/dist/components/Tag/Tag.js +1 -1
  113. package/dist/components/Tag/Tag.variants.js +1 -1
  114. package/dist/components/TagSelect/TagSelect.variants.js +1 -1
  115. package/dist/components/TagSelect/components/Item/Item.variants.js +1 -1
  116. package/dist/components/TagSelect/components/List/List.variants.js +1 -1
  117. package/dist/components/TagSelect/hooks/useTagSelect.js +14 -16
  118. package/dist/components/TextArea/TextArea.variants.js +4 -5
  119. package/dist/components/TimePicker/TimePicker.variants.js +6 -7
  120. package/dist/components/TimePicker/components/HoursList/HoursList.js +21 -26
  121. package/dist/components/TimePicker/components/MeridianList/MeridianList.js +19 -20
  122. package/dist/components/TimePicker/components/MinutesList/MinutesList.js +24 -25
  123. package/dist/components/TimePicker/components/Wrapper/Wrapper.js +33 -34
  124. package/dist/components/TimePicker/components/WrapperList/WrapperList.variants.js +1 -1
  125. package/dist/components/Toast/Toast.js +223 -232
  126. package/dist/components/Toast/Toast.variants.js +8 -11
  127. package/dist/components/Tooltip/Tooltip.js +1 -1
  128. package/dist/components/Tooltip/Tooltip.variants.js +7 -14
  129. package/dist/components/Tooltip/hooks/useTooltip.js +8 -9
  130. package/dist/components/Typography/Typography.js +26 -31
  131. package/dist/components/Typography/Typography.variants.js +1 -1
  132. package/dist/components/index.js +78 -66
  133. package/dist/contexts/theme.provider.js +28 -29
  134. package/dist/{createLucideIcon-ByJ0JZvK.js → createLucideIcon-BpsAkT97.js} +4 -4
  135. package/dist/index-0ioNhtNM.js +10 -0
  136. package/dist/{index-CvfCCTEO.js → index-BAraV3ai.js} +7 -7
  137. package/dist/index-BXuxPoz7.js +435 -0
  138. package/dist/index-BfXxHr_2.js +125 -0
  139. package/dist/index-C1g_chDT.js +70 -0
  140. package/dist/{index-BCGvACM9.js → index-C9T9HQaa.js} +1 -1
  141. package/dist/{index-Bc1LNrRD.js → index-CZnD2QxM.js} +1 -1
  142. package/dist/index-CrBonFvu.js +144 -0
  143. package/dist/{index-rUBNhTeF.js → index-Cvx4lqTq.js} +2 -2
  144. package/dist/{index-BNmRGtA6.js → index-D29mdTf5.js} +3 -3
  145. package/dist/{index-Dkt8F6CZ.js → index-D3xzCzcO.js} +12 -12
  146. package/dist/index-DB2XhXHn.js +431 -0
  147. package/dist/{index-B5MIi2tR.js → index-DQH6odE9.js} +2 -3
  148. package/dist/index-Oq5GlCHP.js +131 -0
  149. package/dist/{index-Cs8Lv8Wj.js → index-bwWKd82e.js} +1 -1
  150. package/dist/{index--EmNlyHx.js → index-iXyXtdgP.js} +1 -1
  151. package/dist/index.d.ts +157 -9
  152. package/dist/index.js +88 -76
  153. package/dist/package.json +41 -37
  154. package/dist/styles.css +1 -1
  155. package/dist/ui/civo-theme.css +261 -241
  156. package/dist/ui/kubefirst-theme.css +4 -4
  157. package/dist/ui/theme.css +0 -2
  158. package/dist/{useBreadcrumb-DMERrNkJ.js → useBreadcrumb-B8DnuqkR.js} +254 -261
  159. package/dist/utils/index.js +25 -26
  160. package/package.json +41 -37
  161. package/dist/index-BNU3RH-3.js +0 -133
  162. package/dist/index-BvCZBMfr.js +0 -432
  163. package/dist/index-Cq1I1cG9.js +0 -129
  164. package/dist/index-DLYwlPRZ.js +0 -440
  165. package/dist/index-DNRcvRTB.js +0 -145
  166. package/dist/index-Dm-ooN_M.js +0 -71
  167. package/dist/index-DwYXX2sM.js +0 -13
@@ -0,0 +1,131 @@
1
+ import { jsx as i, jsxs as O } from "react/jsx-runtime";
2
+ import * as l from "react";
3
+ import { c as w, b as M } from "./index-BfXxHr_2.js";
4
+ import { u, b as x } from "./index-DQH6odE9.js";
5
+ import { c as A, R as I, P as $, O as L, W as F, C as G, T as W, d as j, b as v, e as B } from "./index-BXuxPoz7.js";
6
+ import { Button as Y } from "./components/Button/Button.js";
7
+ import { cn as k } from "./utils/index.js";
8
+ var D = "AlertDialog", [q, le] = w(D, [
9
+ A
10
+ ]), s = A(), f = (e) => {
11
+ const { __scopeAlertDialog: o, ...r } = e, a = s(o);
12
+ return /* @__PURE__ */ i(I, { ...a, ...r, modal: !0 });
13
+ };
14
+ f.displayName = D;
15
+ var H = "AlertDialogTrigger", m = l.forwardRef(
16
+ (e, o) => {
17
+ const { __scopeAlertDialog: r, ...a } = e, t = s(r);
18
+ return /* @__PURE__ */ i(B, { ...t, ...a, ref: o });
19
+ }
20
+ );
21
+ m.displayName = H;
22
+ var V = "AlertDialogPortal", y = (e) => {
23
+ const { __scopeAlertDialog: o, ...r } = e, a = s(o);
24
+ return /* @__PURE__ */ i($, { ...a, ...r });
25
+ };
26
+ y.displayName = V;
27
+ var z = "AlertDialogOverlay", _ = l.forwardRef(
28
+ (e, o) => {
29
+ const { __scopeAlertDialog: r, ...a } = e, t = s(r);
30
+ return /* @__PURE__ */ i(L, { ...t, ...a, ref: o });
31
+ }
32
+ );
33
+ _.displayName = z;
34
+ var n = "AlertDialogContent", [J, K] = q(n), Q = x("AlertDialogContent"), N = l.forwardRef(
35
+ (e, o) => {
36
+ const { __scopeAlertDialog: r, children: a, ...t } = e, d = s(r), p = l.useRef(null), b = u(o, p), g = l.useRef(null);
37
+ return /* @__PURE__ */ i(
38
+ F,
39
+ {
40
+ contentName: n,
41
+ titleName: h,
42
+ docsSlug: "alert-dialog",
43
+ children: /* @__PURE__ */ i(J, { scope: r, cancelRef: g, children: /* @__PURE__ */ O(
44
+ G,
45
+ {
46
+ role: "alertdialog",
47
+ ...d,
48
+ ...t,
49
+ ref: b,
50
+ onOpenAutoFocus: M(t.onOpenAutoFocus, (c) => {
51
+ c.preventDefault(), g.current?.focus({ preventScroll: !0 });
52
+ }),
53
+ onPointerDownOutside: (c) => c.preventDefault(),
54
+ onInteractOutside: (c) => c.preventDefault(),
55
+ children: [
56
+ /* @__PURE__ */ i(Q, { children: a }),
57
+ /* @__PURE__ */ i(X, { contentRef: p })
58
+ ]
59
+ }
60
+ ) })
61
+ }
62
+ );
63
+ }
64
+ );
65
+ N.displayName = n;
66
+ var h = "AlertDialogTitle", C = l.forwardRef(
67
+ (e, o) => {
68
+ const { __scopeAlertDialog: r, ...a } = e, t = s(r);
69
+ return /* @__PURE__ */ i(W, { ...t, ...a, ref: o });
70
+ }
71
+ );
72
+ C.displayName = h;
73
+ var R = "AlertDialogDescription", E = l.forwardRef((e, o) => {
74
+ const { __scopeAlertDialog: r, ...a } = e, t = s(r);
75
+ return /* @__PURE__ */ i(j, { ...t, ...a, ref: o });
76
+ });
77
+ E.displayName = R;
78
+ var U = "AlertDialogAction", P = l.forwardRef(
79
+ (e, o) => {
80
+ const { __scopeAlertDialog: r, ...a } = e, t = s(r);
81
+ return /* @__PURE__ */ i(v, { ...t, ...a, ref: o });
82
+ }
83
+ );
84
+ P.displayName = U;
85
+ var S = "AlertDialogCancel", T = l.forwardRef(
86
+ (e, o) => {
87
+ const { __scopeAlertDialog: r, ...a } = e, { cancelRef: t } = K(S, r), d = s(r), p = u(o, t);
88
+ return /* @__PURE__ */ i(v, { ...d, ...a, ref: p });
89
+ }
90
+ );
91
+ T.displayName = S;
92
+ var X = ({ contentRef: e }) => {
93
+ const o = `\`${n}\` requires a description for the component to be accessible for screen reader users.
94
+
95
+ You can add a description to the \`${n}\` by passing a \`${R}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
96
+
97
+ Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${n}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
98
+
99
+ For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
100
+ return l.useEffect(() => {
101
+ document.getElementById(
102
+ e.current?.getAttribute("aria-describedby")
103
+ ) || console.warn(o);
104
+ }, [o, e]), null;
105
+ }, se = f, Z = m, ne = y, ce = _, pe = N, de = P, ge = T, ue = C, Ae = E;
106
+ const ve = ({
107
+ "data-theme": e,
108
+ className: o,
109
+ text: r,
110
+ onOpen: a
111
+ }) => /* @__PURE__ */ i(Z, { asChild: !0, children: /* @__PURE__ */ i(
112
+ Y,
113
+ {
114
+ type: "button",
115
+ "data-theme": e,
116
+ className: k(o),
117
+ onClick: a,
118
+ children: r
119
+ }
120
+ ) });
121
+ export {
122
+ ve as A,
123
+ pe as C,
124
+ Ae as D,
125
+ ce as O,
126
+ ne as P,
127
+ se as R,
128
+ ue as T,
129
+ ge as a,
130
+ de as b
131
+ };
@@ -1,5 +1,5 @@
1
1
  import * as r from "react";
2
- import { u as a } from "./index-Cq1I1cG9.js";
2
+ import { u as a } from "./index-BfXxHr_2.js";
3
3
  var s = r[" useId ".trim().toString()] || (() => {
4
4
  }), i = 0;
5
5
  function n(e) {
@@ -1,5 +1,5 @@
1
1
  import * as i from "react";
2
- import { P as o } from "./index-BCGvACM9.js";
2
+ import { P as o } from "./index-C9T9HQaa.js";
3
3
  import { jsx as t } from "react/jsx-runtime";
4
4
  var d = Object.freeze({
5
5
  // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
package/dist/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import { AlertDialogProps as AlertDialogProps_2 } from '@radix-ui/react-alert-di
2
2
  import { ButtonHTMLAttributes } from 'react';
3
3
  import { CheckboxProps as CheckboxProps_2 } from '@radix-ui/react-checkbox';
4
4
  import { ClassProp } from 'class-variance-authority/types';
5
+ import { ComponentRef } from 'react';
5
6
  import { Context } from 'react';
6
7
  import { DayPickerProps } from 'react-day-picker';
7
8
  import { FC } from 'react';
@@ -12,8 +13,11 @@ import { HtmlHTMLAttributes } from 'react';
12
13
  import { InputHTMLAttributes } from 'react';
13
14
  import { PropsWithChildren } from 'react';
14
15
  import { ReactNode } from 'react';
16
+ import * as ReactTabs from '@radix-ui/react-tabs';
17
+ import { Ref } from 'react';
15
18
  import { RefAttributes } from 'react';
16
19
  import { SliderProps } from '@radix-ui/react-slider';
20
+ import { TabsContentProps } from '@radix-ui/react-tabs';
17
21
  import { VariantProps } from 'class-variance-authority';
18
22
 
19
23
  export declare const Alert: FC<AlertProps>;
@@ -73,9 +77,9 @@ export declare const BadgeMultiSelect: FC<BadgeMultiSelectProps>;
73
77
 
74
78
  declare type BadgeMultiSelectProps = {
75
79
  label: string;
76
- options: Option_4[];
80
+ options: Option_5[];
77
81
  position?: 'left' | 'right';
78
- onApply?: (selectedOptions: Option_4[]) => void;
82
+ onApply?: (selectedOptions: Option_5[]) => void;
79
83
  };
80
84
 
81
85
  declare type BadgeProps = VariantProps<typeof badgeVariants> & {
@@ -119,6 +123,7 @@ declare type ButtonCancelProps = ButtonBaseProps;
119
123
  declare type ButtonConfirmProps = ButtonBaseProps;
120
124
 
121
125
  declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof buttonVariants> {
126
+ ref?: Ref<HTMLButtonElement>;
122
127
  asChild?: boolean;
123
128
  disabled?: boolean;
124
129
  theme?: Theme;
@@ -167,6 +172,8 @@ declare const checkboxVariants: (props?: ({
167
172
  checked?: boolean | null | undefined;
168
173
  } & ClassProp) | undefined) => string;
169
174
 
175
+ export declare const Content: FC<TabsContentProps>;
176
+
170
177
  export declare const DateFilterDropdown: FC<DateFilterDropdownProps>;
171
178
 
172
179
  declare type DateFilterDropdownProps = {
@@ -191,10 +198,15 @@ export declare const Divider: FC<HTMLAttributes<HTMLDivElement>>;
191
198
 
192
199
  export declare const Dropdown: FC<DropdownProps>;
193
200
 
201
+ export declare const DropdownButton: FC<Props>;
202
+
194
203
  declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
195
204
  className?: string;
205
+ error?: string;
206
+ helperText?: string;
196
207
  iconClassName?: string;
197
208
  isLoading?: boolean;
209
+ isRequired?: boolean;
198
210
  label?: string;
199
211
  labelClassName?: string;
200
212
  listClassName?: string;
@@ -204,10 +216,13 @@ declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, O
204
216
  theme?: Theme;
205
217
  value?: string;
206
218
  wrapperClassName?: string;
219
+ onBlur?: VoidFunction;
207
220
  onChange?: OnChangeFn;
208
221
  }
209
222
 
210
- declare const dropdownVariants: (props?: ClassProp | undefined) => string;
223
+ declare const dropdownVariants: (props?: ({
224
+ hasError?: boolean | null | undefined;
225
+ } & ClassProp) | undefined) => string;
211
226
 
212
227
  export declare const Filter: FilterComponentProps;
213
228
 
@@ -243,6 +258,8 @@ declare interface HeadProps extends React.HTMLAttributes<HTMLTableSectionElement
243
258
 
244
259
  declare const headVariants: (props?: ClassProp | undefined) => string;
245
260
 
261
+ declare type HexColor = `#${string}`;
262
+
246
263
  export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
247
264
 
248
265
  declare interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
@@ -259,6 +276,12 @@ declare const inputVariants: (props?: ({
259
276
  variant?: "error" | "default" | null | undefined;
260
277
  } & ClassProp) | undefined) => string;
261
278
 
279
+ export declare const List: FC<ListProps>;
280
+
281
+ declare interface ListProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
282
+ orientation: 'horizontal' | 'vertical';
283
+ }
284
+
262
285
  export declare const Loading: FC<LoadingProps>;
263
286
 
264
287
  declare type LoadingProps = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
@@ -396,23 +419,122 @@ declare type Option_3 = {
396
419
  };
397
420
 
398
421
  declare type Option_4 = {
422
+ label: string | ReactNode;
423
+ onClick?: VoidFunction;
424
+ };
425
+
426
+ declare type Option_5 = {
399
427
  id: string;
400
428
  label: string;
401
429
  variant?: BadgeProps['variant'];
402
430
  };
403
431
 
432
+ export declare const PieChart: FC<Props_2>;
433
+
404
434
  export declare const ProgressBar: FC<ProgressBarProps>;
405
435
 
406
436
  declare interface ProgressBarProps extends VariantProps<typeof progressBarVariants> {
437
+ backgroundBarClassName?: string;
407
438
  className?: string;
408
439
  label?: string;
440
+ labelClassName?: string;
441
+ labelWrapperClassName?: string;
409
442
  percent: number;
410
- theme?: Theme;
443
+ percentClassName?: string;
444
+ progressBarClassName?: string;
411
445
  status?: 'success' | 'progress';
446
+ theme?: Theme;
447
+ wrapperClassName?: string;
412
448
  }
413
449
 
414
450
  declare const progressBarVariants: (props?: ClassProp | undefined) => string;
415
451
 
452
+ declare type Props = {
453
+ buttonClassName?: string;
454
+ className?: string;
455
+ itemClassName?: string;
456
+ listClassName?: string;
457
+ options: Option_4[];
458
+ };
459
+
460
+ /**
461
+ * Props for the PieChart component
462
+ */
463
+ declare type Props_2 = {
464
+ /**
465
+ * Array of hexadecimal colors for the borders of the pie chart segments
466
+ * @default ['#FFFFFF', '#FFFFFF']
467
+ */
468
+ borderColors?: HexColor[];
469
+ /**
470
+ * Width of the border for pie chart segments in pixels
471
+ * @default 0
472
+ */
473
+ borderWidth?: number;
474
+ /**
475
+ * Array of hexadecimal colors for filling the pie chart segments
476
+ * @default ['#525252', '#00D492']
477
+ */
478
+ colors?: HexColor[];
479
+ /**
480
+ * Percentage of the pie chart's center that should be cut out, creating a donut chart effect
481
+ * @default 80
482
+ */
483
+ cutoutPercentage?: number;
484
+ /**
485
+ * Whether to redraw the entire chart when props change
486
+ * @default true
487
+ */
488
+ redraw?: boolean;
489
+ /**
490
+ * Hexadecimal color for the subtitle text
491
+ * @default '#6B7280'
492
+ */
493
+ subtitleColor?: HexColor;
494
+ /**
495
+ * Font size for the subtitle in pixels
496
+ * @default 14
497
+ */
498
+ subtitleFontSize?: number;
499
+ /**
500
+ * Font weight for the subtitle
501
+ * @default 'normal'
502
+ */
503
+ subtitleFontWeight?: 'bold' | 'normal';
504
+ /**
505
+ * Hexadecimal color for the title text
506
+ * @default '#111827'
507
+ */
508
+ titleColor?: HexColor;
509
+ /**
510
+ * Font size for the title in pixels
511
+ * @default 16
512
+ */
513
+ titleFontSize?: number;
514
+ /**
515
+ * Font weight for the title
516
+ * @default 'bold'
517
+ */
518
+ titleFontWeight?: 'bold' | 'normal';
519
+ /**
520
+ * Array of numeric values representing data for each segment of the pie chart
521
+ * @required
522
+ */
523
+ values: number[];
524
+ } &
525
+ /**
526
+ * Union type that enforces either:
527
+ * - No title and no subtitle
528
+ * - Title with optional subtitle
529
+ */
530
+ ({
531
+ title?: undefined;
532
+ subtitle?: never;
533
+ } | {
534
+ title: string;
535
+ subtitle?: string;
536
+ });
537
+
416
538
  export declare const Radio: FC<RadioProps>;
417
539
 
418
540
  export declare const RadioCard: FC<RadioCardProps>;
@@ -431,7 +553,7 @@ declare type RadioCardGroupProps = {
431
553
  onValueChange?: (value: string) => void;
432
554
  };
433
555
 
434
- declare type RadioCardProps = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName'> & {
556
+ declare type RadioCardProps = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
435
557
  labelWrapperClassName?: string;
436
558
  theme?: Theme;
437
559
  };
@@ -458,6 +580,8 @@ declare interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
458
580
  label?: string | ReactNode;
459
581
  labelTextClassName?: string;
460
582
  name: string;
583
+ description?: string | ReactNode;
584
+ descriptionClassName?: string;
461
585
  value: string;
462
586
  wrapperClassName?: string;
463
587
  theme?: Theme;
@@ -488,6 +612,7 @@ declare const rangeVariants: (props?: ClassProp | undefined) => string;
488
612
 
489
613
  declare type ResetButtonProps = {
490
614
  disabled?: boolean;
615
+ onClick?: VoidFunction;
491
616
  };
492
617
 
493
618
  declare interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
@@ -540,6 +665,7 @@ declare type Step = {
540
665
  to?: string;
541
666
  target?: '_self' | '_blank';
542
667
  isActive?: boolean;
668
+ component?: FC<any>;
543
669
  };
544
670
 
545
671
  export declare const Switch: FC<SwitchProps>;
@@ -571,6 +697,16 @@ declare interface TableProps extends React.HTMLAttributes<HTMLTableElement>, Pro
571
697
 
572
698
  declare const tableVariants: (props?: ClassProp | undefined) => string;
573
699
 
700
+ export declare const Tabs: FC<TabsProps> & {
701
+ List: FC<ListProps>;
702
+ Trigger: FC<TriggerProps>;
703
+ Content: FC<ReactTabs.TabsContentProps>;
704
+ };
705
+
706
+ declare interface TabsProps extends ReactTabs.TabsProps, PropsWithChildren {
707
+ theme?: Theme;
708
+ }
709
+
574
710
  export declare const Tag: FC<TagProps>;
575
711
 
576
712
  declare type TagProps = {
@@ -610,7 +746,7 @@ declare interface TextAreaProps extends InputHTMLAttributes<HTMLTextAreaElement>
610
746
 
611
747
  declare const textAreaVariants: (props?: ClassProp | undefined) => string;
612
748
 
613
- declare type Theme = 'kubefirst' | 'colony' | 'civo' | 'kubefirst-dark' | 'colony-dark' | 'civo-dark' | undefined;
749
+ declare type Theme = 'kubefirst' | 'civo' | 'kubefirst-dark' | 'civo-dark' | undefined;
614
750
 
615
751
  export declare const ThemeContext: Context<ThemeContextType>;
616
752
 
@@ -680,10 +816,22 @@ declare const tooltipVariants: (props?: ({
680
816
  position?: "left" | "right" | "bottom" | "top" | null | undefined;
681
817
  } & ClassProp) | undefined) => string;
682
818
 
683
- export declare const Typography: FC<TypographyProps>;
819
+ export declare const Trigger: FC<TriggerProps>;
684
820
 
685
- declare interface TypographyProps extends InputHTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {
686
- asChild?: boolean;
821
+ declare interface TriggerProps extends VariantProps<typeof triggerVariants>, React.HTMLAttributes<HTMLDivElement> {
822
+ tab: string;
823
+ label: string;
824
+ isActive: boolean;
825
+ }
826
+
827
+ declare const triggerVariants: (props?: ({
828
+ variant?: "default" | "active" | "inactive" | null | undefined;
829
+ } & ClassProp) | undefined) => string;
830
+
831
+ export declare const Typography: ForwardRefExoticComponent<Omit<TypographyProps, 'ref'> & RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
832
+
833
+ declare interface TypographyProps extends HTMLAttributes<ComponentRef<HeadingTag | 'p' | 'span'>>, VariantProps<typeof typographyVariants> {
834
+ ref?: Ref<HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement>;
687
835
  children: ReactNode;
688
836
  component?: HeadingTag | 'p' | 'span';
689
837
  theme?: Theme;
package/dist/index.js CHANGED
@@ -3,90 +3,102 @@ import { AlertDialog as p } from "./components/AlertDialog/AlertDialog.js";
3
3
  import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
4
4
  import { Badge as a } from "./components/Badge/Badge.js";
5
5
  import { Breadcrumb as d } from "./components/Breadcrumb/Breadcrumb.js";
6
- import { Button as l } from "./components/Button/Button.js";
7
- import { Card as u } from "./components/Card/Card.js";
6
+ import { Button as n } from "./components/Button/Button.js";
7
+ import { Card as T } from "./components/Card/Card.js";
8
8
  import { Checkbox as c } from "./components/Checkbox/Checkbox.js";
9
- import { DatePicker as s } from "./components/Datepicker/DatePicker.js";
9
+ import { DatePicker as h } from "./components/Datepicker/DatePicker.js";
10
10
  import { Divider as D } from "./components/Divider/Divider.js";
11
- import { Dropdown as b } from "./components/Dropdown/Dropdown.js";
12
- import { Filter as C } from "./components/Filter/Filter.js";
13
- import { BadgeMultiSelect as R } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
14
- import { DateFilterDropdown as P } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
15
- import { Input as w } from "./components/Input/Input.js";
16
- import { Loading as G } from "./components/Loading/Loading.js";
17
- import { M as y } from "./Modal-CrG0m703.js";
18
- import { NumberInput as L } from "./components/NumberInput/NumberInput.js";
19
- import { ProgressBar as j } from "./components/ProgressBar/ProgressBar.js";
20
- import { Radio as z } from "./components/Radio/Radio.js";
21
- import { RadioCard as H } from "./components/RadioCard/RadioCard.js";
22
- import { RadioCardGroup as K } from "./components/RadioCardGroup/RadioCardGroup.js";
23
- import { RadioGroup as U } from "./components/RadioGroup/RadioGroup.js";
24
- import { Range as W } from "./components/Range/Range.js";
25
- import { Footer as Y } from "./components/Sidebar/components/Footer/Footer.js";
26
- import { Logo as _ } from "./components/Sidebar/components/Logo/Logo.js";
27
- import { Navigation as oo } from "./components/Sidebar/components/Navigation/Navigation.js";
28
- import { NavigationGroup as eo } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
29
- import { NavigationOption as po } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
30
- import { NavigationSeparator as xo } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
31
- import { Sidebar as ao } from "./components/Sidebar/Sidebar.js";
32
- import { Slider as go } from "./components/Slider/Slider.js";
33
- import { Switch as no } from "./components/Switch/Switch.js";
34
- import { Table as To } from "./components/Table/Table.js";
35
- import { Tag as ho } from "./components/Tag/Tag.js";
36
- import { TagSelect as vo } from "./components/TagSelect/TagSelect.js";
37
- import { TextArea as So } from "./components/TextArea/TextArea.js";
38
- import { TimePicker as Bo } from "./components/TimePicker/TimePicker.js";
39
- import { Toast as No } from "./components/Toast/Toast.js";
40
- import { Tooltip as Ao } from "./components/Tooltip/Tooltip.js";
41
- import { Typography as ko } from "./components/Typography/Typography.js";
42
- import { ThemeContext as Fo } from "./contexts/theme.context.js";
43
- import { useTheme as Mo } from "./contexts/theme.hook.js";
44
- import { ThemeProvider as Io } from "./contexts/theme.provider.js";
45
- import { useToggle as Oo } from "./hooks/useToggle.js";
11
+ import { Dropdown as v } from "./components/Dropdown/Dropdown.js";
12
+ import { DropdownButton as S } from "./components/DropdownButton/DropdownButton.js";
13
+ import { Filter as P } from "./components/Filter/Filter.js";
14
+ import { BadgeMultiSelect as w } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
15
+ import { DateFilterDropdown as k } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
16
+ import { Input as G } from "./components/Input/Input.js";
17
+ import { Loading as M } from "./components/Loading/Loading.js";
18
+ import { M as I } from "./Modal-0oht63vU.js";
19
+ import { NumberInput as j } from "./components/NumberInput/NumberInput.js";
20
+ import { PieChart as z } from "./components/PieChart/PieChart.js";
21
+ import { ProgressBar as H } from "./components/ProgressBar/ProgressBar.js";
22
+ import { Radio as K } from "./components/Radio/Radio.js";
23
+ import { RadioCard as U } from "./components/RadioCard/RadioCard.js";
24
+ import { RadioCardGroup as W } from "./components/RadioCardGroup/RadioCardGroup.js";
25
+ import { RadioGroup as Y } from "./components/RadioGroup/RadioGroup.js";
26
+ import { Range as _ } from "./components/Range/Range.js";
27
+ import { Footer as oo } from "./components/Sidebar/components/Footer/Footer.js";
28
+ import { Logo as eo } from "./components/Sidebar/components/Logo/Logo.js";
29
+ import { Navigation as po } from "./components/Sidebar/components/Navigation/Navigation.js";
30
+ import { NavigationGroup as xo } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
31
+ import { NavigationOption as ao } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
32
+ import { NavigationSeparator as go } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
33
+ import { Sidebar as lo } from "./components/Sidebar/Sidebar.js";
34
+ import { Slider as uo } from "./components/Slider/Slider.js";
35
+ import { Switch as so } from "./components/Switch/Switch.js";
36
+ import { Table as Co } from "./components/Table/Table.js";
37
+ import { Content as bo } from "./components/Tabs/components/Content.js";
38
+ import { List as Bo } from "./components/Tabs/components/List.js";
39
+ import { Tabs as No } from "./components/Tabs/Tabs.js";
40
+ import { Trigger as Ro } from "./components/Tabs/components/Trigger.js";
41
+ import { Tag as Ao } from "./components/Tag/Tag.js";
42
+ import { TagSelect as Fo } from "./components/TagSelect/TagSelect.js";
43
+ import { TextArea as Lo } from "./components/TextArea/TextArea.js";
44
+ import { TimePicker as yo } from "./components/TimePicker/TimePicker.js";
45
+ import { Toast as Oo } from "./components/Toast/Toast.js";
46
+ import { Tooltip as qo } from "./components/Tooltip/Tooltip.js";
47
+ import { Typography as Eo } from "./components/Typography/Typography.js";
48
+ import { ThemeContext as Jo } from "./contexts/theme.context.js";
49
+ import { useTheme as Qo } from "./contexts/theme.hook.js";
50
+ import { ThemeProvider as Vo } from "./contexts/theme.provider.js";
51
+ import { useToggle as Xo } from "./hooks/useToggle.js";
46
52
  export {
47
53
  e as Alert,
48
54
  p as AlertDialog,
49
55
  x as Autocomplete,
50
56
  a as Badge,
51
- R as BadgeMultiSelect,
57
+ w as BadgeMultiSelect,
52
58
  d as Breadcrumb,
53
- l as Button,
54
- u as Card,
59
+ n as Button,
60
+ T as Card,
55
61
  c as Checkbox,
56
- P as DateFilterDropdown,
57
- s as DatePicker,
62
+ bo as Content,
63
+ k as DateFilterDropdown,
64
+ h as DatePicker,
58
65
  D as Divider,
59
- b as Dropdown,
60
- C as Filter,
61
- Y as Footer,
62
- w as Input,
63
- G as Loading,
64
- _ as Logo,
65
- y as Modal,
66
- oo as Navigation,
67
- eo as NavigationGroup,
68
- po as NavigationOption,
69
- xo as NavigationSeparator,
70
- L as NumberInput,
71
- j as ProgressBar,
72
- z as Radio,
73
- H as RadioCard,
74
- K as RadioCardGroup,
75
- U as RadioGroup,
76
- W as Range,
77
- ao as Sidebar,
78
- go as Slider,
79
- no as Switch,
80
- To as Table,
81
- ho as Tag,
82
- vo as TagSelect,
83
- So as TextArea,
84
- Fo as ThemeContext,
85
- Io as ThemeProvider,
86
- Bo as TimePicker,
87
- No as Toast,
88
- Ao as Tooltip,
89
- ko as Typography,
90
- Mo as useTheme,
91
- Oo as useToggle
66
+ v as Dropdown,
67
+ S as DropdownButton,
68
+ P as Filter,
69
+ oo as Footer,
70
+ G as Input,
71
+ Bo as List,
72
+ M as Loading,
73
+ eo as Logo,
74
+ I as Modal,
75
+ po as Navigation,
76
+ xo as NavigationGroup,
77
+ ao as NavigationOption,
78
+ go as NavigationSeparator,
79
+ j as NumberInput,
80
+ z as PieChart,
81
+ H as ProgressBar,
82
+ K as Radio,
83
+ U as RadioCard,
84
+ W as RadioCardGroup,
85
+ Y as RadioGroup,
86
+ _ as Range,
87
+ lo as Sidebar,
88
+ uo as Slider,
89
+ so as Switch,
90
+ Co as Table,
91
+ No as Tabs,
92
+ Ao as Tag,
93
+ Fo as TagSelect,
94
+ Lo as TextArea,
95
+ Jo as ThemeContext,
96
+ Vo as ThemeProvider,
97
+ yo as TimePicker,
98
+ Oo as Toast,
99
+ qo as Tooltip,
100
+ Ro as Trigger,
101
+ Eo as Typography,
102
+ Qo as useTheme,
103
+ Xo as useToggle
92
104
  };