@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/side-panel/SidePanel.js

@@ -0,0 +1,67 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { ModalOverlay as c, Modal as g, Dialog as p } from "react-aria-components";
+import { tv as x } from "tailwind-variants";
+import { SidePanelDragIndicator as h } from "./parts/SidePanelDragIndicator.js";
+const v = x({
+  slots: {
+    overlay: [
+      "md:uy-bg-gradient-to-r md:uy-from-grayscale-L12/0 md:uy-to-grayscale-L12/10 md:uy-from-70% md:uy-via-100%",
+      "uy-fixed uy-inset-0 uy-isolate",
+      "data-[entering]:uy-animate-fade-in data-[exiting]:uy-animate-fade-out"
+    ],
+    wrapper: [
+      "uy-w-full md:uy-w-[400px]",
+      "uy-fixed uy-bottom-0 md:uy-inset-y-200 md:uy-right-200 uy-z-[100]",
+      "uy-bg-surface-neutral uy-rounded-t-200 md:uy-rounded-200 uy-shadow-flying",
+      "uy-flex uy-flex-col uy-h-[95svh] md:uy-max-h-[calc(100vh-2rem)]",
+      "uy-overflow-hidden",
+      "data-[entering]:uy-animate-slide-up-fade-in data-[exiting]:uy-animate-slide-down-fade-out md:data-[entering]:uy-animate-slide-right-fade-in md:data-[exiting]:uy-animate-slide-right-fade-out"
+    ],
+    content: [
+      "uy-flex uy-flex-col uy-h-full uy-overflow-hidden uy-outline-none"
+    ]
+  }
+}), w = f(
+  ({
+    children: a,
+    isOpen: d,
+    onOpenChange: t,
+    defaultOpen: i,
+    isDismissable: u = !0,
+    isKeyboardDismissDisabled: n = !1,
+    ...r
+  }, o) => {
+    const { overlay: y, wrapper: l, content: m } = v();
+    return /* @__PURE__ */ e(
+      c,
+      {
+        className: y(),
+        isOpen: d,
+        onOpenChange: t,
+        defaultOpen: i,
+        isDismissable: u,
+        isKeyboardDismissDisabled: n,
+        children: /* @__PURE__ */ s(
+          g,
+          {
+            "data-dd-privacy": "allow",
+            ...r,
+            ref: o,
+            className: l(),
+            "data-unity-side-panel": !0,
+            children: [
+              /* @__PURE__ */ e(h, {}),
+              /* @__PURE__ */ e(p, { className: m(), children: a })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+w.displayName = "SidePanel";
+export {
+  w as SidePanel,
+  v as sidePanel
+};

package/dist/esm/components/side-panel/parts/SidePanelContent.d.ts

@@ -0,0 +1,71 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanelContent: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    scroller: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    scroller: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    scroller: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface SidePanelContentProps extends PropsWithChildren<VariantProps<typeof sidePanelContent>> {
+    className?: string;
+}
+/**
+ * The `SidePanelContent` component renders the main content area of a side panel.
+ * It takes up the majority of the space between the header and footer components
+ * and adjusts for both mobile (bottom sheet) and desktop (side panel) views.
+ * The content is scrollable when it exceeds the available space.
+ * @component
+ * @param {SidePanelContentProps} props - The props for the `SidePanelContent` component
+ * @example
+ * ```tsx
+ * import { SidePanelContent } from '@payfit/unity-components'
+ *
+ * <SidePanelContent>
+ *   Your panel content here
+ * </SidePanelContent>
+ * ```
+ * @see {@link SidePanelContentProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelContent: import('react').ForwardRefExoticComponent<SidePanelContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelContent };

package/dist/esm/components/side-panel/parts/SidePanelContent.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { tv as s } from "tailwind-variants";
+const a = s({
+  slots: {
+    base: [
+      "uy-bg-surface-neutral",
+      "uy-flex uy-flex-col uy-flex-1 uy-min-h-0 uy-overflow-hidden",
+      "uy-w-full"
+    ],
+    scroller: [
+      "uy-flex-1 uy-overflow-y-auto uy-overflow-x-hidden uy-p-300",
+      "uy-h-full uy-min-h-0"
+    ]
+  }
+}), f = u(
+  ({ children: o, ...l }, r) => {
+    const { base: n, scroller: t } = a();
+    return /* @__PURE__ */ e("section", { ref: r, className: n(), ...l, children: /* @__PURE__ */ e("div", { className: t(), children: o }) });
+  }
+);
+f.displayName = "SidePanelContent";
+export {
+  f as SidePanelContent,
+  a as sidePanelContent
+};

package/dist/esm/components/side-panel/parts/SidePanelDragIndicator.d.ts

@@ -0,0 +1,54 @@
+export declare const sidePanelDragIndicator: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    indicator: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+/**
+ * A drag indicator component that connects to the overlay state context and
+ * provides swipe-to-dismiss functionality for the SidePanel.
+ * @internal
+ */
+export declare function SidePanelDragIndicator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidePanelDragIndicator {
+    var displayName: string;
+}

package/dist/esm/components/side-panel/parts/SidePanelDragIndicator.js

@@ -0,0 +1,67 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as x, useContext as D } from "react";
+import { useDrag as b } from "@use-gesture/react";
+import { OverlayTriggerStateContext as h } from "react-aria-components";
+import { tv as v } from "tailwind-variants";
+import { useBreakpointListener as P } from "../../../hooks/use-breakpoint-listener.js";
+const S = v({
+  slots: {
+    base: [
+      "md:uy-hidden uy-mx-auto uy-pt-300 uy-w-500",
+      "uy-cursor-grab uy-touch-action-none"
+    ],
+    indicator: "uy-h-50 uy-rounded-pill uy-bg-content-neutral-lowest"
+  }
+}), I = 100;
+function N() {
+  const r = x(null), n = D(h), s = P(), { base: i, indicator: l } = S(), u = s === "xs" || s === "sm", c = b(
+    (d) => {
+      var o;
+      const {
+        movement: [T, e],
+        direction: [E, m],
+        intentional: f,
+        cancel: y,
+        last: p,
+        event: g
+      } = d;
+      if (!u) {
+        y();
+        return;
+      }
+      g.preventDefault();
+      const t = (o = r.current) == null ? void 0 : o.closest(
+        "[data-unity-side-panel]"
+      );
+      if (t) {
+        if (e < 0) {
+          t.style.transform = "translate3d(0, 0, 0)";
+          return;
+        }
+        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", p && f && (e > I || m > 0 ? n && setTimeout(() => {
+          n.close();
+        }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
+      }
+    },
+    {
+      axis: "y",
+      filterTaps: !0,
+      threshold: 5
+    }
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: i(),
+      "aria-hidden": "true",
+      ref: r,
+      ...c(),
+      children: /* @__PURE__ */ a("div", { className: l() })
+    }
+  );
+}
+N.displayName = "SidePanelDragIndicator";
+export {
+  N as SidePanelDragIndicator,
+  S as sidePanelDragIndicator
+};

package/dist/esm/components/side-panel/parts/SidePanelFooter.d.ts

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanelFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface SidePanelFooterProps extends PropsWithChildren<VariantProps<typeof sidePanelFooter>> {
+    className?: string;
+}
+/**
+ * The `SidePanelFooter` component renders the footer section of a side panel.
+ * It provides a space for action buttons and stays fixed at the bottom of the panel.
+ * On mobile devices, it respects the safe area to avoid being obscured by device UI elements.
+ * @component
+ * @param {SidePanelFooterProps} props - The props for the `SidePanelFooter` component
+ * @example
+ * ```tsx
+ * import { SidePanelFooter, Button } from '@payfit/unity-components'
+ *
+ * <SidePanelFooter>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button>Save</Button>
+ * </SidePanelFooter>
+ * ```
+ * @see {@link SidePanelFooterProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelFooter: import('react').ForwardRefExoticComponent<SidePanelFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelFooter };

package/dist/esm/components/side-panel/parts/SidePanelFooter.js

@@ -0,0 +1,20 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { tv as y } from "tailwind-variants";
+const a = y({
+  base: [
+    "uy-py-200 uy-px-300 uy-w-full",
+    "uy-flex uy-items-center uy-justify-end uy-gap-100 uy-shrink-0",
+    "uy-bg-surface-neutral uy-rounded-bl-200 uy-rounded-br-200 uy-border-t uy-border-solid uy-border-t-solid uy-border-border-neutral",
+    "uy-sticky uy-bottom-0 uy-z-10",
+    "uy-mt-auto",
+    "uy-pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] md:uy-pb-200"
+  ]
+}), d = t(
+  ({ children: e, ...r }, o) => /* @__PURE__ */ u("footer", { ref: o, className: a(), ...r, children: e })
+);
+d.displayName = "SidePanelFooter";
+export {
+  d as SidePanelFooter,
+  a as sidePanelFooter
+};

package/dist/esm/components/side-panel/parts/SidePanelHeader.d.ts

@@ -0,0 +1,75 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanelHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface SidePanelHeaderProps extends PropsWithChildren<VariantProps<typeof sidePanelHeader>> {
+    className?: string;
+}
+/**
+ * The `SidePanelHeader` component renders the header section of a side panel.
+ * It includes a title and close button, and on mobile it displays a drag handle for bottom sheet interaction.
+ * @component
+ * @param {SidePanelHeaderProps} props - The props for the `SidePanelHeader` component
+ * @example
+ * ```tsx
+ * import { SidePanelHeader } from '@payfit/unity-components'
+ *
+ * <SidePanelHeader>Title of the panel</SidePanelHeader>
+ * ```
+ * @see {@link SidePanelHeaderProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelHeader: import('react').ForwardRefExoticComponent<SidePanelHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelHeader };

package/dist/esm/components/side-panel/parts/SidePanelHeader.js

@@ -0,0 +1,43 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { Heading as y } from "react-aria-components";
+import { tv as i } from "tailwind-variants";
+import { CircularIconButton as c } from "../../icon-button/CircularIconButton.js";
+const d = i({
+  // add the component styles
+  slots: {
+    base: [
+      "uy-py-200 uy-px-300 uy-w-full",
+      "uy-flex uy-flex-col uy-shrink-0",
+      "uy-bg-surface-neutral uy-rounded-tl-200 uy-rounded-tr-200 uy-shadow-raising",
+      "uy-sticky uy-top-0 uy-z-10"
+    ],
+    content: ["uy-flex uy-items-center uy-justify-between uy-w-full"],
+    heading: [
+      "uy-typography-h2 md:uy-typography-h3 uy-text-content-neutral uy-truncate"
+    ]
+  }
+}), m = s(
+  ({ children: t, ...o }, r) => {
+    const { base: n, content: u, heading: l } = d();
+    return /* @__PURE__ */ e("header", { ref: r, className: n(), ...o, children: /* @__PURE__ */ a("div", { className: u(), children: [
+      /* @__PURE__ */ e(y, { slot: "title", className: l(), children: t }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          asElement: "button",
+          slot: "close",
+          icon: "CloseOutlined",
+          title: "Close",
+          size: "large",
+          color: "content.neutral.low"
+        }
+      )
+    ] }) });
+  }
+);
+m.displayName = "SidePanelHeader";
+export {
+  m as SidePanelHeader,
+  d as sidePanelHeader
+};

