@seed-design/lynx-react 0.2.0 → 0.3.0

package/lib/hooks/index.d.ts

@@ -2,4 +2,5 @@ export * from './useControllableState';
 export * from './useIconColor';
 export * from './usePressTap';
 export * from './useSafeArea';
+export * from './useSeedClassName';
 //# sourceMappingURL=index.d.ts.map

package/lib/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

package/lib/hooks/useSeedClassName.d.ts

@@ -0,0 +1,27 @@
+import { GetSeedClassNameOptions } from '../utils/get-seed-class-name';
+/**
+ * Lynx 앱의 root `<page>` 요소에 적용할 SEED Design className을 반환하는 훅이다.
+ *
+ * `getSeedClassName()`의 reactive 버전으로, `useGlobalProps()`를 통해
+ * `lynx.__globalProps.theme` 변경을 구독한다. host가 테마를 변경하면 이 훅을
+ * 사용하는 컴포넌트가 리렌더되어 className이 갱신된다.
+ *
+ * @example
+ * ```tsx
+ * import { root } from "@lynx-js/react";
+ * import { useSeedClassName } from "@seed-design/lynx-react";
+ *
+ * function Root() {
+ *   const seedClassName = useSeedClassName({ colorMode: "system" });
+ *   return (
+ *     <page className={seedClassName}>
+ *       <App />
+ *     </page>
+ *   );
+ * }
+ *
+ * root.render(<Root />);
+ * ```
+ */
+export declare function useSeedClassName(options?: GetSeedClassNameOptions): string;
+//# sourceMappingURL=useSeedClassName.d.ts.map

package/lib/hooks/useSeedClassName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSeedClassName.d.ts","sourceRoot":"","sources":["../../src/hooks/useSeedClassName.ts"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAE9F;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,MAAM,CAM1E"}

package/lib/hooks/useSeedClassName.js

@@ -0,0 +1,32 @@
+import { getSeedClassName } from "../utils/get-seed-class-name.js";
+import { useGlobalProps, useMemo } from "@lynx-js/react";
+//#region src/hooks/useSeedClassName.ts
+/**
+* Lynx 앱의 root `<page>` 요소에 적용할 SEED Design className을 반환하는 훅이다.
+*
+* `getSeedClassName()`의 reactive 버전으로, `useGlobalProps()`를 통해
+* `lynx.__globalProps.theme` 변경을 구독한다. host가 테마를 변경하면 이 훅을
+* 사용하는 컴포넌트가 리렌더되어 className이 갱신된다.
+*
+* @example
+* ```tsx
+* import { root } from "@lynx-js/react";
+* import { useSeedClassName } from "@seed-design/lynx-react";
+*
+* function Root() {
+*   const seedClassName = useSeedClassName({ colorMode: "system" });
+*   return (
+*     <page className={seedClassName}>
+*       <App />
+*     </page>
+*   );
+* }
+*
+* root.render(<Root />);
+* ```
+*/
+function useSeedClassName(options) {
+	return useMemo(() => getSeedClassName(options), [useGlobalProps().theme, options?.colorMode]);
+}
+//#endregion
+export { useSeedClassName };

package/lib/index.js

