@smurfox/proxy-ui 0.1.35 → 0.2.1

package/README.md

@@ -204,6 +204,122 @@ A flexible input component with validation and state management.
 
 ---
 
+### PUTextArea
+
+A multi-line text input. Shares the look and feel of `PUInput`, with extra props for `rows` and resize behavior.
+
+```vue
+<PUTextArea v-model="message" label="Message" placeholder="Write your message" />
+```
+
+**Props**
+
+| Prop          | Type                                                        | Default                   | Description                                          |
+| ------------- | ----------------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
+| `modelValue`  | `string \| number`                                          | —                         | Bound value (v-model).                               |
+| `label`       | `string`                                                    | —                         | Label displayed above the textarea.                  |
+| `labelClass`  | `string`                                                    | `'text-sm font-semibold'` | Custom classes for the label.                        |
+| `placeholder` | `string`                                                    | —                         | Placeholder text.                                    |
+| `description` | `string`                                                    | —                         | Helper text displayed below.                         |
+| `rounded`     | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'xl'`                    | Border radius.                                       |
+| `variant`     | `'default' \| 'secondary'`                                  | `'default'`               | Visual style.                                        |
+| `rows`        | `number \| string`                                          | `4`                       | Initial number of visible rows.                      |
+| `resize`      | `'none' \| 'both' \| 'horizontal' \| 'vertical'`            | `'vertical'`              | Resize behavior.                                     |
+| `required`    | `boolean`                                                   | `false`                   | Shows a red asterisk on the label.                   |
+| `error`       | `string`                                                    | —                         | Error message to display. Changes styling to danger. |
+| `disabled`    | `boolean`                                                   | `false`                   | Disables the textarea.                               |
+
+**Slots**
+
+| Slot           | Description                   |
+| -------------- | ----------------------------- |
+| `startContent` | Icon or content at the start. |
+| `endContent`   | Icon or content at the end.   |
+
+**Examples**
+
+```vue
+<!-- Basic -->
+<PUTextArea v-model="message" label="Message" placeholder="Write your message" />
+
+<!-- Fixed size, no resize -->
+<PUTextArea label="Comment" :rows="6" resize="none" />
+
+<!-- With error -->
+<PUTextArea label="Bio" error="Bio is required" required />
+
+<!-- With icon -->
+<PUTextArea label="Notes">
+  <template #startContent>
+    <Icon name="lucide:notebook-pen" />
+  </template>
+</PUTextArea>
+```
+
+---
+
+### PUSelect
+
+A custom select with an animated dropdown panel teleported to `body`. Dark-mode aware, supports `v-model`, and emits both `update:modelValue` and `change`.
+
+```vue
+<PUSelect
+  v-model="role"
+  label="Role"
+  :options="[
+    { label: 'Admin', value: 'admin' },
+    { label: 'Editor', value: 'editor' },
+    { label: 'Viewer', value: 'viewer' },
+  ]"
+/>
+```
+
+**Props**
+
+| Prop          | Type                                                        | Default                   | Description                                          |
+| ------------- | ----------------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
+| `modelValue`  | `string \| number \| null`                                  | `null`                    | Selected value (v-model).                            |
+| `options`     | `{ label: string, value: string \| number }[]`              | `[]`                      | Items shown in the dropdown.                         |
+| `label`       | `string`                                                    | —                         | Label displayed above the select.                    |
+| `labelClass`  | `string`                                                    | `'text-sm font-semibold'` | Custom classes for the label.                        |
+| `placeholder` | `string`                                                    | `'Seleccionar'`           | Text shown when nothing is selected.                 |
+| `description` | `string`                                                    | —                         | Helper text displayed below.                         |
+| `rounded`     | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'xl'`                    | Border radius.                                       |
+| `variant`     | `'default' \| 'secondary'`                                  | `'default'`               | Visual style.                                        |
+| `required`    | `boolean`                                                   | `false`                   | Shows a red asterisk on the label.                   |
+| `error`       | `string`                                                    | `''`                      | Error message to display. Changes styling to danger. |
+| `disabled`    | `boolean`                                                   | `false`                   | Disables the select.                                 |
+
+**Events**
+
+| Event               | Payload            | Description                            |
+| ------------------- | ------------------ | -------------------------------------- |
+| `update:modelValue` | `string \| number` | Emitted when an option is picked.      |
+| `change`            | `string \| number` | Emitted alongside `update:modelValue`. |
+
+**Examples**
+
+```vue
+<!-- Basic -->
+<PUSelect v-model="country" :options="countries" label="Country" />
+
+<!-- With description -->
+<PUSelect
+  v-model="plan"
+  :options="plans"
+  label="Plan"
+  description="You can change this later"
+/>
+
+<!-- With error -->
+<PUSelect v-model="status" :options="statuses" error="Pick a status" required />
+
+<!-- Disabled -->
+<PUSelect :options="statuses" disabled label="Locked" />
+```
+
+---
+
 ### PUCard
 
 A flexible card component with customizable styling and borders.
