ksk-design-system 2.7.0 → 2.8.0

package/dist/native/ui.js

@@ -1,5 +1,5 @@
 import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../semantic-icons-CP9aRQ9C.js";
-import { a as c, i as l, n as u, r as d, t as f } from "../native-BsJ3ntN3.js";
+import { a as c, i as l, n as u, r as d, t as f } from "../native-_H0V_r0X.js";
 import * as p from "react";
 import m, { createContext as h, useCallback as g, useContext as _, useEffect as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
@@ -3069,48 +3069,52 @@ function Pn({ open: e, onClose: t, side: n = "bottom", title: r, children: i, sa
 	let { theme: s, scales: c } = W(), l = G(), [u] = S(() => new O.Value(0)), d = x(e), [f] = S(() => xt({
 		animationFallbackDelay: Nn,
 		showFallbackDelay: An
-	})), p = g(() => {
-		d.current && (u.stopAnimation(), u.setValue(1));
+	})), [p, m] = S(!1), [h, _] = S(e);
+	h !== e && (_(e), m(!1));
+	let y = g(() => {
+		d.current && (u.stopAnimation(), u.setValue(1), m(!0));
 	}, [u]);
 	v(() => {
-		d.current = e, f.cancel(), u.stopAnimation(), u.setValue(0), e && f.onOpen(p);
+		d.current = e, f.cancel(), u.stopAnimation(), u.setValue(0), e && f.onOpen(y);
 	}, [
 		e,
 		u,
 		f,
-		p
+		y
 	]), v(() => () => f.cancel(), [f]);
-	let m = () => {
+	let b = () => {
 		f.onModalShow((e) => {
 			u.stopAnimation(), u.setValue(0), O.timing(u, {
 				toValue: 1,
 				duration: Mn,
 				useNativeDriver: !0
-			}).start(({ finished: t }) => e(t));
-		}, p);
-	}, { width: h, height: _ } = k.get("window"), y = {
+			}).start(({ finished: t }) => {
+				e(t), t && d.current && m(!0);
+			});
+		}, y);
+	}, { width: C, height: E } = k.get("window"), D = {
 		bottom: { translateY: u.interpolate({
 			inputRange: [0, 1],
-			outputRange: [_, 0]
+			outputRange: [E, 0]
 		}) },
 		top: { translateY: u.interpolate({
 			inputRange: [0, 1],
-			outputRange: [-_, 0]
+			outputRange: [-E, 0]
 		}) },
 		left: { translateX: u.interpolate({
 			inputRange: [0, 1],
-			outputRange: [-h, 0]
+			outputRange: [-C, 0]
 		}) },
 		right: { translateX: u.interpolate({
 			inputRange: [0, 1],
-			outputRange: [h, 0]
+			outputRange: [C, 0]
 		}) }
 	};
 	return /* @__PURE__ */ w(te, {
 		visible: e,
 		transparent: !0,
 		animationType: "none",
-		onShow: m,
+		onShow: b,
 		onRequestClose: t,
 		children: /* @__PURE__ */ w(L, {
 			onPress: t,
@@ -3126,7 +3130,7 @@ function Pn({ open: e, onClose: t, side: n = "bottom", title: r, children: i, sa
 			},
 			children: /* @__PURE__ */ w(O.View, {
 				style: {
-					transform: [y[n].translateX ? { translateX: y[n].translateX } : { translateX: 0 }, y[n].translateY ? { translateY: y[n].translateY } : { translateY: 0 }],
+					transform: p ? [{ translateX: 0 }, { translateY: 0 }] : [D[n].translateX ? { translateX: D[n].translateX } : { translateX: 0 }, D[n].translateY ? { translateY: D[n].translateY } : { translateY: 0 }],
 					backgroundColor: o ?? s.surface.primary,
 					...n === "bottom" || n === "top" ? {
 						width: "100%",
@@ -7972,25 +7976,25 @@ var Na = {
 	x: "X でログイン"
 };
 function Pa({ provider: e, label: t, onPress: n, disabled: r = !1 }) {
-	let { theme: i, scales: a } = W(), o = a.brandExternal, s = {
+	let { theme: i, scales: a } = W(), o = a.brandExternal, s = i.text["on-media"], c = {
 		google: {
 			bg: i.surface.primary,
 			fg: i.text["high-emphasis"],
 			border: o.googleBorder
 		},
 		apple: {
-			bg: o.apple,
-			fg: i.text["on-inverse"],
-			border: o.apple
+			bg: i.brand["apple-surface"],
+			fg: i.brand["on-apple"],
+			border: i.brand["apple-surface"]
 		},
 		line: {
 			bg: o.line,
-			fg: i.text["on-inverse"],
+			fg: s,
 			border: o.line
 		},
 		amazon: {
 			bg: o.amazon,
-			fg: i.text["on-inverse"],
+			fg: s,
 			border: o.amazon
 		},
 		github: {
@@ -8014,8 +8018,8 @@ function Pa({ provider: e, label: t, onPress: n, disabled: r = !1 }) {
 			justifyContent: "center",
 			borderRadius: a.borderRadius.lg,
 			borderWidth: 1,
-			backgroundColor: s.bg,
-			borderColor: s.border,
+			backgroundColor: c.bg,
+			borderColor: c.border,
 			opacity: r ? .5 : e ? .85 : 1
 		}),
 		children: /* @__PURE__ */ w(V, {
@@ -8025,7 +8029,7 @@ function Pa({ provider: e, label: t, onPress: n, disabled: r = !1 }) {
 				gap: a.spacing.scale[2]
 			},
 			children: /* @__PURE__ */ w(z, {
-				style: [q("label.md"), { color: s.fg }],
+				style: [q("label.md"), { color: c.fg }],
 				children: t ?? Na[e]
 			})
 		})

package/dist/{native-BsJ3ntN3.js → native-_H0V_r0X.js}

@@ -73,6 +73,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -170,7 +172,9 @@ var e = {
 				primary: "#60A5FA",
 				action: "#93C5FD",
 				light: "#1E3A8A",
-				"ultra-light": "#1E3A8A"
+				"ultra-light": "#1E3A8A",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#3B82F6",
@@ -273,6 +277,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -370,7 +376,9 @@ var e = {
 				primary: "#60A5FA",
 				action: "#93C5FD",
 				light: "#1E3A8A",
-				"ultra-light": "#1E3A8A"
+				"ultra-light": "#1E3A8A",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#3B82F6",
@@ -473,6 +481,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -570,7 +580,9 @@ var e = {
 				primary: "#4398F8",
 				action: "#7FAAFB",
 				light: "#03155A",
-				"ultra-light": "#03155A"
+				"ultra-light": "#03155A",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#2053F5",
@@ -673,6 +685,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -770,7 +784,9 @@ var e = {
 				primary: "#FB923C",
 				action: "#FDBA74",
 				light: "#431407",
-				"ultra-light": "#431407"
+				"ultra-light": "#431407",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#F97316",
@@ -873,6 +889,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -970,7 +988,9 @@ var e = {
 				primary: "#4ADE80",
 				action: "#86EFAC",
 				light: "#052E16",
-				"ultra-light": "#052E16"
+				"ultra-light": "#052E16",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#16A34A",
@@ -1073,6 +1093,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -1170,7 +1192,9 @@ var e = {
 				primary: "#A78BFA",
 				action: "#C4B5FD",
 				light: "#3B0764",
-				"ultra-light": "#3B0764"
+				"ultra-light": "#3B0764",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#7C3AED",

package/dist/native.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./native-BsJ3ntN3.js";
+import { a as e, i as t, n, r, t as i } from "./native-_H0V_r0X.js";
 export { i as getTheme, r as primitives, t as scales, n as themeNames, e as themes };

package/dist/types/components/patterns/commerce/bottom-tab-bar.d.ts

@@ -173,5 +173,33 @@ interface BottomTabBarProps extends React.ComponentProps<"nav"> {
  * いずれも呼び出し側の義務にしていない（明示値があればそちらが優先）。
  */
 declare function BottomTabBar({ className, items, centerAction, showLabels, tone, maxWidth, variant, pillPosition, floatingPosition, keyboardBehavior, scrollEdge, navLabel, showOnDesktop, ...props }: BottomTabBarProps): React.JSX.Element;
+interface PlatterRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/**
+ * platter overlay の配置量を求める。
+ *
+ * overlay は nav の絶対配置子 (`absolute left-0 top-0`) なので、原点は nav の
+ * **padding box**。一方 rect 同士の差は **border box** 基準なので、そのまま
+ * translate に渡すと nav の border 分だけ右下にずれる (#591)。border 幅
+ * (clientLeft / clientTop) を引いて padding box 基準へ揃える。
+ *
+ * テストから参照するため named export（公開 API ではない）。
+ */
+export declare function computePlatterOffset(navBox: {
+    left: number;
+    top: number;
+}, anchorBox: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, navBorder: {
+    left: number;
+    top: number;
+}): PlatterRect;
 export { BottomTabBar };
 export type { BottomTabBarAction, BottomTabBarFloatingPosition, BottomTabBarItem, BottomTabBarKeyboardBehavior, BottomTabBarProps, };

package/dist/types/tokens/native/themes.d.ts

@@ -72,6 +72,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -178,6 +180,8 @@ export declare const themes: {
                 readonly action: "#93C5FD";
                 readonly light: "#1E3A8A";
                 readonly "ultra-light": "#1E3A8A";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#3B82F6";
@@ -288,6 +292,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -394,6 +400,8 @@ export declare const themes: {
                 readonly action: "#93C5FD";
                 readonly light: "#1E3A8A";
                 readonly "ultra-light": "#1E3A8A";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#3B82F6";
@@ -504,6 +512,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -610,6 +620,8 @@ export declare const themes: {
                 readonly action: "#7FAAFB";
                 readonly light: "#03155A";
                 readonly "ultra-light": "#03155A";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#2053F5";
@@ -720,6 +732,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -826,6 +840,8 @@ export declare const themes: {
                 readonly action: "#FDBA74";
                 readonly light: "#431407";
                 readonly "ultra-light": "#431407";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#F97316";
@@ -936,6 +952,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -1042,6 +1060,8 @@ export declare const themes: {
                 readonly action: "#86EFAC";
                 readonly light: "#052E16";
                 readonly "ultra-light": "#052E16";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#16A34A";
@@ -1152,6 +1172,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -1258,6 +1280,8 @@ export declare const themes: {
                 readonly action: "#C4B5FD";
                 readonly light: "#3B0764";
                 readonly "ultra-light": "#3B0764";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#7C3AED";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",

package/src/components/COMPONENT_LOOKUP.md

@@ -69,7 +69,7 @@
 | Slider | `@/components/ui/slider` | — | Default, Range, WithLabel, Range — 最小値/最大値を別々にラベル付け, Disabled |
 | SOCIAL_ICON_LABELS, SOCIAL_ICON_DATA, SOCIAL_ICON_PLATFORMS | `@/components/ui/social-icon-data` | — | — |
 | SocialIcon, SOCIAL_ICON_PLATFORMS, SOCIAL_ICON_LABELS | `@/components/ui/social-icon` | — | Default, AllPlatforms, AllMono, Tones |
-| SocialLoginButton | `@/components/ui/social-login-button` | — | Line, Google, Apple, Amazon, AllProviders, Loading |
+| SocialLoginButton | `@/components/ui/social-login-button` | — | Line, Google, Apple, Amazon, AllProviders, LightAndDark, Loading |
 | Spinner | `@/components/ui/spinner` | — | Default, AllSizes |
 | StarRating | `@/components/ui/star-rating` | — | Interactive, AllowClear, ReadOnly, Sizes |
 | StatusActionBadge, SyncStatusButton | `@/components/ui/status-action-badge` | — | AllStates, Actionable, Compact |

package/src/styles/semantic.css

@@ -111,6 +111,12 @@
   --Brand-Google-Border:     #DADCE0; /* Google ボタンの罫線（Google 推奨グレー） */
   --Brand-Apple:             #000000;
   --Brand-Amazon:            #232F3E;
+  /* Sign in with Apple のボタン面と前景（文字・ロゴ）。Apple HIG に従い
+     ライト背景では黒ボタン、ダーク背景では白ボタンにするため mode で反転する
+     （.dark 側で上書き）。--Text-on-Inverse は他用途の反転色で、Apple の固定黒面と
+     組み合わせるとダークで黒地に黒文字になる（issue #595）。 */
+  --Brand-Apple-Surface:     var(--Primitive-Black);
+  --Brand-on-Apple:          var(--Primitive-White);
 
   /* ─── Interactive States ─── */
   --Hover-Primary-Button:    var(--Primitive-Brand-700);
@@ -213,6 +219,9 @@
   --Brand-Action:            var(--Primitive-Brand-300);
   --Brand-Light:             var(--Primitive-Brand-900);
   --Brand-Ultra-Light:       var(--Primitive-Brand-900);
+  /* Apple HIG: ダーク背景では白い Sign in with Apple ボタン（issue #595） */
+  --Brand-Apple-Surface:     var(--Primitive-White);
+  --Brand-on-Apple:          var(--Primitive-Black);
 
   --Hover-Primary-Button:    var(--Primitive-Brand-500);
   --Active-Primary-Button:   var(--Primitive-Brand-600);

package/src/styles/source-safelist.css

@@ -126,7 +126,7 @@
 @source inline("bg-[color-mix(in_srgb,var(--Text-on-Inverse)_30%,transparent)]");
 @source inline("bg-[var(--Border-Low-Emphasis)]");
 @source inline("bg-[var(--Border-Medium-Emphasis)]");
-@source inline("bg-[var(--Brand-Apple)]");
+@source inline("bg-[var(--Brand-Apple-Surface)]");
 @source inline("bg-[var(--Brand-Line)]");
 @source inline("bg-[var(--Brand-Primary)]");
 @source inline("bg-[var(--Brand-Primary)]!");
@@ -227,7 +227,7 @@
 @source inline("border-[var(--Border-Success)]");
 @source inline("border-[var(--Border-Warning)]");
 @source inline("border-[var(--Brand-Amazon)]");
-@source inline("border-[var(--Brand-Apple)]");
+@source inline("border-[var(--Brand-Apple-Surface)]");
 @source inline("border-[var(--Brand-Google-Border)]");
 @source inline("border-[var(--Brand-Line)]");
 @source inline("border-[var(--Brand-Primary)]");
@@ -434,6 +434,7 @@
 @source inline("gap-[var(--Settings-Row-Gap)]");
 @source inline("gap-x-2");
 @source inline("gap-x-4");
+@source inline("gap-y-0");
 @source inline("gap-y-1");
 @source inline("grid");
 @source inline("grid-cols-1");
@@ -992,6 +993,7 @@
 @source inline("text-8xl");
 @source inline("text-[var(--Border-Medium-Emphasis)]");
 @source inline("text-[var(--Brand-Primary)]");
+@source inline("text-[var(--Brand-on-Apple)]");
 @source inline("text-[var(--Categorical-1-Bold)]");
 @source inline("text-[var(--Categorical-10-Bold)]");
 @source inline("text-[var(--Categorical-11-Bold)]");

package/tokens.json

@@ -230,6 +230,8 @@
         "line": "#06C755",
         "google-border": "#DADCE0",
         "apple": "#000000",
+        "apple-surface": "var(--Primitive-Black)",
+        "on-apple": "var(--Primitive-White)",
         "amazon": "#232F3E"
       },
       "hover": {
@@ -441,7 +443,9 @@
         "primary": "var(--Primitive-Brand-400)",
         "action": "var(--Primitive-Brand-300)",
         "light": "var(--Primitive-Brand-900)",
-        "ultra-light": "var(--Primitive-Brand-900)"
+        "ultra-light": "var(--Primitive-Brand-900)",
+        "apple-surface": "var(--Primitive-White)",
+        "on-apple": "var(--Primitive-Black)"
       },
       "hover": {
         "primary-button": "var(--Primitive-Brand-500)",