@quen-ui/components 1.1.0 → 1.2.0

package/dist/Slider/useSlider.cjs.js

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useSlider = ({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  range = false,
+  disabled = false,
+  orientation = "horizontal",
+  draggableTrack = false
+}) => {
+  const normalize = (v, isRange) => {
+    if (isRange) return Array.isArray(v) ? v : [min, max];
+    const singleVal = typeof v === "number" ? v : min;
+    return [singleVal, singleVal];
+  };
+  const [values, setValues] = React.useState(
+    () => normalize(value, range)
+  );
+  const valuesRef = React.useRef(values);
+  valuesRef.current = values;
+  React.useEffect(() => {
+    const next = normalize(value, range);
+    setValues(
+      (prev) => prev[0] === next[0] && prev[1] === next[1] ? prev : next
+    );
+  }, [value, range, min, max]);
+  const clamp = (v) => Math.min(max, Math.max(min, v));
+  const snap = React.useCallback(
+    (raw) => clamp(Number((Math.round(raw / step) * step).toFixed(10))),
+    [min, max, step]
+  );
+  const percentOf = (v) => (v - min) / (max - min) * 100;
+  const trackRef = React.useRef(null);
+  const isDraggingRef = React.useRef(false);
+  const dragTargetRef = React.useRef(null);
+  const isDraggingRangeRef = React.useRef(false);
+  const rangeOffsetRef = React.useRef(0);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const getRawValue = React.useCallback(
+    (clientX, clientY) => {
+      if (!trackRef.current) return min;
+      const rect = trackRef.current.getBoundingClientRect();
+      const ratio = orientation === "vertical" ? 1 - (clientY - rect.top) / rect.height : (clientX - rect.left) / rect.width;
+      return min + Math.min(1, Math.max(0, ratio)) * (max - min);
+    },
+    [orientation, min, max]
+  );
+  const update = React.useCallback(
+    (next) => {
+      const [s, e] = next[0] > next[1] ? [next[1], next[0]] : next;
+      setValues((prev) => {
+        if (prev[0] === s && prev[1] === e) return prev;
+        onChange?.(range ? [s, e] : e);
+        return [s, e];
+      });
+    },
+    [onChange, range]
+  );
+  const attachDragListeners = (target, e, rangeOffset) => {
+    if (disabled) return;
+    isDraggingRef.current = true;
+    dragTargetRef.current = target;
+    isDraggingRangeRef.current = rangeOffset !== void 0;
+    if (rangeOffset !== void 0) rangeOffsetRef.current = rangeOffset;
+    setIsDragging(true);
+    e.target?.setPointerCapture?.(e.pointerId);
+    const onMove = (ev) => {
+      if (!isDraggingRef.current || !trackRef.current) return;
+      ev.preventDefault();
+      const raw = getRawValue(ev.clientX, ev.clientY);
+      const current = valuesRef.current;
+      if (isDraggingRangeRef.current) {
+        const rangeSize = current[1] - current[0];
+        const newStart = snap(raw - rangeOffsetRef.current);
+        let finalStart = clamp(newStart);
+        let finalEnd = clamp(finalStart + rangeSize);
+        if (finalEnd > max) {
+          finalEnd = max;
+          finalStart = clamp(max - rangeSize);
+        }
+        update([finalStart, finalEnd]);
+      } else if (target === "start") {
+        update([snap(raw), current[1]]);
+      } else if (target === "end") {
+        update([current[0], snap(raw)]);
+      }
+    };
+    const onUp = () => {
+      isDraggingRef.current = false;
+      dragTargetRef.current = null;
+      isDraggingRangeRef.current = false;
+      setIsDragging(false);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  };
+  const onPointerDownThumb = React.useCallback(
+    (target, e) => {
+      if (disabled) return;
+      attachDragListeners(target, e.nativeEvent);
+    },
+    [disabled, attachDragListeners]
+  );
+  const onPointerDownTrack = React.useCallback(
+    (e) => {
+      if (disabled) return;
+      const nativeEvent = e.nativeEvent;
+      const raw = getRawValue(nativeEvent.clientX, nativeEvent.clientY);
+      const current = valuesRef.current;
+      if (draggableTrack && range && raw >= current[0] && raw <= current[1]) {
+        if (trackRef.current)
+          trackRef.current.setPointerCapture(nativeEvent.pointerId);
+        const offset = raw - current[0];
+        attachDragListeners(null, nativeEvent, offset);
+        return;
+      }
+      const snapped = snap(raw);
+      if (range) {
+        const distStart = Math.abs(snapped - current[0]);
+        const distEnd = Math.abs(snapped - current[1]);
+        const target = distStart <= distEnd ? "start" : "end";
+        update(
+          target === "start" ? [snapped, current[1]] : [current[0], snapped]
+        );
+      } else {
+        update([snapped, snapped]);
+      }
+    },
+    [
+      disabled,
+      getRawValue,
+      draggableTrack,
+      range,
+      snap,
+      update,
+      attachDragListeners
+    ]
+  );
+  const onKeyDown = React.useCallback(
+    (target, e) => {
+      if (disabled) return;
+      const pageStep = Math.max(step, (max - min) / 10);
+      let delta = 0;
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowRight":
+          delta = step;
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+          delta = -step;
+          break;
+        case "Home":
+          delta = min - values[target === "start" ? 0 : 1];
+          break;
+        case "End":
+          delta = max - values[target === "start" ? 0 : 1];
+          break;
+        case "PageUp":
+          delta = pageStep;
+          break;
+        case "PageDown":
+          delta = -pageStep;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      const current = values[target === "start" ? 0 : 1];
+      const newVal = snap(current + delta);
+      update(target === "start" ? [newVal, values[1]] : [values[0], newVal]);
+    },
+    [disabled, values, step, min, max, snap, update]
+  );
+  return {
+    values,
+    trackRef,
+    percentStart: percentOf(values[0]),
+    percentEnd: percentOf(values[1]),
+    onPointerDownThumb,
+    onPointerDownTrack,
+    onKeyDown,
+    isDragging
+  };
+};
+exports.useSlider = useSlider;

package/dist/Slider/useSlider.d.ts

@@ -0,0 +1,11 @@
+import { ISliderProps, TSliderRangeValue } from './types';
+export declare const useSlider: ({ value, min, max, step, onChange, range, disabled, orientation, draggableTrack }: ISliderProps) => {
+    values: TSliderRangeValue;
+    trackRef: import('react').RefObject<HTMLDivElement | null>;
+    percentStart: number;
+    percentEnd: number;
+    onPointerDownThumb: (target: "start" | "end", e: React.PointerEvent) => void;
+    onPointerDownTrack: (e: React.PointerEvent) => void;
+    onKeyDown: (target: "start" | "end", e: React.KeyboardEvent) => void;
+    isDragging: boolean;
+};

package/dist/Slider/useSlider.es.js

@@ -0,0 +1,194 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+const useSlider = ({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  range = false,
+  disabled = false,
+  orientation = "horizontal",
+  draggableTrack = false
+}) => {
+  const normalize = (v, isRange) => {
+    if (isRange) return Array.isArray(v) ? v : [min, max];
+    const singleVal = typeof v === "number" ? v : min;
+    return [singleVal, singleVal];
+  };
+  const [values, setValues] = useState(
+    () => normalize(value, range)
+  );
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  useEffect(() => {
+    const next = normalize(value, range);
+    setValues(
+      (prev) => prev[0] === next[0] && prev[1] === next[1] ? prev : next
+    );
+  }, [value, range, min, max]);
+  const clamp = (v) => Math.min(max, Math.max(min, v));
+  const snap = useCallback(
+    (raw) => clamp(Number((Math.round(raw / step) * step).toFixed(10))),
+    [min, max, step]
+  );
+  const percentOf = (v) => (v - min) / (max - min) * 100;
+  const trackRef = useRef(null);
+  const isDraggingRef = useRef(false);
+  const dragTargetRef = useRef(null);
+  const isDraggingRangeRef = useRef(false);
+  const rangeOffsetRef = useRef(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const getRawValue = useCallback(
+    (clientX, clientY) => {
+      if (!trackRef.current) return min;
+      const rect = trackRef.current.getBoundingClientRect();
+      const ratio = orientation === "vertical" ? 1 - (clientY - rect.top) / rect.height : (clientX - rect.left) / rect.width;
+      return min + Math.min(1, Math.max(0, ratio)) * (max - min);
+    },
+    [orientation, min, max]
+  );
+  const update = useCallback(
+    (next) => {
+      const [s, e] = next[0] > next[1] ? [next[1], next[0]] : next;
+      setValues((prev) => {
+        if (prev[0] === s && prev[1] === e) return prev;
+        onChange?.(range ? [s, e] : e);
+        return [s, e];
+      });
+    },
+    [onChange, range]
+  );
+  const attachDragListeners = (target, e, rangeOffset) => {
+    if (disabled) return;
+    isDraggingRef.current = true;
+    dragTargetRef.current = target;
+    isDraggingRangeRef.current = rangeOffset !== void 0;
+    if (rangeOffset !== void 0) rangeOffsetRef.current = rangeOffset;
+    setIsDragging(true);
+    e.target?.setPointerCapture?.(e.pointerId);
+    const onMove = (ev) => {
+      if (!isDraggingRef.current || !trackRef.current) return;
+      ev.preventDefault();
+      const raw = getRawValue(ev.clientX, ev.clientY);
+      const current = valuesRef.current;
+      if (isDraggingRangeRef.current) {
+        const rangeSize = current[1] - current[0];
+        const newStart = snap(raw - rangeOffsetRef.current);
+        let finalStart = clamp(newStart);
+        let finalEnd = clamp(finalStart + rangeSize);
+        if (finalEnd > max) {
+          finalEnd = max;
+          finalStart = clamp(max - rangeSize);
+        }
+        update([finalStart, finalEnd]);
+      } else if (target === "start") {
+        update([snap(raw), current[1]]);
+      } else if (target === "end") {
+        update([current[0], snap(raw)]);
+      }
+    };
+    const onUp = () => {
+      isDraggingRef.current = false;
+      dragTargetRef.current = null;
+      isDraggingRangeRef.current = false;
+      setIsDragging(false);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  };
+  const onPointerDownThumb = useCallback(
+    (target, e) => {
+      if (disabled) return;
+      attachDragListeners(target, e.nativeEvent);
+    },
+    [disabled, attachDragListeners]
+  );
+  const onPointerDownTrack = useCallback(
+    (e) => {
+      if (disabled) return;
+      const nativeEvent = e.nativeEvent;
+      const raw = getRawValue(nativeEvent.clientX, nativeEvent.clientY);
+      const current = valuesRef.current;
+      if (draggableTrack && range && raw >= current[0] && raw <= current[1]) {
+        if (trackRef.current)
+          trackRef.current.setPointerCapture(nativeEvent.pointerId);
+        const offset = raw - current[0];
+        attachDragListeners(null, nativeEvent, offset);
+        return;
+      }
+      const snapped = snap(raw);
+      if (range) {
+        const distStart = Math.abs(snapped - current[0]);
+        const distEnd = Math.abs(snapped - current[1]);
+        const target = distStart <= distEnd ? "start" : "end";
+        update(
+          target === "start" ? [snapped, current[1]] : [current[0], snapped]
+        );
+      } else {
+        update([snapped, snapped]);
+      }
+    },
+    [
+      disabled,
+      getRawValue,
+      draggableTrack,
+      range,
+      snap,
+      update,
+      attachDragListeners
+    ]
+  );
+  const onKeyDown = useCallback(
+    (target, e) => {
+      if (disabled) return;
+      const pageStep = Math.max(step, (max - min) / 10);
+      let delta = 0;
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowRight":
+          delta = step;
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+          delta = -step;
+          break;
+        case "Home":
+          delta = min - values[target === "start" ? 0 : 1];
+          break;
+        case "End":
+          delta = max - values[target === "start" ? 0 : 1];
+          break;
+        case "PageUp":
+          delta = pageStep;
+          break;
+        case "PageDown":
+          delta = -pageStep;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      const current = values[target === "start" ? 0 : 1];
+      const newVal = snap(current + delta);
+      update(target === "start" ? [newVal, values[1]] : [values[0], newVal]);
+    },
+    [disabled, values, step, min, max, snap, update]
+  );
+  return {
+    values,
+    trackRef,
+    percentStart: percentOf(values[0]),
+    percentEnd: percentOf(values[1]),
+    onPointerDownThumb,
+    onPointerDownTrack,
+    onKeyDown,
+    isDragging
+  };
+};
+export {
+  useSlider
+};

package/dist/Stepper/Step.cjs.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const StepperContext = require("./StepperContext.cjs.js");
+const styles = require("./styles.cjs.js");
+const StepContent = require("./StepContent.cjs.js");
+const DefaultStepIcon = ({ index, completed, error, icon }) => {
+  if (icon) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: icon });
+  if (completed) return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "✓" });
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "!" });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: index });
+};
+const Step = (props) => {
+  const context = StepperContext.useStepperContext();
+  const index = props.index ?? 0;
+  const isActive = context.activeStep === index;
+  const isCompleted = props.completed ?? context.activeStep > index;
+  const isLast = props.last ?? false;
+  const handleClick = (event) => {
+    if (props.disabled) return;
+    if (!isActive) {
+      props.onClick?.(event);
+      context.onStepClick?.(index);
+    }
+  };
+  const iconProps = {
+    index: index + 1,
+    active: isActive,
+    completed: isCompleted,
+    error: props.error,
+    icon: props.icon
+  };
+  const connectorElement = React.useMemo(() => {
+    if (isLast || !React.isValidElement(context.connector))
+      return null;
+    return React.cloneElement(context.connector, {
+      orientation: context.orientation,
+      completed: isCompleted,
+      active: isActive
+    });
+  }, [context.connector, context.orientation, isCompleted, isActive, isLast]);
+  const extendedContext = {
+    ...context,
+    __stepActive: isActive,
+    __stepCompleted: isCompleted
+  };
+  const childrenArray = React.Children.toArray(props.children);
+  const contentChildren = childrenArray.filter(
+    (child) => React.isValidElement(child) && child.type === StepContent.StepContent
+  );
+  const headerChildren = childrenArray.filter(
+    (child) => !React.isValidElement(child) || child.type !== StepContent.StepContent
+  );
+  const renderMiddleBlock = () => /* @__PURE__ */ jsxRuntime.jsxs(styles.StepMiddleBlock, { orientation: context.orientation, children: [
+    React.Children.map(
+      headerChildren,
+      (child, i) => React.isValidElement(child) ? React.cloneElement(child, { key: i }) : child
+    ),
+    contentChildren.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: React.Children.map(
+      contentChildren,
+      (child, i) => React.isValidElement(child) ? React.cloneElement(child, { key: i }) : child
+    ) })
+  ] });
+  const renderConnector = () => connectorElement && /* @__PURE__ */ jsxRuntime.jsx(
+    styles.ConnectorContainerStyled,
+    {
+      orientation: context.orientation,
+      children: connectorElement
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    styles.StepContainerStyled,
+    {
+      className: props.className,
+      orientation: context.orientation,
+      active: isActive,
+      completed: isCompleted,
+      disabled: props.disabled,
+      clickable: !!props.onClick,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx(StepperContext.StepperContext.Provider, { value: extendedContext, children: context.orientation === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styles.StepIconWrapper,
+          {
+            className: "step-icon-wrapper",
+            active: isActive,
+            completed: isCompleted,
+            error: props.error,
+            children: /* @__PURE__ */ jsxRuntime.jsx(DefaultStepIcon, { ...iconProps })
+          }
+        ),
+        renderMiddleBlock(),
+        renderConnector()
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(styles.LeftColumnStyled, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            styles.StepIconWrapper,
+            {
+              className: "step-icon-wrapper",
+              active: isActive,
+              completed: isCompleted,
+              error: props.error,
+              children: /* @__PURE__ */ jsxRuntime.jsx(DefaultStepIcon, { ...iconProps })
+            }
+          ),
+          renderConnector()
+        ] }),
+        renderMiddleBlock()
+      ] }) })
+    }
+  );
+};
+exports.Step = Step;

