banhaten 0.5.0 → 0.6.0

package/registry/components/expanded/Steps.tsx

@@ -1,402 +1,402 @@
-import type { ReactNode } from "react";
-import { CheckIcon } from "lucide-react";
-import "./steps.css";
-
-export type StepIndicator = "icon" | "number";
-export type StepDirection = "horizontal" | "vertical";
-export type StepAlignment = "leading" | "middle" | "trailing";
-export type StepPosition = "top" | "bottom";
-
-export type StepItem = {
-  actions?: ReactNode;
-  caption?: ReactNode;
-  label?: ReactNode;
-  number?: ReactNode;
-  slotContent?: ReactNode;
-  supportText?: ReactNode;
-};
-
-export type StepsProps = {
-  alignment?: Exclude<StepAlignment, "middle">;
-  className?: string;
-  dir?: "ltr" | "rtl";
-  direction?: StepDirection;
-  indicator?: StepIndicator;
-  items?: StepItem[];
-};
-
-export type ProgressStepState = "complete" | "active" | "todo";
-
-export type ProgressStep = {
-  label?: ReactNode;
-  marker?: ReactNode;
-  state?: ProgressStepState;
-};
-
-export type ProgressStepsClassNames = {
-  connector?: string;
-  item?: string;
-  label?: string;
-  marker?: string;
-  segment?: string;
-  track?: string;
-};
-
-export type ProgressStepsProps = {
-  activeIndex?: number;
-  ariaLabel: string;
-  className?: string;
-  classNames?: ProgressStepsClassNames;
-  dir?: "ltr" | "rtl";
-  items: ProgressStep[];
-  label?: ReactNode;
-  variant?: "bars" | "markers";
-};
-
-export type HorizontalStepItemProps = {
-  alignment?: StepAlignment;
-  caption?: ReactNode;
-  className?: string;
-  hasCaption?: boolean;
-  indicator?: StepIndicator;
-  label?: ReactNode;
-  number?: ReactNode;
-  position?: StepPosition;
-  dir?: "ltr" | "rtl";
-  showLeadingLine?: boolean;
-  showTrailingLine?: boolean;
-};
-
-export type VerticalStepItemProps = {
-  actions?: ReactNode;
-  alignment?: Exclude<StepAlignment, "middle">;
-  caption?: ReactNode;
-  className?: string;
-  hasActionButtons?: boolean;
-  hasCaption?: boolean;
-  hasSlotContent?: boolean;
-  hasSupportText?: boolean;
-  indicator?: StepIndicator;
-  label?: ReactNode;
-  number?: ReactNode;
-  dir?: "ltr" | "rtl";
-  showBottomPadding?: boolean;
-  showLine?: boolean;
-  slotContent?: ReactNode;
-  supportText?: ReactNode;
-};
-
-export function Steps({
-  alignment = "leading",
-  className = "",
-  dir,
-  direction = "horizontal",
-  indicator = "icon",
-  items,
-}: StepsProps) {
-  const stepItems = items ?? [];
-
-  if (direction === "vertical") {
-    return (
-      <div
-        className={["ds-steps", "ds-steps--vertical", className]
-          .filter(Boolean)
-          .join(" ")}
-        dir={dir}
-      >
-        {stepItems.map((item, index) => (
-          <VerticalStepItem
-            alignment={alignment}
-            caption={item.caption}
-            hasActionButtons={Boolean(item.actions)}
-            hasSlotContent={Boolean(item.slotContent)}
-            indicator={indicator}
-            key={index}
-            label={item.label}
-            number={item.number ?? index + 1}
-            dir={dir}
-            showBottomPadding={index < stepItems.length - 1}
-            showLine={index < stepItems.length - 1}
-            slotContent={item.slotContent}
-            supportText={item.supportText}
-          >
-            {item.actions}
-          </VerticalStepItem>
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={["ds-steps", "ds-steps--horizontal", className]
-        .filter(Boolean)
-        .join(" ")}
-      dir={dir}
-    >
-      {stepItems.map((item, index) => (
-        <HorizontalStepItem
-          caption={item.caption}
-          hasCaption={item.caption !== null && item.caption !== undefined}
-          indicator={indicator}
-          key={index}
-          label={item.label}
-          number={item.number ?? index + 1}
-          dir={dir}
-        />
-      ))}
-    </div>
-  );
-}
-
-export function ProgressSteps({
-  activeIndex = 0,
-  ariaLabel,
-  className = "",
-  classNames = {},
-  dir,
-  items,
-  label,
-  variant = "markers",
-}: ProgressStepsProps) {
-  const rootClassName = [
-    "ds-progress-steps",
-    `ds-progress-steps--${variant}`,
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  if (variant === "bars") {
-    return (
-      <div
-        aria-label={ariaLabel}
-        aria-valuemax={items.length}
-        aria-valuemin={1}
-        aria-valuenow={Math.min(activeIndex + 1, items.length)}
-        className={rootClassName}
-        dir={dir}
-        role="progressbar"
-      >
-        {label ? <span data-slot="progress-steps-label">{label}</span> : null}
-        <div
-          aria-hidden="true"
-          className={["ds-progress-steps__track", classNames.track]
-            .filter(Boolean)
-            .join(" ")}
-          data-slot="progress-steps-track"
-        >
-          {items.map((item, index) => (
-            <span
-              className={["ds-progress-steps__segment", classNames.segment]
-                .filter(Boolean)
-                .join(" ")}
-              data-active={index <= activeIndex ? "true" : "false"}
-              data-slot="progress-steps-segment"
-              data-state={item.state ?? (index < activeIndex ? "complete" : index === activeIndex ? "active" : "todo")}
-              key={index}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <ol aria-label={ariaLabel} className={rootClassName} dir={dir}>
-      {items.map((item, index) => {
-        const state =
-          item.state ??
-          (index < activeIndex
-            ? "complete"
-            : index === activeIndex
-              ? "active"
-              : "todo");
-
-        return (
-          <li
-            className={[
-              "ds-progress-steps__item",
-              `is-${state}`,
-              classNames.item,
-            ]
-              .filter(Boolean)
-              .join(" ")}
-            data-slot="progress-steps-item"
-            data-state={state}
-            key={index}
-          >
-            <span
-              aria-hidden="true"
-              className={["ds-progress-steps__marker", classNames.marker]
-                .filter(Boolean)
-                .join(" ")}
-              data-slot="progress-steps-marker"
-            >
-              {item.marker ?? index + 1}
-            </span>
-            {item.label ? (
-              <span
-                className={["ds-progress-steps__label", classNames.label]
-                  .filter(Boolean)
-                  .join(" ")}
-                data-slot="progress-steps-item-label"
-              >
-                {item.label}
-              </span>
-            ) : null}
-            {index < items.length - 1 ? (
-              <span
-                aria-hidden="true"
-                className={[
-                  "ds-progress-steps__connector",
-                  state === "complete" && "is-complete",
-                  classNames.connector,
-                ]
-                  .filter(Boolean)
-                  .join(" ")}
-                data-slot="progress-steps-connector"
-              />
-            ) : null}
-          </li>
-        );
-      })}
-    </ol>
-  );
-}
-
-export function HorizontalStepItem({
-  alignment = "leading",
-  caption,
-  className = "",
-  hasCaption = true,
-  indicator = "icon",
-  label,
-  number = 1,
-  position = "top",
-  dir,
-  showLeadingLine = true,
-  showTrailingLine = true,
-}: HorizontalStepItemProps) {
-  const linePlacement = getHorizontalLinePlacement(alignment, showLeadingLine, showTrailingLine);
-  const text = (
-    <div className="ds-horizontal-step-item__text">
-      {label && <div className="ds-horizontal-step-item__label">{label}</div>}
-      {hasCaption && caption && <div className="ds-horizontal-step-item__caption">{caption}</div>}
-    </div>
-  );
-  const track = (
-    <div className="ds-horizontal-step-item__track" aria-hidden="true">
-      {linePlacement.before && <span className="ds-step-line ds-step-line--horizontal" />}
-      <StepMarker indicator={indicator} number={number} />
-      {linePlacement.after && <span className="ds-step-line ds-step-line--horizontal" />}
-    </div>
-  );
-
-  return (
-    <div
-      className={[
-        "ds-horizontal-step-item",
-        `ds-horizontal-step-item--${alignment}`,
-        `ds-horizontal-step-item--${position}`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      dir={dir}
-    >
-      {position === "bottom" ? text : track}
-      {position === "bottom" ? track : text}
-    </div>
-  );
-}
-
-export function VerticalStepItem({
-  actions,
-  alignment = "leading",
-  caption,
-  children,
-  className = "",
-  hasActionButtons = true,
-  hasCaption = true,
-  hasSlotContent = true,
-  hasSupportText = true,
-  indicator = "icon",
-  label,
-  number = 1,
-  dir,
-  showBottomPadding = true,
-  showLine = true,
-  slotContent,
-  supportText,
-}: VerticalStepItemProps & { children?: ReactNode }) {
-  const marker = (
-    <div className="ds-vertical-step-item__rail" aria-hidden="true">
-      <StepMarker indicator={indicator} number={number} />
-      {showLine && <span className="ds-step-line ds-step-line--vertical" />}
-    </div>
-  );
-  const markerFirst = alignment === "leading";
-  const renderedActions = actions ?? children;
-  const renderedSlot = slotContent;
-
-  return (
-    <div
-      className={[
-        "ds-vertical-step-item",
-        `ds-vertical-step-item--${alignment}`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      dir={dir}
-    >
-      {markerFirst && marker}
-      <div className="ds-vertical-step-item__content">
-        <div className="ds-vertical-step-item__copy">
-          <div className="ds-vertical-step-item__header">
-            {label && <div className="ds-vertical-step-item__label">{label}</div>}
-            {hasSupportText && supportText && <div className="ds-vertical-step-item__support">{supportText}</div>}
-          </div>
-          {hasCaption && caption && <div className="ds-vertical-step-item__caption">{caption}</div>}
-        </div>
-        {hasSlotContent && renderedSlot}
-        {hasActionButtons && renderedActions && <div className="ds-vertical-step-item__actions">{renderedActions}</div>}
-        {showBottomPadding && <div className="ds-vertical-step-item__bottom-padding" />}
-      </div>
-      {!markerFirst && marker}
-    </div>
-  );
-}
-
-function StepMarker({ indicator, number }: { indicator: StepIndicator; number: ReactNode }) {
-  if (indicator === "number") {
-    return (
-      <span className="ds-step-marker ds-step-marker--number">
-        <span>{number}</span>
-      </span>
-    );
-  }
-
-  return (
-    <span className="ds-step-marker ds-step-marker--icon">
-      <CheckIcon aria-hidden="true" focusable="false" strokeWidth="var(--bh-icon-stroke-300)" />
-    </span>
-  );
-}
-
-function getHorizontalLinePlacement(
-  alignment: StepAlignment,
-  showLeadingLine: boolean,
-  showTrailingLine: boolean,
-) {
-  if (alignment === "middle") {
-    return { before: showLeadingLine, after: showTrailingLine };
-  }
-
-  if (alignment === "leading") {
-    return { before: false, after: showTrailingLine };
-  }
-
-  return { before: showLeadingLine, after: false };
-}
+import type { ReactNode } from "react";
+import { CheckIcon } from "lucide-react";
+import "./steps.css";
+
+export type StepIndicator = "icon" | "number";
+export type StepDirection = "horizontal" | "vertical";
+export type StepAlignment = "leading" | "middle" | "trailing";
+export type StepPosition = "top" | "bottom";
+
+export type StepItem = {
+  actions?: ReactNode;
+  caption?: ReactNode;
+  label?: ReactNode;
+  number?: ReactNode;
+  slotContent?: ReactNode;
+  supportText?: ReactNode;
+};
+
+export type StepsProps = {
+  alignment?: Exclude<StepAlignment, "middle">;
+  className?: string;
+  dir?: "ltr" | "rtl";
+  direction?: StepDirection;
+  indicator?: StepIndicator;
+  items?: StepItem[];
+};
+
+export type ProgressStepState = "complete" | "active" | "todo";
+
+export type ProgressStep = {
+  label?: ReactNode;
+  marker?: ReactNode;
+  state?: ProgressStepState;
+};
+
+export type ProgressStepsClassNames = {
+  connector?: string;
+  item?: string;
+  label?: string;
+  marker?: string;
+  segment?: string;
+  track?: string;
+};
+
+export type ProgressStepsProps = {
+  activeIndex?: number;
+  ariaLabel: string;
+  className?: string;
+  classNames?: ProgressStepsClassNames;
+  dir?: "ltr" | "rtl";
+  items: ProgressStep[];
+  label?: ReactNode;
+  variant?: "bars" | "markers";
+};
+
+export type HorizontalStepItemProps = {
+  alignment?: StepAlignment;
+  caption?: ReactNode;
+  className?: string;
+  hasCaption?: boolean;
+  indicator?: StepIndicator;
+  label?: ReactNode;
+  number?: ReactNode;
+  position?: StepPosition;
+  dir?: "ltr" | "rtl";
+  showLeadingLine?: boolean;
+  showTrailingLine?: boolean;
+};
+
+export type VerticalStepItemProps = {
+  actions?: ReactNode;
+  alignment?: Exclude<StepAlignment, "middle">;
+  caption?: ReactNode;
+  className?: string;
+  hasActionButtons?: boolean;
+  hasCaption?: boolean;
+  hasSlotContent?: boolean;
+  hasSupportText?: boolean;
+  indicator?: StepIndicator;
+  label?: ReactNode;
+  number?: ReactNode;
+  dir?: "ltr" | "rtl";
+  showBottomPadding?: boolean;
+  showLine?: boolean;
+  slotContent?: ReactNode;
+  supportText?: ReactNode;
+};
+
+export function Steps({
+  alignment = "leading",
+  className = "",
+  dir,
+  direction = "horizontal",
+  indicator = "icon",
+  items,
+}: StepsProps) {
+  const stepItems = items ?? [];
+
+  if (direction === "vertical") {
+    return (
+      <div
+        className={["ds-steps", "ds-steps--vertical", className]
+          .filter(Boolean)
+          .join(" ")}
+        dir={dir}
+      >
+        {stepItems.map((item, index) => (
+          <VerticalStepItem
+            alignment={alignment}
+            caption={item.caption}
+            hasActionButtons={Boolean(item.actions)}
+            hasSlotContent={Boolean(item.slotContent)}
+            indicator={indicator}
+            key={index}
+            label={item.label}
+            number={item.number ?? index + 1}
+            dir={dir}
+            showBottomPadding={index < stepItems.length - 1}
+            showLine={index < stepItems.length - 1}
+            slotContent={item.slotContent}
+            supportText={item.supportText}
+          >
+            {item.actions}
+          </VerticalStepItem>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={["ds-steps", "ds-steps--horizontal", className]
+        .filter(Boolean)
+        .join(" ")}
+      dir={dir}
+    >
+      {stepItems.map((item, index) => (
+        <HorizontalStepItem
+          caption={item.caption}
+          hasCaption={item.caption !== null && item.caption !== undefined}
+          indicator={indicator}
+          key={index}
+          label={item.label}
+          number={item.number ?? index + 1}
+          dir={dir}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function ProgressSteps({
+  activeIndex = 0,
+  ariaLabel,
+  className = "",
+  classNames = {},
+  dir,
+  items,
+  label,
+  variant = "markers",
+}: ProgressStepsProps) {
+  const rootClassName = [
+    "ds-progress-steps",
+    `ds-progress-steps--${variant}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (variant === "bars") {
+    return (
+      <div
+        aria-label={ariaLabel}
+        aria-valuemax={items.length}
+        aria-valuemin={1}
+        aria-valuenow={Math.min(activeIndex + 1, items.length)}
+        className={rootClassName}
+        dir={dir}
+        role="progressbar"
+      >
+        {label ? <span data-slot="progress-steps-label">{label}</span> : null}
+        <div
+          aria-hidden="true"
+          className={["ds-progress-steps__track", classNames.track]
+            .filter(Boolean)
+            .join(" ")}
+          data-slot="progress-steps-track"
+        >
+          {items.map((item, index) => (
+            <span
+              className={["ds-progress-steps__segment", classNames.segment]
+                .filter(Boolean)
+                .join(" ")}
+              data-active={index <= activeIndex ? "true" : "false"}
+              data-slot="progress-steps-segment"
+              data-state={item.state ?? (index < activeIndex ? "complete" : index === activeIndex ? "active" : "todo")}
+              key={index}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ol aria-label={ariaLabel} className={rootClassName} dir={dir}>
+      {items.map((item, index) => {
+        const state =
+          item.state ??
+          (index < activeIndex
+            ? "complete"
+            : index === activeIndex
+              ? "active"
+              : "todo");
+
+        return (
+          <li
+            className={[
+              "ds-progress-steps__item",
+              `is-${state}`,
+              classNames.item,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            data-slot="progress-steps-item"
+            data-state={state}
+            key={index}
+          >
+            <span
+              aria-hidden="true"
+              className={["ds-progress-steps__marker", classNames.marker]
+                .filter(Boolean)
+                .join(" ")}
+              data-slot="progress-steps-marker"
+            >
+              {item.marker ?? index + 1}
+            </span>
+            {item.label ? (
+              <span
+                className={["ds-progress-steps__label", classNames.label]
+                  .filter(Boolean)
+                  .join(" ")}
+                data-slot="progress-steps-item-label"
+              >
+                {item.label}
+              </span>
+            ) : null}
+            {index < items.length - 1 ? (
+              <span
+                aria-hidden="true"
+                className={[
+                  "ds-progress-steps__connector",
+                  state === "complete" && "is-complete",
+                  classNames.connector,
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                data-slot="progress-steps-connector"
+              />
+            ) : null}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+export function HorizontalStepItem({
+  alignment = "leading",
+  caption,
+  className = "",
+  hasCaption = true,
+  indicator = "icon",
+  label,
+  number = 1,
+  position = "top",
+  dir,
+  showLeadingLine = true,
+  showTrailingLine = true,
+}: HorizontalStepItemProps) {
+  const linePlacement = getHorizontalLinePlacement(alignment, showLeadingLine, showTrailingLine);
+  const text = (
+    <div className="ds-horizontal-step-item__text">
+      {label && <div className="ds-horizontal-step-item__label">{label}</div>}
+      {hasCaption && caption && <div className="ds-horizontal-step-item__caption">{caption}</div>}
+    </div>
+  );
+  const track = (
+    <div className="ds-horizontal-step-item__track" aria-hidden="true">
+      {linePlacement.before && <span className="ds-step-line ds-step-line--horizontal" />}
+      <StepMarker indicator={indicator} number={number} />
+      {linePlacement.after && <span className="ds-step-line ds-step-line--horizontal" />}
+    </div>
+  );
+
+  return (
+    <div
+      className={[
+        "ds-horizontal-step-item",
+        `ds-horizontal-step-item--${alignment}`,
+        `ds-horizontal-step-item--${position}`,
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      dir={dir}
+    >
+      {position === "bottom" ? text : track}
+      {position === "bottom" ? track : text}
+    </div>
+  );
+}
+
+export function VerticalStepItem({
+  actions,
+  alignment = "leading",
+  caption,
+  children,
+  className = "",
+  hasActionButtons = true,
+  hasCaption = true,
+  hasSlotContent = true,
+  hasSupportText = true,
+  indicator = "icon",
+  label,
+  number = 1,
+  dir,
+  showBottomPadding = true,
+  showLine = true,
+  slotContent,
+  supportText,
+}: VerticalStepItemProps & { children?: ReactNode }) {
+  const marker = (
+    <div className="ds-vertical-step-item__rail" aria-hidden="true">
+      <StepMarker indicator={indicator} number={number} />
+      {showLine && <span className="ds-step-line ds-step-line--vertical" />}
+    </div>
+  );
+  const markerFirst = alignment === "leading";
+  const renderedActions = actions ?? children;
+  const renderedSlot = slotContent;
+
+  return (
+    <div
+      className={[
+        "ds-vertical-step-item",
+        `ds-vertical-step-item--${alignment}`,
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      dir={dir}
+    >
+      {markerFirst && marker}
+      <div className="ds-vertical-step-item__content">
+        <div className="ds-vertical-step-item__copy">
+          <div className="ds-vertical-step-item__header">
+            {label && <div className="ds-vertical-step-item__label">{label}</div>}
+            {hasSupportText && supportText && <div className="ds-vertical-step-item__support">{supportText}</div>}
+          </div>
+          {hasCaption && caption && <div className="ds-vertical-step-item__caption">{caption}</div>}
+        </div>
+        {hasSlotContent && renderedSlot}
+        {hasActionButtons && renderedActions && <div className="ds-vertical-step-item__actions">{renderedActions}</div>}
+        {showBottomPadding && <div className="ds-vertical-step-item__bottom-padding" />}
+      </div>
+      {!markerFirst && marker}
+    </div>
+  );
+}
+
+function StepMarker({ indicator, number }: { indicator: StepIndicator; number: ReactNode }) {
+  if (indicator === "number") {
+    return (
+      <span className="ds-step-marker ds-step-marker--number">
+        <span>{number}</span>
+      </span>
+    );
+  }
+
+  return (
+    <span className="ds-step-marker ds-step-marker--icon">
+      <CheckIcon aria-hidden="true" focusable="false" strokeWidth="var(--bh-icon-stroke-300)" />
+    </span>
+  );
+}
+
+function getHorizontalLinePlacement(
+  alignment: StepAlignment,
+  showLeadingLine: boolean,
+  showTrailingLine: boolean,
+) {
+  if (alignment === "middle") {
+    return { before: showLeadingLine, after: showTrailingLine };
+  }
+
+  if (alignment === "leading") {
+    return { before: false, after: showTrailingLine };
+  }
+
+  return { before: showLeadingLine, after: false };
+}