@channel.io/bezier-react 2.3.1 → 2.3.2

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;AAKzC,OAAO,EACL,KAAK,WAAW,EAEjB,uBAAiD;AAkDlD,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;AAkDlD,eAAO,MAAM,MAAM,uFA4ElB,CAAA"}

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;AAKzC,OAAO,EACL,KAAK,mBAAmB,EAEzB,+BAAiE;AAkDlE,eAAO,MAAM,cAAc,+FAwEzB,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;AAkDlE,eAAO,MAAM,cAAc,+FA0EzB,CAAA"}

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

@@ -1 +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;AAoB5F,eAAO,MAAM,kBAAkB,wGA4D7B,CAAA"}
+{"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;AAoB5F,eAAO,MAAM,kBAAkB,wGA8D7B,CAAA"}

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

@@ -1 +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;AAoB5E,eAAO,MAAM,UAAU,gGAiEtB,CAAA"}
+{"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;AAoB5E,eAAO,MAAM,UAAU,gGAmEtB,CAAA"}

package/dist/types/components/AlphaLoader/Loader.types.d.ts

@@ -7,7 +7,7 @@ interface LoaderOwnProps {
      */
     variant?: 'primary' | 'secondary' | 'on-overlay';
 }
-export interface LoaderProps extends Omit<BezierComponentProps<'span'>, keyof ColorProps>, SizeProps<LoaderSize>, ColorProps, LoaderOwnProps {
+export interface LoaderProps extends Omit<BezierComponentProps<'span'>, keyof ColorProps>, Required<SizeProps<LoaderSize>>, ColorProps, LoaderOwnProps {
 }
 export {};
 //# sourceMappingURL=Loader.types.d.ts.map

package/dist/types/components/AlphaLoader/Loader.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaLoader/Loader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,0BAAyB;AAE1B,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,CAAA;AAE3B,UAAU,cAAc;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,YAAY,CAAA;CACjD;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,MAAM,UAAU,CAAC,EAC1D,SAAS,CAAC,UAAU,CAAC,EACrB,UAAU,EACV,cAAc;CAAG"}
+{"version":3,"file":"Loader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaLoader/Loader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,0BAAyB;AAE1B,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,CAAA;AAE3B,UAAU,cAAc;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,YAAY,CAAA;CACjD;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,MAAM,UAAU,CAAC,EAC1D,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,EAC/B,UAAU,EACV,cAAc;CAAG"}

package/dist/types/components/AlphaToggleButton/ToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAYzC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAsB7D,eAAO,MAAM,YAAY,6FAkFxB,CAAA"}
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAYzC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAsB7D,eAAO,MAAM,YAAY,6FAoFxB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -129,7 +129,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "0.2.8",
+    "@channel.io/bezier-tokens": "0.2.9",
     "@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/AlphaButton/Button.module.scss

@@ -110,8 +110,12 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
     }
 
-    &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
-      background-color: var(--alpha-color-bg-white-white-alpha-transparent);
+    &:where(.color-dark-grey, .color-light-grey) {
+      background-color: var(--alpha-color-bg-black-transparent);
+    }
+
+    &:where(.color-white-absolute) {
+      background-color: var(--alpha-color-bg-absolute-white-transparent);
     }
   }
 

package/src/components/AlphaButton/Button.tsx

@@ -118,12 +118,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           <div
             className={classNames(
               styles.ButtonLoader,
+              // NOTE: Loader size is the same as icon size
               styles[`size-${getIconSize(size)}`]
             )}
           >
             <AlphaLoader
+              size="s"
               className={styles.Loader}
-              variant="on-overlay"
+              variant={variant === 'primary' ? 'on-overlay' : 'secondary'}
             />
           </div>
         )}

package/src/components/AlphaFloatingButton/FloatingButton.tsx

@@ -117,12 +117,14 @@ export const FloatingButton = forwardRef<
         <div
           className={classNames(
             styles.ButtonLoader,
+            // NOTE: Loader size is the same as icon size
             styles[`size-${getIconSize(size)}`]
           )}
         >
           <AlphaLoader
