@petnow/ui 5.1.0 → 5.3.0

package/dist/tabs.js

@@ -0,0 +1,73 @@
+"use client";
+import { t as e } from "./TailwindUtil-DiNvXuNl.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useKeenSlider as r } from "keen-slider/react.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+//#region src/components/tabs/Tabs.tsx
+var s = ({ className: s, tabList: c, isCuratedcontent: l, unswipeableContent: u, defaultIndex: d = 0, onTabChange: f, disabled: p, allowScrollToSection: m = !0 }) => {
+	let [h, g] = o(d), _ = a(null), v = a(h), y = a(f);
+	i(() => {
+		v.current = h, y.current = f;
+	});
+	let [b, x] = r({
+		initial: d,
+		drag: !p,
+		dragEnded: (e) => {
+			let t = e.track.absToRel(e.animator.targetIdx ?? e.track.details.abs);
+			t !== v.current && (g(t), y.current?.(t));
+		}
+	}), S = (e) => {
+		e.current && window.scrollTo({
+			top: e.current.offsetTop - 50,
+			behavior: "smooth"
+		});
+	}, C = (e) => {
+		g(e), v.current = e, m && S(_), x.current?.moveToIdx(e), f?.(e);
+	};
+	return /* @__PURE__ */ n("div", {
+		ref: _,
+		className: "w-full",
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: e(s?.tab, `z-50 mb-[20px] flex w-full flex-col bg-white ${l && "sticky top-[50px]"}`),
+				children: [/* @__PURE__ */ t("div", {
+					className: "flex",
+					children: c.map((n, r) => /* @__PURE__ */ t("div", {
+						className: "flex flex-1 flex-col",
+						children: /* @__PURE__ */ t("button", {
+							className: e(s?.tabTitle, `cursor-pointer ${h === r ? "text-petnow-grey-30 text-label-large" : "text-petnow-grey-70 text-body-large disabled:opacity-40"}`),
+							onClick: () => C(r),
+							disabled: p,
+							children: n.displayName
+						})
+					}, n.key))
+				}), /* @__PURE__ */ t("div", {
+					className: e(s?.underline, `relative h-[2px] w-full ${p ? "bg-petnow-grey-70/40" : "bg-petnow-grey-70"}`),
+					children: /* @__PURE__ */ t("div", {
+						className: e(s?.selectedUnderline, "bg-petnow-grey-30 absolute h-[2px] transition-all duration-200"),
+						style: (() => {
+							let e = 100 / c.length;
+							return {
+								width: `${e}%`,
+								left: `${h * e}%`
+							};
+						})()
+					})
+				})]
+			}),
+			u,
+			/* @__PURE__ */ t("div", {
+				ref: b,
+				className: "keen-slider relative flex w-full touch-pan-y content-start overflow-hidden select-none [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none]",
+				children: c.map((e) => /* @__PURE__ */ t("div", {
+					className: "keen-slider__slide relative min-h-full w-full overflow-hidden",
+					children: e.content
+				}, e.key))
+			})
+		]
+	});
+};
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../src/components/tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\n// keen-slider has no `exports` map, so Node ESM needs the full file name. The CommonJS build loads\n// in Node ESM, Jest and bundlers alike; `react.es.js` breaks CommonJS test runners.\nimport { useKeenSlider } from \"keen-slider/react.js\";\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"../../utils/TailwindUtil\";\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  // keen-slider keeps the callbacks it was created with, so they read the latest values from refs.\n  const currentTabIndexRef = useRef(currentTabIndex);\n  const onTabChangeRef = useRef(onTabChange);\n\n  useEffect(() => {\n    currentTabIndexRef.current = currentTabIndex;\n    onTabChangeRef.current = onTabChange;\n  });\n\n  // When a swipe is released, keen-slider has already started snapping and `animator.targetIdx`\n  // holds the tab it lands on, so the tab changes once per swipe, as with react-swipeable-views.\n  const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({\n    initial: defaultIndex,\n    drag: !disabled,\n    dragEnded: (instance) => {\n      const index = instance.track.absToRel(instance.animator.targetIdx ?? instance.track.details.abs);\n      if (index === currentTabIndexRef.current) return;\n      setCurrentTabIndex(index);\n      onTabChangeRef.current?.(index);\n    },\n  });\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    currentTabIndexRef.current = index;\n    if (allowScrollToSection) scrollToSection(TabRef);\n    slider.current?.moveToIdx(index);\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      {/*\n        keen-slider.min.css as utilities, so the consumer's Tailwind build emits them and Node never\n        imports CSS. Tabs never sets the reverse or vertical options, so their rules are left out.\n      */}\n      <div\n        ref={sliderRef}\n        className=\"keen-slider relative flex w-full touch-pan-y content-start overflow-hidden select-none [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none]\"\n      >\n        {tabList.map((tab) => (\n          <div key={tab.key} className=\"keen-slider__slide relative min-h-full w-full overflow-hidden\">\n            {tab.content}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;;AA+BA,IAAM,KAA2B,EAC/B,cACA,YACA,qBACA,uBACA,kBAAe,GACf,gBACA,aACA,0BAAuB,SACT;CACd,IAAM,CAAC,GAAiB,KAAsB,EAAiB,CAAY,GACrE,IAAS,EAAuB,IAAI,GAEpC,IAAqB,EAAO,CAAe,GAC3C,IAAiB,EAAO,CAAW;CAEzC,QAAgB;EAEd,AADA,EAAmB,UAAU,GAC7B,EAAe,UAAU;CAC3B,CAAC;CAID,IAAM,CAAC,GAAW,KAAU,EAA8B;EACxD,SAAS;EACT,MAAM,CAAC;EACP,YAAY,MAAa;GACvB,IAAM,IAAQ,EAAS,MAAM,SAAS,EAAS,SAAS,aAAa,EAAS,MAAM,QAAQ,GAAG;GAC3F,MAAU,EAAmB,YACjC,EAAmB,CAAK,GACxB,EAAe,UAAU,CAAK;EAChC;CACF,CAAC,GAEK,KAAmB,MAAuD;EAC9E,AAAI,EAAW,WACb,OAAO,SAAS;GACd,KAAK,EAAW,QAAQ,YAAY;GACpC,UAAU;EACZ,CAAC;CAEL,GAEM,KAAkB,MAAkB;EAKxC,AAJA,EAAmB,CAAK,GACxB,EAAmB,UAAU,GACzB,KAAsB,EAAgB,CAAM,GAChD,EAAO,SAAS,UAAU,CAAK,GAC/B,IAAc,CAAK;CACrB;CAWA,OACE,kBAAC,OAAD;EAAK,KAAK;EAAQ,WAAU;YAA5B;GACE,kBAAC,OAAD;IACE,WAAW,EACT,GAAW,KACX,gDAAgD,KAAoB,qBACtE;cAJF,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,2DAER;OACA,eAAe,EAAe,CAAK;OACzB;iBAET,EAAI;MACC,CAAA;KACL,GAfK,EAAI,GAeT,CACN;IACE,CAAA,GACL,kBAAC,OAAD;KACE,WAAW,EACT,GAAW,WACX,2BAA2B,IAAW,yBAAyB,qBACjE;eAEA,kBAAC,OAAD;MACE,WAAW,EACT,GAAW,mBACX,gEACF;MACA,cAhDmB;OAE3B,IAAM,IAAe,MADF,EAAQ;OAE3B,OAAO;QACL,OAAO,GAAG,EAAa;QACvB,MAAM,GAAG,IAAkB,EAAa;OAC1C;MACF,EAyCiB,CAAe;KACvB,CAAA;IACE,CAAA,CACF;;GAEJ;GAMD,kBAAC,OAAD;IACE,KAAK;IACL,WAAU;cAET,EAAQ,KAAK,MACZ,kBAAC,OAAD;KAAmB,WAAU;eAC1B,EAAI;IACF,GAFK,EAAI,GAET,CACN;GACE,CAAA;EACF;;AAET"}

