@pfct/purple 1.12.0 → 1.14.0

package/dist/library/Lottie/index.esm.js

@@ -1,2 +1,67 @@
-import { t as e } from "../../chunks/Lottie.RPp4wef7.js";
-export { e as Lottie };
+import { t as e } from "../../chunks/utils.D6DjRYW1.js";
+import t from "../../hooks/useLayoutIsMobile.esm.js";
+import "../../hooks/index.esm.js";
+import { t as n } from "../../chunks/dist.CYRtTgUR.js";
+import { IconWithImage as r } from "../IconWithImage/index.esm.js";
+import { uuid as i } from "../../utils/uuid.util.esm.js";
+import { useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import u from "lottie-web";
+//#region src/library/Lottie/index.tsx
+var d = ({ width: d, height: f, viewBox: p, className: m, playOnce: h, autoplay: g = !1, alterImgSrcOnLoad: _, lottieFileSrcPath: v }) => {
+	let [y, b] = c(null), x = s(null), S = s(i()), C = t(), { ref: w, inView: T } = n({
+		threshold: C ? .4 : .9,
+		rootMargin: C ? "20% 0% 0% 0%" : "40% 0% 10% 0%"
+	}), E = o(() => p ? `${p.x ?? 0} ${p.y ?? 0} ${p.width} ${p.height}` : void 0, [p]), [D, O] = c();
+	return a(() => {
+		fetch(v).then((e) => e.json()).then((e) => {
+			b(e);
+		}).catch(() => {
+			console.info("lottie load 에 실패했습니다.");
+		});
+	}, [v]), a(() => {
+		if (!(x.current && y)) return;
+		let e = u.loadAnimation({
+			container: x.current,
+			renderer: "svg",
+			loop: !h,
+			autoplay: g,
+			animationData: y,
+			rendererSettings: { viewBoxSize: E },
+			name: m
+		});
+		return O(e), () => e.destroy();
+	}, [
+		y,
+		m,
+		g,
+		h,
+		E
+	]), a(() => {
+		T ? D?.goToAndPlay(D?.currentFrame > .9 * D?.totalFrames ? 0 : D?.currentFrame, !0) : h ? D?.stop() : D?.pause();
+	}, [
+		T,
+		D,
+		h
+	]), y === null && _ ? /* @__PURE__ */ l("div", {
+		className: "flex items-center justify-center",
+		children: /* @__PURE__ */ l(r, {
+			srcPath: _,
+			width: d || 0
+		})
+	}) : /* @__PURE__ */ l("div", {
+		className: "w-full",
+		ref: w,
+		children: /* @__PURE__ */ l("div", {
+			className: e("flex", m),
+			id: S.current,
+			ref: x,
+			style: {
+				width: d || void 0,
+				height: f || void 0
+			}
+		})
+	});
+};
+//#endregion
+export { d as Lottie };

package/dist/library/index.cjs.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./IconWithImage/index.cjs.js"),t=require("./List/BottomSheetItemList/index.cjs.js");require("./List/index.cjs.js");const n=require("../chunks/Lottie.DxqtsFQi.js"),r=require("./Spacing/index.cjs.js");exports.BottomSheetItemList=t.BottomSheetItemList,exports.IconWithImage=e.IconWithImage,exports.Lottie=n.t,exports.Spacing=r.Spacing;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/DotLottie.CAB2tVvS.js"),t=require("./IconWithImage/index.cjs.js"),n=require("./List/BottomSheetItemList/index.cjs.js");require("./List/index.cjs.js");const r=require("./Lottie/index.cjs.js"),i=require("./Spacing/index.cjs.js");exports.BottomSheetItemList=n.BottomSheetItemList,exports.DotLottie=e.t,exports.IconWithImage=t.IconWithImage,exports.Lottie=r.Lottie,exports.Spacing=i.Spacing;

package/dist/library/index.d.ts

@@ -1,3 +1,4 @@
+export * from './DotLottie';
 export * from './IconWithImage';
 export * from './List';
 export * from './Lottie';

package/dist/library/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/library/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/library/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}

package/dist/library/index.esm.js

@@ -1,6 +1,7 @@
-import { IconWithImage as e } from "./IconWithImage/index.esm.js";
-import { BottomSheetItemList as t } from "./List/BottomSheetItemList/index.esm.js";
+import { t as e } from "../chunks/DotLottie.rjIbaVEt.js";
+import { IconWithImage as t } from "./IconWithImage/index.esm.js";
+import { BottomSheetItemList as n } from "./List/BottomSheetItemList/index.esm.js";
 import "./List/index.esm.js";
