@vizejs/ui 0.387.0 → 0.388.0

package/dist/grid-BSM9h2dL.d.mts

@@ -0,0 +1,154 @@
+import { t as PrimitiveAs } from "./primitive-BE2mdUcw.mjs";
+import { ComponentPublicInstance } from "vue";
+
+//#region src/families/layout/grid/grid-types.d.ts
+/** Native CSS `align-items` values supported by {@link Grid}. */
+type GridAlign = "stretch" | "start" | "center" | "end" | "baseline";
+/** Native CSS `justify-items` values supported by {@link Grid}. */
+type GridJustify = "stretch" | "start" | "center" | "end";
+/** Native CSS `grid-auto-flow` values supported by {@link Grid}. */
+type GridAutoFlow = "row" | "column" | "dense" | "row dense" | "column dense";
+/** CSS grid template columns accepted by {@link Grid}. Numbers resolve to equal fr tracks. */
+type GridColumns = string | number;
+/** Native CSS gap value accepted by {@link Grid}. Numbers resolve to px lengths. */
+type GridGap = string | number;
+/** CSS-ready grid template columns published after numeric columns are normalized. */
+type GridResolvedColumns = string;
+/** CSS-ready gap value published after numeric gaps are normalized. */
+type GridResolvedGap = string;
+/** Rendered value exposed by {@link Grid}. */
+type GridElement = Element | ComponentPublicInstance;
+/** Inline style hooks applied to the rendered Grid host. */
+interface GridStyle {
+  /** Consumer-overridable column hook read by the host `grid-template-columns` declaration. */
+  readonly "--vize-ui-grid-columns": GridResolvedColumns;
+  /** Consumer-overridable gap hook read by the host `gap` declaration. */
+  readonly "--vize-ui-grid-gap": GridResolvedGap;
+  /** Consumer-overridable row gap hook read by the host `row-gap` declaration. */
+  readonly "--vize-ui-grid-row-gap": GridResolvedGap;
+  /** Consumer-overridable column gap hook read by the host `column-gap` declaration. */
+  readonly "--vize-ui-grid-column-gap": GridResolvedGap;
+  /** Consumer-overridable alignment hook read by the host `align-items` declaration. */
+  readonly "--vize-ui-grid-align": GridAlign;
+  /** Consumer-overridable justification hook read by the host `justify-items` declaration. */
+  readonly "--vize-ui-grid-justify": GridJustify;
+  /** Consumer-overridable auto-flow hook read by the host `grid-auto-flow` declaration. */
+  readonly "--vize-ui-grid-auto-flow": GridAutoFlow;
+  /** Native grid layout mode. */
+  readonly display: "grid";
+  /** Native track list declaration. */
+  readonly gridTemplateColumns: string;
+  /** Native auto-placement declaration. */
+  readonly gridAutoFlow: string;
+  /** Native child spacing declaration. */
+  readonly gap: string;
+  /** Native row spacing declaration. */
+  readonly rowGap: string;
+  /** Native column spacing declaration. */
+  readonly columnGap: string;
+  /** Native block-axis item alignment declaration. */
+  readonly alignItems: string;
+  /** Native inline-axis item alignment declaration. */
+  readonly justifyItems: string;
+}
+/** State exposed to the default Grid slot. */
+interface GridSlotState {
+  /** Resolved CSS grid template columns value. */
+  readonly columns: GridResolvedColumns;
+  /** Resolved CSS gap value between direct children. */
+  readonly gap: GridResolvedGap;
+  /** Resolved CSS row gap value between direct children. */
+  readonly rowGap: GridResolvedGap;
+  /** Resolved CSS column gap value between direct children. */
+  readonly columnGap: GridResolvedGap;
+  /** Native CSS `align-items` value for grid items. */
+  readonly align: GridAlign;
+  /** Native CSS `justify-items` value for grid items. */
+  readonly justify: GridJustify;
+  /** Native CSS `grid-auto-flow` value for auto placement. */
+  readonly autoFlow: GridAutoFlow;
+  /** Native CSS grid style object applied to the host. */
+  readonly style: GridStyle;
+}
+/** Resolved layout state published by {@link Grid}. */
+type GridResolvedLayout = GridSlotState;
+/** Public instance state exposed by the Grid primitive. */
+interface GridExpose extends GridSlotState {
+  /** Rendered host element or component instance. */
+  readonly element: GridElement | null;
+}
+//#endregion
+//#region src/families/layout/grid/grid.vue.d.ts
+type __VLS_Props = {
+  /**
+   * Native element, custom element, or component to render.
+   *
+   * @default "div"
+   */
+  readonly as?: PrimitiveAs;
+  /**
+   * Native CSS `grid-template-columns` value. Numbers resolve to equal fr tracks.
+   *
+   * @default 1
+   */
+  readonly columns?: GridColumns;
+  /**
+   * Native CSS `gap` value between direct children. Numbers resolve to px lengths.
+   *
+   * @default 0
+   */
+  readonly gap?: GridGap;
+  /**
+   * Native CSS `row-gap` override. Numbers resolve to px lengths.
+   *
+   * @default undefined
+   */
+  readonly rowGap?: GridGap;
+  /**
+   * Native CSS `column-gap` override. Numbers resolve to px lengths.
+   *
+   * @default undefined
+   */
+  readonly columnGap?: GridGap;
+  /**
+   * Native CSS `align-items` value for grid items.
+   *
+   * @default "stretch"
+   */
+  readonly align?: GridAlign;
+  /**
+   * Native CSS `justify-items` value for grid items.
+   *
+   * @default "stretch"
+   */
+  readonly justify?: GridJustify;
+  /**
+   * Native CSS `grid-auto-flow` auto-placement mode.
+   *
+   * @default "row"
+   */
+  readonly autoFlow?: GridAutoFlow;
+};
+type __VLS_Slots = {
+  /** Renders grid children with the resolved native grid state. */default(props: GridSlotState): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+  align: import("vue").ComputedRef<GridAlign>;
+  autoFlow: import("vue").ComputedRef<GridAutoFlow>;
+  columnGap: import("vue").ComputedRef<string>;
+  columns: import("vue").ComputedRef<string>;
+  element: Readonly<import("vue").ShallowRef<GridElement | null>>;
+  gap: import("vue").ComputedRef<string>;
+  justify: import("vue").ComputedRef<GridJustify>;
+  rowGap: import("vue").ComputedRef<string>;
+  style: import("vue").ComputedRef<GridStyle>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { GridElement as a, GridJustify as c, GridResolvedLayout as d, GridSlotState as f, GridColumns as i, GridResolvedColumns as l, GridAlign as n, GridExpose as o, GridStyle as p, GridAutoFlow as r, GridGap as s, _default as t, GridResolvedGap as u };

package/dist/grid-DeC4Wn7Y.mjs

@@ -0,0 +1,157 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, useTemplateRef, withCtx } from "vue";
+function normalizeGridColumns(columns) {
+	if (typeof columns === "string") return columns;
+	if (!Number.isInteger(columns) || columns < 1) return "repeat(1, minmax(0, 1fr))";
+	return `repeat(${columns}, minmax(0, 1fr))`;
+}
+function normalizeGridGap(gap) {
+	if (typeof gap === "string") return gap;
+	if (!Number.isFinite(gap) || gap < 0) return "0";
+	return gap === 0 ? "0" : `${gap}px`;
+}
+/** Resolve public Grid props into a native CSS grid contract. */
+function resolveGridLayout(options) {
+	const align = options.align ?? "stretch";
+	const autoFlow = options.autoFlow ?? "row";
+	const columns = normalizeGridColumns(options.columns ?? 1);
+	const gap = normalizeGridGap(options.gap ?? 0);
+	const justify = options.justify ?? "stretch";
+	const rowGap = normalizeGridGap(options.rowGap ?? gap);
+	const columnGap = normalizeGridGap(options.columnGap ?? gap);
+	return {
+		align,
+		autoFlow,
+		columnGap,
+		columns,
+		gap,
+		justify,
+		rowGap,
+		style: {
+			"--vize-ui-grid-align": align,
+			"--vize-ui-grid-auto-flow": autoFlow,
+			"--vize-ui-grid-column-gap": columnGap,
+			"--vize-ui-grid-columns": columns,
+			"--vize-ui-grid-gap": gap,
+			"--vize-ui-grid-justify": justify,
+			"--vize-ui-grid-row-gap": rowGap,
+			alignItems: "var(--vize-ui-grid-align)",
+			columnGap: "var(--vize-ui-grid-column-gap)",
+			display: "grid",
+			gap: "var(--vize-ui-grid-gap)",
+			gridAutoFlow: "var(--vize-ui-grid-auto-flow)",
+			gridTemplateColumns: "var(--vize-ui-grid-columns)",
+			justifyItems: "var(--vize-ui-grid-justify)",
+			rowGap: "var(--vize-ui-grid-row-gap)"
+		}
+	};
+}
+//#endregion
+//#region src/families/layout/grid/grid.vue
+var grid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "grid",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		columns: {
+			type: [String, Number],
+			required: false,
+			default: 1
+		},
+		gap: {
+			type: [String, Number],
+			required: false,
+			default: 0
+		},
+		rowGap: {
+			type: [String, Number],
+			required: false
+		},
+		columnGap: {
+			type: [String, Number],
+			required: false
+		},
+		align: {
+			type: String,
+			required: false,
+			default: "stretch"
+		},
+		justify: {
+			type: String,
+			required: false,
+			default: "stretch"
+		},
+		autoFlow: {
+			type: String,
+			required: false,
+			default: "row"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const element = useTemplateRef("element");
+		const layout = computed(() => resolveGridLayout({
+			align: __props.align,
+			autoFlow: __props.autoFlow,
+			columnGap: __props.columnGap,
+			columns: __props.columns,
+			gap: __props.gap,
+			justify: __props.justify,
+			rowGap: __props.rowGap
+		}));
+		const alignState = computed(() => layout.value.align);
+		const autoFlowState = computed(() => layout.value.autoFlow);
+		const columnGapState = computed(() => layout.value.columnGap);
+		const columnsState = computed(() => layout.value.columns);
+		const gapState = computed(() => layout.value.gap);
+		const justifyState = computed(() => layout.value.justify);
+		const rowGapState = computed(() => layout.value.rowGap);
+		const gridStyle = computed(() => layout.value.style);
+		const slotState = computed(() => ({
+			align: alignState.value,
+			autoFlow: autoFlowState.value,
+			columnGap: columnGapState.value,
+			columns: columnsState.value,
+			gap: gapState.value,
+			justify: justifyState.value,
+			rowGap: rowGapState.value,
+			style: gridStyle.value
+		}));
+		const intrinsicProps = computed(() => ({ style: gridStyle.value }));
+		__expose({
+			align: alignState,
+			autoFlow: autoFlowState,
+			columnGap: columnGapState,
+			columns: columnsState,
+			element,
+			gap: gapState,
+			justify: justifyState,
+			rowGap: rowGapState,
+			style: gridStyle
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				ref_key: "element",
+				ref: element,
+				part: "root",
+				"data-vize-ui": "grid",
+				"data-columns": columnsState.value,
+				"data-auto-flow": autoFlowState.value,
+				"data-align": alignState.value,
+				"data-justify": justifyState.value
+			}, intrinsicProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 16, [
+				"data-columns",
+				"data-auto-flow",
+				"data-align",
+				"data-justify"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-9c98b9c3"]]);
+//#endregion
+export { grid_default as t };

package/dist/grid.d.mts

@@ -0,0 +1,2 @@
+import { a as GridElement, c as GridJustify, d as GridResolvedLayout, f as GridSlotState, i as GridColumns, l as GridResolvedColumns, n as GridAlign, o as GridExpose, p as GridStyle, r as GridAutoFlow, s as GridGap, t as _default, u as GridResolvedGap } from "./grid-BSM9h2dL.mjs";
+export { _default as Grid, type GridAlign, type GridAutoFlow, type GridColumns, type GridElement, type GridExpose, type GridGap, type GridJustify, type GridResolvedColumns, type GridResolvedGap, type GridResolvedLayout, type GridSlotState, type GridStyle };

package/dist/grid.mjs

@@ -0,0 +1,2 @@
+import { t as grid_default } from "./grid-DeC4Wn7Y.mjs";
+export { grid_default as Grid };

package/dist/heading-DToVOKV3.mjs

@@ -0,0 +1,86 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, useTemplateRef, withCtx } from "vue";
+//#endregion
+//#region src/families/typography/heading/heading.vue
+var heading_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "heading",
+	props: {
+		as: {
+			type: null,
+			required: false
+		},
+		level: {
+			type: Number,
+			required: false,
+			default: 2
+		},
+		size: {
+			type: String,
+			required: false,
+			default: "md"
+		},
+		weight: {
+			type: String,
+			required: false,
+			default: "semibold"
+		},
+		tone: {
+			type: String,
+			required: false,
+			default: "neutral"
+		},
+		truncate: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const element = useTemplateRef("element");
+		const levelState = computed(() => __props.level);
+		const sizeState = computed(() => __props.size);
+		const weightState = computed(() => __props.weight);
+		const toneState = computed(() => __props.tone);
+		const truncateState = computed(() => __props.truncate);
+		const resolvedAs = computed(() => __props.as ?? `h${levelState.value}`);
+		const slotState = computed(() => ({
+			level: levelState.value,
+			size: sizeState.value,
+			tone: toneState.value,
+			truncate: truncateState.value,
+			weight: weightState.value
+		}));
+		__expose({
+			element,
+			level: levelState,
+			size: sizeState,
+			tone: toneState,
+			truncate: truncateState,
+			weight: weightState
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(resolvedAs.value), {
+				ref_key: "element",
+				ref: element,
+				part: "root",
+				"data-vize-ui": "heading",
+				"data-level": levelState.value,
+				"data-size": sizeState.value,
+				"data-weight": weightState.value,
+				"data-tone": toneState.value,
+				"data-truncate": truncateState.value ? "true" : "false"
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"data-level",
+				"data-size",
+				"data-weight",
+				"data-tone",
+				"data-truncate"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-b7805069"]]);
+//#endregion
+export { heading_default as t };

package/dist/heading.d.mts

@@ -0,0 +1,2 @@
+import { $n as HeadingSize, Qn as HeadingLevel, Xn as HeadingElement, Yn as _default, Zn as HeadingExpose, er as HeadingSlotState, nr as HeadingWeight, tr as HeadingTone } from "./announcer-DGr2Iz0i.mjs";
+export { _default as Heading, type HeadingElement, type HeadingExpose, type HeadingLevel, type HeadingSize, type HeadingSlotState, type HeadingTone, type HeadingWeight };

package/dist/heading.mjs

@@ -0,0 +1,2 @@
+import { t as heading_default } from "./heading-DToVOKV3.mjs";
+export { heading_default as Heading };