@drivy/cobalt 2.7.0 → 2.8.0

package/components/Buttons/Button/ButtonComponent.js

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import '../../Icon/index.js';
+import LoadingIcon from '../../Icon/__generated__/LoadingIcon.js';
+
+const InnerButton = ({ children, loading, }) => (React.createElement(React.Fragment, null,
+    loading && React.createElement(LoadingIcon, { className: "cobalt-button__loading-icon" }),
+    children));
+const ButtonBase = forwardRef((props, ref) => {
+    const { disabled, loading, children, ...restProps } = props;
+    return (React.createElement("button", { ref: ref, "aria-disabled": disabled || loading, "aria-busy": loading, disabled: disabled || loading, ...restProps },
+        React.createElement(InnerButton, { loading: loading }, children)));
+});
+ButtonBase.displayName = "ButtonBase";
+const ButtonLinkBase = forwardRef((props, ref) => {
+    const { disabled, target, rel, loading, children, ...restProps } = props;
+    return (React.createElement("a", { ref: ref, "aria-disabled": disabled || loading, "aria-busy": loading, "data-disabled": disabled || loading, target: target, rel: target === "_blank" && !rel ? "noopener noreferrer" : rel, ...restProps },
+        React.createElement(InnerButton, { loading: loading }, children)));
+});
+ButtonLinkBase.displayName = "ButtonLinkBase";
+
+export { ButtonBase, ButtonLinkBase };
+//# sourceMappingURL=ButtonComponent.js.map

