@k8o/arte-odyssey 0.0.0

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

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Radio } from "./radio";
+const meta = {
+  title: "components/form/radio",
+  component: Radio
+};
+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
+      }
+    );
+  }
+};
+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
+      }
+    );
+  }
+};
+export {
+  Default,
+  Disabled,
+  radio_stories_default as default
+};

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

@@ -0,0 +1 @@
+export { RangeField } from './range-field';

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

@@ -0,0 +1,4 @@
+import { RangeField } from "./range-field";
+export {
+  RangeField
+};

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

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

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

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./../../../helpers/cn";
+const RangeField = ({
+  id,
+  describedbyId,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  value,
+  onChange,
+  step = 1,
+  max = 100,
+  min = 0,
+  showValue = true,
+  unit = ""
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-describedby": describedbyId,
+        "aria-invalid": isInvalid,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuenow": value,
+        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",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          isInvalid && "ring-2 ring-border-error"
+        ),
+        disabled: isDisabled,
+        id,
+        max,
+        min,
+        onChange: (e) => {
+          onChange(Number(e.target.value));
+        },
+        required: isRequired,
+        step,
+        type: "range",
+        value
+      }
+    ),
+    showValue && /* @__PURE__ */ jsxs("span", { className: "w-16 text-fg-base text-sm", children: [
+      value,
+      unit
+    ] })
+  ] });
+};
+export {
+  RangeField
+};

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

@@ -0,0 +1,162 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { RangeField } from "./range-field";
+const meta = {
+  title: "components/form/RangeField",
+  component: RangeField,
+  parameters: {
+    layout: "centered",
+    a11y: {
+      options: {
+        rules: {
+          // RangeField単体ではラベルを付随しない
+          "label-title-only": { enabled: false },
+          label: { enabled: false }
+        }
+      }
+    }
+  },
+  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
+      }
+    ) });
+  },
+  args: {
+    value: 50,
+    min: 0,
+    max: 100,
+    step: 1,
+    isInvalid: false,
+    isDisabled: false,
+    isRequired: false,
+    showValue: true
+  }
+};
+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
+  }
+};
+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
+  }
+};
+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
+  }
+};
+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
+  }
+};
+export {
+  Default,
+  Disabled,
+  Invalid,
+  WithUnit,
+  WithoutValue,
+  range_field_stories_default as default
+};

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

@@ -0,0 +1 @@
+export * from './select';

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

@@ -0,0 +1 @@
+export * from "./select";

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

@@ -0,0 +1,14 @@
+import type { ChangeEventHandler, FC } from 'react';
+import type { Option } from '../../../types/variables';
+type Props = {
+    id: string;
+    describedbyId: string | undefined;
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isRequired: boolean;
+    options: readonly Option[];
+    value: string;
+    onChange: ChangeEventHandler<HTMLSelectElement>;
+};
+export declare const Select: FC<Props>;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./../../../helpers/cn";
+import { ChevronIcon } from "../../icons";
+const Select = ({
+  id,
+  describedbyId,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  options,
+  value,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-fit w-full", children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        "aria-describedby": describedbyId,
+        "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",
+          "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"
+        ),
+        disabled: isDisabled,
+        id,
+        onChange,
+        value,
+        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" }) })
+  ] });
+};
+export {
+  Select
+};

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

@@ -0,0 +1,58 @@
+import { Select } from "./select";
+const meta = {
+  title: "components/form/select",
+  component: Select,
+  args: {
+    id: "select",
+    describedbyId: "select-feedback",
+    options: [
+      { value: "2", label: "2\u9032\u6570" },
+      { value: "8", label: "8\u9032\u6570" },
+      { value: "10", label: "10\u9032\u6570" },
+      { value: "16", label: "16\u9032\u6570" }
+    ],
+    value: "10",
+    onChange: (e) => {
+      console.log(e.target.value);
+    }
+  },
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // Select単体ではラベルを付随しない
+          "label-title-only": { enabled: false },
+          "select-name": { enabled: false }
+        }
+      }
+    }
+  }
+};
+var select_stories_default = meta;
+const Default = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false
+  }
+};
+const Invalid = {
+  args: {
+    isDisabled: false,
+    isInvalid: true,
+    isRequired: false
+  }
+};
+const Disabled = {
+  args: {
+    isDisabled: true,
+    isInvalid: false,
+    isRequired: false
+  }
+};
+export {
+  Default,
+  Disabled,
+  Invalid,
+  select_stories_default as default
+};

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