@@ -451,17 +567,152 @@ const activeTab = ref("dashboard");
 
 ---
 
+### PUDropdown
+
+A floating panel anchored to an activator element. Opens on click and closes on outside click. Provides a `closeDropdown` function (via `inject`) so child items can close the panel after acting.
+
+```vue
+<PUDropdown>
+  <template #activator>
+    <PUButton label="Options" end-icon="lucide:chevron-down" />
+  </template>
+  <template #content>
+    <ul class="p-2">
+      <li class="px-3 py-2 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg cursor-pointer">
+        Profile
+      </li>
+      <li class="px-3 py-2 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg cursor-pointer">
+        Settings
+      </li>
+    </ul>
+  </template>
+</PUDropdown>
+```
+
+**Slots**
+
+| Slot        | Description                                              |
+| ----------- | -------------------------------------------------------- |
+| `activator` | The element the user clicks to open the dropdown.        |
+| `content`   | The floating panel contents (rendered when open).        |
+
+**Provides**
+
+| Key             | Type         | Description                                                              |
+| --------------- | ------------ | ------------------------------------------------------------------------ |
+| `closeDropdown` | `() => void` | Call from inside `content` to close the dropdown (e.g. after an action). |
+
+```vue
+<!-- Closing the dropdown from a child item -->
+<script setup>
+import { inject } from "vue";
+const closeDropdown = inject("closeDropdown");
+</script>
+
+<template>
+  <button @click="handleAction(); closeDropdown?.()">Action</button>
+</template>
+```
+
+---
+
+### PUTable
+
+A responsive data table that renders as a normal `<table>` on `md+` viewports and switches to a stack of cards on mobile. Cells are rendered through per-column scoped slots so you can fully customize their content.
+
+```vue
+<PUTable :columns="columns" :items="items" />
+```
+
+**Props**
+
+| Prop          | Type                                                                        | Default                                  | Description                                                              |
+| ------------- | --------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------ |
+| `items`       | `Array<{ id: string \| number, [key: string]: unknown }>`                    | `[]`                                                                | Row data. Each item must have an `id` used as the Vue key.                              |
+| `columns`     | `{ name: string, id: string, width?: string }[]`                             | `[]`                                                                | Column definitions. `id` is the row key to read, `width` is CSS width.                  |
+| `rounded`     | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'lg'`                                                              | Border radius of the outer container.                                                   |
+| `isBordered`   | `boolean`                                                                    | `false`                                                             | Adds an outer border around the table.                                                  |
+| `isSelectable` | `boolean`                                                                    | `false`                                                             | Enables row click + hover effects (cursor, bg highlight, motion-v lift). Emits `row-click`. |
+| `itemsSize`    | `'sm' \| 'md' \| 'lg'`                                                       | `'md'`                                                              | Vertical padding of body rows. `sm` → `py-2`, `md` → `py-4`, `lg` → `py-6`.             |
+| `headerColor`  | `string`                                                                     | `bg-[#F4F4F5] text-[#71717A] dark:bg-[#27272A] dark:text-[#A1A1AA]` | Tailwind classes applied to `<thead>`.                                                  |
+| `bodyColor`    | `string`                                                                     | `''`                                                                | Tailwind classes applied to `<tbody>`.                                                  |
+
+**Events**
+
+| Event       | Payload                                                  | Description                                                              |
+| ----------- | -------------------------------------------------------- | ------------------------------------------------------------------------ |
+| `row-click` | `item: { id: string \| number, [key: string]: unknown }` | Emitted when a row is clicked (only when `isSelectable` is `true`).      |
+
+**Slots**
+
+| Slot            | Scope                                  | Description                                                                  |
+| --------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
+| `cell-{id}`     | `{ item, value }`                      | Customize the cell for the column with `id` = `{id}`. Falls back to `value`. |
+| `mobile-card`   | `{ item, columns }`                    | Replace the default mobile card layout for an entire row.                    |
+
+**Examples**
+
+```vue
+<template>
+  <!-- Basic table -->
+  <PUTable :columns="columns" :items="items" />
+
+  <!-- Custom cell rendering -->
+  <PUTable :columns="columns" :items="items" rounded="2xl" is-bordered>
+    <template #cell-status="{ value }">
+      <PUChip :label="value" :color="value === 'Active' ? 'success' : 'danger'" variant="flat" size="sm" />
+    </template>
+    <template #cell-actions="{ item }">
+      <div class="flex gap-2 justify-end">
+        <PUButton is-icon-only icon="lucide:pencil" variant="ghost" size="sm" @click.stop="edit(item)" />
+        <PUButton is-icon-only icon="lucide:trash-2" variant="ghost" color="danger" size="sm" @click.stop="remove(item)" />
+      </div>
+    </template>
+  </PUTable>
+
+  <!-- Selectable rows with row-click -->
+  <PUTable
+    :columns="columns"
+    :items="items"
+    is-selectable
+    @row-click="onRowClick"
+  />
+</template>
+
+<script setup>
+const columns = [
+  { name: "Name", id: "name", width: "40%" },
+  { name: "Status", id: "status", width: "30%" },
+  { name: "", id: "actions", width: "30%" },
+];
+const items = [
+  { id: 1, name: "Ada Lovelace", status: "Active" },
+  { id: 2, name: "Alan Turing", status: "Inactive" },
+];
+
+function onRowClick(item) {
+  console.log("clicked row:", item);
+}
+</script>
+
+> When `isSelectable` is enabled, clicks on interactive children (buttons, links) propagate to the row. Use `@click.stop` on those children if you don't want them to fire `row-click`.
+```
+
+---
+
 ## TypeScript
 
 ProxyUI exports all component types:
 
 ```ts
 import type {
+  GlobalRounded,
   ButtonProps,
   ButtonColor,
   ButtonVariant,
   ButtonSize,
   ButtonRounded,
+  InputProps,
   InputVariant,
   InputRounded,
   ChipProps,
@@ -479,6 +730,8 @@ import type {
 } from "proxy-ui";
 ```
 
+> `PUTextArea`, `PUSelect`, `PUDropdown`, and `PUTable` define their props inline and do not export dedicated `Props` types. They reuse `InputVariant` and `InputRounded` from the same package.
+
 ---
 
 ## License

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "proxy-ui",
   "configKey": "proxyUI",
-  "version": "0.1.35",
+  "version": "0.2.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -11,8 +11,9 @@ const module$1 = defineNuxtModule({
     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 ?? [],
+      const fonts = nuxt.options.fonts;
+      fonts.families = [
+        ...fonts.families ?? [],
         {
           name: "Inter",
           provider: "google",

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

@@ -1,4 +1,4 @@
-import type { AvatarSize, AvatarRounded } from "../types/index.js";
+import type { AvatarSize, AvatarRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     icon?: string;

package/dist/runtime/components/Avatar.vue

@@ -4,18 +4,23 @@
     :class="[
   !hasText ? 'text-black dark:text-white' : '',
   sizes[props.size],
-  rounded[props.rounded]
+  roundedClasses[props.rounded]
 ]"
   >
-    <h1 v-if="props.label">{{ props.label }}</h1>
-    <Icon v-else-if="props.icon" :name="props.icon" />
+    <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]"
-    />
+      :class="roundedClasses[props.rounded]"
+    >
   </div>
 </template>
 
@@ -28,14 +33,14 @@ const sizes = {
   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",
+const roundedClasses = {
+  "none": "rounded-none",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
   "2xl": "rounded-2xl",
-  full: "rounded-full"
+  "full": "rounded-full"
 };
 const props = defineProps({
   label: { type: String, required: false },
@@ -44,7 +49,7 @@ const props = defineProps({
   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 textSizes = /(?:^|:)text-(?:xs|sm|base|lg|\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));

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

@@ -1,4 +1,4 @@
-import type { AvatarSize, AvatarRounded } from "../types/index.js";
+import type { AvatarSize, AvatarRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     icon?: string;

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

@@ -1,4 +1,4 @@
-import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from "../types/index.js";
+import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: ButtonSize;

package/dist/runtime/components/Button.vue

@@ -16,7 +16,10 @@
     @click="emit('click', $event)"
   >
     <template v-if="isIconOnly">
-      <Icon v-if="loading" name="svg-spinners:ring-resize" />
+      <Icon
+        v-if="loading"
+        name="svg-spinners:ring-resize"
+      />
       <Icon
         v-else-if="icon"
         :name="icon"
@@ -25,11 +28,26 @@
       />
     </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" />
+      <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" />
+      <span
+        v-else
+        class="font-medium"
+      >{{ label }}</span>
+      <Icon
+        v-if="endIcon"
+        :name="endIcon"
+        class="ml-2"
+      />
     </template>
   </motion.button>
 </template>
@@ -54,14 +72,14 @@ const variantClasses = {
   flat: ""
 };
 const roundedClasses = {
-  none: "rounded-none",
-  xs: "rounded-xs",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
+  "none": "rounded-none",
+  "xs": "rounded-xs",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
   "2xl": "rounded-2xl",
-  full: "rounded-full"
+  "full": "rounded-full"
 };
 const emit = defineEmits(["click"]);
 const props = defineProps({

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

@@ -1,4 +1,4 @@
-import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from "../types/index.js";
+import type { ButtonSize, ButtonVariant, ButtonColor, ButtonRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: ButtonSize;

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

@@ -1,4 +1,4 @@
-import type { CardVariant } from "../types/index.js";
+import type { CardVariant } from '../types/index.js';
 type __VLS_Props = {
     variant?: CardVariant;
     customClass?: string;

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

@@ -1,4 +1,4 @@
-import type { CardVariant } from "../types/index.js";
+import type { CardVariant } from '../types/index.js';
 type __VLS_Props = {
     variant?: CardVariant;
     customClass?: string;

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

@@ -1,4 +1,4 @@
-import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from "../types/index.js";
+import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: ChipSize;

package/dist/runtime/components/Chip.vue

@@ -8,19 +8,31 @@
 ]"
     class="flex items-center justify-center"
   >
-    <Icon v-if="startIcon" :name="startIcon" :size="iconSize" class="mr-1" />
+    <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" />
+    <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"
+  sm: "text-xs min-w-8 py-1 px-2",
+  md: "text-xs min-w-12 py-1.5 px-2",
+  lg: "text-sm min-w-14 py-2 px-4"
 };
 const variantClasses = {
   default: "",
@@ -30,13 +42,13 @@ const variantClasses = {
   flat: ""
 };
 const roundedClasses = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
+  "none": "rounded-none",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
   "2xl": "rounded-2xl",
-  full: "rounded-full"
+  "full": "rounded-full"
 };
 const props = defineProps({
   label: { type: String, required: false },

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

@@ -1,4 +1,4 @@
-import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from "../types/index.js";
+import type { ChipSize, ChipVariant, ChipColor, ChipRounded } from '../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: ChipSize;

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

@@ -0,0 +1,12 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    activator?: ((props: {}) => any) | undefined;
+} & {
+    content?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Dropdown.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    ref="dropdownRef"
+    class="relative inline-block text-left"
+  >
+    <div @click="toggle">
+      <slot name="activator" />
+    </div>
+
+    <AnimatePresence>
+      <motion.div
+        v-if="isOpen"
+        :initial="{ scale: 0.9, opacity: 0, y: -10 }"
+        :exit="{ opacity: 0 }"
+        :animate="{ scale: 1, opacity: 1, y: 0 }"
+        class="absolute right-0 z-50 mt-2 min-w-52 origin-top-right bg-white border border-gray-100 rounded-xl shadow-xl dark:bg-[#18181B] dark:border-black/40"
+        @click="handleContentClick"
+      >
+        <slot name="content" />
+      </motion.div>
+    </AnimatePresence>
+  </div>
+</template>
+
+<script setup>
+import { AnimatePresence, motion } from "motion-v";
+import { ref, onMounted, onUnmounted, provide } from "vue";
+const isOpen = ref(false);
+const dropdownRef = ref(null);
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+};
+const close = () => {
+  isOpen.value = false;
+};
+provide("closeDropdown", close);
+const onClickOutside = (event) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+    setTimeout(() => close(), 10);
+  }
+};
+const handleContentClick = (event) => {
+  event.stopPropagation();
+};
+onMounted(() => {
+  document.addEventListener("click", onClickOutside);
+});
+onUnmounted(() => {
+  document.removeEventListener("click", onClickOutside);
+});
+</script>

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

@@ -0,0 +1,12 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    activator?: ((props: {}) => any) | undefined;
+} & {
+    content?: ((props: {}) => any) | undefined;
+};

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

@@ -1,4 +1,4 @@
-import type { InputVariant, InputRounded } from "../types/index.js";
+import type { InputVariant, InputRounded } from '../types/index.js';
 type __VLS_Props = {
     modelValue?: string | number;
     type?: string;
@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     type: string;
     variant: InputVariant;
     disabled: boolean;
-    labelClass: string;
     required: boolean;
+    labelClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;