npm - @sula-tech/webcomponents - Versions diffs - 0.1.1 → 0.3.0 - Mend

@sula-tech/webcomponents 0.1.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (131) hide show

package/dist/collection/components/sula-badge/sula-badge.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-badge.stories.js","sourceRoot":"","sources":["../../../src/components/sula-badge/sula-badge.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from './model/sula-badge.model';\n\nexport default {\n title: 'Components/sula-badge',\n tags: ['autodocs'],\n argTypes: {\n text: {\n control: 'text',\n defaultValue: 'Badge',\n description: 'Badge text when is text type',\n type: {\n required: false,\n },\n },\n icon: {\n control: 'text',\n defaultValue: 'ph ph-bell',\n description: 'Badge icon when is Icon type',\n type: {\n required: false,\n },\n },\n status: {\n control: { type: 'select' },\n options: Object.values(SulaBadgeStatus),\n defaultValue: SulaBadgeStatus.Default,\n description: 'Badge status',\n type: {\n required: false,\n },\n },\n size: {\n control: { type: 'select' },\n options: Object.values(SulaBadgeSize),\n defaultValue: SulaBadgeSize.Medium,\n description: 'Badge size',\n type: {\n required: false,\n },\n },\n type: {\n control: { type: 'select' },\n options: Object.values(SulaBadgeType),\n defaultValue: SulaBadgeType.Text,\n description: 'Badge type',\n type: {\n required: false,\n },\n },\n },\n};\n\nconst Template = args => {\n const container = document.createElement('div');\n container.style.margin = '20px';\n\n const el = document.createElement('sula-badge');\n\n if (args.text) el.setAttribute('text', args.text);\n if (args.icon) el.setAttribute('icon', args.icon);\n el.setAttribute('status', args.status);\n el.setAttribute('size', args.size);\n el.setAttribute('type', args.type);\n\n container.appendChild(el);\n\n return container;\n};\n\nconst TemplateWithAvatar = args => {\n const container = document.createElement('div');\n container.style.margin = '20px';\n\n const el = document.createElement('sula-badge');\n\n if (args.text) el.setAttribute('text', args.text);\n if (args.icon) el.setAttribute('icon', args.icon);\n el.setAttribute('status', args.status);\n el.setAttribute('size', args.size);\n el.setAttribute('type', args.type);\n\n // Adiciona avatar como conteúdo do slot\n const avatar = document.createElement('sula-avatar');\n avatar.setAttribute('image-url', 'https://i.pravatar.cc/300');\n avatar.setAttribute('size', 'medium');\n el.appendChild(avatar);\n\n container.appendChild(el);\n\n return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n text: 'Badge',\n icon: '',\n status: SulaBadgeStatus.Default,\n size: SulaBadgeSize.Medium,\n type: SulaBadgeType.Text,\n};\n\nexport const DotBadge = Template.bind({});\nDotBadge.args = {\n text: '',\n icon: '',\n status: SulaBadgeStatus.Error,\n size: SulaBadgeSize.Small,\n type: SulaBadgeType.Dot,\n};\n\nexport const IconBadge = Template.bind({});\nIconBadge.args = {\n text: '',\n icon: 'ph ph-bell',\n status: SulaBadgeStatus.Info,\n size: SulaBadgeSize.Medium,\n type: SulaBadgeType.Icon,\n};\n\nexport const SuccessBadge = Template.bind({});\nSuccessBadge.args = {\n text: 'OK',\n icon: '',\n status: SulaBadgeStatus.Success,\n size: SulaBadgeSize.Medium,\n type: SulaBadgeType.Text,\n};\n\nexport const WarningBadge = Template.bind({});\nWarningBadge.args = {\n text: '!',\n icon: '',\n status: SulaBadgeStatus.Warning,\n size: SulaBadgeSize.Medium,\n type: SulaBadgeType.Text,\n};\n\nexport const LargeBadge = Template.bind({});\nLargeBadge.args = {\n text: '99+',\n icon: '',\n status: SulaBadgeStatus.Default,\n size: SulaBadgeSize.Large,\n type: SulaBadgeType.Text,\n};\n\nexport const DisplayBadge = Template.bind({});\nDisplayBadge.args = {\n text: '999',\n icon: '',\n status: SulaBadgeStatus.Default,\n size: SulaBadgeSize.Display,\n type: SulaBadgeType.Text,\n};\n\nexport const BadgeWithAvatar = TemplateWithAvatar.bind({});\nBadgeWithAvatar.args = {\n text: '',\n icon: '',\n status: SulaBadgeStatus.Error,\n size: SulaBadgeSize.Small,\n type: SulaBadgeType.Dot,\n};\n"]}

package/dist/collection/components/sula-button/sula-button.css CHANGED Viewed

	@@ -1 +1 @@
1	- ,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/! tailwindcss v3.4.17 \| MIT License \| https://tailwindcss.com/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.outline{outline-style:solid}:host{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6;display:block}button:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-feedback-informational)!important;outline:none!important}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.flex{display:flex}.h-24{height:1.5rem}.h-\[40px\]{height:40px}.h-\[56px\]{height:56px}.w-24{width:1.5rem}.min-w-\[120px\]{min-width:120px}.min-w-\[40px\]{min-width:40px}.min-w-\[56px\]{min-width:56px}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-xs{border-radius:.5rem}.rounded-xxl{border-radius:18.75rem}.border{border-width:1px}.border-none{border-style:none}.border-brand-primary{border-color:var(--color-brand-primary)}.border-feedback-error{border-color:var(--color-feedback-error)}.border-negative-negative-1{border-color:var(--color-negative-negative-1)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-feedback-error{background-color:var(--color-feedback-error)}.bg-negative-negative-1{background-color:var(--color-negative-negative-1)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-hover{background-color:var(--color-states-empty-bg-hover)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-16{padding:1rem}.p-8{padding:.5rem}.px-16{padding-left:1rem;padding-right:1rem}.py-4{padding-bottom:.25rem;padding-top:.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.text-brand-primary{color:var(--color-brand-primary)}.text-feedback-error{color:var(--color-feedback-error)}.text-icon-disabled{color:var(--color-icon-disabled)}.text-icon-primary{color:var(--color-icon-primary)}.text-negative-negative-1{color:var(--color-negative-negative-1)}.text-negative-negative-2{color:var(--color-negative-negative-2)}.text-text-disabled{color:var(--color-text-disabled)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:bg-states-danger-hover:hover{background-color:var(--color-states-danger-hover)}.hover\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.hover\:bg-states-negative-hover:hover{background-color:var(--color-states-negative-hover)}.hover\:bg-states-primary-hover:hover{background-color:var(--color-states-primary-hover)}.focus\:bg-states-empty-bg-hover:focus{background-color:var(--color-states-empty-bg-hover)}.active\:bg-states-danger-pressed:active{background-color:var(--color-states-danger-pressed)}.active\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}.active\:bg-states-negative-pressed:active{background-color:var(--color-states-negative-pressed)}.active\:bg-states-primary-pressed:active{background-color:var(--color-states-primary-pressed)}.active\:bg-opacity-85:active{--tw-bg-opacity:0.85}.group:hover .group-hover\:bg-states-empty-bg-hover{background-color:var(--color-states-empty-bg-hover)}
1	+ ,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/! tailwindcss v3.4.17 \| MIT License \| https://tailwindcss.com/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.outline{outline-style:solid}:host{display:block}button:focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.flex{display:flex}.h-24{height:1.5rem}.h-\[40px\]{height:40px}.h-\[56px\]{height:56px}.w-24{width:1.5rem}.min-w-\[120px\]{min-width:120px}.min-w-\[40px\]{min-width:40px}.min-w-\[56px\]{min-width:56px}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-xs{border-radius:.5rem}.rounded-xxl{border-radius:18.75rem}.border{border-width:1px}.border-none{border-style:none}.border-brand-primary{border-color:var(--color-brand-primary)}.border-feedback-error{border-color:var(--color-feedback-error)}.border-negative-negative-1{border-color:var(--color-negative-negative-1)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-feedback-error{background-color:var(--color-feedback-error)}.bg-negative-negative-1{background-color:var(--color-negative-negative-1)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-hover{background-color:var(--color-states-empty-bg-hover)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-16{padding:1rem}.p-8{padding:.5rem}.px-16{padding-left:1rem;padding-right:1rem}.py-4{padding-bottom:.25rem;padding-top:.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.text-brand-primary{color:var(--color-brand-primary)}.text-feedback-error{color:var(--color-feedback-error)}.text-icon-disabled{color:var(--color-icon-disabled)}.text-icon-primary{color:var(--color-icon-primary)}.text-negative-negative-1{color:var(--color-negative-negative-1)}.text-negative-negative-2{color:var(--color-negative-negative-2)}.text-text-disabled{color:var(--color-text-disabled)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:bg-states-danger-hover:hover{background-color:var(--color-states-danger-hover)}.hover\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.hover\:bg-states-negative-hover:hover{background-color:var(--color-states-negative-hover)}.hover\:bg-states-primary-hover:hover{background-color:var(--color-states-primary-hover)}.focus\:bg-states-empty-bg-hover:focus{background-color:var(--color-states-empty-bg-hover)}.active\:bg-states-danger-pressed:active{background-color:var(--color-states-danger-pressed)}.active\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}.active\:bg-states-negative-pressed:active{background-color:var(--color-states-negative-pressed)}.active\:bg-states-primary-pressed:active{background-color:var(--color-states-primary-pressed)}.active\:bg-opacity-85:active{--tw-bg-opacity:0.85}.group:hover .group-hover\:bg-states-empty-bg-hover{background-color:var(--color-states-empty-bg-hover)}

package/dist/collection/components/sula-button/sula-button.js CHANGED Viewed

@@ -127,7 +127,7 @@ export class SulaButton {
         return null;
     }
     render() {
-        return (h(Host, { key: '233f2418cd59dd66982efae8cd9604fb03f16fc2' }, h("button", { key: 'adfdddb83790c5a5f4c9c7a76fe663b892a3f282', id: "button-container", class: this.getBaseButtonClass(), disabled: this.buttonDisabled, onClick: this.handleClick }, this.renderIconContent(), this.renderTextContent(), this.renderArrowIcon())));
+        return (h(Host, { key: 'ea13a693900493e45523edff3350a052d4e62772' }, h("button", { key: 'c3d37cc6fec9348c2dfe8d0b518f0191d460bbe5', id: "button-container", class: this.getBaseButtonClass(), disabled: this.buttonDisabled, onClick: this.handleClick }, this.renderIconContent(), this.renderTextContent(), this.renderArrowIcon())));
     }
     static get is() { return "sula-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-button/sula-button.stories.js CHANGED Viewed

@@ -78,17 +78,22 @@ export default {
     },
 };
 const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
     const el = document.createElement('sula-button');
-    el.text = args.text;
-    el.icon = args.icon;
-    el.appearance = args.appearance;
-    el.type = args.type;
-    el.size = args.size;
-    el.status = args.status;
-    el.loading = args.loading;
-    el.buttonDisabled = args.buttonDisabled;
+    if (args.text)
+        el.setAttribute('text', args.text);
+    if (args.icon)
+        el.setAttribute('icon', args.icon);
+    el.setAttribute('appearance', args.appearance);
+    el.setAttribute('type', args.type);
+    el.setAttribute('size', args.size);
+    el.setAttribute('status', args.status);
+    el.setAttribute('loading', args.loading.toString());
+    el.setAttribute('button-disabled', args.buttonDisabled.toString());
     el.addEventListener('buttonClicked', args.buttonClicked);
-    return el;
+    container.appendChild(el);
+    return container;
 };
 export const Default = Template.bind({});
 Default.args = {
@@ -178,4 +183,26 @@ DisabledButton.args = {
     loading: false,
     buttonDisabled: true,
 };
+export const LoadingButton = Template.bind({});
+LoadingButton.args = {
+    text: 'Loading Button',
+    icon: '',
+    appearance: SulaButtonAppearance.Default,
+    type: SulaButtonType.Text,
+    size: SulaButtonSize.Default,
+    status: SulaButtonStatus.Primary,
+    loading: true,
+    buttonDisabled: false,
+};
+export const IconAndTextButton = Template.bind({});
+IconAndTextButton.args = {
+    text: 'Icon and Text',
+    icon: 'ph ph-house',
+    appearance: SulaButtonAppearance.Default,
+    type: SulaButtonType.Text,
+    size: SulaButtonSize.Default,
+    status: SulaButtonStatus.Primary,
+    loading: false,
+    buttonDisabled: false,
+};
 //# sourceMappingURL=sula-button.stories.js.map

package/dist/collection/components/sula-button/sula-button.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sula-button.stories.js","sourceRoot":"","sources":["../../../src/components/sula-button/sula-button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from './model/sula-button.model';\n\nexport default {\n title: 'Components/sula-button',\n tags: ['autodocs'],\n argTypes: {\n text: {\n control: 'text',\n defaultValue: 'Button Text',\n description: 'Button text when is text type',\n type: {\n required: false,\n },\n },\n icon: {\n control: 'text',\n defaultValue: 'ph ph-house',\n description: 'Button icon when is Icon type',\n type: {\n required: false,\n },\n },\n appearance: {\n control: { type: 'select' },\n options: Object.values(SulaButtonAppearance),\n defaultValue: SulaButtonAppearance.Default,\n description: 'Button appearance',\n type: {\n required: false,\n },\n },\n type: {\n control: { type: 'select' },\n options: Object.values(SulaButtonType),\n defaultValue: SulaButtonType.Text,\n description: 'Button type',\n type: {\n required: false,\n },\n },\n size: {\n control: { type: 'select' },\n options: Object.values(SulaButtonSize),\n defaultValue: SulaButtonSize.Default,\n description: 'Button size',\n type: {\n required: false,\n },\n },\n status: {\n control: { type: 'select' },\n options: Object.values(SulaButtonStatus),\n defaultValue: SulaButtonStatus.Primary,\n description: 'Button status',\n type: {\n required: false,\n },\n },\n loading: {\n control: 'boolean',\n defaultValue: false,\n description: 'Is button loading',\n type: {\n required: false,\n },\n },\n buttonDisabled: {\n control: 'boolean',\n defaultValue: false,\n description: 'Is button disabled',\n type: {\n required: false,\n },\n },\n buttonClicked: {\n action: 'buttonClicked',\n description: 'Evento emitido quando o botão é clicado',\n },\n },\n};\n\nconst Template = args => {\n const el = document.createElement('sula-button');\n\n el.text = args.text;\n el.icon = args.icon;\n el.appearance = args.appearance;\n el.type = args.type;\n el.size = args.size;\n el.status = args.status;\n el.loading = args.loading;\n el.buttonDisabled = args.buttonDisabled;\n\n el.addEventListener('buttonClicked', args.buttonClicked);\n\n return el;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n text: 'Default Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const IconButton = Template.bind({});\nIconButton.args = {\n text: '',\n icon: 'ph ph-house',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Icon,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const TextAppearance = Template.bind({});\nTextAppearance.args = {\n text: 'Text Button',\n icon: '',\n appearance: SulaButtonAppearance.Text,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const SecondaryButton = Template.bind({});\nSecondaryButton.args = {\n text: 'Secondary Button',\n icon: '',\n appearance: SulaButtonAppearance.Secondary,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const LargeButton = Template.bind({});\nLargeButton.args = {\n text: 'Large Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Large,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const DangerButton = Template.bind({});\nDangerButton.args = {\n text: 'Danger Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Danger,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const NegativeButton = Template.bind({});\nNegativeButton.args = {\n text: 'Negative Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Negative,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const DisabledButton = Template.bind({});\nDisabledButton.args = {\n text: 'Disabled Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: true,\n};\n"]}
1	+ {"version":3,"file":"sula-button.stories.js","sourceRoot":"","sources":["../../../src/components/sula-button/sula-button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from './model/sula-button.model';\n\nexport default {\n title: 'Components/sula-button',\n tags: ['autodocs'],\n argTypes: {\n text: {\n control: 'text',\n defaultValue: 'Button Text',\n description: 'Button text when is text type',\n type: {\n required: false,\n },\n },\n icon: {\n control: 'text',\n defaultValue: 'ph ph-house',\n description: 'Button icon when is Icon type',\n type: {\n required: false,\n },\n },\n appearance: {\n control: { type: 'select' },\n options: Object.values(SulaButtonAppearance),\n defaultValue: SulaButtonAppearance.Default,\n description: 'Button appearance',\n type: {\n required: false,\n },\n },\n type: {\n control: { type: 'select' },\n options: Object.values(SulaButtonType),\n defaultValue: SulaButtonType.Text,\n description: 'Button type',\n type: {\n required: false,\n },\n },\n size: {\n control: { type: 'select' },\n options: Object.values(SulaButtonSize),\n defaultValue: SulaButtonSize.Default,\n description: 'Button size',\n type: {\n required: false,\n },\n },\n status: {\n control: { type: 'select' },\n options: Object.values(SulaButtonStatus),\n defaultValue: SulaButtonStatus.Primary,\n description: 'Button status',\n type: {\n required: false,\n },\n },\n loading: {\n control: 'boolean',\n defaultValue: false,\n description: 'Is button loading',\n type: {\n required: false,\n },\n },\n buttonDisabled: {\n control: 'boolean',\n defaultValue: false,\n description: 'Is button disabled',\n type: {\n required: false,\n },\n },\n buttonClicked: {\n action: 'buttonClicked',\n description: 'Evento emitido quando o botão é clicado',\n },\n },\n};\n\nconst Template = args => {\n const container = document.createElement('div');\n container.style.margin = '20px';\n\n const el = document.createElement('sula-button');\n\n if (args.text) el.setAttribute('text', args.text);\n if (args.icon) el.setAttribute('icon', args.icon);\n el.setAttribute('appearance', args.appearance);\n el.setAttribute('type', args.type);\n el.setAttribute('size', args.size);\n el.setAttribute('status', args.status);\n el.setAttribute('loading', args.loading.toString());\n el.setAttribute('button-disabled', args.buttonDisabled.toString());\n\n el.addEventListener('buttonClicked', args.buttonClicked);\n\n container.appendChild(el);\n\n return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n text: 'Default Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const IconButton = Template.bind({});\nIconButton.args = {\n text: '',\n icon: 'ph ph-house',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Icon,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const TextAppearance = Template.bind({});\nTextAppearance.args = {\n text: 'Text Button',\n icon: '',\n appearance: SulaButtonAppearance.Text,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const SecondaryButton = Template.bind({});\nSecondaryButton.args = {\n text: 'Secondary Button',\n icon: '',\n appearance: SulaButtonAppearance.Secondary,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const LargeButton = Template.bind({});\nLargeButton.args = {\n text: 'Large Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Large,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const DangerButton = Template.bind({});\nDangerButton.args = {\n text: 'Danger Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Danger,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const NegativeButton = Template.bind({});\nNegativeButton.args = {\n text: 'Negative Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Negative,\n loading: false,\n buttonDisabled: false,\n};\n\nexport const DisabledButton = Template.bind({});\nDisabledButton.args = {\n text: 'Disabled Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: true,\n};\n\nexport const LoadingButton = Template.bind({});\nLoadingButton.args = {\n text: 'Loading Button',\n icon: '',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: true,\n buttonDisabled: false,\n};\n\nexport const IconAndTextButton = Template.bind({});\nIconAndTextButton.args = {\n text: 'Icon and Text',\n icon: 'ph ph-house',\n appearance: SulaButtonAppearance.Default,\n type: SulaButtonType.Text,\n size: SulaButtonSize.Default,\n status: SulaButtonStatus.Primary,\n loading: false,\n buttonDisabled: false,\n};\n"]}

package/dist/collection/components/sula-checkbox/model/sula-checkbox.model.js ADDED Viewed

@@ -0,0 +1,6 @@
+export var SulaCheckboxType;
+(function (SulaCheckboxType) {
+    SulaCheckboxType["Default"] = "default";
+    SulaCheckboxType["List"] = "list";
+})(SulaCheckboxType || (SulaCheckboxType = {}));
+//# sourceMappingURL=sula-checkbox.model.js.map

package/dist/collection/components/sula-checkbox/model/sula-checkbox.model.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"sula-checkbox.model.js","sourceRoot":"","sources":["../../../../src/components/sula-checkbox/model/sula-checkbox.model.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,iCAAa,CAAA;AACf,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["export enum SulaCheckboxType {\n Default = 'default',\n List = 'list',\n}\n"]}

package/dist/collection/components/sula-checkbox/sula-checkbox.css ADDED Viewed

@@ -0,0 +1 @@

+ *,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.outline{outline-style:solid}:host{display:block}.checkbox-focus,.container-focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.mr-16{margin-right:1rem}.flex{display:flex}.h-\[27px\]{height:27px}.min-h-\[85px\]{min-height:85px}.w-\[27px\]{width:27px}.w-\[280px\]{width:280px}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-12>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.overflow-hidden{overflow:hidden}.break-words{overflow-wrap:break-word}.rounded-md{border-radius:1.25rem}.rounded-xs{border-radius:.5rem}.border{border-width:1px}.border-brand-primary{border-color:var(--color-brand-primary)}.border-line-input{border-color:var(--color-line-input)}.border-states-bg-disabled{border-color:var(--color-states-bg-disabled)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-pressed{background-color:var(--color-states-empty-bg-pressed)}.bg-surface-body{background-color:var(--color-surface-body)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.px-24{padding-left:1.5rem;padding-right:1.5rem}.py-16{padding-bottom:1rem;padding-top:1rem}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-icon-disabled{color:var(--color-icon-disabled)}.text-negative-negative-1{color:var(--color-negative-negative-1)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.hover\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.active\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}

package/dist/collection/components/sula-checkbox/sula-checkbox.js ADDED Viewed

@@ -0,0 +1,233 @@
+import { Host, h } from "@stencil/core";
+import { SulaCheckboxType } from "./model/sula-checkbox.model";
+export class SulaCheckbox {
+    constructor() {
+        /**
+         * Checkbox type
+         */
+        this.type = SulaCheckboxType.Default;
+        /**
+         * Is checbox disabled
+         */
+        this.disabled = false;
+        /**
+         * Is checkbox checked
+         */
+        this.checked = false;
+        this.isFocus = false;
+        this.toggle = () => {
+            if (!this.disabled) {
+                this.checked = !this.checked;
+                this.valueChanged.emit(this.checked);
+            }
+        };
+        this.handleFocus = () => {
+            if (!this.disabled) {
+                this.isFocus = true;
+                this.focusedOn.emit();
+            }
+        };
+        this.handleBlur = () => {
+            if (!this.disabled) {
+                this.focusedOut.emit();
+                this.isFocus = false;
+            }
+        };
+    }
+    getIconColor() {
+        if (this.disabled) {
+            return 'text-icon-disabled';
+        }
+        return 'text-negative-negative-1';
+    }
+    render() {
+        return (h(Host, { key: '56a8c43bf6e8cdd4a687f5730b86485522486ded' }, h("div", { key: '924f574fecc6e3a92cfc82cd63b9e8345afbe11a', class: {
+                'outline-none': true,
+                'flex items-center space-x-12': !!this.label && this.type === SulaCheckboxType.Default,
+                'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaCheckboxType.List,
+                'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaCheckboxType.List && !this.disabled,
+                'container-focus': this.isFocus && this.type === SulaCheckboxType.List,
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.toggle, tabIndex: 0 }, this.type === SulaCheckboxType.List && (h("div", { key: '7b0ba9c45a7a6733fba4520e8fffe5e9cc1f775e', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '61b673e866c72a33ab623f656fe882e3df4f04a3', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: '3b3a40d2a4fd14b943722a13c06e2478d19337c9', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: '03b6d405c2b7aadd113f1314bc12c99103bc72ac', tabIndex: 0, class: {
+                'flex justify-center items-center rounded-xs w-[27px] h-[27px] border outline-none flex-shrink-0': true,
+                'checkbox-focus': this.isFocus && this.type === SulaCheckboxType.Default,
+                'cursor-pointer active:bg-states-empty-bg-pressed': !this.disabled,
+                'bg-states-bg-disabled border-states-bg-disabled': this.disabled,
+                'bg-brand-primary border-brand-primary': this.checked,
+                'bg-surface-body border-line-input': !this.checked,
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.checked && (h("div", { key: 'ede285c57a75d7a12a4477b31b9c195cd42efca1', class: "flex justify-center items-center" }, h("sula-icon", { key: '5546613a4121659fadb2061e4701ab831dd3bbc6', icon: "ph-bold ph-check", customClass: `${this.getIconColor()} text-xl` })))), !!this.label && this.type === SulaCheckboxType.Default && h("label", { key: '5f1fa7508c159f4b486dad0d4392706e2ca704f1', class: "text-text-secondary text-base cursor-pointer break-words" }, this.label))));
+    }
+    static get is() { return "sula-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaCheckboxType",
+                    "resolved": "SulaCheckboxType.Default | SulaCheckboxType.List",
+                    "references": {
+                        "SulaCheckboxType": {
+                            "location": "import",
+                            "path": "./model/sula-checkbox.model",
+                            "id": "src/components/sula-checkbox/model/sula-checkbox.model.ts::SulaCheckboxType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox type"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "SulaCheckboxType.Default"
+            },
+            "label": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "subTitle": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox sub title (avaible when is `list` type)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sub-title",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is checbox disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is checkbox checked"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when checkbox value changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "focusedOn",
+                "name": "focusedOn",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when checkbox is focused."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "focusedOut",
+                "name": "focusedOut",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when checkbox is focused out."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sula-checkbox.js.map

package/dist/collection/components/sula-checkbox/sula-checkbox.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-checkbox.js","sourceRoot":"","sources":["../../../src/components/sula-checkbox/sula-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { SulaCheckboxType } from './model/sula-checkbox.model';\n\n@Component({\n tag: 'sula-checkbox',\n styleUrl: 'sula-checkbox.scss',\n shadow: true,\n})\nexport class SulaCheckbox {\n /**\n * Checkbox type\n */\n @Prop({ mutable: true }) type: SulaCheckboxType = SulaCheckboxType.Default;\n\n /**\n * Checkbox label\n */\n @Prop({ mutable: true }) label?: string;\n\n /**\n * Checkbox sub title (avaible when is `list` type)\n */\n @Prop({ mutable: true }) subTitle?: string;\n\n /**\n * Is checbox disabled\n */\n @Prop({ mutable: true }) disabled: boolean = false;\n\n /**\n * Is checkbox checked\n */\n @Prop({ mutable: true }) checked: boolean = false;\n\n /**\n * Event emitted when checkbox value changes.\n */\n @Event()\n valueChanged: EventEmitter<boolean>;\n\n /**\n * Event emitted when checkbox is focused.\n */\n @Event()\n focusedOn: EventEmitter<void>;\n\n /**\n * Event emitted when checkbox is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n isFocus: boolean = false;\n\n toggle = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.valueChanged.emit(this.checked);\n }\n };\n\n handleFocus = () => {\n if (!this.disabled) {\n this.isFocus = true;\n this.focusedOn.emit();\n }\n };\n\n handleBlur = () => {\n if (!this.disabled) {\n this.focusedOut.emit();\n this.isFocus = false;\n }\n };\n\n getIconColor() {\n if (this.disabled) {\n return 'text-icon-disabled';\n }\n\n return 'text-negative-negative-1';\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'outline-none': true,\n 'flex items-center space-x-12': !!this.label && this.type === SulaCheckboxType.Default,\n 'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaCheckboxType.List,\n 'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaCheckboxType.List && !this.disabled,\n 'container-focus': this.isFocus && this.type === SulaCheckboxType.List,\n }}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={this.toggle}\n tabIndex={0}\n >\n {this.type === SulaCheckboxType.List && (\n <div class=\"flex flex-col flex-1 mr-16 overflow-hidden\">\n {!!this.label && <label class=\"text-text-primary font-bold text-base cursor-pointer break-words\">{this.label}</label>}\n {!!this.subTitle && <span class=\"text-text-secondary text-base break-words\">{this.subTitle}</span>}\n </div>\n )}\n\n <div\n tabIndex={0}\n class={{\n 'flex justify-center items-center rounded-xs w-[27px] h-[27px] border outline-none flex-shrink-0': true,\n 'checkbox-focus': this.isFocus && this.type === SulaCheckboxType.Default,\n 'cursor-pointer active:bg-states-empty-bg-pressed': !this.disabled,\n 'bg-states-bg-disabled border-states-bg-disabled': this.disabled,\n 'bg-brand-primary border-brand-primary': this.checked,\n 'bg-surface-body border-line-input': !this.checked,\n }}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n {this.checked && (\n <div class=\"flex justify-center items-center\">\n <sula-icon icon=\"ph-bold ph-check\" customClass={`${this.getIconColor()} text-xl`}></sula-icon>\n </div>\n )}\n </div>\n {!!this.label && this.type === SulaCheckboxType.Default && <label class=\"text-text-secondary text-base cursor-pointer break-words\">{this.label}</label>}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/sula-checkbox/sula-checkbox.stories.js ADDED Viewed

@@ -0,0 +1,113 @@
+import { SulaCheckboxType } from "./model/sula-checkbox.model";
+export default {
+    title: 'Components/sula-checkbox',
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: Object.values(SulaCheckboxType),
+            defaultValue: SulaCheckboxType.Default,
+            description: 'The checkbox type',
+            type: {
+                required: false,
+            },
+        },
+        label: {
+            control: 'text',
+            defaultValue: 'Label',
+            description: 'The checkbox label',
+            type: {
+                required: false,
+            },
+        },
+        subTitle: {
+            control: 'text',
+            defaultValue: '',
+            description: 'The checkbox subtitle (available when type is List)',
+            type: {
+                required: false,
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Whether the checkbox is disabled',
+            type: {
+                required: false,
+            },
+        },
+        checked: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Whether the checkbox is checked',
+            type: {
+                required: false,
+            },
+        },
+        valueChanged: {
+            action: 'valueChanged',
+            description: 'Event emitted when checkbox value changes',
+        },
+        focusedOn: {
+            action: 'focusedOn',
+            description: 'Event emitted when checkbox is focused',
+        },
+        focusedOut: {
+            action: 'focusedOut',
+            description: 'Event emitted when checkbox loses focus',
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.flexDirection = 'column';
+    container.style.gap = '20px';
+    const el = document.createElement('sula-checkbox');
+    el.setAttribute('type', args.type);
+    if (args.label)
+        el.setAttribute('label', args.label);
+    if (args.subTitle)
+        el.setAttribute('sub-title', args.subTitle);
+    el.setAttribute('disabled', args.disabled.toString());
+    el.setAttribute('checked', args.checked.toString());
+    el.addEventListener('valueChanged', args.valueChanged);
+    el.addEventListener('focusedOn', args.focusedOn);
+    el.addEventListener('focusedOut', args.focusedOut);
+    container.appendChild(el);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    type: SulaCheckboxType.Default,
+    label: 'Aceitar termos e condições',
+    subTitle: '',
+    disabled: false,
+    checked: false,
+};
+export const DefaultChecked = Template.bind({});
+DefaultChecked.args = Object.assign(Object.assign({}, Default.args), { checked: true });
+export const DefaultDisabled = Template.bind({});
+DefaultDisabled.args = Object.assign(Object.assign({}, Default.args), { disabled: true });
+export const DefaultCheckedDisabled = Template.bind({});
+DefaultCheckedDisabled.args = Object.assign(Object.assign({}, Default.args), { checked: true, disabled: true });
+export const DefaultWithoutLabel = Template.bind({});
+DefaultWithoutLabel.args = Object.assign(Object.assign({}, Default.args), { label: '' });
+export const List = Template.bind({});
+List.args = {
+    type: SulaCheckboxType.List,
+    label: 'Opção de lista',
+    subTitle: 'Descrição adicional para esta opção',
+    disabled: false,
+    checked: false,
+};
+export const ListChecked = Template.bind({});
+ListChecked.args = Object.assign(Object.assign({}, List.args), { checked: true });
+export const ListDisabled = Template.bind({});
+ListDisabled.args = Object.assign(Object.assign({}, List.args), { disabled: true });
+export const ListCheckedDisabled = Template.bind({});
+ListCheckedDisabled.args = Object.assign(Object.assign({}, List.args), { checked: true, disabled: true });
+export const ListWithoutSubtitle = Template.bind({});
+ListWithoutSubtitle.args = Object.assign(Object.assign({}, List.args), { subTitle: '' });
+//# sourceMappingURL=sula-checkbox.stories.js.map