@resee-movies/nuxt-ux 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ReSee Movies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# ReSee Movies Nuxt UX
+The next-gen user experience library for ReSee Movies - currently in development.

package/dist/module.d.mts

@@ -0,0 +1,6 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions } from '../dist/runtime/types/index.js';
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@resee-movies/nuxt-ux",
+  "configKey": "ux",
+  "version": "0.0.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,185 @@
+import { useNuxt, addTemplate, resolvePath, logger, installModule, addVitePlugin, defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addServerScanDir } from '@nuxt/kit';
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+const IMPORT_REGEX = /(?<=\s|^|;|\})@import\s+["']tailwindcss["']/gmu;
+function getDefaults(config) {
+  return [
+    "css/tailwind.css",
+    "css/main.css",
+    "css/styles.css"
+  ].map(
+    (defaultPath) => join(config.srcDir, config.dir?.assets || "assets", defaultPath)
+  );
+}
+async function importCSS(nuxt = useNuxt(), options) {
+  const sources = nuxt.options._layers.map(
+    (layer) => layer.config.srcDir || layer.cwd
+  );
+  const plugins = options?.plugins ?? [];
+  if (options?.sources) {
+    sources.push(...options.sources);
+  }
+  await nuxt.callHook("tailwindcss:sources:extend", sources);
+  const sourcesTemplate = addTemplate({
+    filename: "tailwindcss/sources.css",
+    write: true,
+    getContents: () => {
+      const sourceStrings = sources.map((source) => `@source ${JSON.stringify(source)};`).join("\n");
+      const pluginStrings = plugins.map((plugin) => `@plugin ${JSON.stringify(plugin)};`).join("\n");
+      return sourceStrings + "\n" + pluginStrings;
+    }
+  });
+  const importingFiles = [];
+  const projectCSSFiles = await Promise.all(nuxt.options.css.map((p) => resolvePath(p)));
+  for (let i = 0; i < nuxt.options._layers.length; i++) {
+    const currentLayer = nuxt.options._layers[i];
+    const resolvedCSS = [];
+    if (i === 0) {
+      resolvedCSS.push(...projectCSSFiles);
+    } else if (currentLayer?.config.css) {
+      const cssPaths = currentLayer.config.css.filter((p) => typeof p === "string").map((p) => resolvePath(p));
+      await Promise.all(cssPaths).then(
+        (files) => resolvedCSS.push(...files)
+      );
+    }
+    if (currentLayer?.config) {
+      const promises = Array.from(
+        /* @__PURE__ */ new Set([...getDefaults(currentLayer.config), ...resolvedCSS])
+      ).map(async (file2) => {
+        const contents = await readFile(file2, { encoding: "utf-8" }).catch(() => "");
+        return [file2, {
+          hasImport: IMPORT_REGEX.test(contents),
+          isInNuxt: projectCSSFiles.includes(file2)
+        }];
+      });
+      const analyzed = await Promise.all(promises).then(
+        (files) => files.filter((file2) => file2[1].hasImport)
+      );
+      if (analyzed.length) {
+        importingFiles.push(...analyzed);
+        break;
+      }
+    }
+  }
+  const [file, { isInNuxt } = {}] = importingFiles.length === 0 ? [
+    addTemplate({
+      filename: "tailwind.css",
+      write: true,
+      getContents: () => {
+        return [
+          `@import 'tailwindcss';`,
+          `@import ${JSON.stringify(sourcesTemplate.dst)};`,
+          ...(options?.imports ?? []).map((item) => `@import ${JSON.stringify(item)};`)
+        ].join("\n");
+      }
+    }).dst
+  ] : importingFiles.find((file2) => file2[1].isInNuxt) || importingFiles.pop();
+  if (!isInNuxt) {
+    nuxt.options.css.unshift(file);
+  }
+  nuxt.options.alias["#tailwindcss"] = file;
+  nuxt.options.alias["#tailwindcss/sources"] = sourcesTemplate.dst;
+  nuxt.hook("builder:watch", (_e, path) => {
+    if (path !== file && projectCSSFiles.includes(path)) {
+      readFile(file, { encoding: "utf-8" }).then((fileContents) => {
+        if (IMPORT_REGEX.test(fileContents)) {
+          logger.withTag("@nuxtjs/tailwindcss").warn(`New import for \`tailwindcss\` detected in ${file}. Restart server.`);
+        }
+      });
+    }
+  });
+}
+
+async function importModules(nuxt = useNuxt()) {
+  await installModule("@nuxt/fonts", {
+    families: [
+      {
+        name: "Archivo",
+        provider: "google",
+        styles: ["normal"],
+        weights: [200, 300, 400, 500]
+      }
+    ]
+  });
+  await installModule("@primevue/nuxt-module", {
+    autoImport: false,
+    loadStyles: false,
+    importPT: {
+      from: "#resee-movies-nuxt-ux-primevue-passthrough"
+    },
+    options: {
+      unstyled: true
+    },
+    composables: {
+      include: ["useToast"]
+    },
+    directives: {
+      prefix: "Prime",
+      include: ["Tooltip"]
+    },
+    components: {
+      prefix: "Prime",
+      include: ["Message", "ProgressBar", "ProgressSpinner", "Tag", "Toast"]
+    }
+  }, nuxt);
+}
+
+const Builder = "@nuxt/vite-builder";
+const VitePlugin = "@tailwindcss/vite";
+const PostPlugin = "@tailwindcss/postcss";
+function checkVitePlugins(plugins) {
+  return plugins.some((entry) => {
+    if (Array.isArray(entry)) {
+      return checkVitePlugins(entry);
+    }
+    return entry && typeof entry === "object" && "name" in entry && typeof entry.name === "string" && entry.name.startsWith(VitePlugin);
+  });
+}
+async function importTailwind(nuxt = useNuxt()) {
+  if (nuxt.options.builder === Builder) {
+    if (!checkVitePlugins(nuxt.options.vite.plugins ?? [])) {
+      await import(VitePlugin).then(
+        (tailwind) => addVitePlugin(tailwind.default())
+      );
+    }
+  } else {
+    nuxt.options.postcss ??= { plugins: {}, order: [] };
+    nuxt.options.postcss.plugins ??= {};
+    if (!nuxt.options.postcss.plugins[PostPlugin]) {
+      nuxt.options.postcss.plugins[PostPlugin] = {};
+    }
+  }
+}
+
+const module = defineNuxtModule({
+  defaults: {},
+  meta: {
+    name: "@resee-movies/nuxt-ux",
+    configKey: "ux"
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const components = resolver.resolve("./runtime/components/");
+    const composables = resolver.resolve("./runtime/composables/");
+    const server = resolver.resolve("./runtime/server/");
+    const stylesheet = resolver.resolve("./runtime/theme/css/styles.css");
+    nuxt.options.alias["#resee-movies-nuxt-ux-primevue-passthrough"] = resolver.resolve("./runtime/theme/primevue/index.ts");
+    const sources = options.tailwind?.sources?.slice() ?? [];
+    const plugins = options.tailwind?.plugins?.slice() ?? [];
+    const imports = options.tailwind?.plugins?.slice() ?? [];
+    sources.push(components);
+    plugins.push("@egoist/tailwindcss-icons");
+    imports.push(stylesheet);
+    addComponentsDir({ path: components });
+    addImportsDir([composables]);
+    addServerScanDir([server]);
+    await importTailwind(nuxt);
+    await importModules(nuxt);
+    nuxt.hook("modules:done", async () => {
+      await importCSS(nuxt, { sources, plugins, imports });
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/UiButton.vue

@@ -0,0 +1,92 @@
+<template>
+  <Component
+    :is         = "props.is"
+    :aria-label = "shrink ? props.text : void 0"
+    :disabled   = "props.disabled"
+    :class      = "[
+  props.severity === 'unset' ? void 0 : props.variant,
+  {
+    'borderless': !props.bordered,
+    'small': props.size === 'sm',
+    'large': props.size === 'lg',
+    'disabled': props.disabled,
+    'loading': showLoading,
+    'responsive-shrink': shrink,
+    'responsive-grow': props.responsive === 'grow',
+    'icon-only': iconOnly
+  }
+]"
+    v-primetooltip.top = "{ value: tooltipText, showDelay: 250 }"
+    @click             = "handleButtonClick"
+  >
+    <UiIconTextPair
+      :text          = "props.text"
+      :icon          = "props.icon"
+      :icon-size     = "props.size"
+      :trailing-icon = "props.trailingIcon"
+      :layout        = "props.layout"
+      :spacing       = "props.spacing ?? (props.layout === 'column' ? void 0 : 'wide')"
+      :loading       = "showLoading"
+    >
+      <slot />
+    </UiIconTextPair>
+  </Component>
+</template>
+
+<script>
+import { toNonNullableArray } from "@resee-movies/utilities/arrays/to-non-nullable-array";
+import { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
+import { computed, ref, useSlots } from "vue";
+</script>
+
+<script setup>
+defineEmits(["click"]);
+const props = defineProps({
+  is: { type: null, required: false, default: "button" },
+  severity: { type: String, required: false, default: void 0 },
+  bordered: { type: Boolean, required: false, default: true },
+  responsive: { type: [Boolean, String], required: false, default: false },
+  variant: { type: String, required: false, default: "btn" },
+  size: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  loading: { type: Boolean, required: false, default: false },
+  tooltip: { type: String, required: false, default: void 0 },
+  disabledTooltip: { type: String, required: false, default: void 0 },
+  onClick: { type: [Function, Array], required: false },
+  text: { type: String, required: false },
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  iconSize: { type: String, required: false },
+  trailingIconSize: { type: String, required: false },
+  layout: { type: String, required: false },
+  spacing: { type: String, required: false }
+});
+const slots = useSlots();
+const shrink = computed(
+  () => props.responsive === true || props.responsive === "shrink"
+);
+const iconOnly = computed(
+  () => !!(props.icon || props.trailingIcon) && !(props.text || slots.default)
+);
+const tooltipText = computed(
+  () => props.disabled ? props.disabledTooltip : props.tooltip
+);
+const pendingClickResult = ref(false);
+const showLoading = computed(
+  () => props.loading || pendingClickResult.value
+);
+async function handleButtonClick(evt) {
+  if (showLoading.value || props.disabled) {
+    return;
+  }
+  if (props.onClick) {
+    const handlers = toNonNullableArray(props.onClick);
+    const results = handlers.map((handler) => handler(evt));
+    if (!!results.find((result) => isPromiseLike(result))) {
+      pendingClickResult.value = true;
+      await Promise.allSettled(results);
+      pendingClickResult.value = false;
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,53 @@
+import { type Component } from 'vue';
+import type { StyleStatusLevel } from '../types/index.js';
+import type { UiIconTextPairProps } from './UiIconTextPair.vue.js';
+/**
+ * UiButton component properties.
+ *
+ * A note about the `responsive` prop:
+ *
+ * When a boolean true or "shrink", causes the button text to be hidden at the small
+ * breakpoint, leaving only the icon. The text is still made reader accessible
+ * via the aria-label attribute.
+ *
+ * When "grow", causes the button to expand to the full width of its container, and
+ * increase its font size when at the small breakpoint.
+ */
+export type UiButtonProps = {
+    is?: string | Component;
+    severity?: StyleStatusLevel | 'unset';
+    bordered?: boolean;
+    responsive?: boolean | 'grow' | 'shrink';
+    variant?: 'btn' | 'a';
+    size?: 'sm' | 'lg';
+    disabled?: boolean;
+    loading?: boolean;
+    tooltip?: string;
+    disabledTooltip?: string;
+    onClick?: ((evt: Event) => void | Promise<void>) | ((evt: Event) => void | Promise<void>)[];
+} & UiIconTextPairProps;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UiButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (evt: Event) => any;
+}, string, import("vue").PublicProps, Readonly<UiButtonProps> & Readonly<{
+    onClick?: ((evt: Event) => any) | undefined;
+}>, {
+    size: "sm" | "lg";
+    loading: boolean;
+    is: string | Component;
+    severity: StyleStatusLevel | "unset";
+    bordered: boolean;
+    responsive: boolean | "grow" | "shrink";
+    variant: "btn" | "a";
+    disabled: boolean;
+    tooltip: string;
+    disabledTooltip: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/UiCard.vue

@@ -0,0 +1,26 @@
+<template>
+  <Component :is="props.is" :class="['card', props.interactive ? 'interactive' : void 0]">
+    <slot>
+      <div v-if="slots.image" class="image">
+        <slot name="image" />
+      </div>
+
+      <div v-if="slots.content" class="content">
+        <slot name="content" />
+      </div>
+    </slot>
+  </Component>
+</template>
+
+<script setup>
+import { useSlots } from "#imports";
+const props = defineProps({
+  is: { type: String, required: false, default: "div" },
+  interactive: { type: Boolean, required: false, default: false }
+});
+const slots = useSlots();
+</script>
+
+<style scoped>
+@reference "tailwindcss";.card{border:2px solid var(--color-background-scale-c);border-bottom-left-radius:--spacing(2);border-top-right-radius:--spacing(2);overflow:clip}.card .content{padding:--spacing(1.5)}.card.interactive{transition-duration:.5s;transition-property:border-color,border-radius,box-shadow;transition-timing-function:var(--default-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none}.card.interactive:focus-within,.card.interactive:hover{border-color:var(--color-background-scale-f);border-radius:0;box-shadow:var(--shadow-heavy)}
+</style>

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

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    is?: string;
+    interactive?: boolean;
+};
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    image?: (props: typeof __VLS_9) => any;
+} & {
+    content?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    is: string;
+    interactive: 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/runtime/components/UiHeading.vue

@@ -0,0 +1,16 @@
+<template>
+  <Component :is="tagName" :class="`h${props.level}`">
+    <slot>{{ props.text }}</slot>
+  </Component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  text: { type: [String, null], required: false, default: void 0 },
+  level: { type: [String, Number], required: false, default: "1" }
+});
+const tagName = computed(() => {
+  return `h${props.level}`;
+});
+</script>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    text?: string | null;
+    level?: '1' | '2' | '3' | '4' | '5' | '6' | 1 | 2 | 3 | 4 | 5 | 6;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    text: string | null;
+    level: "1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, 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/UiIcon.vue

@@ -0,0 +1,23 @@
+<template>
+  <Transition name="fade" mode="out-in">
+    <UiLoadingIndicator v-if="props.loading" :size="props.size" class="icon" />
+    <span v-else role="presentation" :class="['icon', props.name, props.size]" />
+  </Transition>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import UiLoadingIndicator from "./UiLoadingIndicator.vue";
+const props = defineProps({
+  name: { type: String, required: false, default: void 0 },
+  loading: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" }
+});
+</script>
+
+<style scoped>
+.icon{align-items:center;display:inline-flex}.icon:before{content:var(--zero-width-space)}.icon.sm{font-size:var(--icon-size-small)}.icon.md{font-size:var(--icon-size-medium)}.icon.lg{font-size:var(--icon-size-large)}.icon.xl{font-size:var(--icon-size-jumbo)}
+</style>

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

@@ -0,0 +1,12 @@
+export type UiIconProps = {
+    name?: string;
+    loading?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+};
+declare const __VLS_export: import("vue").DefineComponent<UiIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiIconProps> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl";
+    name: string;
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UiIconTextPair.vue

@@ -0,0 +1,51 @@
+<template>
+  <span
+    :class="[
+  'pair',
+  props.layout ? `layout-${props.layout}` : void 0,
+  props.spacing ? `spacing-${props.spacing}` : void 0
+]"
+  >
+    <UiIcon
+      v-if     = "props.icon || props.loading"
+      :name    = "props.icon"
+      :size    = "props.iconSize"
+      :loading = "props.loading"
+    />
+
+    <span v-if="props.text || slots.default" class="label">
+      <slot>
+        {{ props.text }}
+      </slot>
+    </span>
+
+    <UiIcon
+      v-if  = "props.trailingIcon"
+      :name = "props.trailingIcon"
+      :size = "props.iconSize"
+    />
+  </span>
+</template>
+
+<script>
+import { useSlots } from "vue";
+</script>
+
+<script setup>
+import UiIcon from "./UiIcon.vue";
+const props = defineProps({
+  text: { type: String, required: false, default: void 0 },
+  icon: { type: String, required: false, default: void 0 },
+  trailingIcon: { type: String, required: false, default: void 0 },
+  iconSize: { type: String, required: false, default: "md" },
+  trailingIconSize: { type: String, required: false, default: "md" },
+  layout: { type: String, required: false, default: void 0 },
+  spacing: { type: String, required: false, default: void 0 },
+  loading: { type: Boolean, required: false, default: false }
+});
+const slots = useSlots();
+</script>
+
+<style scoped>
+@reference "tailwindcss";.pair{align-items:baseline;display:inline-flex;gap:--spacing(1)}.pair.spacing-wide{gap:--spacing(2)}.pair.layout-row{display:flex}.pair.layout-column{align-items:center;flex-direction:column}
+</style>

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

@@ -0,0 +1,30 @@
+import type { UiIconProps } from './UiIcon.vue.js';
+export type UiIconTextPairProps = {
+    text?: string;
+    icon?: string;
+    trailingIcon?: string;
+    iconSize?: UiIconProps['size'];
+    trailingIconSize?: UiIconProps['size'];
+    layout?: 'column' | 'row';
+    spacing?: 'wide' | 'normal';
+    loading?: boolean;
+};
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UiIconTextPairProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiIconTextPairProps> & Readonly<{}>, {
+    loading: boolean;
+    icon: string;
+    text: string;
+    trailingIcon: string;
+    iconSize: "sm" | "md" | "lg" | "xl";
+    trailingIconSize: "sm" | "md" | "lg" | "xl";
+    layout: "column" | "row";
+    spacing: "wide" | "normal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/UiLayoutPageColumn.vue

@@ -0,0 +1,23 @@
+<template>
+  <Component
+    :is    = "props.is"
+    :class = "['page-column', props.layout ? `layout-${props.layout}` : void 0]"
+  >
+    <slot />
+  </Component>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+const props = defineProps({
+  is: { type: String, required: false, default: "div" },
+  layout: { type: String, required: false, default: void 0 }
+});
+</script>
+
+<style scoped>
+@reference "tailwindcss";:global(:root){--page-column-gutter:calc(var(--spacing)*3);--page-column-pad-y:calc(var(--spacing)*12);--page-column-pad-vista:calc(var(--spacing)*52)}.page-column{margin-left:auto;margin-right:auto;padding:var(--page-column-gutter)}.page-column.layout-main:where(:has(:first-child.page-container)){padding-bottom:0;padding-top:0}.page-column.layout-vista:where(:has(:last-child.page-container)){padding-bottom:0}@variant md{.page-column{max-width:var(--container-3xl)}.page-column.layout-main{padding-top:var(--page-column-pad-y)}.page-column.layout-main,.page-column.layout-vista{padding-bottom:var(--page-column-pad-y)}}@variant lg{.page-column{max-width:var(--container-5xl)}.page-column.layout-vista{padding-top:var(--page-column-pad-vista)}}@variant portrait{.page-column.layout-vista{padding-top:min(calc(var(--spacing)*52),calc(56.25vw - 110px))}}
+</style>

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

@@ -0,0 +1,17 @@
+export type UiLayoutPageColumn = {
+    is?: string;
+    layout?: 'main' | 'vista';
+};
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UiLayoutPageColumn, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiLayoutPageColumn> & Readonly<{}>, {
+    layout: "main" | "vista";
+    is: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/UiLayoutPageContainer.vue

@@ -0,0 +1,24 @@
+<template>
+  <Component
+    :is    = "props.is"
+    :class = "['page-container', props.glassEffect ? 'glass-effect' : void 0]"
+  >
+    <slot />
+  </Component>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+const props = defineProps({
+  is: { type: String, required: false, default: "div" },
+  glassEffect: { type: Boolean, required: false, default: false },
+  accentColor: { type: String, required: false, default: void 0 }
+});
+</script>
+
+<style scoped>
+@reference "tailwindcss";:global(:root){--page-container-pad-y:calc(var(--page-column-gutter)*2);--page-container-pad-x:var(--page-container-pad-y);--page-container-radius:calc(var(--spacing)*1)}.page-container{--custom-accent-color:v-bind(accentColor);--page-container-accent-color:var(--custom-accent-color,var(--color-global-foreground-accent));background-color:var(--color-global-background);border:1px solid var(--page-container-accent-color);border-radius:var(--page-container-radius);box-shadow:var(--shadow-heavy);padding:var(--page-container-pad-y) var(--page-container-pad-x);transition:border-color;transition-duration:var(--default-transition-duration)}@variant sm{.page-container.glass-effect{backdrop-filter:blur(var(--blur-sm));background-color:color-mix(in srgb-linear,transparent 40%,var(--color-global-background))}}@variant max-sm{.page-container:where(.page-column>.page-container){border-bottom:none;border-left:none;border-radius:0;border-right:none;box-shadow:none;margin-left:calc(var(--page-column-gutter)*-1);margin-right:calc(var(--page-column-gutter)*-1);padding-left:var(--page-column-gutter);padding-right:var(--page-column-gutter)}}
+</style>