@duskmoon-dev/components 0.2.1 → 0.3.0
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/classes/index.js +82 -15
- package/dist/components/alert/Alert.types.d.ts +1 -1
- package/dist/components/alert/index.js +6 -0
- package/dist/components/auto-complete/AutoComplete.types.d.ts +1 -1
- package/dist/components/auto-complete/index.js +3 -0
- package/dist/components/badge/Badge.types.d.ts +1 -1
- package/dist/components/badge/index.js +4 -0
- package/dist/components/button/Button.types.d.ts +1 -1
- package/dist/components/button/index.js +3 -0
- package/dist/components/checkbox/Checkbox.types.d.ts +1 -1
- package/dist/components/checkbox/index.js +8 -1
- package/dist/components/divider/Divider.types.d.ts +1 -1
- package/dist/components/divider/index.js +8 -2
- package/dist/components/dm-drawer/index.js +3 -0
- package/dist/components/dm-page-header/index.js +3 -0
- package/dist/components/dm-pro-table/index.js +3 -0
- package/dist/components/dm-query/index.js +3 -0
- package/dist/components/dm-search/index.js +3 -0
- package/dist/components/dm-table/index.js +3 -0
- package/dist/components/dm-toolbar/index.js +3 -0
- package/dist/components/dropdown/index.js +3 -0
- package/dist/components/popconfirm/index.js +3 -0
- package/dist/components/progress/Progress.types.d.ts +1 -1
- package/dist/components/progress/index.js +6 -3
- package/dist/components/radio/Radio.types.d.ts +1 -1
- package/dist/components/radio/index.js +8 -1
- package/dist/components/rate/Rate.types.d.ts +1 -1
- package/dist/components/rate/index.js +8 -2
- package/dist/components/slider/Slider.types.d.ts +1 -1
- package/dist/components/slider/index.js +9 -2
- package/dist/components/switch/Switch.types.d.ts +1 -1
- package/dist/components/switch/index.js +8 -1
- package/dist/components/tag/Tag.types.d.ts +1 -1
- package/dist/components/tag/index.js +5 -2
- package/dist/components/timeline/Timeline.types.d.ts +1 -1
- package/dist/components/timeline/index.js +6 -1
- package/dist/components/tour/index.js +3 -0
- package/dist/generated/version.d.ts +1 -1
- package/dist/index.js +83 -16
- package/dist/infrastructure.js +1 -1
- package/dist/styles.css +502 -0
- package/package.json +1 -1
package/dist/classes/index.js
CHANGED
|
@@ -5,6 +5,12 @@ import {
|
|
|
5
5
|
// src/classes/alert.ts
|
|
6
6
|
var alertBaseClass = "alert";
|
|
7
7
|
var alertColorClasses = {
|
|
8
|
+
primary: "alert-primary",
|
|
9
|
+
secondary: "alert-secondary",
|
|
10
|
+
tertiary: "alert-tertiary",
|
|
11
|
+
accent: "alert-accent",
|
|
12
|
+
neutral: "alert-neutral",
|
|
13
|
+
base: "alert-base",
|
|
8
14
|
info: "alert-info",
|
|
9
15
|
success: "alert-success",
|
|
10
16
|
warning: "alert-warning",
|
|
@@ -83,6 +89,9 @@ var autoCompleteColorClasses = {
|
|
|
83
89
|
primary: "autocomplete-primary",
|
|
84
90
|
secondary: "autocomplete-secondary",
|
|
85
91
|
tertiary: "autocomplete-tertiary",
|
|
92
|
+
accent: "autocomplete-accent",
|
|
93
|
+
neutral: "autocomplete-neutral",
|
|
94
|
+
base: "autocomplete-base",
|
|
86
95
|
info: "autocomplete-info",
|
|
87
96
|
success: "autocomplete-success",
|
|
88
97
|
warning: "autocomplete-warning",
|
|
@@ -155,6 +164,10 @@ var badgeBaseClass = "badge";
|
|
|
155
164
|
var badgeColorClasses = {
|
|
156
165
|
primary: "badge-primary",
|
|
157
166
|
secondary: "badge-secondary",
|
|
167
|
+
tertiary: "badge-tertiary",
|
|
168
|
+
accent: "badge-accent",
|
|
169
|
+
neutral: "badge-neutral",
|
|
170
|
+
base: "badge-base",
|
|
158
171
|
info: "badge-info",
|
|
159
172
|
success: "badge-success",
|
|
160
173
|
warning: "badge-warning",
|
|
@@ -213,6 +226,9 @@ var buttonColorClasses = {
|
|
|
213
226
|
primary: "btn-primary",
|
|
214
227
|
secondary: "btn-secondary",
|
|
215
228
|
tertiary: "btn-tertiary",
|
|
229
|
+
accent: "btn-accent",
|
|
230
|
+
neutral: "btn-neutral",
|
|
231
|
+
base: "btn-base",
|
|
216
232
|
info: "btn-info",
|
|
217
233
|
success: "btn-success",
|
|
218
234
|
warning: "btn-warning",
|
|
@@ -400,7 +416,14 @@ var checkboxLabelBaseClass = "checkbox-text";
|
|
|
400
416
|
var checkboxColorClasses = {
|
|
401
417
|
primary: "checkbox-primary",
|
|
402
418
|
secondary: "checkbox-secondary",
|
|
403
|
-
tertiary: "checkbox-tertiary"
|
|
419
|
+
tertiary: "checkbox-tertiary",
|
|
420
|
+
accent: "checkbox-accent",
|
|
421
|
+
neutral: "checkbox-neutral",
|
|
422
|
+
base: "checkbox-base",
|
|
423
|
+
info: "checkbox-info",
|
|
424
|
+
success: "checkbox-success",
|
|
425
|
+
warning: "checkbox-warning",
|
|
426
|
+
error: "checkbox-error"
|
|
404
427
|
};
|
|
405
428
|
var checkboxSizeClasses = {
|
|
406
429
|
sm: "checkbox-sm",
|
|
@@ -610,10 +633,16 @@ var dividerThicknessClasses = {
|
|
|
610
633
|
thick: "divider-thick"
|
|
611
634
|
};
|
|
612
635
|
var dividerColorClasses = {
|
|
613
|
-
neutral: "",
|
|
614
636
|
primary: "divider-primary",
|
|
615
637
|
secondary: "divider-secondary",
|
|
616
|
-
tertiary: "divider-tertiary"
|
|
638
|
+
tertiary: "divider-tertiary",
|
|
639
|
+
accent: "divider-accent",
|
|
640
|
+
neutral: "divider-neutral",
|
|
641
|
+
base: "divider-base",
|
|
642
|
+
info: "divider-info",
|
|
643
|
+
success: "divider-success",
|
|
644
|
+
warning: "divider-warning",
|
|
645
|
+
error: "divider-error"
|
|
617
646
|
};
|
|
618
647
|
var dividerSpacingClasses = {
|
|
619
648
|
normal: "",
|
|
@@ -1514,13 +1543,16 @@ function getPopconfirmClasses({
|
|
|
1514
1543
|
// src/classes/progress.ts
|
|
1515
1544
|
var progressBaseClass = "progress";
|
|
1516
1545
|
var progressColorClasses = {
|
|
1517
|
-
primary: "",
|
|
1546
|
+
primary: "progress-primary",
|
|
1518
1547
|
secondary: "progress-secondary",
|
|
1519
1548
|
tertiary: "progress-tertiary",
|
|
1549
|
+
accent: "progress-accent",
|
|
1550
|
+
neutral: "progress-neutral",
|
|
1551
|
+
base: "progress-base",
|
|
1552
|
+
info: "progress-info",
|
|
1520
1553
|
success: "progress-success",
|
|
1521
|
-
error: "progress-error",
|
|
1522
1554
|
warning: "progress-warning",
|
|
1523
|
-
|
|
1555
|
+
error: "progress-error"
|
|
1524
1556
|
};
|
|
1525
1557
|
var progressSizeClasses = {
|
|
1526
1558
|
sm: "progress-sm",
|
|
@@ -1580,7 +1612,14 @@ var radioLabelBaseClass = "radio-label";
|
|
|
1580
1612
|
var radioColorClasses = {
|
|
1581
1613
|
primary: "radio-primary",
|
|
1582
1614
|
secondary: "radio-secondary",
|
|
1583
|
-
tertiary: "radio-tertiary"
|
|
1615
|
+
tertiary: "radio-tertiary",
|
|
1616
|
+
accent: "radio-accent",
|
|
1617
|
+
neutral: "radio-neutral",
|
|
1618
|
+
base: "radio-base",
|
|
1619
|
+
info: "radio-info",
|
|
1620
|
+
success: "radio-success",
|
|
1621
|
+
warning: "radio-warning",
|
|
1622
|
+
error: "radio-error"
|
|
1584
1623
|
};
|
|
1585
1624
|
var radioSizeClasses = {
|
|
1586
1625
|
sm: "radio-sm",
|
|
@@ -1626,10 +1665,16 @@ var rateSizeClasses = {
|
|
|
1626
1665
|
xl: "rating-xl"
|
|
1627
1666
|
};
|
|
1628
1667
|
var rateColorClasses = {
|
|
1629
|
-
primary: "",
|
|
1668
|
+
primary: "rating-primary",
|
|
1630
1669
|
secondary: "rating-secondary",
|
|
1631
1670
|
tertiary: "rating-tertiary",
|
|
1632
|
-
|
|
1671
|
+
accent: "rating-accent",
|
|
1672
|
+
neutral: "rating-neutral",
|
|
1673
|
+
base: "rating-base",
|
|
1674
|
+
info: "rating-info",
|
|
1675
|
+
success: "rating-success",
|
|
1676
|
+
warning: "rating-warning",
|
|
1677
|
+
error: "rating-error"
|
|
1633
1678
|
};
|
|
1634
1679
|
function getRateClasses({
|
|
1635
1680
|
size = "md",
|
|
@@ -1846,9 +1891,16 @@ var sliderSizeClasses = {
|
|
|
1846
1891
|
lg: "slider-lg"
|
|
1847
1892
|
};
|
|
1848
1893
|
var sliderColorClasses = {
|
|
1849
|
-
primary: "",
|
|
1894
|
+
primary: "slider-primary",
|
|
1850
1895
|
secondary: "slider-secondary",
|
|
1851
|
-
tertiary: "slider-tertiary"
|
|
1896
|
+
tertiary: "slider-tertiary",
|
|
1897
|
+
accent: "slider-accent",
|
|
1898
|
+
neutral: "slider-neutral",
|
|
1899
|
+
base: "slider-base",
|
|
1900
|
+
info: "slider-info",
|
|
1901
|
+
success: "slider-success",
|
|
1902
|
+
warning: "slider-warning",
|
|
1903
|
+
error: "slider-error"
|
|
1852
1904
|
};
|
|
1853
1905
|
function getSliderClasses({
|
|
1854
1906
|
size = "md",
|
|
@@ -2016,7 +2068,14 @@ var switchSizeClasses = {
|
|
|
2016
2068
|
var switchColorClasses = {
|
|
2017
2069
|
primary: "switch-primary",
|
|
2018
2070
|
secondary: "switch-secondary",
|
|
2019
|
-
tertiary: "switch-tertiary"
|
|
2071
|
+
tertiary: "switch-tertiary",
|
|
2072
|
+
accent: "switch-accent",
|
|
2073
|
+
neutral: "switch-neutral",
|
|
2074
|
+
base: "switch-base",
|
|
2075
|
+
info: "switch-info",
|
|
2076
|
+
success: "switch-success",
|
|
2077
|
+
warning: "switch-warning",
|
|
2078
|
+
error: "switch-error"
|
|
2020
2079
|
};
|
|
2021
2080
|
function getSwitchClasses({
|
|
2022
2081
|
size = "md",
|
|
@@ -2104,10 +2163,13 @@ var tagColorClasses = {
|
|
|
2104
2163
|
primary: "chip-primary",
|
|
2105
2164
|
secondary: "chip-secondary",
|
|
2106
2165
|
tertiary: "chip-tertiary",
|
|
2166
|
+
accent: "chip-accent",
|
|
2167
|
+
neutral: "chip-neutral",
|
|
2168
|
+
base: "chip-base",
|
|
2169
|
+
info: "chip-info",
|
|
2107
2170
|
success: "chip-success",
|
|
2108
|
-
error: "chip-error",
|
|
2109
2171
|
warning: "chip-warning",
|
|
2110
|
-
|
|
2172
|
+
error: "chip-error"
|
|
2111
2173
|
};
|
|
2112
2174
|
function getTagClasses({
|
|
2113
2175
|
color,
|
|
@@ -2223,10 +2285,15 @@ var timelineSizeClasses = {
|
|
|
2223
2285
|
lg: "timeline-lg"
|
|
2224
2286
|
};
|
|
2225
2287
|
var timelineMarkerColorClasses = {
|
|
2226
|
-
primary: "",
|
|
2288
|
+
primary: "timeline-marker-primary",
|
|
2227
2289
|
secondary: "timeline-marker-secondary",
|
|
2228
2290
|
tertiary: "timeline-marker-tertiary",
|
|
2291
|
+
accent: "timeline-marker-accent",
|
|
2292
|
+
neutral: "timeline-marker-neutral",
|
|
2293
|
+
base: "timeline-marker-base",
|
|
2294
|
+
info: "timeline-marker-info",
|
|
2229
2295
|
success: "timeline-marker-success",
|
|
2296
|
+
warning: "timeline-marker-warning",
|
|
2230
2297
|
error: "timeline-marker-error"
|
|
2231
2298
|
};
|
|
2232
2299
|
function getTimelineClasses({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComponentProps } from "react";
|
|
2
|
-
export type AlertColor = "info" | "success" | "warning" | "error";
|
|
2
|
+
export type AlertColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
3
3
|
export type AlertAppearance = "filled" | "outline" | "tonal";
|
|
4
4
|
export interface AlertProps extends ComponentProps<"div"> {
|
|
5
5
|
color?: AlertColor;
|
|
@@ -31,6 +31,12 @@ function cn(...inputs) {
|
|
|
31
31
|
// src/classes/alert.ts
|
|
32
32
|
var alertBaseClass = "alert";
|
|
33
33
|
var alertColorClasses = {
|
|
34
|
+
primary: "alert-primary",
|
|
35
|
+
secondary: "alert-secondary",
|
|
36
|
+
tertiary: "alert-tertiary",
|
|
37
|
+
accent: "alert-accent",
|
|
38
|
+
neutral: "alert-neutral",
|
|
39
|
+
base: "alert-base",
|
|
34
40
|
info: "alert-info",
|
|
35
41
|
success: "alert-success",
|
|
36
42
|
warning: "alert-warning",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
|
|
2
2
|
export type AutoCompleteSize = "sm" | "md" | "lg";
|
|
3
|
-
export type AutoCompleteColor = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
|
|
3
|
+
export type AutoCompleteColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
4
4
|
export interface AutoCompleteOptionType {
|
|
5
5
|
value: string;
|
|
6
6
|
label?: ReactNode;
|
|
@@ -46,6 +46,9 @@ var autoCompleteColorClasses = {
|
|
|
46
46
|
primary: "autocomplete-primary",
|
|
47
47
|
secondary: "autocomplete-secondary",
|
|
48
48
|
tertiary: "autocomplete-tertiary",
|
|
49
|
+
accent: "autocomplete-accent",
|
|
50
|
+
neutral: "autocomplete-neutral",
|
|
51
|
+
base: "autocomplete-base",
|
|
49
52
|
info: "autocomplete-info",
|
|
50
53
|
success: "autocomplete-success",
|
|
51
54
|
warning: "autocomplete-warning",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComponentProps } from "react";
|
|
2
|
-
export type BadgeColor = "primary" | "secondary" | "info" | "success" | "warning" | "error";
|
|
2
|
+
export type BadgeColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
3
3
|
export type BadgeAppearance = "filled" | "outline" | "tonal" | "ghost";
|
|
4
4
|
export type BadgeSize = "sm" | "md" | "lg";
|
|
5
5
|
export interface BadgeProps extends ComponentProps<"div"> {
|
|
@@ -30,6 +30,10 @@ var badgeBaseClass = "badge";
|
|
|
30
30
|
var badgeColorClasses = {
|
|
31
31
|
primary: "badge-primary",
|
|
32
32
|
secondary: "badge-secondary",
|
|
33
|
+
tertiary: "badge-tertiary",
|
|
34
|
+
accent: "badge-accent",
|
|
35
|
+
neutral: "badge-neutral",
|
|
36
|
+
base: "badge-base",
|
|
33
37
|
info: "badge-info",
|
|
34
38
|
success: "badge-success",
|
|
35
39
|
warning: "badge-warning",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComponentProps } from "react";
|
|
2
|
-
export type ButtonColor = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
|
|
2
|
+
export type ButtonColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
3
3
|
export type ButtonAppearance = "filled" | "outline" | "tonal" | "ghost" | "text";
|
|
4
4
|
export type ButtonShape = "rect" | "circle" | "square";
|
|
5
5
|
export type ButtonSize = "xs" | "sm" | "md" | "lg";
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ChangeEvent, ComponentProps, ReactNode } from "react";
|
|
2
|
-
export type CheckboxColor = "primary" | "secondary" | "tertiary";
|
|
2
|
+
export type CheckboxColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
3
3
|
export type CheckboxSize = "sm" | "md" | "lg";
|
|
4
4
|
export type CheckboxLabelPosition = "left" | "right";
|
|
5
5
|
export interface CheckboxProps extends Omit<ComponentProps<"input">, "children" | "className" | "size" | "type"> {
|
|
@@ -41,7 +41,14 @@ var checkboxLabelBaseClass = "checkbox-text";
|
|
|
41
41
|
var checkboxColorClasses = {
|
|
42
42
|
primary: "checkbox-primary",
|
|
43
43
|
secondary: "checkbox-secondary",
|
|
44
|
-
tertiary: "checkbox-tertiary"
|
|
44
|
+
tertiary: "checkbox-tertiary",
|
|
45
|
+
accent: "checkbox-accent",
|
|
46
|
+
neutral: "checkbox-neutral",
|
|
47
|
+
base: "checkbox-base",
|
|
48
|
+
info: "checkbox-info",
|
|
49
|
+
success: "checkbox-success",
|
|
50
|
+
warning: "checkbox-warning",
|
|
51
|
+
error: "checkbox-error"
|
|
45
52
|
};
|
|
46
53
|
var checkboxSizeClasses = {
|
|
47
54
|
sm: "checkbox-sm",
|
|
@@ -2,7 +2,7 @@ import type { ComponentProps } from "react";
|
|
|
2
2
|
export type DividerOrientation = "horizontal" | "vertical";
|
|
3
3
|
export type DividerVariant = "solid" | "dashed" | "dotted";
|
|
4
4
|
export type DividerThickness = "thin" | "medium" | "thick";
|
|
5
|
-
export type DividerColor = "neutral" | "
|
|
5
|
+
export type DividerColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
6
6
|
export type DividerSpacing = "normal" | "compact" | "comfortable" | "spacious";
|
|
7
7
|
export interface DividerProps extends ComponentProps<"div"> {
|
|
8
8
|
orientation?: DividerOrientation;
|
|
@@ -45,10 +45,16 @@ var dividerThicknessClasses = {
|
|
|
45
45
|
thick: "divider-thick"
|
|
46
46
|
};
|
|
47
47
|
var dividerColorClasses = {
|
|
48
|
-
neutral: "",
|
|
49
48
|
primary: "divider-primary",
|
|
50
49
|
secondary: "divider-secondary",
|
|
51
|
-
tertiary: "divider-tertiary"
|
|
50
|
+
tertiary: "divider-tertiary",
|
|
51
|
+
accent: "divider-accent",
|
|
52
|
+
neutral: "divider-neutral",
|
|
53
|
+
base: "divider-base",
|
|
54
|
+
info: "divider-info",
|
|
55
|
+
success: "divider-success",
|
|
56
|
+
warning: "divider-warning",
|
|
57
|
+
error: "divider-error"
|
|
52
58
|
};
|
|
53
59
|
var dividerSpacingClasses = {
|
|
54
60
|
normal: "",
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComponentProps } from "react";
|
|
2
|
-
export type ProgressColor = "primary" | "secondary" | "tertiary" | "
|
|
2
|
+
export type ProgressColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
3
3
|
export type ProgressSize = "sm" | "md" | "lg" | "xl";
|
|
4
4
|
export interface ProgressProps extends ComponentProps<"div"> {
|
|
5
5
|
color?: ProgressColor;
|
|
@@ -31,13 +31,16 @@ function cn(...inputs) {
|
|
|
31
31
|
// src/classes/progress.ts
|
|
32
32
|
var progressBaseClass = "progress";
|
|
33
33
|
var progressColorClasses = {
|
|
34
|
-
primary: "",
|
|
34
|
+
primary: "progress-primary",
|
|
35
35
|
secondary: "progress-secondary",
|
|
36
36
|
tertiary: "progress-tertiary",
|
|
37
|
+
accent: "progress-accent",
|
|
38
|
+
neutral: "progress-neutral",
|
|
39
|
+
base: "progress-base",
|
|
40
|
+
info: "progress-info",
|
|
37
41
|
success: "progress-success",
|
|
38
|
-
error: "progress-error",
|
|
39
42
|
warning: "progress-warning",
|
|
40
|
-
|
|
43
|
+
error: "progress-error"
|
|
41
44
|
};
|
|
42
45
|
var progressSizeClasses = {
|
|
43
46
|
sm: "progress-sm",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ChangeEvent, ComponentProps, ReactNode } from "react";
|
|
2
|
-
export type RadioColor = "primary" | "secondary" | "tertiary";
|
|
2
|
+
export type RadioColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
3
3
|
export type RadioSize = "sm" | "md" | "lg";
|
|
4
4
|
export type RadioLabelPosition = "left" | "right";
|
|
5
5
|
export interface RadioProps extends Omit<ComponentProps<"input">, "children" | "className" | "size" | "type"> {
|
|
@@ -37,7 +37,14 @@ var radioLabelBaseClass = "radio-label";
|
|
|
37
37
|
var radioColorClasses = {
|
|
38
38
|
primary: "radio-primary",
|
|
39
39
|
secondary: "radio-secondary",
|
|
40
|
-
tertiary: "radio-tertiary"
|
|
40
|
+
tertiary: "radio-tertiary",
|
|
41
|
+
accent: "radio-accent",
|
|
42
|
+
neutral: "radio-neutral",
|
|
43
|
+
base: "radio-base",
|
|
44
|
+
info: "radio-info",
|
|
45
|
+
success: "radio-success",
|
|
46
|
+
warning: "radio-warning",
|
|
47
|
+
error: "radio-error"
|
|
41
48
|
};
|
|
42
49
|
var radioSizeClasses = {
|
|
43
50
|
sm: "radio-sm",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ComponentProps, ReactNode } from "react";
|
|
2
2
|
export type RateSize = "sm" | "md" | "lg" | "xl";
|
|
3
|
-
export type RateColor = "primary" | "secondary" | "tertiary" | "warning";
|
|
3
|
+
export type RateColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
4
4
|
export interface RateCharacterRenderInfo {
|
|
5
5
|
index: number;
|
|
6
6
|
value: number;
|
|
@@ -46,10 +46,16 @@ var rateSizeClasses = {
|
|
|
46
46
|
xl: "rating-xl"
|
|
47
47
|
};
|
|
48
48
|
var rateColorClasses = {
|
|
49
|
-
primary: "",
|
|
49
|
+
primary: "rating-primary",
|
|
50
50
|
secondary: "rating-secondary",
|
|
51
51
|
tertiary: "rating-tertiary",
|
|
52
|
-
|
|
52
|
+
accent: "rating-accent",
|
|
53
|
+
neutral: "rating-neutral",
|
|
54
|
+
base: "rating-base",
|
|
55
|
+
info: "rating-info",
|
|
56
|
+
success: "rating-success",
|
|
57
|
+
warning: "rating-warning",
|
|
58
|
+
error: "rating-error"
|
|
53
59
|
};
|
|
54
60
|
function getRateClasses({
|
|
55
61
|
size = "md",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ComponentProps, CSSProperties, KeyboardEvent, ReactNode } from "react";
|
|
2
2
|
export type SliderValue = number | [number, number];
|
|
3
3
|
export type SliderSize = "sm" | "md" | "lg";
|
|
4
|
-
export type SliderColor = "primary" | "secondary" | "tertiary";
|
|
4
|
+
export type SliderColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
5
5
|
export interface SliderMarkConfig {
|
|
6
6
|
label?: ReactNode;
|
|
7
7
|
style?: CSSProperties;
|
|
@@ -55,9 +55,16 @@ var sliderSizeClasses = {
|
|
|
55
55
|
lg: "slider-lg"
|
|
56
56
|
};
|
|
57
57
|
var sliderColorClasses = {
|
|
58
|
-
primary: "",
|
|
58
|
+
primary: "slider-primary",
|
|
59
59
|
secondary: "slider-secondary",
|
|
60
|
-
tertiary: "slider-tertiary"
|
|
60
|
+
tertiary: "slider-tertiary",
|
|
61
|
+
accent: "slider-accent",
|
|
62
|
+
neutral: "slider-neutral",
|
|
63
|
+
base: "slider-base",
|
|
64
|
+
info: "slider-info",
|
|
65
|
+
success: "slider-success",
|
|
66
|
+
warning: "slider-warning",
|
|
67
|
+
error: "slider-error"
|
|
61
68
|
};
|
|
62
69
|
function getSliderClasses({
|
|
63
70
|
size = "md",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ChangeEvent, ComponentProps, ReactNode } from "react";
|
|
2
2
|
export type SwitchSize = "sm" | "md" | "lg";
|
|
3
|
-
export type SwitchColor = "primary" | "secondary" | "tertiary";
|
|
3
|
+
export type SwitchColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
4
4
|
export type SwitchChangeEvent = ChangeEvent<HTMLInputElement>;
|
|
5
5
|
export interface SwitchProps extends Omit<ComponentProps<"input">, "checked" | "children" | "className" | "color" | "defaultChecked" | "onChange" | "size" | "type"> {
|
|
6
6
|
checked?: boolean;
|
|
@@ -42,7 +42,14 @@ var switchSizeClasses = {
|
|
|
42
42
|
var switchColorClasses = {
|
|
43
43
|
primary: "switch-primary",
|
|
44
44
|
secondary: "switch-secondary",
|
|
45
|
-
tertiary: "switch-tertiary"
|
|
45
|
+
tertiary: "switch-tertiary",
|
|
46
|
+
accent: "switch-accent",
|
|
47
|
+
neutral: "switch-neutral",
|
|
48
|
+
base: "switch-base",
|
|
49
|
+
info: "switch-info",
|
|
50
|
+
success: "switch-success",
|
|
51
|
+
warning: "switch-warning",
|
|
52
|
+
error: "switch-error"
|
|
46
53
|
};
|
|
47
54
|
function getSwitchClasses({
|
|
48
55
|
size = "md",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComponentProps, ForwardRefExoticComponent, MouseEvent, ReactNode, RefAttributes } from "react";
|
|
2
|
-
export type TagColor = "primary" | "secondary" | "tertiary" | "
|
|
2
|
+
export type TagColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
3
3
|
export type TagType = TagColor | (string & {});
|
|
4
4
|
export interface TagProps extends Omit<ComponentProps<"span">, "color"> {
|
|
5
5
|
color?: TagType;
|
|
@@ -41,10 +41,13 @@ var tagColorClasses = {
|
|
|
41
41
|
primary: "chip-primary",
|
|
42
42
|
secondary: "chip-secondary",
|
|
43
43
|
tertiary: "chip-tertiary",
|
|
44
|
+
accent: "chip-accent",
|
|
45
|
+
neutral: "chip-neutral",
|
|
46
|
+
base: "chip-base",
|
|
47
|
+
info: "chip-info",
|
|
44
48
|
success: "chip-success",
|
|
45
|
-
error: "chip-error",
|
|
46
49
|
warning: "chip-warning",
|
|
47
|
-
|
|
50
|
+
error: "chip-error"
|
|
48
51
|
};
|
|
49
52
|
function getTagClasses({
|
|
50
53
|
color,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ComponentProps, ReactNode } from "react";
|
|
2
2
|
export type TimelineMode = "left" | "right" | "alternate";
|
|
3
|
-
export type TimelineColor = "primary" | "secondary" | "tertiary" | "success" | "error";
|
|
3
|
+
export type TimelineColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
|
|
4
4
|
export type TimelineSize = "sm" | "md" | "lg";
|
|
5
5
|
export interface TimelineItem {
|
|
6
6
|
children?: ReactNode;
|
|
@@ -47,10 +47,15 @@ var timelineSizeClasses = {
|
|
|
47
47
|
lg: "timeline-lg"
|
|
48
48
|
};
|
|
49
49
|
var timelineMarkerColorClasses = {
|
|
50
|
-
primary: "",
|
|
50
|
+
primary: "timeline-marker-primary",
|
|
51
51
|
secondary: "timeline-marker-secondary",
|
|
52
52
|
tertiary: "timeline-marker-tertiary",
|
|
53
|
+
accent: "timeline-marker-accent",
|
|
54
|
+
neutral: "timeline-marker-neutral",
|
|
55
|
+
base: "timeline-marker-base",
|
|
56
|
+
info: "timeline-marker-info",
|
|
53
57
|
success: "timeline-marker-success",
|
|
58
|
+
warning: "timeline-marker-warning",
|
|
54
59
|
error: "timeline-marker-error"
|
|
55
60
|
};
|
|
56
61
|
function getTimelineClasses({
|
|
@@ -31,6 +31,9 @@ var buttonColorClasses = {
|
|
|
31
31
|
primary: "btn-primary",
|
|
32
32
|
secondary: "btn-secondary",
|
|
33
33
|
tertiary: "btn-tertiary",
|
|
34
|
+
accent: "btn-accent",
|
|
35
|
+
neutral: "btn-neutral",
|
|
36
|
+
base: "btn-base",
|
|
34
37
|
info: "btn-info",
|
|
35
38
|
success: "btn-success",
|
|
36
39
|
warning: "btn-warning",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "0.
|
|
1
|
+
export declare const version = "0.3.0";
|