package/components/Buttons/Button/ButtonComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonComponent.js","sources":["../../../../src/components/Buttons/Button/ButtonComponent.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport { LoadingIcon } from \"../../Icon\"\nimport { ButtonComponentProps, ButtonLinkComponentProps } from \"./type\"\n\nconst InnerButton = ({\n  children,\n  loading,\n}: {\n  children:\n    | ButtonComponentProps[\"children\"]\n    | ButtonLinkComponentProps[\"children\"]\n  loading: ButtonComponentProps[\"loading\"] | ButtonLinkComponentProps[\"loading\"]\n}) => (\n  <>\n    {loading && <LoadingIcon className=\"cobalt-button__loading-icon\" />}\n    {children}\n  </>\n)\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonComponentProps>(\n  (props: ButtonComponentProps, ref) => {\n    const { disabled, loading, children, ...restProps } = props\n    return (\n      <button\n        ref={ref}\n        aria-disabled={disabled || loading}\n        aria-busy={loading}\n        disabled={disabled || loading}\n        {...restProps}\n      >\n        <InnerButton loading={loading}>{children}</InnerButton>\n      </button>\n    )\n  }\n)\nButtonBase.displayName = \"ButtonBase\"\n\nexport const ButtonLinkBase = forwardRef<\n  HTMLAnchorElement,\n  ButtonLinkComponentProps\n>((props: ButtonLinkComponentProps, ref) => {\n  const { disabled, target, rel, loading, children, ...restProps } = props\n  return (\n    <a\n      ref={ref}\n      aria-disabled={disabled || loading}\n      aria-busy={loading}\n      data-disabled={disabled || loading}\n      target={target}\n      rel={target === \"_blank\" && !rel ? \"noopener noreferrer\" : rel}\n      {...restProps}\n    >\n      <InnerButton loading={loading}>{children}</InnerButton>\n    </a>\n  )\n})\nButtonLinkBase.displayName = \"ButtonLinkBase\"\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,GAMR,MACC,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACG,IAAA,OAAO,IAAI,KAAC,CAAA,aAAA,CAAA,WAAW,IAAC,SAAS,EAAC,6BAA6B,EAAG,CAAA;IAClE,QAAQ,CACR,CACJ,CAAA;AAEY,MAAA,UAAU,GAAG,UAAU,CAClC,CAAC,KAA2B,EAAE,GAAG,KAAI;AACnC,IAAA,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;AAC3D,IAAA,QACE,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EAAA,eAAA,EACO,QAAQ,IAAI,OAAO,EACvB,WAAA,EAAA,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,OAAO,KACzB,SAAS,EAAA;QAEb,KAAC,CAAA,aAAA,CAAA,WAAW,EAAC,EAAA,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAe,CAChD,EACV;AACH,CAAC,EACF;AACD,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAExB,MAAA,cAAc,GAAG,UAAU,CAGtC,CAAC,KAA+B,EAAE,GAAG,KAAI;AACzC,IAAA,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;AACxE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,GAAG,EAAE,GAAG,mBACO,QAAQ,IAAI,OAAO,EAAA,WAAA,EACvB,OAAO,EACH,eAAA,EAAA,QAAQ,IAAI,OAAO,EAClC,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,KAAK,QAAQ,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,KAC1D,SAAS,EAAA;QAEb,KAAC,CAAA,aAAA,CAAA,WAAW,EAAC,EAAA,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAe,CACrD,EACL;AACH,CAAC,EAAC;AACF,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/components/Buttons/Button/index.js

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { isLinkProps } from './type.js';
+import { ButtonLinkBase, ButtonBase } from './ButtonComponent.js';
+import '../../Icon/index.js';
+import ChevronRightIcon from '../../Icon/__generated__/ChevronRightIcon.js';
+
+const getComputedClassName = ({ className, variant, size, destructive, primary, text, isIconOnly, fullWidth, }) => {
+    return cx(className, "cobalt-button", {
+        "cobalt-button--primary": primary,
+        "cobalt-button--destructive": destructive,
+        "cobalt-button--text": text,
+        "cobalt-button--icon-only": isIconOnly,
+        "cobalt-button--small": size === "small",
+        "cobalt-button--large": size === "large",
+        "cobalt-button--warning": variant === "warning",
+        "cobalt-button--secondary": variant === "secondary",
+        "cobalt-button--tertiary": variant === "tertiary",
+        "cobalt-button--business": variant === "business",
+        "cobalt-button--success": variant === "success",
+        "cobalt-button--neutral": variant === "neutral",
+        "c-w-full": fullWidth,
+    });
+};
+const Button = forwardRef((props, ref) => {
+    const { children, className, variant, size, destructive, primary, text, icon, fullWidth, ...restProps } = props;
+    const computedClassName = getComputedClassName({
+        className,
+        variant,
+        size,
+        destructive,
+        primary,
+        text,
+        fullWidth,
+        isIconOnly: !!icon && !children,
+    });
+    const content = (React.createElement(React.Fragment, null,
+        icon,
+        children && React.createElement("span", null, children),
+        text && children ? React.createElement(ChevronRightIcon, null) : null));
+    if (isLinkProps(restProps)) {
+        return (React.createElement(ButtonLinkBase, { ...restProps, className: computedClassName, ref: ref }, content));
+    }
+    return (React.createElement(ButtonBase, { ...restProps, className: computedClassName, ref: ref }, content));
+});
+Button.displayName = "Button";
+
+export { Button as default };
+//# sourceMappingURL=index.js.map

