@petnow/ui 4.1.9 → 5.0.1

package/dist/v0/checkbox.js.map

@@ -1 +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,0cACF;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"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/components/v0/checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { 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":";;;;AAYA,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,0cACF;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/v0/radio.js

@@ -1,3 +1,4 @@
+"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
@@ -7,7 +8,7 @@ var n = ({ className: n, id: r, name: i, onChange: a, disabled: o, isChecked: s
 	checked: s,
 	id: r,
 	name: i,
-	className: e("petnowRadio size-[3.5vw]", n),
+	className: e("petnowRadio", n),
 	onChange: a
 });
 //#endregion

package/dist/v0/radio.js.map

@@ -1 +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,CAAS;CACzC;AACX,CAAA"}
+{"version":3,"file":"radio.js","names":[],"sources":["../../src/components/v0/radio/Radio.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 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\", className)}\n      onChange={onChange}\n    />\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;AAaA,IAAM,KAAS,EAAE,cAAW,OAAI,SAAM,aAAU,aAAU,mBAEtD,kBAAC,SAAD;CACE,MAAK;CACK;CACV,SAAS;CACL;CACE;CACN,WAAW,EAAG,eAAe,CAAS;CAC5B;AACX,CAAA"}

package/dist/v0/tabs.js

@@ -2,8 +2,7 @@
 import { t as e } from "../TailwindUtil-DiNvXuNl.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { useEffect as r, useRef as i, useState as a } from "react";
-import { useKeenSlider as o } from "keen-slider/react";
-import "keen-slider/keen-slider.min.css";
+import { useKeenSlider as o } from "keen-slider/react.js";
 //#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] = a(d), _ = i(null), v = i(h), y = i(f);
@@ -59,9 +58,9 @@ var s = ({ className: s, tabList: c, isCuratedcontent: l, unswipeableContent: u,
 			u,
 			/* @__PURE__ */ t("div", {
 				ref: b,
-				className: "keen-slider",
+				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",
+					className: "keen-slider__slide relative min-h-full w-full overflow-hidden",
 					children: e.content
 				}, e.key))
 			})

package/dist/v0/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/components/v0/tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\nimport { useKeenSlider } from \"keen-slider/react\";\n\nimport \"keen-slider/keen-slider.min.css\";\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      <div ref={sliderRef} className=\"keen-slider\">\n        {tabList.map((tab) => (\n          <div key={tab.key} className=\"keen-slider__slide\">\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;GAED,kBAAC,OAAD;IAAK,KAAK;IAAW,WAAU;cAC5B,EAAQ,KAAK,MACZ,kBAAC,OAAD;KAAmB,WAAU;eAC1B,EAAI;IACF,GAFK,EAAI,GAET,CACN;GACE,CAAA;EACF;;AAET"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/components/v0/tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\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\";\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/v0/toggle.js

@@ -1,3 +1,4 @@
+"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

package/dist/v0/toggle.js.map

