@plastic-js/tsumiki 0.1.56 → 0.1.58

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.
Files changed (3) hide show
  1. package/dist/components/Badge.js +81 -62
  2. package/dist/components/MoneyInput.js +6 -2
  3. package/package.json +1 -1
package/dist/components/Badge.js CHANGED
@@ -5,79 +5,100 @@ import { ark } from "@plastic-js/ark/factory";
5
5
  //#region src/components/Badge.jsx
6
6
  var _tmpl = template("<span data-part=\"dot\" aria-hidden=\"true\"></span>");
7
7
  var baseClass = css({
8
- "--_badge-bg": "transparent",
9
- "--_badge-fg": "transparent",
10
- "--_badge-border": "transparent",
8
+ "--_badge-solid-bg": "transparent",
9
+ "--_badge-solid-fg": "transparent",
10
+ "--_badge-surface-bg": "transparent",
11
+ "--_badge-surface-border": "transparent",
12
+ "--_badge-surface-fg": "transparent",
13
+ "--_badge-subtle-bg": "transparent",
14
+ "--_badge-subtle-fg": "transparent",
15
+ "--_badge-outline-border": "transparent",
16
+ "--_badge-outline-fg": "transparent",
11
17
  display: "inline-flex",
12
18
  alignItems: "center",
13
19
  justifyContent: "center",
14
20
  gap: "var(--tsu-spacing-xs)",
15
- border: "1px solid var(--_badge-border)",
21
+ border: "1px solid transparent",
16
22
  borderRadius: "var(--tsu-radius-round)",
17
- backgroundColor: "var(--_badge-bg)",
18
- color: "var(--_badge-fg)",
19
23
  fontFamily: "inherit",
20
24
  fontWeight: "var(--tsu-font-weight-medium)",
21
25
  lineHeight: 1,
22
- whiteSpace: "nowrap"
26
+ fontVariantNumeric: "tabular-nums",
27
+ whiteSpace: "nowrap",
28
+ userSelect: "none"
23
29
  });
24
30
  var solidClass = css({
25
- backgroundColor: "var(--_badge-bg)",
26
- color: "var(--_badge-fg)",
27
- border: "1px solid var(--_badge-border)"
31
+ backgroundColor: "var(--_badge-solid-bg)",
32
+ color: "var(--_badge-solid-fg)"
33
+ });
34
+ var surfaceClass = css({
35
+ backgroundColor: "var(--_badge-surface-bg)",
36
+ borderColor: "var(--_badge-surface-border)",
37
+ color: "var(--_badge-surface-fg)"
38
+ });
39
+ var subtleClass = css({
40
+ backgroundColor: "var(--_badge-subtle-bg)",
41
+ color: "var(--_badge-subtle-fg)"
28
42
  });
29
43
  var outlineClass = css({
30
- backgroundColor: "transparent",
31
- color: "var(--_badge-fg)",
32
- border: "1px solid var(--_badge-border)"
44
+ borderColor: "var(--_badge-outline-border)",
45
+ color: "var(--_badge-outline-fg)"
33
46
  });
34
- var solidIntents = {
47
+ var intentClasses = {
35
48
  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)"
49
+ "--_badge-solid-bg": "var(--tsu-neutral-solid-bg)",
50
+ "--_badge-solid-fg": "var(--tsu-neutral-solid-fg)",
51
+ "--_badge-surface-bg": "var(--tsu-neutral-surface-bg)",
52
+ "--_badge-surface-border": "var(--tsu-neutral-surface-border)",
53
+ "--_badge-surface-fg": "var(--tsu-neutral-surface-fg)",
54
+ "--_badge-subtle-bg": "var(--tsu-neutral-subtle-bg)",
55
+ "--_badge-subtle-fg": "var(--tsu-neutral-subtle-fg)",
56
+ "--_badge-outline-border": "var(--tsu-neutral-outline-border)",
57
+ "--_badge-outline-fg": "var(--tsu-neutral-outline-fg)"
54
58
  }),
55
59
  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)"
60
+ "--_badge-solid-bg": "var(--tsu-accent-solid-bg)",
61
+ "--_badge-solid-fg": "var(--tsu-accent-solid-fg)",
62
+ "--_badge-surface-bg": "var(--tsu-accent-surface-bg)",
63
+ "--_badge-surface-border": "var(--tsu-accent-surface-border)",
64
+ "--_badge-surface-fg": "var(--tsu-accent-surface-fg)",
65
+ "--_badge-subtle-bg": "var(--tsu-accent-subtle-bg)",
66
+ "--_badge-subtle-fg": "var(--tsu-accent-subtle-fg)",
67
+ "--_badge-outline-border": "var(--tsu-accent-outline-border)",
68
+ "--_badge-outline-fg": "var(--tsu-accent-outline-fg)"
65
69
  }),
