@bridge-ui/vue 0.0.0

package/dist/Components/ListItem/composables/useListItem.d.ts

@@ -0,0 +1,40 @@
+import { useSlots, Slot } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { ListItemOwnProps, ListItemProps } from '../listItem.types';
+type ListItemLibDefaults = LibDefaultsShape<ListItemOwnProps, "role" | "align">;
+type ListItemMerged = MergeLibDefaults<ListItemOwnProps, ListItemLibDefaults>;
+export declare function useListItem(props: ListItemOwnProps, libDefaults: ListItemLibDefaults, slots: ReturnType<typeof useSlots>): {
+    merged: import('vue').ComputedRef<ListItemMerged>;
+    hasEnd: import('vue').ComputedRef<boolean>;
+    endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "classes" | "customProps" | "primary" | "secondary" | "as" | "disabled" | "dense" | "align" | "divider" | "interactive" | "selected">, never>>>;
+    rowClass: import('vue').ComputedRef<string>;
+    hasStart: import('vue').ComputedRef<boolean>;
+    startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    hasPrimary: import('vue').ComputedRef<boolean>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    primaryBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    hasSecondary: import('vue').ComputedRef<boolean>;
+    secondaryBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    interactiveBind: import('vue').ComputedRef<({
+        role: NonNullable<"button" | "option" | "menuitem" | undefined>;
+        tabindex: number;
+        "aria-disabled": boolean | undefined;
+        "data-selected": boolean | undefined;
+        class: string;
+    } & object & Record<"class", string>) | null>;
+};
+export declare function resolveListItemPrimary(slots: ReturnType<typeof useSlots>, primary?: string): Slot | (() => null | string);
+export {};

package/dist/Components/ListItem/composables/useListItem.js

