@plastic-js/tsumiki 0.1.47 → 0.1.48
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.
|
@@ -5,15 +5,29 @@ import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
|
|
|
5
5
|
//#region src/components/NumberInput.jsx
|
|
6
6
|
var _tmpl2 = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"12\" height=\"12\"><path d=\"M12 5v14M5 12h14\"></path></svg>");
|
|
7
7
|
var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"12\" height=\"12\"><path d=\"M5 12h14\"></path></svg>");
|
|
8
|
-
var
|
|
8
|
+
var rootBaseClass = css({
|
|
9
9
|
display: "inline-flex",
|
|
10
10
|
alignItems: "center",
|
|
11
|
-
border: "1px solid var(--tsu-accent-8)",
|
|
12
11
|
borderRadius: "var(--tsu-radius-l1-md)",
|
|
13
|
-
|
|
14
|
-
overflow: "hidden",
|
|
15
|
-
"&:focus-within": { borderColor: "var(--tsu-focus-border)" }
|
|
12
|
+
overflow: "hidden"
|
|
16
13
|
});
|
|
14
|
+
var variantClasses = {
|
|
15
|
+
solid: css({
|
|
16
|
+
backgroundColor: "var(--tsu-surface)",
|
|
17
|
+
border: "1px solid transparent",
|
|
18
|
+
"&:focus-within": {
|
|
19
|
+
backgroundColor: "var(--tsu-focus-bg)",
|
|
20
|
+
borderColor: "var(--tsu-focus-border)"
|
|
21
|
+
}
|
|
22
|
+
}),
|
|
23
|
+
outline: css({
|
|
24
|
+
border: "1px solid var(--tsu-accent-8)",
|
|
25
|
+
"&:focus-within": {
|
|
26
|
+
backgroundColor: "var(--tsu-focus-bg)",
|
|
27
|
+
borderColor: "var(--tsu-focus-border)"
|
|
28
|
+
}
|
|
29
|
+
})
|
|
30
|
+
};
|
|
17
31
|
var disabledClass = css({
|
|
18
32
|
borderColor: "var(--tsu-disabled-border)",
|
|
19
33
|
"& *": { color: "var(--tsu-disabled-fg)" }
|
|
@@ -75,21 +89,25 @@ var read = (v) => typeof v === "function" ? v() : v;
|
|
|
75
89
|
var NumberInput$1 = (props = {}) => {
|
|
76
90
|
const [local, rest] = splitProps(mergeProps$2({
|
|
77
91
|
size: "md",
|
|
92
|
+
solid: false,
|
|
78
93
|
disabled: false
|
|
79
94
|
}, props), [
|
|
80
95
|
"size",
|
|
96
|
+
"solid",
|
|
81
97
|
"disabled",
|
|
82
98
|
"className",
|
|
83
99
|
"children"
|
|
84
100
|
]);
|
|
85
101
|
return () => {
|
|
86
102
|
const size = read(local.size);
|
|
103
|
+
const solid = read(local.solid);
|
|
87
104
|
const disabled = read(local.disabled);
|
|
88
105
|
return jsx(NumberInput.Root, mergeProps(rest, {
|
|
89
106
|
disabled,
|
|
90
107
|
get className() {
|
|
91
108
|
return [
|
|
92
|
-
|
|
109
|
+
rootBaseClass,
|
|
110
|
+
variantClasses[solid ? "solid" : "outline"],
|
|
93
111
|
sizeClasses[size],
|
|
94
112
|
disabled && disabledClass,
|
|
95
113
|
local.className
|
package/docs/api.md
CHANGED
|
@@ -137,6 +137,7 @@ Currency-formatted numeric input.
|
|
|
137
137
|
| Prop | Type | Default | Description |
|
|
138
138
|
|---|---|---|---|
|
|
139
139
|
| `size` | `string` | `md` | See size values. |
|
|
140
|
+
| `solid` | `boolean` | `false` | Filled background instead of outlined. |
|
|
140
141
|
| `disabled` | `boolean` | `false` | Disabled. |
|
|
141
142
|
| `children` | `node` | — | Custom triggers, if any. |
|
|
142
143
|
|