@k8o/arte-odyssey 10.0.1 → 10.1.1

package/README.md

@@ -109,7 +109,7 @@ ArteOdyssey includes design system documentation in `docs/` directory. When inst
 - **Avatar** - User/entity avatar
 - **Badge** - Status/label indicator
 - **BaselineStatus** - Web standard support indicator
-- **Card** / **InteractiveCard** - Flexible content container (with hover interaction)
+- **Card** - Flexible content container (hover interaction via `interactive`)
 - **Code** - Formatted code display
 - **Heading** - Typography heading component
 - **Table** - Tabular data display
@@ -243,9 +243,9 @@ pnpm add @json-render/core @json-render/react zod
 pnpm add @openuidev/react-lang zod
 ```
 
-Supported components (**all 47**, both frameworks):
+Supported components (**all 46**, both frameworks):
 
-- **Layout / containers**: `Stack`, `Card`, `InteractiveCard`, `Form`
+- **Layout / containers**: `Stack`, `Card`, `Form`
 - **Buttons / nav**: `Button`, `IconButton`, `Anchor`, `Breadcrumb`, `Pagination`
 - **Display**: `Badge`, `Heading`, `Avatar`, `Code`, `Icon`, `Alert`, `Spinner`, `Progress`, `Skeleton`, `Separator`, `Tabs`, `Accordion`, `Table`, `BaselineStatus`, `ScrollLinked`
 - **Overlays (self-contained widgets)**: `Modal`, `Dialog`, `Drawer`, `Popover`, `Tooltip`, `DropdownMenu`, `Toast`

package/dist/components/data-display/card/card.d.mts

@@ -1,7 +1,11 @@
-import { CardProps } from "./type.mjs";
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 
 //#region src/components/data-display/card/card.d.ts
+type CardProps = {
+  width?: 'full' | 'fit';
+  appearance?: 'shadow' | 'bordered';
+  interactive?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
 declare const Card: FC<CardProps>;
 //#endregion
 export { Card };

package/dist/components/data-display/card/card.mjs

@@ -1,9 +1,9 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/card.tsx
-const Card = ({ children, width = "full", appearance = "shadow", ...rest }) => /* @__PURE__ */ jsx("div", {
+const Card = ({ children, width = "full", appearance = "shadow", interactive = false, ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("rounded-xl", appearance === "shadow" && "shadow-sm border border-transparent dark:border-border-subtle", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base"),
+	className: cn("rounded-xl", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", interactive && "motion-safe:transition-transform hover:motion-safe:scale-[1.02] active:motion-safe:scale-[0.98]", "bg-bg-base"),
 	children
 });
 //#endregion

package/dist/components/data-display/card/index.d.mts

@@ -1,3 +1,2 @@
 import { Card } from "./card.mjs";
-import { InteractiveCard } from "./interactive-card.mjs";
-export { Card, InteractiveCard };
+export { Card };

package/dist/components/data-display/card/index.mjs

@@ -1,3 +1,2 @@
 import { Card } from "./card.mjs";
-import { InteractiveCard } from "./interactive-card.mjs";
-export { Card, InteractiveCard };
+export { Card };

package/dist/components/data-display/table/table.mjs

@@ -2,7 +2,7 @@ import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/table/table.tsx
 const Root = ({ children }) => /* @__PURE__ */ jsx("div", {
-	className: "border-border-mute bg-bg-base vertical:writing-sideways-rl vertical:h-fit vertical:w-fit w-full overflow-x-auto rounded-lg border",
+	className: "border-border-mute bg-bg-base vertical:writing-sideways-rl vertical:size-fit w-full overflow-x-auto rounded-lg border",
 	children: /* @__PURE__ */ jsx("table", {
 		className: "min-w-full border-collapse text-left text-sm",
 		children

package/dist/components/form/checkbox-group/index.d.mts

@@ -3,7 +3,7 @@ declare const CheckboxGroup: import("react").FC<{
   invalid?: boolean;
   required?: boolean;
   name: string;
-} & Omit<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange" | "className" | "style" | "name"> & {
+} & Omit<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, "className" | "style" | "onChange" | "name" | "defaultValue"> & {
   children?: import("react").ReactNode | undefined;
 } & ({
   value: string[];
@@ -18,7 +18,7 @@ declare const CheckboxGroup: import("react").FC<{
     invalid?: boolean;
     required?: boolean;
     name: string;
-  } & Omit<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange" | "className" | "style" | "name"> & {
+  } & Omit<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, "className" | "style" | "onChange" | "name" | "defaultValue"> & {
     children?: import("react").ReactNode | undefined;
   } & ({
     value: string[];
@@ -33,7 +33,7 @@ declare const CheckboxGroup: import("react").FC<{
   Item: import("react").FC<{
     itemValue?: string;
     label: string;
-  } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "className" | "style" | "children" | "checked" | "defaultChecked"> & ({
+  } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "className" | "style" | "value" | "onChange" | "defaultChecked" | "checked" | "children"> & ({
     value: boolean;
     onChange: (checked: boolean, event: import("react").ChangeEvent<HTMLInputElement>) => void;
     defaultChecked?: never;

package/dist/components/index.d.mts

@@ -6,7 +6,6 @@ import { Avatar } from "./data-display/avatar/avatar.mjs";
 import { Badge } from "./data-display/badge/badge.mjs";
 import { BaselineStatus } from "./data-display/baseline-status/baseline-status.mjs";
 import { Card } from "./data-display/card/card.mjs";
-import { InteractiveCard } from "./data-display/card/interactive-card.mjs";
 import { Code } from "./data-display/code/code.mjs";
 import { Heading } from "./data-display/heading/heading.mjs";
 import { Table } from "./data-display/table/table.mjs";
@@ -56,4 +55,4 @@ import { useOpenContext } from "./overlays/popover/hooks.mjs";
 import { Popover } from "./overlays/popover/popover.mjs";
 import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
 import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, type GridProps, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, type StackProps, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, type GridProps, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, type StackProps, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };

package/dist/components/index.mjs

@@ -21,7 +21,6 @@ import { Avatar } from "./data-display/avatar/avatar.mjs";
 import { Badge } from "./data-display/badge/badge.mjs";
 import { BaselineStatus } from "./data-display/baseline-status/baseline-status.mjs";
 import { Card } from "./data-display/card/card.mjs";
-import { InteractiveCard } from "./data-display/card/interactive-card.mjs";
 import { Code } from "./data-display/code/code.mjs";
 import { Heading } from "./data-display/heading/heading.mjs";
 import { Table } from "./data-display/table/table.mjs";
@@ -56,4 +55,4 @@ import { Modal } from "./overlays/modal/modal.mjs";
 import { Drawer } from "./overlays/drawer/drawer.mjs";
 import { DropdownMenu } from "./overlays/dropdown-menu/dropdown-menu.mjs";
 import { ListBox } from "./overlays/list-box/list-box.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };

package/dist/components/layout/_shared/padding.d.mts

@@ -0,0 +1,11 @@
+//#region src/components/layout/_shared/padding.d.ts
+type PaddingSize = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+declare const PADDING_CLASS: {
+  readonly none: "p-0";
+  readonly sm: "p-2";
+  readonly md: "p-4";
+  readonly lg: "p-6";
+  readonly xl: "p-8";
+};
+//#endregion
+export { PADDING_CLASS, PaddingSize };

package/dist/components/layout/_shared/padding.mjs

@@ -0,0 +1,10 @@
+//#region src/components/layout/_shared/padding.ts
+const PADDING_CLASS = {
+	none: "p-0",
+	sm: "p-2",
+	md: "p-4",
+	lg: "p-6",
+	xl: "p-8"
+};
+//#endregion
+export { PADDING_CLASS };

package/dist/components/layout/stack/stack.d.mts

@@ -1,10 +1,12 @@
 import { GapSize } from "../_shared/gap.mjs";
+import { PaddingSize } from "../_shared/padding.mjs";
 import { FC, HTMLAttributes, PropsWithChildren } from "react";
 
 //#region src/components/layout/stack/stack.d.ts
 type StackProps = PropsWithChildren<{
   direction?: 'row' | 'column';
-  gap?: GapSize;
+  gap?: GapSize; /** Inner padding on all sides. Stack has no padding by default. */
+  padding?: PaddingSize;
   align?: 'start' | 'center' | 'end' | 'stretch';
   justify?: 'start' | 'center' | 'end' | 'between';
 } & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>>;

package/dist/components/layout/stack/stack.mjs

@@ -1,5 +1,6 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { GAP_CLASS } from "../_shared/gap.mjs";
+import { PADDING_CLASS } from "../_shared/padding.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/layout/stack/stack.tsx
 const ALIGN_CLASS = {
@@ -14,9 +15,9 @@ const JUSTIFY_CLASS = {
 	end: "justify-end",
 	between: "justify-between"
 };
-const Stack = ({ direction = "column", gap = "md", align, justify, children, ...rest }) => /* @__PURE__ */ jsx("div", {
+const Stack = ({ direction = "column", gap = "md", padding, align, justify, children, ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("flex", direction === "row" ? "flex-row" : "flex-col", GAP_CLASS[gap], align && ALIGN_CLASS[align], justify && JUSTIFY_CLASS[justify]),
+	className: cn("flex", direction === "row" ? "flex-row" : "flex-col", GAP_CLASS[gap], padding && PADDING_CLASS[padding], align && ALIGN_CLASS[align], justify && JUSTIFY_CLASS[justify]),
 	children
 });
 //#endregion

package/dist/index.d.mts

@@ -6,7 +6,6 @@ import { Avatar } from "./components/data-display/avatar/avatar.mjs";
 import { Badge } from "./components/data-display/badge/badge.mjs";
 import { BaselineStatus } from "./components/data-display/baseline-status/baseline-status.mjs";
 import { Card } from "./components/data-display/card/card.mjs";
-import { InteractiveCard } from "./components/data-display/card/interactive-card.mjs";
 import { Code } from "./components/data-display/code/code.mjs";
 import { Heading } from "./components/data-display/heading/heading.mjs";
 import { Table } from "./components/data-display/table/table.mjs";
@@ -85,4 +84,4 @@ import { useTimeout } from "./hooks/timeout/index.mjs";
 import { useWindowResize } from "./hooks/window-resize/index.mjs";
 import { useWindowSize } from "./hooks/window-size/index.mjs";
 import { WritingMode, useWritingMode } from "./hooks/writing-mode/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, type DebouncedAction, Dialog, DifficultIcon, type Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, type GridProps, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, type Option, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, type StackProps, type Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, type WritingMode, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, type DebouncedAction, Dialog, DifficultIcon, type Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, type GridProps, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, type Option, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, type StackProps, type Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, type WritingMode, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };

package/dist/index.mjs

@@ -31,7 +31,6 @@ import { Badge } from "./components/data-display/badge/badge.mjs";
 import { useClient } from "./hooks/client/index.mjs";
 import { BaselineStatus } from "./components/data-display/baseline-status/baseline-status.mjs";
 import { Card } from "./components/data-display/card/card.mjs";
-import { InteractiveCard } from "./components/data-display/card/interactive-card.mjs";
 import { Code } from "./components/data-display/code/code.mjs";
 import { Heading } from "./components/data-display/heading/heading.mjs";
 import { Table } from "./components/data-display/table/table.mjs";
@@ -84,4 +83,4 @@ import { Drawer } from "./components/overlays/drawer/drawer.mjs";
 import { DropdownMenu } from "./components/overlays/dropdown-menu/dropdown-menu.mjs";
 import { ListBox } from "./components/overlays/list-box/list-box.mjs";
 import { mergeProps } from "./helpers/merge-props.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };

package/dist/integrations/_shared/renderers.d.mts

@@ -1,4 +1,4 @@
-import { AccordionProps, AlertProps, AnchorProps, AutocompleteProps, AvatarProps, BadgeProps, BaselineStatusProps, BreadcrumbProps, ButtonProps, CardProps, CheckboxCardProps, CheckboxGroupProps, CheckboxProps, ChevronIconProps, CodeProps, DialogProps, DrawerProps, DropdownMenuProps, FileFieldProps, FormControlProps, FormProps, GridProps, HeadingProps, IconButtonProps, IconProps, InteractiveCardProps, ListBoxProps, ModalProps, NumberFieldProps, PaginationProps, PasswordInputProps, PopoverProps, ProgressProps, RadioCardProps, RadioProps, ScrollLinkedProps, SelectProps, SeparatorProps, SkeletonProps, SliderProps, SpinnerProps, StackProps, StatusIconProps, SwitchProps, TableProps, TabsProps, TextFieldProps, TextareaProps, ToastProps, TooltipProps } from "./schemas.mjs";
+import { AccordionProps, AlertProps, AnchorProps, AutocompleteProps, AvatarProps, BadgeProps, BaselineStatusProps, BreadcrumbProps, ButtonProps, CardProps, CheckboxCardProps, CheckboxGroupProps, CheckboxProps, ChevronIconProps, CodeProps, DialogProps, DrawerProps, DropdownMenuProps, FileFieldProps, FormControlProps, FormProps, GridProps, HeadingProps, IconButtonProps, IconProps, ListBoxProps, ModalProps, NumberFieldProps, PaginationProps, PasswordInputProps, PopoverProps, ProgressProps, RadioCardProps, RadioProps, ScrollLinkedProps, SelectProps, SeparatorProps, SkeletonProps, SliderProps, SpinnerProps, StackProps, StatusIconProps, SwitchProps, TableProps, TabsProps, TextFieldProps, TextareaProps, ToastProps, TooltipProps } from "./schemas.mjs";
 import { FC, ReactNode } from "react";
 
 //#region src/integrations/_shared/renderers.d.ts
@@ -39,7 +39,6 @@ declare function renderSkeleton(props: SkeletonProps): ReactNode;
 declare function renderAccordion(props: AccordionProps): ReactNode;
 declare function renderBreadcrumb(props: BreadcrumbProps): ReactNode;
 declare function renderTable(props: TableProps): ReactNode;
-declare function renderInteractiveCard(props: InteractiveCardProps, children: ReactNode): ReactNode;
 declare function renderForm(props: FormProps, children: ReactNode): ReactNode;
 declare const ModalWidget: FC<{
   props: ModalProps;
@@ -71,4 +70,4 @@ declare const FormControlWidget: FC<{
   props: FormControlProps;
 }>;
 //#endregion
-export { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, TabsView, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBaselineStatus, renderBreadcrumb, renderButton, renderCard, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderInteractiveCard, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderScrollLinked, renderSelect, renderSeparator, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderTooltip };
+export { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, TabsView, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBaselineStatus, renderBreadcrumb, renderButton, renderCard, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderScrollLinked, renderSelect, renderSeparator, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderTooltip };

package/dist/integrations/_shared/renderers.mjs

@@ -19,7 +19,6 @@ import { Avatar } from "../../components/data-display/avatar/avatar.mjs";
 import { Badge } from "../../components/data-display/badge/badge.mjs";
 import { BaselineStatus } from "../../components/data-display/baseline-status/baseline-status.mjs";
 import { Card } from "../../components/data-display/card/card.mjs";
-import { InteractiveCard } from "../../components/data-display/card/interactive-card.mjs";
 import { Code } from "../../components/data-display/code/code.mjs";
 import { Heading } from "../../components/data-display/heading/heading.mjs";
 import { Table } from "../../components/data-display/table/table.mjs";
@@ -170,11 +169,20 @@ function renderSeparator(props) {
 		orientation: u(props.orientation)
 	});
 }
+const CARD_PADDING_CLASS = {
+	sm: "p-4",
+	md: "p-6",
+	lg: "p-8"
+};
 function renderCard(props, children) {
 	return /* @__PURE__ */ jsx(Card, {
 		appearance: u(props.appearance),
+		interactive: u(props.interactive),
 		width: u(props.width),
-		children
+		children: /* @__PURE__ */ jsx("div", {
+			className: CARD_PADDING_CLASS[props.size ?? "md"],
+			children
+		})
 	});
 }
 const TabsView = ({ props }) => {
@@ -203,6 +211,7 @@ function renderStack(props, children) {
 		direction: u(props.direction),
 		gap: u(props.gap),
 		justify: u(props.justify),
+		padding: u(props.padding),
 		children
 	});
 }
@@ -464,13 +473,6 @@ function renderTable(props) {
 		}, cellIndex)) }, rowIndex)) })
 	] });
 }
-function renderInteractiveCard(props, children) {
-	return /* @__PURE__ */ jsx(InteractiveCard, {
-		appearance: u(props.appearance),
-		width: u(props.width),
-		children
-	});
-}
 function renderForm(props, children) {
 	return /* @__PURE__ */ jsx(Form, {
 		action: u(props.action),
@@ -664,4 +666,4 @@ const FormControlWidget = ({ props }) => {
 	});
 };
 //#endregion
-export { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, TabsView, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBaselineStatus, renderBreadcrumb, renderButton, renderCard, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderInteractiveCard, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderScrollLinked, renderSelect, renderSeparator, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderTooltip };
+export { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, TabsView, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBaselineStatus, renderBreadcrumb, renderButton, renderCard, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderScrollLinked, renderSelect, renderSeparator, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderTooltip };

package/dist/integrations/_shared/schemas.d.mts

@@ -237,9 +237,9 @@ declare const chevronIconProps: z.ZodObject<{
 declare const statusIconProps: z.ZodObject<{
   status: z.ZodEnum<{
     success: "success";
-    error: "error";
     info: "info";
     warning: "warning";
+    error: "error";
   }>;
   size: z.ZodOptional<z.ZodEnum<{
     sm: "sm";
@@ -251,9 +251,9 @@ declare const badgeProps: z.ZodObject<{
   text: z.ZodString;
   tone: z.ZodOptional<z.ZodEnum<{
     success: "success";
-    error: "error";
     info: "info";
     warning: "warning";
+    error: "error";
     neutral: "neutral";
   }>>;
   variant: z.ZodOptional<z.ZodEnum<{
@@ -320,23 +320,19 @@ declare const cardProps: z.ZodObject<{
     shadow: "shadow";
     bordered: "bordered";
   }>>;
-}, z.core.$strip>;
-declare const interactiveCardProps: z.ZodObject<{
-  width: z.ZodOptional<z.ZodEnum<{
-    full: "full";
-    fit: "fit";
-  }>>;
-  appearance: z.ZodOptional<z.ZodEnum<{
-    shadow: "shadow";
-    bordered: "bordered";
+  interactive: z.ZodOptional<z.ZodBoolean>;
+  size: z.ZodOptional<z.ZodEnum<{
+    sm: "sm";
+    md: "md";
+    lg: "lg";
   }>>;
 }, z.core.$strip>;
 declare const alertProps: z.ZodObject<{
   tone: z.ZodEnum<{
     success: "success";
-    error: "error";
     info: "info";
     warning: "warning";
+    error: "error";
   }>;
   message: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
 }, z.core.$strip>;
@@ -370,9 +366,9 @@ declare const toastProps: z.ZodObject<{
   triggerLabel: z.ZodString;
   tone: z.ZodEnum<{
     success: "success";
-    error: "error";
     info: "info";
     warning: "warning";
+    error: "error";
   }>;
   message: z.ZodString;
 }, z.core.$strip>;
@@ -396,8 +392,15 @@ declare const stackProps: z.ZodObject<{
     sm: "sm";
     md: "md";
     lg: "lg";
+    none: "none";
     xl: "xl";
+  }>>;
+  padding: z.ZodOptional<z.ZodEnum<{
+    sm: "sm";
+    md: "md";
+    lg: "lg";
     none: "none";
+    xl: "xl";
   }>>;
   align: z.ZodOptional<z.ZodEnum<{
     start: "start";
@@ -419,8 +422,8 @@ declare const gridProps: z.ZodObject<{
     sm: "sm";
     md: "md";
     lg: "lg";
-    xl: "xl";
     none: "none";
+    xl: "xl";
   }>>;
 }, z.core.$strip>;
 declare const scrollLinkedProps: z.ZodObject<{}, z.core.$strip>;
@@ -679,7 +682,6 @@ type PaginationProps = z.infer<typeof paginationProps>;
 type GridProps = z.infer<typeof gridProps>;
 type ChevronIconProps = z.infer<typeof chevronIconProps>;
 type StatusIconProps = z.infer<typeof statusIconProps>;
-type InteractiveCardProps = z.infer<typeof interactiveCardProps>;
 type FormProps = z.infer<typeof formProps>;
 type ModalProps = z.infer<typeof modalProps>;
 type DialogProps = z.infer<typeof dialogProps>;
@@ -701,4 +703,4 @@ type CoversComponent<Component, Zod> = [Exclude<NonNullable<Component>, Zod>] ex
 type AssertCovered<T extends true> = T;
 type _EnumCoverage = [AssertCovered<CoversComponent<ComponentProps<typeof Button>['variant'], ButtonProps['variant']>>, AssertCovered<CoversComponent<ComponentProps<typeof Button>['color'], ButtonProps['color']>>, AssertCovered<CoversComponent<ComponentProps<typeof Button>['size'], ButtonProps['size']>>, AssertCovered<CoversComponent<ComponentProps<typeof Badge>['tone'], BadgeProps['tone']>>, AssertCovered<CoversComponent<ComponentProps<typeof Badge>['variant'], BadgeProps['variant']>>, AssertCovered<CoversComponent<ComponentProps<typeof Badge>['size'], BadgeProps['size']>>, AssertCovered<CoversComponent<ComponentProps<typeof Card>['width'], CardProps['width']>>, AssertCovered<CoversComponent<ComponentProps<typeof Card>['appearance'], CardProps['appearance']>>, AssertCovered<CoversComponent<ComponentProps<typeof Alert>['tone'], AlertProps['tone']>>, AssertCovered<CoversComponent<ComponentProps<typeof Separator>['orientation'], SeparatorProps['orientation']>>, AssertCovered<CoversComponent<ComponentProps<typeof Separator>['color'], SeparatorProps['color']>>, AssertCovered<CoversComponent<ComponentProps<typeof Modal>['type'], ModalProps['type']>>, AssertCovered<CoversComponent<ComponentProps<typeof Drawer>['side'], DrawerProps['side']>>, AssertCovered<CoversComponent<ComponentProps<typeof Heading>['type'], HeadingProps['level']>>, AssertCovered<CoversComponent<ComponentProps<typeof Avatar>['size'], AvatarProps['size']>>, AssertCovered<CoversComponent<ComponentProps<typeof Spinner>['size'], SpinnerProps['size']>>, AssertCovered<CoversComponent<ComponentProps<typeof Skeleton>['shape'], SkeletonProps['shape']>>, AssertCovered<CoversComponent<ComponentProps<typeof Skeleton>['size'], SkeletonProps['size']>>, AssertCovered<CoversComponent<ComponentProps<typeof IconButton>['size'], IconButtonProps['size']>>, AssertCovered<CoversComponent<ComponentProps<typeof IconButton>['color'], IconButtonProps['color']>>, AssertCovered<CoversComponent<ComponentProps<typeof ChevronIcon>['direction'], ChevronIconProps['direction']>>, AssertCovered<CoversComponent<ComponentProps<typeof AlertIcon>['status'], StatusIconProps['status']>>, AssertCovered<CoversComponent<ComponentProps<typeof Stack>['direction'], StackProps['direction']>>, AssertCovered<CoversComponent<ComponentProps<typeof Stack>['gap'], StackProps['gap']>>, AssertCovered<CoversComponent<ComponentProps<typeof Stack>['align'], StackProps['align']>>, AssertCovered<CoversComponent<ComponentProps<typeof Stack>['justify'], StackProps['justify']>>, AssertCovered<CoversComponent<ComponentProps<typeof Grid>['cols'], GridProps['cols']>>, AssertCovered<CoversComponent<ComponentProps<typeof Grid>['minItemSize'], GridProps['minItemSize']>>, AssertCovered<CoversComponent<ComponentProps<typeof Grid>['gap'], GridProps['gap']>>, AssertCovered<CoversComponent<ComponentProps<typeof Breadcrumb.List>['size'], BreadcrumbProps['size']>>];
 //#endregion
-export { AccordionProps, AlertProps, AnchorProps, AutocompleteProps, AvatarProps, BadgeProps, BaselineStatusProps, BreadcrumbProps, ButtonProps, CardProps, CheckboxCardProps, CheckboxGroupProps, CheckboxProps, ChevronIconProps, CodeProps, DialogProps, DrawerProps, DropdownMenuProps, FileFieldProps, FormControlProps, FormProps, GridProps, HeadingProps, IconButtonProps, IconName, IconProps, InteractiveCardProps, ListBoxProps, ModalProps, NumberFieldProps, PaginationProps, PasswordInputProps, PopoverProps, ProgressProps, RadioCardProps, RadioProps, ScrollLinkedProps, SelectProps, SeparatorProps, SkeletonProps, SliderProps, SpinnerProps, StackProps, StatusIconProps, SwitchProps, TableProps, TabsProps, TextFieldProps, TextareaProps, ToastProps, TooltipProps, _EnumCoverage, accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, baselineStatusProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconName, iconProps, interactiveCardProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps };
+export { AccordionProps, AlertProps, AnchorProps, AutocompleteProps, AvatarProps, BadgeProps, BaselineStatusProps, BreadcrumbProps, ButtonProps, CardProps, CheckboxCardProps, CheckboxGroupProps, CheckboxProps, ChevronIconProps, CodeProps, DialogProps, DrawerProps, DropdownMenuProps, FileFieldProps, FormControlProps, FormProps, GridProps, HeadingProps, IconButtonProps, IconName, IconProps, ListBoxProps, ModalProps, NumberFieldProps, PaginationProps, PasswordInputProps, PopoverProps, ProgressProps, RadioCardProps, RadioProps, ScrollLinkedProps, SelectProps, SeparatorProps, SkeletonProps, SliderProps, SpinnerProps, StackProps, StatusIconProps, SwitchProps, TableProps, TabsProps, TextFieldProps, TextareaProps, ToastProps, TooltipProps, _EnumCoverage, accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, baselineStatusProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconName, iconProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps };

package/dist/integrations/_shared/schemas.mjs

@@ -212,9 +212,14 @@ const tableProps = z.object({
 });
 const cardProps = z.object({
 	width: z.enum(["full", "fit"]).optional(),
-	appearance: z.enum(["shadow", "bordered"]).optional()
+	appearance: z.enum(["shadow", "bordered"]).optional(),
+	interactive: z.boolean().optional(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
 });
-const interactiveCardProps = cardProps;
 const alertProps = z.object({
 	tone: z.enum([
 		"success",
@@ -274,6 +279,13 @@ const stackProps = z.object({
 		"lg",
 		"xl"
 	]).optional(),
+	padding: z.enum([
+		"none",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	]).optional(),
 	align: z.enum([
 		"start",
 		"center",
@@ -493,4 +505,4 @@ const dropdownMenuProps = z.object({
 	items: z.array(z.object({ label: z.string() })).min(1).describe("メニュー項目")
 });
 //#endregion
-export { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, baselineStatusProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconName, iconProps, interactiveCardProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps };
+export { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, baselineStatusProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconName, iconProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps };

package/dist/integrations/json-render/catalog.d.mts

@@ -42,8 +42,15 @@ declare const catalog: import("@json-render/core").Catalog<{
           sm: "sm";
           md: "md";
           lg: "lg";
+          none: "none";
           xl: "xl";
+        }>>;
+        padding: import("zod").ZodOptional<import("zod").ZodEnum<{
+          sm: "sm";
+          md: "md";
+          lg: "lg";
           none: "none";
+          xl: "xl";
         }>>;
         align: import("zod").ZodOptional<import("zod").ZodEnum<{
           start: "start";
@@ -69,8 +76,8 @@ declare const catalog: import("@json-render/core").Catalog<{
           sm: "sm";
           md: "md";
           lg: "lg";
-          xl: "xl";
           none: "none";
+          xl: "xl";
         }>>;
       }, import("zod/v4/core").$strip>;
       slots: string[];
@@ -109,6 +116,12 @@ declare const catalog: import("@json-render/core").Catalog<{
           shadow: "shadow";
           bordered: "bordered";
         }>>;
+        interactive: import("zod").ZodOptional<import("zod").ZodBoolean>;
+        size: import("zod").ZodOptional<import("zod").ZodEnum<{
+          sm: "sm";
+          md: "md";
+          lg: "lg";
+        }>>;
       }, import("zod/v4/core").$strip>;
       slots: string[];
       description: string;
@@ -118,9 +131,9 @@ declare const catalog: import("@json-render/core").Catalog<{
         text: import("zod").ZodString;
         tone: import("zod").ZodOptional<import("zod").ZodEnum<{
           success: "success";
-          error: "error";
           info: "info";
           warning: "warning";
+          error: "error";
           neutral: "neutral";
         }>>;
         variant: import("zod").ZodOptional<import("zod").ZodEnum<{
@@ -154,9 +167,9 @@ declare const catalog: import("@json-render/core").Catalog<{
       props: import("zod").ZodObject<{
         tone: import("zod").ZodEnum<{
           success: "success";
-          error: "error";
           info: "info";
           warning: "warning";
+          error: "error";
         }>;
         message: import("zod").ZodUnion<readonly [import("zod").ZodString, import("zod").ZodArray<import("zod").ZodString>]>;
       }, import("zod/v4/core").$strip>;
@@ -417,9 +430,9 @@ declare const catalog: import("@json-render/core").Catalog<{
       props: import("zod").ZodObject<{
         status: import("zod").ZodEnum<{
           success: "success";
-          error: "error";
           info: "info";
           warning: "warning";
+          error: "error";
         }>;
         size: import("zod").ZodOptional<import("zod").ZodEnum<{
           sm: "sm";
@@ -600,20 +613,6 @@ declare const catalog: import("@json-render/core").Catalog<{
       }, import("zod/v4/core").$strip>;
       description: string;
     };
-    InteractiveCard: {
-      props: import("zod").ZodObject<{
-        width: import("zod").ZodOptional<import("zod").ZodEnum<{
-          full: "full";
-          fit: "fit";
-        }>>;
-        appearance: import("zod").ZodOptional<import("zod").ZodEnum<{
-          shadow: "shadow";
-          bordered: "bordered";
-        }>>;
-      }, import("zod/v4/core").$strip>;
-      slots: string[];
-      description: string;
-    };
     Form: {
       props: import("zod").ZodObject<{
         action: import("zod").ZodOptional<import("zod").ZodString>;
@@ -683,9 +682,9 @@ declare const catalog: import("@json-render/core").Catalog<{
         triggerLabel: import("zod").ZodString;
         tone: import("zod").ZodEnum<{
           success: "success";
-          error: "error";
           info: "info";
           warning: "warning";
+          error: "error";
         }>;
         message: import("zod").ZodString;
       }, import("zod/v4/core").$strip>;

package/dist/integrations/json-render/catalog.mjs

@@ -1,4 +1,4 @@
-import { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, baselineStatusProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconProps, interactiveCardProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps } from "../_shared/schemas.mjs";
+import { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, baselineStatusProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps } from "../_shared/schemas.mjs";
 import { defineCatalog } from "@json-render/core";
 import { schema } from "@json-render/react/schema";
 //#region src/integrations/json-render/catalog.ts
@@ -16,7 +16,7 @@ const catalog = defineCatalog(schema, {
 		Stack: {
 			props: stackProps,
 			slots: ["default"],
-			description: "子要素を縦/横に等間隔で並べるレイアウトコンテナ。"
+			description: "子要素を縦/横に等間隔で並べるレイアウトコンテナ。gap で子要素間の間隔、padding（none〜xl）で内側の余白を付ける。セクションに余白が欲しいときは padding を指定する。"
 		},
 		Grid: {
 			props: gridProps,
@@ -30,7 +30,7 @@ const catalog = defineCatalog(schema, {
 		Card: {
 			props: cardProps,
 			slots: ["default"],
-			description: "コンテンツをまとめるカード（コンテナ）。"
+			description: "コンテンツをまとめるカード（コンテナ）。内側 padding は size（sm/md/lg、デフォルト md）で決まる。中身を Stack で囲む場合に重ねて padding を指定する必要はない。interactive を付けるとホバー時にスケールする。"
 		},
 		Badge: {
 			props: badgeProps,
@@ -152,11 +152,6 @@ const catalog = defineCatalog(schema, {
 			props: paginationProps,
 			description: "ページネーション。defaultPage を $bindState で束縛できる。"
 		},
-		InteractiveCard: {
-			props: interactiveCardProps,
-			slots: ["default"],
-			description: "ホバーアニメーション付きのカード。"
-		},
 		Form: {
 			props: formProps,
 			slots: ["default"],

package/dist/integrations/json-render/registry.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBaselineStatus, renderBreadcrumb, renderButton, renderCard, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderInteractiveCard, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderScrollLinked, renderSelect, renderSeparator, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderTooltip } from "../_shared/renderers.mjs";
+import { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBaselineStatus, renderBreadcrumb, renderButton, renderCard, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderScrollLinked, renderSelect, renderSeparator, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderTooltip } from "../_shared/renderers.mjs";
 import { catalog } from "./catalog.mjs";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -89,7 +89,6 @@ const { registry } = defineRegistry(catalog, { components: {
 		const [page, setPage] = useBoundOrLocal(props.defaultPage, bindings?.defaultPage, 1);
 		return renderPagination(props, page, setPage);
 	},
-	InteractiveCard: ({ props, children }) => renderInteractiveCard(props, children),
 	Form: ({ props, children }) => renderForm(props, children),
 	Modal: ({ props, children }) => /* @__PURE__ */ jsx(ModalWidget, {
 		props,

package/dist/integrations/openui/library.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAvatar, renderBadge, renderBaselineStatus, renderBreadcrumb, renderButton, renderCard, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderInteractiveCard, renderPopover, renderProgress, renderScrollLinked, renderSeparator, renderSkeleton, renderSpinner, renderStack, renderStatusIcon, renderTable, renderTabs, renderTooltip } from "../_shared/renderers.mjs";
-import { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, baselineStatusProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconProps, interactiveCardProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps } from "../_shared/schemas.mjs";
+import { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAvatar, renderBadge, renderBaselineStatus, renderBreadcrumb, renderButton, renderCard, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderPopover, renderProgress, renderScrollLinked, renderSeparator, renderSkeleton, renderSpinner, renderStack, renderStatusIcon, renderTable, renderTabs, renderTooltip } from "../_shared/renderers.mjs";
+import { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, baselineStatusProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps } from "../_shared/schemas.mjs";
 import { AutocompleteView, CheckboxCardView, CheckboxGroupView, CheckboxView, ListBoxView, NumberFieldView, PaginationView, PasswordInputView, RadioCardView, RadioView, SelectView, SliderView, SwitchView, TextFieldView, TextareaView } from "./form-views.mjs";
 import { Fragment } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -335,16 +335,10 @@ const library = createLibrary({
 		Grid,
 		defineComponent({
 			name: "Card",
-			description: "コンテンツをまとめるカード（コンテナ）。Stack も入れられる。",
+			description: "コンテンツをまとめるカード（コンテナ）。Stack も入れられる。interactive を付けるとホバー時にスケールする。",
 			props: cardProps.extend({ children: z.array(z.union(containerChildRefs)).describe("カード内の子要素") }),
 			component: ({ props, renderNode }) => renderCard(props, renderChildren(props.children, renderNode))
 		}),
-		defineComponent({
-			name: "InteractiveCard",
-			description: "ホバーアニメーション付きのカード。",
-			props: interactiveCardProps.extend({ children: z.array(z.union(containerChildRefs)).describe("カード内の子要素") }),
-			component: ({ props, renderNode }) => renderInteractiveCard(props, renderChildren(props.children, renderNode))
-		}),
 		defineComponent({
 			name: "Form",
 			description: "フォーム要素のラッパー（縦並びレイアウト）。",

package/dist/styles/index.css

@@ -16,3 +16,7 @@
 @import './tokens.css';
 @import './utilities.css';
 @source '../components';
+/* The json-render / openui integrations' renderers emit utility classes too
+   (e.g. card padding), so they must be scanned alongside components — else a
+   class only used in a renderer (not in any component) is never generated. */
+@source '../integrations';

package/dist/styles/tokens.css

@@ -208,8 +208,8 @@
 
   --bg-base: var(--gray-800);
   --bg-raised: var(--gray-700);
-  --bg-surface: var(--gray-900);
-  --bg-subtle: var(--gray-800);
+  --bg-surface: var(--gray-950);
+  --bg-subtle: var(--gray-900);
   --bg-mute: var(--gray-700);
   --bg-emphasize: var(--gray-600);
   --bg-inverse: var(--white);

package/dist/styles/tokens.generated.d.mts

@@ -70,11 +70,11 @@ declare const tokens: {
       };
       readonly 'bg-surface': {
         readonly light: "oklch(0.975 0.001 235)";
-        readonly dark: "oklch(0.25 0.0015 235)";
+        readonly dark: "oklch(0.18 0.001 235)";
       };
       readonly 'bg-subtle': {
         readonly light: "oklch(0.945 0.0015 235)";
-        readonly dark: "oklch(0.3 0.002 235)";
+        readonly dark: "oklch(0.25 0.0015 235)";
       };
       readonly 'bg-mute': {
         readonly light: "oklch(0.9 0.003 235)";
@@ -498,11 +498,11 @@ declare const tokens: {
     };
     readonly 'bg-surface': {
       readonly light: "oklch(0.975 0.001 235)";
-      readonly dark: "oklch(0.25 0.0015 235)";
+      readonly dark: "oklch(0.18 0.001 235)";
     };
     readonly 'bg-subtle': {
       readonly light: "oklch(0.945 0.0015 235)";
-      readonly dark: "oklch(0.3 0.002 235)";
+      readonly dark: "oklch(0.25 0.0015 235)";
     };
     readonly 'bg-mute': {
       readonly light: "oklch(0.9 0.003 235)";
@@ -671,11 +671,11 @@ declare const tokens: {
     };
     readonly 'bg-surface': {
       readonly light: "gray-50";
-      readonly dark: "gray-900";
+      readonly dark: "gray-950";
     };
     readonly 'bg-subtle': {
       readonly light: "gray-100";
-      readonly dark: "gray-800";
+      readonly dark: "gray-900";
     };
     readonly 'bg-mute': {
       readonly light: "gray-200";

package/dist/styles/tokens.generated.mjs

@@ -68,11 +68,11 @@ const tokens = {
 			},
 			"bg-surface": {
 				light: "oklch(0.975 0.001 235)",
-				dark: "oklch(0.25 0.0015 235)"
+				dark: "oklch(0.18 0.001 235)"
 			},
 			"bg-subtle": {
 				light: "oklch(0.945 0.0015 235)",
-				dark: "oklch(0.3 0.002 235)"
+				dark: "oklch(0.25 0.0015 235)"
 			},
 			"bg-mute": {
 				light: "oklch(0.9 0.003 235)",
@@ -494,11 +494,11 @@ const tokens = {
 		},
 		"bg-surface": {
 			light: "oklch(0.975 0.001 235)",
-			dark: "oklch(0.25 0.0015 235)"
+			dark: "oklch(0.18 0.001 235)"
 		},
 		"bg-subtle": {
 			light: "oklch(0.945 0.0015 235)",
-			dark: "oklch(0.3 0.002 235)"
+			dark: "oklch(0.25 0.0015 235)"
 		},
 		"bg-mute": {
 			light: "oklch(0.9 0.003 235)",
@@ -667,11 +667,11 @@ const tokens = {
 		},
 		"bg-surface": {
 			light: "gray-50",
-			dark: "gray-900"
+			dark: "gray-950"
 		},
 		"bg-subtle": {
 			light: "gray-100",
-			dark: "gray-800"
+			dark: "gray-900"
 		},
 		"bg-mute": {
 			light: "gray-200",

package/docs/GUIDE.md

@@ -188,22 +188,22 @@ import { IconButton } from '@k8o/arte-odyssey';
 </IconButton>
 ```
 