package/dist/text-field.js

@@ -0,0 +1,252 @@
+"use client";
+import { t as e } from "./TailwindUtil-DiNvXuNl.js";
+import { CTAButton as t } from "./cta-button.js";
+import { CancelFilledIcon as n } from "./icons/action/cancel-filled.js";
+import { ChevronLeftIcon as r } from "./icons/action/chevron-left.js";
+import { i, n as a } from "./fieldStyles-DyZu__hI.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import * as c from "react";
+import { cva as l } from "class-variance-authority";
+//#region src/components/text-field/TextField.tsx
+var u = c.forwardRef(({ onChange: t, subtitle: r, isRequired: l = !1, assistiveText: u, errorText: d, disabled: f = !1, multiLine: p = !1, className: m, rightElement: h, showCounter: g = !1, value: _, maxLength: v, size: y = "large", ...b }, x) => {
+	let S = !!d, C = c.useRef(null);
+	c.useImperativeHandle(x, () => C.current);
+	let w = c.useCallback(() => {
+		C.current?.focus();
+	}, []), T = (typeof _ == "string" ? _ : "").length, E = b, D = b, O = y === "large" ? "text-title-20-regular" : "text-body-16-regular", k = y === "large" ? "text-title-18-bold" : "text-title-14-bold", A = y === "large" ? "text-body-16-regular" : "text-caption-12-medium";
+	return /* @__PURE__ */ s("div", {
+		className: e("flex flex-col gap-2", m),
+		children: [
+			r && /* @__PURE__ */ s("span", {
+				className: e(k, "text-text-base-neutral-5"),
+				children: [r, l && /* @__PURE__ */ o("span", {
+					className: "text-text-prominent-accent-1",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				onClick: f ? void 0 : w,
+				className: e("group overflow-hidden", a({
+					size: y,
+					disabled: f,
+					hasError: S
+				}), !f && !S && "focus-within:border-border-base-neutral-4", p && "h-[120px] items-start"),
+				children: [
+					p ? /* @__PURE__ */ o("textarea", {
+						...D,
+						onChange: t,
+						ref: C,
+						value: _,
+						maxLength: v,
+						disabled: f,
+						className: e("text-text-base-neutral-5 placeholder:text-text-base-neutral-2 h-full min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none", O, "resize-none overflow-y-auto")
+					}) : /* @__PURE__ */ o("input", {
+						...E,
+						onChange: t,
+						ref: C,
+						value: _,
+						maxLength: v,
+						disabled: f,
+						className: e("text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none", O, "overflow-hidden text-ellipsis whitespace-nowrap")
+					}),
+					h && /* @__PURE__ */ o("div", {
+						className: "shrink-0",
+						children: h
+					}),
+					/* @__PURE__ */ o("button", {
+						type: "button",
+						onClick: () => t && t({ target: { value: "" } }),
+						tabIndex: -1,
+						disabled: f,
+						className: e("hidden shrink-0", {
+							flex: S,
+							"group-focus-within:flex": !f && T > 0
+						}),
+						children: /* @__PURE__ */ o(n, { className: "text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer" })
+					})
+				]
+			}),
+			(u || d || v && g) && /* @__PURE__ */ s("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [(u || d) && /* @__PURE__ */ o("span", {
+					className: e(A, i({
+						size: y,
+						hasError: S
+					})),
+					children: d || u
+				}), v && g && /* @__PURE__ */ s("span", {
+					className: e("ml-auto", A, i({
+						size: y,
+						hasError: S
+					})),
+					children: [
+						T,
+						"/",
+						v
+					]
+				})]
+			})
+		]
+	});
+});
+u.displayName = "TextFieldNormal";
+var d = l("flex items-center justify-between rounded-[4px] bg-surface-base-neutral-2 border transition-colors duration-200", {
+	variants: {
+		size: {
+			large: "gap-2 p-[15px] min-h-[56px]",
+			small: "gap-3 p-[11px] min-h-[48px]"
+		},
+		hasError: {
+			true: "border-border-prominent-error",
+			false: "border-transparent"
+		},
+		disabled: {
+			true: "opacity-50",
+			false: ""
+		}
+	},
+	defaultVariants: { size: "large" }
+}), f = ({ label: t, placeholder: n, value: a, isRequired: c = !1, disabled: l = !1, assistiveText: u, errorText: f, onPress: p, className: m, size: h = "large" }) => {
+	let g = !!f, _ = h === "large" ? "text-title-18-bold" : "text-title-14-bold", v = h === "large" ? "text-title-20-regular" : "text-body-16-regular";
+	return /* @__PURE__ */ s("div", {
+		className: e("flex w-full flex-col gap-2", m),
+		children: [
+			t && /* @__PURE__ */ s("div", {
+				className: "flex items-start",
+				children: [/* @__PURE__ */ o("span", {
+					className: e(_, "text-text-base-neutral-5"),
+					children: t
+				}), c && /* @__PURE__ */ o("span", {
+					className: e(_, "text-text-prominent-accent-1"),
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				className: d({
+					size: h,
+					hasError: g,
+					disabled: l
+				}),
+				onClick: p,
+				disabled: l,
+				children: [/* @__PURE__ */ o("span", {
+					className: e(v, "flex-1", a ? "text-text-base-neutral-5" : "text-text-base-neutral-2"),
+					style: {
+						textAlign: "left",
+						overflow: "hidden",
+						textOverflow: "ellipsis"
+					},
+					children: a || n
+				}), /* @__PURE__ */ o(r, { className: "text-icon-base-neutral-3 rotate-270" })]
+			}),
+			(u || f) && /* @__PURE__ */ o("div", {
+				className: "flex items-start gap-2",
+				children: /* @__PURE__ */ o("span", {
+					className: i({
+						size: h,
+						hasError: g
+					}),
+					children: f || u
+				})
+			})
+		]
+	});
+}, p = c.forwardRef(({ onChange: r, subtitle: l, isRequired: u = !1, assistiveText: d, errorText: f, disabled: p = !1, multiLine: m = !1, className: h, showCounter: g = !1, value: _, maxLength: v, size: y = "large", fieldRightElement: b, buttonText: x, onButtonClick: S, buttonDisabled: C = !1, ...w }, T) => {
+	let E = !!f, D = c.useRef(null);
+	c.useImperativeHandle(T, () => D.current);
+	let O = c.useCallback(() => {
+		D.current?.focus();
+	}, []), k = (typeof _ == "string" ? _ : "").length, A = w, j = w, M = y === "large" ? "text-title-20-regular" : "text-body-16-regular", N = y === "large" ? "text-title-18-bold" : "text-title-14-bold", P = y === "large" ? "text-body-16-regular" : "text-caption-12-medium";
+	return /* @__PURE__ */ s("div", {
+		className: e("flex flex-col gap-2", h),
+		children: [
+			l && /* @__PURE__ */ s("span", {
+				className: e(N, "text-text-base-neutral-5"),
+				children: [l, u && /* @__PURE__ */ o("span", {
+					className: "text-text-prominent-accent-1",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ s("div", {
+					onClick: p ? void 0 : O,
+					className: e("group flex-1 overflow-hidden", a({
+						size: y,
+						disabled: p,
+						hasError: E
+					}), !p && !E && "focus-within:border-border-base-neutral-4", m && "h-[120px] items-start"),
+					children: [
+						m ? /* @__PURE__ */ o("textarea", {
+							...j,
+							onChange: r,
+							ref: D,
+							value: _,
+							maxLength: v,
+							disabled: p,
+							className: e("text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none", M, "resize-none overflow-y-auto")
+						}) : /* @__PURE__ */ o("input", {
+							...A,
+							onChange: r,
+							ref: D,
+							value: _,
+							maxLength: v,
+							disabled: p,
+							className: e("text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none", M, "overflow-hidden text-ellipsis whitespace-nowrap")
+						}),
+						b && /* @__PURE__ */ o("div", {
+							className: "shrink-0",
+							children: b
+						}),
+						/* @__PURE__ */ o("button", {
+							type: "button",
+							onClick: () => r && r({ target: { value: "" } }),
+							tabIndex: -1,
+							disabled: p,
+							className: e("hidden shrink-0", {
+								flex: E,
+								"group-focus-within:flex": !p && k > 0
+							}),
+							children: /* @__PURE__ */ o(n, { className: "text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer" })
+						})
+					]
+				}), /* @__PURE__ */ o("div", {
+					className: "shrink-0",
+					children: /* @__PURE__ */ o(t, {
+						label: x,
+						onClick: S,
+						size: "medium",
+						hierarchy: "tertiary",
+						disabled: C || p
+					})
+				})]
+			}),
+			(d || f || v && g) && /* @__PURE__ */ s("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [(d || f) && /* @__PURE__ */ o("span", {
+					className: e(P, i({
+						size: y,
+						hasError: E
+					})),
+					children: f || d
+				}), v && g && /* @__PURE__ */ s("span", {
+					className: e("ml-auto", P, i({
+						size: y,
+						hasError: E
+					})),
+					children: [
+						k,
+						"/",
+						v
+					]
+				})]
+			})
+		]
+	});
+});
+p.displayName = "TextFieldWithButton";
+//#endregion
+export { u as TextFieldNormal, f as TextFieldSelect, p as TextFieldWithButton };
+
+//# sourceMappingURL=text-field.js.map

package/dist/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","names":[],"sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { CTAButton } from \"../cta-button/CTAButton\";\nimport { CancelFilledIcon } from \"../icons/action/CancelFilledIcon\";\nimport { ChevronLeftIcon } from \"../icons/action/ChevronLeftIcon\";\n\nimport {\n  fieldContainerVariants as textFieldNormalContainerVariants,\n  fieldMessageVariants as textFieldAssistiveAreaVariants,\n} from \"@/components/ui/fieldStyles\";\nimport { cn } from \"@/utils/TailwindUtil\";\n\ninterface TextFieldNormalProps extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, \"size\"> {\n  subtitle?: string;\n  isRequired?: boolean;\n  assistiveText?: string | React.ReactNode;\n  errorText?: string;\n  disabled?: boolean;\n  multiLine?: boolean;\n  className?: string;\n  rightElement?: React.ReactNode;\n  showCounter?: boolean;\n  size?: \"large\" | \"small\";\n}\n\nconst TextFieldNormal = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextFieldNormalProps>(\n  (\n    {\n      onChange,\n      subtitle,\n      isRequired = false,\n      assistiveText,\n      errorText,\n      disabled = false,\n      multiLine = false,\n      className,\n      rightElement,\n      showCounter = false,\n      value,\n      maxLength,\n      size = \"large\",\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const hasError = !!errorText;\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement | HTMLTextAreaElement);\n\n    const handleContainerClick = React.useCallback(() => {\n      inputRef.current?.focus();\n    }, []);\n\n    const stringValue = typeof value === \"string\" ? value : \"\";\n    const currentLength = stringValue.length;\n\n    const inputPropsForInput = inputProps as React.ComponentPropsWithoutRef<\"input\">;\n    const inputPropsForTextarea = inputProps as React.ComponentPropsWithoutRef<\"textarea\">;\n\n    // 사이즈별 폰트 크기\n    const inputFontSize = size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n    const subtitleFontSize = size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\";\n    const assistiveFontSize = size === \"large\" ? \"text-body-16-regular\" : \"text-caption-12-medium\";\n\n    return (\n      <div className={cn(\"flex flex-col gap-2\", className)}>\n        {subtitle && (\n          <span className={cn(subtitleFontSize, \"text-text-base-neutral-5\")}>\n            {subtitle}\n            {isRequired && <span className=\"text-text-prominent-accent-1\">*</span>}\n          </span>\n        )}\n\n        <div\n          onClick={disabled ? undefined : handleContainerClick}\n          className={cn(\n            \"group overflow-hidden\",\n            textFieldNormalContainerVariants({ size, disabled, hasError }),\n            !disabled && !hasError && \"focus-within:border-border-base-neutral-4\",\n            multiLine && \"h-[120px] items-start\",\n          )}\n        >\n          {multiLine ? (\n            <textarea\n              {...inputPropsForTextarea}\n              onChange={onChange}\n              ref={inputRef as React.Ref<HTMLTextAreaElement>}\n              value={value}\n              maxLength={maxLength}\n              disabled={disabled}\n              className={cn(\n                \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 h-full min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                inputFontSize,\n                \"resize-none overflow-y-auto\",\n              )}\n            />\n          ) : (\n            <input\n              {...inputPropsForInput}\n              onChange={onChange}\n              ref={inputRef as React.Ref<HTMLInputElement>}\n              value={value}\n              maxLength={maxLength}\n              disabled={disabled}\n              className={cn(\n                \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                inputFontSize,\n                \"overflow-hidden text-ellipsis whitespace-nowrap\",\n              )}\n            />\n          )}\n\n          {rightElement && <div className=\"shrink-0\">{rightElement}</div>}\n\n          <button\n            type=\"button\"\n            onClick={() =>\n              onChange &&\n              onChange({ target: { value: \"\" } } as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)\n            }\n            tabIndex={-1}\n            disabled={disabled}\n            className={cn(\"hidden shrink-0\", {\n              flex: hasError,\n              \"group-focus-within:flex\": !disabled && currentLength > 0,\n            })}\n          >\n            <CancelFilledIcon className=\"text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer\" />\n          </button>\n        </div>\n\n        {(assistiveText || errorText || (maxLength && showCounter)) && (\n          <div className=\"flex items-center justify-between gap-2\">\n            {(assistiveText || errorText) && (\n              <span className={cn(assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {errorText || assistiveText}\n              </span>\n            )}\n            {maxLength && showCounter && (\n              <span className={cn(\"ml-auto\", assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {currentLength}/{maxLength}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nTextFieldNormal.displayName = \"TextFieldNormal\";\n\n// TextField Select 컴포넌트\nconst textFieldSelectVariants = cva(\n  \"flex items-center justify-between rounded-[4px] bg-surface-base-neutral-2 border transition-colors duration-200\",\n  {\n    variants: {\n      size: {\n        large: \"gap-2 p-[15px] min-h-[56px]\",\n        small: \"gap-3 p-[11px] min-h-[48px]\",\n      },\n      hasError: {\n        true: \"border-border-prominent-error\",\n        false: \"border-transparent\",\n      },\n      disabled: {\n        true: \"opacity-50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"large\",\n    },\n  },\n);\n\ninterface TextFieldSelectProps extends VariantProps<typeof textFieldSelectVariants> {\n  label?: string;\n  placeholder: string;\n  value?: string;\n  isRequired?: boolean;\n  disabled?: boolean;\n  assistiveText?: string | React.ReactNode;\n  errorText?: string;\n  onPress?: () => void;\n  className?: string;\n  size?: \"large\" | \"small\";\n}\n\nconst TextFieldSelect = ({\n  label,\n  placeholder,\n  value,\n  isRequired = false,\n  disabled = false,\n  assistiveText,\n  errorText,\n  onPress,\n  className,\n  size = \"large\",\n}: TextFieldSelectProps) => {\n  const hasError = !!errorText;\n\n  // 사이즈별 폰트 크기\n  const labelFontSize = size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\";\n  const valueFontSize = size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n\n  return (\n    <div className={cn(\"flex w-full flex-col gap-2\", className)}>\n      {/* Label with optional asterisk */}\n      {label && (\n        <div className=\"flex items-start\">\n          <span className={cn(labelFontSize, \"text-text-base-neutral-5\")}>{label}</span>\n          {isRequired && <span className={cn(labelFontSize, \"text-text-prominent-accent-1\")}>*</span>}\n        </div>\n      )}\n      {/* Select Field */}\n      <button\n        type=\"button\"\n        className={textFieldSelectVariants({ size, hasError, disabled })}\n        onClick={onPress}\n        disabled={disabled}\n      >\n        <span\n          className={cn(valueFontSize, \"flex-1\", value ? \"text-text-base-neutral-5\" : \"text-text-base-neutral-2\")}\n          style={{ textAlign: \"left\", overflow: \"hidden\", textOverflow: \"ellipsis\" }}\n        >\n          {value || placeholder}\n        </span>\n        <ChevronLeftIcon className=\"text-icon-base-neutral-3 rotate-270\" />\n      </button>\n      {/* Assistive/Error Text */}\n      {(assistiveText || errorText) && (\n        <div className=\"flex items-start gap-2\">\n          <span className={textFieldAssistiveAreaVariants({ size, hasError })}>{errorText || assistiveText}</span>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// TextField With Button 컴포넌트\ninterface TextFieldWithButtonProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, \"size\"> {\n  subtitle?: string;\n  isRequired?: boolean;\n  assistiveText?: string | React.ReactNode;\n  errorText?: string;\n  disabled?: boolean;\n  multiLine?: boolean;\n  className?: string;\n  showCounter?: boolean;\n  size?: \"large\" | \"small\";\n  fieldRightElement?: React.ReactNode;\n  buttonText: string;\n  onButtonClick: () => void;\n  buttonDisabled?: boolean;\n}\n\nconst TextFieldWithButton = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextFieldWithButtonProps>(\n  (\n    {\n      onChange,\n      subtitle,\n      isRequired = false,\n      assistiveText,\n      errorText,\n      disabled = false,\n      multiLine = false,\n      className,\n      showCounter = false,\n      value,\n      maxLength,\n      size = \"large\",\n      fieldRightElement,\n      buttonText,\n      onButtonClick,\n      buttonDisabled = false,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const hasError = !!errorText;\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement | HTMLTextAreaElement);\n\n    const handleContainerClick = React.useCallback(() => {\n      inputRef.current?.focus();\n    }, []);\n\n    const stringValue = typeof value === \"string\" ? value : \"\";\n    const currentLength = stringValue.length;\n\n    const inputPropsForInput = inputProps as React.ComponentPropsWithoutRef<\"input\">;\n    const inputPropsForTextarea = inputProps as React.ComponentPropsWithoutRef<\"textarea\">;\n\n    // 사이즈별 폰트 크기\n    const inputFontSize = size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n    const subtitleFontSize = size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\";\n    const assistiveFontSize = size === \"large\" ? \"text-body-16-regular\" : \"text-caption-12-medium\";\n\n    return (\n      <div className={cn(\"flex flex-col gap-2\", className)}>\n        {subtitle && (\n          <span className={cn(subtitleFontSize, \"text-text-base-neutral-5\")}>\n            {subtitle}\n            {isRequired && <span className=\"text-text-prominent-accent-1\">*</span>}\n          </span>\n        )}\n\n        <div className=\"flex items-center gap-2\">\n          <div\n            onClick={disabled ? undefined : handleContainerClick}\n            className={cn(\n              \"group flex-1 overflow-hidden\",\n              textFieldNormalContainerVariants({ size, disabled, hasError }),\n              !disabled && !hasError && \"focus-within:border-border-base-neutral-4\",\n              multiLine && \"h-[120px] items-start\",\n            )}\n          >\n            {multiLine ? (\n              <textarea\n                {...inputPropsForTextarea}\n                onChange={onChange}\n                ref={inputRef as React.Ref<HTMLTextAreaElement>}\n                value={value}\n                maxLength={maxLength}\n                disabled={disabled}\n                className={cn(\n                  \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                  inputFontSize,\n                  \"resize-none overflow-y-auto\",\n                )}\n              />\n            ) : (\n              <input\n                {...inputPropsForInput}\n                onChange={onChange}\n                ref={inputRef as React.Ref<HTMLInputElement>}\n                value={value}\n                maxLength={maxLength}\n                disabled={disabled}\n                className={cn(\n                  \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                  inputFontSize,\n                  \"overflow-hidden text-ellipsis whitespace-nowrap\",\n                )}\n              />\n            )}\n\n            {fieldRightElement && <div className=\"shrink-0\">{fieldRightElement}</div>}\n\n            <button\n              type=\"button\"\n              onClick={() =>\n                onChange &&\n                onChange({ target: { value: \"\" } } as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)\n              }\n              tabIndex={-1}\n              disabled={disabled}\n              className={cn(\"hidden shrink-0\", {\n                flex: hasError,\n                \"group-focus-within:flex\": !disabled && currentLength > 0,\n              })}\n            >\n              <CancelFilledIcon className=\"text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer\" />\n            </button>\n          </div>\n\n          <div className=\"shrink-0\">\n            <CTAButton\n              label={buttonText}\n              onClick={onButtonClick}\n              size=\"medium\"\n              hierarchy=\"tertiary\"\n              disabled={buttonDisabled || disabled}\n            />\n          </div>\n        </div>\n\n        {(assistiveText || errorText || (maxLength && showCounter)) && (\n          <div className=\"flex items-center justify-between gap-2\">\n            {(assistiveText || errorText) && (\n              <span className={cn(assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {errorText || assistiveText}\n              </span>\n            )}\n            {maxLength && showCounter && (\n              <span className={cn(\"ml-auto\", assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {currentLength}/{maxLength}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nTextFieldWithButton.displayName = \"TextFieldWithButton\";\n\nexport { TextFieldNormal, TextFieldSelect, TextFieldWithButton };\n"],"mappings":"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"}

