@plastic-js/tsumiki 0.1.55 → 0.1.57
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/components/Badge.js +178 -0
- package/dist/components/Dialog.js +1 -1
- package/dist/components/MoneyInput.js +6 -2
- package/dist/index.js +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
import { jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
|
|
2
|
+
import { css } from "@emotion/css";
|
|
3
|
+
import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
|
|
4
|
+
import { ark } from "@plastic-js/ark/factory";
|
|
5
|
+
//#region src/components/Badge.jsx
|
|
6
|
+
var _tmpl = template("<span data-part=\"dot\" aria-hidden=\"true\"></span>");
|
|
7
|
+
var baseClass = css({
|
|
8
|
+
"--_badge-bg": "transparent",
|
|
9
|
+
"--_badge-fg": "transparent",
|
|
10
|
+
"--_badge-border": "transparent",
|
|
11
|
+
display: "inline-flex",
|
|
12
|
+
alignItems: "center",
|
|
13
|
+
justifyContent: "center",
|
|
14
|
+
gap: "var(--tsu-spacing-xs)",
|
|
15
|
+
border: "1px solid var(--_badge-border)",
|
|
16
|
+
borderRadius: "var(--tsu-radius-round)",
|
|
17
|
+
backgroundColor: "var(--_badge-bg)",
|
|
18
|
+
color: "var(--_badge-fg)",
|
|
19
|
+
fontFamily: "inherit",
|
|
20
|
+
fontWeight: "var(--tsu-font-weight-medium)",
|
|
21
|
+
lineHeight: 1,
|
|
22
|
+
whiteSpace: "nowrap"
|
|
23
|
+
});
|
|
24
|
+
var solidClass = css({
|
|
25
|
+
backgroundColor: "var(--_badge-bg)",
|
|
26
|
+
color: "var(--_badge-fg)",
|
|
27
|
+
border: "1px solid var(--_badge-border)"
|
|
28
|
+
});
|
|
29
|
+
var outlineClass = css({
|
|
30
|
+
backgroundColor: "transparent",
|
|
31
|
+
color: "var(--_badge-fg)",
|
|
32
|
+
border: "1px solid var(--_badge-border)"
|
|
33
|
+
});
|
|
34
|
+
var solidIntents = {
|
|
35
|
+
neutral: css({
|
|
36
|
+
"--_badge-bg": "var(--tsu-neutral-solid-bg)",
|
|
37
|
+
"--_badge-fg": "var(--tsu-neutral-solid-fg)",
|
|
38
|
+
"--_badge-border": "var(--tsu-neutral-solid-bg)"
|
|
39
|
+
}),
|
|
40
|
+
danger: css({
|
|
41
|
+
"--_badge-bg": "var(--tsu-danger-subtle-bg)",
|
|
42
|
+
"--_badge-fg": "var(--tsu-danger-subtle-fg)",
|
|
43
|
+
"--_badge-border": "var(--tsu-danger-subtle-bg)"
|
|
44
|
+
}),
|
|
45
|
+
success: css({
|
|
46
|
+
"--_badge-bg": "var(--tsu-success-subtle-bg)",
|
|
47
|
+
"--_badge-fg": "var(--tsu-success-subtle-fg)",
|
|
48
|
+
"--_badge-border": "var(--tsu-success-subtle-bg)"
|
|
49
|
+
}),
|
|
50
|
+
warning: css({
|
|
51
|
+
"--_badge-bg": "var(--tsu-warning-subtle-bg)",
|
|
52
|
+
"--_badge-fg": "var(--tsu-warning-subtle-fg)",
|
|
53
|
+
"--_badge-border": "var(--tsu-warning-subtle-bg)"
|
|
54
|
+
}),
|
|
55
|
+
accent: css({
|
|
56
|
+
"--_badge-bg": "var(--tsu-accent-subtle-bg)",
|
|
57
|
+
"--_badge-fg": "var(--tsu-accent-subtle-fg)",
|
|
58
|
+
"--_badge-border": "var(--tsu-accent-subtle-bg)"
|
|
59
|
+
})
|
|
60
|
+
};
|
|
61
|
+
var outlineIntents = {
|
|
62
|
+
neutral: css({
|
|
63
|
+
"--_badge-fg": "var(--tsu-text-primary)",
|
|
64
|
+
"--_badge-border": "var(--tsu-neutral-outline-border)"
|
|
65
|
+
}),
|
|
66
|
+
danger: css({
|
|
67
|
+
"--_badge-fg": "var(--tsu-danger-outline-fg)",
|
|
68
|
+
"--_badge-border": "var(--tsu-danger-outline-border)"
|
|
69
|
+
}),
|
|
70
|
+
success: css({
|
|
71
|
+
"--_badge-fg": "var(--tsu-success-outline-fg)",
|
|
72
|
+
"--_badge-border": "var(--tsu-success-outline-border)"
|
|
73
|
+
}),
|
|
74
|
+
warning: css({
|
|
75
|
+
"--_badge-fg": "var(--tsu-warning-outline-fg)",
|
|
76
|
+
"--_badge-border": "var(--tsu-warning-outline-border)"
|
|
77
|
+
}),
|
|
78
|
+
accent: css({
|
|
79
|
+
"--_badge-fg": "var(--tsu-accent-outline-fg)",
|
|
80
|
+
"--_badge-border": "var(--tsu-accent-outline-border)"
|
|
81
|
+
})
|
|
82
|
+
};
|
|
83
|
+
var sizeClasses = {
|
|
84
|
+
xs: css({
|
|
85
|
+
height: "var(--tsu-comp-secondary-height-xs)",
|
|
86
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-xs))",
|
|
87
|
+
padding: "0 6px",
|
|
88
|
+
fontSize: "var(--tsu-comp-font-size-xs)"
|
|
89
|
+
}),
|
|
90
|
+
sm: css({
|
|
91
|
+
height: "var(--tsu-comp-secondary-height-sm)",
|
|
92
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-sm))",
|
|
93
|
+
padding: "0 7px",
|
|
94
|
+
fontSize: "var(--tsu-comp-font-size-xs)"
|
|
95
|
+
}),
|
|
96
|
+
md: css({
|
|
97
|
+
height: "var(--tsu-comp-secondary-height-md)",
|
|
98
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-md))",
|
|
99
|
+
padding: "0 8px",
|
|
100
|
+
fontSize: "11px"
|
|
101
|
+
}),
|
|
102
|
+
lg: css({
|
|
103
|
+
height: "var(--tsu-comp-secondary-height-lg)",
|
|
104
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-lg))",
|
|
105
|
+
padding: "0 9px",
|
|
106
|
+
fontSize: "var(--tsu-comp-font-size-sm)"
|
|
107
|
+
}),
|
|
108
|
+
xl: css({
|
|
109
|
+
height: "var(--tsu-comp-secondary-height-xl)",
|
|
110
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-xl))",
|
|
111
|
+
padding: "0 10px",
|
|
112
|
+
fontSize: "13px"
|
|
113
|
+
}),
|
|
114
|
+
"2xl": css({
|
|
115
|
+
height: "var(--tsu-comp-secondary-height-xxl)",
|
|
116
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-xxl))",
|
|
117
|
+
padding: "0 14px",
|
|
118
|
+
fontSize: "var(--tsu-comp-font-size-lg)"
|
|
119
|
+
})
|
|
120
|
+
};
|
|
121
|
+
var dotClass = css({
|
|
122
|
+
width: "6px",
|
|
123
|
+
height: "6px",
|
|
124
|
+
borderRadius: "50%",
|
|
125
|
+
backgroundColor: "currentColor"
|
|
126
|
+
});
|
|
127
|
+
var intentMap = {
|
|
128
|
+
default: "neutral",
|
|
129
|
+
info: "accent",
|
|
130
|
+
intent: "accent"
|
|
131
|
+
};
|
|
132
|
+
var read = (v) => typeof v === "function" ? v() : v;
|
|
133
|
+
var variantClasses = {
|
|
134
|
+
solid: solidClass,
|
|
135
|
+
outline: outlineClass
|
|
136
|
+
};
|
|
137
|
+
var intentClasses = {
|
|
138
|
+
solid: solidIntents,
|
|
139
|
+
outline: outlineIntents
|
|
140
|
+
};
|
|
141
|
+
var Badge = (props = {}) => {
|
|
142
|
+
const [local, rest] = splitProps(mergeProps$1({
|
|
143
|
+
size: "md",
|
|
144
|
+
intent: "default",
|
|
145
|
+
solid: true,
|
|
146
|
+
dot: false
|
|
147
|
+
}, props), [
|
|
148
|
+
"size",
|
|
149
|
+
"intent",
|
|
150
|
+
"solid",
|
|
151
|
+
"dot",
|
|
152
|
+
"className",
|
|
153
|
+
"children"
|
|
154
|
+
]);
|
|
155
|
+
return jsx(ark.span, mergeProps(rest, {
|
|
156
|
+
"data-part": "root",
|
|
157
|
+
className: () => {
|
|
158
|
+
const solid = read(local.solid) ? "solid" : "outline";
|
|
159
|
+
const intent = intentMap[read(local.intent)] || read(local.intent);
|
|
160
|
+
const size = read(local.size);
|
|
161
|
+
return [
|
|
162
|
+
baseClass,
|
|
163
|
+
variantClasses[solid],
|
|
164
|
+
intentClasses[solid][intent],
|
|
165
|
+
sizeClasses[size],
|
|
166
|
+
local.className
|
|
167
|
+
].filter(Boolean).join(" ");
|
|
168
|
+
},
|
|
169
|
+
children: [() => read(local.dot) && (() => {
|
|
170
|
+
const _el0 = _tmpl.cloneNode(true);
|
|
171
|
+
setProp(_el0, "className", () => dotClass);
|
|
172
|
+
return _el0;
|
|
173
|
+
})(), () => local.children]
|
|
174
|
+
}));
|
|
175
|
+
};
|
|
176
|
+
Badge.origin = { Root: ark.span };
|
|
177
|
+
//#endregion
|
|
178
|
+
export { Badge as default };
|
|
@@ -4,6 +4,7 @@ import { css } from "@emotion/css";
|
|
|
4
4
|
import { splitProps } from "@plastic-js/plastic";
|
|
5
5
|
//#region src/components/MoneyInput.jsx
|
|
6
6
|
var _tmpl = template("<span></span>");
|
|
7
|
+
var affixPrefixClass = css({ color: "var(--tsu-fg)" });
|
|
7
8
|
var affixSuffixClass = css({
|
|
8
9
|
color: "var(--tsu-fg)",
|
|
9
10
|
fontWeight: "var(--tsu-font-weight-semibold)",
|
|
@@ -38,8 +39,11 @@ var MoneyInput = (props) => {
|
|
|
38
39
|
get placeholder() {
|
|
39
40
|
return local.placeholder;
|
|
40
41
|
},
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
prefix: () => () => {
|
|
43
|
+
const _el0 = _tmpl.cloneNode(true);
|
|
44
|
+
insert(_el0, () => local.currency ?? "₱");
|
|
45
|
+
setProp(_el0, "className", () => affixPrefixClass);
|
|
46
|
+
return _el0;
|
|
43
47
|
},
|
|
44
48
|
suffix: () => {
|
|
45
49
|
const affix = read(local.affix);
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import AccordionRoot, { AccordionContent, AccordionItem, AccordionTrigger } from "./components/Accordion.js";
|
|
2
2
|
import Avatar, { AvatarFallback, AvatarImage } from "./components/Avatar.js";
|
|
3
3
|
import BackToTop from "./components/BackToTop.js";
|
|
4
|
+
import Badge from "./components/Badge.js";
|
|
4
5
|
import BottomNavigation, { BottomNavigationItem } from "./components/BottomNavigation.js";
|
|
5
6
|
import Portal_default from "./components/Portal.js";
|
|
6
7
|
import BottomSheet from "./components/BottomSheet.js";
|
|
@@ -57,4 +58,4 @@ import ToggleGroup, { ToggleGroupItem } from "./components/ToggleGroup.js";
|
|
|
57
58
|
import FilterGroup from "./components/FilterGroup.js";
|
|
58
59
|
import Tour, { TourCloseTrigger, TourContent } from "./components/Tour.js";
|
|
59
60
|
import TreeView, { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem } from "./components/TreeView.js";
|
|
60
|
-
export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarFallback, AvatarImage, BackToTop, BottomNavigation, BottomNavigationItem, BottomSheet, Button, Card, CardNumberInput, Carousel_default as Carousel, CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, Checkbox, ClearTrigger, Clipboard, CloseButton, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Root as Combobox, ComboboxContent, Input as ComboboxInput, ComboboxItem, ConfirmDialog, DatePicker, Dialog, Root$1 as Drawer, DrawerContent, DrawerTrigger, Field, Fieldset, FileUpload, FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup, FilterGroup, FocusTrap_default as FocusTrap, Icon, Input$1 as Input, Link, Listbox, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, NumberInput, Pagination, Popover, Portal_default as Portal, Presence_default as Presence, Progress, ProgressLabel, RadioGroup, RatingGroup, SafeArea, SearchInput, Select, SelectItem, SelectPc, SelectTrigger, SignaturePad, Skeleton, Slider, Spinner, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Steps, StickyHeader, SwipeReveal, Switch, Tabs, Tag, TagsInput, Toast, ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, Toggle, ToggleGroup, ToggleGroupItem, Tour, TourCloseTrigger, TourContent, TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, confirm, createToaster };
|
|
61
|
+
export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarFallback, AvatarImage, BackToTop, Badge, BottomNavigation, BottomNavigationItem, BottomSheet, Button, Card, CardNumberInput, Carousel_default as Carousel, CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, Checkbox, ClearTrigger, Clipboard, CloseButton, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Root as Combobox, ComboboxContent, Input as ComboboxInput, ComboboxItem, ConfirmDialog, DatePicker, Dialog, Root$1 as Drawer, DrawerContent, DrawerTrigger, Field, Fieldset, FileUpload, FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup, FilterGroup, FocusTrap_default as FocusTrap, Icon, Input$1 as Input, Link, Listbox, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, NumberInput, Pagination, Popover, Portal_default as Portal, Presence_default as Presence, Progress, ProgressLabel, RadioGroup, RatingGroup, SafeArea, SearchInput, Select, SelectItem, SelectPc, SelectTrigger, SignaturePad, Skeleton, Slider, Spinner, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Steps, StickyHeader, SwipeReveal, Switch, Tabs, Tag, TagsInput, Toast, ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, Toggle, ToggleGroup, ToggleGroupItem, Tour, TourCloseTrigger, TourContent, TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, confirm, createToaster };
|