@smurfox/proxy-ui 0.1.0

package/README.md

@@ -0,0 +1,159 @@
+# ProxyUI
+
+A component library built for **Nuxt 4**, designed with a clean and consistent API. All components are prefixed with `PU`.
+
+## Features
+
+- 🎨 Built with **Tailwind CSS v4**
+- ✨ Smooth animations powered by **motion-v**
+- 🔷 Icons via **@nuxt/icon** (Iconify)
+- 🔤 **Inter** font loaded automatically
+- 🌙 Dark mode ready
+- 📦 TypeScript support out of the box
+
+---
+
+## Requirements
+
+- Nuxt `^4.0.0`
+- Tailwind CSS `^4.0.0`
+
+---
+
+## Installation
+
+```bash
+npm install proxy-ui
+```
+
+Add the module to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ["proxy-ui"],
+});
+```
+
+Add Tailwind to your CSS entry file:
+
+```css
+@import "tailwindcss";
+```
+
+That's it. All `PU` components are auto-imported and ready to use.
+
+---
+
+## Theming
+
+ProxyUI uses CSS variables for colors. Add them to your CSS file to customize:
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #376fff;
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+}
+```
+
+**Default values:**
+
+| Variable          | Default   |
+| ----------------- | --------- |
+| `--color-primary` | `#376fff` |
+| `--color-success` | `#2bd994` |
+| `--color-warning` | `#f3a952` |
+| `--color-danger`  | `#fb2c56` |
+
+---
+
+## Components
+
+### PUButton
+
+A button component powered by `motion-v` for smooth press animations.
+
+```vue
+<PUButton label="Click me" />
+```
+
+**Props**
+
+| Prop          | Type                                                                                | Default     | Description                                                      |
+| ------------- | ----------------------------------------------------------------------------------- | ----------- | ---------------------------------------------------------------- |
+| `label`       | `string`                                                                            | —           | Text shown inside the button. If omitted, uses the default slot. |
+| `size`        | `'sm' \| 'md' \| 'lg'`                                                              | `'md'`      | Controls padding and font size.                                  |
+| `variant`     | `'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'flat'`                        | `'default'` | Visual style of the button.                                      |
+| `color`       | `'default' \| 'ios' \| 'primary' \| 'danger' \| 'success' \| 'warning' \| 'custom'` | `'default'` | Color scheme applied on top of the variant.                      |
+| `rounded`     | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'`                 | `'lg'`      | Border radius.                                                   |
+| `disabled`    | `boolean`                                                                           | `false`     | Disables the button.                                             |
+| `loading`     | `boolean`                                                                           | `false`     | Shows a spinner and disables interaction.                        |
+| `startIcon`   | `string`                                                                            | —           | Iconify icon name rendered before the label.                     |
+| `endIcon`     | `string`                                                                            | —           | Iconify icon name rendered after the label.                      |
+| `customClass` | `string`                                                                            | —           | Tailwind classes applied when `color="custom"`.                  |
+
+**Examples**
+
+```vue
+<!-- Variants -->
+<PUButton variant="default" label="Default" />
+<PUButton variant="secondary" label="Secondary" />
+<PUButton variant="outline" label="Outline" />
+<PUButton variant="ghost" label="Ghost" />
+<PUButton variant="flat" label="Flat" />
+
+<!-- Colors -->
+<PUButton color="primary" label="Primary" />
+<PUButton color="danger" label="Danger" />
+<PUButton color="success" label="Success" />
+<PUButton color="warning" label="Warning" />
+
+<!-- Sizes -->
+<PUButton size="sm" label="Small" />
+<PUButton size="md" label="Medium" />
+<PUButton size="lg" label="Large" />
+
+<!-- Icons -->
+<PUButton start-icon="lucide:plus" label="New item" />
+<PUButton end-icon="lucide:arrow-right" label="Continue" />
+
+<!-- States -->
+<PUButton disabled label="Disabled" />
+<PUButton loading label="Saving..." />
+
+<!-- Custom color -->
+<PUButton
+  color="custom"
+  custom-class="bg-purple-500 text-white hover:bg-purple-600"
+  label="Custom"
+/>
+
+<!-- Slot -->
+<PUButton>
+  <span>Custom content</span>
+</PUButton>
+```
+
+---
+
+## TypeScript
+
+ProxyUI exports all component types:
+
+```ts
+import type {
+  ButtonProps,
+  ButtonColor,
+  ButtonVariant,
+  ButtonSize,
+} from "proxy-ui";
+```
+
+---
+
+## License
+
+[MIT](./LICENSE)

