@novi-ui/tactile 0.3.0 → 0.5.0
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/LICENSE +21 -0
- package/README.md +3 -0
- package/dist/combo-box/combo-box.d.mts +34 -0
- package/dist/combo-box/combo-box.d.mts.map +1 -0
- package/dist/combo-box/combo-box.mjs +127 -0
- package/dist/combo-box/combo-box.mjs.map +1 -0
- package/dist/combo-box/combo-box.styles.d.mts +88 -0
- package/dist/combo-box/combo-box.styles.d.mts.map +1 -0
- package/dist/combo-box/combo-box.styles.mjs +115 -0
- package/dist/combo-box/combo-box.styles.mjs.map +1 -0
- package/dist/combo-box/index.d.mts +3 -0
- package/dist/date-picker/date-picker.d.mts +16 -0
- package/dist/date-picker/date-picker.d.mts.map +1 -0
- package/dist/date-picker/date-picker.mjs +162 -0
- package/dist/date-picker/date-picker.mjs.map +1 -0
- package/dist/date-picker/date-picker.styles.d.mts +103 -0
- package/dist/date-picker/date-picker.styles.d.mts.map +1 -0
- package/dist/date-picker/date-picker.styles.mjs +134 -0
- package/dist/date-picker/date-picker.styles.mjs.map +1 -0
- package/dist/date-picker/index.d.mts +3 -0
- package/dist/index.d.mts +16 -1
- package/dist/index.mjs +11 -1
- package/dist/menu/menu.styles.d.mts +9 -9
- package/dist/number-field/index.d.mts +3 -0
- package/dist/number-field/number-field.d.mts +16 -0
- package/dist/number-field/number-field.d.mts.map +1 -0
- package/dist/number-field/number-field.mjs +117 -0
- package/dist/number-field/number-field.mjs.map +1 -0
- package/dist/number-field/number-field.styles.d.mts +76 -0
- package/dist/number-field/number-field.styles.d.mts.map +1 -0
- package/dist/number-field/number-field.styles.mjs +96 -0
- package/dist/number-field/number-field.styles.mjs.map +1 -0
- package/dist/pagination/index.d.mts +3 -0
- package/dist/pagination/pagination.d.mts +14 -0
- package/dist/pagination/pagination.d.mts.map +1 -0
- package/dist/pagination/pagination.mjs +100 -0
- package/dist/pagination/pagination.mjs.map +1 -0
- package/dist/pagination/pagination.styles.d.mts +73 -0
- package/dist/pagination/pagination.styles.d.mts.map +1 -0
- package/dist/pagination/pagination.styles.mjs +100 -0
- package/dist/pagination/pagination.styles.mjs.map +1 -0
- package/dist/popover/popover.styles.d.mts +3 -3
- package/dist/select/select.d.mts +1 -1
- package/dist/select/select.mjs +1 -1
- package/dist/select/select.mjs.map +1 -1
- package/dist/table/index.d.mts +3 -0
- package/dist/table/table.d.mts +104 -0
- package/dist/table/table.d.mts.map +1 -0
- package/dist/table/table.mjs +172 -0
- package/dist/table/table.mjs.map +1 -0
- package/dist/table/table.styles.d.mts +58 -0
- package/dist/table/table.styles.d.mts.map +1 -0
- package/dist/table/table.styles.mjs +83 -0
- package/dist/table/table.styles.mjs.map +1 -0
- package/package.json +8 -6
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { VariantMap } from "@novi-ui/core";
|
|
2
|
+
//#region src/date-picker/date-picker.styles.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* DatePicker のスタイル定義。
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* import { datePickerStyles } from '@novi-ui/tactile'
|
|
8
|
+
* import { tv } from 'tailwind-variants'
|
|
9
|
+
*
|
|
10
|
+
* const myPicker = tv({ extend: datePickerStyles, slots: { calendarCell: 'size-12' } })
|
|
11
|
+
*/
|
|
12
|
+
declare const datePickerStyles: import("tailwind-variants").TVReturnType<{
|
|
13
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
14
|
+
inputWrapper: string;
|
|
15
|
+
}>;
|
|
16
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
17
|
+
inputWrapper: string;
|
|
18
|
+
dateInput: string;
|
|
19
|
+
}>;
|
|
20
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
21
|
+
inputWrapper: string;
|
|
22
|
+
}>;
|
|
23
|
+
}, {
|
|
24
|
+
root: string;
|
|
25
|
+
label: string;
|
|
26
|
+
inputWrapper: string;
|
|
27
|
+
dateInput: string;
|
|
28
|
+
segment: string;
|
|
29
|
+
trigger: string;
|
|
30
|
+
icon: string;
|
|
31
|
+
popover: string;
|
|
32
|
+
calendar: string;
|
|
33
|
+
calendarHeader: string;
|
|
34
|
+
calendarTitle: string;
|
|
35
|
+
prevButton: string;
|
|
36
|
+
nextButton: string;
|
|
37
|
+
calendarGrid: string;
|
|
38
|
+
calendarCell: string;
|
|
39
|
+
description: string;
|
|
40
|
+
errorMessage: string;
|
|
41
|
+
}, undefined, {
|
|
42
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
43
|
+
inputWrapper: string;
|
|
44
|
+
}>;
|
|
45
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
46
|
+
inputWrapper: string;
|
|
47
|
+
dateInput: string;
|
|
48
|
+
}>;
|
|
49
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
50
|
+
inputWrapper: string;
|
|
51
|
+
}>;
|
|
52
|
+
}, {
|
|
53
|
+
root: string;
|
|
54
|
+
label: string;
|
|
55
|
+
inputWrapper: string;
|
|
56
|
+
dateInput: string;
|
|
57
|
+
segment: string;
|
|
58
|
+
trigger: string;
|
|
59
|
+
icon: string;
|
|
60
|
+
popover: string;
|
|
61
|
+
calendar: string;
|
|
62
|
+
calendarHeader: string;
|
|
63
|
+
calendarTitle: string;
|
|
64
|
+
prevButton: string;
|
|
65
|
+
nextButton: string;
|
|
66
|
+
calendarGrid: string;
|
|
67
|
+
calendarCell: string;
|
|
68
|
+
description: string;
|
|
69
|
+
errorMessage: string;
|
|
70
|
+
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
71
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
72
|
+
inputWrapper: string;
|
|
73
|
+
}>;
|
|
74
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
75
|
+
inputWrapper: string;
|
|
76
|
+
dateInput: string;
|
|
77
|
+
}>;
|
|
78
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
79
|
+
inputWrapper: string;
|
|
80
|
+
}>;
|
|
81
|
+
}, {
|
|
82
|
+
root: string;
|
|
83
|
+
label: string;
|
|
84
|
+
inputWrapper: string;
|
|
85
|
+
dateInput: string;
|
|
86
|
+
segment: string;
|
|
87
|
+
trigger: string;
|
|
88
|
+
icon: string;
|
|
89
|
+
popover: string;
|
|
90
|
+
calendar: string;
|
|
91
|
+
calendarHeader: string;
|
|
92
|
+
calendarTitle: string;
|
|
93
|
+
prevButton: string;
|
|
94
|
+
nextButton: string;
|
|
95
|
+
calendarGrid: string;
|
|
96
|
+
calendarCell: string;
|
|
97
|
+
description: string;
|
|
98
|
+
errorMessage: string;
|
|
99
|
+
}>>;
|
|
100
|
+
type DatePickerStyleProps = Parameters<typeof datePickerStyles>[0];
|
|
101
|
+
//#endregion
|
|
102
|
+
export { DatePickerStyleProps, datePickerStyles };
|
|
103
|
+
//# sourceMappingURL=date-picker.styles.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-picker.styles.d.mts","names":[],"sources":["../../src/date-picker/date-picker.styles.ts"],"mappings":";;;;;;;;;;;cAqJa,8CAAgB;;IA/C0B;;;IAeN;IAAmB;;;IAef;;;;;;;;;;;;;;;;;;;;;;IA9BE;;;IAeN;IAAmB;;;IAef;;;;;;;;;;;;;;;;;;;;;;IA9BE;;;IAeN;IAAmB;;;IAef;;;;;;;;;;;;;;;;;;;;;KAuBzC,uBAAuB,kBAAkB"}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { disabledState, focusRing } from "../styles/focus-ring.mjs";
|
|
2
|
+
import { tv } from "tailwind-variants";
|
|
3
|
+
//#region src/date-picker/date-picker.styles.ts
|
|
4
|
+
/** 月送りのボタン。指で押す面なので 44px の正方形 */
|
|
5
|
+
const monthButton = [
|
|
6
|
+
"inline-flex items-center justify-center size-11",
|
|
7
|
+
"text-[var(--novi-color-fg)] outline-none",
|
|
8
|
+
"rounded-[var(--novi-radius-full)]",
|
|
9
|
+
"bg-[var(--novi-color-subtle)]",
|
|
10
|
+
"data-[pressed]:scale-[0.97]",
|
|
11
|
+
"motion-reduce:data-[pressed]:scale-100",
|
|
12
|
+
"data-[disabled]:opacity-40",
|
|
13
|
+
focusRing
|
|
14
|
+
].join(" ");
|
|
15
|
+
const slots = {
|
|
16
|
+
root: "flex flex-col gap-1.5",
|
|
17
|
+
label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
|
|
18
|
+
inputWrapper: [
|
|
19
|
+
"text-[var(--novi-color-fg)]",
|
|
20
|
+
"flex items-center w-full overflow-hidden",
|
|
21
|
+
"bg-[var(--novi-color-surface)]",
|
|
22
|
+
"shadow-[var(--novi-shadow-sm)]",
|
|
23
|
+
"rounded-[var(--novi-radius-md)]",
|
|
24
|
+
"transition-[opacity,box-shadow]",
|
|
25
|
+
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
26
|
+
"data-[invalid]:ring-1 data-[invalid]:ring-[var(--novi-color-danger)]",
|
|
27
|
+
focusRing,
|
|
28
|
+
disabledState
|
|
29
|
+
].join(" "),
|
|
30
|
+
dateInput: "flex items-center flex-1 min-w-0 whitespace-nowrap",
|
|
31
|
+
segment: [
|
|
32
|
+
"inline-flex items-center justify-center min-w-6 min-h-6 px-1 tabular-nums outline-none",
|
|
33
|
+
"rounded-[var(--novi-radius-sm)]",
|
|
34
|
+
"data-[placeholder]:text-[var(--novi-color-muted)]",
|
|
35
|
+
"data-[type=literal]:px-0 data-[type=literal]:text-[var(--novi-color-muted)]",
|
|
36
|
+
"data-[focused]:bg-[var(--novi-color-primary)] data-[focused]:text-[var(--novi-color-primary-fg)]",
|
|
37
|
+
"data-[invalid]:text-[var(--novi-color-danger)]"
|
|
38
|
+
].join(" "),
|
|
39
|
+
trigger: [
|
|
40
|
+
"shrink-0 self-stretch aspect-square inline-flex items-center justify-center",
|
|
41
|
+
"text-[var(--novi-color-muted)]",
|
|
42
|
+
"outline-none",
|
|
43
|
+
"data-[pressed]:scale-[0.97]",
|
|
44
|
+
"motion-reduce:data-[pressed]:scale-100",
|
|
45
|
+
"data-[focus-visible]:bg-[var(--novi-color-subtle)]",
|
|
46
|
+
"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
|
|
47
|
+
"transition-[background-color,transform]",
|
|
48
|
+
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
|
|
49
|
+
].join(" "),
|
|
50
|
+
icon: "shrink-0 inline-flex",
|
|
51
|
+
popover: [
|
|
52
|
+
"!fixed !top-auto !inset-x-0 !bottom-0 !max-w-none !w-full",
|
|
53
|
+
"bg-[var(--novi-color-surface)]",
|
|
54
|
+
"text-[var(--novi-color-fg)]",
|
|
55
|
+
"rounded-t-[var(--novi-radius-lg)]",
|
|
56
|
+
"shadow-[var(--novi-shadow-lg)]",
|
|
57
|
+
"p-[var(--novi-pad-surface-y)]",
|
|
58
|
+
"pb-[max(var(--novi-pad-surface-y),env(safe-area-inset-bottom,0px))]",
|
|
59
|
+
"pl-[max(var(--novi-pad-surface-x),env(safe-area-inset-left,0px))] pr-[max(var(--novi-pad-surface-x),env(safe-area-inset-right,0px))]",
|
|
60
|
+
"data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]"
|
|
61
|
+
].join(" "),
|
|
62
|
+
calendar: "flex flex-col gap-[var(--novi-gap-stack)] items-center outline-none",
|
|
63
|
+
calendarHeader: "flex items-center justify-between gap-[var(--novi-gap-inline)] w-full max-w-[22rem]",
|
|
64
|
+
calendarTitle: "text-[length:var(--novi-text-lg)] font-medium tabular-nums",
|
|
65
|
+
prevButton: monthButton,
|
|
66
|
+
nextButton: monthButton,
|
|
67
|
+
calendarGrid: ["border-collapse", "[&_th]:size-11 [&_th]:font-normal [&_th]:text-[length:var(--novi-text-sm)] [&_th]:text-[var(--novi-color-muted)]"].join(" "),
|
|
68
|
+
calendarCell: [
|
|
69
|
+
"size-11 inline-flex items-center justify-center",
|
|
70
|
+
"text-[length:var(--novi-text-base)] tabular-nums cursor-pointer outline-none",
|
|
71
|
+
"rounded-[var(--novi-radius-full)]",
|
|
72
|
+
"data-[hovered]:bg-[var(--novi-color-subtle)]",
|
|
73
|
+
"data-[pressed]:scale-[0.97]",
|
|
74
|
+
"motion-reduce:data-[pressed]:scale-100",
|
|
75
|
+
"data-[selected]:bg-[var(--novi-color-primary)] data-[selected]:text-[var(--novi-color-primary-fg)] data-[selected]:font-bold",
|
|
76
|
+
"data-[focus-visible]:outline-2 data-[focus-visible]:-outline-offset-2 data-[focus-visible]:outline-[var(--novi-color-ring)]",
|
|
77
|
+
"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
|
|
78
|
+
"data-[unavailable]:line-through data-[unavailable]:text-[var(--novi-color-muted)]",
|
|
79
|
+
"data-[outside-month]:invisible"
|
|
80
|
+
].join(" "),
|
|
81
|
+
description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
|
|
82
|
+
errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]"
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* DatePicker のスタイル定義。
|
|
86
|
+
*
|
|
87
|
+
* @example
|
|
88
|
+
* import { datePickerStyles } from '@novi-ui/tactile'
|
|
89
|
+
* import { tv } from 'tailwind-variants'
|
|
90
|
+
*
|
|
91
|
+
* const myPicker = tv({ extend: datePickerStyles, slots: { calendarCell: 'size-12' } })
|
|
92
|
+
*/
|
|
93
|
+
const datePickerStyles = tv({
|
|
94
|
+
slots,
|
|
95
|
+
variants: {
|
|
96
|
+
variant: {
|
|
97
|
+
solid: { inputWrapper: "bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]" },
|
|
98
|
+
outline: { inputWrapper: "bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]" },
|
|
99
|
+
soft: { inputWrapper: "bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]" },
|
|
100
|
+
ghost: { inputWrapper: "bg-transparent shadow-[var(--novi-shadow-none)]" },
|
|
101
|
+
plain: { inputWrapper: "bg-transparent shadow-[var(--novi-shadow-none)] rounded-[var(--novi-radius-none)] border-b border-[var(--novi-color-border-strong)]" }
|
|
102
|
+
},
|
|
103
|
+
size: {
|
|
104
|
+
sm: {
|
|
105
|
+
inputWrapper: "h-10",
|
|
106
|
+
dateInput: "px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]"
|
|
107
|
+
},
|
|
108
|
+
md: {
|
|
109
|
+
inputWrapper: "h-12",
|
|
110
|
+
dateInput: "px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]"
|
|
111
|
+
},
|
|
112
|
+
lg: {
|
|
113
|
+
inputWrapper: "h-14",
|
|
114
|
+
dateInput: "px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-lg)]"
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
radius: {
|
|
118
|
+
none: { inputWrapper: "rounded-[var(--novi-radius-none)]" },
|
|
119
|
+
sm: { inputWrapper: "rounded-[var(--novi-radius-sm)]" },
|
|
120
|
+
md: { inputWrapper: "rounded-[var(--novi-radius-md)]" },
|
|
121
|
+
lg: { inputWrapper: "rounded-[var(--novi-radius-lg)]" },
|
|
122
|
+
full: { inputWrapper: "rounded-[var(--novi-radius-full)]" }
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
defaultVariants: {
|
|
126
|
+
variant: "outline",
|
|
127
|
+
size: "md",
|
|
128
|
+
radius: "md"
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
//#endregion
|
|
132
|
+
export { datePickerStyles };
|
|
133
|
+
|
|
134
|
+
//# sourceMappingURL=date-picker.styles.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-picker.styles.mjs","names":[],"sources":["../../src/date-picker/date-picker.styles.ts"],"sourcesContent":["import type {\n datePickerRequiredSlots,\n datePickerSlots,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/** 月送りのボタン。指で押す面なので 44px の正方形 */\nconst monthButton = [\n 'inline-flex items-center justify-center size-11',\n 'text-[var(--novi-color-fg)] outline-none',\n 'rounded-[var(--novi-radius-full)]',\n 'bg-[var(--novi-color-subtle)]',\n 'data-[pressed]:scale-[0.97]',\n 'motion-reduce:data-[pressed]:scale-100',\n 'data-[disabled]:opacity-40',\n focusRing,\n].join(' ')\n\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center w-full overflow-hidden',\n 'bg-[var(--novi-color-surface)]',\n 'shadow-[var(--novi-shadow-sm)]',\n 'rounded-[var(--novi-radius-md)]',\n 'transition-[opacity,box-shadow]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[invalid]:ring-1 data-[invalid]:ring-[var(--novi-color-danger)]',\n focusRing,\n disabledState,\n ].join(' '),\n dateInput: 'flex items-center flex-1 min-w-0 whitespace-nowrap',\n segment: [\n // 触れる対象として 24px 四方を確保する(WCAG 2.2 target-size)\n 'inline-flex items-center justify-center min-w-6 min-h-6 px-1 tabular-nums outline-none',\n 'rounded-[var(--novi-radius-sm)]',\n 'data-[placeholder]:text-[var(--novi-color-muted)]',\n 'data-[type=literal]:px-0 data-[type=literal]:text-[var(--novi-color-muted)]',\n 'data-[focused]:bg-[var(--novi-color-primary)] data-[focused]:text-[var(--novi-color-primary-fg)]',\n 'data-[invalid]:text-[var(--novi-color-danger)]',\n ].join(' '),\n // 開くボタンは指で押す面。枠の高さいっぱいの正方形\n trigger: [\n 'shrink-0 self-stretch aspect-square inline-flex items-center justify-center',\n 'text-[var(--novi-color-muted)]',\n 'outline-none',\n 'data-[pressed]:scale-[0.97]',\n 'motion-reduce:data-[pressed]:scale-100',\n 'data-[focus-visible]:bg-[var(--novi-color-subtle)]',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n 'transition-[background-color,transform]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n ].join(' '),\n icon: 'shrink-0 inline-flex',\n popover: [\n // ここが Raster との構造差そのもの。入力欄の隣ではなく画面下端に張り付く\n '!fixed !top-auto !inset-x-0 !bottom-0 !max-w-none !w-full',\n 'bg-[var(--novi-color-surface)]',\n 'text-[var(--novi-color-fg)]',\n 'rounded-t-[var(--novi-radius-lg)]',\n 'shadow-[var(--novi-shadow-lg)]',\n 'p-[var(--novi-pad-surface-y)]',\n 'pb-[max(var(--novi-pad-surface-y),env(safe-area-inset-bottom,0px))]',\n 'pl-[max(var(--novi-pad-surface-x),env(safe-area-inset-left,0px))] pr-[max(var(--novi-pad-surface-x),env(safe-area-inset-right,0px))]',\n 'data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]',\n ].join(' '),\n // シートの中で中央に置く。升目は指で押せる 44px\n calendar: 'flex flex-col gap-[var(--novi-gap-stack)] items-center outline-none',\n calendarHeader:\n 'flex items-center justify-between gap-[var(--novi-gap-inline)] w-full max-w-[22rem]',\n calendarTitle: 'text-[length:var(--novi-text-lg)] font-medium tabular-nums',\n prevButton: monthButton,\n nextButton: monthButton,\n calendarGrid: [\n 'border-collapse',\n '[&_th]:size-11 [&_th]:font-normal [&_th]:text-[length:var(--novi-text-sm)] [&_th]:text-[var(--novi-color-muted)]',\n ].join(' '),\n calendarCell: [\n 'size-11 inline-flex items-center justify-center',\n 'text-[length:var(--novi-text-base)] tabular-nums cursor-pointer outline-none',\n 'rounded-[var(--novi-radius-full)]',\n 'data-[hovered]:bg-[var(--novi-color-subtle)]',\n 'data-[pressed]:scale-[0.97]',\n 'motion-reduce:data-[pressed]:scale-100',\n 'data-[selected]:bg-[var(--novi-color-primary)] data-[selected]:text-[var(--novi-color-primary-fg)] data-[selected]:font-bold',\n 'data-[focus-visible]:outline-2 data-[focus-visible]:-outline-offset-2 data-[focus-visible]:outline-[var(--novi-color-ring)]',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n 'data-[unavailable]:line-through data-[unavailable]:text-[var(--novi-color-muted)]',\n 'data-[outside-month]:invisible',\n ].join(' '),\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof datePickerSlots, (typeof datePickerRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n solid: { inputWrapper: 'bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]' },\n outline: {\n inputWrapper:\n 'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n },\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n ghost: { inputWrapper: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\n plain: {\n inputWrapper:\n 'bg-transparent shadow-[var(--novi-shadow-none)] rounded-[var(--novi-radius-none)] border-b border-[var(--novi-color-border-strong)]',\n },\n}\n\n/** 高さは Button / Input と揃える。40 / 48 / 56px。マスの文字は 16px 以上 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; dateInput: string }> = {\n sm: {\n inputWrapper: 'h-10',\n dateInput: 'px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]',\n },\n md: {\n inputWrapper: 'h-12',\n dateInput: 'px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n },\n lg: {\n inputWrapper: 'h-14',\n dateInput: 'px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-lg)]',\n },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * DatePicker のスタイル定義。\n *\n * @example\n * import { datePickerStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myPicker = tv({ extend: datePickerStyles, slots: { calendarCell: 'size-12' } })\n */\nexport const datePickerStyles = tv({\n slots,\n variants: { variant, size, radius },\n defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type DatePickerStyleProps = Parameters<typeof datePickerStyles>[0]\n"],"mappings":";;;;AAaA,MAAM,cAAc;CAClB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CACP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,SAAS;EAEP;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;EAEP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,UAAU;CACV,gBACE;CACF,eAAe;CACf,YAAY;CACZ,YAAY;CACZ,cAAc,CACZ,mBACA,kHACF,CAAC,CAAC,KAAK,GAAG;CACV,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;AAiDA,MAAa,mBAAmB,GAAG;CACjC;CACA,UAAU;EAAE;GAhDZ,OAAO,EAAE,cAAc,gEAAgE;GACvF,SAAS,EACP,cACE,gGACJ;GACA,MAAM,EAAE,cAAc,iEAAiE;GACvF,OAAO,EAAE,cAAc,kDAAkD;GACzE,OAAO,EACL,cACE,sIACJ;EAsCY;EAAS;GAjCrB,IAAI;IACF,cAAc;IACd,WAAW;GACb;GACA,IAAI;IACF,cAAc;IACd,WAAW;GACb;GACA,IAAI;IACF,cAAc;IACd,WAAW;GACb;EAsBqB;EAAM;GAlB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAc/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AAClE,CAAC"}
|
package/dist/index.d.mts
CHANGED
|
@@ -22,6 +22,12 @@ import "./checkbox/index.mjs";
|
|
|
22
22
|
import { COLOR_OPTIONS, ColorPicker } from "./color-picker/color-picker.mjs";
|
|
23
23
|
import { ColorPickerStyleProps, colorPickerStyles } from "./color-picker/color-picker.styles.mjs";
|
|
24
24
|
import "./color-picker/index.mjs";
|
|
25
|
+
import { ComboBox, ComboBoxItem, ComboBoxItemProps } from "./combo-box/combo-box.mjs";
|
|
26
|
+
import { ComboBoxStyleProps, comboBoxStyles } from "./combo-box/combo-box.styles.mjs";
|
|
27
|
+
import "./combo-box/index.mjs";
|
|
28
|
+
import { DatePicker } from "./date-picker/date-picker.mjs";
|
|
29
|
+
import { DatePickerStyleProps, datePickerStyles } from "./date-picker/date-picker.styles.mjs";
|
|
30
|
+
import "./date-picker/index.mjs";
|
|
25
31
|
import { Input } from "./input/input.mjs";
|
|
26
32
|
import { InputStyleProps, inputStyles } from "./input/input.styles.mjs";
|
|
27
33
|
import "./input/index.mjs";
|
|
@@ -31,6 +37,12 @@ import "./menu/index.mjs";
|
|
|
31
37
|
import { Modal, ModalBody, ModalFooter, ModalTitle } from "./modal/modal.mjs";
|
|
32
38
|
import { ModalStyleProps, modalStyles } from "./modal/modal.styles.mjs";
|
|
33
39
|
import "./modal/index.mjs";
|
|
40
|
+
import { NumberField } from "./number-field/number-field.mjs";
|
|
41
|
+
import { NumberFieldStyleProps, numberFieldStyles } from "./number-field/number-field.styles.mjs";
|
|
42
|
+
import "./number-field/index.mjs";
|
|
43
|
+
import { Pagination } from "./pagination/pagination.mjs";
|
|
44
|
+
import { PaginationStyleProps, paginationStyles } from "./pagination/pagination.styles.mjs";
|
|
45
|
+
import "./pagination/index.mjs";
|
|
34
46
|
import { Popover, PopoverContent, Tooltip } from "./popover/popover.mjs";
|
|
35
47
|
import { PopoverStyleProps, TooltipStyleProps, popoverStyles, tooltipStyles } from "./popover/popover.styles.mjs";
|
|
36
48
|
import "./popover/index.mjs";
|
|
@@ -52,6 +64,9 @@ import "./spinner/index.mjs";
|
|
|
52
64
|
import { Switch } from "./switch/switch.mjs";
|
|
53
65
|
import { SwitchStyleProps, switchStyles } from "./switch/switch.styles.mjs";
|
|
54
66
|
import "./switch/index.mjs";
|
|
67
|
+
import { Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableHeader, TableHeaderProps, TableRow, TableRowProps } from "./table/table.mjs";
|
|
68
|
+
import { TableStyleProps, tableStyles } from "./table/table.styles.mjs";
|
|
69
|
+
import "./table/index.mjs";
|
|
55
70
|
import { TabContent, TabItem, TabItems, Tabs } from "./tabs/tabs.mjs";
|
|
56
71
|
import { TabsStyleProps, tabsStyles } from "./tabs/tabs.styles.mjs";
|
|
57
72
|
import "./tabs/index.mjs";
|
|
@@ -61,4 +76,4 @@ import "./textarea/index.mjs";
|
|
|
61
76
|
import { NoviToast, NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
|
|
62
77
|
import { ToastStyleProps, toastStyles } from "./toast/toast.styles.mjs";
|
|
63
78
|
import "./toast/index.mjs";
|
|
64
|
-
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, ColorPicker, type ColorPickerStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
|
|
79
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, ColorPicker, type ColorPickerStyleProps, ComboBox, ComboBoxItem, type ComboBoxItemProps, type ComboBoxStyleProps, DatePicker, type DatePickerStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, NumberField, type NumberFieldStyleProps, Pagination, type PaginationStyleProps, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, type TableHeaderProps, TableRow, type TableRowProps, type TableStyleProps, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, comboBoxStyles, createToastQueue, datePickerStyles, initialsOf, inputStyles, menuStyles, modalStyles, numberFieldStyles, paginationStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tableStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
|
package/dist/index.mjs
CHANGED
|
@@ -15,12 +15,20 @@ import { checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.
|
|
|
15
15
|
import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
|
|
16
16
|
import { colorPickerStyles } from "./color-picker/color-picker.styles.mjs";
|
|
17
17
|
import { COLOR_OPTIONS, ColorPicker } from "./color-picker/color-picker.mjs";
|
|
18
|
+
import { comboBoxStyles } from "./combo-box/combo-box.styles.mjs";
|
|
19
|
+
import { ComboBox, ComboBoxItem } from "./combo-box/combo-box.mjs";
|
|
20
|
+
import { datePickerStyles } from "./date-picker/date-picker.styles.mjs";
|
|
21
|
+
import { DatePicker } from "./date-picker/date-picker.mjs";
|
|
18
22
|
import { inputStyles } from "./input/input.styles.mjs";
|
|
19
23
|
import { Input } from "./input/input.mjs";
|
|
20
24
|
import { menuStyles } from "./menu/menu.styles.mjs";
|
|
21
25
|
import { Menu, MenuItemComponent, MenuSection, MenuSeparator } from "./menu/menu.mjs";
|
|
22
26
|
import { modalStyles } from "./modal/modal.styles.mjs";
|
|
23
27
|
import { Modal, ModalBody, ModalFooter, ModalTitle } from "./modal/modal.mjs";
|
|
28
|
+
import { numberFieldStyles } from "./number-field/number-field.styles.mjs";
|
|
29
|
+
import { NumberField } from "./number-field/number-field.mjs";
|
|
30
|
+
import { paginationStyles } from "./pagination/pagination.styles.mjs";
|
|
31
|
+
import { Pagination } from "./pagination/pagination.mjs";
|
|
24
32
|
import { popoverStyles, tooltipStyles } from "./popover/popover.styles.mjs";
|
|
25
33
|
import { Popover, PopoverContent, Tooltip } from "./popover/popover.mjs";
|
|
26
34
|
import { progressStyles } from "./progress/progress.styles.mjs";
|
|
@@ -35,10 +43,12 @@ import { spinnerStyles } from "./spinner/spinner.styles.mjs";
|
|
|
35
43
|
import { Spinner } from "./spinner/spinner.mjs";
|
|
36
44
|
import { switchStyles } from "./switch/switch.styles.mjs";
|
|
37
45
|
import { Switch } from "./switch/switch.mjs";
|
|
46
|
+
import { tableStyles } from "./table/table.styles.mjs";
|
|
47
|
+
import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "./table/table.mjs";
|
|
38
48
|
import { tabsStyles } from "./tabs/tabs.styles.mjs";
|
|
39
49
|
import { TabContent, TabItem, TabItems, Tabs } from "./tabs/tabs.mjs";
|
|
40
50
|
import { textareaStyles } from "./textarea/textarea.styles.mjs";
|
|
41
51
|
import { TextArea } from "./textarea/textarea.mjs";
|
|
42
52
|
import { toastStyles } from "./toast/toast.styles.mjs";
|
|
43
53
|
import { NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
|
|
44
|
-
export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, ColorPicker, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
|
|
54
|
+
export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, ColorPicker, ComboBox, ComboBoxItem, DatePicker, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, NumberField, Pagination, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, comboBoxStyles, createToastQueue, datePickerStyles, initialsOf, inputStyles, menuStyles, modalStyles, numberFieldStyles, paginationStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tableStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
|
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
9
9
|
[key: string]: {
|
|
10
10
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
11
|
+
trigger?: import("tailwind-variants").ClassValue;
|
|
12
|
+
popover?: import("tailwind-variants").ClassValue;
|
|
11
13
|
list?: import("tailwind-variants").ClassValue;
|
|
12
14
|
item?: import("tailwind-variants").ClassValue;
|
|
13
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
14
|
-
trigger?: import("tailwind-variants").ClassValue;
|
|
15
15
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
16
|
-
popover?: import("tailwind-variants").ClassValue;
|
|
17
16
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
18
17
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
18
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
19
19
|
section?: import("tailwind-variants").ClassValue;
|
|
20
20
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
21
21
|
};
|
|
@@ -23,14 +23,14 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
23
23
|
} | {
|
|
24
24
|
[x: string]: {
|
|
25
25
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
26
|
+
trigger?: import("tailwind-variants").ClassValue;
|
|
27
|
+
popover?: import("tailwind-variants").ClassValue;
|
|
26
28
|
list?: import("tailwind-variants").ClassValue;
|
|
27
29
|
item?: import("tailwind-variants").ClassValue;
|
|
28
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
29
|
-
trigger?: import("tailwind-variants").ClassValue;
|
|
30
30
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
31
|
-
popover?: import("tailwind-variants").ClassValue;
|
|
32
31
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
33
32
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
33
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
34
34
|
section?: import("tailwind-variants").ClassValue;
|
|
35
35
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
36
36
|
};
|
|
@@ -49,14 +49,14 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
49
49
|
}, undefined, {
|
|
50
50
|
[key: string]: {
|
|
51
51
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
52
|
+
trigger?: import("tailwind-variants").ClassValue;
|
|
53
|
+
popover?: import("tailwind-variants").ClassValue;
|
|
52
54
|
list?: import("tailwind-variants").ClassValue;
|
|
53
55
|
item?: import("tailwind-variants").ClassValue;
|
|
54
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
55
|
-
trigger?: import("tailwind-variants").ClassValue;
|
|
56
56
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
57
|
-
popover?: import("tailwind-variants").ClassValue;
|
|
58
57
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
59
58
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
59
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
60
60
|
section?: import("tailwind-variants").ClassValue;
|
|
61
61
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
62
62
|
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { NumberFieldProps } from "@novi-ui/core";
|
|
2
|
+
//#region src/number-field/number-field.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* 数値の入力。矢印キーと増減ボタンで `step` ずつ刻む。
|
|
5
|
+
*
|
|
6
|
+
* **増減ボタンは入力欄の左右に、枠いっぱいの正方形で置く。** 片手で持った端末で
|
|
7
|
+
* 親指が届く位置に押す面がある(Raster は右端に細く、Flatlay は罫線のセル)。
|
|
8
|
+
* 空欄は `NaN` ではなく `null` で `onChange` に渡す(ADR-B2)。
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* <NumberField label="数量" defaultValue={1} minValue={0} step={1} />
|
|
12
|
+
*/
|
|
13
|
+
declare function NumberField({ variant, size, radius, label, placeholder, description, errorMessage, name, value, defaultValue, onChange, minValue, maxValue, step, formatOptions, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }: NumberFieldProps): import("react").JSX.Element;
|
|
14
|
+
//#endregion
|
|
15
|
+
export { NumberField };
|
|
16
|
+
//# sourceMappingURL=number-field.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-field.d.mts","names":[],"sources":["../../src/number-field/number-field.tsx"],"mappings":";;;;;;;;;;;;iBAyCgB,cACd,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,OACA,cACA,UACA,UACA,UACA,MACA,eACA,WACA,YACA,YACA,YACA,WACA,WACA,YACA,MACC,mCAAgB,IAAA"}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { numberFieldStyles } from "./number-field.styles.mjs";
|
|
3
|
+
import { Button, FieldError, Group, Input, Label, NumberField, Text } from "react-aria-components";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { useImeSafeKeys } from "@novi-ui/core/client";
|
|
6
|
+
//#region src/number-field/number-field.tsx
|
|
7
|
+
function MinusIcon() {
|
|
8
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
9
|
+
viewBox: "0 0 16 16",
|
|
10
|
+
width: "1em",
|
|
11
|
+
height: "1em",
|
|
12
|
+
fill: "none",
|
|
13
|
+
"aria-hidden": "true",
|
|
14
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
15
|
+
d: "M3.5 8h9",
|
|
16
|
+
stroke: "currentColor",
|
|
17
|
+
strokeWidth: "1.75",
|
|
18
|
+
strokeLinecap: "round"
|
|
19
|
+
})
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function PlusIcon() {
|
|
23
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
24
|
+
viewBox: "0 0 16 16",
|
|
25
|
+
width: "1em",
|
|
26
|
+
height: "1em",
|
|
27
|
+
fill: "none",
|
|
28
|
+
"aria-hidden": "true",
|
|
29
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
30
|
+
d: "M8 3.5v9M3.5 8h9",
|
|
31
|
+
stroke: "currentColor",
|
|
32
|
+
strokeWidth: "1.75",
|
|
33
|
+
strokeLinecap: "round"
|
|
34
|
+
})
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* 数値の入力。矢印キーと増減ボタンで `step` ずつ刻む。
|
|
39
|
+
*
|
|
40
|
+
* **増減ボタンは入力欄の左右に、枠いっぱいの正方形で置く。** 片手で持った端末で
|
|
41
|
+
* 親指が届く位置に押す面がある(Raster は右端に細く、Flatlay は罫線のセル)。
|
|
42
|
+
* 空欄は `NaN` ではなく `null` で `onChange` に渡す(ADR-B2)。
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* <NumberField label="数量" defaultValue={1} minValue={0} step={1} />
|
|
46
|
+
*/
|
|
47
|
+
function NumberField$1({ variant, size, radius, label, placeholder, description, errorMessage, name, value, defaultValue, onChange, minValue, maxValue, step, formatOptions, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }) {
|
|
48
|
+
const s = numberFieldStyles({
|
|
49
|
+
variant,
|
|
50
|
+
size,
|
|
51
|
+
radius
|
|
52
|
+
});
|
|
53
|
+
const keyProps = useImeSafeKeys(onKeyDown);
|
|
54
|
+
return /* @__PURE__ */ jsxs(NumberField, {
|
|
55
|
+
id,
|
|
56
|
+
name,
|
|
57
|
+
value: value === null ? NaN : value,
|
|
58
|
+
defaultValue,
|
|
59
|
+
onChange: (next) => onChange?.(Number.isNaN(next) ? null : next),
|
|
60
|
+
minValue,
|
|
61
|
+
maxValue,
|
|
62
|
+
step,
|
|
63
|
+
formatOptions,
|
|
64
|
+
isDisabled,
|
|
65
|
+
isReadOnly,
|
|
66
|
+
isRequired,
|
|
67
|
+
isInvalid,
|
|
68
|
+
"data-slot": "root",
|
|
69
|
+
className: s.root({ class: [className, classNames?.root] }),
|
|
70
|
+
children: [
|
|
71
|
+
label !== void 0 && /* @__PURE__ */ jsx(Label, {
|
|
72
|
+
"data-slot": "label",
|
|
73
|
+
className: s.label({ class: classNames?.label }),
|
|
74
|
+
children: label
|
|
75
|
+
}),
|
|
76
|
+
/* @__PURE__ */ jsxs(Group, {
|
|
77
|
+
"data-slot": "inputWrapper",
|
|
78
|
+
className: s.inputWrapper({ class: classNames?.inputWrapper }),
|
|
79
|
+
children: [
|
|
80
|
+
/* @__PURE__ */ jsx(Button, {
|
|
81
|
+
slot: "decrement",
|
|
82
|
+
"data-slot": "decrement",
|
|
83
|
+
className: s.decrement({ class: classNames?.decrement }),
|
|
84
|
+
children: /* @__PURE__ */ jsx(MinusIcon, {})
|
|
85
|
+
}),
|
|
86
|
+
/* @__PURE__ */ jsx(Input, {
|
|
87
|
+
"data-slot": "input",
|
|
88
|
+
placeholder,
|
|
89
|
+
className: s.input({ class: classNames?.input }),
|
|
90
|
+
...keyProps
|
|
91
|
+
}),
|
|
92
|
+
/* @__PURE__ */ jsx(Button, {
|
|
93
|
+
slot: "increment",
|
|
94
|
+
"data-slot": "increment",
|
|
95
|
+
className: s.increment({ class: classNames?.increment }),
|
|
96
|
+
children: /* @__PURE__ */ jsx(PlusIcon, {})
|
|
97
|
+
})
|
|
98
|
+
]
|
|
99
|
+
}),
|
|
100
|
+
description !== void 0 && /* @__PURE__ */ jsx(Text, {
|
|
101
|
+
slot: "description",
|
|
102
|
+
"data-slot": "description",
|
|
103
|
+
className: s.description({ class: classNames?.description }),
|
|
104
|
+
children: description
|
|
105
|
+
}),
|
|
106
|
+
/* @__PURE__ */ jsx(FieldError, {
|
|
107
|
+
"data-slot": "errorMessage",
|
|
108
|
+
className: s.errorMessage({ class: classNames?.errorMessage }),
|
|
109
|
+
children: errorMessage
|
|
110
|
+
})
|
|
111
|
+
]
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
//#endregion
|
|
115
|
+
export { NumberField$1 as NumberField };
|
|
116
|
+
|
|
117
|
+
//# sourceMappingURL=number-field.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-field.mjs","names":["NumberField","RACNumberField"],"sources":["../../src/number-field/number-field.tsx"],"sourcesContent":["'use client'\n\nimport type { NumberFieldProps } from '@novi-ui/core'\nimport { useImeSafeKeys } from '@novi-ui/core/client'\nimport {\n Button,\n FieldError,\n Group,\n Input,\n Label,\n NumberField as RACNumberField,\n Text,\n} from 'react-aria-components'\nimport { numberFieldStyles } from './number-field.styles'\n\nfunction MinusIcon() {\n return (\n <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3.5 8h9\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\nfunction PlusIcon() {\n return (\n <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M8 3.5v9M3.5 8h9\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\n/**\n * 数値の入力。矢印キーと増減ボタンで `step` ずつ刻む。\n *\n * **増減ボタンは入力欄の左右に、枠いっぱいの正方形で置く。** 片手で持った端末で\n * 親指が届く位置に押す面がある(Raster は右端に細く、Flatlay は罫線のセル)。\n * 空欄は `NaN` ではなく `null` で `onChange` に渡す(ADR-B2)。\n *\n * @example\n * <NumberField label=\"数量\" defaultValue={1} minValue={0} step={1} />\n */\nexport function NumberField({\n variant,\n size,\n radius,\n label,\n placeholder,\n description,\n errorMessage,\n name,\n value,\n defaultValue,\n onChange,\n minValue,\n maxValue,\n step,\n formatOptions,\n onKeyDown,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n className,\n classNames,\n id,\n}: NumberFieldProps) {\n const s = numberFieldStyles({ variant, size, radius })\n const keyProps = useImeSafeKeys<HTMLInputElement>(onKeyDown)\n\n return (\n <RACNumberField\n id={id}\n name={name}\n // RAC は空欄を NaN で表す。外には出さない(ADR-B2)\n value={value === null ? Number.NaN : value}\n defaultValue={defaultValue}\n onChange={(next) => onChange?.(Number.isNaN(next) ? null : next)}\n minValue={minValue}\n maxValue={maxValue}\n step={step}\n formatOptions={formatOptions}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isInvalid={isInvalid}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {label !== undefined && (\n <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n {label}\n </Label>\n )}\n\n <Group\n data-slot=\"inputWrapper\"\n className={s.inputWrapper({ class: classNames?.inputWrapper })}\n >\n <Button\n slot=\"decrement\"\n data-slot=\"decrement\"\n className={s.decrement({ class: classNames?.decrement })}\n >\n <MinusIcon />\n </Button>\n <Input\n data-slot=\"input\"\n placeholder={placeholder}\n className={s.input({ class: classNames?.input })}\n {...keyProps}\n />\n <Button\n slot=\"increment\"\n data-slot=\"increment\"\n className={s.increment({ class: classNames?.increment })}\n >\n <PlusIcon />\n </Button>\n </Group>\n\n {description !== undefined && (\n <Text\n slot=\"description\"\n data-slot=\"description\"\n className={s.description({ class: classNames?.description })}\n >\n {description}\n </Text>\n )}\n\n <FieldError\n data-slot=\"errorMessage\"\n className={s.errorMessage({ class: classNames?.errorMessage })}\n >\n {errorMessage}\n </FieldError>\n </RACNumberField>\n )\n}\n"],"mappings":";;;;;;AAeA,SAAS,YAAY;CACnB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAM,QAAO;EAAM,MAAK;EAAO,eAAY;EACxE,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAW,QAAO;GAAe,aAAY;GAAO,eAAc;EAAS,CAAA;CAChF,CAAA;AAET;AAEA,SAAS,WAAW;CAClB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAM,QAAO;EAAM,MAAK;EAAO,eAAY;EACxE,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAmB,QAAO;GAAe,aAAY;GAAO,eAAc;EAAS,CAAA;CACxF,CAAA;AAET;;;;;;;;;;;AAYA,SAAgBA,cAAY,EAC1B,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,OACA,cACA,UACA,UACA,UACA,MACA,eACA,WACA,YACA,YACA,YACA,WACA,WACA,YACA,MACmB;CACnB,MAAM,IAAI,kBAAkB;EAAE;EAAS;EAAM;CAAO,CAAC;CACrD,MAAM,WAAW,eAAiC,SAAS;CAE3D,OACE,qBAACC,aAAD;EACM;EACE;EAEN,OAAO,UAAU,OAAO,MAAa;EACvB;EACd,WAAW,SAAS,WAAW,OAAO,MAAM,IAAI,IAAI,OAAO,IAAI;EACrD;EACA;EACJ;EACS;EACH;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAhB5D,UAAA;GAkBG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,qBAAC,OAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAF/D,UAAA;KAIE,oBAAC,QAAD;MACE,MAAK;MACL,aAAU;MACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;MAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;KACN,CAAA;KACR,oBAAC,OAAD;MACE,aAAU;MACG;MACb,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;MAC/C,GAAI;KACL,CAAA;KACD,oBAAC,QAAD;MACE,MAAK;MACL,aAAU;MACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;MAEvD,UAAA,oBAAC,UAAD,CAAW,CAAA;KACL,CAAA;IACH;;GAEN,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAGR,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EACE;;AAEpB"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { VariantMap } from "@novi-ui/core";
|
|
2
|
+
//#region src/number-field/number-field.styles.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* NumberField のスタイル定義。
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* import { numberFieldStyles } from '@novi-ui/tactile'
|
|
8
|
+
* import { tv } from 'tailwind-variants'
|
|
9
|
+
*
|
|
10
|
+
* const myField = tv({ extend: numberFieldStyles, slots: { input: 'text-left' } })
|
|
11
|
+
*/
|
|
12
|
+
declare const numberFieldStyles: import("tailwind-variants").TVReturnType<{
|
|
13
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
14
|
+
inputWrapper: string;
|
|
15
|
+
}>;
|
|
16
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
17
|
+
inputWrapper: string;
|
|
18
|
+
input: string;
|
|
19
|
+
}>;
|
|
20
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
21
|
+
inputWrapper: string;
|
|
22
|
+
}>;
|
|
23
|
+
}, {
|
|
24
|
+
root: string;
|
|
25
|
+
label: string;
|
|
26
|
+
inputWrapper: string;
|
|
27
|
+
input: string;
|
|
28
|
+
decrement: string;
|
|
29
|
+
increment: string;
|
|
30
|
+
description: string;
|
|
31
|
+
errorMessage: string;
|
|
32
|
+
}, undefined, {
|
|
33
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
34
|
+
inputWrapper: string;
|
|
35
|
+
}>;
|
|
36
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
37
|
+
inputWrapper: string;
|
|
38
|
+
input: string;
|
|
39
|
+
}>;
|
|
40
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
41
|
+
inputWrapper: string;
|
|
42
|
+
}>;
|
|
43
|
+
}, {
|
|
44
|
+
root: string;
|
|
45
|
+
label: string;
|
|
46
|
+
inputWrapper: string;
|
|
47
|
+
input: string;
|
|
48
|
+
decrement: string;
|
|
49
|
+
increment: string;
|
|
50
|
+
description: string;
|
|
51
|
+
errorMessage: string;
|
|
52
|
+
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
53
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
54
|
+
inputWrapper: string;
|
|
55
|
+
}>;
|
|
56
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
57
|
+
inputWrapper: string;
|
|
58
|
+
input: string;
|
|
59
|
+
}>;
|
|
60
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
61
|
+
inputWrapper: string;
|
|
62
|
+
}>;
|
|
63
|
+
}, {
|
|
64
|
+
root: string;
|
|
65
|
+
label: string;
|
|
66
|
+
inputWrapper: string;
|
|
67
|
+
input: string;
|
|
68
|
+
decrement: string;
|
|
69
|
+
increment: string;
|
|
70
|
+
description: string;
|
|
71
|
+
errorMessage: string;
|
|
72
|
+
}>>;
|
|
73
|
+
type NumberFieldStyleProps = Parameters<typeof numberFieldStyles>[0];
|
|
74
|
+
//#endregion
|
|
75
|
+
export { NumberFieldStyleProps, numberFieldStyles };
|
|
76
|
+
//# sourceMappingURL=number-field.styles.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-field.styles.d.mts","names":[],"sources":["../../src/number-field/number-field.styles.ts"],"mappings":";;;;;;;;;;;cAyGa,+CAAiB;;IA/CyB;;;IAeN;IAAe;;;IAeX;;;;;;;;;;;;;IA9BE;;;IAeN;IAAe;;;IAeX;;;;;;;;;;;;;IA9BE;;;IAeN;IAAe;;;IAeX;;;;;;;;;;;;KAuBzC,wBAAwB,kBAAkB"}
|