sard 1.0.0 → 1.0.2

package/components/menu/context.js

@@ -0,0 +1,55 @@
+import { reactiveComputed } from "../../use/reactiveComputed.js";
+import { computed, inject, onMounted, onUnmounted, provide, reactive, toRef, useAttrs } from "vue";
+//#region packages/sard/components/menu/context.ts
+const menuContextKey = Symbol("menuContext");
+function useMenu(options) {
+	const { props, onSelect } = options;
+	const members = reactive([]);
+	const context = {
+		hasIcon: computed(() => {
+			return members.some((member) => member.hasIconSlot);
+		}),
+		direction: toRef(() => props.direction),
+		select: (item) => {
+			onSelect(item);
+		},
+		addMember: (item) => {
+			if (!members.includes(item)) members.push(item);
+		},
+		removeMember: (item) => {
+			const index = members.indexOf(item);
+			if (index > -1) members.splice(index, 1);
+		}
+	};
+	provide(menuContextKey, context);
+	return context;
+}
+function useMenuItem(props, hasIconSlot) {
+	const context = inject(menuContextKey);
+	if (!context) throw new Error("MenuItem must be included in Menu.");
+	const attrs = useAttrs();
+	const member = reactive({
+		props: reactiveComputed(() => {
+			return {
+				...props,
+				...attrs
+			};
+		}),
+		hasIconSlot
+	});
+	onMounted(() => {
+		context.addMember(member);
+	});
+	onUnmounted(() => {
+		context.removeMember(member);
+	});
+	return {
+		select: () => {
+			context.select(member);
+		},
+		hasIcon: context.hasIcon,
+		direction: context.direction
+	};
+}
+//#endregion
+export { menuContextKey, useMenu, useMenuItem };

package/components/menu/index.css