@@ -26,4 +26,5 @@ import { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from "./components/TagG
 import { TagGroup_namespace_exports } from "./components/TagGroup/TagGroup.namespace.js";
 import { Text } from "./components/Text/Text.jsx";
 import { getSeedClassName } from "./utils/get-seed-class-name.js";
-export { ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, HStack, Icon, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea };
+import { useSeedClassName } from "./hooks/useSeedClassName.js";
+export { ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, HStack, Icon, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName };

package/lib/utils/get-seed-class-name.d.ts

@@ -7,6 +7,9 @@ export interface GetSeedClassNameOptions {
  *
  * 테마(dark/light)를 자동 감지하여 렌더링 전에 올바른 CSS 변수가 적용되도록 한다.
  *
+ * 호출 시점의 테마를 한 번만 읽는 순수 함수다. 런타임 테마 변경에 반응해야 하면
+ * reactive 버전인 `useSeedClassName` 훅을 사용한다.
+ *
  * @example
  * ```tsx
  * import { getSeedClassName } from "@seed-design/lynx-react";

package/lib/utils/get-seed-class-name.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-seed-class-name.d.ts","sourceRoot":"","sources":["../../src/utils/get-seed-class-name.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,WAAW,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,MAAM,CAkB1E"}
+{"version":3,"file":"get-seed-class-name.d.ts","sourceRoot":"","sources":["../../src/utils/get-seed-class-name.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,WAAW,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,MAAM,CAkB1E"}

package/lib/utils/get-seed-class-name.js

@@ -4,6 +4,9 @@
 *
 * 테마(dark/light)를 자동 감지하여 렌더링 전에 올바른 CSS 변수가 적용되도록 한다.
 *
+* 호출 시점의 테마를 한 번만 읽는 순수 함수다. 런타임 테마 변경에 반응해야 하면
+* reactive 버전인 `useSeedClassName` 훅을 사용한다.
+*
 * @example
 * ```tsx
 * import { getSeedClassName } from "@seed-design/lynx-react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -29,14 +29,14 @@
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json --noEmit"
   },
   "peerDependencies": {
-    "@lynx-js/react": ">=0.100.0",
+    "@lynx-js/react": ">=0.117.0",
     "@lynx-js/types": ">=3.7.0",
     "@seed-design/lynx-css": "0.0.0 || >=0.1.0 <1.0.0"
   },
   "devDependencies": {
-    "@lynx-js/react": "^0.116.3",
+    "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.2.0",
+    "@seed-design/lynx-css": "0.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "vite": "^8.0.0",

package/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from "./useControllableState";
 export * from "./useIconColor";
 export * from "./usePressTap";
 export * from "./useSafeArea";
+export * from "./useSeedClassName";

package/src/hooks/useSeedClassName.ts

@@ -0,0 +1,35 @@
+import { useGlobalProps, useMemo } from "@lynx-js/react";
+
+import { getSeedClassName, type GetSeedClassNameOptions } from "../utils/get-seed-class-name";
+
+/**
+ * Lynx 앱의 root `<page>` 요소에 적용할 SEED Design className을 반환하는 훅이다.
+ *
+ * `getSeedClassName()`의 reactive 버전으로, `useGlobalProps()`를 통해
+ * `lynx.__globalProps.theme` 변경을 구독한다. host가 테마를 변경하면 이 훅을
+ * 사용하는 컴포넌트가 리렌더되어 className이 갱신된다.
+ *
+ * @example
+ * ```tsx
+ * import { root } from "@lynx-js/react";
+ * import { useSeedClassName } from "@seed-design/lynx-react";
+ *
+ * function Root() {
+ *   const seedClassName = useSeedClassName({ colorMode: "system" });
+ *   return (
+ *     <page className={seedClassName}>
+ *       <App />
+ *     </page>
+ *   );
+ * }
+ *
+ * root.render(<Root />);
+ * ```
+ */
+export function useSeedClassName(options?: GetSeedClassNameOptions): string {
+  // useGlobalProps()로 lynx.__globalProps를 구독한다.
+  // host가 theme을 변경하면 이 훅을 사용하는 컴포넌트가 리렌더되어 className이 갱신된다.
+  const globalProps = useGlobalProps() as { theme?: unknown };
+
+  return useMemo(() => getSeedClassName(options), [globalProps.theme, options?.colorMode]);
+}

package/src/utils/get-seed-class-name.ts

@@ -15,6 +15,9 @@ export interface GetSeedClassNameOptions {
  *
  * 테마(dark/light)를 자동 감지하여 렌더링 전에 올바른 CSS 변수가 적용되도록 한다.
  *
+ * 호출 시점의 테마를 한 번만 읽는 순수 함수다. 런타임 테마 변경에 반응해야 하면
+ * reactive 버전인 `useSeedClassName` 훅을 사용한다.
+ *
  * @example
  * ```tsx
  * import { getSeedClassName } from "@seed-design/lynx-react";