@mostrom/app-shell 0.1.0

package/src/components/reui/frame.tsx

@@ -0,0 +1,134 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const frameVariants = cva(
+  "relative flex flex-col bg-muted/50 gap-0.75 p-0.75 rounded-(--frame-radius) [--frame-radius:var(--radius-lg)]",
+  {
+    variants: {
+      variant: {
+        default: "border border-border/50 bg-clip-padding",
+        ghost: "",
+      },
+      spacing: {
+        xs: "[&_[data-slot=frame-panel]]:p-2 [&_[data-slot=frame-panel-header]]:px-2 [&_[data-slot=frame-panel-header]]:py-1 [&_[data-slot=frame-panel-footer]]:px-2 [&_[data-slot=frame-panel-footer]]:py-1",
+        sm: "[&_[data-slot=frame-panel]]:p-3 [&_[data-slot=frame-panel-header]]:px-3 [&_[data-slot=frame-panel-header]]:py-2 [&_[data-slot=frame-panel-footer]]:px-3 [&_[data-slot=frame-panel-footer]]:py-2",
+        default:
+          "[&_[data-slot=frame-panel]]:p-4 [&_[data-slot=frame-panel-header]]:px-4 [&_[data-slot=frame-panel-header]]:py-3 [&_[data-slot=frame-panel-footer]]:px-4 [&_[data-slot=frame-panel-footer]]:py-3",
+        lg: "[&_[data-slot=frame-panel]]:p-5 [&_[data-slot=frame-panel-header]]:px-5 [&_[data-slot=frame-panel-header]]:py-4 [&_[data-slot=frame-panel-footer]]:px-5 [&_[data-slot=frame-panel-footer]]:py-4",
+      },
+      stacked: {
+        true: [
+          "gap-0 *:has-[+[data-slot=frame-panel]]:rounded-b-none",
+          "*:has-[+[data-slot=frame-panel]]:before:hidden",
+          "dark:*:has-[+[data-slot=frame-panel]]:before:block",
+          "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:rounded-t-none",
+          "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:border-t-0",
+          "dark:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:before:hidden",
+        ],
+        false: [
+          "data-[spacing=sm]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-0.5",
+          "data-[spacing=default]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1",
+          "data-[spacing=lg]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-2",
+        ],
+      },
+      dense: {
+        true: "p-0 border-border [&_[data-slot=frame-panel]]:-mx-px [&_[data-slot=frame-panel]]:before:hidden [&_[data-slot=frame-panel]:last-child]:-mb-px",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      spacing: "default",
+      stacked: false,
+      dense: false,
+    },
+  }
+)
+
+function Frame({
+  className,
+  variant,
+  spacing,
+  stacked,
+  dense,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof frameVariants>) {
+  return (
+    <div
+      className={cn(
+        frameVariants({ variant, spacing, stacked, dense }),
+        className
+      )}
+      data-slot="frame"
+      data-spacing={spacing}
+      {...props}
+    />
+  )
+}
+
+function FramePanel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "bg-background relative rounded-(--frame-radius) border bg-clip-padding shadow-xs before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-radius)-1px)] before:shadow-black/5 dark:bg-clip-border dark:before:shadow-white/5",
+        className
+      )}
+      data-slot="frame-panel"
+      {...props}
+    />
+  )
+}
+
+function FrameHeader({ className, ...props }: React.ComponentProps<"header">) {
+  return (
+    <header
+      className={cn("flex flex-col", className)}
+      data-slot="frame-panel-header"
+      {...props}
+    />
+  )
+}
+
+function FrameTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-sm font-semibold", className)}
+      data-slot="frame-panel-title"
+      {...props}
+    />
+  )
+}
+
+function FrameDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="frame-panel-description"
+      {...props}
+    />
+  )
+}
+
+function FrameFooter({ className, ...props }: React.ComponentProps<"footer">) {
+  return (
+    <footer
+      className={cn("flex flex-col gap-1", className)}
+      data-slot="frame-panel-footer"
+      {...props}
+    />
+  )
+}
+
+export {
+  Frame,
+  FramePanel,
+  FrameHeader,
+  FrameTitle,
+  FrameDescription,
+  FrameFooter,
+  frameVariants,
+}