package/dist/toggle.js

@@ -0,0 +1,21 @@
+"use client";
+import { t as e } from "./TailwindUtil-DiNvXuNl.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/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-surface-base-neutral-4 peer-checked:bg-surface-primary-accent 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/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","names":[],"sources":["../src/components/toggle/Toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { 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          // TODO(PROD-662): 그림자(shadow) 토큰이 없어 기존 값을 유지한다. 토큰 추가 후 교체.\n          // eslint-disable-next-line design-tokens/no-hardcoded-color\n          \"bg-surface-base-neutral-4 peer-checked:bg-surface-primary-accent 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":";;;;AAaA,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;CACX,CAAA,GACD,kBAAC,OAAD,EACE,WAAW,EACT,GAGA,4aACA,KAAY,+BACd,EACD,CAAA,CACI"}

package/dist/v0/checkbox.js

@@ -1,38 +1 @@
-"use client";
-import { t as e } from "../TailwindUtil-DiNvXuNl.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, ...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
+export { default } from "../checkbox.js";

package/dist/v0/radio.js

@@ -1,17 +1 @@
-"use client";
-import { t as e } from "../TailwindUtil-DiNvXuNl.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", n),
-	onChange: a
-});
-//#endregion
-export { n as default };
-
-//# sourceMappingURL=radio.js.map
+export { default } from "../radio.js";

