@lovince/ui-vue 0.4.0 → 0.6.0

package/README.md

@@ -6,7 +6,7 @@ effects run through [`@lovince/ui-dom`](../ui-dom). This package subscribes to
 the machine, feeds props in, and renders what `connect()` returns. It holds no
 behaviour of its own.
 
-> **Status: `0.4.0`, experimental.** The API may change before `1.0`.
+> **Status: `0.6.0`, experimental.** The API may change before `1.0`.
 
 ```bash
 bun add @lovince/ui-vue

package/dist/components/display/timeline.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Orientation } from '@lovince/ui-headless';
+import { Orientation, TimelineAlign } from '@lovince/ui-headless';
 export declare const LvTimeline: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
@@ -13,6 +13,11 @@ export declare const LvTimeline: import('vue').DefineComponent<import('vue').Ext
         type: PropType<Orientation>;
         default: string;
     };
+    /** Which side of the rail content sits on; `alternate` zig-zags. Horizontal timelines put content below. */
+    align: {
+        type: PropType<TimelineAlign>;
+        default: string;
+    };
     reveal: {
         type: BooleanConstructor;
         default: boolean;
@@ -36,6 +41,11 @@ export declare const LvTimeline: import('vue').DefineComponent<import('vue').Ext
         type: PropType<Orientation>;
         default: string;
     };
+    /** Which side of the rail content sits on; `alternate` zig-zags. Horizontal timelines put content below. */
+    align: {
+        type: PropType<TimelineAlign>;
+        default: string;
+    };
     reveal: {
         type: BooleanConstructor;
         default: boolean;
@@ -50,6 +60,7 @@ export declare const LvTimeline: import('vue').DefineComponent<import('vue').Ext
     orientation: Orientation;
     reveal: boolean;
     current: number;
+    align: "start" | "end" | "alternate";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export declare const LvTimelineItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {

package/dist/components/navigation/pagination.d.ts

@@ -195,6 +195,113 @@ export declare const LvPaginationNext: import('vue').DefineComponent<import('vue
     asChild: boolean;
     label: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvPaginationFirst: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvPaginationLast: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** A page field for long lists: typing edits a draft, Enter or blur goes to that page. */
+export declare const LvPaginationInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** Announces the page politely when it changes. Defaults to "Page 4 of 12". */
+export declare const LvPaginationStatus: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: import('vue').PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export declare const LvPaginationEllipsis: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;

package/dist/components/primitives/icon.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IconFlip, IconName } from '@lovince/icons';
+import { IconAnimation, IconFlip, IconName, IconTrigger } from '@lovince/icons';
 export declare const LvIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     name: {
         type: PropType<IconName>;
@@ -33,6 +33,21 @@ export declare const LvIcon: import('vue').DefineComponent<import('vue').Extract
         type: StringConstructor;
         default: undefined;
     };
+    /** Motion from `@lovince/icons/style.css`. Omit for a still icon. */
+    animation: {
+        type: PropType<IconAnimation>;
+        default: undefined;
+    };
+    /** When it plays; each animation has a sensible default. */
+    trigger: {
+        type: PropType<IconTrigger>;
+        default: undefined;
+    };
+    /** `active` trigger: plays each time this turns true. `loop`: pauses while false. */
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -68,12 +83,30 @@ export declare const LvIcon: import('vue').DefineComponent<import('vue').Extract
         type: StringConstructor;
         default: undefined;
     };
+    /** Motion from `@lovince/icons/style.css`. Omit for a still icon. */
+    animation: {
+        type: PropType<IconAnimation>;
+        default: undefined;
+    };
+    /** When it plays; each animation has a sensible default. */
+    trigger: {
+        type: PropType<IconTrigger>;
+        default: undefined;
+    };
+    /** `active` trigger: plays each time this turns true. `loop`: pauses while false. */
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
     fill: number | boolean;
     size: string | number;
     label: string;
+    active: boolean;
+    trigger: "loop" | "active" | "hover" | "group-hover" | "press" | "in-view" | "mount";
     flip: IconFlip;
     rotate: string | number;
     strokeWidth: string | number;
     absoluteStrokeWidth: boolean;
+    animation: "pop" | "spin" | "pulse" | "bounce" | "wiggle" | "ring" | "nudge" | "draw";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/primitives/primitives.d.ts

@@ -1,13 +1,60 @@
 import { Component, PropType } from 'vue';
-export type TextRole = 'display-lg' | 'display-md' | 'display-sm' | 'headline-lg' | 'headline-md' | 'headline-sm' | 'title-lg' | 'title-md' | 'title-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'overline';
+export declare const TEXT_ROLES: readonly ["display-lg", "display-md", "display-sm", "headline-lg", "headline-md", "headline-sm", "title-lg", "title-md", "title-sm", "body-lg", "body-md", "body-sm", "label-lg", "label-md", "overline", "code"];
+export declare const TEXT_COLORS: readonly ["default", "muted", "subtle", "inverse", "accent", "success", "warning", "danger", "disabled"];
+export declare const TEXT_WEIGHTS: readonly ["medium", "semibold", "bold"];
+export declare const TEXT_ALIGNS: readonly ["start", "center", "end", "justify"];
+export declare const TEXT_WRAPS: readonly ["wrap", "nowrap", "balance", "pretty", "break"];
+export type TextRole = (typeof TEXT_ROLES)[number];
+export type TextColor = (typeof TEXT_COLORS)[number];
+export type TextWeight = (typeof TEXT_WEIGHTS)[number];
+export type TextAlign = (typeof TEXT_ALIGNS)[number];
+export type TextWrap = (typeof TEXT_WRAPS)[number];
 export declare const LvText: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    color: {
+        readonly type: PropType<TextColor>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    weight: {
+        readonly type: PropType<TextWeight>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    align: {
+        readonly type: PropType<TextAlign>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    wrap: {
+        readonly type: PropType<TextWrap>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    truncate: {
+        readonly type: PropType<boolean | number>;
+        readonly default: false;
+        readonly validator: (value: boolean | number) => boolean;
+    };
+    italic: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    underline: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    uppercase: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     as: {
         default: string;
         type: PropType<string | Component>;
     };
     variant: {
         readonly type: PropType<TextRole>;
-        readonly default: "body-md";
+        readonly default: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
+        readonly validator: (value: string) => boolean;
     };
     asChild: {
         readonly type: BooleanConstructor;
@@ -16,13 +63,51 @@ export declare const LvText: import('vue').DefineComponent<import('vue').Extract
 }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    color: {
+        readonly type: PropType<TextColor>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    weight: {
+        readonly type: PropType<TextWeight>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    align: {
+        readonly type: PropType<TextAlign>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    wrap: {
+        readonly type: PropType<TextWrap>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    truncate: {
+        readonly type: PropType<boolean | number>;
+        readonly default: false;
+        readonly validator: (value: boolean | number) => boolean;
+    };
+    italic: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    underline: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    uppercase: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     as: {
         default: string;
         type: PropType<string | Component>;
     };
     variant: {
         readonly type: PropType<TextRole>;
-        readonly default: "body-md";
+        readonly default: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
+        readonly validator: (value: string) => boolean;
     };
     asChild: {
         readonly type: BooleanConstructor;
@@ -31,9 +116,54 @@ export declare const LvText: import('vue').DefineComponent<import('vue').Extract
 }>> & Readonly<{}>, {
     as: string | Component;
     asChild: boolean;
-    variant: TextRole;
+    variant: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
+    color: "default" | "disabled" | "success" | "warning" | "accent" | "subtle" | "danger" | "muted" | "inverse";
+    align: "center" | "start" | "end" | "justify";
+    wrap: "nowrap" | "balance" | "wrap" | "pretty" | "break";
+    italic: boolean;
+    weight: "bold" | "medium" | "semibold";
+    underline: boolean;
+    uppercase: boolean;
+    truncate: number | boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export declare const LvHeading: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    color: {
+        readonly type: PropType<TextColor>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    weight: {
+        readonly type: PropType<TextWeight>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    align: {
+        readonly type: PropType<TextAlign>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    wrap: {
+        readonly type: PropType<TextWrap>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    truncate: {
+        readonly type: PropType<boolean | number>;
+        readonly default: false;
+        readonly validator: (value: boolean | number) => boolean;
+    };
+    italic: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    underline: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    uppercase: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     as: {
         type: PropType<string | Component>;
         default: undefined;
@@ -48,12 +178,50 @@ export declare const LvHeading: import('vue').DefineComponent<import('vue').Extr
         validator: (value: number) => boolean;
     };
     size: {
-        default: string;
-        type: PropType<TextRole>;
+        readonly type: PropType<TextRole>;
+        readonly default: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
+        readonly validator: (value: string) => boolean;
     };
 }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    color: {
+        readonly type: PropType<TextColor>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    weight: {
+        readonly type: PropType<TextWeight>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    align: {
+        readonly type: PropType<TextAlign>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    wrap: {
+        readonly type: PropType<TextWrap>;
+        readonly default: undefined;
+        readonly validator: (value: string) => boolean;
+    };
+    truncate: {
+        readonly type: PropType<boolean | number>;
+        readonly default: false;
+        readonly validator: (value: boolean | number) => boolean;
+    };
+    italic: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    underline: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    uppercase: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     as: {
         type: PropType<string | Component>;
         default: undefined;
@@ -68,13 +236,22 @@ export declare const LvHeading: import('vue').DefineComponent<import('vue').Extr
         validator: (value: number) => boolean;
     };
     size: {
-        default: string;
-        type: PropType<TextRole>;
+        readonly type: PropType<TextRole>;
+        readonly default: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
+        readonly validator: (value: string) => boolean;
     };
 }>> & Readonly<{}>, {
-    size: TextRole;
+    size: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
     as: string | Component;
     asChild: boolean;
+    color: "default" | "disabled" | "success" | "warning" | "accent" | "subtle" | "danger" | "muted" | "inverse";
+    align: "center" | "start" | "end" | "justify";
+    wrap: "nowrap" | "balance" | "wrap" | "pretty" | "break";
+    italic: boolean;
+    weight: "bold" | "medium" | "semibold";
+    underline: boolean;
+    uppercase: boolean;
+    truncate: number | boolean;
     level: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export declare const LvLabel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/icon.d.ts

@@ -1,2 +1,2 @@
 export { LvIcon } from './components/primitives/icon';
-export type { IconFlip, IconName } from '@lovince/icons';
+export type { IconAnimation, IconFlip, IconName, IconTrigger } from '@lovince/icons';

package/dist/icon.js

@@ -1,7 +1,7 @@
-import { computed as e, defineComponent as t, h as n } from "vue";
-import { CANVAS as r, paths as i, resolveFill as a, resolveGeometry as o } from "@lovince/icons";
+import { computed as e, defineComponent as t, h as n, onBeforeUnmount as r, ref as i, watch as a } from "vue";
+import { CANVAS as o, iconMotionAttrs as s, iconPathLength as c, observeInView as l, paths as u, resolveFill as d, resolveGeometry as f, resolveIconTrigger as p } from "@lovince/icons";
 //#region src/components/primitives/icon.ts
-var s = t({
+var m = t({
 	name: "LvIcon",
 	inheritAttrs: !1,
 	props: {
@@ -36,10 +36,31 @@ var s = t({
 		label: {
 			type: String,
 			default: void 0
+		},
+		animation: {
+			type: String,
+			default: void 0
+		},
+		trigger: {
+			type: String,
+			default: void 0
+		},
+		active: {
+			type: Boolean,
+			default: void 0
 		}
 	},
-	setup: (t, { attrs: s }) => {
-		let c = e(() => o({
+	setup: (t, { attrs: m }) => {
+		let h = i(null), g = i(!1), _ = null, v = () => {
+			_?.(), _ = null;
+		};
+		a([h, () => p({
+			animation: t.animation,
+			trigger: t.trigger
+		})], ([e, t]) => {
+			v(), e !== null && t === "in-view" && !g.value && (_ = l(e, () => g.value = !0));
+		}, { flush: "post" }), r(v);
+		let y = e(() => f({
 			size: t.size,
 			strokeWidth: t.strokeWidth,
 			absoluteStrokeWidth: t.absoluteStrokeWidth,
@@ -47,30 +68,38 @@ var s = t({
 			flip: t.flip
 		}));
 		return () => {
-			let e = i[t.name] ?? [], o = a(t.fill), l = t.label === void 0 || t.label.length === 0;
+			let e = u[t.name] ?? [], r = d(t.fill), i = t.label === void 0 || t.label.length === 0, a = {
+				animation: t.animation,
+				trigger: t.trigger,
+				active: t.active,
+				inView: g.value
+			}, l = c(a);
 			return n("svg", {
-				...s,
-				class: ["lovince-icon", s.class],
+				...m,
+				...s(a),
+				ref: h,
+				class: ["lovince-icon", m.class],
 				"data-icon": t.name,
 				xmlns: "http://www.w3.org/2000/svg",
-				width: c.value.size,
-				height: c.value.size,
-				viewBox: `0 0 ${r} ${r}`,
+				width: y.value.size,
+				height: y.value.size,
+				viewBox: `0 0 ${o} ${o}`,
 				fill: "none",
 				stroke: "currentColor",
-				"stroke-width": c.value.strokeWidth,
+				"stroke-width": y.value.strokeWidth,
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
-				"aria-hidden": l ? "true" : void 0,
-				role: l ? void 0 : "img",
-				"aria-label": l ? void 0 : t.label
-			}, [n("g", { transform: c.value.transform }, e.map((e) => n("path", {
+				"aria-hidden": i ? "true" : void 0,
+				role: i ? void 0 : "img",
+				"aria-label": i ? void 0 : t.label
+			}, [n("g", { transform: y.value.transform }, e.map((e) => n("path", {
 				d: e,
-				fill: o > 0 ? "currentColor" : "none",
-				"fill-opacity": o > 0 ? o : void 0
+				pathLength: l,
+				fill: r > 0 ? "currentColor" : "none",
+				"fill-opacity": r > 0 ? r : void 0
 			})))]);
 		};
 	}
 });
 //#endregion
-export { s as LvIcon };
+export { m as LvIcon };

package/dist/index.d.ts

@@ -41,7 +41,7 @@ export * from './components/forms/phone-input';
 export * from './components/layout/scroll-area';
 export { LvFieldRoot, LvFieldLabel, LvForm, LvInput, LvTextarea } from './components/forms/forms';
 export { LvButton, BUTTON_SHAPES, BUTTON_SIZES, BUTTON_VARIANTS, type ButtonShape, type ButtonSize, type ButtonVariant } from './components/primitives/button';
-export { LvAspectRatio, LvBox, LvCode, LvHeading, LvKbd, LvLabel, LvLink, LvSeparator, LvText, LvVisuallyHidden, type TextRole } from './components/primitives/primitives';
+export { LvAspectRatio, LvBox, LvCode, LvHeading, LvKbd, LvLabel, LvLink, LvSeparator, LvText, LvVisuallyHidden, TEXT_ALIGNS, TEXT_COLORS, TEXT_ROLES, TEXT_WEIGHTS, TEXT_WRAPS, type TextAlign, type TextColor, type TextRole, type TextWeight, type TextWrap, } from './components/primitives/primitives';
 export type { ActivationMode, CheckedState, DialogRole, Direction, Orientation } from '@lovince/ui-headless';
 export * from './components/display/feedback';
 export * from './components/display/meter';