ksk-design-system 2.1.1 → 2.3.0

package/dist/index.js

@@ -8474,7 +8474,7 @@ function ju({ steps: e, open: t, onComplete: n, onSkip: r, variant: i = "default
 		let e = 0, n = 0, r = () => {
 			let t = Array.from(_.querySelectorAll("button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]")).find((e) => e.tabIndex >= 0);
 			if (t) {
-				t.focus();
+				t.focus({ preventScroll: !0 });
 				return;
 			}
 			n++ < 5 && (e = requestAnimationFrame(r));
@@ -8538,7 +8538,7 @@ function ju({ steps: e, open: t, onComplete: n, onSkip: r, variant: i = "default
 			trapped: !0,
 			loop: !0,
 			onMountAutoFocus: (e) => {
-				c || (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.focus());
+				c || (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.focus({ preventScroll: !0 }));
 			},
 			onUnmountAutoFocus: (e) => {
 				l || e.preventDefault();
@@ -8579,9 +8579,9 @@ function ju({ steps: e, open: t, onComplete: n, onSkip: r, variant: i = "default
 							className: "fixed pointer-events-none",
 							style: D && h ? {
 								top: h.top,
-								left: h.left + h.width / 2,
-								width: 1,
-								height: 1
+								left: h.left,
+								width: h.width,
+								height: h.height
 							} : {
 								top: "50%",
 								left: "50%"
@@ -12983,13 +12983,13 @@ function xf({ className: e, label: t, icon: n, showLabel: r = !1, placement: i =
 }
 //#endregion
 //#region src/components/patterns/mobile-app-header.tsx
-function Sf({ className: e, brand: t, leading: n, status: r, compactStatus: i, actions: a, sticky: o = !0, bordered: s = !0, landmark: c = !0, children: l, ...u }) {
+function Sf({ className: e, brand: t, leading: n, status: r, compactStatus: i, actions: a, sticky: o = !0, bordered: s = !0, landmark: c = !0, verticalAlignment: l = "center", children: u, ...d }) {
 	return /* @__PURE__ */ V(c ? "header" : "div", {
 		"data-slot": "mobile-app-header",
 		className: G("bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)]", o && "sticky top-0 z-[var(--Z-Nav)]", s && "border-b border-[var(--Border-Low-Emphasis)]", e),
-		...u,
+		...d,
 		children: [/* @__PURE__ */ V("div", {
-			className: "flex min-h-14 items-center gap-2 px-4",
+			className: G("flex min-h-14 gap-2 px-4", l === "top" ? "items-start" : "items-center"),
 			children: [
 				n && /* @__PURE__ */ B("div", {
 					"data-slot": "mobile-app-header-leading",
@@ -13020,7 +13020,7 @@ function Sf({ className: e, brand: t, leading: n, status: r, compactStatus: i, a
 					]
 				})
 			]
-		}), l]
+		}), u]
 	});
 }
 //#endregion
@@ -16172,35 +16172,35 @@ function Nm({ accept: e, maxSize: t, multiple: n = !1, maxFiles: r = 10, onUploa
 }
 //#endregion
 //#region src/components/patterns/compact-file-picker.tsx
-function Pm({ className: e, inputClassName: t, label: n = "ファイル", description: r, triggerLabel: i = "選択する", icon: a, loading: o = !1, disabled: s, id: c, multiple: l, onFilesChange: d, ...f }) {
-	let p = u.useId(), m = c ?? p, h = u.useRef(null), g = s || o;
+function Pm({ className: e, inputClassName: t, label: n = "ファイル", description: r, triggerLabel: i = "選択する", loadingLabel: a = "処理中", icon: o, loading: s = !1, disabled: c, id: l, multiple: d, onFilesChange: f, ...p }) {
+	let m = u.useId(), h = l ?? m, g = u.useRef(null), _ = c || s;
 	return /* @__PURE__ */ V("div", {
 		"data-slot": "compact-file-picker",
 		className: G("flex items-center gap-3", e),
 		children: [
 			/* @__PURE__ */ B("input", {
-				...f,
-				ref: h,
-				id: m,
+				...p,
+				ref: g,
+				id: h,
 				type: "file",
-				multiple: l,
-				disabled: g,
+				multiple: d,
+				disabled: _,
 				className: G("sr-only", t),
 				onChange: (e) => {
 					let t = Array.from(e.currentTarget.files ?? []);
-					d?.(t), e.currentTarget.value = "";
+					f?.(t), e.currentTarget.value = "";
 				}
 			}),
 			/* @__PURE__ */ V("div", {
 				className: "flex min-w-0 flex-1 items-center gap-3",
 				children: [/* @__PURE__ */ B("span", {
 					className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-[var(--Surface-Secondary)] text-[var(--Object-Medium-Emphasis)]",
-					children: a ?? /* @__PURE__ */ B(se, {
+					children: o ?? /* @__PURE__ */ B(se, {
 						size: 20,
 						"aria-hidden": !0
 					})
 				}), /* @__PURE__ */ V("label", {
-					htmlFor: m,
+					htmlFor: h,
 					className: "min-w-0 flex-1",
 					children: [/* @__PURE__ */ B("span", {
 						className: "typo-label-md block truncate text-[var(--Text-High-Emphasis)]",
@@ -16215,9 +16215,10 @@ function Pm({ className: e, inputClassName: t, label: n = "ファイル", descri
 				type: "button",
 				variant: "secondary",
 				size: "sm",
-				disabled: g,
-				onClick: () => h.current?.click(),
-				children: o ? "処理中" : i
+				disabled: _,
+				"aria-busy": s || void 0,
+				onClick: () => g.current?.click(),
+				children: s ? a : i
 			})
 		]
 	});

package/dist/native/ui.js

@@ -1,5 +1,5 @@
 import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "../prompt-coordinator-sBFZKQIX.js";
-import { a as u, i as d, n as f, r as p, t as m } from "../native-DlR32_Lk.js";
+import { a as u, i as d, n as f, r as p, t as m } from "../native-E7YOVABy.js";
 import * as h from "react";
 import g, { createContext as _, useCallback as v, useContext as y, useEffect as b, useId as x, useMemo as S, useRef as C, useState as w } from "react";
 import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
@@ -291,7 +291,7 @@ function X({ variant: e = "primary", elevation: t = "flat", containerStyle: n, p
 		secondary: {
 			bg: m.surface["accent-primary-light"],
 			bgActive: m.active["secondary-button"],
-			fg: m.text["accent-primary"],
+			fg: g === "dark" ? m.text["high-emphasis"] : m.text["accent-primary"],
 			border: m.border["accent-primary"],
 			bottomBorder: m.active["secondary-button"]
 		},
@@ -2736,34 +2736,34 @@ function _n({ tone: e = "info", title: t, description: n, children: r }) {
 //#endregion
 //#region src/native/components/Dialog.tsx
 function vn({ open: e, onClose: t, title: n, description: r, footer: i, children: a, dismissOnBackdrop: o = !0, position: s = "center", safeArea: c = !0 }) {
-	let { theme: l, scales: u } = G(), d = q(), f = s === "fullscreen", p = ue(u.spacing.scale[5], d, c);
+	let { theme: l, scales: u, mode: d } = G(), f = q(), p = s === "fullscreen", m = ue(u.spacing.scale[5], f, c);
 	return /* @__PURE__ */ E(I, {
 		visible: e,
-		transparent: !f,
+		transparent: !p,
 		animationType: "fade",
 		onRequestClose: t,
 		children: /* @__PURE__ */ E(R, {
-			onPress: () => o && !f && t(),
+			onPress: () => o && !p && t(),
 			style: {
 				flex: 1,
-				backgroundColor: f ? l.surface.primary : l.overlay.dark,
+				backgroundColor: p ? l.surface.primary : l.overlay.dark,
 				alignItems: "center",
 				justifyContent: s === "top" ? "flex-start" : "center",
-				...f ? { padding: 0 } : {
+				...p ? { padding: 0 } : {
 					padding: u.spacing.scale[4],
-					...s === "top" ? { paddingTop: u.spacing.scale[4] + J(d, "top", c) } : null
+					...s === "top" ? { paddingTop: u.spacing.scale[4] + J(f, "top", c) } : null
 				}
 			},
 			children: /* @__PURE__ */ D(R, {
 				onPress: () => {},
 				style: {
 					width: "100%",
-					backgroundColor: l.surface.primary,
+					backgroundColor: !p && d === "dark" ? l.surface.secondary : l.surface.primary,
 					gap: u.spacing.scale[3],
-					...f ? {
+					...p ? {
 						flex: 1,
 						borderRadius: 0,
-						...p
+						...m
 					} : {
 						maxWidth: 480,
 						borderRadius: u.borderRadius["2xl"],
@@ -5441,22 +5441,22 @@ function ai({ title: e, subtitle: t, leading: n, trailing: r, onBack: i, centere
 }
 //#endregion
 //#region src/native/components/MobileAppHeader.tsx
-function oi({ brand: e, leading: t, status: n, compactStatus: r, actions: i, children: a, bordered: o = !0, style: s }) {
-	let { theme: c, scales: l } = G();
+function oi({ brand: e, leading: t, status: n, compactStatus: r, actions: i, children: a, bordered: o = !0, verticalAlignment: s = "center", style: c }) {
+	let { theme: l, scales: u } = G();
 	return /* @__PURE__ */ D(H, {
 		style: [{
-			backgroundColor: c.surface.primary,
+			backgroundColor: l.surface.primary,
 			borderBottomWidth: +!!o,
-			borderBottomColor: c.border["low-emphasis"],
-			paddingTop: L.OS === "ios" ? 48 : l.spacing.scale[3]
-		}, s],
+			borderBottomColor: l.border["low-emphasis"],
+			paddingTop: L.OS === "ios" ? 48 : u.spacing.scale[3]
+		}, c],
 		children: [/* @__PURE__ */ D(H, {
 			style: {
 				minHeight: 56,
-				paddingHorizontal: l.spacing.scale[4],
+				paddingHorizontal: u.spacing.scale[4],
 				flexDirection: "row",
-				alignItems: "center",
-				gap: l.spacing.scale[2]
+				alignItems: s === "top" ? "flex-start" : "center",
+				gap: u.spacing.scale[2]
 			},
 			children: [
 				t,
@@ -5474,7 +5474,7 @@ function oi({ brand: e, leading: t, status: n, compactStatus: r, actions: i, chi
 						flexDirection: "row",
 						justifyContent: "flex-end",
 						alignItems: "center",
-						gap: l.spacing.scale[2]
+						gap: u.spacing.scale[2]
 					},
 					children: [r ?? n, i]
 				})
@@ -6802,23 +6802,23 @@ function $i({ item: e, itemDirection: t, onReveal: n }) {
 }
 //#endregion
 //#region src/native/components/CompactFilePicker.tsx
-function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選択する", icon: r, loading: i = !1, disabled: a = !1, onPress: o, style: s }) {
-	let { theme: c, scales: l } = G(), u = a || i;
+function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選択する", loadingLabel: r, icon: i, loading: a = !1, disabled: o = !1, onPress: s, style: c }) {
+	let { theme: l, scales: u } = G(), d = o || a;
 	return /* @__PURE__ */ D(R, {
-		disabled: u,
-		onPress: o,
+		disabled: d,
+		onPress: s,
 		accessibilityRole: "button",
 		accessibilityState: {
-			disabled: u,
-			busy: i
+			disabled: d,
+			busy: a
 		},
 		style: [{
 			minHeight: 56,
 			flexDirection: "row",
 			alignItems: "center",
-			gap: l.spacing.scale[3],
-			opacity: u ? .5 : 1
-		}, s],
+			gap: u.spacing.scale[3],
+			opacity: d ? .5 : 1
+		}, c],
 		children: [
 			/* @__PURE__ */ E(H, {
 				style: {
@@ -6826,11 +6826,11 @@ function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選
 					height: 40,
 					alignItems: "center",
 					justifyContent: "center",
-					borderRadius: l.borderRadius.lg,
-					backgroundColor: c.surface.secondary
+					borderRadius: u.borderRadius.lg,
+					backgroundColor: l.surface.secondary
 				},
-				children: r ?? /* @__PURE__ */ E(B, {
-					style: [Y("heading.md"), { color: c.text["medium-emphasis"] }],
+				children: i ?? /* @__PURE__ */ E(B, {
+					style: [Y("heading.md"), { color: l.text["medium-emphasis"] }],
 					children: "＋"
 				})
 			}),
@@ -6841,11 +6841,11 @@ function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選
 				},
 				children: [typeof e == "string" ? /* @__PURE__ */ E(B, {
 					numberOfLines: 1,
-					style: [Y("label.md"), { color: c.text["high-emphasis"] }],
+					style: [Y("label.md"), { color: l.text["high-emphasis"] }],
 					children: e
 				}) : e, t && (typeof t == "string" ? /* @__PURE__ */ E(B, {
 					style: [Y("body.sm"), {
-						color: c.text["medium-emphasis"],
+						color: l.text["medium-emphasis"],
 						marginTop: 2
 					}],
 					children: t
@@ -6853,9 +6853,10 @@ function ea({ label: e = "ファイル", description: t, triggerLabel: n = "選
 			}),
 			/* @__PURE__ */ E(X, {
 				variant: "secondary",
-				disabled: u,
-				loading: i,
-				onPress: o,
+				disabled: d,
+				loading: a,
+				loadingLabel: r,
+				onPress: s,
 				children: n
 			})
 		]