@petnow/ui 5.0.1 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## 5.2.0
+
+### Changes
+
+- **Components no longer have a version in their path.** v0 (`Checkbox`, `Radio`, `Tabs`, `Toggle`) and v1
+  (`Badge`, `Chip`, `CTAButton`, `Popup`, `TextField`, icons) are one set. Import a single component from
+  `@petnow/ui/<name>` (`@petnow/ui/checkbox`, `@petnow/ui/cta-button`) and an icon from
+  `@petnow/ui/icons/<action|static>/<name>` (`@petnow/ui/icons/action/chevron-left`). The root import
+  `@petnow/ui` is unchanged.
+- **`@petnow/ui/v0/*` and `@petnow/ui/v1/*` are deprecated.** They still work: each one points to the same
+  module as its new path, so the two paths give the same component. They will be removed in the next major.
+  To migrate, delete `v0/` and `v1/` from the import path.
+- The built files moved from `dist/v0/<name>.js` and `dist/v1/<name>.js` to `dist/<name>.js` (icons: from
+  `dist/v1/icons/<group>/<name>.js` to `dist/icons/<group>/<name>.js`). The old files are still built as
+  re-exports of the new ones and will be removed with the `v0`/`v1` paths. The type declarations moved from
+  `dist/src/components/v0|v1/...` to `dist/src/components/...`.
+- Storybook titles drop the version: `Components/v0/Checkbox` is now `Components/Checkbox`, so story URLs change.
+
+The token files keep their version. `tailwind.css` v0 tokens stay deprecated, and
+`petnow-design-system-v1.css` keeps its name.
+
+## 5.1.0
+
+### Changes
+
+- **v0 `Checkbox` checked colors use semantic tokens.** The background is `surface-primary-accent` and the
+  check mark is `icon-prominent-neutral`. Both keep their value (`#ff592c`, `#ffffff`) in the Petnow theme;
+  the background follows the Petify theme's accent. The unchecked colors stay on `petnow-grey-primary`
+  (`#c5c8cd`) and `petnow-grey-secondary` (`#8b919a`), because no semantic token has those values.
+- v0 `Checkbox` shows a focus ring on keyboard focus (`focus-visible`, `border-prominent-accent`). It is an
+  outline, so a consumer `focus-visible:ring-*` is drawn under it. Pass `focus-visible:outline-none` to keep
+  only your own ring.
+- v0 `Checkbox` has a transparent border. The border used to be the background color, so it looks the same
+  unless a consumer overrode only the background; then the 1px `#c5c8cd` border is gone.
+
+### Fixes
+
+- v0 `Checkbox` `className` now overrides the default classes. It was merged before them, so a conflicting
+  class such as `bg-*` lost and consumers had to add `!important` modifiers. A conflicting class that was
+  silently ignored before (`size-*`, `rounded-*`, `bg-*`, `border-*` without `!`) now takes effect.
+- v0 `Checkbox` passes the remaining `<input>` attributes (`name`, `required`, `aria-invalid`,
+  `aria-describedby`, …) to its `<input>`. `isChecked` and `onChange(checked: boolean)` are unchanged.
+- Removed the v0 `Checkbox` `before:` classes. The pseudo-element stayed at `opacity-0`, so it never
+  rendered.
+
 ## 5.0.1
 
 ### Fixes

package/README.md

@@ -24,7 +24,7 @@
    `@petnow/ui/tailwind.css`는 토큰·유틸리티를 추가하고 패키지 `dist`를 `@source`로 등록한다. Tailwind,
    폰트, base 스타일, shadcn 변수, 다크 모드 설정은 넣지 않는다. 이것들은 소비 레포가 정한다.
 
-3. v0 `Radio`나 `.scrollbar`, `.popup-scrollbar`, `.ja-break-all`, `.global-break-all` 클래스를 쓰면 일반 CSS도
+3. `Radio`나 `.scrollbar`, `.popup-scrollbar`, `.ja-break-all`, `.global-break-all` 클래스를 쓰면 일반 CSS도
    import한다.
 
    ```tsx
@@ -38,9 +38,12 @@
    ```tsx
    import { CTAButton } from "@petnow/ui";
    // 또는 개별 경로
