hp-design-system 1.0.4 → 1.0.6

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

@@ -1,5 +1,5 @@
-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 = {
+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 = {
   __name: "Icon",
   props: {
     name: {
@@ -16,26 +16,26 @@ const C = ["xlink:href"], b = {
     }
   },
   setup(e) {
-    const n = e, t = m(() => ({
+    const n = e, t = y(() => ({
       sm: "icon-small",
       md: "icon-medium",
       lg: "icon-large"
     })[n.size] || "icon-medium");
-    return (c, r) => (a(), i("svg", {
-      class: h(["icon", t.value]),
+    return (a, r) => (c(), i("svg", {
+      class: m(["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, C)
+      }, null, 8, _)
     ], 6));
   }
-}, x = ["aria-label", "aria-disabled"], O = {
+}, C = ["aria-label", "aria-disabled"], x = {
   key: 0,
   class: "button-icon"
-}, v = { class: "button-label" }, I = /* @__PURE__ */ f({
+}, O = { class: "button-label" }, v = /* @__PURE__ */ p({
   __name: "Button",
   props: {
     label: {
@@ -73,26 +73,26 @@ const C = ["xlink:href"], b = {
   },
   emits: ["click"],
   setup(e, { emit: n }) {
-    const t = e, c = n, r = (u) => {
-      t.disabled || c("click", u);
+    const t = e, a = n, r = (u) => {
+      t.disabled || a("click", u);
     };
-    return (u, V) => (a(), i("button", {
+    return (u, R) => (c(), i("button", {
       class: "button",
       "aria-label": e.ariaLabel || e.label,
       onClick: r,
       "aria-disabled": e.disabled
     }, [
-      e.icon ? (a(), i("span", O, [
-        g(b, {
+      e.icon ? (c(), i("span", x, [
+        h(f, {
           name: e.icon,
           size: "sm",
           color: "white"
         }, null, 8, ["name"])
       ])) : k("", !0),
-      o("span", v, l(e.label), 1)
-    ], 8, x));
+      o("span", O, l(e.label), 1)
+    ], 8, C));
   }
-}), j = (e) => (S("data-v-7d29c03a"), e = e(), P(), e), w = ["checked"], z = /* @__PURE__ */ j(() => /* @__PURE__ */ o("label", {
+}), I = (e) => (g("data-v-7d29c03a"), e = e(), P(), e), w = ["checked"], B = /* @__PURE__ */ I(() => /* @__PURE__ */ o("label", {
   class: "check",
   for: "check"
 }, [
@@ -105,7 +105,7 @@ const C = ["xlink:href"], b = {
       /* @__PURE__ */ o("polyline", { points: "1 5 4 8 11 1" })
     ])
   ])
-], -1)), B = { class: "checkbox-label" }, H = /* @__PURE__ */ f({
+], -1)), H = { class: "checkbox-label" }, j = /* @__PURE__ */ p({
   __name: "Checkbox",
   props: {
     checked: {
@@ -130,7 +130,7 @@ const C = ["xlink:href"], b = {
     }
   },
   setup(e) {
-    return (n, t) => (a(), i("div", {
+    return (n, t) => (c(), i("div", {
       class: "checkbox",
       style: d({
         "--background-color": e.backgroundColor || "#8f44fd",
@@ -145,16 +145,16 @@ const C = ["xlink:href"], b = {
         type: "checkbox",
         style: { display: "none" }
       }, null, 8, w),
-      z,
-      o("span", B, l(e.label), 1)
+      B,
+      o("span", H, l(e.label), 1)
     ], 4));
   }
-}), y = (e, n) => {
+}), b = (e, n) => {
   const t = e.__vccOpts || e;
-  for (const [c, r] of n)
-    t[c] = r;
+  for (const [a, r] of n)
+    t[a] = r;
   return t;
-}, N = /* @__PURE__ */ y(H, [["__scopeId", "data-v-7d29c03a"]]), q = {
+}, z = /* @__PURE__ */ b(j, [["__scopeId", "data-v-7d29c03a"]]), N = {
   name: "Teste",
   props: {
     textProp: {
@@ -219,8 +219,8 @@ const C = ["xlink:href"], b = {
     }
   }
 };
-function T(e, n, t, c, r, u) {
-  return a(), i("div", null, [
+function q(e, n, t, a, r, u) {
+  return c(), 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 T(e, n, t, c, r, u) {
     o("p", null, "Object: " + l(t.objectProp), 1),
     o("p", null, "Array: " + l(t.arrayProp), 1),
     o("p", null, [
-      _(" Color: "),
+      S(" Color: "),
       o("span", {
         style: d({ backgroundColor: t.colorProp })
       }, l(t.colorProp), 5)
@@ -243,35 +243,23 @@ function T(e, n, t, c, r, u) {
     o("p", null, "File: " + l(t.fileProp ? t.fileProp.name : "No file selected"), 1)
   ]);
 }
-const A = /* @__PURE__ */ y(q, [["render", T], ["__scopeId", "data-v-65be170a"]]), s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const T = /* @__PURE__ */ b(N, [["render", q], ["__scopeId", "data-v-65be170a"]]), s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  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
+  HpButton: v,
+  HpCheckbox: z,
+  HpIcon: f,
+  HpTeste: T
 }, Symbol.toStringTag, { value: "Module" }));
-function E(e) {
+function A(e) {
   Object.keys(s).forEach((n) => {
     e.component(n, s[n]);
-  }), Object.keys(p).forEach((n) => {
-    e.component(n, p[n]);
   });
 }
-const M = { install: E };
+const D = { install: A };
 export {
-  I as HpButton,
-  N as HpCheckbox,
-  b as HpIcon,
-  A as HpTeste,
-  R as colors,
-  M as default
+  v as HpButton,
+  z as HpCheckbox,
+  f as HpIcon,
+  T as HpTeste,
+  D as default
 };

package/dist/types/{index.d.ts → src/index.d.ts}

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

package/dist/types/{main.d.ts → src/main.d.ts}

@@ -1,2 +1,2 @@
-import './style.css';
+import './style.scss';
 import 'virtual:svg-icons-register';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hp-design-system",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "dist/hp-design-system.umd.js",
   "scripts": {
@@ -64,7 +64,8 @@
   },
   "files": [
     "src",
-    "dist"
+    "dist",
+    "assets/styles/colors.scss"
   ],
   "module": "./dist/hp-design-system.es.js",
   "exports": {
@@ -72,7 +73,8 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/hp-design-system.es.js"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dist/style.scss": "./dist/style.scss",
+    "./styles/colors.scss": "./styles/colors.scss"
   },
   "eslintConfig": {
     "extends": "eslint:recommended",

package/src/index.ts

@@ -1,14 +1,10 @@
 import { App } from 'vue'
 import * as components from './components'
-import * as tokens from './views/tokens'
 
 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';
@@ -16,4 +12,3 @@ function install(app: App) {
 export default { install }
 
 export * from './components'
-export * from './views/tokens'

package/src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import './style.css'
+import './style.scss'
 import 'virtual:svg-icons-register'
 
 const app = createApp(App)

package/src/{style.css → style.scss}

@@ -42,4 +42,6 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+}
+
+$teste: #3498db;

package/src/styles/colors.scss

@@ -0,0 +1,28 @@
+// colors.scss
+
+// Paleta de Cores para o Modo Claro
+$color-primary-light: #3498db;
+$color-secondary-light: #2ecc71;
+$color-background-light: #ffffff;
+$color-text-light: #333333;
+
+// Paleta de Cores para o Modo Escuro
+$color-primary-dark: #2980b9;
+$color-secondary-dark: #27ae60;
+$color-background-dark: #121212;
+$color-text-dark: #ffffff;
+
+// Mapas de Cores
+$light-theme-colors: (
+  primary: $color-primary-light,
+  secondary: $color-secondary-light,
+  background: $color-background-light,
+  text: $color-text-light,
+);
+
+$dark-theme-colors: (
+  primary: $color-primary-dark,
+  secondary: $color-secondary-dark,
+  background: $color-background-dark,
+  text: $color-text-dark,
+);

package/src/{assets/themes.scss → styles/theme.scss}

@@ -19,3 +19,15 @@ $check-color: $light-check-color;
   $border-color: $dark-border-color;
   $check-color: $dark-check-color;
 }
+
+// theme.scss
+
+@mixin theme-colors($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  // Exemplo de como usar as outras cores do tema
+  a {
+    color: map-get($theme, primary);
+  }
+}

package/dist/types/components/button/Button.stories.d.ts

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

package/dist/types/components/icons/Icon/Icon.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3';
-declare const meta: Meta;
-export default meta;
-export declare const Default: StoryFn<{
-    name: string;
-    size: string;
-    color: string;
-}>;

package/dist/types/components/inputs/checkbox/Checkbox.stories.d.ts

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

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

@@ -1,7 +0,0 @@
-export declare const colors: {
-    primary: string;
-    secondary: string;
-    error: string;
-    warning: string;
-    success: string;
-};

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

@@ -1,6 +0,0 @@
-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/Sizes.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

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

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

package/src/assets/main.scss

@@ -1,10 +0,0 @@
-// @font-face {
-//   font-family: 'VarelaRound';
-//   src: url('./fonts/Quicksand.ttf') format('truetype');
-//   font-weight: normal;
-//   font-style: normal;
-// }
-
-// * {
-//   font-family: 'Quicksand', sans-serif;
-// }

package/src/components/button/Button.stories.ts

@@ -1,39 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import HpButton from './Button.vue'
-
-const meta: Meta = {
-  title: 'Componentes/Button',
-  component: HpButton,
-  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: { HpButton },
-  setup() {
-    return { args }
-  },
-  template: '<HpButton :label="args.label" />'
-})
-
-export const Example = Template.bind({})
-Example.args = {
-  label: 'Label'
-}

package/src/components/icons/Icon/Icon.stories.ts

@@ -1,68 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import Icon from './Icon.vue'
-import AllIcons from '../../../../public/assets/icons/icons.json'
-
-const meta: Meta = {
-  title: 'Foundation/Icons/Icon',
-  component: Icon,
-  argTypes: {
-    name: {
-      control: 'select',
-      options: AllIcons,
-      description: 'Identificador do ícone',
-      table: {
-        category: 'Propriedades',
-        disable: false,
-        sortOrder: 1
-      }
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Tamanho do ícone',
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string',
-          detail: "sm(small): '1rem'\nmd(medium): '2rem'\nlg(large): '3rem'"
-        },
-        defaultValue: { summary: 'md' },
-        disable: false,
-        sortOrder: 2
-      }
-    },
-    color: {
-      control: 'color',
-      description: 'Cor em formato hexadecimal, rgb ou nome da cor',
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string',
-          detail: "hex: '#ccc'\nrgb: 'rgb(204, 204, 204)'\nnome: 'grey'"
-        },
-        defaultValue: { summary: '#000000' },
-        disable: false,
-        sortOrder: 3
-      }
-    }
-  }
-}
-
-export default meta
-
-const Template: StoryFn<{ name: string; size: string; color: string }> = (
-  args
-) => ({
-  components: { Icon },
-  setup() {
-    return { args }
-  },
-  template: '<Icon :name="args.name" :size="args.size" :color="args.color" />'
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  name: 'AA0010',
-  size: 'md',
-  color: '#ccc'
-}

package/src/components/icons/iconList/IconList.stories.ts

@@ -1,51 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import IconList from './IconList.vue'
-
-// Definindo o tipo dos argumentos
-interface IconListArgs {
-  color: string
-}
-
-const meta: Meta = {
-  title: 'Foundation/Icons/AllIcons',
-  component: IconList,
-  argTypes: {
-    color: {
-      control: 'color',
-      description: 'Cor em formato hexadecimal, rgb ou nome da cor',
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string',
-          detail: "hex: '#ccc'\nrgb: 'rgb(204, 204, 204)'\nnome: 'grey'"
-        },
-        defaultValue: { summary: '#000000' },
-        disable: false,
-        sortOrder: 3
-      }
-    }
-  }
-}
-
-export default meta
-
-const Template: StoryFn<IconListArgs> = (args) => ({
-  components: { IconList },
-  setup() {
-    return { args }
-  },
-  template: '<IconList v-bind="args" />'
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  color: '#757abf'
-}
-
-Default.parameters = {
-  docs: {
-    source: {
-      code: `<IconList :color="color" />`
-    }
-  }
-}

package/src/components/inputs/checkbox/Checkbox.stories.ts

@@ -1,100 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import HpCheckbox from './Checkbox.vue'
-
-const meta: Meta = {
-  title: 'Componentes/Checkbox',
-  component: HpCheckbox,
-  argTypes: {
-    checked: {
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: { summary: 'false' }
-      },
-      description: 'Define se o checkbox está marcado'
-    },
-    label: {
-      control: {
-        type: 'text'
-      },
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string'
-        },
-        defaultValue: { summary: '' }
-      },
-      description: 'Texto da label ao lado do checkbox'
-    },
-    backgroundColor: {
-      control: {
-        type: 'color'
-      },
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string'
-        },
-        defaultValue: { summary: '#8f44fd' }
-      },
-      description: 'Cor de fundo do checkbox quando marcado'
-    },
-    checkColor: {
-      control: {
-        type: 'color'
-      },
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string'
-        },
-        defaultValue: { summary: '#f9f9f9' }
-      },
-      description: 'Cor do check no checkbox'
-    },
-    borderColor: {
-      control: {
-        type: 'color'
-      },
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string'
-        },
-        defaultValue: { summary: '#8f44fd' }
-      },
-      description: 'Cor da borda do checkbox'
-    }
-  }
-}
-
-export default meta
-
-const Template: StoryFn<{
-  checked: boolean
-  label: string
-  backgroundColor: string
-  checkColor: string
-  borderColor: string
-}> = (args) => ({
-  components: { HpCheckbox },
-  setup() {
-    return { args }
-  },
-  template:
-    '<HpCheckbox :checked="args.checked" :label="args.label" :backgroundColor="args.backgroundColor" :checkColor="args.checkColor" :borderColor="args.borderColor" />'
-})
-
-export const Example = Template.bind({})
-Example.args = {
-  checked: false,
-  label: 'Label do Checkbox',
-  backgroundColor: '#8f44fd',
-  checkColor: '#f9f9f9',
-  borderColor: '#8f44fd'
-}

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

@@ -1,39 +0,0 @@
-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'
-}