@topjoao/top-design-system 0.1.0-beta.0

package/README.md

@@ -0,0 +1,71 @@
+# TopSolutions Design System
+
+Biblioteca compartilhada de componentes Vue 3, tokens visuais e estilos da
+TopSolutions.
+
+## Desenvolvimento
+
+```bash
+npm install
+npm run check
+```
+
+## Consumo local
+
+Gere e inspecione o pacote:
+
+```bash
+npm pack --dry-run
+npm pack
+```
+
+Instale o arquivo `.tgz` gerado em uma aplicação Vue e importe o componente e
+os estilos:
+
+```ts
+import { TopButton } from '@topjoao/top-design-system'
+import '@topjoao/top-design-system/style.css'
+```
+
+Esta versão experimental é publicada no escopo pessoal `@topjoao` com a tag
+`beta`. O nome definitivo da organização será definido posteriormente.
+
+## TopButton
+
+O `TopButton` preserva a API do `CustomButton` do TopSolutions Licitação:
+
+```vue
+<script setup lang="ts">
+import { TopButton } from '@topjoao/top-design-system'
+import '@topjoao/top-design-system/style.css'
+</script>
+
+<template>
+  <TopButton label="Salvar" icon="pi pi-save" @click="salvar" />
+
+  <TopButton label="Cancelar" secondary />
+
+  <TopButton label="Consultar" outlined>
+    <template #icon>
+      <i class="pi pi-search" />
+    </template>
+  </TopButton>
+</template>
+```
+
+Props disponíveis:
+
+| Prop | Tipo | Padrão |
+|---|---|---|
+| `tooltip` | `string` | `''` |
+| `label` | `string` | `''` |
+| `icon` | `string` | `''` |
+| `loading` | `boolean` | `false` |
+| `class` | `string` | `''` |
+| `outlined` | `boolean` | `false` |
+| `secondary` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `unstyled` | `boolean` | `false` |
+| `type` | `'button' | 'submit' | 'reset'` | `'button'` |
+
+O componente emite `click` sem payload e oferece o slot nomeado `icon`.

package/dist/components/TopButton.vue.d.ts

