@channel.io/bezier-react 2.0.4 → 2.0.6

package/dist/types/components/AlphaButton/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaButton/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,EAAE,KAAK,WAAW,EAAE,uBAAiD;AA6C5E,eAAO,MAAM,MAAM,uFA0ElB,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaButton/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EACL,KAAK,WAAW,EAEjB,uBAAiD;AA8DlD,eAAO,MAAM,MAAM,uFAmElB,CAAA"}

package/dist/types/components/AlphaButton/Button.types.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import { type BezierIcon } from '@channel.io/bezier-icons';
 import { type BezierComponentProps, type DisableProps, type PolymorphicProps, type SizeProps } from "../../types/props";
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
@@ -32,11 +33,11 @@ interface ButtonOwnProps {
     /**
      * Icon on the left.
      */
-    prefixIcon?: BezierIcon;
+    prefixContent?: BezierIcon | ReactNode;
     /**
      * Icon on the right.
      */
-    suffixIcon?: BezierIcon;
+    suffixContent?: BezierIcon | ReactNode;
 }
 export interface ButtonProps extends Omit<BezierComponentProps<'button'>, 'color'>, PolymorphicProps, SizeProps<ButtonSize>, DisableProps, ButtonOwnProps {
 }

package/dist/types/components/AlphaButton/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaButton/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,0BAAyB;AAE1B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;AAEhE,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,OAAO,CAAA;AAEX,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAEtD,UAAU,cAAc;IACtB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;CACxB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,EACnD,gBAAgB,EAChB,SAAS,CAAC,UAAU,CAAC,EACrB,YAAY,EACZ,cAAc;CAAG"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaButton/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,0BAAyB;AAE1B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;AAEhE,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,OAAO,CAAA;AAEX,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAEtD,UAAU,cAAc;IACtB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;CACvC;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,EACnD,gBAAgB,EAChB,SAAS,CAAC,UAAU,CAAC,EACrB,YAAY,EACZ,cAAc;CAAG"}

package/dist/types/components/AlphaFloatingButton/FloatingButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,EACL,KAAK,mBAAmB,EAEzB,+BAAiE;AA4ClE,eAAO,MAAM,cAAc,+FAuEzB,CAAA"}
+{"version":3,"file":"FloatingButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EACL,KAAK,mBAAmB,EAEzB,+BAAiE;AA8DlE,eAAO,MAAM,cAAc,+FAiEzB,CAAA"}

package/dist/types/components/AlphaFloatingButton/FloatingButton.types.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import { type BezierIcon } from '@channel.io/bezier-icons';
 import { type BezierComponentProps, type DisableProps, type PolymorphicProps, type SizeProps } from "../../types/props";
 export type FloatingButtonVariant = 'primary' | 'secondary';
@@ -31,11 +32,11 @@ interface FloatingButtonOwnProps {
     /**
      * Icon on the left.
      */
-    prefixIcon?: BezierIcon;
+    prefixContent?: BezierIcon | ReactNode;
     /**
      * Icon on the right.
      */
-    suffixIcon?: BezierIcon;
+    suffixContent?: BezierIcon | ReactNode;
 }
 export interface FloatingButtonProps extends Omit<BezierComponentProps<'button'>, 'color'>, PolymorphicProps, SizeProps<FloatingButtonSize>, DisableProps, FloatingButtonOwnProps {
 }

package/dist/types/components/AlphaFloatingButton/FloatingButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingButton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,0BAAyB;AAE1B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,WAAW,CAAA;AAE3D,MAAM,MAAM,mBAAmB,GAC3B,MAAM,GACN,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,YAAY,CAAA;AAEhB,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAE9D,UAAU,sBAAsB;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAE/B;;;OAGG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;CACxB;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,EACnD,gBAAgB,EAChB,SAAS,CAAC,kBAAkB,CAAC,EAC7B,YAAY,EACZ,sBAAsB;CAAG"}
+{"version":3,"file":"FloatingButton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,0BAAyB;AAE1B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,WAAW,CAAA;AAE3D,MAAM,MAAM,mBAAmB,GAC3B,MAAM,GACN,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,YAAY,CAAA;AAEhB,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAE9D,UAAU,sBAAsB;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAE/B;;;OAGG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;CACvC;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,EACnD,gBAAgB,EAChB,SAAS,CAAC,kBAAkB,CAAC,EAC7B,YAAY,EACZ,sBAAsB;CAAG"}

