@godxjp/ui 16.7.0 → 16.7.1
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/data-entry/date-range-picker.js +1 -1
- package/dist/components/data-entry/input.js +1 -1
- package/dist/components/data-entry/month-picker.js +1 -1
- package/dist/components/data-entry/month-range-picker.js +1 -1
- package/dist/components/general/button.js +3 -2
- package/dist/lib/control-styles.d.ts +3 -3
- package/dist/lib/control-styles.js +3 -3
- package/dist/styles/control.css +8 -2
- package/dist/tokens/components/control.css +11 -0
- package/package.json +1 -1
|
@@ -72,7 +72,7 @@ function DateRangePicker({
|
|
|
72
72
|
className: cn(
|
|
73
73
|
// One input-styled shell for the whole range — mirrors Input's control
|
|
74
74
|
// tokens (border/radius/ring) so it reads as a single form field.
|
|
75
|
-
"ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-
|
|
75
|
+
"ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
|
|
76
76
|
"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
|
|
77
77
|
open && "border-ring ring-ring/50 ring-[3px]",
|
|
78
78
|
disabled && "pointer-events-none cursor-not-allowed opacity-50",
|
|
@@ -4,7 +4,7 @@ import { X } from "lucide-react";
|
|
|
4
4
|
import { useTranslation } from "../../i18n/use-translation";
|
|
5
5
|
import { cn } from "../../lib/utils";
|
|
6
6
|
const inputBaseClass = [
|
|
7
|
-
"ui-control border-input bg-background w-full min-w-0 rounded-
|
|
7
|
+
"ui-control border-input bg-background w-full min-w-0 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
|
|
8
8
|
"selection:bg-primary selection:text-primary-foreground",
|
|
9
9
|
"file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
|
|
10
10
|
"placeholder:text-muted-foreground",
|
|
@@ -57,7 +57,7 @@ function MonthPicker({
|
|
|
57
57
|
"div",
|
|
58
58
|
{
|
|
59
59
|
className: cn(
|
|
60
|
-
"ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-
|
|
60
|
+
"ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
|
|
61
61
|
"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
|
|
62
62
|
open && "border-ring ring-ring/50 ring-[3px]",
|
|
63
63
|
disabled && "pointer-events-none cursor-not-allowed opacity-50",
|
|
@@ -100,7 +100,7 @@ function MonthRangePicker({
|
|
|
100
100
|
"div",
|
|
101
101
|
{
|
|
102
102
|
className: cn(
|
|
103
|
-
"ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-
|
|
103
|
+
"ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
|
|
104
104
|
"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
|
|
105
105
|
open && "border-ring ring-ring/50 ring-[3px]",
|
|
106
106
|
disabled && "pointer-events-none cursor-not-allowed opacity-50",
|
|
@@ -37,9 +37,10 @@ const buttonVariants = cva("ui-button", {
|
|
|
37
37
|
"icon-lg": "size-[calc(var(--control-height)+0.25rem)]"
|
|
38
38
|
},
|
|
39
39
|
// Single source of corner radius (deterministic — no competing rounded-* utility): default uses
|
|
40
|
-
// the
|
|
40
|
+
// the dedicated --button-radius token (themeable independently of --control-radius, issue #124),
|
|
41
|
+
// pill is fully rounded, sharp is square.
|
|
41
42
|
shape: {
|
|
42
|
-
default: "rounded-
|
|
43
|
+
default: "rounded-[var(--button-radius)]",
|
|
43
44
|
pill: "rounded-[var(--radius-pill)]",
|
|
44
45
|
sharp: "rounded-[var(--radius-sharp)]"
|
|
45
46
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** Shared control sizing — reads `--control-height`, `--font-size-*` from density / theme. */
|
|
2
|
-
export declare const controlFieldClass = "ui-control w-full rounded-
|
|
3
|
-
export declare const controlMultilineClass = "ui-control-multiline w-full rounded-
|
|
2
|
+
export declare const controlFieldClass = "ui-control w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
|
|
3
|
+
export declare const controlMultilineClass = "ui-control-multiline w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
|
|
4
4
|
/**
|
|
5
5
|
* Open-state ring for popup-style triggers (Select / Cascader / TreeSelect / SearchSelect).
|
|
6
6
|
* Radix moves focus INTO the popup on open, so the trigger loses `:focus-visible` and — without
|
|
@@ -9,7 +9,7 @@ export declare const controlMultilineClass = "ui-control-multiline w-full rounde
|
|
|
9
9
|
* `focus-visible:ring-*` on any trigger that toggles `data-state="open"`.
|
|
10
10
|
*/
|
|
11
11
|
export declare const controlOpenRingClass = "data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px]";
|
|
12
|
-
export declare const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-
|
|
12
|
+
export declare const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] border border-input bg-background shadow-sm transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1";
|
|
13
13
|
export declare const controlIconClass = "size-[length:var(--control-height)] shrink-0";
|
|
14
14
|
export declare const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
|
|
15
15
|
/** Leading/affix icon inside an input row (search, command) — sized to `--control-icon-size`. */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const controlFieldClass = "ui-control w-full rounded-
|
|
2
|
-
const controlMultilineClass = "ui-control-multiline w-full rounded-
|
|
1
|
+
const controlFieldClass = "ui-control w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
|
|
2
|
+
const controlMultilineClass = "ui-control-multiline w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
|
|
3
3
|
const controlOpenRingClass = "data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px]";
|
|
4
|
-
const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-
|
|
4
|
+
const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] border border-input bg-background shadow-sm transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1";
|
|
5
5
|
const controlIconClass = "size-[length:var(--control-height)] shrink-0";
|
|
6
6
|
const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
|
|
7
7
|
const controlIconLeadingClass = "size-[length:var(--control-icon-size)] shrink-0";
|
package/dist/styles/control.css
CHANGED
|
@@ -202,13 +202,19 @@
|
|
|
202
202
|
height: var(--control-height);
|
|
203
203
|
padding-inline-start: var(--control-padding-x);
|
|
204
204
|
padding-inline-end: var(--control-padding-x);
|
|
205
|
-
font-size: var(--font-size
|
|
205
|
+
font-size: var(--control-font-size);
|
|
206
|
+
border-width: var(--control-border-width);
|
|
207
|
+
border-style: solid;
|
|
208
|
+
box-shadow: var(--control-shadow);
|
|
206
209
|
}
|
|
207
210
|
|
|
208
211
|
.ui-control-multiline {
|
|
209
212
|
min-height: calc(var(--control-height) * 2.75);
|
|
210
213
|
padding: var(--space-2) var(--control-padding-x);
|
|
211
|
-
font-size: var(--font-size
|
|
214
|
+
font-size: var(--control-font-size);
|
|
215
|
+
border-width: var(--control-border-width);
|
|
216
|
+
border-style: solid;
|
|
217
|
+
box-shadow: var(--control-shadow);
|
|
212
218
|
}
|
|
213
219
|
|
|
214
220
|
.ui-table-row {
|
|
@@ -18,6 +18,17 @@
|
|
|
18
18
|
--control-gap: var(--space-inline-sm);
|
|
19
19
|
--control-gap-sm: var(--space-inline-xs);
|
|
20
20
|
--control-radius: var(--radius);
|
|
21
|
+
/* Button corner radius — defaults to the button's historical `rounded-md` so nothing
|
|
22
|
+
* changes by default, but is its OWN knob so a service theme can retune the button
|
|
23
|
+
* radius INDEPENDENTLY of input/control radius (issue #124). */
|
|
24
|
+
--button-radius: var(--radius-md);
|
|
25
|
+
/* Control surface knobs — font-size, border width and resting shadow of every
|
|
26
|
+
* `.ui-control` (input / picker trigger). Tokenised so a service theme tunes them
|
|
27
|
+
* once instead of each component hard-coding Tailwind utilities. Defaults preserve
|
|
28
|
+
* the historical look (font-size-base, 1px border, shadow-xs). */
|
|
29
|
+
--control-font-size: var(--font-size-base);
|
|
30
|
+
--control-border-width: 1px;
|
|
31
|
+
--control-shadow: var(--shadow-xs);
|
|
21
32
|
--control-icon-size: calc(1rem * var(--scaling));
|
|
22
33
|
--control-icon-size-sm: calc(0.875rem * var(--scaling));
|
|
23
34
|
--control-focus-ring-width: var(--focus-ring-width);
|