@petnow/ui 5.3.0 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## 5.4.0
+
+### Added
+
+- **React Native `Chip`**: Expo apps import it from the same path, `@petnow/ui/chip`. The export has a
+  `react-native` condition, which the React Native and Expo Metro default config (`getDefaultConfig`)
+  asserts for iOS and Android, so Metro resolves `dist/native/chip.js`
+  (`Pressable` + `Text`, styled by the app's Uniwind) while Next.js and Vite keep the web file. Its props
+  match the web Chip (`label`, `icon`, `selected`, `disabled`, `onPress`, `className`) plus `Pressable`
+  props. `icon` also receives `color`, `width` and `height` resolved from the icon token, so
+  `react-native-svg` icons drawn with `currentColor` follow the theme. Checked in petify-app (Expo 54,
+  React Native 0.81, Uniwind 1.13) on the iOS simulator and Android emulator.
+- **`@petnow/ui/petnow-design-system-v1.uniwind.css`**: the v1 tokens as a Uniwind theme for Expo apps,
+  generated from `petnow-design-system-v1.css` by `pnpm generate:native-theme`. It defines the Uniwind
+  themes `light` (Petnow), `dark` (same values as light) and `petify` (switch with
+  `Uniwind.setTheme("petify")`; `extraThemes: ["petify"]` in `withUniwindConfig` is required, or the CSS
+  fails to compile), the
+  typography utilities with a Pretendard face per weight (`Pretendard-Regular`, `-Medium`, `-Bold`) and
+  without `line-height: normal`, and registers `dist/native` as a Tailwind source. Setup is in the README
+  (Expo 앱에서 사용).
+- `react-native` (>= 0.81) and `uniwind` (^1.13) are optional peer dependencies.
+
+### Changes
+
+- `tailwind.css` skips `dist/native` (`@source not`), so web builds do not generate classes used only by
+  the native components.
+- `Chip` keeps its web output (classes, snapshot). Its props are now `ChipBaseProps` (`Chip.types.ts`)
+  plus button attributes, with the classes shared with the native file in `Chip.variants.ts`.
+
+### Fixes
+
+- `bg-surface-base-neutral-1-alpha-1` now has a value: white at 60% (`#ffffff99`) in both themes, the
+  value petify-app already uses. `petnow-design-system-v1.css` mapped it in `@theme inline` but never
+  declared `--surface-base-neutral-1-alpha-1`, so the class drew nothing on the web and the Uniwind theme
+  left it out.
+
+## 5.3.1
+
+### Fixes
+
+- `dist/index.css` declares Tailwind's `properties` layer first, before `theme, base, components, utilities`.
+  It declared only the last four, so when it loaded before the consumer's Tailwind CSS (a JS import in a
+  layout), `properties` came after `utilities`. In browsers that use Tailwind's `@supports` fallback
+  (Safari < 16.4, Firefox < 128), the initial `--tw-translate-*`, `--tw-shadow`, `--tw-ring-*` and
+  `--tw-border-style` values then overrode utilities: centered elements moved, and shadows, rings and dashed
+  borders were lost. Current browsers were not affected.
+
 ## 5.3.0
 
 ### Added

package/README.md

@@ -1,6 +1,7 @@
 # @petnow/ui
 
-사내 웹 프로젝트에서 쓰는 공용 컴포넌트 라이브러리다. React 19와 Tailwind CSS v4를 쓰는 소비 레포를 전제로 한다.
+사내 웹 프로젝트와 Expo 앱에서 쓰는 공용 컴포넌트 라이브러리다. 웹은 React 19와 Tailwind CSS v4, Expo 앱은
+Uniwind 1.x(Tailwind CSS v4)를 쓰는 소비 레포를 전제로 한다.
 
 - Storybook: https://components.petnow.co/
 - 변경 내역: [CHANGELOG.md](CHANGELOG.md)
@@ -46,18 +47,93 @@
 
 Petify 테마는 상위 요소에 `petify` 클래스를 붙이면 v1 시맨틱 컬러가 바뀐다.
 