package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type AlphaFloatingIconButtonProps } from "./";
+export declare const FloatingIconButton: React.ForwardRefExoticComponent<AlphaFloatingIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=FloatingIconButton.d.ts.map

package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EAAE,KAAK,4BAA4B,EAAE,WAAgD;AAgC5F,eAAO,MAAM,kBAAkB,wGAqD7B,CAAA"}

package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.types.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import { type BezierIcon } from '@channel.io/bezier-icons';
+import { type BezierComponentProps, type DisableProps, type PolymorphicProps, type SizeProps } from "../../types/props";
+type FloatingIconButtonVariant = 'primary' | 'secondary';
+type FloatingIconButtonColor = 'blue' | 'cobalt' | 'red' | 'orange' | 'green' | 'pink' | 'purple' | 'dark-grey' | 'light-grey';
+type FloatingIconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+interface FloatingIconButtonOwnProps {
+    /**
+     * If `loading` is true, spinner will be shown, replacing the content.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * If `active` is true, the button will be styled as if it is hovered.
+     * You may want to use this prop for a button which opens dropdown, etc.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Types of visual styles for button.
+     * @default 'primary'
+     */
+    variant?: FloatingIconButtonVariant;
+    /**
+     * Color of the button.
+     * @default 'blue'
+     */
+    color?: FloatingIconButtonColor;
+    /**
+     * Icon in the button.
+     */
+    content: BezierIcon | ReactNode;
+}
+export interface FloatingIconButtonProps extends Omit<BezierComponentProps<'button'>, 'color' | 'content'>, PolymorphicProps, SizeProps<FloatingIconButtonSize>, DisableProps, FloatingIconButtonOwnProps {
+}
+export {};
+//# sourceMappingURL=FloatingIconButton.types.d.ts.map

package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingIconButton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,0BAAyB;AAE1B,KAAK,yBAAyB,GAAG,SAAS,GAAG,WAAW,CAAA;AAExD,KAAK,uBAAuB,GACxB,MAAM,GACN,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,YAAY,CAAA;AAEhB,KAAK,sBAAsB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAE3D,UAAU,0BAA0B;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,yBAAyB,CAAA;IAEnC;;;OAGG;IACH,KAAK,CAAC,EAAE,uBAAuB,CAAA;IAE/B;;OAEG;IACH,OAAO,EAAE,UAAU,GAAG,SAAS,CAAA;CAChC;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,EAC/D,gBAAgB,EAChB,SAAS,CAAC,sBAAsB,CAAC,EACjC,YAAY,EACZ,0BAA0B;CAAG"}

package/dist/types/components/AlphaFloatingIconButton/index.d.ts

@@ -0,0 +1,3 @@
+export { FloatingIconButton as AlphaFloatingIconButton } from './FloatingIconButton';
+export type { FloatingIconButtonProps as AlphaFloatingIconButtonProps } from './FloatingIconButton.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/AlphaFloatingIconButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingIconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,IAAI,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACpF,YAAY,EAAE,uBAAuB,IAAI,4BAA4B,EAAE,MAAM,4BAA4B,CAAA"}

package/dist/types/components/AlphaIconButton/IconButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type AlphaIconButtonProps } from "./";
+export declare const IconButton: React.ForwardRefExoticComponent<AlphaIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/types/components/AlphaIconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EAAE,KAAK,oBAAoB,EAAE,WAAwC;AAgC5E,eAAO,MAAM,UAAU,gGA0DtB,CAAA"}

