nuance-ui 0.1.1

package/README.md

@@ -0,0 +1,90 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# My Module
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+My new Nuxt module for doing amazing things.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+
+<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
+
+## Quick Setup 1
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add my-module
+```
+
+That's it! You can now use My Module in your Nuxt app ✨
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+
+  ```bash
+  # Install dependencies
+  npm install
+
+  # Generate type stubs
+  npm run dev:prepare
+
+  # Develop with the playground
+  npm run dev
+
+  # Build the playground
+  npm run dev:build
+
+  # Run ESLint
+  npm run lint
+
+  # Run Vitest
+  npm run test
+  npm run test:watch
+
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+
+[npm-version-href]: https://npmjs.com/package/my-module
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+
+[npm-downloads-href]: https://npm.chart.dev/my-module
+
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+
+[license-href]: https://npmjs.com/package/my-module
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,24 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Prefix for component name
+     * @default 'N'
+     * @example 'N' => <NButton />
+     */
+    prefix?: string;
+    /**
+     * Auto import components
+     * @default true
+     */
+    autoImport?: boolean;
+    /**
+     * Default theme
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark' | 'auto';
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@nuxtjs/nuance-ui",
+  "configKey": "nui",
+  "compatibility": {
+    "nuxt": "^4.0.0"
+  },
+  "version": "0.1.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,96 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { defu } from 'defu';
+
+const defaultConfig = {
+  autoImport: true,
+  theme: "light",
+  prefix: "N"
+};
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@nuxtjs/nuance-ui",
+    configKey: "nui",
+    compatibility: {
+      nuxt: "^4.0.0"
+    }
+  },
+  moduleDependencies: {
+    "@nuxtjs/color-mode": {
+      version: ">=4.0.0",
+      overrides: {
+        dataValue: "mantine-color-scheme"
+      }
+    },
+    "@nuxt/icon": {
+      version: ">=2.1.0",
+      defaults: {
+        mode: "svg",
+        class: "",
+        clientBundle: {
+          scan: {
+            globInclude: ["src/**/*.vue", "src/**/*.ts"],
+            globExclude: [
+              "node_modules",
+              ".idea",
+              ".output",
+              ".data",
+              ".nuxt",
+              ".nitro",
+              ".cache",
+              "dist",
+              "server"
+            ]
+          },
+          includeCustomCollections: true,
+          sizeLimitKb: 256
+        }
+      }
+    }
+  },
+  // Default configuration options of the Nuxt module
+  defaults: defaultConfig,
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    nuxt.options.alias["@nui"] = resolve("./runtime");
+    nuxt.options.alias["@nui/composals"] = resolve("./runtime/composals");
+    nuxt.options.alias["@nui/components"] = resolve("./runtime/components");
+    nuxt.options.alias["@nui/utils"] = resolve("./runtime/utils");
+    nuxt.options.alias["@nui/helpers"] = resolve("./runtime/helpers");
+    nuxt.options.alias["@nui/types"] = resolve("./runtime/types");
+    nuxt.options.appConfig.nui = defu(nuxt.options.appConfig.nui || {}, defaultConfig);
+    nuxt.options.postcss = nuxt.options.postcss || {};
+    nuxt.options.postcss.plugins = nuxt.options.postcss.plugins || {};
+    nuxt.options.postcss.plugins = defu(nuxt.options.postcss.plugins, {
+      "postcss-import": {},
+      "postcss-preset-mantine": {},
+      "postcss-simple-vars": {
+        variables: {
+          "breakpoint-xs": "36em",
+          "breakpoint-sm": "48em",
+          "breakpoint-md": "62em",
+          "breakpoint-lg": "75em",
+          "breakpoint-xl": "88em"
+        }
+      },
+      "autoprefixer": {}
+    });
+    if (options.autoImport) {
+      addComponentsDir({
+        path: resolve("./runtime/components"),
+        prefix: options.prefix,
+        pathPrefix: false,
+        extensions: [".vue"],
+        ignore: [
+          "**/_*/**",
+          "**/types/**",
+          "**/*.module.css"
+        ]
+      });
+      addImportsDir(resolve("./runtime/composals"));
+      addImportsDir(resolve("./runtime/helpers"));
+    }
+    nuxt.options.css.push(resolve("./runtime/styles/global.css"));
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/action-icon/action-icon-group.d.vue.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '../box.vue.js';
+export interface ActionIconGroupProps 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<ActionIconGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconGroupProps> & 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/action-icon/action-icon-group.vue

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

