@rededor/cura 0.4.6 → 0.4.7

package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js

@@ -0,0 +1,168 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import iconNames from '../../../assets/icons/iconset-default-list';
+export default {
+  title: 'Components/Buttons/Button Outline',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-button-outline
+  size="${args.size}"
+  disabled="${args.disabled}"
+  is-loading="${args.isLoading}"
+  color="${args.color}"
+  font-color="${args.fontColor}"
+  icon-name="${args.iconName}"
+  icon-position="${args.iconPosition}"
+  icon-only="${args.iconOnly}"
+  href="${args.href}"
+  target="${args.target}"
+  text-align="${args.textAlign}"
+  style="${args.fullWidth ? 'width: 100%' : ''}">
+    ${label}
+</cura-button-outline>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Label'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Estado desabilitado.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'is-loading'
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent' }
+      }
+    },
+    fontColor: {
+      control: { type: 'inline-radio' },
+      options: ['dark', 'light'],
+      description: 'Define cor clara ou escura de acordo com contexto.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'dark' }
+      },
+      name: 'font-color'
+    },
+    textAlign: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'center', 'right'],
+      description: 'Alinha texto de múltiplas linhas.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'text-align'
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',
+      table: {
+        category: 'CSS',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    iconName: {
+      control: { type: 'select' },
+      options: iconNames,
+      description: 'Nome do ícone a ser utilizado no iconset.',
+      table: {
+        category: 'Icons'
+      },
+      name: 'icon-name'
+    },
+    iconPosition: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right'],
+      description: 'Posição do ícone no botão.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'icon-position'
+    },
+    iconOnly: {
+      control: 'boolean',
+      description: 'Oculta o label do botão exibindo somente o ícone.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'icon-only'
+    },
+    href: {
+      control: 'text',
+      description: `Se definido o elemento de ação renderizado internamente será um link.`,
+      table: {
+        category: 'Properties'
+      }
+    },
+    target: {
+      control: 'text',
+      description: 'Define o comportamento de abertura do link quando href for informado.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '_self' }
+      }
+    }
+  },
+};
+export const ButtonOutline = {
+  args: {
+    label: 'Button',
+    size: 'medium',
+    color: 'primary',
+    fontColor: 'dark',
+    textAlign: 'left',
+    iconName: iconNames[0],
+    iconPosition: 'left',
+    iconOnly: false,
+    disabled: false,
+    isLoading: false,
+    href: '',
+    target: '_self',
+    fullWidth: false,
+  },
+};
+//# sourceMappingURL=cura-button-outline.stories.js.map

package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-button-outline.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-outline/cura-button-outline.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Components/Buttons/Button Outline',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-button-outline\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\"\n  is-loading=\"${args.isLoading}\"\n  color=\"${args.color}\"\n  font-color=\"${args.fontColor}\"\n  icon-name=\"${args.iconName}\"\n  icon-position=\"${args.iconPosition}\"\n  icon-only=\"${args.iconOnly}\"\n  href=\"${args.href}\"\n  target=\"${args.target}\"\n  text-align=\"${args.textAlign}\"\n  style=\"${args.fullWidth ? 'width: 100%' : ''}\">\n    ${label}\n</cura-button-outline>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Label'\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    isLoading: {\n      control: 'boolean',\n      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'is-loading'\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent'}\n      }\n    },\n    fontColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define cor clara ou escura de acordo com contexto.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark'}\n      },\n      name: 'font-color'\n    },\n    textAlign: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'center', 'right'],\n      description: 'Alinha texto de múltiplas linhas.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'text-align'\n    },\n    fullWidth: {\n      control: 'boolean',\n      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n      table: {\n        category: 'CSS',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    iconName: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Nome do ícone a ser utilizado no iconset.',\n      table: {\n        category: 'Icons'\n      },\n      name: 'icon-name'\n    },\n    iconPosition: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do ícone no botão.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'icon-position'\n    },\n    iconOnly: {\n      control: 'boolean',\n      description: 'Oculta o label do botão exibindo somente o ícone.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'icon-only'\n    },\n    href: {\n      control: 'text',\n      description: `Se definido o elemento de ação renderizado internamente será um link.`,\n      table: {\n        category: 'Properties'\n      }\n    },\n    target: {\n      control: 'text',\n      description: 'Define o comportamento de abertura do link quando href for informado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '_self'}\n      }\n    }\n  },\n};\n\nexport const ButtonOutline = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'primary',\n    fontColor: 'dark',\n    textAlign: 'left',\n    iconName: iconNames[0],\n    iconPosition: 'left',\n    iconOnly: false,\n    disabled: false,\n    isLoading: false,\n    href: '',\n    target: '_self',\n    fullWidth: false,\n  },\n};\n"]}

package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js