@@ -0,0 +1 @@
+:root{--s-menu-bg:var(--s-white);--s-menu-item-radius:var(--s-border-radius);--s-menu-item-height:var(--s-content-height);--s-menu-item-padding-x:var(--s-content-padding-x);--s-menu-item-font-size:var(--s-font-size);--s-menu-item-bg-active:var(--s-bg-color-active);--s-menu-border-color:var(--s-border-color);--s-menu-item-bg-active-dark:var(--s-gray-900);--s-menu-item-color-dark:var(--s-white);--s-menu-border-color-dark:var(--s-gray-700);--s-menu-bg-dark:var(--s-gray-800);--s-menu-item-horizontal-height:var(--s-content-height-xs);--s-menu-icon-font-size:var(--s-font-size);--s-menu-icon-gap:var(--s-size-sm);--s-menu-icon-horizontal-gap:var(--s-size-xs)}.dark{--s-menu-bg:var(--s-gray-800)}.s-menu{display:inline-flex}.s-menu--vertical{flex-direction:column}.s-menu--horizontal{flex-direction:row}.s-menu--dark{--s-menu-border-color:var(--s-menu-border-color-dark);--s-menu-bg:var(--s-menu-bg-dark)}.s-menu__item{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--s-menu-icon-gap);height:var(--s-menu-item-height);padding-inline-start:var(--s-menu-item-padding-x);padding-inline-end:var(--s-menu-item-padding-x);font-size:var(--s-menu-item-font-size);background:var(--s-menu-bg);cursor:pointer}.s-menu__item:is(.is-disabled){cursor:not-allowed}.s-menu__icon{width:var(--s-menu-icon-font-size);font-size:var(--s-menu-icon-font-size)}.s-menu__label{position:relative;display:flex;justify-content:center;align-items:center;height:100%;flex-grow:1}.s-menu--vertical .s-menu__item:first-child{border-top-left-radius:var(--s-menu-item-radius);border-top-right-radius:var(--s-menu-item-radius)}.s-menu--vertical .s-menu__item:last-child{border-bottom-left-radius:var(--s-menu-item-radius);border-bottom-right-radius:var(--s-menu-item-radius)}.s-menu--vertical .s-menu__item:not(:first-child) .s-menu__label::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);top:0;border-top:var(--s-border-width) var(--s-border-style) var(--s-menu-border-color);transform-origin:top center}.s-menu--horizontal .s-menu__item{height:var(--s-menu-item-horizontal-height);gap:var(--s-menu-icon-horizontal-gap)}:root:not([dir=rtl]) .s-menu--horizontal .s-menu__item:first-child{border-top-left-radius:var(--s-menu-item-radius);border-bottom-left-radius:var(--s-menu-item-radius)}:root[dir=rtl] .s-menu--horizontal .s-menu__item:first-child{border-top-right-radius:var(--s-menu-item-radius);border-bottom-right-radius:var(--s-menu-item-radius)}:root:not([dir=rtl]) .s-menu--horizontal .s-menu__item:last-child{border-top-right-radius:var(--s-menu-item-radius);border-bottom-right-radius:var(--s-menu-item-radius)}:root[dir=rtl] .s-menu--horizontal .s-menu__item:last-child{border-top-left-radius:var(--s-menu-item-radius);border-bottom-left-radius:var(--s-menu-item-radius)}.s-menu--horizontal .s-menu__item:not(:first-child)::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";top:0;bottom:0;transform:scaleX(0.5);inset-inline-start:0;border-inline-start:var(--s-border-width) var(--s-border-style) var(--s-menu-border-color);transform-origin:left center}:root[dir=rtl] .s-menu--horizontal .s-menu__item:not(:first-child)::before{transform-origin:right center}.s-menu--light .s-menu__item:not(.is-disabled):active{background:var(--s-menu-item-bg-active)}.s-menu--light .s-menu__item:is(.is-disabled){color:var(--s-text-color-disabled)}.s-menu--dark{--s-menu-border-color:var(--s-menu-border-color-dark)}.s-menu--dark .s-menu__item:not(.is-disabled):active{background:var(--s-menu-item-bg-active-dark)}.s-menu--dark .s-menu__item:is(.is-disabled) .s-menu__label{color:var(--s-gray-600)}.s-menu--dark .s-menu__icon{color:var(--s-menu-item-color-dark)}.s-menu--dark .s-menu__label{color:var(--s-menu-item-color-dark)}.s-menu--vertical .s-menu__label{justify-content:flex-start}.s-menu:is(.has-icon) .s-menu__label{justify-content:flex-start}

package/components/menu/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Menu from './menu.vue';
+import _MenuItem from './menu-item.vue';
+export declare const Menu: EnhancedComponent<typeof _Menu>;
+export declare const MenuItem: EnhancedComponent<typeof _MenuItem>;
+export default Menu;
+export type { MenuProps, MenuEmits, MenuItemProps, MenuItemEmits } from './common';

package/components/menu/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import menu_default from "./menu.js";
+import menu_item_default from "./menu-item.js";
+//#region packages/sard/components/menu/index.ts
+const Menu = enhanceComponent(menu_default);
+const MenuItem = enhanceComponent(menu_item_default);
+//#endregion
+export { Menu, Menu as default, MenuItem };

package/components/menu/menu-item.d.ts

@@ -0,0 +1,16 @@
+import { type MenuItemProps, type MenuItemSlots } from './common';
+type __VLS_Props = MenuItemProps;
+type __VLS_Slots = MenuItemSlots;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/menu/menu-item.js

