@lovince/ui-vue 0.1.1 → 0.2.0

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

@@ -0,0 +1,300 @@
+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 LvText: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | Component>;
+    };
+    variant: {
+        readonly type: PropType<TextRole>;
+        readonly default: "body-md";
+    };
+    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: PropType<string | Component>;
+    };
+    variant: {
+        readonly type: PropType<TextRole>;
+        readonly default: "body-md";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | Component;
+    asChild: boolean;
+    variant: TextRole;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvHeading: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        type: PropType<string | Component>;
+        default: undefined;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    size: {
+        default: string;
+        type: PropType<TextRole>;
+    };
+}>, () => 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: {
+        type: PropType<string | Component>;
+        default: undefined;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    size: {
+        default: string;
+        type: PropType<TextRole>;
+    };
+}>> & Readonly<{}>, {
+    size: TextRole;
+    as: string | Component;
+    asChild: boolean;
+    level: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvLabel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | 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: PropType<string | Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvLink: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | 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: PropType<string | Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvCode: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | 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: PropType<string | Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvKbd: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | 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: PropType<string | Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvBox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly type: PropType<string | Component>;
+        readonly default: "div";
+    };
+    readonly 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<{
+    readonly as: {
+        readonly type: PropType<string | Component>;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    readonly as: string | Component;
+    readonly asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvAspectRatio: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    ratio: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    as: {
+        readonly type: PropType<string | Component>;
+        readonly default: "div";
+    };
+    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<{
+    ratio: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    as: {
+        readonly type: PropType<string | Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | Component;
+    asChild: boolean;
+    ratio: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvVisuallyHidden: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | 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: PropType<string | Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvSeparator: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    decorative: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    as: {
+        readonly type: PropType<string | Component>;
+        readonly default: "div";
+    };
+    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<{
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    decorative: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    as: {
+        readonly type: PropType<string | Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | Component;
+    asChild: boolean;
+    orientation: "horizontal" | "vertical";
+    decorative: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/composables/data-table.d.ts

@@ -5,7 +5,6 @@ export interface DataTableOptions<T extends Readonly<Record<string, unknown>>, C
     readonly columns: () => readonly C[];
     readonly hidden: () => readonly string[];
     readonly rowKey: () => string;
-    /** `client` sorts the loaded rows; `server` only reports the sort so the caller can refetch. */
     readonly sortMode: () => 'client' | 'server';
     readonly sort: Ref<TableSort | null>;
     readonly selected: Ref<RowKey[]>;
@@ -21,5 +20,4 @@ export interface DataTable<T, C extends TableColumn> {
     readonly togglePage: () => void;
     readonly toggleSort: (key: string) => void;
 }
-/** State and derivations for a column-driven table, with no markup attached. */
 export declare const useDataTable: <T extends Readonly<Record<string, unknown>>, C extends TableColumn>(options: DataTableOptions<T, C>) => DataTable<T, C>;

package/dist/composables/observers.d.ts

@@ -9,31 +9,22 @@ export declare const useScrollEdges: (target: ElementRef) => {
     readonly measure: () => void;
 };
 export type ActiveSectionOptions = {
-    /** Where the reading line sits, as a share of the viewport's height. */
     readonly line?: number;
 };
 export declare const useActiveSection: (ids: () => readonly string[], options?: ActiveSectionOptions) => Ref<string | undefined>;
 export type VirtualListOptions = {
     readonly count: () => number;
-    /** Every row's height, in pixels. */
     readonly itemSize: () => number;
     readonly overscan?: () => number;
 };
 export type VirtualList = {
     readonly range: ComputedRef<VirtualRange>;
-    /** Scrolls so a row is in view, including one that is not rendered yet. */
     readonly scrollToIndex: (index: number, align?: ScrollAlign) => void;
     readonly viewportHeight: Ref<number>;
 };
-/**
- * Renders only the rows in view of a scrolling container. Without a
- * measurable container — tests, server rendering — it renders a first screenful.
- */
 export declare const useVirtualList: (container: ElementRef, options: VirtualListOptions) => VirtualList;
 export type Clipboard = {
-    /** True for a moment after a copy succeeds. */
     readonly copied: Ref<boolean>;
-    /** True after a copy fails, until the next attempt. */
     readonly failed: Ref<boolean>;
     readonly copy: (text: string) => Promise<boolean>;
 };

package/dist/composables/presence.d.ts

@@ -1,7 +1,2 @@
 import { Ref } from 'vue';
-/**
- * Keeps an element mounted after `open` turns false until its exit animation
- * ends, so `data-state="closed"` animations can play. With no animation, or
- * reduced motion, it unmounts at once.
- */
 export declare const usePresence: (open: () => boolean, element: () => HTMLElement | null) => Ref<boolean>;

package/dist/icon.d.ts

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

package/dist/icon.js

@@ -0,0 +1,76 @@
+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";
+//#region src/components/primitives/icon.ts
+var s = t({
+	name: "LvIcon",
+	inheritAttrs: !1,
+	props: {
+		name: {
+			type: String,
+			required: !0
+		},
+		size: {
+			type: [Number, String],
+			default: void 0
+		},
+		strokeWidth: {
+			type: [Number, String],
+			default: void 0
+		},
+		absoluteStrokeWidth: {
+			type: Boolean,
+			default: !1
+		},
+		fill: {
+			type: [Number, Boolean],
+			default: void 0
+		},
+		rotate: {
+			type: [Number, String],
+			default: void 0
+		},
+		flip: {
+			type: String,
+			default: void 0
+		},
+		label: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup: (t, { attrs: s }) => {
+		let c = e(() => o({
+			size: t.size,
+			strokeWidth: t.strokeWidth,
+			absoluteStrokeWidth: t.absoluteStrokeWidth,
+			rotate: t.rotate,
+			flip: t.flip
+		}));
+		return () => {
+			let e = i[t.name] ?? [], o = a(t.fill), l = t.label === void 0 || t.label.length === 0;
+			return n("svg", {
+				...s,
+				class: ["lovince-icon", s.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}`,
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": c.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", {
+				d: e,
+				fill: o > 0 ? "currentColor" : "none",
+				"fill-opacity": o > 0 ? o : void 0
+			})))]);
+		};
+	}
+});
+//#endregion
+export { s as LvIcon };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { Primitive, Slot, primitiveProps } from './shared/primitive';
-export { Portal } from './shared/portal';
+export { LvPrimitive, LvSlot, primitiveProps } from './shared/primitive';
+export { LvPortal } from './shared/portal';
 export { toElement, useIdWatch, type ElementRef } from './shared/element';
 export { normalizeProps, useMachine, type MachineBinding, type UseMachineOptions } from './shared/machine';
 export { useListEnv, type ListBinding } from './shared/list';
@@ -8,30 +8,63 @@ export { usePresence } from './composables/presence';
 export { useDataTable, type DataTable, type DataTableOptions } from './composables/data-table';
 export { useActiveSection, useClipboard, useInView, useScrollEdges, useVirtualList, type ActiveSectionOptions, type Clipboard, type InViewOptions, type VirtualList, type VirtualListOptions, } from './composables/observers';
 export { scrollLockCount } from '@lovince/ui-dom';
-export { DisclosureRoot, DisclosureTrigger, DisclosureContent, injectDisclosure } from './components/disclosure';
-export { CheckboxRoot, CheckboxIndicator, SwitchRoot, SwitchThumb } from './components/toggles';
-export { TabsRoot, TabsList, TabsTrigger, TabsContent } from './components/tabs';
-export { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, } from './components/dialog';
-export * from './components/popover';
-export * from './components/tooltip';
-export * from './components/menu';
-export * from './components/select';
-export * from './components/combobox';
-export * from './components/command';
-export * from './components/navigation-menu';
-export * from './components/accordion';
-export * from './components/radio-group';
-export * from './components/toggle-group';
-export * from './components/slider';
-export * from './components/number-field';
-export * from './components/pin-input';
-export * from './components/progress';
-export * from './components/avatar';
-export * from './components/calendar';
-export * from './components/toast';
-export * from './components/splitter';
-export * from './components/tree';
-export * from './components/carousel';
-export * from './components/sortable';
-export * from './components/emoji-picker';
+export { LvDisclosureRoot, LvDisclosureTrigger, LvDisclosureContent, injectDisclosure } from './components/disclosure/disclosure';
+export { LvCheckboxRoot, LvCheckboxIndicator, LvSwitchRoot, LvSwitchThumb } from './components/choice/toggles';
+export { LvTabsRoot, LvTabsList, LvTabsTrigger, LvTabsContent } from './components/disclosure/tabs';
+export { LvDialogRoot, LvDialogTrigger, LvDialogPortal, LvDialogOverlay, LvDialogContent, LvDialogTitle, LvDialogDescription, LvDialogClose, LvAlertDialogRoot, LvAlertDialogTrigger, LvAlertDialogPortal, LvAlertDialogOverlay, LvAlertDialogContent, LvAlertDialogTitle, LvAlertDialogDescription, LvAlertDialogAction, LvAlertDialogCancel, } from './components/overlays/dialog';
+export * from './components/overlays/popover';
+export * from './components/overlays/tooltip';
+export * from './components/overlays/menu';
+export * from './components/choice/select';
+export * from './components/choice/combobox';
+export * from './components/choice/command';
+export * from './components/overlays/navigation-menu';
+export * from './components/disclosure/accordion';
+export * from './components/choice/radio-group';
+export * from './components/choice/toggle-group';
+export * from './components/inputs/slider';
+export * from './components/inputs/number-field';
+export * from './components/inputs/pin-input';
+export * from './components/display/progress';
+export * from './components/display/avatar';
+export * from './components/inputs/calendar';
+export * from './components/overlays/toast';
+export * from './components/layout/splitter';
+export * from './components/layout/tree';
+export * from './components/layout/carousel';
+export * from './components/layout/sortable';
+export * from './components/choice/emoji-picker';
+export * from './components/forms/tags-input';
+export * from './components/forms/file-upload';
+export * from './components/forms/time-field';
+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 type { ActivationMode, CheckedState, DialogRole, Direction, Orientation } from '@lovince/ui-headless';
+export * from './components/display/feedback';
+export * from './components/display/meter';
+export * from './components/display/stat';
+export * from './components/display/timeline';
+export * from './components/display/avatar-group';
+export * from './components/display/image';
+export * from './components/display/table';
+export * from './components/choice/rating';
+export * from './components/choice/segmented-control';
+export * from './components/forms/text-inputs';
+export * from './components/forms/editable';
+export * from './components/forms/color-picker';
+export * from './components/forms/signature-pad';
+export * from './components/forms/date-picker';
+export * from './components/overlays/menubar';
+export * from './components/overlays/sheet';
+export * from './components/navigation/breadcrumb';
+export * from './components/navigation/pagination';
+export * from './components/navigation/stepper';
+export * from './components/navigation/toolbar';
+export * from './components/navigation/sidebar';
+export * from './components/navigation/table-of-contents';
+export * from './components/layout/primitives';
+export * from './components/layout/virtual-list';
+export * from './components/layout/marquee';