nuance-ui 0.1.1

package/dist/runtime/components/app-shell/app-shell-header.d.vue.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '../box.vue.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/app-shell-header.vue

@@ -0,0 +1,43 @@
+<script setup>
+import Box from "../box.vue";
+const { mod } = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<Box is='header' :mod :class='$style.root'>
+		<slot />
+	</Box>
+</template>
+
+<style module lang="postcss">
+.root {
+	position: fixed;
+	z-index: 2;
+	top: 0;
+	inset-inline: 0;
+	transform: var(--app-shell-header-transform);
+
+	display: flex;
+
+	height: var(--app-shell-header-height);
+	padding-block: var(--app-shell-element-padding);
+	padding-inline: 1rem;
+
+	background-color: var(--color-header);
+
+	transition-timing-function: var(--app-shell-transition-timing-function);
+	transition-duration: var(--app-shell-transition-duration);
+	transition-property: transform, left, right;
+
+	:where([data-with-border]) > & {
+		border-bottom: 1px solid var(--app-shell-border-color);
+	}
+
+	:where([data-layout='alt']) > & {
+		inset-inline-start: var(--app-shell-navbar-offset, 0rem);
+	}
+}
+</style>

package/dist/runtime/components/app-shell/app-shell-header.vue.d.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '../box.vue.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/app-shell-main.d.vue.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '../box.vue.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/app-shell-main.vue

@@ -0,0 +1,30 @@
+<script setup>
+import Box from "../box.vue";
+const { mod } = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<Box is='main' :mod :class='$style.root'>
+		<slot />
+	</Box>
+</template>
+
+<style module lang="postcss">
+.root {
+	display: grid;
+
+	min-height: 100dvh;
+	padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
+	padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
+	padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
+	padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
+
+	transition-timing-function: var(--app-shell-transition-timing-function);
+	transition-duration: var(--app-shell-transition-duration);
+
+	transition-property: padding;
+}
+</style>

package/dist/runtime/components/app-shell/app-shell-main.vue.d.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '../box.vue.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/app-shell-navbar.d.vue.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '../box.vue.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/app-shell-navbar.vue

@@ -0,0 +1,47 @@
+<script setup>
+import Box from "../box.vue";
+const { mod } = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<Box is='nav' :mod :class='$style.root'>
+		<slot />
+	</Box>
+</template>
+
+<style module lang="postcss">
+.root {
+	position: fixed;
+
+	z-index: 1;
+	top: var(--app-shell-header-offset, 0rem);
+	inset-inline-start: 0;
+	transform: var(--app-shell-navbar-transform);
+
+	display: flex;
+	flex-direction: column;
+
+	width: var(--app-shell-navbar-width);
+	height: calc(100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem));
+	padding-block: var(--app-shell-element-padding);
+
+	background-color: var(--color-aside);
+
+	transition-timing-function: var(--app-shell-transition-timing-function);
+	transition-duration: var(--app-shell-transition-duration);
+	transition-property: transform, top, height;
+
+	:where([data-layout='alt']) > & {
+		top: 0;
+
+		height: 100dvh;
+	}
+
+	:where([data-with-border]) > & {
+		border-inline-end: 1px solid var(--app-shell-border-color);
+	}
+}
+</style>

package/dist/runtime/components/app-shell/app-shell-navbar.vue.d.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '../box.vue.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/app-shell-section.d.vue.ts