package/components/Buttons/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n  ButtonComponentProps,\n  ButtonLinkComponentProps,\n  ButtonProps,\n  isLinkProps,\n} from \"./type\"\nimport { ButtonLinkBase, ButtonBase } from \"./ButtonComponent\"\nimport { ChevronRightIcon } from \"../../Icon\"\n\nconst getComputedClassName = ({\n  className,\n  variant,\n  size,\n  destructive,\n  primary,\n  text,\n  isIconOnly,\n  fullWidth,\n}: {\n  className?: ButtonProps[\"className\"]\n  variant?: ButtonProps[\"variant\"]\n  size?: ButtonProps[\"size\"]\n  destructive?: ButtonProps[\"destructive\"]\n  primary?: ButtonProps[\"primary\"]\n  text?: ButtonProps[\"text\"]\n  isIconOnly?: boolean\n  fullWidth?: ButtonProps[\"fullWidth\"]\n}) => {\n  return cx(className, \"cobalt-button\", {\n    \"cobalt-button--primary\": primary,\n    \"cobalt-button--destructive\": destructive,\n    \"cobalt-button--text\": text,\n    \"cobalt-button--icon-only\": isIconOnly,\n    \"cobalt-button--small\": size === \"small\",\n    \"cobalt-button--large\": size === \"large\",\n    \"cobalt-button--warning\": variant === \"warning\",\n    \"cobalt-button--secondary\": variant === \"secondary\",\n    \"cobalt-button--tertiary\": variant === \"tertiary\",\n    \"cobalt-button--business\": variant === \"business\",\n    \"cobalt-button--success\": variant === \"success\",\n    \"cobalt-button--neutral\": variant === \"neutral\",\n    \"c-w-full\": fullWidth,\n  })\n}\n\ninterface ButtonOverloads {\n  (\n    props: Exclude<ButtonProps, ButtonComponentProps> &\n      React.RefAttributes<HTMLAnchorElement>\n  ): React.ReactElement\n  (\n    props: Exclude<ButtonProps, ButtonLinkComponentProps> &\n      React.RefAttributes<HTMLButtonElement>\n  ): React.ReactElement\n  displayName?: string\n}\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n  (props, ref) => {\n    const {\n      children,\n      className,\n      variant,\n      size,\n      destructive,\n      primary,\n      text,\n      icon,\n      fullWidth,\n      ...restProps\n    } = props\n\n    const computedClassName = getComputedClassName({\n      className,\n      variant,\n      size,\n      destructive,\n      primary,\n      text,\n      fullWidth,\n      isIconOnly: !!icon && !children,\n    })\n\n    const content = (\n      <>\n        {icon}\n        {children && <span>{children}</span>}\n        {text && children ? <ChevronRightIcon /> : null}\n      </>\n    )\n\n    if (isLinkProps(restProps)) {\n      return (\n        <ButtonLinkBase\n          {...(restProps as ButtonLinkComponentProps)}\n          className={computedClassName}\n          ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n        >\n          {content}\n        </ButtonLinkBase>\n      )\n    }\n\n    return (\n      <ButtonBase\n        {...(restProps as ButtonComponentProps)}\n        className={computedClassName}\n        ref={ref as React.ForwardedRef<HTMLButtonElement>}\n      >\n        {content}\n      </ButtonBase>\n    )\n  }\n) as ButtonOverloads\n\nButton.displayName = \"Button\"\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,GAUV,KAAI;AACH,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;AACpC,QAAA,wBAAwB,EAAE,OAAO;AACjC,QAAA,4BAA4B,EAAE,WAAW;AACzC,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,0BAA0B,EAAE,UAAU;QACtC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,0BAA0B,EAAE,OAAO,KAAK,WAAW;QACnD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,wBAAwB,EAAE,OAAO,KAAK,SAAS;AAC/C,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAcK,MAAA,MAAM,GAAG,UAAU,CACvB,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;QAC7C,SAAS;QACT,OAAO;QACP,IAAI;QACJ,WAAW;QACX,OAAO;QACP,IAAI;QACJ,SAAS;AACT,QAAA,UAAU,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;AAChC,KAAA,CAAC,CAAA;IAEF,MAAM,OAAO,IACX,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,IAAI;QACJ,QAAQ,IAAI,KAAO,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAQ,CAAQ;AACnC,QAAA,IAAI,IAAI,QAAQ,GAAG,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAG,IAAA,CAAA,GAAG,IAAI,CAC9C,CACJ,CAAA;AAED,IAAA,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;AAC1B,QAAA,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACR,EAAA,GAAA,SAAsC,EAC3C,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACO,EAClB;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,EACJ,EAAA,GAAA,SAAkC,EACvC,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACG,EACd;AACH,CAAC,EACiB;AAEpB,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/components/Buttons/Button/type.js