+            size="s"
             className={styles.Loader}
-            variant="on-overlay"
+            variant={variant === 'primary' ? 'on-overlay' : 'secondary'}
           />
         </div>
       )}

package/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx

@@ -72,12 +72,14 @@ export const FloatingIconButton = forwardRef<
         <div
           className={classNames(
             styles.ButtonLoader,
+            // NOTE: Loader size is the same as icon size
             styles[`size-${getIconSize(size)}`]
           )}
         >
           <AlphaLoader
+            size="s"
             className={styles.Loader}
-            variant="on-overlay"
+            variant={variant === 'primary' ? 'on-overlay' : 'secondary'}
           />
         </div>
       )}

package/src/components/AlphaIconButton/IconButton.module.scss

@@ -91,8 +91,12 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
     }
 
-    &:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
-      background-color: var(--alpha-color-bg-white-white-alpha-transparent);
+    &:where(.color-dark-grey, .color-light-grey) {
+      background-color: var(--alpha-color-bg-black-transparent);
+    }
+
+    &:where(.color-white-absolute) {
+      background-color: var(--alpha-color-bg-absolute-white-transparent);
     }
   }
 

package/src/components/AlphaIconButton/IconButton.tsx

@@ -76,12 +76,14 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
           <div
             className={classNames(
               styles.ButtonLoader,
+              // NOTE: Loader size is the same as icon size
               styles[`size-${getIconSize(size)}`]
             )}
           >
             <AlphaLoader
+              size="s"
               className={styles.Loader}
-              variant="on-overlay"
+              variant={variant === 'primary' ? 'on-overlay' : 'secondary'}
             />
           </div>
         )}

package/src/components/AlphaLoader/AlphaLoader.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-import { type Meta, type StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
 import { Loader } from './Loader'
 import { type LoaderProps } from './Loader.types'
 
-const meta: Meta<typeof Loader> = {
+const meta = {
   component: Loader,
-}
+} satisfies Meta<typeof Loader>
 
 export default meta
 
@@ -26,4 +26,4 @@ export const Primary = {
       url: 'https://www.figma.com/design/KyhPPZeeC0JBmTclJGe3nn/Status?node-id=6-69&t=aiOXLQegb05Jiqqg-1',
     },
   },
-}
+} satisfies StoryObj<typeof meta>

package/src/components/AlphaLoader/Loader.test.tsx

@@ -6,7 +6,12 @@ import { LOADER_TEST_ID, Loader } from './Loader'
 
 describe('Loader >', () => {
   const renderLoader = (props?: React.ComponentProps<typeof Loader>) =>
-    render(<Loader {...props} />)
+    render(
+      <Loader
+        size="s"
+        {...props}
+      />
+    )
 
   it('should render', () => {
     const { getByTestId } = renderLoader()
@@ -22,7 +27,7 @@ describe('Loader >', () => {
 
   it('should forward ref', () => {
     const ref = React.createRef<HTMLDivElement>()
-    renderLoader({ ref })
+    renderLoader({ ref, size: 's' })
     expect(ref.current).toBeInTheDocument()
   })
 

package/src/components/AlphaLoader/Loader.types.ts

@@ -16,6 +16,6 @@ interface LoaderOwnProps {
 
 export interface LoaderProps
   extends Omit<BezierComponentProps<'span'>, keyof ColorProps>,
-    SizeProps<LoaderSize>,
+    Required<SizeProps<LoaderSize>>,
     ColorProps,
     LoaderOwnProps {}

package/src/components/AlphaToggleButton/ToggleButton.tsx

@@ -101,10 +101,12 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
             <div
               className={classNames(
                 styles.ButtonLoader,
+                // NOTE: Loader size is the same as icon size
                 styles[`size-${ICON_SIZE}`]
               )}
             >
               <AlphaLoader
+                size="s"
                 className={styles.Loader}
                 variant="secondary"
               />