+## Expo 앱에서 사용
+
+네이티브 구현(`<Component>.native.tsx`)이 있는 컴포넌트는 웹과 같은 경로로 import한다. 지금은 `Chip`
+(`@petnow/ui/chip`)이다. Expo·React Native의 Metro 기본 설정(`getDefaultConfig`)은 iOS·Android 번들에서
+`package.json` `exports`의 `react-native` 조건을 쓰므로 `dist/native/`의 네이티브 구현을 가져오고, Next.js·Vite는
+이 조건을 쓰지 않아 웹 구현을 가져온다. 루트 경로(`@petnow/ui`)와 deprecated `@petnow/ui/v1/*` 경로는 웹 전용이다.
+Expo web 번들은 확인하지 않았다. petify-app(Expo 54, React Native 0.81, Uniwind 1.13)의 iOS 시뮬레이터와
+Android 에뮬레이터에서 확인했다.
+
+1. 설치. `react-native`(0.81 이상)와 `uniwind`(1.13 이상)는 optional peer dependency다.
+
+   ```sh
+   bun add @petnow/ui
+   ```
+
+2. Metro를 Uniwind로 감싼다. 패키지 테마 CSS가 `@variant petify`를 정의하므로 `extraThemes: ["petify"]`는
+   필수다. 빠지면 CSS 컴파일이 `Cannot use @variant with unknown variant: petify`로 실패한다.
+
+   ```js
+   // metro.config.js
+   const { getDefaultConfig } = require("expo/metro-config");
+   const { withUniwindConfig } = require("uniwind/metro");
+
+   module.exports = withUniwindConfig(getDefaultConfig(__dirname), {
+     cssEntryFile: "./global.css",
+     extraThemes: ["petify"],
+   });
+   ```
+
+3. Uniwind CSS 엔트리에서 Tailwind와 Uniwind 다음에 패키지 테마를 import한다.
+
+   ```css
+   /* global.css */
+   @import "tailwindcss";
+   @import "uniwind";
+   @import "@petnow/ui/petnow-design-system-v1.uniwind.css";
+   ```
+
+   `petnow-design-system-v1.uniwind.css`는 `petnow-design-system-v1.css`에서 생성한 파일이다. v1 참조색·시맨틱
+   컬러·타이포그래피 유틸리티와 Uniwind 테마 `light`(Petnow), `dark`(아직 light와 같은 값), `petify`를 정의하고,
+   패키지의 `dist/native`를 `@source`로 등록한다. 웹과 같이 `red`·`green` 등 Tailwind 기본 팔레트와 이름이 겹치는
+   참조색은 `--color-*`로 매핑하지 않는다. 네이티브에서는 `.petify` 클래스가 동작하지 않는다.
+
+4. 테마는 앱 전체에 적용된다. Petify 테마로 바꾼다.
+
+   ```ts
+   import { Uniwind } from "uniwind";
+
+   Uniwind.setTheme("petify");
+   ```
+
+5. 타이포그래피 유틸리티(`text-body-14-medium` 등)는 굵기별로 `font-family: Pretendard-Regular`,
+   `Pretendard-Medium`, `Pretendard-Bold`를 지정한다. 앱이 Pretendard를 이 이름으로 로드해야 한다.
+
+   ```ts
+   const [fontsLoaded] = useFonts({
+     "Pretendard-Regular": require("./assets/fonts/Pretendard-Regular.otf"),
+     "Pretendard-Medium": require("./assets/fonts/Pretendard-Medium.otf"),
+     "Pretendard-Bold": require("./assets/fonts/Pretendard-Bold.otf"),
+   });
+   ```
+
+6. 컴포넌트를 쓴다. 타입은 `expo/tsconfig.base`의 `customConditions: ["react-native"]`로 네이티브 선언
+   파일에서 풀린다.
+
+   ```tsx
+   import { Chip } from "@petnow/ui/chip";
+
+   <Chip label="전체" selected={selected} onPress={() => setSelected(true)} icon={FilterIcon} />;
+   ```
+
+   네이티브 `Chip`의 `icon`은 `className`과 함께 토큰에서 풀어 낸 `color`·`width`·`height`를 받는다.
+   `react-native-svg`의 `SvgProps`를 받는 아이콘(`fill="currentColor"`)이면 그대로 동작한다.
+
 ## 구조
 
 ```
 @petnow/ui
 ├── tailwind.css                  - 소비 레포가 import하는 Tailwind 엔트리 (v0 토큰은 deprecated)
 ├── petnow-design-system-v1.css   - v1 토큰(ref·시맨틱 컬러, 타이포그래피)
+├── petnow-design-system-v1.uniwind.css - Expo 앱용 Uniwind 테마 (생성 파일, `pnpm generate:native-theme`)
 ├── index.ts                      - 패키지 엔트리
 ├── src
 │   ├── components
 │   │   ├── ui    - 내부 전용 primitive (export하지 않음)
 │   │   ├── icons - 아이콘 (action, static)
-│   │   └── <컴포넌트> - 컴포넌트와 스토리 (badge, checkbox, cta-button, …)
+│   │   └── <컴포넌트> - 컴포넌트와 스토리 (badge, checkbox, cta-button, …), 네이티브 구현은 *.native.tsx
 │   ├── styles/components.css - dist/index.css로 복사되는 일반 CSS
 │   ├── index.css             - Storybook 엔트리
 │   └── utils
@@ -76,9 +152,12 @@ Node 버전은 `mise.toml`로 고정한다. pnpm은 `package.json`의 `packageMa
 ```sh
 mise install
 pnpm i
-pnpm storybook        # http://localhost:6006
+pnpm storybook:native # http://localhost:6007, 네이티브 컴포넌트(react-native-web). 6006보다 먼저 띄운다
+pnpm storybook        # http://localhost:6006, 6007이 떠 있으면 "React Native"로 합성
 pnpm jest
-pnpm build            # tsc + vite 라이브러리 빌드 + dist/index.css 복사
+pnpm build            # tsc + vite 라이브러리 빌드(웹, dist/native) + dist/index.css 복사
+pnpm check:dist && pnpm check:dist:native
+pnpm generate:native-theme   # petnow-design-system-v1.css를 바꾼 뒤 Uniwind 테마 재생성
 ```
 
 ## 배포