@@ -0,0 +1,59 @@
+import { createBem } from "../../utils/bem.js";
+import { useMenuItem } from "./context.js";
+import { computed, createCommentVNode, createElementBlock, createTextVNode, defineComponent, normalizeClass, onBeforeMount, onBeforeUpdate, openBlock, ref, renderSlot, toDisplayString, unref, useSlots } from "vue";
+//#region packages/sard/components/menu/menu-item.vue
+var menu_item_default = /*@__PURE__*/ defineComponent({
+	__name: "menu-item",
+	props: {
+		label: {
+			type: [String, Number],
+			required: false
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("menu");
+		const hasIconSlot = ref(false);
+		onBeforeMount(() => {
+			hasIconSlot.value = !!slots.icon;
+		});
+		onBeforeUpdate(() => {
+			hasIconSlot.value = !!slots.icon;
+		});
+		const { select, hasIcon, direction } = useMenuItem(props, hasIconSlot);
+		const onClick = (event) => {
+			if (!props.disabled) {
+				select();
+				emit("click", event);
+			}
+		};
+		const menuItemClass = computed(() => {
+			return [bem.e("item"), bem.is("disabled", props.disabled)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(menuItemClass.value),
+				onClick
+			}, [slots.icon || unref(hasIcon) && unref(direction) === "vertical" ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("icon"))
+			}, [renderSlot(_ctx.$slots, "icon")], 2)) : createCommentVNode("v-if", true), __props.label || slots.default ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(unref(bem).e("label"))
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 2)) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { menu_item_default as default };

package/components/menu/menu.d.ts

@@ -0,0 +1,18 @@
+import { type MenuProps, type MenuSlots } from './common';
+type __VLS_Slots = MenuSlots;
+declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: any) => any;
+}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{
+    onSelect?: ((item: any) => any) | undefined;
+}>, {
+    direction: "vertical" | "horizontal";
+    theme: "dark" | "light";
+}, {}, {}, {}, 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/components/menu/menu.js

