@seed-design/lynx-react 0.4.1 → 0.5.1

package/lib/index.js

@@ -1,11 +1,14 @@
+import { useControllableState } from "./hooks/useControllableState.js";
 import { usePressTap } from "./hooks/usePressTap.js";
 import { createSlotRecipeContext } from "./utils/create-slot-recipe-context.jsx";
-import { capitalize, resolveRecipeToken } from "./utils/resolve-recipe-token.js";
+import { useIconColor } from "./hooks/useIconColor.js";
 import { useSafeArea } from "./hooks/useSafeArea.js";
+import { Icon, PrefixIcon, SuffixIcon } from "./components/Icon/Icon.jsx";
+import { AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger } from "./components/Accordion/Accordion.jsx";
+import { Accordion_namespace_exports } from "./components/Accordion/Accordion.namespace.js";
+import { capitalize, resolveRecipeToken } from "./utils/resolve-recipe-token.js";
 import { ProgressCircleRange, ProgressCircleRoot } from "./components/ProgressCircle/ProgressCircle.jsx";
 import { ProgressCircle_namespace_exports } from "./components/ProgressCircle/ProgressCircle.namespace.js";
-import { useIconColor } from "./hooks/useIconColor.js";
-import { Icon, PrefixIcon, SuffixIcon } from "./components/Icon/Icon.jsx";
 import { ActionButton } from "./components/ActionButton/ActionButton.jsx";
 import { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle } from "./components/AppBar/AppBar.jsx";
 import { AppBar_namespace_exports } from "./components/AppBar/AppBar.namespace.js";
@@ -13,10 +16,14 @@ import { Badge } from "./components/Badge/Badge.jsx";
 import { Box } from "./components/Box/Box.jsx";
 import { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger } from "./components/BottomSheet/BottomSheet.jsx";
 import { BottomSheet_namespace_exports } from "./components/BottomSheet/BottomSheet.namespace.js";
