cisse-vue-ui 0.8.3 → 0.9.0

package/dist/{CheckboxGroup.vue_vue_type_script_setup_true_lang-DuJr8cz3.cjs → CheckboxGroup.vue_vue_type_script_setup_true_lang-BC86pBlY.cjs}

@@ -2,7 +2,8 @@
 const vue = require("vue");
 const useId = require("./useId-nxrBaIC9.cjs");
 const vue$1 = require("@iconify/vue");
-const useDropdown = require("./useDropdown-DK4c5JGL.cjs");
+const useDropdown = require("./useDropdown-HI7ABBLe.cjs");
+const useInputStyles = require("./useInputStyles-DMfvW6N5.cjs");
 const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-DM9IkUGy.cjs");
 const index = require("./index-D1x3TH9k.cjs");
 const Button_vue_vue_type_script_setup_true_lang = require("./Button.vue_vue_type_script_setup_true_lang-CXRj7LEP.cjs");
@@ -65,33 +66,22 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     size: { default: "md" },
     invalid: { type: Boolean },
     disabled: { type: Boolean },
+    focused: { type: Boolean },
     wrapperClass: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
     const slots = vue.useSlots();
-    const hasLeftIcon = vue.computed(() => props.icon || slots.icon);
-    const hasRightContent = vue.computed(() => props.iconRight || slots.actions);
-    const inputClass = vue.computed(() => [
-      // Base styles
-      "block w-full rounded-xl border text-sm transition-all",
-      "border-gray-200 bg-gray-50 text-gray-900 placeholder-gray-400",
-      "focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:bg-white focus:outline-hidden",
-      "disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed",
-      // Dark mode
-      "dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-500",
-      "dark:focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:bg-slate-600",
-      "dark:disabled:bg-slate-800 dark:disabled:text-gray-500",
-      // Padding based on icons/actions
-      hasLeftIcon.value ? "pl-10" : "pl-4",
-      hasRightContent.value ? "pr-10" : "pr-4",
-      // Size
-      props.size === "sm" && "py-2 text-xs",
-      props.size === "md" && "py-3 text-sm",
-      props.size === "lg" && "py-4 text-base",
-      // Invalid state
-      props.invalid && "border-red-500 focus:border-red-500 focus:ring-red-500 dark:border-red-500"
-    ]);
+    const hasLeftIcon = vue.computed(() => !!props.icon || !!slots.icon);
+    const hasRightContent = vue.computed(() => !!props.iconRight || !!slots.actions);
+    const { inputClass, iconClass } = useInputStyles.useInputStyles({
+      disabled: vue.toRef(props, "disabled"),
+      invalid: vue.toRef(props, "invalid"),
+      focused: vue.toRef(props, "focused"),
+      size: vue.toRef(props, "size"),
+      hasLeftIcon,
+      hasRightIcon: hasRightContent
+    });
     __expose({ inputClass });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -102,18 +92,18 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
             __props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
               key: 0,
               icon: __props.icon,
-              class: "size-5"
-            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
+              class: vue.normalizeClass(vue.unref(iconClass))
+            }, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true)
           ])
         ])) : vue.createCommentVNode("", true),
-        vue.renderSlot(_ctx.$slots, "default", { inputClass: inputClass.value }),
+        vue.renderSlot(_ctx.$slots, "default", { inputClass: vue.unref(inputClass) }),
         hasRightContent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$i, [
           vue.renderSlot(_ctx.$slots, "actions", {}, () => [
             __props.iconRight ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
               key: 0,
               icon: __props.iconRight,
-              class: "size-5 text-gray-400 pointer-events-none"
-            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
+              class: vue.normalizeClass([vue.unref(iconClass), "pointer-events-none"])
+            }, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true)
           ])
         ])) : vue.createCommentVNode("", true)
       ], 2);
@@ -215,7 +205,8 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     teleport: { type: Boolean, default: true },
     searchable: { type: Boolean, default: false },
     noResultsText: { default: "No results found" },
