@k8o/arte-odyssey 3.0.0 → 3.1.0

package/dist/components/card/card.js

@@ -3,12 +3,15 @@ import { cn } from "./../../helpers/cn";
 const Card = ({
   children,
   variant = "primary",
-  width = "full"
+  width = "full",
+  appearance = "shadow"
 }) => /* @__PURE__ */ jsx(
-  "section",
+  "div",
   {
     className: cn(
-      "rounded-lg shadow-sm",
+      "rounded-lg",
+      appearance === "shadow" && "shadow-sm",
+      appearance === "bordered" && "border border-border-mute",
       width === "full" && "w-full",
       width === "fit" && "w-fit",
       variant === "primary" && "bg-bg-base",

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

@@ -33,10 +33,17 @@ const Interactive = {
     ] }) })
   ] })
 };
+const Bordered = {
+  render: () => /* @__PURE__ */ jsx(Card, { appearance: "bordered", children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "font-bold text-lg", children: "\u30DC\u30FC\u30C0\u30FC\u30B9\u30BF\u30A4\u30EB" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-fg-mute", children: "\u30B7\u30E3\u30C9\u30A6\u306E\u4EE3\u308F\u308A\u306B\u30DC\u30FC\u30C0\u30FC\u3067\u533A\u5207\u308B\u30B9\u30BF\u30A4\u30EB\u3067\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 {
+  Bordered,
   FitWidth,
   Interactive,
   Primary,

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

@@ -3,12 +3,15 @@ import { cn } from "./../../helpers/cn";
 const InteractiveCard = ({
   children,
   variant = "primary",
-  width = "full"
+  width = "full",
+  appearance = "shadow"
 }) => /* @__PURE__ */ jsx(
-  "section",
+  "div",
   {
     className: cn(
-      "rounded-lg shadow-sm transition-transform hover:scale-[1.02] active:scale-[0.98]",
+      "rounded-lg transition-transform hover:scale-[1.02] active:scale-[0.98]",
+      appearance === "shadow" && "shadow-sm",
+      appearance === "bordered" && "border border-border-mute",
       width === "full" && "w-full",
       width === "fit" && "w-fit",
       variant === "primary" && "bg-bg-base",

package/dist/components/card/type.d.ts

@@ -2,4 +2,5 @@ import type { PropsWithChildren } from 'react';
 export type CardProps = PropsWithChildren<{
     variant?: 'primary' | 'secondary';
     width?: 'full' | 'fit';
+    appearance?: 'shadow' | 'bordered';
 }>;

package/dist/components/drawer/drawer.d.ts

@@ -1,6 +1,7 @@
-import { type FC, type PropsWithChildren } from 'react';
+import { type FC, type PropsWithChildren, type ReactNode } from 'react';
 export declare const Drawer: FC<PropsWithChildren<{
-    title: string;
+    title: ReactNode;
     isOpen: boolean;
     onClose: () => void;
+    side?: 'left' | 'right';
 }>>;

package/dist/components/drawer/drawer.js

@@ -1,45 +1,55 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { cn } from "../../helpers/cn";
 import { Heading } from "../heading";
 import { IconButton } from "../icon-button";
 import { CloseIcon } from "../icons";
 import { Modal } from "../modal";
-const Drawer = ({ title, isOpen, onClose, children }) => {
+const Drawer = ({ title, isOpen, onClose, side = "right", children }) => {
   const rootId = useId();
-  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, type: "right", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, type: side, children: /* @__PURE__ */ jsxs(
     "section",
     {
       "aria-describedby": `${rootId}-content`,
       "aria-labelledby": `${rootId}-header`,
-      className: "min-h-svh",
+      className: "flex h-full flex-col",
       id: rootId,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex items-center justify-center p-4 pb-2",
+            className: "flex shrink-0 items-center justify-center p-4 pb-2",
             id: `${rootId}-header`,
             children: [
-              /* @__PURE__ */ jsx(Heading, { type: "h3", children: title }),
-              /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ jsx(
-                IconButton,
+              typeof title === "string" ? /* @__PURE__ */ jsx(Heading, { type: "h3", children: title }) : title,
+              /* @__PURE__ */ jsx(
+                "div",
                 {
-                  label: "\u9589\u3058\u308B",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onClose();
-                  },
-                  children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+                  className: cn(
+                    "absolute top-2",
+                    side === "left" ? "left-2" : "right-2"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: "\u9589\u3058\u308B",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onClose();
+                      },
+                      children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+                    }
+                  )
                 }
-              ) })
+              )
             ]
           }
         ),
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "p-4",
+            className: "flex-1 overflow-y-auto overscroll-contain p-4",
             id: `${rootId}-content`,
             onClick: (e) => {
               e.stopPropagation();

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

@@ -1,6 +1,6 @@
 export { ArteOdyssey } from './arte-odyssey';
 export { GitHubIcon } from './github-mark';
 export { Logo, LogoIcon } from './logo';
-export { AIIcon, AlertIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, SlideIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, } from './lucide';
+export { AccessibilityIcon, AIIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, } from './lucide';
 export { QiitaIcon } from './qiita';
 export { TwitterIcon } from './twitter';

package/dist/components/icons/index.js

@@ -2,8 +2,10 @@ import { ArteOdyssey } from "./arte-odyssey";
 import { GitHubIcon } from "./github-mark";
 import { Logo, LogoIcon } from "./logo";
 import {
+  AccessibilityIcon,
   AIIcon,
   AlertIcon,
+  AtomIcon,
   BadIcon,
   BlogIcon,
   BoringIcon,
@@ -31,13 +33,16 @@ import {
   MixedColorIcon,
   NavigationMenuIcon,
   NewsIcon,
+  PaletteIcon,
   PlusIcon,
   PrepareIcon,
   PublishDateIcon,
   RSSIcon,
   SendIcon,
   ShallowIcon,
+  ShieldCheckIcon,
   SlideIcon,
+  SparklesIcon,
   SubscribeIcon,
   TableIcon,
   TagIcon,
@@ -48,8 +53,10 @@ import { QiitaIcon } from "./qiita";
 import { TwitterIcon } from "./twitter";
 export {
   AIIcon,
+  AccessibilityIcon,
   AlertIcon,
   ArteOdyssey,
+  AtomIcon,
   BadIcon,
   BlogIcon,
   BoringIcon,
@@ -80,6 +87,7 @@ export {
   MixedColorIcon,
   NavigationMenuIcon,
   NewsIcon,
+  PaletteIcon,
   PlusIcon,
   PrepareIcon,
   PublishDateIcon,
@@ -87,7 +95,9 @@ export {
   RSSIcon,
   SendIcon,
   ShallowIcon,
+  ShieldCheckIcon,
   SlideIcon,
+  SparklesIcon,
   SubscribeIcon,
   TableIcon,
   TagIcon,

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

@@ -47,4 +47,9 @@ export declare const InformativeIcon: FC<IconProps>;
 export declare const ShallowIcon: FC<IconProps>;
 export declare const EasyIcon: FC<IconProps>;
 export declare const DifficultIcon: FC<IconProps>;
+export declare const AtomIcon: FC<IconProps>;
+export declare const PaletteIcon: FC<IconProps>;
+export declare const ShieldCheckIcon: FC<IconProps>;
+export declare const AccessibilityIcon: FC<IconProps>;
+export declare const SparklesIcon: FC<IconProps>;
 export {};

package/dist/components/icons/lucide.js

@@ -1,8 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import {
+  Accessibility,
   AlignRight,
   Angry,
   Annoyed,
+  Atom,
   Bell,
   Blend,
   Bookmark,
@@ -34,12 +36,15 @@ import {
   Minus,
   MoonStar,
   PaintBucket,
+  Palette,
   Plus,
   Presentation,
   Rocket,
   Rss,
   Send,
+  ShieldCheck,
   Smile,
+  Sparkles,
   Sun,
   Table2,
   Tag,
@@ -524,9 +529,66 @@ const DifficultIcon = ({ size = "md" }) => {
     }
   );
 };
+const AtomIcon = ({ size = "md" }) => {
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
+    {
+      renderItem: (props) => {
+        return /* @__PURE__ */ jsx(Atom, { ...props });
+      },
+      size
+    }
+  );
+};
+const PaletteIcon = ({ size = "md" }) => {
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
+    {
+      renderItem: (props) => {
+        return /* @__PURE__ */ jsx(Palette, { ...props });
+      },
+      size
+    }
+  );
+};
+const ShieldCheckIcon = ({ size = "md" }) => {
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
+    {
+      renderItem: (props) => {
+        return /* @__PURE__ */ jsx(ShieldCheck, { ...props });
+      },
+      size
+    }
+  );
+};
+const AccessibilityIcon = ({ size = "md" }) => {
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
+    {
+      renderItem: (props) => {
+        return /* @__PURE__ */ jsx(Accessibility, { ...props });
+      },
+      size
+    }
+  );
+};
+const SparklesIcon = ({ size = "md" }) => {
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
+    {
+      renderItem: (props) => {
+        return /* @__PURE__ */ jsx(Sparkles, { ...props });
+      },
+      size
+    }
+  );
+};
 export {
   AIIcon,
+  AccessibilityIcon,
   AlertIcon,
+  AtomIcon,
   BadIcon,
   BlogIcon,
   BoringIcon,
@@ -554,13 +616,16 @@ export {
   MixedColorIcon,
   NavigationMenuIcon,
   NewsIcon,
+  PaletteIcon,
   PlusIcon,
   PrepareIcon,
   PublishDateIcon,
   RSSIcon,
   SendIcon,
   ShallowIcon,
+  ShieldCheckIcon,
   SlideIcon,
+  SparklesIcon,
   SubscribeIcon,
   TableIcon,
   TagIcon,

package/dist/components/modal/modal.d.ts

@@ -1,7 +1,7 @@
 import { type FC, type PropsWithChildren, type RefObject } from 'react';
 export declare const Modal: FC<PropsWithChildren<{
     ref?: RefObject<HTMLDialogElement | null>;
-    type?: 'center' | 'bottom' | 'right';
+    type?: 'center' | 'bottom' | 'right' | 'left';
     defaultOpen?: boolean;
     isOpen?: boolean;
     onClose?: () => void;

package/dist/components/modal/modal.js

@@ -63,6 +63,24 @@ const rightVariants = {
     }
   }
 };
+const leftVariants = {
+  open: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: 0.3,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  },
+  closed: {
+    opacity: 0,
+    x: "-100%",
+    transition: {
+      duration: 0.3,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  }
+};
 const Modal = ({ ref, type = "center", defaultOpen, isOpen, onClose, children }) => {
   const dialogRef = useRef(null);
   const [dialogOpen, setDialogOpen] = useState(defaultOpen ?? false);
@@ -99,7 +117,8 @@ const Modal = ({ ref, type = "center", defaultOpen, isOpen, onClose, children })
         "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"
+        type === "right" && "ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg dark:border-l",
+        type === "left" && "mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg dark:border-r"
       ),
       exit: "closed",
       initial: "closed",
@@ -110,7 +129,7 @@ const Modal = ({ ref, type = "center", defaultOpen, isOpen, onClose, children })
       },
       onClose: realOnClose,
       ref: realRef,
-      variants: type === "center" ? centerVariants : type === "bottom" ? bottomVariants : rightVariants,
+      variants: type === "center" ? centerVariants : type === "bottom" ? bottomVariants : type === "left" ? leftVariants : rightVariants,
       children: /* @__PURE__ */ jsx(ToastProvider, { portalRef: realRef, position: "absolute", children })
     }
   );

package/dist/styles/index.css

@@ -360,6 +360,37 @@
   --tracking-*: initial;
   --tracking-none: 0em;
   --tracking-normal: 0.025em;
+
+  --leading-*: initial;
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  --shadow-*: initial;
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  --inset-shadow-*: initial;
+  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+  --spacing: 0.25rem;
+
+  --breakpoint-*: initial;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
 }
 
 @utility grid-cols-auto-fill-* {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "k8o's react ui library",
   "author": "k8o <kosakanoki@gmail.com>",
   "keywords": [
@@ -40,6 +40,54 @@
         "default": "./dist/hooks/*/index.js"
       }
     },
+    "./helpers/cn": {
+      "import": {
+        "types": "./dist/helpers/cn.d.ts",
+        "default": "./dist/helpers/cn.js"
+      }
+    },
+    "./helpers/color/find-all-colors": {
+      "import": {
+        "types": "./dist/helpers/color/find-all-colors.d.ts",
+        "default": "./dist/helpers/color/find-all-colors.js"
+      }
+    },
+    "./helpers/number/between": {
+      "import": {
+        "types": "./dist/helpers/number/between.d.ts",
+        "default": "./dist/helpers/number/between.js"
+      }
+    },
+    "./helpers/number/cast": {
+      "import": {
+        "types": "./dist/helpers/number/cast.d.ts",
+        "default": "./dist/helpers/number/cast.js"
+      }
+    },
+    "./helpers/number/commalize": {
+      "import": {
+        "types": "./dist/helpers/number/commalize.d.ts",
+        "default": "./dist/helpers/number/commalize.js"
+      }
+    },
+    "./helpers/number/to-precision": {
+      "import": {
+        "types": "./dist/helpers/number/to-precision.d.ts",
+        "default": "./dist/helpers/number/to-precision.js"
+      }
+    },
+    "./helpers/uuid-v4": {
+      "import": {
+        "types": "./dist/helpers/uuid-v4.d.ts",
+        "default": "./dist/helpers/uuid-v4.js"
+      }
+    },
+    "./helpers/is-internal-route": {
+      "import": {
+        "types": "./dist/helpers/is-internal-route.d.ts",
+        "default": "./dist/helpers/is-internal-route.js"
+      }
+    },
     "./styles.css": "./dist/styles/index.css",
     "./*": {
       "import": {
@@ -52,22 +100,22 @@
     "*.css"
   ],
   "dependencies": {
-    "@floating-ui/react": "0.27.17",
+    "@floating-ui/react": "0.27.18",
     "baseline-status": "1.1.1",
     "clsx": "2.1.1",
     "esbuild": "0.27.3",
-    "lucide-react": "0.564.0",
-    "motion": "12.34.0",
+    "lucide-react": "0.575.0",
+    "motion": "12.34.3",
     "react-error-boundary": "6.1.1",
-    "tailwind-merge": "3.4.0"
+    "tailwind-merge": "3.5.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "5.0.1",
-    "@storybook/addon-a11y": "10.2.8",
-    "@storybook/addon-docs": "10.2.8",
-    "@storybook/addon-vitest": "10.2.8",
-    "@storybook/react-vite": "10.2.8",
-    "@tailwindcss/postcss": "4.1.18",
+    "@storybook/addon-a11y": "10.2.13",
+    "@storybook/addon-docs": "10.2.13",
+    "@storybook/addon-vitest": "10.2.13",
+    "@storybook/react-vite": "10.2.13",
+    "@tailwindcss/postcss": "4.2.1",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react-swc": "4.2.3",
@@ -76,9 +124,9 @@
     "postcss": "8.5.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "storybook": "10.2.8",
+    "storybook": "10.2.13",
     "storybook-addon-mock-date": "2.0.0",
-    "tailwindcss": "4.1.18",
+    "tailwindcss": "4.2.1",
     "vite": "7.3.1",
     "vitest": "4.0.18",
     "vitest-browser-react": "2.0.5"