package/dist/v0/tabs.js

@@ -1,73 +1 @@
-"use client";
-import { t as e } from "../TailwindUtil-DiNvXuNl.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useKeenSlider as r } from "keen-slider/react.js";
-import { useEffect as i, useRef as a, useState as o } from "react";
-//#region src/components/v0/tabs/Tabs.tsx
-var s = ({ className: s, tabList: c, isCuratedcontent: l, unswipeableContent: u, defaultIndex: d = 0, onTabChange: f, disabled: p, allowScrollToSection: m = !0 }) => {
-	let [h, g] = o(d), _ = a(null), v = a(h), y = a(f);
-	i(() => {
-		v.current = h, y.current = f;
-	});
-	let [b, x] = r({
-		initial: d,
-		drag: !p,
-		dragEnded: (e) => {
-			let t = e.track.absToRel(e.animator.targetIdx ?? e.track.details.abs);
-			t !== v.current && (g(t), y.current?.(t));
-		}
-	}), S = (e) => {
-		e.current && window.scrollTo({
-			top: e.current.offsetTop - 50,
-			behavior: "smooth"
-		});
-	}, C = (e) => {
-		g(e), v.current = e, m && S(_), x.current?.moveToIdx(e), f?.(e);
-	};
-	return /* @__PURE__ */ n("div", {
-		ref: _,
-		className: "w-full",
-		children: [
-			/* @__PURE__ */ n("div", {
-				className: e(s?.tab, `z-50 mb-[20px] flex w-full flex-col bg-white ${l && "sticky top-[50px]"}`),
-				children: [/* @__PURE__ */ t("div", {
-					className: "flex",
-					children: c.map((n, r) => /* @__PURE__ */ t("div", {
-						className: "flex flex-1 flex-col",
-						children: /* @__PURE__ */ t("button", {
-							className: e(s?.tabTitle, `cursor-pointer ${h === r ? "text-petnow-grey-30 text-label-large" : "text-petnow-grey-70 text-body-large disabled:opacity-40"}`),
-							onClick: () => C(r),
-							disabled: p,
-							children: n.displayName
-						})
-					}, n.key))
-				}), /* @__PURE__ */ t("div", {
-					className: e(s?.underline, `relative h-[2px] w-full ${p ? "bg-petnow-grey-70/40" : "bg-petnow-grey-70"}`),
-					children: /* @__PURE__ */ t("div", {
-						className: e(s?.selectedUnderline, "bg-petnow-grey-30 absolute h-[2px] transition-all duration-200"),
-						style: (() => {
-							let e = 100 / c.length;
-							return {
-								width: `${e}%`,
-								left: `${h * e}%`
-							};
-						})()
-					})
-				})]
-			}),
-			u,
-			/* @__PURE__ */ t("div", {
-				ref: b,
-				className: "keen-slider relative flex w-full touch-pan-y content-start overflow-hidden select-none [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none]",
-				children: c.map((e) => /* @__PURE__ */ t("div", {
-					className: "keen-slider__slide relative min-h-full w-full overflow-hidden",
-					children: e.content
-				}, e.key))
-			})
-		]
-	});
-};
-//#endregion
-export { s as default };
-
-//# sourceMappingURL=tabs.js.map
+export { default } from "../tabs.js";

package/dist/v0/toggle.js

@@ -1,21 +1 @@
-"use client";
-import { t as e } from "../TailwindUtil-DiNvXuNl.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-surface-base-neutral-4 peer-checked:bg-surface-primary-accent 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
+export { default } from "../toggle.js";