@payfit/unity-components 2.46.29 → 2.46.30

package/dist/esm/components/stepper/Stepper.context.js

@@ -0,0 +1,22 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as n, useContext as p } from "react";
+const t = n({
+  currentStep: 0
+});
+function s({
+  children: e,
+  currentStep: r
+}) {
+  return /* @__PURE__ */ o(t.Provider, { value: { currentStep: r }, children: e });
+}
+function x() {
+  const e = p(t);
+  if (!e)
+    throw new Error("useStepperContext must be used within an StepperProvider");
+  return e;
+}
+export {
+  t as StepperContext,
+  s as StepperProvider,
+  x as useStepperContext
+};

package/dist/esm/components/stepper/Stepper.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { StepperProvider as m } from "./Stepper.context.js";
+const d = t(
+  ({ children: e, currentStep: p, ...o }, a) => /* @__PURE__ */ r(m, { currentStep: p, children: /* @__PURE__ */ r(
+    "ol",
+    {
+      "data-dd-privacy": "allow",
+      ref: a,
+      className: "uy:flex uy:gap-200",
+      ...o,
+      children: e
+    }
+  ) })
+);
+d.displayName = "Stepper";
+export {
+  d as Stepper
+};

package/dist/esm/components/stepper/hooks/useStepper.js

@@ -0,0 +1,26 @@
+import { useState as n } from "react";
+const v = ({
+  initialStep: e,
+  totalSteps: s
+}) => {
+  const [t, c] = n(e), [u, p] = n(e <= 1), [x, S] = n(
+    e >= s
+  ), f = () => {
+    t >= s || o("next");
+  }, g = () => {
+    t <= 1 || o("previous");
+  }, o = (i) => {
+    const r = i === "next" ? t + 1 : t - 1;
+    p(r <= 1), S(r >= s), c(r);
+  };
+  return {
+    currentStep: t,
+    goNext: f,
+    goPrevious: g,
+    isLastStep: x,
+    isFirstStep: u
+  };
+};
+export {
+  v as useStepper
+};

package/dist/esm/components/stepper/parts/Step.js

@@ -0,0 +1,56 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Icon as d } from "@payfit/unity-icons";
+import { uyTv as f } from "@payfit/unity-themes";
+import { Text as x } from "../../text/Text.js";
+import { useStepperContext as b } from "../Stepper.context.js";
+const g = f({
+  slots: {
+    base: "uy:flex uy:flex-1 uy:flex-col uy:gap-75",
+    bar: "uy:h-50 uy:w-full uy:rounded-full uy:transition-all",
+    labelRow: "uy:flex uy:flex-row uy:items-center uy:gap-50",
+    text: "uy:typography-body-strong",
+    statusIcon: "uy:starting:scale-0 uy:scale-100 uy:transition-transform uy:duration-150"
+  },
+  variants: {
+    stepStatus: {
+      current: { bar: "uy:bg-surface-primary" },
+      completed: { bar: "uy:bg-surface-primary" },
+      uncompleted: { bar: "uy:bg-surface-neutral-lowest" }
+    }
+  }
+}), h = m(
+  ({ label: o, stepNumber: e, ...u }, c) => {
+    const { currentStep: a } = b(), t = a === e ? "current" : a > e ? "completed" : "uncompleted", { base: l, bar: n, labelRow: i, text: y, statusIcon: p } = g({
+      stepStatus: t
+    });
+    return /* @__PURE__ */ s(
+      "li",
+      {
+        ref: c,
+        className: l(),
+        "aria-current": t === "current" ? "step" : void 0,
+        ...u,
+        children: [
+          /* @__PURE__ */ r("div", { className: n(), "aria-hidden": "true" }),
+          /* @__PURE__ */ s("div", { className: i(), children: [
+            /* @__PURE__ */ r(x, { className: y(), children: `${e}. ${o}` }),
+            t === "completed" && /* @__PURE__ */ r(
+              d,
+              {
+                src: "CheckCircleOutlined",
+                color: "content.success",
+                size: 20,
+                className: p()
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Step";
+export {
+  h as Step
+};

package/dist/esm/index.d.ts

@@ -33,6 +33,11 @@ export * from './components/breadcrumbs/Breadcrumbs.js';
 export * from './components/breadcrumbs/parts/Breadcrumb.js';
 export * from './components/breadcrumbs/parts/RawBreadcrumbLink.js';
 export * from './components/button/Button.js';
+export * from './components/carousel/Carousel.js';
+export * from './components/carousel/parts/CarouselHeader.js';
+export * from './components/carousel/parts/CarouselNav.js';
+export * from './components/carousel/parts/CarouselContent.js';
+export * from './components/carousel/parts/CarouselSlide.js';
 export * from './components/card/Card.js';
 export * from './components/card/parts/CardTitle.js';
 export * from './components/card/parts/CardContent.js';
@@ -167,6 +172,9 @@ export * from './components/side-panel/parts/SidePanelFooter.js';
 export * from './components/side-panel/parts/SidePanelHeader.js';
 export * from './components/skip-links/SkipLinks.js';
 export * from './components/spinner/Spinner.js';
+export * from './components/stepper/Stepper.js';
+export * from './components/stepper/parts/Step.js';
+export * from './components/stepper/hooks/useStepper.js';
 export * from './components/table/Table.js';
 export * from './components/table/parts/TableBody.js';
 export * from './components/table/parts/TableCell.js';
@@ -226,8 +234,3 @@ export { useFieldA11yContext } from './components/form-field/TanstackFormField.c
 export { fieldRevalidateLogic } from './utils/field-revalidate-logic.js';
 export type { FieldRevalidateLogicProps } from './utils/field-revalidate-logic.js';
 export * from './providers/router/RouterProvider.js';
-export * from './components/carousel/Carousel.js';
-export * from './components/carousel/parts/CarouselHeader.js';
-export * from './components/carousel/parts/CarouselNav.js';
-export * from './components/carousel/parts/CarouselContent.js';
-export * from './components/carousel/parts/CarouselSlide.js';