@tinybigui/react 0.15.0 → 0.16.0

package/dist/index.css

@@ -49,5 +49,13 @@
     stroke-dashoffset: -124px;
   }
 }
-@theme { --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4) linear infinite; --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard) infinite; }
+@keyframes progress-wave-translate {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(var(--progress-wave-wavelength, -40px));
+  }
+}
+@theme { --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4) linear infinite; --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard) infinite; --animate-progress-wave-translate: progress-wave-translate var(--md-sys-motion-duration-extra-long4) linear infinite; }
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Progress/Progress.css"],"sourcesContent":["/*\n * Progress Indicator Animations\n * Material Design 3 motion tokens for indeterminate progress states.\n *\n * Keyframes are defined here (co-located with the component) per project\n * convention — they are NOT added to the global tokens.css.\n *\n * Motion tokens referenced (from packages/tokens/src/tokens.css):\n *   --md-sys-motion-duration-medium4 : 400ms  (determinate transitions — applied via Tailwind)\n *   --md-sys-motion-duration-long2   : 500ms  (linear indeterminate cycle)\n *   --md-sys-motion-duration-long4   : 600ms  (circular indeterminate rotation)\n *   --md-sys-motion-easing-standard  : cubic-bezier(0.2, 0, 0, 1)\n */\n\n/* ---------------------------------------------------------------------------\n   LINEAR INDETERMINATE\n   Two-segment bar animation per MD3 spec.\n   First segment: starts narrow at left, expands, then slides off right.\n   Second segment: follows the first with a short delay.\n   Duration: long2 = 500ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-linear-indeterminate-1 {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes progress-linear-indeterminate-2 {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   CIRCULAR INDETERMINATE\n   Two-part animation per MD3 spec:\n   1. Container rotation: continuous 360° spin.\n   2. Dash animation: stroke-dasharray pulses between a short and long arc.\n   Rotation duration: long4 = 600ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-circular-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes progress-circular-dash {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   TAILWIND @theme INTEGRATION\n   Register animations so they can be used as Tailwind utilities:\n     animate-progress-linear-indeterminate-1\n     animate-progress-linear-indeterminate-2\n     animate-progress-circular-rotate\n     animate-progress-circular-dash\n   --------------------------------------------------------------------------- */\n\n@theme {\n  --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4)\n    linear infinite;\n\n  --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4)\n    var(--md-sys-motion-easing-standard) infinite;\n}\n"],"mappings":";AAsBA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAEA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAUA,WAAW;AACT;AACE,eAAW,OAAO;AACpB;AACA;AACE,eAAW,OAAO;AACpB;AACF;AAEA,WAAW;AACT;AACE,sBAAkB,CAAC,EAAE;AACrB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACF;AAWA,OAAO,EACL,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,kCAAkC,EAAE,yBAAyB,IAAI,gCAC/D,OAAO,QAAQ,EAEjB,gCAAgC,EAAE,uBAAuB,IAAI,gCAC3D,IAAI,iCAAiC,QAAQ;","names":[]}
+{"version":3,"sources":["../src/components/Progress/Progress.css"],"sourcesContent":["/*\n * Progress Indicator Animations\n * Material Design 3 motion tokens for indeterminate and wavy progress states.\n *\n * Keyframes are defined here (co-located with the component) per project\n * convention — they are NOT added to the global tokens.css.\n *\n * All timing values reference MD3 motion token CSS custom properties.\n * Hardcoded durations are forbidden — use the token vars below.\n *\n * Motion tokens referenced (from packages/tokens/src/tokens.css):\n *   --md-sys-motion-duration-long2          : 500ms  (linear indeterminate cycle)\n *   --md-sys-motion-duration-long4          : 600ms  (circular indeterminate rotation)\n *   --md-sys-motion-duration-extra-long4    : 1000ms (wave horizontal translation)\n *   --md-sys-motion-easing-standard         : cubic-bezier(0.2, 0, 0, 1)\n */\n\n/* ---------------------------------------------------------------------------\n   LINEAR INDETERMINATE\n   Two-segment bar animation per MD3 spec.\n   First segment: starts narrow at left, expands, then slides off right.\n   Second segment: follows the first with a short delay.\n   Duration: long2 = 500ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-linear-indeterminate-1 {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes progress-linear-indeterminate-2 {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   CIRCULAR INDETERMINATE\n   Two-part animation per MD3 spec:\n   1. Container rotation: continuous 360° spin.\n   2. Dash animation: stroke-dasharray pulses between a short and long arc.\n   Rotation duration: long4 = 600ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-circular-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes progress-circular-dash {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   WAVY TRANSLATION\n   Horizontal wave motion: the wavy path translates one full wavelength so\n   the wave appears to flow continuously.\n   Duration: extra-long4 = 1000ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-wave-translate {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    /* Translate exactly one wavelength. The wavelength is baked into the SVG\n       path so the visual loop is seamless. The actual translate distance is\n       set via --progress-wave-wavelength CSS custom property on the element. */\n    transform: translateX(var(--progress-wave-wavelength, -40px));\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   TAILWIND @theme INTEGRATION\n   Register animations so they can be used as Tailwind utilities.\n   --------------------------------------------------------------------------- */\n\n@theme {\n  --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4)\n    linear infinite;\n\n  --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4)\n    var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-wave-translate: progress-wave-translate\n    var(--md-sys-motion-duration-extra-long4) linear infinite;\n}\n"],"mappings":";AAyBA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAEA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAUA,WAAW;AACT;AACE,eAAW,OAAO;AACpB;AACA;AACE,eAAW,OAAO;AACpB;AACF;AAEA,WAAW;AACT;AACE,sBAAkB,CAAC,EAAE;AACrB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACF;AASA,WAAW;AACT;AACE,eAAW,WAAW;AACxB;AACA;AAIE,eAAW,WAAW,IAAI,0BAA0B,EAAE;AACxD;AACF;AAOA,OAAO,EACL,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,kCAAkC,EAAE,yBAAyB,IAAI,gCAC/D,OAAO,QAAQ,EAEjB,gCAAgC,EAAE,uBAAuB,IAAI,gCAC3D,IAAI,iCAAiC,QAAQ,EAE/C,iCAAiC,EAAE,wBACjC,IAAI,sCAAsC,OAAO,QAAQ;","names":[]}

