@petnow/ui 4.0.3 → 4.1.0

package/dist/v0/checkbox.js

@@ -0,0 +1,36 @@
+import { t as e } from "../TailwindUtil-aZk2bbTo.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/v0/checkbox/Checkbox.tsx
+var r = ({ className: r, id: i, onChange: a, disabled: o, isChecked: s }) => /* @__PURE__ */ n("label", {
+	className: "relative flex h-min w-min cursor-pointer items-center rounded-full",
+	htmlFor: i,
+	children: [/* @__PURE__ */ t("input", {
+		type: "checkbox",
+		disabled: o,
+		className: e(r, "before:content[''] peer bg-petnow-grey-primary checked:border-petnow-orange-primary checked:bg-petnow-orange-primary checked:before:bg-petnow-orange-primary border-petnow-grey-primary relative size-6 cursor-pointer appearance-none rounded-xl border transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-6 before:w-6 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full before:opacity-0 before:transition-opacity"),
+		id: i,
+		checked: s,
+		onChange: (e) => {
+			a?.(e.target.checked);
+		}
+	}), /* @__PURE__ */ t("span", {
+		className: "text-petnow-grey-secondary pointer-events-none absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 transition peer-checked:text-white",
+		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/v0/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/components/v0/checkbox/Checkbox.tsx"],"sourcesContent":["import { cn } from \"../../../utils/TailwindUtil\";\n\ninterface Props {\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 }: Props) => {\n  return (\n    <label className=\"relative flex h-min w-min cursor-pointer items-center rounded-full\" htmlFor={id}>\n      <input\n        type=\"checkbox\"\n        disabled={disabled}\n        className={cn(\n          className,\n          \"before:content[''] peer bg-petnow-grey-primary checked:border-petnow-orange-primary checked:bg-petnow-orange-primary checked:before:bg-petnow-orange-primary border-petnow-grey-primary relative size-6 cursor-pointer appearance-none rounded-xl border transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-6 before:w-6 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full before:opacity-0 before:transition-opacity\",\n        )}\n        id={id}\n        checked={isChecked}\n        onChange={(event) => {\n          onChange?.(event.target.checked);\n        }}\n      />\n      <span className=\"text-petnow-grey-secondary pointer-events-none absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 transition peer-checked:text-white\">\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":";;;AAUA,IAAM,KAAY,EAAE,cAAW,OAAI,aAAU,aAAU,mBAEnD,kBAAC,SAAD;CAAO,WAAU;CAAqE,SAAS;WAA/F,CACE,kBAAC,SAAD;EACE,MAAK;EACK;EACV,WAAW,EACT,GACA,2cACD;EACG;EACJ,SAAS;EACT,WAAW,MAAU;AACnB,OAAW,EAAM,OAAO,QAAQ;;EAElC,CAAA,EACF,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;IACH,CAAA;GACJ,CAAA;EACD,CAAA,CACD"}

package/dist/v0/radio.js

@@ -0,0 +1,16 @@
+import { t as e } from "../TailwindUtil-aZk2bbTo.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/v0/radio/Radio.tsx
+var n = ({ className: n, id: r, name: i, onChange: a, disabled: o, isChecked: s }) => /* @__PURE__ */ t("input", {
+	type: "radio",
+	disabled: o,
+	checked: s,
+	id: r,
+	name: i,
+	className: e("petnowRadio size-[3.5vw]", n),
+	onChange: a
+});
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=radio.js.map

package/dist/v0/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":[],"sources":["../../src/components/v0/radio/Radio.tsx"],"sourcesContent":["import { cn } from \"../../../utils/TailwindUtil\";\n\ninterface Props {\n  className?: string;\n  id?: string;\n  name?: string;\n  onChange?: () => void;\n  disabled?: boolean;\n  isChecked?: boolean;\n}\n\nconst Radio = ({ className, id, name, onChange, disabled, isChecked }: Props) => {\n  return (\n    <input\n      type=\"radio\"\n      disabled={disabled}\n      checked={isChecked}\n      id={id}\n      name={name}\n      className={cn(\"petnowRadio size-[3.5vw]\", className)}\n      onChange={onChange}\n    />\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;AAWA,IAAM,KAAS,EAAE,cAAW,OAAI,SAAM,aAAU,aAAU,mBAEtD,kBAAC,SAAD;CACE,MAAK;CACK;CACV,SAAS;CACL;CACE;CACN,WAAW,EAAG,4BAA4B,EAAU;CAC1C;CACV,CAAA"}

package/dist/v0/tabs.js

@@ -0,0 +1,62 @@
+"use client";
+import { t as e } from "../TailwindUtil-aZk2bbTo.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useRef as r, useState as i } from "react";
+import a from "react-swipeable-views";
+//#region src/components/v0/tabs/Tabs.tsx
+var o = (e) => typeof e == "function" ? e : null, s = o(a.default?.default) ?? o(a.default) ?? o(a), c = ({ className: a, tabList: o, isCuratedcontent: c, unswipeableContent: l, defaultIndex: u = 0, onTabChange: d, disabled: f, allowScrollToSection: p = !0 }) => {
+	let [m, h] = i(u), g = r(null), _ = (e) => {
+		e.current && window.scrollTo({
+			top: e.current.offsetTop - 50,
+			behavior: "smooth"
+		});
+	}, v = (e) => {
+		h(e), p && _(g), d?.(e);
+	};
+	return /* @__PURE__ */ n("div", {
+		ref: g,
+		className: "w-full",
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: e(a?.tab, `z-50 mb-[20px] flex w-full flex-col bg-white ${c && "sticky top-[50px]"}`),
+				children: [/* @__PURE__ */ t("div", {
+					className: "flex",
+					children: o.map((n, r) => /* @__PURE__ */ t("div", {
+						className: "flex flex-1 flex-col",
+						children: /* @__PURE__ */ t("button", {
+							className: e(a?.tabTitle, `cursor-pointer ${m === r ? "text-petnow-grey-30 text-label-large" : "text-petnow-grey-70 text-body-large disabled:opacity-40"}`),
+							onClick: () => v(r),
+							disabled: f,
+							children: n.displayName
+						})
+					}, n.key))
+				}), /* @__PURE__ */ t("div", {
+					className: e(a?.underline, `relative h-[2px] w-full ${f ? "bg-petnow-grey-70/40" : "bg-petnow-grey-70"}`),
+					children: /* @__PURE__ */ t("div", {
+						className: e(a?.selectedUnderline, "bg-petnow-grey-30 absolute h-[2px] transition-all duration-200"),
+						style: (() => {
+							let e = 100 / o.length;
+							return {
+								width: `${e}%`,
+								left: `${m * e}%`
+							};
+						})()
+					})
+				})]
+			}),
+			l,
+			s ? /* @__PURE__ */ t(s, {
+				index: m,
+				onChangeIndex: (e) => {
+					h(e), d?.(e);
+				},
+				disabled: f,
+				children: o.map((e) => /* @__PURE__ */ t("div", { children: e.content }, e.key))
+			}) : /* @__PURE__ */ t("div", { children: o[m]?.content })
+		]
+	});
+};
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=tabs.js.map