-   import { CTAButton } from "@petnow/ui/v1/cta-button";
+   import { CTAButton } from "@petnow/ui/cta-button";
    ```
 
+   개별 경로는 `@petnow/ui/<컴포넌트>`, 아이콘은 `@petnow/ui/icons/<action|static>/<이름>`이다. 5.1까지 쓰던
+   `@petnow/ui/v0/*`, `@petnow/ui/v1/*` 경로도 같은 모듈을 가리키지만 deprecated이고, 다음 major에서 지운다.
+
 Petify 테마는 상위 요소에 `petify` 클래스를 붙이면 v1 시맨틱 컬러가 바뀐다.
 
 ## 구조
@@ -52,16 +55,15 @@ Petify 테마는 상위 요소에 `petify` 클래스를 붙이면 v1 시맨틱
 ├── index.ts                      - 패키지 엔트리
 ├── src
 │   ├── components
-│   │   ├── ui - 내부 전용 primitive (export하지 않음)
-│   │   ├── v0 - 기존 컴포넌트 (기능 추가 없이 유지)
-│   │   └── v1 - 현재 컴포넌트와 아이콘
+│   │   ├── ui    - 내부 전용 primitive (export하지 않음)
+│   │   ├── icons - 아이콘 (action, static)
+│   │   └── <컴포넌트> - 컴포넌트와 스토리 (badge, checkbox, cta-button, …)
 │   ├── styles/components.css - dist/index.css로 복사되는 일반 CSS
 │   ├── index.css             - Storybook 엔트리
 │   └── utils
 ├── test
-│   ├── css - 소비 레포 방식으로 패키지 CSS를 빌드해 보는 테스트
-│   ├── v0
-│   └── v1
+│   ├── css        - 소비 레포 방식으로 패키지 CSS를 빌드해 보는 테스트
+│   └── components - 컴포넌트 테스트
 └── docs
     ├── adr
     └── migration

package/dist/{Popup-B2Q-le-6.js → Popup-DRf-ERpL.js}

@@ -1,6 +1,6 @@
 "use client";
 import { t as e } from "./TailwindUtil-DiNvXuNl.js";
-import { CTAButton as t } from "./v1/cta-button.js";
+import { CTAButton as t } from "./cta-button.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import * as i from "react";
 import { Dialog as a } from "radix-ui";
@@ -34,7 +34,7 @@ var d = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Descript
 }));
 d.displayName = a.Description.displayName;
 //#endregion
-//#region src/components/v1/popup/Popup.tsx
+//#region src/components/popup/Popup.tsx
 var f = ({ isOpen: i, setIsOpen: a, onClose: s, title: c, description: f, content: p, confirm: m, cancel: h, preventEasyClose: g = !1, className: _ }) => {
 	let v = () => {
 		a(!1), s?.();
@@ -93,4 +93,4 @@ var f = ({ isOpen: i, setIsOpen: a, onClose: s, title: c, description: f, conten
 //#endregion
 export { f as t };
 
-//# sourceMappingURL=Popup-B2Q-le-6.js.map
+//# sourceMappingURL=Popup-DRf-ERpL.js.map

package/dist/Popup-DRf-ERpL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup-DRf-ERpL.js","names":[],"sources":["../src/components/ui/dialog.tsx","../src/components/popup/Popup.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/TailwindUtil\";\n\nconst Dialog = DialogPrimitive.Root;\nconst DialogTrigger = DialogPrimitive.Trigger;\nconst DialogPortal = DialogPrimitive.Portal;\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      // TODO(PROD-662): 오버레이(dim) 시맨틱 토큰이 없어 기존 색을 유지한다. 토큰 추가 후 교체.\n      // eslint-disable-next-line design-tokens/no-hardcoded-color\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[#2c2f34]/40 duration-200\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-surface-base-neutral-1 fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-6 shadow-lg duration-200 outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nfunction DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"flex flex-col gap-2\", className)} {...props} />;\n}\n\nfunction DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"flex flex-col gap-2 sm:flex-row sm:justify-end\", className)} {...props} />;\n}\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold\", className)} {...props} />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-text-prominent-neutral-3 text-sm\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../../utils/TailwindUtil\";\nimport { CTAButton } from \"../cta-button/CTAButton\";\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"@/components/ui/dialog\";\n\ntype PopupAction = {\n  label: string | React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  onClick?: () => void;\n};\n\nexport interface PopupProps {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  onClose?: () => void;\n  title?: string | React.ReactNode;\n  description?: string | React.ReactNode;\n  content?: React.ReactNode;\n  confirm?: PopupAction;\n  cancel?: PopupAction;\n  preventEasyClose?: boolean;\n  className?: string;\n}\n\nconst Popup = ({\n  isOpen,\n  setIsOpen,\n  onClose,\n  title,\n  description,\n  content,\n  confirm,\n  cancel,\n  preventEasyClose = false,\n  className,\n}: PopupProps) => {\n  const handleClose = () => {\n    setIsOpen(false);\n    onClose?.();\n  };\n\n  const handleConfirmAction = (action?: PopupAction) => () => {\n    action?.onClick?.();\n  };\n\n  const handleCancelAction = (action?: PopupAction) => () => {\n    action?.onClick?.();\n    handleClose();\n  };\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (preventEasyClose && !nextOpen) {\n      return;\n    }\n\n    if (!nextOpen) {\n      onClose?.();\n    }\n\n    setIsOpen(nextOpen);\n  };\n\n  return (\n    <Dialog open={isOpen} onOpenChange={handleOpenChange}>\n      <DialogContent\n        onEscapeKeyDown={preventEasyClose ? (event) => event.preventDefault() : undefined}\n        onInteractOutside={preventEasyClose ? (event) => event.preventDefault() : undefined}\n        className={cn(\n          \"bg-surface-base-neutral-1 flex max-h-[440px] w-[300px] max-w-[300px] flex-col gap-4 overflow-hidden rounded-[16px] p-4\",\n          className,\n        )}\n      >\n        <div className=\"flex w-full flex-col gap-2 overflow-y-auto\">\n          {title && <DialogTitle className=\"text-title-18-bold text-text-prominent-neutral-4\">{title}</DialogTitle>}\n          {description && (\n            <div className=\"overflow-y-auto\">\n              <DialogDescription className=\"text-body-16-medium text-text-prominent-neutral-3\">\n                {description}\n              </DialogDescription>\n            </div>\n          )}\n          {content && <div className=\"overflow-y-auto\">{content}</div>}\n        </div>\n        {(confirm || cancel) && (\n          <div className=\"flex w-full flex-col gap-2\">\n            {confirm && (\n              <CTAButton\n                label={confirm.label}\n                icon={confirm.icon}\n                size=\"medium\"\n                hierarchy=\"primary\"\n                onClick={handleConfirmAction(confirm)}\n              />\n            )}\n            {cancel && (\n              <CTAButton\n                label={cancel.label}\n                icon={cancel.icon}\n                size=\"medium\"\n                hierarchy=\"tertiary\"\n                onClick={handleCancelAction(cancel)}\n              />\n            )}\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport { Popup };\n"],"mappings":";;;;;;;AAKA,IAAM,IAAS,EAAgB;AACT,EAAgB;AACtC,IAAM,IAAe,EAAgB;AACjB,EAAgB;AAEpC,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EAGT,2KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,CAAgB,CAAA,GAChB,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EACT,4RACA,CACF;CACA,GAAI;AACL,CAAA,CACW,EAAA,CAAA,CACf;AACD,EAAc,cAAc,EAAgB,QAAQ;AAUpD,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,OAAjB;CAA4B;CAAK,WAAW,EAAG,yBAAyB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACjG;AACD,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,aAAjB;CACO;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACL,CAAA,CACF;AACD,EAAkB,cAAc,EAAgB,YAAY;;;AC3C5D,IAAM,KAAS,EACb,WACA,cACA,YACA,UACA,gBACA,YACA,YACA,WACA,sBAAmB,IACnB,mBACgB;CAChB,IAAM,UAAoB;EAExB,AADA,EAAU,EAAK,GACf,IAAU;CACZ;CAuBA,OACE,kBAAC,GAAD;EAAQ,MAAM;EAAQ,eAbE,MAAsB;GAC1C,KAAoB,CAAC,MAIpB,KACH,IAAU,GAGZ,EAAU,CAAQ;EACpB;YAII,kBAAC,GAAD;GACE,iBAAiB,KAAoB,MAAU,EAAM,eAAe,IAAI,KAAA;GACxE,mBAAmB,KAAoB,MAAU,EAAM,eAAe,IAAI,KAAA;GAC1E,WAAW,EACT,0HACA,CACF;aANF,CAQE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAS,kBAAC,GAAD;MAAa,WAAU;gBAAoD;KAAmB,CAAA;KACvG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAmB,WAAU;iBAC1B;MACgB,CAAA;KAChB,CAAA;KAEN,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAmB;KAAa,CAAA;IACxD;QACH,KAAW,MACX,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,GAAD;KACE,OAAO,EAAQ;KACf,MAAM,EAAQ;KACd,MAAK;KACL,WAAU;KACV,WAlDe,YAA+B;MAC1D,GAAQ,UAAU;KACpB,EAgDuB,CAAoB,CAAO;IACrC,CAAA,GAEF,KACC,kBAAC,GAAD;KACE,OAAO,EAAO;KACd,MAAM,EAAO;KACb,MAAK;KACL,WAAU;KACV,WAvDc,YAA+B;MAEzD,AADA,GAAQ,UAAU,GAClB,EAAY;KACd,EAoDuB,CAAmB,CAAM;IACnC,CAAA,CAEA;KAEM;;CACT,CAAA;AAEZ"}

package/dist/badge.js

@@ -0,0 +1,338 @@
+"use client";
+import { t as e } from "./TailwindUtil-DiNvXuNl.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as r from "react";
+import { cva as i } from "class-variance-authority";
+//#region src/components/badge/Badge.tsx
+var a = i("inline-flex items-center justify-center overflow-hidden", {
+	variants: {
+		type: {
+			filled: "",
+			outlined: "",
+			tinted: ""
+		},
+		color: {
+			orange: "",
+			blue: "",
+			red: "",
+			green: "",
+			neutral: ""
+		},
+		size: {
+			large: "rounded-[4px] h-[28px] px-2 py-1 gap-1",
+			small: "rounded-[2px] h-[17px] px-1 py-0.5 gap-1"
+		}
+	},
+	compoundVariants: [
+		{
+			type: "filled",
+			color: "orange",
+			className: "bg-surface-base-accent-3-badge"
+		},
+		{
+			type: "filled",
+			color: "blue",
+			className: "bg-surface-base-sub-3"
+		},
+		{
+			type: "filled",
+			color: "red",
+			className: "bg-surface-base-critical-2"
+		},
+		{
+			type: "filled",
+			color: "green",
+			className: "bg-surface-base-success-2"
+		},
+		{
+			type: "filled",
+			color: "neutral",
+			className: "bg-surface-base-neutral-5"
+		},
+		{
+			type: "tinted",
+			color: "orange",
+			className: "bg-surface-base-accent-1-badge"
+		},
+		{
+			type: "tinted",
+			color: "blue",
+			className: "bg-surface-base-sub-1"
+		},
+		{
+			type: "tinted",
+			color: "red",
+			className: "bg-surface-base-critical-1"
+		},
+		{
+			type: "tinted",
+			color: "green",
+			className: "bg-surface-base-success-1"
+		},
+		{
+			type: "tinted",
+			color: "neutral",
+			className: "bg-surface-base-neutral-2"
+		},
+		{
+			type: "outlined",
+			color: "orange",
+			className: "border border-border-prominent-accent-badge"
+		},
+		{
+			type: "outlined",
+			color: "blue",
+			className: "border border-border-prominent-sub"
+		},
+		{
+			type: "outlined",
+			color: "red",
+			className: "border border-border-prominent-critical"
+		},
+		{
+			type: "outlined",
+			color: "green",
+			className: "border border-border-prominent-success"
+		},
+		{
+			type: "outlined",
+			color: "neutral",
+			className: "border border-border-base-neutral-5"
+		}
+	],
+	defaultVariants: {
+		type: "filled",
+		color: "neutral",
+		size: "large"
+	}
+}), o = i("", {
+	variants: {
+		type: {
+			filled: "",
+			outlined: "",
+			tinted: ""
+		},
+		color: {
+			orange: "",
+			blue: "",
+			red: "",
+			green: "",
+			neutral: ""
+		},
+		size: {
+			large: "text-caption-12-medium",
+			small: "text-caption-11-medium"
+		}
+	},
+	compoundVariants: [
+		{
+			type: "filled",
+			color: "orange",
+			className: "text-text-prominent-neutral-1"
+		},
+		{
+			type: "filled",
+			color: "blue",
+			className: "text-text-prominent-neutral-1"
+		},
+		{
+			type: "filled",
+			color: "red",
+			className: "text-text-prominent-neutral-1"
+		},
+		{
+			type: "filled",
+			color: "green",
+			className: "text-text-prominent-neutral-1"
+		},
+		{
+			type: "filled",
+			color: "neutral",
+			className: "text-text-prominent-neutral-1"
+		},
+		{
+			type: "tinted",
+			color: "orange",
+			className: "text-text-prominent-accent-1-badge"
+		},
+		{
+			type: "tinted",
+			color: "blue",
+			className: "text-text-prominent-sub"
+		},
+		{
+			type: "tinted",
+			color: "red",
+			className: "text-text-prominent-critical"
+		},
+		{
+			type: "tinted",
+			color: "green",
+			className: "text-text-prominent-success"
+		},
+		{
+			type: "tinted",
+			color: "neutral",
+			className: "text-text-base-neutral-3"
+		},
+		{
+			type: "outlined",
+			color: "orange",
+			className: "text-text-prominent-accent-1-badge"
+		},
+		{
+			type: "outlined",
+			color: "blue",
+			className: "text-text-prominent-sub"
+		},
+		{
+			type: "outlined",
+			color: "red",
+			className: "text-text-prominent-critical"
+		},
+		{
+			type: "outlined",
+			color: "green",
+			className: "text-text-prominent-success"
+		},
+		{
+			type: "outlined",
+			color: "neutral",
+			className: "text-text-base-neutral-3"
+		}
+	],
+	defaultVariants: {
+		type: "filled",
+		color: "neutral",
+		size: "large"
+	}
+}), s = i("shrink-0", {
+	variants: {
+		type: {
+			filled: "",
+			outlined: "",
+			tinted: ""
+		},
+		color: {
+			orange: "",
+			blue: "",
+			red: "",
+			green: "",
+			neutral: ""
+		},
+		size: {
+			large: "size-[20px]",
+			small: "hidden"
+		}
+	},
+	compoundVariants: [
+		{
+			type: "filled",
+			color: "orange",
+			className: "text-icon-base-neutral-1"
+		},
+		{
+			type: "filled",
+			color: "blue",
+			className: "text-icon-base-neutral-1"
+		},
+		{
+			type: "filled",
+			color: "red",
+			className: "text-icon-base-neutral-1"
+		},
+		{
+			type: "filled",
+			color: "green",
+			className: "text-icon-base-neutral-1"
+		},
+		{
+			type: "filled",
+			color: "neutral",
+			className: "text-icon-base-neutral-1"
+		},
+		{
+			type: "tinted",
+			color: "orange",
+			className: "text-icon-prominent-accent-1-badge"
+		},
+		{
+			type: "tinted",
+			color: "blue",
+			className: "text-icon-prominent-sub"
+		},
+		{
+			type: "tinted",
+			color: "red",
+			className: "text-icon-prominent-critical"
+		},
+		{
+			type: "tinted",
+			color: "green",
+			className: "text-icon-prominent-success"
+		},
+		{
+			type: "tinted",
+			color: "neutral",
+			className: "text-icon-base-neutral-3"
+		},
+		{
+			type: "outlined",
+			color: "orange",
+			className: "text-icon-prominent-accent-1-badge"
+		},
+		{
+			type: "outlined",
+			color: "blue",
+			className: "text-icon-prominent-sub"
+		},
+		{
+			type: "outlined",
+			color: "red",
+			className: "text-icon-prominent-critical"
+		},
+		{
+			type: "outlined",
+			color: "green",
+			className: "text-icon-prominent-success"
+		},
+		{
+			type: "outlined",
+			color: "neutral",
+			className: "text-icon-base-neutral-3"
+		}
+	],
+	defaultVariants: {
+		type: "filled",
+		color: "neutral",
+		size: "large"
+	}
+}), c = r.forwardRef(({ label: r, icon: i, type: c = "filled", color: l = "neutral", size: u = "large", className: d, ...f }, p) => /* @__PURE__ */ n("div", {
+	ref: p,
+	className: e(a({
+		type: c,
+		color: l,
+		size: u
+	}), d),
+	...f,
+	children: [i && /* @__PURE__ */ t(i, {
+		className: s({
+			type: c,
+			color: l,
+			size: u
+		}),
+		"aria-hidden": !0
+	}), /* @__PURE__ */ t("span", {
+		className: o({
+			type: c,
+			color: l,
+			size: u
+		}),
+		children: r
+	})]
+}));
+c.displayName = "Badge";
+//#endregion
+export { c as Badge };
+
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../src/components/badge/Badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../utils/TailwindUtil\";\n\ntype BadgeType = \"filled\" | \"outlined\" | \"tinted\";\ntype BadgeColor = \"orange\" | \"blue\" | \"red\" | \"green\" | \"neutral\";\ntype BadgeSize = \"small\" | \"large\";\n\nexport interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  label: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  type?: BadgeType;\n  color?: BadgeColor;\n  size?: BadgeSize;\n}\n\nconst badgeVariants = cva(\"inline-flex items-center justify-center overflow-hidden\", {\n  variants: {\n    type: {\n      filled: \"\",\n      outlined: \"\",\n      tinted: \"\",\n    },\n    color: {\n      orange: \"\",\n      blue: \"\",\n      red: \"\",\n      green: \"\",\n      neutral: \"\",\n    },\n    size: {\n      large: \"rounded-[4px] h-[28px] px-2 py-1 gap-1\",\n      small: \"rounded-[2px] h-[17px] px-1 py-0.5 gap-1\",\n    },\n  },\n  compoundVariants: [\n    {\n      type: \"filled\",\n      color: \"orange\",\n      className: \"bg-surface-base-accent-3-badge\",\n    },\n    {\n      type: \"filled\",\n      color: \"blue\",\n      className: \"bg-surface-base-sub-3\",\n    },\n    {\n      type: \"filled\",\n      color: \"red\",\n      className: \"bg-surface-base-critical-2\",\n    },\n    {\n      type: \"filled\",\n      color: \"green\",\n      className: \"bg-surface-base-success-2\",\n    },\n    {\n      type: \"filled\",\n      color: \"neutral\",\n      className: \"bg-surface-base-neutral-5\",\n    },\n    {\n      type: \"tinted\",\n      color: \"orange\",\n      className: \"bg-surface-base-accent-1-badge\",\n    },\n    {\n      type: \"tinted\",\n      color: \"blue\",\n      className: \"bg-surface-base-sub-1\",\n    },\n    {\n      type: \"tinted\",\n      color: \"red\",\n      className: \"bg-surface-base-critical-1\",\n    },\n    {\n      type: \"tinted\",\n      color: \"green\",\n      className: \"bg-surface-base-success-1\",\n    },\n    {\n      type: \"tinted\",\n      color: \"neutral\",\n      className: \"bg-surface-base-neutral-2\",\n    },\n    {\n      type: \"outlined\",\n      color: \"orange\",\n      className: \"border border-border-prominent-accent-badge\",\n    },\n    {\n      type: \"outlined\",\n      color: \"blue\",\n      className: \"border border-border-prominent-sub\",\n    },\n    {\n      type: \"outlined\",\n      color: \"red\",\n      className: \"border border-border-prominent-critical\",\n    },\n    {\n      type: \"outlined\",\n      color: \"green\",\n      className: \"border border-border-prominent-success\",\n    },\n    {\n      type: \"outlined\",\n      color: \"neutral\",\n      className: \"border border-border-base-neutral-5\",\n    },\n  ],\n  defaultVariants: {\n    type: \"filled\",\n    color: \"neutral\",\n    size: \"large\",\n  },\n});\n\nconst badgeTextVariants = cva(\"\", {\n  variants: {\n    type: {\n      filled: \"\",\n      outlined: \"\",\n      tinted: \"\",\n    },\n    color: {\n      orange: \"\",\n      blue: \"\",\n      red: \"\",\n      green: \"\",\n      neutral: \"\",\n    },\n    size: {\n      large: \"text-caption-12-medium\",\n      small: \"text-caption-11-medium\",\n    },\n  },\n  compoundVariants: [\n    {\n      type: \"filled\",\n      color: \"orange\",\n      className: \"text-text-prominent-neutral-1\",\n    },\n    {\n      type: \"filled\",\n      color: \"blue\",\n      className: \"text-text-prominent-neutral-1\",\n    },\n    {\n      type: \"filled\",\n      color: \"red\",\n      className: \"text-text-prominent-neutral-1\",\n    },\n    {\n      type: \"filled\",\n      color: \"green\",\n      className: \"text-text-prominent-neutral-1\",\n    },\n    {\n      type: \"filled\",\n      color: \"neutral\",\n      className: \"text-text-prominent-neutral-1\",\n    },\n    {\n      type: \"tinted\",\n      color: \"orange\",\n      className: \"text-text-prominent-accent-1-badge\",\n    },\n    {\n      type: \"tinted\",\n      color: \"blue\",\n      className: \"text-text-prominent-sub\",\n    },\n    {\n      type: \"tinted\",\n      color: \"red\",\n      className: \"text-text-prominent-critical\",\n    },\n    {\n      type: \"tinted\",\n      color: \"green\",\n      className: \"text-text-prominent-success\",\n    },\n    {\n      type: \"tinted\",\n      color: \"neutral\",\n      className: \"text-text-base-neutral-3\",\n    },\n    {\n      type: \"outlined\",\n      color: \"orange\",\n      className: \"text-text-prominent-accent-1-badge\",\n    },\n    {\n      type: \"outlined\",\n      color: \"blue\",\n      className: \"text-text-prominent-sub\",\n    },\n    {\n      type: \"outlined\",\n      color: \"red\",\n      className: \"text-text-prominent-critical\",\n    },\n    {\n      type: \"outlined\",\n      color: \"green\",\n      className: \"text-text-prominent-success\",\n    },\n    {\n      type: \"outlined\",\n      color: \"neutral\",\n      className: \"text-text-base-neutral-3\",\n    },\n  ],\n  defaultVariants: {\n    type: \"filled\",\n    color: \"neutral\",\n    size: \"large\",\n  },\n});\n\nconst badgeIconVariants = cva(\"shrink-0\", {\n  variants: {\n    type: {\n      filled: \"\",\n      outlined: \"\",\n      tinted: \"\",\n    },\n    color: {\n      orange: \"\",\n      blue: \"\",\n      red: \"\",\n      green: \"\",\n      neutral: \"\",\n    },\n    size: {\n      large: \"size-[20px]\",\n      small: \"hidden\",\n    },\n  },\n  compoundVariants: [\n    {\n      type: \"filled\",\n      color: \"orange\",\n      className: \"text-icon-base-neutral-1\",\n    },\n    {\n      type: \"filled\",\n      color: \"blue\",\n      className: \"text-icon-base-neutral-1\",\n    },\n    {\n      type: \"filled\",\n      color: \"red\",\n      className: \"text-icon-base-neutral-1\",\n    },\n    {\n      type: \"filled\",\n      color: \"green\",\n      className: \"text-icon-base-neutral-1\",\n    },\n    {\n      type: \"filled\",\n      color: \"neutral\",\n      className: \"text-icon-base-neutral-1\",\n    },\n    {\n      type: \"tinted\",\n      color: \"orange\",\n      className: \"text-icon-prominent-accent-1-badge\",\n    },\n    {\n      type: \"tinted\",\n      color: \"blue\",\n      className: \"text-icon-prominent-sub\",\n    },\n    {\n      type: \"tinted\",\n      color: \"red\",\n      className: \"text-icon-prominent-critical\",\n    },\n    {\n      type: \"tinted\",\n      color: \"green\",\n      className: \"text-icon-prominent-success\",\n    },\n    {\n      type: \"tinted\",\n      color: \"neutral\",\n      className: \"text-icon-base-neutral-3\",\n    },\n    {\n      type: \"outlined\",\n      color: \"orange\",\n      className: \"text-icon-prominent-accent-1-badge\",\n    },\n    {\n      type: \"outlined\",\n      color: \"blue\",\n      className: \"text-icon-prominent-sub\",\n    },\n    {\n      type: \"outlined\",\n      color: \"red\",\n      className: \"text-icon-prominent-critical\",\n    },\n    {\n      type: \"outlined\",\n      color: \"green\",\n      className: \"text-icon-prominent-success\",\n    },\n    {\n      type: \"outlined\",\n      color: \"neutral\",\n      className: \"text-icon-base-neutral-3\",\n    },\n  ],\n  defaultVariants: {\n    type: \"filled\",\n    color: \"neutral\",\n    size: \"large\",\n  },\n});\n\nconst Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\n  ({ label, icon: Icon, type = \"filled\", color = \"neutral\", size = \"large\", className, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(badgeVariants({ type, color, size }), className)} {...props}>\n        {Icon && <Icon className={badgeIconVariants({ type, color, size })} aria-hidden />}\n        <span className={badgeTextVariants({ type, color, size })}>{label}</span>\n      </div>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n\nexport { Badge };\n"],"mappings":";;;;;;AAmBA,IAAM,IAAgB,EAAI,2DAA2D;CACnF,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,UAAU;GACV,QAAQ;EACV;EACA,OAAO;GACL,QAAQ;GACR,MAAM;GACN,KAAK;GACL,OAAO;GACP,SAAS;EACX;EACA,MAAM;GACJ,OAAO;GACP,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;EACP,MAAM;CACR;AACF,CAAC,GAEK,IAAoB,EAAI,IAAI;CAChC,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,UAAU;GACV,QAAQ;EACV;EACA,OAAO;GACL,QAAQ;GACR,MAAM;GACN,KAAK;GACL,OAAO;GACP,SAAS;EACX;EACA,MAAM;GACJ,OAAO;GACP,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;EACP,MAAM;CACR;AACF,CAAC,GAEK,IAAoB,EAAI,YAAY;CACxC,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,UAAU;GACV,QAAQ;EACV;EACA,OAAO;GACL,QAAQ;GACR,MAAM;GACN,KAAK;GACL,OAAO;GACP,SAAS;EACX;EACA,MAAM;GACJ,OAAO;GACP,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;EACA;GACE,MAAM;GACN,OAAO;GACP,WAAW;EACb;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;EACP,MAAM;CACR;AACF,CAAC,GAEK,IAAQ,EAAM,YACjB,EAAE,UAAO,MAAM,GAAM,UAAO,UAAU,WAAQ,WAAW,UAAO,SAAS,cAAW,GAAG,KAAS,MAE7F,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,EAAc;EAAE;EAAM;EAAO;CAAK,CAAC,GAAG,CAAS;CAAG,GAAI;WAAnF,CACG,KAAQ,kBAAC,GAAD;EAAM,WAAW,EAAkB;GAAE;GAAM;GAAO;EAAK,CAAC;EAAG,eAAA;CAAa,CAAA,GACjF,kBAAC,QAAD;EAAM,WAAW,EAAkB;GAAE;GAAM;GAAO;EAAK,CAAC;YAAI;CAAY,CAAA,CACrE;EAGX;AAEA,EAAM,cAAc"}