package/dist/types/components/AlphaIconButton/IconButton.types.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import { type BezierIcon } from '@channel.io/bezier-icons';
+import { type BezierComponentProps, type DisableProps, type PolymorphicProps, type SizeProps } from "../../types/props";
+type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type IconButtonColor = 'blue' | 'cobalt' | 'red' | 'orange' | 'green' | 'pink' | 'purple' | 'dark-grey' | 'light-grey' | 'white';
+type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+interface IconButtonOwnProps {
+    /**
+     * If `loading` is true, spinner will be shown, replacing the content.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * If `active` is true, the button will be styled as if it is hovered.
+     * You may want to use this prop for a button which opens dropdown, etc.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Types of visual styles for button.
+     * @default 'primary'
+     */
+    variant?: IconButtonVariant;
+    /**
+     * Color of the button.
+     * @default 'blue'
+     */
+    color?: IconButtonColor;
+    /**
+     * Icon in the button.
+     */
+    content: BezierIcon | ReactNode;
+    /**
+     * Shape of the button.
+     * @default 'rectangle'
+     */
+    shape?: 'rectangle' | 'circle';
+}
+export interface IconButtonProps extends Omit<BezierComponentProps<'button'>, 'color' | 'content'>, PolymorphicProps, SizeProps<IconButtonSize>, DisableProps, IconButtonOwnProps {
+}
+export {};
+//# sourceMappingURL=IconButton.types.d.ts.map

package/dist/types/components/AlphaIconButton/IconButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaIconButton/IconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,0BAAyB;AAE1B,KAAK,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;AAE7D,KAAK,eAAe,GAChB,MAAM,GACN,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,OAAO,CAAA;AAEX,KAAK,cAAc,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAEnD,UAAU,kBAAkB;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IAEvB;;OAEG;IACH,OAAO,EAAE,UAAU,GAAG,SAAS,CAAA;IAE/B;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;CAC/B;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,EAC/D,gBAAgB,EAChB,SAAS,CAAC,cAAc,CAAC,EACzB,YAAY,EACZ,kBAAkB;CAAG"}

package/dist/types/components/AlphaIconButton/index.d.ts

@@ -0,0 +1,3 @@
+export { IconButton as AlphaIconButton } from './IconButton';
+export type { IconButtonProps as AlphaIconButtonProps } from './IconButton.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/AlphaIconButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaIconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,cAAc,CAAA;AAC5D,YAAY,EAAE,eAAe,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/types/index.d.ts

@@ -5,6 +5,8 @@ export * from "./components/AlphaAvatarGroup";
 export * from "./components/AlphaButton";
 export * from "./components/AlphaDialogPrimitive";
 export * from "./components/AlphaFloatingButton";
