@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-checkbox.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-checkbox',\n  styleUrl: 'cura-checkbox.scss',\n  shadow: true,\n})\n\nexport class CuraCheckbox {\n  /**\n   * Reflects the checked state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Reflects the indeterminate state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n  /**\n  * Status of the checkbox.\n  * Can be 'error', 'success', or 'default'.\n  */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n  /**\n   * Reflects the disabled state of the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n  * Reflects the required state of the checkbox.\n  */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the checkbox.\n   */\n  @Prop({ reflect: true }) label: string;\n  /**\n   * Specifies the tabindex of the checkbox.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the checkbox.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Value associated with the checkbox.\n   */\n  @Prop({ reflect: true }) value: string;\n  /**\n   * Name attribute of the checkbox.\n   */\n  @Prop({ reflect: true }) name: string;\n  /**\n   * Size of the checkbox.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background theme of the checkbox.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * iconColor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() iconColor: 'dark' | 'light' = 'dark';\n  /**\n   * Color theme of the checkbox.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string, checked: boolean, indeterminate: boolean }>;\n\n  isDarkbackground = () => this.background === 'dark';\n\n  isDarkIconColor = () => this.iconColor === 'dark';\n\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`\n    };\n  }\n\n\n  /**\n   * Watches changes in color and background properties to update styles.\n   */\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-lighter', background: `${this.color}-lighter` },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--info-base', background: 'info-base' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--success-dark', background: 'success-dark' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--success-base-lighter', background: this.isDarkbackground() ? 'success-base' : 'success-lighter' },\n      { name: '--success-dark-base', background: this.isDarkbackground() ? 'success-dark' : 'success-base' },\n      { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },\n      { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n    });\n    this.styles = { ...this.styles };\n\n  }\n\n  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  /**\n   * Handles click event on the checkbox.\n   * Emits onchange event with value, checked, and indeterminate states.\n   */\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n    this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n  };\n\n  /**\n   * Retrieves classes based on component state for conditional styling.\n   */\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['indeterminate'] = this.indeterminate;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  /**\n * Assigns color based on status and background theme.\n * @param defaultColor Default color.\n */\n\n  @Watch('background')\n  @Watch('iconColor')\n  assignColor(type: 'icon' | 'label' | 'message',) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        icon: 'success-dark',\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n      },\n      error: {\n        icon: 'error-dark',\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n      },\n      default: {\n        icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'\n      }\n    };\n\n    return statusColors[this.status][type];\n  }\n\n  /**\n   * Retrieves icon element based on checkbox state.\n   */\n  getIcon() {\n    const iconName = this.indeterminate ? 'minus' : \"check\"\n    const iconColor = this.assignColor('icon');\n    const iconSize = this.size === 'large' ? 20 : \"micro\"\n\n    return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label\n                class=\"label\"\n                size={this.size === 'large' ? 'medium' : 'xsmall'}\n                color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n            </div>\n            <cura-label\n              color={this.assignColor('message')}\n              size=\"xsmall\"\n              class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <div class={\"checkbox\"} onClick={this.handleClick} tabIndex={this.ontabindex}>\n            <input\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              required={this.required}\n              checked={this.checked}\n              indeterminate={this.indeterminate}\n            />\n            {this.getIcon()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-checkbox.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-checkbox',\n  styleUrl: 'cura-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraCheckbox {\n  /**\n   * Reflects the checked state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Reflects the indeterminate state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n  /**\n   * Status of the checkbox.\n   * Can be 'error', 'success', or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n  /**\n   * Reflects the disabled state of the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Reflects the required state of the checkbox.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the checkbox.\n   */\n  @Prop({ reflect: true }) label: string;\n  /**\n   * Specifies the tabindex of the checkbox.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the checkbox.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Value associated with the checkbox.\n   */\n  @Prop({ reflect: true }) value: string;\n  /**\n   * Name attribute of the checkbox.\n   */\n  @Prop({ reflect: true }) name: string;\n  /**\n   * Size of the checkbox.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background theme of the checkbox.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * iconColor theme of the checkbox.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() iconColor: 'dark' | 'light' = 'dark';\n  /**\n   * Color theme of the checkbox.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string; checked: boolean; indeterminate: boolean }>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  isDarkBackground = () => this.background === 'dark';\n\n  isDarkIconColor = () => this.iconColor === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`,\n    };\n  }\n\n  /**\n   * Watches changes in color and background properties to update styles.\n   */\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-lighter', background: `${this.color}-lighter` },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--info-base', background: 'info-base' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--success-dark', background: 'success-dark' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--neutral-black', background: 'neutral-black' },\n      { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },\n      { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },\n      { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },\n      { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },\n      { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },\n      { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },\n      { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },\n      { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },\n      { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n    });\n    this.styles = { ...this.styles };\n  }\n\n  connectedCallback() {\n    this.sizeHandler();\n    this.setColors();\n  }\n\n  /**\n   * Callback for form association.\n   */\n  formAssociatedCallback(form: { ariaLabel: string }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n   * Callback to restore the switch state from the form.\n   */\n  formStateRestoreCallback(state: { value: string; checked: boolean; indeterminate: boolean }) {\n    this.value = state.value;\n    this.checked = state.checked;\n    this.indeterminate = state.indeterminate;\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Callback to reset the switch state when the form is reset.\n   */\n  formResetCallback() {\n    this.value = '';\n    this.checked = false;\n    this.indeterminate = false;\n    this.internals.setValidity({});\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Callback to update the switch's disabled state when the form's disabled state changes.\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.value);\n    this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n  };\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes[this.background] = true;\n    classes['indeterminate'] = this.indeterminate;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  /**\n   * Assigns color based on status and background theme.\n   * @param defaultColor Default color.\n   */\n  @Watch('background')\n  @Watch('iconColor')\n  assignColor(type: 'icon' | 'label' | 'message') {\n    if (this.disabled) return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';\n\n    const statusColors = {\n      success: {\n        icon: 'success-dark',\n        label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkBackground() ? 'success-base' : 'success-dark',\n      },\n      error: {\n        icon: 'error-dark',\n        label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkBackground() ? 'error-base' : 'error-dark',\n      },\n      default: {\n        icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n        label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',\n        message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',\n      },\n    };\n\n    return statusColors[this.status][type];\n  }\n\n  /**\n   * Retrieves icon element based on checkbox state.\n   */\n  getIcon() {\n    const iconName = this.indeterminate ? 'minus' : 'check';\n    const iconColor = this.assignColor('icon');\n    const iconSize = this.size === 'large' ? 20 : 'micro';\n\n    return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label class=\"label\" weight='bold' size={this.size === 'large' ? 'medium' : 'xsmall'} color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n            </div>\n            <cura-label color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <div class={'checkbox'} tabIndex={this.ontabindex}>\n            <input\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              required={this.required}\n              checked={this.checked}\n              indeterminate={this.indeterminate}\n            />\n            {this.getIcon()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js

@@ -1,17 +1,17 @@
 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;
+    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;
 };
 const renderCuraCheckbox = (label, message, args) => {
-  const block = `<cura-checkbox${label ? `
+    const block = `<cura-checkbox${label ? `
   label="${label}"` : ''}${args.size && args.size !== 'medium' ? `
   size="${args.size}"` : ''}${args.status && args.status !== 'default' ? `
   status="${args.status}"` : ''}${args.position && args.position !== 'left' ? `
@@ -28,169 +28,169 @@ const renderCuraCheckbox = (label, message, args) => {
   ${message}` : ''}
 </cura-checkbox>
 `;
-  return `${block}`;
+    return `${block}`;
 };
 export default {
-  title: 'Componentes/Forms/Checkbox',
-  tags: ['autodocs'],
-  render: (_a) => {
-    var { label, message } = _a, args = __rest(_a, ["label", "message"]);
-    return renderCuraCheckbox(label, message, args);
-  },
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Título do checkbox.',
-      name: 'label',
-      table: {
-        category: 'Properties',
-      },
+    title: 'Componentes/Forms/Checkbox',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var { label, message } = _a, args = __rest(_a, ["label", "message"]);
+        return renderCuraCheckbox(label, message, args);
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Título do checkbox.',
+            name: 'label',
+            table: {
+                category: 'Properties',
+            },
+        },
+        message: {
+            control: 'text',
+            name: 'Info text',
+            description: 'Texto adicional de ajuda ou mensagem de erro/sucesso.',
+            table: {
+                category: 'Slots',
+            },
+        },
+        checked: {
+            control: 'boolean',
+            description: 'Define o checkbox como marcado.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Define a marcação do checkbox como obrigatória e insere o símbolo `*` no título.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false }
+            },
+        },
+        status: {
+            control: { type: 'select' },
+            options: ['default', 'success', 'error'],
+            description: 'Define o estado do checkbox para <b>default</b>, <b>success</b> ou <b>error</b>.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'default' },
+            },
+        },
+        indeterminate: {
+            control: 'boolean',
+            description: 'Define se o checkbox está em estado indeterminado de seleção.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Define se o checkbox está desabilitado.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false },
+            },
+        },
+        ontabindex: {
+            control: 'number',
+            description: 'Índice de tabulação do checkbox.',
+            table: {
+                category: 'Properties',
+            },
+            name: 'ontabindex'
+        },
+        position: {
+            control: { type: 'inline-radio' },
+            options: ['left', 'right'],
+            description: 'Posição do box em relação ao controle.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'left' }
+            },
+            name: 'position'
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['small', 'medium', 'large'],
+            description: 'Tamanhos do checkbox: <b>small</b>, <b>medium</b> ou <b>large</b>.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'medium' }
+            }
+        },
+        value: {
+            control: 'text',
+            description: 'Valor do checkbox.',
+            table: {
+                category: 'Properties',
+            },
+        },
+        name: {
+            control: 'text',
+            description: 'Nome do checkbox.',
+            table: {
+                category: 'Properties',
+            },
+        },
+        background: {
+            control: { type: 'inline-radio' },
+            options: ['dark', 'light'],
+            description: 'Define o tipo de fundo onde o checkbox está inserido com as opções <b>dark</b> ou <b>light</b>.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'light' }
+            }
+        },
+        iconColor: {
+            control: { type: 'inline-radio' },
+            options: ['dark', 'light'],
+            description: 'Define a cor do ícone para o estado `checked` com os valores <b>dark</b> ou <b>light</b>.',
+            name: 'icon-color',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'dark' }
+            },
+        },
+        color: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'accent'],
+            description: 'Define a cor do checkbox. As opções são as cores principais do tema (sem profundidade).',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'accent' },
+            },
+        },
+        onchange: {
+            control: 'none',
+            description: 'Emite evento via Listener quando o estado do Checkbox é alterado.`{ checked: boolean, indeterminate: boolean, value: string }`',
+            table: {
+                category: 'Event',
+                defaultValue: { summary: '' },
+            },
+        },
     },
