banhaten 0.1.0

package/registry/components/expanded/Tabs.tsx

@@ -0,0 +1,86 @@
+import { useId, useState } from "react";
+import "./tabs.css";
+
+export type TabsVariant = "underline" | "segment" | "rounded";
+export type TabsSize = "md" | "sm" | "xs";
+
+export type TabsProps = {
+  activeIndex?: number;
+  ariaLabel?: string;
+  className?: string;
+  defaultActiveIndex?: number;
+  dir?: "ltr" | "rtl";
+  fullWidth?: boolean;
+  items?: string[];
+  onActiveIndexChange?: (index: number) => void;
+  size?: TabsSize;
+  variant?: TabsVariant;
+};
+
+export function Tabs({
+  activeIndex,
+  ariaLabel,
+  className = "",
+  defaultActiveIndex = 0,
+  dir = "ltr",
+  fullWidth = false,
+  items = [],
+  onActiveIndexChange,
+  size = "md",
+  variant = "underline",
+}: TabsProps) {
+  const rtl = dir === "rtl";
+  const generatedId = useId();
+  const [uncontrolledActiveIndex, setUncontrolledActiveIndex] = useState(defaultActiveIndex);
+  const selectedIndex = activeIndex ?? uncontrolledActiveIndex;
+
+  function selectTab(index: number) {
+    if (activeIndex === undefined) {
+      setUncontrolledActiveIndex(index);
+    }
+
+    onActiveIndexChange?.(index);
+  }
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={[
+        "ds-tabs",
+        `ds-tabs--${variant}`,
+        `ds-tabs--${size}`,
+        fullWidth ? "ds-tabs--full" : "ds-tabs--hug",
+        rtl ? "ds-tabs--rtl" : "ds-tabs--ltr",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      dir={dir}
+      role="tablist"
+    >
+      {items.map((item, index) => {
+        const selected = selectedIndex === index;
+        const tabId = `${generatedId}-tab-${index}`;
+        const panelId = `${generatedId}-panel-${index}`;
+
+        return (
+          <button
+            aria-controls={panelId}
+            aria-selected={selected}
+            className="ds-tabs__tab"
+            id={tabId}
+            key={`${item}-${index}`}
+            onClick={() => selectTab(index)}
+            role="tab"
+            tabIndex={selected ? 0 : -1}
+            type="button"
+          >
+            <span className="ds-tabs__content">
+              <span className="ds-tabs__label">{item}</span>
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/registry/components/expanded/Timeline.tsx

@@ -0,0 +1,235 @@
+import type { ReactNode } from "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?: string;
+  date?: string;
+  icon?: ReactNode;
+  id?: string;
+  label?: string;
+  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;
+  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,
+  rtl,
+  showLine,
+  state,
+  variant,
+}: {
+  icon?: ReactNode;
+  orientation: TimelineOrientation;
+  rtl: boolean;
+  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}`,
+        rtl && "ds-timeline__indicator--rtl",
+      )}
+      aria-hidden="true"
+    >
+      {orientation === "horizontal" && rtl ? (
+        <>
+          {line}
+          {marker}
+        </>
+      ) : (
+        <>
+          {marker}
+          {line}
+        </>
+      )}
+    </span>
+  );
+}
+
+export function TimelineItem({
+  bottomDate,
+  caption,
+  className,
+  date,
+  dir = "ltr",
+  icon,
+  label,
+  orientation = "vertical",
+  showBottomDate = false,
+  showCaption = true,
+  showLeadingDate = true,
+  showLine = true,
+  showPaddingBottom,
+  showTopDate = false,
+  state = "finished",
+  topDate,
+  variant = "default",
+}: TimelineItemProps) {
+  const rtl = dir === "rtl";
+  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}
+      rtl={rtl}
+      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}`,
+        rtl ? "ds-timeline-item--rtl" : "ds-timeline-item--ltr",
+        className,
+      )}
+      dir={dir}
+      role="listitem"
+    >
+      {orientation === "vertical" && rtl ? (
+        <>
+          {body}
+          {indicator}
+          {leadingDate}
+        </>
+      ) : orientation === "vertical" ? (
+        <>
+          {leadingDate}
+          {indicator}
+          {body}
+        </>
+      ) : (
+        <>
+          {leadingDate}
+          {indicator}
+          {body}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function Timeline({
+  ariaLabel,
+  className,
+  dir = "ltr",
+  orientation = "vertical",
+  steps = [],
+  variant = "default",
+}: TimelineProps) {
+  const rtl = dir === "rtl";
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={classes(
+        "ds-timeline",
+        `ds-timeline--${orientation}`,
+        `ds-timeline--${variant}`,
+        rtl ? "ds-timeline--rtl" : "ds-timeline--ltr",
+        className,
+      )}
+      dir={dir}
+      role="list"
+    >
+      {steps.map((step, index) => (
+        <TimelineItem
+          {...step}
+          key={step.id ?? index}
+          dir={dir}
+          orientation={orientation}
+          showTopDate={step.showTopDate ?? orientation === "horizontal"}
+          showBottomDate={step.showBottomDate ?? false}
+          showPaddingBottom={step.showPaddingBottom ?? orientation === "vertical"}
+          variant={variant}
+        />
+      ))}
+    </div>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg aria-hidden="true" className="ds-timeline__check" fill="none" viewBox="0 0 18 18">
+      <path d="m6.98 11.5 5.1-5.1 1.06 1.06-6.16 6.16-3.3-3.3 1.06-1.06 2.24 2.24Z" fill="currentColor" />
+    </svg>
+  );
+}

package/registry/components/expanded/TimelineShowcase.tsx

@@ -0,0 +1,158 @@
+import {
+  Timeline,
+  TimelineItem,
+  type TimelineItemState,
+  type TimelineOrientation,
+  type TimelineVariant,
+} from "./Timeline";
+
+type TimelineSpec = {
+  height: number;
+  id: string;
+  rtl: boolean;
+  variant: TimelineVariant;
+  width: number;
+  x: number;
+  y: number;
+};
+
+type TimelineItemSpec = TimelineSpec & {
+  orientation: TimelineOrientation;
+  state: TimelineItemState;
+};
+
+const verticalTimelineSpecs: TimelineSpec[] = [
+  { id: "572:6755", variant: "default", rtl: false, x: 225, y: 164, width: 600, height: 532 },
+  { id: "584:11474", variant: "icon", rtl: false, x: 1163, y: 164, width: 600, height: 532 },
+  { id: "573:6936", variant: "default", rtl: true, x: 225, y: 767, width: 600, height: 532 },
+  { id: "584:11482", variant: "icon", rtl: true, x: 1163, y: 767, width: 600, height: 532 },
+];
+
+const horizontalTimelineSpecs: TimelineSpec[] = [
+  { id: "584:4500", variant: "default", rtl: false, x: 274, y: 207, width: 1000, height: 128 },
+  { id: "584:15619", variant: "icon", rtl: false, x: 274, y: 405, width: 1000, height: 136 },
+  { id: "584:4581", variant: "default", rtl: true, x: 274, y: 770, width: 1000, height: 128 },
+  { id: "584:15855", variant: "icon", rtl: true, x: 274, y: 968, width: 1000, height: 136 },
+];
+
+const verticalItemSpecs: TimelineItemSpec[] = [
+  { id: "572:6443", orientation: "vertical", variant: "default", state: "finished", rtl: false, x: 150, y: 152, width: 500, height: 126 },
+  { id: "584:10301", orientation: "vertical", variant: "icon", state: "finished", rtl: false, x: 790, y: 143, width: 500, height: 126 },
+  { id: "572:6442", orientation: "vertical", variant: "default", state: "active", rtl: false, x: 150, y: 298, width: 500, height: 126 },
+  { id: "584:10317", orientation: "vertical", variant: "icon", state: "active", rtl: false, x: 790, y: 289, width: 500, height: 126 },
+  { id: "572:6441", orientation: "vertical", variant: "default", state: "inactive", rtl: false, x: 150, y: 461, width: 500, height: 126 },
+  { id: "584:10333", orientation: "vertical", variant: "icon", state: "inactive", rtl: false, x: 790, y: 452, width: 500, height: 126 },
+  { id: "572:6769", orientation: "vertical", variant: "default", state: "finished", rtl: true, x: 154, y: 758, width: 500, height: 126 },
+  { id: "584:11212", orientation: "vertical", variant: "icon", state: "finished", rtl: true, x: 785, y: 758, width: 500, height: 126 },
+  { id: "572:6785", orientation: "vertical", variant: "default", state: "active", rtl: true, x: 154, y: 908, width: 500, height: 126 },
+  { id: "584:11228", orientation: "vertical", variant: "icon", state: "active", rtl: true, x: 785, y: 908, width: 500, height: 126 },
+  { id: "572:6801", orientation: "vertical", variant: "default", state: "inactive", rtl: true, x: 154, y: 1058, width: 500, height: 126 },
+  { id: "584:11244", orientation: "vertical", variant: "icon", state: "inactive", rtl: true, x: 785, y: 1058, width: 500, height: 126 },
+];
+
+const horizontalItemSpecs: TimelineItemSpec[] = [
+  { id: "582:4215", orientation: "horizontal", variant: "default", state: "finished", rtl: false, x: 311, y: 168, width: 240, height: 128 },
+  { id: "584:4325", orientation: "horizontal", variant: "default", state: "active", rtl: false, x: 595, y: 168, width: 240, height: 128 },
+  { id: "584:4351", orientation: "horizontal", variant: "default", state: "inactive", rtl: false, x: 864, y: 168, width: 240, height: 128 },
+  { id: "584:14794", orientation: "horizontal", variant: "icon", state: "finished", rtl: false, x: 311, y: 346, width: 240, height: 136 },
+  { id: "584:14807", orientation: "horizontal", variant: "icon", state: "active", rtl: false, x: 595, y: 346, width: 240, height: 136 },
+  { id: "584:14820", orientation: "horizontal", variant: "icon", state: "inactive", rtl: false, x: 864, y: 346, width: 240, height: 136 },
+  { id: "582:4231", orientation: "horizontal", variant: "default", state: "finished", rtl: true, x: 854, y: 630, width: 240, height: 128 },
+  { id: "584:4382", orientation: "horizontal", variant: "default", state: "active", rtl: true, x: 577, y: 630, width: 240, height: 128 },
+  { id: "584:4408", orientation: "horizontal", variant: "default", state: "inactive", rtl: true, x: 311, y: 630, width: 240, height: 128 },
+  { id: "584:14884", orientation: "horizontal", variant: "icon", state: "finished", rtl: true, x: 854, y: 804, width: 240, height: 136 },
+  { id: "584:14897", orientation: "horizontal", variant: "icon", state: "active", rtl: true, x: 577, y: 804, width: 240, height: 136 },
+  { id: "584:14910", orientation: "horizontal", variant: "icon", state: "inactive", rtl: true, x: 311, y: 804, width: 240, height: 136 },
+];
+
+function timelineSteps(count: number, rtl = false) {
+  return Array.from({ length: count }, (_, index) => ({
+    caption: rtl ? "\u062a\u0633\u0645\u064a\u0629" : "Caption",
+    date: "Mar 15. 2050",
+    id: `timeline-step-${index}`,
+    label: rtl ? "\u0645\u0644\u0635\u0642" : "Label",
+    state: "finished" as const,
+  }));
+}
+
+function placement(spec: TimelineSpec) {
+  return {
+    height: spec.height,
+    left: spec.x,
+    top: spec.y,
+    width: spec.width,
+  };
+}
+
+export function TimelineShowcase() {
+  return (
+    <section className="timeline-showcase" aria-label="Figma Timeline component matrix">
+      <div className="timeline-showcase__row">
+        <div className="timeline-canvas timeline-canvas--vertical" data-node-id="572:6768">
+          {verticalTimelineSpecs.map((spec) => (
+            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
+              <Timeline
+                ariaLabel={`${spec.rtl ? "RTL" : "LTR"} ${spec.variant} vertical timeline`}
+                dir={spec.rtl ? "rtl" : "ltr"}
+                orientation="vertical"
+                steps={timelineSteps(7, spec.rtl)}
+                variant={spec.variant}
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="timeline-canvas timeline-canvas--horizontal" data-node-id="584:4501">
+          {horizontalTimelineSpecs.map((spec) => (
+            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
+              <Timeline
+                ariaLabel={`${spec.rtl ? "RTL" : "LTR"} ${spec.variant} horizontal timeline`}
+                dir={spec.rtl ? "rtl" : "ltr"}
+                orientation="horizontal"
+                steps={timelineSteps(6, spec.rtl)}
+                variant={spec.variant}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="timeline-showcase__row">
+        <div className="timeline-canvas timeline-canvas--vertical-items" data-node-id="572:6444">
+          {verticalItemSpecs.map((spec) => (
+            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
+              <TimelineItem
+                caption={spec.rtl ? "\u062a\u0633\u0645\u064a\u0629" : "Caption"}
+                date="Mar 15. 2050"
+                dir={spec.rtl ? "rtl" : "ltr"}
+                label={spec.rtl ? "\u0645\u0644\u0635\u0642" : "Label"}
+                orientation="vertical"
+                showBottomDate
+                showTopDate
+                state={spec.state}
+                variant={spec.variant}
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="timeline-canvas timeline-canvas--horizontal-items" data-node-id="582:4214">
+          {horizontalItemSpecs.map((spec) => (
+            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
+              <TimelineItem
+                caption={spec.rtl ? "\u062a\u0633\u0645\u064a\u0629" : "Caption"}
+                date="Mar 15. 2050"
+                dir={spec.rtl ? "rtl" : "ltr"}
+                label={spec.rtl ? "\u0645\u0644\u0635\u0642" : "Label"}
+                orientation="horizontal"
+                showTopDate
+                state={spec.state}
+                variant={spec.variant}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}