@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/collection/components/forms/cura-select-options/cura-select-option.css

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+}
+
+.item {
+  display: flex;
+  padding: 12px 8px;
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  background: var(--neutral-purewhite);
+}
+.item.selected {
+  background-color: var(--primary-lighter-50);
+  border-bottom: 1px solid var(--primary-light);
+}
+.item:hover:not(.selected) {
+  background: var(--neutral-white);
+  box-shadow: 0 2px 0 0 var(--neutral-light);
+}
+.item.active {
+  background: var(--neutral-white) !important;
+}
+.item.selected.active {
+  background-color: var(--primary-lighter-50) !important;
+  box-shadow: none;
+}

package/dist/collection/components/forms/cura-select-options/cura-select-option.js

@@ -0,0 +1,138 @@
+import { h, Host } from "@stencil/core";
+export class CuraSelectOption {
+    constructor() {
+        this.theme = window.CuraAPI.theme;
+        this.value = undefined;
+        this.selected = false;
+        this.active = false;
+        this.size = 'small';
+        this.styles = {};
+    }
+    connectedCallback() {
+        const colors = [
+            { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },
+            { name: '--primary-light', theme: 'primary-light' },
+            { name: '--neutral-light', theme: 'neutral-light' },
+            { name: '--neutral-purewhite', theme: 'neutral-purewhite' },
+        ];
+        colors.forEach(color => this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme, color === null || color === void 0 ? void 0 : color.opacity) }));
+    }
+    getSize(element) {
+        const sizeMap = {
+            large: element === 'label' ? 'medium' : 20,
+            medium: element === 'label' ? 'small' : 16,
+            small: element === 'label' ? 'xsmall' : 'micro',
+        };
+        return sizeMap[this.size] || sizeMap['medium'];
+    }
+    getClasses() {
+        return {
+            'item': true,
+            'selected': this.selected,
+            'active': this.active
+        };
+    }
+    render() {
+        return (h(Host, { key: '9eb6b609efeb50130efd27c20bc7a42441687ce7', slot: "option" }, h("div", { key: 'f72ff1ec9f5b5a579152b09e7a02496be5ab944b', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '0b45ade14ca8ad351a696ec6bad4349eadec38f1', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '2015c43b9b1686fdef5f0369a91ce376327e5d7f' })), this.selected && h("cura-icon", { key: '9ee481f8ee3e586bd629559e90acf30976711059', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+    }
+    static get is() { return "cura-select-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-select-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-select-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xsmall' | 'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xsmall\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'small'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "getSize"
+            }];
+    }
+}
+//# sourceMappingURL=cura-select-option.js.map

package/dist/collection/components/forms/cura-select-options/cura-select-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-select-option.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select-options/cura-select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,gBAAgB;;QAQ3B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;wBANgB,KAAK;sBACP,KAAK;oBACQ,OAAO;sBAC7C,EAAE;;IAKpB,iBAAiB;QACf,MAAM,MAAM,GAAG;YACb,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE;YACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,EAAE;YACnD,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,EAAE;YACnD,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,mBAAmB,EAAE;SAC5D,CAAC;QAEF,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,mCAAQ,IAAI,CAAC,MAAM,KAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,GAAE,CAAC,CAAC;IACnI,CAAC;IAGD,OAAO,CAAC,OAAe;QACrB,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YAC1C,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAC1C,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;SAChD,CAAC;QAEF,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,UAAU;QACR,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,QAAQ,EAAC,IAAI,CAAC,MAAM;SACrB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ;YACjB,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBAC/C,mEAAY,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,kBAAe,GAAG;oBACrH,8DAAa,CACF;gBACZ,IAAI,CAAC,QAAQ,IAAI,kEAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,EAAC,cAAc,GAAa,CACnG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select-option',\n  styleUrl: 'cura-select-option.scss',\n  shadow: true,\n})\nexport class CuraSelectOption {\n  @Prop({ reflect: true }) value: string;\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) active: boolean = false;\n  @Prop() size: 'xsmall' | 'small' | 'medium' | 'large' = 'small'\n  @State() styles = {};\n  @Element() host: HTMLElement;\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    const colors = [\n      { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },\n      { name: '--primary-light', theme: 'primary-light' },\n      { name: '--neutral-light', theme: 'neutral-light' },\n      { name: '--neutral-purewhite', theme: 'neutral-purewhite' },\n    ];\n\n    colors.forEach(color => this.styles = { ...this.styles, [color.name]: this.theme.colors.getColor(color.theme, color?.opacity) });\n  }\n\n  @Watch('size')\n  getSize(element: string) {\n    const sizeMap = {\n      large: element === 'label' ? 'medium' : 20,\n      medium: element === 'label' ? 'small' : 16,\n      small: element === 'label' ? 'xsmall' : 'micro',\n    };\n\n    return sizeMap[this.size] || sizeMap['medium'];\n  }\n\n  getClasses() {\n    return {\n      'item': true,\n      'selected': this.selected,\n      'active':this.active\n    };\n  }\n\n  render() {\n    return (\n      <Host slot=\"option\">\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-label color={`${this.selected ? 'primary-base' : 'neutral-black'}`} size={this.getSize('label')} margin-block=\"0\">\n            <slot></slot>\n          </cura-label>\n          {this.selected && <cura-icon name='check' size={this.getSize('icon')} color=\"primary-base\"></cura-icon>}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/forms/cura-switch/cura-switch.css

