@bug-on/m3-expressive 1.0.0 → 1.1.0

package/dist/feedback.d.mts

@@ -145,9 +145,9 @@ declare const LoadingIndicator: React$1.ForwardRefExoticComponent<LoadingIndicat
 
 interface ProgressBaseProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
-     * Giá trị phần trăm tiến trình hiện tại (từ 0 đến 100).
-     * Nếu truyền giá trị này, tiến trình sẽ hiển thị ở trạng thái Determinate.
-     * Nếu bỏ trống (undefined), tiến trình sẽ tự động ở trạng thái Indeterminate.
+     * Current progress percentage value (between 0 and 100).
+     * If provided, the indicator will display in Determinate state.
+     * If omitted (undefined), the indicator defaults to Indeterminate state.
      *
      * @example
      * ```tsx
@@ -156,85 +156,85 @@ interface ProgressBaseProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
      */
     value?: number;
     /**
-     * Nhan đề mô tả mục đích của thanh tiến trình dành cho screen readers (bắt buộc).
+     * Accessible label describing the purpose of the progress indicator for screen readers (required).
      */
     "aria-label": string;
     /**
-     * Độ dày của track (đường nền) của thanh tiến trình (đơn vị: px).
-     * - Với Linear: là chiều cao của thanh.
-     * - Với Circular: là độ dày của viền hình tròn.
+     * Track thickness of the progress indicator (in px).
+     * - For Linear: height of the progress bar.
+     * - For Circular: stroke thickness of the circle outline.
      *
      * @example
-     * trackHeight={8} // Dày hơn bình thường
+     * trackHeight={8} // Thicker than default
      */
     trackHeight?: number;
     /**
-     * Màu sắc của phần tiến trình (phần đã hoàn thành).
-     * Mặc định mượn màu `currentColor` của thẻ wrap, để dễ dàng tuỳ biến qua utility class.
+     * Color of the active progress indicator.
+     * Defaults to `currentColor` of the parent element for easy styling via utility classes.
      *
      * @example
-     * color="var(--md-sys-color-primary)" // Sử dụng custom token
+     * color="var(--md-sys-color-primary)" // Custom design token
      */
     color?: string;
     /**
-     * Màu sắc của thanh nền (phần chưa hoàn thành).
-     * Mặc định sử dụng màu được tính toán từ bề mặt hoặc transparency để tạo sự tinh tế.
+     * Color of the track (inactive background portion).
+     * Defaults to a surface-calculated tone or subtle opacity.
      */
     trackColor?: string;
 }
 interface LinearProgressProps extends ProgressBaseProps {
-    /** Phân loại component sang kiểu dáng Linear (đường thẳng ngang). */
+    /** Variant classification for Linear progress bar layout. */
     variant: "linear";
     /**
-     * Hình dáng của vạch tiến trình (phần đã hoàn thành).
-     * - `flat`: Đường nét liền phẳng (mặc định)
-     * - `wavy`: Đường lượn sóng động
+     * Shape profile of the active indicator.
+     * - `flat`: Smooth solid line (default)
+     * - `wavy`: Dynamic animated wave line
      */
     shape?: "flat" | "wavy";
     /**
-     * Hình dáng của thanh nền chờ (track).
-     * - `flat`: Đường nét liền phẳng (mặc định)
-     * - `wavy`: Đường lượn sóng cố định hoặc động
+     * Shape profile of the background track.
+     * - `flat`: Smooth solid line (default)
+     * - `wavy`: Static or dynamic wave line
      */
     trackShape?: "flat" | "wavy";
     /**
-     * Biên độ sóng (áp dụng khi `shape` hoặc `trackShape` là "wavy").
-     * Chỉ định độ lượn cao thấp của con sóng.
+     * Wave amplitude (applies when `shape` or `trackShape` is "wavy").
+     * Specifies the height offset of the wave ripples.
      */
     amplitude?: number;
     /**
-     * Chiều dài một nhịp sóng (áp dụng khi `shape` là "wavy" theo determinate).
-     * Khoảng cách giữa 2 đỉnh sóng kề nhau.
+     * Wavelength of a single wave cycle (applies when `shape` is "wavy" in determinate mode).
+     * Distance between adjacent crests.
      */
     wavelength?: number;
     /**
-     * Nhịp sóng dành riêng cho trạng thái chạy liên tục (Indeterminate Wavy).
+     * Wavelength reserved for continuous animation in Indeterminate Wavy mode.
      */
     indeterminateWavelength?: number;
     /**
-     * Khoảng hở kết dính giữa cụm vạch đang chạy và thanh nền.
-     * Cho phép truyền \`0\` để hai thanh chạm sát vào nhau liền mạch.
+     * Gap size between active indicator segments and background track.
+     * Can be set to `0` for seamless continuous touching lines.
      *
      * @example
      * ```tsx
