@seed-design/lynx-react 0.5.2 → 0.6.0

package/lib/index.js

@@ -27,8 +27,18 @@ import { Divider } from "./components/Divider/Divider.jsx";
 import { FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot } from "./components/Field/Field.jsx";
 import { Field_namespace_exports } from "./components/Field/Field.namespace.js";
 import { KeyboardAvoidingScrollView } from "./components/KeyboardAvoidingScrollView/KeyboardAvoidingScrollView.jsx";
+import { MannerTemp, MannerTempEmote } from "./components/MannerTemp/MannerTemp.jsx";
+import { MannerTempBadge } from "./components/MannerTempBadge/MannerTempBadge.jsx";
+import { NotificationBadge, NotificationBadgePositioner } from "./components/NotificationBadge/NotificationBadge.jsx";
+import { PageBannerBody, PageBannerButton, PageBannerCloseButton, PageBannerContent, PageBannerDescription, PageBannerRoot, PageBannerTitle } from "./components/PageBanner/PageBanner.jsx";
+import { PageBanner_namespace_exports } from "./components/PageBanner/PageBanner.namespace.js";
 import { RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot } from "./components/RadioGroup/RadioGroup.jsx";
 import { RadioGroup_namespace_exports } from "./components/RadioGroup/RadioGroup.namespace.js";
+import { SegmentedControlIndicator, SegmentedControlItem, SegmentedControlRoot } from "./components/SegmentedControl/SegmentedControl.jsx";
+import { SegmentedControl_namespace_exports } from "./components/SegmentedControl/SegmentedControl.namespace.js";
+import { CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger, RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger } from "./components/SelectBox/SelectBox.jsx";
+import { CheckSelectBox_namespace_exports } from "./components/SelectBox/CheckSelectBox.namespace.js";
+import { RadioSelectBox_namespace_exports } from "./components/SelectBox/RadioSelectBox.namespace.js";
 import { HStack, VStack } from "./components/Stack/Stack.jsx";
 import { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb } from "./components/Switch/Switch.jsx";
 import { Switch_namespace_exports } from "./components/Switch/Switch.namespace.js";
@@ -42,4 +52,4 @@ import { useTextFieldWithGraphemes } from "./components/TextField/useTextFieldWi
 import { TextField_namespace_exports } from "./components/TextField/TextField.namespace.js";
 import { getSeedClassName } from "./utils/get-seed-class-name.js";
 import { useSeedClassName } from "./hooks/useSeedClassName.js";
