@resee-movies/nuxt-ux 0.0.4 → 0.2.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -105,7 +105,7 @@ async function importCSS(nuxt = useNuxt(), options) {
   });
 }
 
-function importModules() {
+function importModules(nuxt) {
   const NuxtFonts = {
     defaults: {
       families: [
@@ -118,6 +118,20 @@ function importModules() {
       ]
     }
   };
+  const primeOptions = nuxt.options.ux?.primevue;
+  const componentPrefix = primeOptions?.componentPrefix ?? "Prime";
+  const primeComponents = Array.from(
+    /* @__PURE__ */ new Set([
+      "Dialog",
+      "Drawer",
+      "Message",
+      "ProgressBar",
+      "ProgressSpinner",
+      "Tag",
+      "Toast",
+      ...primeOptions?.includeComponents ?? []
+    ])
+  );
   const Primevue = {
     defaults: {
       autoImport: false,
@@ -129,15 +143,15 @@ function importModules() {
         unstyled: true
       },
       composables: {
-        include: ["useToast"]
+        include: ["usePrimeVue", "useToast"]
       },
       directives: {
-        prefix: "Prime",
+        prefix: componentPrefix,
         include: ["Tooltip"]
       },
       components: {
-        prefix: "Prime",
-        include: ["Message", "ProgressBar", "ProgressSpinner", "Tag", "Toast"]
+        prefix: componentPrefix,
+        include: primeComponents
       }
     }
   };
@@ -175,32 +189,52 @@ async function importTailwind(nuxt = useNuxt()) {
 }
 
 const module = defineNuxtModule({
-  defaults: {},
+  defaults: {
+    componentPrefix: "Ui"
+  },
   meta: {
     name: "@resee-movies/nuxt-ux",
     configKey: "ux"
   },
-  moduleDependencies: () => importModules(),
+  moduleDependencies: (nuxt) => importModules(nuxt),
   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"] = await resolver.resolvePath("./runtime/theme/primevue/index", { extensions: ["ts", "js"] });
+    nuxt.options.alias["#resee-ux"] = resolver.resolve("./runtime");
     const sources = options.tailwind?.sources?.slice() ?? [];
     const plugins = options.tailwind?.plugins?.slice() ?? [];
     const imports = options.tailwind?.plugins?.slice() ?? [];
     sources.push(components);
     plugins.push(await resolvePath("@egoist/tailwindcss-icons"));
     imports.push(stylesheet);
-    addComponentsDir({ path: components });
+    addComponentsDir({ path: components, prefix: options.componentPrefix });
     addImportsDir([composables]);
     addServerScanDir([server]);
     await importTailwind(nuxt);
     nuxt.hook("modules:done", async () => {
       await importCSS(nuxt, { sources, plugins, imports });
     });
+    let primePassthroughFilename = await resolver.resolvePath("./runtime/theme/primevue/index", {
+      extensions: ["ts", "js"]
+    });
+    if (options.primevue?.passthroughImport) {
+      const ownPassthroughFilename = primePassthroughFilename;
+      primePassthroughFilename = addTemplate({
+        filename: "resee-movies-nuxt-ux-primevue-passthrough.js",
+        write: true,
+        // language=js
+        getContents: () => `
+          import OwnPassthrough from '${ownPassthroughFilename}';
+          import ExtPassthrough from '${options.primevue?.passthroughImport}';
+
+          export default { ...OwnPassthrough, ...ExtPassthrough };
+        `
+      }).dst;
+    }
+    nuxt.options.alias["#resee-movies-nuxt-ux-primevue-passthrough"] = primePassthroughFilename;
   }
 });
 

package/dist/runtime/components/{UiButton.vue → Button.vue}

@@ -16,10 +16,10 @@
     'icon-only': iconOnly
   }
 ]"
-    v-primetooltip.top = "{ value: tooltipText, showDelay: 250 }"
-    @click             = "handleButtonClick"
+    v-prime-tooltip.top = "{ value: tooltipText, showDelay: 250 }"
+    @click              = "handleButtonClick"
   >
