@k8o/arte-odyssey 1.4.2 → 2.0.0

package/dist/components/form/file-field/file-field.js

@@ -84,7 +84,7 @@ const Root = ({
     }),
     [isDisabled, isInvalid, acceptedFiles, onFileDelete, openFilePicker]
   );
-  return /* @__PURE__ */ jsxs(FileFieldProvider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsx(FileFieldProvider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -104,7 +104,7 @@ const Root = ({
       }
     ),
     children
-  ] });
+  ] }) });
 };
 const Trigger = ({ renderItem }) => {
   const context = useFileFieldContext();
@@ -126,7 +126,7 @@ const ItemList = ({ showWebkitRelativePath, clearable }) => {
     return /* @__PURE__ */ jsxs(
       "li",
       {
-        className: "flex items-center justify-between rounded-md border border-border-base bg-bg-base px-3 py-2",
+        className: "flex items-center justify-between rounded-lg border border-border-base bg-bg-base px-3 py-2",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ jsx("span", { className: "font-medium text-fg-base text-sm", children: showWebkitRelativePath ? file.webkitRelativePath : file.name }),

package/dist/components/form/number-field/number-field.d.ts

@@ -1,18 +1,26 @@
 import { type FC } from 'react';
-type Props = {
+type BaseProps = {
     id?: string;
     describedbyId?: string | undefined;
     isInvalid: boolean;
     isDisabled: boolean;
     isRequired: boolean;
-    value: number;
-    defaultValue?: number;
-    onChange: (value: number) => void;
     step?: number;
     precision?: number;
     max?: number;
     min?: number;
     placeholder?: string;
 };
+type ControlledProps = {
+    value: number;
+    onChange: (value: number) => void;
+    defaultValue?: never;
+};
+type UncontrolledProps = {
+    defaultValue?: number;
+    value?: never;
+    onChange?: (value: number) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
 export declare const NumberField: FC<Props>;
 export {};

package/dist/components/form/number-field/number-field.js

@@ -18,22 +18,30 @@ const NumberField = ({
   min = -9007199254740991,
   placeholder
 }) => {
+  const isControlled = value !== void 0;
+  const initialValue = defaultValue ?? value ?? 0;
+  const [internalValue, setInternalValue] = useState(initialValue);
   const [displayValue, setDisplayValue] = useState(
-    defaultValue !== void 0 ? defaultValue.toFixed(precision) : value.toFixed(precision)
+    initialValue.toFixed(precision)
   );
-  const [prevValue, setPrevValue] = useState(
-    defaultValue !== void 0 ? defaultValue : value
-  );
-  if (value !== prevValue) {
+  const [prevValue, setPrevValue] = useState(initialValue);
+  const currentValue = isControlled ? value : internalValue;
+  if (isControlled && value !== prevValue) {
     setDisplayValue(value.toFixed(precision));
     setPrevValue(value);
   }
+  const handleChange = (newValue) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "relative flex h-12 w-full items-center justify-between gap-2 rounded-md border border-border-base bg-bg-base shadow-xs",
-        "focus-within:bordertransparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info",
+        "relative flex h-12 w-full items-center justify-between gap-2 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"
       ),
@@ -46,7 +54,7 @@ const NumberField = ({
             "aria-required": isRequired,
             "aria-valuemax": max,
             "aria-valuemin": min,
-            "aria-valuenow": value,
+            "aria-valuenow": currentValue,
             autoComplete: "off",
             autoCorrect: "off",
             className: cn(
@@ -58,7 +66,7 @@ const NumberField = ({
             inputMode: "decimal",
             onBlur: () => {
               const newValue = between(cast(displayValue, precision), min, max);
-              onChange(newValue);
+              handleChange(newValue);
               setDisplayValue(newValue.toFixed(precision));
             },
             onChange: (e) => {
@@ -74,7 +82,7 @@ const NumberField = ({
                   min,
                   max
                 );
-                onChange(newValue);
+                handleChange(newValue);
                 setDisplayValue(newValue.toFixed(precision));
               }
               if (e.key === "ArrowDown") {
@@ -83,7 +91,7 @@ const NumberField = ({
                   min,
                   max
                 );
-                onChange(newValue);
+                handleChange(newValue);
                 setDisplayValue(newValue.toFixed(precision));
               }
             },
@@ -109,7 +117,7 @@ const NumberField = ({
                   min,
                   max
                 );
-                onChange(newValue);
+                handleChange(newValue);
                 setDisplayValue(newValue.toFixed(precision));
               },
               tabIndex: -1,
@@ -134,7 +142,7 @@ const NumberField = ({
                   min,
                   max
                 );
-                onChange(newValue);
+                handleChange(newValue);
                 setDisplayValue(newValue.toFixed(precision));
               },
               tabIndex: -1,

package/dist/components/form/number-field/number-field.stories.js

@@ -1,5 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
 import { expect } from "storybook/test";
 import { NumberField } from "./number-field";
 const meta = {
@@ -7,11 +5,8 @@ const meta = {
   component: NumberField,
   args: {
     id: "textfield",
-    describedbyId: "numberfield-feedback"
-  },
-  render: (args) => {
-    const [value, setValue] = useState(0);
-    return /* @__PURE__ */ jsx(NumberField, { ...args, onChange: setValue, value });
+    describedbyId: "numberfield-feedback",
+    defaultValue: 0
   },
   parameters: {
     a11y: {

package/dist/components/form/radio/radio.d.ts

@@ -1,12 +1,21 @@
 import type { ChangeEventHandler, FC } from 'react';
 import type { Option } from '../../../types/variables';
-type Props = {
+type BaseProps = {
+    name: string;
     labelId: string;
     isDisabled: boolean;
+    options: readonly Option[];
+};
+type ControlledProps = {
     value: string;
-    defaultValue?: string;
     onChange: ChangeEventHandler<HTMLInputElement>;
-    options: readonly Option[];
+    defaultValue?: never;
+};
+type UncontrolledProps = {
+    defaultValue?: string;
+    value?: never;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
 };
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
 export declare const Radio: FC<Props>;
 export {};

package/dist/components/form/radio/radio.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "./../../../helpers/cn";
 const Radio = ({
+  name,
   labelId,
   isDisabled,
   value,
@@ -28,13 +29,14 @@ const Radio = ({
             /* @__PURE__ */ jsx(
               "input",
               {
-                checked: value === option.value,
+                checked: value !== void 0 ? value === option.value : void 0,
                 className: cn(
                   "cursor-pointer",
                   "disabled:cursor-not-allowed disabled:bg-bg-mute"
                 ),
-                defaultChecked: defaultValue === option.value,
+                defaultChecked: defaultValue !== void 0 ? defaultValue === option.value : void 0,
                 disabled: isDisabled,
+                name,
                 onChange,
                 type: "radio",
                 value: option.value

package/dist/components/form/radio/radio.stories.js

@@ -1,51 +1,26 @@
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
 import { Radio } from "./radio";
 const meta = {
   title: "components/form/radio",
-  component: Radio
+  component: Radio,
+  args: {
+    name: "radio-group",
+    labelId: "radio",
+    options: [
+      { value: "0", label: "\u306F\u3044" },
+      { value: "1", label: "\u3044\u3044\u3048" }
+    ],
+    defaultValue: "0"
+  }
 };
 var radio_stories_default = meta;
 const Default = {
-  render: () => {
-    const options = [
-      { value: "0", label: "\u306F\u3044" },
-      { value: "1", label: "\u3044\u3044\u3048" }
-    ];
-    const [value, setValue] = useState("0");
-    return /* @__PURE__ */ jsx(
-      Radio,
-      {
-        isDisabled: false,
-        labelId: "radio",
-        onChange: (e) => {
-          setValue(e.target.value);
-        },
-        options,
-        value
-      }
-    );
+  args: {
+    isDisabled: false
   }
 };
 const Disabled = {
-  render: () => {
-    const options = [
-      { value: "0", label: "\u306F\u3044" },
-      { value: "1", label: "\u3044\u3044\u3048" }
-    ];
-    const [value, setValue] = useState("0");
-    return /* @__PURE__ */ jsx(
-      Radio,
-      {
-        isDisabled: true,
-        labelId: "radio",
-        onChange: (e) => {
-          setValue(e.target.value);
-        },
-        options,
-        value
-      }
-    );
+  args: {
+    isDisabled: true
   }
 };
 export {

package/dist/components/form/range-field/range-field.d.ts

@@ -1,18 +1,26 @@
-import type { FC } from 'react';
-type Props = {
+import { type FC } from 'react';
+type BaseProps = {
     id?: string;
     describedbyId?: string | undefined;
     isInvalid: boolean;
     isDisabled: boolean;
     isRequired: boolean;
-    value: number;
-    defaultValue?: number;
-    onChange: (value: number) => void;
     step?: number;
     max?: number;
     min?: number;
     showValue?: boolean;
     unit?: string;
 };
+type ControlledProps = {
+    value: number;
+    onChange: (value: number) => void;
+    defaultValue?: never;
+};
+type UncontrolledProps = {
+    defaultValue?: number;
+    value?: never;
+    onChange?: (value: number) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
 export declare const RangeField: FC<Props>;
 export {};

package/dist/components/form/range-field/range-field.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { cn } from "./../../../helpers/cn";
 const RangeField = ({
   id,
@@ -15,7 +16,17 @@ const RangeField = ({
   showValue = true,
   unit = ""
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+  const isControlled = value !== void 0;
+  const initialValue = defaultValue ?? value ?? min;
+  const [internalValue, setInternalValue] = useState(initialValue);
+  const currentValue = isControlled ? value : internalValue;
+  const handleChange = (newValue) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-4", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -23,30 +34,29 @@ const RangeField = ({
         "aria-invalid": isInvalid,
         "aria-valuemax": max,
         "aria-valuemin": min,
-        "aria-valuenow": value,
+        "aria-valuenow": currentValue,
         className: cn(
-          "h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-bg-subtle",
-          "range-slider",
-          "focus:outline-none focus:ring-2 focus:ring-border-info focus:ring-opacity-50",
+          "h-2 flex-1 cursor-pointer rounded-full bg-bg-subtle",
+          "focus:outline-none focus:ring-2 focus:ring-border-info",
           "disabled:cursor-not-allowed disabled:opacity-50",
           isInvalid && "ring-2 ring-border-error"
         ),
-        defaultValue,
+        defaultValue: isControlled ? void 0 : defaultValue,
         disabled: isDisabled,
         id,
         max,
         min,
         onChange: (e) => {
-          onChange(Number(e.target.value));
+          handleChange(Number(e.target.value));
         },
         required: isRequired,
         step,
         type: "range",
-        value
+        value: isControlled ? value : void 0
       }
     ),
     showValue && /* @__PURE__ */ jsxs("span", { className: "w-16 text-fg-base text-sm", children: [
-      value,
+      currentValue,
       unit
     ] })
   ] });

package/dist/components/form/range-field/range-field.stories.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
 import { RangeField } from "./range-field";
 const meta = {
   title: "components/form/RangeField",
@@ -16,140 +15,48 @@ const meta = {
       }
     }
   },
-  argTypes: {
-    onChange: { action: "changed" }
-  }
-};
-var range_field_stories_default = meta;
-const Default = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value || 50);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        ...args,
-        onChange: (newValue) => {
-          setValue(newValue);
-          args.onChange(newValue);
-        },
-        value
-      }
-    ) });
-  },
+  decorators: [
+    (Story) => /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(Story, {}) })
+  ],
   args: {
-    value: 50,
     min: 0,
     max: 100,
     step: 1,
     isInvalid: false,
     isDisabled: false,
     isRequired: false,
-    showValue: true
+    showValue: true,
+    defaultValue: 50
   }
 };
+var range_field_stories_default = meta;
+const Default = {};
 const WithUnit = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value || 200);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        ...args,
-        onChange: (newValue) => {
-          setValue(newValue);
-          args.onChange(newValue);
-        },
-        value
-      }
-    ) });
-  },
   args: {
-    value: 200,
     min: 100,
     max: 500,
     step: 10,
     unit: "px",
-    isInvalid: false,
-    isDisabled: false,
-    isRequired: false,
-    showValue: true
+    defaultValue: 200
   }
 };
 const WithoutValue = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value || 75);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        ...args,
-        onChange: (newValue) => {
-          setValue(newValue);
-          args.onChange(newValue);
-        },
-        value
-      }
-    ) });
-  },
   args: {
-    value: 75,
-    min: 0,
-    max: 100,
     step: 5,
     showValue: false,
-    isInvalid: false,
-    isDisabled: false,
-    isRequired: false
+    defaultValue: 75
   }
 };
 const Disabled = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value || 30);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        ...args,
-        onChange: (newValue) => {
-          setValue(newValue);
-          args.onChange(newValue);
-        },
-        value
-      }
-    ) });
-  },
   args: {
-    value: 30,
-    min: 0,
-    max: 100,
-    step: 1,
-    isInvalid: false,
     isDisabled: true,
-    isRequired: false,
-    showValue: true
+    defaultValue: 30
   }
 };
 const Invalid = {
-  render: (args) => {
-    const [value, setValue] = useState(args.value || 90);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        ...args,
-        onChange: (newValue) => {
-          setValue(newValue);
-          args.onChange(newValue);
-        },
-        value
-      }
-    ) });
-  },
   args: {
-    value: 90,
-    min: 0,
-    max: 100,
-    step: 1,
     isInvalid: true,
-    isDisabled: false,
-    isRequired: false,
-    showValue: true
+    defaultValue: 90
   }
 };
 export {

package/dist/components/form/select/select.d.ts

@@ -1,15 +1,23 @@
 import type { ChangeEventHandler, FC } from 'react';
 import type { Option } from '../../../types/variables';
-type Props = {
+type BaseProps = {
     id: string;
     describedbyId: string | undefined;
     isInvalid: boolean;
     isDisabled: boolean;
     isRequired: boolean;
     options: readonly Option[];
+};
+type ControlledProps = {
     value: string;
-    defaultValue?: string;
     onChange: ChangeEventHandler<HTMLSelectElement>;
+    defaultValue?: never;
+};
+type UncontrolledProps = {
+    defaultValue?: string;
+    value?: never;
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
 };
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
 export declare const Select: FC<Props>;
 export {};

package/dist/components/form/select/select.js

@@ -20,7 +20,7 @@ const Select = ({
         "aria-invalid": isInvalid,
         "aria-required": isRequired,
         className: cn(
-          "w-full appearance-none rounded-md border border-border-base bg-bg-base px-3 py-2 shadow-xs",
+          "w-full appearance-none rounded-lg border border-border-base bg-bg-base px-3 py-2 text-fg-base",
           "aria-invalid:border-border-error",
           "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute disabled:hover:bg-bg-mute",
           "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"
@@ -33,7 +33,7 @@ const Select = ({
         children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "-translate-y-1/2 absolute top-2/4 right-3", children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down", size: "sm" }) })
+    /* @__PURE__ */ jsx("div", { className: "absolute top-2/4 right-3 -translate-y-1/2", children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down", size: "sm" }) })
   ] });
 };
 export {

package/dist/components/form/select/select.stories.js

@@ -11,10 +11,7 @@ const meta = {
       { value: "10", label: "10\u9032\u6570" },
       { value: "16", label: "16\u9032\u6570" }
     ],
-    value: "10",
-    onChange: (e) => {
-      console.log(e.target.value);
-    }
+    defaultValue: "10"
   },
   parameters: {
     a11y: {

package/dist/components/form/text-field/text-field.d.ts

@@ -1,5 +1,5 @@
 import type { ChangeEventHandler, FC } from 'react';
-type Props = {
+type BaseProps = {
     id?: string;
     name?: string;
     describedbyId?: string | undefined;
@@ -7,9 +7,17 @@ type Props = {
     isDisabled: boolean;
     isRequired: boolean;
     placeholder?: string;
+};
+type ControlledProps = {
+    value: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    defaultValue?: never;
+};
+type UncontrolledProps = {
     defaultValue?: string;
-    value?: string;
+    value?: never;
     onChange?: ChangeEventHandler<HTMLInputElement>;
 };
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
 export declare const TextField: FC<Props>;
 export {};

package/dist/components/form/text-field/text-field.js

@@ -19,7 +19,7 @@ const TextField = ({
       "aria-invalid": isInvalid,
       "aria-required": isRequired,
       className: cn(
-        "w-full rounded-md border border-border-base bg-bg-base px-3 py-2",
+        "w-full rounded-lg border border-border-base bg-bg-base px-3 py-2",
         "aria-invalid:border-border-error",
         "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute disabled:hover:bg-bg-mute",
         "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"

package/dist/components/form/text-field/text-field.stories.js

@@ -4,11 +4,7 @@ const meta = {
   component: TextField,
   args: {
     id: "textfield",
-    describedbyId: "textfield-feedback",
-    value: "",
-    onChange: (e) => {
-      console.log(e.target.value);
-    }
+    describedbyId: "textfield-feedback"
   },
   parameters: {
     a11y: {

package/dist/components/form/textarea/textarea.d.ts

@@ -1,5 +1,5 @@
 import { type ChangeEventHandler, type FC } from 'react';
-type Props = {
+type BaseProps = {
     id: string;
     name?: string;
     describedbyId: string | undefined;
@@ -10,9 +10,17 @@ type Props = {
     rows?: number;
     fullHeight?: boolean;
     autoResize?: boolean;
+};
+type ControlledProps = {
+    value: string;
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+    defaultValue?: never;
+};
+type UncontrolledProps = {
     defaultValue?: string;
-    value?: string;
+    value?: never;
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
 };
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
 export declare const Textarea: FC<Props>;
 export {};