@k8o/arte-odyssey 1.4.3 → 2.0.0

package/dist/components/modal/modal.stories.js

@@ -11,8 +11,8 @@ const Default = {
   args: {
     defaultOpen: true,
     children: /* @__PURE__ */ jsxs(Dialog.Root, { children: [
-      /* @__PURE__ */ jsx(Dialog.Header, { onClose: fn(), title: "Hello" }),
-      /* @__PURE__ */ jsx(Dialog.Content, { children: "World" })
+      /* @__PURE__ */ jsx(Dialog.Header, { onClose: fn(), title: "\u78BA\u8A8D" }),
+      /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsx("p", { children: "\u3053\u306E\u64CD\u4F5C\u3092\u5B9F\u884C\u3057\u3066\u3082\u3088\u308D\u3057\u3044\u3067\u3059\u304B\uFF1F" }) })
     ] })
   }
 };

package/dist/components/popover/popover.stories.js

@@ -21,19 +21,19 @@ const Default = {
     /* @__PURE__ */ jsx(
       Popover.Trigger,
       {
-        renderItem: (props) => /* @__PURE__ */ jsx(Button, { ...props, size: "md", type: "button", children: "Popover" })
+        renderItem: (props) => /* @__PURE__ */ jsx(Button, { ...props, size: "md", type: "button", children: "\u30E1\u30CB\u30E5\u30FC" })
       }
     ),
     /* @__PURE__ */ jsx(
       Popover.Content,
       {
-        renderItem: (props) => /* @__PURE__ */ jsx("div", { className: "rounded-sm bg-bg-mute p-4 shadow-md", ...props, children: /* @__PURE__ */ jsx("div", { role: "menuitem", children: "Popover content" }) })
+        renderItem: (props) => /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-bg-mute p-4 shadow-md", ...props, children: /* @__PURE__ */ jsx("div", { role: "menuitem", children: "\u30DD\u30C3\u30D7\u30AA\u30FC\u30D0\u30FC\u306E\u30B3\u30F3\u30C6\u30F3\u30C4" }) })
       }
     )
   ] }),
   play: async ({ canvas, userEvent }) => {
     const trigger = canvas.getByRole("button", {
-      name: "Popover"
+      name: "\u30E1\u30CB\u30E5\u30FC"
     });
     trigger.focus();
     await userEvent.keyboard("{Enter}");

package/dist/components/progress/progress.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { toPrecision } from "./../../helpers/number";
 const Progress = ({ progress, maxProgress, minProgress = 0, label }) => {
-  return /* @__PURE__ */ jsx("div", { className: "w-full rounded-sm bg-bg-emphasize", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "w-full rounded-full bg-bg-emphasize", children: /* @__PURE__ */ jsx(
     "div",
     {
       "aria-label": label ?? `${toPrecision(progress / maxProgress).toString()}%`,
       "aria-valuemax": maxProgress,
       "aria-valuemin": minProgress,
       "aria-valuenow": progress,
-      className: "h-4 rounded-sm bg-primary-fg",
+      className: "h-4 rounded-full bg-primary-bg transition-all",
       role: "progressbar",
       style: {
         width: `${(progress / maxProgress * 100).toString()}%`

package/dist/components/scroll-linked/scroll-linked.js

@@ -11,7 +11,7 @@ const ScrollLinked = ({ container }) => {
   return /* @__PURE__ */ jsx(
     motion.div,
     {
-      className: "fixed top-0 right-0 left-0 h-2 origin-left bg-primary-fg",
+      className: "fixed top-0 right-0 left-0 h-2 origin-left bg-primary-bg",
       style: { scaleX }
     }
   );

package/dist/components/scroll-linked/scroll-linked.stories.js

@@ -19,20 +19,20 @@ const WithContainer = {
       return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
         "section",
         {
-          "aria-label": "Scrollable container example",
-          className: "relative h-96 overflow-y-scroll rounded border border-gray-300",
+          "aria-label": "\u30B9\u30AF\u30ED\u30FC\u30EB\u30B3\u30F3\u30C6\u30CA\u306E\u4F8B",
+          className: "relative h-96 overflow-y-scroll rounded-lg border border-border-mute",
           ref: containerRef,
           tabIndex: 0,
           children: [
             /* @__PURE__ */ jsx(Story, { args: { container: containerRef } }),
             /* @__PURE__ */ jsxs("div", { className: "h-[200vh] p-4", children: [
-              /* @__PURE__ */ jsx("h2", { className: "mb-4 font-bold text-xl", children: "Container Scroll Example" }),
-              /* @__PURE__ */ jsx("p", { className: "mb-4", children: "Scroll within this container to see the progress bar at the top." }),
-              /* @__PURE__ */ jsx("p", { className: "mb-4", children: "The progress bar tracks this container's scroll position, not the window's scroll." }),
+              /* @__PURE__ */ jsx("h2", { className: "mb-4 font-bold text-xl", children: "\u30B3\u30F3\u30C6\u30CA\u5185\u30B9\u30AF\u30ED\u30FC\u30EB\u306E\u4F8B" }),
+              /* @__PURE__ */ jsx("p", { className: "mb-4", children: "\u3053\u306E\u30B3\u30F3\u30C6\u30CA\u5185\u3092\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068\u3001\u4E0A\u90E8\u306B\u30D7\u30ED\u30B0\u30EC\u30B9\u30D0\u30FC\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002" }),
+              /* @__PURE__ */ jsx("p", { className: "mb-4", children: "\u30D7\u30ED\u30B0\u30EC\u30B9\u30D0\u30FC\u306F\u30A6\u30A3\u30F3\u30C9\u30A6\u3067\u306F\u306A\u304F\u3001\u3053\u306E\u30B3\u30F3\u30C6\u30CA\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u4F4D\u7F6E\u3092\u8FFD\u8DE1\u3057\u307E\u3059\u3002" }),
               /* @__PURE__ */ jsx("div", { className: "mt-8 space-y-4", children: Array.from({ length: 20 }, (_, i) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: Static demo content
-                /* @__PURE__ */ jsxs("p", { className: "rounded bg-gray-100 p-4", children: [
-                  "Content block ",
+                /* @__PURE__ */ jsxs("p", { className: "rounded-lg bg-bg-mute p-4", children: [
+                  "\u30B3\u30F3\u30C6\u30F3\u30C4\u30D6\u30ED\u30C3\u30AF ",
                   i + 1
                 ] }, `content-${i}`)
               )) })

package/dist/components/separator/separator.d.ts

@@ -1,4 +1,5 @@
 import type { FC } from 'react';
 export declare const Separator: FC<{
     orientation?: 'horizontal' | 'vertical';
+    color?: 'base' | 'mute' | 'subtle';
 }>;

package/dist/components/separator/separator.js

@@ -1,18 +1,27 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "./../../helpers/cn";
-const Separator = ({ orientation = "horizontal" }) => {
+const Separator = ({ orientation = "horizontal", color = "base" }) => {
   const isVertical = orientation === "vertical";
-  const Element = isVertical ? "div" : "hr";
-  return /* @__PURE__ */ jsx(
-    Element,
-    {
-      "aria-orientation": isVertical ? "vertical" : void 0,
-      className: cn("bg-border-base", {
-        "h-full w-px": isVertical,
-        "h-px w-full": !isVertical
-      }),
-      role: isVertical ? "separator" : void 0
-    }
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: decorative separator
+    // biome-ignore lint/a11y/useSemanticElements: need color prop support
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-orientation": orientation,
+        className: cn(
+          "block",
+          {
+            "h-full w-px": isVertical,
+            "h-px w-full": !isVertical
+          },
+          color === "base" && "bg-border-base",
+          color === "mute" && "bg-border-mute",
+          color === "subtle" && "bg-border-subtle"
+        ),
+        role: "separator"
+      }
+    )
   );
 };
 export {

package/dist/components/separator/separator.stories.js

@@ -20,7 +20,19 @@ const Vertical = {
     orientation: "vertical"
   }
 };
+const ColorMute = {
+  args: {
+    color: "mute"
+  }
+};
+const ColorSubtle = {
+  args: {
+    color: "subtle"
+  }
+};
 export {
+  ColorMute,
+  ColorSubtle,
   Horizontal,
   Vertical,
   separator_stories_default as default

package/dist/components/tabs/tabs.js

@@ -78,7 +78,7 @@ const Tab = ({ id, children }) => {
       "aria-controls": selectedId === id ? `${rootId}-panel-${id}` : void 0,
       "aria-selected": selectedId === id,
       className: cn(
-        "relative cursor-pointer rounded-md p-2",
+        "relative cursor-pointer rounded-lg p-2 transition-colors",
         "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"
       ),
       id: `${rootId}-tab-${id}`,
@@ -125,7 +125,7 @@ const Panel = ({ id, children }) => {
     {
       "aria-labelledby": `${rootId}-tab-${id}`,
       className: cn(
-        "flex-grow rounded-md p-2",
+        "grow rounded-lg p-2",
         "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"
       ),
       id: `${rootId}-panel-${id}`,

package/dist/components/tabs/tabs.stories.js

@@ -7,39 +7,46 @@ const meta = {
 };
 var tabs_stories_default = meta;
 const Primary = {
-  render: () => /* @__PURE__ */ jsxs(Tabs.Root, { ids: ["tab1", "tab2", "tab3"], children: [
-    /* @__PURE__ */ jsxs(Tabs.List, { label: "Tabs Example", children: [
-      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab1", children: "Tab1" }),
-      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab2", children: "Tab2" }),
-      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab3", children: "Tab3" })
+  render: () => /* @__PURE__ */ jsxs(Tabs.Root, { ids: ["overview", "settings", "history"], children: [
+    /* @__PURE__ */ jsxs(Tabs.List, { label: "\u8A2D\u5B9A\u30E1\u30CB\u30E5\u30FC", children: [
+      /* @__PURE__ */ jsx(Tabs.Tab, { id: "overview", children: "\u6982\u8981" }),
+      /* @__PURE__ */ jsx(Tabs.Tab, { id: "settings", children: "\u8A2D\u5B9A" }),
+      /* @__PURE__ */ jsx(Tabs.Tab, { id: "history", children: "\u5C65\u6B74" })
     ] }),
-    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab1", children: "Panel1" }),
-    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab2", children: "Panel2" }),
-    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab3", children: "Panel3" })
+    /* @__PURE__ */ jsx(Tabs.Panel, { id: "overview", children: /* @__PURE__ */ jsx("p", { children: "\u3053\u3053\u306B\u6982\u8981\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002" }) }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { id: "settings", children: /* @__PURE__ */ jsx("p", { children: "\u3053\u3053\u306B\u8A2D\u5B9A\u9805\u76EE\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002" }) }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { id: "history", children: /* @__PURE__ */ jsx("p", { children: "\u3053\u3053\u306B\u5C65\u6B74\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002" }) })
   ] }),
   play: async ({ canvas, userEvent }) => {
-    const tab2 = canvas.getByRole("tab", { name: "Tab2" });
-    const tab3 = canvas.getByRole("tab", { name: "Tab3" });
-    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Panel1");
-    await userEvent.click(tab2);
-    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Panel2");
-    await userEvent.click(tab3);
-    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Panel3");
+    const settingsTab = canvas.getByRole("tab", { name: "\u8A2D\u5B9A" });
+    const historyTab = canvas.getByRole("tab", { name: "\u5C65\u6B74" });
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("\u6982\u8981");
+    await userEvent.click(settingsTab);
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("\u8A2D\u5B9A\u9805\u76EE");
+    await userEvent.click(historyTab);
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("\u5C65\u6B74");
   }
 };
 const DefaultSelected = {
-  render: () => /* @__PURE__ */ jsxs(Tabs.Root, { defaultSelectedId: "tab2", ids: ["tab1", "tab2", "tab3"], children: [
-    /* @__PURE__ */ jsxs(Tabs.List, { label: "Tabs Example", children: [
-      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab1", children: "Tab1" }),
-      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab2", children: "Tab2" }),
-      /* @__PURE__ */ jsx(Tabs.Tab, { id: "tab3", children: "Tab3" })
-    ] }),
-    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab1", children: "Panel1" }),
-    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab2", children: "Panel2" }),
-    /* @__PURE__ */ jsx(Tabs.Panel, { id: "tab3", children: "Panel3" })
-  ] }),
+  render: () => /* @__PURE__ */ jsxs(
+    Tabs.Root,
+    {
+      defaultSelectedId: "settings",
+      ids: ["overview", "settings", "history"],
+      children: [
+        /* @__PURE__ */ jsxs(Tabs.List, { label: "\u8A2D\u5B9A\u30E1\u30CB\u30E5\u30FC", children: [
+          /* @__PURE__ */ jsx(Tabs.Tab, { id: "overview", children: "\u6982\u8981" }),
+          /* @__PURE__ */ jsx(Tabs.Tab, { id: "settings", children: "\u8A2D\u5B9A" }),
+          /* @__PURE__ */ jsx(Tabs.Tab, { id: "history", children: "\u5C65\u6B74" })
+        ] }),
+        /* @__PURE__ */ jsx(Tabs.Panel, { id: "overview", children: /* @__PURE__ */ jsx("p", { children: "\u3053\u3053\u306B\u6982\u8981\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002" }) }),
+        /* @__PURE__ */ jsx(Tabs.Panel, { id: "settings", children: /* @__PURE__ */ jsx("p", { children: "\u3053\u3053\u306B\u8A2D\u5B9A\u9805\u76EE\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002" }) }),
+        /* @__PURE__ */ jsx(Tabs.Panel, { id: "history", children: /* @__PURE__ */ jsx("p", { children: "\u3053\u3053\u306B\u5C65\u6B74\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002" }) })
+      ]
+    }
+  ),
   play: async ({ canvas }) => {
-    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Panel2");
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("\u8A2D\u5B9A\u9805\u76EE");
   }
 };
 export {

package/dist/components/text-tag/text-tag.js

@@ -9,7 +9,7 @@ const TextTag = ({
     "span",
     {
       className: cn(
-        "inline-block rounded-full bg-bg-mute font-medium",
+        "inline-block rounded-full bg-bg-mute font-medium transition-colors",
         clickable && "cursor-pointer hover:bg-bg-emphasize",
         size === "sm" && "px-2 py-0.5 text-xs",
         size === "md" && "px-3 py-1 text-sm"

package/dist/components/tooltip/tooltip.js

@@ -43,7 +43,7 @@ const Content = ({ children }) => {
         "div",
         {
           ...props,
-          className: "rounded-lg border border-border-mute bg-bg-base px-4 py-2 shadow-xl",
+          className: "rounded-lg border border-border-mute bg-bg-base px-4 py-2 shadow-md",
           children
         }
       )

package/dist/components/tooltip/tooltip.stories.js

@@ -21,14 +21,14 @@ const Default = {
     /* @__PURE__ */ jsx(
       Tooltip.Trigger,
       {
-        renderItem: (props) => /* @__PURE__ */ jsx(Button, { type: "button", ...props, children: "Tooltip" })
+        renderItem: (props) => /* @__PURE__ */ jsx(Button, { type: "button", ...props, children: "\u30D8\u30EB\u30D7" })
       }
     ),
-    /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx("p", { children: "Tooltip content" }) })
+    /* @__PURE__ */ jsx(Tooltip.Content, { children: /* @__PURE__ */ jsx("p", { children: "\u3053\u3053\u306B\u88DC\u8DB3\u60C5\u5831\u304C\u8868\u793A\u3055\u308C\u307E\u3059" }) })
   ] }),
   play: async ({ canvas, userEvent }) => {
     const trigger = canvas.getByRole("button", {
-      name: "Tooltip"
+      name: "\u30D8\u30EB\u30D7"
     });
     trigger.focus();
     await userEvent.keyboard("{Enter}");

package/dist/styles/index.css

@@ -271,9 +271,6 @@
 }
 
 @theme inline {
-  /* TODO: spacingをもっと定義する */
-  --spacing-lg: 32rem;
-
   --color-*: initial;
   --color-fg-base: var(--fg-base);
   --color-fg-subtle: var(--fg-subtle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "1.4.3",
+  "version": "2.0.0",
   "description": "k8o's react ui library",
   "author": "k8o <kosakanoki@gmail.com>",
   "keywords": [
@@ -57,18 +57,18 @@
     "clsx": "2.1.1",
     "esbuild": "0.27.2",
     "lucide-react": "0.562.0",
-    "motion": "12.23.26",
-    "react-error-boundary": "6.0.0",
+    "motion": "12.25.0",
+    "react-error-boundary": "6.0.3",
     "tailwind-merge": "3.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.3",
-    "@storybook/addon-a11y": "10.1.10",
-    "@storybook/addon-docs": "10.1.10",
-    "@storybook/addon-vitest": "10.1.10",
-    "@storybook/react-vite": "10.1.10",
+    "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-docs": "10.1.11",
+    "@storybook/addon-vitest": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
     "@tailwindcss/postcss": "4.1.18",
-    "@types/react": "19.2.7",
+    "@types/react": "19.2.8",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react-swc": "4.2.2",
     "@vitest/browser-playwright": "4.0.16",
@@ -76,10 +76,10 @@
     "postcss": "8.5.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "storybook": "10.1.10",
+    "storybook": "10.1.11",
     "storybook-addon-mock-date": "2.0.0",
     "tailwindcss": "4.1.18",
-    "vite": "7.3.0",
+    "vite": "7.3.1",
     "vitest": "4.0.16",
     "vitest-browser-react": "2.0.2"
   },

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

@@ -1,6 +0,0 @@
-import type { FC } from 'react';
-import { type BaseIconProps } from './base';
-export declare const Zenn: FC<{
-    className?: string;
-}>;
-export declare const ZennIcon: FC<Partial<BaseIconProps>>;

package/dist/components/icons/zenn.js

@@ -1,41 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { BaseIcon } from "./base";
-const Zenn = ({ className }) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className,
-      viewBox: "0 0 98 96",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsxs("g", { fill: "#3EA8FF", children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M3.9,83.3h17c0.9,0,1.7-0.5,2.2-1.2L69.9,5.2c0.6-1-0.1-2.2-1.3-2.2H52.5c-0.8,0-1.5,0.4-1.9,1.1L3.1,81.9\n		C2.8,82.5,3.2,83.3,3.9,83.3z"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M62.5,82.1l22.1-35.5c0.7-1.1-0.1-2.5-1.4-2.5h-16c-0.6,0-1.2,0.3-1.5,0.8L43,81.2c-0.6,0.9,0.1,2.1,1.2,2.1\n		h16.3C61.3,83.3,62.1,82.9,62.5,82.1z"
-          }
-        )
-      ] })
-    }
-  );
-};
-const ZennIcon = ({ size = "md" }) => {
-  return /* @__PURE__ */ jsx(
-    BaseIcon,
-    {
-      renderItem: (props) => {
-        return /* @__PURE__ */ jsx(Zenn, { ...props });
-      },
-      size
-    }
-  );
-};
-export {
-  Zenn,
-  ZennIcon
-};