@@ -0,0 +1,104 @@
+import { hasNamedSlot as e, isPropPresent as t, resolveNamedSlot as n } from "../../../Utils/slotOrProp.js";
+import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
+import { LIST_INJECTION_KEY as o } from "../../List/listInjectionKey.js";
+import { computed as s, getCurrentInstance as c, inject as l, toValue as u, useAttrs as d } from "vue";
+import { get as f, omit as p } from "es-toolkit/compat";
+import { cn as m, mergeBridgeUILayeredClasses as h, splitComponentProps as g } from "@bridge-ui/core";
+import { alignProps as _ } from "@bridge-ui/core/Components/ListItem";
+//#region src/Components/ListItem/composables/useListItem.ts
+var v = [
+	"as",
+	"role",
+	"align",
+	"dense",
+	"classes",
+	"divider",
+	"primary",
+	"disabled",
+	"selected",
+	"secondary",
+	"customProps",
+	"interactive"
+];
+function y(t, n, y) {
+	let b = d(), x = l(o, null), S = s(() => g({
+		props: {
+			...b,
+			...t
+		},
+		bridgeKeys: v
+	})), { merged: C, entry: w } = i({
+		libDefaults: n,
+		componentName: "ListItem",
+		props: () => S.value.componentProps
+	}), T = s(() => C.value.customProps), E = a({
+		entry: w,
+		props: () => S.value.componentProps
+	}), D = s(() => "dense" in (c()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : x ? u(x).dense : !1), O = s(() => f(h(_, w.value?.customProps?.align), C.value.align)), k = s(() => e(y, "primary") || e(y, "default") || !!C.value.primary), A = s(() => e(y, "secondary") || !!C.value.secondary), j = s(() => e(y, "start")), M = s(() => e(y, "end")), N = s(() => p(S.value.inheritedAttrs, [])), P = s(() => r(T.value?.root, N.value, { class: m({
+		"list-none": !0,
+		"border-b border-black/10 last:border-b-0": C.value.divider,
+		[f(E.value, "root") ?? ""]: !0
+	}) })), F = s(() => C.value.interactive ? r(T.value?.interactive, {}, {
+		role: C.value.role,
+		tabindex: C.value.disabled ? -1 : 0,
+		"aria-disabled": C.value.disabled ? !0 : void 0,
+		"data-selected": C.value.selected ? !0 : void 0,
+		class: m({
+			"flex w-full min-w-0 gap-x-3 text-left outline-hidden transition-colors": !0,
+			"cursor-pointer select-none": !C.value.disabled,
+			"px-4": !0,
+			"py-2": !D.value,
+			"py-1.5": D.value,
+			"hover:bg-black/5 focus-visible:bg-black/5": !C.value.disabled,
+			"bg-primary-50 text-primary-700": C.value.selected,
+			"opacity-50 pointer-events-none": C.value.disabled,
+			[O.value ?? ""]: !0,
+			[f(E.value, "interactive") ?? ""]: !0
+		})
+	}) : null), I = s(() => m({
+		"flex w-full min-w-0 gap-x-3": !0,
+		"px-4": !C.value.interactive,
+		"py-2": !C.value.interactive && !D.value,
+		"py-1.5": !C.value.interactive && D.value,
+		[O.value ?? ""]: !C.value.interactive
+	})), L = s(() => r(T.value?.start, {}, { class: m({
+		"flex shrink-0": !0,
+		[f(E.value, "start") ?? ""]: !0
+	}) })), R = s(() => r(T.value?.content, {}, { class: m({
+		"min-w-0 flex-1": !0,
+		[f(E.value, "content") ?? ""]: !0
+	}) })), z = s(() => r(T.value?.primary, {}, { class: m({
+		"block truncate text-sm font-medium": !0,
+		[f(E.value, "primary") ?? ""]: !0
+	}) })), B = s(() => r(T.value?.secondary, {}, { class: m({
+		"mt-0.5 block truncate text-xs text-dark-500": !0,
+		[f(E.value, "secondary") ?? ""]: !0
+	}) }));
+	return {
+		merged: C,
+		hasEnd: M,
+		endBind: s(() => r(T.value?.end, {}, { class: m({
+			"ml-auto flex shrink-0 items-center": !0,
+			[f(E.value, "end") ?? ""]: !0
+		}) })),
+		rootBind: P,
+		rowClass: I,
+		hasStart: j,
+		startBind: L,
+		hasPrimary: k,
+		contentBind: R,
+		primaryBind: z,
+		hasSecondary: A,
+		secondaryBind: B,
+		interactiveBind: F
+	};
+}
+function b(r, i) {
+	if (e(r, "primary")) return n(r, "primary");
+	if (e(r, "default")) return n(r, "default");
+	if (!t(i)) return () => null;
+	let a = String(i);
+	return () => a;
+}
+//#endregion
+export { b as resolveListItemPrimary, y as useListItem };

package/dist/Components/ListItem/index.d.ts

@@ -0,0 +1,3 @@
+export { useListItem } from './composables/useListItem';
+export type { ListItemAlignOverrides, ListItemClasses, ListItemCustomProps, ListItemOwnProps, ListItemProps, ListItemSlots, } from './listItem.types';
+export { default as ListItem } from './ListItem.vue';

package/dist/Components/ListItem/index.js

@@ -0,0 +1,3 @@
+import { useListItem as e } from "./composables/useListItem.js";
+import t from "./ListItem.js";
+export { t as ListItem, e as useListItem };

package/dist/Components/ListItem/listItem.types.d.ts

@@ -0,0 +1,164 @@
+import { HTMLAttributes, Slot, VNode } from 'vue';
+import { ListItemAlign, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+export interface ListItemAlignOverrides {}
+export interface ListItemClasses {
+    /**
+     * The classes to apply to the main content column.
+     */
+    content?: string;
+    /**
+     * The classes to apply to the trailing slot.
+     */
+    end?: string;
+    /**
+     * The classes to apply to the interactive wrapper.
+     */
+    interactive?: string;
+    /**
+     * The classes to apply to the primary text.
+     */
+    primary?: string;
+    /**
+     * The classes to apply to the root.
+     */
+    root?: string;
+    /**
+     * The classes to apply to the secondary text.
+     */
+    secondary?: string;
+    /**
+     * The classes to apply to the leading slot.
+     */
+    start?: string;
+}
+export interface ListItemCustomProps {
+    /**
+     * Props forwarded to the main content column.
+     */
+    content?: HTMLAttributes;
+    /**
+     * Props forwarded to the trailing slot wrapper.
+     */
+    end?: HTMLAttributes;
+    /**
+     * Props forwarded to the interactive wrapper.
+     */
+    interactive?: HTMLAttributes;
+    /**
+     * Props forwarded to the primary text.
+     */
+    primary?: HTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the secondary text.
+     */
+    secondary?: HTMLAttributes;
+    /**
+     * Props forwarded to the leading slot wrapper.
+     */
+    start?: HTMLAttributes;
+}
+/**
+ * List row (MUI `ListItem` / `ListItemButton`-like).
+ */
+export interface ListItemOwnProps {
+    /**
+     * Vertical alignment of start/content/end slots.
+     *
+     * @default "center"
+     */
+    align?: MergeProps<ListItemAlign, ListItemAlignOverrides>;
+    /**
+     * The element to render as.
+     *
+     * @default "li"
+     */
+    as?: "li" | "div";
+    /**
+     * The classes to apply to the item.
+     *
+     * @default undefined
+     */
+    classes?: ListItemClasses;
+    /**
+     * Props forwarded to each item part.
+     *
+     * @default undefined
+     */
+    customProps?: ListItemCustomProps;
+    /**
+     * Compact vertical padding. Inherits `dense` from parent `List` when omitted.
+     *
+     * @default undefined
+     */
+    dense?: boolean;
+    /**
+     * When true, the item is not interactive and appears muted.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When true, renders a bottom divider on the item.
+     *
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * When true, applies hover/focus styles and `tabIndex={0}` on the inner wrapper.
+     *
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Primary label text.
+     *
+     * @default undefined
+     */
+    primary?: string;
+    /**
+     * ARIA role for the interactive wrapper.
+     *
+     * @default "button"
+     */
+    role?: "button" | "option" | "menuitem";
+    /**
+     * Secondary/description text below the primary line.
+     *
+     * @default undefined
+     */
+    secondary?: string;
+    /**
+     * When true, highlights the item as selected.
+     *
+     * @default false
+     */
+    selected?: boolean;
+}
+export type ListItemPrimaryContent = VNode | string | VNode[] | undefined;
+export interface ListItemSlots {
+    /**
+     * Default slot — used as primary content when `primary` is not set.
+     */
+    default?: Slot<undefined>;
+    /**
+     * Trailing content.
+     */
+    end?: Slot<undefined>;
+    /**
+     * Primary label markup.
+     */
+    primary?: Slot<undefined>;
+    /**
+     * Secondary/description markup.
+     */
+    secondary?: Slot<undefined>;
+    /**
+     * Leading content.
+     */
+    start?: Slot<undefined>;
+}
+export type ListItemProps = MergeHtmlProps<ListItemOwnProps, HTMLAttributes>;

package/dist/Components/ListSection/ListSection.js

@@ -0,0 +1,5 @@
+import e from "./ListSection.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/ListSection/ListSection.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/ListSection/ListSection.vue.d.ts

@@ -0,0 +1,15 @@
+import { ListSectionOwnProps, ListSectionSlots } from './listSection.types';
+type __VLS_Slots = ListSectionSlots;
+declare const __VLS_base: import('vue').DefineComponent<ListSectionOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListSectionOwnProps> & Readonly<{}>, {
+    as: "li" | "div";
+    inset: boolean;
+    sticky: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/ListSection/ListSection.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { useListSection as e } from "./composables/useListSection.js";
+import { computed as t, createBlock as n, createElementBlock as r, createElementVNode as i, defineComponent as a, guardReactiveProps as o, mergeProps as s, normalizeProps as c, openBlock as l, resolveDynamicComponent as u, unref as d, useSlots as f, withCtx as p } from "vue";
+//#region src/Components/ListSection/ListSection.vue?vue&type=script&setup=true&lang.ts
+var m = /* @__PURE__ */ a({
+	inheritAttrs: !1,
+	__name: "ListSection",
+	props: {
+		as: { default: "li" },
+		classes: {},
+		customProps: {},
+		inset: {
+			type: Boolean,
+			default: !1
+		},
+		sticky: {
+			type: Boolean,
+			default: !1
+		},
+		title: {}
+	},
+	setup(a) {
+		let { label: m, merged: h, rootBind: g, titleBind: _ } = e(a, f()), v = t(() => h.value.as ?? "li");
+		return (e, t) => v.value === "div" ? (l(), r("div", c(s({ key: 0 }, d(_))), [(l(), n(u(d(m))))], 16)) : (l(), n(u(v.value), c(s({ key: 1 }, d(g))), {
+			default: p(() => [i("div", c(o(d(_))), [(l(), n(u(d(m))))], 16)]),
+			_: 1
+		}, 16));
+	}
+});
+//#endregion
+export { m as default };

package/dist/Components/ListSection/composables/useListSection.d.ts

@@ -0,0 +1,13 @@
+import { useSlots } from 'vue';
+import { ListSectionOwnProps, ListSectionProps } from '../listSection.types';
+export declare function useListSection(props: ListSectionOwnProps, slots: ReturnType<typeof useSlots>): {
+    label: import('vue').ComputedRef<import('vue').Slot | (() => null | import('vue').VNodeChild)>;
+    merged: import('vue').ComputedRef<ListSectionOwnProps>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListSectionProps, "classes" | "customProps" | "title" | "as" | "inset" | "sticky">, never>>>;
+    titleBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        role: string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+};

package/dist/Components/ListSection/composables/useListSection.js

@@ -0,0 +1,51 @@
+import { resolveSlotOrProp as e } from "../../../Utils/slotOrProp.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { LIST_INJECTION_KEY as i } from "../../List/listInjectionKey.js";
+import { computed as a, inject as o, toValue as s, useAttrs as c } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { cn as d, splitComponentProps as f } from "@bridge-ui/core";
+//#region src/Components/ListSection/composables/useListSection.ts
+var p = [
+	"as",
+	"inset",
+	"title",
+	"sticky",
+	"classes",
+	"customProps"
+];
+function m(m, h) {
+	let g = c(), _ = o(i, null), v = a(() => f({
+		props: {
+			...g,
+			...m
+		},
+		bridgeKeys: p
+	})), { merged: y, entry: b } = n({
+		componentName: "ListSection",
+		props: () => v.value.componentProps
+	}), x = a(() => y.value.customProps), S = r({
+		entry: b,
+		props: () => v.value.componentProps
+	}), C = a(() => _ ? s(_).dense : !1), w = a(() => e(h, "default", y.value.title)), T = a(() => u(v.value.inheritedAttrs, []));
+	return {
+		label: w,
+		merged: y,
+		rootBind: a(() => t(x.value?.root, T.value, { class: d({
+			"list-none": !0,
+			[l(S.value, "root") ?? ""]: !0
+		}) })),
+		titleBind: a(() => t(x.value?.title, {}, {
+			role: "presentation",
+			class: d({
+				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase": !0,
+				"sticky top-0 z-10": y.value.sticky,
+				"py-2": !C.value,
+				"py-1.5": C.value,
+				"pl-14": y.value.inset,
+				[l(S.value, "title") ?? ""]: !0
+			})
+		}))
+	};
+}
+//#endregion
+export { m as useListSection };

package/dist/Components/ListSection/index.d.ts

@@ -0,0 +1,3 @@
+export { useListSection } from './composables/useListSection';
+export type { ListSectionClasses, ListSectionCustomProps, ListSectionOwnProps, ListSectionProps, ListSectionSlots, } from './listSection.types';
+export { default as ListSection } from './ListSection.vue';

package/dist/Components/ListSection/index.js

@@ -0,0 +1,3 @@
+import { useListSection as e } from "./composables/useListSection.js";
+import t from "./ListSection.js";
+export { t as ListSection, e as useListSection };

package/dist/Components/ListSection/listSection.types.d.ts

@@ -0,0 +1,71 @@
+import { HTMLAttributes, Slot, VNode } from 'vue';
+import { MergeHtmlProps } from '@bridge-ui/core';
+export interface ListSectionClasses {
+    /**
+     * The classes to apply to the root.
+     */
+    root?: string;
+    /**
+     * The classes to apply to the section label.
+     */
+    title?: string;
+}
+export interface ListSectionCustomProps {
+    /**
+     * Props forwarded to the root element.
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the section label.
+     */
+    title?: HTMLAttributes;
+}
+export type ListSectionLabel = VNode | string | VNode[] | undefined;
+/**
+ * Section heading inside a `List` (MUI `ListSubheader`-like).
+ */
+export interface ListSectionOwnProps {
+    /**
+     * The element to render as.
+     *
+     * @default "li"
+     */
+    as?: "li" | "div";
+    /**
+     * The classes to apply to the section.
+     *
+     * @default undefined
+     */
+    classes?: ListSectionClasses;
+    /**
+     * Props forwarded to each section part.
+     *
+     * @default undefined
+     */
+    customProps?: ListSectionCustomProps;
+    /**
+     * When true, adds left padding to align with items that have leading icons.
+     *
+     * @default false
+     */
+    inset?: boolean;
+    /**
+     * When true, sticks the heading while scrolling long lists.
+     *
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * Section label text.
+     *
+     * @default undefined
+     */
+    title?: string;
+}
+export interface ListSectionSlots {
+    /**
+     * Section label content. Overrides `title` when provided.
+     */
+    default?: Slot<undefined>;
+}
+export type ListSectionProps = MergeHtmlProps<ListSectionOwnProps, HTMLAttributes>;

package/dist/Components/Listbox/Listbox.js

@@ -0,0 +1,5 @@
+import e from "./Listbox.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/Listbox/Listbox.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/Listbox/Listbox.vue.d.ts

@@ -0,0 +1,34 @@
+import { ListboxOption, ListboxOwnProps, ListboxSlots } from './listbox.types';
+type __VLS_Slots = ListboxSlots;
+type __VLS_Props = ListboxOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (option: ListboxOption) => any;
+    "update:modelValue": (value: boolean) => any;
+    "show-change": (show: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((option: ListboxOption) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onShow-change"?: ((show: boolean) => any) | undefined;
+}>, {
+    color: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxColor, import('./listbox.types').ListboxColorOverrides>;
+    loading: boolean;
+    multiple: boolean;
+    disableAutoFocus: boolean;
+    placement: import('@floating-ui/utils').Placement;
+    emptyMessage: string;
+    hideEmptyMessage: boolean;
+    highlightedIndex: number;
+    showCheckmark: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};