-import { useControllableState } from "./hooks/useControllableState.js";
+import { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle } from "./components/Callout/Callout.jsx";
+import { Callout_namespace_exports } from "./components/Callout/Callout.namespace.js";
 import { splitMultipleVariantsProps } from "./utils/split-multiple-variants-props.js";
 import { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from "./components/Checkbox/Checkbox.jsx";
 import { Checkbox_namespace_exports } from "./components/Checkbox/Checkbox.namespace.js";
+import { ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle } from "./components/Chip/Chip.jsx";
+import { Chip_namespace_exports } from "./components/Chip/Chip.namespace.js";
+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";
@@ -25,6 +32,8 @@ import { RadioGroup_namespace_exports } from "./components/RadioGroup/RadioGroup
 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";
+import { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "./components/Tabs/Tabs.jsx";
+import { Tabs_namespace_exports } from "./components/Tabs/Tabs.namespace.js";
 import { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from "./components/TagGroup/TagGroup.jsx";
 import { TagGroup_namespace_exports } from "./components/TagGroup/TagGroup.namespace.js";
 import { Text } from "./components/Text/Text.jsx";
@@ -33,4 +42,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 { 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, 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, 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, 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 };

package/lib/utils/create-slot-recipe-context.jsx

@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import { createContext, forwardRef, useContext } from "@lynx-js/react";
+import clsx from "clsx";
 //#region src/utils/create-slot-recipe-context.tsx
 function assertNotIntrinsicComponent(Component, caller) {
 	if (typeof Component !== "string") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.8.1",
+    "@seed-design/lynx-css": "0.9.1",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/components/Accordion/Accordion.namespace.ts

@@ -0,0 +1,22 @@
+export {
+  AccordionBody as Body,
+  AccordionContent as Content,
+  AccordionDescription as Description,
+  AccordionHeader as Header,
+  AccordionItem as Item,
+  AccordionPrefix as Prefix,
+  AccordionRoot as Root,
+  AccordionSuffixIcon as SuffixIcon,
+  AccordionTitle as Title,
+  AccordionTrigger as Trigger,
+  type AccordionBodyProps as BodyProps,
+  type AccordionContentProps as ContentProps,
+  type AccordionDescriptionProps as DescriptionProps,
+  type AccordionHeaderProps as HeaderProps,
+  type AccordionItemProps as ItemProps,
+  type AccordionPrefixProps as PrefixProps,
+  type AccordionRootProps as RootProps,
+  type AccordionSuffixIconProps as SuffixIconProps,
+  type AccordionTitleProps as TitleProps,
+  type AccordionTriggerProps as TriggerProps,
+} from "./Accordion";

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,129 @@
+import "@testing-library/jest-dom";
+import { act, fireEvent, render } from "@lynx-js/react/testing-library";
+import type * as React from "@lynx-js/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { Accordion } from "./index";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function TestAccordion(props: React.ComponentProps<typeof Accordion.Root> = {}) {
+  return (
+    <Accordion.Root {...props}>
+      <Accordion.Item value="first">
+        <Accordion.Header>
+          <Accordion.Trigger className="first-trigger" accessibility-label="첫 번째">
+            <Accordion.Body>
+              <Accordion.Title>첫 번째</Accordion.Title>
+            </Accordion.Body>
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content className="first-content">
+          <text>첫 번째 내용</text>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="second">
+        <Accordion.Header>
+          <Accordion.Trigger className="second-trigger" accessibility-label="두 번째">
+            <Accordion.Body>
+              <Accordion.Title>두 번째</Accordion.Title>
+            </Accordion.Body>
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content>
+          <text>두 번째 내용</text>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+describe("Accordion", () => {
+  it("opens and closes an item in uncontrolled mode", () => {
+    render(<TestAccordion />);
+
+    const trigger = getRenderedRoot().querySelector<HTMLElement>(".first-trigger");
+    const pressedOverlay = trigger?.querySelector<HTMLElement>(".seed-accordion__pressedOverlay");
+    expect(trigger).not.toBeNull();
+    expect(pressedOverlay).not.toBeNull();
+    expect(pressedOverlay).toHaveAttribute("accessibility-elements-hidden", "true");
+    expect(trigger).toHaveAttribute("accessibility-value", "접힘");
+
+    fireEvent.tap(trigger as HTMLElement);
+    expect(trigger).toHaveAttribute("accessibility-value", "펼쳐짐");
+
+    fireEvent.tap(trigger as HTMLElement);
+    expect(trigger).toHaveAttribute("accessibility-value", "접힘");
+  });
+
+  it("transitions content between zero and its measured height", () => {
+    render(<TestAccordion defaultValues={["first"]} />);
+
+    const root = getRenderedRoot();
+    const trigger = root.querySelector<HTMLElement>(".first-trigger");
+    const content = root.querySelector<HTMLElement>(".first-content");
+    const contentInner = content?.querySelector<HTMLElement>(".seed-accordion__contentInner");
+
+    expect(content).not.toBeNull();
+    expect(contentInner).not.toBeNull();
+    expect(content).toHaveStyle({ height: "0px" });
+
+    act(() => {
+      fireEvent.layoutchange(contentInner as HTMLElement, { height: 84 });
+    });
+
+    expect(content).toHaveStyle({ height: "84px" });
+
+    fireEvent.tap(trigger as HTMLElement);
+    expect(content).toHaveStyle({ height: "0px" });
+  });
+
+  it("keeps one item open by default and supports multiple mode", () => {
+    render(<TestAccordion multiple defaultValues={["first"]} />);
+
+    const root = getRenderedRoot();
+    const first = root.querySelector<HTMLElement>(".first-trigger");
+    const second = root.querySelector<HTMLElement>(".second-trigger");
+
+    expect(first).toHaveAttribute("accessibility-value", "펼쳐짐");
+    expect(second).toHaveAttribute("accessibility-value", "접힘");
+
+    fireEvent.tap(second as HTMLElement);
+    expect(first).toHaveAttribute("accessibility-value", "펼쳐짐");
+    expect(second).toHaveAttribute("accessibility-value", "펼쳐짐");
+  });
+
+  it("reports controlled value changes without mutating the rendered state", () => {
+    const onValuesChange = vi.fn();
+    render(<TestAccordion values={[]} onValuesChange={onValuesChange} />);
+
+    const trigger = getRenderedRoot().querySelector<HTMLElement>(".first-trigger");
+    fireEvent.tap(trigger as HTMLElement);
+
+    expect(onValuesChange).toHaveBeenCalledWith(["first"]);
+    expect(trigger).toHaveAttribute("accessibility-value", "접힘");
+  });
+
+  it("ignores tap when the root is disabled", () => {
+    const onValuesChange = vi.fn();
+    render(<TestAccordion disabled onValuesChange={onValuesChange} />);
+
+    const trigger = getRenderedRoot().querySelector<HTMLElement>(".first-trigger");
+    fireEvent.tap(trigger as HTMLElement);
+
+    expect(onValuesChange).not.toHaveBeenCalled();
+    expect(trigger).toHaveAttribute("accessibility-traits", "disabled");
+    expect(getRenderedRoot().querySelector(".first-content")).toHaveAttribute(
+      "accessibility-elements-hidden",
+      "true",
+    );
+  });
+});