@@ -88,5 +167,6 @@ npm Trusted Publishing(OIDC)으로 배포한다. GitHub Actions가 발급하는
 
 1. PR을 만들어 main에 merge한다. PR에서는 테스트, 포맷 검사, 빌드, Storybook 빌드가 돈다.
 2. semver에 맞춰 `v*` 태그를 push한다(예: `v5.0.0`). `.github/workflows/publish-npm.yaml`이 태그 버전으로
-   `package.json`을 맞춰 npm에 배포하고, 버전 커밋을 main에 남긴다.
+   `package.json`을 맞춰 npm에 배포하고, 버전 커밋을 main에 남긴 뒤 GitHub Release(본문은 CHANGELOG의
+   해당 버전 절과 PR 목록)를 만든다. 태그를 push하기 전에 CHANGELOG에 `## <버전>` 절을 적는다.
 3. 하위 호환을 깨는 변경은 [CHANGELOG.md](CHANGELOG.md)와 `docs/migration/`에 적는다.

package/dist/Chip-Bu5q0mhe.js

@@ -0,0 +1,53 @@
+"use client";
+import { t as e } from "./TailwindUtil-DiNvXuNl.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "react";
+import { cva as r } from "class-variance-authority";
+//#region src/components/chip/Chip.variants.ts
+var i = "items-center justify-center gap-1 rounded-full border px-[11px] py-[7px]", a = {
+	true: "bg-surface-base-accent-1 border-border-prominent-accent",
+	false: "bg-surface-base-neutral-1 border-border-base-neutral-2"
+}, o = "opacity-40", s = r("text-body-14-medium", {
+	variants: { selected: {
+		true: "text-text-prominent-accent-1",
+		false: "text-text-base-neutral-3"
+	} },
+	defaultVariants: { selected: !1 }
+}), c = r("size-[18px] shrink-0", {
+	variants: { selected: {
+		true: "text-icon-prominent-accent-1",
+		false: "text-icon-base-neutral-3"
+	} },
+	defaultVariants: { selected: !1 }
+}), l = r(`inline-flex ${i} transition-colors duration-200`, {
+	variants: {
+		selected: a,
+		disabled: {
+			true: `${o} pointer-events-none`,
+			false: ""
+		}
+	},
+	defaultVariants: {
+		selected: !1,
+		disabled: !1
+	}
+}), u = ({ className: r, label: i, icon: a, selected: o = !1, disabled: u = !1, onPress: d, onClick: f, type: p = "button", ...m }) => /* @__PURE__ */ n("button", {
+	type: p,
+	className: e(l({
+		selected: o,
+		disabled: u
+	}), r),
+	onClick: (e) => {
+		f?.(e), e.defaultPrevented || d?.();
+	},
+	disabled: u,
+	...m,
+	children: [a && /* @__PURE__ */ t(a, { className: c({ selected: o }) }), /* @__PURE__ */ t("span", {
+		className: s({ selected: o }),
+		children: i
+	})]
+});
+//#endregion
+export { u as t };
+
+//# sourceMappingURL=Chip-Bu5q0mhe.js.map

