@k8o/arte-odyssey 1.4.2 → 1.4.3

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.
@@ -1,15 +1,23 @@
1
1
  import { type FC } from 'react';
2
2
  import type { Option } from '../../../types/variables';
3
- type Props = {
3
+ type BaseProps = {
4
4
  id: string;
5
5
  describedbyId: string | undefined;
6
6
  isInvalid: boolean;
7
7
  isDisabled: boolean;
8
8
  isRequired: boolean;
9
9
  options: readonly Option[];
10
- value?: string[];
11
- defaultValue?: string[];
10
+ };
11
+ type ControlledProps = {
12
+ value: string[];
12
13
  onChange: (value: string[]) => void;
14
+ defaultValue?: never;
15
+ };
16
+ type UncontrolledProps = {
17
+ defaultValue?: string[];
18
+ value?: never;
19
+ onChange?: (value: string[]) => void;
13
20
  };
21
+ type Props = BaseProps & (ControlledProps | UncontrolledProps);
14
22
  export declare const Autocomplete: FC<Props>;
15
23
  export {};
@@ -28,7 +28,7 @@ const Autocomplete = ({
28
28
  if (!isControlled) {
29
29
  setInternalValue(newValue);
30
30
  }
31
- onChange(newValue);
31
+ onChange?.(newValue);
32
32
  },
33
33
  [isControlled, onChange]
34
34
  );
@@ -4,7 +4,7 @@ import { Autocomplete } from "./autocomplete";
4
4
  const meta = {
5
5
  title: "components/form/autocomplete",
6
6
  component: Autocomplete,
7
- render: (props) => {
7
+ render: ({ id, describedbyId, isInvalid, isDisabled, isRequired }) => {
8
8
  const options = [
9
9
  { value: "2", label: "2\u9032\u6570" },
10
10
  { value: "8", label: "8\u9032\u6570" },
@@ -15,7 +15,11 @@ const meta = {
15
15
  return /* @__PURE__ */ jsx(
16
16
  Autocomplete,
17
17
  {
18
- ...props,
18
+ describedbyId,
19
+ id,
20
+ isDisabled,
21
+ isInvalid,
22
+ isRequired,
19
23
  onChange: setValue,
20
24
  options,
21
25
  value
@@ -1,9 +1,17 @@
1
1
  import { type ChangeEventHandler, type FC } from 'react';
2
- type Props = {
2
+ type BaseProps = {
3
3
  label: string;
4
+ };
5
+ type ControlledProps = {
4
6
  value: boolean;
5
- defaultChecked?: boolean;
6
7
  onChange: ChangeEventHandler<HTMLInputElement>;
8
+ defaultChecked?: never;
9
+ };
10
+ type UncontrolledProps = {
11
+ defaultChecked?: boolean;
12
+ value?: never;
13
+ onChange?: ChangeEventHandler<HTMLInputElement>;
7
14
  };
15
+ type Props = BaseProps & (ControlledProps | UncontrolledProps);
8
16
  export declare const Checkbox: FC<Props>;
9
17
  export {};
@@ -8,18 +8,28 @@ const Checkbox = ({
8
8
  defaultChecked,
9
9
  onChange
10
10
  }) => {
11
+ const [internalChecked, setInternalChecked] = useState(
12
+ defaultChecked ?? false
13
+ );
11
14
  const [isFocus, setIsFocus] = useState(false);
15
+ const isControlled = value !== void 0;
16
+ const checked = isControlled ? value : internalChecked;
12
17
  return /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2", children: [
13
18
  /* @__PURE__ */ jsx(
14
19
  "input",
15
20
  {
16
- checked: value,
21
+ checked: isControlled ? value : void 0,
17
22
  className: "sr-only",
18
- defaultChecked,
23
+ defaultChecked: isControlled ? void 0 : defaultChecked,
19
24
  onBlur: () => {
20
25
  setIsFocus(false);
21
26
  },
22
- onChange,
27
+ onChange: (e) => {
28
+ if (!isControlled) {
29
+ setInternalChecked(e.target.checked);
30
+ }
31
+ onChange?.(e);
32
+ },
23
33
  onFocus: () => {
24
34
  setIsFocus(true);
25
35
  },
@@ -33,9 +43,9 @@ const Checkbox = ({
33
43
  className: cn(
34
44
  "inline-flex size-5 items-center justify-center rounded-md border-2",
35
45
  isFocus && "bordertransparent outline-hidden ring-2 ring-border-info",
36
- value ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base"
46
+ checked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base"
37
47
  ),
38
- children: value ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : null
48
+ children: checked ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : null
39
49
  }
40
50
  ),
41
51
  /* @__PURE__ */ jsx("span", { className: "text-lg", children: label })
@@ -84,7 +84,7 @@ const Root = ({
84
84
  }),
85
85
  [isDisabled, isInvalid, acceptedFiles, onFileDelete, openFilePicker]
86
86
  );
87
- return /* @__PURE__ */ jsxs(FileFieldProvider, { value: contextValue, children: [
87
+ return /* @__PURE__ */ jsx(FileFieldProvider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
88
88
  /* @__PURE__ */ jsx(
89
89
  "input",
90
90
  {
@@ -104,7 +104,7 @@ const Root = ({
104
104
  }
105
105
  ),
106
106
  children
107
- ] });
107
+ ] }) });
108
108
  };
109
109
  const Trigger = ({ renderItem }) => {
110
110
  const context = useFileFieldContext();
@@ -1,18 +1,26 @@
1
1
  import { type FC } from 'react';
2
- type Props = {
2
+ type BaseProps = {
3
3
  id?: string;
4
4
  describedbyId?: string | undefined;
5
5
  isInvalid: boolean;
6
6
  isDisabled: boolean;
7
7
  isRequired: boolean;
8
- value: number;
9
- defaultValue?: number;
10
- onChange: (value: number) => void;
11
8
  step?: number;
12
9
  precision?: number;
13
10
  max?: number;
14
11
  min?: number;
15
12
  placeholder?: string;
16
13
  };
14
+ type ControlledProps = {
15
+ value: number;
16
+ onChange: (value: number) => void;
17
+ defaultValue?: never;
18
+ };
19
+ type UncontrolledProps = {
20
+ defaultValue?: number;
21
+ value?: never;
22
+ onChange?: (value: number) => void;
23
+ };
24
+ type Props = BaseProps & (ControlledProps | UncontrolledProps);
17
25
  export declare const NumberField: FC<Props>;
18
26
  export {};
@@ -18,16 +18,24 @@ const NumberField = ({
18
18
  min = -9007199254740991,
19
19
  placeholder
20
20
  }) => {
21
+ const isControlled = value !== void 0;
22
+ const initialValue = defaultValue ?? value ?? 0;
23
+ const [internalValue, setInternalValue] = useState(initialValue);
21
24
  const [displayValue, setDisplayValue] = useState(
22
- defaultValue !== void 0 ? defaultValue.toFixed(precision) : value.toFixed(precision)
25
+ initialValue.toFixed(precision)
23
26
  );
24
- const [prevValue, setPrevValue] = useState(
25
- defaultValue !== void 0 ? defaultValue : value
26
- );
27
- if (value !== prevValue) {
27
+ const [prevValue, setPrevValue] = useState(initialValue);
28
+ const currentValue = isControlled ? value : internalValue;
29
+ if (isControlled && value !== prevValue) {
28
30
  setDisplayValue(value.toFixed(precision));
29
31
  setPrevValue(value);
30
32
  }
33
+ const handleChange = (newValue) => {
34
+ if (!isControlled) {
35
+ setInternalValue(newValue);
36
+ }
37
+ onChange?.(newValue);
38
+ };
31
39
  return /* @__PURE__ */ jsxs(
32
40
  "div",
33
41
  {
@@ -46,7 +54,7 @@ const NumberField = ({
46
54
  "aria-required": isRequired,
47
55
  "aria-valuemax": max,
48
56
  "aria-valuemin": min,
49
- "aria-valuenow": value,
57
+ "aria-valuenow": currentValue,
50
58
  autoComplete: "off",
51
59
  autoCorrect: "off",
52
60
  className: cn(
@@ -58,7 +66,7 @@ const NumberField = ({
58
66
  inputMode: "decimal",
59
67
  onBlur: () => {
60
68
  const newValue = between(cast(displayValue, precision), min, max);
61
- onChange(newValue);
69
+ handleChange(newValue);
62
70
  setDisplayValue(newValue.toFixed(precision));
63
71
  },
64
72
  onChange: (e) => {
@@ -74,7 +82,7 @@ const NumberField = ({
74
82
  min,
75
83
  max
76
84
  );
77
- onChange(newValue);
85
+ handleChange(newValue);
78
86
  setDisplayValue(newValue.toFixed(precision));
79
87
  }
80
88
  if (e.key === "ArrowDown") {
@@ -83,7 +91,7 @@ const NumberField = ({
83
91
  min,
84
92
  max
85
93
  );
86
- onChange(newValue);
94
+ handleChange(newValue);
87
95
  setDisplayValue(newValue.toFixed(precision));
88
96
  }
89
97
  },
@@ -109,7 +117,7 @@ const NumberField = ({
109
117
  min,
110
118
  max
111
119
  );
112
- onChange(newValue);
120
+ handleChange(newValue);
113
121
  setDisplayValue(newValue.toFixed(precision));
114
122
  },
115
123
  tabIndex: -1,
@@ -134,7 +142,7 @@ const NumberField = ({
134
142
  min,
135
143
  max
136
144
  );
137
- onChange(newValue);
145
+ handleChange(newValue);
138
146
  setDisplayValue(newValue.toFixed(precision));
139
147
  },
140
148
  tabIndex: -1,
@@ -9,9 +9,36 @@ const meta = {
9
9
  id: "textfield",
10
10
  describedbyId: "numberfield-feedback"
11
11
  },
12
- render: (args) => {
12
+ render: ({
13
+ id,
14
+ describedbyId,
15
+ isInvalid,
16
+ isDisabled,
17
+ isRequired,
18
+ step,
19
+ precision,
20
+ max,
21
+ min,
22
+ placeholder
23
+ }) => {
13
24
  const [value, setValue] = useState(0);
14
- return /* @__PURE__ */ jsx(NumberField, { ...args, onChange: setValue, value });
25
+ return /* @__PURE__ */ jsx(
26
+ NumberField,
27
+ {
28
+ describedbyId,
29
+ id,
30
+ isDisabled,
31
+ isInvalid,
32
+ isRequired,
33
+ max,
34
+ min,
35
+ onChange: setValue,
36
+ placeholder,
37
+ precision,
38
+ step,
39
+ value
40
+ }
41
+ );
15
42
  },
16
43
  parameters: {
17
44
  a11y: {
@@ -1,12 +1,20 @@
1
1
  import type { ChangeEventHandler, FC } from 'react';
2
2
  import type { Option } from '../../../types/variables';
3
- type Props = {
3
+ type BaseProps = {
4
4
  labelId: string;
5
5
  isDisabled: boolean;
6
+ options: readonly Option[];
7
+ };
8
+ type ControlledProps = {
6
9
  value: string;
7
- defaultValue?: string;
8
10
  onChange: ChangeEventHandler<HTMLInputElement>;
9
- options: readonly Option[];
11
+ defaultValue?: never;
12
+ };
13
+ type UncontrolledProps = {
14
+ defaultValue?: string;
15
+ value?: never;
16
+ onChange?: ChangeEventHandler<HTMLInputElement>;
10
17
  };
18
+ type Props = BaseProps & (ControlledProps | UncontrolledProps);
11
19
  export declare const Radio: FC<Props>;
12
20
  export {};
@@ -28,12 +28,12 @@ const Radio = ({
28
28
  /* @__PURE__ */ jsx(
29
29
  "input",
30
30
  {
31
- checked: value === option.value,
31
+ checked: value !== void 0 ? value === option.value : void 0,
32
32
  className: cn(
33
33
  "cursor-pointer",
34
34
  "disabled:cursor-not-allowed disabled:bg-bg-mute"
35
35
  ),
36
- defaultChecked: defaultValue === option.value,
36
+ defaultChecked: defaultValue !== void 0 ? defaultValue === option.value : void 0,
37
37
  disabled: isDisabled,
38
38
  onChange,
39
39
  type: "radio",
@@ -1,18 +1,26 @@
1
- import type { FC } from 'react';
2
- type Props = {
1
+ import { type FC } from 'react';
2
+ type BaseProps = {
3
3
  id?: string;
4
4
  describedbyId?: string | undefined;
5
5
  isInvalid: boolean;
6
6
  isDisabled: boolean;
7
7
  isRequired: boolean;
8
- value: number;
9
- defaultValue?: number;
10
- onChange: (value: number) => void;
11
8
  step?: number;
12
9
  max?: number;
13
10
  min?: number;
14
11
  showValue?: boolean;
15
12
  unit?: string;
16
13
  };
14
+ type ControlledProps = {
15
+ value: number;
16
+ onChange: (value: number) => void;
17
+ defaultValue?: never;
18
+ };
19
+ type UncontrolledProps = {
20
+ defaultValue?: number;
21
+ value?: never;
22
+ onChange?: (value: number) => void;
23
+ };
24
+ type Props = BaseProps & (ControlledProps | UncontrolledProps);
17
25
  export declare const RangeField: FC<Props>;
18
26
  export {};
@@ -1,4 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useState } from "react";
2
3
  import { cn } from "./../../../helpers/cn";
3
4
  const RangeField = ({
4
5
  id,
@@ -15,7 +16,17 @@ const RangeField = ({
15
16
  showValue = true,
16
17
  unit = ""
17
18
  }) => {
18
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
19
+ const isControlled = value !== void 0;
20
+ const initialValue = defaultValue ?? value ?? min;
21
+ const [internalValue, setInternalValue] = useState(initialValue);
22
+ const currentValue = isControlled ? value : internalValue;
23
+ const handleChange = (newValue) => {
24
+ if (!isControlled) {
25
+ setInternalValue(newValue);
26
+ }
27
+ onChange?.(newValue);
28
+ };
29
+ return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-4", children: [
19
30
  /* @__PURE__ */ jsx(
20
31
  "input",
21
32
  {
@@ -23,7 +34,7 @@ const RangeField = ({
23
34
  "aria-invalid": isInvalid,
24
35
  "aria-valuemax": max,
25
36
  "aria-valuemin": min,
26
- "aria-valuenow": value,
37
+ "aria-valuenow": currentValue,
27
38
  className: cn(
28
39
  "h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-bg-subtle",
29
40
  "range-slider",
@@ -31,22 +42,22 @@ const RangeField = ({
31
42
  "disabled:cursor-not-allowed disabled:opacity-50",
32
43
  isInvalid && "ring-2 ring-border-error"
33
44
  ),
34
- defaultValue,
45
+ defaultValue: isControlled ? void 0 : defaultValue,
35
46
  disabled: isDisabled,
36
47
  id,
37
48
  max,
38
49
  min,
39
50
  onChange: (e) => {
40
- onChange(Number(e.target.value));
51
+ handleChange(Number(e.target.value));
41
52
  },
42
53
  required: isRequired,
43
54
  step,
44
55
  type: "range",
45
- value
56
+ value: isControlled ? value : void 0
46
57
  }
47
58
  ),
48
59
  showValue && /* @__PURE__ */ jsxs("span", { className: "w-16 text-fg-base text-sm", children: [
49
- value,
60
+ currentValue,
50
61
  unit
51
62
  ] })
52
63
  ] });
@@ -22,22 +22,38 @@ const meta = {
22
22
  };
23
23
  var range_field_stories_default = meta;
24
24
  const Default = {
25
- render: (args) => {
26
- const [value, setValue] = useState(args.value || 50);
25
+ render: ({
26
+ id,
27
+ describedbyId,
28
+ isInvalid,
29
+ isDisabled,
30
+ isRequired,
31
+ step,
32
+ max,
33
+ min,
34
+ showValue,
35
+ unit
36
+ }) => {
37
+ const [value, setValue] = useState(50);
27
38
  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
28
39
  RangeField,
29
40
  {
30
- ...args,
31
- onChange: (newValue) => {
32
- setValue(newValue);
33
- args.onChange(newValue);
34
- },
41
+ describedbyId,
42
+ id,
43
+ isDisabled,
44
+ isInvalid,
45
+ isRequired,
46
+ max,
47
+ min,
48
+ onChange: setValue,
49
+ showValue,
50
+ step,
51
+ unit,
35
52
  value
36
53
  }
37
54
  ) });
38
55
  },
39
56
  args: {
40
- value: 50,
41
57
  min: 0,
42
58
  max: 100,
43
59
  step: 1,
@@ -48,22 +64,38 @@ const Default = {
48
64
  }
49
65
  };
50
66
  const WithUnit = {
51
- render: (args) => {
52
- const [value, setValue] = useState(args.value || 200);
67
+ render: ({
68
+ id,
69
+ describedbyId,
70
+ isInvalid,
71
+ isDisabled,
72
+ isRequired,
73
+ step,
74
+ max,
75
+ min,
76
+ showValue,
77
+ unit
78
+ }) => {
79
+ const [value, setValue] = useState(200);
53
80
  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
54
81
  RangeField,
55
82
  {
56
- ...args,
57
- onChange: (newValue) => {
58
- setValue(newValue);
59
- args.onChange(newValue);
60
- },
83
+ describedbyId,
84
+ id,
85
+ isDisabled,
86
+ isInvalid,
87
+ isRequired,
88
+ max,
89
+ min,
90
+ onChange: setValue,
91
+ showValue,
92
+ step,
93
+ unit,
61
94
  value
62
95
  }
63
96
  ) });
64
97
  },
65
98
  args: {
66
- value: 200,
67
99
  min: 100,
68
100
  max: 500,
69
101
  step: 10,
@@ -75,22 +107,38 @@ const WithUnit = {
75
107
  }
76
108
  };
77
109
  const WithoutValue = {
78
- render: (args) => {
79
- const [value, setValue] = useState(args.value || 75);
110
+ render: ({
111
+ id,
112
+ describedbyId,
113
+ isInvalid,
114
+ isDisabled,
115
+ isRequired,
116
+ step,
117
+ max,
118
+ min,
119
+ showValue,
120
+ unit
121
+ }) => {
122
+ const [value, setValue] = useState(75);
80
123
  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
81
124
  RangeField,
82
125
  {
83
- ...args,
84
- onChange: (newValue) => {
85
- setValue(newValue);
86
- args.onChange(newValue);
87
- },
126
+ describedbyId,
127
+ id,
128
+ isDisabled,
129
+ isInvalid,
130
+ isRequired,
131
+ max,
132
+ min,
133
+ onChange: setValue,
134
+ showValue,
135
+ step,
136
+ unit,
88
137
  value
89
138
  }
90
139
  ) });
91
140
  },
92
141
  args: {
93
- value: 75,
94
142
  min: 0,
95
143
  max: 100,
96
144
  step: 5,
@@ -101,22 +149,38 @@ const WithoutValue = {
101
149
  }
102
150
  };
103
151
  const Disabled = {
104
- render: (args) => {
105
- const [value, setValue] = useState(args.value || 30);
152
+ render: ({
153
+ id,
154
+ describedbyId,
155
+ isInvalid,
156
+ isDisabled,
157
+ isRequired,
158
+ step,
159
+ max,
160
+ min,
161
+ showValue,
162
+ unit
163
+ }) => {
164
+ const [value, setValue] = useState(30);
106
165
  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
107
166
  RangeField,
108
167
  {
109
- ...args,
110
- onChange: (newValue) => {
111
- setValue(newValue);
112
- args.onChange(newValue);
113
- },
168
+ describedbyId,
169
+ id,
170
+ isDisabled,
171
+ isInvalid,
172
+ isRequired,
173
+ max,
174
+ min,
175
+ onChange: setValue,
176
+ showValue,
177
+ step,
178
+ unit,
114
179
  value
115
180
  }
116
181
  ) });
117
182
  },
118
183
  args: {
119
- value: 30,
120
184
  min: 0,
121
185
  max: 100,
122
186
  step: 1,
@@ -127,22 +191,38 @@ const Disabled = {
127
191
  }
128
192
  };
129
193
  const Invalid = {
130
- render: (args) => {
131
- const [value, setValue] = useState(args.value || 90);
194
+ render: ({
195
+ id,
196
+ describedbyId,
197
+ isInvalid,
198
+ isDisabled,
199
+ isRequired,
200
+ step,
201
+ max,
202
+ min,
203
+ showValue,
204
+ unit
205
+ }) => {
206
+ const [value, setValue] = useState(90);
132
207
  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
133
208
  RangeField,
134
209
  {
135
- ...args,
136
- onChange: (newValue) => {
137
- setValue(newValue);
138
- args.onChange(newValue);
139
- },
210
+ describedbyId,
211
+ id,
212
+ isDisabled,
213
+ isInvalid,
214
+ isRequired,
215
+ max,
216
+ min,
217
+ onChange: setValue,
218
+ showValue,
219
+ step,
220
+ unit,
140
221
  value
141
222
  }
142
223
  ) });
143
224
  },
144
225
  args: {
145
- value: 90,
146
226
  min: 0,
147
227
  max: 100,
148
228
  step: 1,
@@ -1,15 +1,23 @@
1
1
  import type { ChangeEventHandler, FC } from 'react';
2
2
  import type { Option } from '../../../types/variables';
3
- type Props = {
3
+ type BaseProps = {
4
4
  id: string;
5
5
  describedbyId: string | undefined;
6
6
  isInvalid: boolean;
7
7
  isDisabled: boolean;
8
8
  isRequired: boolean;
9
9
  options: readonly Option[];
10
+ };
11
+ type ControlledProps = {
10
12
  value: string;
11
- defaultValue?: string;
12
13
  onChange: ChangeEventHandler<HTMLSelectElement>;
14
+ defaultValue?: never;
15
+ };
16
+ type UncontrolledProps = {
17
+ defaultValue?: string;
18
+ value?: never;
19
+ onChange?: ChangeEventHandler<HTMLSelectElement>;
13
20
  };
21
+ type Props = BaseProps & (ControlledProps | UncontrolledProps);
14
22
  export declare const Select: FC<Props>;
15
23
  export {};
@@ -33,7 +33,7 @@ const Select = ({
33
33
  children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
34
34
  }
35
35
  ),
36
- /* @__PURE__ */ jsx("div", { className: "-translate-y-1/2 absolute top-2/4 right-3", children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down", size: "sm" }) })
36
+ /* @__PURE__ */ jsx("div", { className: "absolute top-2/4 right-3 -translate-y-1/2", children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down", size: "sm" }) })
37
37
  ] });
38
38
  };
39
39
  export {
@@ -1,5 +1,5 @@
1
1
  import type { ChangeEventHandler, FC } from 'react';
2
- type Props = {
2
+ type BaseProps = {
3
3
  id?: string;
4
4
  name?: string;
5
5
  describedbyId?: string | undefined;
@@ -7,9 +7,17 @@ type Props = {
7
7
  isDisabled: boolean;
8
8
  isRequired: boolean;
9
9
  placeholder?: string;
10
+ };
11
+ type ControlledProps = {
12
+ value: string;
13
+ onChange: ChangeEventHandler<HTMLInputElement>;
14
+ defaultValue?: never;
15
+ };
16
+ type UncontrolledProps = {
10
17
  defaultValue?: string;
11
- value?: string;
18
+ value?: never;
12
19
  onChange?: ChangeEventHandler<HTMLInputElement>;
13
20
  };
21
+ type Props = BaseProps & (ControlledProps | UncontrolledProps);
14
22
  export declare const TextField: FC<Props>;
15
23
  export {};
@@ -1,5 +1,5 @@
1
1
  import { type ChangeEventHandler, type FC } from 'react';
2
- type Props = {
2
+ type BaseProps = {
3
3
  id: string;
4
4
  name?: string;
5
5
  describedbyId: string | undefined;
@@ -10,9 +10,17 @@ type Props = {
10
10
  rows?: number;
11
11
  fullHeight?: boolean;
12
12
  autoResize?: boolean;
13
+ };
14
+ type ControlledProps = {
15
+ value: string;
16
+ onChange: ChangeEventHandler<HTMLTextAreaElement>;
17
+ defaultValue?: never;
18
+ };
19
+ type UncontrolledProps = {
13
20
  defaultValue?: string;
14
- value?: string;
21
+ value?: never;
15
22
  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
16
23
  };
24
+ type Props = BaseProps & (ControlledProps | UncontrolledProps);
17
25
  export declare const Textarea: FC<Props>;
18
26
  export {};
@@ -106,7 +106,7 @@ const Tab = ({ id, children }) => {
106
106
  selectedId === id && /* @__PURE__ */ jsx(
107
107
  motion.div,
108
108
  {
109
- className: "-bottom-0.5 absolute right-0 left-0 h-1 bg-primary-border",
109
+ className: "absolute right-0 -bottom-0.5 left-0 h-1 bg-primary-border",
110
110
  layoutId: "underline"
111
111
  }
112
112
  ),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@k8o/arte-odyssey",
3
- "version": "1.4.2",
3
+ "version": "1.4.3",
4
4
  "description": "k8o's react ui library",
5
5
  "author": "k8o <kosakanoki@gmail.com>",
6
6
  "keywords": [
@@ -53,34 +53,34 @@
53
53
  ],
54
54
  "dependencies": {
55
55
  "@floating-ui/react": "0.27.16",
56
- "baseline-status": "1.0.11",
56
+ "baseline-status": "1.1.1",
57
57
  "clsx": "2.1.1",
58
- "esbuild": "0.27.0",
59
- "lucide-react": "0.555.0",
60
- "motion": "12.23.24",
58
+ "esbuild": "0.27.2",
59
+ "lucide-react": "0.562.0",
60
+ "motion": "12.23.26",
61
61
  "react-error-boundary": "6.0.0",
62
62
  "tailwind-merge": "3.4.0"
63
63
  },
64
64
  "devDependencies": {
65
65
  "@chromatic-com/storybook": "4.1.3",
66
- "@storybook/addon-a11y": "10.1.2",
67
- "@storybook/addon-docs": "10.1.2",
68
- "@storybook/addon-vitest": "10.1.2",
69
- "@storybook/react-vite": "10.1.2",
70
- "@tailwindcss/postcss": "4.1.17",
66
+ "@storybook/addon-a11y": "10.1.10",
67
+ "@storybook/addon-docs": "10.1.10",
68
+ "@storybook/addon-vitest": "10.1.10",
69
+ "@storybook/react-vite": "10.1.10",
70
+ "@tailwindcss/postcss": "4.1.18",
71
71
  "@types/react": "19.2.7",
72
72
  "@types/react-dom": "19.2.3",
73
73
  "@vitejs/plugin-react-swc": "4.2.2",
74
- "@vitest/browser-playwright": "4.0.14",
75
- "@vitest/ui": "4.0.14",
74
+ "@vitest/browser-playwright": "4.0.16",
75
+ "@vitest/ui": "4.0.16",
76
76
  "postcss": "8.5.6",
77
77
  "react": "19.2.3",
78
78
  "react-dom": "19.2.3",
79
- "storybook": "10.1.2",
80
- "storybook-addon-mock-date": "1.0.2",
81
- "tailwindcss": "4.1.17",
82
- "vite": "7.2.4",
83
- "vitest": "4.0.14",
79
+ "storybook": "10.1.10",
80
+ "storybook-addon-mock-date": "2.0.0",
81
+ "tailwindcss": "4.1.18",
82
+ "vite": "7.3.0",
83
+ "vitest": "4.0.16",
84
84
  "vitest-browser-react": "2.0.2"
85
85
  },
86
86
  "peerDependencies": {
@@ -104,6 +104,6 @@
104
104
  "test:coverage": "vitest run --coverage",
105
105
  "typecheck": "tsc --noEmit",
106
106
  "check": "biome check",
107
- "check:write": "biome check --write"
107
+ "check:write": "biome check --write --unsafe"
108
108
  }
109
109
  }