@k8o/arte-odyssey 1.4.2 → 2.0.0

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

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as motion from "motion/react-client";
 import { cn } from "./../../helpers/cn";
 import { ChevronIcon } from "../icons";
 import { useItemId, useOpen, useToggleOpen } from "./context";
@@ -14,9 +13,9 @@ const AccordionButton = ({ children }) => {
       "aria-controls": `${id}-panel`,
       "aria-expanded": open,
       className: cn(
-        "flex w-full flex-row items-center justify-between rounded-md p-2",
-        "hover:bg-bg-mute",
-        "focus-visible::first:bordertransparent focus-visible:bg-bg-mute focus-visible::first:outline-none focus-visible::first:ring-2 focus-visible::first:ring-border-info"
+        "flex w-full cursor-pointer items-center justify-between rounded-md py-4 text-fg-base",
+        "hover:text-primary-fg",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info"
       ),
       id: `${id}-button`,
       onClick: toggleOpen,
@@ -24,10 +23,12 @@ const AccordionButton = ({ children }) => {
       children: [
         children,
         /* @__PURE__ */ jsx(
-          motion.span,
+          "span",
           {
-            animate: open ? { rotate: 180 } : { rotate: 0 },
-            transition: { duration: 0.3 },
+            className: cn(
+              "transition-transform duration-150",
+              open && "rotate-180"
+            ),
             children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" })
           }
         )

package/dist/components/accordion/accordion-item.js

@@ -4,7 +4,7 @@ import { useId } from "react";
 import { AccordionItemProvider } from "./context";
 const AccordionItem = ({ children, defaultOpen = false }) => {
   const id = useId();
-  return /* @__PURE__ */ jsx(AccordionItemProvider, { defaultOpen, id, children: /* @__PURE__ */ jsx("div", { className: "border-border-mute border-t last:border-b", children }) });
+  return /* @__PURE__ */ jsx(AccordionItemProvider, { defaultOpen, id, children: /* @__PURE__ */ jsx("div", { children }) });
 };
 export {
   AccordionItem

package/dist/components/accordion/accordion-panel.js

@@ -9,7 +9,7 @@ const AccordionPanel = ({ children }) => {
     "section",
     {
       "aria-labelledby": `${id}-button`,
-      className: cn({ hidden: !open }, "p-2"),
+      className: cn({ hidden: !open }, "pb-4"),
       hidden: !open,
       id: `${id}-panel`,
       children

package/dist/components/accordion/accordion.js

@@ -1,16 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "./../../helpers/cn";
 const Accordion = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "rounded-md border-2 border-border-mute bg-bg-base p-2",
-        "focus-within:bordertransparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info"
-      ),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { className: "divide-y divide-border-mute", children });
 };
 export {
   Accordion

package/dist/components/alert/alert.js

@@ -12,7 +12,7 @@ const Alert = ({ status, message }) => {
     "div",
     {
       className: cn(
-        "flex items-center gap-2 rounded-md p-4",
+        "flex items-center gap-3 rounded-lg p-4",
         status === "success" && "bg-bg-success",
         status === "info" && "bg-bg-info",
         status === "warning" && "bg-bg-warning",
@@ -24,19 +24,18 @@ const Alert = ({ status, message }) => {
           "span",
           {
             className: cn(
-              "size-8",
               status === "success" && "text-fg-success",
               status === "info" && "text-fg-info",
               status === "warning" && "text-fg-warning",
               status === "error" && "text-fg-error"
             ),
             children: [
-              /* @__PURE__ */ jsx(AlertIcon, { size: "lg", status }),
+              /* @__PURE__ */ jsx(AlertIcon, { size: "md", status }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: STATUS_LABEL[status] })
             ]
           }
         ),
-        Array.isArray(message) ? message.length > 1 ? /* @__PURE__ */ jsx("ul", { className: "ml-4 list-disc", children: message.map((msg) => /* @__PURE__ */ jsx("li", { className: "text-lg", children: msg }, msg)) }) : /* @__PURE__ */ jsx("p", { className: "font-bold text-lg", children: message[0] }) : /* @__PURE__ */ jsx("p", { className: "font-bold text-lg", children: message })
+        Array.isArray(message) ? message.length > 1 ? /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: message.map((msg) => /* @__PURE__ */ jsx("li", { children: msg }, msg)) }) : /* @__PURE__ */ jsx("p", { className: "font-bold", children: message[0] }) : /* @__PURE__ */ jsx("p", { className: "font-bold", children: message })
       ]
     }
   );

package/dist/components/alert/alert.stories.js

@@ -30,8 +30,12 @@ const Error = {
 };
 const ArrayMessage = {
   args: {
-    status: "success",
-    message: ["Success1", "Success2", "Success3"]
+    status: "error",
+    message: [
+      "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u306E\u5F62\u5F0F\u304C\u6B63\u3057\u304F\u3042\u308A\u307E\u305B\u3093",
+      "\u30D1\u30B9\u30EF\u30FC\u30C9\u306F8\u6587\u5B57\u4EE5\u4E0A\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044",
+      "\u5229\u7528\u898F\u7D04\u306B\u540C\u610F\u3057\u3066\u304F\u3060\u3055\u3044"
+    ]
   }
 };
 const SingleArrayMessage = {

package/dist/components/anchor/anchor.js

@@ -8,11 +8,12 @@ const Anchor = ({
   renderAnchor = ({ children: children2, ...props }) => /* @__PURE__ */ jsx("a", { ...props, children: children2 })
 }) => {
   const type = isInternalRoute(href) && !openInNewTab ? "internal" : "external";
+  const baseClassName = "text-fg-info underline transition-colors hover:text-fg-info/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info focus-visible:rounded-sm";
   const props = type === "internal" ? {
-    className: "text-fg-info cursor-pointer underline",
+    className: baseClassName,
     children
   } : {
-    className: "text-fg-info inline-flex cursor-pointer items-center gap-0.5 underline",
+    className: `${baseClassName} inline-flex items-center gap-0.5`,
     target: "_blank",
     rel: "noopener noreferrer",
     children: /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/baseline-status/baseline-status.js

@@ -21,7 +21,7 @@ const BaselineStatus = ({ featureId }) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: "max-w-full animate-pulse rounded-md border border-border-base bg-bg-base p-4",
+        className: "max-w-full animate-pulse rounded-lg border border-border-base bg-bg-base p-4",
         style: { height: "120px" }
       }
     );
@@ -29,7 +29,7 @@ const BaselineStatus = ({ featureId }) => {
   return /* @__PURE__ */ jsx(
     "baseline-status",
     {
-      className: "wrap-normal max-w-full rounded-md border border-border-base bg-bg-base p-4",
+      className: "wrap-normal max-w-full rounded-lg border border-border-base bg-bg-base p-4",
       featureId
     }
   );

package/dist/components/breadcrumb/breadcrumb.js

@@ -6,7 +6,7 @@ const List = ({ children, size = "md" }) => {
     "ol",
     {
       className: cn(
-        "flex list-none items-center gap-1 font-bold text-fg-mute",
+        "flex list-none items-center gap-1 text-fg-mute",
         size === "sm" && "text-xs",
         size === "md" && "text-xs md:text-md",
         size === "lg" && "text-xl md:text-2xl"
@@ -28,7 +28,14 @@ const _Link = ({
   component
 }) => {
   const Link = component ?? "a";
-  return current ? /* @__PURE__ */ jsx("span", { className: "text-fg-base", children }) : /* @__PURE__ */ jsx(Link, { className: "text-fg-mute underline hover:text-fg-base", href, children });
+  return current ? /* @__PURE__ */ jsx("span", { className: "text-fg-base", children }) : /* @__PURE__ */ jsx(
+    Link,
+    {
+      className: "underline transition-colors hover:text-fg-base focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info",
+      href,
+      children
+    }
+  );
 };
 const Breadcrumb = {
   List,

package/dist/components/button/button.js

@@ -18,15 +18,15 @@ const Button = ({
     "button",
     {
       className: cn(
-        "cursor-pointer rounded-lg text-center font-bold",
+        "cursor-pointer 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" && color === "primary",
-          "bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize": variant === "contained" && color === "gray",
+          "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",
           "cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": disabled && variant === "contained",
-          "border-2 border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "primary",
-          "border-2 border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && 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",
           "cursor-not-allowed bg-bg-base opacity-35 hover:bg-bg-base active:bg-bg-base": disabled && variant === "outlined",
-          "bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton",
+          "border-transparent bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton",
           "cursor-not-allowed bg-transparent text-fg-mute opacity-35 hover:text-fg-mute active:text-fg-mute": disabled && variant === "skeleton"
         },
         "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info",

package/dist/components/card/card.js

@@ -9,14 +9,14 @@ const Card = ({
   "section",
   {
     className: cn(
-      "rounded-lg bg-bg-base/90 shadow-md",
+      "overflow-hidden rounded-lg border border-border-mute",
       width === "full" && "w-full",
       width === "fit" && "w-fit",
-      variant === "primary" && "bg-bg-base/90",
+      variant === "primary" && "bg-bg-base",
       variant === "secondary" && "bg-bg-mute"
     ),
     children: [
-      title && /* @__PURE__ */ jsx("div", { className: "flex justify-center rounded-t-lg bg-linear-60 from-primary-bg-mute to-secondary-bg-mute p-4", children: /* @__PURE__ */ jsx("p", { className: "font-bold text-xl", children: title }) }),
+      title && /* @__PURE__ */ jsx("div", { className: "border-border-mute border-b bg-primary-bg/10 px-4 py-3", children: /* @__PURE__ */ jsx("p", { className: "font-bold", children: title }) }),
       children
     ]
   }

package/dist/components/card/card.stories.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Card } from "./card";
 import { InteractiveCard } from "./interactive-card";
 const meta = {
@@ -7,32 +7,34 @@ const meta = {
 };
 var card_stories_default = meta;
 const Primary = {
-  args: {
-    children: "card"
-  }
+  render: () => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "font-bold text-lg", children: "\u8A18\u4E8B\u30BF\u30A4\u30C8\u30EB" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-fg-mute", children: "\u3053\u308C\u306F\u30AB\u30FC\u30C9\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306E\u8AAC\u660E\u6587\u3067\u3059\u3002\u30B3\u30F3\u30C6\u30F3\u30C4\u3092\u56F2\u3093\u3067\u8996\u899A\u7684\u306B\u30B0\u30EB\u30FC\u30D7\u5316\u3057\u307E\u3059\u3002" })
+  ] }) })
 };
-const Title = {
-  args: {
-    children: "card",
-    title: "title"
-  }
+const WithTitle = {
+  render: () => /* @__PURE__ */ jsx(Card, { title: "\u304A\u77E5\u3089\u305B", children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsx("p", { children: "\u30B7\u30B9\u30C6\u30E0\u30E1\u30F3\u30C6\u30CA\u30F3\u30B9\u306E\u304A\u77E5\u3089\u305B\u3067\u3059\u3002" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-fg-mute text-sm", children: "2024\u5E741\u670820\u65E5 10:00\u301C12:00" })
+  ] }) })
 };
 const Secondary = {
-  args: {
-    children: "card",
-    variant: "secondary"
-  }
+  render: () => /* @__PURE__ */ jsx(Card, { variant: "secondary", children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("p", { className: "text-fg-mute", children: "\u30BB\u30AB\u30F3\u30C0\u30EA\u30D0\u30EA\u30A8\u30FC\u30B7\u30E7\u30F3\u306F\u80CC\u666F\u8272\u304C\u5C11\u3057\u6697\u304F\u306A\u308A\u307E\u3059\u3002" }) }) })
 };
 const Interactive = {
-  args: {
-    children: "card"
-  },
-  render: (props) => /* @__PURE__ */ jsx(InteractiveCard, { ...props })
+  render: () => /* @__PURE__ */ jsx(InteractiveCard, { children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "font-bold", children: "\u30AF\u30EA\u30C3\u30AF\u53EF\u80FD\u306A\u30AB\u30FC\u30C9" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-fg-mute text-sm", children: "\u30DB\u30D0\u30FC\u3067\u5C11\u3057\u62E1\u5927\u3001\u30AF\u30EA\u30C3\u30AF\u3067\u7E2E\u5C0F\u3057\u307E\u3059\u3002" })
+  ] }) })
+};
+const FitWidth = {
+  render: () => /* @__PURE__ */ jsx(Card, { width: "fit", children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("p", { children: "\u5E45\u304C\u30B3\u30F3\u30C6\u30F3\u30C4\u306B\u5408\u308F\u305B\u3066\u8ABF\u6574\u3055\u308C\u307E\u3059\u3002" }) }) })
 };
 export {
+  FitWidth,
   Interactive,
   Primary,
   Secondary,
-  Title,
+  WithTitle,
   card_stories_default as default
 };

