@janbox/storefront-ui 1.0.15 → 1.0.16

package/dist/lib/select/select.js

@@ -0,0 +1,332 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useRef, useId, useCallback, useMemo, useEffect } from "react";
+import { get, isNil, trimStart } from "lodash-es";
+import { getSelectProps } from "./helpers.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import CheckIcon from "../../assets/svg/done-check.svg.js";
+import { getColorVar } from "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { ensureArray, matchSearch } from "../../utils/common.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
+import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { Input } from "../input/input.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const DEFAULT_DISPLAY_ROW_COUNT = 5;
+const Select = ({
+  ref,
+  ...props
+}) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    placement = "bottom-start",
+    open,
+    onOpenChange,
+    searchable = true,
+    value,
+    optionValue,
+    optionLabel,
+    defaultValue,
+    options,
+    onChange,
+    placeholder,
+    listProps,
+    selectedRenderer,
+    optionSearchLabel,
+    helperText,
+    error,
+    containerProps,
+    inputProps,
+    fullWidth = true,
+    lazy = true,
+    ...rest
+  } = getSelectProps(props);
+  const searchInputRef = useRef(null);
+  const floatingRef = useRef(null);
+  const uniqueId = useId();
+  const [inputValue, setInputValue] = useControllableState({
+    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
+    value: inputProps == null ? void 0 : inputProps.value
+  });
+  const windowScreen = useWindowScreen();
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const [selectedValue, setSelectedValue] = useControllableState({
+    defaultValue,
+    value
+  });
+  const getOptionValue = useCallback(
+    (option) => {
+      return typeof optionValue === "function" ? optionValue(option) : get(option, optionValue ?? "value");
+    },
+    [optionValue]
+  );
+  const getOptionLabel = useCallback(
+    (option) => {
+      return typeof optionLabel === "function" ? optionLabel(option) : get(option, optionLabel ?? "label");
+    },
+    [optionLabel]
+  );
+  const handleChange = (row) => {
+    var _a2, _b2, _c2;
+    const rowValue = getOptionValue(row);
+    setSelectedValue(rowValue);
+    onChange == null ? void 0 : onChange(rowValue, row);
+    (_c2 = (_a2 = floatingRef.current) == null ? void 0 : (_b2 = _a2.context).onOpenChange) == null ? void 0 : _c2.call(_b2, false);
+  };
+  const selectedOption = useMemo(
+    () => options.find((option) => selectedValue === getOptionValue(option)),
+    [getOptionValue, options, selectedValue]
+  );
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
+  const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
+  const displayOptions = useMemo(() => {
+    if (!inputValue) {
+      return options;
+    }
+    return options.filter((option) => {
+      let searchLabels = [String(getOptionLabel(option))];
+      switch (typeof optionSearchLabel) {
+        case "function":
+          searchLabels = ensureArray(optionSearchLabel(option));
+          break;
+        case "string":
+          searchLabels = ensureArray(String(get(option, optionSearchLabel)));
+          break;
+        case "object":
+          searchLabels = optionSearchLabel.map((label) => String(get(option, label)));
+          break;
+      }
+      return matchSearch(searchLabels, inputValue);
+    });
+  }, [getOptionLabel, inputValue, optionSearchLabel, options]);
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    if (isNil(rowData)) return /* @__PURE__ */ jsx(Fragment, {});
+    const rowValue = getOptionValue(rowData);
+    const isSelected = selectedValue === rowValue;
+    const onClick = (_e2) => {
+      var _a2, _b2, _c2;
+      if (isSelected) {
+        (_c2 = (_a2 = floatingRef.current) == null ? void 0 : (_b2 = _a2.context).onOpenChange) == null ? void 0 : _c2.call(_b2, false);
+        return;
+      }
+      handleChange(rowData);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick,
+        "aria-hidden": true,
+        "data-option-value": rowValue,
+        css: {
+          minHeight: rowMinHeight,
+          paddingTop: 2,
+          paddingBottom: 2,
+          paddingLeft: 12,
+          paddingRight: 12,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          cursor: "pointer",
+          borderRadius: 8,
+          ":hover": { backgroundColor: getColorVar("neutral.100") },
+          ...isSelected ? {
+            color: getColorVar("primary.600"),
+            backgroundColor: getColorVar("primary.100"),
+            ":hover": { backgroundColor: getColorVar("primary.100") }
+          } : {}
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: getOptionLabel(rowData) }),
+          isSelected && /* @__PURE__ */ jsx(SvgLoader, { source: CheckIcon, width: 24, height: 24, css: { color: getColorVar("primary.600") } })
+        ]
+      }
+    );
+  };
+  const sizeOptions = {
+    apply({ elements }) {
+      const { width } = elements.reference.getBoundingClientRect();
+      Object.assign(elements.floating.style, {
+        minWidth: `${width}px`
+      });
+    }
+  };
+  const estimateSize = useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKey = useCallback(
+    (index) => {
+      const option = displayOptions.at(index);
+      return option ? getOptionValue(option).toString() : `${uniqueId}-${index}`;
+    },
+    [displayOptions, getOptionValue, uniqueId]
+  );
+  const getTextCss = (sizeVariant) => {
+    if (isNil(sizeVariant)) return {};
+    const { textVariant } = getSizeVariantState(sizeVariant);
+    if (isNil(textVariant)) return {};
+    return getTypographyVar(textVariant);
+  };
+  const onInputChange = (e) => {
+    var _a2;
+    e.target.value = trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
+  };
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      var _a2;
+      if (isOpen) {
+        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      } else {
+        setInputValue("");
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [isOpen, setInputValue]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...containerProps,
+      css: {
+        display: "flex",
+        flexDirection: "column",
+        ...fullWidth ? { width: "100%" } : {},
+        ...containerProps == null ? void 0 : containerProps.css
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Floating,
+          {
+            clickProps: {
+              enabled: true
+            },
+            dismissProps: {
+              enabled: true
+            },
+            sizeOptions,
+            placement,
+            open: isOpen,
+            onOpenChange: prehandleOpenChange,
+            ref: floatingRef,
+            children: [
+              /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsx(
+                ForwardRefInputMask,
+                {
+                  type: "button",
+                  error: isOpen ? false : error,
+                  as: "button",
+                  suffix: /* @__PURE__ */ jsx(
+                    SvgLoader,
+                    {
+                      source: ArrowDownIcon,
+                      width: 20,
+                      height: 20,
+                      css: {
+                        transition: "transform 150ms",
+                        ...isOpen ? { transform: "rotate(-180deg)" } : {}
+                      }
+                    }
+                  ),
+                  ...rest,
+                  css: [
+                    {
+                      ":hover": { outlineColor: getColorVar("primary.300") }
+                    },
+                    isOpen && { outlineColor: getColorVar("primary.600") },
+                    rest.disabled && {
+                      cursor: "not-allowed",
+                      pointerEvents: "none",
+                      backgroundColor: getColorVar("neutral.200")
+                    },
+                    rest.css
+                  ],
+                  ref,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      css: [
+                        { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                        getTextCss((_a = rest.xs) == null ? void 0 : _a.size)
+                      ],
+                      children: selectedOption ? /* @__PURE__ */ jsx(Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400"), display: "block" }, children: placeholder })
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  css: {
+                    paddingTop: 8,
+                    paddingBottom: 8,
+                    border: "1px solid",
+                    borderColor: getColorVar("border.default"),
+                    borderRadius: 8,
+                    boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+                    fontSize: "0.875rem",
+                    lineHeight: "1.25rem",
+                    backgroundColor: getColorVar("surface.default")
+                  },
+                  children: [
+                    searchable && /* @__PURE__ */ jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        xs: { size: (_b = rest.xs) == null ? void 0 : _b.size },
+                        sm: { size: (_c = rest.sm) == null ? void 0 : _c.size },
+                        md: { size: (_d = rest.md) == null ? void 0 : _d.size },
+                        lg: { size: (_e = rest.lg) == null ? void 0 : _e.size },
+                        value: inputValue,
+                        ...inputProps,
+                        onChange: onInputChange,
+                        ref: searchInputRef
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      VirtualizedList,
+                      {
+                        ...listProps,
+                        css: { paddingLeft: 4, paddingRight: 4 },
+                        options: {
+                          count: displayOptions.length,
+                          estimateSize,
+                          getItemKey,
+                          overscan: lazy ? void 0 : options.length
+                        },
+                        style: {
+                          maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+                          ...listProps == null ? void 0 : listProps.style
+                        },
+                        RowComponent
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
+};
+export {
+  Select
+};

package/dist/lib/select/types.d.ts

@@ -33,3 +33,4 @@ interface SelectExtendedProps<V extends SelectOptionValue, O extends object> ext
 }
 export type SelectProps<V extends SelectOptionValue = SelectOptionValue, O extends object = object> = ShallowMerge<InputMaskProps<JSX.IntrinsicElements['button']>, SelectExtendedProps<V, O>>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,UAAU,mBAAmB,CAC3B,CAAC,SAAS,iBAAiB,EAC3B,CAAC,SAAS,MAAM,CAChB,SAAQ,gBAAgB,CAAC,qBAAqB,CAAC;IAC/C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAClF,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CAChH,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAC1B,CAAC"}

package/dist/lib/star-rating/index.d.ts

@@ -1,2 +1,3 @@
 export * from './star-rating';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/star-rating/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/star-rating/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/lib/star-rating/star-rating.d.ts

@@ -1,2 +1,3 @@
 import { StarRatingProps } from './types';
-export declare const StarRating: import("react").ForwardRefExoticComponent<StarRatingProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const StarRating: import('react').ForwardRefExoticComponent<StarRatingProps & import('react').RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=star-rating.d.ts.map

package/dist/lib/star-rating/star-rating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-rating.d.ts","sourceRoot":"","sources":["../../../src/lib/star-rating/star-rating.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,UAAU,2GAmCtB,CAAC"}

package/dist/lib/star-rating/star-rating.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { getColorShadesByVariant } from "../../utils/index.js";
+const StarRating = forwardRef(
+  ({ rating, maxRating = 5, size = 24, colorVariant = "secondary" }, ref) => {
+    const id = useId();
+    const percent = rating / maxRating * 24;
+    const { main } = getColorShadesByVariant(colorVariant);
+    return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ref, children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: percent, height: 24 }) }) }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12 2.89648L14.935 8.88948L21.5 9.85648L16.75 14.5185L17.871 21.1045L12 17.9935L6.129 21.1045L7.25 14.5185L2.5 9.85648L9.064 8.88948L12 2.89648Z",
+          fill: "white",
+          stroke: main,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12 2.89648L14.935 8.88948L21.5 9.85648L16.75 14.5185L17.871 21.1045L12 17.9935L6.129 21.1045L7.25 14.5185L2.5 9.85648L9.064 8.88948L12 2.89648Z",
+          fill: main,
+          clipPath: `url(#${id})`,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "1.5",
+          stroke: main
+        }
+      )
+    ] });
+  }
+);
+export {
+  StarRating
+};