package/dist/v0/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/components/v0/tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useRef, useState } from \"react\";\nimport SwipeableViewsImport from \"react-swipeable-views\";\n\nimport { cn } from \"../../../utils/TailwindUtil\";\n\ntype SwipeableViewsProps = {\n  index: number;\n  onChangeIndex?: (index: number) => void;\n  disabled?: boolean;\n  children?: ReactNode;\n};\n\nconst asSwipeableViews = (candidate: unknown): React.ComponentType<SwipeableViewsProps> | null => {\n  return typeof candidate === \"function\" ? (candidate as React.ComponentType<SwipeableViewsProps>) : null;\n};\n\nconst SwipeableViews =\n  asSwipeableViews((SwipeableViewsImport as { default?: { default?: unknown } }).default?.default) ??\n  asSwipeableViews((SwipeableViewsImport as { default?: unknown }).default) ??\n  asSwipeableViews(SwipeableViewsImport);\n\ninterface TabItem {\n  readonly displayName: string;\n  readonly key: string;\n  readonly content: ReactNode;\n}\n\ninterface Props<T extends TabItem> {\n  tabList: Readonly<T[]>;\n  isCuratedcontent?: true;\n  unswipeableContent?: ReactNode;\n  defaultIndex?: number;\n  onTabChange?: (index: number) => void;\n  disabled?: boolean;\n  className?: {\n    tab?: string;\n    tabTitle?: string;\n    selectedUnderline?: string;\n    underline?: string;\n  };\n  allowScrollToSection?: boolean;\n}\n\nconst Tabs = <T extends TabItem>({\n  className,\n  tabList,\n  isCuratedcontent,\n  unswipeableContent,\n  defaultIndex = 0,\n  onTabChange,\n  disabled,\n  allowScrollToSection = true,\n}: Props<T>) => {\n  const [currentTabIndex, setCurrentTabIndex] = useState<number>(defaultIndex);\n  const TabRef = useRef<HTMLDivElement>(null);\n\n  const scrollToSection = (elementRef: React.RefObject<HTMLDivElement | null>) => {\n    if (elementRef.current) {\n      window.scrollTo({\n        top: elementRef.current.offsetTop - 50,\n        behavior: \"smooth\",\n      });\n    }\n  };\n\n  const handleTabClick = (index: number) => {\n    setCurrentTabIndex(index);\n    if (allowScrollToSection) scrollToSection(TabRef);\n    onTabChange?.(index);\n  };\n\n  const underlineStyle = () => {\n    const listLength = tabList.length;\n    const widthPercent = 100 / listLength;\n    return {\n      width: `${widthPercent}%`,\n      left: `${currentTabIndex * widthPercent}%`,\n    };\n  };\n\n  return (\n    <div ref={TabRef} className=\"w-full\">\n      <div\n        className={cn(\n          className?.tab,\n          `z-50 mb-[20px] flex w-full flex-col bg-white ${isCuratedcontent && \"sticky top-[50px]\"}`,\n        )}\n      >\n        <div className=\"flex\">\n          {tabList.map((tab, index) => (\n            <div key={tab.key} className=\"flex flex-1 flex-col\">\n              <button\n                className={cn(\n                  className?.tabTitle,\n                  `cursor-pointer ${\n                    currentTabIndex === index\n                      ? \"text-petnow-grey-30 text-label-large\"\n                      : \"text-petnow-grey-70 text-body-large disabled:opacity-40\"\n                  }`,\n                )}\n                onClick={() => handleTabClick(index)}\n                disabled={disabled}\n              >\n                {tab.displayName}\n              </button>\n            </div>\n          ))}\n        </div>\n        <div\n          className={cn(\n            className?.underline,\n            `relative h-[2px] w-full ${disabled ? \"bg-petnow-grey-70/40\" : \"bg-petnow-grey-70\"}`,\n          )}\n        >\n          <div\n            className={cn(\n              className?.selectedUnderline,\n              \"bg-petnow-grey-30 absolute h-[2px] transition-all duration-200\",\n            )}\n            style={underlineStyle()}\n          />\n        </div>\n      </div>\n\n      {unswipeableContent}\n\n      {SwipeableViews ? (\n        <SwipeableViews\n          index={currentTabIndex}\n          onChangeIndex={(index) => {\n            setCurrentTabIndex(index);\n            onTabChange?.(index);\n          }}\n          disabled={disabled}\n        >\n          {tabList.map((tab) => (\n            <div key={tab.key}>{tab.content}</div>\n          ))}\n        </SwipeableViews>\n      ) : (\n        <div>{tabList[currentTabIndex]?.content}</div>\n      )}\n    </div>\n  );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;;AAcA,IAAM,KAAoB,MACjB,OAAO,KAAc,aAAc,IAAyD,MAG/F,IACJ,EAAkB,EAA6D,SAAS,QAAQ,IAChG,EAAkB,EAA+C,QAAQ,IACzE,EAAiB,EAAqB,EAwBlC,KAA2B,EAC/B,cACA,YACA,qBACA,uBACA,kBAAe,GACf,gBACA,aACA,0BAAuB,SACT;CACd,IAAM,CAAC,GAAiB,KAAsB,EAAiB,EAAa,EACtE,IAAS,EAAuB,KAAK,EAErC,KAAmB,MAAuD;AAC9E,EAAI,EAAW,WACb,OAAO,SAAS;GACd,KAAK,EAAW,QAAQ,YAAY;GACpC,UAAU;GACX,CAAC;IAIA,KAAkB,MAAkB;AAGxC,EAFA,EAAmB,EAAM,EACrB,KAAsB,EAAgB,EAAO,EACjD,IAAc,EAAM;;AAYtB,QACE,kBAAC,OAAD;EAAK,KAAK;EAAQ,WAAU;YAA5B;GACE,kBAAC,OAAD;IACE,WAAW,EACT,GAAW,KACX,gDAAgD,KAAoB,sBACrE;cAJH,CAME,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAQ,KAAK,GAAK,MACjB,kBAAC,OAAD;MAAmB,WAAU;gBAC3B,kBAAC,UAAD;OACE,WAAW,EACT,GAAW,UACX,kBACE,MAAoB,IAChB,yCACA,4DAEP;OACD,eAAe,EAAe,EAAM;OAC1B;iBAET,EAAI;OACE,CAAA;MACL,EAfI,EAAI,IAeR,CACN;KACE,CAAA,EACN,kBAAC,OAAD;KACE,WAAW,EACT,GAAW,WACX,2BAA2B,IAAW,yBAAyB,sBAChE;eAED,kBAAC,OAAD;MACE,WAAW,EACT,GAAW,mBACX,iEACD;MACD,cAhDmB;OAE3B,IAAM,IAAe,MADF,EAAQ;AAE3B,cAAO;QACL,OAAO,GAAG,EAAa;QACvB,MAAM,GAAG,IAAkB,EAAa;QACzC;UA0C8B;MACvB,CAAA;KACE,CAAA,CACF;;GAEL;GAEA,IACC,kBAAC,GAAD;IACE,OAAO;IACP,gBAAgB,MAAU;AAExB,KADA,EAAmB,EAAM,EACzB,IAAc,EAAM;;IAEZ;cAET,EAAQ,KAAK,MACZ,kBAAC,OAAD,EAAA,UAAoB,EAAI,SAAc,EAA5B,EAAI,IAAwB,CACtC;IACa,CAAA,GAEjB,kBAAC,OAAD,EAAA,UAAM,EAAQ,IAAkB,SAAc,CAAA;GAE5C"}