package/dist/module.d.mts

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

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "proxy-ui",
+  "configKey": "proxyUI",
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,42 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+export * from '../dist/runtime/types/index.js';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "proxy-ui",
+    configKey: "proxyUI"
+  },
+  defaults: {},
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    if (nuxt.options.fonts !== false) {
+      nuxt.options.fonts = nuxt.options.fonts ?? {};
+      nuxt.options.fonts.families = [
+        ...nuxt.options.fonts.families ?? [],
+        {
+          name: "Inter",
+          provider: "google",
+          weights: [400, 500, 600, 700]
+        }
+      ];
+    }
+    nuxt.options.app.head = nuxt.options.app.head ?? {};
+    nuxt.options.app.head.style = [
+      ...nuxt.options.app.head.style ?? [],
+      {
+        innerHTML: `
+          :root {
+            --shadow-ios: 0 10px 30px rgba(0, 0, 0, 0.05);
+          }
+        `
+      }
+    ];
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: "PU",
+      global: true
+    });
+  }
+});
+
+export { module$1 as default };

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

@@ -0,0 +1,14 @@
+import type { AvatarSize, AvatarRounded } from "../types/index.js";
+type __VLS_Props = {
+    label?: string;
+    icon?: string;
+    image?: string;
+    size?: AvatarSize;
+    rounded?: AvatarRounded;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: AvatarSize;
+    rounded: AvatarRounded;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Avatar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="flex items-center justify-center bg-gray-200 dark:bg-white/10"
+    :class="[
+  !hasText ? 'text-black dark:text-white' : '',
+  sizes[props.size],
+  rounded[props.rounded]
+]"
+  >
+    <h1 v-if="props.label">{{ props.label }}</h1>
+    <Icon v-else-if="props.icon" :name="props.icon" />
+    <img
+      v-else-if="props.image"
+      :src="props.image"
+      alt="Avatar"
+      class="object-cover w-full h-full"
+      :class="rounded[props.rounded]"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, useAttrs } from "vue";
+const attrs = useAttrs();
+const sizes = {
+  sm: "w-11 h-11",
+  md: "w-13 h-13",
+  lg: "w-15 h-15",
+  full: "w-full h-full"
+};
+const rounded = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  full: "rounded-full"
+};
+const props = defineProps({
+  label: { type: String, required: false },
+  icon: { type: String, required: false },
+  image: { type: String, required: false },
+  size: { type: String, required: false, default: "md" },
+  rounded: { type: String, required: false, default: "full" }
+});
+const textSizes = /(?:^|:)text-(xs|sm|base|lg|xl|\d*xl|wrap|nowrap|pretty|balance)$/;
+const hasText = computed(() => {
+  const cls = typeof attrs.class === "string" ? attrs.class : "";
+  return cls.split(" ").some((c) => /(?:^|:)text-/.test(c) && !textSizes.test(c));
+});
+</script>

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

@@ -0,0 +1,14 @@
+import type { AvatarSize, AvatarRounded } from "../types/index.js";
+type __VLS_Props = {
+    label?: string;
+    icon?: string;
+    image?: string;
+    size?: AvatarSize;
+    rounded?: AvatarRounded;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: AvatarSize;
+    rounded: AvatarRounded;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,35 @@
+import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from "../types/index.js";
+type __VLS_Props = {
+    label?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    rounded?: ButtonRounded;
+    disabled?: boolean;
+    loading?: boolean;
+    isIconOnly?: boolean;
+    icon?: string;
+    startIcon?: string;
+    endIcon?: string;
+    iconSize?: string;
+    iconColor?: string;
+    customClass?: string;
+};
+declare var __VLS_30: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: ButtonSize;
+    rounded: ButtonRounded;
+    variant: ButtonVariant;
+    color: ButtonColor;
+}, {}, {}, {}, 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.vue

