@rededor/cura 0.5.1 → 0.5.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-radio.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.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-radio',\n  styleUrl: 'cura-radio.scss',\n  shadow: true,\n})\nexport class CuraRadio {\n  /**\n   * Reflects the checked state of the radio button.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Status of the radio button.\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 radio button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n * Reflects the required state of the radio button.\n */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the radio button.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Specifies the tabindex of the radio button.\n   */\n  @Prop({ reflect: true }) ontabindex: number;\n  /**\n   * Position of the label relative to the radio button.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n  /**\n   * Value associated with the radio button.\n   */\n  @Prop({ reflect: true }) value: string = '';\n  /**\n   * Name attribute of the radio button.\n   */\n  @Prop({ reflect: true }) name: string = '';\n  /**\n   * Background theme of the radio button.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Size of the radio button.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Color theme of the radio button.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {}\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string, checked: boolean }>;\n\n  sizes = {\n    \"large\": { size: 20 },\n    \"medium\": { size: 14 },\n    \"small\": { size: 10 },\n  };\n\n\n  isDarkbackground = () => this.background === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles['--size-after'] = `${this.sizes[this.size].size}px`\n    this.styles['--size'] = `${formsSizes[this.size].size}px`\n    this.styles['--gap'] = `${formsSizes[this.size].gap}px`\n  }\n\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\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-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\n    ];\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background))\n  }\n\n  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.onchange.emit({ value: this.value, checked: this.checked });\n  };\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  @Watch('background')\n  assignColor(type: 'label' | 'message',) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n      },\n      error: {\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n      },\n      default: {\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  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          <input\n            type=\"radio\"\n            class={`radio ${this.size.toLocaleLowerCase()}`}\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            tabIndex={this.ontabindex}\n            disabled={this.disabled}\n            checked={this.checked}\n            onClick={this.handleClick}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,175 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+export default {
+  title: 'Componentes/Forms/Radio',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { message } = _a, args = __rest(_a, ["message"]);
+    const block = `<cura-radio${args.checked ? `
+  checked` : ''}${args.disabled ? `
+  disabled` : ''}${args.required ? `
+  required` : ''}${args.size && args.size !== 'medium' ? `
+  size="${args.size}"` : ''}${args.position && args.position !== 'left' ? `
+  position="${args.position}"` : ''}${args.ontabindex !== 0 ? `
+  ontabindex="${args.ontabindex}"` : ''}${args.background && args.background !== 'light' ? `
+  background="${args.background}"` : ''}${args.color && args.color !== 'accent' ? `
+  color="${args.color}"` : ''}${args.value ? `
+  value="${args.value}"` : ''}${args.name ? `
+  name="${args.name}"` : ''}${args.label ? `
+  label="${args.label}"` : ''}${args.status && args.status !== 'default' ? `
+  status="${args.status}"` : ''}>
+  ${message ? `
+    ${message}` : ''}
+</cura-radio>
+`;
+    return block;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto da label do radio.',
+      table: {
+        category: 'Properties',
+      },
+    },
+    message: {
+      control: 'text',
+      description: 'Conteúdo de ajuda ou mensagem.',
+      name: 'content',
+      table: {
+        category: 'Slot',
+      },
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Define se o radio está checado.',
+      table: {
+        category: 'States',
+        defaultValue: { summary: false }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Desabilita o radio.',
+      table: {
+        category: 'States',
+        defaultValue: { summary: false }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Torna o radio obrigatório.',
+      table: {
+        category: 'States',
+        defaultValue: { summary: false }
+      }
+    },
+    ontabindex: {
+      control: 'number',
+      description: 'Define o tabIndex do radio.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 0 }
+      },
+      name: 'ontabindex'
+    },
+    position: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right'],
+      description: 'Posição do box em relação ao label.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'position'
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'Tamanho do radio.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    background: {
+      control: { type: 'inline-radio' },
+      options: ['dark', 'light'],
+      description: 'Tema do radio.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'light' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor do radio.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent' }
+      }
+    },
+    value: {
+      control: 'text',
+      description: 'Valor associado ao radio.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '' }
+      }
+    },
+    name: {
+      control: 'text',
+      description: 'Nome do grupo de radio buttons.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '' }
+      }
+    },
+    status: {
+      control: { type: 'select' },
+      options: ['default', 'success', 'error'],
+      description: 'Status do checkbox.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'default' },
+      },
+    },
+    onchange: {
+      control: 'none',
+      description: 'Este evento via Listener quando o estado do radio é alterado.`{ checked: boolean, value: string }`',
+      table: {
+        category: 'Event',
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+};
+export const CuraRadioStory = {
+  args: {
+    label: 'Radio',
+    message: 'Info text',
+    checked: false,
+    required: false,
+    disabled: false,
+    size: 'medium',
+    position: 'left',
+    background: 'light',
+    status: 'default',
+    color: 'accent',
+    value: '',
+    name: 'radio-group',
+    ontabindex: 0,
+  },
+};
+//# sourceMappingURL=cura-radio.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-radio.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Componentes/Forms/Radio',\n  tags: ['autodocs'],\n  render: ({ message, ...args }) => {\n    const block = `<cura-radio${args.checked ? `\n  checked` : ''}${args.disabled ? `\n  disabled` : ''}${args.required ? `\n  required` : ''}${args.size && args.size !== 'medium' ? `\n  size=\"${args.size}\"` : ''}${args.position && args.position !== 'left' ? `\n  position=\"${args.position}\"` : ''}${args.ontabindex !== 0 ? `\n  ontabindex=\"${args.ontabindex}\"` : ''}${args.background && args.background !== 'light' ? `\n  background=\"${args.background}\"` : ''}${args.color && args.color !== 'accent' ? `\n  color=\"${args.color}\"` : ''}${args.value ? `\n  value=\"${args.value}\"` : ''}${args.name ? `\n  name=\"${args.name}\"` : ''}${args.label ? `\n  label=\"${args.label}\"` : ''}${args.status && args.status !== 'default' ? `\n  status=\"${args.status}\"` : ''}>\n  ${message ? `\n    ${message}` : ''}\n</cura-radio>\n`;\n    return block;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto da label do radio.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    message: {\n      control: 'text',\n      description: 'Conteúdo de ajuda ou mensagem.',\n      name: 'content',\n      table: {\n        category: 'Slot',\n      },\n    },\n    checked: {\n      control: 'boolean',\n      description: 'Define se o radio está checado.',\n      table: {\n        category: 'States',\n        defaultValue: { summary: false }\n      }\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Desabilita o radio.',\n      table: {\n        category: 'States',\n        defaultValue: { summary: false }\n      }\n    },\n    required: {\n      control: 'boolean',\n      description: 'Torna o radio obrigatório.',\n      table: {\n        category: 'States',\n        defaultValue: { summary: false }\n      }\n    },\n    ontabindex: {\n      control: 'number',\n      description: 'Define o tabIndex do radio.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 0 }\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 label.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left' }\n      },\n      name: 'position'\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanho do radio.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium' }\n      }\n    },\n    background: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Tema do radio.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' }\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor do radio.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent' }\n      }\n    },\n    value: {\n      control: 'text',\n      description: 'Valor associado ao radio.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '' }\n      }\n    },\n    name: {\n      control: 'text',\n      description: 'Nome do grupo de radio buttons.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '' }\n      }\n    },\n    status: {\n      control: { type: 'select' },\n      options: ['default', 'success', 'error'],\n      description: 'Status do checkbox.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    onchange: {\n      control: 'none',\n      description: 'Este evento via Listener quando o estado do radio é alterado.`{ checked: boolean, value: string }`',\n      table: {\n        category: 'Event',\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n};\n\nexport const CuraRadioStory = {\n  args: {\n    label: 'Radio',\n    message: 'Info text',\n    checked: false,\n    required: false,\n    disabled: false,\n    size: 'medium',\n    position: 'left',\n    background: 'light',\n    status: 'default',\n    color: 'accent',\n    value: '',\n    name: 'radio-group',\n    ontabindex: 0,\n  },\n};\n"]}

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

@@ -0,0 +1,100 @@
+@charset "UTF-8";
+:host {
+  display: block;
+  width: fit-content;
+  box-sizing: border-box;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  gap: var(--gap);
+}
+
+.position.container {
+  flex-direction: row;
+}
+.position .label {
+  text-align: right;
+}
+.position .message {
+  text-align: right;
+}
+
+.control {
+  width: fit-content;
+}
+
+/* Estilos para o controle de switch */
+.track {
+  background: var(--neutral-base-black-40);
+  border-radius: 16px;
+  transition: background-color 0.3s;
+  align-items: flex-start;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--size-track);
+  height: var(--size);
+}
+
+.thumb {
+  background-color: var(--neutral-white-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 50%;
+  position: absolute;
+  transition: transform 0.3s, outline 0.3s;
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  width: var(--size);
+  height: var(--size);
+}
+
+/* Estado "checked" */
+.checked .thumb {
+  border-color: var(--color-dark-light);
+  background: var(--color-lighter);
+  transform: translateX(var(--size));
+}
+
+.checked .thumb:hover {
+  background: var(--neutral-white-purewhite) !important;
+}
+
+.checked .track {
+  background: var(--color-base-lighter-50);
+}
+
+/* Estado "disabled" */
+.disabled .track {
+  background: var(--primary-base-neutral-black-20);
+}
+
+.disabled .thumb {
+  background: var(--neutral-lighter) !important;
+  border-color: var(--primary-dark-neutral-base);
+  cursor: not-allowed;
+}
+
+.disabled.checked .track {
+  background: var(--primary-base-neutral-black-20);
+}
+
+.disabled .thumb:hover {
+  background: var(--neutral-lighter) !important;
+  border-color: var(--primary-dark-neutral-base) !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);
+}
+
+/* Estado hover para não disabled */
+:not(.disabled) .thumb:focus {
+  border-color: var(--info-base) !important;
+  z-index: 1;
+}

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