@@ -0,0 +1,40 @@
+type __VLS_Props = {
+    tooltip?: string;
+    label?: string;
+    icon?: string;
+    loading?: boolean;
+    class?: string;
+    outlined?: boolean;
+    secondary?: boolean;
+    disabled?: boolean;
+    unstyled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {
+    icon: string;
+    tooltip: string;
+    label: string;
+    loading: boolean;
+    class: string;
+    outlined: boolean;
+    secondary: boolean;
+    disabled: boolean;
+    unstyled: boolean;
+    type: "button" | "submit" | "reset";
+}, {}, {}, {}, 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/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("vue"),l=require("primevue/button");l=s(l,1);let u=require("primevue/tooltip");u=s(u,1);let d=require("tailwind-merge");var f={class:`h-fit w-fit rounded-[12px] bg-transparent`},p=(0,c.defineComponent)({__name:`TopButton`,props:{tooltip:{default:``},label:{default:``},icon:{default:``},loading:{type:Boolean,default:!1},class:{default:``},outlined:{type:Boolean,default:!1},secondary:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},unstyled:{type:Boolean,default:!1},type:{default:`button`}},emits:[`click`],setup(e,{emit:t}){let n=(0,c.useSlots)(),r=(0,c.computed)(()=>!!n.icon),i=e,a=t,o=(0,c.computed)(()=>{let e=i.unstyled?``:i.secondary?`rounded-[10px] border px-2 py-2 font-bold`:i.outlined?`shrink-0 rounded-[10px] border-primary-800 px-4 py-2 text-primary-800 hover:bg-primary-50`:`rounded-[10px] !border-primary-900 bg-primary-900 px-3 py-2 font-bold text-white hover:!border-primary-800 hover:bg-primary-800 `;return(0,d.twMerge)(e,i.class)});return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`span`,f,[(0,c.withDirectives)(((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(l.default),{type:e.type,label:e.label,disabled:e.disabled||e.loading,icon:r.value?void 0:e.icon||void 0,loading:e.loading,outlined:e.outlined||e.secondary,severity:e.secondary?`secondary`:void 0,class:(0,c.normalizeClass)(o.value),pt:{root:{class:o.value}},onClick:n[0]||=e=>a(`click`)},(0,c.createSlots)({_:2},[r.value?{name:`icon`,fn:(0,c.withCtx)(()=>[(0,c.renderSlot)(t.$slots,`icon`)]),key:`0`}:void 0]),1032,[`type`,`label`,`disabled`,`icon`,`loading`,`outlined`,`severity`,`class`,`pt`])),[[(0,c.unref)(u.default),e.tooltip,void 0,{top:!0}]])]))}}),m={primary:{50:`#EEF9FF`,100:`#DFF4FF`,200:`#C5E6F8`,300:`#8EC4DF`,400:`#66ACD1`,500:`#2488BC`,600:`#036DA3`,700:`#1B5783`,800:`#02466B`,900:`#052F4A`,950:`#0C192D`},secondary:{50:`#FAFAFA`,100:`#F4F4F5`,200:`#E9E9E9`,300:`#D8D8D8`,400:`#B8B8B8`,500:`#8E8E8E`,600:`#676767`,700:`#4B4B4B`,800:`#343434`,900:`#1C1917`,950:`#0C0A09`},success:{50:`#FAFFFA`,100:`#F4FBF6`,200:`#DFF6DE`,300:`#CBE3CA`,400:`#A3CCA1`,500:`#6BA968`,600:`#358F30`,700:`#2C7B27`,800:`#1E631A`,900:`#10430D`,950:`#062804`},warn:{50:`#FFF7ED`,100:`#FDF3D8`,200:`#FDE9B2`,300:`#FDD566`,400:`#FFB900`,500:`#FFA515`,600:`#FD9024`,700:`#DD781F`,800:`#BC4E00`,900:`#A42D02`,950:`#792202`},danger:{50:`#F8E6E4`,100:`#FFDDD9`,200:`#EEC1BC`,300:`#E3938C`,400:`#E3675C`,500:`#DC3F32`,600:`#CF150E`,700:`#B10404`,800:`#820907`,900:`#5D0803`,950:`#450501`}},h={install(e){e.component(`TopButton`,p)}};exports.TopButton=p,exports.TopSolutionsDesignSystem=h,exports.colors=m;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/components/TopButton.vue","../src/components/TopButton.vue","../src/tokens/colors.ts","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport Button from 'primevue/button'\nimport vTooltip from 'primevue/tooltip'\nimport { twMerge } from 'tailwind-merge'\n\nconst slots = useSlots()\nconst outrosIcones = computed(() => Boolean(slots.icon))\n\nconst props = withDefaults(\n  defineProps<{\n    tooltip?: string\n    label?: string\n    icon?: string\n    loading?: boolean\n    class?: string\n    outlined?: boolean\n    secondary?: boolean\n    disabled?: boolean\n    unstyled?: boolean\n    type?: 'button' | 'submit' | 'reset'\n  }>(),\n  {\n    tooltip: '',\n    label: '',\n    icon: '',\n    loading: false,\n    class: '',\n    outlined: false,\n    secondary: false,\n    disabled: false,\n    unstyled: false,\n    type: 'button',\n  },\n)\n\nconst emit = defineEmits<{\n  click: []\n}>()\n\nconst buttonClasses = computed(() => {\n  const baseClasses = !props.unstyled\n    ? props.secondary\n      ? 'rounded-[10px] border px-2 py-2 font-bold'\n      : props.outlined\n        ? 'shrink-0 rounded-[10px] border-primary-800 px-4 py-2 text-primary-800 hover:bg-primary-50'\n        : 'rounded-[10px] !border-primary-900 bg-primary-900 px-3 py-2 font-bold text-white hover:!border-primary-800 hover:bg-primary-800 '\n    : ''\n\n  return twMerge(baseClasses, props.class)\n})\n</script>\n\n<template>\n  <span class=\"h-fit w-fit rounded-[12px] bg-transparent\">\n    <Button\n      v-tooltip.top=\"tooltip\"\n      :type=\"type\"\n      :label=\"label\"\n      :disabled=\"disabled || loading\"\n      :icon=\"outrosIcones ? undefined : icon || undefined\"\n      :loading=\"loading\"\n      :outlined=\"outlined || secondary\"\n      :severity=\"secondary ? 'secondary' : undefined\"\n      :class=\"buttonClasses\"\n      :pt=\"{\n        root: { class: buttonClasses },\n      }\"\n      @click=\"emit('click')\"\n    >\n      <template v-if=\"outrosIcones\" #icon>\n        <slot name=\"icon\" />\n      </template>\n    </Button>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport Button from 'primevue/button'\nimport vTooltip from 'primevue/tooltip'\nimport { twMerge } from 'tailwind-merge'\n\nconst slots = useSlots()\nconst outrosIcones = computed(() => Boolean(slots.icon))\n\nconst props = withDefaults(\n  defineProps<{\n    tooltip?: string\n    label?: string\n    icon?: string\n    loading?: boolean\n    class?: string\n    outlined?: boolean\n    secondary?: boolean\n    disabled?: boolean\n    unstyled?: boolean\n    type?: 'button' | 'submit' | 'reset'\n  }>(),\n  {\n    tooltip: '',\n    label: '',\n    icon: '',\n    loading: false,\n    class: '',\n    outlined: false,\n    secondary: false,\n    disabled: false,\n    unstyled: false,\n    type: 'button',\n  },\n)\n\nconst emit = defineEmits<{\n  click: []\n}>()\n\nconst buttonClasses = computed(() => {\n  const baseClasses = !props.unstyled\n    ? props.secondary\n      ? 'rounded-[10px] border px-2 py-2 font-bold'\n      : props.outlined\n        ? 'shrink-0 rounded-[10px] border-primary-800 px-4 py-2 text-primary-800 hover:bg-primary-50'\n        : 'rounded-[10px] !border-primary-900 bg-primary-900 px-3 py-2 font-bold text-white hover:!border-primary-800 hover:bg-primary-800 '\n    : ''\n\n  return twMerge(baseClasses, props.class)\n})\n</script>\n\n<template>\n  <span class=\"h-fit w-fit rounded-[12px] bg-transparent\">\n    <Button\n      v-tooltip.top=\"tooltip\"\n      :type=\"type\"\n      :label=\"label\"\n      :disabled=\"disabled || loading\"\n      :icon=\"outrosIcones ? undefined : icon || undefined\"\n      :loading=\"loading\"\n      :outlined=\"outlined || secondary\"\n      :severity=\"secondary ? 'secondary' : undefined\"\n      :class=\"buttonClasses\"\n      :pt=\"{\n        root: { class: buttonClasses },\n      }\"\n      @click=\"emit('click')\"\n    >\n      <template v-if=\"outrosIcones\" #icon>\n        <slot name=\"icon\" />\n      </template>\n    </Button>\n  </span>\n</template>\n","export const colors = {\n  primary: {\n    50: '#EEF9FF',\n    100: '#DFF4FF',\n    200: '#C5E6F8',\n    300: '#8EC4DF',\n    400: '#66ACD1',\n    500: '#2488BC',\n    600: '#036DA3',\n    700: '#1B5783',\n    800: '#02466B',\n    900: '#052F4A',\n    950: '#0C192D',\n  },\n  secondary: {\n    50: '#FAFAFA',\n    100: '#F4F4F5',\n    200: '#E9E9E9',\n    300: '#D8D8D8',\n    400: '#B8B8B8',\n    500: '#8E8E8E',\n    600: '#676767',\n    700: '#4B4B4B',\n    800: '#343434',\n    900: '#1C1917',\n    950: '#0C0A09',\n  },\n  success: {\n    50: '#FAFFFA',\n    100: '#F4FBF6',\n    200: '#DFF6DE',\n    300: '#CBE3CA',\n    400: '#A3CCA1',\n    500: '#6BA968',\n    600: '#358F30',\n    700: '#2C7B27',\n    800: '#1E631A',\n    900: '#10430D',\n    950: '#062804',\n  },\n  warn: {\n    50: '#FFF7ED',\n    100: '#FDF3D8',\n    200: '#FDE9B2',\n    300: '#FDD566',\n    400: '#FFB900',\n    500: '#FFA515',\n    600: '#FD9024',\n    700: '#DD781F',\n    800: '#BC4E00',\n    900: '#A42D02',\n    950: '#792202',\n  },\n  danger: {\n    50: '#F8E6E4',\n    100: '#FFDDD9',\n    200: '#EEC1BC',\n    300: '#E3938C',\n    400: '#E3675C',\n    500: '#DC3F32',\n    600: '#CF150E',\n    700: '#B10404',\n    800: '#820907',\n    900: '#5D0803',\n    950: '#450501',\n  },\n} as const\n","import type { App, Plugin } from 'vue'\nimport TopButton from './components/TopButton.vue'\nimport './styles/index.css'\n\nexport { TopButton }\nexport { colors } from './tokens/colors'\n\nexport const TopSolutionsDesignSystem: Plugin = {\n  install(app: App) {\n    app.component('TopButton', TopButton)\n  },\n}\n"],"mappings":"imCAMA,IAAM,GAAA,EAAQ,EAAA,SAAA,CAAS,EACjB,GAAA,EAAe,EAAA,SAAA,KAAe,EAAQ,EAAM,IAAK,EAEjD,EAAQ,EA2BR,EAAO,EAIP,GAAA,EAAgB,EAAA,SAAA,KAAe,CACnC,IAAM,EAAe,EAAM,SAMvB,GALA,EAAM,UACJ,4CACA,EAAM,SACJ,4FACA,mIAGR,OAAA,EAAO,EAAA,QAAA,CAAQ,EAAa,EAAM,KAAK,CACzC,CAAC,iBAIC,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAoBO,OApBP,EAoBO,EAAA,EAnBL,EAAA,eAAA,GAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,EAkBS,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAhBN,KAAM,EAAA,KACN,MAAO,EAAA,MACP,SAAU,EAAA,UAAY,EAAA,QACtB,KAAM,EAAA,MAAe,IAAA,GAAY,EAAA,MAAQ,IAAA,GACzC,QAAS,EAAA,QACT,SAAU,EAAA,UAAY,EAAA,UACtB,SAAU,EAAA,UAAS,YAAiB,IAAA,GACpC,OAAA,EAAK,EAAA,eAAA,CAAE,EAAA,KAAa,EACpB,GAAE,CAA2B,KAAA,CAAA,MAAA,EAAA,KAAa,CAAA,EAG1C,QAAK,AAAA,EAAA,KAAA,GAAE,EAAI,OAAA,CAEI,GAAA,EAAA,EAAA,YAAA,CAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,MAAA,CAAe,KAAA,OAC7B,IAAA,EAAA,EAAA,QAAA,KAAoB,EAAA,EAApB,EAAA,WAAA,CAAoB,EAAA,OAAA,MAAA,CAAA,CAAA,oIAfP,EAAA,eAAL,CAAA,IAAV,EAAuB,WExDhB,EAAS,CACpB,QAAS,CACP,GAAI,UACJ,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,SACP,EACA,UAAW,CACT,GAAI,UACJ,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,SACP,EACA,QAAS,CACP,GAAI,UACJ,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,SACP,EACA,KAAM,CACJ,GAAI,UACJ,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,SACP,EACA,OAAQ,CACN,GAAI,UACJ,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,SACP,CACF,EC3Da,EAAmC,CAC9C,QAAQ,EAAU,CAChB,EAAI,UAAU,YAAa,CAAS,CACtC,CACF"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vue';
+import { default as TopButton } from './components/TopButton.vue';
+export { TopButton };
+export { colors } from './tokens/colors';
+export declare const TopSolutionsDesignSystem: Plugin;