package/dist/lib/star-rating/types.d.ts

@@ -6,3 +6,4 @@ export type StarRatingProps = {
     className?: string;
     colorVariant?: ColorVariant;
 };
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/star-rating/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/star-rating/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC"}

package/dist/lib/stepper/index.d.ts

@@ -1,3 +1,4 @@
 export * from './stepper';
 export * from './types';
 export * from './step';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/stepper/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/dist/lib/stepper/step.d.ts

@@ -1,2 +1,3 @@
 import { StepProps } from './types';
-export declare const Step: import("react").ForwardRefExoticComponent<Omit<StepProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Step: import('react').ForwardRefExoticComponent<Omit<StepProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=step.d.ts.map

package/dist/lib/stepper/step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/lib/stepper/step.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkCpC,eAAO,MAAM,IAAI,mHAsCf,CAAC"}

package/dist/lib/stepper/step.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import "lodash-es";
+import { getColorVar } from "../../theme/palette.js";
+import CheckIcon from "../../assets/svg/check.svg.js";
+import { Icon } from "../icon/icon.js";
+const stateStyles = {
+  done: {
+    text: { color: getColorVar("white") },
+    bg: {
+      borderColor: getColorVar("primary.600"),
+      backgroundColor: getColorVar("primary.600"),
+      color: getColorVar("white")
+    }
+  },
+  active: {
+    text: { color: getColorVar("primary.600") },
+    bg: {
+      borderColor: getColorVar("primary.600"),
+      backgroundColor: getColorVar("white"),
+      color: getColorVar("primary.600")
+    }
+  },
+  normal: {
+    text: { color: getColorVar("white") },
+    bg: {
+      borderColor: getColorVar("neutral.500"),
+      backgroundColor: getColorVar("neutral.500"),
+      color: getColorVar("white")
+    }
+  }
+};
+const Step = forwardRef((props, ref) => {
+  const { state = "normal", content, className, size = 32, children, ...rest } = props;
+  const styles = stateStyles[state] ?? stateStyles.normal;
+  const checked = state === "done";
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { width: `${size}px`, height: `${size}px` },
+      ref,
+      css: {
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderWidth: 2,
+        borderStyle: "solid",
+        transition: "border 500ms, background 500ms, color 500ms",
+        zIndex: 1,
+        ...styles.bg
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            css: {
+              ...styles.text,
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden"
+            },
+            children: checked ? /* @__PURE__ */ jsx(Icon, { source: CheckIcon }) : children
+          }
+        ),
+        content
+      ]
+    }
+  ) });
+});
+export {
+  Step
+};