@@ -0,0 +1,137 @@
+<template>
+  <motion.button
+    :class="[
+  isIconOnly ? iconOnlySizes[size] : sizes[size],
+  variantClasses[variant],
+  isIconOnly && customClass ? customClass : getColorBtn(variant, color),
+  roundedClasses[rounded],
+  {
+    'opacity-50': disabled || loading,
+    'cursor-pointer': !disabled && !loading,
+    'pointer-events-none': disabled || loading
+  }
+]"
+    :while-press="disabled || loading ? {} : { scale: 0.95 }"
+    class="flex items-center justify-center select-none transition-[color,background-color,opacity,filter] duration-200"
+    @click="$emit('click')"
+  >
+    <template v-if="isIconOnly">
+      <Icon v-if="loading" name="svg-spinners:ring-resize" />
+      <Icon
+        v-else-if="icon"
+        :name="icon"
+        :size="iconSize"
+        :class="iconColor ? `text-${iconColor}` : ''"
+      />
+    </template>
+    <template v-else>
+      <Icon v-if="loading" name="svg-spinners:ring-resize" class="mr-2" />
+      <Icon v-if="startIcon" :name="startIcon" class="mr-2" />
+      <slot v-if="!label" />
+      <span v-else class="font-medium">{{ label }}</span>
+      <Icon v-if="endIcon" :name="endIcon" class="ml-2" />
+    </template>
+  </motion.button>
+</template>
+
+<script setup>
+import { motion } from "motion-v";
+const sizes = {
+  sm: "text-xs min-w-20 py-1.5 px-2",
+  md: "text-sm min-w-24 py-2 px-4",
+  lg: "text-base min-w-32 py-3 px-6"
+};
+const iconOnlySizes = {
+  sm: "size-7 text-xs",
+  md: "size-9 text-sm",
+  lg: "size-11 text-base"
+};
+const variantClasses = {
+  default: "",
+  secondary: "",
+  outline: "",
+  ghost: "",
+  flat: ""
+};
+const roundedClasses = {
+  none: "rounded-none",
+  xs: "rounded-xs",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  full: "rounded-full"
+};
+const props = defineProps({
+  label: { type: String, required: false },
+  size: { type: String, required: false, default: "md" },
+  variant: { type: String, required: false, default: "default" },
+  color: { type: String, required: false, default: "default" },
+  rounded: { type: String, required: false, default: "lg" },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  isIconOnly: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  startIcon: { type: String, required: false },
+  endIcon: { type: String, required: false },
+  iconSize: { type: String, required: false },
+  iconColor: { type: String, required: false },
+  customClass: { type: String, required: false }
+});
+const defaultColorClasses = {
+  default: "bg-gray-200/80 dark:bg-white/10 text-black dark:text-white hover:bg-gray-300/80 dark:hover:bg-white/20",
+  ios: "bg-blue-500 text-white hover:brightness-110",
+  primary: "bg-primary text-white hover:brightness-110",
+  danger: "bg-danger text-black hover:brightness-110",
+  success: "bg-success text-black hover:brightness-110",
+  warning: "bg-warning text-black hover:brightness-110"
+};
+const secondaryColorClasses = {
+  default: "bg-gray-100 dark:bg-white/5 text-black dark:text-white hover:bg-gray-200/80 dark:hover:bg-white/10",
+  ios: "bg-gray-200/60 dark:bg-white/7 text-blue-500 hover:bg-gray-200 dark:hover:bg-white/10",
+  primary: "bg-gray-200/60 dark:bg-white/7 text-primary hover:bg-gray-200 dark:hover:bg-white/10",
+  danger: "bg-gray-200/60 dark:bg-white/7 text-danger hover:bg-gray-200 dark:hover:bg-white/10",
+  success: "bg-gray-200/60 dark:bg-white/7 text-success hover:bg-gray-200 dark:hover:bg-white/10",
+  warning: "bg-gray-200/60 dark:bg-white/7 text-warning hover:bg-gray-200 dark:hover:bg-white/10"
+};
+const outlineColorClasses = {
+  default: "border border-gray-300 text-black dark:border-white/15 dark:text-white hover:bg-gray-100/80 dark:hover:bg-white/10",
+  ios: "border border-blue-500 text-blue-500 hover:bg-blue-500/15 dark:hover:bg-blue-500/25",
+  primary: "border border-primary text-primary hover:bg-primary/15 dark:hover:bg-primary/25",
+  danger: "border border-danger text-danger hover:bg-danger/15 dark:hover:bg-danger/25",
+  success: "border border-success text-success hover:bg-success/15 dark:hover:bg-success/25",
+  warning: "border border-warning text-warning hover:bg-warning/15 dark:hover:bg-warning/25"
+};
+const ghostColorClasses = {
+  default: "text-black dark:text-white hover:bg-gray-200/60 dark:hover:bg-white/10",
+  ios: "text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-500/20",
+  primary: "text-primary hover:bg-primary/20 dark:hover:bg-primary/30",
+  danger: "text-danger hover:bg-danger/20 dark:hover:bg-danger/30",
+  success: "text-success hover:bg-success/20 dark:hover:bg-success/30",
+  warning: "text-warning hover:bg-warning/20 dark:hover:bg-warning/30"
+};
+const flatColorClasses = {
+  default: "bg-gray-100 dark:bg-white/5 text-black dark:text-white hover:bg-gray-200/80 dark:hover:bg-white/10",
+  ios: "bg-blue-500/15 text-blue-500 hover:bg-blue-500/25",
+  primary: "bg-primary/15 text-primary hover:bg-primary/25 dark:hover:bg-primary/30",
+  danger: "bg-danger/15 text-danger hover:bg-danger/25 dark:hover:bg-danger/30",
+  success: "bg-success/15 text-success hover:bg-success/25 dark:hover:bg-success/30",
+  warning: "bg-warning/15 text-warning hover:bg-warning/25 dark:hover:bg-warning/30"
+};
+function getColorBtn(variant, color) {
+  if (color === "custom") return props.customClass ?? "";
+  switch (variant) {
+    case "secondary":
+      return secondaryColorClasses[color];
+    case "outline":
+      return outlineColorClasses[color];
+    case "ghost":
+      return ghostColorClasses[color];
+    case "flat":
+      return flatColorClasses[color];
+    default:
+      return defaultColorClasses[color];
+  }
+}
+</script>

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

