@payfit/unity-components 2.35.6 → 2.36.1

package/dist/esm/components/progress-bar/ProgressBar.d.ts

@@ -1,8 +1,90 @@
-interface ProgressBarProps {
+import { VariantProps } from '@payfit/unity-themes';
+import { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components/ProgressBar';
+declare const progressBar: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: {
+            meter: string;
+        };
+        primary: {
+            meter: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+            meter: string;
+        };
+        large: {
+            base: string;
+            meter: string;
+        };
+    };
+    isFull: {
+        true: {};
+    };
+}, {
+    base: string;
+    meter: string;
+}, undefined, {
+    variant: {
+        success: {
+            meter: string;
+        };
+        primary: {
+            meter: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+            meter: string;
+        };
+        large: {
+            base: string;
+            meter: string;
+        };
+    };
+    isFull: {
+        true: {};
+    };
+}, {
+    base: string;
+    meter: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: {
+            meter: string;
+        };
+        primary: {
+            meter: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+            meter: string;
+        };
+        large: {
+            base: string;
+            meter: string;
+        };
+    };
+    isFull: {
+        true: {};
+    };
+}, {
+    base: string;
+    meter: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface ProgressBarProps extends AriaProgressBarProps {
     /** the range of the value*/
     range?: [min: number, max: number];
     /** the value of the progression */
     value: number;
+    /** the visual variant of the progress bar fill */
+    variant?: VariantProps<typeof progressBar>['variant'];
+    /** the size of the progress bar */
+    size?: VariantProps<typeof progressBar>['size'];
     /** an aria-label for the accessibility */
     'aria-label': string;
 }

package/dist/esm/components/progress-bar/ProgressBar.js

@@ -1,35 +1,71 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import { ProgressBar as c } from "react-aria-components/ProgressBar";
-const f = d({
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { ProgressBar as g } from "react-aria-components/ProgressBar";
+const b = f({
   slots: {
-    base: "uy:rounded-150 uy:bg-surface-neutral-disabled uy:h-150 uy:top-[50%] uy:transform uy:translate-y-[-50%] uy:w-full",
-    meter: "uy:rounded-l-150 uy:absolute uy:h-full uy:top-[50%] uy:transform uy:translate-y-[-50%] uy:bg-surface-success"
+    base: "uy:relative uy:bg-surface-neutral-disabled uy:w-full",
+    meter: "uy:absolute uy:inset-y-0 uy:left-0"
   },
   variants: {
-    isFull: {
-      true: {
-        meter: "uy:rounded-r-150"
+    variant: {
+      success: {
+        meter: "uy:bg-surface-success"
+      },
+      primary: {
+        meter: "uy:bg-surface-primary"
+      }
+    },
+    size: {
+      small: {
+        base: "uy:h-75 uy:rounded-75",
+        meter: "uy:rounded-l-75"
+      },
+      large: {
+        base: "uy:h-150 uy:rounded-150",
+        meter: "uy:rounded-l-150"
       }
+    },
+    isFull: {
+      true: {}
     }
   },
+  compoundVariants: [
+    {
+      size: "small",
+      isFull: !0,
+      class: { meter: "uy:rounded-r-75" }
+    },
+    {
+      size: "large",
+      isFull: !0,
+      class: { meter: "uy:rounded-r-150" }
+    }
+  ],
   defaultVariants: {
+    variant: "success",
+    size: "large",
     isFull: !1
   }
-}), p = n(
-  ({ value: a, range: e = [0, 100], ...u }, l) => {
-    const [t, s] = e, o = a >= s, { base: i, meter: y } = f({ isFull: o });
-    return /* @__PURE__ */ r(
-      c,
+}), p = y(
+  ({
+    value: r,
+    range: a = [0, 100],
+    variant: l = "success",
+    size: u = "large",
+    ...t
+  }, i) => {
+    const [o, s] = a, m = r >= s, { base: d, meter: c } = b({ isFull: m, variant: l, size: u });
+    return /* @__PURE__ */ e(
+      g,
       {
-        ref: l,
-        value: a,
-        minValue: t,
+        ref: i,
+        value: r,
+        minValue: o,
         maxValue: s,
-        "aria-label": u["aria-label"],
+        "aria-label": t["aria-label"],
         "data-dd-privacy": "allow",
-        children: ({ percentage: m }) => /* @__PURE__ */ r("div", { className: i(), children: /* @__PURE__ */ r("div", { className: y(), style: { width: `${m}%` } }) })
+        children: ({ percentage: n }) => /* @__PURE__ */ e("div", { className: d(), children: /* @__PURE__ */ e("div", { className: c(), style: { width: `${n}%` } }) })
       }
     );
   }

package/dist/esm/components/stepper/parts/Step.d.ts

@@ -1,6 +1,7 @@
 interface StepProps {
     /**
-     * The label of the step which will be displayed under the step number
+     * The label of the step, displayed under the indicator bar.
+     * It is automatically prefixed with the step number (e.g. `1. Reviewers`).
      */
     label: string;
     /**
@@ -9,7 +10,7 @@ interface StepProps {
     stepNumber: number;
 }
 /**
- * The `Step` component is used to display a step belonging the `Stepper`.
+ * The `Step` component is used to display a step belonging to a `Stepper`.
  */
 declare const Step: import('react').ForwardRefExoticComponent<StepProps & import('react').RefAttributes<HTMLLIElement>>;
 export { Step };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.35.6",
+  "version": "2.36.1",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -43,7 +43,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-illustrations": "2.35.6",
+    "@payfit/unity-illustrations": "2.36.1",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.28.0",
@@ -75,8 +75,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.35.6",
-    "@payfit/unity-themes": "2.35.6",
+    "@payfit/unity-icons": "2.36.1",
+    "@payfit/unity-themes": "2.36.1",
     "@storybook/react-vite": "^10.3.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -90,9 +90,9 @@
     "@figma/code-connect": "1.4.3",
     "@hookform/devtools": "4.4.0",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-icons": "2.35.6",
-    "@payfit/unity-illustrations": "2.35.6",
-    "@payfit/unity-themes": "2.35.6",
+    "@payfit/unity-icons": "2.36.1",
+    "@payfit/unity-illustrations": "2.36.1",
+    "@payfit/unity-themes": "2.36.1",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-designs": "11.1.3",
     "@storybook/addon-docs": "10.3.5",