@k8o/arte-odyssey 10.0.0 → 10.1.0

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

@@ -3,7 +3,7 @@ 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", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base"),
+	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

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>, "className" | "style" | "name" | "defaultValue" | "onChange"> & {
+} & Omit<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, "className" | "style" | "defaultValue" | "onChange" | "name"> & {
   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>, "className" | "style" | "name" | "defaultValue" | "onChange"> & {
+  } & Omit<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, "className" | "style" | "defaultValue" | "onChange" | "name"> & {
     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" | "type" | "className" | "style" | "checked" | "defaultChecked" | "children" | "onChange"> & ({
+  } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "className" | "style" | "defaultChecked" | "children" | "onChange" | "checked"> & ({
     value: boolean;
     onChange: (checked: boolean, event: import("react").ChangeEvent<HTMLInputElement>) => void;
     defaultChecked?: never;

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/integrations/_shared/renderers.mjs

@@ -170,11 +170,19 @@ 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),
 		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
 	});
 }
@@ -468,7 +477,10 @@ function renderInteractiveCard(props, children) {
 	return /* @__PURE__ */ jsx(InteractiveCard, {
 		appearance: u(props.appearance),
 		width: u(props.width),
-		children
+		children: /* @__PURE__ */ jsx("div", {
+			className: CARD_PADDING_CLASS[props.size ?? "md"],
+			children
+		})
 	});
 }
 function renderForm(props, children) {

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

@@ -215,9 +215,9 @@ declare const iconButtonProps: z.ZodObject<{
     lg: "lg";
   }>>;
   color: z.ZodOptional<z.ZodEnum<{
+    transparent: "transparent";
     primary: "primary";
     secondary: "secondary";
-    transparent: "transparent";
     base: "base";
   }>>;
 }, z.core.$strip>;