package/dist/lib/stepper/stepper.d.ts

@@ -1,2 +1,3 @@
 import { StepperProps } from './types';
-export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=stepper.d.ts.map

package/dist/lib/stepper/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/lib/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAa,MAAM,SAAS,CAAC;AAOlD,eAAO,MAAM,OAAO,yGAsFlB,CAAC"}

package/dist/lib/stepper/stepper.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { Step } from "./step.js";
+import { Progress } from "../progress/progress.js";
+const maxPercent = 100;
+const Stepper = forwardRef((props, ref) => {
+  const { direction = "horizontal", className, items, activeIndex = 0, circleSize = 32, ...rest } = props;
+  const value = maxPercent / (items.length - 1) * activeIndex;
+  const progressBarSize = `${(items.length - 1) / items.length * 100}%`;
+  const progressBarStyles = {
+    horizontal: {
+      top: `${circleSize / 2}px`,
+      width: progressBarSize
+    },
+    vertical: {
+      left: `${circleSize / 2}px`,
+      height: progressBarSize
+    }
+  };
+  const renderItems = () => {
+    return items.map((item, index) => {
+      const { children, description, ...itemRest } = item;
+      const getState = () => {
+        if (index < activeIndex) {
+          return "done";
+        }
+        if (index === activeIndex) {
+          return "active";
+        }
+        if (index > activeIndex) {
+          return "normal";
+        }
+      };
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          css: {
+            flex: 1,
+            display: "flex",
+            gap: 16,
+            ...direction === "vertical" ? { flexDirection: "row", alignItems: "center" } : { flexDirection: "column", alignItems: "center", justifyContent: "space-between" }
+          },
+          children: [
+            /* @__PURE__ */ jsx(Step, { size: circleSize, state: getState(), ...itemRest, children: children ?? index + 1 }),
+            !!description && /* @__PURE__ */ jsx("div", { children: description })
+          ]
+        },
+        index
+      );
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { css: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
+      Progress,
+      {
+        ref,
+        css: {
+          position: "absolute",
+          zIndex: -1,
+          width: "100%",
+          ...direction === "horizontal" ? { height: 4, left: "50%", transform: "translateX(-50%) translateY(-50%)" } : { width: 4, top: "50%", transform: "translateY(-50%) translateX(-50%)" }
+        },
+        style: progressBarStyles[direction],
+        value,
+        direction,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        css: {
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          gap: 12,
+          ...direction === "horizontal" ? { flexDirection: "row", justifyContent: "space-between" } : { flexDirection: "column", justifyContent: "space-between" }
+        },
+        children: renderItems()
+      }
+    )
+  ] });
+});
+export {
+  Stepper
+};

package/dist/lib/stepper/types.d.ts

@@ -18,3 +18,4 @@ export interface StepperProps {
     className?: string;
     circleSize?: number;
 }
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/stepper/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/stepper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/lib/stepper/types.js

@@ -1,5 +1,8 @@
-export const states = {
-    done: 'done',
-    active: 'active',
-    normal: 'normal',
+const states = {
+  done: "done",
+  active: "active",
+  normal: "normal"
+};
+export {
+  states
 };

package/dist/lib/swiper/index.d.ts

@@ -1,3 +1,4 @@
 export * from './swiper';
 export * from './swiper-slide';
 export * from './swiper-dots-paging';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/swiper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/swiper/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC"}

package/dist/lib/swiper/swiper/helpers.d.ts

@@ -1,2 +1,3 @@
 import { SwiperProps } from './types';
 export declare const getSwiperProps: (extended: SwiperProps) => SwiperProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/swiper/swiper/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AActC,eAAO,MAAM,cAAc,aAAc,WAAW,gBAEnD,CAAC"}