@plastic-js/tsumiki 0.1.54 → 0.1.55
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/Tag.js +170 -0
- package/dist/index.js +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,170 @@
|
|
|
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/Tag.jsx
|
|
6
|
+
var _tmpl = template("<button type=\"button\" data-part=\"close\" aria-label=\"Close\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"10\" height=\"10\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"></path></svg></button>");
|
|
7
|
+
var baseClass = css({
|
|
8
|
+
display: "inline-flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
gap: "var(--tsu-spacing-xs)",
|
|
11
|
+
whiteSpace: "nowrap",
|
|
12
|
+
userSelect: "none",
|
|
13
|
+
borderRadius: "var(--tsu-radius-round)",
|
|
14
|
+
fontFamily: "inherit",
|
|
15
|
+
lineHeight: 1,
|
|
16
|
+
transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast), border-color var(--tsu-transition-fast)"
|
|
17
|
+
});
|
|
18
|
+
var solidClass = css({
|
|
19
|
+
backgroundColor: "var(--_tag-bg)",
|
|
20
|
+
color: "var(--_tag-solid-fg)",
|
|
21
|
+
border: "1px solid transparent"
|
|
22
|
+
});
|
|
23
|
+
var outlineClass = css({
|
|
24
|
+
backgroundColor: "transparent",
|
|
25
|
+
color: "var(--_tag-outline-fg)",
|
|
26
|
+
border: "1px solid var(--_tag-border)"
|
|
27
|
+
});
|
|
28
|
+
var intentClasses = {
|
|
29
|
+
neutral: css({
|
|
30
|
+
"--_tag-bg": "var(--tsu-neutral-solid-bg)",
|
|
31
|
+
"--_tag-solid-fg": "var(--tsu-neutral-solid-fg)",
|
|
32
|
+
"--_tag-outline-fg": "var(--tsu-text-primary)",
|
|
33
|
+
"--_tag-border": "var(--tsu-neutral-outline-border)"
|
|
34
|
+
}),
|
|
35
|
+
success: css({
|
|
36
|
+
"--_tag-bg": "var(--tsu-success-solid-bg)",
|
|
37
|
+
"--_tag-solid-fg": "var(--tsu-success-solid-fg)",
|
|
38
|
+
"--_tag-outline-fg": "var(--tsu-success-outline-fg)",
|
|
39
|
+
"--_tag-border": "var(--tsu-success-outline-border)"
|
|
40
|
+
}),
|
|
41
|
+
warning: css({
|
|
42
|
+
"--_tag-bg": "var(--tsu-warning-solid-bg)",
|
|
43
|
+
"--_tag-solid-fg": "var(--tsu-warning-solid-fg)",
|
|
44
|
+
"--_tag-outline-fg": "var(--tsu-warning-outline-fg)",
|
|
45
|
+
"--_tag-border": "var(--tsu-warning-outline-border)"
|
|
46
|
+
}),
|
|
47
|
+
danger: css({
|
|
48
|
+
"--_tag-bg": "var(--tsu-danger-solid-bg)",
|
|
49
|
+
"--_tag-solid-fg": "var(--tsu-danger-solid-fg)",
|
|
50
|
+
"--_tag-outline-fg": "var(--tsu-danger-outline-fg)",
|
|
51
|
+
"--_tag-border": "var(--tsu-danger-outline-border)"
|
|
52
|
+
}),
|
|
53
|
+
accent: css({
|
|
54
|
+
"--_tag-bg": "var(--tsu-accent-solid-bg)",
|
|
55
|
+
"--_tag-solid-fg": "var(--tsu-accent-solid-fg)",
|
|
56
|
+
"--_tag-outline-fg": "var(--tsu-accent-outline-fg)",
|
|
57
|
+
"--_tag-border": "var(--tsu-accent-outline-border)"
|
|
58
|
+
})
|
|
59
|
+
};
|
|
60
|
+
var sizeClasses = {
|
|
61
|
+
xs: css({
|
|
62
|
+
height: "var(--tsu-comp-secondary-height-xs)",
|
|
63
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-xs))",
|
|
64
|
+
padding: "0 6px",
|
|
65
|
+
fontSize: "var(--tsu-comp-font-size-xs)"
|
|
66
|
+
}),
|
|
67
|
+
sm: css({
|
|
68
|
+
height: "var(--tsu-comp-secondary-height-sm)",
|
|
69
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-sm))",
|
|
70
|
+
padding: "0 8px",
|
|
71
|
+
fontSize: "11px"
|
|
72
|
+
}),
|
|
73
|
+
md: css({
|
|
74
|
+
height: "var(--tsu-comp-secondary-height-md)",
|
|
75
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-md))",
|
|
76
|
+
padding: "0 10px",
|
|
77
|
+
fontSize: "var(--tsu-comp-font-size-sm)"
|
|
78
|
+
}),
|
|
79
|
+
lg: css({
|
|
80
|
+
height: "var(--tsu-comp-secondary-height-lg)",
|
|
81
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-lg))",
|
|
82
|
+
padding: "0 12px",
|
|
83
|
+
fontSize: "13px"
|
|
84
|
+
}),
|
|
85
|
+
xl: css({
|
|
86
|
+
height: "var(--tsu-comp-secondary-height-xl)",
|
|
87
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-xl))",
|
|
88
|
+
padding: "0 14px",
|
|
89
|
+
fontSize: "var(--tsu-comp-font-size-md)"
|
|
90
|
+
}),
|
|
91
|
+
"2xl": css({
|
|
92
|
+
height: "var(--tsu-comp-secondary-height-xxl)",
|
|
93
|
+
minWidth: "calc(2 * var(--tsu-comp-secondary-height-xxl))",
|
|
94
|
+
padding: "0 18px",
|
|
95
|
+
fontSize: "var(--tsu-comp-font-size-lg)"
|
|
96
|
+
})
|
|
97
|
+
};
|
|
98
|
+
var closeClass = css({
|
|
99
|
+
display: "inline-flex",
|
|
100
|
+
alignItems: "center",
|
|
101
|
+
justifyContent: "center",
|
|
102
|
+
padding: 0,
|
|
103
|
+
margin: 0,
|
|
104
|
+
marginRight: "-2px",
|
|
105
|
+
border: "none",
|
|
106
|
+
background: "none",
|
|
107
|
+
color: "inherit",
|
|
108
|
+
cursor: "pointer",
|
|
109
|
+
borderRadius: "var(--tsu-radius-round)",
|
|
110
|
+
opacity: .6,
|
|
111
|
+
transition: "opacity var(--tsu-transition-fast)",
|
|
112
|
+
"& svg": {
|
|
113
|
+
display: "block",
|
|
114
|
+
flexShrink: 0
|
|
115
|
+
},
|
|
116
|
+
"@media (hover: hover)": { "&:hover": { opacity: 1 } },
|
|
117
|
+
"&:active": { opacity: 1 }
|
|
118
|
+
});
|
|
119
|
+
var intentMap = {
|
|
120
|
+
default: "neutral",
|
|
121
|
+
info: "accent"
|
|
122
|
+
};
|
|
123
|
+
var read = (v) => typeof v === "function" ? v() : v;
|
|
124
|
+
var variantClass = {
|
|
125
|
+
solid: solidClass,
|
|
126
|
+
outline: outlineClass
|
|
127
|
+
};
|
|
128
|
+
var Tag = (props = {}) => {
|
|
129
|
+
const [local, rest] = splitProps(mergeProps$1({
|
|
130
|
+
variant: "solid",
|
|
131
|
+
intent: "default",
|
|
132
|
+
size: "sm",
|
|
133
|
+
closable: false
|
|
134
|
+
}, props), [
|
|
135
|
+
"variant",
|
|
136
|
+
"intent",
|
|
137
|
+
"size",
|
|
138
|
+
"closable",
|
|
139
|
+
"onClose",
|
|
140
|
+
"className",
|
|
141
|
+
"children"
|
|
142
|
+
]);
|
|
143
|
+
return jsx(ark.span, mergeProps(rest, {
|
|
144
|
+
"data-part": "root",
|
|
145
|
+
className: () => {
|
|
146
|
+
const variant = read(local.variant) === "outline" ? "outline" : "solid";
|
|
147
|
+
const intent = intentMap[read(local.intent)] || read(local.intent);
|
|
148
|
+
const size = read(local.size);
|
|
149
|
+
return [
|
|
150
|
+
baseClass,
|
|
151
|
+
variantClass[variant],
|
|
152
|
+
intentClasses[intent],
|
|
153
|
+
sizeClasses[size],
|
|
154
|
+
local.className
|
|
155
|
+
].filter(Boolean).join(" ");
|
|
156
|
+
},
|
|
157
|
+
children: [() => local.children, () => read(local.closable) && (() => {
|
|
158
|
+
const _el0 = _tmpl.cloneNode(true);
|
|
159
|
+
setProp(_el0, "className", () => closeClass);
|
|
160
|
+
setProp(_el0, "onClick", (e) => {
|
|
161
|
+
e.stopPropagation();
|
|
162
|
+
local.onClose?.();
|
|
163
|
+
});
|
|
164
|
+
return _el0;
|
|
165
|
+
})()]
|
|
166
|
+
}));
|
|
167
|
+
};
|
|
168
|
+
Tag.origin = { Root: ark.span };
|
|
169
|
+
//#endregion
|
|
170
|
+
export { Tag as default };
|
package/dist/index.js
CHANGED
|
@@ -49,6 +49,7 @@ import StickyHeader from "./components/StickyHeader.js";
|
|
|
49
49
|
import SwipeReveal from "./components/SwipeReveal.js";
|
|
50
50
|
import Switch from "./components/Switch.js";
|
|
51
51
|
import Tabs from "./components/Tabs.js";
|
|
52
|
+
import Tag from "./components/Tag.js";
|
|
52
53
|
import TagsInput from "./components/TagsInput.js";
|
|
53
54
|
import Toast, { ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, createToaster } from "./components/Toast.js";
|
|
54
55
|
import Toggle from "./components/Toggle.js";
|
|
@@ -56,4 +57,4 @@ import ToggleGroup, { ToggleGroupItem } from "./components/ToggleGroup.js";
|
|
|
56
57
|
import FilterGroup from "./components/FilterGroup.js";
|
|
57
58
|
import Tour, { TourCloseTrigger, TourContent } from "./components/Tour.js";
|
|
58
59
|
import TreeView, { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem } from "./components/TreeView.js";
|
|
59
|
-
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, TagsInput, Toast, ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, Toggle, ToggleGroup, ToggleGroupItem, Tour, TourCloseTrigger, TourContent, TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, confirm, createToaster };
|
|
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 };
|