@@ -0,0 +1,4 @@
+const isLinkProps = (props) => "href" in props && !!props.href;
+
+export { isLinkProps };
+//# sourceMappingURL=type.js.map

package/components/Buttons/Button/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sources":["../../../../src/components/Buttons/Button/type.ts"],"sourcesContent":["type SharedButtonApiProps = {\n  loading?: boolean\n  disabled?: boolean\n  primary?: boolean\n  destructive?: boolean\n  icon?: React.ReactNode\n  text?: boolean\n  fullWidth?: boolean\n  // React.HTMLAttributes allows color to be passed in, but we don't want to allow it\n  color?: never\n}\n\ntype SharedConditionalTextProps =\n  | {\n      text: true\n      icon: React.ReactNode\n      children?: never | false | undefined | null\n      fullWidth?: never | false\n    }\n  | {\n      text: true\n      icon?: never\n      fullWidth?: never | false\n    }\n  | {\n      text?: false\n    }\n\ntype SharedConditionalVariantProps =\n  | {\n      size?: \"large\"\n      variant?: never\n    }\n  | {\n      size: \"small\"\n      destructive?: false\n      primary?: false\n      // Those variants are only available for small buttons\n      variant:\n        | \"warning\"\n        | \"secondary\"\n        | \"tertiary\"\n        | \"business\"\n        | \"success\"\n        | \"neutral\"\n    }\n  | {\n      size: \"small\"\n      variant?: never\n    }\n\n// Button props\nexport type ButtonComponentProps =\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    loading?: SharedButtonApiProps[\"loading\"]\n    disabled?: SharedButtonApiProps[\"disabled\"]\n    href?: never\n  }\n\n// Link props\nexport type ButtonLinkComponentProps =\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    loading?: SharedButtonApiProps[\"loading\"]\n    disabled?: SharedButtonApiProps[\"disabled\"]\n    href?: string\n  }\n\nexport const isLinkProps = (\n  props: ButtonComponentProps | ButtonLinkComponentProps\n): props is ButtonLinkComponentProps => \"href\" in props && !!props.href\n\nexport type ButtonProps = (ButtonComponentProps | ButtonLinkComponentProps) &\n  SharedButtonApiProps &\n  SharedConditionalVariantProps &\n  SharedConditionalTextProps\n"],"names":[],"mappings":"AAmEa,MAAA,WAAW,GAAG,CACzB,KAAsD,KAChB,MAAM,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC;;;;"}

package/components/Buttons/ButtonsGroup.js

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import GhostButton from './GhostButton/index.js';
 import InversedButton from './InversedButton/index.js';
 import DefaultButton from './DefaultButton/index.js';
+import Button from './Button/index.js';
 
 const isButton = (component) => React.isValidElement(component) &&
     (component.type === GhostButton ||
@@ -10,7 +11,8 @@ const isButton = (component) => React.isValidElement(component) &&
         component.type === InversedButton ||
         component.type === InversedButton.Link ||
         component.type === DefaultButton ||
-        component.type === DefaultButton.Link);
+        component.type === DefaultButton.Link ||
+        component.type === Button);
 const ButtonsGroup = ({ className, children, align }) => (React.createElement("div", { className: cx(className, "cobalt-buttons-group", {
         "cobalt-buttons-group--right": align === "right",
         "cobalt-buttons-group--center": align === "center",

package/components/Buttons/ButtonsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonsGroup.js","sources":["../../../src/components/Buttons/ButtonsGroup.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\n\nimport GhostButton from \"./GhostButton\"\nimport InversedButton from \"./InversedButton\"\nimport DefaultButton from \"./DefaultButton\"\nimport { AllButtonsPropsType } from \"./\"\n\nexport interface ButtonsGroupProps {\n  className?: string\n  children: React.ReactNode\n  align?: \"fullWidth\" | \"right\" | \"center\"\n}\n\nconst isButton = (\n  component: React.ReactNode\n): component is React.ReactElement<AllButtonsPropsType> =>\n  React.isValidElement(component) &&\n  (component.type === GhostButton ||\n    component.type === GhostButton.Link ||\n    component.type === InversedButton ||\n    component.type === InversedButton.Link ||\n    component.type === DefaultButton ||\n    component.type === DefaultButton.Link)\n\nconst ButtonsGroup = ({ className, children, align }: ButtonsGroupProps) => (\n  <div\n    className={cx(className, \"cobalt-buttons-group\", {\n      \"cobalt-buttons-group--right\": align === \"right\",\n      \"cobalt-buttons-group--center\": align === \"center\",\n    })}\n  >\n    {Children.toArray(children).map((child, index) =>\n      isButton(child)\n        ? React.cloneElement(child, {\n            key: index,\n            className: cx(\"cobalt-buttons-group__item\", {\n              \"cobalt-buttons-group__item--fullWidth\": align === \"fullWidth\",\n            }),\n            fullWidth: align === \"fullWidth\",\n          })\n        : child\n    )}\n  </div>\n)\n\nexport default ButtonsGroup\n"],"names":[],"mappings":";;;;;;AAcA,MAAM,QAAQ,GAAG,CACf,SAA0B,KAE1B,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC;AAC/B,KAAC,SAAS,CAAC,IAAI,KAAK,WAAW;AAC7B,QAAA,SAAS,CAAC,IAAI,KAAK,WAAW,CAAC,IAAI;QACnC,SAAS,CAAC,IAAI,KAAK,cAAc;AACjC,QAAA,SAAS,CAAC,IAAI,KAAK,cAAc,CAAC,IAAI;QACtC,SAAS,CAAC,IAAI,KAAK,aAAa;AAChC,QAAA,SAAS,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI,CAAC,CAAA;AAEpC,MAAA,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAqB,MACrE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE;QAC/C,6BAA6B,EAAE,KAAK,KAAK,OAAO;QAChD,8BAA8B,EAAE,KAAK,KAAK,QAAQ;KACnD,CAAC,EAAA,EAED,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAC3C,QAAQ,CAAC,KAAK,CAAC;AACb,MAAE,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;AACxB,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE;YAC1C,uCAAuC,EAAE,KAAK,KAAK,WAAW;SAC/D,CAAC;QACF,SAAS,EAAE,KAAK,KAAK,WAAW;KACjC,CAAC;AACJ,MAAE,KAAK,CACV,CACG;;;;"}
+{"version":3,"file":"ButtonsGroup.js","sources":["../../../src/components/Buttons/ButtonsGroup.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\n\nimport GhostButton from \"./GhostButton\"\nimport InversedButton from \"./InversedButton\"\nimport DefaultButton from \"./DefaultButton\"\nimport { AllButtonsPropsType } from \"./\"\nimport Button from \"./Button\"\n\nexport interface ButtonsGroupProps {\n  className?: string\n  children: React.ReactNode\n  align?: \"fullWidth\" | \"right\" | \"center\"\n}\n\nconst isButton = (\n  component: React.ReactNode\n): component is React.ReactElement<AllButtonsPropsType> =>\n  React.isValidElement(component) &&\n  (component.type === GhostButton ||\n    component.type === GhostButton.Link ||\n    component.type === InversedButton ||\n    component.type === InversedButton.Link ||\n    component.type === DefaultButton ||\n    component.type === DefaultButton.Link ||\n    component.type === Button)\n\nconst ButtonsGroup = ({ className, children, align }: ButtonsGroupProps) => (\n  <div\n    className={cx(className, \"cobalt-buttons-group\", {\n      \"cobalt-buttons-group--right\": align === \"right\",\n      \"cobalt-buttons-group--center\": align === \"center\",\n    })}\n  >\n    {Children.toArray(children).map((child, index) =>\n      isButton(child)\n        ? React.cloneElement(child, {\n            key: index,\n            className: cx(\"cobalt-buttons-group__item\", {\n              \"cobalt-buttons-group__item--fullWidth\": align === \"fullWidth\",\n            }),\n            fullWidth: align === \"fullWidth\",\n          })\n        : child\n    )}\n  </div>\n)\n\nexport default ButtonsGroup\n"],"names":[],"mappings":";;;;;;;AAeA,MAAM,QAAQ,GAAG,CACf,SAA0B,KAE1B,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC;AAC/B,KAAC,SAAS,CAAC,IAAI,KAAK,WAAW;AAC7B,QAAA,SAAS,CAAC,IAAI,KAAK,WAAW,CAAC,IAAI;QACnC,SAAS,CAAC,IAAI,KAAK,cAAc;AACjC,QAAA,SAAS,CAAC,IAAI,KAAK,cAAc,CAAC,IAAI;QACtC,SAAS,CAAC,IAAI,KAAK,aAAa;AAChC,QAAA,SAAS,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI;AACrC,QAAA,SAAS,CAAC,IAAI,KAAK,MAAM,CAAC,CAAA;AAExB,MAAA,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAqB,MACrE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE;QAC/C,6BAA6B,EAAE,KAAK,KAAK,OAAO;QAChD,8BAA8B,EAAE,KAAK,KAAK,QAAQ;KACnD,CAAC,EAAA,EAED,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAC3C,QAAQ,CAAC,KAAK,CAAC;AACb,MAAE,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;AACxB,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE;YAC1C,uCAAuC,EAAE,KAAK,KAAK,WAAW;SAC/D,CAAC;QACF,SAAS,EAAE,KAAK,KAAK,WAAW;KACjC,CAAC;AACJ,MAAE,KAAK,CACV,CACG;;;;"}

package/index.js

@@ -121,7 +121,6 @@ export { default as CheckCircleIcon } from './components/Icon/__generated__/Chec
 export { default as ChecklistIcon } from './components/Icon/__generated__/ChecklistIcon.js';
 export { default as ChevronDownIcon } from './components/Icon/__generated__/ChevronDownIcon.js';
 export { default as ChevronLeftIcon } from './components/Icon/__generated__/ChevronLeftIcon.js';
-export { default as ChevronRightIcon } from './components/Icon/__generated__/ChevronRightIcon.js';
 export { default as ChevronUpIcon } from './components/Icon/__generated__/ChevronUpIcon.js';
 export { default as CircledArrowLeftIcon } from './components/Icon/__generated__/CircledArrowLeftIcon.js';
 export { default as CircledArrowRightIcon } from './components/Icon/__generated__/CircledArrowRightIcon.js';
@@ -366,6 +365,7 @@ export { default as YingyangIcon } from './components/Icon/__generated__/Yingyan
 export { default as RatingLabel } from './components/Rating/RatingLabel.js';
 export { useAccordionItemContext } from '@ark-ui/react';
 export { default as CheckIcon } from './components/Icon/__generated__/CheckIcon.js';
+export { default as ChevronRightIcon } from './components/Icon/__generated__/ChevronRightIcon.js';
 export { default as LoadingIcon } from './components/Icon/__generated__/LoadingIcon.js';
 export { default as StarIcon } from './components/Icon/__generated__/StarIcon.js';
 export { RatingInput } from './components/Rating/RatingInput.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@getaround-eu/babel-preset-app": "1.4.5",
+    "@getaround-eu/babel-preset-app": "1.4.6",
     "@getaround-eu/eslint-config": "3.1.0",
     "@getaround-eu/prettier-config": "1.2.1",
     "@getaround-eu/stylelint-config": "3.0.1",
@@ -61,8 +61,8 @@
     "@types/node": "22.14.1",
     "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
-    "autoprefixer": "10.4.21",
-    "core-js": "3.46.0",
+    "autoprefixer": "10.4.22",
+    "core-js": "3.47.0",
     "css-loader": "7.1.2",
     "eslint": "8.57.1",
     "eslint-plugin-storybook": "^0.12.0",
@@ -88,7 +88,7 @@
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.93.2",
+    "sass": "1.95.0",
     "sass-loader": "13.3.3",
     "sharp-cli": "5.2.0",
     "storybook": "7.6.20",
@@ -96,8 +96,8 @@
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.3.2",
-    "ts-jest": "29.4.5",
-    "tsx": "4.20.6",
+    "ts-jest": "29.4.6",
+    "tsx": "4.21.0",
     "typescript": "5.4.5"
   },
   "keywords": [

package/styles/components/Buttons/Button/index.scss

@@ -0,0 +1,140 @@
+.cobalt-button {
+  @apply c-state-interactive c-transition c-px-[20px] c-border c-border-outline c-rounded-lg c-bg-surface c-text-primary c-text-body-md c-font-bold c-gap-2xs hover:c-drop-shadow-lg;
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+
+  cursor: pointer;
+
+  transform: scale(1);
+  user-select: none;
+  appearance: none;
+
+  &:active {
+    transform: scale(0.97);
+  }
+
+  .cobalt-Icon {
+    width: 24px;
+    height: 24px;
+
+    flex-shrink: 0;
+  }
+
+  &.cobalt-button--large {
+    @apply c-px-md;
+    min-height: 48px;
+    min-width: 48px;
+  }
+
+  &.cobalt-button--small {
+    @apply c-px-[12px] hover:c-drop-shadow-md;
+    min-width: 32px;
+    min-height: 32px;
+
+    font-size: 14px;
+
+    .cobalt-Icon {
+      width: 20px;
+      height: 20px;
+    }
+
+    &.cobalt-button--warning {
+      @apply c-bg-warning c-border-warning c-text-onWarning;
+    }
+
+    &.cobalt-button--tertiary {
+      @apply c-bg-tertiary c-border-tertiary c-text-onTertiary;
+    }
+
+    &.cobalt-button--secondary {
+      @apply c-bg-secondary c-border-secondary c-text-onSecondary;
+    }
+
+    &.cobalt-button--business {
+      @apply c-bg-businessContainer c-border-businessContainer c-text-onBusinessContainer;
+    }
+
+    &.cobalt-button--success {
+      @apply c-bg-success c-border-success c-text-onSuccess;
+    }
+
+    &.cobalt-button--neutral {
+      @apply c-bg-neutral c-border-neutral c-text-onNeutral;
+    }
+  }
+
+  &.cobalt-button--primary {
+    @apply c-bg-primary c-border-primary c-text-onPrimary;
+
+    &.cobalt-button--destructive {
+      @apply c-bg-error c-border-error c-text-onError;
+    }
+  }
+
+  &.cobalt-button--icon-only {
+    @apply c-p-none c-rounded-full;
+  }
+
+  &.cobalt-button--text {
+    @apply c-state-none c-transform-none hover:c-underline c-px-none c-bg-transparent c-border-transparent c-text-current c-drop-shadow-none c-gap-none;
+    transition: text-underline-offset 0.25s ease;
+
+    text-underline-offset: 2px;
+
+    &:active {
+      text-underline-offset: 1px;
+    }
+
+    &.cobalt-button--icon-only {
+      @apply c-state-interactive;
+    }
+  }
+
+  &.cobalt-button--destructive {
+    @apply c-text-error;
+  }
+
+  &[disabled][aria-disabled]:not([aria-disabled="false"]):not(
+      [aria-busy="true"]
+    ) {
+    @apply c-state-none c-text-onSurfaceDisabled c-drop-shadow-none hover:c-no-underline;
+    opacity: 1;
+    cursor: not-allowed;
+
+    &:not(.cobalt-button--text) {
+      @apply c-bg-disabled c-border-transparent;
+    }
+  }
+
+  &[aria-busy="true"] {
+    @apply c-state-none c-drop-shadow-none hover:c-no-underline;
+    --c-state-interactive-color: var(--c-press);
+    cursor: not-allowed;
+
+    &:focus,
+    &:hover,
+    &:active {
+      --c-state-interactive-color: var(--c-press);
+
+      transform: scale(1);
+    }
+  }
+
+  .cobalt-button__loading-icon {
+    position: absolute;
+
+    margin: auto;
+  }
+
+  &[aria-busy="true"] > *:not(.cobalt-button__loading-icon) {
+    color: transparent;
+  }
+}

package/styles/components/Buttons/index.scss

@@ -133,7 +133,7 @@
 }
 
 .cobalt-buttons-group {
-  @apply c--mt-sm;
+  @apply c--mt-xs c-gap-x-sm;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -147,13 +147,7 @@
   }
 
   &__item {
-    @apply c-mt-sm;
-
-    &:not(.cobalt-buttons-group__item--fullWidth):not(
-        .cobalt-buttons-group__item--xs\:fullWidth
-      ) {
-      @apply c-mr-sm;
-    }
+    @apply c-mt-xs;
 
     &--fullWidth {
       flex: 1 1 auto;
@@ -168,6 +162,7 @@
   }
 }
 
+@import "./Button/index.scss";
 @import "./InversedButton/index.scss";
 @import "./GhostButton/index.scss";
 @import "./DefaultButton/index.scss";

package/types/src/components/Buttons/Button/ButtonComponent.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const ButtonBase: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    href?: undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const ButtonLinkBase: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+} & React.RefAttributes<HTMLAnchorElement>>;

package/types/src/components/Buttons/Button/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ButtonComponentProps, ButtonLinkComponentProps, ButtonProps } from "./type";
+interface ButtonOverloads {
+    (props: Exclude<ButtonProps, ButtonComponentProps> & React.RefAttributes<HTMLAnchorElement>): React.ReactElement;
+    (props: Exclude<ButtonProps, ButtonLinkComponentProps> & React.RefAttributes<HTMLButtonElement>): React.ReactElement;
+    displayName?: string;
+}
+declare const Button: ButtonOverloads;
+export default Button;