@@ -1,4 +1,47 @@
 @charset "UTF-8";
+/**
+ * Global Shadow Level Definitions.
+ * Required CSS Properties with respective opacities:
+ * --neutral-black,
+ * --neutral-purewhite,
+ * --accent-base
+ * --primary-base
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-purewhite opacity: 0.2
+ * Use: @include shadow-level1(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level2(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level3(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.12
+ * Use: @include shadow-level4(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.8
+ * Use: @include shadow-level5(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --accent-base opacity: 0.2
+ * Use: @include shadow-level5-accent(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --primary-base opacity: 0.16
+ * Use: @include shadow-level3-primary(){ ... }
+ */
 :host {
   display: block;
   width: fit-content;
@@ -10,16 +53,16 @@
   align-items: center;
   flex-direction: row-reverse;
   gap: var(--gap);
+  text-align: left;
 }
 
-.position.container {
+.position {
   flex-direction: row;
 }
-.position .label {
-  text-align: right;
-}
-.position .message {
-  text-align: right;
+
+.label,
+.message {
+  text-align: left;
 }
 
 .control {
@@ -28,7 +71,7 @@
 
 /* Estilos para o controle de switch */
 .track {
-  background: var(--neutral-base-black-40);
+  background: var(--neutral-dark-base);
   border-radius: 16px;
   transition: background-color 0.3s;
   align-items: flex-start;
@@ -36,11 +79,12 @@
   box-sizing: border-box;
   width: var(--size-track);
   height: var(--size);
+  position: relative;
 }
 
 .thumb {
-  background-color: var(--neutral-white-purewhite);
-  border: 2px solid var(--neutral-medium);
+  background: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-darker-medium);
   border-radius: 50%;
   position: absolute;
   transition: transform 0.3s, outline 0.3s;
@@ -50,51 +94,71 @@
   box-sizing: border-box;
   width: var(--size);
   height: var(--size);
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 /* Estado "checked" */
 .checked .thumb {
-  border-color: var(--color-dark-light);
-  background: var(--color-lighter);
-  transform: translateX(var(--size));
+  border-color: var(--color-dark);
+  box-shadow: 0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));
+  background: var(--neutral-purewhite);
+  transform: translateX(var(--size)) translateY(-50%);
 }
 
 .checked .thumb:hover {
-  background: var(--neutral-white-purewhite) !important;
+  background: var(--neutral-pale) !important;
+  border-color: var(--neutral-darker-medium) !important;
+}
+
+.checked .thumb:active {
+  border-color: var(--color-dark);
+  background: var(--neutral-pale);
 }
 
 .checked .track {
-  background: var(--color-base-lighter-50);
+  background: var(--color-base-light);
 }
 
 /* Estado "disabled" */
 .disabled .track {
-  background: var(--primary-base-neutral-black-20);
+  background: var(--neutral-black-neutral-pale);
 }
 
 .disabled .thumb {
-  background: var(--neutral-lighter) !important;
-  border-color: var(--primary-dark-neutral-base);
+  background: var(--neutral-black-neutral-base) !important;
+  border-color: var(--neutral-black-neutral-pale) !important;
   cursor: not-allowed;
 }
 
 .disabled.checked .track {
-  background: var(--primary-base-neutral-black-20);
+  background: var(--neutral-black-neutral-pale);
 }
 
-.disabled .thumb:hover {
-  background: var(--neutral-lighter) !important;
-  border-color: var(--primary-dark-neutral-base) !important;
+.container.disabled .thumb:focus {
+  outline: none !important;
+  border-color: var(--neutral-black-neutral-pale) !important;
 }
 
 /* Estado hover para não disabled e não checked */
 :not(.disabled):not(.checked) .thumb:hover {
-  border-color: var(--color-dark-light);
-  background: var(--color-lighter);
+  border-color: var(--color-dark);
+  background: var(--neutral-pale);
+}
+
+:not(.disabled):not(.checked) .thumb:active {
+  border-color: var(--color-dark);
+  background: var(--neutral-pale);
 }
 
 /* Estado hover para não disabled */
 :not(.disabled) .thumb:focus {
-  border-color: var(--info-base) !important;
+  outline: 2px solid var(--info-base) !important;
+  border: 2px solid var(--neutral-darker-medium);
   z-index: 1;
+}
+
+:not(.disabled) .checked .thumb:focus {
+  outline: 2px solid var(--info-base) !important;
+  border-color: var(--color-dark);
 }