@sula-tech/webcomponents 0.9.1 → 0.10.0

package/dist/collection/components/sula-segmented-control/sula-segmented-control.js

@@ -0,0 +1,241 @@
+import { Host, h } from "@stencil/core";
+import { SulaSegmentedControlColor, SulaSegmentedControlSize, SulaSegmentedControlType } from "./model/sula-segmented-control.model";
+export class SulaSegmentedControl {
+    constructor() {
+        /**
+         * Items for the segmented control.
+         */
+        this.items = [];
+        /**
+         * Segmented control type.
+         */
+        this.type = SulaSegmentedControlType.Text;
+        /**
+         * Segmented control size.
+         */
+        this.size = SulaSegmentedControlSize.Default;
+        /**
+         * Segmented control color.
+         */
+        this.color = SulaSegmentedControlColor.White;
+    }
+    handleItemClick(selectedItem) {
+        this.items = this.items.map(item => (Object.assign(Object.assign({}, item), { selected: item.value === selectedItem.value })));
+        this.itemClicked.emit(Object.assign(Object.assign({}, selectedItem), { selected: true }));
+    }
+    handleItemHover(hoveredItem) {
+        this.itemHovered.emit(hoveredItem);
+    }
+    handleItemBlur(blurredItem) {
+        this.itemBlur.emit(blurredItem);
+    }
+    getCaretIconClass(item) {
+        if (this.type === SulaSegmentedControlType.Icon) {
+            return item.selected ? 'text-negative-negative-1' : 'text-icon-primary';
+        }
+        return item.selected ? 'text-brand-primary' : 'text-text-primary';
+    }
+    render() {
+        return (h(Host, { key: 'e1dfe69feaf9d299a87c3006849751fb053e1410' }, h("div", { key: '77ce9955a1ed4a99c3dc35c76b4367a90b2dad61', class: {
+                'flex flex-row items-center rounded-xxl p-2 w-fit backdrop-blur-[20px]': true,
+                'bg-opacity-on-body': this.color === SulaSegmentedControlColor.Gray,
+                'bg-opacity-body': this.color === SulaSegmentedControlColor.White,
+            } }, this.items.map(item => (h("div", { class: {
+                'rounded-3xl flex justify-center items-center cursor-pointer transition': true,
+                'py-12 px-20': this.size === SulaSegmentedControlSize.Default,
+                'py-8 px-16': this.size === SulaSegmentedControlSize.Small,
+                'bg-box-shadow-body': this.type === SulaSegmentedControlType.Text && item.selected,
+                'bg-brand-primary': this.type === SulaSegmentedControlType.Icon && item.selected,
+                'hover:bg-box-shadow-body': !item.selected,
+            }, onClick: () => this.handleItemClick(item), onMouseEnter: () => this.handleItemHover(item), onMouseLeave: () => this.handleItemBlur(item) }, this.type === SulaSegmentedControlType.Text ? (h("span", { class: {
+                'text-brand-primary text-label-medium-bold leading-5': item.selected,
+                'text-text-secondary text-paragraph-medium-regular leading-5': !item.selected,
+            } }, item.label)) : (h("sula-icon", { class: "flex items-center justify-center", icon: item.icon, customClass: `${item.selected ? 'text-negative-negative-1' : 'text-icon-primary'} text-xl leading-4` })), item.addChevron && h("sula-icon", { class: "ml-4 flex", icon: "ph-bold ph-caret-down", customClass: `${this.getCaretIconClass(item)} text-base leading-4` })))))));
+    }
+    static get is() { return "sula-segmented-control"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-segmented-control.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-segmented-control.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaSegmentedControlOption[]",
+                    "resolved": "SulaSegmentedControlOption[]",
+                    "references": {
+                        "SulaSegmentedControlOption": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items for the segmented control."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaSegmentedControlType",
+                    "resolved": "SulaSegmentedControlType.Icon | SulaSegmentedControlType.Text",
+                    "references": {
+                        "SulaSegmentedControlType": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Segmented control type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaSegmentedControlType.Text"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaSegmentedControlSize",
+                    "resolved": "SulaSegmentedControlSize.Default | SulaSegmentedControlSize.Small",
+                    "references": {
+                        "SulaSegmentedControlSize": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Segmented control size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaSegmentedControlSize.Default"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaSegmentedControlColor",
+                    "resolved": "SulaSegmentedControlColor.Gray | SulaSegmentedControlColor.White",
+                    "references": {
+                        "SulaSegmentedControlColor": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Segmented control color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaSegmentedControlColor.White"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClicked",
+                "name": "itemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is clicked."
+                },
+                "complexType": {
+                    "original": "SulaSegmentedControlOption",
+                    "resolved": "SulaSegmentedControlOption",
+                    "references": {
+                        "SulaSegmentedControlOption": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemHovered",
+                "name": "itemHovered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is hovered."
+                },
+                "complexType": {
+                    "original": "SulaSegmentedControlOption",
+                    "resolved": "SulaSegmentedControlOption",
+                    "references": {
+                        "SulaSegmentedControlOption": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemBlur",
+                "name": "itemBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is blurred."
+                },
+                "complexType": {
+                    "original": "SulaSegmentedControlOption",
+                    "resolved": "SulaSegmentedControlOption",
+                    "references": {
+                        "SulaSegmentedControlOption": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlOption"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sula-segmented-control.js.map

package/dist/collection/components/sula-segmented-control/sula-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-segmented-control.js","sourceRoot":"","sources":["../../../src/components/sula-segmented-control/sula-segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaSegmentedControlColor, SulaSegmentedControlOption, SulaSegmentedControlSize, SulaSegmentedControlType } from './model/sula-segmented-control.model';\n\n@Component({\n  tag: 'sula-segmented-control',\n  styleUrl: 'sula-segmented-control.scss',\n  shadow: true,\n})\nexport class SulaSegmentedControl {\n  /**\n   * Items for the segmented control.\n   */\n  @Prop({ mutable: true })\n  items: SulaSegmentedControlOption[] = [];\n\n  /**\n   * Segmented control type.\n   */\n  @Prop({ mutable: true })\n  type: SulaSegmentedControlType = SulaSegmentedControlType.Text;\n\n  /**\n   * Segmented control size.\n   */\n  @Prop({ mutable: true })\n  size: SulaSegmentedControlSize = SulaSegmentedControlSize.Default;\n\n  /**\n   * Segmented control color.\n   */\n  @Prop({ mutable: true })\n  color: SulaSegmentedControlColor = SulaSegmentedControlColor.White;\n\n  /**\n   * Emitted when an item is clicked.\n   */\n  @Event()\n  itemClicked: EventEmitter<SulaSegmentedControlOption>;\n\n  /**\n   * Emitted when an item is hovered.\n   */\n  @Event()\n  itemHovered: EventEmitter<SulaSegmentedControlOption>;\n\n  /**\n   * Emitted when an item is blurred.\n   */\n  @Event()\n  itemBlur: EventEmitter<SulaSegmentedControlOption>;\n\n  handleItemClick(selectedItem: SulaSegmentedControlOption) {\n    this.items = this.items.map(item => ({\n      ...item,\n      selected: item.value === selectedItem.value,\n    }));\n\n    this.itemClicked.emit({ ...selectedItem, selected: true });\n  }\n\n  handleItemHover(hoveredItem: SulaSegmentedControlOption) {\n    this.itemHovered.emit(hoveredItem);\n  }\n\n  handleItemBlur(blurredItem: SulaSegmentedControlOption) {\n    this.itemBlur.emit(blurredItem);\n  }\n\n  getCaretIconClass(item: SulaSegmentedControlOption) {\n    if (this.type === SulaSegmentedControlType.Icon) {\n      return item.selected ? 'text-negative-negative-1' : 'text-icon-primary';\n    }\n    return item.selected ? 'text-brand-primary' : 'text-text-primary';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'flex flex-row items-center rounded-xxl p-2 w-fit backdrop-blur-[20px]': true,\n            'bg-opacity-on-body': this.color === SulaSegmentedControlColor.Gray,\n            'bg-opacity-body': this.color === SulaSegmentedControlColor.White,\n          }}\n        >\n          {this.items.map(item => (\n            <div\n              class={{\n                'rounded-3xl flex justify-center items-center cursor-pointer transition': true,\n                'py-12 px-20': this.size === SulaSegmentedControlSize.Default,\n                'py-8 px-16': this.size === SulaSegmentedControlSize.Small,\n                'bg-box-shadow-body': this.type === SulaSegmentedControlType.Text && item.selected,\n                'bg-brand-primary': this.type === SulaSegmentedControlType.Icon && item.selected,\n                'hover:bg-box-shadow-body': !item.selected,\n              }}\n              onClick={() => this.handleItemClick(item)}\n              onMouseEnter={() => this.handleItemHover(item)}\n              onMouseLeave={() => this.handleItemBlur(item)}\n            >\n              {this.type === SulaSegmentedControlType.Text ? (\n                <span\n                  class={{\n                    'text-brand-primary text-label-medium-bold leading-5': item.selected,\n                    'text-text-secondary text-paragraph-medium-regular leading-5': !item.selected,\n                  }}\n                >\n                  {item.label}\n                </span>\n              ) : (\n                <sula-icon\n                  class=\"flex items-center justify-center\"\n                  icon={item.icon}\n                  customClass={`${item.selected ? 'text-negative-negative-1' : 'text-icon-primary'} text-xl leading-4`}\n                ></sula-icon>\n              )}\n              {item.addChevron && <sula-icon class=\"ml-4 flex\" icon=\"ph-bold ph-caret-down\" customClass={`${this.getCaretIconClass(item)} text-base leading-4`}></sula-icon>}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sula-segmented-control/sula-segmented-control.stories.js

@@ -0,0 +1,352 @@
+import { SulaSegmentedControlColor, SulaSegmentedControlSize, SulaSegmentedControlType } from "./model/sula-segmented-control.model";
+export default {
+    title: 'Components/sula-segmented-control',
+    tags: ['autodocs'],
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array de opções para o controle segmentado',
+            table: {
+                type: { summary: 'SulaSegmentedControlOption[]' },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        type: {
+            control: { type: 'select' },
+            options: Object.values(SulaSegmentedControlType),
+            description: 'Tipo do controle segmentado (texto ou ícone)',
+            table: {
+                type: { summary: 'SulaSegmentedControlType' },
+                defaultValue: { summary: 'SulaSegmentedControlType.Text' },
+            },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(SulaSegmentedControlSize),
+            description: 'Tamanho do controle segmentado',
+            table: {
+                type: { summary: 'SulaSegmentedControlSize' },
+                defaultValue: { summary: 'SulaSegmentedControlSize.Default' },
+            },
+        },
+        color: {
+            control: { type: 'select' },
+            options: Object.values(SulaSegmentedControlColor),
+            description: 'Cor de fundo do controle segmentado',
+            table: {
+                type: { summary: 'SulaSegmentedControlColor' },
+                defaultValue: { summary: 'SulaSegmentedControlColor.White' },
+            },
+        },
+        itemClicked: {
+            action: 'itemClicked',
+            description: 'Evento emitido quando um item é clicado',
+            table: {
+                type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },
+            },
+        },
+        itemHovered: {
+            action: 'itemHovered',
+            description: 'Evento emitido quando um item recebe hover',
+            table: {
+                type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },
+            },
+        },
+        itemBlur: {
+            action: 'itemBlur',
+            description: 'Evento emitido quando um item perde o foco',
+            table: {
+                type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+O componente **Sula Segmented Control** é utilizado para permitir que os usuários escolham entre
+múltiplas opções mutuamente exclusivas. É ideal para navegação entre visualizações ou filtros.
+
+### Características principais:
+- Suporte a diferentes tipos (Texto e Ícone)
+- Diferentes tamanhos (Default e Small)
+- Cores de fundo personalizáveis (White e Gray)
+- Suporte a chevron adicional nas opções
+- Eventos de clique, hover e blur
+      `,
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.alignItems = 'center';
+    container.style.justifyContent = 'center';
+    container.style.minHeight = '80px';
+    if (args.color === SulaSegmentedControlColor.White) {
+        container.style.backgroundColor = '#f5f5f5';
+        container.style.padding = '20px';
+        container.style.borderRadius = '8px';
+    }
+    const el = document.createElement('sula-segmented-control');
+    el.items = args.items;
+    el.setAttribute('type', args.type);
+    el.setAttribute('size', args.size);
+    el.setAttribute('color', args.color);
+    el.addEventListener('itemClicked', args.itemClicked);
+    el.addEventListener('itemHovered', args.itemHovered);
+    el.addEventListener('itemBlur', args.itemBlur);
+    container.appendChild(el);
+    return container;
+};
+export const Playground = Template.bind({});
+Playground.args = {
+    items: [
+        { label: 'Opção 1', value: '1', selected: true },
+        { label: 'Opção 2', value: '2' },
+        { label: 'Opção 3', value: '3' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+export const TextType = Template.bind({});
+TextType.args = {
+    items: [
+        { label: 'Todos', value: 'all', selected: true },
+        { label: 'Ativos', value: 'active' },
+        { label: 'Inativos', value: 'inactive' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+TextType.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com texto.',
+        },
+    },
+};
+export const IconType = Template.bind({});
+IconType.args = {
+    items: [
+        { icon: 'ph ph-house', value: 'home', selected: true },
+        { icon: 'ph ph-user', value: 'user' },
+        { icon: 'ph ph-gear', value: 'settings' },
+    ],
+    type: SulaSegmentedControlType.Icon,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+IconType.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com ícones.',
+        },
+    },
+};
+export const WithChevron = Template.bind({});
+WithChevron.args = {
+    items: [
+        { label: 'Filtro 1', value: '1', addChevron: true, selected: true },
+        { label: 'Filtro 2', value: '2', addChevron: true },
+        { label: 'Filtro 3', value: '3', addChevron: true },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+WithChevron.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com chevron nas opções.',
+        },
+    },
+};
+export const SmallSize = Template.bind({});
+SmallSize.args = {
+    items: [
+        { label: 'Pequeno 1', value: '1', selected: true },
+        { label: 'Pequeno 2', value: '2' },
+        { label: 'Pequeno 3', value: '3' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Small,
+    color: SulaSegmentedControlColor.White,
+};
+SmallSize.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado em tamanho pequeno.',
+        },
+    },
+};
+export const Sizes = () => {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.flexDirection = 'column';
+    container.style.gap = '16px';
+    container.style.alignItems = 'center';
+    container.style.padding = '20px';
+    container.style.backgroundColor = '#f5f5f5';
+    container.style.borderRadius = '8px';
+    const defaultControl = document.createElement('sula-segmented-control');
+    defaultControl.items = [
+        { label: 'Default 1', value: '1', selected: true },
+        { label: 'Default 2', value: '2' },
+        { label: 'Default 3', value: '3' },
+    ];
+    defaultControl.setAttribute('size', SulaSegmentedControlSize.Default);
+    const smallControl = document.createElement('sula-segmented-control');
+    smallControl.items = [
+        { label: 'Small 1', value: '1', selected: true },
+        { label: 'Small 2', value: '2' },
+        { label: 'Small 3', value: '3' },
+    ];
+    smallControl.setAttribute('size', SulaSegmentedControlSize.Small);
+    container.appendChild(defaultControl);
+    container.appendChild(smallControl);
+    return container;
+};
+Sizes.parameters = {
+    docs: {
+        description: {
+            story: 'Comparação entre os diferentes tamanhos disponíveis.',
+        },
+    },
+};
+export const GrayBackground = Template.bind({});
+GrayBackground.args = {
+    items: [
+        { label: 'Opção 1', value: '1', selected: true },
+        { label: 'Opção 2', value: '2' },
+        { label: 'Opção 3', value: '3' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.Gray,
+};
+GrayBackground.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com fundo cinza.',
+        },
+    },
+};
+export const ColorVariations = () => {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.flexDirection = 'column';
+    container.style.gap = '16px';
+    container.style.alignItems = 'center';
+    container.style.padding = '20px';
+    container.style.backgroundColor = '#f5f5f5';
+    container.style.borderRadius = '8px';
+    const whiteControl = document.createElement('sula-segmented-control');
+    whiteControl.items = [
+        { label: 'White 1', value: '1', selected: true },
+        { label: 'White 2', value: '2' },
+        { label: 'White 3', value: '3' },
+    ];
+    whiteControl.setAttribute('color', SulaSegmentedControlColor.White);
+    const grayControl = document.createElement('sula-segmented-control');
+    grayControl.items = [
+        { label: 'Gray 1', value: '1', selected: true },
+        { label: 'Gray 2', value: '2' },
+        { label: 'Gray 3', value: '3' },
+    ];
+    grayControl.setAttribute('color', SulaSegmentedControlColor.Gray);
+    container.appendChild(whiteControl);
+    container.appendChild(grayControl);
+    return container;
+};
+ColorVariations.parameters = {
+    docs: {
+        description: {
+            story: 'Diferentes cores de fundo disponíveis.',
+        },
+    },
+};
+export const ManyOptions = Template.bind({});
+ManyOptions.args = {
+    items: [
+        { label: 'Janeiro', value: '1', selected: true },
+        { label: 'Fevereiro', value: '2' },
+        { label: 'Março', value: '3' },
+        { label: 'Abril', value: '4' },
+        { label: 'Maio', value: '5' },
+    ],
+    type: SulaSegmentedControlType.Text,
+    size: SulaSegmentedControlSize.Default,
+    color: SulaSegmentedControlColor.White,
+};
+ManyOptions.parameters = {
+    docs: {
+        description: {
+            story: 'Controle segmentado com múltiplas opções.',
+        },
+    },
+};
+export const AllVariations = () => {
+    const container = document.createElement('div');
+    container.style.display = 'grid';
+    container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(300px, 1fr))';
+    container.style.gap = '24px';
+    container.style.padding = '20px';
+    container.style.backgroundColor = '#f5f5f5';
+    container.style.borderRadius = '8px';
+    const variations = [
+        {
+            items: [
+                { label: 'Text White', value: '1', selected: true },
+                { label: 'Opção 2', value: '2' },
+            ],
+            type: SulaSegmentedControlType.Text,
+            color: SulaSegmentedControlColor.White,
+        },
+        {
+            items: [
+                { label: 'Text Gray', value: '1', selected: true },
+                { label: 'Opção 2', value: '2' },
+            ],
+            type: SulaSegmentedControlType.Text,
+            color: SulaSegmentedControlColor.Gray,
+        },
+        {
+            items: [
+                { icon: 'ph ph-house', value: '1', selected: true },
+                { icon: 'ph ph-user', value: '2' },
+            ],
+            type: SulaSegmentedControlType.Icon,
+            color: SulaSegmentedControlColor.White,
+        },
+        {
+            items: [
+                { icon: 'ph ph-house', value: '1', selected: true },
+                { icon: 'ph ph-user', value: '2' },
+            ],
+            type: SulaSegmentedControlType.Icon,
+            color: SulaSegmentedControlColor.Gray,
+        },
+    ];
+    variations.forEach(variation => {
+        const control = document.createElement('sula-segmented-control');
+        control.items = variation.items;
+        control.setAttribute('type', variation.type);
+        control.setAttribute('color', variation.color);
+        control.setAttribute('size', SulaSegmentedControlSize.Default);
+        container.appendChild(control);
+    });
+    return container;
+};
+AllVariations.parameters = {
+    docs: {
+        description: {
+            story: 'Visão geral de todas as combinações de tipo e cor.',
+        },
+    },
+};
+//# sourceMappingURL=sula-segmented-control.stories.js.map

package/dist/collection/components/sula-segmented-control/sula-segmented-control.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-segmented-control.stories.js","sourceRoot":"","sources":["../../../src/components/sula-segmented-control/sula-segmented-control.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaSegmentedControlColor, SulaSegmentedControlSize, SulaSegmentedControlType } from './model/sula-segmented-control.model';\n\nexport default {\n  title: 'Components/sula-segmented-control',\n  tags: ['autodocs'],\n  argTypes: {\n    items: {\n      control: 'object',\n      description: 'Array de opções para o controle segmentado',\n      table: {\n        type: { summary: 'SulaSegmentedControlOption[]' },\n        defaultValue: { summary: '[]' },\n      },\n    },\n    type: {\n      control: { type: 'select' },\n      options: Object.values(SulaSegmentedControlType),\n      description: 'Tipo do controle segmentado (texto ou ícone)',\n      table: {\n        type: { summary: 'SulaSegmentedControlType' },\n        defaultValue: { summary: 'SulaSegmentedControlType.Text' },\n      },\n    },\n    size: {\n      control: { type: 'select' },\n      options: Object.values(SulaSegmentedControlSize),\n      description: 'Tamanho do controle segmentado',\n      table: {\n        type: { summary: 'SulaSegmentedControlSize' },\n        defaultValue: { summary: 'SulaSegmentedControlSize.Default' },\n      },\n    },\n    color: {\n      control: { type: 'select' },\n      options: Object.values(SulaSegmentedControlColor),\n      description: 'Cor de fundo do controle segmentado',\n      table: {\n        type: { summary: 'SulaSegmentedControlColor' },\n        defaultValue: { summary: 'SulaSegmentedControlColor.White' },\n      },\n    },\n    itemClicked: {\n      action: 'itemClicked',\n      description: 'Evento emitido quando um item é clicado',\n      table: {\n        type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },\n      },\n    },\n    itemHovered: {\n      action: 'itemHovered',\n      description: 'Evento emitido quando um item recebe hover',\n      table: {\n        type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },\n      },\n    },\n    itemBlur: {\n      action: 'itemBlur',\n      description: 'Evento emitido quando um item perde o foco',\n      table: {\n        type: { summary: 'CustomEvent<SulaSegmentedControlOption>' },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `\nO componente **Sula Segmented Control** é utilizado para permitir que os usuários escolham entre\nmúltiplas opções mutuamente exclusivas. É ideal para navegação entre visualizações ou filtros.\n\n### Características principais:\n- Suporte a diferentes tipos (Texto e Ícone)\n- Diferentes tamanhos (Default e Small)\n- Cores de fundo personalizáveis (White e Gray)\n- Suporte a chevron adicional nas opções\n- Eventos de clique, hover e blur\n      `,\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'flex';\n  container.style.alignItems = 'center';\n  container.style.justifyContent = 'center';\n  container.style.minHeight = '80px';\n\n  if (args.color === SulaSegmentedControlColor.White) {\n    container.style.backgroundColor = '#f5f5f5';\n    container.style.padding = '20px';\n    container.style.borderRadius = '8px';\n  }\n\n  const el = document.createElement('sula-segmented-control');\n\n  el.items = args.items;\n  el.setAttribute('type', args.type);\n  el.setAttribute('size', args.size);\n  el.setAttribute('color', args.color);\n\n  el.addEventListener('itemClicked', args.itemClicked);\n  el.addEventListener('itemHovered', args.itemHovered);\n  el.addEventListener('itemBlur', args.itemBlur);\n\n  container.appendChild(el);\n  return container;\n};\n\nexport const Playground = Template.bind({});\nPlayground.args = {\n  items: [\n    { label: 'Opção 1', value: '1', selected: true },\n    { label: 'Opção 2', value: '2' },\n    { label: 'Opção 3', value: '3' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\n\nexport const TextType = Template.bind({});\nTextType.args = {\n  items: [\n    { label: 'Todos', value: 'all', selected: true },\n    { label: 'Ativos', value: 'active' },\n    { label: 'Inativos', value: 'inactive' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\nTextType.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com texto.',\n    },\n  },\n};\n\nexport const IconType = Template.bind({});\nIconType.args = {\n  items: [\n    { icon: 'ph ph-house', value: 'home', selected: true },\n    { icon: 'ph ph-user', value: 'user' },\n    { icon: 'ph ph-gear', value: 'settings' },\n  ],\n  type: SulaSegmentedControlType.Icon,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\nIconType.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com ícones.',\n    },\n  },\n};\n\nexport const WithChevron = Template.bind({});\nWithChevron.args = {\n  items: [\n    { label: 'Filtro 1', value: '1', addChevron: true, selected: true },\n    { label: 'Filtro 2', value: '2', addChevron: true },\n    { label: 'Filtro 3', value: '3', addChevron: true },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\nWithChevron.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com chevron nas opções.',\n    },\n  },\n};\n\nexport const SmallSize = Template.bind({});\nSmallSize.args = {\n  items: [\n    { label: 'Pequeno 1', value: '1', selected: true },\n    { label: 'Pequeno 2', value: '2' },\n    { label: 'Pequeno 3', value: '3' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Small,\n  color: SulaSegmentedControlColor.White,\n};\nSmallSize.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado em tamanho pequeno.',\n    },\n  },\n};\n\nexport const Sizes = () => {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.flexDirection = 'column';\n  container.style.gap = '16px';\n  container.style.alignItems = 'center';\n  container.style.padding = '20px';\n  container.style.backgroundColor = '#f5f5f5';\n  container.style.borderRadius = '8px';\n\n  const defaultControl = document.createElement('sula-segmented-control');\n  defaultControl.items = [\n    { label: 'Default 1', value: '1', selected: true },\n    { label: 'Default 2', value: '2' },\n    { label: 'Default 3', value: '3' },\n  ];\n  defaultControl.setAttribute('size', SulaSegmentedControlSize.Default);\n\n  const smallControl = document.createElement('sula-segmented-control');\n  smallControl.items = [\n    { label: 'Small 1', value: '1', selected: true },\n    { label: 'Small 2', value: '2' },\n    { label: 'Small 3', value: '3' },\n  ];\n  smallControl.setAttribute('size', SulaSegmentedControlSize.Small);\n\n  container.appendChild(defaultControl);\n  container.appendChild(smallControl);\n\n  return container;\n};\nSizes.parameters = {\n  docs: {\n    description: {\n      story: 'Comparação entre os diferentes tamanhos disponíveis.',\n    },\n  },\n};\n\nexport const GrayBackground = Template.bind({});\nGrayBackground.args = {\n  items: [\n    { label: 'Opção 1', value: '1', selected: true },\n    { label: 'Opção 2', value: '2' },\n    { label: 'Opção 3', value: '3' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.Gray,\n};\nGrayBackground.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com fundo cinza.',\n    },\n  },\n};\n\nexport const ColorVariations = () => {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.flexDirection = 'column';\n  container.style.gap = '16px';\n  container.style.alignItems = 'center';\n  container.style.padding = '20px';\n  container.style.backgroundColor = '#f5f5f5';\n  container.style.borderRadius = '8px';\n\n  const whiteControl = document.createElement('sula-segmented-control');\n  whiteControl.items = [\n    { label: 'White 1', value: '1', selected: true },\n    { label: 'White 2', value: '2' },\n    { label: 'White 3', value: '3' },\n  ];\n  whiteControl.setAttribute('color', SulaSegmentedControlColor.White);\n\n  const grayControl = document.createElement('sula-segmented-control');\n  grayControl.items = [\n    { label: 'Gray 1', value: '1', selected: true },\n    { label: 'Gray 2', value: '2' },\n    { label: 'Gray 3', value: '3' },\n  ];\n  grayControl.setAttribute('color', SulaSegmentedControlColor.Gray);\n\n  container.appendChild(whiteControl);\n  container.appendChild(grayControl);\n\n  return container;\n};\nColorVariations.parameters = {\n  docs: {\n    description: {\n      story: 'Diferentes cores de fundo disponíveis.',\n    },\n  },\n};\n\nexport const ManyOptions = Template.bind({});\nManyOptions.args = {\n  items: [\n    { label: 'Janeiro', value: '1', selected: true },\n    { label: 'Fevereiro', value: '2' },\n    { label: 'Março', value: '3' },\n    { label: 'Abril', value: '4' },\n    { label: 'Maio', value: '5' },\n  ],\n  type: SulaSegmentedControlType.Text,\n  size: SulaSegmentedControlSize.Default,\n  color: SulaSegmentedControlColor.White,\n};\nManyOptions.parameters = {\n  docs: {\n    description: {\n      story: 'Controle segmentado com múltiplas opções.',\n    },\n  },\n};\n\nexport const AllVariations = () => {\n  const container = document.createElement('div');\n  container.style.display = 'grid';\n  container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(300px, 1fr))';\n  container.style.gap = '24px';\n  container.style.padding = '20px';\n  container.style.backgroundColor = '#f5f5f5';\n  container.style.borderRadius = '8px';\n\n  const variations = [\n    {\n      items: [\n        { label: 'Text White', value: '1', selected: true },\n        { label: 'Opção 2', value: '2' },\n      ],\n      type: SulaSegmentedControlType.Text,\n      color: SulaSegmentedControlColor.White,\n    },\n    {\n      items: [\n        { label: 'Text Gray', value: '1', selected: true },\n        { label: 'Opção 2', value: '2' },\n      ],\n      type: SulaSegmentedControlType.Text,\n      color: SulaSegmentedControlColor.Gray,\n    },\n    {\n      items: [\n        { icon: 'ph ph-house', value: '1', selected: true },\n        { icon: 'ph ph-user', value: '2' },\n      ],\n      type: SulaSegmentedControlType.Icon,\n      color: SulaSegmentedControlColor.White,\n    },\n    {\n      items: [\n        { icon: 'ph ph-house', value: '1', selected: true },\n        { icon: 'ph ph-user', value: '2' },\n      ],\n      type: SulaSegmentedControlType.Icon,\n      color: SulaSegmentedControlColor.Gray,\n    },\n  ];\n\n  variations.forEach(variation => {\n    const control = document.createElement('sula-segmented-control');\n    control.items = variation.items;\n    control.setAttribute('type', variation.type);\n    control.setAttribute('color', variation.color);\n    control.setAttribute('size', SulaSegmentedControlSize.Default);\n    container.appendChild(control);\n  });\n\n  return container;\n};\nAllVariations.parameters = {\n  docs: {\n    description: {\n      story: 'Visão geral de todas as combinações de tipo e cor.',\n    },\n  },\n};\n"]}