@stampui/blocks 1.0.0

package/src/components/core/popover.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import * as RadixPopover from "@radix-ui/react-popover"
+import { cx } from "@/lib/cx"
+
+export const Popover = RadixPopover.Root
+export const PopoverTrigger = RadixPopover.Trigger
+export const PopoverAnchor = RadixPopover.Anchor
+
+export const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof RadixPopover.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixPopover.Content>
+>(({ className, align = "center", sideOffset = 8, ...props }, ref) => (
+  <RadixPopover.Portal>
+    <RadixPopover.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cx(
+        "z-50 min-w-[200px] max-w-sm rounded-xl border border-border bg-card p-4 shadow-lg outline-none",
+        "animate-in fade-in-0 zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </RadixPopover.Portal>
+))
+PopoverContent.displayName = "PopoverContent"
+
+export const PopoverClose = RadixPopover.Close

package/src/components/core/progress.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as RadixProgress from "@radix-ui/react-progress"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const trackStyles = cva(
+  "relative overflow-hidden rounded-full bg-surface-3 border border-border/20",
+  {
+    variants: {
+      size: {
+        sm: "h-1.5",
+        md: "h-2.5",
+        lg: "h-4",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+const indicatorStyles = cva(
+  "h-full w-full flex-1 rounded-full transition-transform duration-500 ease-out",
+  {
+    variants: {
+      variant: {
+        default: "bg-foreground",
+        success: "bg-success",
+        warning: "bg-warning",
+        danger: "bg-danger",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface ProgressProps
+  extends React.ComponentPropsWithoutRef<typeof RadixProgress.Root>,
+    VariantProps<typeof trackStyles>,
+    VariantProps<typeof indicatorStyles> {}
+
+export const Progress = React.forwardRef<
+  React.ElementRef<typeof RadixProgress.Root>,
+  ProgressProps
+>(({ className, size, variant, value, max = 100, ...props }, ref) => (
+  <RadixProgress.Root
+    ref={ref}
+    value={value}
+    max={max}
+    className={cx(trackStyles({ size }), className)}
+    {...props}
+  >
+    <RadixProgress.Indicator
+      className={cx(indicatorStyles({ variant }))}
+      style={{ transform: `translateX(-${100 - ((value ?? 0) / (max ?? 100)) * 100}%)` }}
+    />
+  </RadixProgress.Root>
+))
+Progress.displayName = "Progress"

package/src/components/core/radio-group.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const radioStyles = cva(
+  [
+    "peer aspect-square shrink-0 rounded-full border transition-all outline-none",
+    "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "disabled:cursor-not-allowed disabled:opacity-40",
+    "border-border hover:border-border-strong",
+    "data-[state=checked]:border-foreground",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-3.5 w-3.5",
+        md: "h-4 w-4",
+        lg: "h-5 w-5",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+const indicatorStyles = cva(
+  "flex items-center justify-center",
+  {
+    variants: {
+      size: {
+        sm: "[&>span]:h-1.5 [&>span]:w-1.5",
+        md: "[&>span]:h-2 [&>span]:w-2",
+        lg: "[&>span]:h-2.5 [&>span]:w-2.5",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cx("grid gap-2.5", className)}
+      {...props}
+    />
+  )
+}
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+export interface RadioGroupItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+    VariantProps<typeof radioStyles> {}
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(({ className, size, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cx(radioStyles({ size }), className)}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className={indicatorStyles({ size })}>
+        <span className="rounded-full bg-foreground block" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

package/src/components/core/resizable.tsx

@@ -0,0 +1,250 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+// ── Context ───────────────────────────────────────────────────────────────────
+
+interface PanelGroupContextValue {
+  direction: "horizontal" | "vertical"
+  sizes: number[]
+  setSizes: React.Dispatch<React.SetStateAction<number[]>>
+}
+
+const PanelGroupContext = React.createContext<PanelGroupContextValue | null>(null)
+
+function usePanelGroup() {
+  const ctx = React.useContext(PanelGroupContext)
+  if (!ctx) throw new Error("ResizablePanel/ResizableHandle must be inside ResizablePanelGroup")
+  return ctx
+}
+
+// ── PanelGroup ─────────────────────────────────────────────────────────────────
+
+export interface ResizablePanelGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction?: "horizontal" | "vertical"
+  defaultSizes?: number[]
+}
+
+export function ResizablePanelGroup({
+  className,
+  direction = "horizontal",
+  defaultSizes,
+  children,
+  ...props
+}: ResizablePanelGroupProps) {
+  // Count panel children to compute default sizes
+  const childArray = React.Children.toArray(children)
+  const panelCount = childArray.filter(
+    (c) => React.isValidElement(c) && (c.type as { displayName?: string }).displayName === "ResizablePanel"
+  ).length
+
+  const initialSizes = React.useMemo(() => {
+    if (defaultSizes && defaultSizes.length === panelCount) return defaultSizes
+    const n = Math.max(panelCount, 1)
+    return Array<number>(n).fill(100 / n)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []) // intentionally mount-only
+
+  const [sizes, setSizes] = React.useState<number[]>(initialSizes)
+
+  // Inject panel/handle indexes via cloneElement so consumers don't need explicit index props
+  let panelIdx = 0
+  let handleIdx = 0
+  const enhanced = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child
+    const displayName = (child.type as { displayName?: string }).displayName
+    if (displayName === "ResizablePanel") {
+      return React.cloneElement(child as React.ReactElement<ResizablePanelProps>, {
+        _index: panelIdx++,
+      })
+    }
+    if (displayName === "ResizableHandle") {
+      return React.cloneElement(child as React.ReactElement<ResizableHandleProps>, {
+        _index: handleIdx++,
+      })
+    }
+    return child
+  })
+
+  return (
+    <PanelGroupContext.Provider value={{ direction, sizes, setSizes }}>
+      <div
+        className={cx(
+          "flex h-full w-full overflow-hidden",
+          direction === "vertical" ? "flex-col" : "flex-row",
+          className
+        )}
+        data-panel-group-direction={direction}
+        {...props}
+      >
+        {enhanced}
+      </div>
+    </PanelGroupContext.Provider>
+  )
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup"
+
+// ── Panel ──────────────────────────────────────────────────────────────────────
+
+export interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  minSize?: number
+  /** Injected automatically by ResizablePanelGroup — do not pass manually. */
+  _index?: number
+}
+
+export function ResizablePanel({
+  className,
+  children,
+  minSize = 10,
+  _index = 0,
+  style,
+  ...props
+}: ResizablePanelProps) {
+  const { direction, sizes } = usePanelGroup()
+  const size = sizes[_index] ?? 100 / Math.max(sizes.length, 1)
+
+  const sizeStyle: React.CSSProperties =
+    direction === "horizontal"
+      ? { width: `${size}%`, minWidth: `${minSize}%`, flexShrink: 0 }
+      : { height: `${size}%`, minHeight: `${minSize}%`, flexShrink: 0 }
+
+  return (
+    <div
+      className={cx("overflow-auto min-w-0 min-h-0", className)}
+      style={{ ...sizeStyle, ...style }}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+ResizablePanel.displayName = "ResizablePanel"
+
+// ── Handle ─────────────────────────────────────────────────────────────────────
+
+export interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+  withHandle?: boolean
+  /** Injected automatically by ResizablePanelGroup — do not pass manually. */
+  _index?: number
+}
+
+export function ResizableHandle({
+  className,
+  withHandle = true,
+  _index = 0,
+  ...props
+}: ResizableHandleProps) {
+  const { direction, sizes, setSizes } = usePanelGroup()
+  const isDragging = React.useRef(false)
+  const startPos = React.useRef(0)
+  const startSizes = React.useRef<number[]>([])
+  const handleRef = React.useRef<HTMLDivElement>(null)
+
+  function clampSizes(rawSizes: number[], a: number, b: number, newA: number): number[] {
+    const total = rawSizes[a] + rawSizes[b]
+    const minA = 10
+    const minB = 10
+    let sa = newA
+    let sb = total - sa
+    if (sa < minA) { sa = minA; sb = total - minA }
+    if (sb < minB) { sb = minB; sa = total - minB }
+    const next = [...rawSizes]
+    next[a] = sa
+    next[b] = sb
+    return next
+  }
+
+  function onPointerDown(e: React.PointerEvent<HTMLDivElement>) {
+    e.preventDefault()
+    isDragging.current = true
+    startPos.current = direction === "horizontal" ? e.clientX : e.clientY
+    startSizes.current = [...sizes]
+    handleRef.current?.setPointerCapture(e.pointerId)
+  }
+
+  function onPointerMove(e: React.PointerEvent<HTMLDivElement>) {
+    if (!isDragging.current) return
+    e.preventDefault()
+    const container = handleRef.current?.parentElement
+    if (!container) return
+    const rect = container.getBoundingClientRect()
+    const totalPx = direction === "horizontal" ? rect.width : rect.height
+    if (totalPx === 0) return
+
+    const currentPos = direction === "horizontal" ? e.clientX : e.clientY
+    const deltaPct = ((currentPos - startPos.current) / totalPx) * 100
+    const a = _index
+    const b = _index + 1
+    if (b >= startSizes.current.length) return
+
+    const newA = (startSizes.current[a] ?? 0) + deltaPct
+    setSizes((prev) => clampSizes(prev, a, b, newA))
+  }
+
+  function onPointerUp(e: React.PointerEvent<HTMLDivElement>) {
+    isDragging.current = false
+    handleRef.current?.releasePointerCapture(e.pointerId)
+  }
+
+  function onKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    const step = 2
+    const isForward = direction === "horizontal" ? e.key === "ArrowRight" : e.key === "ArrowDown"
+    const isBack = direction === "horizontal" ? e.key === "ArrowLeft" : e.key === "ArrowUp"
+    if (!isForward && !isBack) return
+    e.preventDefault()
+    const delta = isForward ? step : -step
+    const a = _index
+    const b = _index + 1
+    setSizes((prev) => {
+      if (b >= prev.length) return prev
+      return clampSizes(prev, a, b, prev[a] + delta)
+    })
+  }
+
+  return (
+    <div
+      ref={handleRef}
+      role="separator"
+      aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
+      tabIndex={0}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onKeyDown={onKeyDown}
+      className={cx(
+        "relative flex shrink-0 items-center justify-center bg-border transition-colors select-none",
+        "hover:bg-border-strong active:bg-border-strong",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        direction === "horizontal"
+          ? "w-px h-full cursor-col-resize"
+          : "h-px w-full cursor-row-resize",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-5 w-3.5 items-center justify-center rounded border border-border bg-surface-2 shadow-sm pointer-events-none">
+          <svg
+            width="6"
+            height="12"
+            viewBox="0 0 6 12"
+            fill="none"
+            className={cx(
+              "text-muted-foreground",
+              direction === "vertical" && "rotate-90"
+            )}
+          >
+            <circle cx="1" cy="3" r="1" fill="currentColor" />
+            <circle cx="5" cy="3" r="1" fill="currentColor" />
+            <circle cx="1" cy="6" r="1" fill="currentColor" />
+            <circle cx="5" cy="6" r="1" fill="currentColor" />
+            <circle cx="1" cy="9" r="1" fill="currentColor" />
+            <circle cx="5" cy="9" r="1" fill="currentColor" />
+          </svg>
+        </div>
+      )}
+    </div>
+  )
+}
+ResizableHandle.displayName = "ResizableHandle"

package/src/components/core/scroll-area.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import * as RadixScrollArea from "@radix-ui/react-scroll-area"
+import { cx } from "@/lib/cx"
+
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof RadixScrollArea.Root> {
+  orientation?: "vertical" | "horizontal" | "both"
+}
+
+export const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof RadixScrollArea.Viewport>,
+  ScrollAreaProps
+>(({ className, children, orientation = "vertical", ...props }, ref) => (
+  <RadixScrollArea.Root className={cx("relative overflow-hidden", className)} {...props}>
+    <RadixScrollArea.Viewport ref={ref} className="h-full w-full rounded-[inherit]">
+      {children}
+    </RadixScrollArea.Viewport>
+    {(orientation === "vertical" || orientation === "both") && (
+      <RadixScrollArea.Scrollbar
+        orientation="vertical"
+        className="flex touch-none select-none transition-colors w-2.5 border-l border-l-transparent p-px"
+      >
+        <RadixScrollArea.Thumb className="relative flex-1 rounded-full bg-border hover:bg-border-strong transition-colors" />
+      </RadixScrollArea.Scrollbar>
+    )}
+    {(orientation === "horizontal" || orientation === "both") && (
+      <RadixScrollArea.Scrollbar
+        orientation="horizontal"
+        className="flex touch-none select-none transition-colors h-2.5 flex-col border-t border-t-transparent p-px"
+      >
+        <RadixScrollArea.Thumb className="relative flex-1 rounded-full bg-border hover:bg-border-strong transition-colors" />
+      </RadixScrollArea.Scrollbar>
+    )}
+    <RadixScrollArea.Corner />
+  </RadixScrollArea.Root>
+))
+ScrollArea.displayName = "ScrollArea"

package/src/components/core/select.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+import * as RadixSelect from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export const Select = RadixSelect.Root
+export const SelectGroup = RadixSelect.Group
+export const SelectValue = RadixSelect.Value
+
+export const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof RadixSelect.Trigger>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <RadixSelect.Trigger
+    ref={ref}
+    className={cx(
+      "flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm outline-none",
+      "placeholder:text-muted-foreground",
+      "hover:border-border-strong transition-colors",
+      "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      "data-[placeholder]:text-muted-foreground",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <RadixSelect.Icon asChild>
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+    </RadixSelect.Icon>
+  </RadixSelect.Trigger>
+))
+SelectTrigger.displayName = "SelectTrigger"
+
+export const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof RadixSelect.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <RadixSelect.ScrollUpButton ref={ref} className={cx("flex cursor-default items-center justify-center py-1", className)} {...props}>
+    <ChevronUp className="h-4 w-4" />
+  </RadixSelect.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = "SelectScrollUpButton"
+
+export const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof RadixSelect.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <RadixSelect.ScrollDownButton ref={ref} className={cx("flex cursor-default items-center justify-center py-1", className)} {...props}>
+    <ChevronDown className="h-4 w-4" />
+  </RadixSelect.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = "SelectScrollDownButton"
+
+export const SelectContent = React.forwardRef<
+  React.ElementRef<typeof RadixSelect.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <RadixSelect.Portal>
+    <RadixSelect.Content
+      ref={ref}
+      position={position}
+      className={cx(
+        "relative z-50 max-h-60 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card shadow-lg",
+        "animate-in fade-in-0 zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <RadixSelect.Viewport
+        className={cx(
+          "p-1.5",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </RadixSelect.Viewport>
+      <SelectScrollDownButton />
+    </RadixSelect.Content>
+  </RadixSelect.Portal>
+))
+SelectContent.displayName = "SelectContent"
+
+export const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof RadixSelect.Label>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Label>
+>(({ className, ...props }, ref) => (
+  <RadixSelect.Label ref={ref} className={cx("px-2.5 py-1.5 text-xs font-medium text-muted-foreground", className)} {...props} />
+))
+SelectLabel.displayName = "SelectLabel"
+
+export const SelectItem = React.forwardRef<
+  React.ElementRef<typeof RadixSelect.Item>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Item>
+>(({ className, children, ...props }, ref) => (
+  <RadixSelect.Item
+    ref={ref}
+    className={cx(
+      "relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2.5 text-sm outline-none",
+      "focus:bg-surface-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <RadixSelect.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </RadixSelect.ItemIndicator>
+    </span>
+    <RadixSelect.ItemText>{children}</RadixSelect.ItemText>
+  </RadixSelect.Item>
+))
+SelectItem.displayName = "SelectItem"
+
+export const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof RadixSelect.Separator>,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Separator>
+>(({ className, ...props }, ref) => (
+  <RadixSelect.Separator ref={ref} className={cx("-mx-1.5 my-1.5 h-px bg-border", className)} {...props} />
+))
+SelectSeparator.displayName = "SelectSeparator"

package/src/components/core/separator.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cx } from "@/lib/cx"
+
+export interface SeparatorProps
+  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+  label?: string
+}
+
+function Separator({ className, orientation = "horizontal", decorative = true, label, ...props }: SeparatorProps) {
+  if (label && orientation === "horizontal") {
+    return (
+      <div className="flex items-center gap-3">
+        <SeparatorPrimitive.Root
+          decorative={decorative}
+          orientation={orientation}
+          className={cx("flex-1 shrink-0 bg-border", "h-px", className)}
+          {...props}
+        />
+        <span className="text-xs text-muted-foreground whitespace-nowrap select-none">{label}</span>
+        <SeparatorPrimitive.Root
+          decorative={decorative}
+          orientation={orientation}
+          className={cx("flex-1 shrink-0 bg-border", "h-px", className)}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <SeparatorPrimitive.Root
+      decorative={decorative}
+      orientation={orientation}
+      className={cx(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }