welcome-ui 0.0.0-dev.1764081436168 → 0.0.0-dev.1764083596268
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.
- package/dist/Button.css +1 -1
- package/dist/Button.js +47 -47
- package/package.json +1 -1
package/dist/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --gradient-angle{syntax: "<angle>"; initial-value: -60deg; inherits: true;}@keyframes _rotate-gradient_1eb2q_1{to{--gradient-angle: 300deg}}@layer components{._root_1eb2q_12{position:relative;display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;border-style:solid;cursor:pointer;border-radius:var(--border-radius-md);transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:ease-in-out;outline:transparent solid var(--border-width-md);font-weight:var(--font-weight-semi-bold);font-family:var(--font-family-body);line-height:var(--font-line-height-xs);height:var(--buttonHeight);padding-inline:var(--buttonPaddingInline);font-size:var(--buttonFontSize);color:var(--buttonColor, var(--color-neutral-90));background:var(--buttonBackground);border-width:var(--buttonBorderWidth, 0);border-color:var(--buttonBorderColor, transparent);box-shadow:var(--buttonBoxShadow, none);gap:var(--buttonGap)}._root_1eb2q_12[data-focus-visible],._root_1eb2q_12:focus-visible{outline-width:var(--components-dimensions-button-border-width-focused);outline-color:var(--buttonOutlineColorFocus)}@media (hover: hover) and (pointer: fine){._root_1eb2q_12:hover:not(:disabled):not([aria-disabled]){box-shadow:var(--elevation-20);--buttonBackground: var(--buttonBackgroundHover);--buttonBorderColor: var(--buttonBorderColorHover, transparent);--buttonColor: var(--buttonColorHover)}}._root_1eb2q_12:active:not(:disabled):not([aria-disabled]){--buttonBackground: var(--buttonBackgroundActive);--buttonBorderColor: var(--buttonBorderColorActive, transparent);--buttonColor: var(--buttonColorPressed)}._root_1eb2q_12:disabled,._root_1eb2q_12[aria-disabled]{--buttonBorderColor: var(--buttonBorderColorDisabled, transparent);--buttonColor: var(--buttonColorDisabled);--buttonBackground: var(--buttonBackgroundDisabled);cursor:not-allowed}._root_1eb2q_12 i.wui-icon-font,._root_1eb2q_12 svg{font-weight:initial;width:var(--buttonIconSize);height:var(--buttonIconSize);font-size:var(--buttonIconSize)}._root_1eb2q_12:has(svg:only-child),._root_1eb2q_12:has(i._wui-icon-font_1eb2q_65:only-child){width:var(--buttonHeight);--buttonPaddingInline: 0}._size-sm_1eb2q_76{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--components-dimensions-button-size-max-height-sm);--buttonPaddingInline: var(--components-dimensions-button-padding-inline-sm);--buttonIconSize: var(--components-dimensions-button-size-icon-sm);--buttonGap: var(--components-dimensions-button-gap-content-sm)}._size-md_1eb2q_83{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--components-dimensions-button-size-max-height-md);--buttonPaddingInline: var(--components-dimensions-button-padding-inline-md);--buttonIconSize: var(--components-dimensions-button-size-icon-md);--buttonGap: var(--components-dimensions-button-gap-content-md)}._size-lg_1eb2q_90{--buttonFontSize: var(--font-size-16);--buttonHeight: var(--components-dimensions-button-size-max-height-lg);--buttonPaddingInline: var(--components-dimensions-button-padding-inline-lg);--buttonIconSize: var(--components-dimensions-button-size-icon-lg);--buttonGap: var(--components-dimensions-button-gap-content-lg)}._variant-primary_1eb2q_97{--buttonBackground: var(--components-colors-button-color-background-primary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-main-pressed );--buttonBackgroundHover: var(--components-colors-button-color-background-primary-main-hover);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused);--buttonColorDisabled: var(--components-colors-button-color-text-primary-main-disabled);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-main-disabled) 2.5px, var(--components-colors-button-color-background-primary-main-disabled) 5.25px) padding-box}._variant-primary-neutral_1eb2q_107{--buttonBackground: var(--components-colors-button-color-background-primary-neutral-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-neutral-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-primary-neutral-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-neutral-disabled) 2.5px, var(--components-colors-button-color-background-primary-neutral-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-primary-neutral-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-neutral-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-neutral-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-neutral-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-primary-ai_1eb2q_122{--buttonBackground: linear-gradient(var(--components-colors-button-color-background-primary-ai-default) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundActive: linear-gradient(var(--components-colors-button-color-background-primary-ai-pressed) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundHover: linear-gradient(var(--components-colors-button-color-background-primary-ai-hover) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-ai-disabled) 2.5px, var(--components-colors-button-color-background-primary-ai-disabled) 5.25px) padding-box, linear-gradient( 107.75deg, var(--color-neutral-30) 0%, var(--color-neutral-50) 20%, var(--color-neutral-40) 40%, var(--color-neutral-50) 60%, var(--color-neutral-60) 80%, var(--color-neutral-50) 100% ) border-box;--buttonBorderWidth: var(--components-dimensions-button-border-width-ai);--buttonColor: var(--components-colors-button-color-text-primary-ai-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-ai-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-ai-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-ai-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused);animation:_rotate-gradient_1eb2q_1 3s linear infinite paused}@media (hover: hover) and (pointer: fine){._variant-primary-ai_1eb2q_122:hover:not(:disabled):not([aria-disabled]){animation-play-state:running}}._variant-primary-ai_1eb2q_122:focus-visible{animation-play-state:running}._variant-primary-danger_1eb2q_154{--buttonBackground: var(--components-colors-button-color-background-primary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-primary-danger-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-danger-disabled) 2.5px, var(--components-colors-button-color-background-primary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-primary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-danger-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-secondary_1eb2q_170{--buttonBackground: var(--components-colors-button-color-background-secondary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-secondary-main-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-secondary-main-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-secondary-main-disabled) 2.5px, var(--components-colors-button-color-background-secondary-main-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-secondary-main-default);--buttonColorDisabled: var(--components-colors-button-color-text-secondary-main-disabled);--buttonColorHover: var(--components-colors-button-color-text-secondary-main-hover);--buttonColorPressed: var(--components-colors-button-color-text-secondary-main-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonBorderColor: var(--components-colors-button-color-border-secondary-main-default);--buttonBorderColorHover: var(--components-colors-button-color-border-secondary-main-hover);--buttonBorderColorActive: var( --components-colors-button-color-border-secondary-main-pressed );--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-secondary-danger_1eb2q_191{--buttonBackground: var(--components-colors-button-color-background-secondary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-secondary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-secondary-danger-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-secondary-danger-disabled) 2.5px, var(--components-colors-button-color-background-secondary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-secondary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-secondary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-secondary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-secondary-danger-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonBorderColor: var(--components-colors-button-color-border-secondary-danger-default);--buttonBorderColorHover: var(--components-colors-button-color-border-secondary-danger-hover);--buttonBorderColorActive: var( --components-colors-button-color-border-secondary-danger-pressed );--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-tertiary_1eb2q_212{--buttonBackground: var(--components-colors-button-color-background-tertiary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-tertiary-main-pressed );--buttonBackgroundHover: var(--components-colors-button-color-background-tertiary-main-hover);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-tertiary-main-disabled) 2.5px, var(--components-colors-button-color-background-tertiary-main-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-tertiary-main-default);--buttonColorDisabled: var(--components-colors-button-color-text-tertiary-main-disabled);--buttonColorHover: var(--components-colors-button-color-text-tertiary-main-hover);--buttonColorPressed: var(--components-colors-button-color-text-tertiary-main-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-tertiary-danger_1eb2q_225{--buttonBackground: var(--components-colors-button-color-background-tertiary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-tertiary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-tertiary-danger-hover );--buttonBackgroundDisabled: var( --components-colors-button-color-background-tertiary-danger-disabled );--buttonColor: var(--components-colors-button-color-text-tertiary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-tertiary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-tertiary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-tertiary-danger-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._loader_1eb2q_242{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;left:0;right:0;top:0}._loader-children_1eb2q_252{opacity:0}}
|
|
1
|
+
@property --gradient-angle{syntax: "<angle>"; initial-value: -60deg; inherits: true;}@keyframes _rotate-gradient_vtvta_1{to{--gradient-angle: 300deg}}@layer components{._root_vtvta_12{position:relative;display:inline-flex;white-space:nowrap;flex-shrink:0;align-items:center;justify-content:center;border-style:solid;cursor:pointer;border-radius:var(--border-radius-md);transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:ease-in-out;outline:transparent solid var(--border-width-md);font-weight:var(--font-weight-semi-bold);font-family:var(--font-family-body);line-height:var(--font-line-height-xs);height:var(--buttonHeight);padding-inline:var(--buttonPaddingInline);font-size:var(--buttonFontSize);color:var(--buttonColor, var(--color-neutral-90));background:var(--buttonBackground);border-width:var(--buttonBorderWidth, 0);border-color:var(--buttonBorderColor, transparent);box-shadow:var(--buttonBoxShadow, none);gap:var(--buttonGap)}._root_vtvta_12[data-focus-visible],._root_vtvta_12:focus-visible{outline-width:var(--components-dimensions-button-border-width-focused);outline-color:var(--buttonOutlineColorFocus)}@media (hover: hover) and (pointer: fine){._root_vtvta_12:hover:not(:disabled):not([aria-disabled]){box-shadow:var(--elevation-20);--buttonBackground: var(--buttonBackgroundHover);--buttonBorderColor: var(--buttonBorderColorHover, transparent);--buttonColor: var(--buttonColorHover)}}._root_vtvta_12:active:not(:disabled):not([aria-disabled]){--buttonBackground: var(--buttonBackgroundActive);--buttonBorderColor: var(--buttonBorderColorActive, transparent);--buttonColor: var(--buttonColorPressed)}._root_vtvta_12:disabled,._root_vtvta_12[aria-disabled]{--buttonBorderColor: var(--buttonBorderColorDisabled, transparent);--buttonColor: var(--buttonColorDisabled);--buttonBackground: var(--buttonBackgroundDisabled);cursor:not-allowed}._root_vtvta_12 i.wui-icon-font,._root_vtvta_12 svg{font-weight:initial;width:var(--buttonIconSize);height:var(--buttonIconSize);font-size:var(--buttonIconSize)}._root_vtvta_12:has(svg:only-child),._root_vtvta_12:has(i._wui-icon-font_vtvta_66:only-child){width:var(--buttonHeight);--buttonPaddingInline: 0}._size-sm_vtvta_77{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--components-dimensions-button-size-max-height-sm);--buttonPaddingInline: var(--components-dimensions-button-padding-inline-sm);--buttonIconSize: var(--components-dimensions-button-size-icon-sm);--buttonGap: var(--components-dimensions-button-gap-content-sm)}._size-md_vtvta_84{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--components-dimensions-button-size-max-height-md);--buttonPaddingInline: var(--components-dimensions-button-padding-inline-md);--buttonIconSize: var(--components-dimensions-button-size-icon-md);--buttonGap: var(--components-dimensions-button-gap-content-md)}._size-lg_vtvta_91{--buttonFontSize: var(--font-size-16);--buttonHeight: var(--components-dimensions-button-size-max-height-lg);--buttonPaddingInline: var(--components-dimensions-button-padding-inline-lg);--buttonIconSize: var(--components-dimensions-button-size-icon-lg);--buttonGap: var(--components-dimensions-button-gap-content-lg)}._variant-primary_vtvta_98{--buttonBackground: var(--components-colors-button-color-background-primary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-main-pressed );--buttonBackgroundHover: var(--components-colors-button-color-background-primary-main-hover);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused);--buttonColorDisabled: var(--components-colors-button-color-text-primary-main-disabled);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-main-disabled) 2.5px, var(--components-colors-button-color-background-primary-main-disabled) 5.25px) padding-box}._variant-primary-neutral_vtvta_108{--buttonBackground: var(--components-colors-button-color-background-primary-neutral-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-neutral-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-primary-neutral-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-neutral-disabled) 2.5px, var(--components-colors-button-color-background-primary-neutral-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-primary-neutral-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-neutral-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-neutral-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-neutral-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-primary-ai_vtvta_123{--buttonBackground: linear-gradient(var(--components-colors-button-color-background-primary-ai-default) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundActive: linear-gradient(var(--components-colors-button-color-background-primary-ai-pressed) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundHover: linear-gradient(var(--components-colors-button-color-background-primary-ai-hover) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-ai-disabled) 2.5px, var(--components-colors-button-color-background-primary-ai-disabled) 5.25px) padding-box, linear-gradient( 107.75deg, var(--color-neutral-30) 0%, var(--color-neutral-50) 20%, var(--color-neutral-40) 40%, var(--color-neutral-50) 60%, var(--color-neutral-60) 80%, var(--color-neutral-50) 100% ) border-box;--buttonBorderWidth: var(--components-dimensions-button-border-width-ai);--buttonColor: var(--components-colors-button-color-text-primary-ai-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-ai-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-ai-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-ai-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused);animation:_rotate-gradient_vtvta_1 3s linear infinite paused}@media (hover: hover) and (pointer: fine){._variant-primary-ai_vtvta_123:hover:not(:disabled):not([aria-disabled]){animation-play-state:running}}._variant-primary-ai_vtvta_123:focus-visible{animation-play-state:running}._variant-primary-danger_vtvta_155{--buttonBackground: var(--components-colors-button-color-background-primary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-primary-danger-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-danger-disabled) 2.5px, var(--components-colors-button-color-background-primary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-primary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-danger-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-secondary_vtvta_171{--buttonBackground: var(--components-colors-button-color-background-secondary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-secondary-main-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-secondary-main-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-secondary-main-disabled) 2.5px, var(--components-colors-button-color-background-secondary-main-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-secondary-main-default);--buttonColorDisabled: var(--components-colors-button-color-text-secondary-main-disabled);--buttonColorHover: var(--components-colors-button-color-text-secondary-main-hover);--buttonColorPressed: var(--components-colors-button-color-text-secondary-main-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonBorderColor: var(--components-colors-button-color-border-secondary-main-default);--buttonBorderColorHover: var(--components-colors-button-color-border-secondary-main-hover);--buttonBorderColorActive: var( --components-colors-button-color-border-secondary-main-pressed );--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-secondary-danger_vtvta_192{--buttonBackground: var(--components-colors-button-color-background-secondary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-secondary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-secondary-danger-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-secondary-danger-disabled) 2.5px, var(--components-colors-button-color-background-secondary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-secondary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-secondary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-secondary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-secondary-danger-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonBorderColor: var(--components-colors-button-color-border-secondary-danger-default);--buttonBorderColorHover: var(--components-colors-button-color-border-secondary-danger-hover);--buttonBorderColorActive: var( --components-colors-button-color-border-secondary-danger-pressed );--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-tertiary_vtvta_213{--buttonBackground: var(--components-colors-button-color-background-tertiary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-tertiary-main-pressed );--buttonBackgroundHover: var(--components-colors-button-color-background-tertiary-main-hover);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-tertiary-main-disabled) 2.5px, var(--components-colors-button-color-background-tertiary-main-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-tertiary-main-default);--buttonColorDisabled: var(--components-colors-button-color-text-tertiary-main-disabled);--buttonColorHover: var(--components-colors-button-color-text-tertiary-main-hover);--buttonColorPressed: var(--components-colors-button-color-text-tertiary-main-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-tertiary-danger_vtvta_226{--buttonBackground: var(--components-colors-button-color-background-tertiary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-tertiary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-tertiary-danger-hover );--buttonBackgroundDisabled: var( --components-colors-button-color-background-tertiary-danger-disabled );--buttonColor: var(--components-colors-button-color-text-tertiary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-tertiary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-tertiary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-tertiary-danger-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._loader_vtvta_243{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;left:0;right:0;top:0}._loader-children_vtvta_253{opacity:0}}
|
package/dist/Button.js
CHANGED
|
@@ -1,64 +1,64 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import './Button.css';
|
|
3
|
-
import { jsxs as o, jsx as
|
|
4
|
-
import { B as
|
|
5
|
-
import { useButtonGroup as
|
|
6
|
-
import { Loader as
|
|
7
|
-
import { c as
|
|
8
|
-
import { f as
|
|
3
|
+
import { jsxs as o, jsx as t, Fragment as b } from "react/jsx-runtime";
|
|
4
|
+
import { B as h } from "./XCKGTAUF-CJwwVibW.js";
|
|
5
|
+
import { useButtonGroup as x } from "./ButtonGroup.js";
|
|
6
|
+
import { Loader as B } from "./Loader.js";
|
|
7
|
+
import { c as N } from "./index-PAaZGbyz.js";
|
|
8
|
+
import { f as w } from "./forwardRefWithAs-8eP3ZN15.js";
|
|
9
9
|
import "react";
|
|
10
|
-
const
|
|
11
|
-
root:
|
|
12
|
-
"wui-icon-font": "_wui-icon-
|
|
13
|
-
"size-sm": "_size-
|
|
14
|
-
"size-md": "_size-
|
|
15
|
-
"size-lg": "_size-
|
|
16
|
-
"variant-primary": "_variant-
|
|
17
|
-
"variant-primary-neutral": "_variant-primary-
|
|
18
|
-
"variant-primary-ai": "_variant-primary-
|
|
19
|
-
"rotate-gradient": "_rotate-
|
|
20
|
-
"variant-primary-danger": "_variant-primary-
|
|
21
|
-
"variant-secondary": "_variant-
|
|
22
|
-
"variant-secondary-danger": "_variant-secondary-
|
|
23
|
-
"variant-tertiary": "_variant-
|
|
24
|
-
"variant-tertiary-danger": "_variant-tertiary-
|
|
25
|
-
loader:
|
|
26
|
-
"loader-children": "_loader-
|
|
27
|
-
},
|
|
10
|
+
const $ = "_root_vtvta_12", j = "_loader_vtvta_243", D = {
|
|
11
|
+
root: $,
|
|
12
|
+
"wui-icon-font": "_wui-icon-font_vtvta_66",
|
|
13
|
+
"size-sm": "_size-sm_vtvta_77",
|
|
14
|
+
"size-md": "_size-md_vtvta_84",
|
|
15
|
+
"size-lg": "_size-lg_vtvta_91",
|
|
16
|
+
"variant-primary": "_variant-primary_vtvta_98",
|
|
17
|
+
"variant-primary-neutral": "_variant-primary-neutral_vtvta_108",
|
|
18
|
+
"variant-primary-ai": "_variant-primary-ai_vtvta_123",
|
|
19
|
+
"rotate-gradient": "_rotate-gradient_vtvta_1",
|
|
20
|
+
"variant-primary-danger": "_variant-primary-danger_vtvta_155",
|
|
21
|
+
"variant-secondary": "_variant-secondary_vtvta_171",
|
|
22
|
+
"variant-secondary-danger": "_variant-secondary-danger_vtvta_192",
|
|
23
|
+
"variant-tertiary": "_variant-tertiary_vtvta_213",
|
|
24
|
+
"variant-tertiary-danger": "_variant-tertiary-danger_vtvta_226",
|
|
25
|
+
loader: j,
|
|
26
|
+
"loader-children": "_loader-children_vtvta_253"
|
|
27
|
+
}, r = N(D), S = w(
|
|
28
28
|
({
|
|
29
|
-
accessibleWhenDisabled:
|
|
30
|
-
as:
|
|
31
|
-
children:
|
|
32
|
-
className:
|
|
33
|
-
disabled:
|
|
29
|
+
accessibleWhenDisabled: v = !0,
|
|
30
|
+
as: i,
|
|
31
|
+
children: e,
|
|
32
|
+
className: s = "",
|
|
33
|
+
disabled: _ = !1,
|
|
34
34
|
isLoading: a = !1,
|
|
35
|
-
size:
|
|
36
|
-
variant:
|
|
37
|
-
...
|
|
38
|
-
},
|
|
39
|
-
const { disabled: p, size:
|
|
35
|
+
size: d = "lg",
|
|
36
|
+
variant: l = "primary",
|
|
37
|
+
...m
|
|
38
|
+
}, c) => {
|
|
39
|
+
const { disabled: p, size: u, variant: y } = x(), f = p || _ || a, g = y || l, z = u || d, n = i || "button";
|
|
40
40
|
return /* @__PURE__ */ o(
|
|
41
|
-
|
|
41
|
+
h,
|
|
42
42
|
{
|
|
43
43
|
...n === "button" ? { type: "button" } : {},
|
|
44
|
-
...
|
|
45
|
-
accessibleWhenDisabled:
|
|
46
|
-
className:
|
|
47
|
-
disabled:
|
|
48
|
-
ref:
|
|
49
|
-
render:
|
|
44
|
+
...m,
|
|
45
|
+
accessibleWhenDisabled: v,
|
|
46
|
+
className: r("root", `variant-${g}`, `size-${z}`, s),
|
|
47
|
+
disabled: f,
|
|
48
|
+
ref: c,
|
|
49
|
+
render: i ? /* @__PURE__ */ t(n, {}) : void 0,
|
|
50
50
|
children: [
|
|
51
|
-
a ? /* @__PURE__ */ o(
|
|
52
|
-
/* @__PURE__ */
|
|
53
|
-
/* @__PURE__ */
|
|
51
|
+
a ? /* @__PURE__ */ o(b, { children: [
|
|
52
|
+
/* @__PURE__ */ t("div", { className: r("loader"), children: /* @__PURE__ */ t(B, { size: "xs" }) }),
|
|
53
|
+
/* @__PURE__ */ t("div", { className: r("loader-children"), children: e })
|
|
54
54
|
] }) : null,
|
|
55
|
-
!a &&
|
|
55
|
+
!a && e
|
|
56
56
|
]
|
|
57
57
|
}
|
|
58
58
|
);
|
|
59
59
|
}
|
|
60
60
|
);
|
|
61
|
-
|
|
61
|
+
S.displayName = "Button";
|
|
62
62
|
export {
|
|
63
|
-
|
|
63
|
+
S as Button
|
|
64
64
|
};
|