@@ -0,0 +1,18 @@
+import type { BoxProps } from '../box.vue.js';
+export interface AppShellSectionProps extends /* @vue-ignore */ BoxProps {
+    /** Determines whether the section should take all available space, `false` by default */
+    grow?: boolean;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AppShellSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellSectionProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/app-shell-section.vue

@@ -0,0 +1,22 @@
+<script setup>
+import Box from "../box.vue";
+const { is = "section", mod, grow } = defineProps({
+  grow: { type: Boolean, required: false }
+});
+</script>
+
+<template>
+	<Box :is :class='$style.root' :mod='[mod, { grow }]'>
+		<slot />
+	</Box>
+</template>
+
+<style module lang="postcss">
+.root {
+	flex-grow: 0;
+
+	&:where([data-grow]) {
+		flex-grow: 1;
+	}
+}
+</style>

package/dist/runtime/components/app-shell/app-shell-section.vue.d.ts

@@ -0,0 +1,18 @@
+import type { BoxProps } from '../box.vue.js';
+export interface AppShellSectionProps extends /* @vue-ignore */ BoxProps {
+    /** Determines whether the section should take all available space, `false` by default */
+    grow?: boolean;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AppShellSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellSectionProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/app-shell.d.vue.ts

@@ -0,0 +1,27 @@
+import type { BoxProps } from '../box.vue.js';
+export interface AppShellProps extends /* @vue-ignore */ BoxProps {
+    /** AppShellNavbar collapsed state. Required if you use AppShellNavbar component. */
+    navbar?: boolean;
+    /** AppShellAside collapsed state. Required if you use AppShellAside component. */
+    aside?: boolean;
+    /** AppShellHeader collapsed state. Required if you use AppShellHeader component. */
+    header?: boolean;
+    /** AppShellFooter collapsed state. Required if you use AppShellFooter component. */
+    footer?: boolean;
+    /** Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default */
+    layout?: 'default' | 'alt';
+    withBorder?: boolean;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/app-shell.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { computed } from "vue";
+import Box from "../box.vue";
+const {
+  mod,
+  layout = "default",
+  withBorder = false,
+  aside,
+  footer,
+  header,
+  navbar
+} = defineProps({
+  navbar: { type: Boolean, required: false },
+  aside: { type: Boolean, required: false },
+  header: { type: Boolean, required: false },
+  footer: { type: Boolean, required: false },
+  layout: { type: String, required: false },
+  withBorder: { type: Boolean, required: false }
+});
+const style = computed(() => ({
+  "--app-shell-navbar-transform": navbar ? "translateX(calc(-1 * var(--app-shell-navbar-width)))" : void 0,
+  "--app-shell-navbar-offset": navbar ? "0rem" : void 0,
+  "--app-shell-aside-transform": aside ? "translateX(var(--app-shell-aside-width))" : void 0,
+  "--app-shell-aside-offset": aside ? "0rem" : void 0,
+  "--app-shell-header-transform": header ? "translateY(calc(-1 * var(--app-shell-header-height)))" : void 0,
+  "--app-shell-header-offset": header ? "0rem" : void 0,
+  "--app-shell-footer-transform": footer ? "translateY(var(--app-shell-footer-height))" : void 0,
+  "--app-shell-footer-offset": footer ? "0rem" : void 0
+}));
+</script>
+
+<template>
+	<Box :style :class='$style.root' :mod='[mod, { layout, "with-border": withBorder }]'>
+		<slot />
+	</Box>
+</template>
+
+<style module lang="postcss">
+.root {
+	--app-shell-padding: var(--spacing-sm);
+	--app-shell-element-padding: .25rem;
+
+	--app-shell-transition-duration: 200ms;
+	--app-shell-transition-timing-function: ease;
+
+	--app-shell-navbar-width: rem(56px);
+	--app-shell-navbar-offset: var(--app-shell-navbar-width);
+	--app-shell-navbar-transform: none;
+
+	--app-shell-aside-width: rem(56px);
+	--app-shell-aside-offset: var(--app-shell-aside-width);
+	--app-shell-aside-transform: none;
+
+	--app-shell-header-height: rem(56px);
+	--app-shell-header-offset: var(--app-shell-header-height);
+	--app-shell-header-transform: none;
+
+	--app-shell-footer-height: rem(100px);
+	--app-shell-footer-offset: var(--app-shell-footer-height);
+	--app-shell-footer-transform: none;
+
+	@mixin light {
+		--app-shell-border-color: var(--color-gray-3);
+	}
+
+	@mixin dark {
+		--app-shell-border-color: var(--color-slate-8);
+	}
+}
+</style>

package/dist/runtime/components/app-shell/app-shell.vue.d.ts

@@ -0,0 +1,27 @@
+import type { BoxProps } from '../box.vue.js';
+export interface AppShellProps extends /* @vue-ignore */ BoxProps {
+    /** AppShellNavbar collapsed state. Required if you use AppShellNavbar component. */
+    navbar?: boolean;
+    /** AppShellAside collapsed state. Required if you use AppShellAside component. */
+    aside?: boolean;
+    /** AppShellHeader collapsed state. Required if you use AppShellHeader component. */
+    header?: boolean;
+    /** AppShellFooter collapsed state. Required if you use AppShellFooter component. */
+    footer?: boolean;
+    /** Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default */
+    layout?: 'default' | 'alt';
+    withBorder?: boolean;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/app-shell/index.d.ts

@@ -0,0 +1,7 @@
+export type * from './app-shell-aside.vue';
+export type * from './app-shell-footer.vue';
+export type * from './app-shell-header.vue';
+export type * from './app-shell-main.vue';
+export type * from './app-shell-navbar.vue';
+export type * from './app-shell-section.vue';
+export type * from './app-shell.vue';

package/dist/runtime/components/background-image.d.vue.ts

@@ -0,0 +1,10 @@
+import type { UiKitRadius } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface BackgroundImageProps extends /* @vue-ignore */ BoxProps {
+    radius?: UiKitRadius | string;
+    /** Image url */
+    src: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<BackgroundImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/background-image.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { getRadius } from "@nui/utils";
+import { computed } from "vue";
+import Box from "./box.vue";
+const { radius, src, ...rest } = defineProps({
+  radius: { type: [String, Number], required: false },
+  src: { type: String, required: true }
+});
+const style = computed(() => ({
+  "--bi-radius": radius ? getRadius(radius) : void 0,
+  "backgroundImage": `url(${src})`
+}));
+</script>
+
+<template>
+	<Box :style :class='$style.root' v-bind='rest' />
+</template>
+
+<style module lang="postcss">
+.root {
+	--bi-radius: 0rem;
+
+	position: absolute;
+	inset: 0;
+
+	display: block;
+
+	width: 100%;
+	border: 0;
+	border-radius: var(--bi-radius, 0);
+
+	text-decoration: none;
+
+	background-position: center;
+	background-size: cover;
+}
+</style>

package/dist/runtime/components/background-image.vue.d.ts

@@ -0,0 +1,10 @@
+import type { UiKitRadius } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface BackgroundImageProps extends /* @vue-ignore */ BoxProps {
+    radius?: UiKitRadius | string;
+    /** Image url */
+    src: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<BackgroundImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/box.d.vue.ts

@@ -0,0 +1,20 @@
+import type { Mod } from '@nui/composals';
+import type { Component } from 'vue';
+export interface BoxProps {
+    is?: keyof HTMLElementTagNameMap | Component;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: Mod | Mod[] | Mod[][] | null;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/box.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { useMod } from "@nui/composals";
+const { is = "div", mod } = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const _mod = useMod(mod);
+</script>
+
+<template>
+	<component :is v-bind='_mod'>
+		<slot />
+	</component>
+</template>

package/dist/runtime/components/box.vue.d.ts

@@ -0,0 +1,20 @@
+import type { Mod } from '@nui/composals';
+import type { Component } from 'vue';
+export interface BoxProps {
+    is?: keyof HTMLElementTagNameMap | Component;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: Mod | Mod[] | Mod[][] | null;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/button/button-group.d.vue.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '../box.vue.js';
+export interface ButtonGroupProps extends /* @vue-ignore */ BoxProps {
+    orientation?: 'horizontal' | 'vertical';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/button/button-group.vue

@@ -0,0 +1,13 @@
+<script setup>
+import Box from "../box.vue";
+import css from "./button.module.css";
+const { is, mod, orientation = "horizontal" } = defineProps({
+  orientation: { type: String, required: false }
+});
+</script>
+
+<template>
+	<Box :is :mod='[mod, { orientation }]' :class='css.group' role='group'>
+		<slot />
+	</Box>
+</template>

package/dist/runtime/components/button/button-group.vue.d.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '../box.vue.js';
+export interface ButtonGroupProps extends /* @vue-ignore */ BoxProps {
+    orientation?: 'horizontal' | 'vertical';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/button/button.d.vue.ts

@@ -0,0 +1,40 @@
+import type { UiKitColor, UiKitGradient, UiKitRadius, UiKitSize } from '@nui/types';
+import type { HTMLAttributes } from 'vue';
+import type { BoxProps } from '../box.vue.js';
+export interface ButtonProps extends /* @vue-ignore */ BoxProps {
+    size?: UiKitSize | `compact-${UiKitSize}`;
+    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    gradient?: UiKitGradient;
+    loading?: boolean;
+    color?: UiKitColor;
+    radius?: UiKitRadius;
+    classes?: {
+        root?: string;
+        inner?: string;
+        label?: string;
+        section?: string;
+    };
+    /** section pointer-events */
+    leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    leftSectionProps?: HTMLAttributes;
+    /** section pointer-events */
+    rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    rightSectionProps?: HTMLAttributes;
+}
+declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    rightSection?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/button/button.module.css

@@ -0,0 +1 @@
+.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:calc(var(--button-padding-x)/1.5)}.root:where([data-with-right-section]){padding-inline-end:calc(var(--button-padding-x)/1.5)}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root{@mixin hover{&:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}&:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}}}.inner{justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease}.inner,.label{align-items:center;display:flex;height:100%}.label{opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;pointer-events:var(--section-pointer-events)}.section:where([data-position=left]){margin-inline-end:var(--spacing-xs)}.section:where([data-position=right]){margin-inline-start:var(--spacing-xs)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--button-border-width:1px;display:flex}.group :where(.root):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--button-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--button-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--button-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--button-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--button-border-width)/2)}.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--button-border-width)/2);border-radius:0;border-top-width:calc(var(--button-border-width)/2)}