package/dist/index.d.cts

@@ -4150,7 +4150,9 @@ declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<Headl
  * Built on React Aria for world-class accessibility.
  * Supports four variants: Linear Determinate, Linear Indeterminate,
  * Circular Determinate, and Circular Indeterminate.
- * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ * Implements MD3 Expressive styling: colorful primary-container track,
+ * 4dp indicator-track gap, fully-rounded segments, thick track option,
+ * and optional wavy shape.
  *
  * @example
  * ```tsx
@@ -4169,6 +4171,9 @@ declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<Headl
  * // Circular with size
  * <Progress type="circular" indeterminate size="small" aria-label="Loading" />
  *
+ * // Thick wavy linear (MD3 Expressive)
+ * <Progress type="linear" indeterminate shape="wavy" thickness="thick" aria-label="Loading" />
+ *
  * // Custom range
  * <Progress type="linear" minValue={0} maxValue={200} value={150} label="Progress" />
  * ```
@@ -4191,6 +4196,22 @@ interface ProgressProps extends AriaProgressBarProps {
      * @default "medium"
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Visual shape of the progress indicator.
+     * - `"flat"` — standard rounded rectangular/circular track.
+     * - `"wavy"` — MD3 Expressive sine-wave active indicator.
+     *   Increases linear container height to accommodate wave amplitude.
+     *   Reduced-motion users receive a flat fallback automatically.
+     * @default "flat"
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Track thickness.
+     * - `"default"` — 4dp per MD3 baseline spec.
+     * - `"thick"` — 8dp MD3 Expressive variant (fully rounded, `trackCornerRadius` = 4dp).
+     * @default "default"
+     */
+    thickness?: "default" | "thick";
     /**
      * Additional CSS classes (Tailwind).
      */
@@ -4206,7 +4227,7 @@ interface ProgressProps extends AriaProgressBarProps {
  *   type="linear"
  *   value={50}
  *   label="Upload"
- *   renderProgress={({ percentage }) => (
+ *   renderProgress={({ percentage, shape, thickness }) => (
  *     <div style={{ width: `${percentage}%` }} />
  *   )}
  * />
@@ -4228,6 +4249,16 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
      * @default "medium"
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Visual shape of the progress indicator.
+     * @default "flat"
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Track thickness.
+     * @default "default"
+     */
+    thickness?: "default" | "thick";
     /**
      * Additional CSS classes.
      */
@@ -4245,6 +4276,8 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
         isIndeterminate: boolean;
         type: "linear" | "circular";
         size: "small" | "medium" | "large";
+        shape: "flat" | "wavy";
+        thickness: "default" | "thick";
     }) => React__default.ReactNode;
 }
 
@@ -4252,23 +4285,20 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
  * Material Design 3 Progress Indicator (Layer 3: Styled)
  *
  * Built on React Aria for world-class accessibility.
- * Supports four variants driven by `type` + `indeterminate` props:
+ * Implements MD3 Expressive spec:
+ *   - Colorful track: primary-container (inactive), primary (active)
+ *   - 4dp indicator-track gap (linear + circular)
+ *   - Fully-rounded segments
+ *   - Optional thick (8dp) track
+ *   - Optional wavy shape with amplitude ramp
+ *   - useReducedMotion guard: wavy falls back to flat when reduced-motion is set
+ *
+ * Four variants driven by `type` × `indeterminate`:
  *   - Linear Determinate
  *   - Linear Indeterminate
  *   - Circular Determinate
  *   - Circular Indeterminate
  *
- * MD3 Specifications:
- * - Linear track height: 4dp (h-1)
- * - Linear track shape: rounded-full
- * - Circular default size: 48dp (medium)
- * - Circular stroke width: 4dp (SVG attribute)
- * - Active track: primary
- * - Inactive track: surface-container-highest
- * - Determinate transitions: duration-medium4 + ease-standard
- * - Indeterminate linear cycle: duration-long2
- * - Indeterminate circular rotation: duration-long4
- *
  * @example
  * ```tsx
  * // Linear determinate
@@ -4283,8 +4313,8 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
  * // Circular indeterminate
  * <Progress type="circular" indeterminate aria-label="Loading" />
  *
- * // Circular small spinner
- * <Progress type="circular" indeterminate size="small" aria-label="Loading" />
+ * // Thick wavy (MD3 Expressive)
+ * <Progress type="linear" indeterminate shape="wavy" thickness="thick" aria-label="Loading" />
  * ```
  */
 declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -4300,7 +4330,7 @@ declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps &
  * - Determinate and indeterminate progress support
  * - Internationalized value label formatting via React Aria
  * - Label linkage via aria-labelledby / aria-label
- * - Render prop for custom visual rendering
+ * - Render prop for custom visual rendering (receives shape + thickness)
  *
  * @example
  * ```tsx
@@ -4308,7 +4338,7 @@ declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps &
  * <ProgressHeadless
  *   value={50}
  *   label="Upload"
- *   renderProgress={({ percentage }) => (
+ *   renderProgress={({ percentage, shape, thickness }) => (
  *     <div style={{ width: `${percentage}%` }} />
  *   )}
  * />

package/dist/index.d.ts

@@ -4150,7 +4150,9 @@ declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<Headl
  * Built on React Aria for world-class accessibility.
  * Supports four variants: Linear Determinate, Linear Indeterminate,
  * Circular Determinate, and Circular Indeterminate.
- * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ * Implements MD3 Expressive styling: colorful primary-container track,
+ * 4dp indicator-track gap, fully-rounded segments, thick track option,
+ * and optional wavy shape.
  *
  * @example
  * ```tsx
@@ -4169,6 +4171,9 @@ declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<Headl
  * // Circular with size
  * <Progress type="circular" indeterminate size="small" aria-label="Loading" />
  *
+ * // Thick wavy linear (MD3 Expressive)
+ * <Progress type="linear" indeterminate shape="wavy" thickness="thick" aria-label="Loading" />
+ *
  * // Custom range
  * <Progress type="linear" minValue={0} maxValue={200} value={150} label="Progress" />
  * ```
@@ -4191,6 +4196,22 @@ interface ProgressProps extends AriaProgressBarProps {
      * @default "medium"
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Visual shape of the progress indicator.
+     * - `"flat"` — standard rounded rectangular/circular track.
+     * - `"wavy"` — MD3 Expressive sine-wave active indicator.
+     *   Increases linear container height to accommodate wave amplitude.
+     *   Reduced-motion users receive a flat fallback automatically.
+     * @default "flat"
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Track thickness.
+     * - `"default"` — 4dp per MD3 baseline spec.
+     * - `"thick"` — 8dp MD3 Expressive variant (fully rounded, `trackCornerRadius` = 4dp).
+     * @default "default"
+     */
+    thickness?: "default" | "thick";
     /**
      * Additional CSS classes (Tailwind).
      */
@@ -4206,7 +4227,7 @@ interface ProgressProps extends AriaProgressBarProps {
  *   type="linear"
  *   value={50}
  *   label="Upload"
- *   renderProgress={({ percentage }) => (
+ *   renderProgress={({ percentage, shape, thickness }) => (
  *     <div style={{ width: `${percentage}%` }} />
  *   )}
  * />
@@ -4228,6 +4249,16 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
      * @default "medium"
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Visual shape of the progress indicator.
+     * @default "flat"
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Track thickness.
+     * @default "default"
+     */
+    thickness?: "default" | "thick";
     /**
      * Additional CSS classes.
      */
@@ -4245,6 +4276,8 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
         isIndeterminate: boolean;
         type: "linear" | "circular";
         size: "small" | "medium" | "large";
+        shape: "flat" | "wavy";
+        thickness: "default" | "thick";
     }) => React__default.ReactNode;
 }
 
@@ -4252,23 +4285,20 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
  * Material Design 3 Progress Indicator (Layer 3: Styled)
  *
  * Built on React Aria for world-class accessibility.
- * Supports four variants driven by `type` + `indeterminate` props:
+ * Implements MD3 Expressive spec:
+ *   - Colorful track: primary-container (inactive), primary (active)
+ *   - 4dp indicator-track gap (linear + circular)
+ *   - Fully-rounded segments
+ *   - Optional thick (8dp) track
+ *   - Optional wavy shape with amplitude ramp
+ *   - useReducedMotion guard: wavy falls back to flat when reduced-motion is set
+ *
+ * Four variants driven by `type` × `indeterminate`:
  *   - Linear Determinate
  *   - Linear Indeterminate
  *   - Circular Determinate
  *   - Circular Indeterminate
  *
- * MD3 Specifications:
- * - Linear track height: 4dp (h-1)
- * - Linear track shape: rounded-full
- * - Circular default size: 48dp (medium)
- * - Circular stroke width: 4dp (SVG attribute)
- * - Active track: primary
- * - Inactive track: surface-container-highest
- * - Determinate transitions: duration-medium4 + ease-standard
- * - Indeterminate linear cycle: duration-long2
- * - Indeterminate circular rotation: duration-long4
- *
  * @example
  * ```tsx
  * // Linear determinate
@@ -4283,8 +4313,8 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
  * // Circular indeterminate
  * <Progress type="circular" indeterminate aria-label="Loading" />
  *
- * // Circular small spinner
- * <Progress type="circular" indeterminate size="small" aria-label="Loading" />
+ * // Thick wavy (MD3 Expressive)
+ * <Progress type="linear" indeterminate shape="wavy" thickness="thick" aria-label="Loading" />
  * ```
  */
 declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -4300,7 +4330,7 @@ declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps &
  * - Determinate and indeterminate progress support
  * - Internationalized value label formatting via React Aria
  * - Label linkage via aria-labelledby / aria-label
- * - Render prop for custom visual rendering
+ * - Render prop for custom visual rendering (receives shape + thickness)
  *
  * @example
  * ```tsx
@@ -4308,7 +4338,7 @@ declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps &
  * <ProgressHeadless
  *   value={50}
  *   label="Upload"
- *   renderProgress={({ percentage }) => (
+ *   renderProgress={({ percentage, shape, thickness }) => (
  *     <div style={{ width: `${percentage}%` }} />
  *   )}
  * />