-### Card / InteractiveCard
+### Card
 
 シャドウで浮かせるのが基本。ページ背景 `bg-subtle` の上に白カード。
 
 ```tsx
-import { Card, InteractiveCard } from '@k8o/arte-odyssey';
+import { Card } from '@k8o/arte-odyssey';
 
 // 静的カード（シャドウで浮かせる）
 <Card appearance="shadow">
   <div className="p-8">カードのコンテンツ</div>
 </Card>
 
-// クリック可能なカード（ホバーでスケールアップ）
-<InteractiveCard appearance="shadow">
+// クリック可能なカード（interactive でホバー時にスケールアップ）
+<Card appearance="shadow" interactive>
   <div className="p-8">コンテンツ</div>
-</InteractiveCard>
+</Card>
 ```
 
 ### フォーム

package/docs/references/components.md

@@ -185,29 +185,29 @@ Props (Tabs.Root):
 - `ids`: `[string, ...string[]]`（必須）
 - `defaultSelectedId`: string | null
 
-### Card / InteractiveCard
+### Card
 
 コンテンツをグループ化するカード。
 
 ```tsx
-import { Card, InteractiveCard } from '@k8o/arte-odyssey';
+import { Card } from '@k8o/arte-odyssey';
 
 // 静的カード
-<Card variant="primary" width="full" appearance="shadow">
+<Card width="full" appearance="shadow">
   <div className="p-6">コンテンツ</div>
 </Card>
 
 // クリック可能なカード（hover:scale-[1.02], active:scale-[0.98]）
-<InteractiveCard appearance="bordered">
+<Card appearance="bordered" interactive>
   <div className="p-6">コンテンツ</div>
-</InteractiveCard>
+</Card>
 ```
 
 Props:
 