package/dist/runtime/components/action-icon/action-icon-group.vue.d.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '../box.vue.js';
+export interface ActionIconGroupProps 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<ActionIconGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconGroupProps> & 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/action-icon/action-icon-section.d.vue.ts

@@ -0,0 +1,23 @@
+import type { UiKitColor, UiKitGradient, UiKitRadius, UiKitSize } from '@nui/types';
+import type { BoxProps } from '../box.vue.js';
+export interface ActionIconSectionProps extends /* @vue-ignore */ BoxProps {
+    size?: UiKitSize | `compact-${UiKitSize}`;
+    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    gradient?: UiKitGradient;
+    loading?: boolean;
+    color?: UiKitColor;
+    radius?: UiKitRadius;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ActionIconSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconSectionProps> & 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/action-icon/action-icon-section.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { useStyleResolver } from "@nui/composals";
+import { createVariantColorResolver, getFontSize, getRadius, getSize } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import css from "./action-icon.module.css";
+const {
+  is,
+  mod,
+  gradient,
+  radius,
+  size,
+  variant = "default",
+  color
+} = defineProps({
+  size: { type: null, required: false },
+  variant: { type: String, required: false },
+  gradient: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  radius: { type: [String, Number], required: false }
+});
+const style = computed(() => useStyleResolver((theme) => {
+  const {
+    background,
+    border,
+    text
+  } = createVariantColorResolver({ variant, color, theme, gradient });
+  return {
+    "--section-height": getSize(size, "section-height"),
+    "--section-padding-x": getSize(size, "section-padding-x"),
+    "--section-fz": getFontSize(size),
+    "--section-radius": radius === void 0 ? void 0 : getRadius(radius),
+    "--section-bg": color || variant ? background : void 0,
+    "--section-color": text,
+    "--section-bd": color || variant ? border : void 0
+  };
+}));
+</script>
+
+<template>
+	<Box :is :mod='[mod, { variant }]' :style :class='css.section'>
+		<slot />
+	</Box>
+</template>

package/dist/runtime/components/action-icon/action-icon-section.vue.d.ts

@@ -0,0 +1,23 @@
+import type { UiKitColor, UiKitGradient, UiKitRadius, UiKitSize } from '@nui/types';
+import type { BoxProps } from '../box.vue.js';
+export interface ActionIconSectionProps extends /* @vue-ignore */ BoxProps {
+    size?: UiKitSize | `compact-${UiKitSize}`;
+    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    gradient?: UiKitGradient;
+    loading?: boolean;
+    color?: UiKitColor;
+    radius?: UiKitRadius;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ActionIconSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconSectionProps> & 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/action-icon/action-icon.d.vue.ts

@@ -0,0 +1,29 @@
+import type { UiKitColor, UiKitGradient, UiKitRadius, UiKitSize } from '@nui/types';
+import type { BoxProps } from '../box.vue.js';
+export interface ActionIconProps {
+    size?: UiKitSize | `compact-${UiKitSize}` | string;
+    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    gradient?: UiKitGradient;
+    loading?: boolean;
+    color?: UiKitColor;
+    radius?: UiKitRadius;
+    classes?: {
+        root?: string;
+        icon?: string;
+    };
+    mod?: BoxProps['mod'];
+    icon?: string;
+}
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & 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/action-icon/action-icon.module.css

@@ -0,0 +1 @@
+.root{--ai-size-xs:rem(18px);--ai-size-sm:rem(22px);--ai-size-md:rem(28px);--ai-size-lg:rem(34px);--ai-size-xl:rem(44px);--ai-size-input-xs:rem(30px);--ai-size-input-sm:rem(36px);--ai-size-input-md:rem(42px);--ai-size-input-lg:rem(50px);--ai-size-input-xl:rem(60px);--ai-size:var(--ai-size-md);--ai-color:var(--color-white);--ai-radius:var(--radius-default);--ai-bg:var(--color-primary-filled);--ai-hover:var(--color-primary-filled-hover);align-items:center;background:var(--ai-bg,var(--color-primary-filled));border:var(--ai-bd,rem(1px) solid transparent);border-radius:var(--ai-radius,var(--radius-default));color:var(--ai-color,var(--color-white));cursor:pointer;display:inline-flex;height:var(--ai-size);justify-content:center;line-height:1;min-height:var(--ai-size);min-width:var(--ai-size);overflow:hidden;padding:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--ai-size)}.root[data-loading]{cursor:not-allowed}.root[data-loading] .icon{opacity:0;transform:translateY(100%)}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){border:1px solid transparent;cursor:not-allowed}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])):active{transform:none}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-light{background-color:var(--color-gray-1);color:var(--color-gray-5)}}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-dark{background-color:var(--color-dark-6);color:var(--color-dark-3)}}.root{@mixin hover{&:where(:not([data-loading],:disabled,[data-disabled])){background-color:var(--ai-hover);color:var(--ai-color)}}}.loader{align-items:center;border-radius:var(--ai-radius,var(--radius-default));display:flex;justify-content:center;left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2);@mixin where-light{background-color:hsla(0,0%,100%,.15)}@mixin where-dark{background-color:rgba(0,0,0,.15)}}.icon{align-items:center;display:flex;height:100%;justify-content:center;transition:transform .15s ease,opacity .1s ease;width:100%}.group{--ai-border-width:1px;display:flex}.group :where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .groupSection:not(:only-child):first-child,.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--ai-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):last-child,.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--ai-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--ai-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .groupSection:not(:only-child):first-child,.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--ai-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .groupSection:not(:only-child):last-child,.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(--ai-border-width)/2)}.group[data-orientation=vertical] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--ai-border-width)/2);border-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.section{--section-height-xs:var(--ai-size-xs);--section-height-sm:var(--ai-size-sm);--section-height-md:var(--ai-size-md);--section-height-lg:var(--ai-size-lg);--section-height-xl:var(--ai-size-xl);--section-height-input-xs:var(--ai-size-input-xs);--section-height-input-sm:var(--ai-size-input-sm);--section-height-input-md:var(--ai-size-input-md);--section-height-input-lg:var(--ai-size-input-lg);--section-height-input-xl:var(--ai-size-input-xl);--section-padding-x-xs:rem(6px);--section-padding-x-sm:rem(8px);--section-padding-x-md:rem(10px);--section-padding-x-lg:rem(12px);--section-padding-x-xl:rem(16px);--section-height:var(--section-height-sm);--section-padding-x:var(--section-padding-x-sm);--section-color:var(--color-white);align-items:center;background:var(--section-bg,var(--color-primary-filled));border:var(--section-bd,rem(1px) solid transparent);border-radius:var(--section-radius,var(--mantine-radius-default));color:var(--section-color,var(--color-white));display:inline-flex;font-size:var(--section-fz,var(--mantine-font-size-sm));font-weight:600;height:var(--section-height,var(--section-height-sm));justify-content:center;line-height:1;padding-inline:var(--section-padding-x,var(--section-padding-x-sm));vertical-align:middle;width:auto}