package/dist/index.js

@@ -0,0 +1,145 @@
+import { computed as e, createBlock as t, createElementBlock as n, createSlots as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, unref as c, useSlots as l, withCtx as u, withDirectives as d } from "vue";
+import f from "primevue/button";
+import p from "primevue/tooltip";
+import { twMerge as m } from "tailwind-merge";
+//#region src/components/TopButton.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "h-fit w-fit rounded-[12px] bg-transparent" }, g = /* @__PURE__ */ i({
+	__name: "TopButton",
+	props: {
+		tooltip: { default: "" },
+		label: { default: "" },
+		icon: { default: "" },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		class: { default: "" },
+		outlined: {
+			type: Boolean,
+			default: !1
+		},
+		secondary: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		unstyled: {
+			type: Boolean,
+			default: !1
+		},
+		type: { default: "button" }
+	},
+	emits: ["click"],
+	setup(i, { emit: g }) {
+		let _ = l(), v = e(() => !!_.icon), y = i, b = g, x = e(() => {
+			let e = y.unstyled ? "" : y.secondary ? "rounded-[10px] border px-2 py-2 font-bold" : y.outlined ? "shrink-0 rounded-[10px] border-primary-800 px-4 py-2 text-primary-800 hover:bg-primary-50" : "rounded-[10px] !border-primary-900 bg-primary-900 px-3 py-2 font-bold text-white hover:!border-primary-800 hover:bg-primary-800 ";
+			return m(e, y.class);
+		});
+		return (e, l) => (o(), n("span", h, [d((o(), t(c(f), {
+			type: i.type,
+			label: i.label,
+			disabled: i.disabled || i.loading,
+			icon: v.value ? void 0 : i.icon || void 0,
+			loading: i.loading,
+			outlined: i.outlined || i.secondary,
+			severity: i.secondary ? "secondary" : void 0,
+			class: a(x.value),
+			pt: { root: { class: x.value } },
+			onClick: l[0] ||= (e) => b("click")
+		}, r({ _: 2 }, [v.value ? {
+			name: "icon",
+			fn: u(() => [s(e.$slots, "icon")]),
+			key: "0"
+		} : void 0]), 1032, [
+			"type",
+			"label",
+			"disabled",
+			"icon",
+			"loading",
+			"outlined",
+			"severity",
+			"class",
+			"pt"
+		])), [[
+			c(p),
+			i.tooltip,
+			void 0,
+			{ top: !0 }
+		]])]));
+	}
+}), _ = {
+	primary: {
+		50: "#EEF9FF",
+		100: "#DFF4FF",
+		200: "#C5E6F8",
+		300: "#8EC4DF",
+		400: "#66ACD1",
+		500: "#2488BC",
+		600: "#036DA3",
+		700: "#1B5783",
+		800: "#02466B",
+		900: "#052F4A",
+		950: "#0C192D"
+	},
+	secondary: {
+		50: "#FAFAFA",
+		100: "#F4F4F5",
+		200: "#E9E9E9",
+		300: "#D8D8D8",
+		400: "#B8B8B8",
+		500: "#8E8E8E",
+		600: "#676767",
+		700: "#4B4B4B",
+		800: "#343434",
+		900: "#1C1917",
+		950: "#0C0A09"
+	},
+	success: {
+		50: "#FAFFFA",
+		100: "#F4FBF6",
+		200: "#DFF6DE",
+		300: "#CBE3CA",
+		400: "#A3CCA1",
+		500: "#6BA968",
+		600: "#358F30",
+		700: "#2C7B27",
+		800: "#1E631A",
+		900: "#10430D",
+		950: "#062804"
+	},
+	warn: {
+		50: "#FFF7ED",
+		100: "#FDF3D8",
+		200: "#FDE9B2",
+		300: "#FDD566",
+		400: "#FFB900",
+		500: "#FFA515",
+		600: "#FD9024",
+		700: "#DD781F",
+		800: "#BC4E00",
+		900: "#A42D02",
+		950: "#792202"
+	},
+	danger: {
+		50: "#F8E6E4",
+		100: "#FFDDD9",
+		200: "#EEC1BC",
+		300: "#E3938C",
+		400: "#E3675C",
+		500: "#DC3F32",
+		600: "#CF150E",
+		700: "#B10404",
+		800: "#820907",
+		900: "#5D0803",
+		950: "#450501"
+	}
+}, v = { install(e) {
+	e.component("TopButton", g);
+} };
+//#endregion
+export { g as TopButton, v as TopSolutionsDesignSystem, _ as colors };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/components/TopButton.vue","../src/components/TopButton.vue","../src/tokens/colors.ts","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport Button from 'primevue/button'\nimport vTooltip from 'primevue/tooltip'\nimport { twMerge } from 'tailwind-merge'\n\nconst slots = useSlots()\nconst outrosIcones = computed(() => Boolean(slots.icon))\n\nconst props = withDefaults(\n  defineProps<{\n    tooltip?: string\n    label?: string\n    icon?: string\n    loading?: boolean\n    class?: string\n    outlined?: boolean\n    secondary?: boolean\n    disabled?: boolean\n    unstyled?: boolean\n    type?: 'button' | 'submit' | 'reset'\n  }>(),\n  {\n    tooltip: '',\n    label: '',\n    icon: '',\n    loading: false,\n    class: '',\n    outlined: false,\n    secondary: false,\n    disabled: false,\n    unstyled: false,\n    type: 'button',\n  },\n)\n\nconst emit = defineEmits<{\n  click: []\n}>()\n\nconst buttonClasses = computed(() => {\n  const baseClasses = !props.unstyled\n    ? props.secondary\n      ? 'rounded-[10px] border px-2 py-2 font-bold'\n      : props.outlined\n        ? 'shrink-0 rounded-[10px] border-primary-800 px-4 py-2 text-primary-800 hover:bg-primary-50'\n        : 'rounded-[10px] !border-primary-900 bg-primary-900 px-3 py-2 font-bold text-white hover:!border-primary-800 hover:bg-primary-800 '\n    : ''\n\n  return twMerge(baseClasses, props.class)\n})\n</script>\n\n<template>\n  <span class=\"h-fit w-fit rounded-[12px] bg-transparent\">\n    <Button\n      v-tooltip.top=\"tooltip\"\n      :type=\"type\"\n      :label=\"label\"\n      :disabled=\"disabled || loading\"\n      :icon=\"outrosIcones ? undefined : icon || undefined\"\n      :loading=\"loading\"\n      :outlined=\"outlined || secondary\"\n      :severity=\"secondary ? 'secondary' : undefined\"\n      :class=\"buttonClasses\"\n      :pt=\"{\n        root: { class: buttonClasses },\n      }\"\n      @click=\"emit('click')\"\n    >\n      <template v-if=\"outrosIcones\" #icon>\n        <slot name=\"icon\" />\n      </template>\n    </Button>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport Button from 'primevue/button'\nimport vTooltip from 'primevue/tooltip'\nimport { twMerge } from 'tailwind-merge'\n\nconst slots = useSlots()\nconst outrosIcones = computed(() => Boolean(slots.icon))\n\nconst props = withDefaults(\n  defineProps<{\n    tooltip?: string\n    label?: string\n    icon?: string\n    loading?: boolean\n    class?: string\n    outlined?: boolean\n    secondary?: boolean\n    disabled?: boolean\n    unstyled?: boolean\n    type?: 'button' | 'submit' | 'reset'\n  }>(),\n  {\n    tooltip: '',\n    label: '',\n    icon: '',\n    loading: false,\n    class: '',\n    outlined: false,\n    secondary: false,\n    disabled: false,\n    unstyled: false,\n    type: 'button',\n  },\n)\n\nconst emit = defineEmits<{\n  click: []\n}>()\n\nconst buttonClasses = computed(() => {\n  const baseClasses = !props.unstyled\n    ? props.secondary\n      ? 'rounded-[10px] border px-2 py-2 font-bold'\n      : props.outlined\n        ? 'shrink-0 rounded-[10px] border-primary-800 px-4 py-2 text-primary-800 hover:bg-primary-50'\n        : 'rounded-[10px] !border-primary-900 bg-primary-900 px-3 py-2 font-bold text-white hover:!border-primary-800 hover:bg-primary-800 '\n    : ''\n\n  return twMerge(baseClasses, props.class)\n})\n</script>\n\n<template>\n  <span class=\"h-fit w-fit rounded-[12px] bg-transparent\">\n    <Button\n      v-tooltip.top=\"tooltip\"\n      :type=\"type\"\n      :label=\"label\"\n      :disabled=\"disabled || loading\"\n      :icon=\"outrosIcones ? undefined : icon || undefined\"\n      :loading=\"loading\"\n      :outlined=\"outlined || secondary\"\n      :severity=\"secondary ? 'secondary' : undefined\"\n      :class=\"buttonClasses\"\n      :pt=\"{\n        root: { class: buttonClasses },\n      }\"\n      @click=\"emit('click')\"\n    >\n      <template v-if=\"outrosIcones\" #icon>\n        <slot name=\"icon\" />\n      </template>\n    </Button>\n  </span>\n</template>\n","export const colors = {\n  primary: {\n    50: '#EEF9FF',\n    100: '#DFF4FF',\n    200: '#C5E6F8',\n    300: '#8EC4DF',\n    400: '#66ACD1',\n    500: '#2488BC',\n    600: '#036DA3',\n    700: '#1B5783',\n    800: '#02466B',\n    900: '#052F4A',\n    950: '#0C192D',\n  },\n  secondary: {\n    50: '#FAFAFA',\n    100: '#F4F4F5',\n    200: '#E9E9E9',\n    300: '#D8D8D8',\n    400: '#B8B8B8',\n    500: '#8E8E8E',\n    600: '#676767',\n    700: '#4B4B4B',\n    800: '#343434',\n    900: '#1C1917',\n    950: '#0C0A09',\n  },\n  success: {\n    50: '#FAFFFA',\n    100: '#F4FBF6',\n    200: '#DFF6DE',\n    300: '#CBE3CA',\n    400: '#A3CCA1',\n    500: '#6BA968',\n    600: '#358F30',\n    700: '#2C7B27',\n    800: '#1E631A',\n    900: '#10430D',\n    950: '#062804',\n  },\n  warn: {\n    50: '#FFF7ED',\n    100: '#FDF3D8',\n    200: '#FDE9B2',\n    300: '#FDD566',\n    400: '#FFB900',\n    500: '#FFA515',\n    600: '#FD9024',\n    700: '#DD781F',\n    800: '#BC4E00',\n    900: '#A42D02',\n    950: '#792202',\n  },\n  danger: {\n    50: '#F8E6E4',\n    100: '#FFDDD9',\n    200: '#EEC1BC',\n    300: '#E3938C',\n    400: '#E3675C',\n    500: '#DC3F32',\n    600: '#CF150E',\n    700: '#B10404',\n    800: '#820907',\n    900: '#5D0803',\n    950: '#450501',\n  },\n} as const\n","import type { App, Plugin } from 'vue'\nimport TopButton from './components/TopButton.vue'\nimport './styles/index.css'\n\nexport { TopButton }\nexport { colors } from './tokens/colors'\n\nexport const TopSolutionsDesignSystem: Plugin = {\n  install(app: App) {\n    app.component('TopButton', TopButton)\n  },\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,EAAS,GACjB,IAAe,QAAe,EAAQ,EAAM,IAAK,GAEjD,IAAQ,GA2BR,IAAO,GAIP,IAAgB,QAAe;GACnC,IAAM,IAAe,EAAM,WAMvB,KALA,EAAM,YACJ,8CACA,EAAM,WACJ,8FACA;GAGR,OAAO,EAAQ,GAAa,EAAM,KAAK;EACzC,CAAC;oBAIC,EAAA,GAAA,EAoBO,QApBP,GAoBO,CAnBL,GAAA,EAAA,GAAA,EAkBS,EAAA,CAAA,GAAA;GAhBN,MAAM,EAAA;GACN,OAAO,EAAA;GACP,UAAU,EAAA,YAAY,EAAA;GACtB,MAAM,EAAA,QAAe,KAAA,IAAY,EAAA,QAAQ,KAAA;GACzC,SAAS,EAAA;GACT,UAAU,EAAA,YAAY,EAAA;GACtB,UAAU,EAAA,YAAS,cAAiB,KAAA;GACpC,OAAK,EAAE,EAAA,KAAa;GACpB,IAAE,EAA2B,MAAA,EAAA,OAAA,EAAA,MAAa,EAAA;GAG1C,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,OAAA;EAEI,GAAA,EAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAAA,QAAA;GAAe,MAAA;GAC7B,IAAA,QAAoB,CAApB,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;GAfP,EAAA;;GAAL,EAAA,KAAV,GAAuB;;;IExDhB,IAAS;CACpB,SAAS;EACP,IAAI;EACJ,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP;CACA,WAAW;EACT,IAAI;EACJ,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP;CACA,SAAS;EACP,IAAI;EACJ,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP;CACA,MAAM;EACJ,IAAI;EACJ,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP;CACA,QAAQ;EACN,IAAI;EACJ,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP;AACF,GC3Da,IAAmC,EAC9C,QAAQ,GAAU;CAChB,EAAI,UAAU,aAAa,CAAS;AACtC,EACF"}

