@dronico/droni-kit 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [1.1.2](https://github.com/Droni-app/droni-kit/compare/v1.1.1...v1.1.2) (2025-04-16)
+
+
+### Bug Fixes
+
+* copilot help ([21ba3c2](https://github.com/Droni-app/droni-kit/commit/21ba3c22868ea19f12ff2f011c959980f23db102))
+* options button ([6733ad6](https://github.com/Droni-app/droni-kit/commit/6733ad64a4e3d7df4793589290c11bb8fae4ba23))
+
+## [1.1.1](https://github.com/Droni-app/droni-kit/compare/v1.1.0...v1.1.1) (2025-04-16)
+
+
+### Bug Fixes
+
+* add taildwind ([3761618](https://github.com/Droni-app/droni-kit/commit/376161812924da91549b3d1eb7682194707c3a8e))
+* button tailwind ([4b20ca7](https://github.com/Droni-app/droni-kit/commit/4b20ca7772dba2c05f30b2d61b5f340b528e9ee3))
+
 # [1.1.0](https://github.com/Droni-app/droni-kit/compare/v1.0.3...v1.1.0) (2025-04-16)
 
 

package/dist/droni-kit.js

@@ -1,17 +1,107 @@
-import { defineComponent as n, createElementBlock as o, openBlock as p, toDisplayString as r } from "vue";
-const a = { type: "button" }, s = /* @__PURE__ */ n({
+import { defineComponent as m, computed as h, createElementBlock as n, openBlock as o, normalizeClass as l, createCommentVNode as a, renderSlot as x } from "vue";
+const p = ["type", "disabled"], v = {
+  key: 0,
+  class: "animate-spin mr-2 h-4 w-4 border-2 border-t-transparent rounded-full border-white"
+}, k = "inline-flex items-center justify-center font-medium transition rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", S = /* @__PURE__ */ m({
   __name: "DuiButton",
   props: {
-    label: {
+    variant: {
       type: String,
-      default: "Kalvin"
+      default: "solid",
+      validator: (e) => ["solid", "outline", "ghost", "link"].includes(e)
+    },
+    color: {
+      type: String,
+      default: "primary",
+      validator: (e) => ["primary", "secondary", "danger", "success", "warning", "info"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    type: {
+      type: String,
+      default: "button"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    iconLeft: {
+      type: String,
+      // Puedes usar un nombre de ícono o un componente en otro enfoque
+      default: null
+    },
+    iconRight: {
+      type: String,
+      default: null
+    },
+    customClass: {
+      type: String,
+      default: ""
     }
   },
-  setup(t) {
-    const e = t;
-    return (c, i) => (p(), o("button", a, r(e.label), 1));
+  emits: ["click"],
+  setup(e, { emit: d }) {
+    const t = e, u = d, c = {
+      sm: "text-sm px-3 py-1.5",
+      md: "text-base px-4 py-2",
+      lg: "text-lg px-5 py-3"
+    }, g = {
+      solid: {
+        primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+        secondary: "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",
+        danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500"
+      },
+      outline: {
+        primary: "border border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500",
+        secondary: "border border-gray-600 text-gray-600 hover:bg-gray-50 focus:ring-gray-500",
+        danger: "border border-red-600 text-red-600 hover:bg-red-50 focus:ring-red-500"
+      },
+      ghost: {
+        primary: "text-blue-600 hover:bg-blue-50 focus:ring-blue-500",
+        secondary: "text-gray-600 hover:bg-gray-50 focus:ring-gray-500",
+        danger: "text-red-600 hover:bg-red-50 focus:ring-red-500"
+      },
+      link: {
+        primary: "text-blue-600 underline hover:text-blue-800",
+        secondary: "text-gray-600 underline hover:text-gray-800",
+        danger: "text-red-600 underline hover:text-red-800"
+      }
+    }, y = h(() => {
+      var s;
+      const r = ((s = g[t.variant]) == null ? void 0 : s[t.color]) || "", i = c[t.size] || "", f = t.block ? "w-full" : "";
+      return [k, r, i, f, t.customClass].join(" ");
+    }), b = (r) => {
+      !t.disabled && !t.loading && u("click", r);
+    };
+    return (r, i) => (o(), n("button", {
+      type: e.type,
+      class: l(y.value),
+      disabled: e.disabled || e.loading,
+      onClick: b
+    }, [
+      e.loading ? (o(), n("span", v)) : a("", !0),
+      e.iconLeft && !e.loading ? (o(), n("span", {
+        key: 1,
+        class: l(["mr-2", e.iconLeft])
+      }, null, 2)) : a("", !0),
+      x(r.$slots, "default"),
+      e.iconRight && !e.loading ? (o(), n("span", {
+        key: 2,
+        class: l(["ml-2", e.iconRight])
+      }, null, 2)) : a("", !0)
+    ], 10, p));
   }
 });
 export {
-  s as DuiButton
+  S as DuiButton
 };

package/dist/droni-kit.umd.cjs

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t["droni-kit"]={},t.Vue))})(this,function(t,e){"use strict";const n={type:"button"},o=e.defineComponent({__name:"DuiButton",props:{label:{type:String,default:"Kalvin"}},setup(i){const u=i;return(p,s)=>(e.openBlock(),e.createElementBlock("button",n,e.toDisplayString(u.label),1))}});t.DuiButton=o,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["droni-kit"]={},n.Vue))})(this,function(n,e){"use strict";const a=["type","disabled"],s={key:0,class:"animate-spin mr-2 h-4 w-4 border-2 border-t-transparent rounded-full border-white"},d="inline-flex items-center justify-center font-medium transition rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",c=e.defineComponent({__name:"DuiButton",props:{variant:{type:String,default:"solid",validator:t=>["solid","outline","ghost","link"].includes(t)},color:{type:String,default:"primary",validator:t=>["primary","secondary","danger","success","warning","info"].includes(t)},size:{type:String,default:"md"},type:{type:String,default:"button"},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},block:{type:Boolean,default:!1},iconLeft:{type:String,default:null},iconRight:{type:String,default:null},customClass:{type:String,default:""}},emits:["click"],setup(t,{emit:u}){const o=t,g=u,f={sm:"text-sm px-3 py-1.5",md:"text-base px-4 py-2",lg:"text-lg px-5 py-3"},y={solid:{primary:"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",secondary:"bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",danger:"bg-red-600 text-white hover:bg-red-700 focus:ring-red-500"},outline:{primary:"border border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500",secondary:"border border-gray-600 text-gray-600 hover:bg-gray-50 focus:ring-gray-500",danger:"border border-red-600 text-red-600 hover:bg-red-50 focus:ring-red-500"},ghost:{primary:"text-blue-600 hover:bg-blue-50 focus:ring-blue-500",secondary:"text-gray-600 hover:bg-gray-50 focus:ring-gray-500",danger:"text-red-600 hover:bg-red-50 focus:ring-red-500"},link:{primary:"text-blue-600 underline hover:text-blue-800",secondary:"text-gray-600 underline hover:text-gray-800",danger:"text-red-600 underline hover:text-red-800"}},b=e.computed(()=>{var i;const r=((i=y[o.variant])==null?void 0:i[o.color])||"",l=f[o.size]||"",p=o.block?"w-full":"";return[d,r,l,p,o.customClass].join(" ")}),m=r=>{!o.disabled&&!o.loading&&g("click",r)};return(r,l)=>(e.openBlock(),e.createElementBlock("button",{type:t.type,class:e.normalizeClass(b.value),disabled:t.disabled||t.loading,onClick:m},[t.loading?(e.openBlock(),e.createElementBlock("span",s)):e.createCommentVNode("",!0),t.iconLeft&&!t.loading?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["mr-2",t.iconLeft])},null,2)):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default"),t.iconRight&&!t.loading?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(["ml-2",t.iconRight])},null,2)):e.createCommentVNode("",!0)],10,a))}});n.DuiButton=c,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/dist/stories/Forms/DuiButton.stories.d.ts

@@ -1,20 +1,219 @@
 import { StoryObj } from '@storybook/vue3';
 declare const meta: {
     title: string;
-    component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        label: {
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+            variant: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
+            color: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
+            size: {
+                type: () => "sm" | "md" | "lg";
+                default: string;
+            };
+            type: {
+                type: () => "button" | "submit" | "reset";
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            loading: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            block: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            iconLeft: {
+                type: StringConstructor;
+                default: null;
+            };
+            iconRight: {
+                type: StringConstructor;
+                default: null;
+            };
+            customClass: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{
+            onClick?: ((...args: any[]) => any) | undefined;
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: (...args: any[]) => void;
+        }, import('vue').PublicProps, {
+            variant: string;
+            color: string;
+            size: "sm" | "md" | "lg";
+            type: "button" | "submit" | "reset";
+            disabled: boolean;
+            loading: boolean;
+            block: boolean;
+            iconLeft: string;
+            iconRight: string;
+            customClass: string;
+        }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLButtonElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            variant: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
+            color: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
+            size: {
+                type: () => "sm" | "md" | "lg";
+                default: string;
+            };
+            type: {
+                type: () => "button" | "submit" | "reset";
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            loading: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            block: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            iconLeft: {
+                type: StringConstructor;
+                default: null;
+            };
+            iconRight: {
+                type: StringConstructor;
+                default: null;
+            };
+            customClass: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{
+            onClick?: ((...args: any[]) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+            variant: string;
+            color: string;
+            size: "sm" | "md" | "lg";
+            type: "button" | "submit" | "reset";
+            disabled: boolean;
+            loading: boolean;
+            block: boolean;
+            iconLeft: string;
+            iconRight: string;
+            customClass: string;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        variant: {
             type: StringConstructor;
             default: string;
+            validator: (value: string) => boolean;
         };
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        label: {
+        color: {
             type: StringConstructor;
             default: string;
+            validator: (value: string) => boolean;
         };
-    }>> & Readonly<{}>, {
-        label: string;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLButtonElement>;
+        size: {
+            type: () => "sm" | "md" | "lg";
+            default: string;
+        };
+        type: {
+            type: () => "button" | "submit" | "reset";
+            default: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        loading: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        block: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        iconLeft: {
+            type: StringConstructor;
+            default: null;
+        };
+        iconRight: {
+            type: StringConstructor;
+            default: null;
+        };
+        customClass: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{
+        onClick?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: (...args: any[]) => void;
+    }, string, {
+        variant: string;
+        color: string;
+        size: "sm" | "md" | "lg";
+        type: "button" | "submit" | "reset";
+        disabled: boolean;
+        loading: boolean;
+        block: boolean;
+        iconLeft: string;
+        iconRight: string;
+        customClass: string;
+    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    });
     tags: string[];
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            defaultValue: string;
+        };
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            defaultValue: string;
+        };
+        color: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            defaultValue: string;
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/stories/Forms/DuiButton.vue.d.ts

@@ -1,14 +1,118 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    label: {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    variant: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    size: {
+        type: () => "sm" | "md" | "lg";
+        default: string;
+    };
+    type: {
+        type: () => "button" | "submit" | "reset";
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconLeft: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconRight: {
+        type: StringConstructor;
+        default: null;
+    };
+    customClass: {
         type: StringConstructor;
         default: string;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    label: {
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    variant: {
         type: StringConstructor;
         default: string;
+        validator: (value: string) => boolean;
     };
-}>> & Readonly<{}>, {
-    label: string;
+    color: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    size: {
+        type: () => "sm" | "md" | "lg";
+        default: string;
+    };
+    type: {
+        type: () => "button" | "submit" | "reset";
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconLeft: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconRight: {
+        type: StringConstructor;
+        default: null;
+    };
+    customClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    variant: string;
+    color: string;
+    size: "sm" | "md" | "lg";
+    type: "button" | "submit" | "reset";
+    disabled: boolean;
+    loading: boolean;
+    block: boolean;
+    iconLeft: string;
+    iconRight: string;
+    customClass: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dronico/droni-kit",
   "author": "Gustavo Barragan <dev@droni.co>",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "private": false,
   "access": "public",
   "publishConfig": {
@@ -25,6 +25,8 @@
     "release": "semantic-release"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.4",
+    "tailwindcss": "^4.1.4",
     "vue": "^3.5.13"
   },
   "devDependencies": {

package/dist/stories/Header.stories.d.ts

@@ -1,59 +0,0 @@
-import { StoryObj } from '@storybook/vue3';
-declare const meta: {
-    title: string;
-    component: import('vue').DefineComponent<{
-        user: {
-            name: string;
-        } | null;
-    }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-        createAccount: () => any;
-        login: () => any;
-        logout: () => any;
-    }, string, import('vue').PublicProps, Readonly<{
-        user: {
-            name: string;
-        } | null;
-    }> & Readonly<{
-        onCreateAccount?: (() => any) | undefined;
-        onLogin?: (() => any) | undefined;
-        onLogout?: (() => any) | undefined;
-    }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
-    render: (args: any) => {
-        components: {
-            MyHeader: import('vue').DefineComponent<{
-                user: {
-                    name: string;
-                } | null;
-            }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-                createAccount: () => any;
-                login: () => any;
-                logout: () => any;
-            }, string, import('vue').PublicProps, Readonly<{
-                user: {
-                    name: string;
-                } | null;
-            }> & Readonly<{
-                onCreateAccount?: (() => any) | undefined;
-                onLogin?: (() => any) | undefined;
-                onLogout?: (() => any) | undefined;
-            }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
-        };
-        setup(this: void): {
-            args: any;
-        };
-        template: string;
-    };
-    parameters: {
-        layout: string;
-    };
-    args: {
-        onLogin: import('@vitest/spy').Mock<(...args: any[]) => any>;
-        onLogout: import('@vitest/spy').Mock<(...args: any[]) => any>;
-        onCreateAccount: import('@vitest/spy').Mock<(...args: any[]) => any>;
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const LoggedIn: Story;
-export declare const LoggedOut: Story;

package/dist/stories/Header.vue.d.ts

@@ -1,15 +0,0 @@
-type __VLS_Props = {
-    user: {
-        name: string;
-    } | null;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    createAccount: () => any;
-    login: () => any;
-    logout: () => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCreateAccount?: (() => any) | undefined;
-    onLogin?: (() => any) | undefined;
-    onLogout?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
-export default _default;