@k8o/arte-odyssey 4.1.0 → 4.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -9
- package/dist/components/form/autocomplete/autocomplete.d.mts +1 -0
- package/dist/components/form/autocomplete/autocomplete.mjs +133 -125
- package/dist/components/form/checkbox/checkbox.d.mts +1 -0
- package/dist/components/form/checkbox/checkbox.mjs +2 -2
- package/dist/components/form/checkbox-card/checkbox-card.d.mts +1 -0
- package/dist/components/form/checkbox-card/checkbox-card.mjs +2 -1
- package/dist/components/form/checkbox-group/index.d.mts +1 -0
- package/dist/components/form/number-field/number-field.d.mts +1 -0
- package/dist/components/form/number-field/number-field.mjs +2 -1
- package/dist/components/form/radio/radio.d.mts +1 -0
- package/dist/components/form/radio/radio.mjs +2 -2
- package/dist/components/form/radio-card/radio-card.d.mts +1 -0
- package/dist/components/form/radio-card/radio-card.mjs +8 -4
- package/dist/components/form/select/select.d.mts +1 -0
- package/dist/components/form/select/select.mjs +2 -1
- package/dist/components/icons/base.d.mts +1 -1
- package/dist/components/icons/base.mjs +10 -1
- package/dist/components/index.d.mts +1 -2
- package/dist/components/index.mjs +1 -2
- package/dist/index.d.mts +1 -2
- package/dist/index.mjs +1 -2
- package/docs/GUIDE.md +232 -0
- package/docs/references/color.md +86 -0
- package/docs/references/components.md +449 -0
- package/docs/references/interaction-design.md +74 -0
- package/docs/references/spatial-design.md +101 -0
- package/docs/references/typography.md +67 -0
- package/package.json +4 -4
- package/dist/components/utility/error-boundary/index.d.mts +0 -2
- package/dist/components/utility/error-boundary/index.mjs +0 -2
package/README.md
CHANGED
|
@@ -66,15 +66,9 @@ function MyPage() {
|
|
|
66
66
|
}
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
-
## AI Agent
|
|
69
|
+
## AI Agent Documentation
|
|
70
70
|
|
|
71
|
-
ArteOdyssey
|
|
72
|
-
|
|
73
|
-
```bash
|
|
74
|
-
npx skills add k35o/ArteOdyssey --skill arte-odyssey-usage
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
Compatible with Claude Code, Cursor, GitHub Copilot, and other [Agent Skills](https://agentskills.io/) compatible tools.
|
|
71
|
+
ArteOdyssey includes design system documentation in `docs/` directory. When installed via npm, AI coding assistants can reference `node_modules/@k8o/arte-odyssey/docs/GUIDE.md` for design principles, component APIs, and usage patterns.
|
|
78
72
|
|
|
79
73
|
## Component Categories
|
|
80
74
|
|
|
@@ -132,7 +126,6 @@ Compatible with Claude Code, Cursor, GitHub Copilot, and other [Agent Skills](ht
|
|
|
132
126
|
|
|
133
127
|
### Utilities
|
|
134
128
|
|
|
135
|
-
- **ErrorBoundary** - Error handling wrapper
|
|
136
129
|
- **ArteOdysseyProvider** - Context providers for the library
|
|
137
130
|
- **Icons** - Icon component collection
|
|
138
131
|
|
|
@@ -5,7 +5,7 @@ import { CloseIcon } from "../../icons/lucide.mjs";
|
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
7
7
|
//#region src/components/form/autocomplete/autocomplete.tsx
|
|
8
|
-
const Autocomplete = ({ id, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
|
|
8
|
+
const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
|
|
9
9
|
const [internalValue, setInternalValue] = useState(defaultValue || []);
|
|
10
10
|
const isControlled = value !== void 0;
|
|
11
11
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -36,141 +36,149 @@ const Autocomplete = ({ id, describedbyId, isInvalid, isDisabled, isRequired, op
|
|
|
36
36
|
return /* @__PURE__ */ jsxs("div", {
|
|
37
37
|
className: cn("relative w-full rounded-lg border border-border-base bg-bg-base", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info", "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute has-disabled:has-hover:hover:bg-bg-mute"),
|
|
38
38
|
ref,
|
|
39
|
-
children: [
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
"
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
},
|
|
79
|
-
onClick: () => {
|
|
80
|
-
if (open && text.length === 0) {
|
|
39
|
+
children: [
|
|
40
|
+
name ? currentValue.map((selectedValue) => /* @__PURE__ */ jsx("input", {
|
|
41
|
+
name,
|
|
42
|
+
type: "hidden",
|
|
43
|
+
value: selectedValue
|
|
44
|
+
}, selectedValue)) : null,
|
|
45
|
+
/* @__PURE__ */ jsxs("div", {
|
|
46
|
+
className: "flex min-h-12 items-center justify-between gap-2 px-3 py-2",
|
|
47
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
48
|
+
className: "flex w-full flex-wrap gap-1",
|
|
49
|
+
children: [currentValue.map((text) => {
|
|
50
|
+
const label = options.find((option) => option.value === text)?.label;
|
|
51
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
52
|
+
className: "inline-flex items-center gap-2 rounded-full bg-bg-mute px-3 py-1 font-medium text-sm",
|
|
53
|
+
tabIndex: -1,
|
|
54
|
+
children: [label, /* @__PURE__ */ jsx(IconButton, {
|
|
55
|
+
label: "閉じる",
|
|
56
|
+
onClick: (e) => {
|
|
57
|
+
e.stopPropagation();
|
|
58
|
+
reset();
|
|
59
|
+
handleChange(currentValue.filter((v) => v !== text));
|
|
60
|
+
},
|
|
61
|
+
size: "sm",
|
|
62
|
+
children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
|
|
63
|
+
})]
|
|
64
|
+
}, text);
|
|
65
|
+
}), /* @__PURE__ */ jsx("input", {
|
|
66
|
+
"aria-autocomplete": "list",
|
|
67
|
+
"aria-controls": open ? `${id}_listbox` : void 0,
|
|
68
|
+
"aria-describedby": describedbyId,
|
|
69
|
+
"aria-expanded": open,
|
|
70
|
+
"aria-invalid": isInvalid,
|
|
71
|
+
"aria-required": isRequired,
|
|
72
|
+
autoComplete: "off",
|
|
73
|
+
className: cn("grow bg-transparent focus-visible:outline-hidden", "disabled:cursor-not-allowed"),
|
|
74
|
+
disabled: isDisabled,
|
|
75
|
+
id,
|
|
76
|
+
onBlur: (e) => {
|
|
77
|
+
if (e.relatedTarget?.id.startsWith(`${id}_option_`)) return;
|
|
81
78
|
setOpen(false);
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
setOpen(true);
|
|
85
|
-
setSelectIndex(void 0);
|
|
86
|
-
},
|
|
87
|
-
onKeyDown: (e) => {
|
|
88
|
-
if (e.key === "Backspace" && text.length === 0) {
|
|
89
|
-
reset();
|
|
90
|
-
handleChange(currentValue.slice(0, -1));
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
if (e.key === "ArrowDown") {
|
|
79
|
+
},
|
|
80
|
+
onChange: (e) => {
|
|
94
81
|
setOpen(true);
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
82
|
+
setText(e.target.value);
|
|
83
|
+
setSelectIndex(void 0);
|
|
84
|
+
},
|
|
85
|
+
onClick: () => {
|
|
86
|
+
if (open && text.length === 0) {
|
|
87
|
+
setOpen(false);
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
102
90
|
setOpen(true);
|
|
103
|
-
setSelectIndex(
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
if (e.key === "Enter" && selectIndex !== void 0 && selectIndex >= 0) {
|
|
110
|
-
const selected = filteredOptions[selectIndex];
|
|
111
|
-
if (!selected) return;
|
|
112
|
-
if (currentValue.includes(selected.value)) {
|
|
113
|
-
handleChange(currentValue.filter((v) => v !== selected.value));
|
|
91
|
+
setSelectIndex(void 0);
|
|
92
|
+
},
|
|
93
|
+
onKeyDown: (e) => {
|
|
94
|
+
if (e.key === "Backspace" && text.length === 0) {
|
|
114
95
|
reset();
|
|
96
|
+
handleChange(currentValue.slice(0, -1));
|
|
115
97
|
return;
|
|
116
98
|
}
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
className: "absolute top-1 z-10 w-full rounded-lg border border-border-mute bg-bg-base shadow-md",
|
|
140
|
-
role: "presentation",
|
|
141
|
-
children: /* @__PURE__ */ jsxs("ul", {
|
|
142
|
-
className: "max-h-96 py-2",
|
|
143
|
-
id: `${id}_listbox`,
|
|
144
|
-
children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", {
|
|
145
|
-
className: "px-3 py-2 text-fg-mute",
|
|
146
|
-
children: "該当なし"
|
|
147
|
-
}), filteredOptions.map((option, idx) => {
|
|
148
|
-
const selected = currentValue.includes(option.value);
|
|
149
|
-
return /* @__PURE__ */ jsx("li", {
|
|
150
|
-
className: cn("cursor-pointer px-3 py-2", selected && "bg-bg-mute", selectIndex === idx && !selected && "bg-bg-emphasize", selectIndex === idx && selected && "bg-bg-mute"),
|
|
151
|
-
id: `${id}_option_${option.value}`,
|
|
152
|
-
onClick: (e) => {
|
|
153
|
-
e.stopPropagation();
|
|
154
|
-
reset();
|
|
155
|
-
if (selected) {
|
|
156
|
-
handleChange(currentValue.filter((v) => v !== option.value));
|
|
99
|
+
if (e.key === "ArrowDown") {
|
|
100
|
+
setOpen(true);
|
|
101
|
+
setSelectIndex((prev) => {
|
|
102
|
+
if (prev === void 0) return 0;
|
|
103
|
+
return Math.min(prev + 1, options.length - 1);
|
|
104
|
+
});
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
if (e.key === "ArrowUp") {
|
|
108
|
+
setOpen(true);
|
|
109
|
+
setSelectIndex((prev) => {
|
|
110
|
+
if (prev === void 0) return 0;
|
|
111
|
+
return Math.max(prev - 1, 0);
|
|
112
|
+
});
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
if (e.key === "Enter" && selectIndex !== void 0 && selectIndex >= 0) {
|
|
116
|
+
const selected = filteredOptions[selectIndex];
|
|
117
|
+
if (!selected) return;
|
|
118
|
+
if (currentValue.includes(selected.value)) {
|
|
119
|
+
handleChange(currentValue.filter((v) => v !== selected.value));
|
|
120
|
+
reset();
|
|
157
121
|
return;
|
|
158
122
|
}
|
|
159
|
-
handleChange([...currentValue,
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
children: option.label
|
|
169
|
-
}, option.value);
|
|
123
|
+
handleChange([...currentValue, selected.value]);
|
|
124
|
+
reset();
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
placeholder: "入力して絞り込めます",
|
|
129
|
+
role: "combobox",
|
|
130
|
+
type: "text",
|
|
131
|
+
value: text
|
|
170
132
|
})]
|
|
133
|
+
}), currentValue.length > 0 && /* @__PURE__ */ jsx(IconButton, {
|
|
134
|
+
label: "すべて閉じる",
|
|
135
|
+
onClick: (e) => {
|
|
136
|
+
e.stopPropagation();
|
|
137
|
+
handleChange([]);
|
|
138
|
+
},
|
|
139
|
+
size: "sm",
|
|
140
|
+
children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
|
|
141
|
+
})]
|
|
142
|
+
}),
|
|
143
|
+
/* @__PURE__ */ jsx("div", {
|
|
144
|
+
className: "relative w-full",
|
|
145
|
+
children: open && /* @__PURE__ */ jsx("div", {
|
|
146
|
+
className: "absolute top-1 z-10 w-full rounded-lg border border-border-mute bg-bg-base shadow-md",
|
|
147
|
+
role: "presentation",
|
|
148
|
+
children: /* @__PURE__ */ jsxs("ul", {
|
|
149
|
+
className: "max-h-96 py-2",
|
|
150
|
+
id: `${id}_listbox`,
|
|
151
|
+
children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", {
|
|
152
|
+
className: "px-3 py-2 text-fg-mute",
|
|
153
|
+
children: "該当なし"
|
|
154
|
+
}), filteredOptions.map((option, idx) => {
|
|
155
|
+
const selected = currentValue.includes(option.value);
|
|
156
|
+
return /* @__PURE__ */ jsx("li", {
|
|
157
|
+
className: cn("cursor-pointer px-3 py-2", selected && "bg-bg-mute", selectIndex === idx && !selected && "bg-bg-emphasize", selectIndex === idx && selected && "bg-bg-mute"),
|
|
158
|
+
id: `${id}_option_${option.value}`,
|
|
159
|
+
onClick: (e) => {
|
|
160
|
+
e.stopPropagation();
|
|
161
|
+
reset();
|
|
162
|
+
if (selected) {
|
|
163
|
+
handleChange(currentValue.filter((v) => v !== option.value));
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
handleChange([...currentValue, option.value]);
|
|
167
|
+
},
|
|
168
|
+
onKeyDown: (e) => {
|
|
169
|
+
e.preventDefault();
|
|
170
|
+
},
|
|
171
|
+
onMouseEnter: () => {
|
|
172
|
+
setSelectIndex(idx);
|
|
173
|
+
},
|
|
174
|
+
tabIndex: -1,
|
|
175
|
+
children: option.label
|
|
176
|
+
}, option.value);
|
|
177
|
+
})]
|
|
178
|
+
})
|
|
171
179
|
})
|
|
172
180
|
})
|
|
173
|
-
|
|
181
|
+
]
|
|
174
182
|
});
|
|
175
183
|
};
|
|
176
184
|
//#endregion
|
|
@@ -5,7 +5,7 @@ import { useCheckboxGroupContext } from "../checkbox-group/checkbox-group.mjs";
|
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { useState } from "react";
|
|
7
7
|
//#region src/components/form/checkbox/checkbox.tsx
|
|
8
|
-
const Checkbox = ({ itemValue, isDisabled = false, label, value, defaultChecked, onChange }) => {
|
|
8
|
+
const Checkbox = ({ name, itemValue, isDisabled = false, label, value, defaultChecked, onChange }) => {
|
|
9
9
|
const groupContext = useCheckboxGroupContext();
|
|
10
10
|
const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
|
|
11
11
|
const groupItemValue = itemValue ?? "";
|
|
@@ -25,7 +25,7 @@ const Checkbox = ({ itemValue, isDisabled = false, label, value, defaultChecked,
|
|
|
25
25
|
className: "peer sr-only",
|
|
26
26
|
defaultChecked: groupContext || isControlled ? void 0 : defaultChecked,
|
|
27
27
|
disabled: isDisabledResolved,
|
|
28
|
-
name: groupContext?.name,
|
|
28
|
+
name: groupContext?.name ?? name,
|
|
29
29
|
onChange: (event) => {
|
|
30
30
|
if (groupContext) {
|
|
31
31
|
groupContext.toggleValue(groupItemValue);
|
|
@@ -4,7 +4,7 @@ import { CheckIcon } from "../../icons/lucide.mjs";
|
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { useId, useState } from "react";
|
|
6
6
|
//#region src/components/form/checkbox-card/checkbox-card.tsx
|
|
7
|
-
const CheckboxCard = ({ labelId, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
|
|
7
|
+
const CheckboxCard = ({ labelId, name, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
|
|
8
8
|
const groupId = useId();
|
|
9
9
|
const [internalValue, setInternalValue] = useState(defaultValue ?? []);
|
|
10
10
|
const isControlled = value !== void 0;
|
|
@@ -30,6 +30,7 @@ const CheckboxCard = ({ labelId, isDisabled, isInvalid = false, options, value,
|
|
|
30
30
|
checked,
|
|
31
31
|
className: "sr-only",
|
|
32
32
|
disabled,
|
|
33
|
+
name,
|
|
33
34
|
onChange: (event) => {
|
|
34
35
|
handleToggle(option.value, event.target.checked);
|
|
35
36
|
},
|
|
@@ -7,7 +7,7 @@ import { cast } from "../../../helpers/number/cast.mjs";
|
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { useState } from "react";
|
|
9
9
|
//#region src/components/form/number-field/number-field.tsx
|
|
10
|
-
const NumberField = ({ id, describedbyId, isInvalid, isDisabled, isRequired, value, defaultValue, onChange, step = 1, precision = 0, max = 9007199254740991, min = -9007199254740991, placeholder }) => {
|
|
10
|
+
const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, value, defaultValue, onChange, step = 1, precision = 0, max = 9007199254740991, min = -9007199254740991, placeholder }) => {
|
|
11
11
|
const isControlled = value !== void 0;
|
|
12
12
|
const initialValue = defaultValue ?? value ?? 0;
|
|
13
13
|
const [internalValue, setInternalValue] = useState(initialValue);
|
|
@@ -37,6 +37,7 @@ const NumberField = ({ id, describedbyId, isInvalid, isDisabled, isRequired, val
|
|
|
37
37
|
disabled: isDisabled,
|
|
38
38
|
id,
|
|
39
39
|
inputMode: "decimal",
|
|
40
|
+
name,
|
|
40
41
|
onBlur: () => {
|
|
41
42
|
const newValue = between(cast(displayValue, precision), min, max);
|
|
42
43
|
handleChange(newValue);
|
|
@@ -3,7 +3,7 @@ import { cn } from "../../../helpers/cn.mjs";
|
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { useState } from "react";
|
|
5
5
|
//#region src/components/form/radio/radio.tsx
|
|
6
|
-
const Radio = ({ labelId, isDisabled, value, defaultValue, onChange, options }) => {
|
|
6
|
+
const Radio = ({ labelId, name, isDisabled, value, defaultValue, onChange, options }) => {
|
|
7
7
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
8
8
|
const isControlled = value !== void 0;
|
|
9
9
|
const selectedValue = isControlled ? value : internalValue;
|
|
@@ -23,7 +23,7 @@ const Radio = ({ labelId, isDisabled, value, defaultValue, onChange, options })
|
|
|
23
23
|
className: "peer sr-only",
|
|
24
24
|
defaultChecked: isControlled ? void 0 : defaultValue === option.value,
|
|
25
25
|
disabled: isDisabled,
|
|
26
|
-
name: labelId,
|
|
26
|
+
name: name ?? labelId,
|
|
27
27
|
onChange: () => {
|
|
28
28
|
selectValue(option.value);
|
|
29
29
|
},
|
|
@@ -3,7 +3,7 @@ import { cn } from "../../../helpers/cn.mjs";
|
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { useId, useRef, useState } from "react";
|
|
5
5
|
//#region src/components/form/radio-card/radio-card.tsx
|
|
6
|
-
const RadioCard = ({ labelId, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
|
|
6
|
+
const RadioCard = ({ labelId, name, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
|
|
7
7
|
const groupId = useId();
|
|
8
8
|
const buttonRefs = useRef([]);
|
|
9
9
|
const [internalValue, setInternalValue] = useState(defaultValue ?? options[0]?.value);
|
|
@@ -22,10 +22,14 @@ const RadioCard = ({ labelId, isDisabled, isInvalid = false, options, value, def
|
|
|
22
22
|
if (nextIndex >= options.length) return 0;
|
|
23
23
|
return nextIndex;
|
|
24
24
|
};
|
|
25
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ jsxs("fieldset", {
|
|
26
26
|
"aria-labelledby": labelId,
|
|
27
27
|
className: cn("m-0 w-full min-w-0 border-0 p-0", "grid gap-3", isDisabled && "opacity-70"),
|
|
28
|
-
children:
|
|
28
|
+
children: [name ? /* @__PURE__ */ jsx("input", {
|
|
29
|
+
name,
|
|
30
|
+
type: "hidden",
|
|
31
|
+
value: currentValue ?? ""
|
|
32
|
+
}) : null, options.map((option, index) => {
|
|
29
33
|
const checked = currentValue === option.value;
|
|
30
34
|
const disabled = isDisabled || option.disabled;
|
|
31
35
|
const optionId = `${groupId}-${option.value}`;
|
|
@@ -79,7 +83,7 @@ const RadioCard = ({ labelId, isDisabled, isInvalid = false, options, value, def
|
|
|
79
83
|
})
|
|
80
84
|
]
|
|
81
85
|
}, option.value);
|
|
82
|
-
})
|
|
86
|
+
})]
|
|
83
87
|
});
|
|
84
88
|
};
|
|
85
89
|
//#endregion
|
|
@@ -2,7 +2,7 @@ import { cn } from "../../../helpers/cn.mjs";
|
|
|
2
2
|
import { ChevronIcon } from "../../icons/lucide.mjs";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
//#region src/components/form/select/select.tsx
|
|
5
|
-
const Select = ({ id, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
|
|
5
|
+
const Select = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
|
|
6
6
|
return /* @__PURE__ */ jsxs("div", {
|
|
7
7
|
className: "relative h-fit w-full",
|
|
8
8
|
children: [/* @__PURE__ */ jsx("select", {
|
|
@@ -13,6 +13,7 @@ const Select = ({ id, describedbyId, isInvalid, isDisabled, isRequired, options,
|
|
|
13
13
|
defaultValue,
|
|
14
14
|
disabled: isDisabled,
|
|
15
15
|
id,
|
|
16
|
+
name,
|
|
16
17
|
onChange,
|
|
17
18
|
value,
|
|
18
19
|
children: options.map((option) => /* @__PURE__ */ jsx("option", {
|
|
@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
|
|
|
2
2
|
|
|
3
3
|
//#region src/components/icons/base.d.ts
|
|
4
4
|
type BaseIconProps = {
|
|
5
|
-
size: 'sm' | 'md' | 'lg';
|
|
5
|
+
size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
6
6
|
};
|
|
7
7
|
declare const BaseIcon: FC<BaseIconProps & {
|
|
8
8
|
renderItem: (arg: {
|
|
@@ -1,7 +1,16 @@
|
|
|
1
1
|
import { cn } from "../../helpers/cn.mjs";
|
|
2
2
|
//#region src/components/icons/base.tsx
|
|
3
|
+
const sizeClass = {
|
|
4
|
+
xs: "size-3",
|
|
5
|
+
sm: "size-4",
|
|
6
|
+
md: "size-6",
|
|
7
|
+
lg: "size-8",
|
|
8
|
+
xl: "size-10",
|
|
9
|
+
"2xl": "size-12",
|
|
10
|
+
"3xl": "size-14"
|
|
11
|
+
};
|
|
3
12
|
const BaseIcon = ({ size, renderItem }) => {
|
|
4
|
-
return renderItem({ className: cn(size
|
|
13
|
+
return renderItem({ className: cn(sizeClass[size]) });
|
|
5
14
|
};
|
|
6
15
|
//#endregion
|
|
7
16
|
export { BaseIcon };
|
|
@@ -52,5 +52,4 @@ import { Popover } from "./overlays/popover/popover.mjs";
|
|
|
52
52
|
import { Tooltip } from "./overlays/tooltip/tooltip.mjs";
|
|
53
53
|
import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
|
|
54
54
|
import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
|
|
55
|
-
|
|
56
|
-
export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ErrorBoundary, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
|
|
55
|
+
export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
|
|
@@ -52,5 +52,4 @@ import { Popover } from "./overlays/popover/popover.mjs";
|
|
|
52
52
|
import { DropdownMenu } from "./overlays/dropdown-menu/dropdown-menu.mjs";
|
|
53
53
|
import { ListBox } from "./overlays/list-box/list-box.mjs";
|
|
54
54
|
import { Tooltip } from "./overlays/tooltip/tooltip.mjs";
|
|
55
|
-
|
|
56
|
-
export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ErrorBoundary, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
|
|
55
|
+
export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
|
package/dist/index.d.mts
CHANGED
|
@@ -53,7 +53,6 @@ import { Popover } from "./components/overlays/popover/popover.mjs";
|
|
|
53
53
|
import { Tooltip } from "./components/overlays/tooltip/tooltip.mjs";
|
|
54
54
|
import { ArteOdysseyProvider } from "./components/providers/arte-odyssey-provider.mjs";
|
|
55
55
|
import { PortalRootProvider, usePortalRoot } from "./components/providers/portal-root.mjs";
|
|
56
|
-
import { ErrorBoundary } from "./components/utility/error-boundary/index.mjs";
|
|
57
56
|
import { cn } from "./helpers/cn.mjs";
|
|
58
57
|
import { findAllColors } from "./helpers/color/find-all-colors.mjs";
|
|
59
58
|
import { isInternalRoute } from "./helpers/is-internal-route.mjs";
|
|
@@ -74,4 +73,4 @@ import { useStep } from "./hooks/step/index.mjs";
|
|
|
74
73
|
import { useTimeout } from "./hooks/timeout/index.mjs";
|
|
75
74
|
import { useWindowResize } from "./hooks/window-resize/index.mjs";
|
|
76
75
|
import { useWindowSize } from "./hooks/window-size/index.mjs";
|
|
77
|
-
export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Direction, Drawer, DropdownMenu, EasyIcon,
|
|
76
|
+
export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Option, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useClickAway, useClient, useClipboard, useHash, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useStep, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };
|
package/dist/index.mjs
CHANGED
|
@@ -62,7 +62,6 @@ import { Popover } from "./components/overlays/popover/popover.mjs";
|
|
|
62
62
|
import { DropdownMenu } from "./components/overlays/dropdown-menu/dropdown-menu.mjs";
|
|
63
63
|
import { ListBox } from "./components/overlays/list-box/list-box.mjs";
|
|
64
64
|
import { Tooltip } from "./components/overlays/tooltip/tooltip.mjs";
|
|
65
|
-
import { ErrorBoundary } from "./components/utility/error-boundary/index.mjs";
|
|
66
65
|
import { useClient } from "./hooks/client/index.mjs";
|
|
67
66
|
import { useClipboard } from "./hooks/clipboard/index.mjs";
|
|
68
67
|
import { useHash } from "./hooks/hash/index.mjs";
|
|
@@ -73,4 +72,4 @@ import { useScrollDirection } from "./hooks/scroll-direction/index.mjs";
|
|
|
73
72
|
import { useStep } from "./hooks/step/index.mjs";
|
|
74
73
|
import { useWindowResize } from "./hooks/window-resize/index.mjs";
|
|
75
74
|
import { useWindowSize } from "./hooks/window-size/index.mjs";
|
|
76
|
-
export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon,
|
|
75
|
+
export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useClickAway, useClient, useClipboard, useHash, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useStep, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };
|