@k8o/arte-odyssey 1.4.2 → 2.0.0

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"

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}`,
@@ -106,7 +106,7 @@ const Tab = ({ id, children }) => {
         selectedId === id && /* @__PURE__ */ jsx(
           motion.div,
           {
-            className: "-bottom-0.5 absolute right-0 left-0 h-1 bg-primary-border",
+            className: "absolute right-0 -bottom-0.5 left-0 h-1 bg-primary-border",
             layoutId: "underline"
           }
         ),
@@ -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);