@drivy/cobalt 2.9.3 → 2.11.0

package/components/Buttons/Button/index.js

@@ -5,7 +5,7 @@ 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, }) => {
+const getComputedClassName = ({ className, variant, size, destructive, primary, text, isIconOnly, fullWidth, selected, }) => {
     return cx(className, "cobalt-button", {
         "cobalt-button--primary": primary,
         "cobalt-button--destructive": destructive,
@@ -19,11 +19,12 @@ const getComputedClassName = ({ className, variant, size, destructive, primary,
         "cobalt-button--business": variant === "business",
         "cobalt-button--success": variant === "success",
         "cobalt-button--neutral": variant === "neutral",
+        "cobalt-button--selected": selected,
         "c-w-full": fullWidth,
     });
 };
 const Button = forwardRef((props, ref) => {
-    const { children, className, variant, size, destructive, primary, text, icon, fullWidth, ...restProps } = props;
+    const { children, className, variant, size, destructive, primary, text, icon, fullWidth, selected, ...restProps } = props;
     const computedClassName = getComputedClassName({
         className,
         variant,
@@ -32,11 +33,12 @@ const Button = forwardRef((props, ref) => {
         primary,
         text,
         fullWidth,
+        selected,
         isIconOnly: !!icon && !children,
     });
     const content = (React.createElement(React.Fragment, null,
         icon,
-        children && React.createElement("span", null, children),
+        children,
         text && children ? React.createElement(ChevronRightIcon, null) : null));
     if (isLinkProps(restProps)) {
         return (React.createElement(ButtonLinkBase, { ...restProps, className: computedClassName, ref: ref }, content));

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

@@ -1 +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;;;;"}
+{"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  selected,\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  selected?: ButtonProps[\"selected\"]\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    \"cobalt-button--selected\": selected,\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      selected,\n      ...restProps\n    } = props\n\n    const computedClassName = getComputedClassName({\n      className,\n      variant,\n      size,\n      destructive,\n      primary,\n      text,\n      fullWidth,\n      selected,\n      isIconOnly: !!icon && !children,\n    })\n\n    const content = (\n      <>\n        {icon}\n        {children}\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,EACT,QAAQ,GAWT,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,yBAAyB,EAAE,QAAQ;AACnC,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,QAAQ,EACR,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;QACT,QAAQ;AACR,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;AACR,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.map

@@ -1 +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;;;;"}
+{"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  selected?: 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      selected?: 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":"AAqEa,MAAA,WAAW,GAAG,CACzB,KAAsD,KAChB,MAAM,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "2.9.3",
+  "version": "2.11.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -19,7 +19,7 @@
     "url": "https://github.com/TimPetricola"
   },
   "dependencies": {
-    "@ark-ui/react": "5.26.2",
+    "@ark-ui/react": "5.30.0",
     "@juggle/resize-observer": "3.4.0",
     "@lottiefiles/react-lottie-player": "3.6.0",
     "@tippyjs/react": "4.2.6",
@@ -42,17 +42,17 @@
     "@getaround-eu/prettier-config": "1.2.1",
     "@getaround-eu/stylelint-config": "3.0.1",
     "@getaround-eu/ts-config": "2.2.1",
-    "@rollup/plugin-commonjs": "28.0.6",
+    "@rollup/plugin-commonjs": "28.0.9",
     "@rollup/plugin-json": "6.1.0",
     "@rushstack/eslint-patch": "1.12.0",
-    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/addon-essentials": "7.6.21",
     "@storybook/addons": "7.6.17",
-    "@storybook/blocks": "7.6.20",
-    "@storybook/react": "7.6.20",
-    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/blocks": "7.6.21",
+    "@storybook/react": "7.6.21",
+    "@storybook/react-webpack5": "7.6.21",
     "@svgr/cli": "7.0.0",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.0",
+    "@testing-library/react": "16.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.14",
@@ -62,12 +62,12 @@
     "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
     "autoprefixer": "10.4.23",
-    "core-js": "3.47.0",
+    "core-js": "3.48.0",
     "css-loader": "7.1.2",
     "eslint": "8.57.1",
     "eslint-plugin-storybook": "^0.12.0",
     "file-loader": "6.2.0",
-    "fs-extra": "11.3.2",
+    "fs-extra": "11.3.3",
     "html-entities": "2.6.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -88,10 +88,10 @@
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.97.0",
+    "sass": "1.97.2",
     "sass-loader": "13.3.3",
     "sharp-cli": "5.2.0",
-    "storybook": "7.6.20",
+    "storybook": "7.6.21",
     "style-loader": "4.0.0",
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",

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

@@ -30,122 +30,164 @@
     flex-shrink: 0;
   }
 
-  &.cobalt-button--large {
-    @apply c-px-md;
-    min-height: 48px;
-    min-width: 48px;
+  &[href][aria-disabled="true"] {
+    pointer-events: none;
   }
 
-  &.cobalt-button--small {
-    @apply c-px-[12px] hover:c-drop-shadow-md;
-    min-width: 32px;
-    min-height: 32px;
-
-    font-size: 14px;
+  &[disabled]:not([aria-busy="true"]),
+  &[href][aria-disabled="true"]:not([aria-busy="true"]) {
+    @apply c-state-none c-text-onSurfaceDisabled c-drop-shadow-none hover:c-no-underline;
+    opacity: 1;
+    cursor: not-allowed;
 
-    .cobalt-Icon {
-      width: 20px;
-      height: 20px;
+    &:not(.cobalt-button--text) {
+      @apply c-bg-disabled c-border-transparent;
     }
+  }
 
-    &.cobalt-button--warning {
-      @apply c-bg-warning c-border-warning c-text-onWarning;
-    }
+  &[aria-busy="true"]:not(.cobalt-button--text) {
+    @apply c-state-none c-drop-shadow-none hover:c-no-underline;
+    --c-state-interactive-color: var(--c-press);
 
-    &.cobalt-button--tertiary {
-      @apply c-bg-tertiary c-border-tertiary c-text-onTertiary;
-    }
+    &:focus,
+    &:hover,
+    &:active {
+      --c-state-interactive-color: var(--c-press);
 
-    &.cobalt-button--secondary {
-      @apply c-bg-secondary c-border-secondary c-text-onSecondary;
+      transform: scale(1);
     }
+  }
 
-    &.cobalt-button--business {
-      @apply c-bg-businessContainer c-border-businessContainer c-text-onBusinessContainer;
-    }
+  .cobalt-button__loading-icon {
+    @apply c-text-onSurface;
+    position: absolute;
 
-    &.cobalt-button--success {
-      @apply c-bg-success c-border-success c-text-onSuccess;
-    }
+    display: none;
 
-    &.cobalt-button--neutral {
-      @apply c-bg-neutral c-border-neutral c-text-onNeutral;
-    }
+    margin: auto;
   }
 
-  &.cobalt-button--primary {
-    @apply c-bg-primary c-border-primary c-text-onPrimary;
+  &[aria-busy="true"] {
+    color: transparent !important;
 
-    &.cobalt-button--destructive {
-      @apply c-bg-error c-border-error c-text-onError;
-    }
+    cursor: progress;
   }
 
-  &.cobalt-button--icon-only {
-    @apply c-p-none c-rounded-full;
+  &[aria-busy="true"] > .cobalt-button__loading-icon {
+    display: inline-block;
   }
+}
 
-  &.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;
+.cobalt-button--large {
+  @apply c-px-md;
+  min-height: 48px;
+  min-width: 48px;
+}
 
-    text-underline-offset: 2px;
+.cobalt-button--small {
+  @apply c-px-[12px] hover:c-drop-shadow-md;
+  min-width: 32px;
+  min-height: 32px;
 
-    &:active {
-      text-underline-offset: 1px;
-    }
+  font-size: 14px;
+
+  .cobalt-Icon {
+    width: 20px;
+    height: 20px;
+  }
 
-    &.cobalt-button--icon-only {
-      @apply c-state-interactive;
+  &.cobalt-button--warning {
+    @apply c-bg-warning c-border-warning c-text-onWarning;
+
+    .cobalt-button__loading-icon {
+      @apply c-text-onWarning;
     }
   }
 
-  &.cobalt-button--destructive {
-    @apply c-text-error;
+  &.cobalt-button--tertiary {
+    @apply c-bg-tertiary c-border-tertiary c-text-onTertiary;
+
+    .cobalt-button__loading-icon {
+      @apply c-text-onTertiary;
+    }
   }
 
-  &[href][aria-disabled="true"] {
-    pointer-events: none;
+  &.cobalt-button--secondary {
+    @apply c-bg-secondary c-border-secondary c-text-onSecondary;
+
+    .cobalt-button__loading-icon {
+      @apply c-text-onSecondary;
+    }
   }
 
-  &[disabled]:not([aria-busy="true"]),
-  &[href][aria-disabled="true"]:not([aria-busy="true"]) {
-    @apply c-state-none c-text-onSurfaceDisabled c-drop-shadow-none hover:c-no-underline;
-    opacity: 1;
-    cursor: not-allowed;
+  &.cobalt-button--business {
+    @apply c-bg-businessContainer c-border-businessContainer c-text-onBusinessContainer;
 
-    &:not(.cobalt-button--text) {
-      @apply c-bg-disabled c-border-transparent;
+    .cobalt-button__loading-icon {
+      @apply c-text-onBusinessContainer;
     }
   }
 
-  &[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;
+  &.cobalt-button--success {
+    @apply c-bg-success c-border-success c-text-onSuccess;
 
-    &:focus,
-    &:hover,
-    &:active {
-      --c-state-interactive-color: var(--c-press);
+    .cobalt-button__loading-icon {
+      @apply c-text-onSuccess;
+    }
+  }
 
-      transform: scale(1);
+  &.cobalt-button--neutral {
+    @apply c-bg-neutral c-border-neutral c-text-onNeutral;
+
+    .cobalt-button__loading-icon {
+      @apply c-text-onNeutral;
     }
   }
+}
+
+.cobalt-button--primary {
+  @apply c-bg-primary c-border-primary c-text-onPrimary;
 
   .cobalt-button__loading-icon {
-    position: absolute;
+    @apply c-text-onPrimary;
+  }
 
-    display: none;
+  &.cobalt-button--destructive {
+    @apply c-bg-error c-border-error c-text-onError;
 
-    margin: auto;
+    .cobalt-button__loading-icon {
+      @apply c-text-onError;
+    }
   }
+}
+
+.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-gap-none;
+  transition: text-underline-offset 0.25s ease;
+
+  text-underline-offset: 2px;
 
-  &[aria-busy="true"] > *:not(.cobalt-button__loading-icon) {
-    color: transparent;
+  &:active {
+    text-underline-offset: 1px;
   }
 
-  &[aria-busy="true"] > .cobalt-button__loading-icon {
-    display: inline-block;
+  &:not(.cobalt-button--icon-only) {
+    @apply c-drop-shadow-none;
   }
+
+  &.cobalt-button--icon-only:not([aria-busy="true"]):not([disabled]) {
+    @apply c-state-interactive;
+  }
+}
+
+.cobalt-button--icon-only {
+  @apply c-p-none c-rounded-full;
+}
+
+.cobalt-button--destructive {
+  @apply c-text-error;
+}
+
+.cobalt-button--selected {
+  @apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer;
 }

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

@@ -7,6 +7,7 @@ type SharedButtonApiProps = {
     icon?: React.ReactNode;
     text?: boolean;
     fullWidth?: boolean;
+    selected?: boolean;
     color?: never;
 };
 type SharedConditionalTextProps = {
@@ -28,6 +29,7 @@ type SharedConditionalVariantProps = {
     size: "small";
     destructive?: false;
     primary?: false;
+    selected?: false;
     variant: "warning" | "secondary" | "tertiary" | "business" | "success" | "neutral";
 } | {
     size: "small";

package/utilities.css

@@ -67,4 +67,36 @@
     inherits: false;
     initial-value: transparent;
   }
+
+  .c-state-interactive-halo {
+    position: relative;
+    z-index: 1;
+
+    cursor: pointer;
+  }
+
+  .c-state-interactive-halo:hover::after {
+    @apply c--m-xs c-rounded-xl c-state-interactive;
+
+    position: absolute;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    z-index: -1;
+
+    display: inline-block;
+
+    content: "";
+  }
+
+  .c-state-interactive-with-images {
+    cursor: pointer;
+  }
+
+  .c-state-interactive-with-images:hover .c-state-interactive-image {
+    filter: brightness(90%);
+  }
 }

package/utils/getCobaltTailwindcssConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/thibaudesnouf/sources/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}