banhaten 0.4.0 → 0.5.0

package/registry/components/expanded/Timeline.tsx

@@ -1,203 +1,203 @@
-import type { ReactNode } from "react";
-import { CheckIcon as LucideCheckIcon } from "lucide-react";
-import "./timeline.css";
-
-export type TimelineOrientation = "vertical" | "horizontal";
-export type TimelineVariant = "default" | "icon";
-export type TimelineItemState = "finished" | "active" | "inactive";
-
-export type TimelineStep = {
-  bottomDate?: string;
-  caption?: ReactNode;
-  className?: string;
-  date?: string;
-  icon?: ReactNode;
-  id?: string;
-  label?: ReactNode;
-  showBottomDate?: boolean;
-  showCaption?: boolean;
-  showLeadingDate?: boolean;
-  showLine?: boolean;
-  showPaddingBottom?: boolean;
-  showTopDate?: boolean;
-  state?: TimelineItemState;
-  topDate?: string;
-};
-
-export type TimelineItemProps = TimelineStep & {
-  className?: string;
-  dir?: "ltr" | "rtl";
-  orientation?: TimelineOrientation;
-  role?: "listitem" | "none" | "presentation";
-  variant?: TimelineVariant;
-};
-
-export type TimelineProps = {
-  ariaLabel?: string;
-  className?: string;
-  dir?: "ltr" | "rtl";
-  orientation?: TimelineOrientation;
-  steps?: TimelineStep[];
-  variant?: TimelineVariant;
-};
-
-function classes(...names: Array<string | false | undefined>) {
-  return names.filter(Boolean).join(" ");
-}
-
-function Indicator({
-  icon,
-  orientation,
-  showLine,
-  state,
-  variant,
-}: {
-  icon?: ReactNode;
-  orientation: TimelineOrientation;
-  showLine: boolean;
-  state: TimelineItemState;
-  variant: TimelineVariant;
-}) {
-  const marker = (
-    <span
-      aria-hidden="true"
-      className={classes(
-        "ds-timeline__marker",
-        `ds-timeline__marker--${variant}`,
-        `ds-timeline__marker--${state}`,
-      )}
-    >
-      {variant === "icon" && (icon ?? <CheckIcon />)}
-    </span>
-  );
-  const line = showLine ? (
-    <span aria-hidden="true" className={classes("ds-timeline__line", `ds-timeline__line--${state}`)} />
-  ) : null;
-
-  return (
-    <span
-      className={classes(
-        "ds-timeline__indicator",
-        `ds-timeline__indicator--${orientation}`,
-      )}
-      aria-hidden="true"
-    >
-      {marker}
-      {line}
-    </span>
-  );
-}
-
-export function TimelineItem({
-  bottomDate,
-  caption,
-  className,
-  date,
-  dir,
-  icon,
-  label,
-  orientation = "vertical",
-  role,
-  showBottomDate = false,
-  showCaption = true,
-  showLeadingDate = true,
-  showLine = true,
-  showPaddingBottom,
-  showTopDate = false,
-  state = "finished",
-  topDate,
-  variant = "default",
-}: TimelineItemProps) {
-  const displayDate = date;
-  const displayLabel = label;
-  const displayCaption = caption;
-  const displayTopDate = topDate ?? displayDate;
-  const displayBottomDate = bottomDate ?? displayDate;
-  const hasPaddingBottom = showPaddingBottom ?? orientation === "vertical";
-
-  const body = (
-    <span className="ds-timeline__body">
-      {showTopDate && displayTopDate && <span className="ds-timeline__date ds-timeline__date--top">{displayTopDate}</span>}
-      <span className="ds-timeline__copy">
-        {displayLabel && <span className="ds-timeline__label">{displayLabel}</span>}
-        {showCaption && displayCaption && <span className="ds-timeline__caption">{displayCaption}</span>}
-      </span>
-      {showBottomDate && displayBottomDate && <span className="ds-timeline__date ds-timeline__date--bottom">{displayBottomDate}</span>}
-      {hasPaddingBottom && <span aria-hidden="true" className="ds-timeline__bottom-space" />}
-    </span>
-  );
-
-  const indicator = (
-    <Indicator
-      icon={icon}
-      orientation={orientation}
-      showLine={showLine}
-      state={state}
-      variant={variant}
-    />
-  );
-
-  const leadingDate = showLeadingDate && displayDate ? (
-    <span className="ds-timeline__date ds-timeline__date--leading">{displayDate}</span>
-  ) : null;
-
-  return (
-    <div
-      className={classes(
-        "ds-timeline-item",
-        `ds-timeline-item--${orientation}`,
-        `ds-timeline-item--${variant}`,
-        `ds-timeline-item--${state}`,
-        className,
-      )}
-      dir={dir}
-      role={role}
-    >
-      {leadingDate}
-      {indicator}
-      {body}
-    </div>
-  );
-}
-
-export function Timeline({
-  ariaLabel = "Timeline",
-  className,
-  dir,
-  orientation = "vertical",
-  steps = [],
-  variant = "default",
-}: TimelineProps) {
-  return (
-    <div
-      aria-label={ariaLabel}
-      className={classes(
-        "ds-timeline",
-        `ds-timeline--${orientation}`,
-        `ds-timeline--${variant}`,
-        className,
-      )}
-      dir={dir}
-      role="list"
-      tabIndex={orientation === "horizontal" ? 0 : undefined}
-    >
-      {steps.map((step, index) => (
-        <TimelineItem
-          {...step}
-          key={step.id ?? index}
-          dir={dir}
-          orientation={orientation}
-          role="listitem"
-          showTopDate={step.showTopDate ?? orientation === "horizontal"}
-          showBottomDate={step.showBottomDate ?? false}
-          showPaddingBottom={step.showPaddingBottom ?? orientation === "vertical"}
-          variant={variant}
-        />
-      ))}
-    </div>
-  );
-}
-
-function CheckIcon() {
-  return <LucideCheckIcon aria-hidden="true" className="ds-timeline__check" strokeWidth="var(--bh-icon-stroke-300)" />;
-}
+import type { ReactNode } from "react";
+import { CheckIcon as LucideCheckIcon } from "lucide-react";
+import "./timeline.css";
+
+export type TimelineOrientation = "vertical" | "horizontal";
+export type TimelineVariant = "default" | "icon";
+export type TimelineItemState = "finished" | "active" | "inactive";
+
+export type TimelineStep = {
+  bottomDate?: string;
+  caption?: ReactNode;
+  className?: string;
+  date?: string;
+  icon?: ReactNode;
+  id?: string;
+  label?: ReactNode;
+  showBottomDate?: boolean;
+  showCaption?: boolean;
+  showLeadingDate?: boolean;
+  showLine?: boolean;
+  showPaddingBottom?: boolean;
+  showTopDate?: boolean;
+  state?: TimelineItemState;
+  topDate?: string;
+};
+
+export type TimelineItemProps = TimelineStep & {
+  className?: string;
+  dir?: "ltr" | "rtl";
+  orientation?: TimelineOrientation;
+  role?: "listitem" | "none" | "presentation";
+  variant?: TimelineVariant;
+};
+
+export type TimelineProps = {
+  ariaLabel?: string;
+  className?: string;
+  dir?: "ltr" | "rtl";
+  orientation?: TimelineOrientation;
+  steps?: TimelineStep[];
+  variant?: TimelineVariant;
+};
+
+function classes(...names: Array<string | false | undefined>) {
+  return names.filter(Boolean).join(" ");
+}
+
+function Indicator({
+  icon,
+  orientation,
+  showLine,
+  state,
+  variant,
+}: {
+  icon?: ReactNode;
+  orientation: TimelineOrientation;
+  showLine: boolean;
+  state: TimelineItemState;
+  variant: TimelineVariant;
+}) {
+  const marker = (
+    <span
+      aria-hidden="true"
+      className={classes(
+        "ds-timeline__marker",
+        `ds-timeline__marker--${variant}`,
+        `ds-timeline__marker--${state}`,
+      )}
+    >
+      {variant === "icon" && (icon ?? <CheckIcon />)}
+    </span>
+  );
+  const line = showLine ? (
+    <span aria-hidden="true" className={classes("ds-timeline__line", `ds-timeline__line--${state}`)} />
+  ) : null;
+
+  return (
+    <span
+      className={classes(
+        "ds-timeline__indicator",
+        `ds-timeline__indicator--${orientation}`,
+      )}
+      aria-hidden="true"
+    >
+      {marker}
+      {line}
+    </span>
+  );
+}
+
+export function TimelineItem({
+  bottomDate,
+  caption,
+  className,
+  date,
+  dir,
+  icon,
+  label,
+  orientation = "vertical",
+  role,
+  showBottomDate = false,
+  showCaption = true,
+  showLeadingDate = true,
+  showLine = true,
+  showPaddingBottom,
+  showTopDate = false,
+  state = "finished",
+  topDate,
+  variant = "default",
+}: TimelineItemProps) {
+  const displayDate = date;
+  const displayLabel = label;
+  const displayCaption = caption;
+  const displayTopDate = topDate ?? displayDate;
+  const displayBottomDate = bottomDate ?? displayDate;
+  const hasPaddingBottom = showPaddingBottom ?? orientation === "vertical";
+
+  const body = (
+    <span className="ds-timeline__body">
+      {showTopDate && displayTopDate && <span className="ds-timeline__date ds-timeline__date--top">{displayTopDate}</span>}
+      <span className="ds-timeline__copy">
+        {displayLabel && <span className="ds-timeline__label">{displayLabel}</span>}
+        {showCaption && displayCaption && <span className="ds-timeline__caption">{displayCaption}</span>}
+      </span>
+      {showBottomDate && displayBottomDate && <span className="ds-timeline__date ds-timeline__date--bottom">{displayBottomDate}</span>}
+      {hasPaddingBottom && <span aria-hidden="true" className="ds-timeline__bottom-space" />}
+    </span>
+  );
+
+  const indicator = (
+    <Indicator
+      icon={icon}
+      orientation={orientation}
+      showLine={showLine}
+      state={state}
+      variant={variant}
+    />
+  );
+
+  const leadingDate = showLeadingDate && displayDate ? (
+    <span className="ds-timeline__date ds-timeline__date--leading">{displayDate}</span>
+  ) : null;
+
+  return (
+    <div
+      className={classes(
+        "ds-timeline-item",
+        `ds-timeline-item--${orientation}`,
+        `ds-timeline-item--${variant}`,
+        `ds-timeline-item--${state}`,
+        className,
+      )}
+      dir={dir}
+      role={role}
+    >
+      {leadingDate}
+      {indicator}
+      {body}
+    </div>
+  );
+}
+
+export function Timeline({
+  ariaLabel = "Timeline",
+  className,
+  dir,
+  orientation = "vertical",
+  steps = [],
+  variant = "default",
+}: TimelineProps) {
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={classes(
+        "ds-timeline",
+        `ds-timeline--${orientation}`,
+        `ds-timeline--${variant}`,
+        className,
+      )}
+      dir={dir}
+      role="list"
+      tabIndex={orientation === "horizontal" ? 0 : undefined}
+    >
+      {steps.map((step, index) => (
+        <TimelineItem
+          {...step}
+          key={step.id ?? index}
+          dir={dir}
+          orientation={orientation}
+          role="listitem"
+          showTopDate={step.showTopDate ?? orientation === "horizontal"}
+          showBottomDate={step.showBottomDate ?? false}
+          showPaddingBottom={step.showPaddingBottom ?? orientation === "vertical"}
+          variant={variant}
+        />
+      ))}
+    </div>
+  );
+}
+
+function CheckIcon() {
+  return <LucideCheckIcon aria-hidden="true" className="ds-timeline__check" strokeWidth="var(--bh-icon-stroke-300)" />;
+}