+export * from "./components/AlphaFloatingIconButton";
+export * from "./components/AlphaIconButton";
 export * from "./components/AlphaTooltipPrimitive";
 export * from "./components/AppProvider";
 export * from "./components/AutoFocus";

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAGlD,yCAA4C;AAC5C,8CAAiD;AACjD,yCAA4C;AAC5C,kDAAqD;AACrD,iDAAoD;AACpD,mDAAsD;AACtD,yCAA4C;AAC5C,uCAA0C;AAC1C,oCAAuC;AACvC,yCAA4C;AAC5C,mCAAsC;AACtC,oCAAuC;AACvC,iCAAoC;AACpC,oCAAuC;AACvC,yCAA4C;AAC5C,oCAAuC;AACvC,6CAAgD;AAChD,sCAAyC;AACzC,0CAA6C;AAC7C,qCAAwC;AACxC,mCAAsC;AACtC,6CAAgD;AAChD,yCAA4C;AAC5C,uCAA0C;AAC1C,4CAA+C;AAC/C,uCAA0C;AAC1C,kCAAqC;AACrC,kCAAqC;AACrC,0CAA6C;AAC7C,wCAA2C;AAC3C,yCAA4C;AAC5C,2CAA8C;AAC9C,sCAAyC;AACzC,mCAAsC;AACtC,sCAAyC;AACzC,qCAAwC;AACxC,yCAA4C;AAC5C,qCAAwC;AACxC,yCAA4C;AAC5C,wCAA2C;AAC3C,0CAA6C;AAC7C,8CAAiD;AACjD,oCAAuC;AACvC,oCAAuC;AACvC,8CAAiD;AACjD,qCAAwC;AACxC,mCAAsC;AACtC,oCAAuC;AACvC,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,kCAAqC;AACrC,sCAAyC;AACzC,uCAA0C;AAC1C,2CAA8C;AAC9C,mCAAsC;AACtC,qCAAwC;AACxC,4CAA+C;AAC/C,4CAA+C;AAG/C,8DAAiE;AAGjE,8BAAiC;AACjC,+BAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAGlD,yCAA4C;AAC5C,8CAAiD;AACjD,yCAA4C;AAC5C,kDAAqD;AACrD,iDAAoD;AACpD,qDAAwD;AACxD,6CAAgD;AAChD,mDAAsD;AACtD,yCAA4C;AAC5C,uCAA0C;AAC1C,oCAAuC;AACvC,yCAA4C;AAC5C,mCAAsC;AACtC,oCAAuC;AACvC,iCAAoC;AACpC,oCAAuC;AACvC,yCAA4C;AAC5C,oCAAuC;AACvC,6CAAgD;AAChD,sCAAyC;AACzC,0CAA6C;AAC7C,qCAAwC;AACxC,mCAAsC;AACtC,6CAAgD;AAChD,yCAA4C;AAC5C,uCAA0C;AAC1C,4CAA+C;AAC/C,uCAA0C;AAC1C,kCAAqC;AACrC,kCAAqC;AACrC,0CAA6C;AAC7C,wCAA2C;AAC3C,yCAA4C;AAC5C,2CAA8C;AAC9C,sCAAyC;AACzC,mCAAsC;AACtC,sCAAyC;AACzC,qCAAwC;AACxC,yCAA4C;AAC5C,qCAAwC;AACxC,yCAA4C;AAC5C,wCAA2C;AAC3C,0CAA6C;AAC7C,8CAAiD;AACjD,oCAAuC;AACvC,oCAAuC;AACvC,8CAAiD;AACjD,qCAAwC;AACxC,mCAAsC;AACtC,oCAAuC;AACvC,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,kCAAqC;AACrC,sCAAyC;AACzC,uCAA0C;AAC1C,2CAA8C;AAC9C,mCAAsC;AACtC,qCAAwC;AACxC,4CAA+C;AAC/C,4CAA+C;AAG/C,8DAAiE;AAGjE,8BAAiC;AACjC,+BAAkC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -127,7 +127,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "0.2.3",
+    "@channel.io/bezier-tokens": "0.2.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-radio-group": "^1.1.3",

package/src/components/AlphaAvatar/Avatar.tsx

@@ -139,7 +139,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     >
       <SmoothCornersBox
         ref={forwardedRef}
