@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/timeline/timeline.tsx

@@ -0,0 +1,376 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { createContext, type ReactNode, useContext } from "react";
+
+import { cn } from "../../lib";
+
+type TimelineOrientation = "horizontal" | "vertical";
+
+interface TimelineContextValue {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+}
+
+const TimelineContext = createContext<TimelineContextValue | undefined>(
+  undefined,
+);
+
+function useTimeline() {
+  const context = useContext(TimelineContext);
+  if (!context) {
+    throw new Error("useTimeline must be used within a TimelineRoot");
+  }
+  return context;
+}
+
+interface TimelineRootProps extends useRender.ComponentProps<"div"> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: TimelineOrientation;
+}
+
+export function TimelineRoot({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  className,
+  render,
+  children,
+  ...props
+}: TimelineRootProps) {
+  const [activeStep = 1, setActiveStep] = useControllableState<number>({
+    prop: value,
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+  });
+
+  const defaultProps = {
+    className: cn(
+      "group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+      className,
+    ),
+    "data-orientation": orientation,
+    "data-slot": "timeline",
+    children,
+  };
+
+  return (
+    <TimelineContext.Provider value={{ activeStep, setActiveStep }}>
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </TimelineContext.Provider>
+  );
+}
+
+interface TimelineItemProps extends useRender.ComponentProps<"div"> {
+  step: number;
+}
+
+export function TimelineItem({
+  step,
+  className,
+  render,
+  children,
+  ...props
+}: TimelineItemProps) {
+  const { activeStep } = useTimeline();
+
+  const defaultProps = {
+    className: cn(
+      "group/timeline-item relative flex flex-1 flex-col gap-0.5 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:not-last:pb-6 has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary",
+      className,
+    ),
+    "data-completed": step <= activeStep || undefined,
+    "data-slot": "timeline-item",
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+export function TimelineHeader({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(className),
+    "data-slot": "timeline-header",
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+export function TimelineTitle({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"h3">) {
+  const defaultProps = {
+    className: cn("font-medium text-sm", className),
+    "data-slot": "timeline-title",
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "h3",
+    render,
+    props: mergeProps<"h3">(defaultProps, props),
+  });
+}
+
+export function TimelineDate({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"time">) {
+  const defaultProps = {
+    className: cn(
+      "mb-1 block font-medium text-muted-foreground text-xs group-data-[orientation=vertical]/timeline:max-sm:h-4",
+      className,
+    ),
+    "data-slot": "timeline-date",
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "time",
+    render,
+    props: mergeProps<"time">(defaultProps, props),
+  });
+}
+
+export function TimelineContent({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn("text-muted-foreground text-sm", className),
+    "data-slot": "timeline-content",
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+export function TimelineIndicator({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    "aria-hidden": true,
+    className: cn(
+      "group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2 absolute size-4 rounded-full border-2 border-primary/20 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=horizontal]/timeline:left-0 group-data-completed/timeline-item:border-primary",
+      className,
+    ),
+    "data-slot": "timeline-indicator",
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+export function TimelineSeparator({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    "aria-hidden": true,
+    className: cn(
+      "group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2 absolute self-start bg-primary/10 group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=vertical]/timeline:translate-y-4.5",
+      className,
+    ),
+    "data-slot": "timeline-separator",
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+type TimelineVariant = "default" | "alternate" | "date-left";
+
+interface TimelineItemData {
+  title?: ReactNode;
+  content?: ReactNode;
+  date?: ReactNode;
+  indicator?: ReactNode;
+}
+
+interface TimelineProps extends Omit<TimelineRootProps, "children"> {
+  items: TimelineItemData[];
+  variant?: TimelineVariant;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Single timeline entry wrapper. */
+    item?: string;
+    /** Row that holds the indicator, date, and title. */
+    header?: string;
+    /** Title text inside the header. */
+    title?: string;
+    /** Date label inside the header. */
+    date?: string;
+    /** Body text below the header. */
+    content?: string;
+    /** Round dot marking the step. */
+    indicator?: string;
+    /** Line connecting consecutive items. */
+    separator?: string;
+  };
+}
+
+export function Timeline({
+  items,
+  variant = "default",
+  classNames,
+  ...props
+}: TimelineProps) {
+  return (
+    <TimelineRoot {...props}>
+      {items.map((item, i) => {
+        if (variant === "alternate") {
+          return (
+            <TimelineItem
+              key={i}
+              step={i + 1}
+              className={cn(
+                "w-[calc(50%-1.5rem)] odd:ms-auto even:me-auto even:text-right",
+                "even:group-data-[orientation=vertical]/timeline:ms-0 even:group-data-[orientation=vertical]/timeline:me-8",
+                "even:group-data-[orientation=vertical]/timeline:**:data-[slot=timeline-indicator]:-right-6 even:group-data-[orientation=vertical]/timeline:**:data-[slot=timeline-indicator]:left-auto even:group-data-[orientation=vertical]/timeline:**:data-[slot=timeline-indicator]:translate-x-1/2",
+                "even:group-data-[orientation=vertical]/timeline:**:data-[slot=timeline-separator]:-right-6 even:group-data-[orientation=vertical]/timeline:**:data-[slot=timeline-separator]:left-auto even:group-data-[orientation=vertical]/timeline:**:data-[slot=timeline-separator]:translate-x-1/2",
+                classNames?.item,
+              )}
+            >
+              <TimelineHeader className={classNames?.header}>
+                <TimelineSeparator className={classNames?.separator} />
+                {item.date ? (
+                  <TimelineDate className={classNames?.date}>
+                    {item.date}
+                  </TimelineDate>
+                ) : null}
+                {item.title ? (
+                  <TimelineTitle className={classNames?.title}>
+                    {item.title}
+                  </TimelineTitle>
+                ) : null}
+                <TimelineIndicator className={classNames?.indicator}>
+                  {item.indicator}
+                </TimelineIndicator>
+              </TimelineHeader>
+              {item.content ? (
+                <TimelineContent className={classNames?.content}>
+                  {item.content}
+                </TimelineContent>
+              ) : null}
+            </TimelineItem>
+          );
+        }
+
+        if (variant === "date-left") {
+          return (
+            <TimelineItem
+              key={i}
+              step={i + 1}
+              className={cn(
+                "sm:group-data-[orientation=vertical]/timeline:ms-32",
+                classNames?.item,
+              )}
+            >
+              <TimelineHeader className={classNames?.header}>
+                <TimelineSeparator className={classNames?.separator} />
+                {item.date ? (
+                  <TimelineDate
+                    className={cn(
+                      "sm:group-data-[orientation=vertical]/timeline:absolute sm:group-data-[orientation=vertical]/timeline:-left-32 sm:group-data-[orientation=vertical]/timeline:w-20 sm:group-data-[orientation=vertical]/timeline:text-right",
+                      classNames?.date,
+                    )}
+                  >
+                    {item.date}
+                  </TimelineDate>
+                ) : null}
+                {item.title ? (
+                  <TimelineTitle
+                    className={cn("sm:-mt-0.5", classNames?.title)}
+                  >
+                    {item.title}
+                  </TimelineTitle>
+                ) : null}
+                <TimelineIndicator className={classNames?.indicator}>
+                  {item.indicator}
+                </TimelineIndicator>
+              </TimelineHeader>
+              {item.content ? (
+                <TimelineContent className={classNames?.content}>
+                  {item.content}
+                </TimelineContent>
+              ) : null}
+            </TimelineItem>
+          );
+        }
+
+        return (
+          <TimelineItem key={i} step={i + 1} className={classNames?.item}>
+            <TimelineHeader className={classNames?.header}>
+              {item.date ? (
+                <TimelineDate className={classNames?.date}>
+                  {item.date}
+                </TimelineDate>
+              ) : null}
+              {item.title ? (
+                <TimelineTitle className={classNames?.title}>
+                  {item.title}
+                </TimelineTitle>
+              ) : null}
+            </TimelineHeader>
+            <TimelineIndicator className={classNames?.indicator}>
+              {item.indicator}
+            </TimelineIndicator>
+            <TimelineSeparator className={classNames?.separator} />
+            {item.content ? (
+              <TimelineContent className={classNames?.content}>
+                {item.content}
+              </TimelineContent>
+            ) : null}
+          </TimelineItem>
+        );
+      })}
+    </TimelineRoot>
+  );
+}

package/src/components/toast/index.ts

@@ -0,0 +1 @@
+export * from "./toast";