package/dist/components/card/interactive-card.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as motion from "motion/react-client";
 import { cn } from "./../../helpers/cn";
 const InteractiveCard = ({
   children,
@@ -7,24 +6,17 @@ const InteractiveCard = ({
   width = "full",
   title
 }) => /* @__PURE__ */ jsxs(
-  motion.section,
+  "section",
   {
     className: cn(
-      "rounded-lg bg-bg-base/90 shadow-md",
+      "overflow-hidden rounded-lg border border-border-mute transition-transform hover:scale-[1.02] active:scale-[0.98]",
       width === "full" && "w-full",
       width === "fit" && "w-fit",
-      variant === "primary" && "bg-bg-base/90",
+      variant === "primary" && "bg-bg-base",
       variant === "secondary" && "bg-bg-mute"
     ),
-    tabIndex: -1,
-    whileHover: {
-      scale: 1.02
-    },
-    whileTap: {
-      scale: 0.98
-    },
     children: [
-      title && /* @__PURE__ */ jsx("div", { className: "flex justify-center rounded-t-lg bg-linear-60 from-primary-bg-mute to-secondary-bg-mute p-4", children: /* @__PURE__ */ jsx("p", { className: "font-bold text-xl", children: title }) }),
+      title && /* @__PURE__ */ jsx("div", { className: "border-border-mute border-b bg-primary-bg/10 px-4 py-3", children: /* @__PURE__ */ jsx("p", { className: "font-bold", children: title }) }),
       children
     ]
   }

package/dist/components/dialog/dialog.js

@@ -23,7 +23,7 @@ const Root = ({ ref, id, children, tabIndex, role = "dialog" }) => {
     {
       "aria-describedby": `${rootId}-content`,
       "aria-labelledby": `${rootId}-header`,
-      className: "relative w-full rounded-lg border border-border-subtle bg-bg-base shadow-xl",
+      className: "relative w-full rounded-lg border border-border-mute bg-bg-base shadow-md",
       id,
       ref,
       role,

package/dist/components/drawer/drawer.stories.js

@@ -10,12 +10,12 @@ const Default = {
   args: {
     isOpen: true,
     onClose: fn(),
-    title: "Drawer Title",
-    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-fg-mute", children: "This is a drawer component. You can put any content here." }),
-      /* @__PURE__ */ jsx("p", { className: "text-fg-mute", children: "You can use it to display additional information or actions related to the current context." }),
-      /* @__PURE__ */ jsx("p", { className: "text-fg-mute", children: "You can also use it to display forms, lists, or any other type of content that you want to show in a drawer." }),
-      /* @__PURE__ */ jsx("p", { className: "text-fg-mute", children: "This is a great way to keep your UI clean and organized while still providing access to important information or actions." })
+    title: "\u30E1\u30CB\u30E5\u30FC",
+    children: /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("a", { className: "rounded-md px-3 py-2 hover:bg-bg-mute", href: "/", children: "\u30DB\u30FC\u30E0" }),
+      /* @__PURE__ */ jsx("a", { className: "rounded-md px-3 py-2 hover:bg-bg-mute", href: "/about", children: "\u3053\u306E\u30B5\u30A4\u30C8\u306B\u3064\u3044\u3066" }),
+      /* @__PURE__ */ jsx("a", { className: "rounded-md px-3 py-2 hover:bg-bg-mute", href: "/blog", children: "\u30D6\u30ED\u30B0" }),
+      /* @__PURE__ */ jsx("a", { className: "rounded-md px-3 py-2 hover:bg-bg-mute", href: "/contact", children: "\u304A\u554F\u3044\u5408\u308F\u305B" })
     ] })
   }
 };

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -64,7 +64,7 @@ const Content = ({ children }) => {
         {
           ...props,
           ...contentProps,
-          className: "flex min-w-40 flex-col rounded-lg border border-border-mute bg-bg-base py-2 shadow-xl",
+          className: "flex min-w-40 flex-col rounded-lg border border-border-mute bg-bg-base py-2 shadow-md",
           children
         }
       )
@@ -80,9 +80,9 @@ const Item = ({
     "button",
     {
       className: cn(
-        "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"
+        "w-full px-2 py-1 text-left transition-colors",
+        "hover:bg-bg-mute",
+        "focus-visible:bg-bg-mute focus-visible:outline-none"
       ),
       ...props,
       children: label

package/dist/components/dropdown-menu/dropdown-menu.stories.js

@@ -18,32 +18,32 @@ const meta = {
 var dropdown_menu_stories_default = meta;
 const Default = {
   render: () => /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { text: "Options" }),
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { text: "\u64CD\u4F5C" }),
     /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
       /* @__PURE__ */ jsx(
         DropdownMenu.Item,
         {
-          label: "Item 1",
+          label: "\u7DE8\u96C6",
           onClick: () => {
-            console.log(1);
+            console.log("\u7DE8\u96C6");
           }
         }
       ),
       /* @__PURE__ */ jsx(
         DropdownMenu.Item,
         {
-          label: "Item 2",
+          label: "\u8907\u88FD",
           onClick: () => {
-            console.log(2);
+            console.log("\u8907\u88FD");
           }
         }
       ),
       /* @__PURE__ */ jsx(
         DropdownMenu.Item,
         {
-          label: "Item 3",
+          label: "\u524A\u9664",
           onClick: () => {
-            console.log(3);
+            console.log("\u524A\u9664");
           }
         }
       )
@@ -51,7 +51,7 @@ const Default = {
   ] }),
   play: async ({ canvas, userEvent }) => {
     const trigger = canvas.getByRole("button", {
-      name: "Options"
+      name: "\u64CD\u4F5C"
     });
     trigger.focus();
     await userEvent.keyboard("{Enter}");
@@ -63,34 +63,34 @@ const TriggerByIcon = {
       DropdownMenu.IconTrigger,
       {
         icon: /* @__PURE__ */ jsx(DarkModeIcon, { size: "lg" }),
-        label: "Options"
+        label: "\u30C6\u30FC\u30DE\u5207\u66FF"
       }
     ),
     /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
       /* @__PURE__ */ jsx(
         DropdownMenu.Item,
         {
-          label: "Item 1",
+          label: "\u30E9\u30A4\u30C8",
           onClick: () => {
-            console.log(1);
+            console.log("\u30E9\u30A4\u30C8");
           }
         }
       ),
       /* @__PURE__ */ jsx(
         DropdownMenu.Item,
         {
-          label: "Item 2",
+          label: "\u30C0\u30FC\u30AF",
           onClick: () => {
-            console.log(2);
+            console.log("\u30C0\u30FC\u30AF");
           }
         }
       ),
       /* @__PURE__ */ jsx(
         DropdownMenu.Item,
         {
-          label: "Item 3",
+          label: "\u30B7\u30B9\u30C6\u30E0",
           onClick: () => {
-            console.log(3);
+            console.log("\u30B7\u30B9\u30C6\u30E0");
           }
         }
       )
@@ -98,7 +98,7 @@ const TriggerByIcon = {
   ] }),
   play: async ({ canvas, userEvent }) => {
     const trigger = canvas.getByRole("button", {
-      name: "Options"
+      name: "\u30C6\u30FC\u30DE\u5207\u66FF"
     });
     trigger.focus();
     await userEvent.keyboard("{Enter}");

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

@@ -1,15 +1,23 @@
 import { type 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[];
-    value?: string[];
-    defaultValue?: string[];
+};
+type ControlledProps = {
+    value: string[];
     onChange: (value: string[]) => void;
+    defaultValue?: never;
+};
+type UncontrolledProps = {
+    defaultValue?: string[];
+    value?: never;
+    onChange?: (value: string[]) => void;
 };
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
 export declare const Autocomplete: FC<Props>;
 export {};

package/dist/components/form/autocomplete/autocomplete.js

@@ -28,7 +28,7 @@ const Autocomplete = ({
       if (!isControlled) {
         setInternalValue(newValue);
       }
-      onChange(newValue);
+      onChange?.(newValue);
     },
     [isControlled, onChange]
   );
@@ -54,8 +54,8 @@ const Autocomplete = ({
     "div",
     {
       className: cn(
-        "relative w-full 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 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"
       ),
@@ -193,7 +193,7 @@ const Autocomplete = ({
         /* @__PURE__ */ jsx("div", { className: "relative w-full", children: open && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute top-1 z-10 w-full rounded-md border border-border-mute bg-bg-base shadow-md",
+            className: "absolute top-1 z-10 w-full rounded-lg border border-border-mute bg-bg-base shadow-md",
             role: "presentation",
             children: /* @__PURE__ */ jsxs("ul", { className: "max-h-96 py-2", id: `${id}_listbox`, children: [
               filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-fg-mute", children: "\u8A72\u5F53\u306A\u3057" }),
@@ -204,9 +204,9 @@ const Autocomplete = ({
                   {
                     className: cn(
                       "cursor-pointer px-3 py-2",
-                      selected && "bg-primary-bg",
+                      selected && "bg-bg-mute",
                       selectIndex === idx && !selected && "bg-bg-emphasize",
-                      selectIndex === idx && selected && "hover:bg-primary-bg/90"
+                      selectIndex === idx && selected && "bg-bg-mute"
                     ),
                     id: `${id}_option_${option.value}`,
                     onClick: (e) => {

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

@@ -4,7 +4,7 @@ import { Autocomplete } from "./autocomplete";
 const meta = {
   title: "components/form/autocomplete",
   component: Autocomplete,
-  render: (props) => {
+  render: ({ id, describedbyId, isInvalid, isDisabled, isRequired }) => {
     const options = [
       { value: "2", label: "2\u9032\u6570" },
       { value: "8", label: "8\u9032\u6570" },
@@ -15,7 +15,11 @@ const meta = {
     return /* @__PURE__ */ jsx(
       Autocomplete,
       {
-        ...props,
+        describedbyId,
+        id,
+        isDisabled,
+        isInvalid,
+        isRequired,
         onChange: setValue,
         options,
         value

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

@@ -1,9 +1,17 @@
 import { type ChangeEventHandler, type FC } from 'react';
-type Props = {
+type BaseProps = {
     label: string;
+};
+type ControlledProps = {
     value: boolean;
-    defaultChecked?: boolean;
     onChange: ChangeEventHandler<HTMLInputElement>;
+    defaultChecked?: never;
+};
+type UncontrolledProps = {
+    defaultChecked?: boolean;
+    value?: never;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
 };
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
 export declare const Checkbox: FC<Props>;
 export {};

package/dist/components/form/checkbox/checkbox.js

@@ -8,18 +8,28 @@ const Checkbox = ({
   defaultChecked,
   onChange
 }) => {
+  const [internalChecked, setInternalChecked] = useState(
+    defaultChecked ?? false
+  );
   const [isFocus, setIsFocus] = useState(false);
+  const isControlled = value !== void 0;
+  const checked = isControlled ? value : internalChecked;
   return /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
-        checked: value,
+        checked: isControlled ? value : void 0,
         className: "sr-only",
-        defaultChecked,
+        defaultChecked: isControlled ? void 0 : defaultChecked,
         onBlur: () => {
           setIsFocus(false);
         },
-        onChange,
+        onChange: (e) => {
+          if (!isControlled) {
+            setInternalChecked(e.target.checked);
+          }
+          onChange?.(e);
+        },
         onFocus: () => {
           setIsFocus(true);
         },
@@ -32,10 +42,10 @@ const Checkbox = ({
         "aria-hidden": true,
         className: cn(
           "inline-flex size-5 items-center justify-center rounded-md border-2",
-          isFocus && "bordertransparent outline-hidden ring-2 ring-border-info",
-          value ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base"
+          isFocus && "border-transparent outline-hidden ring-2 ring-border-info",
+          checked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base"
         ),
-        children: value ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : null
+        children: checked ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : null
       }
     ),
     /* @__PURE__ */ jsx("span", { className: "text-lg", children: label })