package/dist/v0/toggle.js

@@ -0,0 +1,20 @@
+import { t as e } from "../TailwindUtil-aZk2bbTo.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/v0/toggle/Toggle.tsx
+var r = ({ className: r, id: i, name: a, onChange: o, disabled: s, isChecked: c }) => /* @__PURE__ */ n("label", {
+	htmlFor: i,
+	className: "relative inline-flex cursor-pointer items-center",
+	children: [/* @__PURE__ */ t("input", {
+		type: "checkbox",
+		disabled: s,
+		checked: c,
+		id: i,
+		name: a,
+		className: "peer sr-only",
+		onChange: o
+	}), /* @__PURE__ */ t("div", { className: e(r, "bg-petnow-grey-primary peer-checked:bg-petnow-orange-primary h-[32px] w-[52px] rounded-full duration-[250ms] peer-focus:outline-none after:absolute after:start-[2px] after:top-[3px] after:size-[26px] after:rounded-full after:bg-white after:shadow-[0_3px_8px_0_rgba(0,0,0,0.15)] after:transition-all after:duration-[250ms] after:content-[''] peer-checked:after:translate-x-[calc(100%-4px)] peer-checked:after:border-white", s && "cursor-not-allowed opacity-50") })]
+});
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=toggle.js.map

package/dist/v0/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","names":[],"sources":["../../src/components/v0/toggle/Toggle.tsx"],"sourcesContent":["import { cn } from \"../../../utils/TailwindUtil\";\n\ninterface Props {\n  className?: string;\n  id?: string;\n  name?: string;\n  onChange: () => void;\n  disabled?: boolean;\n  isChecked?: boolean;\n}\n\nconst Toggle = ({ className, id, name, onChange, disabled, isChecked }: Props) => {\n  return (\n    <label htmlFor={id} className=\"relative inline-flex cursor-pointer items-center\">\n      <input\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={isChecked}\n        id={id}\n        name={name}\n        className=\"peer sr-only\"\n        onChange={onChange}\n      />\n      <div\n        className={cn(\n          className,\n          \"bg-petnow-grey-primary peer-checked:bg-petnow-orange-primary h-[32px] w-[52px] rounded-full duration-[250ms] peer-focus:outline-none after:absolute after:start-[2px] after:top-[3px] after:size-[26px] after:rounded-full after:bg-white after:shadow-[0_3px_8px_0_rgba(0,0,0,0.15)] after:transition-all after:duration-[250ms] after:content-[''] peer-checked:after:translate-x-[calc(100%-4px)] peer-checked:after:border-white\",\n          disabled && \"cursor-not-allowed opacity-50\",\n        )}\n      />\n    </label>\n  );\n};\n\nexport default Toggle;\n"],"mappings":";;;AAWA,IAAM,KAAU,EAAE,cAAW,OAAI,SAAM,aAAU,aAAU,mBAEvD,kBAAC,SAAD;CAAO,SAAS;CAAI,WAAU;WAA9B,CACE,kBAAC,SAAD;EACE,MAAK;EACK;EACV,SAAS;EACL;EACE;EACN,WAAU;EACA;EACV,CAAA,EACF,kBAAC,OAAD,EACE,WAAW,EACT,GACA,waACA,KAAY,gCACb,EACD,CAAA,CACI"}