@@ -0,0 +1,44 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultMenuProps } from "./common.js";
+import { useMenu } from "./context.js";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, openBlock, renderSlot } from "vue";
+//#region packages/sard/components/menu/menu.vue
+var menu_default = /*@__PURE__*/ defineComponent({
+	__name: "menu",
+	props: /*@__PURE__*/ mergeDefaults({
+		direction: {
+			type: String,
+			required: false
+		},
+		theme: {
+			type: String,
+			required: false
+		}
+	}, defaultMenuProps),
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("menu");
+		const onSelect = (item) => {
+			emit("select", { ...item.props });
+		};
+		const { hasIcon } = useMenu({
+			props,
+			onSelect
+		});
+		const menuClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.direction),
+				bem.m(props.theme),
+				bem.has("icon", hasIcon.value)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(menuClass.value) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { menu_default as default };

package/components/motion/common.d.ts

@@ -0,0 +1,24 @@
+import type { DefaultProps } from '../config';
+export type MotionName = 'fade' | 'zoom' | 'wide-zoom' | 'slide-top' | 'slide-right' | 'slide-bottom' | 'slide-left';
+export type MotionType = 'transition' | 'animation';
+export interface MotionProps {
+    name?: MotionName;
+    type?: MotionType;
+    disalbed?: boolean;
+}
+export declare const defaultMotionProps: DefaultProps<MotionProps>;
+export interface MotionSlots {
+    default?(): any;
+}
+export type MotionHookName = 'before-enter' | 'enter' | 'after-enter' | 'enter-cancelled' | 'before-leave' | 'leave' | 'after-leave' | 'leave-cancelled';
+export interface MotionEmits {
+    (e: 'before-enter', el: Element): void;
+    (e: 'enter', el: Element): void;
+    (e: 'after-enter', el: Element): void;
+    (e: 'enter-cancelled', el: Element): void;
+    (e: 'before-leave', el: Element): void;
+    (e: 'leave', el: Element): void;
+    (e: 'after-leave', el: Element): void;
+    (e: 'leave-cancelled', el: Element): void;
+    (e: 'visible-hook', name: MotionHookName, el: Element): void;
+}

package/components/motion/common.js

@@ -0,0 +1,7 @@
+//#region packages/sard/components/motion/common.ts
+const defaultMotionProps = {
+	name: "fade",
+	type: "transition"
+};
+//#endregion
+export { defaultMotionProps };

package/components/motion/index.css

@@ -0,0 +1 @@
+.s-motion-fade-enter-from,.s-motion-fade-leave-to{opacity:0}.s-motion-fade-enter-to,.s-motion-fade-leave-from{opacity:1}.s-motion-fade-enter-active,.s-motion-fade-leave-active{transition:opacity var(--s-duration) ease-in-out}.s-motion-fade-leave-active{pointer-events:none}.s-motion-zoom-enter-from{opacity:0;transform:scale(0.7)}.s-motion-zoom-leave-to{opacity:0;transform:scale(0.9)}.s-motion-zoom-enter-active{transition:transform var(--s-duration) ease-out,opacity var(--s-duration) ease-out}.s-motion-zoom-leave-active{transition:transform var(--s-duration) ease-out,opacity var(--s-duration) ease-in;pointer-events:none}.s-motion-wide-zoom-enter-from,.s-motion-wide-zoom-leave-to{opacity:0;transform:scale(0.4)}.s-motion-wide-zoom-enter-active{transition:transform var(--s-duration-fast) ease-out,opacity var(--s-duration-fast) ease-out}.s-motion-wide-zoom-leave-active{transition:transform var(--s-duration-fast) ease-out,opacity var(--s-duration-fast) ease-in;pointer-events:none}.s-motion-slide-top-enter-from,.s-motion-slide-top-leave-to{transform:translate3d(0, -100%, 0)}.s-motion-slide-right-enter-from,.s-motion-slide-right-leave-to{transform:translate3d(100%, 0, 0)}.s-motion-slide-bottom-enter-from,.s-motion-slide-bottom-leave-to{transform:translate3d(0, 100%, 0)}.s-motion-slide-left-enter-from,.s-motion-slide-left-leave-to{transform:translate3d(-100%, 0, 0)}.s-motion-slide-top-enter-to,.s-motion-slide-top-leave-from,.s-motion-slide-right-enter-to,.s-motion-slide-right-leave-from,.s-motion-slide-bottom-enter-to,.s-motion-slide-bottom-leave-from,.s-motion-slide-left-enter-to,.s-motion-slide-left-leave-from{transform:translate3d(0, 0, 0)}.s-motion-slide-top-enter-active,.s-motion-slide-right-enter-active,.s-motion-slide-bottom-enter-active,.s-motion-slide-left-enter-active{transition:transform var(--s-duration) ease-out}.s-motion-slide-top-leave-active,.s-motion-slide-right-leave-active,.s-motion-slide-bottom-leave-active,.s-motion-slide-left-leave-active{transition:transform var(--s-duration) ease-in;pointer-events:none}

package/components/motion/index.d.ts

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _Motion from './motion.vue';
+export declare const Motion: EnhancedComponent<typeof _Motion>;
+export default Motion;
+export type { MotionProps, MotionSlots, MotionEmits, MotionHookName, MotionName } from './common';
+export * from './useMotioning';

package/components/motion/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import motion_default from "./motion.js";
+import { useMotioning } from "./useMotioning.js";
+//#region packages/sard/components/motion/index.ts
+const Motion = enhanceComponent(motion_default);
+//#endregion
+export { Motion, Motion as default, useMotioning };

package/components/motion/motion.d.ts

@@ -0,0 +1,35 @@
+import { type MotionHookName, type MotionProps, type MotionSlots } from './common';
+type __VLS_Slots = MotionSlots;
+declare const __VLS_base: import("vue").DefineComponent<MotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: MotionHookName, el: Element) => any;
+}, string, import("vue").PublicProps, Readonly<MotionProps> & Readonly<{
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: MotionHookName, el: Element) => any) | undefined;
+}>, {
+    name: import("./common").MotionName;
+    type: import("./common").MotionType;
+    disalbed: 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/components/motion/motion.js

@@ -0,0 +1,88 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultMotionProps } from "./common.js";
+import { Transition, computed, createBlock, defineComponent, mergeDefaults, openBlock, renderSlot, withCtx } from "vue";
+//#region packages/sard/components/motion/motion.vue
+var motion_default = /*@__PURE__*/ defineComponent({
+	__name: "motion",
+	props: /*@__PURE__*/ mergeDefaults({
+		name: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		disalbed: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultMotionProps),
+	emits: [
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("motion");
+		const mergedName = computed(() => {
+			return bem.b() + "-" + props.name;
+		});
+		const onVisibleHook = (name, el) => {
+			emit(name, el);
+			emit("visible-hook", name, el);
+		};
+		const onBeforeEnter = (el) => {
+			onVisibleHook("before-enter", el);
+		};
+		const onEnter = (el) => {
+			onVisibleHook("enter", el);
+		};
+		const onAfterEnter = (el) => {
+			onVisibleHook("after-enter", el);
+		};
+		const onEnterCancelled = (el) => {
+			onVisibleHook("enter-cancelled", el);
+		};
+		const onBeforeLeave = (el) => {
+			onVisibleHook("before-leave", el);
+		};
+		const onLeave = (el) => {
+			onVisibleHook("leave", el);
+		};
+		const onAfterLeave = (el) => {
+			onVisibleHook("after-leave", el);
+		};
+		const onLeaveCancelled = (el) => {
+			onVisibleHook("leave-cancelled", el);
+		};
+		return (_ctx, _cache) => {
+			return __props.disalbed ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createBlock(Transition, {
+				key: 1,
+				type: __props.type,
+				name: mergedName.value,
+				onBeforeEnter,
+				onEnter,
+				onAfterEnter,
+				onEnterCancelled,
+				onBeforeLeave,
+				onLeave,
+				onAfterLeave,
+				onLeaveCancelled
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["type", "name"]));
+		};
+	}
+});
+//#endregion
+export { motion_default as default };

package/components/motion/useMotioning.d.ts

@@ -0,0 +1,2 @@
+import type { MotionHookName } from './common';
+export declare function useMotioning(visible: boolean): readonly [import("vue").Ref<"left" | "entering" | "leaving" | "entered", "left" | "entering" | "leaving" | "entered">, (name: MotionHookName) => void];

package/components/motion/useMotioning.js

@@ -0,0 +1,26 @@
+import { ref } from "vue";
+//#region packages/sard/components/motion/useMotioning.ts
+function useMotioning(visible) {
+	const status = ref(visible ? "entered" : "left");
+	const onVisibleHook = (name) => {
+		switch (name) {
+			case "before-enter":
+			case "enter":
+				status.value = "entering";
+				break;
+			case "after-enter":
+				status.value = "entered";
+				break;
+			case "before-leave":
+			case "leave":
+				status.value = "leaving";
+				break;
+			case "after-leave":
+				status.value = "left";
+				break;
+		}
+	};
+	return [status, onVisibleHook];
+}
+//#endregion
+export { useMotioning };

package/components/navbar/common.d.ts

@@ -0,0 +1,28 @@
+export interface NavbarProps {
+    title?: string;
+    flow?: boolean;
+    showBack?: boolean;
+    backText?: string;
+    fixed?: boolean;
+    statusBar?: boolean;
+    showDivider?: boolean;
+}
+export interface NavbarSlots {
+    default?(props: Record<string, never>): any;
+    title?(props: Record<string, never>): any;
+    start?(props: Record<string, never>): any;
+    end?(props: Record<string, never>): any;
+}
+export interface NavbarEmits {
+    (e: 'back', event: any): void;
+}
+export interface NavbarItemProps {
+    reverse?: boolean;
+}
+export interface NavbarItemSlots {
+    default?(): any;
+    icon?(): any;
+}
+export interface NavbarItemEmits {
+    (e: 'click', event: MouseEvent): void;
+}

package/components/navbar/index.css

@@ -0,0 +1 @@
+:root{--s-navbar-height:var(--s-content-height);--s-navbar-bg:var(--s-bg-color-container);--s-navbar-z-index:var(--s-z-index-secondary);--s-navbar-title-max-width:60%;--s-navbar-title-font-size:var(--s-font-size-lg);--s-navbar-title-color:var(--s-text-color-emphasis);--s-navbar-back-color:var(--s-text-color-secondary);--s-navbar-item-padding-x:var(--s-size-xs);--s-navbar-item-gap:var(--s-size-2xs);--s-navbar-item-font-size:var(--s-font-size-lg);--s-navbar-item-icon-size:var(--s-size-lg);--s-navbar-item-color:var(--s-color-primary);--s-navbar-item-opacity-active:var(--s-opacity-active);--s-navbar-start-gap:var(--s-size-2xs);--s-navbar-end-gap:var(--s-size-2xs)}.s-navbar{background:var(--s-navbar-bg)}.s-navbar--fixed{position:fixed;top:0;left:0;width:100%;z-index:var(--s-navbar-z-index)}.s-navbar__wrapper{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;height:var(--s-navbar-height)}.s-navbar__wrapper:is(.is-divider)::after{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);bottom:0;border-bottom:var(--s-border-width) var(--s-border-style) var(--s-border-color);transform-origin:bottom center}.s-navbar__content{display:flex;align-items:center;justify-content:center;height:100%;flex:1;overflow:hidden}.s-navbar__title{display:block;width:100%;max-width:var(--s-navbar-title-max-width);font-size:var(--s-navbar-title-font-size);font-weight:var(--s-font-weight-bold);text-align:center;color:var(--s-navbar-title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-navbar__start,.s-navbar__end{position:absolute;top:0;bottom:0;z-index:2;flex:none;align-items:stretch;height:100%}.s-navbar__start{inset-inline-start:0;padding-inline-start:var(--s-navbar-start-gap)}.s-navbar__end{inset-inline-end:0;padding-inline-end:var(--s-navbar-end-gap)}.s-navbar--custom .s-navbar__content{flex-direction:column;align-items:stretch}.s-navbar--flow .s-navbar__title{max-width:100%;text-align:start}.s-navbar--flow .s-navbar__start,.s-navbar--flow .s-navbar__end{position:relative}.s-navbar__item{display:inline-flex;align-items:center;justify-content:center;height:100%;gap:var(--s-navbar-item-gap);padding:0 var(--s-navbar-item-padding-x);font-size:var(--s-navbar-item-font-size);color:var(--s-navbar-item-color);cursor:pointer;line-height:1}.s-navbar__item:active{opacity:var(--s-navbar-item-opacity-active)}.s-navbar__item .s-navbar__item-icon{font-size:var(--s-navbar-item-icon-size)}.s-navbar__item:is(.is-back){color:var(--s-navbar-back-color)}:root[dir=rtl] .s-navbar__item:is(.is-back) .s-navbar__item-icon{transform:rotateY(180deg)}.s-navbar--reverse{flex-direction:row-reverse}

package/components/navbar/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Navbar from './navbar.vue';
+import _NavbarItem from './navbar-item.vue';
+export declare const Navbar: EnhancedComponent<typeof _Navbar>;
+export declare const NavbarItem: EnhancedComponent<typeof _NavbarItem>;
+export default Navbar;
+export type { NavbarProps, NavbarSlots, NavbarEmits, NavbarItemProps, NavbarItemSlots, NavbarItemEmits, } from './common';

package/components/navbar/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import navbar_item_default from "./navbar-item.js";
+import navbar_default from "./navbar.js";
+//#region packages/sard/components/navbar/index.ts
+const Navbar = enhanceComponent(navbar_default);
+const NavbarItem = enhanceComponent(navbar_item_default);
+//#endregion
+export { Navbar, Navbar as default, NavbarItem };

package/components/navbar/navbar-item.d.ts

@@ -0,0 +1,15 @@
+import { type NavbarItemProps, type NavbarItemSlots } from './common';
+type __VLS_Slots = NavbarItemSlots;
+declare const __VLS_base: import("vue").DefineComponent<NavbarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<NavbarItemProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/navbar/navbar-item.js

@@ -0,0 +1,30 @@
+import { createBem } from "../../utils/bem.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, useSlots } from "vue";
+//#region packages/sard/components/navbar/navbar-item.vue
+var navbar_item_default = /*@__PURE__*/ defineComponent({
+	__name: "navbar-item",
+	props: { reverse: {
+		type: Boolean,
+		required: false
+	} },
+	emits: ["click"],
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const bem = createBem("navbar");
+		const navbarClass = computed(() => {
+			return [bem.e("item"), bem.m("reverse", props.reverse)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(navbarClass.value),
+				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+			}, [slots.icon ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("item-icon"))
+			}, [renderSlot(_ctx.$slots, "icon")], 2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { navbar_item_default as default };

package/components/navbar/navbar.d.ts

@@ -0,0 +1,15 @@
+import { type NavbarProps, type NavbarSlots } from './common';
+type __VLS_Slots = NavbarSlots;
+declare const __VLS_base: import("vue").DefineComponent<NavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    back: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<NavbarProps> & Readonly<{
+    onBack?: ((event: any) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/navbar/navbar.js

@@ -0,0 +1,92 @@
+import { createBem } from "../../utils/bem.js";
+import { windowInfo } from "../config/windowInfo.js";
+import navbar_item_default from "./navbar-item.js";
+import status_bar_default from "../status-bar/status-bar.js";
+import navbar_pit_default from "../navbar-pit/navbar-pit.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, onBeforeUnmount, onMounted, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
+import { Left } from "@sard/icons";
+//#region packages/sard/components/navbar/navbar.vue
+var navbar_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "navbar",
+	props: {
+		title: {
+			type: String,
+			required: false
+		},
+		flow: {
+			type: Boolean,
+			required: false
+		},
+		showBack: {
+			type: Boolean,
+			required: false
+		},
+		backText: {
+			type: String,
+			required: false
+		},
+		fixed: {
+			type: Boolean,
+			required: false
+		},
+		statusBar: {
+			type: Boolean,
+			required: false
+		},
+		showDivider: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["back"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("navbar");
+		onMounted(() => {
+			if (props.fixed) windowInfo.navBarHeight = 44;
+		});
+		onBeforeUnmount(() => {
+			if (props.fixed) windowInfo.navBarHeight = 0;
+		});
+		const onBack = (event) => {
+			emit("back", event);
+		};
+		const navbarClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("flow", props.flow),
+				bem.m("custom", !!slots.default),
+				bem.m("fixed", props.fixed)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", mergeProps(_ctx.$attrs, { class: navbarClass.value }), [__props.statusBar ? (openBlock(), createBlock(status_bar_default, { key: 0 })) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass([unref(bem).e("wrapper"), unref(bem).is("divider", __props.showDivider)]) }, [
+				slots.start || __props.showBack ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("start"))
+				}, [__props.showBack ? (openBlock(), createBlock(navbar_item_default, {
+					key: 0,
+					class: normalizeClass(unref(bem).is("back")),
+					onClick: onBack
+				}, {
+					icon: withCtx(() => [createVNode(unref(Left))]),
+					default: withCtx(() => [createTextVNode(" " + toDisplayString(__props.backText), 1)]),
+					_: 1
+				}, 8, ["class"])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "start")], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("title")) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)])], 2),
+				slots.end ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("end"))
+				}, [renderSlot(_ctx.$slots, "end")], 2)) : createCommentVNode("v-if", true)
+			], 2)], 16), __props.fixed ? (openBlock(), createBlock(navbar_pit_default, {
+				key: 0,
+				"status-bar": __props.statusBar
+			}, null, 8, ["status-bar"])) : createCommentVNode("v-if", true)], 64);
+		};
+	}
+});
+//#endregion
+export { navbar_default as default };

package/components/navbar-pit/common.d.ts

@@ -0,0 +1,3 @@
+export interface NavbarPitProps {
+    statusBar?: boolean;
+}