-    message: {
-      control: 'text',
-      name: 'Info text',
-      description: 'Texto adicional de ajuda ou mensagem de erro/sucesso.',
-      table: {
-        category: 'Slots',
-      },
-    },
-    checked: {
-      control: 'boolean',
-      description: 'Define o checkbox como marcado.',
-      table: {
-        category: 'State',
-        defaultValue: { summary: false },
-      },
-    },
-    required: {
-      control: 'boolean',
-      description: 'Define a marcação do checkbox como obrigatória e insere o símbolo `*` no título.',
-      table: {
-        category: 'State',
-        defaultValue: { summary: false }
-      },
-    },
-    status: {
-      control: { type: 'select' },
-      options: ['default', 'success', 'error'],
-      description: 'Define o estado do checkbox para <b>default</b>, <b>success</b> ou <b>error</b>.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'default' },
-      },
-    },
-    indeterminate: {
-      control: 'boolean',
-      description: 'Define se o checkbox está em estado indeterminado de seleção.',
-      table: {
-        category: 'State',
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Define se o checkbox está desabilitado.',
-      table: {
-        category: 'State',
-        defaultValue: { summary: false },
-      },
-    },
-    ontabindex: {
-      control: 'number',
-      description: 'Índice de tabulação do checkbox.',
-      table: {
-        category: 'Properties',
-      },
-      name: 'ontabindex'
-    },
-    position: {
-      control: { type: 'inline-radio' },
-      options: ['left', 'right'],
-      description: 'Posição do box em relação ao controle.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'left' }
-      },
-      name: 'position'
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-      description: 'Tamanhos do checkbox: <b>small</b>, <b>medium</b> ou <b>large</b>.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'medium' }
-      }
-    },
-    value: {
-      control: 'text',
-      description: 'Valor do checkbox.',
-      table: {
-        category: 'Properties',
-      },
-    },
-    name: {
-      control: 'text',
-      description: 'Nome do checkbox.',
-      table: {
-        category: 'Properties',
-      },
-    },
-    background: {
-      control: { type: 'inline-radio' },
-      options: ['dark', 'light'],
-      description: 'Define o tipo de fundo onde o checkbox está inserido com as opções <b>dark</b> ou <b>light</b>.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'light' }
-      }
-    },
-    iconColor: {
-      control: { type: 'inline-radio' },
-      options: ['dark', 'light'],
-      description: 'Define a cor do ícone para o estado `checked` com os valores <b>dark</b> ou <b>light</b>.',
-      name: 'icon-color',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'dark' }
-      },
-    },
-    color: {
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
-      description: 'Define a cor do checkbox. As opções são as cores principais do tema (sem profundidade).',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'accent' },
-      },
-    },
-    onchange: {
-      control: 'none',
-      description: 'Emite evento via Listener quando o estado do Checkbox é alterado.`{ checked: boolean, indeterminate: boolean, value: string }`',
-      table: {
-        category: 'Event',
-        defaultValue: { summary: '' },
-      },
-    },
-  },
 };
 export const Checkbox = {
-  args: {
-    label: 'Checkbox',
-    size: 'medium',
-    status: 'default',
-    color: 'accent',
-    position: 'left',
-    background: 'light',
-    iconColor: 'dark',
-    value: '',
-    name: '',
-    ontabindex: 0,
-    message: 'Helper text',
-    checked: false,
-    required: false,
-    indeterminate: false,
-    disabled: false,
-  },
+    args: {
+        label: 'Checkbox',
+        size: 'medium',
+        status: 'default',
+        color: 'accent',
+        position: 'left',
+        background: 'light',
+        iconColor: 'dark',
+        value: '',
+        name: '',
+        ontabindex: 0,
+        message: 'Helper text',
+        checked: false,
+        required: false,
+        indeterminate: false,
+        disabled: false,
+    },
 };
 //# sourceMappingURL=cura-checkbox.stories.js.map

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraCheckbox = (label: string, message: string, args: any) => {\n  const block = `<cura-checkbox${label ? `\n  label=\"${label}\"` : ''}${args.size && args.size !== 'medium' ? `\n  size=\"${args.size}\"` : ''}${args.status && args.status !== 'default' ? `\n  status=\"${args.status}\"` : ''}${args.position && args.position !== 'left' ? `\n  position=\"${args.position}\"` : ''}${args.color && args.color !== 'accent' ? `\n  color=\"${args.color}\"` : ''}${args.background && args.background !== 'light' ? `\n  background=\"${args.background}\"` : ''}${args.iconColor && args.iconColor !== 'dark' ? `\n  icon-color=\"${args.iconColor}\"` : ''}${args.value ? `\n  value=\"${args.value}\"` : ''}${args.ontabindex ? `\n  ontabindex=\"${args.ontabindex}\"` : ''}${args.checked ? `\n  checked=\"${args.checked}\"` : ''}${args.required ? `\n  required=\"${args.required}\"` : ''}${args.indeterminate ? `\n  indeterminate=\"${args.indeterminate}\"` : ''}${args.disabled ? `\n  disabled=\"${args.disabled}\"` : ''}>${message ? `\n  ${message}` : ''}\n</cura-checkbox>\n`;\n  return `${block}`;\n}\n\nexport default {\n  title: 'Componentes/Forms/Checkbox',\n  tags: ['autodocs'],\n  render: ({ label, message, ...args }) => {\n    return renderCuraCheckbox(label, message, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Título do checkbox.',\n      name: 'label',\n      table: {\n        category: 'Properties',\n      },\n    },\n    message: {\n      control: 'text',\n      name: 'Info text',\n      description: 'Texto adicional de ajuda ou mensagem de erro/sucesso.',\n      table: {\n        category: 'Slots',\n      },\n    },\n    checked: {\n      control: 'boolean',\n      description: 'Define o checkbox como marcado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    required: {\n      control: 'boolean',\n      description: 'Define a marcação do checkbox como obrigatória e insere o símbolo `*` no título.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false }\n      },\n    },\n    status: {\n      control: { type: 'select' },\n      options: ['default', 'success', 'error'],\n      description: 'Define o estado do checkbox para <b>default</b>, <b>success</b> ou <b>error</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    indeterminate: {\n      control: 'boolean',\n      description: 'Define se o checkbox está em estado indeterminado de seleção.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Define se o checkbox está desabilitado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    ontabindex: {\n      control: 'number',\n      description: 'Índice de tabulação do checkbox.',\n      table: {\n        category: 'Properties',\n      },\n      name: 'ontabindex'\n    },\n    position: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do box em relação ao controle.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left' }\n      },\n      name: 'position'\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanhos do checkbox: <b>small</b>, <b>medium</b> ou <b>large</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium' }\n      }\n    },\n    value: {\n      control: 'text',\n      description: 'Valor do checkbox.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    name: {\n      control: 'text',\n      description: 'Nome do checkbox.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    background: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define o tipo de fundo onde o checkbox está inserido com as opções <b>dark</b> ou <b>light</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' }\n      }\n    },\n    iconColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define a cor do ícone para o estado `checked` com os valores <b>dark</b> ou <b>light</b>.',\n      name: 'icon-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark' }\n      },\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Define a cor do checkbox. As opções são as cores principais do tema (sem profundidade).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent' },\n      },\n    },\n    onchange: {\n      control: 'none',\n      description: 'Emite evento via Listener quando o estado do Checkbox é alterado.`{ checked: boolean, indeterminate: boolean, value: string }`',\n      table: {\n        category: 'Event',\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n};\n\nexport const Checkbox = {\n  args: {\n    label: 'Checkbox',\n    size: 'medium',\n    status: 'default',\n    color: 'accent',\n    position: 'left',\n    background: 'light',\n    iconColor: 'dark',\n    value: '',\n    name: '',\n    ontabindex: 0,\n    message: 'Helper text',\n    checked: false,\n    required: false,\n    indeterminate: false,\n    disabled: false,\n  },\n};\n"]}
+{"version":3,"file":"cura-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraCheckbox = (label: string, message: string, args: any) => {\n  const block = `<cura-checkbox${label ? `\n  label=\"${label}\"` : ''}${args.size && args.size !== 'medium' ? `\n  size=\"${args.size}\"` : ''}${args.status && args.status !== 'default' ? `\n  status=\"${args.status}\"` : ''}${args.position && args.position !== 'left' ? `\n  position=\"${args.position}\"` : ''}${args.color && args.color !== 'accent' ? `\n  color=\"${args.color}\"` : ''}${args.background && args.background !== 'light' ? `\n  background=\"${args.background}\"` : ''}${args.iconColor && args.iconColor !== 'dark' ? `\n  icon-color=\"${args.iconColor}\"` : ''}${args.value ? `\n  value=\"${args.value}\"` : ''}${args.ontabindex ? `\n  ontabindex=\"${args.ontabindex}\"` : ''}${args.checked ? `\n  checked=\"${args.checked}\"` : ''}${args.required ? `\n  required=\"${args.required}\"` : ''}${args.indeterminate ? `\n  indeterminate=\"${args.indeterminate}\"` : ''}${args.disabled ? `\n  disabled=\"${args.disabled}\"` : ''}>${message ? `\n  ${message}` : ''}\n</cura-checkbox>\n`;\n  return `${block}`;\n}\n\nexport default {\n  title: 'Componentes/Forms/Checkbox',\n  tags: ['autodocs'],\n  render: ({ label, message, ...args }) => {\n    return renderCuraCheckbox(label, message, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Título do checkbox.',\n      name: 'label',\n      table: {\n        category: 'Properties',\n      },\n    },\n    message: {\n      control: 'text',\n      name: 'Info text',\n      description: 'Texto adicional de ajuda ou mensagem de erro/sucesso.',\n      table: {\n        category: 'Slots',\n      },\n    },\n    checked: {\n      control: 'boolean',\n      description: 'Define o checkbox como marcado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    required: {\n      control: 'boolean',\n      description: 'Define a marcação do checkbox como obrigatória e insere o símbolo `*` no título.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false }\n      },\n    },\n    status: {\n      control: { type: 'select' },\n      options: ['default', 'success', 'error'],\n      description: 'Define o estado do checkbox para <b>default</b>, <b>success</b> ou <b>error</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    indeterminate: {\n      control: 'boolean',\n      description: 'Define se o checkbox está em estado indeterminado de seleção.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Define se o checkbox está desabilitado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    ontabindex: {\n      control: 'number',\n      description: 'Índice de tabulação do checkbox.',\n      table: {\n        category: 'Properties',\n      },\n      name: 'ontabindex'\n    },\n    position: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do box em relação ao controle.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left' }\n      },\n      name: 'position'\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanhos do checkbox: <b>small</b>, <b>medium</b> ou <b>large</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium' }\n      }\n    },\n    value: {\n      control: 'text',\n      description: 'Valor do checkbox.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    name: {\n      control: 'text',\n      description: 'Nome do checkbox.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    background: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define o tipo de fundo onde o checkbox está inserido com as opções <b>dark</b> ou <b>light</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' }\n      }\n    },\n    iconColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define a cor do ícone para o estado `checked` com os valores <b>dark</b> ou <b>light</b>.',\n      name: 'icon-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark' }\n      },\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent' ],\n      description: 'Define a cor do checkbox. As opções são as cores principais do tema (sem profundidade).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent' },\n      },\n    },\n    onchange: {\n      control: 'none',\n      description: 'Emite evento via Listener quando o estado do Checkbox é alterado.`{ checked: boolean, indeterminate: boolean, value: string }`',\n      table: {\n        category: 'Event',\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n};\n\nexport const Checkbox = {\n  args: {\n    label: 'Checkbox',\n    size: 'medium',\n    status: 'default',\n    color: 'accent',\n    position: 'left',\n    background: 'light',\n    iconColor: 'dark',\n    value: '',\n    name: '',\n    ontabindex: 0,\n    message: 'Helper text',\n    checked: false,\n    required: false,\n    indeterminate: false,\n    disabled: false,\n  },\n};\n"]}

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.css

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+ul {
+  list-style: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 4px;
+  flex-direction: row;
+  background-color: var(--neutral-purewhite);
+  border-bottom: 1px solid var(--neutral-light);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+li.hovered {
+  background-color: var(--neutral-white);
+}
+li cura-heading {
+  width: 100%;
+  margin-block: 0px;
+}
+li ::slotted(div[slot=image]) {
+  min-width: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+li ::slotted(div[slot=action]) {
+  display: flex;
+  justify-content: end;
+}
+li.selected {
+  background-color: var(--primary-lighter);
+}
+li:hover {
+  background-color: var(--neutral-white);
+}