hp-design-system 1.0.2 → 1.0.4

package/dist/hp-design-system.es.js

@@ -1,5 +1,5 @@
-import { computed as y, openBlock as c, createElementBlock as i, normalizeClass as m, normalizeStyle as d, createElementVNode as o, defineComponent as p, createVNode as h, createCommentVNode as k, toDisplayString as l, pushScopeId as g, popScopeId as P, createTextVNode as S } from "vue";
-const _ = ["xlink:href"], f = {
+import { computed as m, openBlock as a, createElementBlock as i, normalizeClass as h, normalizeStyle as d, createElementVNode as o, defineComponent as f, createVNode as g, createCommentVNode as k, toDisplayString as l, pushScopeId as S, popScopeId as P, createTextVNode as _ } from "vue";
+const C = ["xlink:href"], b = {
   __name: "Icon",
   props: {
     name: {
@@ -16,26 +16,26 @@ const _ = ["xlink:href"], f = {
     }
   },
   setup(e) {
-    const n = e, t = y(() => ({
+    const n = e, t = m(() => ({
       sm: "icon-small",
       md: "icon-medium",
       lg: "icon-large"
     })[n.size] || "icon-medium");
-    return (a, r) => (c(), i("svg", {
-      class: m(["icon", t.value]),
+    return (c, r) => (a(), i("svg", {
+      class: h(["icon", t.value]),
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       style: d({ fill: e.color })
     }, [
       o("use", {
         "xlink:href": `#icon-${e.name}`
-      }, null, 8, _)
+      }, null, 8, C)
     ], 6));
   }
-}, C = ["aria-label", "aria-disabled"], x = {
+}, x = ["aria-label", "aria-disabled"], O = {
   key: 0,
   class: "button-icon"
-}, O = { class: "button-label" }, v = /* @__PURE__ */ p({
+}, v = { class: "button-label" }, I = /* @__PURE__ */ f({
   __name: "Button",
   props: {
     label: {
@@ -73,26 +73,26 @@ const _ = ["xlink:href"], f = {
   },
   emits: ["click"],
   setup(e, { emit: n }) {
-    const t = e, a = n, r = (u) => {
-      t.disabled || a("click", u);
+    const t = e, c = n, r = (u) => {
+      t.disabled || c("click", u);
     };
-    return (u, R) => (c(), i("button", {
+    return (u, V) => (a(), i("button", {
       class: "button",
       "aria-label": e.ariaLabel || e.label,
       onClick: r,
       "aria-disabled": e.disabled
     }, [
-      e.icon ? (c(), i("span", x, [
-        h(f, {
+      e.icon ? (a(), i("span", O, [
+        g(b, {
           name: e.icon,
           size: "sm",
           color: "white"
         }, null, 8, ["name"])
       ])) : k("", !0),
-      o("span", O, l(e.label), 1)
-    ], 8, C));
+      o("span", v, l(e.label), 1)
+    ], 8, x));
   }
-}), I = (e) => (g("data-v-7d29c03a"), e = e(), P(), e), w = ["checked"], B = /* @__PURE__ */ I(() => /* @__PURE__ */ o("label", {
+}), j = (e) => (S("data-v-7d29c03a"), e = e(), P(), e), w = ["checked"], z = /* @__PURE__ */ j(() => /* @__PURE__ */ o("label", {
   class: "check",
   for: "check"
 }, [
@@ -105,7 +105,7 @@ const _ = ["xlink:href"], f = {
       /* @__PURE__ */ o("polyline", { points: "1 5 4 8 11 1" })
     ])
   ])
-], -1)), H = { class: "checkbox-label" }, j = /* @__PURE__ */ p({
+], -1)), B = { class: "checkbox-label" }, H = /* @__PURE__ */ f({
   __name: "Checkbox",
   props: {
     checked: {
@@ -130,7 +130,7 @@ const _ = ["xlink:href"], f = {
     }
   },
   setup(e) {
-    return (n, t) => (c(), i("div", {
+    return (n, t) => (a(), i("div", {
       class: "checkbox",
       style: d({
         "--background-color": e.backgroundColor || "#8f44fd",
@@ -145,16 +145,16 @@ const _ = ["xlink:href"], f = {
         type: "checkbox",
         style: { display: "none" }
       }, null, 8, w),
-      B,
-      o("span", H, l(e.label), 1)
+      z,
+      o("span", B, l(e.label), 1)
     ], 4));
   }
-}), b = (e, n) => {
+}), y = (e, n) => {
   const t = e.__vccOpts || e;
-  for (const [a, r] of n)
-    t[a] = r;
+  for (const [c, r] of n)
+    t[c] = r;
   return t;
-}, z = /* @__PURE__ */ b(j, [["__scopeId", "data-v-7d29c03a"]]), N = {
+}, N = /* @__PURE__ */ y(H, [["__scopeId", "data-v-7d29c03a"]]), q = {
   name: "Teste",
   props: {
     textProp: {
@@ -219,8 +219,8 @@ const _ = ["xlink:href"], f = {
     }
   }
 };
-function q(e, n, t, a, r, u) {
-  return c(), i("div", null, [
+function T(e, n, t, c, r, u) {
+  return a(), i("div", null, [
     o("h1", null, l(t.textProp), 1),
     o("p", null, "Boolean: " + l(t.booleanProp), 1),
     o("p", null, "Number: " + l(t.numberProp), 1),
@@ -234,7 +234,7 @@ function q(e, n, t, a, r, u) {
     o("p", null, "Object: " + l(t.objectProp), 1),
     o("p", null, "Array: " + l(t.arrayProp), 1),
     o("p", null, [
-      S(" Color: "),
+      _(" Color: "),
       o("span", {
         style: d({ backgroundColor: t.colorProp })
       }, l(t.colorProp), 5)
@@ -243,23 +243,35 @@ function q(e, n, t, a, r, u) {
     o("p", null, "File: " + l(t.fileProp ? t.fileProp.name : "No file selected"), 1)
   ]);
 }
-const T = /* @__PURE__ */ b(N, [["render", q], ["__scopeId", "data-v-65be170a"]]), s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const A = /* @__PURE__ */ y(q, [["render", T], ["__scopeId", "data-v-65be170a"]]), s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  HpButton: v,
-  HpCheckbox: z,
-  HpIcon: f,
-  HpTeste: T
+  HpButton: I,
+  HpCheckbox: N,
+  HpIcon: b,
+  HpTeste: A
+}, Symbol.toStringTag, { value: "Module" })), R = {
+  primary: "#3498db",
+  secondary: "#2ecc71",
+  error: "#e74c3c",
+  warning: "#f39c12",
+  success: "#2ecc71"
+}, p = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  colors: R
 }, Symbol.toStringTag, { value: "Module" }));
-function A(e) {
+function E(e) {
   Object.keys(s).forEach((n) => {
     e.component(n, s[n]);
+  }), Object.keys(p).forEach((n) => {
+    e.component(n, p[n]);
   });
 }
-const D = { install: A };
+const M = { install: E };
 export {
-  v as HpButton,
-  z as HpCheckbox,
-  f as HpIcon,
-  T as HpTeste,
-  D as default
+  I as HpButton,
+  N as HpCheckbox,
+  b as HpIcon,
+  A as HpTeste,
+  R as colors,
+  M as default
 };

package/dist/types/index.d.ts

@@ -5,3 +5,4 @@ declare const _default: {
 };
 export default _default;
 export * from './components';
+export * from './views/tokens';

package/dist/types/views/tokens/Colors.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+export declare const Example: StoryFn<{
+    label: string;
+}>;

package/dist/types/views/tokens/index.d.ts

@@ -0,0 +1,2 @@
+import { colors } from './Colors';
+export { colors };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hp-design-system",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "main": "dist/hp-design-system.umd.js",
   "scripts": {

package/src/index.ts

@@ -1,10 +1,14 @@
 import { App } from 'vue'
 import * as components from './components'
+import * as tokens from './views/tokens'
 
-function install (app: App) {
+function install(app: App) {
   Object.keys(components).forEach((key) => {
     app.component(key, components[key as keyof typeof components])
   })
+  Object.keys(tokens).forEach((key) => {
+    app.component(key, tokens[key as keyof typeof tokens])
+  })
 }
 
 // import '../assets/main.scss';
@@ -12,3 +16,4 @@ function install (app: App) {
 export default { install }
 
 export * from './components'
+export * from './views/tokens'

package/src/views/tokens/Colors.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryFn } from '@storybook/vue3'
+import HpColors from './Colors.vue'
+
+const meta: Meta = {
+  title: 'Componentes/Colors',
+  component: HpColors,
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      },
+      table: {
+        category: 'Propriedades',
+        type: {
+          summary: 'string',
+          detail: 'Tipo de texto'
+        },
+        defaultValue: { summary: 'Label padrão' }
+      },
+      description: 'Texto do botão'
+    }
+  }
+}
+
+export default meta
+
+const Template: StoryFn<{ label: string }> = (args) => ({
+  // Define explicitamente o tipo de args
+  components: { HpColors },
+  setup() {
+    return { args }
+  },
+  template: '<HpColors :label="args.label" />'
+})
+
+export const Example = Template.bind({})
+Example.args = {
+  label: 'Label'
+}

package/src/views/tokens/index.ts

@@ -0,0 +1,3 @@
+import { colors } from './Colors'
+
+export { colors }