@novi-ui/flatlay 0.3.0 → 0.4.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/dist/combo-box/combo-box.d.mts +37 -0
- package/dist/combo-box/combo-box.d.mts.map +1 -0
- package/dist/combo-box/combo-box.mjs +129 -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 +113 -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 +140 -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 +131 -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 +93 -0
- package/dist/number-field/number-field.mjs.map +1 -0
- package/dist/number-field/number-field.styles.d.mts +88 -0
- package/dist/number-field/number-field.styles.d.mts.map +1 -0
- package/dist/number-field/number-field.styles.mjs +102 -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 +13 -0
- package/dist/pagination/pagination.d.mts.map +1 -0
- package/dist/pagination/pagination.mjs +98 -0
- package/dist/pagination/pagination.mjs.map +1 -0
- package/dist/pagination/pagination.styles.d.mts +67 -0
- package/dist/pagination/pagination.styles.d.mts.map +1 -0
- package/dist/pagination/pagination.styles.mjs +83 -0
- package/dist/pagination/pagination.styles.mjs.map +1 -0
- 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 +167 -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 +84 -0
- package/dist/table/table.styles.mjs.map +1 -0
- package/package.json +5 -4
|
@@ -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/flatlay'
|
|
8
|
+
* import { tv } from 'tailwind-variants'
|
|
9
|
+
*
|
|
10
|
+
* const myPicker = tv({ extend: datePickerStyles, slots: { calendarCell: 'w-10' } })
|
|
11
|
+
*/
|
|
12
|
+
declare const datePickerStyles: import("tailwind-variants").TVReturnType<{
|
|
13
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
14
|
+
inputWrapper: string;
|
|
15
|
+
dateInput: string;
|
|
16
|
+
}>;
|
|
17
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
18
|
+
inputWrapper: string;
|
|
19
|
+
}>;
|
|
20
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
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
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
43
|
+
inputWrapper: string;
|
|
44
|
+
dateInput: string;
|
|
45
|
+
}>;
|
|
46
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
47
|
+
inputWrapper: string;
|
|
48
|
+
}>;
|
|
49
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
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
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
72
|
+
inputWrapper: string;
|
|
73
|
+
dateInput: string;
|
|
74
|
+
}>;
|
|
75
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
76
|
+
inputWrapper: string;
|
|
77
|
+
}>;
|
|
78
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
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":";;;;;;;;;;;cA8Ia,8CAAgB;;IAhCoB;IAAmB;;;IAef;;;IA5BE;;;;;;;;;;;;;;;;;;;;;;IAaN;IAAmB;;;IAef;;;IA5BE;;;;;;;;;;;;;;;;;;;;;;IAaN;IAAmB;;;IAef;;;IA5BE;;;;;;;;;;;;;;;;;;;;;KAoD3C,uBAAuB,kBAAkB"}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { disabledState, focusRing } from "../styles/focus-ring.mjs";
|
|
2
|
+
import { heading, mono, monoNumeric } from "../styles/mono.mjs";
|
|
3
|
+
import { tv } from "tailwind-variants";
|
|
4
|
+
//#region src/date-picker/date-picker.styles.ts
|
|
5
|
+
/** 月送りは活字の `‹` `›`。押した瞬間だけ反転する */
|
|
6
|
+
const monthButton = [
|
|
7
|
+
"inline-flex items-center justify-center h-7 px-[var(--novi-pad-control-x-sm)]",
|
|
8
|
+
`text-[var(--novi-color-muted)] outline-none ${mono}`,
|
|
9
|
+
"hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]",
|
|
10
|
+
"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
|
|
11
|
+
"data-[disabled]:opacity-40",
|
|
12
|
+
focusRing
|
|
13
|
+
].join(" ");
|
|
14
|
+
const slots = {
|
|
15
|
+
root: ["flex flex-col gap-1.5", "[&>[data-novi-inflow]:empty]:hidden"].join(" "),
|
|
16
|
+
label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,
|
|
17
|
+
inputWrapper: [
|
|
18
|
+
"flex items-center w-full overflow-hidden",
|
|
19
|
+
"text-[var(--novi-color-fg)]",
|
|
20
|
+
"border",
|
|
21
|
+
"rounded-[var(--novi-radius-sm)]",
|
|
22
|
+
"data-[invalid]:border-[var(--novi-color-danger)]",
|
|
23
|
+
"transition-[border-color,opacity]",
|
|
24
|
+
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
25
|
+
focusRing,
|
|
26
|
+
disabledState
|
|
27
|
+
].join(" "),
|
|
28
|
+
dateInput: `flex items-center flex-1 min-w-0 whitespace-nowrap ${monoNumeric}`,
|
|
29
|
+
segment: [
|
|
30
|
+
"inline-flex items-center justify-center min-w-6 min-h-6 px-0.5 outline-none",
|
|
31
|
+
"data-[placeholder]:text-[var(--novi-color-muted)]",
|
|
32
|
+
"data-[type=literal]:px-0 data-[type=literal]:text-[var(--novi-color-muted)]",
|
|
33
|
+
"data-[focused]:bg-[var(--novi-color-fg)] data-[focused]:text-[var(--novi-color-bg)]",
|
|
34
|
+
"data-[invalid]:text-[var(--novi-color-danger)]"
|
|
35
|
+
].join(" "),
|
|
36
|
+
trigger: [
|
|
37
|
+
"shrink-0 self-stretch inline-flex items-center justify-center",
|
|
38
|
+
"px-[var(--novi-pad-control-x-sm)]",
|
|
39
|
+
`text-[var(--novi-color-muted)] ${mono}`,
|
|
40
|
+
"border-l",
|
|
41
|
+
"outline-none",
|
|
42
|
+
"hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]",
|
|
43
|
+
"data-[focus-visible]:text-[var(--novi-color-fg)]",
|
|
44
|
+
"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
|
|
45
|
+
"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
|
|
46
|
+
"transition-[background-color,color]",
|
|
47
|
+
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
|
|
48
|
+
].join(" "),
|
|
49
|
+
icon: "shrink-0 leading-none",
|
|
50
|
+
popover: [
|
|
51
|
+
"border border-[var(--novi-color-border-strong)]",
|
|
52
|
+
"bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]",
|
|
53
|
+
"rounded-[var(--novi-radius-sm)]",
|
|
54
|
+
"p-[var(--novi-pad-surface-y)]",
|
|
55
|
+
"self-start"
|
|
56
|
+
].join(" "),
|
|
57
|
+
calendar: "flex flex-col gap-[var(--novi-gap-inline)] outline-none",
|
|
58
|
+
calendarHeader: "flex items-center justify-between gap-[var(--novi-gap-inline)]",
|
|
59
|
+
calendarTitle: `text-[length:var(--novi-text-sm)] ${heading}`,
|
|
60
|
+
prevButton: monthButton,
|
|
61
|
+
nextButton: monthButton,
|
|
62
|
+
calendarGrid: [
|
|
63
|
+
"border-collapse border border-[var(--novi-color-border)]",
|
|
64
|
+
`[&_th]:h-7 [&_th]:w-9 [&_th]:font-normal [&_th]:text-[length:var(--novi-text-xs)] [&_th]:text-[var(--novi-color-muted)] [&_th]:border [&_th]:border-[var(--novi-color-border)] [&_th]:${mono.replace(/ /g, "_")}`,
|
|
65
|
+
"[&_td]:border [&_td]:border-[var(--novi-color-border)] [&_td]:p-0"
|
|
66
|
+
].join(" "),
|
|
67
|
+
calendarCell: [
|
|
68
|
+
"h-7 w-9 inline-flex items-center justify-center",
|
|
69
|
+
`text-[length:var(--novi-text-sm)] cursor-pointer outline-none ${monoNumeric}`,
|
|
70
|
+
"data-[hovered]:bg-[var(--novi-color-subtle)]",
|
|
71
|
+
"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
|
|
72
|
+
"data-[selected]:bg-[var(--novi-color-fg)] data-[selected]:text-[var(--novi-color-bg)]",
|
|
73
|
+
"data-[focus-visible]:outline-2 data-[focus-visible]:-outline-offset-2 data-[focus-visible]:outline-[var(--novi-color-ring)]",
|
|
74
|
+
"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
|
|
75
|
+
"data-[unavailable]:line-through data-[unavailable]:text-[var(--novi-color-muted)]",
|
|
76
|
+
"data-[outside-month]:invisible"
|
|
77
|
+
].join(" "),
|
|
78
|
+
description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,
|
|
79
|
+
errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`
|
|
80
|
+
};
|
|
81
|
+
/**
|
|
82
|
+
* DatePicker のスタイル定義。
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* import { datePickerStyles } from '@novi-ui/flatlay'
|
|
86
|
+
* import { tv } from 'tailwind-variants'
|
|
87
|
+
*
|
|
88
|
+
* const myPicker = tv({ extend: datePickerStyles, slots: { calendarCell: 'w-10' } })
|
|
89
|
+
*/
|
|
90
|
+
const datePickerStyles = tv({
|
|
91
|
+
slots,
|
|
92
|
+
variants: {
|
|
93
|
+
size: {
|
|
94
|
+
sm: {
|
|
95
|
+
inputWrapper: "h-7",
|
|
96
|
+
dateInput: "px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]"
|
|
97
|
+
},
|
|
98
|
+
md: {
|
|
99
|
+
inputWrapper: "h-8",
|
|
100
|
+
dateInput: "px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]"
|
|
101
|
+
},
|
|
102
|
+
lg: {
|
|
103
|
+
inputWrapper: "h-10",
|
|
104
|
+
dateInput: "px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]"
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
radius: {
|
|
108
|
+
none: { inputWrapper: "rounded-[var(--novi-radius-none)]" },
|
|
109
|
+
sm: { inputWrapper: "rounded-[var(--novi-radius-sm)]" },
|
|
110
|
+
md: { inputWrapper: "rounded-[var(--novi-radius-md)]" },
|
|
111
|
+
lg: { inputWrapper: "rounded-[var(--novi-radius-lg)]" },
|
|
112
|
+
full: { inputWrapper: "rounded-[var(--novi-radius-full)]" }
|
|
113
|
+
},
|
|
114
|
+
variant: {
|
|
115
|
+
solid: { inputWrapper: "bg-[var(--novi-color-surface)] border-[var(--novi-color-border-strong)]" },
|
|
116
|
+
outline: { inputWrapper: "bg-transparent border-[var(--novi-color-border-strong)]" },
|
|
117
|
+
soft: { inputWrapper: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]" },
|
|
118
|
+
ghost: { inputWrapper: "bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]" },
|
|
119
|
+
plain: { inputWrapper: "bg-transparent border-transparent" }
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
defaultVariants: {
|
|
123
|
+
size: "md",
|
|
124
|
+
radius: "sm",
|
|
125
|
+
variant: "outline"
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
//#endregion
|
|
129
|
+
export { datePickerStyles };
|
|
130
|
+
|
|
131
|
+
//# 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'\nimport { heading, mono, monoNumeric } from '../styles/mono'\n\n/** 月送りは活字の `‹` `›`。押した瞬間だけ反転する */\nconst monthButton = [\n 'inline-flex items-center justify-center h-7 px-[var(--novi-pad-control-x-sm)]',\n `text-[var(--novi-color-muted)] outline-none ${mono}`,\n 'hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]',\n 'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n 'data-[disabled]:opacity-40',\n focusRing,\n].join(' ')\n\nconst slots = {\n root: ['flex flex-col gap-1.5', '[&>[data-novi-inflow]:empty]:hidden'].join(' '),\n label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n inputWrapper: [\n 'flex items-center w-full overflow-hidden',\n 'text-[var(--novi-color-fg)]',\n 'border',\n 'rounded-[var(--novi-radius-sm)]',\n 'data-[invalid]:border-[var(--novi-color-danger)]',\n 'transition-[border-color,opacity]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n disabledState,\n ].join(' '),\n // 帳票の日付欄。等幅で「2026/09/05」の桁が揃う\n dateInput: `flex items-center flex-1 min-w-0 whitespace-nowrap ${monoNumeric}`,\n segment: [\n // 触れる対象として 24px 四方を確保する（WCAG 2.2 target-size）\n 'inline-flex items-center justify-center min-w-6 min-h-6 px-0.5 outline-none',\n 'data-[placeholder]:text-[var(--novi-color-muted)]',\n 'data-[type=literal]:px-0 data-[type=literal]:text-[var(--novi-color-muted)]',\n // フォーカスは反転（スタンプ）\n 'data-[focused]:bg-[var(--novi-color-fg)] data-[focused]:text-[var(--novi-color-bg)]',\n 'data-[invalid]:text-[var(--novi-color-danger)]',\n ].join(' '),\n // 開くボタンは罫線で区切ったセル\n trigger: [\n 'shrink-0 self-stretch inline-flex items-center justify-center',\n 'px-[var(--novi-pad-control-x-sm)]',\n `text-[var(--novi-color-muted)] ${mono}`,\n 'border-l',\n 'outline-none',\n 'hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]',\n 'data-[focus-visible]:text-[var(--novi-color-fg)]',\n 'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n 'transition-[background-color,color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n ].join(' '),\n icon: 'shrink-0 leading-none',\n // 浮かないので、面の存在は罫線が引き受ける。押し下げて後続が下がる\n popover: [\n 'border border-[var(--novi-color-border-strong)]',\n 'bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'p-[var(--novi-pad-surface-y)]',\n 'self-start',\n ].join(' '),\n calendar: 'flex flex-col gap-[var(--novi-gap-inline)] outline-none',\n calendarHeader: 'flex items-center justify-between gap-[var(--novi-gap-inline)]',\n calendarTitle: `text-[length:var(--novi-text-sm)] ${heading}`,\n prevButton: monthButton,\n nextButton: monthButton,\n // 升目は縦横の罫線。曜日の見出しは等幅\n calendarGrid: [\n 'border-collapse border border-[var(--novi-color-border)]',\n `[&_th]:h-7 [&_th]:w-9 [&_th]:font-normal [&_th]:text-[length:var(--novi-text-xs)] [&_th]:text-[var(--novi-color-muted)] [&_th]:border [&_th]:border-[var(--novi-color-border)] [&_th]:${mono.replace(/ /g, '_')}`,\n '[&_td]:border [&_td]:border-[var(--novi-color-border)] [&_td]:p-0',\n ].join(' '),\n calendarCell: [\n 'h-7 w-9 inline-flex items-center justify-center',\n `text-[length:var(--novi-text-sm)] cursor-pointer outline-none ${monoNumeric}`,\n 'data-[hovered]:bg-[var(--novi-color-subtle)]',\n 'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n 'data-[selected]:bg-[var(--novi-color-fg)] data-[selected]:text-[var(--novi-color-bg)]',\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)] ${mono}`,\n errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`,\n} satisfies SlotMap<typeof datePickerSlots, (typeof datePickerRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n solid: {\n inputWrapper: 'bg-[var(--novi-color-surface)] border-[var(--novi-color-border-strong)]',\n },\n outline: { inputWrapper: 'bg-transparent border-[var(--novi-color-border-strong)]' },\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n ghost: {\n inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n },\n plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n/** 高さは行の階級に載せる。28 / 32 / 40px */\nconst size: VariantMap<NoviSize, { inputWrapper: string; dateInput: string }> = {\n sm: {\n inputWrapper: 'h-7',\n dateInput: 'px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n },\n md: {\n inputWrapper: 'h-8',\n dateInput: 'px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n },\n lg: {\n inputWrapper: 'h-10',\n dateInput: 'px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]',\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/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myPicker = tv({ extend: datePickerStyles, slots: { calendarCell: 'w-10' } })\n */\nexport const datePickerStyles = tv({\n slots,\n // `variant` は最後に宣言する。先に書くと size のクラスに負ける\n variants: { size, radius, variant },\n defaultVariants: { size: 'md', radius: 'sm', variant: 'outline' },\n})\n\nexport type DatePickerStyleProps = Parameters<typeof datePickerStyles>[0]\n"],"mappings":";;;;;AAcA,MAAM,cAAc;CAClB;CACA,+CAA+C;CAC/C;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,QAAQ;CACZ,MAAM,CAAC,yBAAyB,qCAAqC,CAAC,CAAC,KAAK,GAAG;CAC/E,OAAO,iEAAiE;CACxE,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW,sDAAsD;CACjE,SAAS;EAEP;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,SAAS;EACP;EACA;EACA,kCAAkC;EAClC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CAEN,SAAS;EACP;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,UAAU;CACV,gBAAgB;CAChB,eAAe,qCAAqC;CACpD,YAAY;CACZ,YAAY;CAEZ,cAAc;EACZ;EACA,yLAAyL,KAAK,QAAQ,MAAM,GAAG;EAC/M;CACF,CAAC,CAAC,KAAK,GAAG;CACV,cAAc;EACZ;EACA,iEAAiE;EACjE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa,oEAAoE;CACjF,cAAc,qEAAqE;AACrF;;;;;;;;;;AA+CA,MAAa,mBAAmB,GAAG;CACjC;CAEA,UAAU;EAAE;GAlCZ,IAAI;IACF,cAAc;IACd,WAAW;GACb;GACA,IAAI;IACF,cAAc;IACd,WAAW;GACb;GACA,IAAI;IACF,cAAc;IACd,WAAW;GACb;EAuBY;EAAM;GAnBlB,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAexC;EAAQ;GA/C1B,OAAO,EACL,cAAc,0EAChB;GACA,SAAS,EAAE,cAAc,0DAA0D;GACnF,MAAM,EAAE,cAAc,kEAAkE;GACxF,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,oCAAoC;EAuCjC;CAAQ;CAClC,iBAAiB;EAAE,MAAM;EAAM,QAAQ;EAAM,SAAS;CAAU;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 } from "./popover/popover.mjs";
|
|
35
47
|
import { PopoverStyleProps, popoverStyles } 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";
|
|
@@ -64,4 +79,4 @@ import "./toast/index.mjs";
|
|
|
64
79
|
import { Tooltip } from "./tooltip/tooltip.mjs";
|
|
65
80
|
import { TooltipStyleProps, tooltipStyles } from "./tooltip/tooltip.styles.mjs";
|
|
66
81
|
import "./tooltip/index.mjs";
|
|
67
|
-
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 };
|
|
82
|
+
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 } from "./popover/popover.styles.mjs";
|
|
25
33
|
import { Popover, PopoverContent } from "./popover/popover.mjs";
|
|
26
34
|
import { progressStyles } from "./progress/progress.styles.mjs";
|
|
@@ -35,6 +43,8 @@ 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";
|
|
@@ -43,4 +53,4 @@ import { toastStyles } from "./toast/toast.styles.mjs";
|
|
|
43
53
|
import { NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
|
|
44
54
|
import { tooltipStyles } from "./tooltip/tooltip.styles.mjs";
|
|
45
55
|
import { Tooltip } from "./tooltip/tooltip.mjs";
|
|
46
|
-
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 };
|
|
56
|
+
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 };
|
|
@@ -11,14 +11,14 @@
|
|
|
11
11
|
declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
12
12
|
[key: string]: {
|
|
13
13
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
14
|
-
item?: import("tailwind-variants").ClassValue;
|
|
15
|
-
trigger?: import("tailwind-variants").ClassValue;
|
|
16
14
|
list?: import("tailwind-variants").ClassValue;
|
|
17
|
-
|
|
15
|
+
item?: import("tailwind-variants").ClassValue;
|
|
18
16
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
17
|
+
trigger?: import("tailwind-variants").ClassValue;
|
|
19
18
|
popover?: import("tailwind-variants").ClassValue;
|
|
20
19
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
21
20
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
21
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
22
22
|
section?: import("tailwind-variants").ClassValue;
|
|
23
23
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
24
24
|
};
|
|
@@ -26,14 +26,14 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
} | {
|
|
27
27
|
[x: string]: {
|
|
28
28
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
29
|
-
item?: import("tailwind-variants").ClassValue;
|
|
30
|
-
trigger?: import("tailwind-variants").ClassValue;
|
|
31
29
|
list?: import("tailwind-variants").ClassValue;
|
|
32
|
-
|
|
30
|
+
item?: import("tailwind-variants").ClassValue;
|
|
33
31
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
32
|
+
trigger?: import("tailwind-variants").ClassValue;
|
|
34
33
|
popover?: import("tailwind-variants").ClassValue;
|
|
35
34
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
36
35
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
36
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
37
37
|
section?: import("tailwind-variants").ClassValue;
|
|
38
38
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
39
39
|
};
|
|
@@ -59,14 +59,14 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
59
59
|
}, undefined, {
|
|
60
60
|
[key: string]: {
|
|
61
61
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
62
|
-
item?: import("tailwind-variants").ClassValue;
|
|
63
|
-
trigger?: import("tailwind-variants").ClassValue;
|
|
64
62
|
list?: import("tailwind-variants").ClassValue;
|
|
65
|
-
|
|
63
|
+
item?: import("tailwind-variants").ClassValue;
|
|
66
64
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
65
|
+
trigger?: import("tailwind-variants").ClassValue;
|
|
67
66
|
popover?: import("tailwind-variants").ClassValue;
|
|
68
67
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
69
68
|
itemShortcut?: import("tailwind-variants").ClassValue;
|
|
69
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
70
70
|
section?: import("tailwind-variants").ClassValue;
|
|
71
71
|
sectionLabel?: import("tailwind-variants").ClassValue;
|
|
72
72
|
};
|
|
@@ -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 は細い線、Tactile は左右の面）。
|
|
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":";;;;;;;;;;;;iBAyBgB,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,93 @@
|
|
|
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
|
+
/**
|
|
8
|
+
* 数値の入力。矢印キーと増減ボタンで `step` ずつ刻む。
|
|
9
|
+
*
|
|
10
|
+
* 数値は右詰めの等幅で、**増減は右端の罫線セルに `−` `+` の活字**で置く。
|
|
11
|
+
* 帳票の金額欄と同じ読み方になる（Raster は細い線、Tactile は左右の面）。
|
|
12
|
+
* 空欄は `NaN` ではなく `null` で `onChange` に渡す（ADR-B2）。
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* <NumberField label="数量" defaultValue={1} minValue={0} step={1} />
|
|
16
|
+
*/
|
|
17
|
+
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 }) {
|
|
18
|
+
const s = numberFieldStyles({
|
|
19
|
+
variant,
|
|
20
|
+
size,
|
|
21
|
+
radius
|
|
22
|
+
});
|
|
23
|
+
const keyProps = useImeSafeKeys(onKeyDown);
|
|
24
|
+
return /* @__PURE__ */ jsxs(NumberField, {
|
|
25
|
+
id,
|
|
26
|
+
name,
|
|
27
|
+
value: value === null ? NaN : value,
|
|
28
|
+
defaultValue,
|
|
29
|
+
onChange: (next) => onChange?.(Number.isNaN(next) ? null : next),
|
|
30
|
+
minValue,
|
|
31
|
+
maxValue,
|
|
32
|
+
step,
|
|
33
|
+
formatOptions,
|
|
34
|
+
isDisabled,
|
|
35
|
+
isReadOnly,
|
|
36
|
+
isRequired,
|
|
37
|
+
isInvalid,
|
|
38
|
+
"data-slot": "root",
|
|
39
|
+
className: s.root({ class: [className, classNames?.root] }),
|
|
40
|
+
children: [
|
|
41
|
+
label !== void 0 && /* @__PURE__ */ jsx(Label, {
|
|
42
|
+
"data-slot": "label",
|
|
43
|
+
className: s.label({ class: classNames?.label }),
|
|
44
|
+
children: label
|
|
45
|
+
}),
|
|
46
|
+
/* @__PURE__ */ jsxs(Group, {
|
|
47
|
+
"data-slot": "inputWrapper",
|
|
48
|
+
className: s.inputWrapper({ class: classNames?.inputWrapper }),
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsx(Input, {
|
|
51
|
+
"data-slot": "input",
|
|
52
|
+
placeholder,
|
|
53
|
+
className: s.input({ class: classNames?.input }),
|
|
54
|
+
...keyProps
|
|
55
|
+
}),
|
|
56
|
+
/* @__PURE__ */ jsx(Button, {
|
|
57
|
+
slot: "decrement",
|
|
58
|
+
"data-slot": "decrement",
|
|
59
|
+
className: s.decrement({ class: classNames?.decrement }),
|
|
60
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
61
|
+
"aria-hidden": "true",
|
|
62
|
+
children: "−"
|
|
63
|
+
})
|
|
64
|
+
}),
|
|
65
|
+
/* @__PURE__ */ jsx(Button, {
|
|
66
|
+
slot: "increment",
|
|
67
|
+
"data-slot": "increment",
|
|
68
|
+
className: s.increment({ class: classNames?.increment }),
|
|
69
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
70
|
+
"aria-hidden": "true",
|
|
71
|
+
children: "+"
|
|
72
|
+
})
|
|
73
|
+
})
|
|
74
|
+
]
|
|
75
|
+
}),
|
|
76
|
+
description !== void 0 && /* @__PURE__ */ jsx(Text, {
|
|
77
|
+
slot: "description",
|
|
78
|
+
"data-slot": "description",
|
|
79
|
+
className: s.description({ class: classNames?.description }),
|
|
80
|
+
children: description
|
|
81
|
+
}),
|
|
82
|
+
/* @__PURE__ */ jsx(FieldError, {
|
|
83
|
+
"data-slot": "errorMessage",
|
|
84
|
+
className: s.errorMessage({ class: classNames?.errorMessage }),
|
|
85
|
+
children: errorMessage
|
|
86
|
+
})
|
|
87
|
+
]
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
//#endregion
|
|
91
|
+
export { NumberField$1 as NumberField };
|
|
92
|
+
|
|
93
|
+
//# 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\n/**\n * 数値の入力。矢印キーと増減ボタンで `step` ずつ刻む。\n *\n * 数値は右詰めの等幅で、**増減は右端の罫線セルに `−` `+` の活字**で置く。\n * 帳票の金額欄と同じ読み方になる（Raster は細い線、Tactile は左右の面）。\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 <Input\n data-slot=\"input\"\n placeholder={placeholder}\n className={s.input({ class: classNames?.input })}\n {...keyProps}\n />\n <Button\n slot=\"decrement\"\n data-slot=\"decrement\"\n className={s.decrement({ class: classNames?.decrement })}\n >\n <span aria-hidden=\"true\">−</span>\n </Button>\n <Button\n slot=\"increment\"\n data-slot=\"increment\"\n className={s.increment({ class: classNames?.increment })}\n >\n <span aria-hidden=\"true\">+</span>\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":";;;;;;;;;;;;;;;;AAyBA,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,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,QAAD;OAAM,eAAY;OAAO,UAAA;MAAO,CAAA;KAC1B,CAAA;KACR,oBAAC,QAAD;MACE,MAAK;MACL,aAAU;MACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;MAEvD,UAAA,oBAAC,QAAD;OAAM,eAAY;OAAO,UAAA;MAAO,CAAA;KAC1B,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,88 @@
|
|
|
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/flatlay'
|
|
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
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
14
|
+
inputWrapper: string;
|
|
15
|
+
input: string;
|
|
16
|
+
}>;
|
|
17
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
18
|
+
inputWrapper: string;
|
|
19
|
+
}>;
|
|
20
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
21
|
+
inputWrapper: string;
|
|
22
|
+
}>;
|
|
23
|
+
}, {
|
|
24
|
+
root: string;
|
|
25
|
+
label: string;
|
|
26
|
+
/**
|
|
27
|
+
* 記入欄の枠。罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。
|
|
28
|
+
* 増減セルの縦罫線も同じ色を継ぐので、`border-color` は枠にだけ書く。
|
|
29
|
+
*/
|
|
30
|
+
inputWrapper: string;
|
|
31
|
+
input: string;
|
|
32
|
+
decrement: string;
|
|
33
|
+
increment: string;
|
|
34
|
+
description: string;
|
|
35
|
+
errorMessage: string;
|
|
36
|
+
}, undefined, {
|
|
37
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
38
|
+
inputWrapper: string;
|
|
39
|
+
input: string;
|
|
40
|
+
}>;
|
|
41
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
42
|
+
inputWrapper: string;
|
|
43
|
+
}>;
|
|
44
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
45
|
+
inputWrapper: string;
|
|
46
|
+
}>;
|
|
47
|
+
}, {
|
|
48
|
+
root: string;
|
|
49
|
+
label: string;
|
|
50
|
+
/**
|
|
51
|
+
* 記入欄の枠。罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。
|
|
52
|
+
* 増減セルの縦罫線も同じ色を継ぐので、`border-color` は枠にだけ書く。
|
|
53
|
+
*/
|
|
54
|
+
inputWrapper: string;
|
|
55
|
+
input: string;
|
|
56
|
+
decrement: string;
|
|
57
|
+
increment: string;
|
|
58
|
+
description: string;
|
|
59
|
+
errorMessage: string;
|
|
60
|
+
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
61
|
+
size: VariantMap<"sm" | "md" | "lg", {
|
|
62
|
+
inputWrapper: string;
|
|
63
|
+
input: string;
|
|
64
|
+
}>;
|
|
65
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
66
|
+
inputWrapper: string;
|
|
67
|
+
}>;
|
|
68
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
69
|
+
inputWrapper: string;
|
|
70
|
+
}>;
|
|
71
|
+
}, {
|
|
72
|
+
root: string;
|
|
73
|
+
label: string;
|
|
74
|
+
/**
|
|
75
|
+
* 記入欄の枠。罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。
|
|
76
|
+
* 増減セルの縦罫線も同じ色を継ぐので、`border-color` は枠にだけ書く。
|
|
77
|
+
*/
|
|
78
|
+
inputWrapper: string;
|
|
79
|
+
input: string;
|
|
80
|
+
decrement: string;
|
|
81
|
+
increment: string;
|
|
82
|
+
description: string;
|
|
83
|
+
errorMessage: string;
|
|
84
|
+
}>>;
|
|
85
|
+
type NumberFieldStyleProps = Parameters<typeof numberFieldStyles>[0];
|
|
86
|
+
//#endregion
|
|
87
|
+
export { NumberFieldStyleProps, numberFieldStyles };
|
|
88
|
+
//# 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":";;;;;;;;;;;cA6Ga,+CAAiB;;IAhCmB;IAAe;;;IAeX;;;IA5BE;;;;;;;;;;;;;;;;;IAaN;IAAe;;;IAeX;;;IA5BE;;;;;;;;;;;;;;;;;IAaN;IAAe;;;IAeX;;;IA5BE;;;;;;;;;;;;;;;;KAoD3C,wBAAwB,kBAAkB"}
|