@@ -0,0 +1,168 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import iconNames from '../../../assets/icons/iconset-default-list';
+export default {
+  title: 'Components/Buttons/Button Transparent',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-button-transparent
+  size="${args.size}"
+  disabled="${args.disabled}"
+  is-loading="${args.isLoading}"
+  color="${args.color}"
+  font-color="${args.fontColor}"
+  icon-name="${args.iconName}"
+  icon-position="${args.iconPosition}"
+  icon-only="${args.iconOnly}"
+  href="${args.href}"
+  target="${args.target}"
+  text-align="${args.textAlign}"
+  style="${args.fullWidth ? 'width: 100%;' : ''}">
+    ${label}
+</cura-button-transparent>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Label'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Estado desabilitado.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'is-loading'
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent' }
+      }
+    },
+    fontColor: {
+      control: { type: 'inline-radio' },
+      options: ['dark', 'light'],
+      description: 'Define cor clara ou escura de acordo com contexto.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'dark' }
+      },
+      name: 'font-color'
+    },
+    textAlign: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'center', 'right'],
+      description: 'Alinha texto de múltiplas linhas.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'text-align'
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',
+      table: {
+        category: 'CSS',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    iconName: {
+      control: { type: 'select' },
+      options: iconNames,
+      description: 'Nome do ícone a ser utilizado no iconset.',
+      table: {
+        category: 'Icons'
+      },
+      name: 'icon-name'
+    },
+    iconPosition: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right'],
+      description: 'Posição do ícone no botão.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'icon-position'
+    },
+    iconOnly: {
+      control: 'boolean',
+      description: 'Oculta o label do botão exibindo somente o ícone.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'icon-only'
+    },
+    href: {
+      control: 'text',
+      description: `Se definido o elemento de ação renderizado internamente será um link.`,
+      table: {
+        category: 'Properties'
+      }
+    },
+    target: {
+      control: 'text',
+      description: 'Define o comportamento de abertura do link quando href for informado.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '_self' }
+      }
+    }
+  },
+};
+export const ButtonTransparent = {
+  args: {
+    label: 'Button',
+    size: 'medium',
+    color: 'primary',
+    fontColor: 'dark',
+    textAlign: 'left',
+    iconName: iconNames[0],
+    iconPosition: 'left',
+    iconOnly: false,
+    disabled: false,
+    isLoading: false,
+    href: '',
+    target: '_self',
+    fullWidth: false,
+  },
+};
+//# sourceMappingURL=cura-button-transparent.stories.js.map

package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Components/Buttons/Button Transparent',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-button-transparent\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\"\n  is-loading=\"${args.isLoading}\"\n  color=\"${args.color}\"\n  font-color=\"${args.fontColor}\"\n  icon-name=\"${args.iconName}\"\n  icon-position=\"${args.iconPosition}\"\n  icon-only=\"${args.iconOnly}\"\n  href=\"${args.href}\"\n  target=\"${args.target}\"\n  text-align=\"${args.textAlign}\"\n  style=\"${args.fullWidth ? 'width: 100%;' : ''}\">\n    ${label}\n</cura-button-transparent>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Label'\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    isLoading: {\n      control: 'boolean',\n      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'is-loading'\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent'}\n      }\n    },\n    fontColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define cor clara ou escura de acordo com contexto.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark'}\n      },\n      name: 'font-color'\n    },\n    textAlign: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'center', 'right'],\n      description: 'Alinha texto de múltiplas linhas.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'text-align'\n    },\n    fullWidth: {\n      control: 'boolean',\n      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n      table: {\n        category: 'CSS',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    iconName: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Nome do ícone a ser utilizado no iconset.',\n      table: {\n        category: 'Icons'\n      },\n      name: 'icon-name'\n    },\n    iconPosition: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do ícone no botão.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'icon-position'\n    },\n    iconOnly: {\n      control: 'boolean',\n      description: 'Oculta o label do botão exibindo somente o ícone.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'icon-only'\n    },\n    href: {\n      control: 'text',\n      description: `Se definido o elemento de ação renderizado internamente será um link.`,\n      table: {\n        category: 'Properties'\n      }\n    },\n    target: {\n      control: 'text',\n      description: 'Define o comportamento de abertura do link quando href for informado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '_self'}\n      }\n    }\n  },\n};\n\nexport const ButtonTransparent = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'primary',\n    fontColor: 'dark',\n    textAlign: 'left',\n    iconName: iconNames[0],\n    iconPosition: 'left',\n    iconOnly: false,\n    disabled: false,\n    isLoading: false,\n    href: '',\n    target: '_self',\n    fullWidth: false,\n  },\n};\n"]}

package/dist/collection/components/cura-icon/cura-icon.stories.js

