hp-design-system 1.0.3 → 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.3",
+  "version": "1.0.4",
   "type": "module",
   "main": "dist/hp-design-system.umd.js",
   "scripts": {

package/src/index.ts

@@ -16,3 +16,4 @@ function install(app: App) {
 export default { install }
 
 export * from './components'
+export * from './views/tokens'