@lovince/icons 1.0.0

package/dist/vue.js

@@ -0,0 +1,460 @@
+import { paths as e } from "./paths.js";
+import { _ as t, f as n, g as r, n as i, o as a, r as o, t as s, u as c } from "./motion-72rOKpWt.js";
+import { Fragment as l, computed as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, openBlock as v, renderList as y, unref as b } from "vue";
+//#region src/LvIcon.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"width",
+	"height",
+	"stroke-width",
+	"aria-hidden",
+	"role",
+	"aria-label"
+], S = ["transform"], C = [
+	"d",
+	"fill",
+	"fill-opacity"
+], w = /* @__PURE__ */ h({
+	__name: "LvIcon",
+	props: {
+		name: {},
+		size: { default: 24 },
+		strokeWidth: { default: 2 },
+		absoluteStrokeWidth: {
+			type: Boolean,
+			default: !1
+		},
+		fill: {
+			type: [Number, Boolean],
+			default: 0
+		},
+		rotate: { default: 0 },
+		flip: {},
+		label: {}
+	},
+	setup(n) {
+		let i = n, a = u(() => e[i.name] ?? []), o = u(() => t({
+			size: i.size,
+			strokeWidth: i.strokeWidth,
+			absoluteStrokeWidth: i.absoluteStrokeWidth,
+			rotate: i.rotate,
+			flip: i.flip
+		})), s = u(() => r(i.fill)), c = u(() => i.label == null || i.label.length === 0);
+		return (e, t) => (v(), f("svg", {
+			class: "lv-icon",
+			xmlns: "http://www.w3.org/2000/svg",
+			width: o.value.size,
+			height: o.value.size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": o.value.strokeWidth,
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			"aria-hidden": c.value ? "true" : void 0,
+			role: c.value ? void 0 : "img",
+			"aria-label": c.value ? void 0 : n.label
+		}, [p("g", { transform: o.value.transform }, [(v(!0), f(l, null, y(a.value, (e, t) => (v(), f("path", {
+			key: t,
+			d: e,
+			fill: s.value > 0 ? "currentColor" : "none",
+			"fill-opacity": s.value > 0 ? s.value : void 0
+		}, null, 8, C))), 128))], 8, S)], 8, x));
+	}
+}), T = ["disabled", "aria-label"], E = /* @__PURE__ */ h({
+	__name: "LvIconButton",
+	props: {
+		icon: {},
+		label: {},
+		context: { default: "button" },
+		size: {},
+		hitArea: {},
+		variant: { default: "outline" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		optical: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let t = e, r = u(() => a[t.context] ?? a.button), i = u(() => t.size ?? r.value.size), o = u(() => Math.max(t.hitArea ?? r.value.hitArea, 44)), s = u(() => t.optical ? c(i.value, r.value.strokeWidth) : r.value.strokeWidth);
+		return (t, r) => (v(), f("button", {
+			type: "button",
+			class: g(["lv-icon-button", { "is-disabled": e.disabled }]),
+			style: _({ "--lv-target": `${o.value}px` }),
+			disabled: e.disabled,
+			"aria-label": e.label
+		}, [m(w, {
+			name: e.icon,
+			size: i.value,
+			"stroke-width": s.value,
+			fill: b(n)(e.variant)
+		}, null, 8, [
+			"name",
+			"size",
+			"stroke-width",
+			"fill"
+		])], 14, T));
+	}
+}), D = [
+	"width",
+	"height",
+	"stroke-width",
+	"aria-hidden",
+	"role",
+	"aria-label"
+], O = /* @__PURE__ */ h({
+	__name: "LvJourneyStep",
+	props: {
+		state: { default: "pending" },
+		size: { default: 24 },
+		strokeWidth: { default: 2 },
+		label: {}
+	},
+	setup(e) {
+		let t = e, n = u(() => ({
+			"--lv-duration": o(s.state),
+			"--lv-ease": i.enter
+		})), r = u(() => t.label == null || t.label.length === 0);
+		return (t, i) => (v(), f("svg", {
+			class: g(["lv-icon lv-icon--step", `is-${e.state}`]),
+			style: _(n.value),
+			xmlns: "http://www.w3.org/2000/svg",
+			width: e.size,
+			height: e.size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": e.strokeWidth,
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			"aria-hidden": r.value ? "true" : void 0,
+			role: r.value ? void 0 : "img",
+			"aria-label": r.value ? void 0 : e.label
+		}, [...i[0] ||= [
+			p("circle", {
+				class: "lv-icon__ring",
+				cx: "12",
+				cy: "12",
+				r: "8.5"
+			}, null, -1),
+			p("circle", {
+				class: "lv-icon__dot",
+				cx: "12",
+				cy: "12",
+				r: "4",
+				fill: "currentColor",
+				stroke: "none"
+			}, null, -1),
+			p("path", {
+				class: "lv-icon__tick",
+				d: "m8 12.25 2.5 2.5 5.5-5.75"
+			}, null, -1),
+			p("path", {
+				class: "lv-icon__dash",
+				d: "M8.5 12h7"
+			}, null, -1)
+		]], 14, D));
+	}
+}), k = [
+	"width",
+	"height",
+	"stroke-width",
+	"aria-hidden",
+	"role",
+	"aria-label"
+], A = /* @__PURE__ */ h({
+	__name: "LvMenuToClose",
+	props: {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: 24 },
+		strokeWidth: { default: 2 },
+		absoluteStrokeWidth: {
+			type: Boolean,
+			default: !1
+		},
+		label: {},
+		duration: { default: s.morph }
+	},
+	setup(e) {
+		let n = e, r = u(() => t({
+			size: n.size,
+			strokeWidth: n.strokeWidth,
+			absoluteStrokeWidth: n.absoluteStrokeWidth
+		})), a = u(() => ({
+			"--lv-duration": o(n.duration),
+			"--lv-ease": i.morph
+		})), s = u(() => n.label == null || n.label.length === 0);
+		return (t, n) => (v(), f("svg", {
+			class: g(["lv-icon lv-icon--menu", { "is-open": e.open }]),
+			style: _(a.value),
+			xmlns: "http://www.w3.org/2000/svg",
+			width: r.value.size,
+			height: r.value.size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": r.value.strokeWidth,
+			"stroke-linecap": "round",
+			"aria-hidden": s.value ? "true" : void 0,
+			role: s.value ? void 0 : "img",
+			"aria-label": s.value ? void 0 : e.label
+		}, [...n[0] ||= [
+			p("line", {
+				class: "lv-icon__bar lv-icon__bar--top",
+				x1: "4",
+				y1: "7",
+				x2: "20",
+				y2: "7"
+			}, null, -1),
+			p("line", {
+				class: "lv-icon__bar lv-icon__bar--mid",
+				x1: "4",
+				y1: "12",
+				x2: "20",
+				y2: "12"
+			}, null, -1),
+			p("line", {
+				class: "lv-icon__bar lv-icon__bar--bottom",
+				x1: "4",
+				y1: "17",
+				x2: "20",
+				y2: "17"
+			}, null, -1)
+		]], 14, k));
+	}
+}), j = [
+	"width",
+	"height",
+	"stroke-width",
+	"aria-hidden",
+	"role",
+	"aria-label"
+], M = /* @__PURE__ */ h({
+	__name: "LvPlusToClose",
+	props: {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: 24 },
+		strokeWidth: { default: 2 },
+		absoluteStrokeWidth: {
+			type: Boolean,
+			default: !1
+		},
+		label: {},
+		duration: { default: s.morph }
+	},
+	setup(e) {
+		let n = e, r = u(() => t({
+			size: n.size,
+			strokeWidth: n.strokeWidth,
+			absoluteStrokeWidth: n.absoluteStrokeWidth
+		})), a = u(() => ({
+			"--lv-duration": o(n.duration),
+			"--lv-ease": i.morph
+		})), s = u(() => n.label == null || n.label.length === 0);
+		return (t, n) => (v(), f("svg", {
+			class: g(["lv-icon lv-icon--plus", { "is-open": e.open }]),
+			style: _(a.value),
+			xmlns: "http://www.w3.org/2000/svg",
+			width: r.value.size,
+			height: r.value.size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": r.value.strokeWidth,
+			"stroke-linecap": "round",
+			"aria-hidden": s.value ? "true" : void 0,
+			role: s.value ? void 0 : "img",
+			"aria-label": s.value ? void 0 : e.label
+		}, [...n[0] ||= [p("g", { class: "lv-icon__cross" }, [p("line", {
+			x1: "12",
+			y1: "5",
+			x2: "12",
+			y2: "19"
+		}), p("line", {
+			x1: "5",
+			y1: "12",
+			x2: "19",
+			y2: "12"
+		})], -1)]], 14, j));
+	}
+}), N = [
+	"width",
+	"height",
+	"stroke-width",
+	"aria-hidden",
+	"role",
+	"aria-label"
+], P = {
+	key: 0,
+	class: "lv-icon__ring",
+	cx: "12",
+	cy: "12",
+	r: "9"
+}, F = ["d"], I = /* @__PURE__ */ h({
+	__name: "LvCheckmark",
+	props: {
+		checked: {
+			type: Boolean,
+			default: !1
+		},
+		circle: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: 24 },
+		strokeWidth: { default: 2 },
+		absoluteStrokeWidth: {
+			type: Boolean,
+			default: !1
+		},
+		label: {},
+		duration: { default: s.state }
+	},
+	setup(e) {
+		let n = e, r = u(() => t({
+			size: n.size,
+			strokeWidth: n.strokeWidth,
+			absoluteStrokeWidth: n.absoluteStrokeWidth
+		})), a = u(() => ({
+			"--lv-duration": o(n.duration),
+			"--lv-ease": i.enter
+		})), s = u(() => n.label == null || n.label.length === 0);
+		return (t, n) => (v(), f("svg", {
+			class: g(["lv-icon lv-icon--check", { "is-checked": e.checked }]),
+			style: _(a.value),
+			xmlns: "http://www.w3.org/2000/svg",
+			width: r.value.size,
+			height: r.value.size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": r.value.strokeWidth,
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			"aria-hidden": s.value ? "true" : void 0,
+			role: s.value ? void 0 : "img",
+			"aria-label": s.value ? void 0 : e.label
+		}, [e.circle ? (v(), f("circle", P)) : d("", !0), p("path", {
+			class: "lv-icon__tick",
+			d: e.circle ? "m8.25 12.25 2.5 2.5 5-5.5" : "m5 12.5 4.5 4.5L19 7.5"
+		}, null, 8, F)], 14, N));
+	}
+}), L = [
+	"width",
+	"height",
+	"stroke-width",
+	"aria-label"
+], R = /* @__PURE__ */ h({
+	__name: "LvLoading",
+	props: {
+		size: { default: 24 },
+		strokeWidth: { default: 2 },
+		absoluteStrokeWidth: {
+			type: Boolean,
+			default: !1
+		},
+		duration: { default: .9 },
+		label: { default: "Loading" }
+	},
+	setup(e) {
+		let n = e, r = u(() => t({
+			size: n.size,
+			strokeWidth: n.strokeWidth,
+			absoluteStrokeWidth: n.absoluteStrokeWidth
+		})), i = u(() => ({ "--lv-duration": o(n.duration) }));
+		return (t, n) => (v(), f("svg", {
+			class: "lv-icon lv-icon--loading",
+			style: _(i.value),
+			xmlns: "http://www.w3.org/2000/svg",
+			width: r.value.size,
+			height: r.value.size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": r.value.strokeWidth,
+			"stroke-linecap": "round",
+			role: "status",
+			"aria-label": e.label
+		}, [...n[0] ||= [p("circle", {
+			class: "lv-icon__track",
+			cx: "12",
+			cy: "12",
+			r: "9",
+			opacity: "0.22"
+		}, null, -1), p("path", {
+			class: "lv-icon__arc",
+			d: "M21 12a9 9 0 0 0-9-9"
+		}, null, -1)]], 12, L));
+	}
+}), z = [
+	"width",
+	"height",
+	"stroke-width",
+	"aria-hidden",
+	"role",
+	"aria-label"
+], B = /* @__PURE__ */ h({
+	__name: "LvArrowMotion",
+	props: {
+		direction: { default: "right" },
+		travel: { default: 3 },
+		size: { default: 24 },
+		strokeWidth: { default: 2 },
+		absoluteStrokeWidth: {
+			type: Boolean,
+			default: !1
+		},
+		label: {},
+		duration: { default: s.micro }
+	},
+	setup(e) {
+		let n = e, r = u(() => t({
+			size: n.size,
+			strokeWidth: n.strokeWidth,
+			absoluteStrokeWidth: n.absoluteStrokeWidth
+		})), a = {
+			right: 0,
+			down: 90,
+			left: 180,
+			up: 270
+		}, s = u(() => ({
+			"--lv-duration": o(n.duration),
+			"--lv-ease": i.enter,
+			"--lv-travel": `${n.travel}px`,
+			"--lv-rotate": `${a[n.direction]}deg`
+		})), c = u(() => n.label == null || n.label.length === 0);
+		return (t, n) => (v(), f("svg", {
+			class: "lv-icon lv-icon--arrow",
+			style: _(s.value),
+			xmlns: "http://www.w3.org/2000/svg",
+			width: r.value.size,
+			height: r.value.size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": r.value.strokeWidth,
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			"aria-hidden": c.value ? "true" : void 0,
+			role: c.value ? void 0 : "img",
+			"aria-label": c.value ? void 0 : e.label
+		}, [...n[0] ||= [p("g", { class: "lv-icon__arrow-inner" }, [p("path", {
+			class: "lv-icon__shaft",
+			d: "M4 12h15"
+		}), p("path", {
+			class: "lv-icon__head",
+			d: "m13 6 6 6-6 6"
+		})], -1)]], 12, z));
+	}
+});
+//#endregion
+export { B as LvArrowMotion, I as LvCheckmark, w as LvIcon, E as LvIconButton, O as LvJourneyStep, R as LvLoading, A as LvMenuToClose, M as LvPlusToClose };

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@lovince/icons",
+  "version": "1.0.0",
+  "description": "A motion-aware icon system for Vue 3 \u2014 24x24 geometry, variable weight and fill, animated state transitions.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Lovince Tech",
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "icons",
+    "svg",
+    "animated-icons",
+    "icon-system",
+    "gsap"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Mac254/Lovince_product_journey.git",
+    "directory": "packages/icons"
+  },
+  "homepage": "https://github.com/Mac254/Lovince_product_journey#readme",
+  "bugs": {
+    "url": "https://github.com/Mac254/Lovince_product_journey/issues"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.js"
+    },
+    "./paths": {
+      "types": "./dist/paths.d.ts",
+      "import": "./dist/paths.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build && cp src/style.css dist/style.css",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Edge versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "iOS >= 15",
+    "not dead"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}