@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/collection/components/cura-avatar/cura-avatar.js

@@ -0,0 +1,231 @@
+import { Host, h } from "@stencil/core";
+import { avatarSizes } from "./cura-avatar.definitions";
+export class CuraAvatar {
+    constructor() {
+        this.size = '80';
+        this.backgroundColor = 'neutral-purewhite';
+        this.borderColor = undefined;
+        this.borderRadius = '50%';
+        this.border = false;
+        this.type = 'default';
+        this.imageSrc = undefined;
+        this.imageSrcDefault = undefined;
+        this.floating = undefined;
+        this.styles = {};
+    }
+    sizeHandler(size) {
+        const avatarSize = avatarSizes[size];
+        this.styles['--border'] = this.border && `${avatarSize.border}px`;
+        this.styles['--size'] = `${this.size}px`;
+    }
+    getClasses() {
+        const classes = {};
+        classes['conteiner'] = true;
+        classes['floating'] = this.floating;
+        return classes;
+    }
+    connectedCallback() {
+        this.assetsPath = window.CuraAPI.localAssetsPath;
+        this.sizeHandler(this.size);
+    }
+    hostCSSProperties() {
+        return {
+            '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),
+            '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),
+            '--border-radius': `${this.borderRadius}`,
+        };
+    }
+    onSrcError() {
+        this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
+    }
+    render() {
+        return (h(Host, { key: '170c3fa2c218520d9689be5c1da0be4757dd1064', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '10b179acec89411c17d44125310658a9fc65a647', class: this.getClasses(), style: this.styles }, h("img", { key: 'cbbfccaab84e08bb08fa37f08c46b625121d339f', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+    }
+    static get is() { return "cura-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'80' | '40' | '32' | '24'",
+                    "resolved": "\"24\" | \"32\" | \"40\" | \"80\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'80'"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "background-color",
+                "reflect": true,
+                "defaultValue": "'neutral-purewhite'"
+            },
+            "borderColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "border-color",
+                "reflect": true
+            },
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "border-radius",
+                "reflect": true,
+                "defaultValue": "'50%'"
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "border",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'branding'",
+                    "resolved": "\"branding\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-src",
+                "reflect": true
+            },
+            "imageSrcDefault": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-src-default",
+                "reflect": true
+            },
+            "floating": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "floating",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "sizeHandler"
+            }];
+    }
+}
+//# sourceMappingURL=cura-avatar.js.map