-    <UiIconTextPair
+    <IconTextPair
       :text          = "props.text"
       :icon          = "props.icon"
       :icon-size     = "props.size"
@@ -29,7 +29,7 @@
       :loading       = "showLoading"
     >
       <slot />
-    </UiIconTextPair>
+    </IconTextPair>
   </Component>
 </template>
 
@@ -40,6 +40,8 @@ import { computed, ref, useSlots } from "vue";
 </script>
 
 <script setup>
+import vPrimeTooltip from "primevue/tooltip";
+import IconTextPair from "./IconTextPair.vue";
 defineEmits(["click"]);
 const props = defineProps({
   is: { type: null, required: false, default: "button" },

package/dist/runtime/components/{UiButton.vue.d.ts → Button.vue.d.ts}

@@ -1,8 +1,8 @@
 import { type Component } from 'vue';
 import type { StyleStatusLevel } from '../types/index.js';
-import type { UiIconTextPairProps } from './UiIconTextPair.vue.js';
+import type { IconTextPairProps } from './IconTextPair.vue.js';
 /**
- * UiButton component properties.
+ * Button component properties.
  *
  * A note about the `responsive` prop:
  *
@@ -13,7 +13,7 @@ import type { UiIconTextPairProps } from './UiIconTextPair.vue.js';
  * 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 = {
+export interface ButtonProps extends IconTextPairProps {
     is?: string | Component;
     severity?: StyleStatusLevel | 'unset';
     bordered?: boolean;
@@ -25,10 +25,10 @@ export type UiButtonProps = {
     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, {} & {
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (evt: Event) => any;
-}, string, import("vue").PublicProps, Readonly<UiButtonProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
     onClick?: ((evt: Event) => any) | undefined;
 }>, {
     size: "sm" | "lg";

package/dist/runtime/components/{UiCard.vue → Card.vue}

@@ -12,6 +12,10 @@
   </Component>
 </template>
 
+<script>
+
+</script>
+
 <script setup>
 import { useSlots } from "#imports";
 const props = defineProps({

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

@@ -0,0 +1,21 @@
+export interface CardProps {
+    is?: string;
+    interactive?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {
+    is: string;
+    interactive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    image?: (props: {}) => any;
+} & {
+    content?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/CloseButton.vue

@@ -0,0 +1,14 @@
+<template>
+  <Button
+    :aria-label = "primevue.config.locale?.aria?.close"
+    :tooltip    = "primevue.config.locale?.aria?.close"
+    :bordered   = "false"
+    icon        = "i-ph-x"
+  />
+</template>
+
+<script setup>
+import { usePrimeVue } from "primevue/config";
+import Button from "./Button.vue";
+const primevue = usePrimeVue();
+</script>

package/dist/runtime/components/Dialog.vue

@@ -0,0 +1,121 @@
+<template>
+  <PrimeDialog
+    :visible          = "props.visible"
+    :modal            = "props.modal"
+    :closable         = "props.closable"
+    :draggable        = "props.draggable"
+    :header           = "props.showHeaderText ? props.header : void 0"
+    :show-header      = "props.showHeader"
+    :aria-label       = "props.showHeader && props.showHeaderText ? void 0 : props.header"
+    :footer           = "props.footer"
+    :dismissable-mask = "props.dismissableMask"
+    :position         = "props.position"
+    :class            = "['dialog', dialogWidth]"
+    :content-class    = "props.contentClass"
+    :pt               = "passthroughProps"
+    :aria-labelledby  = "dialogLabelledBy"
+    @update:visible   = "(updatedValue) => emits('update:visible', updatedValue)"
+  >
+    <template #header>
+      <div class="title" :id="dialogLabelledBy">
+        <slot v-if="props.showHeaderText" name="title">
+          {{ props.header }}
+        </slot>
+      </div>
+    </template>
+
+    <template #closebutton="{ closeCallback }">
+      <CloseButton @click="closeCallback" />
+    </template>
+
+    <template #default>
+      <slot />
+    </template>
+  </PrimeDialog>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { computed, useId, useAttrs } from "vue";
+import PrimeDialog from "primevue/dialog";
+import CloseButton from "./CloseButton.vue";
+const props = defineProps({
+  size: { type: String, required: false, default: "md" },
+  showHeaderText: { type: Boolean, required: false, default: true },
+  header: { type: null, required: false },
+  footer: { type: null, required: false },
+  visible: { type: Boolean, required: false, skipCheck: true },
+  modal: { type: Boolean, required: false, skipCheck: true, default: true },
+  contentStyle: { type: null, required: false },
+  contentClass: { type: null, required: false, default: void 0 },
+  contentProps: { type: null, required: false },
+  closable: { type: Boolean, required: false, skipCheck: true, default: true },
+  dismissableMask: { type: Boolean, required: false, skipCheck: true, default: true },
+  closeOnEscape: { type: Boolean, required: false, skipCheck: true },
+  showHeader: { type: Boolean, required: false, skipCheck: true, default: true },
+  blockScroll: { type: Boolean, required: false, skipCheck: true },
+  baseZIndex: { type: null, required: false },
+  autoZIndex: { type: Boolean, required: false, skipCheck: true },
+  position: { type: null, required: false, default: void 0 },
+  maximizable: { type: Boolean, required: false, skipCheck: true },
+  breakpoints: { type: Object, required: false },
+  draggable: { type: Boolean, required: false, skipCheck: true, default: false },
+  keepInViewport: { type: Boolean, required: false, skipCheck: true },
+  minX: { type: null, required: false },
+  minY: { type: null, required: false },
+  appendTo: { type: null, required: false },
+  style: { type: null, required: false },
+  closeIcon: { type: null, required: false },
+  maximizeIcon: { type: null, required: false },
+  minimizeIcon: { type: null, required: false },
+  closeButtonProps: { type: null, required: false },
+  maximizeButtonProps: { type: null, required: false },
+  dt: { type: null, required: false },
+  pt: { type: null, required: false },
+  ptOptions: { type: Object, required: false },
+  unstyled: { type: Boolean, required: false }
+});
+const emits = defineEmits(["update:visible"]);
+const attrs = useAttrs();
+const dialogId = useId();
+const dialogWidth = computed(() => {
+  switch (props.size) {
+    case "lg":
+      return "max-w-5xl";
+    case "sm":
+      return "max-w-xl";
+    case "xs":
+      return "max-w-md";
+    case "xxs":
+      return "max-w-sm";
+    default:
+      return "max-w-3xl";
+  }
+});
+const dialogLabelledBy = computed(() => {
+  return !attrs["aria-label"] ? `${dialogId}_header` : void 0;
+});
+const passthroughProps = computed(() => {
+  return {
+    header: {
+      class: "header"
+    },
+    content: {
+      class: "content"
+    },
+    mask: {
+      class: "occlude-background"
+    },
+    transition: {
+      name: "scale"
+    }
+  };
+});
+</script>
+
+<style>
+@reference "tailwindcss";.dialog{background-color:var(--color-global-background);border:1px solid var(--color-global-background-accent);border-radius:var(--radius-md);height:calc(100% - --spacing(4));margin:--spacing(2);overflow:clip;width:100%;@variant sm{box-shadow:var(--shadow-heavy);height:auto}}.dialog .header{align-items:center;border-bottom:1px solid var(--color-global-background-accent);display:flex;gap:--spacing(3);margin-inline:--spacing(3);margin-top:--spacing(3);padding-bottom:--spacing(3)}.dialog .header .title{flex-grow:1;font-size:var(--text-lg)}.dialog .content{overflow-y:auto;padding:--spacing(3)}
+</style>

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

@@ -0,0 +1,31 @@
+import type { DialogProps as PrimeDialogProps } from 'primevue';
+export interface DialogProps extends PrimeDialogProps {
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+    showHeaderText?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DialogProps> & Readonly<{
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    size: "xxs" | "xs" | "sm" | "md" | "lg";
+    showHeaderText: boolean;
+    modal: boolean;
+    contentClass: any;
+    closable: boolean;
+    dismissableMask: boolean;
+    showHeader: boolean;
+    position: import("@primevue/core").HintedString<"top" | "center" | "bottom" | "left" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright">;
+    draggable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => 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/Drawer.vue

@@ -0,0 +1,91 @@
+<template>
+  <PrimeDrawer
+    :class          ="['drawer', `drawer-${props.position ?? 'left'}`]"
+    :visible        = "props.visible"
+    :position       = "props.position"
+    :block-scroll   = "props.blockScroll"
+    :aria-label     = "props.showHeaderText ? void 0 : props.header"
+    :pt             = "passthroughProps"
+    @update:visible = "(updatedValue) => emits('update:visible', updatedValue)"
+  >
+    <template #closebutton="{ closeCallback }">
+      <CloseButton @click="closeCallback" />
+    </template>
+
+    <template #header>
+      <div class="title">
+        <slot v-if="props.showHeaderText" name="title">
+          {{ props.header }}
+        </slot>
+      </div>
+    </template>
+
+    <template #default>
+      <slot />
+    </template>
+  </PrimeDrawer>
+</template>
+
+<script>
+import { calculateBodyScrollbarWidth } from "@primeuix/utils";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import PrimeDrawer from "primevue/drawer";
+import CloseButton from "./CloseButton.vue";
+const props = defineProps({
+  showHeaderText: { type: Boolean, required: false, default: true },
+  visible: { type: Boolean, required: false, skipCheck: true },
+  position: { type: null, required: false },
+  header: { type: null, required: false },
+  baseZIndex: { type: null, required: false },
+  autoZIndex: { type: Boolean, required: false, skipCheck: true },
+  dismissable: { type: Boolean, required: false, skipCheck: true },
+  showCloseIcon: { type: Boolean, required: false, skipCheck: true },
+  closeButtonProps: { type: null, required: false },
+  closeIcon: { type: null, required: false },
+  modal: { type: Boolean, required: false, skipCheck: true },
+  blockScroll: { type: Boolean, required: false, skipCheck: true, default: true },
+  dt: { type: null, required: false },
+  pt: { type: null, required: false },
+  ptOptions: { type: Object, required: false },
+  unstyled: { type: Boolean, required: false },
+  closeOnEscape: { type: Boolean, required: false, skipCheck: true }
+});
+const emits = defineEmits(["update:visible"]);
+const passthroughProps = computed(() => {
+  return {
+    header() {
+      return {
+        class: [
+          "header",
+          {
+            "me-3": props.position !== "right" || calculateBodyScrollbarWidth() === 0
+          }
+        ]
+      };
+    },
+    content: {
+      class: "content"
+    },
+    mask() {
+      return {
+        class: [
+          "occlude-background",
+          {
+            "replace-scrollbar": props.position === "right"
+          }
+        ]
+      };
+    },
+    transition: {
+      name: `slide-in-${props.position ?? "left"}`
+    }
+  };
+});
+</script>
+
+<style>
+@reference "tailwindcss";.drawer{background:var(--color-global-background);border-color:var(--color-global-background-accent)}.drawer.drawer-left{border-right-width:1px;box-shadow:var(--shadow-heavy-right);height:100%;width:--spacing(80)}.drawer.drawer-right{border-left-width:1px;box-shadow:var(--shadow-heavy-left);height:100%;width:--spacing(80)}.drawer.drawer-top{border-bottom-width:1px;box-shadow:var(--shadow-heavy);width:100%}.drawer.drawer-bottom{border-top-width:1px;box-shadow:var(--shadow-heavy-top);width:100%}.drawer .header{align-items:center;border-bottom:1px solid var(--color-global-background-accent);display:flex;margin-inline-start:--spacing(3);margin-top:--spacing(3);padding-bottom:--spacing(3)}.drawer .header .title{flex-grow:1;font-size:var(--text-lg)}.drawer .content{height:100%;overflow-y:auto;padding-bottom:--spacing(3);padding-top:--spacing(3);padding-inline-start:--spacing(3);width:100%}
+</style>

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

@@ -0,0 +1,23 @@
+import type { DrawerProps as PrimeDrawerProps } from 'primevue';
+export interface DrawerProps extends PrimeDrawerProps {
+    showHeaderText?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    showHeaderText: boolean;
+    blockScroll: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => 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/{UiHeading.vue → Heading.vue}

@@ -4,6 +4,10 @@
   </Component>
 </template>
 
+<script>
+
+</script>
+
 <script setup>
 import { computed } from "vue";
 const props = defineProps({

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

@@ -0,0 +1,17 @@
+export interface HeadingProps {
+    text?: string | null;
+    level?: '1' | '2' | '3' | '4' | '5' | '6' | 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<HeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeadingProps> & Readonly<{}>, {
+    text: string | null;
+    level: "1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, 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/Icon.vue

@@ -0,0 +1,24 @@
+<template>
+  <Transition name="fade" mode="out-in">
+    <LoadingIndicator v-if="props.loading" :size="props.size" class="icon" />
+    <span v-else role="presentation" :class="['icon', props.name, props.size, { 'color-cycle': props.colorCycle }]" />
+  </Transition>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import LoadingIndicator from "./LoadingIndicator.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" },
+  colorCycle: { type: Boolean, required: false, default: false }
+});
+</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)}.icon.color-cycle{--resee-color-cycle-timing:cubic-bezier(0,.5,1,.5);animation-duration:8s;animation-iteration-count:infinite;animation-name:resee-color-cycle}@keyframes resee-color-cycle{0%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-red)}6.25%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-orange)}18.75%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-yellow)}31.25%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-green)}43.75%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-seaweed)}56.25%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-aqua)}68.75%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-blue)}81.25%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-indigo)}93.75%{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-violet)}to{animation-timing-function:var(--resee-color-cycle-timing);color:var(--color-resee-red)}}
+</style>

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

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

package/dist/runtime/components/{UiIconTextPair.vue → IconTextPair.vue}

@@ -6,7 +6,7 @@
   props.spacing ? `spacing-${props.spacing}` : void 0
 ]"
   >
-    <UiIcon
+    <Icon
       v-if     = "props.icon || props.loading"
       :name    = "props.icon"
       :size    = "props.iconSize"
@@ -19,7 +19,7 @@
       </slot>
     </span>
 
-    <UiIcon
+    <Icon
       v-if  = "props.trailingIcon"
       :name = "props.trailingIcon"
       :size = "props.iconSize"
@@ -32,7 +32,7 @@ import { useSlots } from "vue";
 </script>
 
 <script setup>
-import UiIcon from "./UiIcon.vue";
+import Icon from "./Icon.vue";
 const props = defineProps({
   text: { type: String, required: false, default: void 0 },
   icon: { type: String, required: false, default: void 0 },

package/dist/runtime/components/{UiIconTextPair.vue.d.ts → IconTextPair.vue.d.ts}

@@ -1,15 +1,15 @@
-import type { UiIconProps } from './UiIcon.vue.js';
-export type UiIconTextPairProps = {
+import type { IconProps } from './Icon.vue.js';
+export interface IconTextPairProps {
     text?: string;
     icon?: string;
     trailingIcon?: string;
-    iconSize?: UiIconProps['size'];
-    trailingIconSize?: UiIconProps['size'];
+    iconSize?: IconProps['size'];
+    trailingIconSize?: IconProps['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<{}>, {
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<IconTextPairProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconTextPairProps> & Readonly<{}>, {
     loading: boolean;
     icon: string;
     text: string;