@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.
- package/dist/DatePicker.css +1 -1
- package/dist/{Modal-CrG0m703.js → Modal-0oht63vU.js} +32 -32
- package/dist/assets/icons/components/Search.js +26 -0
- package/dist/assets/icons/components/Warning.js +22 -0
- package/dist/assets/icons/components/index.js +6 -0
- package/dist/{chevron-down-UW8ts6wI.js → chevron-down-CVce9Mvh.js} +2 -2
- package/dist/components/Alert/Alert.js +23 -25
- package/dist/components/Alert/Alert.variants.js +1 -1
- package/dist/components/AlertDialog/AlertDialog.js +1 -1
- package/dist/components/AlertDialog/components/AlertDialogTrigger.js +1 -1
- package/dist/components/AlertDialog/components/index.js +1 -1
- package/dist/components/AlertDialog/hooks/useAlertDialog.js +7 -7
- package/dist/components/Autocomplete/Autocomplete.variants.js +3 -4
- package/dist/components/Autocomplete/components/List/List.variants.js +3 -7
- package/dist/components/Autocomplete/hooks/useAutocomplete.js +38 -43
- package/dist/components/Autocomplete/hooks/useNavigationList.js +29 -37
- package/dist/components/Badge/Badge.js +40 -42
- package/dist/components/Badge/Badge.variants.js +1 -1
- package/dist/components/Breadcrumb/Breadcrumb.variants.js +1 -1
- package/dist/components/Breadcrumb/components/Item/Item.js +22 -21
- package/dist/components/Breadcrumb/components/Item/Item.variants.js +1 -1
- package/dist/components/Breadcrumb/hooks/useBreadcrumb.js +1 -1
- package/dist/components/Button/Button.js +15 -15
- package/dist/components/Button/Button.variants.js +10 -77
- package/dist/components/Card/Card.variants.js +3 -5
- package/dist/components/Checkbox/Checkbox.js +48 -47
- package/dist/components/Checkbox/Checkbox.variants.js +3 -4
- package/dist/components/Command/Command.js +2 -2
- package/dist/components/Command/Command.variants.js +1 -1
- package/dist/components/Command/components/Command.js +1 -1
- package/dist/components/Command/components/CommandEmpty.js +1 -1
- package/dist/components/Command/components/CommandGroup.js +1 -1
- package/dist/components/Command/components/CommandInput.js +1 -1
- package/dist/components/Command/components/CommandItem.js +13 -13
- package/dist/components/Command/components/CommandList.js +1 -1
- package/dist/components/Command/components/CommandSeparator.js +1 -1
- package/dist/components/Command/components/DialogContent.js +1 -1
- package/dist/components/Command/components/DialogOverlay.js +1 -1
- package/dist/components/Datepicker/DatePicker.js +1496 -1577
- package/dist/components/Datepicker/DatePicker.variants.js +1 -1
- package/dist/components/Divider/Divider.variants.js +1 -1
- package/dist/components/Dropdown/Dropdown.js +28 -6
- package/dist/components/Dropdown/Dropdown.variants.js +43 -26
- package/dist/components/Dropdown/components/List/List.variants.js +1 -1
- package/dist/components/Dropdown/components/ListItem/ListItem.variants.js +5 -5
- package/dist/components/Dropdown/components/Wrapper.js +96 -86
- package/dist/components/Dropdown/contexts/dropdown.provider.js +12 -12
- package/dist/components/Dropdown/hooks/useDropdown.js +26 -30
- package/dist/components/Dropdown/hooks/useNavigationList.js +25 -31
- package/dist/components/DropdownButton/DropdownButton.js +135 -0
- package/dist/components/Filter/Filter.variants.js +1 -1
- package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.hook.js +47 -49
- package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js +1 -1
- package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.hook.js +41 -42
- package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.js +30 -30
- package/dist/components/Filter/components/ResetButton/ResetButton.js +22 -16
- package/dist/components/Input/Input.js +116 -109
- package/dist/components/Input/Input.variants.js +18 -5
- package/dist/components/Loading/Loading.js +2 -2
- package/dist/components/Loading/Loading.variants.js +1 -2
- package/dist/components/Modal/Modal.js +2 -2
- package/dist/components/Modal/components/Body/Body.js +1 -1
- package/dist/components/Modal/components/Footer/Footer.js +1 -1
- package/dist/components/Modal/components/Header/Header.js +1 -1
- package/dist/components/Modal/components/Wrapper/Wrapper.js +2 -2
- package/dist/components/Modal/components/Wrapper/Wrapper.variants.js +7 -9
- package/dist/components/Modal/components/index.js +1 -1
- package/dist/components/Modal/hooks/useModal.js +16 -17
- package/dist/components/NumberInput/NumberInput.js +91 -91
- package/dist/components/NumberInput/NumberInput.variants.js +1 -1
- package/dist/components/PieChart/PieChart.js +5138 -0
- package/dist/components/ProgressBar/ProgressBar.js +58 -26
- package/dist/components/ProgressBar/ProgressBar.variants.js +1 -1
- package/dist/components/Radio/Radio.js +64 -48
- package/dist/components/Radio/Radio.variants.js +3 -3
- package/dist/components/RadioCard/RadioCard.js +26 -23
- package/dist/components/RadioCard/RadioCard.variants.js +1 -1
- package/dist/components/RadioCardGroup/RadioCardGroup.js +28 -28
- package/dist/components/RadioCardGroup/RadioCardGroup.variants.js +1 -1
- package/dist/components/RadioGroup/RadioGroup.js +37 -37
- package/dist/components/RadioGroup/RadioGroup.variants.js +1 -1
- package/dist/components/Range/Range.js +1 -1
- package/dist/components/Range/Range.variants.js +2 -3
- package/dist/components/Sidebar/Sidebar.js +4 -3
- package/dist/components/Sidebar/Sidebar.variants.js +1 -1
- package/dist/components/Sidebar/components/Footer/Footer.js +5 -4
- package/dist/components/Sidebar/components/Footer/Footer.variants.js +1 -1
- package/dist/components/Sidebar/components/Logo/Logo.js +6 -5
- package/dist/components/Sidebar/components/Logo/Logo.variants.js +1 -1
- package/dist/components/Sidebar/components/Navigation/Navigation.js +5 -4
- package/dist/components/Sidebar/components/Navigation/Navigation.variants.js +1 -1
- package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.js +14 -13
- package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.variants.js +1 -1
- package/dist/components/Sidebar/components/NavigationOption/NavigationOption.js +13 -12
- package/dist/components/Sidebar/components/NavigationOption/NavigationOption.variants.js +1 -1
- package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.js +5 -6
- package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.variants.js +1 -1
- package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.js +9 -8
- package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.variants.js +1 -1
- package/dist/components/Sidebar/components/Wrapper/Wrapper.js +15 -14
- package/dist/components/Slider/Slider.js +1 -1
- package/dist/components/Slider/Slider.variants.js +2 -8
- package/dist/components/Switch/Switch.js +54 -54
- package/dist/components/Switch/Switch.variants.js +2 -3
- package/dist/components/Table/Table.variants.js +1 -1
- package/dist/components/Tabs/Tabs.js +20 -16
- package/dist/components/Tabs/Tabs.variants.js +3 -5
- package/dist/components/Tabs/components/Content.js +10 -13
- package/dist/components/Tabs/components/List.js +9 -8
- package/dist/components/Tabs/components/Trigger.js +12 -16
- package/dist/components/Tabs/components/index.js +8 -0
- package/dist/components/Tag/Tag.js +1 -1
- package/dist/components/Tag/Tag.variants.js +1 -1
- package/dist/components/TagSelect/TagSelect.variants.js +1 -1
- package/dist/components/TagSelect/components/Item/Item.variants.js +1 -1
- package/dist/components/TagSelect/components/List/List.variants.js +1 -1
- package/dist/components/TagSelect/hooks/useTagSelect.js +14 -16
- package/dist/components/TextArea/TextArea.variants.js +4 -5
- package/dist/components/TimePicker/TimePicker.variants.js +6 -7
- package/dist/components/TimePicker/components/HoursList/HoursList.js +21 -26
- package/dist/components/TimePicker/components/MeridianList/MeridianList.js +19 -20
- package/dist/components/TimePicker/components/MinutesList/MinutesList.js +24 -25
- package/dist/components/TimePicker/components/Wrapper/Wrapper.js +33 -34
- package/dist/components/TimePicker/components/WrapperList/WrapperList.variants.js +1 -1
- package/dist/components/Toast/Toast.js +223 -232
- package/dist/components/Toast/Toast.variants.js +8 -11
- package/dist/components/Tooltip/Tooltip.js +1 -1
- package/dist/components/Tooltip/Tooltip.variants.js +7 -14
- package/dist/components/Tooltip/hooks/useTooltip.js +8 -9
- package/dist/components/Typography/Typography.js +26 -31
- package/dist/components/Typography/Typography.variants.js +1 -1
- package/dist/components/index.js +78 -66
- package/dist/contexts/theme.provider.js +28 -29
- package/dist/{createLucideIcon-ByJ0JZvK.js → createLucideIcon-BpsAkT97.js} +4 -4
- package/dist/index-0ioNhtNM.js +10 -0
- package/dist/{index-CvfCCTEO.js → index-BAraV3ai.js} +7 -7
- package/dist/index-BXuxPoz7.js +435 -0
- package/dist/index-BfXxHr_2.js +125 -0
- package/dist/index-C1g_chDT.js +70 -0
- package/dist/{index-BCGvACM9.js → index-C9T9HQaa.js} +1 -1
- package/dist/{index-Bc1LNrRD.js → index-CZnD2QxM.js} +1 -1
- package/dist/index-CrBonFvu.js +144 -0
- package/dist/{index-rUBNhTeF.js → index-Cvx4lqTq.js} +2 -2
- package/dist/{index-BNmRGtA6.js → index-D29mdTf5.js} +3 -3
- package/dist/{index-Dkt8F6CZ.js → index-D3xzCzcO.js} +12 -12
- package/dist/index-DB2XhXHn.js +431 -0
- package/dist/{index-B5MIi2tR.js → index-DQH6odE9.js} +2 -3
- package/dist/index-Oq5GlCHP.js +131 -0
- package/dist/{index-Cs8Lv8Wj.js → index-bwWKd82e.js} +1 -1
- package/dist/{index--EmNlyHx.js → index-iXyXtdgP.js} +1 -1
- package/dist/index.d.ts +157 -9
- package/dist/index.js +88 -76
- package/dist/package.json +41 -37
- package/dist/styles.css +1 -1
- package/dist/ui/civo-theme.css +261 -241
- package/dist/ui/kubefirst-theme.css +4 -4
- package/dist/ui/theme.css +0 -2
- package/dist/{useBreadcrumb-DMERrNkJ.js → useBreadcrumb-B8DnuqkR.js} +254 -261
- package/dist/utils/index.js +25 -26
- package/package.json +41 -37
- package/dist/index-BNU3RH-3.js +0 -133
- package/dist/index-BvCZBMfr.js +0 -432
- package/dist/index-Cq1I1cG9.js +0 -129
- package/dist/index-DLYwlPRZ.js +0 -440
- package/dist/index-DNRcvRTB.js +0 -145
- package/dist/index-Dm-ooN_M.js +0 -71
- 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 i from "react";
|
|
2
|
-
import { P as o } from "./index-
|
|
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:
|
|
80
|
+
options: Option_5[];
|
|
77
81
|
position?: 'left' | 'right';
|
|
78
|
-
onApply?: (selectedOptions:
|
|
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?:
|
|
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
|
-
|
|
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' | '
|
|
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
|
|
819
|
+
export declare const Trigger: FC<TriggerProps>;
|
|
684
820
|
|
|
685
|
-
declare interface
|
|
686
|
-
|
|
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
|
|
7
|
-
import { Card as
|
|
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
|
|
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
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
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
|
-
|
|
57
|
+
w as BadgeMultiSelect,
|
|
52
58
|
d as Breadcrumb,
|
|
53
|
-
|
|
54
|
-
|
|
59
|
+
n as Button,
|
|
60
|
+
T as Card,
|
|
55
61
|
c as Checkbox,
|
|
56
|
-
|
|
57
|
-
|
|
62
|
+
bo as Content,
|
|
63
|
+
k as DateFilterDropdown,
|
|
64
|
+
h as DatePicker,
|
|
58
65
|
D as Divider,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
G as
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
po as
|
|
69
|
-
xo as
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
Oo as
|
|
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
|
};
|