@indielayer/ui 1.3.0 → 1.5.0

package/lib/components/radio/Radio.vue.d.ts

@@ -1,11 +1,10 @@
 import { type ExtractPublicPropTypes, type Ref } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const radioProps: {
-    value: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor | FunctionConstructor)[];
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -13,12 +12,15 @@ declare const radioProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -40,15 +42,16 @@ export type RadioProps = ExtractPublicPropTypes<typeof radioProps>;
 type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content';
 type InternalExtraData = {
     selected: Ref<boolean>;
+    isInsideForm: boolean;
+    isInsideFormGroup: boolean;
 };
 export interface RadioTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    value: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor | FunctionConstructor)[];
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -56,12 +59,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -85,11 +91,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    value: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor | FunctionConstructor)[];
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -97,12 +102,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -122,14 +130,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/useCommon").Size;
-    required: boolean;
+    disabled: boolean;
     glow: boolean;
     color: string;
-    disabled: boolean;
+    size: import("../../composables/useCommon").Size;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];

package/lib/components/radio/Radio.vue2.js

@@ -1,117 +1,132 @@
-import { defineComponent as I, ref as N, computed as q, openBlock as o, createElementBlock as d, normalizeStyle as E, unref as l, normalizeClass as s, withKeys as D, withModifiers as F, createElementVNode as t, withDirectives as K, vModelRadio as M, createBlock as b, toDisplayString as j, createCommentVNode as u, renderSlot as A } from "vue";
-import { useCommon as y } from "../../composables/useCommon.js";
-import { useTheme as L } from "../../composables/useTheme.js";
-import { useColors as O } from "../../composables/useColors.js";
-import { useInteractive as g } from "../../composables/useInteractive.js";
-import { useInputtable as m } from "../../composables/useInputtable.js";
-import P from "../spinner/Spinner.vue.js";
-import T from "../inputFooter/InputFooter.vue.js";
-const U = ["aria-selected", "aria-disabled"], X = ["name", "required", "disabled"], G = /* @__PURE__ */ t("circle", {
+import { defineComponent as D, ref as M, computed as P, unref as s, openBlock as o, createElementBlock as n, normalizeStyle as T, normalizeClass as r, withKeys as H, withModifiers as L, createElementVNode as a, withDirectives as O, mergeProps as U, toHandlers as X, vModelRadio as _, createBlock as h, toDisplayString as j, createCommentVNode as p, renderSlot as A } from "vue";
+import { useCommon as g } from "../../composables/useCommon.js";
+import { useTheme as J } from "../../composables/useTheme.js";
+import { useColors as Q } from "../../composables/useColors.js";
+import { useInteractive as w } from "../../composables/useInteractive.js";
+import { useInputtable as c } from "../../composables/useInputtable.js";
+import W from "../spinner/Spinner.vue.js";
+import Y from "../inputFooter/InputFooter.vue.js";
+const Z = ["aria-selected", "aria-disabled", "onKeypress"], x = ["id", "name", "required", "disabled"], ee = /* @__PURE__ */ a("circle", {
   cx: "10",
   cy: "10",
   r: "10"
-}, null, -1), H = [
-  G
-], J = ["textContent"], Q = {
-  ...y.props(),
-  ...O.props("primary"),
+}, null, -1), le = [
+  ee
+], se = ["textContent"], oe = {
   ...g.props(),
-  ...m.props(),
-  value: [String, Number, Boolean, Function, Object, Array],
-  label: String,
-  helper: String,
+  ...Q.props("primary"),
+  ...w.props(),
+  ...c.props(),
+  value: [String, Number],
   glow: Boolean
-}, W = {
+}, re = {
   name: "XRadio",
   validators: {
-    ...y.validators()
+    ...g.validators()
   }
-}, re = /* @__PURE__ */ I({
-  ...W,
-  props: Q,
-  emits: m.emits(!1),
-  setup(h, { expose: w, emit: k }) {
-    const r = h, p = k, c = N(null), i = q({
+}, ce = /* @__PURE__ */ D({
+  ...re,
+  props: oe,
+  emits: c.emits(!1),
+  setup(V, { expose: k, emit: I }) {
+    const l = V, d = I, f = M(null), { focus: v, blur: C } = w(f), {
+      errorInternal: $,
+      hideFooterInternal: z,
+      isInsideForm: B,
+      isInsideFormGroup: u,
+      isFirstValidation: R,
+      formGroup: m,
+      reset: F,
+      validate: b,
+      setError: N
+    } = c(l, { focus: v, emit: d, withListeners: !1 }), i = P({
       get() {
-        return r.value === r.modelValue;
+        const e = s(m.value);
+        return u ? e === l.value : l.value === l.modelValue;
       },
       set() {
-        p("update:modelValue", r.value);
+        d("update:modelValue", l.value), m.setValue(l.value);
       }
-    }), { focus: f, blur: $ } = g(c), {
-      errorInternal: C,
-      reset: B,
-      validate: S,
-      setError: V
-    } = m(r, { focus: f, emit: p, withListeners: !1 }), { styles: z, classes: a, className: R } = L("Radio", {}, r, { selected: i });
-    return w({ focus: f, blur: $, reset: B, validate: S, setError: V }), (e, n) => (o(), d("label", {
+    });
+    function S() {
+      d("update:modelValue", l.value), m.setValue(l.value);
+    }
+    const q = {
+      input: () => {
+        u || setTimeout(() => {
+          l.validateOnInput && !R.value && b(l.modelValue);
+        }, 0);
+      }
+    }, { styles: E, classes: t, className: G } = J("Radio", {}, l, { selected: i, isInsideForm: B, isInsideFormGroup: u });
+    return k({ focus: v, blur: C, reset: F, validate: b, setError: N }), (e, y) => (o(), n("label", {
       ref_key: "elRef",
-      ref: c,
+      ref: f,
       tabindex: "0",
       "aria-selected": i.value ? "true" : "false",
       "aria-disabled": e.disabled || e.loading ? "true" : void 0,
-      style: E(l(z)),
-      class: s([
-        l(R),
-        l(a).wrapper
+      style: T(s(E)),
+      class: r([
+        s(G),
+        s(t).wrapper
       ]),
-      onKeypress: n[1] || (n[1] = D(F((v) => e.$emit("update:modelValue", e.value), ["prevent", "stop"]), ["space"]))
+      onKeypress: H(L(S, ["prevent", "stop"]), ["space"])
     }, [
-      t("div", {
-        class: s(["flex items-center", { "cursor-not-allowed": e.disabled }])
+      a("div", {
+        class: r(["flex items-center", { "cursor-not-allowed": e.disabled }])
       }, [
-        K(t("input", {
-          "onUpdate:modelValue": n[0] || (n[0] = (v) => i.value = v),
+        O(a("input", U({
+          id: e.id,
+          "onUpdate:modelValue": y[0] || (y[0] = (K) => i.value = K),
           name: e.name,
           required: e.required,
           disabled: e.disabled || e.loading,
           type: "radio",
           class: "invisible absolute"
-        }, null, 8, X), [
-          [M, i.value]
+        }, X(q, !0)), null, 16, x), [
+          [_, i.value]
         ]),
-        t("div", {
-          class: s([
+        a("div", {
+          class: r([
             e.$style.radio,
-            l(a).circle,
+            s(t).circle,
             [e.glow && !e.disabled && !e.loading ? e.$style["radio--glow"] : ""]
           ])
         }, [
-          e.loading ? (o(), b(P, {
+          e.loading ? (o(), h(W, {
             key: 0,
             size: e.size,
             class: "absolute"
-          }, null, 8, ["size"])) : (o(), d("svg", {
+          }, null, 8, ["size"])) : (o(), n("svg", {
             key: 1,
             viewBox: "0 0 20 20",
-            class: s(["fill-current w-full", [
-              l(a).circleIcon,
+            class: r(["fill-current w-full", [
+              s(t).circleIcon,
               e.$style.radio_circle
             ]])
-          }, H, 2))
+          }, le, 2))
         ], 2),
-        t("div", null, [
-          e.label ? (o(), d("div", {
+        a("div", null, [
+          e.label ? (o(), n("div", {
             key: 0,
-            class: s(l(a).label),
+            class: r(s(t).label),
             textContent: j(e.label)
-          }, null, 10, J)) : u("", !0),
-          e.$slots.default ? (o(), d("div", {
+          }, null, 10, se)) : p("", !0),
+          e.$slots.default ? (o(), n("div", {
             key: 1,
-            class: s(l(a).content)
+            class: r(s(t).content)
           }, [
             A(e.$slots, "default")
-          ], 2)) : u("", !0)
+          ], 2)) : p("", !0)
         ])
       ], 2),
-      e.hideFooter ? u("", !0) : (o(), b(T, {
+      s(z) ? p("", !0) : (o(), h(Y, {
         key: 0,
-        error: l(C),
+        error: s($),
         helper: e.helper
       }, null, 8, ["error", "helper"]))
-    ], 46, U));
+    ], 46, Z));
   }
 });
 export {
-  re as default
+  ce as default
 };

package/lib/components/radio/theme/Radio.base.theme.js

@@ -1,16 +1,19 @@
-const n = {
+const a = {
   classes: {
-    wrapper: "inline-block relative cursor-pointer focus:outline-none group",
+    wrapper: ({ data: e }) => {
+      const t = ["inline-block relative cursor-pointer focus:outline-none group"];
+      return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-3"), t;
+    },
     circle: ({ props: e }) => {
-      let t = "rounded-full flex justify-center items-center shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline";
-      return (e.size === "xs" || e.size === "sm") && (t += " h-4 w-4"), e.size === "xl" ? t += " h-6 w-6" : t += " h-5 w-5", t;
+      const t = ["rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline"];
+      return e.size === "lg" ? t.push("h-5 w-5") : e.size === "xl" ? t.push("h-6 w-6") : t.push("h-4 w-4"), t;
     },
     circleIcon: ({ props: e, data: t }) => {
-      const r = [];
-      return t.selected || r.push("opacity-0"), e.size === "sm" || e.size === "xs" ? r.push("h-2") : e.size === "lg" ? r.push("h-2.5") : e.size === "xl" ? r.push("h-3") : r.push("h-[0.6rem]"), r;
+      const s = [];
+      return t.selected || s.push("opacity-0"), e.size === "sm" || e.size === "xs" ? s.push("h-2") : e.size === "lg" ? s.push("h-2.5") : e.size === "xl" ? s.push("h-3") : s.push("h-2"), s;
     },
     label: ({ props: e }) => {
-      let t = "font-medium text-gray-800 dark:text-gray-200 pl-2";
+      let t = "font-medium text-secondary-800 dark:text-secondary-200 pl-2";
       return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
     },
     content: ({ props: e }) => {
@@ -18,50 +21,50 @@ const n = {
       return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
     }
   },
-  styles: ({ props: e, colors: t, css: r, data: a }) => {
-    const l = t.getPalette("gray"), i = t.getPalette(e.color), s = [];
-    return e.loading ? r.variables({
+  styles: ({ props: e, colors: t, css: s, data: n }) => {
+    const r = t.getPalette("gray"), l = t.getPalette(e.color), i = [];
+    return e.loading ? s.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? a.selected ? s.push(r.variables({
+    }) : (e.disabled ? n.selected ? i.push(s.variables({
       bg: "transparent",
-      border: l[200],
-      circle: l[200],
+      border: r[200],
+      circle: r[200],
       dark: {
         bg: "transparent",
-        border: l[700],
-        circle: l[700]
+        border: r[700],
+        circle: r[700]
       }
-    })) : s.push(r.variables({
-      bg: l[200],
-      border: l[200],
+    })) : i.push(s.variables({
+      bg: r[200],
+      border: r[200],
       dark: {
-        bg: l[700],
-        border: l[700]
+        bg: r[700],
+        border: r[700]
       }
-    })) : (a.selected ? s.push(r.variables({
+    })) : (n.selected ? i.push(s.variables({
       bg: "transparent",
-      border: i[500],
-      circle: i[500],
+      border: l[500],
+      circle: l[500],
       dark: {
         bg: "transparent",
-        border: i[500],
-        circle: i[500]
+        border: l[500],
+        circle: l[500]
       }
-    })) : s.push(r.variables({
+    })) : i.push(s.variables({
       bg: "#fff",
-      border: e.glow ? i[300] : l[300],
+      border: e.glow ? l[300] : r[300],
       dark: {
-        bg: l[900],
-        border: e.glow ? i[300] : l[300]
+        bg: r[900],
+        border: e.glow ? l[300] : r[400]
       }
-    })), e.glow && s.push(r.get("glow", t.getColorOpacity(i[500], 0.5)))), s);
+    })), e.glow && i.push(s.get("glow", t.getColorOpacity(l[500], 0.5)))), i);
   }
-}, u = n;
+}, u = a;
 export {
   u as default
 };

package/lib/components/radio/theme/Radio.carbon.theme.js

@@ -1,59 +1,62 @@
 const i = {
   classes: {
-    wrapper: "inline-block relative cursor-pointer focus:outline-none group",
+    wrapper: ({ data: e }) => {
+      const r = ["inline-block relative cursor-pointer focus:outline-none group"];
+      return e.isInsideForm && !e.isInsideFormGroup && r.push("mb-8"), r;
+    },
     circle: ({ props: e }) => {
-      let l = "rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline";
-      return (e.size === "xs" || e.size === "sm") && (l += " h-4 w-4"), e.size === "xl" ? l += " h-6 w-6" : l += " h-5 w-5", l;
+      const r = ["rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline"];
+      return e.size === "xs" || e.size === "sm" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-5 w-5") : r.push("h-4 w-4"), r;
     },
-    circleIcon: ({ props: e, data: l }) => {
-      const r = [];
-      return l.selected ? e.size === "lg" ? r.push("h-2.5") : e.size === "xl" ? r.push("h-3") : r.push("h-2") : r.push("opacity-0"), r;
+    circleIcon: ({ props: e, data: r }) => {
+      const t = [];
+      return r.selected ? e.size === "lg" ? t.push("h-2.5") : e.size === "xl" ? t.push("h-3") : t.push("h-2") : t.push("opacity-0"), t;
     },
-    label: "text-sm text-gray-800 dark:text-gray-200 pl-2",
+    label: "text-sm text-secondary-800 dark:text-secondary-200 pl-2",
     content: "pl-2"
   },
-  styles: ({ props: e, colors: l, css: r, data: s }) => {
-    const t = l.getPalette("gray"), a = l.getPalette(e.color), n = [];
-    return e.loading ? r.variables({
+  styles: ({ props: e, colors: r, css: t, data: a }) => {
+    const s = r.getPalette("gray"), l = r.getPalette(e.color), n = [];
+    return e.loading ? t.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? s.selected ? n.push(r.variables({
+    }) : (e.disabled ? a.selected ? n.push(t.variables({
       bg: "transparent",
-      border: t[200],
-      circle: t[200],
+      border: s[200],
+      circle: s[200],
       dark: {
         bg: "transparent",
-        border: t[700],
-        circle: t[700]
+        border: s[700],
+        circle: s[700]
       }
-    })) : n.push(r.variables({
-      bg: t[200],
-      border: t[200],
+    })) : n.push(t.variables({
+      bg: s[200],
+      border: s[200],
       dark: {
-        bg: t[700],
-        border: t[700]
+        bg: s[700],
+        border: s[700]
       }
-    })) : (s.selected ? n.push(r.variables({
+    })) : (a.selected ? n.push(t.variables({
       bg: "transparent",
-      border: a[500],
-      circle: a[500],
+      border: l[500],
+      circle: l[500],
       dark: {
         bg: "transparent",
-        border: a[500],
-        circle: a[500]
+        border: l[500],
+        circle: l[500]
       }
-    })) : n.push(r.variables({
+    })) : n.push(t.variables({
       bg: "#fff",
-      border: e.glow ? a[300] : t[300],
+      border: e.glow ? l[300] : s[900],
       dark: {
-        bg: t[900],
-        border: e.glow ? a[300] : t[300]
+        bg: s[900],
+        border: e.glow ? l[300] : s[300]
       }
-    })), e.glow && n.push(r.get("glow", l.getColorOpacity(a[500], 0.5)))), n);
+    })), e.glow && n.push(t.get("glow", r.getColorOpacity(l[500], 0.5)))), n);
   }
 }, o = i;
 export {

package/lib/components/select/Select.vue.d.ts

@@ -4,11 +4,10 @@ declare const selectProps: {
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
-    label: StringConstructor;
-    helper: StringConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -16,12 +15,15 @@ declare const selectProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -34,11 +36,15 @@ declare const selectProps: {
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
 };
 export type SelectOption = {
     value: number | string;
-    disabled: boolean;
     label: string;
+    disabled?: boolean;
 };
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>;
 type InternalClasses = 'wrapper' | 'box' | 'content' | 'iconWrapper' | 'icon';
@@ -51,11 +57,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
-    label: StringConstructor;
-    helper: StringConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -63,12 +68,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -81,6 +89,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
 }, {
     focus: () => void | undefined;
     blur: () => void | undefined;
@@ -91,11 +103,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
-    label: StringConstructor;
-    helper: StringConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -103,12 +114,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -121,16 +135,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/useCommon").Size;
-    flat: boolean;
-    required: boolean;
     disabled: boolean;
+    flat: boolean;
+    color: string;
+    size: import("../../composables/useCommon").Size;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];