package/dist/runtime/components/action-icon/action-icon.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { useStyleResolver } from "@nui/composals";
+import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import Loader from "../loader/loader.vue";
+import css from "./action-icon.module.css";
+const {
+  color,
+  size = "md",
+  variant = "default",
+  gradient,
+  loading,
+  classes,
+  radius,
+  mod,
+  icon
+} = defineProps({
+  size: { type: null, required: false },
+  variant: { type: String, required: false },
+  gradient: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  radius: { type: [String, Number], required: false },
+  classes: { type: Object, required: false },
+  mod: { type: null, required: false },
+  icon: { type: String, required: false }
+});
+const style = computed(() => useStyleResolver((theme) => {
+  const {
+    background,
+    border,
+    hover,
+    text
+  } = createVariantColorResolver({ variant, color, theme, gradient });
+  return {
+    "--ai-size": getSize(size, "ai-size"),
+    "--ai-radius": getRadius(radius),
+    "--ai-bg": background,
+    "--ai-hover": hover,
+    "--ai-color": text,
+    "--ai-bd": border
+  };
+}));
+const _mod = computed(() => [{ loading }, mod]);
+</script>
+
+<template>
+	<Box
+		is='button'
+		:mod='_mod'
+		:style
+		:class='[css.root, classes?.root]'
+		:disabled='loading'
+	>
+		<Transition name='slide-down'>
+			<Loader
+				v-if='loading'
+				color='var(--ai-color)'
+				size='calc(var(--ai-size) * .55)'
+				:class='css.loader'
+			/>
+		</Transition>
+
+		<span :class='[css.icon, classes?.icon]'>
+			<slot>
+				<Icon v-if='icon' :name='icon' />
+			</slot>
+		</span>
+	</Box>
+</template>