package/dist/Stepper/Step.d.ts

@@ -0,0 +1,2 @@
+import { IStepProps } from './types';
+export declare const Step: (props: IStepProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Stepper/Step.es.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo, isValidElement, cloneElement, Children } from "react";
+import { useStepperContext, StepperContext } from "./StepperContext.es.js";
+import { StepContainerStyled, StepIconWrapper, LeftColumnStyled, StepMiddleBlock, ConnectorContainerStyled } from "./styles.es.js";
+import { StepContent } from "./StepContent.es.js";
+const DefaultStepIcon = ({ index, completed, error, icon }) => {
+  if (icon) return /* @__PURE__ */ jsx(Fragment, { children: icon });
+  if (completed) return /* @__PURE__ */ jsx("span", { children: "✓" });
+  if (error) return /* @__PURE__ */ jsx("span", { children: "!" });
+  return /* @__PURE__ */ jsx("span", { children: index });
+};
+const Step = (props) => {
+  const context = useStepperContext();
+  const index = props.index ?? 0;
+  const isActive = context.activeStep === index;
+  const isCompleted = props.completed ?? context.activeStep > index;
+  const isLast = props.last ?? false;
+  const handleClick = (event) => {
+    if (props.disabled) return;
+    if (!isActive) {
+      props.onClick?.(event);
+      context.onStepClick?.(index);
+    }
+  };
+  const iconProps = {
+    index: index + 1,
+    active: isActive,
+    completed: isCompleted,
+    error: props.error,
+    icon: props.icon
+  };
+  const connectorElement = useMemo(() => {
+    if (isLast || !isValidElement(context.connector))
+      return null;
+    return cloneElement(context.connector, {
+      orientation: context.orientation,
+      completed: isCompleted,
+      active: isActive
+    });
+  }, [context.connector, context.orientation, isCompleted, isActive, isLast]);
+  const extendedContext = {
+    ...context,
+    __stepActive: isActive,
+    __stepCompleted: isCompleted
+  };
+  const childrenArray = Children.toArray(props.children);
+  const contentChildren = childrenArray.filter(
+    (child) => isValidElement(child) && child.type === StepContent
+  );
+  const headerChildren = childrenArray.filter(
+    (child) => !isValidElement(child) || child.type !== StepContent
+  );
+  const renderMiddleBlock = () => /* @__PURE__ */ jsxs(StepMiddleBlock, { orientation: context.orientation, children: [
+    Children.map(
+      headerChildren,
+      (child, i) => isValidElement(child) ? cloneElement(child, { key: i }) : child
+    ),
+    contentChildren.length > 0 && /* @__PURE__ */ jsx("div", { children: Children.map(
+      contentChildren,
+      (child, i) => isValidElement(child) ? cloneElement(child, { key: i }) : child
+    ) })
+  ] });
+  const renderConnector = () => connectorElement && /* @__PURE__ */ jsx(
+    ConnectorContainerStyled,
+    {
+      orientation: context.orientation,
+      children: connectorElement
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    StepContainerStyled,
+    {
+      className: props.className,
+      orientation: context.orientation,
+      active: isActive,
+      completed: isCompleted,
+      disabled: props.disabled,
+      clickable: !!props.onClick,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsx(StepperContext.Provider, { value: extendedContext, children: context.orientation === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          StepIconWrapper,
+          {
+            className: "step-icon-wrapper",
+            active: isActive,
+            completed: isCompleted,
+            error: props.error,
+            children: /* @__PURE__ */ jsx(DefaultStepIcon, { ...iconProps })
+          }
+        ),
+        renderMiddleBlock(),
+        renderConnector()
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(LeftColumnStyled, { children: [
+          /* @__PURE__ */ jsx(
+            StepIconWrapper,
+            {
+              className: "step-icon-wrapper",
+              active: isActive,
+              completed: isCompleted,
+              error: props.error,
+              children: /* @__PURE__ */ jsx(DefaultStepIcon, { ...iconProps })
+            }
+          ),
+          renderConnector()
+        ] }),
+        renderMiddleBlock()
+      ] }) })
+    }
+  );
+};
+export {
+  Step
+};