package/dist/esm/components/spinner/Spinner.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+export type SpinnerProps = Pick<HTMLAttributes<HTMLDivElement>, 'aria-hidden' | 'role'> & {
+    /** The label text for the spinner */
+    label: string;
+    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
+    size: 'small' | 'medium';
+    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
+    color?: 'primary' | 'inverted' | 'inherit';
+};
+export declare const Spinner: import('react').ForwardRefExoticComponent<Pick<HTMLAttributes<HTMLDivElement>, "role" | "aria-hidden"> & {
+    /** The label text for the spinner */
+    label: string;
+    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
+    size: "small" | "medium";
+    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
+    color?: "primary" | "inverted" | "inherit";
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/esm/components/spinner/Spinner.js

@@ -0,0 +1,108 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { tv as m } from "tailwind-variants";
+import f from "../../hooks/use-id.js";
+const h = m({
+  slots: {
+    base: "uy-flex uy-flex-col uy-items-center uy-gap-200",
+    indicator: "",
+    label: "uy-typography-body uy-text-left uy-truncate"
+  },
+  variants: {
+    size: {
+      small: {
+        indicator: "uy-w-200 uy-h-200",
+        label: "uy-hidden"
+      },
+      medium: {
+        indicator: "uy-w-300 uy-h-300"
+      }
+    },
+    color: {
+      primary: {
+        indicator: "uy-text-content-primary"
+      },
+      inverted: {
+        indicator: "uy-text-content-inverted",
+        label: "uy-text-content-inverted"
+      },
+      inherit: {
+        indicator: ""
+      }
+    }
+  },
+  defaultVariants: {
+    size: "small",
+    color: "primary"
+  }
+});
+function n({ label: l, color: o, size: e, role: r = "status", ...s }, c) {
+  const a = `uy-spinner-label-${f()}`, {
+    base: d,
+    indicator: y,
+    label: u
+  } = h({
+    size: e,
+    color: o
+  });
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...s,
+      ref: c,
+      role: r,
+      className: d(),
+      "aria-labelledby": r === "status" ? a : void 0,
+      "aria-live": "polite",
+      "data-dd-privacy": "allow",
+      children: [
+        /* @__PURE__ */ t(
+          "svg",
+          {
+            viewBox: "0 0 100 100",
+            "aria-hidden": "true",
+            className: y(),
+            children: [
+              /* @__PURE__ */ i("title", { children: "Loading" }),
+              /* @__PURE__ */ i(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: "45",
+                  fill: "none",
+                  stroke: "currentColor",
+                  style: {
+                    "--r": "45px",
+                    "--1deg": "calc(2 * pi * var(--r) / 360)",
+                    strokeWidth: "9.6px",
+                    shapeRendering: "geometricPrecision",
+                    strokeDasharray: "calc(40 * var(--1deg)) calc(80 * var(--1deg))",
+                    transformOrigin: "50% 50%",
+                    animation: "arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          "span",
+          {
+            id: a,
+            className: u(),
+            "aria-hidden": e !== "small",
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+n.displayName = "Spinner";
+const S = p(
+  n
+);
+export {
+  S as Spinner
+};

package/dist/esm/components/spinner/dynamic-content.d.ts

@@ -0,0 +1,2 @@
+declare const DynamicContent: () => import("react/jsx-runtime").JSX.Element;
+export default DynamicContent;

package/dist/esm/components/stepper/Stepper.context.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+interface StepperContextValue {
+    currentStep: number;
+}
+export declare const StepperContext: import('react').Context<StepperContextValue>;
+export declare function StepperProvider({ children, currentStep, }: PropsWithChildren<StepperContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useStepperContext(): StepperContextValue;
+export {};

package/dist/esm/components/stepper/Stepper.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+export interface StepperProps extends Pick<HTMLAttributes<HTMLOListElement>, 'aria-label'> {
+    /**
+     * The current step number, it comes from the `useStepper` hook
+     */
+    currentStep: number;
+}
+/**
+ * Use the `Stepper` component to navigate between a discrete number of steps in a linear fashion.
+ *
+ * The `Stepper` defines its list of steps as children using the `Step` component.
+ *
+ * The `Stepper` component is a controlled component by default. You can manage its state using the `useStepper` hook as a companion for this component.
+ *
+ * The type signature for this hook is the following:
+ *
+ * ```ts
+ * interface StepperState {
+ *   currentStep: number
+ *   goNext: () => void
+ *   goPrevious: () => void
+ *   isLastStep: boolean
+ *   isFirstStep: boolean
+ * }
+ * type useStepper = ({initialStep: number, totalSteps: number}) => StepperState
+ * ```
+ *
+ * Where:
+ * - `totalSteps`is the total number of steps in the stepper
+ * - `initialStep` is the index of the step that should be shown on first render
+ *
+ * The returned state provides:
+ * - `currentStep`: The currently active step.
+ * - `goNext`: a callback to trigger navigation to the next step
+ * - `goPrevious`: a callback to go to the previous step
+ * - `isLastStep`: a boolean flag indicating if the current step is the last one
+ * - `isFirstStep`: a boolean flag indicating if the current step is the first one
+ *
+ * Use these state variables to determine the `currenStep` property of the `Stepper` component.
+ *
+ */
+declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLOListElement>>;
+export { Stepper };

package/dist/esm/components/stepper/hooks/useStepper.d.ts

@@ -0,0 +1,12 @@
+export interface StepperState {
+    currentStep: number;
+    goNext: () => void;
+    goPrevious: () => void;
+    isLastStep: boolean;
+    isFirstStep: boolean;
+}
+declare const useStepper: ({ initialStep, totalSteps, }: {
+    initialStep: number;
+    totalSteps: number;
+}) => StepperState;
+export { useStepper };

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

@@ -0,0 +1,15 @@
+interface StepProps {
+    /**
+     * The label of the step which will be displayed under the step number
+     */
+    label: string;
+    /**
+     * The step number used to identify the step among the step list
+     */
+    stepNumber: number;
+}
+/**
+ * The `Step` component is used to display a step belonging the `Stepper`.
+ */
+declare const Step: import('react').ForwardRefExoticComponent<StepProps & import('react').RefAttributes<HTMLLIElement>>;
+export { Step };