@@ -0,0 +1,266 @@
+import { h, Host } from '@stencil/core';
+import { formsSizes } from '../cura-forms.definitions';
+export class CuraSwitch {
+  constructor() {
+    this.sizes = {
+      "large": { size: 64 },
+      "medium": { size: 48 },
+      "small": { size: 40 },
+    };
+    this.isDarkbackground = () => this.background === 'dark';
+    this.toggleSwitch = () => {
+      if (this.disabled)
+        return null;
+      this.checked = !this.checked;
+      this.onchange.emit({ checked: this.checked });
+    };
+    this.checked = false;
+    this.disabled = false;
+    this.label = '';
+    this.ontabindex = 0;
+    this.position = 'left';
+    this.size = 'medium';
+    this.background = 'light';
+    this.color = 'accent';
+    this.styles = {};
+  }
+  sizeHandler() {
+    this.styles['--size-track'] = `${this.sizes[this.size].size}px`;
+    this.styles['--size'] = `${formsSizes[this.size].size}px`;
+    this.styles['--gap'] = `${formsSizes[this.size].gap}px`;
+  }
+  setColors() {
+    const colors = [
+      { name: '--info-base', background: 'info-base' },
+      { name: '--neutral-medium', background: 'neutral-medium' },
+      { name: '--color-lighter', background: `${this.color}-lighter` },
+      { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },
+      { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },
+      { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },
+      { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },
+      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+      { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },
+      { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },
+      { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },
+      { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },
+      { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },
+    ];
+    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color === null || color === void 0 ? void 0 : color.opacity));
+  }
+  connectedCallback() {
+    this.sizeHandler();
+    this.setColors();
+  }
+  assignColor(colorDark, colorLight) {
+    if (this.disabled)
+      return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';
+    return this.isDarkbackground() ? colorDark : colorLight;
+  }
+  getClasses() {
+    const classes = {};
+    classes['container'] = true;
+    classes['checked'] = this.checked;
+    classes['disabled'] = this.disabled;
+    classes['position'] = this.position === 'right';
+    return classes;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "info" }, h("cura-label", { class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", null))), h("div", { onClick: this.toggleSwitch, class: "control" }, h("div", { class: `track ${this.size.toLowerCase()}` }, h("div", { class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+  }
+  static get is() { return "cura-switch"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-switch.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-switch.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the switch is checked or not."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the switch is disabled or not."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label text to display next to the switch."
+        },
+        "attribute": "label",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "ontabindex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tab index for the switch element.\nReflects as an HTML attribute."
+        },
+        "attribute": "ontabindex",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"right\"",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of the label relative to the switch.\nCan be 'left' or 'right'."
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "'left'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the switch.\nCan be 'small', 'medium', or 'large'."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
+      },
+      "background": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Background style of the switch.\nCan be 'dark' or 'light'."
+        },
+        "attribute": "background",
+        "reflect": false,
+        "defaultValue": "'light'"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accent color of the switch."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'accent'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onchange",
+        "name": "onchange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ checked: boolean }",
+          "resolved": "{ checked: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "size",
+        "methodName": "sizeHandler"
+      }, {
+        "propName": "color",
+        "methodName": "setColors"
+      }, {
+        "propName": "background",
+        "methodName": "setColors"
+      }];
+  }
+}
+//# sourceMappingURL=cura-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-switch',\n  styleUrl: 'cura-switch.scss',\n  shadow: true,\n})\n\nexport class CuraSwitch {\n  /**\n   * Indicates whether the switch is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Indicates whether the switch is disabled or not.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * The label text to display next to the switch.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Tab index for the switch element.\n   * Reflects as an HTML attribute.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the switch.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n  /**\n   * Size of the switch.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background style of the switch.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Accent color of the switch.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {};\n\n  @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n  sizes = {\n    \"large\": { size: 64 },\n    \"medium\": { size: 48 },\n    \"small\": { size: 40 },\n  };\n\n\n  isDarkbackground = () => this.background === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles['--size-track'] = `${this.sizes[this.size].size}px`\n    this.styles['--size'] = `${formsSizes[this.size].size}px`\n    this.styles['--gap'] = `${formsSizes[this.size].gap}px`\n  }\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--neutral-medium', background: 'neutral-medium' },\n      { name: '--color-lighter', background: `${this.color}-lighter` },\n      { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },\n      { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },\n      { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },\n      { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },\n      { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },\n      { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },\n      { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },\n      { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },\n    ];\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity));\n  }\n\n  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  toggleSwitch = () => {\n    if (this.disabled) return null;\n\n    this.checked = !this.checked;\n    this.onchange.emit({ checked: this.checked })\n  };\n\n  assignColor(colorDark: string, colorLight: string) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';\n    return this.isDarkbackground() ? colorDark : colorLight\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n\n    return classes;\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"info\">\n            <cura-label class=\"label\"\n              size={this.size === 'large' ? 'medium' : 'xsmall'}\n              lineHeight=\"125%\"\n              color={this.assignColor('neutral-white', 'neutral-black')}>\n              {this.label}\n            </cura-label>\n            <cura-label\n              color={this.assignColor('primary-lighter', 'neutral-dark')}\n              size=\"xsmall\"\n              class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n\n          <div onClick={this.toggleSwitch} class=\"control\">\n            <div class={`track ${this.size.toLowerCase()}`}>\n              <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}