@plastic-js/tsumiki 0.1.54 → 0.1.56

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.
@@ -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 };
@@ -132,7 +132,7 @@ var footerClass = css({
132
132
  });
133
133
  var footerBtnClass = css({
134
134
  display: "flex",
135
- gap: "var(--tsu-spacing-md)",
135
+ gap: "20px",
136
136
  width: "100%",
137
137
  justifyContent: "flex-end",
138
138
  "&.tsu-dialog-footer--center": { justifyContent: "center" }
@@ -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
@@ -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";
@@ -49,6 +50,7 @@ import StickyHeader from "./components/StickyHeader.js";
49
50
  import SwipeReveal from "./components/SwipeReveal.js";
50
51
  import Switch from "./components/Switch.js";
51
52
  import Tabs from "./components/Tabs.js";
53
+ import Tag from "./components/Tag.js";
52
54
  import TagsInput from "./components/TagsInput.js";
53
55
  import Toast, { ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, createToaster } from "./components/Toast.js";
54
56
  import Toggle from "./components/Toggle.js";
@@ -56,4 +58,4 @@ import ToggleGroup, { ToggleGroupItem } from "./components/ToggleGroup.js";
56
58
  import FilterGroup from "./components/FilterGroup.js";
57
59
  import Tour, { TourCloseTrigger, TourContent } from "./components/Tour.js";
58
60
  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 };
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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plastic-js/tsumiki",
3
- "version": "0.1.54",
3
+ "version": "0.1.56",
4
4
  "description": "A UI component library for Plastic JS.",
5
5
  "license": "MIT",
6
6
  "author": "tigre",