package/dist/runtime/components/action-icon/action-icon.vue.d.ts

@@ -0,0 +1,29 @@
+import type { UiKitColor, UiKitGradient, UiKitRadius, UiKitSize } from '@nui/types';
+import type { BoxProps } from '../box.vue.js';
+export interface ActionIconProps {
+    size?: UiKitSize | `compact-${UiKitSize}` | string;
+    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    gradient?: UiKitGradient;
+    loading?: boolean;
+    color?: UiKitColor;
+    radius?: UiKitRadius;
+    classes?: {
+        root?: string;
+        icon?: string;
+    };
+    mod?: BoxProps['mod'];
+    icon?: string;
+}
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & 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/action-icon/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './action-icon-group.vue';
+export type * from './action-icon-section.vue';
+export type * from './action-icon.vue';

package/dist/runtime/components/app-shell/app-shell-aside.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-aside.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='aside' :mod :class='$style.root'>
+		<slot />
+	</Box>
+</template>
+
+<style module lang="postcss">
+.root {
+	position: fixed;
+	z-index: 1;
+	top: var(--app-shell-header-offset, 0);
+
+	inset-inline-end: 0;
+	transform: var(--app-shell-aside-transform);
+
+	display: flex;
+	flex-direction: column;
+
+	width: var(--app-shell-aside-width);
+
+	height: calc(100dvh - var(--app-shell-header-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-with-border]) > & {
+		border-inline-start: 1px solid var(--app-shell-border-color);
+	}
+}
+</style>

package/dist/runtime/components/app-shell/app-shell-aside.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-footer.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-footer.vue

@@ -0,0 +1,42 @@
+<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='footer' :mod :class='$style.root'>
+		<slot />
+	</Box>
+</template>
+
+<style module lang="postcss">
+.root {
+	position: fixed;
+	z-index: 1;
+
+	bottom: 0;
+	inset-inline: 0;
+	transform: var(--app-shell-footer-transform);
+
+	height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
+	padding-bottom: env(safe-area-inset-bottom);
+
+	background-color: var(--color-body);
+
+	transition-timing-function: var(--app-shell-transition-timing-function);
+	transition-duration: var(--app-shell-transition-duration);
+	transition-property: transform, left, right;
+
+	:where([data-layout='alt']) > & {
+		inset-inline-start: var(--app-shell-navbar-offset, 0rem);
+		inset-inline-end: var(--app-shell-aside-offset, 0rem);
+	}
+
+	:where([data-with-border]) > & {
+		border-top: 1px solid var(--app-shell-border-color);
+	}
+}
+</style>

package/dist/runtime/components/app-shell/app-shell-footer.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;
+    };
+};