-     * <ProgressIndicator variant="linear" shape="wavy" gapSize={0} /> // Sóng chạm track liền nét
+     * <ProgressIndicator variant="linear" shape="wavy" gapSize={0} /> // Seamless wave
      * ```
      */
     gapSize?: number;
     /**
-     * Tốc độ dao động vỗ của sóng (Multiplier). Mặc định là \`1\`.
-     * Tăng giá trị (VD: 1.5, 2) để sóng dao động nhanh hơn.
+     * Wave oscillation speed multiplier. Defaults to `1`.
+     * Increase value (e.g. 1.5, 2) for faster wave movement.
      */
     waveSpeed?: number;
     /**
-     * Tốc độ lướt / cuộn dải màu dọc trên track (Crawler) đối với trạng thái Indeterminate.
-     * Mặc định là \`1\`.
+     * Crawler speed multiplier along the track for Indeterminate mode.
+     * Defaults to `1`.
      */
     crawlerSpeed?: number;
     /**
-     * Cấu hình hiệu ứng gợn khi thanh determinate ở mức xấp xỉ mép viền (<= 10% hoặc >= 90%).
-     * - `md3`: Tự động ép phẳng biên độ sóng thành số 0 một cách mềm mại (Chuẩn Google MD3).
-     * - `continuous`: Bỏ qua các ràng buộc ép phẳng, con sóng vẫn gợn lấp lóa trên mọi giá trị phần trăm.
+     * Configuration for wave damping near edge thresholds (<= 10% or >= 90%).
+     * - `md3`: Smoothly flattens wave amplitude to zero near edges (Google MD3 standard).
+     * - `continuous`: Ignores damping, preserving wave motion across all percentages.
      *
      * @example
      * ```tsx