package/dist/collection/components/cura-avatar/cura-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-avatar.js","sourceRoot":"","sources":["../../../src/components/cura-avatar/cura-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAMxD,MAAM,OAAO,UAAU;;oBAGqB,IAAI;+BACK,mBAAmB;;4BAEtB,KAAK;sBACV,KAAK;oBACQ,SAAS;;;;sBAK/C,EAAE;;IAGpB,WAAW,CAAC,IAAY;QACtB,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC;QAClE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;IAC3C,CAAC;IAID,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,OAAO;YACL,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACxE,iBAAiB,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;SAC1C,CAAC;IACJ,CAAC;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,CAAC;IACjG,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,KAAK;YAC/C,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBAC/C,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAQ,CAC/I,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { avatarSizes } from './cura-avatar.definitions';\n@Component({\n  tag: 'cura-avatar',\n  styleUrl: 'cura-avatar.scss',\n  shadow: true,\n})\nexport class CuraAvatar {\n  @Element() host: HTMLElement;\n\n  @Prop() size: '80' | '40' | '32' | '24' = '80';\n  @Prop({ reflect: true }) backgroundColor: string = 'neutral-purewhite';\n  @Prop({ reflect: true }) borderColor: string;\n  @Prop({ reflect: true }) borderRadius: string = '50%';\n  @Prop({ reflect: true }) border: boolean = false;\n  @Prop({ reflect: true }) type: 'default' | 'branding' = 'default';\n  @Prop({ reflect: true, mutable: true }) imageSrc: string;\n  @Prop({ reflect: true }) imageSrcDefault: string;\n  @Prop({ reflect: true }) floating: boolean;\n\n  @State() styles = {};\n\n  @Watch('size')\n  sizeHandler(size: string) {\n    const avatarSize = avatarSizes[size];\n    this.styles['--border'] = this.border && `${avatarSize.border}px`;\n    this.styles['--size'] = `${this.size}px`;\n  }\n\n  assetsPath: string;\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n  }\n\n  hostCSSProperties() {\n    return {\n      '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),\n      '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),\n      '--border-radius': `${this.borderRadius}`,\n    };\n  }\n\n  onSrcError() {\n    this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()} role=\"img\">\n        <div class={this.getClasses()} style={this.styles}>\n          <img src={this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`} onError={() => this.onSrcError()}></img>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,198 @@
+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 { avatarSizes } from "./cura-avatar.definitions";
+import { getColorsWithDepths } from "../../utils/utils";
+const colors = getColorsWithDepths();
+const renderCuraAvatar = (args) => {
+    const styles = args.cssBackgroundColor || args.cssBorderColor || args.cssBorderRadius
+        ? `<style>
+  cura-avatar { ${args.cssBackgroundColor
+            ? `
+    --background-color: ${args.cssBackgroundColor} !important;`
+            : ``}${args.cssBorderColor
+            ? `
+    --border-color: ${args.cssBorderColor} !important;`
+            : ``}${args.cssBorderRadius
+            ? `
+    --border-radius: ${args.cssBorderRadius} !important;`
+            : ``}
+  }
+</style>
+
+`
+        : '';
+    const block = `<cura-avatar${args.size
+        ? `
+  size="${args.size}"`
+        : ''} ${args.border
+        ? `
+  border="${args.border}"`
+        : ''} ${args.type
+        ? `
+  type="${args.type}"`
+        : ''} ${args.imageSrc
+        ? `
+  image-src="${args.imageSrc}"`
+        : ''} ${args.imageSrcDefault
+        ? `
+  image-src-default="${args.imageSrcDefault}"`
+        : ''}${args.floating
+        ? `
+  floating="${args.floating}"`
+        : ''}${args.backgroundColor
+        ? `
+  background-color="${args.backgroundColor}"`
+        : ''}${args.borderColor
+        ? `
+  border-color="${args.borderColor}"`
+        : ''}${args.borderRadius
+        ? `
+  border-radius="${args.borderRadius}"`
+        : ''}>
+</cura-avatar>`;
+    return `${styles}${block}`;
+};
+export default {
+    title: 'Componentes/Avatar/Avatar',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return renderCuraAvatar(args);
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: Object.keys(avatarSizes).filter(key => key),
+            description: 'Define o tamanho do avatar. ',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '80' },
+            },
+        },
+        border: {
+            control: 'boolean',
+            description: 'Define se o componente possui borda',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false },
+            },
+        },
+        backgroundColor: {
+            control: { type: 'select' },
+            options: ['', ...colors],
+            name: 'background-color',
+            description: 'Define a cor da borda do avatar. Valores válidos para a propriedade CSS `background-color`. Aceita qualquer valor do esquema de cores do design system.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'neutral-purewhite' },
+            },
+        },
+        borderColor: {
+            control: { type: 'select' },
+            options: ['', ...colors],
+            name: 'border-color',
+            description: 'Define a cor da borda do avatar. Valores válidos para a propriedade CSS `border-color`. Aceita qualquer valor do esquema de cores do design system.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'primary' },
+            },
+        },
+        borderRadius: {
+            control: { type: 'text' },
+            description: 'Define o arredondamento do avatar. Valores válidos para a propriedade CSS `border-radius`.',
+            name: 'border-radius',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '50%' },
+            },
+        },
+        type: {
+            control: { type: 'select' },
+            options: ['default', 'brading'],
+            description: 'Define o tipo do componente. <b>Em progresso</b>.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'default' },
+            },
+        },
+        imageSrc: {
+            control: 'text',
+            name: 'image-src',
+            description: 'Define a imagem do componente',
+            table: {
+                category: 'Properties',
+            },
+        },
+        imageSrcDefault: {
+            control: 'text',
+            name: 'image-src-default',
+            description: 'Define a imagem padrão do componente, caso a propriedade `image-src` não possua informações.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '{assetsPath}/images/avatar/patient-default.svg' },
+            },
+        },
+        floating: {
+            control: 'boolean',
+            description: 'Define se o avatar é flutuante e aplica o sombreamento.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false },
+            },
+        },
+        cssBackgroundColor: {
+            control: 'text',
+            name: '--background-color',
+            description: 'Permite a definição da propriedade `background-color` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código',
+            table: {
+                category: 'CSS Properties',
+                defaultValue: { summary: 'neutral-purewhite' },
+            },
+        },
+        cssBorderColor: {
+            control: 'text',
+            name: '--border-color',
+            description: 'Permite a definição da propriedade `border-color` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código',
+            table: {
+                category: 'CSS Properties',
+                defaultValue: { summary: 'primary' },
+            },
+        },
+        cssBorderRadius: {
+            control: { type: 'text' },
+            description: 'Permite a definição da propriedade `border-radius` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código',
+            name: '--border-radius',
+            table: {
+                category: 'CSS Properties',
+                defaultValue: { summary: '50%' },
+            },
+        },
+    },
+};
+export const Avatar = {
+    args: {
+        size: '80',
+        type: '',
+        border: true,
+        imageSrc: '',
+        imageSrcDefault: '',
+        floating: false,
+        backgroundColor: 'neutral-purewhite',
+        borderColor: 'primary',
+        borderRadius: '',
+        cssBackgroundColor: '',
+        cssBorderColor: '',
+        cssBorderRadius: '',
+    },
+};
+//# sourceMappingURL=cura-avatar.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-avatar.stories.js","sourceRoot":"","sources":["../../../src/components/cura-avatar/cura-avatar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { avatarSizes } from './cura-avatar.definitions';\nimport { getColorsWithDepths } from '../../utils/utils';\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraAvatar = (args: any) => {\n  const styles =\n    args.cssBackgroundColor || args.cssBorderColor || args.cssBorderRadius\n      ? `<style>\n  cura-avatar { ${\n    args.cssBackgroundColor\n      ? `\n    --background-color: ${args.cssBackgroundColor} !important;`\n      : ``\n  }${\n          args.cssBorderColor\n            ? `\n    --border-color: ${args.cssBorderColor} !important;`\n            : ``\n        }${\n          args.cssBorderRadius\n            ? `\n    --border-radius: ${args.cssBorderRadius} !important;`\n            : ``\n        }\n  }\n</style>\n\n`\n      : '';\n\n  const block = `<cura-avatar${\n    args.size\n      ? `\n  size=\"${args.size}\"`\n      : ''\n  } ${\n    args.border\n      ? `\n  border=\"${args.border}\"`\n      : ''\n  } ${\n    args.type\n      ? `\n  type=\"${args.type}\"`\n      : ''\n  } ${\n    args.imageSrc\n      ? `\n  image-src=\"${args.imageSrc}\"`\n      : ''\n  } ${\n    args.imageSrcDefault\n      ? `\n  image-src-default=\"${args.imageSrcDefault}\"`\n      : ''\n  }${\n    args.floating\n      ? `\n  floating=\"${args.floating}\"`\n      : ''\n  }${\n    args.backgroundColor\n      ? `\n  background-color=\"${args.backgroundColor}\"`\n      : ''\n  }${\n    args.borderColor\n      ? `\n  border-color=\"${args.borderColor}\"`\n      : ''\n  }${\n    args.borderRadius\n      ? `\n  border-radius=\"${args.borderRadius}\"`\n      : ''\n  }>\n</cura-avatar>`;\n\n  return `${styles}${block}`;\n};\n\nexport default {\n  title: 'Componentes/Avatar/Avatar',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraAvatar(args);\n  },\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: Object.keys(avatarSizes).filter(key => key),\n      description: 'Define o tamanho do avatar. ',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '80' },\n      },\n    },\n    border: {\n      control: 'boolean',\n      description: 'Define se o componente possui borda',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    backgroundColor: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      name: 'background-color',\n      description: 'Define a cor da borda do avatar. Valores válidos para a propriedade CSS `background-color`. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral-purewhite' },\n      },\n    },\n    borderColor: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      name: 'border-color',\n      description: 'Define a cor da borda do avatar. Valores válidos para a propriedade CSS `border-color`. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary' },\n      },\n    },\n    borderRadius: {\n      control: { type: 'text' },\n      description: 'Define o arredondamento do avatar. Valores válidos para a propriedade CSS `border-radius`.',\n      name: 'border-radius',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '50%' },\n      },\n    },\n    type: {\n      control: { type: 'select' },\n      options: ['default', 'brading'],\n      description: 'Define o tipo do componente. <b>Em progresso</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    imageSrc: {\n      control: 'text',\n      name: 'image-src',\n      description: 'Define a imagem do componente',\n      table: {\n        category: 'Properties',\n      },\n    },\n    imageSrcDefault: {\n      control: 'text',\n      name: 'image-src-default',\n      description: 'Define a imagem padrão do componente, caso a propriedade `image-src` não possua informações.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '{assetsPath}/images/avatar/patient-default.svg' },\n      },\n    },\n    floating: {\n      control: 'boolean',\n      description: 'Define se o avatar é flutuante e aplica o sombreamento.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    cssBackgroundColor: {\n      control: 'text',\n      name: '--background-color',\n      description: 'Permite a definição da propriedade `background-color` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: 'neutral-purewhite' },\n      },\n    },\n    cssBorderColor: {\n      control: 'text',\n      name: '--border-color',\n      description: 'Permite a definição da propriedade `border-color` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: 'primary' },\n      },\n    },\n    cssBorderRadius: {\n      control: { type: 'text' },\n      description: 'Permite a definição da propriedade `border-radius` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código',\n      name: '--border-radius',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '50%' },\n      },\n    },\n  },\n};\n\nexport const Avatar = {\n  args: {\n    size: '80',\n    type: '',\n    border: true,\n    imageSrc: '',\n    imageSrcDefault: '',\n    floating: false,\n    backgroundColor: 'neutral-purewhite',\n    borderColor: 'primary',\n    borderRadius: '',\n    cssBackgroundColor: '',\n    cssBorderColor: '',\n    cssBorderRadius: '',\n  },\n};\n"]}