package/dist/Chip-Bu5q0mhe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-Bu5q0mhe.js","names":[],"sources":["../src/components/chip/Chip.variants.ts","../src/components/chip/Chip.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n// 웹·네이티브 공통 클래스. Uniwind(React Native)에서도 동작하는 유틸리티만 둔다.\n// 플랫폼 전용 클래스(inline-flex, transition, pointer-events 등)는 각 구현 파일에서 더한다.\nexport const chipBaseClassName = \"items-center justify-center gap-1 rounded-full border px-[11px] py-[7px]\";\n\nexport const chipSelectedClassNames = {\n  true: \"bg-surface-base-accent-1 border-border-prominent-accent\",\n  false: \"bg-surface-base-neutral-1 border-border-base-neutral-2\",\n};\n\nexport const chipDisabledClassName = \"opacity-40\";\n\nexport const chipTextVariants = cva(\"text-body-14-medium\", {\n  variants: {\n    selected: {\n      true: \"text-text-prominent-accent-1\",\n      false: \"text-text-base-neutral-3\",\n    },\n  },\n  defaultVariants: {\n    selected: false,\n  },\n});\n\nexport const chipIconVariants = cva(\"size-[18px] shrink-0\", {\n  variants: {\n    selected: {\n      true: \"text-icon-prominent-accent-1\",\n      false: \"text-icon-base-neutral-3\",\n    },\n  },\n  defaultVariants: {\n    selected: false,\n  },\n});\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport {\n  chipBaseClassName,\n  chipDisabledClassName,\n  chipIconVariants,\n  chipSelectedClassNames,\n  chipTextVariants,\n} from \"./Chip.variants\";\nimport { cn } from \"../../utils/TailwindUtil\";\n\nimport type { ChipBaseProps } from \"./Chip.types\";\n\nexport interface ChipProps\n  extends ChipBaseProps,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | keyof ChipBaseProps> {}\n\nconst chipVariants = cva(`inline-flex ${chipBaseClassName} transition-colors duration-200`, {\n  variants: {\n    selected: chipSelectedClassNames,\n    disabled: {\n      true: `${chipDisabledClassName} pointer-events-none`,\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    selected: false,\n    disabled: false,\n  },\n});\n\nconst Chip = ({\n  className,\n  label,\n  icon: Icon,\n  selected = false,\n  disabled = false,\n  onPress,\n  onClick,\n  type = \"button\",\n  ...props\n}: ChipProps) => {\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented) {\n      onPress?.();\n    }\n  };\n\n  return (\n    <button\n      type={type}\n      className={cn(chipVariants({ selected, disabled }), className)}\n      onClick={handleClick}\n      disabled={disabled}\n      {...props}\n    >\n      {Icon && <Icon className={chipIconVariants({ selected })} />}\n      <span className={chipTextVariants({ selected })}>{label}</span>\n    </button>\n  );\n};\n\nexport { Chip };\n"],"mappings":";;;;;;AAIA,IAAa,IAAoB,4EAEpB,IAAyB;CACpC,MAAM;CACN,OAAO;AACT,GAEa,IAAwB,cAExB,IAAmB,EAAI,uBAAuB;CACzD,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GAEY,IAAmB,EAAI,wBAAwB;CAC1D,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GCfK,IAAe,EAAI,eAAe,EAAkB,kCAAkC;CAC1F,UAAU;EACR,UAAU;EACV,UAAU;GACR,MAAM,GAAG,EAAsB;GAC/B,OAAO;EACT;CACF;CACA,iBAAiB;EACf,UAAU;EACV,UAAU;CACZ;AACF,CAAC,GAEK,KAAQ,EACZ,cACA,UACA,MAAM,GACN,cAAW,IACX,cAAW,IACX,YACA,YACA,UAAO,UACP,GAAG,QAWD,kBAAC,UAAD;CACQ;CACN,WAAW,EAAG,EAAa;EAAE;EAAU;CAAS,CAAC,GAAG,CAAS;CAC7D,UAZiB,MAA+C;EAGlE,AAFA,IAAU,CAAK,GAEV,EAAM,oBACT,IAAU;CAEd;CAOc;CACV,GAAI;WALN,CAOG,KAAQ,kBAAC,GAAD,EAAM,WAAW,EAAiB,EAAE,YAAS,CAAC,EAAI,CAAA,GAC3D,kBAAC,QAAD;EAAM,WAAW,EAAiB,EAAE,YAAS,CAAC;YAAI;CAAY,CAAA,CACxD"}

package/dist/chip.js

@@ -1,53 +1,3 @@
 "use client";
-import { t as e } from "./TailwindUtil-DiNvXuNl.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import "react";
-import { cva as r } from "class-variance-authority";
-//#region src/components/chip/Chip.tsx
-var i = r("inline-flex items-center justify-center gap-1 rounded-full border px-[11px] py-[7px] transition-colors duration-200", {
-	variants: {
-		selected: {
-			true: "bg-surface-base-accent-1 border-border-prominent-accent",
-			false: "bg-surface-base-neutral-1 border-border-base-neutral-2"
-		},
-		disabled: {
-			true: "opacity-40 pointer-events-none",
-			false: ""
-		}
-	},
-	defaultVariants: {
-		selected: !1,
-		disabled: !1
-	}
-}), a = r("text-body-14-medium", {
-	variants: { selected: {
-		true: "text-text-prominent-accent-1",
-		false: "text-text-base-neutral-3"
-	} },
-	defaultVariants: { selected: !1 }
-}), o = r("size-[18px] shrink-0", {
-	variants: { selected: {
-		true: "text-icon-prominent-accent-1",
-		false: "text-icon-base-neutral-3"
-	} },
-	defaultVariants: { selected: !1 }
-}), s = ({ className: r, label: s, icon: c, selected: l = !1, disabled: u = !1, onPress: d, onClick: f, type: p = "button", ...m }) => /* @__PURE__ */ n("button", {
-	type: p,
-	className: e(i({
-		selected: l,
-		disabled: u
-	}), r),
-	onClick: (e) => {
-		f?.(e), e.defaultPrevented || d?.();
-	},
-	disabled: u,
-	...m,
-	children: [c && /* @__PURE__ */ t(c, { className: o({ selected: l }) }), /* @__PURE__ */ t("span", {
-		className: a({ selected: l }),
-		children: s
-	})]
-});
-//#endregion
-export { s as Chip };
-
-//# sourceMappingURL=chip.js.map
+import { t as e } from "./Chip-Bu5q0mhe.js";
+export { e as Chip };