@@ -243,9 +243,9 @@ interface LinearProgressProps extends ProgressBaseProps {
      */
     determinateAnimation?: "md3" | "continuous";
     /**
-     * Kiểu kịch bản tịnh tiến cho thanh Indeterminate.
-     * - `md3`: Render 2 vạch song song vọt tới & co giãn mô phỏng vật lý (Chuẩn Google MD3).
-     * - `continuous`: Vạch không ngắt quãng mà tràn lướt vòng lặp mượt mà.
+     * Physics movement style for Indeterminate Linear mode.
+     * - `md3`: Renders two sliding & stretching physics-simulated lines (Google MD3 standard).
+     * - `continuous`: Renders a continuous smooth looping bar.
      *
      * @example
      * ```tsx
@@ -254,18 +254,18 @@ interface LinearProgressProps extends ProgressBaseProps {
      */
     indeterminateAnimation?: "md3" | "continuous";
     /**
-     * Bật/tắt dấm chấm điểm báo kết thúc ở cuối track (Stop Indicator).
-     * - `true`: Luôn thấy một chấm tròn bé xíu ở cuối đường đi
-     * - `false`: Tắt hoàn toàn
-     * - `"auto"`: Chấm tròn chỉ hiển thị và hòa trộn khi progress đạt 100%
+     * Toggle stop indicator dot at the end of the track.
+     * - `true`: Always displays a tiny stop indicator dot at the end of the path
+     * - `false`: Completely disabled
+     * - `"auto"`: Stop dot appears and fades in only when progress reaches 100%
      */
     showStopIndicator?: boolean | "auto";
 }
 interface CircularProgressProps extends ProgressBaseProps {
-    /** Phân loại component sang kiểu dáng Circular (hình tròn khép kín). */
+    /** Variant classification for Circular progress indicator. */
     variant: "circular";
     /**
-     * Đường kính hiển thị của vòng biểu đồ, đơn vị px.
+     * Display diameter of the circular progress ring in px.
      *
      * @example
      * ```tsx
@@ -274,30 +274,30 @@ interface CircularProgressProps extends ProgressBaseProps {
      */
     size?: number;
     /**
-     * Phong cách nét vẽ của đường viền trong trạng thái trượt.
-     * - `flat`: Đường nét cứng, vuốt tròn hai đầu stroke.
-     * - `wavy`: Vệt màu chuyển động rung tạo hình răng cưa/gợn sóng.
+     * Stroke style profile of the ring outline.
+     * - `flat`: Solid line with rounded caps.
+     * - `wavy`: Oscillating wavy line pattern.
      */
     shape?: "flat" | "wavy";
     /**
-     * Biên độ gợn của trạng thái `wavy` cho vòng tròn.
+     * Wave amplitude profile for `wavy` circular indicators.
      */
     amplitude?: number;
-    /** Bước sóng bao trọn chu vi hình tròn. */
+    /** Wavelength cycle total around the circumference. */
     wavelength?: number;
-    /** Khoảng hở khe đứt ngang nối đỉnh nét vẽ. */
+    /** Gap distance separating line ends. */
     gapSize?: number;
     /**
-     * Xoay nhanh hay chậm theo số nhân cho Crawler Circular quay Indeterminate.
+     * Speed multiplier for Indeterminate circular crawler rotation.
      */
     crawlerSpeed?: number;
 }
 type ProgressIndicatorProps = LinearProgressProps | CircularProgressProps;
 
 /**
- * Thanh tiến trình (Progress Indicator) theo nguyên tắc Material Design 3 Expressive.
- * Hỗ trợ linh hoạt 2 loại hình hiển thị: Linear (Đường thẳng) và Circular (Hình tròn),
- * cùng với thiết kế Wavy (Lượn sóng) động rất mềm mại.
+ * Progress Indicator component based on Material Design 3 Expressive guidelines.
+ * Flexible support for 2 presentation variants: Linear and Circular,
+ * with smooth dynamic Wavy shape profiles.
  *
  * @example
  * ```tsx

package/dist/feedback.d.ts

@@ -145,9 +145,9 @@ declare const LoadingIndicator: React$1.ForwardRefExoticComponent<LoadingIndicat
 
 interface ProgressBaseProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
-     * Giá trị phần trăm tiến trình hiện tại (từ 0 đến 100).
-     * Nếu truyền giá trị này, tiến trình sẽ hiển thị ở trạng thái Determinate.
-     * Nếu bỏ trống (undefined), tiến trình sẽ tự động ở trạng thái Indeterminate.
+     * Current progress percentage value (between 0 and 100).
+     * If provided, the indicator will display in Determinate state.
+     * If omitted (undefined), the indicator defaults to Indeterminate state.
      *
      * @example
      * ```tsx
@@ -156,85 +156,85 @@ interface ProgressBaseProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
      */
     value?: number;
     /**
-     * Nhan đề mô tả mục đích của thanh tiến trình dành cho screen readers (bắt buộc).
+     * Accessible label describing the purpose of the progress indicator for screen readers (required).
      */
     "aria-label": string;
     /**
-     * Độ dày của track (đường nền) của thanh tiến trình (đơn vị: px).
-     * - Với Linear: là chiều cao của thanh.
-     * - Với Circular: là độ dày của viền hình tròn.
+     * Track thickness of the progress indicator (in px).
+     * - For Linear: height of the progress bar.
+     * - For Circular: stroke thickness of the circle outline.
      *
      * @example
-     * trackHeight={8} // Dày hơn bình thường
+     * trackHeight={8} // Thicker than default
      */
     trackHeight?: number;
     /**
-     * Màu sắc của phần tiến trình (phần đã hoàn thành).
-     * Mặc định mượn màu `currentColor` của thẻ wrap, để dễ dàng tuỳ biến qua utility class.
+     * Color of the active progress indicator.
+     * Defaults to `currentColor` of the parent element for easy styling via utility classes.
      *
      * @example
-     * color="var(--md-sys-color-primary)" // Sử dụng custom token
+     * color="var(--md-sys-color-primary)" // Custom design token
      */
     color?: string;
     /**
-     * Màu sắc của thanh nền (phần chưa hoàn thành).
-     * Mặc định sử dụng màu được tính toán từ bề mặt hoặc transparency để tạo sự tinh tế.
+     * Color of the track (inactive background portion).
+     * Defaults to a surface-calculated tone or subtle opacity.
      */
     trackColor?: string;
 }
 interface LinearProgressProps extends ProgressBaseProps {
-    /** Phân loại component sang kiểu dáng Linear (đường thẳng ngang). */
+    /** Variant classification for Linear progress bar layout. */
     variant: "linear";
     /**
-     * Hình dáng của vạch tiến trình (phần đã hoàn thành).
-     * - `flat`: Đường nét liền phẳng (mặc định)
-     * - `wavy`: Đường lượn sóng động
+     * Shape profile of the active indicator.
+     * - `flat`: Smooth solid line (default)
+     * - `wavy`: Dynamic animated wave line
      */
     shape?: "flat" | "wavy";
     /**
-     * Hình dáng của thanh nền chờ (track).
-     * - `flat`: Đường nét liền phẳng (mặc định)
-     * - `wavy`: Đường lượn sóng cố định hoặc động
+     * Shape profile of the background track.
+     * - `flat`: Smooth solid line (default)
+     * - `wavy`: Static or dynamic wave line
      */
     trackShape?: "flat" | "wavy";
     /**
-     * Biên độ sóng (áp dụng khi `shape` hoặc `trackShape` là "wavy").
-     * Chỉ định độ lượn cao thấp của con sóng.
+     * Wave amplitude (applies when `shape` or `trackShape` is "wavy").
+     * Specifies the height offset of the wave ripples.
      */
     amplitude?: number;
     /**
-     * Chiều dài một nhịp sóng (áp dụng khi `shape` là "wavy" theo determinate).
-     * Khoảng cách giữa 2 đỉnh sóng kề nhau.
+     * Wavelength of a single wave cycle (applies when `shape` is "wavy" in determinate mode).
+     * Distance between adjacent crests.
      */
     wavelength?: number;
     /**
-     * Nhịp sóng dành riêng cho trạng thái chạy liên tục (Indeterminate Wavy).
+     * Wavelength reserved for continuous animation in Indeterminate Wavy mode.
      */
     indeterminateWavelength?: number;
     /**
-     * Khoảng hở kết dính giữa cụm vạch đang chạy và thanh nền.
-     * Cho phép truyền \`0\` để hai thanh chạm sát vào nhau liền mạch.
+     * Gap size between active indicator segments and background track.
+     * Can be set to `0` for seamless continuous touching lines.
      *
      * @example
      * ```tsx
-     * <ProgressIndicator variant="linear" shape="wavy" gapSize={0} /> // Sóng chạm track liền nét
+     * <ProgressIndicator variant="linear" shape="wavy" gapSize={0} /> // Seamless wave
      * ```
      */
     gapSize?: number;
     /**
-     * Tốc độ dao động vỗ của sóng (Multiplier). Mặc định là \`1\`.
-     * Tăng giá trị (VD: 1.5, 2) để sóng dao động nhanh hơn.
+     * Wave oscillation speed multiplier. Defaults to `1`.
+     * Increase value (e.g. 1.5, 2) for faster wave movement.
      */
     waveSpeed?: number;
     /**
-     * Tốc độ lướt / cuộn dải màu dọc trên track (Crawler) đối với trạng thái Indeterminate.
-     * Mặc định là \`1\`.
+     * Crawler speed multiplier along the track for Indeterminate mode.
+     * Defaults to `1`.
      */
     crawlerSpeed?: number;
     /**
-     * Cấu hình hiệu ứng gợn khi thanh determinate ở mức xấp xỉ mép viền (<= 10% hoặc >= 90%).
-     * - `md3`: Tự động ép phẳng biên độ sóng thành số 0 một cách mềm mại (Chuẩn Google MD3).
-     * - `continuous`: Bỏ qua các ràng buộc ép phẳng, con sóng vẫn gợn lấp lóa trên mọi giá trị phần trăm.
+     * Configuration for wave damping near edge thresholds (<= 10% or >= 90%).
+     * - `md3`: Smoothly flattens wave amplitude to zero near edges (Google MD3 standard).
+     * - `continuous`: Ignores damping, preserving wave motion across all percentages.
      *
      * @example
      * ```tsx
@@ -243,9 +243,9 @@ interface LinearProgressProps extends ProgressBaseProps {
      */
     determinateAnimation?: "md3" | "continuous";
     /**
-     * Kiểu kịch bản tịnh tiến cho thanh Indeterminate.
-     * - `md3`: Render 2 vạch song song vọt tới & co giãn mô phỏng vật lý (Chuẩn Google MD3).
-     * - `continuous`: Vạch không ngắt quãng mà tràn lướt vòng lặp mượt mà.
+     * Physics movement style for Indeterminate Linear mode.
+     * - `md3`: Renders two sliding & stretching physics-simulated lines (Google MD3 standard).
+     * - `continuous`: Renders a continuous smooth looping bar.
      *
      * @example
      * ```tsx
@@ -254,18 +254,18 @@ interface LinearProgressProps extends ProgressBaseProps {
      */
     indeterminateAnimation?: "md3" | "continuous";
     /**
-     * Bật/tắt dấm chấm điểm báo kết thúc ở cuối track (Stop Indicator).
-     * - `true`: Luôn thấy một chấm tròn bé xíu ở cuối đường đi
-     * - `false`: Tắt hoàn toàn
-     * - `"auto"`: Chấm tròn chỉ hiển thị và hòa trộn khi progress đạt 100%
+     * Toggle stop indicator dot at the end of the track.
+     * - `true`: Always displays a tiny stop indicator dot at the end of the path
+     * - `false`: Completely disabled
+     * - `"auto"`: Stop dot appears and fades in only when progress reaches 100%
      */
     showStopIndicator?: boolean | "auto";
 }
 interface CircularProgressProps extends ProgressBaseProps {
-    /** Phân loại component sang kiểu dáng Circular (hình tròn khép kín). */
+    /** Variant classification for Circular progress indicator. */
     variant: "circular";
     /**
-     * Đường kính hiển thị của vòng biểu đồ, đơn vị px.
+     * Display diameter of the circular progress ring in px.
      *
      * @example
      * ```tsx
@@ -274,30 +274,30 @@ interface CircularProgressProps extends ProgressBaseProps {
      */
     size?: number;
     /**
-     * Phong cách nét vẽ của đường viền trong trạng thái trượt.
-     * - `flat`: Đường nét cứng, vuốt tròn hai đầu stroke.
-     * - `wavy`: Vệt màu chuyển động rung tạo hình răng cưa/gợn sóng.
+     * Stroke style profile of the ring outline.
+     * - `flat`: Solid line with rounded caps.
+     * - `wavy`: Oscillating wavy line pattern.
      */
     shape?: "flat" | "wavy";
     /**
-     * Biên độ gợn của trạng thái `wavy` cho vòng tròn.
+     * Wave amplitude profile for `wavy` circular indicators.
      */
     amplitude?: number;
-    /** Bước sóng bao trọn chu vi hình tròn. */
+    /** Wavelength cycle total around the circumference. */
     wavelength?: number;
-    /** Khoảng hở khe đứt ngang nối đỉnh nét vẽ. */
+    /** Gap distance separating line ends. */
     gapSize?: number;
     /**
-     * Xoay nhanh hay chậm theo số nhân cho Crawler Circular quay Indeterminate.
+     * Speed multiplier for Indeterminate circular crawler rotation.
      */
     crawlerSpeed?: number;
 }
 type ProgressIndicatorProps = LinearProgressProps | CircularProgressProps;
 
 /**
- * Thanh tiến trình (Progress Indicator) theo nguyên tắc Material Design 3 Expressive.
- * Hỗ trợ linh hoạt 2 loại hình hiển thị: Linear (Đường thẳng) và Circular (Hình tròn),
- * cùng với thiết kế Wavy (Lượn sóng) động rất mềm mại.
+ * Progress Indicator component based on Material Design 3 Expressive guidelines.
+ * Flexible support for 2 presentation variants: Linear and Circular,
+ * with smooth dynamic Wavy shape profiles.
  *
  * @example
  * ```tsx