package/dist/collection/components/cura-calendar/cura-calendar.css

@@ -0,0 +1,181 @@
+:host {
+  display: block;
+  width: var(--width);
+}
+:host .calendar {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: var(--width);
+  padding: 0 12px 12px 12px;
+  min-width: 300px;
+  border: 1px solid var(--neutral-light);
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 4px 8px var(--neutral-light);
+  font-family: var(--font-family);
+}
+:host .header {
+  position: relative;
+  padding: 12px 0;
+}
+:host .header::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 2px;
+  right: 2px;
+  border-bottom: 2px dotted var(--neutral-light);
+}
+:host .month-year {
+  display: flex;
+  padding: 12px 8px;
+  justify-content: space-between;
+  align-self: stretch;
+}
+:host .month-year.dropdown {
+  padding: 0%;
+}
+:host .select {
+  display: flex;
+  padding: 0px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  flex: 1 0 0;
+}
+:host .drop-month {
+  display: flex;
+  max-width: 118px;
+  padding: 0px;
+  align-items: flex-start;
+  gap: 0px;
+  flex: 1 0 0;
+}
+:host .drop-year {
+  display: flex;
+  min-width: 80px;
+  max-width: 85px;
+  padding: 0px;
+  align-items: flex-start;
+  gap: 0px;
+  flex: 1 0 0;
+}
+:host .days-of-week {
+  display: flex;
+  height: 30px;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+:host .day {
+  flex: 1;
+  text-align: center;
+}
+:host .dates {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-self: stretch;
+  gap: 0;
+}
+:host .icon {
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+}
+:host .icon.dropdown {
+  margin-top: 10px;
+}
+:host .icon::before {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  background: var(--accent-base);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.2s ease;
+}
+:host .icon:active::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+:host .icon:active {
+  transform: scale(1);
+}
+:host .date {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  width: 14.2857142857%;
+  aspect-ratio: 1;
+  font-size: 14px;
+  cursor: pointer;
+  position: relative;
+  box-sizing: border-box;
+  text-align: center;
+  flex-shrink: 0;
+}
+:host .date.today {
+  border: 2px solid var(--primary-darker);
+  border-radius: 50%;
+  color: var(--primary-darker);
+}
+:host .date.selected, :host .date.default-dates {
+  color: var(--neutral-black) !important;
+  background: var(--accent-base);
+  border-radius: 50%;
+  border: none;
+}
+:host .date.invalid {
+  color: var(--neutral-dark) !important;
+  cursor: not-allowed;
+}
+:host .date.invalid:hover {
+  background: none;
+  box-shadow: none;
+}
+:host .date.valid {
+  color: var(--primary-darker);
+  font-weight: var(--font-weight-bold);
+}
+:host .date.range.start {
+  border-radius: 50% 0 0 50%;
+  color: var(--primary-darker) !important;
+  background: var(--accent-base);
+}
+:host .date.range.interval {
+  border-radius: 0;
+  background-color: var(--accent-light);
+  color: var(--neutral-black);
+}
+:host .date.range.interval.today {
+  border: none;
+}
+:host .date.range.end {
+  border-radius: 0 50% 50% 0;
+  color: var(--primary-darker) !important;
+  background: var(--accent-base);
+}
+:host .date:hover {
+  background: var(--accent-light);
+  border-radius: 50%;
+  color: var(--neutral-black);
+}
+:host select,
+:host input {
+  width: 60px;
+  font-size: 16px;
+  box-shadow: 0 2px 2px var(--neutral-black);
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background: #f7f7f7;
+}