package/dist/Stepper/StepContent.cjs.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const StepperContext = require("./StepperContext.cjs.js");
+const StepContent = ({ children }) => {
+  const context = StepperContext.useStepperContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.StepContentContainerStyled, { orientation: context.orientation, children });
+};
+exports.StepContent = StepContent;

package/dist/Stepper/StepContent.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare const StepContent: ({ children }: {
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Stepper/StepContent.es.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { StepContentContainerStyled } from "./styles.es.js";
+import { useStepperContext } from "./StepperContext.es.js";
+const StepContent = ({ children }) => {
+  const context = useStepperContext();
+  return /* @__PURE__ */ jsx(StepContentContainerStyled, { orientation: context.orientation, children });
+};
+export {
+  StepContent
+};

package/dist/Stepper/StepLabel.cjs.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const StepperContext = require("./StepperContext.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const StepLabel = ({
+  children,
+  optional,
+  error,
+  className
+}) => {
+  const context = StepperContext.useStepperContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.StepLabelContainerStyled,
+    {
+      className,
+      orientation: context.orientation,
+      active: context.__stepActive,
+      completed: context.__stepCompleted,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "l", className: "step-label-text", type: error ? "danger" : void 0, children }),
+        optional && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "s", type: "secondary", children: optional })
+      ]
+    }
+  );
+};
+exports.StepLabel = StepLabel;

package/dist/Stepper/StepLabel.d.ts

@@ -0,0 +1,2 @@
+import { IStepLabelProps } from './types';
+export declare const StepLabel: ({ children, optional, error, className }: IStepLabelProps) => import("react/jsx-runtime").JSX.Element;