@@ -0,0 +1,75 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import iconNames from '../../assets/icons/iconset-default-list';
+import { getColorsWithDepths } from "../../utils/utils";
+const colors = getColorsWithDepths();
+export default {
+  title: 'Components/Icons/Icon',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-icon
+  name="${args.name}"
+  color="${args.color}"
+  size="${args.size}"
+  disabled="${args.disabled}">
+</cura-icon>`;
+  },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Estado desabilitado',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    size: {
+      control: { type: 'select' },
+      options: ["128", "72", "64", "48", "40", "32", "24", "20", "16"],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '24' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: colors,
+      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'neutral' }
+      }
+    },
+    name: {
+      control: { type: 'select' },
+      options: iconNames,
+      description: 'Nome do ícone no iconset.',
+      table: {
+        category: 'Properties'
+      }
+    }
+  },
+};
+export const Icon = {
+  args: {
+    name: iconNames[0],
+    size: '24',
+    color: 'neutral',
+    disabled: false,
+  },
+};
+//# sourceMappingURL=cura-icon.stories.js.map

package/dist/collection/components/cura-icon/cura-icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;aACd,CAAC;EACZ,CAAC;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,qBAAqB;MAClC,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;MAChE,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;OAC/B;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uGAAuG;MACpH,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;MAC1B,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,2BAA2B;MACxC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;OACvB;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;EAClB,IAAI,EAAE;IACJ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\nimport { getColorsWithDepths } from \"../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Components/Icons/Icon',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-icon\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-icon>`;\n  },\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: [\"128\", \"72\", \"64\", \"48\", \"40\", \"32\", \"24\", \"20\", \"16\"],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '24'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: colors,\n      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral'}\n      }\n    },\n    name: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Nome do ícone no iconset.',\n      table: {\n        category: 'Properties'\n      }\n    }\n  },\n};\n\nexport const Icon = {\n  args: {\n    name: iconNames[0],\n    size: '24',\n    color: 'neutral',\n    disabled: false,\n  },\n};\n"]}

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { getColorsWithDepths } from "../../../utils/utils";
+const colors = getColorsWithDepths();
+export default {
+  title: 'Components/Loaders/Loader Circle',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-loader-circle
+  name="${args.name}"
+  color="${args.color}"
+  size="${args.size}"
+  disabled="${args.disabled}">
+</cura-loader-circle>`;
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large', 'xlarge'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: colors,
+      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'neutral-white' }
+      }
+    }
+  },
+};
+export const LoaderCircle = {
+  args: {
+    size: 'medium',
+    color: 'primary'
+  },
+};
+//# sourceMappingURL=cura-loader-circle.stories.js.map

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-loader-circle.stories.js","sourceRoot":"","sources":["../../../../src/components/loaders/cura-loader-circle/cura-loader-circle.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;sBACL,CAAC;EACrB,CAAC;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC;MAC/C,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;OACnC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uGAAuG;MACpH,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,eAAe,EAAC;OAC1C;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;EAC1B,IAAI,EAAE;IACJ,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,SAAS;GACjB;CACF,CAAC","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Components/Loaders/Loader Circle',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-loader-circle\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-loader-circle>`;\n  },\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'medium', 'large', 'xlarge'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: colors,\n      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral-white'}\n      }\n    }\n  },\n};\n\nexport const LoaderCircle = {\n  args: {\n    size: 'medium',\n    color: 'primary'\n  },\n};\n"]}

package/dist/collection/components/text/cura-display/cura-display.stories.js

@@ -0,0 +1,80 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+export default {
+  title: 'Components/Text/Display',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-display
+  level="${args.level}"
+  spot-color="${args.spotColor}"
+  size="${args.size}"
+  inverted="${args.inverted}">
+  ${label}
+</cura-display>
+<cura-paragraph>Proin quis turpis et turpis efficitur dictum. Suspendisse egestas posuere libero. Sed non dapibus urna. Sed luctus tincidunt nibh, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.</cura-paragraph>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Content'
+    },
+    inverted: {
+      control: 'boolean',
+      description: 'Inverte cores do texto para aplicação em fundo escuro.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'regular', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    spotColor: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      }
+    },
+    level: {
+      control: { type: 'number', min: 1, max: 6, step: 1 },
+      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      }
+    }
+  },
+};
+export const Display = {
+  args: {
+    label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur adipiscing elit.',
+    size: 'regular',
+    level: 1,
+    spotColor: 'primary',
+    inverted: false,
+  },
+};
+//# sourceMappingURL=cura-display.stories.js.map

package/dist/collection/components/text/cura-display/cura-display.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-display.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;WACA,IAAI,CAAC,KAAK;gBACL,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;IACvB,KAAK;;8gBAEqgB,CAAC;EAC7gB,CAAC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,qFAAqF;MAClG,IAAI,EAAE,SAAS;KAChB;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;MACtC,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MAC7F,WAAW,EAAE,kEAAkE;MAC/E,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;MACpD,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;EACrB,IAAI,EAAE;IACJ,KAAK,EAAE,8GAA8G;IACrH,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["\nexport default {\n  title: 'Components/Text/Display',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-display\n  level=\"${args.level}\"\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\">\n  ${label}\n</cura-display>\n<cura-paragraph>Proin quis turpis et turpis efficitur dictum. Suspendisse egestas posuere libero. Sed non dapibus urna. Sed luctus tincidunt nibh, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.</cura-paragraph>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Content'\n    },\n    inverted: {\n      control: 'boolean',\n      description: 'Inverte cores do texto para aplicação em fundo escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'regular', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    },\n    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    }\n  },\n};\n\nexport const Display = {\n  args: {\n    label: 'Dolor sit <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">amet</a>, consectetur adipiscing elit.',\n    size: 'regular',\n    level: 1,\n    spotColor: 'primary',\n    inverted: false,\n  },\n};\n"]}