@petnow/ui 4.0.3 → 4.1.1

package/dist/Popup-xLjV_Cx7.js

@@ -0,0 +1,95 @@
+import { t as e } from "./TailwindUtil-aZk2bbTo.js";
+import { CTAButton as t } from "./v1/cta-button.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as i from "react";
+import { Dialog as a } from "radix-ui";
+//#region src/components/ui/dialog.tsx
+var o = a.Root;
+a.Trigger;
+var s = a.Portal;
+a.Close;
+var c = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Overlay, {
+	ref: i,
+	className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 duration-200", t),
+	...r
+}));
+c.displayName = a.Overlay.displayName;
+var l = i.forwardRef(({ className: t, ...i }, o) => /* @__PURE__ */ r(s, { children: [/* @__PURE__ */ n(c, {}), /* @__PURE__ */ n(a.Content, {
+	ref: o,
+	className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-6 shadow-lg duration-200 outline-none", t),
+	...i
+})] }));
+l.displayName = a.Content.displayName;
+var u = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Title, {
+	ref: i,
+	className: e("text-lg font-semibold", t),
+	...r
+}));
+u.displayName = a.Title.displayName;
+var d = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Description, {
+	ref: i,
+	className: e("text-muted-foreground text-sm", t),
+	...r
+}));
+d.displayName = a.Description.displayName;
+//#endregion
+//#region src/components/v1/popup/Popup.tsx
+var f = ({ isOpen: i, setIsOpen: a, onClose: s, title: c, description: f, content: p, confirm: m, cancel: h, preventEasyClose: g = !1, className: _ }) => {
+	let v = () => {
+		a(!1), s?.();
+	};
+	return /* @__PURE__ */ n(o, {
+		open: i,
+		onOpenChange: (e) => {
+			g && !e || (e || s?.(), a(e));
+		},
+		children: /* @__PURE__ */ r(l, {
+			onEscapeKeyDown: g ? (e) => e.preventDefault() : void 0,
+			onInteractOutside: g ? (e) => e.preventDefault() : void 0,
+			className: e("bg-surface-base-neutral-1 flex max-h-[440px] w-[300px] max-w-[300px] flex-col gap-4 overflow-hidden rounded-[16px] p-4", _),
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex w-full flex-col gap-2",
+				children: [
+					c && /* @__PURE__ */ n(u, {
+						className: "text-title-18-bold text-text-prominent-neutral-4",
+						children: c
+					}),
+					f && /* @__PURE__ */ n("div", {
+						className: "overflow-y-auto",
+						children: /* @__PURE__ */ n(d, {
+							className: "text-body-16-medium text-text-prominent-neutral-3",
+							children: f
+						})
+					}),
+					p && /* @__PURE__ */ n("div", {
+						className: "overflow-y-auto",
+						children: p
+					})
+				]
+			}), (m || h) && /* @__PURE__ */ r("div", {
+				className: "flex w-full flex-col gap-2",
+				children: [m && /* @__PURE__ */ n(t, {
+					label: m.label,
+					icon: m.icon,
+					size: "medium",
+					hierarchy: "primary",
+					onClick: ((e) => () => {
+						e?.onClick?.();
+					})(m)
+				}), h && /* @__PURE__ */ n(t, {
+					label: h.label,
+					icon: h.icon,
+					size: "medium",
+					hierarchy: "tertiary",
+					onClick: ((e) => () => {
+						e?.onClick?.(), v();
+					})(h)
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { f as t };
+
+//# sourceMappingURL=Popup-xLjV_Cx7.js.map

package/dist/Popup-xLjV_Cx7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup-xLjV_Cx7.js","names":[],"sources":["../src/components/ui/dialog.tsx","../src/components/v1/popup/Popup.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/TailwindUtil\";\n\nconst Dialog = DialogPrimitive.Root;\nconst DialogTrigger = DialogPrimitive.Trigger;\nconst DialogPortal = DialogPrimitive.Portal;\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 duration-200\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-6 shadow-lg duration-200 outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nfunction DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"flex flex-col gap-2\", className)} {...props} />;\n}\n\nfunction DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"flex flex-col gap-2 sm:flex-row sm:justify-end\", className)} {...props} />;\n}\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold\", className)} {...props} />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn(\"text-muted-foreground text-sm\", className)} {...props} />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../../../utils/TailwindUtil\";\nimport { CTAButton } from \"../cta-button/CTAButton\";\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"@/components/ui/dialog\";\n\ntype PopupAction = {\n  label: string | React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  onClick?: () => void;\n};\n\nexport interface PopupProps {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  onClose?: () => void;\n  title?: string | React.ReactNode;\n  description?: string | React.ReactNode;\n  content?: React.ReactNode;\n  confirm?: PopupAction;\n  cancel?: PopupAction;\n  preventEasyClose?: boolean;\n  className?: string;\n}\n\nconst Popup = ({\n  isOpen,\n  setIsOpen,\n  onClose,\n  title,\n  description,\n  content,\n  confirm,\n  cancel,\n  preventEasyClose = false,\n  className,\n}: PopupProps) => {\n  const handleClose = () => {\n    setIsOpen(false);\n    onClose?.();\n  };\n\n  const handleConfirmAction = (action?: PopupAction) => () => {\n    action?.onClick?.();\n  };\n\n  const handleCancelAction = (action?: PopupAction) => () => {\n    action?.onClick?.();\n    handleClose();\n  };\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (preventEasyClose && !nextOpen) {\n      return;\n    }\n\n    if (!nextOpen) {\n      onClose?.();\n    }\n\n    setIsOpen(nextOpen);\n  };\n\n  return (\n    <Dialog open={isOpen} onOpenChange={handleOpenChange}>\n      <DialogContent\n        onEscapeKeyDown={preventEasyClose ? (event) => event.preventDefault() : undefined}\n        onInteractOutside={preventEasyClose ? (event) => event.preventDefault() : undefined}\n        className={cn(\n          \"bg-surface-base-neutral-1 flex max-h-[440px] w-[300px] max-w-[300px] flex-col gap-4 overflow-hidden rounded-[16px] p-4\",\n          className,\n        )}\n      >\n        <div className=\"flex w-full flex-col gap-2\">\n          {title && <DialogTitle className=\"text-title-18-bold text-text-prominent-neutral-4\">{title}</DialogTitle>}\n          {description && (\n            <div className=\"overflow-y-auto\">\n              <DialogDescription className=\"text-body-16-medium text-text-prominent-neutral-3\">\n                {description}\n              </DialogDescription>\n            </div>\n          )}\n          {content && <div className=\"overflow-y-auto\">{content}</div>}\n        </div>\n        {(confirm || cancel) && (\n          <div className=\"flex w-full flex-col gap-2\">\n            {confirm && (\n              <CTAButton\n                label={confirm.label}\n                icon={confirm.icon}\n                size=\"medium\"\n                hierarchy=\"primary\"\n                onClick={handleConfirmAction(confirm)}\n              />\n            )}\n            {cancel && (\n              <CTAButton\n                label={cancel.label}\n                icon={cancel.icon}\n                size=\"medium\"\n                hierarchy=\"tertiary\"\n                onClick={handleCancelAction(cancel)}\n              />\n            )}\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport { Popup };\n"],"mappings":";;;;;;AAKA,IAAM,IAAS,EAAgB;AACT,EAAgB;AACtC,IAAM,IAAe,EAAgB;AACjB,EAAgB;AAEpC,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EACT,uKACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAiB,CAAA,EACjB,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EACT,gRACA,EACD;CACD,GAAI;CACJ,CAAA,CACW,EAAA,CAAA,CACf;AACF,EAAc,cAAc,EAAgB,QAAQ;AAUpD,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,OAAjB;CAA4B;CAAK,WAAW,EAAG,yBAAyB,EAAU;CAAE,GAAI;CAAS,CAAA,CACjG;AACF,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,aAAjB;CAAkC;CAAK,WAAW,EAAG,iCAAiC,EAAU;CAAE,GAAI;CAAS,CAAA,CAC/G;AACF,EAAkB,cAAc,EAAgB,YAAY;;;ACrC5D,IAAM,KAAS,EACb,WACA,cACA,YACA,UACA,gBACA,YACA,YACA,WACA,sBAAmB,IACnB,mBACgB;CAChB,IAAM,UAAoB;AAExB,EADA,EAAU,GAAM,EAChB,KAAW;;AAwBb,QACE,kBAAC,GAAD;EAAQ,MAAM;EAAQ,eAbE,MAAsB;AAC1C,QAAoB,CAAC,MAIpB,KACH,KAAW,EAGb,EAAU,EAAS;;YAKjB,kBAAC,GAAD;GACE,iBAAiB,KAAoB,MAAU,EAAM,gBAAgB,GAAG,KAAA;GACxE,mBAAmB,KAAoB,MAAU,EAAM,gBAAgB,GAAG,KAAA;GAC1E,WAAW,EACT,0HACA,EACD;aANH,CAQE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAS,kBAAC,GAAD;MAAa,WAAU;gBAAoD;MAAoB,CAAA;KACxG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAmB,WAAU;iBAC1B;OACiB,CAAA;MAChB,CAAA;KAEP,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAmB;MAAc,CAAA;KACxD;QACJ,KAAW,MACX,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,GAAD;KACE,OAAO,EAAQ;KACf,MAAM,EAAQ;KACd,MAAK;KACL,WAAU;KACV,WAlDe,YAA+B;AAC1D,SAAQ,WAAW;QAiDsB,EAAQ;KACrC,CAAA,EAEH,KACC,kBAAC,GAAD;KACE,OAAO,EAAO;KACd,MAAM,EAAO;KACb,MAAK;KACL,WAAU;KACV,WAvDc,YAA+B;AAEzD,MADA,GAAQ,WAAW,EACnB,GAAa;QAqD2B,EAAO;KACnC,CAAA,CAEA;MAEM;;EACT,CAAA"}

package/dist/TailwindUtil-aZk2bbTo.js

@@ -0,0 +1,71 @@
+import { clsx as e } from "clsx";
+import { extendTailwindMerge as t } from "tailwind-merge";
+//#region src/utils/TailwindUtil.ts
+var n = t({ extend: {
+	classGroups: { "font-style": [
+		"text-display-96-bold",
+		"text-display-96-medium",
+		"text-display-72-bold",
+		"text-display-72-medium",
+		"text-display-60-bold",
+		"text-display-60-medium",
+		"text-headline-48-bold",
+		"text-headline-48-medium",
+		"text-headline-48-regular",
+		"text-headline-42-bold",
+		"text-headline-42-medium",
+		"text-headline-42-regular",
+		"text-headline-36-bold",
+		"text-headline-36-medium",
+		"text-headline-36-regular",
+		"text-title-28-bold",
+		"text-title-28-medium",
+		"text-title-28-regular",
+		"text-title-24-bold",
+		"text-title-24-medium",
+		"text-title-24-regular",
+		"text-title-20-bold",
+		"text-title-20-medium",
+		"text-title-20-regular",
+		"text-title-18-bold",
+		"text-title-18-medium",
+		"text-title-18-regular",
+		"text-title-16-bold",
+		"text-title-14-bold",
+		"text-body-16-medium",
+		"text-body-16-regular",
+		"text-body-14-medium",
+		"text-body-14-regular",
+		"text-body-12-bold",
+		"text-caption-12-bold",
+		"text-caption-12-medium",
+		"text-caption-12-regular",
+		"text-caption-11-medium",
+		"text-caption-10-bold",
+		{ text: [
+			"display-large",
+			"display-medium",
+			"title-large",
+			"title-medium",
+			"title-small",
+			"label-large",
+			"label-medium",
+			"label-small",
+			"body-large",
+			"body-medium",
+			"body-small",
+			"caption-large",
+			"caption-medium",
+			"caption-small",
+			"badge"
+		] }
+	] },
+	conflictingClassGroups: { "font-style": ["font-size", "font-weight"] }
+} });
+function r(...t) {
+	return n(e(t));
+}
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=TailwindUtil-aZk2bbTo.js.map

package/dist/TailwindUtil-aZk2bbTo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TailwindUtil-aZk2bbTo.js","names":[],"sources":["../src/utils/TailwindUtil.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst customTwMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-style\": [\n        // Display\n        \"text-display-96-bold\",\n        \"text-display-96-medium\",\n        \"text-display-72-bold\",\n        \"text-display-72-medium\",\n        \"text-display-60-bold\",\n        \"text-display-60-medium\",\n        // Headline\n        \"text-headline-48-bold\",\n        \"text-headline-48-medium\",\n        \"text-headline-48-regular\",\n        \"text-headline-42-bold\",\n        \"text-headline-42-medium\",\n        \"text-headline-42-regular\",\n        \"text-headline-36-bold\",\n        \"text-headline-36-medium\",\n        \"text-headline-36-regular\",\n        // Title\n        \"text-title-28-bold\",\n        \"text-title-28-medium\",\n        \"text-title-28-regular\",\n        \"text-title-24-bold\",\n        \"text-title-24-medium\",\n        \"text-title-24-regular\",\n        \"text-title-20-bold\",\n        \"text-title-20-medium\",\n        \"text-title-20-regular\",\n        \"text-title-18-bold\",\n        \"text-title-18-medium\",\n        \"text-title-18-regular\",\n        \"text-title-16-bold\",\n        \"text-title-14-bold\",\n        // Body\n        \"text-body-16-medium\",\n        \"text-body-16-regular\",\n        \"text-body-14-medium\",\n        \"text-body-14-regular\",\n        \"text-body-12-bold\",\n        // Caption\n        \"text-caption-12-bold\",\n        \"text-caption-12-medium\",\n        \"text-caption-12-regular\",\n        \"text-caption-11-medium\",\n        \"text-caption-10-bold\",\n        {\n          text: [\n            \"display-large\",\n            \"display-medium\",\n            \"title-large\",\n            \"title-medium\",\n            \"title-small\",\n            \"label-large\",\n            \"label-medium\",\n            \"label-small\",\n            \"body-large\",\n            \"body-medium\",\n            \"body-small\",\n            \"caption-large\",\n            \"caption-medium\",\n            \"caption-small\",\n            \"badge\",\n          ],\n        },\n      ],\n    },\n    conflictingClassGroups: {\n      \"font-style\": [\"font-size\", \"font-weight\"], // 예시: 폰트 크기, 굵기와 충돌 가능성 명시\n      // 기존 색상 관련 그룹과의 충돌을 피하기 위해 textColor 그룹을 명시적으로 선언하거나,\n      // text-label-large가 색상과 관련 없음을 tailwind-merge에 알려야 합니다.\n      // 만약 text-label-large가 특정 색상을 포함하지 않는다면,\n      // textColor 그룹과의 충돌을 정의할 필요는 없을 수 있습니다.\n      // 하지만, 만약 text-red-500과 같은 클래스와 충돌한다면,\n      // textColor 그룹과의 관계를 명확히 해야 합니다.\n      // 가장 간단한 방법은 text-label-large를 textColor 그룹에서 제외하는 것입니다.\n      // 또는, text-label-large가 독립적인 그룹임을 명시합니다.\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return customTwMerge(clsx(inputs));\n}\n"],"mappings":";;;AAGA,IAAM,IAAgB,EAAoB,EACxC,QAAQ;CACN,aAAa,EACX,cAAc;EAEZ;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,EACE,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF,EACF;CACD,wBAAwB,EACtB,cAAc,CAAC,aAAa,cAAc,EAS3C;CACF,EACF,CAAC;AAEF,SAAgB,EAAG,GAAG,GAAsB;AAC1C,QAAO,EAAc,EAAK,EAAO,CAAC"}