@@ -0,0 +1,35 @@
+import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from "../types/index.js";
+type __VLS_Props = {
+    label?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    rounded?: ButtonRounded;
+    disabled?: boolean;
+    loading?: boolean;
+    isIconOnly?: boolean;
+    icon?: string;
+    startIcon?: string;
+    endIcon?: string;
+    iconSize?: string;
+    iconColor?: string;
+    customClass?: string;
+};
+declare var __VLS_30: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: ButtonSize;
+    rounded: ButtonRounded;
+    variant: ButtonVariant;
+    color: ButtonColor;
+}, {}, {}, {}, 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/Card.d.vue.ts

@@ -0,0 +1,21 @@
+import type { CardVariant } from "../types/index.js";
+type __VLS_Props = {
+    variant?: CardVariant;
+    customClass?: string;
+    isBordered?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    isBordered: 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/Card.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    :class="[
+  !hasBg ? 'bg-white dark:bg-white/5' : '',
+  !hasPadding ? 'p-4' : '',
+  !hasShadow ? 'shadow-(--shadow-ios)' : '',
+  !hasRounded ? 'rounded-2xl' : '',
+  customClass,
+  isBordered ? 'border border-gray-200 dark:border-white/5' : ''
+]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  variant: { type: String, required: false },
+  customClass: { type: String, required: false },
+  isBordered: { type: Boolean, required: false, default: false }
+});
+const hasBg = computed(
+  () => props.customClass?.split(" ").some((c) => c.startsWith("bg-"))
+);
+const hasPadding = computed(
+  () => props.customClass?.split(" ").some((c) => /^p[xytblrse]?-/.test(c))
+);
+const hasShadow = computed(
+  () => props.customClass?.split(" ").some((c) => c.startsWith("shadow-"))
+);
+const hasRounded = computed(
+  () => props.customClass?.split(" ").some((c) => c.startsWith("rounded-"))
+);
+</script>

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

