@lovince/icons 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lovince Tech
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,155 @@
+# @lovince/icons
+
+An icon system for interfaces that move — 24×24 geometry, variants derived from
+one shape, and state transitions that read as a single object changing rather
+than two icons swapping.
+
+```bash
+bun add @lovince/icons
+```
+
+No runtime dependencies. Vue is an optional peer, needed only for the Vue layer.
+
+## Not another icon collection
+
+Competing on icon count is a losing game. This competes on what generic sets
+don't do:
+
+| | |
+|---|---|
+| **One geometry, three variants** | Outline, duotone and filled are the same paths at different fill strengths — so a variant change is an animatable value, not a swap |
+| **Transitions, not swaps** | Menu ⇄ Close, Plus ⇄ Close, and a tick that draws on. Continuity is the point |
+| **Hit area separated from icon size** | An 18px icon still gets a 44px target. The most common icon-button mistake, invisible until someone taps it |
+| **Journey step states** | `○ → ◉ → ✓` as one shape, for onboarding progress |
+| **Onboarding vocabulary** | `welcome`, `discover`, `click`, `swipe`, `drag`, `scroll`, `tip`, `shortcut`, `newFeature` |
+| **Optical sizing** | Stroke lightens at small and large sizes so weight reads constant |
+| **Accessibility by construction** | Decorative by default; a `label` switches it to `role="img"` |
+| **Reduced motion** | Every icon reaches its final state; it just gets there instantly |
+
+## Works in any framework
+
+The core is framework-free. Vue components are one adapter, not the only door.
+
+### Plain JavaScript, React, Svelte, Angular, Astro
+
+```ts
+import { renderIcon, createIcon, defineIconElement } from '@lovince/icons'
+
+renderIcon('arrowRight', { size: 20 })   // SVG markup as a string
+createIcon('home', { size: 24 })          // a live SVGElement
+```
+
+Or use the custom element, which every framework renders natively:
+
+```ts
+import { defineIconElement } from '@lovince/icons'
+defineIconElement()
+```
+
+```html
+<lv-icon name="arrow-right" size="20"></lv-icon>
+<lv-icon name="close" label="Dismiss"></lv-icon>
+```
+
+Names accept kebab-case in markup and camelCase in code.
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { LvIcon, LvIconButton, LvJourneyStep } from '@lovince/icons/vue'
+import '@lovince/icons/style.css'
+</script>
+
+<template>
+  <LvIcon name="arrowRight" :size="20" />
+  <LvIconButton icon="close" label="Dismiss" context="toolbar" />
+  <LvJourneyStep state="current" />
+</template>
+```
+
+The stylesheet is only needed for the animated components.
+
+## Props
+
+### `LvIcon`
+
+| Prop | Type | Default | |
+|---|---|---|---|
+| `name` | `IconName` | — | Unknown names render nothing rather than breaking layout |
+| `size` | `number \| string` | `24` | |
+| `strokeWidth` | `number \| string` | `2` | |
+| `absoluteStrokeWidth` | `boolean` | `false` | Keep rendered thickness constant as size changes |
+| `fill` | `number \| boolean` | `0` | `0` outline, `1` solid, between is duotone |
+| `rotate` | `number` | `0` | About the canvas centre |
+| `flip` | `'horizontal' \| 'vertical' \| 'both'` | — | |
+| `label` | `string` | — | Omit for decorative icons |
+
+### `LvIconButton`
+
+| Prop | Type | Default | |
+|---|---|---|---|
+| `icon` | `IconName` | — | |
+| `label` | `string` | — | **Required** — an icon-only control has no visible name |
+| `context` | `IconContext` | `'button'` | `toolbar` `button` `navigation` `hero` `status` `inline` |
+| `hitArea` | `number` | from context | Never below 44px |
+| `variant` | `IconVariant` | `'outline'` | |
+| `optical` | `boolean` | `true` | Adjust stroke for the rendered size |
+
+### Animated
+
+`LvMenuToClose` and `LvPlusToClose` take `open`; `LvCheckmark` takes `checked`
+and `circle`; `LvArrowMotion` takes `direction` and `travel`; `LvLoading` takes
+`duration`. All accept `size`, `strokeWidth` and `label`.
+
+`LvArrowMotion` responds to the **parent's** hover and focus, so the whole
+control moves as one object:
+
+```vue
+<button class="lv-hover">
+  Continue <LvArrowMotion direction="right" />
+</button>
+```
+
+## Icon set
+
+52 icons across five groups — `navigation`, `journey`, `status`, `onboarding`,
+`interface`.
+
+```ts
+import { iconNames, iconGroups, isIconName } from '@lovince/icons'
+```
+
+## Motion tokens
+
+```ts
+import { DURATION, EASE, prefersReducedMotion } from '@lovince/icons'
+
+DURATION // { micro: 0.18, state: 0.28, morph: 0.36 }
+```
+
+Shared with [`@lovince/product-journey`](https://www.npmjs.com/package/@lovince/product-journey)
+so icon motion matches journey motion.
+
+## Design rules
+
+```
+24 × 24 canvas
+2px centred stroke
+round caps and joins
+legible at 16px
+no gradients, no mixed weights
+```
+
+## Size
+
+```
+index.js   1.7 KB gzip   framework-free core
+vue.js     2.3 KB gzip   Vue components
+paths.js   2.0 KB gzip   geometry only
+style.css  2.0 KB gzip   animated components only
+```
+
+## License
+
+MIT

package/dist/LvIcon.vue.d.ts

@@ -0,0 +1,25 @@
+import { IconName } from './paths';
+import { IconFlip } from './core/props';
+type __VLS_Props = {
+    /** Name from the registry. An unknown name renders nothing rather than breaking layout. */
+    name: IconName;
+    size?: number | string;
+    strokeWidth?: number | string;
+    /** Keep the stroke's rendered thickness constant as size changes. */
+    absoluteStrokeWidth?: boolean;
+    /** 0 outline, 1 solid, anything between is a partial wash. */
+    fill?: number | boolean;
+    rotate?: number | string;
+    flip?: IconFlip;
+    /** Accessible name. Omit for decorative icons that sit beside visible text. */
+    label?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fill: number | boolean;
+    size: number | string;
+    rotate: number | string;
+    strokeWidth: number | string;
+    absoluteStrokeWidth: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/LvIconButton.vue.d.ts

@@ -0,0 +1,22 @@
+import { IconContext, IconVariant } from './core/variants';
+import { IconName } from './paths';
+type __VLS_Props = {
+    icon: IconName;
+    /** Required: an icon-only control has no visible text to name it. */
+    label: string;
+    context?: IconContext;
+    size?: number;
+    /** Interactive target, independent of the icon's visual size. */
+    hitArea?: number;
+    variant?: IconVariant;
+    disabled?: boolean;
+    optical?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    context: IconContext;
+    variant: IconVariant;
+    optical: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/LvJourneyStep.vue.d.ts

@@ -0,0 +1,14 @@
+export type StepState = 'pending' | 'current' | 'complete' | 'skipped';
+type __VLS_Props = {
+    state?: StepState;
+    size?: number | string;
+    strokeWidth?: number | string;
+    label?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number | string;
+    strokeWidth: number | string;
+    state: StepState;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/animated/LvArrowMotion.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    direction?: 'right' | 'left' | 'up' | 'down';
+    /** Nudge distance in canvas units when the parent is hovered. */
+    travel?: number;
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    label?: string;
+    duration?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number | string;
+    strokeWidth: number | string;
+    absoluteStrokeWidth: boolean;
+    duration: number;
+    direction: "right" | "left" | "up" | "down";
+    travel: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/animated/LvCheckmark.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    /** Draws the tick when true; resets when false so it can replay. */
+    checked?: boolean;
+    circle?: boolean;
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    label?: string;
+    duration?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    circle: boolean;
+    size: number | string;
+    strokeWidth: number | string;
+    absoluteStrokeWidth: boolean;
+    duration: number;
+    checked: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/animated/LvLoading.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    /** Seconds per revolution. */
+    duration?: number;
+    label?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number | string;
+    label: string;
+    strokeWidth: number | string;
+    absoluteStrokeWidth: boolean;
+    duration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/animated/LvMenuToClose.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    open?: boolean;
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    label?: string;
+    duration?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number | string;
+    strokeWidth: number | string;
+    absoluteStrokeWidth: boolean;
+    open: boolean;
+    duration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/animated/LvPlusToClose.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    open?: boolean;
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    label?: string;
+    duration?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number | string;
+    strokeWidth: number | string;
+    absoluteStrokeWidth: boolean;
+    open: boolean;
+    duration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/core/motion.d.ts

@@ -0,0 +1,17 @@
+/** Shared with @lovince/product-journey so icon motion matches journey motion. */
+export declare const DURATION: {
+    readonly micro: 0.18;
+    readonly state: 0.28;
+    readonly morph: 0.36;
+};
+export declare const EASE: {
+    readonly enter: "cubic-bezier(0.33, 1, 0.68, 1)";
+    readonly morph: "cubic-bezier(0.65, 0, 0.35, 1)";
+};
+export declare const prefersReducedMotion: () => boolean;
+/**
+ * Motion is a progressive enhancement: with reduced motion the icon still
+ * reaches its final state, it just gets there instantly.
+ */
+export declare const resolveDuration: (seconds: number, reduced?: boolean) => number;
+export declare const cssDuration: (seconds: number, reduced?: boolean) => string;

package/dist/core/props.d.ts

@@ -0,0 +1,26 @@
+export declare const CANVAS = 24;
+export declare const DEFAULT_SIZE = 24;
+export declare const DEFAULT_STROKE = 2;
+export type IconFlip = 'horizontal' | 'vertical' | 'both';
+export interface IconGeometry {
+    readonly size: number;
+    readonly strokeWidth: number;
+    readonly transform: string | undefined;
+}
+/**
+ * Optical sizing. A 2px stroke drawn on a 24px canvas becomes 4px when the icon
+ * is rendered at 48px, which reads as a heavier icon rather than a bigger one.
+ * `absoluteStrokeWidth` rescales the stroke so its rendered thickness stays put.
+ */
+export declare const resolveStroke: (strokeWidth: number | string | undefined, size: number, absolute: boolean) => number;
+/** Rotation and flipping happen about the canvas centre, never the origin. */
+export declare const resolveTransform: (rotate: number | string | undefined, flip: IconFlip | undefined) => string | undefined;
+export declare const resolveGeometry: (options: {
+    size?: number | string;
+    strokeWidth?: number | string;
+    absoluteStrokeWidth?: boolean;
+    rotate?: number | string;
+    flip?: IconFlip;
+}) => IconGeometry;
+/** 0 draws outline only, 1 fills solid; anything between is a partial wash. */
+export declare const resolveFill: (fill: number | boolean | undefined) => number;

package/dist/core/variants.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Outline, filled and duotone are the *same* geometry at different fill
+ * strengths — not three drawings that can drift apart. That is what makes a
+ * transition between them a single animated value rather than an icon swap.
+ */
+export type IconVariant = 'outline' | 'filled' | 'duotone';
+export declare const VARIANT_FILL: Readonly<Record<IconVariant, number>>;
+export declare const resolveVariantFill: (variant: IconVariant | undefined) => number;
+/**
+ * Context presets. The same icon needs a different treatment in a dense toolbar
+ * than in a hero, and encoding that here stops every call site inventing its
+ * own numbers.
+ */
+export type IconContext = 'toolbar' | 'button' | 'navigation' | 'hero' | 'status' | 'inline';
+export interface ContextPreset {
+    readonly size: number;
+    readonly strokeWidth: number;
+    /** Minimum interactive target, independent of the icon's visual size. */
+    readonly hitArea: number;
+}
+export declare const CONTEXT: Readonly<Record<IconContext, ContextPreset>>;
+export declare const resolveContext: (context: IconContext | undefined) => ContextPreset | null;
+/**
+ * Optical sizing. Scaling one path to 16px thickens it relative to its detail,
+ * so small sizes get a slightly lighter stroke and large sizes a lighter one
+ * again — the icon reads as the same weight at every size.
+ */
+export declare const opticalStroke: (size: number, base?: number) => number;
+export type IconState = 'default' | 'hover' | 'active' | 'selected' | 'disabled';
+/** States differ by fill and opacity, so a change is animatable, not a swap. */
+export declare const STATE_FILL: Readonly<Record<IconState, number>>;
+export declare const STATE_OPACITY: Readonly<Record<IconState, number>>;

package/dist/element.d.ts

@@ -0,0 +1,8 @@
+export declare class LvIconElement extends HTMLElement {
+    static get observedAttributes(): readonly string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+/** Idempotent, so calling it from several entry points is safe. */
+export declare const defineIconElement: (tag?: string) => void;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Framework-free entry point. Nothing here imports Vue, so it works in React,
+ * Svelte, Angular, Astro or plain HTML. The Vue components live at
+ * `@lovince/icons/vue`; the custom element works everywhere.
+ */
+export { paths, iconNames, iconGroups, isIconName, type IconName } from './paths';
+export { renderIcon, createIcon, iconDataUri, type RenderOptions } from './render';
+export { LvIconElement, defineIconElement } from './element';
+export { CANVAS, DEFAULT_SIZE, DEFAULT_STROKE, resolveGeometry, resolveStroke, resolveTransform, resolveFill, type IconFlip, type IconGeometry, } from './core/props';
+export { CONTEXT, VARIANT_FILL, STATE_FILL, STATE_OPACITY, opticalStroke, resolveContext, resolveVariantFill, type ContextPreset, type IconContext, type IconState, type IconVariant, } from './core/variants';
+export { DURATION, EASE, cssDuration, prefersReducedMotion, resolveDuration, } from './core/motion';

package/dist/index.js

@@ -0,0 +1,84 @@
+import { iconGroups as e, iconNames as t, isIconName as n, paths as r } from "./paths.js";
+import { _ as i, a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, y as S } from "./motion-72rOKpWt.js";
+//#region src/render.ts
+var C = "http://www.w3.org/2000/svg", w = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), T = (e, t) => {
+	let n = i(t), a = l(t.fill), o = t.label == null || t.label.length === 0, s = {
+		xmlns: C,
+		class: t.class ?? "lv-icon",
+		width: String(n.size),
+		height: String(n.size),
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": String(n.strokeWidth),
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	};
+	return o ? s["aria-hidden"] = "true" : (s.role = "img", s["aria-label"] = t.label), {
+		attrs: s,
+		shapes: r[e] ?? [],
+		transform: n.transform,
+		fill: a
+	};
+}, E = (e, t = {}) => {
+	let { attrs: n, shapes: r, transform: i, fill: a } = T(e, t), o = Object.entries(n).map(([e, t]) => `${e}="${w(t)}"`).join(" "), s = a > 0 ? ` fill="currentColor" fill-opacity="${a}"` : "", c = r.map((e) => `<path d="${w(e)}"${s}/>`).join("");
+	return `<svg ${o}>${i === void 0 ? c : `<g transform="${w(i)}">${c}</g>`}</svg>`;
+}, D = (e, t = {}) => {
+	if (typeof document > "u") return null;
+	let { attrs: n, shapes: r, transform: i, fill: a } = T(e, t), o = document.createElementNS(C, "svg");
+	for (let [e, t] of Object.entries(n)) o.setAttribute(e, t);
+	let s = i === void 0 ? o : (() => {
+		let e = document.createElementNS(C, "g");
+		return e.setAttribute("transform", i), o.appendChild(e), e;
+	})();
+	for (let e of r) {
+		let t = document.createElementNS(C, "path");
+		t.setAttribute("d", e), a > 0 && (t.setAttribute("fill", "currentColor"), t.setAttribute("fill-opacity", String(a))), s.appendChild(t);
+	}
+	return o;
+}, O = (e, t = {}) => `data:image/svg+xml,${encodeURIComponent(E(e, t))}`, k = [
+	"name",
+	"size",
+	"stroke-width",
+	"absolute-stroke-width",
+	"fill",
+	"rotate",
+	"flip",
+	"label"
+], A = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), j = (e) => {
+	if (e == null) return null;
+	let t = A(e.trim());
+	return n(t) ? t : null;
+}, M = (e, t) => {
+	if (e == null) return t;
+	let n = Number.parseFloat(e);
+	return Number.isFinite(n) ? n : t;
+}, N = class extends HTMLElement {
+	static get observedAttributes() {
+		return k;
+	}
+	connectedCallback() {
+		this.render();
+	}
+	attributeChangedCallback() {
+		this.isConnected && this.render();
+	}
+	render() {
+		let e = j(this.getAttribute("name"));
+		if (this.replaceChildren(), e === null) return;
+		let t = this.getAttribute("flip"), n = D(e, {
+			size: M(this.getAttribute("size"), 24),
+			strokeWidth: M(this.getAttribute("stroke-width"), 2),
+			absoluteStrokeWidth: this.hasAttribute("absolute-stroke-width"),
+			fill: M(this.getAttribute("fill"), 0),
+			rotate: M(this.getAttribute("rotate"), 0),
+			...t === "horizontal" || t === "vertical" || t === "both" ? { flip: t } : {},
+			...this.getAttribute("label") == null ? {} : { label: this.getAttribute("label") }
+		});
+		n !== null && this.appendChild(n);
+	}
+}, P = (e = "lv-icon") => {
+	typeof window > "u" || typeof customElements > "u" || customElements.get(e) === void 0 && customElements.define(e, N);
+};
+//#endregion
+export { g as CANVAS, h as CONTEXT, p as DEFAULT_SIZE, u as DEFAULT_STROKE, y as DURATION, m as EASE, N as LvIconElement, v as STATE_FILL, o as STATE_OPACITY, f as VARIANT_FILL, D as createIcon, _ as cssDuration, P as defineIconElement, O as iconDataUri, e as iconGroups, t as iconNames, n as isIconName, b as opticalStroke, r as paths, d as prefersReducedMotion, E as renderIcon, s as resolveContext, a as resolveDuration, l as resolveFill, i as resolveGeometry, x as resolveStroke, S as resolveTransform, c as resolveVariantFill };

package/dist/motion-72rOKpWt.js

@@ -0,0 +1,85 @@
+//#region src/core/props.ts
+var e = 24, t = 24, n = 2, r = (e, t) => {
+	if (typeof e == "number") return Number.isFinite(e) ? e : t;
+	if (typeof e == "string") {
+		let n = Number.parseFloat(e);
+		return Number.isFinite(n) ? n : t;
+	}
+	return t;
+}, i = (e, t, n) => {
+	let i = r(e, 2);
+	return !n || t <= 0 ? i : i * 24 / t;
+}, a = (e) => (r(e, 0) % 360 + 360) % 360, o = (e) => e === "horizontal" ? [-1, 1] : e === "vertical" ? [1, -1] : e === "both" ? [-1, -1] : [1, 1], s = (e, t) => {
+	let n = a(e), [r, i] = o(t);
+	if (n === 0 && r === 1 && i === 1) return;
+	let s = ["translate(12 12)"];
+	return n !== 0 && s.push(`rotate(${n})`), (r !== 1 || i !== 1) && s.push(`scale(${r} ${i})`), s.push("translate(-12 -12)"), s.join(" ");
+}, c = (e) => {
+	let t = r(e.size, 24);
+	return {
+		size: t,
+		strokeWidth: i(e.strokeWidth, t, e.absoluteStrokeWidth === !0),
+		transform: s(e.rotate, e.flip)
+	};
+}, l = (e) => {
+	if (e === !0) return 1;
+	if (e === void 0 || e === !1) return 0;
+	let t = r(e, 0);
+	return t < 0 ? 0 : t > 1 ? 1 : t;
+}, u = {
+	outline: 0,
+	duotone: .18,
+	filled: 1
+}, d = (e) => u[e ?? "outline"] ?? 0, f = {
+	inline: {
+		size: 16,
+		strokeWidth: 2,
+		hitArea: 0
+	},
+	toolbar: {
+		size: 20,
+		strokeWidth: 2,
+		hitArea: 44
+	},
+	button: {
+		size: 18,
+		strokeWidth: 2,
+		hitArea: 44
+	},
+	navigation: {
+		size: 22,
+		strokeWidth: 1.9,
+		hitArea: 48
+	},
+	status: {
+		size: 20,
+		strokeWidth: 2,
+		hitArea: 0
+	},
+	hero: {
+		size: 40,
+		strokeWidth: 1.6,
+		hitArea: 0
+	}
+}, p = (e) => e === void 0 ? null : f[e] ?? null, m = (e, t = 2) => e <= 16 ? t * .9 : e <= 20 ? t * .95 : e <= 28 ? t : e <= 40 ? t * .85 : t * .75, h = {
+	default: 0,
+	hover: .12,
+	active: 1,
+	selected: 1,
+	disabled: 0
+}, g = {
+	default: 1,
+	hover: 1,
+	active: 1,
+	selected: 1,
+	disabled: .38
+}, _ = {
+	micro: .18,
+	state: .28,
+	morph: .36
+}, v = {
+	enter: "cubic-bezier(0.33, 1, 0.68, 1)",
+	morph: "cubic-bezier(0.65, 0, 0.35, 1)"
+}, y = () => typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches === !0, b = (e, t = y()) => t ? 0 : e, x = (e, t) => `${b(e, t)}s`;
+//#endregion
+export { c as _, b as a, g as c, p as d, d as f, l as g, n as h, y as i, u as l, t as m, v as n, f as o, e as p, x as r, h as s, _ as t, m as u, i as v, s as y };