-import { t as n } from "../chunks/Lottie.RPp4wef7.js";
-import { Spacing as r } from "./Spacing/index.esm.js";
-export { t as BottomSheetItemList, e as IconWithImage, n as Lottie, r as Spacing };
+import { Lottie as r } from "./Lottie/index.esm.js";
+import { Spacing as i } from "./Spacing/index.esm.js";
+export { n as BottomSheetItemList, e as DotLottie, t as IconWithImage, r as Lottie, i as Spacing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfct/purple",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "description": "design system for PFCT web service",
   "exports": {
     ".": {
@@ -64,6 +64,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@lottiefiles/dotlottie-react": "^0.19.4",
     "@radix-ui/react-accordion": "^1.2.10",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.6",
@@ -100,6 +101,7 @@
     "@types/node": "^25.9.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@typescript/typescript6": "^6.0.1",
     "@vitejs/plugin-react": "^6.0.0",
     "glob": "^13.0.0",
     "jsdom": "^29.1.1",
@@ -109,7 +111,7 @@
     "rollup-plugin-visualizer": "^7.0.0",
     "storybook": "10.4.4",
     "tailwindcss": "^4.0.15",
-    "typescript": "^6.0.2",
+    "typescript": "^7.0.1-rc",
     "ultracite": "7.8.3",
     "vite": "^8.0.0",
     "vite-plugin-dts": "^5.0.0",

package/dist/chunks/Lottie.DxqtsFQi.js

@@ -1 +0,0 @@
-const e=require("./chunk.CMqjfN_6.js"),t=require("./utils.C67s_c-g.js"),n=require("../hooks/useLayoutIsMobile.cjs.js");require("../hooks/index.cjs.js");const r=require("../library/IconWithImage/index.cjs.js"),i=require("../utils/uuid.util.cjs.js");let a=require("react");a=e.t(a,1);let o=require("react/jsx-runtime"),s=require("lottie-web");s=e.t(s);var c=new Map,l=new WeakMap,u=0,d;function f(e){return e?l.has(e)?l.get(e):(u+=1,l.set(e,u.toString()),l.get(e)):`0`}function p(e){return Object.keys(e).sort().filter(t=>e[t]!==void 0).map(t=>`${t}_${t===`root`?f(e.root):e[t]}`).toString()}function m(e){let t=p(e),n=c.get(t);if(!n){let r=new Map,i,a=new IntersectionObserver(t=>{t.forEach(t=>{let n=t.isIntersecting&&i.some(e=>t.intersectionRatio>=e);e.trackVisibility&&t.isVisible===void 0&&(t.isVisible=n),[...r.get(t.target)??[]].forEach(e=>{e(n,t)})})},e);i=a.thresholds||(Array.isArray(e.threshold)?e.threshold:[e.threshold||0]),n={id:t,observer:a,elements:r},c.set(t,n)}return n}function h(e,t,n={},r=d){if(window.IntersectionObserver===void 0&&r!==void 0){let i=e.getBoundingClientRect();return t(r,{isIntersecting:r,target:e,intersectionRatio:typeof n.threshold==`number`?n.threshold:0,time:0,boundingClientRect:i,intersectionRect:i,rootBounds:i}),()=>{}}let{id:i,observer:a,elements:o}=m(n),s=o.get(e)||[];return o.has(e)||o.set(e,s),s.push(t),a.observe(e),function(){s.splice(s.indexOf(t),1),s.length===0&&(o.delete(e),a.unobserve(e)),o.size===0&&(a.disconnect(),c.delete(i))}}a.Component;function g({threshold:e,delay:t,trackVisibility:n,rootMargin:r,root:i,triggerOnce:o,skip:s,initialInView:c,fallbackInView:l,onChange:u}={}){let[d,f]=a.useState(null),p=a.useRef(u),m=a.useRef(c),[g,_]=a.useState({inView:!!c,entry:void 0});p.current=u,a.useEffect(()=>{if(m.current===void 0&&(m.current=c),s||!d)return;let a;return a=h(d,(e,t)=>{let n=m.current;m.current=e,!(n===void 0&&!e)&&(_({inView:e,entry:t}),p.current&&p.current(e,t),t.isIntersecting&&o&&a&&(a(),a=void 0))},{root:i,rootMargin:r,threshold:e,trackVisibility:n,delay:t},l),()=>{a&&a()}},[Array.isArray(e)?e.toString():e,d,i,r,o,s,n,l,t]);let v=g.entry?.target,y=a.useRef(void 0);!d&&v&&!o&&!s&&y.current!==v&&(y.current=v,_({inView:!!c,entry:void 0}),m.current=c);let b=[f,g.inView,g.entry];return b.ref=b[0],b.inView=b[1],b.entry=b[2],b}(`useInsertionEffect`in a?a.useInsertionEffect:void 0)??a.useLayoutEffect??a.useEffect;var _=({width:e,height:c,viewBox:l,className:u,playOnce:d,autoplay:f=!1,alterImgSrcOnLoad:p,lottieFileSrcPath:m})=>{let[h,_]=(0,a.useState)(null),v=(0,a.useRef)(null),y=(0,a.useRef)(i.uuid()),b=n.default(),{ref:x,inView:S}=g({threshold:b?.4:.9,rootMargin:b?`20% 0% 0% 0%`:`40% 0% 10% 0%`}),C=(0,a.useMemo)(()=>l?`${l.x??0} ${l.y??0} ${l.width} ${l.height}`:void 0,[l]),[w,T]=(0,a.useState)();return(0,a.useEffect)(()=>{fetch(m).then(e=>e.json()).then(e=>{_(e)}).catch(()=>{console.info(`lottie load 에 실패했습니다.`)})},[m]),(0,a.useEffect)(()=>{if(!(v.current&&h))return;let e=s.default.loadAnimation({container:v.current,renderer:`svg`,loop:!d,autoplay:f,animationData:h,rendererSettings:{viewBoxSize:C},name:u});return T(e),()=>e.destroy()},[h,u,f,d,C]),(0,a.useEffect)(()=>{S?w?.goToAndPlay(w?.currentFrame>.9*w?.totalFrames?0:w?.currentFrame,!0):d?w?.stop():w?.pause()},[S,w,d]),h===null&&p?(0,o.jsx)(`div`,{className:`flex items-center justify-center`,children:(0,o.jsx)(r.IconWithImage,{srcPath:p,width:e||0})}):(0,o.jsx)(`div`,{className:`w-full`,ref:x,children:(0,o.jsx)(`div`,{className:t.t(`flex`,u),id:y.current,ref:v,style:{width:e||void 0,height:c||void 0}})})};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}});