@@ -0,0 +1,21 @@
+import type { CardVariant } from "../types/index.js";
+type __VLS_Props = {
+    variant?: CardVariant;
+    customClass?: string;
+    isBordered?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    isBordered: 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/Chip.d.vue.ts

@@ -0,0 +1,30 @@
+import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from "../types/index.js";
+type __VLS_Props = {
+    label?: string;
+    size?: ChipSize;
+    variant?: ChipVariant;
+    color?: ChipColor;
+    rounded?: ChipRounded;
+    startIcon?: string;
+    endIcon?: string;
+    customClass?: string;
+    iconSize?: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: ChipSize;
+    rounded: ChipRounded;
+    variant: ChipVariant;
+    color: ChipColor;
+}, {}, {}, {}, 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/Chip.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    :class="[
+  sizes[size],
+  variantClasses[variant],
+  getColorBtn(variant, color),
+  roundedClasses[rounded]
+]"
+    class="flex items-center justify-center"
+  >
+    <Icon v-if="startIcon" :name="startIcon" :size="iconSize" class="mr-1" />
+    <slot v-if="!label" />
+    <span v-else class="font-medium">{{ label }}</span>
+    <Icon v-if="endIcon" :name="endIcon" :size="iconSize" class="ml-1" />
+  </div>
+</template>
+
+<script setup>
+import { motion } from "motion-v";
+const sizes = {
+  sm: "text-xs min-w-18 py-1 px-2",
+  md: "text-xs min-w-20 py-1.5 px-2",
+  lg: "text-sm min-w-24 py-2 px-4"
+};
+const variantClasses = {
+  default: "",
+  secondary: "",
+  outline: "",
+  ghost: "",
+  flat: ""
+};
+const roundedClasses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  full: "rounded-full"
+};
+const props = defineProps({
+  label: { type: String, required: false },
+  size: { type: String, required: false, default: "md" },
+  variant: { type: String, required: false, default: "default" },
+  color: { type: String, required: false, default: "default" },
+  rounded: { type: String, required: false, default: "full" },
+  startIcon: { type: String, required: false },
+  endIcon: { type: String, required: false },
+  customClass: { type: String, required: false },
+  iconSize: { type: String, required: false }
+});
+const defaultColorClasses = {
+  default: "bg-gray-200/80 dark:bg-white/10 text-black dark:text-white",
+  ios: "bg-blue-500 text-white",
+  primary: "bg-primary text-white",
+  danger: "bg-danger text-black",
+  success: "bg-success text-black",
+  warning: "bg-warning text-black"
+};
+const secondaryColorClasses = {
+  default: "bg-gray-100 dark:bg-white/5 text-black dark:text-white",
+  ios: "bg-gray-200/60 dark:bg-white/7 text-blue-500",
+  primary: "bg-gray-200/60 dark:bg-white/7 text-primary",
+  danger: "bg-gray-200/60 dark:bg-white/7 text-danger",
+  success: "bg-gray-200/60 dark:bg-white/7 text-success",
+  warning: "bg-gray-200/60 dark:bg-white/7 text-warning"
+};
+const outlineColorClasses = {
+  default: "border border-gray-300 text-black dark:border-white/15 dark:text-white",
+  ios: "border border-blue-500 text-blue-500",
+  primary: "border border-primary text-primary",
+  danger: "border border-danger text-danger",
+  success: "border border-success text-success",
+  warning: "border border-warning text-warning"
+};
+const flatColorClasses = {
+  default: "bg-gray-100 dark:bg-white/5 text-black dark:text-white",
+  ios: "bg-blue-500/15 text-blue-500",
+  primary: "bg-primary/15 text-primary",
+  danger: "bg-danger/15 text-danger",
+  success: "bg-success/15 text-success",
+  warning: "bg-warning/15 text-warning"
+};
+function getColorBtn(variant, color) {
+  if (color === "custom") return props.customClass ?? "";
+  switch (variant) {
+    case "secondary":
+      return secondaryColorClasses[color];
+    case "outline":
+      return outlineColorClasses[color];
+    case "flat":
+      return flatColorClasses[color];
+    default:
+      return defaultColorClasses[color];
+  }
+}
+</script>

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

