@k8o/arte-odyssey 1.4.3 → 2.0.0

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.js

@@ -36,9 +36,8 @@ const RangeField = ({
         "aria-valuemin": min,
         "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"
         ),

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,43 +15,9 @@ const meta = {
       }
     }
   },
-  argTypes: {
-    onChange: { action: "changed" }
-  }
-};
-var range_field_stories_default = meta;
-const Default = {
-  render: ({
-    id,
-    describedbyId,
-    isInvalid,
-    isDisabled,
-    isRequired,
-    step,
-    max,
-    min,
-    showValue,
-    unit
-  }) => {
-    const [value, setValue] = useState(50);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        describedbyId,
-        id,
-        isDisabled,
-        isInvalid,
-        isRequired,
-        max,
-        min,
-        onChange: setValue,
-        showValue,
-        step,
-        unit,
-        value
-      }
-    ) });
-  },
+  decorators: [
+    (Story) => /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(Story, {}) })
+  ],
   args: {
     min: 0,
     max: 100,
@@ -60,176 +25,38 @@ const Default = {
     isInvalid: false,
     isDisabled: false,
     isRequired: false,
-    showValue: true
+    showValue: true,
+    defaultValue: 50
   }
 };
+var range_field_stories_default = meta;
+const Default = {};
 const WithUnit = {
-  render: ({
-    id,
-    describedbyId,
-    isInvalid,
-    isDisabled,
-    isRequired,
-    step,
-    max,
-    min,
-    showValue,
-    unit
-  }) => {
-    const [value, setValue] = useState(200);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        describedbyId,
-        id,
-        isDisabled,
-        isInvalid,
-        isRequired,
-        max,
-        min,
-        onChange: setValue,
-        showValue,
-        step,
-        unit,
-        value
-      }
-    ) });
-  },
   args: {
     min: 100,
     max: 500,
     step: 10,
     unit: "px",
-    isInvalid: false,
-    isDisabled: false,
-    isRequired: false,
-    showValue: true
+    defaultValue: 200
   }
 };
 const WithoutValue = {
-  render: ({
-    id,
-    describedbyId,
-    isInvalid,
-    isDisabled,
-    isRequired,
-    step,
-    max,
-    min,
-    showValue,
-    unit
-  }) => {
-    const [value, setValue] = useState(75);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        describedbyId,
-        id,
-        isDisabled,
-        isInvalid,
-        isRequired,
-        max,
-        min,
-        onChange: setValue,
-        showValue,
-        step,
-        unit,
-        value
-      }
-    ) });
-  },
   args: {
-    min: 0,
-    max: 100,
     step: 5,
     showValue: false,
-    isInvalid: false,
-    isDisabled: false,
-    isRequired: false
+    defaultValue: 75
   }
 };
 const Disabled = {
-  render: ({
-    id,
-    describedbyId,
-    isInvalid,
-    isDisabled,
-    isRequired,
-    step,
-    max,
-    min,
-    showValue,
-    unit
-  }) => {
-    const [value, setValue] = useState(30);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        describedbyId,
-        id,
-        isDisabled,
-        isInvalid,
-        isRequired,
-        max,
-        min,
-        onChange: setValue,
-        showValue,
-        step,
-        unit,
-        value
-      }
-    ) });
-  },
   args: {
-    min: 0,
-    max: 100,
-    step: 1,
-    isInvalid: false,
     isDisabled: true,
-    isRequired: false,
-    showValue: true
+    defaultValue: 30
   }
 };
 const Invalid = {
-  render: ({
-    id,
-    describedbyId,
-    isInvalid,
-    isDisabled,
-    isRequired,
-    step,
-    max,
-    min,
-    showValue,
-    unit
-  }) => {
-    const [value, setValue] = useState(90);
-    return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-      RangeField,
-      {
-        describedbyId,
-        id,
-        isDisabled,
-        isInvalid,
-        isRequired,
-        max,
-        min,
-        onChange: setValue,
-        showValue,
-        step,
-        unit,
-        value
-      }
-    ) });
-  },
   args: {
-    min: 0,
-    max: 100,
-    step: 1,
     isInvalid: true,
-    isDisabled: false,
-    isRequired: false,
-    showValue: true
+    defaultValue: 90
   }
 };
 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"

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.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.js