-    triggerClass: {}
+    triggerClass: {},
+    size: { default: "md" }
   }, {
     "modelValue": { type: [String, Number, Boolean, null] },
     "modelModifiers": {}
@@ -310,12 +301,17 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     vue.watch(searchQuery, () => {
       highlightedIndex.value = 0;
     });
-    const triggerClasses = vue.computed(() => {
-      const base = "flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm text-left transition";
-      const state = props.disabled ? "cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500" : isOpen.value ? "border-primary ring-2 ring-primary/20 bg-white dark:bg-gray-900" : "border-gray-300 bg-white hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600";
-      const text = selectedOption.value ? "text-gray-800 dark:text-gray-200" : "text-gray-400 dark:text-gray-500";
-      return [base, state, text, props.triggerClass];
+    const hasValue = vue.computed(() => !!selectedOption.value);
+    const { triggerClass } = useInputStyles.useInputStyles({
+      disabled: vue.computed(() => props.disabled),
+      focused: isOpen,
+      hasValue,
+      size: vue.toRef(props, "size")
     });
+    const triggerClasses = vue.computed(() => [
+      ...triggerClass.value,
+      props.triggerClass
+    ]);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
         vue.createElementVNode("button", {
@@ -753,7 +749,8 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     minDate: {},
     maxDate: {},
     teleport: { type: Boolean, default: true },
-    id: {}
+    id: {},
+    size: { default: "md" }
   }, {
     "modelValue": { default: null },
     "modelModifiers": {}
@@ -866,6 +863,13 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       });
       return formatter.format(date);
     };
+    const hasValue = vue.computed(() => !!modelValue.value);
+    const { triggerClass } = useInputStyles.useInputStyles({
+      disabled: vue.computed(() => props.disabled),
+      focused: isOpen,
+      hasValue,
+      size: vue.toRef(props, "size")
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
         vue.createElementVNode("button", {
@@ -877,11 +881,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
           "aria-expanded": vue.unref(isOpen),
           "aria-haspopup": "dialog",
           "aria-controls": calendarId.value,
-          class: vue.normalizeClass([
-            "flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm text-left transition",
-            __props.disabled ? "cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500 dark:border-gray-800 dark:bg-gray-950" : vue.unref(isOpen) ? "border-primary ring-2 ring-primary/20 bg-white dark:bg-gray-900" : "border-gray-300 bg-white hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900",
-            modelValue.value ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-500"
-          ]),
+          class: vue.normalizeClass(vue.unref(triggerClass)),
           onClick: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => vue.unref(toggle) && vue.unref(toggle)(...args))
         }, [
@@ -1654,7 +1654,8 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     noResultsText: { default: "No results found" },
     name: {},
     id: {},
-    teleport: { type: [String, Boolean], default: false }
+    teleport: { type: [String, Boolean], default: false },
+    size: { default: "md" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -1733,6 +1734,13 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
         search.value = "";
       }
     });
+    const hasValue = vue.computed(() => selectedOptions.value.length > 0);
+    const { triggerClass } = useInputStyles.useInputStyles({
+      disabled: vue.computed(() => props.disabled),
+      focused: isOpen,
+      hasValue,
+      size: vue.toRef(props, "size")
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "containerRef",
@@ -1744,11 +1752,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
           "aria-expanded": isOpen.value,
           "aria-haspopup": "listbox",
           "aria-controls": listboxId.value,
-          class: vue.normalizeClass([
-            "flex min-h-[42px] w-full cursor-pointer items-center rounded-lg border bg-white px-3 py-2 transition-colors",
-            "dark:bg-gray-900",
-            __props.disabled ? "cursor-not-allowed border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800" : isOpen.value ? "border-primary ring-2 ring-primary/20" : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
-          ]),
+          class: vue.normalizeClass(["cursor-pointer", ...vue.unref(triggerClass)]),
           onClick: openDropdown
         }, [
           !isOpen.value ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -2512,12 +2516,12 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("button", {
               type: "button",
               disabled: __props.disabled,
-              class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+              class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
               onClick: toggleVisibility
             }, [
               vue.createVNode(vue.unref(vue$1.Icon), {
                 icon: showPassword.value ? "lucide:eye-off" : "lucide:eye",
-                class: "size-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                class: "size-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
               }, null, 8, ["icon"])
             ], 8, _hoisted_2$6)
           ]),
@@ -3540,12 +3544,11 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       if (props.max !== void 0) return modelValue.value.length < props.max;
       return true;
     });
+    const { wrapperClass } = useInputStyles.useInputStyles({
+      disabled: vue.toRef(props, "disabled"),
+      size: vue.toRef(props, "size")
+    });
     const sizeClasses = vue.computed(() => ({
-      wrapper: {
-        sm: "min-h-9 py-1.5 px-2 gap-1",
-        md: "min-h-11 py-2 px-3 gap-1.5",
-        lg: "min-h-13 py-2.5 px-4 gap-2"
-      }[props.size],
       tag: {
         sm: "text-xs px-2 py-0.5",
         md: "text-sm px-2.5 py-1",
@@ -3594,14 +3597,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     __expose({ focus: focusInput });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass([
-          "flex flex-wrap items-center rounded-xl border transition-all cursor-text",
-          "bg-gray-50 dark:bg-slate-700",
-          "border-gray-200 dark:border-slate-600",
-          "focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:bg-white dark:focus-within:bg-slate-600",
-          __props.disabled && "opacity-50 cursor-not-allowed",
-          sizeClasses.value.wrapper
-        ]),
+        class: vue.normalizeClass(vue.unref(wrapperClass)),
         onClick: focusInput
       }, [
         vue.createVNode(vue.TransitionGroup, {
@@ -3649,7 +3645,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           required: __props.required && modelValue.value.length === 0,
           class: [
             "flex-1 min-w-20 bg-transparent border-none focus:outline-none",
-            "text-gray-900 dark:text-white placeholder-gray-400",
+            "text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500",
+            __props.disabled && "text-gray-500 dark:text-gray-500",
             sizeClasses.value.input
           ]
         }, _ctx.$attrs, {
@@ -3662,7 +3659,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TagsInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["__scopeId", "data-v-fb9f5eb1"]]);
+const TagsInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["__scopeId", "data-v-46cfbdf1"]]);
 const _hoisted_1$1 = {
   key: 0,
   class: "text-red-500 ml-1"
@@ -3688,7 +3685,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     rows: { default: 3 },
     maxLength: {},
     showCount: { type: Boolean, default: false },
-    resize: { default: "vertical" }
+    resize: { default: "vertical" },
+    size: { default: "md" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -3698,6 +3696,11 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       var _a;
       return ((_a = props.modelValue) == null ? void 0 : _a.length) ?? 0;
     });
+    const { inputClass } = useInputStyles.useInputStyles({
+      disabled: vue.toRef(props, "disabled"),
+      invalid: vue.computed(() => !!props.error),
+      size: vue.toRef(props, "size")
+    });
     const resizeClass = vue.computed(() => {
       switch (props.resize) {
         case "none":
@@ -3739,12 +3742,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
           rows: __props.rows,
           maxlength: __props.maxLength,
           class: vue.normalizeClass([
-            "w-full px-4 py-3 rounded-xl border transition-all duration-200",
-            "focus:outline-none focus:ring-2 focus:ring-offset-0",
+            vue.unref(inputClass),
             resizeClass.value,
-            __props.label || _ctx.$slots.label ? "mt-2" : "",
-            __props.error ? "border-red-300 dark:border-red-500 focus:border-red-500 focus:ring-red-500/20" : "border-gray-200 dark:border-slate-600 focus:border-primary-500 focus:ring-primary-500/20",
-            __props.disabled ? "bg-gray-50 dark:bg-slate-800 text-gray-400 cursor-not-allowed" : "bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
+            __props.label || _ctx.$slots.label ? "mt-2" : ""
           ]),
           onInput: handleInput
         }, null, 42, _hoisted_2),
@@ -3897,4 +3897,4 @@ exports._sfc_main$6 = _sfc_main$m;
 exports._sfc_main$7 = _sfc_main$k;
 exports._sfc_main$8 = _sfc_main$j;
 exports._sfc_main$9 = _sfc_main$i;
-//# sourceMappingURL=CheckboxGroup.vue_vue_type_script_setup_true_lang-DuJr8cz3.cjs.map
+//# sourceMappingURL=CheckboxGroup.vue_vue_type_script_setup_true_lang-BC86pBlY.cjs.map