-- `variant`: `'primary'` | `'secondary'`
 - `width`: `'full'` | `'fit'`
 - `appearance`: `'shadow'` | `'bordered'`
+- `interactive`: boolean
 
 ### Separator
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "10.0.1",
+  "version": "10.1.1",
   "description": "k8o's react ui library",
   "keywords": [
     "components",

package/dist/components/data-display/card/interactive-card.d.mts

@@ -1,7 +0,0 @@
-import { CardProps } from "./type.mjs";
-import { FC } from "react";
-
-//#region src/components/data-display/card/interactive-card.d.ts
-declare const InteractiveCard: FC<CardProps>;
-//#endregion
-export { InteractiveCard };

package/dist/components/data-display/card/interactive-card.mjs

@@ -1,10 +0,0 @@
-import { cn } from "../../../helpers/cn.mjs";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/data-display/card/interactive-card.tsx
-const InteractiveCard = ({ children, width = "full", appearance = "shadow", ...rest }) => /* @__PURE__ */ jsx("div", {
-	...rest,
-	className: cn("rounded-xl transition-transform hover:scale-[1.02] active:scale-[0.98]", appearance === "shadow" && "shadow-sm border border-transparent dark:border-border-subtle", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base"),
-	children
-});
-//#endregion
-export { InteractiveCard };

package/dist/components/data-display/card/type.d.mts

@@ -1,9 +0,0 @@
-import { HTMLAttributes } from "react";
-
-//#region src/components/data-display/card/type.d.ts
-type CardProps = {
-  width?: 'full' | 'fit';
-  appearance?: 'shadow' | 'bordered';
-} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
-//#endregion
-export { CardProps };

package/dist/components/data-display/card/type.mjs

@@ -1 +0,0 @@
-export {};