@channel.io/bezier-react 3.1.5 → 3.3.0

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type CheckboxProps, type CheckedState } from './Checkbox.types';
-declare function CheckboxImpl<Checked extends CheckedState>({ children, className, checked, id: idProp, ...rest }: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxImpl<Checked extends CheckedState>({ children, className, checked, size, id: idProp, ...rest }: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
 type ReturnTypeOfCheckboxImpl<Checked extends CheckedState> = ReturnType<typeof CheckboxImpl<Checked>>;
 /**
  * `Checkbox` is a control that allows the user to toggle between checked and not checked.

package/dist/types/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AA+BxE,iBAAS,YAAY,CAAC,OAAO,SAAS,YAAY,EAChD,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,CAAC,OAAO,CAAC,EAC7E,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,2CAiD3C;AAGD,KAAK,wBAAwB,CAAC,OAAO,SAAS,YAAY,IAAI,UAAU,CACtE,OAAO,YAAY,CAAC,OAAO,CAAC,CAC7B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,EAA+B,CAClD,OAAO,SAAS,YAAY,EAE5B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAC5C,KACE,wBAAwB,CAAC,OAAO,CAAC,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AA8BxE,iBAAS,YAAY,CAAC,OAAO,SAAS,YAAY,EAChD,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,IAAU,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,CAAC,OAAO,CAAC,EACzF,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,2CAkD3C;AAGD,KAAK,wBAAwB,CAAC,OAAO,SAAS,YAAY,IAAI,UAAU,CACtE,OAAO,YAAY,CAAC,OAAO,CAAC,CAC7B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,EAA+B,CAClD,OAAO,SAAS,YAAY,EAE5B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAC5C,KACE,wBAAwB,CAAC,OAAO,CAAC,CAAA"}

package/dist/types/components/Checkbox/Checkbox.types.d.ts

@@ -1,5 +1,6 @@
-import { type BezierComponentProps, type ChildrenProps, type FormFieldProps } from "../../types/props";
+import { type BezierComponentProps, type ChildrenProps, type FormFieldProps, type SizeProps } from "../../types/props";
 export type CheckedState = boolean | 'indeterminate';
+export type CheckboxSize = 's' | 'm';
 interface CheckboxOwnProps<Checked extends CheckedState> {
     /**
      * The controlled checked state of the checkbox.
@@ -31,7 +32,7 @@ interface CheckboxOwnProps<Checked extends CheckedState> {
      */
     onCheckedChange?: (checked: Checked) => void;
 }
-export interface CheckboxProps<Checked extends CheckedState> extends Omit<BezierComponentProps<'button'>, keyof CheckboxOwnProps<Checked>>, ChildrenProps, FormFieldProps, CheckboxOwnProps<Checked> {
+export interface CheckboxProps<Checked extends CheckedState> extends Omit<BezierComponentProps<'button'>, keyof CheckboxOwnProps<Checked>>, ChildrenProps, FormFieldProps, SizeProps<CheckboxSize>, CheckboxOwnProps<Checked> {
 }
 export {};
 //# sourceMappingURL=Checkbox.types.d.ts.map

package/dist/types/components/Checkbox/Checkbox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,0BAAyB;AAE1B,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,UAAU,gBAAgB,CAAC,OAAO,SAAS,YAAY;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C;AAED,MAAM,WAAW,aAAa,CAAC,OAAO,SAAS,YAAY,CACzD,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAC3E,aAAa,EACb,cAAc,EACd,gBAAgB,CAAC,OAAO,CAAC;CAAG"}
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,0BAAyB;AAE1B,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,CAAA;AAEpC,UAAU,gBAAgB,CAAC,OAAO,SAAS,YAAY;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C;AAED,MAAM,WAAW,aAAa,CAAC,OAAO,SAAS,YAAY,CACzD,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAC3E,aAAa,EACb,cAAc,EACd,SAAS,CAAC,YAAY,CAAC,EACvB,gBAAgB,CAAC,OAAO,CAAC;CAAG"}

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

@@ -1,3 +1,3 @@
 export { Checkbox } from './Checkbox';
-export type { CheckboxProps, CheckedState } from './Checkbox.types';
+export type { CheckboxProps, CheckedState, CheckboxSize, } from './Checkbox.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAA"}

package/dist/types/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAIjE,eAAO,MAAM,uBAAuB,2BAA2B,CAAA;AAE/D,eAAO,MAAM,MAAM,+EAmKjB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAIjE,eAAO,MAAM,uBAAuB,2BAA2B,CAAA;AAE/D,eAAO,MAAM,MAAM,+EA0LjB,CAAA"}

package/dist/types/components/Select/Select.types.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import { type BezierIcon } from '@channel.io/bezier-icons';
 import type { AdditionalColorProps, AdditionalOverridableStyleProps, BezierComponentProps, ChildrenProps, FormFieldProps, FormFieldSize, SideContentProps, SizeProps } from "../../types/props";
 import { type ZIndex } from "../../types/tokens";
@@ -10,7 +11,7 @@ export interface SelectRef {
 interface SelectOwnProps {
     defaultFocus?: boolean;
     placeholder?: string;
-    text?: string;
+    text?: ReactNode;
     withoutChevron?: boolean;
     dropdownContainer?: HTMLElement | null;
     dropdownMarginX?: OverlayProps['marginX'];

package/dist/types/components/Select/Select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,KAAK,EACV,oBAAoB,EACpB,+BAA+B,EAC/B,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,SAAS,EACV,0BAAyB;AAC1B,OAAO,EAAE,KAAK,MAAM,EAAE,2BAA0B;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAgC;AAE5D,MAAM,WAAW,SAAS;IACxB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI,CAAA;IACjD,kBAAkB,IAAI,IAAI,CAAA;IAC1B,UAAU,IAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CAAA;CACpC;AAED,UAAU,cAAc;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC,eAAe,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACzC,eAAe,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACzC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAA;IAC3C,uBAAuB,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAA;IACzD,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,QAAQ,CAAC,EACpC,aAAa,EACb,cAAc,EACd,SAAS,CAAC,aAAa,CAAC,EACxB,gBAAgB,CACd,UAAU,GAAG,KAAK,CAAC,SAAS,EAC5B,UAAU,GAAG,KAAK,CAAC,SAAS,CAC7B,EACD,+BAA+B,CAAC,UAAU,CAAC,EAC3C,oBAAoB,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACtC,cAAc;CAAG"}
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,KAAK,EACV,oBAAoB,EACpB,+BAA+B,EAC/B,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,SAAS,EACV,0BAAyB;AAC1B,OAAO,EAAE,KAAK,MAAM,EAAE,2BAA0B;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAgC;AAE5D,MAAM,WAAW,SAAS;IACxB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI,CAAA;IACjD,kBAAkB,IAAI,IAAI,CAAA;IAC1B,UAAU,IAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CAAA;CACpC;AAED,UAAU,cAAc;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC,eAAe,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACzC,eAAe,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACzC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAA;IAC3C,uBAAuB,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAA;IACzD,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,QAAQ,CAAC,EACpC,aAAa,EACb,cAAc,EACd,SAAS,CAAC,aAAa,CAAC,EACxB,gBAAgB,CACd,UAAU,GAAG,KAAK,CAAC,SAAS,EAC5B,UAAU,GAAG,KAAK,CAAC,SAAS,CAC7B,EACD,+BAA+B,CAAC,UAAU,CAAC,EAC3C,oBAAoB,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACtC,cAAc;CAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.1.5",
+  "version": "3.3.0",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@channel.io/bezier-icons": "0.45.0",
+    "@channel.io/bezier-icons": "0.47.0",
     "@chromatic-com/storybook": "^3.2.2",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-alias": "^5.1.1",

package/src/components/Checkbox/Checkbox.module.scss

@@ -23,8 +23,6 @@
   box-shadow: inset 0 0 0 2px var(--bdr-black-dark);
 
   /* stylelint-disable-next-line order/order */
-  @include dimension.square(18px);
-
   @include interaction.touchable-hover {
     &:where(:not([data-disabled], [data-state='unchecked'])) {
       background-color: var(--bgtxt-green-dark);
@@ -35,6 +33,17 @@
     }
   }
 
+  &:where(.size-s) {
+    border-radius: 4.6px;
+
+    /* stylelint-disable-next-line order/order */
+    @include dimension.square(16px);
+  }
+
+  &:where(.size-m) {
+    @include dimension.square(18px);
+  }
+
   &:where([data-disabled]) {
     background-color: var(--bg-black-dark);
     box-shadow: none;

package/src/components/Checkbox/Checkbox.tsx

@@ -37,7 +37,6 @@ const CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(
         className={styles.CheckIcon}
         ref={forwardedRef}
         source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}
-        size="xs"
         color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}
         {...props}
       />
@@ -46,7 +45,7 @@ const CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(
 )
 
 function CheckboxImpl<Checked extends CheckedState>(
-  { children, className, checked, id: idProp, ...rest }: CheckboxProps<Checked>,
+  { children, className, checked, size = 'm', id: idProp, ...rest }: CheckboxProps<Checked>,
   forwardedRef: React.Ref<HTMLButtonElement>
 ) {
   const {
@@ -56,6 +55,7 @@ function CheckboxImpl<Checked extends CheckedState>(
   } = useFormFieldProps(rest)
 
   const id = useId(idProp ?? formFieldId, 'bezier-checkbox')
+  const iconSize = size === 's' ? 'xxs' : 'xs'
 
   return (
     <div
@@ -63,7 +63,7 @@ function CheckboxImpl<Checked extends CheckedState>(
     >
       <CheckboxPrimitive.Root
         asChild
-        className={classNames(styles.Checkbox, className)}
+        className={classNames(styles.Checkbox, styles[`size-${size}`], className)}
         ref={forwardedRef}
         id={id}
         checked={checked}
@@ -77,7 +77,7 @@ function CheckboxImpl<Checked extends CheckedState>(
             forceMount
           >
             {/* @ts-expect-error */}
-            <CheckIcon />
+            <CheckIcon size={iconSize} />
           </CheckboxPrimitive.Indicator>
         </BaseButton>
       </CheckboxPrimitive.Root>

package/src/components/Checkbox/Checkbox.types.ts

@@ -2,10 +2,13 @@ import {
   type BezierComponentProps,
   type ChildrenProps,
   type FormFieldProps,
+  type SizeProps,
 } from '~/src/types/props'
 
 export type CheckedState = boolean | 'indeterminate'
 
+export type CheckboxSize = 's' | 'm'
+
 interface CheckboxOwnProps<Checked extends CheckedState> {
   /**
    * The controlled checked state of the checkbox.
@@ -42,4 +45,5 @@ export interface CheckboxProps<Checked extends CheckedState>
   extends Omit<BezierComponentProps<'button'>, keyof CheckboxOwnProps<Checked>>,
     ChildrenProps,
     FormFieldProps,
+    SizeProps<CheckboxSize>,
     CheckboxOwnProps<Checked> {}

package/src/components/Checkbox/index.ts

@@ -1,2 +1,6 @@
 export { Checkbox } from './Checkbox'
-export type { CheckboxProps, CheckedState } from './Checkbox.types'
+export type {
+  CheckboxProps,
+  CheckedState,
+  CheckboxSize,
+} from './Checkbox.types'

package/src/components/Select/Select.tsx

@@ -115,6 +115,36 @@ export const Select = forwardRef<SelectRef, SelectProps>(function Select(
 
   const hasContent = !isEmpty(text)
 
+  const Content = (() => {
+    if (!hasContent) {
+      return (
+        <Text
+          data-testid="bezier-select-trigger-text"
+          typo="14"
+          truncated
+          color="txt-black-dark"
+        >
+          {placeholder}
+        </Text>
+      )
+    }
+
+    if (typeof text === 'string') {
+      return (
+        <Text
+          data-testid="bezier-select-trigger-text"
+          typo="14"
+          truncated
+          color={textColor}
+        >
+          {text}
+        </Text>
+      )
+    }
+
+    return text
+  })()
+
   return (
     <div
       style={style}
@@ -146,14 +176,7 @@ export const Select = forwardRef<SelectRef, SelectProps>(function Select(
             leftContent
           )}
 
-          <Text
-            data-testid="bezier-select-trigger-text"
-            typo="14"
-            truncated
-            color={hasContent ? textColor : 'txt-black-dark'}
-          >
-            {hasContent ? text : placeholder}
-          </Text>
+          {Content}
 
           {isBezierIcon(rightContent) ? (
             <Icon

package/src/components/Select/Select.types.ts

@@ -1,3 +1,5 @@
+import { type ReactNode } from 'react'
+
 import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import type {
@@ -23,7 +25,7 @@ export interface SelectRef {
 interface SelectOwnProps {
   defaultFocus?: boolean
   placeholder?: string
-  text?: string
+  text?: ReactNode
   withoutChevron?: boolean
   dropdownContainer?: HTMLElement | null
   dropdownMarginX?: OverlayProps['marginX']