package/dist/v1/badge.js

@@ -0,0 +1,338 @@
+"use client";
+import { t as e } from "../TailwindUtil-aZk2bbTo.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/v1/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/v1/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/v1/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;GACT;EACD,OAAO;GACL,QAAQ;GACR,MAAM;GACN,KAAK;GACL,OAAO;GACP,SAAS;GACV;EACD,MAAM;GACJ,OAAO;GACP,OAAO;GACR;EACF;CACD,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACP,MAAM;EACP;CACF,CAAC,EAEI,IAAoB,EAAI,IAAI;CAChC,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,UAAU;GACV,QAAQ;GACT;EACD,OAAO;GACL,QAAQ;GACR,MAAM;GACN,KAAK;GACL,OAAO;GACP,SAAS;GACV;EACD,MAAM;GACJ,OAAO;GACP,OAAO;GACR;EACF;CACD,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACP,MAAM;EACP;CACF,CAAC,EAEI,IAAoB,EAAI,YAAY;CACxC,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,UAAU;GACV,QAAQ;GACT;EACD,OAAO;GACL,QAAQ;GACR,MAAM;GACN,KAAK;GACL,OAAO;GACP,SAAS;GACV;EACD,MAAM;GACJ,OAAO;GACP,OAAO;GACR;EACF;CACD,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACP,MAAM;EACP;CACF,CAAC,EAEI,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;EAAM,CAAC,EAAE,EAAU;CAAE,GAAI;WAAnF,CACG,KAAQ,kBAAC,GAAD;EAAM,WAAW,EAAkB;GAAE;GAAM;GAAO;GAAM,CAAC;EAAE,eAAA;EAAc,CAAA,EAClF,kBAAC,QAAD;EAAM,WAAW,EAAkB;GAAE;GAAM;GAAO;GAAM,CAAC;YAAG;EAAa,CAAA,CACrE;GAGX;AAED,EAAM,cAAc"}