package/src/components/reui/index.ts

@@ -0,0 +1,17 @@
+// ReUI Components
+export * from "./alert";
+export * from "./autocomplete";
+export * from "./badge";
+export * from "./date-selector";
+export * from "./filters";
+export * from "./frame";
+
+// Data Grid (has subdirectory)
+export * from "./data-grid/data-grid";
+export * from "./data-grid/data-grid-column-filter";
+export * from "./data-grid/data-grid-column-header";
+export * from "./data-grid/data-grid-column-visibility";
+export * from "./data-grid/data-grid-pagination";
+export * from "./data-grid/data-grid-table";
+export * from "./data-grid/data-grid-table-dnd";
+export * from "./data-grid/data-grid-table-dnd-rows";

package/src/components/reui/timeline.tsx

@@ -0,0 +1,219 @@
+import {
+  createContext,
+  HTMLAttributes,
+  useCallback,
+  useContext,
+  useState,
+} from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+// Types
+type TimelineContextValue = {
+  activeStep: number
+  setActiveStep: (step: number) => void
+}
+
+// Context
+const TimelineContext = createContext<TimelineContextValue | undefined>(
+  undefined
+)
+
+const useTimeline = () => {
+  const context = useContext(TimelineContext)
+  if (!context) {
+    throw new Error("useTimeline must be used within a Timeline")
+  }
+  return context
+}
+
+// Components
+interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number
+  value?: number
+  onValueChange?: (value: number) => void
+  orientation?: "horizontal" | "vertical"
+}
+
+function Timeline({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  className,
+  children,
+  ...props
+}: TimelineProps) {
+  const [activeStep, setInternalStep] = useState(defaultValue)
+
+  const setActiveStep = useCallback(
+    (step: number) => {
+      if (value === undefined) {
+        setInternalStep(step)
+      }
+      onValueChange?.(step)
+    },
+    [value, onValueChange]
+  )
+
+  const currentStep = value ?? activeStep
+
+  return (
+    <TimelineContext.Provider
+      value={{ activeStep: currentStep, setActiveStep }}
+    >
+      <div
+        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"
+        {...props}
+      >
+        {children}
+      </div>
+    </TimelineContext.Provider>
+  )
+}
+
+// TimelineContent
+function TimelineContent({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="timeline-content"
+      {...props}
+    />
+  )
+}
+
+// TimelineDate
+interface TimelineDateProps extends HTMLAttributes<HTMLTimeElement> {
+  asChild?: boolean
+}
+
+function TimelineDate({
+  asChild = false,
+  className,
+  ...props
+}: TimelineDateProps) {
+  const Comp = asChild ? Slot.Root : "time"
+
+  return (
+    <Comp
+      className={cn(
+        "text-muted-foreground mb-1 block text-xs font-medium group-data-[orientation=vertical]/timeline:max-sm:h-4",
+        className
+      )}
+      data-slot="timeline-date"
+      {...props}
+    />
+  )
+}
+
+// TimelineHeader
+function TimelineHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn(className)} data-slot="timeline-header" {...props} />
+  )
+}
+
+// TimelineIndicator
+interface TimelineIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean
+}
+
+function TimelineIndicator({
+  asChild = false,
+  className,
+  children,
+  ...props
+}: TimelineIndicatorProps) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      aria-hidden="true"
+      className={cn(
+        "border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-0 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2",
+        className
+      )}
+      data-slot="timeline-indicator"
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+}
+
+// TimelineItem
+interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {
+  step: number
+}
+
+function TimelineItem({ step, className, ...props }: TimelineItemProps) {
+  const { activeStep } = useTimeline()
+
+  return (
+    <div
+      className={cn(
+        "group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-1 flex-col gap-0.5 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=vertical]/timeline:not-last:pb-6",
+        className
+      )}
+      data-completed={step <= activeStep || undefined}
+      data-slot="timeline-item"
+      {...props}
+    />
+  )
+}
+
+// TimelineSeparator
+function TimelineSeparator({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "bg-primary/10 absolute self-start group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=vertical]/timeline:translate-y-4.5",
+        className
+      )}
+      data-slot="timeline-separator"
+      {...props}
+    />
+  )
+}
+
+// TimelineTitle
+function TimelineTitle({
+  className,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("text-sm font-medium", className)}
+      data-slot="timeline-title"
+      {...props}
+    />
+  )
+}
+
+export {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+}