package/dist/chunks/Lottie.RPp4wef7.js

@@ -1,161 +0,0 @@
-import { t as e } from "./utils.D6DjRYW1.js";
-import t from "../hooks/useLayoutIsMobile.esm.js";
-import "../hooks/index.esm.js";
-import { IconWithImage as n } from "../library/IconWithImage/index.esm.js";
-import { uuid as r } from "../utils/uuid.util.esm.js";
-import * as i from "react";
-import { useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
-import { jsx as l } from "react/jsx-runtime";
-import u from "lottie-web";
-//#region node_modules/react-intersection-observer/dist/index.mjs
-var d = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new WeakMap(), p = 0, m;
-function h(e) {
-	return e ? f.has(e) ? f.get(e) : (p += 1, f.set(e, p.toString()), f.get(e)) : "0";
-}
-function g(e) {
-	return Object.keys(e).sort().filter((t) => e[t] !== void 0).map((t) => `${t}_${t === "root" ? h(e.root) : e[t]}`).toString();
-}
-function _(e) {
-	let t = g(e), n = d.get(t);
-	if (!n) {
-		let r = /* @__PURE__ */ new Map(), i, a = new IntersectionObserver((t) => {
-			t.forEach((t) => {
-				let n = t.isIntersecting && i.some((e) => t.intersectionRatio >= e);
-				e.trackVisibility && t.isVisible === void 0 && (t.isVisible = n), [...r.get(t.target) ?? []].forEach((e) => {
-					e(n, t);
-				});
-			});
-		}, e);
-		i = a.thresholds || (Array.isArray(e.threshold) ? e.threshold : [e.threshold || 0]), n = {
-			id: t,
-			observer: a,
-			elements: r
-		}, d.set(t, n);
-	}
-	return n;
-}
-function v(e, t, n = {}, r = m) {
-	if (window.IntersectionObserver === void 0 && r !== void 0) {
-		let i = e.getBoundingClientRect();
-		return t(r, {
-			isIntersecting: r,
-			target: e,
-			intersectionRatio: typeof n.threshold == "number" ? n.threshold : 0,
-			time: 0,
-			boundingClientRect: i,
-			intersectionRect: i,
-			rootBounds: i
-		}), () => {};
-	}
-	let { id: i, observer: a, elements: o } = _(n), s = o.get(e) || [];
-	return o.has(e) || o.set(e, s), s.push(t), a.observe(e), function() {
-		s.splice(s.indexOf(t), 1), s.length === 0 && (o.delete(e), a.unobserve(e)), o.size === 0 && (a.disconnect(), d.delete(i));
-	};
-}
-i.Component;
-function y({ threshold: e, delay: t, trackVisibility: n, rootMargin: r, root: a, triggerOnce: o, skip: s, initialInView: c, fallbackInView: l, onChange: u } = {}) {
-	let [d, f] = i.useState(null), p = i.useRef(u), m = i.useRef(c), [h, g] = i.useState({
-		inView: !!c,
-		entry: void 0
-	});
-	p.current = u, i.useEffect(() => {
-		if (m.current === void 0 && (m.current = c), s || !d) return;
-		let i;
-		return i = v(d, (e, t) => {
-			let n = m.current;
-			m.current = e, !(n === void 0 && !e) && (g({
-				inView: e,
-				entry: t
-			}), p.current && p.current(e, t), t.isIntersecting && o && i && (i(), i = void 0));
-		}, {
-			root: a,
-			rootMargin: r,
-			threshold: e,
-			trackVisibility: n,
-			delay: t
-		}, l), () => {
-			i && i();
-		};
-	}, [
-		Array.isArray(e) ? e.toString() : e,
-		d,
-		a,
-		r,
-		o,
-		s,
-		n,
-		l,
-		t
-	]);
-	let _ = h.entry?.target, y = i.useRef(void 0);
-	!d && _ && !o && !s && y.current !== _ && (y.current = _, g({
-		inView: !!c,
-		entry: void 0
-	}), m.current = c);
-	let b = [
-		f,
-		h.inView,
-		h.entry
-	];
-	return b.ref = b[0], b.inView = b[1], b.entry = b[2], b;
-}
-("useInsertionEffect" in i ? i.useInsertionEffect : void 0) ?? i.useLayoutEffect ?? i.useEffect;
-//#endregion
-//#region src/library/Lottie/index.tsx
-var b = ({ width: i, height: d, viewBox: f, className: p, playOnce: m, autoplay: h = !1, alterImgSrcOnLoad: g, lottieFileSrcPath: _ }) => {
-	let [v, b] = c(null), x = s(null), S = s(r()), C = t(), { ref: w, inView: T } = y({
-		threshold: C ? .4 : .9,
-		rootMargin: C ? "20% 0% 0% 0%" : "40% 0% 10% 0%"
-	}), E = o(() => f ? `${f.x ?? 0} ${f.y ?? 0} ${f.width} ${f.height}` : void 0, [f]), [D, O] = c();
-	return a(() => {
-		fetch(_).then((e) => e.json()).then((e) => {
-			b(e);
-		}).catch(() => {
-			console.info("lottie load 에 실패했습니다.");
-		});
-	}, [_]), a(() => {
-		if (!(x.current && v)) return;
-		let e = u.loadAnimation({
-			container: x.current,
-			renderer: "svg",
-			loop: !m,
-			autoplay: h,
-			animationData: v,
-			rendererSettings: { viewBoxSize: E },
-			name: p
-		});
-		return O(e), () => e.destroy();
-	}, [
-		v,
-		p,
-		h,
-		m,
-		E
-	]), a(() => {
-		T ? D?.goToAndPlay(D?.currentFrame > .9 * D?.totalFrames ? 0 : D?.currentFrame, !0) : m ? D?.stop() : D?.pause();
-	}, [
-		T,
-		D,
-		m
-	]), v === null && g ? /* @__PURE__ */ l("div", {
-		className: "flex items-center justify-center",
-		children: /* @__PURE__ */ l(n, {
-			srcPath: g,
-			width: i || 0
-		})
-	}) : /* @__PURE__ */ l("div", {
-		className: "w-full",
-		ref: w,
-		children: /* @__PURE__ */ l("div", {
-			className: e("flex", p),
-			id: S.current,
-			ref: x,
-			style: {
-				width: i || void 0,
-				height: d || void 0
-			}
-		})
-	});
-};
-//#endregion
-export { b as t };