freemium-ui 2.0.91 → 2.1.0-alpha.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/lib/Accordion-Ccv-p2G6.js +134 -0
- package/lib/Accordion.d.ts +56 -0
- package/lib/Accordion.js +7 -0
- package/lib/Alert-BtEbkVK1.js +52 -0
- package/lib/Alert.d.ts +66 -0
- package/lib/Alert.js +6 -0
- package/lib/AutoComplete-DF33_uur.js +608 -0
- package/lib/AutoComplete.d.ts +105 -0
- package/lib/AutoComplete.js +14 -0
- package/lib/BoxedRadio-D5Kiintm.js +75 -0
- package/lib/BoxedRadio.d.ts +61 -0
- package/lib/BoxedRadio.js +10 -0
- package/lib/Button-Bd1O8_k7.js +34 -0
- package/lib/Button.d.ts +34 -0
- package/lib/Button.js +2 -0
- package/lib/ButtonDropdown-BZvCwUDe.js +37 -0
- package/lib/ButtonDropdown.d.ts +82 -0
- package/lib/ButtonDropdown.js +11 -0
- package/lib/Calendar-C0xW_pPO.js +32 -0
- package/lib/Calendar.d.ts +25 -0
- package/lib/Calendar.js +2 -0
- package/lib/Checkbox-By1CgFUJ.js +66 -0
- package/lib/Checkbox.d.ts +28 -0
- package/lib/Checkbox.js +7 -0
- package/lib/ChevronUp-BWiG3XYd.js +7 -0
- package/lib/Combination-AmN1Cqrf.js +210 -0
- package/lib/Confirmation-49GhlyzQ.js +66 -0
- package/lib/Confirmation.d.ts +72 -0
- package/lib/Confirmation.js +8 -0
- package/lib/Cross-CIeKwtq6.js +7 -0
- package/lib/CustomizeColumns-BSF8e_we.js +865 -0
- package/lib/Drawer-CnmXL5_B.js +33 -0
- package/lib/Drawer.d.ts +50 -0
- package/lib/Drawer.js +8 -0
- package/lib/Dropdown-D59u6zOt.js +89 -0
- package/lib/Dropdown.d.ts +162 -0
- package/lib/Dropdown.js +15 -0
- package/lib/ErrorText-Uvye7uop.js +8 -0
- package/lib/Info-BsILbpCG.js +9 -0
- package/lib/Input.d.ts +66 -0
- package/lib/Input.js +5 -0
- package/lib/Loader-b8lHCp4N.js +13 -0
- package/lib/Loader.d.ts +21 -0
- package/lib/Loader.js +3 -0
- package/lib/Menu-DoE00Mg-.js +19 -0
- package/lib/Menu.d.ts +80 -0
- package/lib/Menu.js +11 -0
- package/lib/Modal-D5RJHnbn.js +51 -0
- package/lib/Modal.d.ts +51 -0
- package/lib/Modal.js +7 -0
- package/lib/MultiSelectDropdown-DblSkVpv.js +84 -0
- package/lib/MultiSelectDropdown.d.ts +116 -0
- package/lib/MultiSelectDropdown.js +14 -0
- package/lib/Pickers.d.ts +94 -0
- package/lib/Pickers.js +16 -0
- package/lib/Popover-BU73-g73.js +90 -0
- package/lib/Popover.d.ts +94 -0
- package/lib/Popover.js +8 -0
- package/lib/QuillEditor.d.ts +29 -0
- package/lib/QuillEditor.js +3369 -0
- package/lib/Radio.d.ts +69 -0
- package/lib/Radio.js +10 -0
- package/lib/RadioGroup-DM_Y48_b.js +42 -0
- package/lib/Reorder-DUSHsq7i.js +697 -0
- package/lib/Reorder.d.ts +36 -0
- package/lib/Reorder.js +5 -0
- package/lib/SortDropdown-B0SSCJX6.js +17 -0
- package/lib/SortDropdown.d.ts +47 -0
- package/lib/SortDropdown.js +10 -0
- package/lib/Table-cidceyn5.js +117 -0
- package/lib/Table.d.ts +95 -0
- package/lib/Table.js +18 -0
- package/lib/Tabs-j1c7ybY-.js +50 -0
- package/lib/Tabs.d.ts +68 -0
- package/lib/Tabs.js +6 -0
- package/lib/Tag-Cu75ReQP.js +49 -0
- package/lib/Tag.d.ts +50 -0
- package/lib/Tag.js +4 -0
- package/lib/TextArea--fiwZ_QM.js +98 -0
- package/lib/ThemeProvider-bWL8hyYA.js +7 -0
- package/lib/ThemeProvider.d.ts +158 -0
- package/lib/ThemeProvider.js +9 -0
- package/lib/TickIcon-BJqSAG4_.js +7 -0
- package/lib/TimePicker-7Uqb3xJn.js +6598 -0
- package/lib/Toast.d.ts +61 -0
- package/lib/Toast.js +10 -0
- package/lib/ToastProvider-CMk1PSzB.js +264 -0
- package/lib/Toggle-BGV7Nc6t.js +59 -0
- package/lib/Toggle.d.ts +35 -0
- package/lib/Toggle.js +6 -0
- package/lib/Tooltip-DU_ATFRB.js +127 -0
- package/lib/Tooltip.d.ts +53 -0
- package/lib/Tooltip.js +8 -0
- package/lib/Typography-BcAppjDF.js +11 -0
- package/lib/Typography.d.ts +20 -0
- package/lib/Typography.js +2 -0
- package/lib/WorkspaceTable-BV5zccyt.js +100 -0
- package/lib/WorkspaceTable.d.ts +85 -0
- package/lib/WorkspaceTable.js +18 -0
- package/lib/_commonjsHelpers-fGXyuM93.js +4 -0
- package/lib/allPaths-DKtiSqHL.js +19 -0
- package/lib/allPathsLoader-Drb6xO2O.js +5 -0
- package/lib/index-B9EcTy5B.js +46 -0
- package/lib/index-BPxkexqj.js +60 -0
- package/lib/index-BROhcSiX.js +8 -0
- package/lib/index-BT1o947S.js +8 -0
- package/lib/index-BY9lf-do.js +2 -0
- package/lib/index-BdTXfGkV.js +24 -0
- package/lib/index-BnDw8kbT.js +135 -0
- package/lib/index-BrF1HKA1.js +338 -0
- package/lib/index-BxNZ3C71.js +4 -0
- package/lib/index-ByHJlnsx.js +26 -0
- package/lib/index-COoRg_pp.js +55 -0
- package/lib/index-CeIB4COQ.js +10 -0
- package/lib/index-Cjkk7z9c.js +19 -0
- package/lib/index-D6iTv28r.js +607 -0
- package/lib/index-D8E8s0tV.js +60 -0
- package/lib/index-DtILdK5l.js +48 -0
- package/lib/index-DtzckyT3.js +4 -0
- package/lib/index-Dy5ztCxm.js +27 -0
- package/lib/index-KMLwCm58.js +607 -0
- package/lib/index-_WvIFKTM.js +6 -0
- package/lib/index.d.ts +1826 -1842
- package/lib/index.js +54 -17049
- package/lib/isTypedArray-DN-UDJh5.js +89 -0
- package/lib/keyframes-PnzFl0I5.js +20 -0
- package/lib/package.json +133 -3
- package/lib/rollup.config.d.ts.map +1 -0
- package/lib/splitPathsBySizeLoader-Cm_vHo5k.js +23 -0
- package/lib/styled-components.browser.esm-Bq2p-e5F.js +479 -0
- package/lib/styles-BbwNLGy3.js +177 -0
- package/lib/styles-BlCCKAZq.js +1192 -0
- package/lib/use-toasts-GqvPVmSy.js +5 -0
- package/package.json +148 -12
- package/buildspec.yml +0 -22
- package/freemium-ui-2.0.91.tgz +0 -0
- package/lib/index.cjs.js +0 -17225
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import react from 'react';
|
|
3
|
+
import { AxiosRequestConfig } from 'axios';
|
|
4
|
+
|
|
5
|
+
type DefaultDropdownItem = {
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
group?: string;
|
|
8
|
+
};
|
|
9
|
+
type StyledListItemType = {
|
|
10
|
+
readOnly?: boolean;
|
|
11
|
+
$isSelected?: boolean;
|
|
12
|
+
$isHilighted?: boolean;
|
|
13
|
+
};
|
|
14
|
+
type DropdownInputItemProps = React.LiHTMLAttributes<HTMLLIElement> & StyledListItemType & {
|
|
15
|
+
key: string;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
type DefaultAutoCompleteItem = DefaultDropdownItem;
|
|
19
|
+
type AutoCompleteInputItemProps = DropdownInputItemProps;
|
|
20
|
+
interface AutoCompleteProps<T extends DefaultAutoCompleteItem = DefaultAutoCompleteItem> {
|
|
21
|
+
/**
|
|
22
|
+
*
|
|
23
|
+
*/
|
|
24
|
+
id?: string;
|
|
25
|
+
/**
|
|
26
|
+
*
|
|
27
|
+
*/
|
|
28
|
+
url?: string;
|
|
29
|
+
/**
|
|
30
|
+
*
|
|
31
|
+
*/
|
|
32
|
+
label?: string;
|
|
33
|
+
/**
|
|
34
|
+
*
|
|
35
|
+
*/
|
|
36
|
+
disabled?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Is the AutoComplete read only
|
|
39
|
+
*/
|
|
40
|
+
readOnly?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* The width of the AutoComplete
|
|
43
|
+
*/
|
|
44
|
+
width?: string;
|
|
45
|
+
/**
|
|
46
|
+
*
|
|
47
|
+
*/
|
|
48
|
+
placeholder?: string;
|
|
49
|
+
/**
|
|
50
|
+
*
|
|
51
|
+
*/
|
|
52
|
+
name?: string;
|
|
53
|
+
/**
|
|
54
|
+
* The items to be displayed in the AutoComplete
|
|
55
|
+
*/
|
|
56
|
+
items?: Array<T>;
|
|
57
|
+
/**
|
|
58
|
+
* The identifier for the items
|
|
59
|
+
*/
|
|
60
|
+
itemIdentifier?: string;
|
|
61
|
+
/**
|
|
62
|
+
* The selected item
|
|
63
|
+
*/
|
|
64
|
+
/**
|
|
65
|
+
* Function to be called when the selected item changes
|
|
66
|
+
*/
|
|
67
|
+
onChange?: (item: T | null) => void;
|
|
68
|
+
defaultSelectedItem?: T | null;
|
|
69
|
+
/**
|
|
70
|
+
* Fuction to give the string representation of the item
|
|
71
|
+
*/
|
|
72
|
+
itemToString: (item: T, type?: 'list-item' | 'display' | 'downshift') => string;
|
|
73
|
+
/**
|
|
74
|
+
*
|
|
75
|
+
*/
|
|
76
|
+
errorText?: string;
|
|
77
|
+
/**
|
|
78
|
+
*
|
|
79
|
+
*/
|
|
80
|
+
searchKey?: string;
|
|
81
|
+
/**
|
|
82
|
+
*
|
|
83
|
+
*/
|
|
84
|
+
style?: React.CSSProperties;
|
|
85
|
+
/**
|
|
86
|
+
*
|
|
87
|
+
*/
|
|
88
|
+
isErrored?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
*
|
|
91
|
+
*/
|
|
92
|
+
isRequired?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
*
|
|
95
|
+
*/
|
|
96
|
+
emptyItemsText?: string;
|
|
97
|
+
processFetchData?: (data: any[]) => T[];
|
|
98
|
+
itemComponent?: (item: T, props?: AutoCompleteInputItemProps) => React.ReactNode | string;
|
|
99
|
+
headers?: AxiosRequestConfig['headers'];
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
declare const AutoComplete: <T extends DefaultDropdownItem>(props: AutoCompleteProps<T>) => react.JSX.Element;
|
|
103
|
+
//# sourceMappingURL=AutoComplete.d.ts.map
|
|
104
|
+
|
|
105
|
+
export { AutoComplete, type AutoCompleteInputItemProps, type AutoCompleteProps, type DefaultAutoCompleteItem };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export{A as AutoComplete}from"./AutoComplete-DF33_uur.js"
|
|
2
|
+
;import"./styled-components.browser.esm-Bq2p-e5F.js";import"react"
|
|
3
|
+
;import"./styles-BlCCKAZq.js";import"./index-ByHJlnsx.js";import"react-dom"
|
|
4
|
+
;import"./_commonjsHelpers-fGXyuM93.js";import"./index-CeIB4COQ.js"
|
|
5
|
+
;import"./index-BdTXfGkV.js";import"./index-Cjkk7z9c.js"
|
|
6
|
+
;import"./index-BY9lf-do.js";import"./index-COoRg_pp.js"
|
|
7
|
+
;import"./Combination-AmN1Cqrf.js";import"./index-BxNZ3C71.js"
|
|
8
|
+
;import"./index-BrF1HKA1.js";import"./index-BROhcSiX.js"
|
|
9
|
+
;import"./index-DtzckyT3.js";import"./index-_WvIFKTM.js"
|
|
10
|
+
;import"./keyframes-PnzFl0I5.js";import"./index-BnDw8kbT.js"
|
|
11
|
+
;import"./ChevronUp-BWiG3XYd.js";import"./index-BT1o947S.js"
|
|
12
|
+
;import"./index-D8E8s0tV.js";import"./ErrorText-Uvye7uop.js"
|
|
13
|
+
;import"./TickIcon-BJqSAG4_.js";import"./TextArea--fiwZ_QM.js"
|
|
14
|
+
;import"./Loader-b8lHCp4N.js";
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import{u as n,_ as e,a as o,b as r}from"./styled-components.browser.esm-Bq2p-e5F.js"
|
|
2
|
+
;import t from"react";import{S as i,R as a}from"./index-D8E8s0tV.js"
|
|
3
|
+
;import{$ as d,a as l,b as c}from"./index-B9EcTy5B.js"
|
|
4
|
+
;import{E as s}from"./ErrorText-Uvye7uop.js"
|
|
5
|
+
;var u,p,h,m,f,b,x,g,v,y=n.div(u||(u=e(["\n direction: ",";\n"],["\n direction: ",";\n"])),(function(n){
|
|
6
|
+
return n.theme.direction
|
|
7
|
+
})),w=n(d)(p||(p=e(["\n display: flex;\n gap: 8px;\n width: 100%;\n direction: ",";\n"],["\n display: flex;\n gap: 8px;\n width: 100%;\n direction: ",";\n"])),(function(n){
|
|
8
|
+
return n.theme.direction
|
|
9
|
+
})),E=n.div(h||(h=e(["\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 1px solid transparent;\n padding: 0;\n margin: ",";\n outline: none;\n display: grid;\n place-content: center;\n background-color: ",";\n"],["\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 1px solid transparent;\n padding: 0;\n margin: ",";\n outline: none;\n display: grid;\n place-content: center;\n background-color: ",";\n"])),(function(n){
|
|
10
|
+
return n.hasDescription?"4px 0":"0"}),(function(n){
|
|
11
|
+
return n.theme.colors.common.accent
|
|
12
|
+
})),k=n(l)(m||(m=e(["\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ",";\n"],["\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ",";\n"])),(function(n){
|
|
13
|
+
var e=n.theme;return"dark"===e.mode?e.colors.common.black:e.colors.common.white
|
|
14
|
+
})),R=n(c)(f||(f=e(["\n padding: 0;\n margin: 0;\n outline: none;\n border: none;\n background-color: unset;\n height: 100%;\n display: flex;\n align-items: ",";\n padding: ",";\n &[data-state='unchecked'] {\n div.BoxedRadioGroupIndicatorHolder {\n border-color: ",";\n background-color: unset;\n }\n }\n &[data-disabled] {\n div.BoxedRadioGroupIndicatorHolder {\n border-color: ",";\n background: ",";\n }\n }\n &:hover:not([data-disabled]) {\n div.BoxedRadioGroupIndicatorHolder {\n box-shadow: 0 0 0 3px ","30;\n }\n }\n"],["\n padding: 0;\n margin: 0;\n outline: none;\n border: none;\n background-color: unset;\n height: 100%;\n display: flex;\n align-items: ",";\n padding: ",";\n &[data-state='unchecked'] {\n div.BoxedRadioGroupIndicatorHolder {\n border-color: ",";\n background-color: unset;\n }\n }\n &[data-disabled] {\n div.BoxedRadioGroupIndicatorHolder {\n border-color: ",";\n background: ",";\n }\n }\n &:hover:not([data-disabled]) {\n div.BoxedRadioGroupIndicatorHolder {\n box-shadow: 0 0 0 3px ","30;\n }\n }\n"])),(function(n){
|
|
15
|
+
return n.hasDescription?"flex-start":"center"}),(function(n){
|
|
16
|
+
return"ltr"===n.theme.direction?"12px 6px 12px 12px":"12px 12px 12px 6px"
|
|
17
|
+
}),(function(n){return n.theme.colors.border.normal}),(function(n){
|
|
18
|
+
return n.theme.colors.border.disabled}),(function(n){var e=n.theme
|
|
19
|
+
;return"linear-gradient\n (0deg, ".concat(e.colors.fill.dark,", ").concat(e.colors.fill.dark,"),\n linear-gradient(0deg, ").concat(e.colors.fill.medium,", ").concat(e.colors.fill.medium,")")
|
|
20
|
+
}),(function(n){return n.theme.colors.border.hover
|
|
21
|
+
})),B=n.div(b||(b=e(["\n display: flex;\n border-radius: 4px;\n flex: 1;\n border: 1px solid\n ",";\n background-color: ",";\n opacity: ",";\n cursor: ",";\n button,\n label {\n cursor: ",";\n }\n &:hover {\n border-color: ",";\n }\n &.selected {\n border-color: ",";\n }\n &:hover:not([data-disabled]) {\n box-shadow: 0 0 0 5px\n ",";\n }\n &:focus-within {\n box-shadow: ","\n 0px 0px 0px 1px;\n border-color: ",";\n }\n"],["\n display: flex;\n border-radius: 4px;\n flex: 1;\n border: 1px solid\n ",";\n background-color: ",";\n opacity: ",";\n cursor: ",";\n button,\n label {\n cursor: ",";\n }\n &:hover {\n border-color: ",";\n }\n &.selected {\n border-color: ",";\n }\n &:hover:not([data-disabled]) {\n box-shadow: 0 0 0 5px\n ",";\n }\n &:focus-within {\n box-shadow: ","\n 0px 0px 0px 1px;\n border-color: ",";\n }\n"])),(function(n){
|
|
22
|
+
var e=n.theme;return n.$isErrored?e.colors.border.error:e.colors.border.normal
|
|
23
|
+
}),(function(n){return n.theme.colors.fill.surface}),(function(n){
|
|
24
|
+
return n.disabled?"0.75":"1"}),(function(n){
|
|
25
|
+
return n.disabled?"not-allowed":"pointer"}),(function(n){
|
|
26
|
+
return n.disabled?"not-allowed":"pointer"}),(function(n){
|
|
27
|
+
var e=n.theme,o=n.disabled,r=n.$isErrored
|
|
28
|
+
;return o?e.colors.border.normal:r?e.colors.border.error:e.colors.border.hover
|
|
29
|
+
}),(function(n){var e=n.theme
|
|
30
|
+
;return n.$isErrored?e.colors.border.error:e.colors.border.active
|
|
31
|
+
}),(function(n){var e=n.theme
|
|
32
|
+
;return n.disabled?"transparent":e.colors.fill.hover}),(function(n){
|
|
33
|
+
var e=n.theme;return n.$isErrored?e.colors.border.error:e.colors.border.active
|
|
34
|
+
}),(function(n){var e=n.theme
|
|
35
|
+
;return n.$isErrored?e.colors.border.error:e.colors.border.active
|
|
36
|
+
})),N=n.span(x||(x=e(["\n color: ",";\n font-weight: ",";\n line-height: ",";\n font-size: ",";\n white-space: nowrap;\n overflow: hidden;\n"],["\n color: ",";\n font-weight: ",";\n line-height: ",";\n font-size: ",";\n white-space: nowrap;\n overflow: hidden;\n"])),(function(n){
|
|
37
|
+
return n.theme.colors.text.primary}),(function(n){
|
|
38
|
+
return n.theme.typography.fontWeight["semi-bold"]}),(function(n){
|
|
39
|
+
return n.theme.typography.primary.lineHeight}),(function(n){
|
|
40
|
+
return n.theme.typography.primary.fontSize
|
|
41
|
+
})),H=n.span(g||(g=e(["\n color: ",";\n font-weight: ",";\n line-height: ",";\n font-size: ",";\n white-space: normal;\n margin: 4px 0;\n"],["\n color: ",";\n font-weight: ",";\n line-height: ",";\n font-size: ",";\n white-space: normal;\n margin: 4px 0;\n"])),(function(n){
|
|
42
|
+
return n.theme.colors.text.secondary}),(function(n){
|
|
43
|
+
return n.theme.typography.fontWeight.regular}),(function(n){
|
|
44
|
+
return n.theme.typography.secondary.lineHeight}),(function(n){
|
|
45
|
+
return n.theme.typography.secondary.fontSize
|
|
46
|
+
})),I=n.label(v||(v=e(["\n padding: ",";\n flex: 1;\n display: flex;\n flex-direction: column;\n font-family: ",";\n font-weight: ",";\n font-size: ",";\n line-height: ",";\n color: ",";\n white-space: nowrap;\n overflow: hidden;\n"],["\n padding: ",";\n flex: 1;\n display: flex;\n flex-direction: column;\n font-family: ",";\n font-weight: ",";\n font-size: ",";\n line-height: ",";\n color: ",";\n white-space: nowrap;\n overflow: hidden;\n"])),(function(n){
|
|
47
|
+
return"rtl"===n.theme.direction?"12px 6px 12px 12px":"12px 12px 12px 6px"
|
|
48
|
+
}),(function(n){return n.theme.typography.fontFamily}),(function(n){
|
|
49
|
+
return n.theme.typography.fontWeight["semi-bold"]}),(function(n){
|
|
50
|
+
return n.theme.typography.secondary.fontSize}),(function(n){
|
|
51
|
+
return n.theme.typography.secondary.lineHeight}),(function(n){
|
|
52
|
+
return n.theme.colors.text.secondary})),G=function(n){
|
|
53
|
+
var e=n.options,d=n.defaultValue,l=n.idAccessor,c=void 0===l?"id":l,u=n.onChange,p=n.isErrored,h=n.errorText,m=n.disabled,f=void 0!==m&&m,b=n.getTextContent,x=n.className,g=n.id,v=n.isRequired,G=n.readOnly,z=n.itemComponent,C=n.label,$=n.value,D=n.customIndicator,F=o(n,["options","defaultValue","idAccessor","onChange","isErrored","errorText","disabled","getTextContent","className","id","isRequired","readOnly","itemComponent","label","value","customIndicator"])
|
|
54
|
+
;return t.createElement(y,{className:"StyledBoxedRadio"},C&&t.createElement(i,{
|
|
55
|
+
htmlFor:g,className:"input-label"
|
|
56
|
+
},C,C&&v&&t.createElement(a,null,"*")),t.createElement(w,r({defaultValue:d,
|
|
57
|
+
value:$,onValueChange:function(n){return null==u?void 0:u(n)},"aria-readonly":G,
|
|
58
|
+
id:g,"aria-label":C,"aria-labelledby":g,"aria-invalid":p,
|
|
59
|
+
className:"BoxedRadioGroupRoot ".concat(null!=x?x:"").trim()
|
|
60
|
+
},F),null==e?void 0:e.map((function(n){
|
|
61
|
+
var e,o,r=null!==(e=null==b?void 0:b(n,"name"))&&void 0!==e?e:"",i=null!==(o=null==b?void 0:b(n,"description"))&&void 0!==o?o:""
|
|
62
|
+
;return t.createElement(B,{$isErrored:!1,disabled:n.disabled||f,
|
|
63
|
+
key:null==n?void 0:n[c],
|
|
64
|
+
className:"BoxedRadioContainer ".concat($===(null==n?void 0:n[c])?"selected":"").trim()
|
|
65
|
+
},t.createElement(R,{className:"BoxedRadioGroupItem",disabled:n.disabled||f,
|
|
66
|
+
value:null==n?void 0:n[c],id:null==n?void 0:n[c],"aria-label":r,
|
|
67
|
+
hasDescription:!!i},t.createElement(E,{hasDescription:!!i,
|
|
68
|
+
className:"BoxedRadioGroupIndicatorHolder"},null!=D?D:t.createElement(k,{
|
|
69
|
+
className:"BoxedRadioGroupIndicator"}))),t.createElement(I,{
|
|
70
|
+
className:"BoxedRadioLabel",htmlFor:null==n?void 0:n[c]
|
|
71
|
+
},z?z(n):t.createElement(t.Fragment,null,i?t.createElement(N,{
|
|
72
|
+
className:"BoxedRadioLabelHeading"
|
|
73
|
+
},r):t.createElement(t.Fragment,null,r),i&&t.createElement(H,{
|
|
74
|
+
className:"BoxedRadioLabelDescription"},i))))
|
|
75
|
+
}))),p&&h&&t.createElement(s,null,h))};export{G as B};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { RadioGroupProps, RadioGroupContextValue } from '@radix-ui/react-radio-group';
|
|
3
|
+
|
|
4
|
+
interface BoxedRadioItemProps {
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
}
|
|
8
|
+
type BoxedRadioProps<T extends BoxedRadioItemProps = BoxedRadioItemProps> = Omit<React.HtmlHTMLAttributes<HTMLDivElement>, 'onChange' | 'value' | 'defaultValue'> & {
|
|
9
|
+
dir?: RadioGroupProps['dir'];
|
|
10
|
+
/**
|
|
11
|
+
* Select options
|
|
12
|
+
*/
|
|
13
|
+
options?: Array<T>;
|
|
14
|
+
/**
|
|
15
|
+
* Select options
|
|
16
|
+
*/
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Select options
|
|
20
|
+
*/
|
|
21
|
+
readOnly?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Id accessor of radio button
|
|
24
|
+
*/
|
|
25
|
+
idAccessor?: string;
|
|
26
|
+
/**
|
|
27
|
+
* The default value
|
|
28
|
+
*/
|
|
29
|
+
defaultValue?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Value of radio button
|
|
32
|
+
*/
|
|
33
|
+
value?: RadioGroupContextValue['value'];
|
|
34
|
+
/**
|
|
35
|
+
* Function to be called when the selected item changes
|
|
36
|
+
*/
|
|
37
|
+
onChange?: RadioGroupContextValue['onValueChange'];
|
|
38
|
+
/**
|
|
39
|
+
* The description of the content
|
|
40
|
+
*/
|
|
41
|
+
label?: string;
|
|
42
|
+
errorText?: string;
|
|
43
|
+
isRequired?: boolean;
|
|
44
|
+
isErrored?: boolean;
|
|
45
|
+
customIndicator?: ReactNode;
|
|
46
|
+
/**
|
|
47
|
+
* The description of the content
|
|
48
|
+
*/
|
|
49
|
+
getTextContent: (item: T, type: 'name' | 'description') => string;
|
|
50
|
+
/**
|
|
51
|
+
* The description of the content
|
|
52
|
+
*/
|
|
53
|
+
itemComponent?: (item: T) => React.ReactNode | string;
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* BoxedRadio displays a group of options with radio buttons and enables selection of one option from the list.
|
|
58
|
+
*/
|
|
59
|
+
declare const BoxedRadio: <T extends BoxedRadioItemProps>({ options, defaultValue, idAccessor, onChange, isErrored, errorText, disabled, getTextContent, className, id, isRequired, readOnly, itemComponent, label, value, customIndicator, ...props }: BoxedRadioProps<T>) => React.JSX.Element;
|
|
60
|
+
|
|
61
|
+
export { BoxedRadio, type BoxedRadioItemProps, type BoxedRadioProps };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export{B as BoxedRadio}from"./BoxedRadio-D5Kiintm.js"
|
|
2
|
+
;import"./styled-components.browser.esm-Bq2p-e5F.js";import"react"
|
|
3
|
+
;import"./index-D8E8s0tV.js";import"./index-ByHJlnsx.js";import"react-dom"
|
|
4
|
+
;import"./index-BnDw8kbT.js";import"./keyframes-PnzFl0I5.js"
|
|
5
|
+
;import"./index-B9EcTy5B.js";import"./index-CeIB4COQ.js"
|
|
6
|
+
;import"./index-BdTXfGkV.js";import"./index-DtILdK5l.js"
|
|
7
|
+
;import"./index-Cjkk7z9c.js";import"./index-BxNZ3C71.js"
|
|
8
|
+
;import"./index-BY9lf-do.js";import"./index-BROhcSiX.js"
|
|
9
|
+
;import"./index-DtzckyT3.js";import"./index-Dy5ztCxm.js"
|
|
10
|
+
;import"./ErrorText-Uvye7uop.js";
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import{u as n,_ as e,a as r,b as o}from"./styled-components.browser.esm-Bq2p-e5F.js"
|
|
2
|
+
;import t from"react";var i,a={large:{height:"45px",size:"16px"},mini:{
|
|
3
|
+
height:"24px",size:"12px"},normal:{height:"32px",size:"14px"}
|
|
4
|
+
},d=n.button(i||(i=e(["\n direction: ",";\n font-weight: ",";\n font-family: ",";\n border-radius: 4px;\n display: ",";\n border: 1px solid\n ",";\n background: linear-gradient(\n 180deg,\n ","\n 2.56%,\n ","\n 95.75%\n );\n color: ",";\n height: ",";\n line-height: 1.3;\n font-size: ",";\n cursor: ",";\n white-space: nowrap;\n padding: 0 12px;\n &:hover {\n background: ",";\n }\n &:active {\n background: ",";\n border-color: ",";\n }\n &:disabled {\n color: ",";\n border-color: ",";\n background: linear-gradient(\n 180deg,\n ","\n 4.39%,\n ","\n 94.46%\n );\n }\n"],["\n direction: ",";\n font-weight: ",";\n font-family: ",";\n border-radius: 4px;\n display: ",";\n border: 1px solid\n ",";\n background: linear-gradient(\n 180deg,\n ","\n 2.56%,\n ","\n 95.75%\n );\n color: ",";\n height: ",";\n line-height: 1.3;\n font-size: ",";\n cursor: ",";\n white-space: nowrap;\n padding: 0 12px;\n &:hover {\n background: ",";\n }\n &:active {\n background: ",";\n border-color: ",";\n }\n &:disabled {\n color: ",";\n border-color: ",";\n background: linear-gradient(\n 180deg,\n ","\n 4.39%,\n ","\n 94.46%\n );\n }\n"])),(function(n){
|
|
5
|
+
return n.theme.direction}),(function(n){
|
|
6
|
+
return n.theme.typography.fontWeight["semi-bold"]}),(function(n){
|
|
7
|
+
return n.theme.typography.fontFamily}),(function(n){
|
|
8
|
+
return n.$inline?"inline-block":"block"}),(function(n){
|
|
9
|
+
var e=n.theme,r=n.$variant;return e.components.button[r].borderColor
|
|
10
|
+
}),(function(n){var e=n.theme,r=n.$variant
|
|
11
|
+
;return e.components.button[r].backgroundFrom}),(function(n){
|
|
12
|
+
var e=n.theme,r=n.$variant;return e.components.button[r].backgroundTo
|
|
13
|
+
}),(function(n){var e=n.theme,r=n.$variant;return e.components.button[r].color
|
|
14
|
+
}),(function(n){var e=n.$size;return a[e].height}),(function(n){var e=n.$size
|
|
15
|
+
;return a[e].size}),(function(n){return n.disabled?"not-allowed":"pointer"
|
|
16
|
+
}),(function(n){var e=n.theme,r=n.$variant
|
|
17
|
+
;return e.components.button[r].hoverColor}),(function(n){
|
|
18
|
+
var e=n.theme,r=n.$variant;return e.components.button[r].activeBackgroundColor
|
|
19
|
+
}),(function(n){var e=n.theme,r=n.$variant
|
|
20
|
+
;return e.components.button[r].activeBorderColor}),(function(n){
|
|
21
|
+
var e=n.theme,r=n.$variant;return e.components.button[r].disabledColor
|
|
22
|
+
}),(function(n){var e=n.theme,r=n.$variant
|
|
23
|
+
;return e.components.button[r].disabledBorderColor}),(function(n){
|
|
24
|
+
var e=n.theme,r=n.$variant;return e.components.button[r].disabledBackgroundFrom
|
|
25
|
+
}),(function(n){var e=n.theme,r=n.$variant
|
|
26
|
+
;return e.components.button[r].disabledBackgroundTo
|
|
27
|
+
})),c=t.forwardRef((function(n,e){
|
|
28
|
+
var i=n.size,a=void 0===i?"normal":i,c=n.variant,l=void 0===c?"primary":c,s=n.children,b=void 0===s?"":s,h=n.loading,p=void 0!==h&&h,m=n.inline,v=void 0===m||m,g=r(n,["size","variant","children","loading","inline"])
|
|
29
|
+
;return t.useEffect((function(){
|
|
30
|
+
"string"==typeof b||g["aria-label"]||console.warn("The `aria-label` prop is required when the children of the Button are not a string. This is to ensure that assistive technologies can announce the content of the button. Please provide a valid `aria-describedby` prop to the Button component.")
|
|
31
|
+
}),[]),t.createElement(d,o({$size:a,$variant:l,$inline:v,disabled:g.disabled||p,
|
|
32
|
+
"aria-disabled":g.disabled||p,"aria-label":"string"==typeof b?b:void 0,
|
|
33
|
+
role:"button"},g,{ref:e}),p?t.createElement(u,null):b)})),u=function(){
|
|
34
|
+
return t.createElement(t.Fragment,null,"...")};export{c as B};
|
package/lib/Button.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React$1 from 'react';
|
|
3
|
+
|
|
4
|
+
type ButtonSizeKey = 'mini' | 'normal' | 'large';
|
|
5
|
+
type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link';
|
|
6
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
7
|
+
/**
|
|
8
|
+
* The size of the button
|
|
9
|
+
*/
|
|
10
|
+
size?: ButtonSizeKey;
|
|
11
|
+
/**
|
|
12
|
+
* The variant of the button
|
|
13
|
+
*/
|
|
14
|
+
variant?: 'primary' | 'secondary' | 'danger' | 'link';
|
|
15
|
+
/**
|
|
16
|
+
* The children to be displayed in the button
|
|
17
|
+
*/
|
|
18
|
+
children?: React.ReactNode | string;
|
|
19
|
+
/**
|
|
20
|
+
* Whether the button is loading
|
|
21
|
+
*/
|
|
22
|
+
loading?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Whether the button is inline
|
|
25
|
+
*/
|
|
26
|
+
inline?: boolean;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Button displays a button on the user interface and enables performing specific actions based on the button type. The button’s label can be a text, icon, or both.
|
|
31
|
+
*/
|
|
32
|
+
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
33
|
+
|
|
34
|
+
export { Button, type ButtonProps, type ButtonSizeKey, type ButtonVariant };
|
package/lib/Button.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import n from"react"
|
|
2
|
+
;import{u as e,_ as i,e as o}from"./styled-components.browser.esm-Bq2p-e5F.js"
|
|
3
|
+
;import{a as r,b as t,c as d,d as l,D as a}from"./styles-BbwNLGy3.js"
|
|
4
|
+
;import{B as s}from"./Button-Bd1O8_k7.js"
|
|
5
|
+
;import{C as u}from"./ChevronUp-BWiG3XYd.js"
|
|
6
|
+
;var c,v,m,p,f=e.div(c||(c=i(["\n display: flex;\n direction: ",";\n"],["\n display: flex;\n direction: ",";\n"])),(function(n){
|
|
7
|
+
return n.theme.direction
|
|
8
|
+
})),b=e(u)(v||(v=i(["\n transform: rotate(180deg);\n path {\n fill: ",";\n }\n"],["\n transform: rotate(180deg);\n path {\n fill: ",";\n }\n"])),(function(n){
|
|
9
|
+
var e=n.theme,i=n.variant;return e.components.button[i].color
|
|
10
|
+
})),g=e(s)(m||(m=i(["\n border-radius: "," !important;\n padding: 0 8px;\n border-right: ",";\n border-left: ",";\n"],["\n border-radius: "," !important;\n padding: 0 8px;\n border-right: ",";\n border-left: ",";\n"])),(function(n){
|
|
11
|
+
return"ltr"===n.theme.direction?"4px 0 0 4px":"0 4px 4px 0"}),(function(n){
|
|
12
|
+
var e=n.theme,i=n.variant
|
|
13
|
+
;return"ltr"===e.direction?"1px solid ".concat(e.components.button[i].borderColor):void 0
|
|
14
|
+
}),(function(n){var e=n.theme,i=n.variant
|
|
15
|
+
;return"rtl"===e.direction?"1px solid ".concat(e.components.button[i].borderColor):void 0
|
|
16
|
+
})),x=e(s)(p||(p=i(["\n border-radius: "," !important;\n padding: 0 8px;\n border-left: ",";\n border-right: ",";\n"],["\n border-radius: "," !important;\n padding: 0 8px;\n border-left: ",";\n border-right: ",";\n"])),(function(n){
|
|
17
|
+
return"ltr"===n.theme.direction?"0 4px 4px 0":"4px 0 0 4px"}),(function(n){
|
|
18
|
+
return"ltr"===n.theme.direction?"0":void 0}),(function(n){
|
|
19
|
+
return"rtl"===n.theme.direction?"0":void 0})),h=function(e){
|
|
20
|
+
var i,s,u,c,v,m,p,h,C=e.size,E=void 0===C?"normal":C,y=e.variant,w=void 0===y?"primary":y,j=e.loading,z=void 0!==j&&j,B=e.inline,O=void 0===B||B,k=e.defaultSelectedItem,A=e.idAccessor,D=void 0===A?"id":A,I=e.nameAccessor,M=void 0===I?"name":I,N=e.onClick,P=e.options,S=e.side,U=void 0===S?"bottom":S,_=e.sideOffset,q=void 0===_?4:_,F=e.align,G=e.alignOffset,H=e.arrowPadding,J=e.avoidCollisions,K=e.disabled,L=e.id,Q=e.name,R=o()
|
|
21
|
+
;return n.createElement(f,null,n.createElement(g,{id:L,name:Q,size:E,variant:w,
|
|
22
|
+
inline:O,disabled:K||z,"aria-disabled":K||z,onClick:function(n){
|
|
23
|
+
return null==N?void 0:N(k,n)},
|
|
24
|
+
"aria-describedby":"string"===(null!==(i=typeof(null==k?void 0:k[M]))&&void 0!==i?i:null===(s=null==P?void 0:P[0])||void 0===s?void 0:s[M])?null!==(u=null==k?void 0:k[M])&&void 0!==u?u:null===(c=null==P?void 0:P[0])||void 0===c?void 0:c[M]:void 0
|
|
25
|
+
},n.createElement("span",null,null!==(p=null!==(v=null==k?void 0:k[M])&&void 0!==v?v:null===(m=null==P?void 0:P[0])||void 0===m?void 0:m[M])&&void 0!==p?p:"")),n.createElement(r,null,n.createElement(t,{
|
|
26
|
+
asChild:!0},n.createElement(x,{id:"".concat(L,"-more"),
|
|
27
|
+
name:"".concat(Q,"-more"),size:E,variant:w,inline:O,disabled:K||z,
|
|
28
|
+
"aria-disabled":K||z,"aria-label":"Additional options"},n.createElement(b,{
|
|
29
|
+
variant:w}))),n.createElement(d,null,n.createElement(l,{side:U,sideOffset:q,
|
|
30
|
+
align:(null!=F?F:"ltr"===R.direction)?"end":"start",alignOffset:G,
|
|
31
|
+
arrowPadding:H,avoidCollisions:J,className:"DropdownMenuContent"
|
|
32
|
+
},(null!==(h=null==P?void 0:P.filter((function(n){
|
|
33
|
+
return(null==n?void 0:n[D])!==(null==k?void 0:k[D])
|
|
34
|
+
})))&&void 0!==h?h:[]).map((function(e){return n.createElement(a,{
|
|
35
|
+
id:null==e?void 0:e[D],disabled:null==e?void 0:e.disabled,
|
|
36
|
+
className:"DropdownMenuItem",key:null==e?void 0:e[D],onSelect:function(){
|
|
37
|
+
return null==N?void 0:N(e)}},null==e?void 0:e[M])}))))))};export{h as B};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React$1 from 'react';
|
|
3
|
+
import { PopperContentProps } from '@radix-ui/react-popover';
|
|
4
|
+
|
|
5
|
+
type ButtonSizeKey = 'mini' | 'normal' | 'large';
|
|
6
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
7
|
+
/**
|
|
8
|
+
* The size of the button
|
|
9
|
+
*/
|
|
10
|
+
size?: ButtonSizeKey;
|
|
11
|
+
/**
|
|
12
|
+
* The variant of the button
|
|
13
|
+
*/
|
|
14
|
+
variant?: 'primary' | 'secondary' | 'danger' | 'link';
|
|
15
|
+
/**
|
|
16
|
+
* The children to be displayed in the button
|
|
17
|
+
*/
|
|
18
|
+
children?: React.ReactNode | string;
|
|
19
|
+
/**
|
|
20
|
+
* Whether the button is loading
|
|
21
|
+
*/
|
|
22
|
+
loading?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Whether the button is inline
|
|
25
|
+
*/
|
|
26
|
+
inline?: boolean;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
interface ButtonDropdownItemProps {
|
|
30
|
+
id: string;
|
|
31
|
+
name: string;
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
[key: string]: any;
|
|
34
|
+
}
|
|
35
|
+
interface ButtonDropdownProps<T extends ButtonDropdownItemProps = ButtonDropdownItemProps> {
|
|
36
|
+
side?: PopperContentProps['side'];
|
|
37
|
+
sideOffset?: PopperContentProps['sideOffset'];
|
|
38
|
+
align?: PopperContentProps['align'];
|
|
39
|
+
alignOffset?: PopperContentProps['alignOffset'];
|
|
40
|
+
arrowPadding?: PopperContentProps['arrowPadding'];
|
|
41
|
+
avoidCollisions?: PopperContentProps['avoidCollisions'];
|
|
42
|
+
/**
|
|
43
|
+
* value of menu
|
|
44
|
+
*/
|
|
45
|
+
defaultSelectedItem?: T;
|
|
46
|
+
/**
|
|
47
|
+
* options for menu button
|
|
48
|
+
*/
|
|
49
|
+
options?: Array<T>;
|
|
50
|
+
/**
|
|
51
|
+
* Called when a menu item is selected
|
|
52
|
+
*/
|
|
53
|
+
onClick?: (option?: T, event?: React.MouseEvent<HTMLButtonElement>) => void;
|
|
54
|
+
/**
|
|
55
|
+
* id Accessor of menu
|
|
56
|
+
*/
|
|
57
|
+
idAccessor?: string;
|
|
58
|
+
/**
|
|
59
|
+
* name Accessor of menu
|
|
60
|
+
*/
|
|
61
|
+
nameAccessor?: string;
|
|
62
|
+
/**
|
|
63
|
+
* name Accessor of menu
|
|
64
|
+
*/
|
|
65
|
+
id?: string;
|
|
66
|
+
/**
|
|
67
|
+
* name Accessor of menu
|
|
68
|
+
*/
|
|
69
|
+
name?: string;
|
|
70
|
+
disabled?: React.ButtonHTMLAttributes<HTMLButtonElement>['disabled'];
|
|
71
|
+
size?: ButtonProps['size'];
|
|
72
|
+
variant?: ButtonProps['variant'];
|
|
73
|
+
loading?: ButtonProps['loading'];
|
|
74
|
+
inline?: ButtonProps['inline'];
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* ButtonDropdown is a button with a dropdown menu. It is used to select an item from a list of items.
|
|
79
|
+
*/
|
|
80
|
+
declare const ButtonDropdown: ({ size, variant, loading, inline, defaultSelectedItem, idAccessor, nameAccessor, onClick, options, side, sideOffset, align, alignOffset, arrowPadding, avoidCollisions, disabled, id, name, }: ButtonDropdownProps) => React$1.JSX.Element;
|
|
81
|
+
|
|
82
|
+
export { ButtonDropdown, type ButtonDropdownItemProps, type ButtonDropdownProps };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export{B as ButtonDropdown}from"./ButtonDropdown-BZvCwUDe.js";import"react"
|
|
2
|
+
;import"./styled-components.browser.esm-Bq2p-e5F.js"
|
|
3
|
+
;import"./styles-BbwNLGy3.js";import"./index-ByHJlnsx.js";import"react-dom"
|
|
4
|
+
;import"./index-CeIB4COQ.js";import"./index-BdTXfGkV.js"
|
|
5
|
+
;import"./index-Cjkk7z9c.js";import"./index-BY9lf-do.js"
|
|
6
|
+
;import"./index-COoRg_pp.js";import"./Combination-AmN1Cqrf.js"
|
|
7
|
+
;import"./index-BrF1HKA1.js";import"./index-BROhcSiX.js"
|
|
8
|
+
;import"./index-Dy5ztCxm.js";import"./index-DtILdK5l.js"
|
|
9
|
+
;import"./index-BxNZ3C71.js";import"./keyframes-PnzFl0I5.js"
|
|
10
|
+
;import"./index-BnDw8kbT.js";import"./Button-Bd1O8_k7.js"
|
|
11
|
+
;import"./ChevronUp-BWiG3XYd.js";
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import{u as n,_ as e,b as o}from"./styled-components.browser.esm-Bq2p-e5F.js"
|
|
2
|
+
;import r from"react"
|
|
3
|
+
;var t,i,l=n.div(t||(t=e(["\n display: flex;\n flex-wrap: wrap;\n flex-direction: ",";\n gap: 10px;\n margin: 0;\n padding: 0;\n"],["\n display: flex;\n flex-wrap: wrap;\n flex-direction: ",";\n gap: 10px;\n margin: 0;\n padding: 0;\n"])),(function(n){
|
|
4
|
+
return"rtl"===n.theme.direction?"row-reverse":"row"
|
|
5
|
+
})),d=n.button(i||(i=e(["\n font-family: ",";\n font-size: ",";\n font-weight: ",";\n color: ",";\n background-color: ",";\n border: 1px solid\n ",";\n color: ",";\n pointer-events: ",";\n min-width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n user-select: none;\n transition:\n background-color,\n color 0.2s ease-in-out;\n cursor: pointer;\n &:hover,\n &:focus {\n border-color: ",";\n box-shadow: 0 0 0 3px\n ","40;\n }\n &[disabled] {\n outline: unset;\n box-shadow: none;\n border-color: ",";\n }\n"],["\n font-family: ",";\n font-size: ",";\n font-weight: ",";\n color: ",";\n background-color: ",";\n border: 1px solid\n ",";\n color: ",";\n pointer-events: ",";\n min-width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n user-select: none;\n transition:\n background-color,\n color 0.2s ease-in-out;\n cursor: pointer;\n &:hover,\n &:focus {\n border-color: ",";\n box-shadow: 0 0 0 3px\n ","40;\n }\n &[disabled] {\n outline: unset;\n box-shadow: none;\n border-color: ",";\n }\n"])),(function(n){
|
|
6
|
+
return n.theme.typography.fontFamily}),(function(n){
|
|
7
|
+
return n.theme.typography.primary.fontSize}),(function(n){
|
|
8
|
+
return n.theme.typography.primary.fontWeight}),(function(n){
|
|
9
|
+
var e=n.$isSelected,o=n.theme
|
|
10
|
+
;return e?o.colors.text.inverse:o.colors.text.primary}),(function(n){
|
|
11
|
+
var e=n.theme,o=n.$isSelected,r=n.disabled
|
|
12
|
+
;return o?r?e.colors.border.disabled:e.colors.common.accent:e.colors.fill.surface
|
|
13
|
+
}),(function(n){var e=n.theme,o=n.disabled,r=n.$isSelected
|
|
14
|
+
;return o?e.components.button.secondary.disabledBorderColor:r?e.colors.border.active:e.colors.border.normal
|
|
15
|
+
}),(function(n){var e=n.disabled,o=n.theme;return e?o.colors.fill.dark:""
|
|
16
|
+
}),(function(n){return n.disabled?"none":""}),(function(n){
|
|
17
|
+
return n.theme.colors.border.hover}),(function(n){var e=n.$isSelected,o=n.theme
|
|
18
|
+
;return e?o.colors.border.hover:""}),(function(n){
|
|
19
|
+
return n.theme.components.button.secondary.disabledBorderColor})),a=function(n){
|
|
20
|
+
var e=n.value,t=void 0===e?{}:e,i=n.items,a=n.onChange,s=n.idAccessor,c=void 0===s?"id":s,u=n.nameAccessor,p=void 0===u?"name":u,f=n.disabled,b=function(n){
|
|
21
|
+
if(!f){var e=o({},t);e[n]=!e[n],null==a||a(e)}};return r.createElement(l,{
|
|
22
|
+
role:"group"},i.map((function(n,e){return r.createElement(d,{key:e,
|
|
23
|
+
id:null==n?void 0:n[c],"aria-label":null==n?void 0:n[p],
|
|
24
|
+
value:null==n?void 0:n[c],tabIndex:0,type:"button",
|
|
25
|
+
"aria-disabled":!!(null==n?void 0:n.disabled)||f,
|
|
26
|
+
disabled:!!(null==n?void 0:n.disabled)||f,
|
|
27
|
+
"aria-pressed":!!(null==t?void 0:t[null==n?void 0:n[c]]),
|
|
28
|
+
$isSelected:!!(null==t?void 0:t[null==n?void 0:n[c]]),onKeyDown:function(e){
|
|
29
|
+
console.log("onKeyDown",{event:e,key:e.key
|
|
30
|
+
})," "!==e.key&&"Enter"!==e.key||(b(null==n?void 0:n[c]),e.preventDefault())},
|
|
31
|
+
onClick:function(){return b(null==n?void 0:n[c])}},null==n?void 0:n[p])})))}
|
|
32
|
+
;export{a as C};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
interface DefaultMenuItemProps {
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
interface DayProps {
|
|
10
|
+
$isSelected?: boolean;
|
|
11
|
+
id?: string;
|
|
12
|
+
value?: string;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
interface CalendarProps extends DefaultMenuItemProps {
|
|
16
|
+
value?: Record<string, boolean>;
|
|
17
|
+
items: DefaultMenuItemProps[];
|
|
18
|
+
onChange?: (value: Record<string, boolean>) => void;
|
|
19
|
+
idAccessor?: string;
|
|
20
|
+
nameAccessor?: string;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
declare const Calendar: React.FC<CalendarProps>;
|
|
24
|
+
|
|
25
|
+
export { Calendar, type CalendarProps, type DayProps };
|
package/lib/Calendar.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import{u as e,_ as n,f as t,b as r,a as o,e as a}from"./styled-components.browser.esm-Bq2p-e5F.js"
|
|
2
|
+
|
|
3
|
+
;import i,{forwardRef as c,useState as d,useRef as s,useEffect as l,createElement as m}from"react"
|
|
4
|
+
;import{I as u,R as p}from"./index-D8E8s0tV.js"
|
|
5
|
+
;import{$ as h,a as b,_ as f}from"./index-ByHJlnsx.js"
|
|
6
|
+
;import{$ as x}from"./index-BdTXfGkV.js"
|
|
7
|
+
;import{a as k,$ as g}from"./index-CeIB4COQ.js"
|
|
8
|
+
;import{$ as y}from"./index-DtzckyT3.js";import{$ as v}from"./index-BROhcSiX.js"
|
|
9
|
+
;import{$ as w}from"./index-Dy5ztCxm.js"
|
|
10
|
+
;import{T as E}from"./TickIcon-BJqSAG4_.js"
|
|
11
|
+
;const C="Checkbox",[j,q]=x(C),[N,I]=j(C),$=c(((e,n)=>{
|
|
12
|
+
const{__scopeCheckbox:t,name:r,checked:o,defaultChecked:a,required:i,disabled:c,value:u="on",onCheckedChange:p,...x}=e,[y,v]=d(null),w=h(n,(e=>v(e))),E=s(!1),C=!y||Boolean(y.closest("form")),[j=!1,q]=k({
|
|
13
|
+
prop:o,defaultProp:a,onChange:p}),I=s(j);return l((()=>{
|
|
14
|
+
const e=null==y?void 0:y.form;if(e){const n=()=>q(I.current)
|
|
15
|
+
;return e.addEventListener("reset",n),()=>e.removeEventListener("reset",n)}
|
|
16
|
+
}),[y,q]),m(N,{scope:t,state:j,disabled:c},m(b.button,f({type:"button",
|
|
17
|
+
role:"checkbox","aria-checked":R(j)?"mixed":j,"aria-required":i,
|
|
18
|
+
"data-state":D(j),"data-disabled":c?"":void 0,disabled:c,value:u},x,{ref:w,
|
|
19
|
+
onKeyDown:g(e.onKeyDown,(e=>{"Enter"===e.key&&e.preventDefault()})),
|
|
20
|
+
onClick:g(e.onClick,(e=>{
|
|
21
|
+
q((e=>!!R(e)||!e)),C&&(E.current=e.isPropagationStopped(),
|
|
22
|
+
E.current||e.stopPropagation())}))})),C&&m(_,{control:y,bubbles:!E.current,
|
|
23
|
+
name:r,value:u,checked:j,required:i,disabled:c,style:{
|
|
24
|
+
transform:"translateX(-100%)"}}))})),_=e=>{
|
|
25
|
+
const{control:n,checked:t,bubbles:r=!0,...o}=e,a=s(null),i=y(t),c=v(n)
|
|
26
|
+
;return l((()=>{
|
|
27
|
+
const e=a.current,n=window.HTMLInputElement.prototype,o=Object.getOwnPropertyDescriptor(n,"checked").set
|
|
28
|
+
;if(i!==t&&o){const n=new Event("click",{bubbles:r})
|
|
29
|
+
;e.indeterminate=R(t),o.call(e,!R(t)&&t),e.dispatchEvent(n)}
|
|
30
|
+
}),[i,t,r]),m("input",f({type:"checkbox","aria-hidden":!0,
|
|
31
|
+
defaultChecked:!R(t)&&t},o,{tabIndex:-1,ref:a,style:{...e.style,...c,
|
|
32
|
+
position:"absolute",pointerEvents:"none",opacity:0,margin:0}}))};function R(e){
|
|
33
|
+
return"indeterminate"===e}function D(e){
|
|
34
|
+
return R(e)?"indeterminate":e?"checked":"unchecked"}const L=$
|
|
35
|
+
;var O,P,T,B,K=e(c(((e,n)=>{
|
|
36
|
+
const{__scopeCheckbox:t,forceMount:r,...o}=e,a=I("CheckboxIndicator",t)
|
|
37
|
+
;return m(w,{present:r||R(a.state)||!0===a.state},m(b.span,f({
|
|
38
|
+
"data-state":D(a.state),"data-disabled":a.disabled?"":void 0},o,{ref:n,style:{
|
|
39
|
+
pointerEvents:"none",...e.style}})))
|
|
40
|
+
})))(O||(O=n(["\n display: grid;\n place-content: center;\n\n &[data-state='unchecked'] {\n svg.toggle-on {\n display: none;\n }\n }\n"],["\n display: grid;\n place-content: center;\n\n &[data-state='unchecked'] {\n svg.toggle-on {\n display: none;\n }\n }\n"]))),M=e.div(P||(P=n(["\n display: flex;\n align-items: center;\n direction: ",";\n"],["\n display: flex;\n align-items: center;\n direction: ",";\n"])),(function(e){
|
|
41
|
+
return e.theme.direction
|
|
42
|
+
})),F=e(L)(B||(B=n(["\n margin: 0;\n padding: 0;\n width: 14px;\n height: 14px;\n border-radius: 2px;\n display: grid;\n place-content: center;\n border: 1px solid;\n outline-offset: 3px;\n direction: ",";\n box-shadow: 0px 1px 2px 0px ","05\n inset;\n &[data-disabled] {\n opacity: 0.5;\n }\n &[data-state='checked'],\n &[data-state='indeterminate'] {\n background-color: ",";\n border-color: ",";\n }\n &[data-state='unchecked'] {\n background-color: unset;\n border-color: ",";\n }\n &:not([data-disabled]) {\n &:hover {\n box-shadow: 0 0 0 3px ","30;\n }\n }\n\n ","\n"],["\n margin: 0;\n padding: 0;\n width: 14px;\n height: 14px;\n border-radius: 2px;\n display: grid;\n place-content: center;\n border: 1px solid;\n outline-offset: 3px;\n direction: ",";\n box-shadow: 0px 1px 2px 0px ","05\n inset;\n &[data-disabled] {\n opacity: 0.5;\n }\n &[data-state='checked'],\n &[data-state='indeterminate'] {\n background-color: ",";\n border-color: ",";\n }\n &[data-state='unchecked'] {\n background-color: unset;\n border-color: ",";\n }\n &:not([data-disabled]) {\n &:hover {\n box-shadow: 0 0 0 3px ","30;\n }\n }\n\n ","\n"])),(function(e){
|
|
43
|
+
return e.theme.direction}),(function(e){return e.theme.colors.border.hover
|
|
44
|
+
}),(function(e){return e.theme.colors.common.accent}),(function(e){
|
|
45
|
+
return e.theme.colors.common.accent}),(function(e){
|
|
46
|
+
return e.theme.colors.border.hover}),(function(e){
|
|
47
|
+
return e.theme.colors.border.hover}),(function(e){
|
|
48
|
+
return"dark"===e.theme.mode&&t(T||(T=n(["\n &[data-state='indeterminate'] {\n background-color: ",";\n border-color: ",";\n }\n "],["\n &[data-state='indeterminate'] {\n background-color: ",";\n border-color: ",";\n }\n "])),(function(e){
|
|
49
|
+
return e.theme.colors.text.primary}),(function(e){
|
|
50
|
+
return e.theme.colors.text.primary}))})),H=i.forwardRef((function(e,n){
|
|
51
|
+
return i.createElement("svg",r({width:"24",height:"7",viewBox:"0 0 24 7",
|
|
52
|
+
fill:"none",xmlns:"http://www.w3.org/2000/svg"},e,{ref:n
|
|
53
|
+
}),i.createElement("rect",{y:"0.25",width:"24",height:"6",rx:"3",
|
|
54
|
+
fill:e.fill||"currentcolor"}))})),S=function(e){
|
|
55
|
+
var n=e.isRequired,t=e.isErrored,c=e.className,d=e.readOnly,s=e.label,l=o(e,["isRequired","isErrored","className","readOnly","label"]),m=a()
|
|
56
|
+
;return i.createElement(M,null,i.createElement(F,r({
|
|
57
|
+
className:"CheckboxRoot ".concat(null!=c?c:"").trim(),required:n,
|
|
58
|
+
"aria-invalid":t,"aria-label":s||"Checkbox","aria-required":n,"aria-readonly":d,
|
|
59
|
+
"aria-disabled":l.disabled,dir:m.direction},l),i.createElement(K,{
|
|
60
|
+
className:"CheckboxIndicator"},"indeterminate"===l.checked?i.createElement(H,{
|
|
61
|
+
className:"toggle-indeterminate",width:8,height:6,
|
|
62
|
+
fill:"dark"===m.mode?m.colors.common.black:m.colors.common.white
|
|
63
|
+
}):i.createElement(E,{className:"toggle-on",width:8,height:6,
|
|
64
|
+
fill:"dark"===m.mode?m.colors.common.black:m.colors.common.white
|
|
65
|
+
}))),s&&i.createElement(u,{className:"CheckboxLabel",htmlFor:l.id
|
|
66
|
+
},s,s&&n&&i.createElement(p,null,"*")))};export{S as C};
|