66
70
  danger: css({
67
- "--_badge-fg": "var(--tsu-danger-outline-fg)",
68
- "--_badge-border": "var(--tsu-danger-outline-border)"
71
+ "--_badge-solid-bg": "var(--tsu-danger-solid-bg)",
72
+ "--_badge-solid-fg": "var(--tsu-danger-solid-fg)",
73
+ "--_badge-surface-bg": "var(--tsu-danger-surface-bg)",
74
+ "--_badge-surface-border": "var(--tsu-danger-surface-border)",
75
+ "--_badge-surface-fg": "var(--tsu-danger-surface-fg)",
76
+ "--_badge-subtle-bg": "var(--tsu-danger-subtle-bg)",
77
+ "--_badge-subtle-fg": "var(--tsu-danger-subtle-fg)",
78
+ "--_badge-outline-border": "var(--tsu-danger-outline-border)",
79
+ "--_badge-outline-fg": "var(--tsu-danger-outline-fg)"
69
80
  }),
70
81
  success: css({
71
- "--_badge-fg": "var(--tsu-success-outline-fg)",
72
- "--_badge-border": "var(--tsu-success-outline-border)"
82
+ "--_badge-solid-bg": "var(--tsu-success-solid-bg)",
83
+ "--_badge-solid-fg": "var(--tsu-success-solid-fg)",
84
+ "--_badge-surface-bg": "var(--tsu-success-surface-bg)",
85
+ "--_badge-surface-border": "var(--tsu-success-surface-border)",
86
+ "--_badge-surface-fg": "var(--tsu-success-surface-fg)",
87
+ "--_badge-subtle-bg": "var(--tsu-success-subtle-bg)",
88
+ "--_badge-subtle-fg": "var(--tsu-success-subtle-fg)",
89
+ "--_badge-outline-border": "var(--tsu-success-outline-border)",
90
+ "--_badge-outline-fg": "var(--tsu-success-outline-fg)"
73
91
  }),
74
92
  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)"
93
+ "--_badge-solid-bg": "var(--tsu-warning-solid-bg)",
94
+ "--_badge-solid-fg": "var(--tsu-warning-solid-fg)",
95
+ "--_badge-surface-bg": "var(--tsu-warning-surface-bg)",
96
+ "--_badge-surface-border": "var(--tsu-warning-surface-border)",
97
+ "--_badge-surface-fg": "var(--tsu-warning-surface-fg)",
98
+ "--_badge-subtle-bg": "var(--tsu-warning-subtle-bg)",
99
+ "--_badge-subtle-fg": "var(--tsu-warning-subtle-fg)",
100
+ "--_badge-outline-border": "var(--tsu-warning-outline-border)",
101
+ "--_badge-outline-fg": "var(--tsu-warning-outline-fg)"
81
102
  })
82
103
  };
83
104
  var sizeClasses = {
@@ -132,22 +153,20 @@ var intentMap = {
132
153
  var read = (v) => typeof v === "function" ? v() : v;
133
154
  var variantClasses = {
134
155
  solid: solidClass,
156
+ surface: surfaceClass,
157
+ subtle: subtleClass,
135
158
  outline: outlineClass
136
159
  };
137
- var intentClasses = {
138
- solid: solidIntents,
139
- outline: outlineIntents
140
- };
141
160
  var Badge = (props = {}) => {
142
161
  const [local, rest] = splitProps(mergeProps$1({
143
- size: "md",
162
+ variant: "subtle",
144
163
  intent: "default",
145
- solid: true,
164
+ size: "md",
146
165
  dot: false
147
166
  }, props), [
148
- "size",
167
+ "variant",
149
168
  "intent",
150
- "solid",
169
+ "size",
151
170
  "dot",
152
171
  "className",
153
172
  "children"
@@ -155,13 +174,13 @@ var Badge = (props = {}) => {
155
174
  return jsx(ark.span, mergeProps(rest, {
156
175
  "data-part": "root",
157
176
  className: () => {
158
- const solid = read(local.solid) ? "solid" : "outline";
177
+ const variant = read(local.variant);
159
178
  const intent = intentMap[read(local.intent)] || read(local.intent);
160
179
  const size = read(local.size);
161
180
  return [
162
181
  baseClass,
163
- variantClasses[solid],
164
- intentClasses[solid][intent],
182
+ variantClasses[variant],
183
+ intentClasses[intent],
165
184
  sizeClasses[size],
166
185
  local.className
167
186
  ].filter(Boolean).join(" ");
package/dist/components/MoneyInput.js CHANGED
@@ -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
- get prefix() {
42
- return local.currency ?? "₱";
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plastic-js/tsumiki",
3
- "version": "0.1.56",
3
+ "version": "0.1.58",
4
4
  "description": "A UI component library for Plastic JS.",
5
5
  "license": "MIT",
6
6
  "author": "tigre",