@@ -0,0 +1,30 @@
+import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from "../types/index.js";
+type __VLS_Props = {
+    label?: string;
+    size?: ChipSize;
+    variant?: ChipVariant;
+    color?: ChipColor;
+    rounded?: ChipRounded;
+    startIcon?: string;
+    endIcon?: string;
+    customClass?: string;
+    iconSize?: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: ChipSize;
+    rounded: ChipRounded;
+    variant: ChipVariant;
+    color: ChipColor;
+}, {}, {}, {}, 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/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,4 @@
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((_nuxtApp) => {
+  console.log("Plugin injected by my-module!");
+});

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,40 @@
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "flat";
+export type ButtonColor = "default" | "ios" | "primary" | "danger" | "success" | "warning" | "custom";
+export type ButtonRounded = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export interface ButtonProps {
+    label?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    rounded?: ButtonRounded;
+    disabled?: boolean;
+    loading?: boolean;
+    isIconOnly?: boolean;
+    icon?: string;
+    startIcon?: string;
+    endIcon?: string;
+    customClass?: string;
+}
+export type ChipSize = "sm" | "md" | "lg";
+export type ChipVariant = "default" | "secondary" | "outline" | "flat";
+export type ChipColor = "default" | "ios" | "primary" | "danger" | "success" | "warning" | "custom";
+export type ChipRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export interface ChipProps {
+    label?: string;
+    size?: ChipSize;
+    variant?: ChipVariant;
+    color?: ChipColor;
+    rounded?: ChipRounded;
+    startIcon?: string;
+    endIcon?: string;
+    customClass?: string;
+}
+export type CardVariant = "default" | "liquidGlass";
+export interface CardProps {
+    variant?: CardVariant;
+    customClass?: string;
+    isBordered?: boolean;
+}
+export type AvatarSize = "sm" | "md" | "lg" | "full";
+export type AvatarRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";

package/dist/types.d.mts

@@ -0,0 +1,5 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'
+
+export * from '../dist/runtime/types/index.js'

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@smurfox/proxy-ui",
+  "version": "0.1.0",
+  "description": "A UI component library built for Nuxt 4",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Smurfox/proxy-ui"
+  },
+  "homepage": "https://github.com/Smurfox/proxy-ui",
+  "bugs": {
+    "url": "https://github.com/Smurfox/proxy-ui/issues"
+  },
+  "author": "Smurfox",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "nuxt",
+    "nuxt4",
+    "ui",
+    "components",
+    "tailwindcss",
+    "motion-v"
+  ],
+  "workspaces": [
+    "playground"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxt dev playground",
+    "dev:build": "nuxt build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/fonts": "^0.14.0",
+    "@nuxt/icon": "^2.2.1",
+    "@nuxt/kit": "^4.4.2",
+    "motion-v": "^1.0.0"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^3.2.4",
+    "@nuxt/eslint-config": "^1.15.2",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.4.2",
+    "@nuxt/test-utils": "^4.0.0",
+    "@types/node": "latest",
+    "changelogen": "^0.6.2",
+    "eslint": "^10.1.0",
+    "nuxt": "^4.4.2",
+    "typescript": "~6.0.2",
+    "vitest": "^4.1.1",
+    "vue-tsc": "^3.2.6"
+  }
+}