@novi-ui/raster 0.1.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/README.md +129 -0
- package/dist/accordion/accordion.d.mts +31 -0
- package/dist/accordion/accordion.d.mts.map +1 -0
- package/dist/accordion/accordion.mjs +88 -0
- package/dist/accordion/accordion.mjs.map +1 -0
- package/dist/accordion/accordion.styles.d.mts +61 -0
- package/dist/accordion/accordion.styles.d.mts.map +1 -0
- package/dist/accordion/accordion.styles.mjs +78 -0
- package/dist/accordion/accordion.styles.mjs.map +1 -0
- package/dist/accordion/index.d.mts +3 -0
- package/dist/avatar/avatar.d.mts +19 -0
- package/dist/avatar/avatar.d.mts.map +1 -0
- package/dist/avatar/avatar.mjs +57 -0
- package/dist/avatar/avatar.mjs.map +1 -0
- package/dist/avatar/avatar.styles.d.mts +49 -0
- package/dist/avatar/avatar.styles.d.mts.map +1 -0
- package/dist/avatar/avatar.styles.mjs +45 -0
- package/dist/avatar/avatar.styles.mjs.map +1 -0
- package/dist/avatar/index.d.mts +3 -0
- package/dist/badge/badge.d.mts +15 -0
- package/dist/badge/badge.d.mts.map +1 -0
- package/dist/badge/badge.mjs +39 -0
- package/dist/badge/badge.mjs.map +1 -0
- package/dist/badge/badge.styles.d.mts +67 -0
- package/dist/badge/badge.styles.d.mts.map +1 -0
- package/dist/badge/badge.styles.mjs +99 -0
- package/dist/badge/badge.styles.mjs.map +1 -0
- package/dist/badge/index.d.mts +3 -0
- package/dist/breadcrumbs/breadcrumbs.d.mts +33 -0
- package/dist/breadcrumbs/breadcrumbs.d.mts.map +1 -0
- package/dist/breadcrumbs/breadcrumbs.mjs +79 -0
- package/dist/breadcrumbs/breadcrumbs.mjs.map +1 -0
- package/dist/breadcrumbs/breadcrumbs.styles.d.mts +46 -0
- package/dist/breadcrumbs/breadcrumbs.styles.d.mts.map +1 -0
- package/dist/breadcrumbs/breadcrumbs.styles.mjs +35 -0
- package/dist/breadcrumbs/breadcrumbs.styles.mjs.map +1 -0
- package/dist/breadcrumbs/index.d.mts +3 -0
- package/dist/button/button.d.mts +14 -0
- package/dist/button/button.d.mts.map +1 -0
- package/dist/button/button.mjs +75 -0
- package/dist/button/button.mjs.map +1 -0
- package/dist/button/button.styles.d.mts +82 -0
- package/dist/button/button.styles.d.mts.map +1 -0
- package/dist/button/button.styles.mjs +118 -0
- package/dist/button/button.styles.mjs.map +1 -0
- package/dist/button/index.d.mts +3 -0
- package/dist/card/card.d.mts +51 -0
- package/dist/card/card.d.mts.map +1 -0
- package/dist/card/card.mjs +96 -0
- package/dist/card/card.mjs.map +1 -0
- package/dist/card/card.styles.d.mts +70 -0
- package/dist/card/card.styles.d.mts.map +1 -0
- package/dist/card/card.styles.mjs +62 -0
- package/dist/card/card.styles.mjs.map +1 -0
- package/dist/card/index.d.mts +3 -0
- package/dist/checkbox/checkbox.d.mts +24 -0
- package/dist/checkbox/checkbox.d.mts.map +1 -0
- package/dist/checkbox/checkbox.mjs +124 -0
- package/dist/checkbox/checkbox.mjs.map +1 -0
- package/dist/checkbox/checkbox.styles.d.mts +111 -0
- package/dist/checkbox/checkbox.styles.d.mts.map +1 -0
- package/dist/checkbox/checkbox.styles.mjs +89 -0
- package/dist/checkbox/checkbox.styles.mjs.map +1 -0
- package/dist/checkbox/index.d.mts +3 -0
- package/dist/index.d.mts +61 -0
- package/dist/index.mjs +42 -0
- package/dist/input/index.d.mts +3 -0
- package/dist/input/input.d.mts +20 -0
- package/dist/input/input.d.mts.map +1 -0
- package/dist/input/input.mjs +86 -0
- package/dist/input/input.mjs.map +1 -0
- package/dist/input/input.styles.d.mts +81 -0
- package/dist/input/input.styles.d.mts.map +1 -0
- package/dist/input/input.styles.mjs +83 -0
- package/dist/input/input.styles.mjs.map +1 -0
- package/dist/menu/index.d.mts +3 -0
- package/dist/menu/menu.d.mts +62 -0
- package/dist/menu/menu.d.mts.map +1 -0
- package/dist/menu/menu.mjs +115 -0
- package/dist/menu/menu.mjs.map +1 -0
- package/dist/menu/menu.styles.d.mts +90 -0
- package/dist/menu/menu.styles.d.mts.map +1 -0
- package/dist/menu/menu.styles.mjs +40 -0
- package/dist/menu/menu.styles.mjs.map +1 -0
- package/dist/modal/index.d.mts +3 -0
- package/dist/modal/modal.d.mts +47 -0
- package/dist/modal/modal.d.mts.map +1 -0
- package/dist/modal/modal.mjs +110 -0
- package/dist/modal/modal.mjs.map +1 -0
- package/dist/modal/modal.styles.d.mts +58 -0
- package/dist/modal/modal.styles.d.mts.map +1 -0
- package/dist/modal/modal.styles.mjs +69 -0
- package/dist/modal/modal.styles.mjs.map +1 -0
- package/dist/popover/index.d.mts +3 -0
- package/dist/popover/popover.d.mts +40 -0
- package/dist/popover/popover.d.mts.map +1 -0
- package/dist/popover/popover.mjs +86 -0
- package/dist/popover/popover.mjs.map +1 -0
- package/dist/popover/popover.styles.d.mts +81 -0
- package/dist/popover/popover.styles.d.mts.map +1 -0
- package/dist/popover/popover.styles.mjs +53 -0
- package/dist/popover/popover.styles.mjs.map +1 -0
- package/dist/progress/index.d.mts +3 -0
- package/dist/progress/progress.d.mts +14 -0
- package/dist/progress/progress.d.mts.map +1 -0
- package/dist/progress/progress.mjs +54 -0
- package/dist/progress/progress.mjs.map +1 -0
- package/dist/progress/progress.styles.d.mts +70 -0
- package/dist/progress/progress.styles.d.mts.map +1 -0
- package/dist/progress/progress.styles.mjs +54 -0
- package/dist/progress/progress.styles.mjs.map +1 -0
- package/dist/radio/index.d.mts +3 -0
- package/dist/radio/radio.d.mts +22 -0
- package/dist/radio/radio.d.mts.map +1 -0
- package/dist/radio/radio.mjs +95 -0
- package/dist/radio/radio.mjs.map +1 -0
- package/dist/radio/radio.styles.d.mts +111 -0
- package/dist/radio/radio.styles.d.mts.map +1 -0
- package/dist/radio/radio.styles.mjs +88 -0
- package/dist/radio/radio.styles.mjs.map +1 -0
- package/dist/raster.css +92 -0
- package/dist/raster.scoped.css +92 -0
- package/dist/select/index.d.mts +3 -0
- package/dist/select/select.d.mts +33 -0
- package/dist/select/select.d.mts.map +1 -0
- package/dist/select/select.mjs +114 -0
- package/dist/select/select.mjs.map +1 -0
- package/dist/select/select.styles.d.mts +82 -0
- package/dist/select/select.styles.d.mts.map +1 -0
- package/dist/select/select.styles.mjs +93 -0
- package/dist/select/select.styles.mjs.map +1 -0
- package/dist/skeleton/index.d.mts +3 -0
- package/dist/skeleton/skeleton.d.mts +15 -0
- package/dist/skeleton/skeleton.d.mts.map +1 -0
- package/dist/skeleton/skeleton.mjs +26 -0
- package/dist/skeleton/skeleton.mjs.map +1 -0
- package/dist/skeleton/skeleton.styles.d.mts +31 -0
- package/dist/skeleton/skeleton.styles.d.mts.map +1 -0
- package/dist/skeleton/skeleton.styles.mjs +22 -0
- package/dist/skeleton/skeleton.styles.mjs.map +1 -0
- package/dist/spinner/index.d.mts +3 -0
- package/dist/spinner/spinner.d.mts +15 -0
- package/dist/spinner/spinner.d.mts.map +1 -0
- package/dist/spinner/spinner.mjs +55 -0
- package/dist/spinner/spinner.mjs.map +1 -0
- package/dist/spinner/spinner.styles.d.mts +46 -0
- package/dist/spinner/spinner.styles.d.mts.map +1 -0
- package/dist/spinner/spinner.styles.mjs +37 -0
- package/dist/spinner/spinner.styles.mjs.map +1 -0
- package/dist/styles/focus-ring.mjs +23 -0
- package/dist/styles/focus-ring.mjs.map +1 -0
- package/dist/switch/index.d.mts +3 -0
- package/dist/switch/switch.d.mts +17 -0
- package/dist/switch/switch.d.mts.map +1 -0
- package/dist/switch/switch.mjs +57 -0
- package/dist/switch/switch.mjs.map +1 -0
- package/dist/switch/switch.styles.d.mts +58 -0
- package/dist/switch/switch.styles.d.mts.map +1 -0
- package/dist/switch/switch.styles.mjs +80 -0
- package/dist/switch/switch.styles.mjs.map +1 -0
- package/dist/tabs/index.d.mts +3 -0
- package/dist/tabs/tabs.d.mts +55 -0
- package/dist/tabs/tabs.d.mts.map +1 -0
- package/dist/tabs/tabs.mjs +84 -0
- package/dist/tabs/tabs.mjs.map +1 -0
- package/dist/tabs/tabs.styles.d.mts +55 -0
- package/dist/tabs/tabs.styles.d.mts.map +1 -0
- package/dist/tabs/tabs.styles.mjs +73 -0
- package/dist/tabs/tabs.styles.mjs.map +1 -0
- package/dist/textarea/index.d.mts +3 -0
- package/dist/textarea/textarea.d.mts +15 -0
- package/dist/textarea/textarea.d.mts.map +1 -0
- package/dist/textarea/textarea.mjs +70 -0
- package/dist/textarea/textarea.mjs.map +1 -0
- package/dist/textarea/textarea.styles.d.mts +73 -0
- package/dist/textarea/textarea.styles.d.mts.map +1 -0
- package/dist/textarea/textarea.styles.mjs +81 -0
- package/dist/textarea/textarea.styles.mjs.map +1 -0
- package/dist/toast/index.d.mts +3 -0
- package/dist/toast/toast.d.mts +38 -0
- package/dist/toast/toast.d.mts.map +1 -0
- package/dist/toast/toast.mjs +86 -0
- package/dist/toast/toast.mjs.map +1 -0
- package/dist/toast/toast.styles.d.mts +61 -0
- package/dist/toast/toast.styles.d.mts.map +1 -0
- package/dist/toast/toast.styles.mjs +59 -0
- package/dist/toast/toast.styles.mjs.map +1 -0
- package/package.json +59 -0
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { disabledState, focusRing } from "../styles/focus-ring.mjs";
|
|
2
|
+
import { tv } from "tailwind-variants";
|
|
3
|
+
//#region src/button/button.styles.ts
|
|
4
|
+
const slots = {
|
|
5
|
+
root: [
|
|
6
|
+
"inline-flex items-center justify-center gap-2",
|
|
7
|
+
"font-medium whitespace-nowrap select-none",
|
|
8
|
+
"border border-transparent",
|
|
9
|
+
"transition-[background-color,border-color,color,opacity]",
|
|
10
|
+
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
11
|
+
focusRing,
|
|
12
|
+
disabledState
|
|
13
|
+
].join(" "),
|
|
14
|
+
label: "truncate",
|
|
15
|
+
startContent: "shrink-0 inline-flex",
|
|
16
|
+
endContent: "shrink-0 inline-flex",
|
|
17
|
+
spinner: "shrink-0 inline-flex"
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* 色は「役割ごとのローカル変数」に落としてから variant が参照する。
|
|
21
|
+
* こうしないと variant 5 × color 6 = 30 通りの組み合わせを書くことになる。
|
|
22
|
+
*
|
|
23
|
+
* - `--c` 面の色(solid の背景)
|
|
24
|
+
* - `--c-fg` その面に乗る文字色
|
|
25
|
+
* - `--c-text` 面を持たない variant での文字色
|
|
26
|
+
* - `--c-line` 境界線の色
|
|
27
|
+
*/
|
|
28
|
+
const color = {
|
|
29
|
+
default: { root: [
|
|
30
|
+
"[--c:var(--novi-color-default)]",
|
|
31
|
+
"[--c-fg:var(--novi-color-default-fg)]",
|
|
32
|
+
"[--c-text:var(--novi-color-fg)]",
|
|
33
|
+
"[--c-line:var(--novi-color-border-strong)]"
|
|
34
|
+
].join(" ") },
|
|
35
|
+
primary: { root: [
|
|
36
|
+
"[--c:var(--novi-color-primary)]",
|
|
37
|
+
"[--c-fg:var(--novi-color-primary-fg)]",
|
|
38
|
+
"[--c-text:var(--novi-color-primary)]",
|
|
39
|
+
"[--c-line:var(--novi-color-primary)]"
|
|
40
|
+
].join(" ") },
|
|
41
|
+
secondary: { root: [
|
|
42
|
+
"[--c:var(--novi-color-secondary)]",
|
|
43
|
+
"[--c-fg:var(--novi-color-secondary-fg)]",
|
|
44
|
+
"[--c-text:var(--novi-color-secondary)]",
|
|
45
|
+
"[--c-line:var(--novi-color-secondary)]"
|
|
46
|
+
].join(" ") },
|
|
47
|
+
success: { root: [
|
|
48
|
+
"[--c:var(--novi-color-success)]",
|
|
49
|
+
"[--c-fg:var(--novi-color-success-fg)]",
|
|
50
|
+
"[--c-text:var(--novi-color-success)]",
|
|
51
|
+
"[--c-line:var(--novi-color-success)]"
|
|
52
|
+
].join(" ") },
|
|
53
|
+
warning: { root: [
|
|
54
|
+
"[--c:var(--novi-color-warning)]",
|
|
55
|
+
"[--c-fg:var(--novi-color-warning-fg)]",
|
|
56
|
+
"[--c-text:var(--novi-color-warning)]",
|
|
57
|
+
"[--c-line:var(--novi-color-warning)]"
|
|
58
|
+
].join(" ") },
|
|
59
|
+
danger: { root: [
|
|
60
|
+
"[--c:var(--novi-color-danger)]",
|
|
61
|
+
"[--c-fg:var(--novi-color-danger-fg)]",
|
|
62
|
+
"[--c-text:var(--novi-color-danger)]",
|
|
63
|
+
"[--c-line:var(--novi-color-danger)]"
|
|
64
|
+
].join(" ") }
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Button のスタイル定義。
|
|
68
|
+
*
|
|
69
|
+
* `tv({ extend: buttonStyles })` で拡張できるよう named export する。
|
|
70
|
+
* npm 配布の「コードを所有できない」という不満への回答(FR-04)。
|
|
71
|
+
*
|
|
72
|
+
* slot ベースの定義なので、拡張は `base` ではなく `slots` で行う。
|
|
73
|
+
* `base` は黙って無視される。
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* import { buttonStyles } from '@novi-ui/raster'
|
|
77
|
+
* import { tv } from 'tailwind-variants'
|
|
78
|
+
*
|
|
79
|
+
* const myButton = tv({
|
|
80
|
+
* extend: buttonStyles,
|
|
81
|
+
* slots: { root: 'uppercase tracking-widest' },
|
|
82
|
+
* })
|
|
83
|
+
*/
|
|
84
|
+
const buttonStyles = tv({
|
|
85
|
+
slots,
|
|
86
|
+
variants: {
|
|
87
|
+
color,
|
|
88
|
+
variant: {
|
|
89
|
+
solid: { root: "bg-[var(--c)] text-[var(--c-fg)] hover:opacity-90" },
|
|
90
|
+
outline: { root: "border-[var(--c-line)] text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]" },
|
|
91
|
+
soft: { root: "bg-[var(--novi-color-subtle)] text-[var(--c-text)] hover:brightness-95" },
|
|
92
|
+
ghost: { root: "text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]" },
|
|
93
|
+
plain: { root: "text-[var(--c-text)] underline-offset-4 hover:underline" }
|
|
94
|
+
},
|
|
95
|
+
size: {
|
|
96
|
+
sm: { root: "h-8 px-3 text-[length:var(--novi-text-sm)]" },
|
|
97
|
+
md: { root: "h-10 px-4 text-[length:var(--novi-text-base)]" },
|
|
98
|
+
lg: { root: "h-12 px-5 text-[length:var(--novi-text-base)]" }
|
|
99
|
+
},
|
|
100
|
+
radius: {
|
|
101
|
+
none: { root: "rounded-[var(--novi-radius-none)]" },
|
|
102
|
+
sm: { root: "rounded-[var(--novi-radius-sm)]" },
|
|
103
|
+
md: { root: "rounded-[var(--novi-radius-md)]" },
|
|
104
|
+
lg: { root: "rounded-[var(--novi-radius-lg)]" },
|
|
105
|
+
full: { root: "rounded-[var(--novi-radius-full)]" }
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
defaultVariants: {
|
|
109
|
+
color: "default",
|
|
110
|
+
variant: "solid",
|
|
111
|
+
size: "md",
|
|
112
|
+
radius: "none"
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
//#endregion
|
|
116
|
+
export { buttonStyles };
|
|
117
|
+
|
|
118
|
+
//# sourceMappingURL=button.styles.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.styles.mjs","names":[],"sources":["../../src/button/button.styles.ts"],"sourcesContent":["import type {\n buttonRequiredSlots,\n buttonSlots,\n NoviColor,\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// 型注釈ではなく `satisfies` を使う。\n// 型注釈だと「任意 slot は無いかもしれない」まで型が広がり、\n// tv() の戻り値で `s.startContent` が undefined 扱いになって呼べなくなる。\n// satisfies なら契約を検査しつつ、実際に定義した slot の情報が保たれる。\nconst slots = {\n root: [\n 'inline-flex items-center justify-center gap-2',\n 'font-medium whitespace-nowrap select-none',\n 'border border-transparent',\n 'transition-[background-color,border-color,color,opacity]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n focusRing,\n disabledState,\n ].join(' '),\n label: 'truncate',\n startContent: 'shrink-0 inline-flex',\n endContent: 'shrink-0 inline-flex',\n spinner: 'shrink-0 inline-flex',\n} satisfies SlotMap<typeof buttonSlots, (typeof buttonRequiredSlots)[number]>\n\n/**\n * 色は「役割ごとのローカル変数」に落としてから variant が参照する。\n * こうしないと variant 5 × color 6 = 30 通りの組み合わせを書くことになる。\n *\n * - `--c` 面の色(solid の背景)\n * - `--c-fg` その面に乗る文字色\n * - `--c-text` 面を持たない variant での文字色\n * - `--c-line` 境界線の色\n */\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: {\n root: [\n '[--c:var(--novi-color-default)]',\n '[--c-fg:var(--novi-color-default-fg)]',\n '[--c-text:var(--novi-color-fg)]',\n '[--c-line:var(--novi-color-border-strong)]',\n ].join(' '),\n },\n primary: {\n root: [\n '[--c:var(--novi-color-primary)]',\n '[--c-fg:var(--novi-color-primary-fg)]',\n '[--c-text:var(--novi-color-primary)]',\n '[--c-line:var(--novi-color-primary)]',\n ].join(' '),\n },\n secondary: {\n root: [\n '[--c:var(--novi-color-secondary)]',\n '[--c-fg:var(--novi-color-secondary-fg)]',\n '[--c-text:var(--novi-color-secondary)]',\n '[--c-line:var(--novi-color-secondary)]',\n ].join(' '),\n },\n success: {\n root: [\n '[--c:var(--novi-color-success)]',\n '[--c-fg:var(--novi-color-success-fg)]',\n '[--c-text:var(--novi-color-success)]',\n '[--c-line:var(--novi-color-success)]',\n ].join(' '),\n },\n warning: {\n root: [\n '[--c:var(--novi-color-warning)]',\n '[--c-fg:var(--novi-color-warning-fg)]',\n '[--c-text:var(--novi-color-warning)]',\n '[--c-line:var(--novi-color-warning)]',\n ].join(' '),\n },\n danger: {\n root: [\n '[--c:var(--novi-color-danger)]',\n '[--c-fg:var(--novi-color-danger-fg)]',\n '[--c-text:var(--novi-color-danger)]',\n '[--c-line:var(--novi-color-danger)]',\n ].join(' '),\n },\n}\n\n/** 語彙の実装漏れ・語彙外の追加はここでコンパイルエラーになる(AC-02-2)。 */\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: { root: 'bg-[var(--c)] text-[var(--c-fg)] hover:opacity-90' },\n outline: {\n root: 'border-[var(--c-line)] text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]',\n },\n soft: { root: 'bg-[var(--novi-color-subtle)] text-[var(--c-text)] hover:brightness-95' },\n ghost: { root: 'text-[var(--c-text)] hover:bg-[var(--novi-color-subtle)]' },\n plain: { root: 'text-[var(--c-text)] underline-offset-4 hover:underline' },\n}\n\n/** 高さは 8px グリッドに乗せる。32 / 40 / 48px(AC-01-2)。 */\nconst size: VariantMap<NoviSize, { root: string }> = {\n sm: { root: 'h-8 px-3 text-[length:var(--novi-text-sm)]' },\n md: { root: 'h-10 px-4 text-[length:var(--novi-text-base)]' },\n lg: { root: 'h-12 px-5 text-[length:var(--novi-text-base)]' },\n}\n\n/** Raster では md / lg も 2px に潰れる(ADR-R1)。API は語彙どおり受け付ける。 */\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Button のスタイル定義。\n *\n * `tv({ extend: buttonStyles })` で拡張できるよう named export する。\n * npm 配布の「コードを所有できない」という不満への回答(FR-04)。\n *\n * slot ベースの定義なので、拡張は `base` ではなく `slots` で行う。\n * `base` は黙って無視される。\n *\n * @example\n * import { buttonStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myButton = tv({\n * extend: buttonStyles,\n * slots: { root: 'uppercase tracking-widest' },\n * })\n */\nexport const buttonStyles = tv({\n slots,\n variants: { color, variant, size, radius },\n defaultVariants: { color: 'default', variant: 'solid', size: 'md', radius: 'none' },\n})\n\nexport type ButtonStyleProps = Parameters<typeof buttonStyles>[0]\n"],"mappings":";;;AAiBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,cAAc;CACd,YAAY;CACZ,SAAS;AACX;;;;;;;;;;AAWA,MAAM,QAAiD;CACrD,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,WAAW,EACT,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,QAAQ,EACN,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;AACF;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;EAAO;GA7CnB,OAAO,EAAE,MAAM,oDAAoD;GACnE,SAAS,EACP,MAAM,kFACR;GACA,MAAM,EAAE,MAAM,yEAAyE;GACvF,OAAO,EAAE,MAAM,2DAA2D;GAC1E,OAAO,EAAE,MAAM,0DAA0D;EAuCtD;EAAS;GAlC5B,IAAI,EAAE,MAAM,6CAA6C;GACzD,IAAI,EAAE,MAAM,gDAAgD;GAC5D,IAAI,EAAE,MAAM,gDAAgD;EAgChC;EAAM;GA3BlC,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAuBhB;CAAO;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAS,MAAM;EAAM,QAAQ;CAAO;AACpF,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { ImgHTMLAttributes, ReactNode } from "react";
|
|
2
|
+
import { CardProps } from "@novi-ui/core";
|
|
3
|
+
//#region src/card/card.d.ts
|
|
4
|
+
interface PartProps {
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Card の見出し部分。下端が境界線で仕切られる。
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* <CardHeader>売上</CardHeader>
|
|
13
|
+
*/
|
|
14
|
+
declare function CardHeader({ children, className }: PartProps): import("react").JSX.Element;
|
|
15
|
+
/**
|
|
16
|
+
* Card の本体。
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* <CardBody>¥1,240,000</CardBody>
|
|
20
|
+
*/
|
|
21
|
+
declare function CardBody({ children, className }: PartProps): import("react").JSX.Element;
|
|
22
|
+
/**
|
|
23
|
+
* Card の脚部。上端が境界線で仕切られる。
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* <CardFooter>前月比 +12%</CardFooter>
|
|
27
|
+
*/
|
|
28
|
+
declare function CardFooter({ children, className }: PartProps): import("react").JSX.Element;
|
|
29
|
+
/**
|
|
30
|
+
* Card の上部に置く画像。
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* <CardImage src="/thumb.jpg" alt="" />
|
|
34
|
+
*/
|
|
35
|
+
declare function CardImage({ className, alt, ...props }: ImgHTMLAttributes<HTMLImageElement>): import("react").JSX.Element;
|
|
36
|
+
/**
|
|
37
|
+
* 情報のまとまりを囲む器。
|
|
38
|
+
*
|
|
39
|
+
* 影は使わず、1px の境界線と余白だけで面を作る。
|
|
40
|
+
* `onPress` を渡すと押せるカードになり、キーボード操作とフォーカスリングが付く。
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* <Card>
|
|
44
|
+
* <CardHeader>売上</CardHeader>
|
|
45
|
+
* <CardBody>¥1,240,000</CardBody>
|
|
46
|
+
* </Card>
|
|
47
|
+
*/
|
|
48
|
+
declare function Card({ variant, radius, onPress, isDisabled, children, className, classNames, id }: CardProps): import("react").JSX.Element;
|
|
49
|
+
//#endregion
|
|
50
|
+
export { Card, CardBody, CardFooter, CardHeader, CardImage };
|
|
51
|
+
//# sourceMappingURL=card.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.d.mts","names":[],"sources":["../../src/card/card.tsx"],"mappings":";;;UAOU;EACR,WAAW;EACX;;;;;;;;iBASc,aAAa,UAAU,aAAa,4BAAS,IAAA;;;;;;;iBAc7C,WAAW,UAAU,aAAa,4BAAS,IAAA;;;;;;;iBAc3C,aAAa,UAAU,aAAa,4BAAS,IAAA;;;;;;;iBAc7C,YAAY,WAAW,QAAa,SAAS,kBAAkB,oCAAiB,IAAA;;;;;;;;;;;;;iBAuBhF,OACd,SACA,QACA,SACA,YACA,UACA,WACA,YACA,MACC,4BAAS,IAAA"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cardStyles } from "./card.styles.mjs";
|
|
3
|
+
import { Button } from "react-aria-components";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/card/card.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Card の見出し部分。下端が境界線で仕切られる。
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* <CardHeader>売上</CardHeader>
|
|
11
|
+
*/
|
|
12
|
+
function CardHeader({ children, className }) {
|
|
13
|
+
return /* @__PURE__ */ jsx("div", {
|
|
14
|
+
"data-slot": "header",
|
|
15
|
+
className: cardStyles().header({ class: className }),
|
|
16
|
+
children
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Card の本体。
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* <CardBody>¥1,240,000</CardBody>
|
|
24
|
+
*/
|
|
25
|
+
function CardBody({ children, className }) {
|
|
26
|
+
return /* @__PURE__ */ jsx("div", {
|
|
27
|
+
"data-slot": "body",
|
|
28
|
+
className: cardStyles().body({ class: className }),
|
|
29
|
+
children
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Card の脚部。上端が境界線で仕切られる。
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* <CardFooter>前月比 +12%</CardFooter>
|
|
37
|
+
*/
|
|
38
|
+
function CardFooter({ children, className }) {
|
|
39
|
+
return /* @__PURE__ */ jsx("div", {
|
|
40
|
+
"data-slot": "footer",
|
|
41
|
+
className: cardStyles().footer({ class: className }),
|
|
42
|
+
children
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Card の上部に置く画像。
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* <CardImage src="/thumb.jpg" alt="" />
|
|
50
|
+
*/
|
|
51
|
+
function CardImage({ className, alt = "", ...props }) {
|
|
52
|
+
return /* @__PURE__ */ jsx("img", {
|
|
53
|
+
...props,
|
|
54
|
+
alt,
|
|
55
|
+
"data-slot": "image",
|
|
56
|
+
className: cardStyles().image({ class: className })
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* 情報のまとまりを囲む器。
|
|
61
|
+
*
|
|
62
|
+
* 影は使わず、1px の境界線と余白だけで面を作る。
|
|
63
|
+
* `onPress` を渡すと押せるカードになり、キーボード操作とフォーカスリングが付く。
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* <Card>
|
|
67
|
+
* <CardHeader>売上</CardHeader>
|
|
68
|
+
* <CardBody>¥1,240,000</CardBody>
|
|
69
|
+
* </Card>
|
|
70
|
+
*/
|
|
71
|
+
function Card({ variant, radius, onPress, isDisabled, children, className, classNames, id }) {
|
|
72
|
+
const isPressable = onPress !== void 0;
|
|
73
|
+
const rootClass = cardStyles({
|
|
74
|
+
variant,
|
|
75
|
+
radius,
|
|
76
|
+
isPressable
|
|
77
|
+
}).root({ class: [className, classNames?.root] });
|
|
78
|
+
if (isPressable) return /* @__PURE__ */ jsx(Button, {
|
|
79
|
+
id,
|
|
80
|
+
onPress,
|
|
81
|
+
isDisabled,
|
|
82
|
+
"data-slot": "root",
|
|
83
|
+
className: rootClass,
|
|
84
|
+
children
|
|
85
|
+
});
|
|
86
|
+
return /* @__PURE__ */ jsx("div", {
|
|
87
|
+
id,
|
|
88
|
+
"data-slot": "root",
|
|
89
|
+
className: rootClass,
|
|
90
|
+
children
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
//#endregion
|
|
94
|
+
export { Card, CardBody, CardFooter, CardHeader, CardImage };
|
|
95
|
+
|
|
96
|
+
//# sourceMappingURL=card.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.mjs","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["'use client'\n\nimport type { CardProps } from '@novi-ui/core'\nimport type { ImgHTMLAttributes, ReactNode } from 'react'\nimport { Button } from 'react-aria-components'\nimport { cardStyles } from './card.styles'\n\ninterface PartProps {\n children?: ReactNode\n className?: string\n}\n\n/**\n * Card の見出し部分。下端が境界線で仕切られる。\n *\n * @example\n * <CardHeader>売上</CardHeader>\n */\nexport function CardHeader({ children, className }: PartProps) {\n return (\n <div data-slot=\"header\" className={cardStyles().header({ class: className })}>\n {children}\n </div>\n )\n}\n\n/**\n * Card の本体。\n *\n * @example\n * <CardBody>¥1,240,000</CardBody>\n */\nexport function CardBody({ children, className }: PartProps) {\n return (\n <div data-slot=\"body\" className={cardStyles().body({ class: className })}>\n {children}\n </div>\n )\n}\n\n/**\n * Card の脚部。上端が境界線で仕切られる。\n *\n * @example\n * <CardFooter>前月比 +12%</CardFooter>\n */\nexport function CardFooter({ children, className }: PartProps) {\n return (\n <div data-slot=\"footer\" className={cardStyles().footer({ class: className })}>\n {children}\n </div>\n )\n}\n\n/**\n * Card の上部に置く画像。\n *\n * @example\n * <CardImage src=\"/thumb.jpg\" alt=\"\" />\n */\nexport function CardImage({ className, alt = '', ...props }: ImgHTMLAttributes<HTMLImageElement>) {\n return (\n <img\n {...props}\n alt={alt}\n data-slot=\"image\"\n className={cardStyles().image({ class: className })}\n />\n )\n}\n\n/**\n * 情報のまとまりを囲む器。\n *\n * 影は使わず、1px の境界線と余白だけで面を作る。\n * `onPress` を渡すと押せるカードになり、キーボード操作とフォーカスリングが付く。\n *\n * @example\n * <Card>\n * <CardHeader>売上</CardHeader>\n * <CardBody>¥1,240,000</CardBody>\n * </Card>\n */\nexport function Card({\n variant,\n radius,\n onPress,\n isDisabled,\n children,\n className,\n classNames,\n id,\n}: CardProps) {\n const isPressable = onPress !== undefined\n const s = cardStyles({ variant, radius, isPressable })\n const rootClass = s.root({ class: [className, classNames?.root] })\n\n if (isPressable) {\n return (\n <Button\n id={id}\n onPress={onPress}\n isDisabled={isDisabled}\n data-slot=\"root\"\n className={rootClass}\n >\n {children}\n </Button>\n )\n }\n\n return (\n <div id={id} data-slot=\"root\" className={rootClass}>\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,WAAW,EAAE,UAAU,aAAwB;CAC7D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAS,WAAW,WAAW,CAAC,CAAC,OAAO,EAAE,OAAO,UAAU,CAAC;EACxE;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,SAAS,EAAE,UAAU,aAAwB;CAC3D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,WAAW,CAAC,CAAC,KAAK,EAAE,OAAO,UAAU,CAAC;EACpE;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,WAAW,EAAE,UAAU,aAAwB;CAC7D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAS,WAAW,WAAW,CAAC,CAAC,OAAO,EAAE,OAAO,UAAU,CAAC;EACxE;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,UAAU,EAAE,WAAW,MAAM,IAAI,GAAG,SAA8C;CAChG,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,aAAU;EACV,WAAW,WAAW,CAAC,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC;CACnD,CAAA;AAEL;;;;;;;;;;;;;AAcA,SAAgB,KAAK,EACnB,SACA,QACA,SACA,YACA,UACA,WACA,YACA,MACY;CACZ,MAAM,cAAc,YAAY,KAAA;CAEhC,MAAM,YADI,WAAW;EAAE;EAAS;EAAQ;CAAY,CAClC,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;CAEjE,IAAI,aACF,OACE,oBAAC,QAAD;EACM;EACK;EACG;EACZ,aAAU;EACV,WAAW;EAEV;CACK,CAAA;CAIZ,OACE,oBAAC,OAAD;EAAS;EAAI,aAAU;EAAO,WAAW;EACtC;CACE,CAAA;AAET"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { VariantMap } from "@novi-ui/core";
|
|
2
|
+
//#region src/card/card.styles.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Card のスタイル定義。
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })
|
|
8
|
+
*/
|
|
9
|
+
declare const cardStyles: import("tailwind-variants").TVReturnType<{
|
|
10
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
11
|
+
root: string;
|
|
12
|
+
}>;
|
|
13
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
14
|
+
root: string;
|
|
15
|
+
}>;
|
|
16
|
+
isPressable: {
|
|
17
|
+
true: {
|
|
18
|
+
root: string;
|
|
19
|
+
};
|
|
20
|
+
false: {};
|
|
21
|
+
};
|
|
22
|
+
}, {
|
|
23
|
+
root: string;
|
|
24
|
+
header: string;
|
|
25
|
+
body: string;
|
|
26
|
+
footer: string;
|
|
27
|
+
image: string;
|
|
28
|
+
}, undefined, {
|
|
29
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
30
|
+
root: string;
|
|
31
|
+
}>;
|
|
32
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
33
|
+
root: string;
|
|
34
|
+
}>;
|
|
35
|
+
isPressable: {
|
|
36
|
+
true: {
|
|
37
|
+
root: string;
|
|
38
|
+
};
|
|
39
|
+
false: {};
|
|
40
|
+
};
|
|
41
|
+
}, {
|
|
42
|
+
root: string;
|
|
43
|
+
header: string;
|
|
44
|
+
body: string;
|
|
45
|
+
footer: string;
|
|
46
|
+
image: string;
|
|
47
|
+
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
48
|
+
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
49
|
+
root: string;
|
|
50
|
+
}>;
|
|
51
|
+
radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
|
|
52
|
+
root: string;
|
|
53
|
+
}>;
|
|
54
|
+
isPressable: {
|
|
55
|
+
true: {
|
|
56
|
+
root: string;
|
|
57
|
+
};
|
|
58
|
+
false: {};
|
|
59
|
+
};
|
|
60
|
+
}, {
|
|
61
|
+
root: string;
|
|
62
|
+
header: string;
|
|
63
|
+
body: string;
|
|
64
|
+
footer: string;
|
|
65
|
+
image: string;
|
|
66
|
+
}>>;
|
|
67
|
+
type CardStyleProps = Parameters<typeof cardStyles>[0];
|
|
68
|
+
//#endregion
|
|
69
|
+
export { CardStyleProps, cardStyles };
|
|
70
|
+
//# sourceMappingURL=card.styles.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.styles.d.mts","names":[],"sources":["../../src/card/card.styles.ts"],"mappings":";;;;;;;;cAkDa,wCAAU;;IAtBwB;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;KAoCjC,iBAAiB,kBAAkB"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { disabledState, focusRing } from "../styles/focus-ring.mjs";
|
|
2
|
+
import { tv } from "tailwind-variants";
|
|
3
|
+
//#region src/card/card.styles.ts
|
|
4
|
+
const slots = {
|
|
5
|
+
root: [
|
|
6
|
+
"text-[var(--novi-color-fg)]",
|
|
7
|
+
"flex flex-col",
|
|
8
|
+
"bg-[var(--novi-color-bg)]",
|
|
9
|
+
"border border-[var(--novi-color-border)]",
|
|
10
|
+
"shadow-none",
|
|
11
|
+
"overflow-hidden"
|
|
12
|
+
].join(" "),
|
|
13
|
+
header: "px-4 py-3 border-b border-[var(--novi-color-border)]",
|
|
14
|
+
body: "px-4 py-4 flex-1",
|
|
15
|
+
footer: "px-4 py-3 border-t border-[var(--novi-color-border)]",
|
|
16
|
+
image: "w-full object-cover"
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Card のスタイル定義。
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })
|
|
23
|
+
*/
|
|
24
|
+
const cardStyles = tv({
|
|
25
|
+
slots,
|
|
26
|
+
variants: {
|
|
27
|
+
variant: {
|
|
28
|
+
solid: { root: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]" },
|
|
29
|
+
outline: { root: "bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]" },
|
|
30
|
+
soft: { root: "bg-[var(--novi-color-subtle)] border-transparent" },
|
|
31
|
+
ghost: { root: "bg-transparent border-transparent" },
|
|
32
|
+
plain: { root: "bg-transparent border-transparent" }
|
|
33
|
+
},
|
|
34
|
+
radius: {
|
|
35
|
+
none: { root: "rounded-[var(--novi-radius-none)]" },
|
|
36
|
+
sm: { root: "rounded-[var(--novi-radius-sm)]" },
|
|
37
|
+
md: { root: "rounded-[var(--novi-radius-md)]" },
|
|
38
|
+
lg: { root: "rounded-[var(--novi-radius-lg)]" },
|
|
39
|
+
full: { root: "rounded-[var(--novi-radius-full)]" }
|
|
40
|
+
},
|
|
41
|
+
isPressable: {
|
|
42
|
+
true: { root: [
|
|
43
|
+
"text-left cursor-pointer",
|
|
44
|
+
"transition-[border-color]",
|
|
45
|
+
"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
|
|
46
|
+
"hover:border-[var(--novi-color-border-strong)]",
|
|
47
|
+
focusRing,
|
|
48
|
+
disabledState
|
|
49
|
+
].join(" ") },
|
|
50
|
+
false: {}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
defaultVariants: {
|
|
54
|
+
variant: "outline",
|
|
55
|
+
radius: "none",
|
|
56
|
+
isPressable: false
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
//#endregion
|
|
60
|
+
export { cardStyles };
|
|
61
|
+
|
|
62
|
+
//# sourceMappingURL=card.styles.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.styles.mjs","names":[],"sources":["../../src/card/card.styles.ts"],"sourcesContent":["import type {\n cardRequiredSlots,\n cardSlots,\n NoviRadius,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n // 影は使わない。面の区切りは 1px の境界線だけで表す\n root: [\n 'text-[var(--novi-color-fg)]',\n 'flex flex-col',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border)]',\n 'shadow-none',\n 'overflow-hidden',\n ].join(' '),\n // header と footer は境界線で仕切る。背景色を変えて面を増やさない\n header: 'px-4 py-3 border-b border-[var(--novi-color-border)]',\n body: 'px-4 py-4 flex-1',\n footer: 'px-4 py-3 border-t border-[var(--novi-color-border)]',\n image: 'w-full object-cover',\n} satisfies SlotMap<typeof cardSlots, (typeof cardRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n solid: { root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n outline: { root: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n soft: { root: 'bg-[var(--novi-color-subtle)] border-transparent' },\n ghost: { root: 'bg-transparent border-transparent' },\n plain: { root: 'bg-transparent border-transparent' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n none: { root: 'rounded-[var(--novi-radius-none)]' },\n sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n md: { root: 'rounded-[var(--novi-radius-md)]' },\n lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Card のスタイル定義。\n *\n * @example\n * const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })\n */\nexport const cardStyles = tv({\n slots,\n variants: {\n variant,\n radius,\n isPressable: {\n true: {\n root: [\n 'text-left cursor-pointer',\n 'transition-[border-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'hover:border-[var(--novi-color-border-strong)]',\n focusRing,\n disabledState,\n ].join(' '),\n },\n false: {},\n },\n },\n defaultVariants: { variant: 'outline', radius: 'none', isPressable: false },\n})\n\nexport type CardStyleProps = Parameters<typeof cardStyles>[0]\n"],"mappings":";;;AAWA,MAAM,QAAQ;CAEZ,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,OAAO;AACT;;;;;;;AAwBA,MAAa,aAAa,GAAG;CAC3B;CACA,UAAU;EACR;GAxBF,OAAO,EAAE,MAAM,kEAAkE;GACjF,SAAS,EAAE,MAAM,qEAAqE;GACtF,MAAM,EAAE,MAAM,mDAAmD;GACjE,OAAO,EAAE,MAAM,oCAAoC;GACnD,OAAO,EAAE,MAAM,oCAAoC;EAoBjD;EACA;GAjBF,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAahD;EACA,aAAa;GACX,MAAM,EACJ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;GACF,CAAC,CAAC,KAAK,GAAG,EACZ;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,QAAQ;EAAQ,aAAa;CAAM;AAC5E,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { CheckboxGroupProps, CheckboxProps } from "@novi-ui/core";
|
|
2
|
+
//#region src/checkbox/checkbox.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* チェックボックス。
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* <Checkbox isSelected={agreed} onChange={setAgreed}>
|
|
8
|
+
* 利用規約に同意する
|
|
9
|
+
* </Checkbox>
|
|
10
|
+
*/
|
|
11
|
+
declare function Checkbox({ size, color, value, isSelected, defaultSelected, onChange, isIndeterminate, isDisabled, isReadOnly, isRequired, isInvalid, description, children, className, classNames, id }: CheckboxProps): import("react").JSX.Element;
|
|
12
|
+
/**
|
|
13
|
+
* チェックボックスのグループ。ラベルとエラーをまとめて扱う。
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* <CheckboxGroup label="通知方法" value={ways} onChange={setWays}>
|
|
17
|
+
* <Checkbox value="email">メール</Checkbox>
|
|
18
|
+
* <Checkbox value="sms">SMS</Checkbox>
|
|
19
|
+
* </CheckboxGroup>
|
|
20
|
+
*/
|
|
21
|
+
declare function CheckboxGroup({ label, description, errorMessage, name, value, defaultValue, onChange, orientation, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }: CheckboxGroupProps): import("react").JSX.Element;
|
|
22
|
+
//#endregion
|
|
23
|
+
export { Checkbox, CheckboxGroup };
|
|
24
|
+
//# sourceMappingURL=checkbox.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.d.mts","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"mappings":";;;;;;;;;;iBAiCgB,WACd,MACA,OACA,OACA,YACA,iBACA,UACA,iBACA,YACA,YACA,YACA,WACA,aACA,UACA,WACA,YACA,MACC,gCAAa,IAAA;;;;;;;;;;iBA2DA,gBACd,OACA,aACA,cACA,MACA,OACA,cACA,UACA,aACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACC,qCAAkB,IAAA"}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { checkboxGroupStyles, checkboxStyles } from "./checkbox.styles.mjs";
|
|
3
|
+
import { Checkbox, CheckboxGroup, FieldError, Label, Text } from "react-aria-components";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
//#region src/checkbox/checkbox.tsx
|
|
6
|
+
/** チェック記号。三角矢印や塗りつぶしではなく 1px の線で描く(Raster の規律)。 */
|
|
7
|
+
function CheckMark({ isIndeterminate }) {
|
|
8
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
9
|
+
viewBox: "0 0 16 16",
|
|
10
|
+
width: "0.75em",
|
|
11
|
+
height: "0.75em",
|
|
12
|
+
fill: "none",
|
|
13
|
+
"aria-hidden": "true",
|
|
14
|
+
children: isIndeterminate ? /* @__PURE__ */ jsx("path", {
|
|
15
|
+
d: "M3 8h10",
|
|
16
|
+
stroke: "currentColor",
|
|
17
|
+
strokeWidth: "2"
|
|
18
|
+
}) : /* @__PURE__ */ jsx("path", {
|
|
19
|
+
d: "M2.5 8.5l3.5 3.5 7.5-8",
|
|
20
|
+
stroke: "currentColor",
|
|
21
|
+
strokeWidth: "2"
|
|
22
|
+
})
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* チェックボックス。
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* <Checkbox isSelected={agreed} onChange={setAgreed}>
|
|
30
|
+
* 利用規約に同意する
|
|
31
|
+
* </Checkbox>
|
|
32
|
+
*/
|
|
33
|
+
function Checkbox$1({ size, color, value, isSelected, defaultSelected, onChange, isIndeterminate, isDisabled, isReadOnly, isRequired, isInvalid, description, children, className, classNames, id }) {
|
|
34
|
+
const s = checkboxStyles({
|
|
35
|
+
size,
|
|
36
|
+
color
|
|
37
|
+
});
|
|
38
|
+
return /* @__PURE__ */ jsx(Checkbox, {
|
|
39
|
+
id,
|
|
40
|
+
value,
|
|
41
|
+
isSelected,
|
|
42
|
+
defaultSelected,
|
|
43
|
+
onChange,
|
|
44
|
+
isIndeterminate,
|
|
45
|
+
isDisabled,
|
|
46
|
+
isReadOnly,
|
|
47
|
+
isRequired,
|
|
48
|
+
isInvalid,
|
|
49
|
+
"data-slot": "root",
|
|
50
|
+
className: `group ${s.root({ class: [className, classNames?.root] })}`,
|
|
51
|
+
children: ({ isSelected: selected, isIndeterminate: indeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
52
|
+
"data-slot": "control",
|
|
53
|
+
className: s.control({ class: classNames?.control }),
|
|
54
|
+
children: (selected || indeterminate) && /* @__PURE__ */ jsx("span", {
|
|
55
|
+
"data-slot": "indicator",
|
|
56
|
+
className: s.indicator({ class: classNames?.indicator }),
|
|
57
|
+
children: /* @__PURE__ */ jsx(CheckMark, { isIndeterminate: indeterminate })
|
|
58
|
+
})
|
|
59
|
+
}), children !== void 0 && /* @__PURE__ */ jsxs("span", {
|
|
60
|
+
className: "flex flex-col gap-0.5",
|
|
61
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
62
|
+
"data-slot": "label",
|
|
63
|
+
className: s.label({ class: classNames?.label }),
|
|
64
|
+
children
|
|
65
|
+
}), description !== void 0 && /* @__PURE__ */ jsx("span", {
|
|
66
|
+
"data-slot": "description",
|
|
67
|
+
className: s.description({ class: classNames?.description }),
|
|
68
|
+
children: description
|
|
69
|
+
})]
|
|
70
|
+
})] })
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* チェックボックスのグループ。ラベルとエラーをまとめて扱う。
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* <CheckboxGroup label="通知方法" value={ways} onChange={setWays}>
|
|
78
|
+
* <Checkbox value="email">メール</Checkbox>
|
|
79
|
+
* <Checkbox value="sms">SMS</Checkbox>
|
|
80
|
+
* </CheckboxGroup>
|
|
81
|
+
*/
|
|
82
|
+
function CheckboxGroup$1({ label, description, errorMessage, name, value, defaultValue, onChange, orientation, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }) {
|
|
83
|
+
const s = checkboxGroupStyles({ orientation });
|
|
84
|
+
return /* @__PURE__ */ jsxs(CheckboxGroup, {
|
|
85
|
+
id,
|
|
86
|
+
name,
|
|
87
|
+
value,
|
|
88
|
+
defaultValue,
|
|
89
|
+
onChange,
|
|
90
|
+
isDisabled,
|
|
91
|
+
isReadOnly,
|
|
92
|
+
isRequired,
|
|
93
|
+
isInvalid,
|
|
94
|
+
"data-slot": "root",
|
|
95
|
+
className: s.root({ class: [className, classNames?.root] }),
|
|
96
|
+
children: [
|
|
97
|
+
label !== void 0 && /* @__PURE__ */ jsx(Label, {
|
|
98
|
+
"data-slot": "label",
|
|
99
|
+
className: s.label({ class: classNames?.label }),
|
|
100
|
+
children: label
|
|
101
|
+
}),
|
|
102
|
+
/* @__PURE__ */ jsx("div", {
|
|
103
|
+
"data-slot": "list",
|
|
104
|
+
className: s.list({ class: classNames?.list }),
|
|
105
|
+
children
|
|
106
|
+
}),
|
|
107
|
+
description !== void 0 && /* @__PURE__ */ jsx(Text, {
|
|
108
|
+
slot: "description",
|
|
109
|
+
"data-slot": "description",
|
|
110
|
+
className: s.description({ class: classNames?.description }),
|
|
111
|
+
children: description
|
|
112
|
+
}),
|
|
113
|
+
/* @__PURE__ */ jsx(FieldError, {
|
|
114
|
+
"data-slot": "errorMessage",
|
|
115
|
+
className: s.errorMessage({ class: classNames?.errorMessage }),
|
|
116
|
+
children: errorMessage
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
//#endregion
|
|
122
|
+
export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup };
|
|
123
|
+
|
|
124
|
+
//# sourceMappingURL=checkbox.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.mjs","names":["Checkbox","RACCheckbox","CheckboxGroup","RACCheckboxGroup"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport type { CheckboxGroupProps, CheckboxProps } from '@novi-ui/core'\nimport {\n FieldError,\n Label,\n Checkbox as RACCheckbox,\n CheckboxGroup as RACCheckboxGroup,\n Text,\n} from 'react-aria-components'\nimport { checkboxGroupStyles, checkboxStyles } from './checkbox.styles'\n\n/** チェック記号。三角矢印や塗りつぶしではなく 1px の線で描く(Raster の規律)。 */\nfunction CheckMark({ isIndeterminate }: { isIndeterminate: boolean }) {\n return (\n <svg viewBox=\"0 0 16 16\" width=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n {isIndeterminate ? (\n <path d=\"M3 8h10\" stroke=\"currentColor\" strokeWidth=\"2\" />\n ) : (\n <path d=\"M2.5 8.5l3.5 3.5 7.5-8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n )}\n </svg>\n )\n}\n\n/**\n * チェックボックス。\n *\n * @example\n * <Checkbox isSelected={agreed} onChange={setAgreed}>\n * 利用規約に同意する\n * </Checkbox>\n */\nexport function Checkbox({\n size,\n color,\n value,\n isSelected,\n defaultSelected,\n onChange,\n isIndeterminate,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n description,\n children,\n className,\n classNames,\n id,\n}: CheckboxProps) {\n const s = checkboxStyles({ size, color })\n\n return (\n <RACCheckbox\n id={id}\n value={value}\n isSelected={isSelected}\n defaultSelected={defaultSelected}\n onChange={onChange}\n isIndeterminate={isIndeterminate}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isInvalid={isInvalid}\n data-slot=\"root\"\n // control 側から選択状態を参照するために group を付ける\n className={`group ${s.root({ class: [className, classNames?.root] })}`}\n >\n {({ isSelected: selected, isIndeterminate: indeterminate }) => (\n <>\n <span data-slot=\"control\" className={s.control({ class: classNames?.control })}>\n {(selected || indeterminate) && (\n <span data-slot=\"indicator\" className={s.indicator({ class: classNames?.indicator })}>\n <CheckMark isIndeterminate={indeterminate} />\n </span>\n )}\n </span>\n\n {children !== undefined && (\n <span className=\"flex flex-col gap-0.5\">\n <span data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n {children}\n </span>\n {description !== undefined && (\n <span\n data-slot=\"description\"\n className={s.description({ class: classNames?.description })}\n >\n {description}\n </span>\n )}\n </span>\n )}\n </>\n )}\n </RACCheckbox>\n )\n}\n\n/**\n * チェックボックスのグループ。ラベルとエラーをまとめて扱う。\n *\n * @example\n * <CheckboxGroup label=\"通知方法\" value={ways} onChange={setWays}>\n * <Checkbox value=\"email\">メール</Checkbox>\n * <Checkbox value=\"sms\">SMS</Checkbox>\n * </CheckboxGroup>\n */\nexport function CheckboxGroup({\n label,\n description,\n errorMessage,\n name,\n value,\n defaultValue,\n onChange,\n orientation,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n children,\n className,\n classNames,\n id,\n}: CheckboxGroupProps) {\n const s = checkboxGroupStyles({ orientation })\n\n return (\n <RACCheckboxGroup\n id={id}\n name={name}\n value={value}\n defaultValue={defaultValue}\n onChange={onChange}\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 <div data-slot=\"list\" className={s.list({ class: classNames?.list })}>\n {children}\n </div>\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 </RACCheckboxGroup>\n )\n}\n"],"mappings":";;;;;;AAaA,SAAS,UAAU,EAAE,mBAAiD;CACpE,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAS,QAAO;EAAS,MAAK;EAAO,eAAY;EAC7E,UAAA,kBACC,oBAAC,QAAD;GAAM,GAAE;GAAU,QAAO;GAAe,aAAY;EAAK,CAAA,IAEzD,oBAAC,QAAD;GAAM,GAAE;GAAyB,QAAO;GAAe,aAAY;EAAK,CAAA;CAEvE,CAAA;AAET;;;;;;;;;AAUA,SAAgBA,WAAS,EACvB,MACA,OACA,OACA,YACA,iBACA,UACA,iBACA,YACA,YACA,YACA,WACA,aACA,UACA,WACA,YACA,MACgB;CAChB,MAAM,IAAI,eAAe;EAAE;EAAM;CAAM,CAAC;CAExC,OACE,oBAACC,UAAD;EACM;EACG;EACK;EACK;EACP;EACO;EACL;EACA;EACA;EACD;EACX,aAAU;EAEV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAEjE,WAAA,EAAE,YAAY,UAAU,iBAAiB,oBACzC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,aAAU;GAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;GACzE,WAAA,YAAY,kBACZ,oBAAC,QAAD;IAAM,aAAU;IAAY,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;IACjF,UAAA,oBAAC,WAAD,EAAW,iBAAiB,cAAgB,CAAA;GACxC,CAAA;EAEJ,CAAA,GAEL,aAAa,KAAA,KACZ,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACpE;GACG,CAAA,GACL,gBAAgB,KAAA,KACf,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA,CAEJ;EAER,CAAA,CAAA,EAAA,CAAA;CAEO,CAAA;AAEjB;;;;;;;;;;AAWA,SAAgBC,gBAAc,EAC5B,OACA,aACA,cACA,MACA,OACA,cACA,UACA,aACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACqB;CACrB,MAAM,IAAI,oBAAoB,EAAE,YAAY,CAAC;CAE7C,OACE,qBAACC,eAAD;EACM;EACE;EACC;EACO;EACJ;EACE;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAX5D,UAAA;GAaG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,oBAAC,OAAD;IAAK,aAAU;IAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;IAChE;GACE,CAAA;GAEJ,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;EACI;;AAEtB"}
|