package/dist/v1/chip.js

@@ -0,0 +1,53 @@
+"use client";
+import { t as e } from "../TailwindUtil-aZk2bbTo.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/v1/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/v1/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../../src/components/v1/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;GACR;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,UAAU;EACV,UAAU;EACX;CACF,CACF,EAEK,IAAmB,EAAI,uBAAuB;CAClD,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;EACR,EACF;CACD,iBAAiB,EACf,UAAU,IACX;CACF,CAAC,EAEI,IAAmB,EAAI,wBAAwB;CACnD,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;EACR,EACF;CACD,iBAAiB,EACf,UAAU,IACX;CACF,CAAC,EAEI,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;EAAU,CAAC,EAAE,EAAU;CAC9D,UAZiB,MAA+C;AAGlE,EAFA,IAAU,EAAM,EAEX,EAAM,oBACT,KAAW;;CASD;CACV,GAAI;WALN,CAOG,KAAQ,kBAAC,GAAD,EAAM,WAAW,EAAiB,EAAE,aAAU,CAAC,EAAI,CAAA,EAC5D,kBAAC,QAAD;EAAM,WAAW,EAAiB,EAAE,aAAU,CAAC;YAAG;EAAa,CAAA,CACxD"}

package/dist/v1/cta-button.js

@@ -0,0 +1,62 @@
+"use client";
+import { t as e } from "../TailwindUtil-aZk2bbTo.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as i from "react";
+import { cva as a } from "class-variance-authority";
+//#region src/components/v1/cta-button/CTAButton.tsx
+var o = a("flex flex-row items-center justify-center gap-1 shadow-none duration-200 transition-all", {
+	variants: {
+		hierarchy: {
+			primary: "bg-surface-primary-accent hover:bg-surface-primary-accent-pressed text-text-prominent-neutral-1",
+			secondary: "bg-surface-secondary-accent hover:bg-surface-secondary-accent-pressed text-text-prominent-accent-2",
+			tertiary: "bg-background-base-neutral-1 hover:bg-surface-tertiary-accent-pressed border-border-prominent-accent border text-text-prominent-accent-1"
+		},
+		size: {
+			large: "h-14 px-4 py-4 gap-1 text-title-18-medium rounded-[10px]",
+			medium: "h-[46px] px-4 py-3 gap-1 text-body-16-medium rounded-[8px]",
+			small: "h-10 px-3 py-2 gap-1 text-body-16-medium rounded-[6px]"
+		}
+	},
+	defaultVariants: {
+		hierarchy: "primary",
+		size: "large"
+	}
+}), s = a("shrink-0", {
+	variants: {
+		hierarchy: {
+			primary: "text-icon-base-neutral-1",
+			secondary: "text-icon-prominent-accent-2",
+			tertiary: "text-icon-prominent-accent-1"
+		},
+		size: {
+			large: "size-6",
+			medium: "size-[22px]",
+			small: "size-5"
+		}
+	},
+	defaultVariants: {
+		hierarchy: "primary",
+		size: "large"
+	}
+}), c = i.forwardRef(({ label: i, icon: a, hierarchy: c = "primary", size: l = "large", disabled: u = !1, className: d, type: f = "button", ...p }, m) => {
+	let h = /* @__PURE__ */ r(t, { children: [a && /* @__PURE__ */ n(a, { className: s({
+		hierarchy: c,
+		size: l
+	}) }), i] });
+	return /* @__PURE__ */ n("button", {
+		ref: m,
+		type: f,
+		className: e(o({
+			hierarchy: c,
+			size: l
+		}), "opacity-100 disabled:opacity-40 disabled:pointer-events-none", d),
+		disabled: u,
+		...p,
+		children: h
+	});
+});
+c.displayName = "CTAButton";
+//#endregion
+export { c as CTAButton };
+
+//# sourceMappingURL=cta-button.js.map