package/types/src/components/Buttons/Button/type.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+type SharedButtonApiProps = {
+    loading?: boolean;
+    disabled?: boolean;
+    primary?: boolean;
+    destructive?: boolean;
+    icon?: React.ReactNode;
+    text?: boolean;
+    fullWidth?: boolean;
+    color?: never;
+};
+type SharedConditionalTextProps = {
+    text: true;
+    icon: React.ReactNode;
+    children?: never | false | undefined | null;
+    fullWidth?: never | false;
+} | {
+    text: true;
+    icon?: never;
+    fullWidth?: never | false;
+} | {
+    text?: false;
+};
+type SharedConditionalVariantProps = {
+    size?: "large";
+    variant?: never;
+} | {
+    size: "small";
+    destructive?: false;
+    primary?: false;
+    variant: "warning" | "secondary" | "tertiary" | "business" | "success" | "neutral";
+} | {
+    size: "small";
+    variant?: never;
+};
+export type ButtonComponentProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    loading?: SharedButtonApiProps["loading"];
+    disabled?: SharedButtonApiProps["disabled"];
+    href?: never;
+};
+export type ButtonLinkComponentProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    loading?: SharedButtonApiProps["loading"];
+    disabled?: SharedButtonApiProps["disabled"];
+    href?: string;
+};
+export declare const isLinkProps: (props: ButtonComponentProps | ButtonLinkComponentProps) => props is ButtonLinkComponentProps;
+export type ButtonProps = (ButtonComponentProps | ButtonLinkComponentProps) & SharedButtonApiProps & SharedConditionalVariantProps & SharedConditionalTextProps;
+export {};