suus-component-library 0.1.0 → 0.1.2

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 (15) hide show
  1. package/dist/{src/components/form/buttons/input-button/input-button.d.ts → components/form/buttons/input-button/InputButton.d.ts} +5 -4
  2. package/dist/components/form/buttons/input-button/InputButton.d.ts.map +1 -0
  3. package/dist/components/form/buttons/input-button/InputButton.stories.d.ts +33 -0
  4. package/dist/components/form/buttons/input-button/InputButton.stories.d.ts.map +1 -0
  5. package/dist/components/form/buttons/input-button/index.d.ts +3 -0
  6. package/dist/components/form/buttons/input-button/index.d.ts.map +1 -0
  7. package/dist/index.d.ts +3 -2
  8. package/dist/index.d.ts.map +1 -0
  9. package/dist/suus-component-library.css +1 -1
  10. package/dist/suus-component-library.js +32 -22
  11. package/dist/suus-component-library.umd.cjs +1 -1
  12. package/package.json +18 -6
  13. package/dist/src/components/form/buttons/input-button/input-button.d.ts.map +0 -1
  14. package/dist/src/index.d.ts +0 -2
  15. package/dist/src/index.d.ts.map +0 -1
package/dist/{src/components/form/buttons/input-button/input-button.d.ts → components/form/buttons/input-button/InputButton.d.ts} RENAMED
@@ -1,14 +1,15 @@
1
1
  import { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
2
+ type ProductColorToken = "--colors-juice-sugarcane" | "--colors-juice-tamarind" | "--colors-juice-guava" | "--colors-juice-icetea";
2
3
  export type ButtonProps = {
3
4
  label: string;
4
5
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
5
6
  type?: "button" | "submit" | "reset";
6
7
  disabled?: boolean;
7
8
  loading?: boolean;
8
- fullWidth?: boolean;
9
9
  variant?: "primary" | "secondary";
10
- colorToken?: string;
10
+ colorToken?: ProductColorToken;
11
11
  icon?: ReactNode;
12
12
  } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "disabled">;
13
- export default function InputButton({ label, onClick, type, disabled, loading, fullWidth, variant, colorToken, icon, className, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
14
- //# sourceMappingURL=input-button.d.ts.map
13
+ export default function InputButton({ label, onClick, type, disabled, loading, variant, colorToken, icon, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
14
+ export {};
15
+ //# sourceMappingURL=InputButton.d.ts.map
package/dist/components/form/buttons/input-button/InputButton.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/buttons/input-button/InputButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,KAAK,iBAAiB,GAChB,0BAA0B,GAC1B,yBAAyB,GACzB,sBAAsB,GACtB,uBAAuB,CAAC;AAE9B,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EACI,KAAK,EACL,OAAO,EACP,IAAe,EACf,QAAgB,EAChB,OAAe,EACf,OAAmB,EACnB,UAAuC,EACvC,IAAI,EACJ,GAAG,IAAI,EACV,EAAE,WAAW,2CAoCjD"}
package/dist/components/form/buttons/input-button/InputButton.stories.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import { StoryObj } from '@storybook/react-vite';
2
+ import { default as InputButton } from './InputButton';
3
+ declare const meta: {
4
+ title: string;
5
+ component: typeof InputButton;
6
+ parameters: {
7
+ layout: string;
8
+ };
9
+ tags: string[];
10
+ argTypes: {
11
+ variant: {
12
+ control: "select";
13
+ options: string[];
14
+ };
15
+ disabled: {
16
+ control: "boolean";
17
+ };
18
+ label: {
19
+ control: "text";
20
+ };
21
+ colorToken: {
22
+ control: "select";
23
+ options: string[];
24
+ };
25
+ };
26
+ };
27
+ export default meta;
28
+ type Story = StoryObj<typeof meta>;
29
+ export declare const Primary: Story;
30
+ export declare const Secondary: Story;
31
+ export declare const Disabled: Story;
32
+ export declare const Icon: Story;
33
+ //# sourceMappingURL=InputButton.stories.d.ts.map
package/dist/components/form/buttons/input-button/InputButton.stories.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/buttons/input-button/InputButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CA4B0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KA+BlB,CAAC"}
package/dist/components/form/buttons/input-button/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { default } from './InputButton';
2
+ export type { ButtonProps } from './InputButton';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/form/buttons/input-button/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/buttons/input-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export * from './src/index'
2
- export {}
1
+ export { default as InputButton } from './components/form/buttons/input-button/InputButton';
2
+ export type { ButtonProps } from './components/form/buttons/input-button/InputButton';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAI5B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oDAAoD,CAAC;AAC5F,YAAY,EAAE,WAAW,EAAE,MAAM,oDAAoD,CAAC"}
package/dist/suus-component-library.css CHANGED
@@ -1,2 +1,2 @@
1
- .suus-button{--btn-color:var(--colorProductSugarcane);--btn-text-color-primary:#fff;--btn-text-color-secondary:#272727;--btn-disabled-bg:#d9d9d9;--btn-disabled-border:#c5c5c5;--btn-disabled-text:#f7f7f7;--btn-disabled-text-secondary:#bcbcbc;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:0 solid #0000;border-radius:999px;outline:none;justify-content:center;align-items:center;gap:.75rem;min-height:3rem;padding:0 2rem;font-family:inherit;font-size:1rem;font-weight:700;line-height:1;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,color .18s,opacity .18s;display:inline-flex}@media (width<=480px){.suus-button{width:100%;min-width:0}}.btn--full{width:100%;min-width:0}.btn__icon{flex-shrink:0;justify-content:center;align-items:center;width:1.4rem;height:1.4rem;display:inline-flex}.btn__label{display:inline-block}.suus-button--primary{color:var(--btn-text-color-primary);background:linear-gradient(180deg, color-mix(in srgb, var(--btn-color) 85%, white 15%) 0%, var(--btn-color) 60%, color-mix(in srgb, var(--btn-color) 75%, black 25%) 100%);box-shadow:inset 0 3px 6px color-mix(in srgb, var(--btn-color) 50%, white 50%), inset 0 -2px 4px color-mix(in srgb, var(--btn-color) 60%, black 40%), 0 10px 18px #00000026;border-color:#0000}.suus-button--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 2px #fff3,inset 0 -2px #00000024,0 12px 22px #0000002e}.suus-button--primary:focus-visible:not(:disabled){box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--btn-color) 72%, white 28%), inset 0 2px 0 #ffffff2e, inset 0 -2px 0 #0000001f, 0 0 0 4px #ffffffe6}.suus-button--primary:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 6px #0000001f,inset 0 1px #ffffff1f}.suus-button--secondary{color:var(--btn-color);border-color:var(--btn-color);background:#fff;box-shadow:inset 0 1px #fffc,0 4px 12px #0000000f}.suus-button--secondary:hover:not(:disabled){background:color-mix(in srgb, var(--btn-color) 8%, white 92%);transform:translateY(-1px);box-shadow:inset 0 1px #ffffffe6,0 8px 18px #00000014}.suus-button--secondary:focus-visible:not(:disabled){box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--btn-color) 18%, white 82%), 0 0 0 4px #fffffff2}.suus-button--secondary:active:not(:disabled){background:color-mix(in srgb, var(--btn-color) 12%, white 88%);transform:translateY(1px);box-shadow:inset 0 2px 6px #00000014}.suus-button:disabled{cursor:not-allowed;transform:none}.suus-button--primary:disabled{background:var(--btn-disabled-bg);color:var(--btn-disabled-text);box-shadow:none;border-color:#0000}.suus-button--secondary:disabled{color:var(--btn-disabled-text-secondary);border-color:var(--btn-disabled-border);box-shadow:none;background:#fff}.btn--loading{pointer-events:none}.btn__loader{border:2px solid #ffffff59;border-top-color:#fff;border-radius:999px;width:1.2rem;height:1.2rem;animation:.7s linear infinite btn-spin}.btn__loader--secondary{border:2px solid color-mix(in srgb, var(--btn-color) 20%, white 80%)}@keyframes btn-spin{to{transform:rotate(360deg)}}
1
+ :root{--colors-gold-brand-secondary-bright:#f9db86;--colors-gold-brand-secondary-light:#eec348;--colors-gold-brand-secondary:#d9ab29;--colors-gold-brand-secondary-midnight:#97771d;--colors-gold-brand-secondary-dark:#b58f24;--colors-gray-brand-white:#fff;--colors-gray-brand-bright-gray:#eee;--colors-gray-brand-light-gray:#dfdfdf;--colors-gray-brand-gray:#c2bfbf;--colors-gray-brand-dark-gray:#5b5a5a;--colors-gray-brand-black:#272727;--colors-gray-brand-white-transparent-40:#fff6;--colors-gray-brand-white-transparent-70:#ffffffb3;--colors-status-error:#de6565;--colors-green-brand-primary-bright:#e5fc5a;--colors-green-brand-primary-light:#d0e646;--colors-green-brand-primary:#afc33b;--colors-green-brand-primary-dark:#8fa02a;--colors-green-brand-primary-midnight:#5c6814;--colors-juice-sugarcane:#9bad30;--colors-juice-tamarind:#da8e33;--colors-juice-guava:#7b4e80;--colors-juice-icetea:#d83a4f;--spacing-tiny:8px;--spacing-small:16px;--spacing-default:24px;--spacing-large:40px;--spacing-huge:60px;--radius-small:8px;--radius-default:16px;--radius-large:24px;--radius-huge:50px;--borders-thin:.5px;--borders-default:1px;--borders-thick:2px;--typeface-font-family-sans-serif:sora;--typeface-font-family-header:sora;--typeface-font-family-body:sora;--typeface-font-family-statement:sora;--typeface-font-family-form:sora;--typeface-font-weight-regular-400:400;--typeface-font-weight-regular-500:500;--typeface-font-weight-bold-700:700;--typeface-font-size-small-16:.889rem;--typeface-font-size-default-20:1.111rem;--typeface-font-size-large-24:1.333rem;--typeface-font-size-huge-48:2.667rem;--typeface-font-size-extra-huge-72:4rem;--typeface-font-size-extra-large-36:2rem;--typeface-letter-spacing-default:.006rem;--typeface-letter-spacing-large:.011rem;--typeface-line-height-default-120:6.667rem;--typeface-line-height-large-150:8.333rem;--colors-status-success:var(--colors-green-brand-primary);--colors-status-warning:var(--colors-gold-brand-secondary);--colors-status-info:var(--colors-green-brand-primary);--panel-background-transparent:var(--colors-gray-brand-white-transparent-70);--panel-background-white:var(--colors-gray-brand-white);--panel-background-gray:var(--colors-gray-brand-gray);--panel-background-gradient-top-left-green:var(--colors-green-brand-primary-light);--panel-background-gradient-bottom-right-green:var(--colors-green-brand-primary-midnight);--panel-background-gradient-top-left-white:var(--colors-gray-brand-white-transparent-70);--panel-background-gradient-bottom-right-white:var(--colors-gray-brand-white-transparent-40);--panel-text-title:var(--colors-green-brand-primary-dark);--panel-text-title-glassy:var(--colors-gray-brand-white);--panel-border-color:var(--colors-gray-brand-light-gray);--panel-border-width:var(--borders-default);--panel-radius-desktop:var(--radius-large);--panel-radius-mobile:var(--radius-small);--panel-padding-top-bottom-desktop:var(--spacing-large);--panel-padding-right-left-desktop:var(--spacing-large);--panel-padding-top-bottom-mobile:var(--spacing-default);--panel-padding-right-left-mobile:var(--spacing-default);--tile-background-default:var(--colors-gray-brand-white);--tile-text-title:var(--colors-gray-brand-dark-gray);--tile-text-content:var(--colors-gray-brand-dark-gray);--tile-border-color:var(--colors-gray-brand-gray);--tile-border-width-default:var(--borders-default);--tile-border-width-thick:var(--borders-thick);--tile-radius-default:var(--radius-default);--button-background-disabled:var(--colors-gray-brand-light-gray);--button-background-enabled:var(--colors-green-brand-primary);--button-background-enabled-gradient-from:var(--colors-green-brand-primary-light);--button-background-enabled-gradient-middle:var(--colors-green-brand-primary-dark);--button-background-enabled-gradient-to:var(--colors-green-brand-primary-midnight);--button-background-inverse:var(--colors-gray-brand-white);--button-background-hover:var(--colors-green-brand-primary-dark);--button-text-primary:var(--colors-gray-brand-white);--button-text-primary-disabled:var(--colors-gray-brand-gray);--button-text-secondary:var(--colors-green-brand-primary-dark);--button-text-secondary-disabled:var(--colors-green-brand-primary);--button-border-color-default:var(--colors-green-brand-primary);--button-border-color-disabled:var(--colors-gray-brand-gray);--button-border-color-selected:var(--colors-green-brand-primary-dark);--button-border-color-hover:var(--colors-green-brand-primary-dark);--button-border-width-default:var(--borders-default);--button-radius:var(--radius-huge);--form-background-white:var(--colors-gray-brand-white);--form-background-glassy:var(--colors-gray-brand-white-transparent-40);--form-background-disabled:var(--colors-gray-brand-bright-gray);--form-background-gray:var(--colors-gray-brand-light-gray);--form-border-color-disabled:var(--colors-gray-brand-light-gray);--form-border-color-selected-dark:var(--colors-green-brand-primary-dark);--form-border-color-error:var(--colors-status-error);--form-border-color-default:var(--colors-green-brand-primary-dark);--form-border-color-selected-glassy:var(--colors-gray-brand-white);--form-border-color-selected-light:var(--colors-green-brand-primary);--form-border-width-default:var(--borders-default);--form-border-width-selected:var(--borders-default);--form-radius-default:var(--radius-default);--form-text-label:var(--colors-gray-brand-dark-gray);--form-text-placeholder:var(--colors-gray-brand-gray);--form-text-content:var(--colors-gray-brand-dark-gray);--form-text-disabled:var(--colors-gray-brand-light-gray);--form-text-error:var(--colors-status-error);--form-text-label-glassy:var(--colors-gray-brand-white);--form-text-placeholder-glassy:var(--colors-gray-brand-light-gray);--form-text-content-glassy:var(--colors-gray-brand-white);--snackbar-background-error:var(--colors-status-error);--snackbar-border-color-error:var(--colors-status-error);--snackbar-border-width-default:var(--borders-thick);--snackbar-text-default:var(--colors-gray-brand-white);--icon-inverse-selected:var(--colors-green-brand-primary-dark);--icon-default:var(--colors-green-brand-primary-dark);--icon-inverse:var(--colors-gray-brand-white);--icon-default-selected:var(--colors-gray-brand-white);--icon-text-default:var(--colors-green-brand-primary-dark);--icon-text-glassy:var(--colors-gray-brand-white);--text-title-default:var(--colors-gray-brand-dark-gray);--text-title-glassy:var(--colors-gray-brand-white);--text-content-text:var(--colors-gray-brand-dark-gray);--text-content-text-light:var(--colors-gray-brand-light-gray);--text-content-text-white:var(--colors-gray-brand-white);--text-messages-error:var(--colors-status-error);--menu-hover:var(--colors-green-brand-primary-light);--menu-text-selected:var(--colors-green-brand-primary-light);--menu-flyout-gradient-to:var(--colors-green-brand-primary-midnight);--menu-flyout-gradient-from:var(--colors-green-brand-primary-light);--menu-background:var(--colors-gray-brand-white);--menu-dark:var(--colors-green-brand-primary-midnight);--illustrations-default:var(--colors-green-brand-primary);--illustrations-light:var(--colors-green-brand-primary-bright);--stepper-dot:var(--colors-green-brand-primary);--stepper-border-dot:var(--colors-gray-brand-light-gray);--stepper-border-dot-selected:var(--colors-green-brand-primary-dark);--stepper-line:var(--colors-green-brand-primary);--stepper-line-disabled:var(--colors-gray-brand-light-gray);--form-border-color-success:var(--colors-status-success);--form-border-color-warning:var(--colors-status-warning);--form-text-success:var(--colors-status-success);--form-text-warning:var(--colors-status-warning);--form-text-info:var(--colors-status-info);--snackbar-background-warning:var(--colors-status-warning);--snackbar-background-info:var(--colors-status-info);--snackbar-background-success:var(--colors-status-success);--snackbar-border-color-success:var(--colors-status-success);--snackbar-border-color-warning:var(--colors-status-warning);--snackbar-border-color-info:var(--colors-status-info);--icon-disabled:var(--form-text-disabled);--text-messages-info:var(--colors-status-info);--text-messages-warning:var(--colors-status-warning);--text-messages-success:var(--colors-status-success);--menu-white:var(--form-text-label-glassy);--stepper-label:var(--form-text-label);--stepper-dot-number:var(--text-content-text-white)}._suusButton_1q9to_1{--button-background-color:var(--colors-juice-sugarcane);min-height:3rem;font-family:var(--typeface-font-family-sans-serif), sans-serif;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:0 solid #0000;border-radius:50px;outline:none;justify-content:center;align-items:center;gap:.75rem;padding:0 2rem;font-size:1rem;font-weight:700;line-height:1;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,color .18s,opacity .18s;display:inline-flex}@media (width<=480px){._suusButton_1q9to_1{width:100%;min-width:0}}._icon_1q9to_45{color:currentColor;flex-shrink:0;justify-content:center;align-items:center;width:1.4rem;height:1.4rem;display:inline-flex}._icon_1q9to_45 svg{width:100%;height:100%;display:block}._label_1q9to_62{display:inline-block}._primary_1q9to_69{color:var(--button-text-primary);background:linear-gradient(180deg, color-mix(in srgb, var(--button-background-color) 85%, white 15%) 0%, var(--button-background-color) 60%, color-mix(in srgb, var(--button-background-color) 75%, black 25%) 100%);box-shadow:inset 0 3px 6px color-mix(in srgb, var(--button-background-color) 50%, white 50%), inset 0 -2px 4px color-mix(in srgb, var(--button-background-color) 60%, black 40%), 0 10px 18px #00000026;border-color:#0000}._primary_1q9to_69:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 2px #fff3,inset 0 -2px #00000024,0 12px 22px #0000002e}._primary_1q9to_69:focus-visible:not(:disabled){box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--button-background-color) 72%, white 28%), inset 0 2px 0 #ffffff2e, inset 0 -2px 0 #0000001f, 0 0 0 4px #ffffffe6}._primary_1q9to_69:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 6px #0000001f,inset 0 1px #ffffff1f}._secondary_1q9to_113{color:var(--button-text-secondary);border:2px solid var(--button-border-color-default);background:color-mix(in srgb, var(--button-background-inverse) 8%, white 92%);box-shadow:inset 0 1px #fffc,0 4px 12px #0000000f}._secondary_1q9to_113:hover:not(:disabled){background:color-mix(in srgb, var(--button-background-hover) 8%, white 92%);transform:translateY(-1px);box-shadow:inset 0 1px #ffffffe6,0 8px 18px #00000014}._secondary_1q9to_113:focus-visible:not(:disabled){box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--button-background-inverse) 18%, white 82%), 0 0 0 4px #fffffff2}._secondary_1q9to_113:active:not(:disabled){background:color-mix(in srgb, var(--button-background-inverse) 12%, white 88%);transform:translateY(1px);box-shadow:inset 0 2px 6px #00000014}._suusButton_1q9to_1:disabled{cursor:not-allowed;transform:none}._primary_1q9to_69:disabled{background:var(--button-background-disabled);color:var(--button-text-primary-disabled);box-shadow:none;border-color:#0000}._secondary_1q9to_113:disabled{color:var(--button-text-secondary);border-color:var(--button-border-color-disabled);box-shadow:none;background:#fff}._loading_1q9to_169{pointer-events:none}._loader_1q9to_173{border:2px solid #ffffff59;border-top-color:#fff;border-radius:999px;width:1.2rem;height:1.2rem;animation:.7s linear infinite _btn-spin_1q9to_1}._loaderSecondary_1q9to_182{border:2px solid color-mix(in srgb, var(--button-background-color) 20%, white 80%);border-top-color:var(--button-background-color)}@keyframes _btn-spin_1q9to_1{to{transform:rotate(360deg)}}
2
2
  /*$vite$:1*/
package/dist/suus-component-library.js CHANGED
@@ -1,31 +1,41 @@
1
1
  import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
2
- //#region src/components/form/buttons/input-button/input-button.js
3
- function r({ label: r, onClick: i, type: a = "button", disabled: o = !1, loading: s = !1, fullWidth: c = !1, variant: l = "primary", colorToken: u = "--colorProductSugarcane", icon: d, className: f = "", ...p }) {
4
- return t("button", {
5
- type: a,
6
- onClick: i,
7
- disabled: o || s,
8
- style: { "--btn-color": `var(${u})` },
2
+ var r = {
3
+ suusButton: "_suusButton_1q9to_1",
4
+ icon: "_icon_1q9to_45",
5
+ label: "_label_1q9to_62",
6
+ primary: "_primary_1q9to_69",
7
+ secondary: "_secondary_1q9to_113",
8
+ loading: "_loading_1q9to_169",
9
+ loader: "_loader_1q9to_173",
10
+ "btn-spin": "_btn-spin_1q9to_1",
11
+ loaderSecondary: "_loaderSecondary_1q9to_182"
12
+ };
13
+ //#endregion
14
+ //#region src/components/form/buttons/input-button/InputButton.tsx
15
+ function i({ label: i, onClick: a, type: o = "button", disabled: s = !1, loading: c = !1, variant: l = "primary", colorToken: u = "--colors-juice-sugarcane", icon: d, ...f }) {
16
+ return /* @__PURE__ */ t("button", {
17
+ type: o,
18
+ onClick: a,
19
+ disabled: s || c,
20
+ style: { "--button-background-color": `var(${u})` },
9
21
  className: [
10
- "suus-button",
11
- `suus-button--${l}`,
12
- c ? "btn--full" : "",
13
- s ? "btn--loading" : "",
14
- f
22
+ r.suusButton,
23
+ r[l],
24
+ c ? r.loading : ""
15
25
  ].filter(Boolean).join(" "),
16
- "aria-busy": s,
17
- ...p,
18
- children: s ? t("span", {
19
- className: `btn__loader ${l === "primary" ? "btn__loader--primary" : "btn__loader--secondary"}`,
26
+ "aria-busy": c,
27
+ ...f,
28
+ children: c ? /* @__PURE__ */ t("span", {
29
+ className: `${r.loader} ${l === "primary" ? "" : r.loaderSecondary}`,
20
30
  "aria-hidden": "true"
21
- }) : n(e, { children: [d ? t("span", {
22
- className: "btn__icon",
31
+ }) : /* @__PURE__ */ n(e, { children: [d ? /* @__PURE__ */ t("span", {
32
+ className: r.icon,
23
33
  children: d
24
- }) : null, t("span", {
25
- className: `btn__label ${l === "primary" ? "btn__loader--primary" : "btn__loader--secondary"}`,
26
- children: r
34
+ }) : null, /* @__PURE__ */ t("span", {
35
+ className: r.label,
36
+ children: i
27
37
  })] })
28
38
  });
29
39
  }
30
40
  //#endregion
31
- export { r as InputButton };
41
+ export { i as InputButton };
package/dist/suus-component-library.umd.cjs CHANGED
@@ -1 +1 @@
1
- (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`SUUS Component Library`]={},e.jsxRuntime))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function n({label:e,onClick:n,type:r=`button`,disabled:i=!1,loading:a=!1,fullWidth:o=!1,variant:s=`primary`,colorToken:c=`--colorProductSugarcane`,icon:l,className:u=``,...d}){return(0,t.jsx)(`button`,{type:r,onClick:n,disabled:i||a,style:{"--btn-color":`var(${c})`},className:[`suus-button`,`suus-button--${s}`,o?`btn--full`:``,a?`btn--loading`:``,u].filter(Boolean).join(` `),"aria-busy":a,...d,children:a?(0,t.jsx)(`span`,{className:`btn__loader ${s===`primary`?`btn__loader--primary`:`btn__loader--secondary`}`,"aria-hidden":`true`}):(0,t.jsxs)(t.Fragment,{children:[l?(0,t.jsx)(`span`,{className:`btn__icon`,children:l}):null,(0,t.jsx)(`span`,{className:`btn__label ${s===`primary`?`btn__loader--primary`:`btn__loader--secondary`}`,children:e})]})})}e.InputButton=n});
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`SUUS Component Library`]={},e.jsxRuntime))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n={suusButton:`_suusButton_1q9to_1`,icon:`_icon_1q9to_45`,label:`_label_1q9to_62`,primary:`_primary_1q9to_69`,secondary:`_secondary_1q9to_113`,loading:`_loading_1q9to_169`,loader:`_loader_1q9to_173`,"btn-spin":`_btn-spin_1q9to_1`,loaderSecondary:`_loaderSecondary_1q9to_182`};function r({label:e,onClick:r,type:i=`button`,disabled:a=!1,loading:o=!1,variant:s=`primary`,colorToken:c=`--colors-juice-sugarcane`,icon:l,...u}){return(0,t.jsx)(`button`,{type:i,onClick:r,disabled:a||o,style:{"--button-background-color":`var(${c})`},className:[n.suusButton,n[s],o?n.loading:``].filter(Boolean).join(` `),"aria-busy":o,...u,children:o?(0,t.jsx)(`span`,{className:`${n.loader} ${s===`primary`?``:n.loaderSecondary}`,"aria-hidden":`true`}):(0,t.jsxs)(t.Fragment,{children:[l?(0,t.jsx)(`span`,{className:n.icon,children:l}):null,(0,t.jsx)(`span`,{className:n.label,children:e})]})})}e.InputButton=r});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "suus-component-library",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "type": "module",
5
5
  "main": "./dist/suus-component-library.umd.cjs",
6
6
  "module": "./dist/suus-component-library.js",
@@ -21,21 +21,33 @@
21
21
  "build": "tsc -b && vite build",
22
22
  "preview": "vite preview",
23
23
  "pack": "npm pack",
24
- "publish:public": "npm publish --access public",
25
- "publish:private": "npm publish"
24
+ "publish": "npm version patch && npm publish",
25
+ "storybook": "storybook dev -p 6006",
26
+ "build-storybook": "storybook build"
26
27
  },
27
28
  "peerDependencies": {
28
29
  "react": "^18.3.0 || ^19.0.0",
29
30
  "react-dom": "^18.3.0 || ^19.0.0"
30
31
  },
31
32
  "devDependencies": {
33
+ "@eslint/js": "^10.0.1",
34
+ "@storybook/react-vite": "^10.3.6",
32
35
  "@types/react": "latest",
33
36
  "@types/react-dom": "latest",
34
37
  "@vitejs/plugin-react": "latest",
38
+ "eslint-plugin-react-hooks": "^7.1.1",
39
+ "eslint-plugin-react-refresh": "^0.5.2",
40
+ "eslint-plugin-storybook": "^10.3.6",
41
+ "globals": "^17.6.0",
42
+ "react": "latest",
43
+ "react-dom": "latest",
44
+ "storybook": "^10.3.6",
35
45
  "typescript": "latest",
46
+ "typescript-eslint": "^8.59.2",
36
47
  "vite": "latest",
37
- "vite-plugin-dts": "latest",
38
- "react": "latest",
39
- "react-dom": "latest"
48
+ "vite-plugin-dts": "latest"
49
+ },
50
+ "dependencies": {
51
+ "suus-design-tokens": "^1.0.13"
40
52
  }
41
53
  }
package/dist/src/components/form/buttons/input-button/input-button.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-button.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/buttons/input-button/input-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EACI,KAAK,EACL,OAAO,EACP,IAAe,EACf,QAAgB,EAChB,OAAe,EACf,SAAiB,EACjB,OAAmB,EACnB,UAAsC,EACtC,IAAI,EACJ,SAAc,EACd,GAAG,IAAI,EACV,EAAE,WAAW,2CAsCjD"}
package/dist/src/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default as InputButton } from './components/form/buttons/input-button/input-button';
2
- //# sourceMappingURL=index.d.ts.map
package/dist/src/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qDAAqD,CAAC"}