@@ -30,7 +30,7 @@ const Textarea = ({
       "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",
+        "w-full resize-none 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/textarea/textarea.stories.js

@@ -8,11 +8,7 @@ const meta = {
   ],
   args: {
     id: "textarea",
-    describedbyId: "textarea-feedback",
-    value: "10",
-    onChange: (e) => {
-      console.log(e.target.value);
-    }
+    describedbyId: "textarea-feedback"
   },
   parameters: {
     a11y: {

package/dist/components/icon-button/icon-button.js

@@ -13,12 +13,12 @@ const IconButton = ({
     {
       "aria-label": props.role ? label : void 0,
       className: cn(
-        "inline-flex cursor-pointer rounded-full bg-transparent",
+        "inline-flex cursor-pointer rounded-full bg-transparent transition-colors",
         "hover:bg-bg-subtle",
         "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info active:bg-bg-emphasize",
-        bg === "base" && "bg-bg-base/90",
+        bg === "base" && "bg-bg-base",
         bg === "transparent" && "bg-transparent",
-        bg === "primary" && "bg-primary-bg/90 hover:bg-primary-bg active:bg-primary-bg-emphasize",
+        bg === "primary" && "bg-primary-bg hover:bg-primary-bg/90 active:bg-primary-bg-emphasize",
         size === "sm" && "p-1",
         size === "md" && "p-2",
         size === "lg" && "p-3",

package/dist/components/icon-button/icon-button.stories.js

@@ -5,10 +5,7 @@ const meta = {
   title: "components/button/icon-button",
   component: IconButton,
   args: {
-    onClick: () => {
-      console.log("clicked");
-    },
-    label: "Copy",
+    label: "\u30B3\u30D4\u30FC",
     children: /* @__PURE__ */ jsx(CopyIcon, {})
   }
 };

package/dist/components/icon-link/icon-link.d.ts

@@ -1,7 +1,7 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 export declare const IconLink: <T extends string>({ size, bg, label, href, children, openInNewTab, renderAnchor, }: PropsWithChildren<{
     size?: "sm" | "md" | "lg";
-    bg?: "transparent" | "base";
+    bg?: "transparent" | "base" | "primary";
     label?: string;
     href: T;
     openInNewTab?: boolean;

package/dist/components/icon-link/icon-link.js

@@ -18,9 +18,10 @@ const IconLink = ({
   return renderAnchor({
     href,
     className: cn(
-      "inline-flex rounded-full hover:bg-bg-subtle active:bg-bg-emphasize focus-visible:ring-2 focus-visible:ring-border-info",
-      bg === "base" && "bg-bg-base/90",
+      "inline-flex rounded-full transition-colors hover:bg-bg-subtle active:bg-bg-emphasize focus-visible:ring-2 focus-visible:ring-border-info",
+      bg === "base" && "bg-bg-base",
       bg === "transparent" && "bg-transparent",
+      bg === "primary" && "bg-primary-bg hover:bg-primary-bg/90 active:bg-primary-bg-emphasize",
       size === "sm" && "p-1",
       size === "md" && "p-2",
       size === "lg" && "p-3"

package/dist/components/icon-link/icon-link.stories.js

@@ -7,7 +7,7 @@ const meta = {
   args: {
     href: "https://example.com",
     children: /* @__PURE__ */ jsx(CopyIcon, {}),
-    label: "Copy to clipboard"
+    label: "\u30B3\u30D4\u30FC"
   }
 };
 var icon_link_stories_default = meta;
@@ -31,8 +31,14 @@ const BgBase = {
     bg: "base"
   }
 };
+const BgPrimary = {
+  args: {
+    bg: "primary"
+  }
+};
 export {
   BgBase,
+  BgPrimary,
   Large,
   Medium,
   Small,

package/dist/components/icons/icons.stories.js

@@ -47,7 +47,6 @@ import {
 } from "./lucide";
 import { QiitaIcon } from "./qiita";
 import { TwitterIcon } from "./twitter";
-import { ZennIcon } from "./zenn";
 const meta = {
   title: "components/icons"
 };
@@ -259,10 +258,6 @@ const Primary = {
         /* @__PURE__ */ jsx(QiitaIcon, {}),
         /* @__PURE__ */ jsx("p", { className: "text-center", children: "Qiita" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
-        /* @__PURE__ */ jsx(ZennIcon, {}),
-        /* @__PURE__ */ jsx("p", { className: "text-center", children: "Zenn" })
-      ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
         /* @__PURE__ */ jsx(ArteOdyssey, {}),
         /* @__PURE__ */ jsx("p", { className: "text-center", children: "Arte Odyssey" })

package/dist/components/icons/index.d.ts

@@ -4,4 +4,3 @@ export * from './logo';
 export * from './lucide';
 export * from './qiita';
 export * from './twitter';
-export * from './zenn';

package/dist/components/icons/index.js

@@ -4,4 +4,3 @@ export * from "./logo";
 export * from "./lucide";
 export * from "./qiita";
 export * from "./twitter";
-export * from "./zenn";

package/dist/components/link-button/link-button.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
-export declare const LinkButton: <T extends string>({ children, size, variant, href, startIcon, endIcon, active, openInNewTab, renderAnchor, }: {
+export declare const LinkButton: <T extends string>({ children, size, color, variant, href, startIcon, endIcon, active, openInNewTab, renderAnchor, }: {
     variant?: "contained" | "outlined" | "skeleton";
     size?: "sm" | "md" | "lg";
+    color?: "primary" | "gray";
     href: T;
     startIcon?: ReactNode;
     endIcon?: ReactNode;

package/dist/components/link-button/link-button.js

@@ -4,6 +4,7 @@ import { isInternalRoute } from "./../../helpers/is-internal-route";
 const LinkButton = ({
   children,
   size = "md",
+  color = "primary",
   variant = "contained",
   href,
   startIcon,
@@ -15,15 +16,17 @@ const LinkButton = ({
   const type = isInternalRoute(href) && !openInNewTab ? "internal" : "external";
   const props = type === "internal" ? {} : { target: "_blank", rel: "noopener noreferrer" };
   const className = cn(
-    "rounded-lg text-center font-bold",
+    "rounded-lg border-2 text-center font-bold transition-colors",
     {
-      "bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80": variant === "contained",
-      "border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize border-2": variant === "outlined",
-      "bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton"
+      "border-transparent bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80": variant === "contained" && color === "primary",
+      "border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize": variant === "contained" && color === "gray",
+      "border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "primary",
+      "border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "gray",
+      "border-transparent bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton"
     },
-    "focus-visible:border-transparent focus-visible:ring-border-info focus-visible:ring-2 focus-visible:outline-hidden",
+    "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info",
     size === "sm" && "px-3 py-1 text-sm",
-    size === "md" && "text-md px-4 py-2",
+    size === "md" && "px-4 py-2 text-md",
     size === "lg" && "px-6 py-3 text-lg",
     Boolean(startIcon ?? endIcon) && "flex items-center gap-2",
     Boolean(endIcon) && "justify-between",

package/dist/components/link-button/link-button.stories.js

@@ -25,11 +25,27 @@ const Small = {
     size: "sm"
   }
 };
-const Outline = {
+const Outlined = {
   args: {
     variant: "outlined"
   }
 };
+const Skeleton = {
+  args: {
+    variant: "skeleton"
+  }
+};
+const Gray = {
+  args: {
+    color: "gray"
+  }
+};
+const GrayOutlined = {
+  args: {
+    color: "gray",
+    variant: "outlined"
+  }
+};
 const StartIcon = {
   args: {
     startIcon: /* @__PURE__ */ jsx(CopyIcon, {})
@@ -42,9 +58,12 @@ const EndIcon = {
 };
 export {
   EndIcon,
+  Gray,
+  GrayOutlined,
   Large,
   Medium,
-  Outline,
+  Outlined,
+  Skeleton,
   Small,
   StartIcon,
   link_button_stories_default as default

package/dist/components/list-box/list-box.js

@@ -73,7 +73,7 @@ const Content = ({ helpContent }) => {
         {
           ...props,
           ...contentProps,
-          className: "flex max-h-48 min-w-40 flex-col overflow-y-auto rounded-lg border border-border-mute bg-bg-base py-2 shadow-xl",
+          className: "flex max-h-48 min-w-40 flex-col overflow-y-auto rounded-lg border border-border-mute bg-bg-base py-2 shadow-md",
           children: [
             helpContent,
             options.map(({ key, label }, idx) => /* @__PURE__ */ jsx(Item, { index: idx, label }, key))
@@ -89,16 +89,14 @@ const Item = ({ label, index }) => {
     "button",
     {
       className: cn(
-        "group w-full px-2 py-1 text-left",
-        "hover:bg-primary-bg",
-        "focus-visible:border-transparent focus-visible:bg-primary-bg focus-visible:outline-hidden",
-        !selected && "pl-9",
-        selected && "inline-flex items-center gap-1"
+        "flex w-full items-center justify-between px-3 py-2 text-left transition-colors",
+        "hover:bg-bg-mute",
+        "focus-visible:border-transparent focus-visible:bg-bg-mute focus-visible:outline-hidden"
       ),
       ...props,
       children: [
-        selected && /* @__PURE__ */ jsx("span", { className: "text-fg-success group-hover:text-fg-base group-focus-visible:text-fg-base", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
-        label
+        label,
+        selected && /* @__PURE__ */ jsx("span", { className: "text-fg-success", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
       ]
     }
   );

package/dist/components/list-box/list-box.stories.js

@@ -17,25 +17,16 @@ const meta = {
 };
 var list_box_stories_default = meta;
 const OPTIONS = [
-  { key: "1", label: "apple" },
-  { key: "2", label: "banana" },
-  { key: "3", label: "cherry" },
-  { key: "4", label: "date" },
-  { key: "5", label: "elderberry" },
-  { key: "6", label: "fig" },
-  { key: "7", label: "grape" },
-  { key: "8", label: "honeydew" },
-  { key: "9", label: "kiwi" },
-  { key: "10", label: "lemon" },
-  { key: "11", label: "mango" },
-  { key: "12", label: "nectarine" },
-  { key: "13", label: "orange" },
-  { key: "14", label: "pear" },
-  { key: "15", label: "quince" },
-  { key: "16", label: "raspberry" },
-  { key: "17", label: "strawberry" },
-  { key: "18", label: "tangerine" },
-  { key: "19", label: "watermelon" }
+  { key: "1", label: "\u308A\u3093\u3054" },
+  { key: "2", label: "\u30D0\u30CA\u30CA" },
+  { key: "3", label: "\u3055\u304F\u3089\u3093\u307C" },
+  { key: "4", label: "\u3076\u3069\u3046" },
+  { key: "5", label: "\u30E1\u30ED\u30F3" },
+  { key: "6", label: "\u3044\u3061\u3054" },
+  { key: "7", label: "\u307F\u304B\u3093" },
+  { key: "8", label: "\u3082\u3082" },
+  { key: "9", label: "\u30AD\u30A6\u30A4" },
+  { key: "10", label: "\u30EC\u30E2\u30F3" }
 ];
 const Default = {
   render: () => {

package/dist/components/modal/modal.js

@@ -95,7 +95,7 @@ const Modal = ({ ref, type = "center", defaultOpen, isOpen, onClose, children })
     {
       animate: realDialogOpen ? "open" : "closed",
       className: cn(
-        "border-border-mute bg-bg-base shadow-xl backdrop:bg-back-drop",
+        "border-border-mute bg-bg-base shadow-md backdrop:bg-back-drop",
         type === "center" && "m-auto max-h-lg w-5/6 max-w-2xl rounded-lg dark:border",
         type === "bottom" && "mt-auto w-screen max-w-screen rounded-t-lg dark:border-t",
         type === "right" && "ml-auto min-h-svh w-screen max-w-sm rounded-l-lg dark:border-l"