banhaten 0.1.2 → 0.2.0

package/registry/components/expanded/Tabs.tsx

@@ -1,86 +0,0 @@
-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/TimelineShowcase.tsx

@@ -1,158 +0,0 @@
-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>
-  );
-}