-        aria-label={name}
+        aria-description={name}
         className={classNames(
           styles.AvatarImage,
           Number(size) >= 72 && styles['big-size'],

package/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Avatar > Snapshot 1`] = `
 <div
-  aria-label="Name"
+  aria-description="Name"
   class="SmoothCornersBox AvatarImage"
   data-state="disabled"
   data-testid="bezier-avatar"
@@ -12,7 +12,7 @@ exports[`Avatar > Snapshot 1`] = `
 
 exports[`Avatar > renders border style 1`] = `
 <div
-  aria-label="Name"
+  aria-description="Name"
   class="SmoothCornersBox AvatarImage bordered"
   data-state="disabled"
   data-testid="bezier-avatar"

package/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Christian Nwamba"
+      aria-description="Christian Nwamba"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -25,7 +25,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Kola Tioluwani"
+      aria-description="Kola Tioluwani"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -38,7 +38,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Kent Dodds"
+      aria-description="Kent Dodds"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -51,7 +51,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Ryan Florence"
+      aria-description="Ryan Florence"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -64,7 +64,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Dan Abrahmov"
+      aria-description="Dan Abrahmov"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -77,7 +77,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Prosper Otemuyiwa"
+      aria-description="Prosper Otemuyiwa"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -111,7 +111,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Christian Nwamba"
+      aria-description="Christian Nwamba"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -124,7 +124,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Kola Tioluwani"
+      aria-description="Kola Tioluwani"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -137,7 +137,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Kent Dodds"
+      aria-description="Kent Dodds"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -150,7 +150,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Ryan Florence"
+      aria-description="Ryan Florence"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -163,7 +163,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
     data-testid="bezier-avatar-wrapper"
   >
     <div
-      aria-label="Dan Abrahmov"
+      aria-description="Dan Abrahmov"
       class="SmoothCornersBox AvatarImage"
       data-state="disabled"
       data-testid="bezier-avatar"
@@ -203,7 +203,7 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       data-testid="bezier-avatar-wrapper"
     >
       <div
-        aria-label="Prosper Otemuyiwa"
+        aria-description="Prosper Otemuyiwa"
         class="SmoothCornersBox AvatarImage"
         data-state="disabled"
         data-testid="bezier-avatar"

package/src/components/AlphaButton/AlphaButton.stories.tsx

@@ -20,8 +20,8 @@ export const Playground: StoryObj<AlphaButtonProps> = {
     disabled: false,
     active: false,
     loading: false,
-    prefixIcon: PlusIcon,
-    suffixIcon: ArrowRightIcon,
+    prefixContent: PlusIcon,
+    suffixContent: ArrowRightIcon,
     size: 'm',
     variant: 'primary',
     color: 'blue',

package/src/components/AlphaButton/Button.tsx

@@ -1,16 +1,37 @@
 import React, { forwardRef } from 'react'
 
+import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
-import { type ButtonProps } from '~/src/components/AlphaButton/Button.types'
+import {
+  type ButtonProps,
+  type ButtonSize,
+} from '~/src/components/AlphaButton/Button.types'
 import { BaseButton } from '~/src/components/BaseButton'
-import { type ButtonSize } from '~/src/components/Button'
-import { Icon } from '~/src/components/Icon'
+import { Icon, type IconSize } from '~/src/components/Icon'
 import { Spinner } from '~/src/components/Spinner'
 import { Text } from '~/src/components/Text'
 
 import styles from './Button.module.scss'
 
+function SideContent({
+  size,
+  content,
+}: {
+  size: IconSize
+  content?: ButtonProps['prefixContent']
+}) {
+  return isBezierIcon(content) ? (
+    <Icon
+      source={content}
+      size={size}
+      className={styles.ButtonIcon}
+    />
+  ) : (
+    content
+  )
+}
+
 function getIconSize(size: ButtonSize) {
   return (
     {
@@ -52,12 +73,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       as = BaseButton,
       text,
-      prefixIcon,
-      suffixIcon,
+      prefixContent,
+      suffixContent,
       color = 'blue',
       variant = 'primary',
       size = 'm',
-      disabled,
       active,
       className,
       loading,
@@ -86,13 +106,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             loading && styles.loading
           )}
         >
-          {prefixIcon && (
-            <Icon
-              size={getIconSize(size)}
-              source={prefixIcon}
-              className={styles.ButtonIcon}
-            />
-          )}
+          <SideContent
+            size={getIconSize(size)}
+            content={prefixContent}
+          />
 
           {/* TODO: use AlphaText later, add typo */}
           <Text
@@ -103,13 +120,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             {text}
           </Text>
 
-          {suffixIcon && (
-            <Icon
-              size={getIconSize(size)}
-              source={suffixIcon}
-              className={styles.ButtonIcon}
-            />
-          )}
+          <SideContent
+            size={getIconSize(size)}
+            content={suffixContent}
+          />
         </div>
 
         {/* TODO: use AlphaSpinner */}

package/src/components/AlphaButton/Button.types.ts

@@ -1,3 +1,5 @@
+import { type ReactNode } from 'react'
+
 import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import {
@@ -57,12 +59,12 @@ interface ButtonOwnProps {
   /**
    * Icon on the left.
    */
-  prefixIcon?: BezierIcon
+  prefixContent?: BezierIcon | ReactNode
 
   /**
    * Icon on the right.
    */
-  suffixIcon?: BezierIcon
+  suffixContent?: BezierIcon | ReactNode
 }
 
 export interface ButtonProps

package/src/components/AlphaFloatingButton/AlphaFloatingButton.stories.tsx

@@ -20,8 +20,8 @@ export const Playground: StoryObj<AlphaFloatingButtonProps> = {
     disabled: false,
     active: false,
     loading: false,
-    prefixIcon: PlusIcon,
-    suffixIcon: ArrowRightIcon,
+    prefixContent: PlusIcon,
+    suffixContent: ArrowRightIcon,
     size: 'm',
     variant: 'primary',
     color: 'blue',

package/src/components/AlphaFloatingButton/FloatingButton.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react'
 
+import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
 import {
@@ -7,12 +8,30 @@ import {
   type FloatingButtonSize,
 } from '~/src/components/AlphaFloatingButton/FloatingButton.types'
 import { BaseButton } from '~/src/components/BaseButton'
-import { Icon } from '~/src/components/Icon'
+import { Icon, type IconSize } from '~/src/components/Icon'
 import { Spinner } from '~/src/components/Spinner'
 import { Text } from '~/src/components/Text'
 
 import styles from './FloatingButton.module.scss'
 
+function SideContent({
+  size,
+  content,
+}: {
+  size: IconSize
+  content?: FloatingButtonProps['prefixContent']
+}) {
+  return isBezierIcon(content) ? (
+    <Icon
+      source={content}
+      size={size}
+      className={styles.ButtonIcon}
+    />
+  ) : (
+    content
+  )
+}
+
 function getIconSize(size: FloatingButtonSize) {
   return (
     {
@@ -56,8 +75,8 @@ export const FloatingButton = forwardRef<
   {
     as = BaseButton,
     text,
-    prefixIcon,
-    suffixIcon,
+    prefixContent,
+    suffixContent,
     color = 'blue',
     variant = 'primary',
     size = 'm',
@@ -86,13 +105,10 @@ export const FloatingButton = forwardRef<
       <div
         className={classNames(styles.ButtonContent, loading && styles.loading)}
       >
-        {prefixIcon && (
-          <Icon
-            size={getIconSize(size)}
-            source={prefixIcon}
-            className={styles.ButtonIcon}
-          />
-        )}
+        <SideContent
+          size={getIconSize(size)}
+          content={prefixContent}
+        />
 
         {/* TODO: use AlphaText later, add typo */}
         <Text
@@ -103,13 +119,10 @@ export const FloatingButton = forwardRef<
           {text}
         </Text>
 
-        {suffixIcon && (
-          <Icon
-            size={getIconSize(size)}
-            source={suffixIcon}
-            className={styles.ButtonIcon}
-          />
-        )}
+        <SideContent
+          size={getIconSize(size)}
+          content={suffixContent}
+        />
       </div>
 
       {/* TODO: use AlphaSpinner */}

package/src/components/AlphaFloatingButton/FloatingButton.types.ts

@@ -1,3 +1,5 @@
+import { type ReactNode } from 'react'
+
 import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import {
@@ -55,12 +57,12 @@ interface FloatingButtonOwnProps {
   /**
    * Icon on the left.
    */
-  prefixIcon?: BezierIcon
+  prefixContent?: BezierIcon | ReactNode
 
   /**
    * Icon on the right.
    */
-  suffixIcon?: BezierIcon
+  suffixContent?: BezierIcon | ReactNode
 }
 
 export interface FloatingButtonProps

package/src/components/AlphaFloatingIconButton/AlphaFloatingIconButton.stories.tsx

@@ -0,0 +1,28 @@
+import { PlusIcon } from '@channel.io/bezier-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import {
+  AlphaFloatingIconButton,
+  type AlphaFloatingIconButtonProps,
+} from '~/src/components/AlphaFloatingIconButton'
+
+const meta: Meta<typeof AlphaFloatingIconButton> = {
+  component: AlphaFloatingIconButton,
+  argTypes: {
+    onClick: { action: 'onClick' },
+  },
+}
+export default meta
+
+export const Playground: StoryObj<AlphaFloatingIconButtonProps> = {
+  args: {
+    disabled: false,
+    active: false,
+    loading: false,
+    content: PlusIcon,
+    'aria-label': 'invite',
+    size: 'm',
+    variant: 'primary',
+    color: 'blue',
+  },
+}