@boxcustodia/library 2.0.0-alpha.12 → 2.0.0-alpha.14

package/src/components/timeline/timeline.tsx

@@ -1,147 +1,374 @@
-import { HTMLProps, ReactNode } from "react";
+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";
-import { TimelineStatus } from "./timeline-status";
 
-interface ItemTimeline {
-  content?: ReactNode;
-  icon?: ReactNode;
-  status?: "done" | "pending" | "error";
-  color?: string;
+type TimelineOrientation = "horizontal" | "vertical";
+
+interface TimelineContextValue {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
 }
 
-interface TimelineProps {
-  items: ItemTimeline[];
-  itemsProps?: HTMLProps<HTMLDivElement>;
-  containerProps?: HTMLProps<HTMLUListElement>;
-  classNameContainer?: string;
-  classNameItem?: string;
-  classNameItemDot?: string;
-  classNameItemContainerDot?: string;
-  classNameItemContent?: string;
+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;
 }
-export const Timeline = ({
-  items,
-  classNameContainer,
-  containerProps,
-  ...itemsProps
-}: TimelineProps) => {
-  return (
-    <TimelineRoot className={classNameContainer} {...containerProps}>
-      {items.map((item: ItemTimeline, i) => (
-        <TimelineListItem
-          key={i}
-          icon={item.icon}
-          color={item.color}
-          status={item.status}
-          {...itemsProps}
-        >
-          {item.content}
-        </TimelineListItem>
-      ))}
-    </TimelineRoot>
-  );
-};
 
-export const TimelineRoot = (props: HTMLProps<HTMLUListElement>) => {
-  return (
-    <ul
-      data-slot="timeline"
-      {...props}
-      className={cn(
-        "relative flex justify-center flex-col border-input",
-        props.className,
-      )}
-    />
-  );
-};
-
-interface TimelineListItemProps extends HTMLProps<HTMLLIElement> {
-  icon?: ReactNode;
-  status?: "done" | "pending" | "error";
-  color?: string;
-  itemsProps?: HTMLProps<HTMLDivElement>;
-  classNameContainer?: string;
-  classNameItemDot?: string;
-  classNameItemContainerDot?: string;
-  classNameItemContent?: string;
+interface TimelineRootProps extends useRender.ComponentProps<"div"> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: TimelineOrientation;
 }
-export const TimelineListItem = ({
-  icon,
-  status,
-  color,
-  classNameItemDot,
-  classNameItemContainerDot,
-  classNameItemContent,
-  itemsProps,
+
+export function TimelineRoot({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  className,
+  render,
   children,
   ...props
-}: TimelineListItemProps) => {
+}: 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 (
-    <li
-      data-slot="timeline-item"
-      className={cn(
-        "rounded-lg w-full px-2 gap-1 grid hover:bg-muted transition-colors ease-in grid-cols-[minmax(auto,20px)_1fr]",
-        props.className,
-      )}
-      {...props}
-    >
-      <TimelineItemDot
-        icon={icon}
-        status={status}
-        color={color}
-        classNameDot={classNameItemDot}
-        classNameContainerDot={classNameItemContainerDot}
-      />
-      <TimelineItemContent className={classNameItemContent} {...itemsProps}>
-        {children}
-      </TimelineItemContent>
-    </li>
+    <TimelineContext.Provider value={{ activeStep, setActiveStep }}>
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </TimelineContext.Provider>
   );
-};
-
-interface TimelineItemDotProps {
-  icon?: ReactNode;
-  status?: "done" | "pending" | "error";
-  color?: string;
-  classNameDot?: string;
-  classNameContainerDot?: string;
 }
-export const TimelineItemDot = ({
-  icon,
-  status = "pending",
-  color,
-  classNameDot,
-  classNameContainerDot,
-}: TimelineItemDotProps) => {
-  return (
-    <div
-      data-slot="timeline-item-dot"
-      className={cn(
-        "relative pb-6 last:after:hidden after:absolute after:top-0 after:bottom-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-gray-200",
-        classNameContainerDot,
-      )}
-    >
-      <div
-        data-slot="timeline-item-dot-icon"
-        className={cn(
-          "relative z-10 flex text-white items-center justify-center rounded-full left-1/2 -translate-x-1/2",
-          icon ? "aspect-square p-1.5 min-h-7 min-w-7 top-2" : "size-2 top-4",
-          classNameDot,
-        )}
-        style={{ backgroundColor: color || TimelineStatus?.[status] }}
-      >
-        {icon}
-      </div>
-    </div>
-  );
-};
 
-export const TimelineItemContent = (props: HTMLProps<HTMLDivElement>) => {
+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 (
-    <div
-      data-slot="timeline-item-content"
-      {...props}
-      className={cn("grow px-2 pb-4 pt-2", props.className)}
-    />
+    <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/toast.stories.tsx

@@ -63,6 +63,7 @@ import {
 const meta: Meta<typeof ToastProvider> = {
   title: "Components/Toast",
   component: ToastProvider,
+  parameters: { layout: "centered" },
 };
 
 export default meta;

package/src/components/tooltip/tooltip.tsx

@@ -101,14 +101,16 @@ export type TooltipProps = Omit<RootProps, "children"> &
     delay?: TriggerProps["delay"];
     /** Delay in ms before the tooltip closes. @default 0 */
     closeDelay?: TriggerProps["closeDelay"];
-    /** Additional classes applied to the tooltip popup. */
+    /** Additional classes applied to the tooltip popup (visual root). */
     className?: string;
-    /**
-     * Additional classes applied to the arrow.
-     * Pass a `text-*` class to change the arrow color when overriding the popup background.
-     * @example arrowClassName="text-primary"
-     */
-    arrowClassName?: string;
+    /** Styles applied to each internal slot. */
+    classNames?: {
+      /**
+       * Arrow that points at the trigger. Pass a `text-*` class to change the
+       * arrow color when overriding the popup background.
+       */
+      arrow?: string;
+    };
   };
 
 /**
@@ -134,7 +136,7 @@ export function Tooltip({
   delay,
   closeDelay,
   className,
-  arrowClassName,
+  classNames,
   ...triggerProps
 }: TooltipProps) {
   return (
@@ -157,7 +159,7 @@ export function Tooltip({
           className="z-float"
         >
           <TooltipPopup className={className}>
-            <TooltipArrow className={arrowClassName} />
+            <TooltipArrow className={classNames?.arrow} />
             {content}
           </TooltipPopup>
         </TooltipBase.Positioner>

package/src/components/tree/index.ts

@@ -1,2 +1 @@
 export * from "./tree";
-export * from "./tree-primitives";