@@ -1 +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-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":";;;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;CACX,CAAA,GACD,kBAAC,OAAD,EACE,WAAW,EACT,GACA,4aACA,KAAY,+BACd,EACD,CAAA,CACI"}
+{"version":3,"file":"toggle.js","names":[],"sources":["../../src/components/v0/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          \"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,GACA,4aACA,KAAY,+BACd,EACD,CAAA,CACI"}

package/dist/v1/popup.js

@@ -1,4 +1,4 @@
 "use client";
 import "./cta-button.js";
-import { t as e } from "../Popup-BCBW_e8Q.js";
+import { t as e } from "../Popup-B2Q-le-6.js";
 export { e as Popup };

package/docs/adr/0001-v5-consumer-owned-tailwind-and-no-global-leaks.md

@@ -0,0 +1,42 @@
+# 5.0.0: consumers own Tailwind, and the package stops leaking global styles
+
+In 4.x, every consumer repo has the same three imports: `@import "tailwindcss"`, `@import "@petnow/ui/tailwind.css"`, and `import "@petnow/ui/dist/index.css"`. That set imports Tailwind three times, which ships three copies of preflight and two of utilities:
+
+- `tailwind.css` itself runs `@import "tailwindcss"`. Inside the consumer's build this only duplicates preflight; utilities are still emitted once.
+- `dist/index.css` is built from `src/index.css`, which also imports Tailwind, so it ships a second, prebuilt preflight, theme, and utilities layer for every class the package repo uses.
+
+The second utilities copy breaks responsive variants whenever `dist/index.css` loads after the consumer's CSS. Both copies sit in the same `utilities` layer with equal specificity, so the later `.flex` beats `.md\:hidden` and `flex md:hidden` stays visible. The same happens to any responsive variant whose base class the package also uses (`flex-col md:flex-row`, `p-4 md:p-6`, …), and that set grows with every new component. Whether a consumer is affected depends on an undocumented import order: in October 2026 only petify-admin-console imported `dist/index.css` last.
+
+The package also forces global styles on every consumer:
+
+- an unlayered `*` rule for font-family, line-height and word-break, which beats any layered utility;
+- the TW3 border-color compatibility rule;
+- `* { border-border }`, `body`, and `html` base rules;
+- unlayered shadcn `:root` and `.dark` variables;
+- a `--color-black` override and a forced `dark` custom variant;
+- v1 ref palettes registered under Tailwind's default color names, so `bg-red-50` renders `#ff323e` and `bg-red-100` renders white;
+- a remote Pretendard CDN import.
+
+On top of that, the v0 and v1 palettes disagree on shared steps, for example `petnow-orange-95` and `petnow-main-95`.
+
+We fix all of this in **one breaking 5.0.0 release**. The main goal is to remove the traps consumers fall into. Internal cleanup goes in only as far as that goal needs:
+
+- **Consumers own Tailwind.** The package's CSS no longer imports `tailwindcss`. `tailwind.css` declares `@source` for the package's own `dist`, so the consumer's single Tailwind build generates the component classes. `dist/index.css` carries only non-Tailwind CSS.
+- **No global leaks.** The rules listed above are removed, or moved behind an explicit opt-in. The v1 `red`, `green`, `purple`, and `yellow` palettes stay as CSS variables but no longer map to `--color-*`. Fonts, shadcn variables, and dark-mode strategy belong to the consumer.
+- **One token source.** v0/v1 conflicts are reconciled, and v0 is marked deprecated.
+- **Cleanup the release needs:**
+  - remove unused runtime dependencies and Vite template leftovers;
+  - correct the README;
+  - make `tsc` pass;
+  - add a changelog and a 4.x → 5.0 migration guide.
+
+Out of scope: aligning tokens 1:1 with Figma, rewriting v0 components, and upgrading consumer repos. Each consumer repo stays on `^4` until it upgrades on its own schedule. petify-admin-console upgrades first (PROD-562), because its responsive layout work waits for this release.
+
+## Considered Options
+
+- **4.1.x patch with only the import fix.** Rejected. Every `^4` consumer would pick it up on its next lockfile update. Fixing the cascade changes how those repos render, for example responsive classes that were silently ignored start working. Each repo should take that change deliberately.
+- **5.0.0 with only the import fix, the rest in 6.0.0.** Rejected. Each major sends every consumer through a visual regression check, so one breaking release costs consumers less than two.
+- **Swap the import order in affected consumers** (import `dist/index.css` before the consumer's CSS). Rejected as the fix, though it is a valid stopgap for a consumer that cannot wait. It makes petify-admin-console behave like the other repos, but the correctness of every consumer would still hinge on an undocumented import order, and it does not touch the unlayered `*` rule, which ignores `leading-*`, `font-*`, and `break-*` utilities in every consumer regardless of order.
+- **Fix it in each consumer instead** (drop the consumer's own Tailwind import, or copy the package tokens locally). Rejected. It leaves the trap in the package for every other repo, and copied tokens drift.
+
+Tracking: Jira PROD-556 (epic), PROD-557–PROD-561. Investigation of why only petify-admin-console was affected: Confluence "2026-10-20 Petify 콘솔에서만 반응형 클래스가 무시된 원인 — @petnow/ui CSS import 순서" (https://petnow.atlassian.net/wiki/spaces/PS/pages/1722384387).

package/docs/migration/v4-to-v5.md

@@ -0,0 +1,209 @@
+# 4.x → 5.0 마이그레이션 가이드
+
+5.0은 패키지가 Tailwind와 전역 스타일을 소비 레포에 주입하던 것을 멈춘 릴리스다. 배경은
+[ADR 0001](../adr/0001-v5-consumer-owned-tailwind-and-no-global-leaks.md), 바뀐 항목 전체는
+[CHANGELOG](../../CHANGELOG.md)를 본다.
+
+올린 뒤에는 화면이 바뀐다. 4.x에서 조용히 무시되던 반응형 클래스가 동작하기 시작하고, 패키지가 깔아 주던
+폰트·줄 간격·테두리 색이 빠진다. 아래 순서대로 고치고 주요 화면을 눈으로 확인한다.
+
+## 0. Tailwind CSS v4.1 이상
+
+`tailwindcss`가 `peerDependencies`(`^4.1.0`)가 됐다. 패키지 컴포넌트 클래스를 소비 레포의 Tailwind가 만들기
+때문이다. Tailwind가 없거나 v3인 레포는 v4.1 이상을 먼저 설치한다.
+
+`engines`는 빠졌다. 4.x는 `node: >=22.13.0 <23`이라 Node 24 레포에서 경고가 떴지만, 5.0은 소비 레포의 Node
+버전을 제한하지 않는다.
+
+## 1. CSS import 정리
+
+4.x에서는 세 가지를 함께 import했다.
+
+```css
+/* globals.css (4.x) */
+@import "tailwindcss";
+@import "@petnow/ui/tailwind.css";
+```
+
+```tsx
+// layout.tsx (4.x)
+import "@petnow/ui/dist/index.css";
+```
+
+5.0에서는 Tailwind를 소비 레포가 **한 번만** import하고, 그 뒤에 `@petnow/ui/tailwind.css`를 둔다.
+
+```css
+/* globals.css (5.0) */
+@import "tailwindcss";
+@import "@petnow/ui/tailwind.css";
+```
+
+- `@import "tailwindcss"`가 `@petnow/ui/tailwind.css`보다 **앞에** 있는지 확인한다. 패키지 CSS는 더 이상
+  Tailwind를 불러오지 않는다.
+- `@petnow/ui/tailwind.css`는 `@source "./dist/**/*.js"`를 선언한다. 그래서 소비 레포의 Tailwind 빌드가 패키지
+  컴포넌트 클래스를 만든다. 소비 레포에서 따로 `@source "../node_modules/@petnow/ui/dist"` 같은 줄을 넣었다면
+  지운다.
+- `@petnow/ui/dist/index.css`는 이제 Tailwind 결과물이 아니라 아래 클래스용 일반 CSS만 담는다. 이 중 하나라도
+  쓰면 import를 남기고, 하나도 안 쓰면 지운다. 규칙은 `components` 레이어에 있어서 소비 레포의 utility가
+  이긴다(4.x에서는 레이어 밖이라 utility로 덮을 수 없었다). import 위치는 소비 레포 CSS 앞이든 뒤든 상관없다.
+  - `Radio`(v0) — `.petnowRadio`. 크기는 4.x와 같은 20px이다. 4.x에서 `className`으로 준 크기·색이 무시되던
+    곳은 5.0에서 적용되니 확인한다.
+  - `.scrollbar`, `.popup-scrollbar`
+  - `.ja-break-all`, `.global-break-all`
+- react-datepicker 스타일은 패키지에서 빠졌다. react-datepicker를 쓰면 `react-datepicker/dist/react-datepicker.css`를
+  직접 import하고, 필요한 덮어쓰기는 소비 레포에 둔다.
+
+## 2. 폰트를 직접 로드
+
+패키지가 하던 Pretendard CDN import와 `*`의 `font-family` 지정이 빠졌다. 소비 레포에서 폰트를 로드하고
+`--font-sans`를 정한다.
+
+```css
+@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css") layer(base);
+@import "tailwindcss";
+@import "@petnow/ui/tailwind.css";
+
+@theme {
+  --font-sans:
+    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue",
+    "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", sans-serif;
+}
+```
+
+Next.js에서 `next/font`로 로드하고 있다면 그 변수를 `--font-sans`에 연결하면 된다.
+
+## 3. 줄 간격과 줄바꿈 확인
+
+4.x는 레이어 밖 `*` 규칙으로 모든 요소에 `line-height: normal`과 `word-break: keep-all`을 강제했다. 이 규칙은
+소비 레포의 `leading-*`를 이겼다. 5.0에서는 Tailwind 기본값(`line-height: 1.5`, `word-break: normal`)이 적용된다.
+
+- 4.x와 같은 줄 간격·줄바꿈을 기본값으로 두려면 소비 레포의 base에 직접 넣는다. 4.x처럼 `*`에 레이어 없이 걸지
+  말고 `html`에 걸어 상속시킨다. 그래야 `leading-*`, `break-*`가 이긴다.
+
+  ```css
+  @layer base {
+    html {
+      line-height: normal;
+      word-break: keep-all;
+    }
+  }
+  ```
+
+- 줄 간격이 달라져 높이가 바뀐 곳은 `leading-*`를 명시한다. 4.x에서 `leading-*`가 안 먹어서 넣어 둔 우회 코드가
+  있다면 이제 지워도 된다.
+
+## 4. shadcn 변수와 dark variant를 직접 정의
+
+패키지가 깔던 shadcn 변수(`--background`, `--foreground`, `--primary`, `--border`, `--radius`, `--chart-*`,
+`--sidebar-*` …), `.dark` 블록, `@theme inline` 매핑, `@custom-variant dark`가 모두 빠졌다.
+
+- shadcn 컴포넌트를 쓰는 레포는 `npx shadcn init`이 만드는 `:root` / `.dark` 변수와 `@theme inline` 블록을
+  소비 레포 CSS에 둔다.
+- `.dark` 클래스로 다크 모드를 켜는 레포는 `@custom-variant dark (&:is(.dark *));`를 직접 선언한다. 선언하지
+  않으면 Tailwind 기본값(`prefers-color-scheme`)을 따른다.
+- `rounded-sm` ~ `rounded-4xl`이 패키지의 `--radius` 계산값에서 Tailwind 기본값으로 돌아온다. shadcn 변수를
+  직접 정의하면 그 `@theme inline`이 다시 덮는다.
+- `data-open:`, `data-closed:`, `data-checked:` 같은 variant는 `shadcn/tailwind.css`에서 왔다. 쓰고 있다면
+  소비 레포에서 `@import "shadcn/tailwind.css";`를 직접 한다.
+
+## 5. 테두리 색과 `black` 확인
+
+- Tailwind 3 호환 테두리 색 규칙(`gray-200`)과 `* { border-border }`가 빠졌다. 색 없이 `border`만 쓴 요소는
+  이제 `currentColor`로 그려진다. `border-*` 색 클래스를 명시한다.
+- `--color-black`이 `#2c2f34`에서 Tailwind 기본 `#000`으로 돌아온다. `bg-black`, `text-black`이 `#2c2f34`를
+  기대했다면 `bg-[#2c2f34]`처럼 값을 직접 쓴다. v1에는 같은 값의 토큰이 없다(가장 가까운 `neutral-grey-20`은
+  `#303439`).
+
+## 6. 반응형 표시 클래스 점검
+
+4.x에서는 utilities가 최대 세 벌 생겨, 뒤에 오는 `.flex`가 `.md\:hidden`을 덮었다. 5.0에서는 `flex md:hidden`
+같은 조합이 의도대로 동작한다.
+
+- `md:hidden`, `lg:flex`, `sm:block` 등 반응형 표시 클래스를 쓰는 화면을 각 breakpoint에서 확인한다.
+- 이 문제를 피하려고 넣어 둔 우회 규칙(별도 CSS, `!important`, JS로 숨기기)을 찾아 지운다.
+
+## 7. 색상 토큰
+
+5.0에서 색이 바뀌는 경로는 두 가지다. 둘 다 빌드 에러 없이 화면만 바뀌므로, 사용처를 찾아 하나씩 정한다.
+
+### 7.1 `red-*`·`green-*`·`purple-*`·`yellow-*` 유틸리티 매핑 삭제
+
+4.x는 v1 ref 팔레트를 Tailwind 기본 팔레트와 같은 이름(`red-50`, `red-100` …)으로 등록해서, 소비 레포의
+Tailwind 기본 색을 덮었다. 예를 들어 `bg-red-50`은 Tailwind의 연한 빨강이 아니라 `#ff323e`, `bg-red-100`은
+흰색이었다. 5.0은 이 매핑을 지웠다. CSS 변수(`--red-50` 등)와 시맨틱 컬러는 그대로 있다.
+
+- **50·100 단계는 조용히 바뀐다.** `red-50`, `red-100`처럼 Tailwind에도 있는 단계는 에러 없이 Tailwind 기본
+  색으로 돌아간다. 4.x에서 Petnow 색으로 쓰던 곳이 있으면 반드시 바꾼다.
+- **나머지 단계는 사라진다.** `red-10`, `red-95`처럼 v1에만 있던 단계는 클래스가 생성되지 않는다.
+- 사용처 찾기:
+
+  ```sh
+  grep -rnE '\b[a-z-]+-(red|green|purple|yellow)-(0|10|20|30|40|50|60|70|80|90|95|100)\b' . \
+    --include='*.ts' --include='*.tsx' --include='*.css' --exclude-dir=node_modules --exclude-dir=.next
+  ```
+
+- 바꾸는 방법(위에서부터 권장):
+  1. 시맨틱 컬러로 바꾼다. 예: `text-red-50` → `text-text-prominent-error`, `bg-red-95` → `bg-surface-base-critical-1`.
+  2. ref 값이 꼭 필요하면 CSS 변수를 직접 쓴다: `bg-(--red-95)`, `text-(--green-50)`.
+  3. Tailwind 기본 색을 의도하고 쓴 곳(`bg-red-50`을 연한 빨강으로 쓴 경우)은 그대로 두면 된다. 5.0에서 의도대로 보인다.
+
+  2번을 자주 쓴다면 소비 레포 CSS에 기본 팔레트와 겹치지 않는 이름으로 직접 매핑해도 된다.
+
+  ```css
+  @theme inline {
+    --color-pn-red-95: var(--red-95);
+  }
+  ```
+
+### 7.2 v0 토큰 값 변경
+
+v1에 같은 단계가 있는 v0 토큰은 v1 값으로 바뀌었다.
+
+| v0 토큰                                       | 4.x 값    | 5.0 값                       |
+| --------------------------------------------- | --------- | ---------------------------- |
+| `petnow-orange-95`, `petnow-orange-secondary` | `#ffeeea` | `petnow-main-95` (`#fff3f1`) |
+| `petnow-blue-95`, `petnow-blue-secondary`     | `#ecf3fc` | `petnow-sub-95` (`#ecf5ff`)  |
+| `petnow-red-50`, `petnow-red-primary`         | `#ff4055` | `--red-50` (`#ff323e`)       |
+| `petnow-red-95`                               | `#ffecf1` | `--red-95` (`#fff0f2`)       |
+| `petnow-green-50`, `petnow-green-primary`     | `#42d48e` | `--green-50` (`#2fc869`)     |
+| `petnow-green-95`                             | `#ecfbf4` | `--green-95` (`#e3ffee`)     |
+| `petnow-purple-95`                            | `#f7edfb` | `--purple-95` (`#f7eefc`)    |
+| `petnow-yellow-95`                            | `#fff8e0` | `--yellow-95` (`#fffbea`)    |
+
+- 사용처 찾기:
+
+  ```sh
+  grep -rnE 'petnow-(orange|blue)-(95|secondary)|petnow-(red|green)-(50|95|primary)|petnow-(purple|yellow)-95' . \
+    --include='*.ts' --include='*.tsx' --include='*.css' --exclude-dir=node_modules --exclude-dir=.next
+  ```
+
+- 사용처마다 정한다.
+  - **새 값을 받아들인다**: 코드는 그대로 둔다. 가능하면 이 기회에 7.3의 v1 토큰으로 옮긴다.
+  - **4.x 값을 유지해야 한다**: 값을 고정한다. 예: `bg-petnow-orange-95` → `bg-[#ffeeea]`. 디자인 확인 뒤
+    v1 토큰으로 옮기는 것을 후속 작업으로 남긴다.
+
+### 7.3 v0 토큰은 deprecated
+
+v0 토큰(`petnow-orange-*`, `petnow-blue-*`, `petnow-red-*`, `petnow-grey-*`, `text-display-large` 같은 v0
+타이포그래피)은 deprecated다. 5.x 동안은 남아 있지만 새 코드는 v1 토큰을 쓴다.
+
+| v0                              | v1                                                 |
+| ------------------------------- | -------------------------------------------------- |
+| `petnow-orange-<n>`             | `petnow-main-<n>`                                  |
+| `petnow-blue-<n>`               | `petnow-sub-<n>`                                   |
+| `petnow-red-<n>` 등             | 시맨틱 컬러, 또는 `bg-(--red-<n>)` (7.1)           |
+| `petnow-grey-<n>`               | `neutral-grey-<n>` (값이 다름)                     |
+| `text-label-large` 등 v0 타이포 | `text-title-16-bold` 등 v1 타이포 (줄 간격이 다름) |
+
+## 확인 체크리스트
+
+- [ ] `tailwindcss` v4.1 이상을 설치했다.
+- [ ] `@import "tailwindcss"`가 소비 레포 CSS에 한 번만, `@petnow/ui/tailwind.css`보다 앞에 있다.
+- [ ] 빌드한 CSS에서 `.flex{display:flex}`(또는 `.flex {`)가 한 번만 나온다.
+- [ ] `@petnow/ui/dist/index.css` import를 쓰는 클래스가 있을 때만 남겼다.
+- [ ] 폰트가 4.x와 같게 보인다.
+- [ ] shadcn 컴포넌트와 다크 모드가 동작한다(쓰는 경우).
+- [ ] 반응형 화면을 breakpoint별로 확인했고, 우회 규칙을 지웠다.
+- [ ] 7.1·7.2의 grep 결과를 하나씩 정리했다(시맨틱 컬러로 바꾸기, 새 값 받아들이기, 4.x 값 고정 중 하나).
+- [ ] `@petnow/ui` 컴포넌트(Badge, Chip, CTAButton, Popup, TextField, v0 컴포넌트)가 4.x와 같게 보인다.

package/package.json

@@ -1,36 +1,24 @@
 {
   "name": "@petnow/ui",
-  "version": "4.1.9",
+  "version": "5.0.1",
   "type": "module",
   "packageManager": "pnpm@11.1.3",
-  "engines": {
-    "node": ">=22.13.0 <23",
-    "pnpm": "11.1.3"
-  },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build && npm run tailwind",
-    "tailwind": "npx @tailwindcss/cli -i ./src/index.css -o ./dist/index.css --minify",
+    "build": "tsc && vite build && pnpm run build:css",
+    "build:css": "node -e \"require('fs').copyFileSync('src/styles/components.css', 'dist/index.css')\"",
+    "check:dist": "node scripts/check-dist-node.mjs",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --ext ts,tsx --fix",
-    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "format": "prettier . --check",
     "format:fix": "prettier . --write"
   },
   "dependencies": {
-    "@headlessui/react": "^2.2.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.4.0",
     "keen-slider": "^6.8.6",
-    "lucide-react": "^1.17.0",
     "radix-ui": "^1.4.3",
-    "react-datepicker": "^8.3.0",
-    "react-daum-postcode": "^4.0.0",
-    "react-icons": "^5.6.0",
-    "shadcn": "^4.11.0",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },
@@ -61,6 +49,7 @@
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.4.1",
     "jest-transformer-svg": "^2.1.0",
+    "magic-string": "^0.30.21",
     "postcss": "^8.5.10",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
@@ -75,10 +64,14 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.0"
   },
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -184,7 +177,10 @@
   "files": [
     "dist",
     "tailwind.css",
-    "petnow-design-system-v1.css"
+    "petnow-design-system-v1.css",
+    "CHANGELOG.md",
+    "docs/adr",
+    "docs/migration"
   ],
   "publishConfig": {
     "access": "public"

package/petnow-design-system-v1.css

@@ -1,30 +1,5 @@
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 63%;
-    --radius: 0.625rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-
     /* Ref Color */
 
     --petnow-main-0: #0a0b0c;
@@ -402,57 +377,9 @@
   --color-neutral-grey-95: var(--neutral-grey-95);
   --color-neutral-grey-100: var(--neutral-grey-100);
 
-  --color-red-0: var(--red-0);
-  --color-red-10: var(--red-10);
-  --color-red-20: var(--red-20);
-  --color-red-30: var(--red-30);
-  --color-red-40: var(--red-40);
-  --color-red-50: var(--red-50);
-  --color-red-60: var(--red-60);
-  --color-red-70: var(--red-70);
-  --color-red-80: var(--red-80);
-  --color-red-90: var(--red-90);
-  --color-red-95: var(--red-95);
-  --color-red-100: var(--red-100);
-
-  --color-purple-0: var(--purple-0);
-  --color-purple-10: var(--purple-10);
-  --color-purple-20: var(--purple-20);
-  --color-purple-30: var(--purple-30);
-  --color-purple-40: var(--purple-40);
-  --color-purple-50: var(--purple-50);
-  --color-purple-60: var(--purple-60);
-  --color-purple-70: var(--purple-70);
-  --color-purple-80: var(--purple-80);
-  --color-purple-90: var(--purple-90);
-  --color-purple-95: var(--purple-95);
-  --color-purple-100: var(--purple-100);
-
-  --color-green-0: var(--green-0);
-  --color-green-10: var(--green-10);
-  --color-green-20: var(--green-20);
-  --color-green-30: var(--green-30);
-  --color-green-40: var(--green-40);
-  --color-green-50: var(--green-50);
-  --color-green-60: var(--green-60);
-  --color-green-70: var(--green-70);
-  --color-green-80: var(--green-80);
-  --color-green-90: var(--green-90);
-  --color-green-95: var(--green-95);
-  --color-green-100: var(--green-100);
-
-  --color-yellow-0: var(--yellow-0);
-  --color-yellow-10: var(--yellow-10);
-  --color-yellow-20: var(--yellow-20);
-  --color-yellow-30: var(--yellow-30);
-  --color-yellow-40: var(--yellow-40);
-  --color-yellow-50: var(--yellow-50);
-  --color-yellow-60: var(--yellow-60);
-  --color-yellow-70: var(--yellow-70);
-  --color-yellow-80: var(--yellow-80);
-  --color-yellow-90: var(--yellow-90);
-  --color-yellow-95: var(--yellow-95);
-  --color-yellow-100: var(--yellow-100);
+  /* red, green, purple and yellow are not mapped to --color-*: their names would
+     override Tailwind's default palette (e.g. red-50, red-100) in consumer apps.
+     Use the semantic colors, or the raw vars, e.g. bg-(--red-95). */
 }
 
 /* Semantic tokens must be `inline`: utilities then reference the underlying