@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.0

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,243 @@
+import { cn } from "../../lib/cn.js";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Timeline/Timeline.tsx
+const TimelineContext = createContext({ size: "md" });
+const itemGapClasses = {
+	sm: "gap-x-2",
+	md: "gap-x-3",
+	lg: "gap-x-4"
+};
+const connectorClasses = "flex flex-col items-center gap-1 pb-1";
+const connectorSizeClasses = {
+	sm: "pt-0.5",
+	md: "",
+	lg: ""
+};
+const indicatorClasses = "flex shrink-0 select-none items-center justify-center rounded-full font-sans text-xs font-medium tabular-nums [&_svg]:pointer-events-none [&_svg]:shrink-0";
+const indicatorSizeClasses = {
+	sm: "size-4 [&_svg:not([class*='size-'])]:size-2.5",
+	md: "size-5 [&_svg:not([class*='size-'])]:size-3",
+	lg: "size-6 [&_svg:not([class*='size-'])]:size-3.5"
+};
+const indicatorAppearanceClasses = {
+	solid: {
+		neutral: "bg-foreground text-background",
+		primary: "bg-primary text-primary-foreground",
+		success: "bg-success-700 text-success-foreground",
+		warning: "bg-warning text-warning-950",
+		destructive: "bg-destructive text-destructive-foreground"
+	},
+	soft: {
+		neutral: "bg-muted text-slate-700",
+		primary: "bg-primary-50 text-primary-700",
+		success: "bg-success-50 text-success-700",
+		warning: "bg-warning-50 text-warning-800",
+		destructive: "bg-error-50 text-error-700"
+	},
+	outline: {
+		neutral: "border border-slate-400 bg-background text-slate-700",
+		primary: "border border-primary-400 bg-background text-primary-700",
+		success: "border border-success-400 bg-background text-success-700",
+		warning: "border border-warning-400 bg-background text-warning-800",
+		destructive: "border border-error-400 bg-background text-error-700"
+	}
+};
+const separatorClasses = "w-0 flex-1 border-s border-border";
+const separatorVariantClasses = {
+	solid: "",
+	dashed: "border-dashed"
+};
+const contentClasses = "min-w-0 flex-1 group-last/item:pb-0";
+const contentSizeClasses = {
+	sm: "pb-4",
+	md: "pb-6",
+	lg: "pb-8"
+};
+const titleClasses = "block font-sans font-medium text-foreground";
+const titleSizeClasses = {
+	sm: "text-sm",
+	md: "text-sm",
+	lg: "text-base"
+};
+const descriptionClasses = "block font-sans text-muted-foreground";
+const descriptionSizeClasses = {
+	sm: "text-xs",
+	md: "text-sm",
+	lg: "text-sm"
+};
+const timeClasses = "block font-sans text-muted-foreground tabular-nums";
+const timeSizeClasses = {
+	sm: "text-xs",
+	md: "text-xs",
+	lg: "text-sm"
+};
+/**
+* A chronological list of events, marked up as an ordered list. The timeline
+* is display-only — it holds no current-step state (progress through a flow
+* is Stepper's job) and renders whatever order it receives; feeds usually
+* pass newest-first. Give the list an accessible name (`aria-label` or
+* `aria-labelledby`, e.g. "Deployment history") when the surrounding context
+* doesn't already announce one.
+*/
+const Timeline = forwardRef(({ size = "md", render, className, ...rest }, ref) => {
+	const element = useRender({
+		defaultTagName: "ol",
+		render,
+		ref,
+		props: {
+			role: "list",
+			...rest,
+			className: cn("flex flex-col", className)
+		}
+	});
+	return /* @__PURE__ */ jsx(TimelineContext.Provider, {
+		value: { size },
+		children: element
+	});
+});
+Timeline.displayName = "Timeline";
+/**
+* One event: a flex row of an optional leading `TimelineContent` (opposite
+* side), the `TimelineConnector` column, and the trailing `TimelineContent`.
+*/
+const TimelineItem = forwardRef(({ render, className, ...rest }, ref) => {
+	const { size } = useContext(TimelineContext);
+	return useRender({
+		defaultTagName: "li",
+		render,
+		ref,
+		props: {
+			...rest,
+			className: cn("group/item flex", itemGapClasses[size], className)
+		}
+	});
+});
+TimelineItem.displayName = "TimelineItem";
+/**
+* The marker column: it stretches to the item's height and stacks the
+* `TimelineIndicator` above the `TimelineSeparator`, which fills the rest —
+* so the rail always reaches the next item's marker, however tall the
+* content grows.
+*/
+const TimelineConnector = forwardRef(({ render, className, ...rest }, ref) => {
+	const { size } = useContext(TimelineContext);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...rest,
+			className: cn(connectorClasses, connectorSizeClasses[size], className)
+		}
+	});
+});
+TimelineConnector.displayName = "TimelineConnector";
+/**
+* The event's marker. Empty it renders as a plain dot; children (an icon, a
+* spinner, a letter) center inside it. Glyphs are decorative next to the
+* event's own text — mark them `aria-hidden`; when the marker alone carries
+* meaning (a bare status dot), pair it with visually-hidden text in the
+* content instead.
+*/
+const TimelineIndicator = forwardRef(({ variant = "neutral", appearance = "solid", render, className, ...rest }, ref) => {
+	const { size } = useContext(TimelineContext);
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			...rest,
+			className: cn(indicatorClasses, indicatorSizeClasses[size], indicatorAppearanceClasses[appearance][variant], className)
+		}
+	});
+});
+TimelineIndicator.displayName = "TimelineIndicator";
+/**
+* The rail segment below a marker, connecting it to the next event. Omit it
+* on the last item so the timeline ends at its final marker.
+*/
+const TimelineSeparator = forwardRef(({ variant = "solid", render, className, ...rest }, ref) => {
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			role: "presentation",
+			"aria-hidden": "true",
+			...rest,
+			className: cn(separatorClasses, separatorVariantClasses[variant], className)
+		}
+	});
+});
+TimelineSeparator.displayName = "TimelineSeparator";
+/**
+* The event's body, holding `TimelineTitle` / `TimelineTime` /
+* `TimelineDescription` or any richer blocks. It carries the spacing between
+* items, so the connector's rail spans the full distance to the next marker.
+* Place one before the connector for opposite-side content (dates in a
+* roadmap, alternating layouts).
+*/
+const TimelineContent = forwardRef(({ render, className, ...rest }, ref) => {
+	const { size } = useContext(TimelineContext);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...rest,
+			className: cn(contentClasses, contentSizeClasses[size], className)
+		}
+	});
+});
+TimelineContent.displayName = "TimelineContent";
+/** The event's one-line headline. */
+const TimelineTitle = forwardRef(({ render, className, ...rest }, ref) => {
+	const { size } = useContext(TimelineContext);
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			...rest,
+			className: cn(titleClasses, titleSizeClasses[size], className)
+		}
+	});
+});
+TimelineTitle.displayName = "TimelineTitle";
+/** Supporting copy under the title. */
+const TimelineDescription = forwardRef(({ render, className, ...rest }, ref) => {
+	const { size } = useContext(TimelineContext);
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			...rest,
+			className: cn(descriptionClasses, descriptionSizeClasses[size], className)
+		}
+	});
+});
+TimelineDescription.displayName = "TimelineDescription";
+/**
+* The event's timestamp as a real `<time>` element. Feeds abbreviate the
+* visible text ("3h", "May 12") — keep the absolute moment machine-readable
+* in `dateTime`, and put it in the human-readable `title` when the visible
+* form is relative.
+*/
+const TimelineTime = forwardRef(({ render, className, ...rest }, ref) => {
+	const { size } = useContext(TimelineContext);
+	return useRender({
+		defaultTagName: "time",
+		render,
+		ref,
+		props: {
+			...rest,
+			className: cn(timeClasses, timeSizeClasses[size], className)
+		}
+	});
+});
+TimelineTime.displayName = "TimelineTime";
+//#endregion
+export { Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle };

