@stampui/blocks 1.0.0

package/src/components/core/sheet.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import * as RadixDialog from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+export const Sheet = RadixDialog.Root
+export const SheetTrigger = RadixDialog.Trigger
+export const SheetClose = RadixDialog.Close
+export const SheetPortal = RadixDialog.Portal
+
+export const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Overlay>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay>
+>(({ className, ...props }, ref) => (
+  <RadixDialog.Overlay
+    ref={ref}
+    className={cx(
+      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+      className
+    )}
+    {...props}
+  />
+))
+SheetOverlay.displayName = "SheetOverlay"
+
+const sheetContentStyles = cva(
+  [
+    "fixed z-50 bg-card border-border shadow-xl outline-none",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "data-[state=closed]:duration-300 data-[state=open]:duration-300",
+  ],
+  {
+    variants: {
+      side: {
+        right: [
+          "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l",
+          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+        ],
+        left: [
+          "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r",
+          "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+        ],
+        top: [
+          "inset-x-0 top-0 w-full border-b",
+          "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        ],
+        bottom: [
+          "inset-x-0 bottom-0 w-full rounded-t-2xl border-t",
+          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        ],
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+export interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof RadixDialog.Content>,
+    VariantProps<typeof sheetContentStyles> {}
+
+export const SheetContent = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Content>,
+  SheetContentProps
+>(({ className, side, children, ...props }, ref) => (
+  <RadixDialog.Portal>
+    <SheetOverlay />
+    <RadixDialog.Content
+      ref={ref}
+      className={cx(sheetContentStyles({ side }), className)}
+      {...props}
+    >
+      {children}
+      <RadixDialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </RadixDialog.Close>
+    </RadixDialog.Content>
+  </RadixDialog.Portal>
+))
+SheetContent.displayName = "SheetContent"
+
+export const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex flex-col gap-1.5 p-6 pb-0", className)} {...props} />
+)
+SheetHeader.displayName = "SheetHeader"
+
+export const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex items-center justify-end gap-2 p-6 pt-0 mt-auto", className)} {...props} />
+)
+SheetFooter.displayName = "SheetFooter"
+
+export const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Title>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Title>
+>(({ className, ...props }, ref) => (
+  <RadixDialog.Title ref={ref} className={cx("text-base font-semibold leading-tight text-foreground", className)} {...props} />
+))
+SheetTitle.displayName = "SheetTitle"
+
+export const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof RadixDialog.Description>,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Description>
+>(({ className, ...props }, ref) => (
+  <RadixDialog.Description ref={ref} className={cx("text-sm text-muted-foreground leading-relaxed", className)} {...props} />
+))
+SheetDescription.displayName = "SheetDescription"
+
+export const SheetBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cx("flex-1 overflow-y-auto px-6 py-4", className)} {...props} />
+)
+SheetBody.displayName = "SheetBody"

package/src/components/core/sidebar.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+// ── Root ──────────────────────────────────────────────────────────────────
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+  collapsed?: boolean
+}
+
+export function Sidebar({ className, collapsed = false, children, ...props }: SidebarProps) {
+  return (
+    <aside
+      data-collapsed={collapsed || undefined}
+      className={cx(
+        "flex flex-col gap-1 py-4 transition-all duration-200",
+        collapsed ? "w-14" : "w-60",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </aside>
+  )
+}
+
+// ── Section ───────────────────────────────────────────────────────────────
+
+export interface SidebarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string
+  collapsed?: boolean
+}
+
+export function SidebarSection({ title, collapsed, className, children, ...props }: SidebarSectionProps) {
+  return (
+    <div className={cx("flex flex-col gap-0.5", className)} {...props}>
+      {title && !collapsed && (
+        <p className="px-3 py-1 text-[11px] font-semibold text-muted-foreground uppercase tracking-widest">
+          {title}
+        </p>
+      )}
+      {children}
+    </div>
+  )
+}
+
+// ── Item ──────────────────────────────────────────────────────────────────
+
+export interface SidebarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+  label: string
+  active?: boolean
+  badge?: React.ReactNode
+  collapsed?: boolean
+  href?: string
+}
+
+export function SidebarItem({ icon, label, active, badge, collapsed, href, className, ...props }: SidebarItemProps) {
+  const Tag = href ? "a" : "button"
+  return (
+    <Tag
+      {...(href ? { href } : { type: "button" })}
+      aria-current={active ? "page" : undefined}
+      title={collapsed ? label : undefined}
+      className={cx(
+        "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors w-full",
+        active
+          ? "bg-surface-2 text-foreground"
+          : "text-muted-foreground hover:bg-surface-2/60 hover:text-foreground",
+        collapsed && "justify-center px-2",
+        className
+      )}
+      {...(props as any)}
+    >
+      {icon && <span className="shrink-0 text-[1em]">{icon}</span>}
+      {!collapsed && <span className="flex-1 truncate">{label}</span>}
+      {!collapsed && badge && <span className="shrink-0">{badge}</span>}
+    </Tag>
+  )
+}
+
+// ── Collapsible group ─────────────────────────────────────────────────────
+
+export interface SidebarGroupProps {
+  icon?: React.ReactNode
+  label: string
+  defaultOpen?: boolean
+  collapsed?: boolean
+  className?: string
+  children: React.ReactNode
+}
+
+export function SidebarGroup({ icon, label, defaultOpen = false, collapsed, className, children }: SidebarGroupProps) {
+  const [open, setOpen] = React.useState(defaultOpen)
+
+  return (
+    <div className={cx("flex flex-col gap-0.5", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={cx(
+          "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-surface-2/60 hover:text-foreground transition-colors w-full",
+          collapsed && "justify-center px-2"
+        )}
+      >
+        {icon && <span className="shrink-0 text-[1em]">{icon}</span>}
+        {!collapsed && (
+          <>
+            <span className="flex-1 truncate text-left">{label}</span>
+            <ChevronRight className={cx("h-3.5 w-3.5 shrink-0 transition-transform duration-200", open && "rotate-90")} />
+          </>
+        )}
+      </button>
+      {open && !collapsed && (
+        <div className="ml-3 border-l border-border pl-3 flex flex-col gap-0.5">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Separator ─────────────────────────────────────────────────────────────
+
+export function SidebarSeparator({ className }: { className?: string }) {
+  return <div className={cx("mx-3 my-2 h-px bg-border", className)} />
+}

package/src/components/core/skeleton.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const skeletonStyles = cva(
+  "animate-pulse bg-surface-3",
+  {
+    variants: {
+      variant: {
+        default: "rounded-lg",
+        circle:  "rounded-full",
+        text:    "rounded",
+        pill:    "rounded-full",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  }
+)
+
+export interface SkeletonProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof skeletonStyles> {}
+
+export function Skeleton({ className, variant, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cx(skeletonStyles({ variant }), className)}
+      aria-hidden="true"
+      {...props}
+    />
+  )
+}

package/src/components/core/slider.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const sliderStyles = cva(
+  "relative flex touch-none select-none items-center",
+  {
+    variants: {
+      orientation: {
+        horizontal: "w-full",
+        vertical: "flex-col h-full min-h-[160px] w-auto",
+      },
+    },
+    defaultVariants: { orientation: "horizontal" },
+  }
+)
+
+const trackStyles = cva(
+  "relative grow overflow-hidden rounded-full bg-surface-3",
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-1.5 w-full",
+        vertical:   "h-full w-1.5",
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: "",
+      },
+    },
+    compoundVariants: [
+      { orientation: "horizontal", size: "sm", className: "h-1" },
+      { orientation: "horizontal", size: "lg", className: "h-2" },
+      { orientation: "vertical",   size: "sm", className: "w-1" },
+      { orientation: "vertical",   size: "lg", className: "w-2" },
+    ],
+    defaultVariants: { orientation: "horizontal", size: "md" },
+  }
+)
+
+const thumbStyles = cva(
+  [
+    "block rounded-full bg-foreground ring-offset-background",
+    "transition-all duration-100",
+    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "hover:scale-110",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-3.5 w-3.5",
+        md: "h-4 w-4",
+        lg: "h-5 w-5",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+export interface SliderProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "orientation">,
+    VariantProps<typeof sliderStyles>,
+    VariantProps<typeof thumbStyles> {
+  orientation?: "horizontal" | "vertical"
+}
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(({ className, orientation = "horizontal", size, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    orientation={orientation}
+    className={cx(sliderStyles({ orientation }), className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className={trackStyles({ orientation, size })}>
+      <SliderPrimitive.Range
+        className={cx(
+          "absolute bg-foreground",
+          orientation === "horizontal" ? "h-full" : "w-full",
+        )}
+      />
+    </SliderPrimitive.Track>
+    {(props.defaultValue ?? props.value ?? [0]).map((_, i) => (
+      <SliderPrimitive.Thumb key={i} className={thumbStyles({ size })} />
+    ))}
+  </SliderPrimitive.Root>
+))
+Slider.displayName = "Slider"
+
+export { Slider }

package/src/components/core/sonner.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { Toaster as SonnerToaster } from "sonner"
+import { useTheme } from "next-themes"
+
+export { toast } from "sonner"
+
+export function Toaster() {
+  const { resolvedTheme } = useTheme()
+  return (
+    <SonnerToaster
+      theme={resolvedTheme as "light" | "dark" | undefined}
+      position="bottom-right"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group border border-border bg-card text-foreground shadow-lg rounded-xl text-sm font-medium gap-3 px-4 py-3",
+          description: "text-muted-foreground text-xs",
+          actionButton: "bg-foreground text-background text-xs font-medium rounded-md px-2.5 py-1 hover:bg-foreground/90",
+          cancelButton: "bg-surface-2 text-muted-foreground text-xs font-medium rounded-md px-2.5 py-1 hover:bg-surface-3",
+          error: "border-danger/30",
+          success: "border-border",
+          warning: "border-border",
+          info: "border-border",
+        },
+      }}
+    />
+  )
+}

package/src/components/core/spinner.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const spinnerStyles = cva(
+  "animate-spin text-muted-foreground",
+  {
+    variants: {
+      size: {
+        xs: "h-3 w-3",
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+        xl: "h-8 w-8",
+      },
+      variant: {
+        default: "text-muted-foreground",
+        primary: "text-foreground",
+        white:   "text-white",
+      },
+    },
+    defaultVariants: { size: "md", variant: "default" },
+  }
+)
+
+export interface SpinnerProps
+  extends Omit<React.SVGAttributes<SVGElement>, "color">,
+    VariantProps<typeof spinnerStyles> {
+  label?: string
+}
+
+export function Spinner({ className, size, variant, label = "Loading...", ...props }: SpinnerProps) {
+  return (
+    <svg
+      role="status"
+      aria-label={label}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cx(spinnerStyles({ size, variant }), className)}
+      {...props}
+    >
+      <circle
+        cx="12" cy="12" r="10"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeDasharray="40 60"
+        opacity="0.25"
+      />
+      <circle
+        cx="12" cy="12" r="10"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeDasharray="40 60"
+      />
+    </svg>
+  )
+}

package/src/components/core/status-pulse.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const dotStyles = cva("relative inline-flex rounded-full shrink-0", {
+  variants: {
+    status: {
+      online: "bg-green-500",
+      offline: "bg-muted-foreground/40",
+      processing: "bg-yellow-400",
+      error: "bg-red-500",
+      warning: "bg-orange-400",
+    },
+    size: {
+      sm: "h-1.5 w-1.5",
+      md: "h-2 w-2",
+      lg: "h-2.5 w-2.5",
+    },
+  },
+  defaultVariants: { status: "online", size: "md" },
+})
+
+const pingStyles = cva("absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping", {
+  variants: {
+    status: {
+      online: "bg-green-500",
+      offline: "hidden",
+      processing: "bg-yellow-400",
+      error: "bg-red-500",
+      warning: "bg-orange-400",
+    },
+  },
+  defaultVariants: { status: "online" },
+})
+
+const labels: Record<string, string> = {
+  online: "Online",
+  offline: "Offline",
+  processing: "Processing",
+  error: "Error",
+  warning: "Warning",
+}
+
+export interface StatusPulseProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof dotStyles> {
+  label?: string | boolean
+  pulse?: boolean
+}
+
+export function StatusPulse({ status, size, label, pulse = true, className, ...props }: StatusPulseProps) {
+  const showLabel = label === true ? labels[status ?? "online"] : label
+
+  return (
+    <div className={cx("inline-flex items-center gap-1.5", className)} {...props}>
+      <span className="relative inline-flex items-center justify-center">
+        {pulse && status !== "offline" && (
+          <span className={pingStyles({ status })} />
+        )}
+        <span className={dotStyles({ status, size })} />
+      </span>
+      {showLabel && (
+        <span className="text-xs text-muted-foreground">{showLabel}</span>
+      )}
+    </div>
+  )
+}

package/src/components/core/stepper.tsx

@@ -0,0 +1,111 @@
+import * as React from "react"
+import { Check, X } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export type StepStatus = "pending" | "active" | "completed" | "error"
+export type StepperOrientation = "horizontal" | "vertical"
+
+export interface Step {
+  title: string
+  description?: string
+  icon?: React.ReactNode
+}
+
+export interface StepperProps {
+  steps: Step[]
+  currentStep: number
+  orientation?: StepperOrientation
+  className?: string
+}
+
+function StepIcon({ status, index, icon }: { status: StepStatus; index: number; icon?: React.ReactNode }) {
+  if (status === "completed") return <Check className="h-3.5 w-3.5" />
+  if (status === "error") return <X className="h-3.5 w-3.5" />
+  if (icon && status === "active") return <span className="text-xs">{icon}</span>
+  return <span className="text-xs font-medium">{index + 1}</span>
+}
+
+export function Stepper({ steps, currentStep, orientation = "horizontal", className }: StepperProps) {
+  const isHorizontal = orientation === "horizontal"
+
+  function getStatus(index: number): StepStatus {
+    if (index < currentStep) return "completed"
+    if (index === currentStep) return "active"
+    return "pending"
+  }
+
+  if (isHorizontal) {
+    return (
+      <div className={cx("flex items-start w-full", className)}>
+        {steps.map((step, i) => {
+          const status = getStatus(i)
+          const isLast = i === steps.length - 1
+          return (
+            <React.Fragment key={i}>
+              <div className="flex flex-col items-center flex-1 min-w-0">
+                <div className={cx(
+                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                  status === "completed" && "border-foreground bg-foreground text-background",
+                  status === "active" && "border-foreground bg-transparent text-foreground",
+                  status === "pending" && "border-border bg-transparent text-muted-foreground",
+                  status === "error" && "border-danger bg-danger/10 text-danger",
+                )}>
+                  <StepIcon status={status} index={i} icon={step.icon} />
+                </div>
+                <div className="mt-2 text-center px-1">
+                  <p className={cx("text-xs font-medium leading-tight", status === "pending" ? "text-muted-foreground" : "text-foreground")}>
+                    {step.title}
+                  </p>
+                  {step.description && (
+                    <p className="text-xs text-muted-foreground mt-0.5 leading-snug">{step.description}</p>
+                  )}
+                </div>
+              </div>
+              {!isLast && (
+                <div className={cx(
+                  "h-0.5 flex-1 mt-4 mx-2 rounded-full transition-colors",
+                  i < currentStep ? "bg-foreground" : "bg-border"
+                )} />
+              )}
+            </React.Fragment>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cx("flex flex-col", className)}>
+      {steps.map((step, i) => {
+        const status = getStatus(i)
+        const isLast = i === steps.length - 1
+        return (
+          <div key={i} className="flex gap-4">
+            <div className="flex flex-col items-center">
+              <div className={cx(
+                "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                status === "completed" && "border-foreground bg-foreground text-background",
+                status === "active" && "border-foreground bg-transparent text-foreground",
+                status === "pending" && "border-border bg-transparent text-muted-foreground",
+                status === "error" && "border-danger bg-danger/10 text-danger",
+              )}>
+                <StepIcon status={status} index={i} icon={step.icon} />
+              </div>
+              {!isLast && (
+                <div className={cx("w-0.5 flex-1 my-1 rounded-full transition-colors min-h-[24px]", i < currentStep ? "bg-foreground" : "bg-border")} />
+              )}
+            </div>
+            <div className={cx("pb-6 min-w-0", isLast && "pb-0")}>
+              <p className={cx("text-sm font-medium leading-tight mt-1.5", status === "pending" ? "text-muted-foreground" : "text-foreground")}>
+                {step.title}
+              </p>
+              {step.description && (
+                <p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{step.description}</p>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}