package/dist/v1/cta-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta-button.js","names":[],"sources":["../../src/components/v1/cta-button/CTAButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../../utils/TailwindUtil\";\n\nconst ctaButtonVariants = cva(\n  \"flex flex-row items-center justify-center gap-1 shadow-none duration-200 transition-all\",\n  {\n    variants: {\n      hierarchy: {\n        primary: \"bg-surface-primary-accent hover:bg-surface-primary-accent-pressed text-text-prominent-neutral-1\",\n        secondary: \"bg-surface-secondary-accent hover:bg-surface-secondary-accent-pressed text-text-prominent-accent-2\",\n        tertiary:\n          \"bg-background-base-neutral-1 hover:bg-surface-tertiary-accent-pressed border-border-prominent-accent border text-text-prominent-accent-1\",\n      },\n      size: {\n        large: \"h-14 px-4 py-4 gap-1 text-title-18-medium rounded-[10px]\",\n        medium: \"h-[46px] px-4 py-3 gap-1 text-body-16-medium rounded-[8px]\",\n        small: \"h-10 px-3 py-2 gap-1 text-body-16-medium rounded-[6px]\",\n      },\n    },\n    defaultVariants: {\n      hierarchy: \"primary\",\n      size: \"large\",\n    },\n  },\n);\n\nconst ctaButtonIconVariants = cva(\"shrink-0\", {\n  variants: {\n    hierarchy: {\n      primary: \"text-icon-base-neutral-1\",\n      secondary: \"text-icon-prominent-accent-2\",\n      tertiary: \"text-icon-prominent-accent-1\",\n    },\n    size: {\n      large: \"size-6\",\n      medium: \"size-[22px]\",\n      small: \"size-5\",\n    },\n  },\n  defaultVariants: {\n    hierarchy: \"primary\",\n    size: \"large\",\n  },\n});\n\nexport interface CTAButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n    VariantProps<typeof ctaButtonVariants> {\n  label: string | React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  className?: string;\n}\n\nconst CTAButton = React.forwardRef<HTMLButtonElement, CTAButtonProps>(\n  (\n    {\n      label,\n      icon: Icon,\n      hierarchy = \"primary\",\n      size = \"large\",\n      disabled = false,\n      className,\n      type = \"button\",\n      ...props\n    },\n    ref,\n  ) => {\n    const content = (\n      <>\n        {Icon && <Icon className={ctaButtonIconVariants({ hierarchy, size })} />}\n        {label}\n      </>\n    );\n\n    const buttonClassName = cn(\n      ctaButtonVariants({ hierarchy, size }),\n      \"opacity-100 disabled:opacity-40 disabled:pointer-events-none\",\n      className,\n    );\n\n    return (\n      <button ref={ref} type={type} className={buttonClassName} disabled={disabled} {...props}>\n        {content}\n      </button>\n    );\n  },\n);\n\nCTAButton.displayName = \"CTAButton\";\n\nexport { CTAButton };\n"],"mappings":";;;;;;AAOA,IAAM,IAAoB,EACxB,2FACA;CACE,UAAU;EACR,WAAW;GACT,SAAS;GACT,WAAW;GACX,UACE;GACH;EACD,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;GACR;EACF;CACD,iBAAiB;EACf,WAAW;EACX,MAAM;EACP;CACF,CACF,EAEK,IAAwB,EAAI,YAAY;CAC5C,UAAU;EACR,WAAW;GACT,SAAS;GACT,WAAW;GACX,UAAU;GACX;EACD,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;GACR;EACF;CACD,iBAAiB;EACf,WAAW;EACX,MAAM;EACP;CACF,CAAC,EAUI,IAAY,EAAM,YAEpB,EACE,UACA,MAAM,GACN,eAAY,WACZ,UAAO,SACP,cAAW,IACX,cACA,UAAO,UACP,GAAG,KAEL,MACG;CACH,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KAAQ,kBAAC,GAAD,EAAM,WAAW,EAAsB;EAAE;EAAW;EAAM,CAAC,EAAI,CAAA,EACvE,EACA,EAAA,CAAA;AASL,QACE,kBAAC,UAAD;EAAa;EAAW;EAAM,WAPR,EACtB,EAAkB;GAAE;GAAW;GAAM,CAAC,EACtC,gEACA,EACD;EAGqE;EAAU,GAAI;YAC/E;EACM,CAAA;EAGd;AAED,EAAU,cAAc"}