package/dist/style.css

@@ -0,0 +1,2 @@
+.h-fit{height:fit-content}.w-fit{width:fit-content}.shrink-0{flex-shrink:0}.rounded-\[10px\]{border-radius:10px}.rounded-\[12px\]{border-radius:12px}.border{border-width:1px}.\!border-primary-900{border-color:var(--top-primary-900)!important}.border-primary-800{border-color:var(--top-primary-800)}.bg-primary-900{background-color:var(--top-primary-900)}.bg-transparent{background-color:#0000}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.font-bold{font-weight:700}.text-primary-800{color:var(--top-primary-800)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}:root{--top-primary-50:#eef9ff;--top-primary-100:#dff4ff;--top-primary-200:#c5e6f8;--top-primary-300:#8ec4df;--top-primary-400:#66acd1;--top-primary-500:#2488bc;--top-primary-600:#036da3;--top-primary-700:#1b5783;--top-primary-800:#02466b;--top-primary-900:#052f4a;--top-primary-950:#0c192d;--top-secondary-50:#fafafa;--top-secondary-100:#f4f4f5;--top-secondary-200:#e9e9e9;--top-secondary-300:#d8d8d8;--top-secondary-400:#b8b8b8;--top-secondary-500:#8e8e8e;--top-secondary-600:#676767;--top-secondary-700:#4b4b4b;--top-secondary-800:#343434;--top-secondary-900:#1c1917;--top-secondary-950:#0c0a09}.hover\:\!border-primary-800:hover{border-color:var(--top-primary-800)!important}.hover\:bg-primary-50:hover{background-color:var(--top-primary-50)}.hover\:bg-primary-800:hover{background-color:var(--top-primary-800)}
+/*$vite$:1*/

package/dist/tokens/colors.d.ts

@@ -0,0 +1,67 @@
+export declare const colors: {
+    readonly primary: {
+        readonly 50: "#EEF9FF";
+        readonly 100: "#DFF4FF";
+        readonly 200: "#C5E6F8";
+        readonly 300: "#8EC4DF";
+        readonly 400: "#66ACD1";
+        readonly 500: "#2488BC";
+        readonly 600: "#036DA3";
+        readonly 700: "#1B5783";
+        readonly 800: "#02466B";
+        readonly 900: "#052F4A";
+        readonly 950: "#0C192D";
+    };
+    readonly secondary: {
+        readonly 50: "#FAFAFA";
+        readonly 100: "#F4F4F5";
+        readonly 200: "#E9E9E9";
+        readonly 300: "#D8D8D8";
+        readonly 400: "#B8B8B8";
+        readonly 500: "#8E8E8E";
+        readonly 600: "#676767";
+        readonly 700: "#4B4B4B";
+        readonly 800: "#343434";
+        readonly 900: "#1C1917";
+        readonly 950: "#0C0A09";
+    };
+    readonly success: {
+        readonly 50: "#FAFFFA";
+        readonly 100: "#F4FBF6";
+        readonly 200: "#DFF6DE";
+        readonly 300: "#CBE3CA";
+        readonly 400: "#A3CCA1";
+        readonly 500: "#6BA968";
+        readonly 600: "#358F30";
+        readonly 700: "#2C7B27";
+        readonly 800: "#1E631A";
+        readonly 900: "#10430D";
+        readonly 950: "#062804";
+    };
+    readonly warn: {
+        readonly 50: "#FFF7ED";
+        readonly 100: "#FDF3D8";
+        readonly 200: "#FDE9B2";
+        readonly 300: "#FDD566";
+        readonly 400: "#FFB900";
+        readonly 500: "#FFA515";
+        readonly 600: "#FD9024";
+        readonly 700: "#DD781F";
+        readonly 800: "#BC4E00";
+        readonly 900: "#A42D02";
+        readonly 950: "#792202";
+    };
+    readonly danger: {
+        readonly 50: "#F8E6E4";
+        readonly 100: "#FFDDD9";
+        readonly 200: "#EEC1BC";
+        readonly 300: "#E3938C";
+        readonly 400: "#E3675C";
+        readonly 500: "#DC3F32";
+        readonly 600: "#CF150E";
+        readonly 700: "#B10404";
+        readonly 800: "#820907";
+        readonly 900: "#5D0803";
+        readonly 950: "#450501";
+    };
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@topjoao/top-design-system",
+  "version": "0.1.0-beta.0",
+  "description": "Design system e biblioteca de componentes Vue da TopSolutions",
+  "private": false,
+  "type": "module",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "tag": "beta"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vue-tsc -b && vite build",
+    "typecheck": "vue-tsc -b",
+    "test": "vitest run --passWithNoTests",
+    "check": "npm run typecheck && npm run test && npm run build",
+    "pack:dry": "npm pack --dry-run",
+    "prepack": "npm run check"
+  },
+  "peerDependencies": {
+    "@primeuix/themes": "^1.2.0",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.4.0",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@primeuix/themes": "^1.2.5",
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "^2.5.0",
+    "@vue/tsconfig": "^0.9.1",
+    "autoprefixer": "^10.5.4",
+    "jsdom": "^29.1.1",
+    "postcss": "^8.5.26",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.4.1",
+    "tailwindcss": "^3.4.18",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.11",
+    "vue": "^3.5.42",
+    "vue-tsc": "^3.3.11"
+  }
+}