package/dist/index.css

@@ -6,10 +6,13 @@
   The rules sit in Tailwind's `components` layer so consumer utilities can
   override them. The order statement comes first because this file may load
   before the consumer's Tailwind CSS (e.g. a JS import in a layout); without it,
-  `components` would be declared first and lose to Tailwind's preflight.
+  `components` would be declared first and lose to Tailwind's preflight. It
+  lists every layer Tailwind declares, in Tailwind's order: a missing
+  `properties` would be declared after `utilities` and win over it in browsers
+  that use Tailwind's `@supports` fallback (Safari < 16.4, Firefox < 128).
 */
 
-@layer theme, base, components, utilities;
+@layer properties, theme, base, components, utilities;
 
 @layer components {
   /* Scrollbar CSS */

package/dist/index.es.js

@@ -3,7 +3,7 @@ import t from "./tabs.js";
 import n from "./checkbox.js";
 import r from "./toggle.js";
 import { Badge as i } from "./badge.js";
-import { Chip as a } from "./chip.js";
+import { t as a } from "./Chip-Bu5q0mhe.js";
 import { CTAButton as o } from "./cta-button.js";
 import { t as s } from "./Popup-DRf-ERpL.js";
 import { CancelFilledIcon as c } from "./icons/action/cancel-filled.js";

package/dist/native/chip.js

@@ -0,0 +1,134 @@
+import { cva as e } from "class-variance-authority";
+import { Pressable as t, Text as n } from "react-native";
+import { useResolveClassNames as r } from "uniwind";
+import { clsx as i } from "clsx";
+import { extendTailwindMerge as a } from "tailwind-merge";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/chip/Chip.variants.ts
+var c = "items-center justify-center gap-1 rounded-full border px-[11px] py-[7px]", l = {
+	true: "bg-surface-base-accent-1 border-border-prominent-accent",
+	false: "bg-surface-base-neutral-1 border-border-base-neutral-2"
+}, u = "opacity-40", d = e("text-body-14-medium", {
+	variants: { selected: {
+		true: "text-text-prominent-accent-1",
+		false: "text-text-base-neutral-3"
+	} },
+	defaultVariants: { selected: !1 }
+}), f = e("size-[18px] shrink-0", {
+	variants: { selected: {
+		true: "text-icon-prominent-accent-1",
+		false: "text-icon-base-neutral-3"
+	} },
+	defaultVariants: { selected: !1 }
+}), p = a({ extend: {
+	classGroups: { "font-style": [
+		"text-display-96-bold",
+		"text-display-96-medium",
+		"text-display-72-bold",
+		"text-display-72-medium",
+		"text-display-60-bold",
+		"text-display-60-medium",
+		"text-headline-48-bold",
+		"text-headline-48-medium",
+		"text-headline-48-regular",
+		"text-headline-42-bold",
+		"text-headline-42-medium",
+		"text-headline-42-regular",
+		"text-headline-36-bold",
+		"text-headline-36-medium",
+		"text-headline-36-regular",
+		"text-title-28-bold",
+		"text-title-28-medium",
+		"text-title-28-regular",
+		"text-title-24-bold",
+		"text-title-24-medium",
+		"text-title-24-regular",
+		"text-title-20-bold",
+		"text-title-20-medium",
+		"text-title-20-regular",
+		"text-title-18-bold",
+		"text-title-18-medium",
+		"text-title-18-regular",
+		"text-title-16-bold",
+		"text-title-14-bold",
+		"text-body-16-medium",
+		"text-body-16-regular",
+		"text-body-14-medium",
+		"text-body-14-regular",
+		"text-body-12-bold",
+		"text-caption-12-bold",
+		"text-caption-12-medium",
+		"text-caption-12-regular",
+		"text-caption-11-medium",
+		"text-caption-10-bold",
+		{ text: [
+			"display-large",
+			"display-medium",
+			"title-large",
+			"title-medium",
+			"title-small",
+			"label-large",
+			"label-medium",
+			"label-small",
+			"body-large",
+			"body-medium",
+			"body-small",
+			"caption-large",
+			"caption-medium",
+			"caption-small",
+			"badge"
+		] }
+	] },
+	conflictingClassGroups: { "font-style": ["font-size", "font-weight"] }
+} });
+function m(...e) {
+	return p(i(e));
+}
+//#endregion
+//#region src/components/chip/Chip.native.tsx
+var h = (e) => {
+	if (typeof e == "number") return e;
+	if (typeof e == "string" && /^\d+(\.\d+)?px$/.test(e)) return parseFloat(e);
+}, g = e(`flex-row self-start ${c}`, {
+	variants: {
+		selected: l,
+		disabled: {
+			true: u,
+			false: ""
+		}
+	},
+	defaultVariants: {
+		selected: !1,
+		disabled: !1
+	}
+}), _ = ({ className: e, label: i, icon: a, selected: c = !1, disabled: l = !1, onPress: u, accessibilityState: p, ..._ }) => {
+	let v = f({ selected: c }), y = r(v);
+	return /* @__PURE__ */ s(t, {
+		accessibilityRole: "button",
+		accessibilityState: {
+			...p,
+			selected: c,
+			disabled: l
+		},
+		className: m(g({
+			selected: c,
+			disabled: l
+		}), e),
+		onPress: u,
+		disabled: l,
+		..._,
+		children: [a && /* @__PURE__ */ o(a, {
+			className: v,
+			color: y.color,
+			width: h(y.width),
+			height: h(y.height)
+		}), /* @__PURE__ */ o(n, {
+			className: d({ selected: c }),
+			children: i
+		})]
+	});
+};
+//#endregion
+export { _ as Chip };
+
+//# sourceMappingURL=chip.js.map

package/dist/native/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../../src/components/chip/Chip.variants.ts","../../src/utils/TailwindUtil.ts","../../src/components/chip/Chip.native.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n// 웹·네이티브 공통 클래스. Uniwind(React Native)에서도 동작하는 유틸리티만 둔다.\n// 플랫폼 전용 클래스(inline-flex, transition, pointer-events 등)는 각 구현 파일에서 더한다.\nexport const chipBaseClassName = \"items-center justify-center gap-1 rounded-full border px-[11px] py-[7px]\";\n\nexport const chipSelectedClassNames = {\n  true: \"bg-surface-base-accent-1 border-border-prominent-accent\",\n  false: \"bg-surface-base-neutral-1 border-border-base-neutral-2\",\n};\n\nexport const chipDisabledClassName = \"opacity-40\";\n\nexport const chipTextVariants = cva(\"text-body-14-medium\", {\n  variants: {\n    selected: {\n      true: \"text-text-prominent-accent-1\",\n      false: \"text-text-base-neutral-3\",\n    },\n  },\n  defaultVariants: {\n    selected: false,\n  },\n});\n\nexport const chipIconVariants = cva(\"size-[18px] shrink-0\", {\n  variants: {\n    selected: {\n      true: \"text-icon-prominent-accent-1\",\n      false: \"text-icon-base-neutral-3\",\n    },\n  },\n  defaultVariants: {\n    selected: false,\n  },\n});\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst customTwMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-style\": [\n        // Display\n        \"text-display-96-bold\",\n        \"text-display-96-medium\",\n        \"text-display-72-bold\",\n        \"text-display-72-medium\",\n        \"text-display-60-bold\",\n        \"text-display-60-medium\",\n        // Headline\n        \"text-headline-48-bold\",\n        \"text-headline-48-medium\",\n        \"text-headline-48-regular\",\n        \"text-headline-42-bold\",\n        \"text-headline-42-medium\",\n        \"text-headline-42-regular\",\n        \"text-headline-36-bold\",\n        \"text-headline-36-medium\",\n        \"text-headline-36-regular\",\n        // Title\n        \"text-title-28-bold\",\n        \"text-title-28-medium\",\n        \"text-title-28-regular\",\n        \"text-title-24-bold\",\n        \"text-title-24-medium\",\n        \"text-title-24-regular\",\n        \"text-title-20-bold\",\n        \"text-title-20-medium\",\n        \"text-title-20-regular\",\n        \"text-title-18-bold\",\n        \"text-title-18-medium\",\n        \"text-title-18-regular\",\n        \"text-title-16-bold\",\n        \"text-title-14-bold\",\n        // Body\n        \"text-body-16-medium\",\n        \"text-body-16-regular\",\n        \"text-body-14-medium\",\n        \"text-body-14-regular\",\n        \"text-body-12-bold\",\n        // Caption\n        \"text-caption-12-bold\",\n        \"text-caption-12-medium\",\n        \"text-caption-12-regular\",\n        \"text-caption-11-medium\",\n        \"text-caption-10-bold\",\n        {\n          text: [\n            \"display-large\",\n            \"display-medium\",\n            \"title-large\",\n            \"title-medium\",\n            \"title-small\",\n            \"label-large\",\n            \"label-medium\",\n            \"label-small\",\n            \"body-large\",\n            \"body-medium\",\n            \"body-small\",\n            \"caption-large\",\n            \"caption-medium\",\n            \"caption-small\",\n            \"badge\",\n          ],\n        },\n      ],\n    },\n    conflictingClassGroups: {\n      \"font-style\": [\"font-size\", \"font-weight\"], // 예시: 폰트 크기, 굵기와 충돌 가능성 명시\n      // 기존 색상 관련 그룹과의 충돌을 피하기 위해 textColor 그룹을 명시적으로 선언하거나,\n      // text-label-large가 색상과 관련 없음을 tailwind-merge에 알려야 합니다.\n      // 만약 text-label-large가 특정 색상을 포함하지 않는다면,\n      // textColor 그룹과의 충돌을 정의할 필요는 없을 수 있습니다.\n      // 하지만, 만약 text-red-500과 같은 클래스와 충돌한다면,\n      // textColor 그룹과의 관계를 명확히 해야 합니다.\n      // 가장 간단한 방법은 text-label-large를 textColor 그룹에서 제외하는 것입니다.\n      // 또는, text-label-large가 독립적인 그룹임을 명시합니다.\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return customTwMerge(clsx(inputs));\n}\n","import { cva } from \"class-variance-authority\";\nimport { type ColorValue, Pressable, type PressableProps, Text } from \"react-native\";\nimport { useResolveClassNames } from \"uniwind\";\n\nimport {\n  chipBaseClassName,\n  chipDisabledClassName,\n  chipIconVariants,\n  chipSelectedClassNames,\n  chipTextVariants,\n} from \"./Chip.variants\";\nimport { cn } from \"../../utils/TailwindUtil\";\n\nimport type { ChipBaseProps } from \"./Chip.types\";\nimport type { ComponentType } from \"react\";\n\n// react-native-svg 아이콘은 className으로 색·크기를 받지 못하므로 해석한 값을 color·width·height로도 넘긴다.\n// SvgProps를 받는 아이콘(react-native-svg, lucide-react-native)이 이 형태를 만족한다.\nexport interface ChipIconProps {\n  className?: string;\n  color?: ColorValue;\n  width?: number;\n  height?: number;\n}\n\n// 네이티브는 숫자, react-native-web은 \"18px\" 같은 문자열로 풀린다.\nconst toNumber = (value: unknown) => {\n  if (typeof value === \"number\") return value;\n  if (typeof value === \"string\" && /^\\d+(\\.\\d+)?px$/.test(value)) return parseFloat(value);\n  return undefined;\n};\n\nexport interface ChipProps\n  extends Omit<ChipBaseProps, \"icon\">,\n    Omit<PressableProps, \"children\" | \"style\" | keyof ChipBaseProps> {\n  icon?: ComponentType<ChipIconProps>;\n}\n\n// self-start: 세로 방향 부모(RN 기본 flex-column)에서 칩이 가로로 늘어나지 않게 한다.\nconst chipVariants = cva(`flex-row self-start ${chipBaseClassName}`, {\n  variants: {\n    selected: chipSelectedClassNames,\n    disabled: {\n      true: chipDisabledClassName,\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    selected: false,\n    disabled: false,\n  },\n});\n\nconst Chip = ({\n  className,\n  label,\n  icon: Icon,\n  selected = false,\n  disabled = false,\n  onPress,\n  accessibilityState,\n  ...props\n}: ChipProps) => {\n  const iconClassName = chipIconVariants({ selected });\n  // 테마(Uniwind.setTheme)가 바뀌면 다시 해석된다.\n  const iconStyle = useResolveClassNames(iconClassName);\n\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ ...accessibilityState, selected, disabled }}\n      className={cn(chipVariants({ selected, disabled }), className)}\n      onPress={onPress}\n      disabled={disabled}\n      {...props}\n    >\n      {Icon && (\n        <Icon\n          className={iconClassName}\n          color={iconStyle.color}\n          width={toNumber(iconStyle.width)}\n          height={toNumber(iconStyle.height)}\n        />\n      )}\n      <Text className={chipTextVariants({ selected })}>{label}</Text>\n    </Pressable>\n  );\n};\n\nexport { Chip };\n"],"mappings":";;;;;;;AAIA,IAAa,IAAoB,4EAEpB,IAAyB;CACpC,MAAM;CACN,OAAO;AACT,GAEa,IAAwB,cAExB,IAAmB,EAAI,uBAAuB;CACzD,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GAEY,IAAmB,EAAI,wBAAwB;CAC1D,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GChCK,IAAgB,EAAoB,EACxC,QAAQ;CACN,aAAa,EACX,cAAc;EAEZ;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,EACE,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF,EACF;CACA,wBAAwB,EACtB,cAAc,CAAC,aAAa,aAAa,EAS3C;AACF,EACF,CAAC;AAED,SAAgB,EAAG,GAAG,GAAsB;CAC1C,OAAO,EAAc,EAAK,CAAM,CAAC;AACnC;;;AC9DA,IAAM,KAAY,MAAmB;CACnC,IAAI,OAAO,KAAU,UAAU,OAAO;CACtC,IAAI,OAAO,KAAU,YAAY,kBAAkB,KAAK,CAAK,GAAG,OAAO,WAAW,CAAK;AAEzF,GASM,IAAe,EAAI,uBAAuB,KAAqB;CACnE,UAAU;EACR,UAAU;EACV,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,UAAU;EACV,UAAU;CACZ;AACF,CAAC,GAEK,KAAQ,EACZ,cACA,UACA,MAAM,GACN,cAAW,IACX,cAAW,IACX,YACA,uBACA,GAAG,QACY;CACf,IAAM,IAAgB,EAAiB,EAAE,YAAS,CAAC,GAE7C,IAAY,EAAqB,CAAa;CAEpD,OACE,kBAAC,GAAD;EACE,mBAAkB;EAClB,oBAAoB;GAAE,GAAG;GAAoB;GAAU;EAAS;EAChE,WAAW,EAAG,EAAa;GAAE;GAAU;EAAS,CAAC,GAAG,CAAS;EACpD;EACC;EACV,GAAI;YANN,CAQG,KACC,kBAAC,GAAD;GACE,WAAW;GACX,OAAO,EAAU;GACjB,OAAO,EAAS,EAAU,KAAK;GAC/B,QAAQ,EAAS,EAAU,MAAM;EAClC,CAAA,GAEH,kBAAC,GAAD;GAAM,WAAW,EAAiB,EAAE,YAAS,CAAC;aAAI;EAAY,CAAA,CACrD;;AAEf"}

package/dist/native/components/chip/Chip.native.d.ts

@@ -0,0 +1,14 @@
+import { ColorValue, PressableProps } from 'react-native';
+import { ChipBaseProps } from './Chip.types';
+import { ComponentType } from 'react';
+export interface ChipIconProps {
+    className?: string;
+    color?: ColorValue;
+    width?: number;
+    height?: number;
+}
+export interface ChipProps extends Omit<ChipBaseProps, "icon">, Omit<PressableProps, "children" | "style" | keyof ChipBaseProps> {
+    icon?: ComponentType<ChipIconProps>;
+}
+declare const Chip: ({ className, label, icon: Icon, selected, disabled, onPress, accessibilityState, ...props }: ChipProps) => import("react").JSX.Element;
+export { Chip };

package/dist/native/components/chip/Chip.types.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType } from 'react';
+export interface ChipBaseProps {
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    selected?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+    className?: string;
+}