@@ -252,9 +252,9 @@ declare const badgeProps: z.ZodObject<{
   tone: z.ZodOptional<z.ZodEnum<{
     success: "success";
     error: "error";
+    neutral: "neutral";
     info: "info";
     warning: "warning";
-    neutral: "neutral";
   }>>;
   variant: z.ZodOptional<z.ZodEnum<{
     solid: "solid";
@@ -320,6 +320,11 @@ declare const cardProps: z.ZodObject<{
     shadow: "shadow";
     bordered: "bordered";
   }>>;
+  size: z.ZodOptional<z.ZodEnum<{
+    sm: "sm";
+    md: "md";
+    lg: "lg";
+  }>>;
 }, z.core.$strip>;
 declare const interactiveCardProps: z.ZodObject<{
   width: z.ZodOptional<z.ZodEnum<{
@@ -330,6 +335,11 @@ declare const interactiveCardProps: z.ZodObject<{
     shadow: "shadow";
     bordered: "bordered";
   }>>;
+  size: z.ZodOptional<z.ZodEnum<{
+    sm: "sm";
+    md: "md";
+    lg: "lg";
+  }>>;
 }, z.core.$strip>;
 declare const alertProps: z.ZodObject<{
   tone: z.ZodEnum<{
@@ -393,11 +403,18 @@ declare const stackProps: z.ZodObject<{
     column: "column";
   }>>;
   gap: z.ZodOptional<z.ZodEnum<{
+    none: "none";
     sm: "sm";
     md: "md";
     lg: "lg";
     xl: "xl";
+  }>>;
+  padding: z.ZodOptional<z.ZodEnum<{
     none: "none";
+    sm: "sm";
+    md: "md";
+    lg: "lg";
+    xl: "xl";
   }>>;
   align: z.ZodOptional<z.ZodEnum<{
     start: "start";
@@ -416,11 +433,11 @@ declare const gridProps: z.ZodObject<{
   cols: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<1>, z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>, z.ZodLiteral<5>, z.ZodLiteral<6>, z.ZodLiteral<"auto-fill">, z.ZodLiteral<"auto-fit">]>>;
   minItemSize: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<24>, z.ZodLiteral<32>, z.ZodLiteral<40>, z.ZodLiteral<48>, z.ZodLiteral<64>, z.ZodLiteral<80>]>>;
   gap: z.ZodOptional<z.ZodEnum<{
+    none: "none";
     sm: "sm";
     md: "md";
     lg: "lg";
     xl: "xl";
-    none: "none";
   }>>;
 }, z.core.$strip>;
 declare const scrollLinkedProps: z.ZodObject<{}, z.core.$strip>;

package/dist/integrations/_shared/schemas.mjs

@@ -212,7 +212,12 @@ 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(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
 });
 const interactiveCardProps = cardProps;
 const alertProps = z.object({
@@ -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",

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

@@ -39,11 +39,18 @@ declare const catalog: import("@json-render/core").Catalog<{
           column: "column";
         }>>;
         gap: import("zod").ZodOptional<import("zod").ZodEnum<{
+          none: "none";
           sm: "sm";
           md: "md";
           lg: "lg";
           xl: "xl";
+        }>>;
+        padding: import("zod").ZodOptional<import("zod").ZodEnum<{
           none: "none";
+          sm: "sm";
+          md: "md";
+          lg: "lg";
+          xl: "xl";
         }>>;
         align: import("zod").ZodOptional<import("zod").ZodEnum<{
           start: "start";
@@ -66,11 +73,11 @@ declare const catalog: import("@json-render/core").Catalog<{
         cols: import("zod").ZodOptional<import("zod").ZodUnion<readonly [import("zod").ZodLiteral<1>, import("zod").ZodLiteral<2>, import("zod").ZodLiteral<3>, import("zod").ZodLiteral<4>, import("zod").ZodLiteral<5>, import("zod").ZodLiteral<6>, import("zod").ZodLiteral<"auto-fill">, import("zod").ZodLiteral<"auto-fit">]>>;
         minItemSize: import("zod").ZodOptional<import("zod").ZodUnion<readonly [import("zod").ZodLiteral<24>, import("zod").ZodLiteral<32>, import("zod").ZodLiteral<40>, import("zod").ZodLiteral<48>, import("zod").ZodLiteral<64>, import("zod").ZodLiteral<80>]>>;
         gap: import("zod").ZodOptional<import("zod").ZodEnum<{
+          none: "none";
           sm: "sm";
           md: "md";
           lg: "lg";
           xl: "xl";
-          none: "none";
         }>>;
       }, import("zod/v4/core").$strip>;
       slots: string[];
@@ -109,6 +116,11 @@ declare const catalog: import("@json-render/core").Catalog<{
           shadow: "shadow";
           bordered: "bordered";
         }>>;
+        size: import("zod").ZodOptional<import("zod").ZodEnum<{
+          sm: "sm";
+          md: "md";
+          lg: "lg";
+        }>>;
       }, import("zod/v4/core").$strip>;
       slots: string[];
       description: string;
@@ -119,9 +131,9 @@ declare const catalog: import("@json-render/core").Catalog<{
         tone: import("zod").ZodOptional<import("zod").ZodEnum<{
           success: "success";
           error: "error";
+          neutral: "neutral";
           info: "info";
           warning: "warning";
-          neutral: "neutral";
         }>>;
         variant: import("zod").ZodOptional<import("zod").ZodEnum<{
           solid: "solid";
@@ -492,9 +504,9 @@ declare const catalog: import("@json-render/core").Catalog<{
           lg: "lg";
         }>>;
         color: import("zod").ZodOptional<import("zod").ZodEnum<{
+          transparent: "transparent";
           primary: "primary";
           secondary: "secondary";
-          transparent: "transparent";
           base: "base";
         }>>;
       }, import("zod/v4/core").$strip>;
@@ -610,6 +622,11 @@ declare const catalog: import("@json-render/core").Catalog<{
           shadow: "shadow";
           bordered: "bordered";
         }>>;
+        size: import("zod").ZodOptional<import("zod").ZodEnum<{
+          sm: "sm";
+          md: "md";
+          lg: "lg";
+        }>>;
       }, import("zod/v4/core").$strip>;
       slots: string[];
       description: string;

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

@@ -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 を指定する必要はない。"
 		},
 		Badge: {
 			props: badgeProps,
@@ -155,7 +155,7 @@ const catalog = defineCatalog(schema, {
 		InteractiveCard: {
 			props: interactiveCardProps,
 			slots: ["default"],
-			description: "ホバーアニメーション付きのカード。"
+			description: "ホバーアニメーション付きのカード。Card と同様に内側 padding は size（sm/md/lg、デフォルト md）で決まる。"
 		},
 		Form: {
 			props: formProps,

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/package.json

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