package/dist/checkbox.js

@@ -0,0 +1,38 @@
+"use client";
+import { t as e } from "./TailwindUtil-DiNvXuNl.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/checkbox/Checkbox.tsx
+var r = ({ className: r, id: i, onChange: a, disabled: o, isChecked: s, ...c }) => /* @__PURE__ */ n("label", {
+	className: "relative flex h-min w-min cursor-pointer items-center rounded-full",
+	htmlFor: i,
+	children: [/* @__PURE__ */ t("input", {
+		...c,
+		type: "checkbox",
+		disabled: o,
+		className: e("peer bg-petnow-grey-primary checked:bg-surface-primary-accent focus-visible:outline-border-prominent-accent relative size-6 cursor-pointer appearance-none rounded-xl border border-transparent transition-all focus-visible:outline-2 focus-visible:outline-offset-2", r),
+		id: i,
+		checked: s,
+		onChange: (e) => {
+			a?.(e.target.checked);
+		}
+	}), /* @__PURE__ */ t("span", {
+		className: "text-petnow-grey-secondary peer-checked:text-icon-prominent-neutral pointer-events-none absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 transition",
+		children: /* @__PURE__ */ t("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			className: "h-4 w-4",
+			viewBox: "0 0 20 20",
+			fill: "currentColor",
+			stroke: "currentColor",
+			strokeWidth: "1",
+			children: /* @__PURE__ */ t("path", {
+				fillRule: "evenodd",
+				d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+				clipRule: "evenodd"
+			})
+		})
+	})]
+});
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../utils/TailwindUtil\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\n\ninterface Props extends Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"onChange\"> {\n  className?: string;\n  id?: string;\n  onChange?: (newValue: boolean) => void;\n  disabled?: boolean;\n  isChecked?: boolean;\n}\n\nconst Checkbox = ({ className, id, onChange, disabled, isChecked, ...inputProps }: Props) => {\n  return (\n    <label className=\"relative flex h-min w-min cursor-pointer items-center rounded-full\" htmlFor={id}>\n      <input\n        {...inputProps}\n        type=\"checkbox\"\n        disabled={disabled}\n        className={cn(\n          \"peer bg-petnow-grey-primary checked:bg-surface-primary-accent focus-visible:outline-border-prominent-accent relative size-6 cursor-pointer appearance-none rounded-xl border border-transparent transition-all focus-visible:outline-2 focus-visible:outline-offset-2\",\n          className,\n        )}\n        id={id}\n        checked={isChecked}\n        onChange={(event) => {\n          onChange?.(event.target.checked);\n        }}\n      />\n      <span className=\"text-petnow-grey-secondary peer-checked:text-icon-prominent-neutral pointer-events-none absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 transition\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"h-4 w-4\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n            clipRule=\"evenodd\"\n          ></path>\n        </svg>\n      </span>\n    </label>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;AAcA,IAAM,KAAY,EAAE,cAAW,OAAI,aAAU,aAAU,cAAW,GAAG,QAEjE,kBAAC,SAAD;CAAO,WAAU;CAAqE,SAAS;WAA/F,CACE,kBAAC,SAAD;EACE,GAAI;EACJ,MAAK;EACK;EACV,WAAW,EACT,yQACA,CACF;EACI;EACJ,SAAS;EACT,WAAW,MAAU;GACnB,IAAW,EAAM,OAAO,OAAO;EACjC;CACD,CAAA,GACD,kBAAC,QAAD;EAAM,WAAU;YACd,kBAAC,OAAD;GACE,OAAM;GACN,WAAU;GACV,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;aAEZ,kBAAC,QAAD;IACE,UAAS;IACT,GAAE;IACF,UAAS;GACJ,CAAA;EACJ,CAAA;CACD,CAAA,CACD"}

package/dist/chip.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.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

package/dist/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../src/components/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../utils/TailwindUtil\";\n\nexport interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  label: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  selected?: boolean;\n  onPress?: () => void;\n}\n\nconst chipVariants = cva(\n  \"inline-flex items-center justify-center gap-1 rounded-full border px-[11px] py-[7px] transition-colors duration-200\",\n  {\n    variants: {\n      selected: {\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      disabled: {\n        true: \"opacity-40 pointer-events-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      selected: false,\n      disabled: false,\n    },\n  },\n);\n\nconst 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\nconst 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\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":";;;;;;AAcA,IAAM,IAAe,EACnB,uHACA;CACE,UAAU;EACR,UAAU;GACR,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,UAAU;EACV,UAAU;CACZ;AACF,CACF,GAEM,IAAmB,EAAI,uBAAuB;CAClD,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GAEK,IAAmB,EAAI,wBAAwB;CACnD,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;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"}