package/dist/components/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+import { Timeline, TimelineConnector, TimelineConnectorProps, TimelineContent, TimelineContentProps, TimelineDescription, TimelineDescriptionProps, TimelineIndicator, TimelineIndicatorAppearance, TimelineIndicatorProps, TimelineIndicatorVariant, TimelineItem, TimelineItemProps, TimelineProps, TimelineSeparator, TimelineSeparatorProps, TimelineSeparatorVariant, TimelineSize, TimelineTime, TimelineTimeProps, TimelineTitle, TimelineTitleProps } from "./Timeline.js";
+export { Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorAppearance, type TimelineIndicatorProps, type TimelineIndicatorVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, type TimelineSeparatorVariant, type TimelineSize, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps };

package/dist/components/Timeline/index.js

@@ -0,0 +1,2 @@
+import { Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle } from "./Timeline.js";
+export { Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle };

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,135 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Toast, ToastManager, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject } from "@base-ui/react/toast";
+//#region src/components/Toast/Toast.d.ts
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+/**
+ * The severity values the built-in styling recognizes (icon + color, and
+ * `loading` renders a spinner). Base UI's `type` field is an open string —
+ * unknown values render the neutral look with no icon.
+ */
+type ToastType = "success" | "error" | "warning" | "info" | "loading";
+/** Per-toast extension data the ArcFusion `Toaster` understands. */
+interface ToastData {
+  /**
+   * Custom leading icon, replacing the automatic `type` icon. Sized to the
+   * 20px slot unless the node carries its own `size-*` class.
+   */
+  icon?: ReactNode;
+  [key: string]: unknown;
+}
+/** Options for `toast.add` — Base UI's add options with ArcFusion `data`. */
+interface ToastOptions extends ToastManagerAddOptions<ToastData> {}
+/** Options for `toast.update` and the object states of `toast.promise`. */
+interface ToastUpdateOptions extends ToastManagerUpdateOptions<ToastData> {}
+/** State map for `toast.promise` — strings are shorthand for `{ title }`. */
+type ToastPromiseOptions<Value> = ToastManagerPromiseOptions<Value, ToastData>;
+/** A toast manager, as returned by `createToastManager()`. */
+type ToastManager$1<Data extends object = any> = ToastManager<Data>;
+/** A queued toast as the manager tracks it (id, content, type, timing). */
+type ToastObject$1<Data extends object = ToastData> = ToastObject<Data>;
+/**
+ * Creates an isolated toast manager for a scoped `<Toaster />` (a preview
+ * frame, a second stack with different placement, tests). Pass it to that
+ * Toaster's `toastManager` prop and call `manager.add/close/update/promise`
+ * on it directly — the `toast` helpers always target the built-in default
+ * manager, not scoped ones.
+ */
+declare const createToastManager: typeof Toast.createToastManager;
+type ToastHelperOptions = Omit<ToastOptions, "title" | "type">;
+/**
+ * Imperative toast API, callable from anywhere — components, stores, fetch
+ * wrappers. Requires one default `<Toaster />` (no `toastManager` prop)
+ * mounted in the app. Every method accepts Base UI's full option set
+ * (`description`, `timeout`, `priority`, `onClose`, `actionProps`,
+ * `data.icon`, …); `add` with an existing `id` updates that toast in place,
+ * which is how repeated events deduplicate.
+ */
+declare const toast: {
+  /** Queue a toast with full control over its options. Returns the toast id. */
+  add(options: ToastOptions): string;
+  /** Success feedback: green check icon, polite announcement. */
+  success(title: ReactNode, options?: ToastHelperOptions): string;
+  /** Informational notice: blue info icon, polite announcement. */
+  info(title: ReactNode, options?: ToastHelperOptions): string;
+  /** Warning: amber triangle icon, polite announcement. */
+  warning(title: ReactNode, options?: ToastHelperOptions): string;
+  /**
+   * Failure feedback: red icon, announced assertively (`priority: "high"`)
+   * so screen readers interrupt with it, as errors warrant. For critical
+   * errors the user must act on, add `timeout: 0` so the toast persists.
+   */
+  error(title: ReactNode, options?: ToastHelperOptions): string;
+  /**
+   * Spinner toast for manual async flows. Never auto-dismisses (the
+   * operation decides when it ends) — resolve it via
+   * `toast.update(id, { type: "success", … })` or `toast.close(id)`.
+   * Prefer `toast.promise` when a promise already models the operation.
+   */
+  loading(title: ReactNode, options?: ToastHelperOptions): string;
+  /**
+   * One toast tracking a promise through loading → success/error, switching
+   * `type` (spinner → check/cross) at each step. States take a string
+   * (shorthand for the title), an options object, or — for
+   * `success`/`error` — a function of the resolved value/rejection reason.
+   * Returns the input promise's result, so it can be awaited in place.
+   */
+  promise<Value>(promise: Promise<Value>, options: ToastPromiseOptions<Value>): Promise<Value>;
+  /** Update a queued toast in place (content, type, timing) by id. */
+  update(toastId: string, options: ToastUpdateOptions): void;
+  /** Close one toast by id, or every toast when called with no argument. */
+  close(toastId?: string): void;
+};
+interface ToasterProps extends Omit<ComponentPropsWithoutRef<typeof Toast.Viewport>, "className" | "children"> {
+  /**
+   * Screen corner or edge the stack anchors to. Toasts enter from, exit
+   * toward, and swipe-dismiss past the nearest edges. `bottom-right` is the
+   * desktop convention; prefer a `*-center` position on mobile-first
+   * surfaces.
+   */
+  position?: ToastPosition;
+  /**
+   * Maximum number of toasts shown at once — older ones hide (`inert`)
+   * until room frees up. The cap keeps bursts from covering the page.
+   */
+  limit?: number;
+  /**
+   * Default auto-dismiss delay in ms; per-toast `timeout` overrides it and
+   * `0` persists until dismissed. Timers pause while the stack is hovered
+   * or focused, so reading is never raced.
+   */
+  timeout?: number;
+  /**
+   * Render toasts from this manager (see `createToastManager`) instead of
+   * the built-in one the `toast` helpers target. Mount exactly one Toaster
+   * per manager — two Toasters on the same manager render every toast
+   * twice.
+   */
+  toastManager?: ToastManager$1;
+  /** Element the stack portals into instead of `<body>` — for scoped stacking contexts or inline previews. */
+  container?: ComponentPropsWithoutRef<typeof Toast.Portal>["container"];
+  /** Accessible name of each toast's dismiss button — localize it alongside your content. */
+  closeLabel?: string;
+  /**
+   * Applied to the viewport. Sizing hook: the stack is 22.5rem wide on
+   * `sm+` (full-width minus margins below) — override with `sm:w-*`.
+   */
+  className?: string;
+}
+/**
+ * The toast stack. Mount one per app (typically at the root); after that,
+ * `toast.success("Saved")` & co. work from anywhere. Bundles Base UI's
+ * Provider, Portal, and Viewport with fully styled toasts: severity icon,
+ * title, description, optional action button, and an always-visible
+ * dismiss button.
+ *
+ * Collapsed toasts stack with a peek; hovering or focusing the stack
+ * expands it and pauses dismiss timers. Every toast can be dismissed by
+ * pointer (×), swipe, or keyboard, and F6 jumps focus into the stack.
+ * Announcements use the toast's `title`/`description` strings — polite by
+ * default, assertive for `priority: "high"`. The stack portals to `<body>`;
+ * consumer apps should set `isolation: isolate` on their root so page
+ * stacking contexts stay below it.
+ */
+declare const Toaster: import("react").ForwardRefExoticComponent<ToasterProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ToastData, ToastManager$1 as ToastManager, ToastObject$1 as ToastObject, ToastOptions, ToastPosition, ToastPromiseOptions, ToastType, ToastUpdateOptions, Toaster, ToasterProps, createToastManager, toast };