package/src/components/search/Autocomplete.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+// Types for the autocomplete components
+export interface AutocompleteContentProps {
+  className?: string;
+  children?: React.ReactNode;
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  alignOffset?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  anchor?: React.RefObject<HTMLElement | null> | HTMLElement | null;
+  showBackdrop?: boolean;
+}
+
+// Re-export everything from AutocompleteClient but wrap with client-only check
+// This file handles the SSR boundary
+
+let clientModule: typeof import("./AutocompleteClient") | null = null;
+let clientModulePromise: Promise<typeof import("./AutocompleteClient")> | null = null;
+
+function getClientModule() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (clientModule) {
+    return clientModule;
+  }
+  if (!clientModulePromise) {
+    clientModulePromise = import("./AutocompleteClient").then((mod) => {
+      clientModule = mod;
+      return mod;
+    }).catch((err) => {
+      console.error("[Autocomplete] Failed to load AutocompleteClient:", err);
+      // Reset promise so it can be retried
+      clientModulePromise = null;
+      throw err;
+    });
+  }
+  return null;
+}
+
+// Hook to use the client module with re-render on load
+function useClientModule() {
+  const [mod, setMod] = useState(() => getClientModule());
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (mod || error) return;
+
+    if (clientModulePromise) {
+      clientModulePromise
+        .then((loaded) => {
+          setMod(loaded);
+        })
+        .catch((err) => {
+          setError(err);
+        });
+    }
+  }, [mod, error]);
+
+  return mod;
+}
+
+// SSR fallback input
+// suppressHydrationWarning is needed because browser extensions (Dashlane, 1Password, etc.)
+// inject data attributes before React hydrates, causing hydration mismatches
+function FallbackInput() {
+  return (
+    <div className="app-shell-search-input-container" suppressHydrationWarning>
+      <input
+        type="text"
+        className="app-shell-search-input"
+        placeholder="Search"
+        disabled
+        suppressHydrationWarning
+      />
+    </div>
+  );
+}
+
+// Main Autocomplete wrapper
+function Autocomplete(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return <FallbackInput />;
+  return <mod.AutocompleteRoot {...props} />;
+}
+
+function AutocompleteValue(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteValue {...props} />;
+}
+
+function AutocompleteInput(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteInput {...props} />;
+}
+
+function AutocompletePortal(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompletePortal {...props} />;
+}
+
+function AutocompleteBackdrop(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteBackdrop {...props} />;
+}
+
+function AutocompletePositioner(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompletePositioner {...props} />;
+}
+
+function AutocompleteContent(props: AutocompleteContentProps) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteContent {...props} />;
+}
+
+function AutocompleteList(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteList {...props} />;
+}
+
+function AutocompleteItem(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteItem {...props} />;
+}
+
+function AutocompleteGroup(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteGroup {...props} />;
+}
+
+function AutocompleteGroupLabel(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteGroupLabel {...props} />;
+}
+
+function AutocompleteEmpty(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteEmpty {...props} />;
+}
+
+function AutocompleteClear(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteClear {...props} />;
+}
+
+function AutocompleteTrigger(props: Record<string, unknown>) {
+  const mod = useClientModule();
+  if (!mod) return null;
+  return <mod.AutocompleteTrigger {...props} />;
+}
+
+export {
+  Autocomplete,
+  AutocompleteValue,
+  AutocompleteInput,
+  AutocompletePortal,
+  AutocompleteBackdrop,
+  AutocompletePositioner,
+  AutocompleteContent,
+  AutocompleteList,
+  AutocompleteItem,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteClear,
+  AutocompleteTrigger,
+};