@@ -0,0 +1 @@
+export * from './text-field';

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

@@ -0,0 +1 @@
+export * from "./text-field";

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

@@ -0,0 +1,15 @@
+import type { ChangeEventHandler, FC } from 'react';
+type Props = {
+    id?: string;
+    name?: string;
+    describedbyId?: string | undefined;
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isRequired: boolean;
+    placeholder?: string;
+    defaultValue?: string;
+    value?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+export declare const TextField: FC<Props>;
+export {};

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

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "./../../../helpers/cn";
+const TextField = ({
+  id,
+  name,
+  describedbyId,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  placeholder,
+  defaultValue,
+  value,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-describedby": describedbyId,
+      "aria-invalid": isInvalid,
+      "aria-required": isRequired,
+      className: cn(
+        "w-full rounded-md 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"
+      ),
+      defaultValue,
+      disabled: isDisabled,
+      id,
+      name,
+      onChange,
+      placeholder,
+      type: "text",
+      value
+    }
+  );
+};
+export {
+  TextField
+};

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

@@ -0,0 +1,61 @@
+import { TextField } from "./text-field";
+const meta = {
+  title: "components/form/text-field",
+  component: TextField,
+  args: {
+    id: "textfield",
+    describedbyId: "textfield-feedback",
+    value: "",
+    onChange: (e) => {
+      console.log(e.target.value);
+    }
+  },
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // TextField単体ではラベルを付随しない
+          "label-title-only": { enabled: false },
+          label: { enabled: false }
+        }
+      }
+    }
+  }
+};
+var text_field_stories_default = meta;
+const Default = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false
+  }
+};
+const Placeholder = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    placeholder: "ID"
+  }
+};
+const Invalid = {
+  args: {
+    isDisabled: false,
+    isInvalid: true,
+    isRequired: false
+  }
+};
+const Disabled = {
+  args: {
+    isDisabled: true,
+    isInvalid: false,
+    isRequired: false
+  }
+};
+export {
+  Default,
+  Disabled,
+  Invalid,
+  Placeholder,
+  text_field_stories_default as default
+};

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

@@ -0,0 +1 @@
+export * from './textarea';

package/dist/components/form/textarea/index.js

@@ -0,0 +1 @@
+export * from "./textarea";

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

@@ -0,0 +1,18 @@
+import { type ChangeEventHandler, type FC } from 'react';
+type Props = {
+    id: string;
+    name?: string;
+    describedbyId: string | undefined;
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isRequired: boolean;
+    placeholder?: string;
+    rows?: number;
+    fullHeight?: boolean;
+    autoResize?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+};
+export declare const Textarea: FC<Props>;
+export {};

package/dist/components/form/textarea/textarea.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "./../../../helpers/cn";
+const Textarea = ({
+  id,
+  name,
+  describedbyId,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  placeholder,
+  rows,
+  fullHeight = false,
+  autoResize = false,
+  defaultValue,
+  value,
+  onChange
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current && autoResize) {
+      ref.current.style.height = "auto";
+      ref.current.style.height = `${ref.current.scrollHeight.toString()}px`;
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "aria-describedby": describedbyId,
+      "aria-invalid": isInvalid,
+      "aria-required": isRequired,
+      className: cn(
+        "w-full resize-none rounded-md 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",
+        fullHeight && "h-full"
+      ),
+      defaultValue,
+      disabled: isDisabled,
+      id,
+      name,
+      onChange,
+      onKeyDown: (e) => {
+        e.stopPropagation();
+      },
+      placeholder,
+      ref,
+      rows,
+      value
+    }
+  );
+};
+export {
+  Textarea
+};