-export { Accordion_namespace_exports as Accordion, AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger, 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, Callout_namespace_exports as Callout, CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Chip_namespace_exports as Chip, ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle, Divider, Field_namespace_exports as Field, FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot, HStack, Icon, KeyboardAvoidingScrollView, 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, Tabs_namespace_exports as Tabs, TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, TextField_namespace_exports as TextField, TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName, useTextFieldWithGraphemes };
+export { Accordion_namespace_exports as Accordion, AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger, 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, Callout_namespace_exports as Callout, CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle, CheckSelectBox_namespace_exports as CheckSelectBox, CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Chip_namespace_exports as Chip, ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle, Divider, Field_namespace_exports as Field, FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot, HStack, Icon, KeyboardAvoidingScrollView, MannerTemp, MannerTempBadge, MannerTempEmote, NotificationBadge, NotificationBadgePositioner, PageBanner_namespace_exports as PageBanner, PageBannerBody, PageBannerButton, PageBannerCloseButton, PageBannerContent, PageBannerDescription, PageBannerRoot, PageBannerTitle, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, RadioSelectBox_namespace_exports as RadioSelectBox, RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger, SegmentedControl_namespace_exports as SegmentedControl, SegmentedControlIndicator, SegmentedControlItem, SegmentedControlRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, Tabs_namespace_exports as Tabs, TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, TextField_namespace_exports as TextField, TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName, useTextFieldWithGraphemes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -34,12 +34,12 @@
   "peerDependencies": {
     "@lynx-js/react": ">=0.117.0",
     "@lynx-js/types": ">=3.7.0",
-    "@seed-design/lynx-css": "0.0.0 || >=0.8.0 <1.0.0"
+    "@seed-design/lynx-css": "0.0.0 || >=0.10.0 <1.0.0"
   },
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.9.3",
+    "@seed-design/lynx-css": "0.10.0",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/components/Checkbox/Checkbox.tsx

@@ -47,7 +47,7 @@ interface CheckboxContextValue {
 
 const CheckboxContext = React.createContext<CheckboxContextValue | null>(null);
 
-function useCheckboxContext(consumer: string): CheckboxContextValue {
+export function useCheckboxContext(consumer: string): CheckboxContextValue {
   const ctx = React.useContext(CheckboxContext);
   if (!ctx) {
     throw new Error(`<${consumer}/> must be rendered inside <CheckboxRoot/>.`);

package/src/components/Icon/Icon.test.tsx

@@ -4,7 +4,7 @@ import type { MainThread } from "@lynx-js/types";
 import { describe, expect, it } from "vitest";
 
 import type { LynxIconElementProps } from "../../types";
-import { InternalIcon } from "./Icon";
+import { InternalIcon, PrefixIcon } from "./Icon";
 
 const TestIcon = React.forwardRef<
   MainThread.Element,
@@ -20,6 +20,15 @@ const TestIcon = React.forwardRef<
 });
 TestIcon.displayName = "TestIcon";
 
+const MulticolorTestIcon = React.forwardRef<
+  MainThread.Element,
+  LynxIconElementProps & { children?: React.ReactNode }
+>((props, ref) => <TestIcon {...props} ref={ref} />);
+MulticolorTestIcon.displayName = "MulticolorTestIcon";
+Object.assign(MulticolorTestIcon, {
+  [Symbol.for("@seed-design/multicolor-icon")]: true,
+});
+
 function getSourceAndImage() {
   const source = elementTree.root?.querySelector<HTMLElement>("view");
   const image = source?.querySelector<HTMLElement>("image");
@@ -127,3 +136,18 @@ describe("InternalIcon", () => {
     expect(getSourceAndImage().image.getAttribute("tint-color")).toBe("rgb(73, 80, 88)");
   });
 });
+
+describe("PrefixIcon", () => {
+  it("does not tint marked multicolor icons", async () => {
+    const { frames } = installMainThreadStyleMocks(() => "rgb(31, 35, 40)");
+
+    render(<PrefixIcon icon={<MulticolorTestIcon />} />, {
+      enableMainThread: true,
+      enableBackgroundThread: true,
+    });
+    await waitSchedule();
+
+    expect(frames.size).toBe(0);
+    expect(getSourceAndImage().image.getAttribute("tint-color")).toBeNull();
+  });
+});

package/src/components/Icon/Icon.tsx

@@ -93,23 +93,42 @@ export function IconSlotProvider({
 ////////////////////////////////////////////////////////////////////////////////////
 
 const iconSlotMarker = Symbol.for("@seed-design/lynx-react/icon-slot");
+const seedMulticolorIconMarker = Symbol.for("@seed-design/multicolor-icon");
 
 interface IconSlotComponent {
   [iconSlotMarker]?: IconSlotName;
 }
 
+interface MulticolorIconComponent {
+  [seedMulticolorIconMarker]?: boolean;
+}
+
 export function getIconSlotName(node: React.ReactNode): IconSlotName | null {
   if (!isValidElement(node)) return null;
 
   return ((node.type as IconSlotComponent)[iconSlotMarker] ?? null) as IconSlotName | null;
 }
 
+function isMulticolorIcon(node: React.ReactNode): boolean {
+  if (!isValidElement(node)) return false;
+  if (node.type == null || (typeof node.type !== "function" && typeof node.type !== "object")) {
+    return false;
+  }
+
+  return (node.type as MulticolorIconComponent)[seedMulticolorIconMarker] === true;
+}
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface IconProps extends LynxStyledElementProps {
   icon: ReactElement<LynxIconElementProps>;
   size?: StyleProps["height"] | number;
   color?: StyleProps["color"];
+  /**
+   * 자동 감지되지 않는 멀티컬러 아이콘의 원본 색상을 유지합니다.
+   * @default false
+   */
+  multicolor?: boolean;
 }
 
 export interface PrefixIconProps extends IconProps {}
@@ -151,6 +170,7 @@ const IconSlotBase = React.forwardRef<unknown, IconSlotBaseProps>((props, ref) =
     style,
     size,
     color,
+    multicolor = false,
     children: _children,
     ...nativeProps
   } = props;
@@ -159,9 +179,10 @@ const IconSlotBase = React.forwardRef<unknown, IconSlotBaseProps>((props, ref) =
   const sourceRef = useMainThreadRef<MainThread.Element>(null);
   const slotClassName = slot != null ? context?.classNames?.[slot] : undefined;
   const styleColor = getStyleColor(style);
+  const shouldPreserveOriginalColor = multicolor || isMulticolorIcon(icon);
   const iconColor = useIconColor(
     [baseClassName, slotClassName, className, size, color, styleColor, ...(context?.deps ?? [])],
-    { sourceRef },
+    { sourceRef, enabled: !shouldPreserveOriginalColor },
   );
   const hasValidIcon = isValidElement<LynxIconElementProps>(icon);
 

package/src/components/MannerTemp/MannerTemp.test.tsx

@@ -0,0 +1,41 @@
+import "@testing-library/jest-dom";
+import { getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { MannerTemp, MannerTempEmote } from "./MannerTemp";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+describe("MannerTemp", () => {
+  it("renders the label and emote with the selected level", () => {
+    render(
+      <MannerTemp className="custom-manner-temp" level="l6">
+        40°C
+        <MannerTempEmote />
+      </MannerTemp>,
+    );
+
+    const root = getRenderedRoot();
+    const { getByText } = getQueriesForElement(root);
+    const mannerTempRoot = root.querySelector(".seed-manner-temp__root");
+    const label = getByText("40°C");
+    const emote = root.querySelector(".seed-manner-temp__emote");
+
+    expect(mannerTempRoot).toHaveClass("custom-manner-temp");
+    expect(mannerTempRoot).toHaveClass("seed-manner-temp__root--level_l6");
+    expect(label).toHaveClass("seed-manner-temp__label");
+    expect(label).toHaveClass("seed-manner-temp__label--level_l6");
+    expect(emote).toHaveAttribute(
+      "src",
+      expect.stringContaining("bf8f9b4d-c72e-4bf2-a094-460d3ad1b11f"),
+    );
+  });
+});

package/src/components/MannerTemp/MannerTemp.tsx

@@ -0,0 +1,85 @@
+import { mannerTemp, type MannerTempVariantProps } from "@seed-design/lynx-css/recipes/manner-temp";
+import type { NodesRef } from "@lynx-js/types";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { isValidElement } from "@lynx-js/react";
+
+import type { LynxStyledElementProps, LynxViewRef } from "../../types";
+import { toArray } from "../../utils/children";
+
+type MannerTempLevel = NonNullable<MannerTempVariantProps["level"]>;
+
+const emoteSources = {
+  l1: "https://assetstorage.krrt.io/1123529253537884138/b63c9b3c-410c-4cf5-ba83-d787a03c3c57/width_96_height_96.webp",
+  l2: "https://assetstorage.krrt.io/1123529253537884138/8e4bc458-f6d4-41ce-bfa2-17ea34022f5b/width_96_height_96.webp",
+  l3: "https://assetstorage.krrt.io/1123529253537884138/906ff501-edf6-402d-a3a4-a93ce9e04d30/width_96_height_96.webp",
+  l4: "https://assetstorage.krrt.io/1123529253537884138/10753976-b25d-4e4c-84b2-dbbe196dd0d9/width_96_height_96.webp",
+  l5: "https://assetstorage.krrt.io/1123529253537884138/ddfbd296-5089-408c-aa37-919f45074e5e/width_96_height_96.webp",
+  l6: "https://assetstorage.krrt.io/1123529253537884138/bf8f9b4d-c72e-4bf2-a094-460d3ad1b11f/width_96_height_96.webp",
+  l7: "https://assetstorage.krrt.io/1123529253537884138/9906a459-a4e3-4521-a6e5-0cc24c0aa763/width_96_height_96.webp",
+  l8: "https://assetstorage.krrt.io/1123529253537884138/438edadb-d31d-4711-aebd-a72f303fdf49/width_96_height_96.webp",
+  l9: "https://assetstorage.krrt.io/1123529253537884138/61f6c297-11da-4d72-ba90-20cd69c09c22/width_96_height_96.webp",
+  l10: "https://assetstorage.krrt.io/1123529253537884138/6cc410ac-3a55-4542-b49f-53551db74c4d/width_96_height_96.webp",
+} satisfies Record<MannerTempLevel, string>;
+
+const MannerTempLevelContext = React.createContext<MannerTempLevel | null>(null);
+
+export interface MannerTempEmoteProps extends LynxStyledElementProps {
+  level?: MannerTempLevel;
+}
+
+export const MannerTempEmote = React.forwardRef<unknown, MannerTempEmoteProps>((props, ref) => {
+  const contextLevel = React.useContext(MannerTempLevelContext);
+  const { level = contextLevel ?? "l1", children: _children, className, ...nativeProps } = props;
+  const classes = mannerTemp({ level });
+
+  return (
+    <image
+      {...(ref ? { ref: ref as React.Ref<NodesRef> } : {})}
+      {...nativeProps}
+      src={emoteSources[level]}
+      mode="aspectFit"
+      accessibility-elements-hidden={true}
+      className={clsx(classes.emote, className)}
+    />
+  );
+});
+
+MannerTempEmote.displayName = "MannerTempEmote";
+
+function isMannerTempEmote(node: React.ReactNode) {
+  return isValidElement(node) && node.type === MannerTempEmote;
+}
+
+/**
+ * @platform Lynx
+ *
+ * React와 같은 `level` variant와 `MannerTempEmote` 조합을 제공합니다.
+ * HTML `<span>` 대신 native `<view>` / `<text>` / `<image>`를 렌더링합니다.
+ */
+export interface MannerTempProps extends MannerTempVariantProps, LynxStyledElementProps {}
+
+export const MannerTemp = React.forwardRef<unknown, MannerTempProps>((props, ref) => {
+  const [variantProps, otherProps] = mannerTemp.splitVariantProps(props);
+  const classes = mannerTemp(variantProps);
+  const { children, className, ...nativeProps } = otherProps;
+  const childArray = toArray(children);
+  const emoteChildren = childArray.filter(isMannerTempEmote);
+  const labelChildren = childArray.filter((child) => !isMannerTempEmote(child));
+  const level = variantProps.level ?? "l1";
+
+  return (
+    <MannerTempLevelContext.Provider value={level}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...nativeProps}
+        className={clsx(classes.root, className)}
+      >
+        <text className={classes.label}>{labelChildren}</text>
+        {emoteChildren}
+      </view>
+    </MannerTempLevelContext.Provider>
+  );
+});
+
+MannerTemp.displayName = "MannerTemp";

package/src/components/MannerTemp/index.ts

@@ -0,0 +1 @@
+export * from "./MannerTemp";

package/src/components/MannerTempBadge/MannerTempBadge.test.tsx

@@ -0,0 +1,35 @@
+import "@testing-library/jest-dom";
+import { getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { MannerTempBadge } from "./MannerTempBadge";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+describe("MannerTempBadge", () => {
+  it("renders the label with the selected level and preserves className", () => {
+    render(
+      <MannerTempBadge className="custom-manner-temp-badge" level="l10">
+        80°C
+      </MannerTempBadge>,
+    );
+
+    const root = getRenderedRoot();
+    const { getByText } = getQueriesForElement(root);
+    const badgeRoot = root.querySelector(".seed-manner-temp-badge__root");
+    const label = getByText("80°C");
+
+    expect(badgeRoot).toHaveClass("custom-manner-temp-badge");
+    expect(badgeRoot).toHaveClass("seed-manner-temp-badge__root--level_l10");
+    expect(label).toHaveClass("seed-manner-temp-badge__label");
+    expect(label).toHaveClass("seed-manner-temp-badge__label--level_l10");
+  });
+});

package/src/components/MannerTempBadge/MannerTempBadge.tsx

@@ -0,0 +1,34 @@
+import {
+  mannerTempBadge,
+  type MannerTempBadgeVariantProps,
+} from "@seed-design/lynx-css/recipes/manner-temp-badge";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import type { LynxStyledElementProps, LynxViewRef } from "../../types";
+
+/**
+ * @platform Lynx
+ *
+ * React와 같은 `level` variant를 제공하지만, HTML `<span>` 대신 native
+ * `<view>` / `<text>`를 렌더링합니다.
+ */
+export interface MannerTempBadgeProps extends MannerTempBadgeVariantProps, LynxStyledElementProps {}
+
+export const MannerTempBadge = React.forwardRef<unknown, MannerTempBadgeProps>((props, ref) => {
+  const [variantProps, otherProps] = mannerTempBadge.splitVariantProps(props);
+  const classes = mannerTempBadge(variantProps);
+  const { children, className, ...nativeProps } = otherProps;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      className={clsx(classes.root, className)}
+    >
+      <text className={classes.label}>{children}</text>
+    </view>
+  );
+});
+
+MannerTempBadge.displayName = "MannerTempBadge";

package/src/components/MannerTempBadge/index.ts

@@ -0,0 +1 @@
+export * from "./MannerTempBadge";

package/src/components/NotificationBadge/NotificationBadge.test.tsx

@@ -0,0 +1,28 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { NotificationBadge, NotificationBadgePositioner } from "./NotificationBadge";
+
+describe("NotificationBadge", () => {
+  it("inherits the positioner's size and preserves user class names", () => {
+    render(
+      <view>
+        <NotificationBadgePositioner attach="text" size="small" className="custom-positioner">
+          <NotificationBadge className="custom-badge" />
+        </NotificationBadgePositioner>
+      </view>,
+    );
+
+    const positioner = elementTree.root?.querySelector(".seed-notification-badge-positioner");
+    const badge = elementTree.root?.querySelector(".seed-notification-badge__root");
+    const label = elementTree.root?.querySelector(".seed-notification-badge__label");
+
+    expect(positioner).toHaveClass("custom-positioner");
+    expect(positioner).toHaveClass("seed-notification-badge-positioner--attach_text");
+    expect(positioner).toHaveClass("seed-notification-badge-positioner--size_small");
+    expect(badge).toHaveClass("custom-badge");
+    expect(badge).toHaveClass("seed-notification-badge__root--size_small");
+    expect(label).toHaveAttribute("text-single-line-vertical-align", "center");
+  });
+});

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -0,0 +1,81 @@
+import {
+  notificationBadge,
+  type NotificationBadgeVariantProps,
+} from "@seed-design/lynx-css/recipes/notification-badge";
+import {
+  notificationBadgePositioner,
+  type NotificationBadgePositionerVariantProps,
+} from "@seed-design/lynx-css/recipes/notification-badge-positioner";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import type {
+  LynxAccessibilityProps,
+  LynxStyledElementProps,
+  LynxViewRef,
+} from "../../types";
+
+const NotificationBadgeContext = React.createContext<NotificationBadgeVariantProps | null>(null);
+
+/**
+ * @platform Lynx
+ *
+ * 웹 Notification Badge와 동일한 `size` variant를 제공하며, Lynx native `<view>`와
+ * `<text>`를 직접 렌더링합니다. `NotificationBadgePositioner` 안에서는 Positioner의 `size`를
+ * 기본값으로 사용하고, Badge에 직접 전달한 `size`가 이를 덮어씁니다.
+ */
+export interface NotificationBadgeProps
+  extends NotificationBadgeVariantProps,
+    LynxStyledElementProps,
+    LynxAccessibilityProps {}
+
+export const NotificationBadge = React.forwardRef<unknown, NotificationBadgeProps>(
+  (innerProps, ref) => {
+    const contextProps = React.useContext(NotificationBadgeContext);
+    const props = { ...contextProps, ...innerProps };
+    const [variantProps, otherProps] = notificationBadge.splitVariantProps(props);
+    const classes = notificationBadge(variantProps);
+    const { children, className, ...nativeProps } = otherProps;
+
+    return (
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...nativeProps}
+        className={clsx(classes.root, className)}
+      >
+        <text className={classes.label} text-single-line-vertical-align="center">
+          {children}
+        </text>
+      </view>
+    );
+  },
+);
+
+NotificationBadge.displayName = "NotificationBadge";
+
+export interface NotificationBadgePositionerProps
+  extends NotificationBadgePositionerVariantProps,
+    LynxStyledElementProps {}
+
+export const NotificationBadgePositioner = React.forwardRef<
+  unknown,
+  NotificationBadgePositionerProps
+>((props, ref) => {
+  const [variantProps, otherProps] = notificationBadgePositioner.splitVariantProps(props);
+  const { children, className, ...nativeProps } = otherProps;
+  const contextValue = React.useMemo(() => ({ size: variantProps.size }), [variantProps.size]);
+
+  return (
+    <NotificationBadgeContext.Provider value={contextValue}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...nativeProps}
+        className={clsx(notificationBadgePositioner(variantProps), className)}
+      >
+        {children}
+      </view>
+    </NotificationBadgeContext.Provider>
+  );
+});
+
+NotificationBadgePositioner.displayName = "NotificationBadgePositioner";

package/src/components/NotificationBadge/index.ts

@@ -0,0 +1 @@
+export * from "./NotificationBadge";

package/src/components/PageBanner/PageBanner.namespace.ts

@@ -0,0 +1,16 @@
+export {
+  PageBannerBody as Body,
+  PageBannerButton as Button,
+  PageBannerCloseButton as CloseButton,
+  PageBannerContent as Content,
+  PageBannerDescription as Description,
+  PageBannerRoot as Root,
+  PageBannerTitle as Title,
+  type PageBannerBodyProps as BodyProps,
+  type PageBannerButtonProps as ButtonProps,
+  type PageBannerCloseButtonProps as CloseButtonProps,
+  type PageBannerContentProps as ContentProps,
+  type PageBannerDescriptionProps as DescriptionProps,
+  type PageBannerRootProps as RootProps,
+  type PageBannerTitleProps as TitleProps,
+} from "./PageBanner";

package/src/components/PageBanner/PageBanner.test.tsx

@@ -0,0 +1,124 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import * as PageBanner from "./PageBanner.namespace";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getPageBannerRoot() {
+  const root = getRenderedRoot();
+
+  if (root.classList.contains("seed-page-banner__root")) return root;
+
+  const pageBannerRoot = root.querySelector<HTMLElement>(".seed-page-banner__root");
+  if (!pageBannerRoot) {
+    throw new Error("Expected PageBanner root to exist.");
+  }
+
+  return pageBannerRoot;
+}
+
+describe("PageBanner", () => {
+  it("renders compound slots with the default neutral weak style", () => {
+    render(
+      <PageBanner.Root>
+        <PageBanner.Content>
+          <PageBanner.Body>
+            <PageBanner.Title>Title</PageBanner.Title>
+            <PageBanner.Description>Description</PageBanner.Description>
+          </PageBanner.Body>
+          <PageBanner.Button>Action</PageBanner.Button>
+        </PageBanner.Content>
+        <PageBanner.CloseButton accessibility-label="Close" />
+      </PageBanner.Root>,
+    );
+
+    const root = getPageBannerRoot();
+
+    expect(root).toHaveClass("seed-page-banner__root--tone_neutral-variant_weak");
+    expect(root.querySelector(".seed-page-banner__content")?.tagName.toLowerCase()).toBe("view");
+    expect(root.querySelector(".seed-page-banner__body")?.tagName.toLowerCase()).toBe("text");
+    expect(root.querySelector(".seed-page-banner__title")).toHaveClass(
+      "seed-page-banner__title--tone_neutral-variant_weak",
+    );
+    expect(root.querySelector(".seed-page-banner__description")).toHaveClass(
+      "seed-page-banner__description--tone_neutral-variant_weak",
+    );
+    expect(root.querySelector(".seed-page-banner__button")).toHaveAttribute(
+      "accessibility-traits",
+      "button",
+    );
+  });
+
+  it("tracks pressed state and maps actionable accessibility", () => {
+    const onTap = vi.fn();
+
+    render(
+      <PageBanner.Root tone="positive" variant="solid" bindtap={onTap}>
+        <PageBanner.Content>
+          <PageBanner.Body>
+            <PageBanner.Description>Actionable</PageBanner.Description>
+          </PageBanner.Body>
+        </PageBanner.Content>
+      </PageBanner.Root>,
+    );
+
+    const root = getPageBannerRoot();
+
+    expect(root).toHaveAttribute("accessibility-element", "true");
+    expect(root).toHaveAttribute("accessibility-traits", "button");
+
+    fireEvent.touchstart(root, {});
+    expect(root).toHaveClass("seed-page-banner__root--tone_positive-variant_solid-pressed_true");
+
+    fireEvent.tap(root);
+    expect(onTap).toHaveBeenCalledTimes(1);
+  });
+
+  it("dismisses an uncontrolled banner and composes the close tap handler", () => {
+    const onTap = vi.fn();
+    const onDismiss = vi.fn();
+
+    render(
+      <PageBanner.Root onDismiss={onDismiss}>
+        <PageBanner.CloseButton bindtap={onTap} accessibility-label="Close" />
+      </PageBanner.Root>,
+    );
+
+    const closeButton = getPageBannerRoot().querySelector(".seed-page-banner__closeButton");
+    if (!closeButton) throw new Error("Expected close button to exist.");
+
+    fireEvent.tap(closeButton);
+
+    expect(onTap).toHaveBeenCalledTimes(1);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(getRenderedRoot().querySelector(".seed-page-banner__root")).not.toBeInTheDocument();
+  });
+
+  it("notifies without hiding a controlled banner", () => {
+    const onDismiss = vi.fn();
+
+    render(
+      <PageBanner.Root open onDismiss={onDismiss}>
+        <PageBanner.CloseButton accessibility-label="Close" />
+      </PageBanner.Root>,
+    );
+
+    const closeButton = getPageBannerRoot().querySelector(".seed-page-banner__closeButton");
+    if (!closeButton) throw new Error("Expected close button to exist.");
+
+    fireEvent.tap(closeButton);
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(getPageBannerRoot()).toBeInTheDocument();
+  });
+});