package/dist/native/components/chip/Chip.variants.d.ts

@@ -0,0 +1,12 @@
+export declare const chipBaseClassName = "items-center justify-center gap-1 rounded-full border px-[11px] py-[7px]";
+export declare const chipSelectedClassNames: {
+    true: string;
+    false: string;
+};
+export declare const chipDisabledClassName = "opacity-40";
+export declare const chipTextVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const chipIconVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/native/utils/TailwindUtil.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/native/utils/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import { Ref, RefCallback } from 'react';
+export declare const mergeRefs: <T>(...refs: (Ref<T> | undefined)[]) => RefCallback<T>;

package/dist/src/components/chip/Chip.d.ts

@@ -1,11 +1,6 @@
+import { ChipBaseProps } from './Chip.types';
 import * as React from "react";
-export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-    label: string;
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
-    selected?: boolean;
-    onPress?: () => void;
+export interface ChipProps extends ChipBaseProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | keyof ChipBaseProps> {
 }
 declare const Chip: ({ className, label, icon: Icon, selected, disabled, onPress, onClick, type, ...props }: ChipProps) => React.JSX.Element;
 export { Chip };

package/dist/src/components/chip/Chip.types.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType } from 'react';
+export interface ChipBaseProps {
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    selected?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+    className?: string;
+}

package/dist/src/components/chip/Chip.variants.d.ts

@@ -0,0 +1,12 @@
+export declare const chipBaseClassName = "items-center justify-center gap-1 rounded-full border px-[11px] py-[7px]";
+export declare const chipSelectedClassNames: {
+    true: string;
+    false: string;
+};
+export declare const chipDisabledClassName = "opacity-40";
+export declare const chipTextVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const chipIconVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;