@reifydb/ui 0.4.7

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/badge/badge.tsx","../src/components/button/button.tsx","../src/components/card/card.tsx","../src/components/chip/chip.tsx","../src/components/chip-group/chip-group.tsx","../src/components/code-block/code-block.tsx","../src/components/copy-button/copy-button.tsx","../src/components/dialog/dialog.tsx","../src/components/empty-state/empty-state.tsx","../src/components/input/input.tsx","../src/components/kbd/kbd.tsx","../src/components/loading/loading.tsx","../src/components/modal/modal.tsx","../src/components/nav-tabs/nav-tabs.tsx","../src/components/section-header/section-header.tsx","../src/components/select/select.tsx","../src/components/separator/separator.tsx","../src/components/skeleton/skeleton.tsx","../src/components/sparkline/sparkline.tsx","../src/components/spinner/spinner.tsx","../src/components/status-bar/status-bar.tsx","../src/components/table/table.tsx","../src/components/tabs/tabs.tsx","../src/components/toggle/toggle.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport type { ReactNode } from \"react\";\n\ntype BadgeVariant = \"active\" | \"inactive\" | \"coming-soon\" | \"default\" | \"signal\" | \"success\" | \"danger\" | \"warning\" | \"error\" | \"outline\";\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  active: \"font-bold text-primary\",\n  inactive: \"text-text-secondary\",\n  \"coming-soon\": \"text-text-secondary\",\n  default: \"text-text-primary\",\n  signal: \"font-bold text-primary\",\n  success: \"text-[11px] font-medium rounded-full border px-2.5 py-0.5 bg-status-success/15 text-status-success border-status-success/30\",\n  danger: \"text-[11px] font-medium rounded-full border px-2.5 py-0.5 bg-status-error/15 text-status-error border-status-error/30\",\n  warning: \"text-[11px] font-medium rounded-full border px-2.5 py-0.5 bg-status-warning/15 text-status-warning border-status-warning/30\",\n  error: \"text-[11px] font-medium rounded-full border px-2.5 py-0.5 bg-status-error/15 text-status-error border-status-error/30\",\n  outline: \"text-text-muted\",\n};\n\nexport interface BadgeProps {\n  variant?: BadgeVariant;\n  children: ReactNode;\n  className?: string;\n  onClick?: () => void;\n}\n\nexport function Badge({ variant = \"default\", children, className = \"\", onClick }: BadgeProps) {\n  return (\n    <span\n      className={`inline-flex items-center ${variantStyles[variant]} ${className}`}\n      onClick={onClick}\n    >\n      {children}\n    </span>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"destructive\" | \"link\";\ntype ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\";\n\nconst variantStyles: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-primary text-[var(--accent-text,#1a1a1a)] font-semibold border-primary hover:brightness-110 hover:shadow-[0_0_16px_rgba(255,255,255,0.1)]\",\n  secondary:\n    \"bg-transparent text-text-secondary border-border-default font-medium hover:border-primary hover:text-primary\",\n  ghost:\n    \"text-text-secondary border-transparent hover:bg-white/[0.04] hover:text-text-primary\",\n  danger:\n    \"bg-status-error/10 text-status-error border-status-error/30 hover:bg-status-error/20\",\n  destructive:\n    \"bg-status-error text-white font-semibold border-status-error hover:bg-status-error/90\",\n  link:\n    \"text-primary border-transparent underline-offset-4 hover:underline\",\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n  sm: \"h-8 px-3 text-xs gap-1.5\",\n  md: \"h-9 px-4 text-sm gap-2\",\n  lg: \"h-11 px-6 text-sm gap-2\",\n  icon: \"h-9 w-9 p-0\",\n};\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ variant = \"primary\", size = \"md\", className = \"\", children, disabled, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={`inline-flex items-center justify-center font-medium transition-all duration-200\n          rounded-lg border\n          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary\n          disabled:pointer-events-none disabled:opacity-50\n          ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport type { ReactNode } from \"react\";\n\nexport interface CardProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Card({ children, className = \"\" }: CardProps) {\n  return (\n    <div className={`glass-card p-6 ${className}`}>\n      {children}\n    </div>\n  );\n}\n\nexport function CardHeader({ children, className = \"\" }: CardProps) {\n  return <div className={`mb-4 ${className}`}>{children}</div>;\n}\n\nexport function CardTitle({ children, className = \"\" }: { children: ReactNode; className?: string }) {\n  return <h3 className={`text-sm font-medium text-text-primary ${className}`}>{children}</h3>;\n}\n\nexport function CardDescription({ children, className = \"\" }: { children: ReactNode; className?: string }) {\n  return <p className={`mt-1 text-xs text-text-muted ${className}`}>{children}</p>;\n}\n\nexport function CardContent({ children, className = \"\" }: { children: ReactNode; className?: string }) {\n  return <div className={className}>{children}</div>;\n}\n\nexport function CardFooter({ children, className = \"\" }: { children: ReactNode; className?: string }) {\n  return <div className={`pt-4 mt-4 border-t border-white/[0.06] ${className}`}>{children}</div>;\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport type { ReactNode } from \"react\";\n\nexport interface ChipProps {\n  active: boolean;\n  onClick: () => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Chip({ active, onClick, children, className = \"\" }: ChipProps) {\n  return (\n    <button\n      onClick={onClick}\n      className={`text-xs font-medium px-3 py-1 rounded-lg border cursor-pointer whitespace-nowrap transition-all ${\n        active\n          ? \"text-primary border-primary/30 bg-primary/10\"\n          : \"text-text-secondary bg-white/[0.04] border-white/[0.08] hover:text-text-primary hover:border-white/[0.12]\"\n      } ${className}`}\n    >\n      {children}\n    </button>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport { Chip } from \"../chip/chip.js\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n}\n\ninterface ChipGroupBaseProps {\n  options: ChipGroupOption[];\n  className?: string;\n}\n\ninterface ChipGroupSingleProps extends ChipGroupBaseProps {\n  multiple?: false;\n  value: string;\n  onChange: (value: string) => void;\n}\n\ninterface ChipGroupMultipleProps extends ChipGroupBaseProps {\n  multiple: true;\n  value: string[];\n  onChange: (value: string[]) => void;\n}\n\nexport type ChipGroupProps = ChipGroupSingleProps | ChipGroupMultipleProps;\n\nexport function ChipGroup(props: ChipGroupProps) {\n  const { options, className = \"\" } = props;\n\n  return (\n    <div className={`flex items-center gap-2 ${className}`}>\n      {options.map((option) => {\n        const isActive = props.multiple\n          ? props.value.includes(option.value)\n          : props.value === option.value;\n\n        const handleClick = () => {\n          if (props.multiple) {\n            const next = props.value.includes(option.value)\n              ? props.value.filter((v) => v !== option.value)\n              : [...props.value, option.value];\n            props.onChange(next);\n          } else {\n            props.onChange(option.value);\n          }\n        };\n\n        return (\n          <Chip key={option.value} active={isActive} onClick={handleClick}>\n            {option.label}\n          </Chip>\n        );\n      })}\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport { useMemo } from \"react\";\nimport Prism from \"prismjs\";\nimport \"prismjs/components/prism-json\";\nimport \"prismjs/components/prism-bash\";\nimport \"prismjs/components/prism-python\";\nimport \"prismjs/components/prism-javascript\";\nimport \"prismjs/components/prism-typescript\";\nimport \"prismjs/components/prism-rust\";\nimport { CopyButton } from \"../copy-button/copy-button.js\";\n\nexport interface CodeBlockProps {\n  code: string;\n  language?: string;\n  showCopy?: boolean;\n  className?: string;\n}\n\nexport function CodeBlock({ code, language = \"bash\", showCopy = true, className = \"\" }: CodeBlockProps) {\n  const highlightedHtml = useMemo(() => {\n    if (code.length >= 50_000 || !Prism.languages[language]) return null;\n    return Prism.highlight(code, Prism.languages[language], language);\n  }, [code, language]);\n\n  return (\n    <div className={`group relative bg-code-bg ${className}`}>\n      {showCopy && (\n        <div className=\"absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100\">\n          <CopyButton text={code} />\n        </div>\n      )}\n      <pre className={`language-${language} !bg-code-bg !m-0`}>\n        {highlightedHtml != null ? (\n          <code className={`language-${language}`} dangerouslySetInnerHTML={{ __html: highlightedHtml }} />\n        ) : (\n          <code className={`language-${language}`}>{code}</code>\n        )}\n      </pre>\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport { useState, useCallback } from \"react\";\n\nexport interface CopyButtonProps {\n  text: string;\n  className?: string;\n  label?: string;\n  onCopy?: () => void;\n}\n\nexport function CopyButton({ text, className = \"\", label, onCopy }: CopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = useCallback(async () => {\n    await navigator.clipboard.writeText(text);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n    onCopy?.();\n  }, [text, onCopy]);\n\n  return (\n    <button\n      onClick={handleCopy}\n      className={`inline-flex items-center gap-1.5 px-2 py-1 text-xs text-text-muted\n        rounded-sm border border-white/[0.08] transition-colors duration-75 hover:bg-white/[0.06] hover:text-text-primary ${className}`}\n    >\n      {copied ? (\n        <>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <path d=\"M3 8.5l3 3 7-7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n          {label ? \"Copied!\" : null}\n        </>\n      ) : (\n        <>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <rect x=\"5\" y=\"5\" width=\"8\" height=\"8\" rx=\"1.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n            <path d=\"M3 11V3.5A.5.5 0 013.5 3H11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n          </svg>\n          {label ?? null}\n        </>\n      )}\n    </button>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport { useEffect, forwardRef, type ReactNode, type ButtonHTMLAttributes } from \"react\";\n\nexport interface DialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: ReactNode;\n}\n\nexport function Dialog({ open, onOpenChange, children }: DialogProps) {\n  useEffect(() => {\n    if (open) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"unset\";\n    }\n    return () => {\n      document.body.style.overflow = \"unset\";\n    };\n  }, [open]);\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onOpenChange(false);\n    };\n    if (open) {\n      document.addEventListener(\"keydown\", handleEscape);\n    }\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [open, onOpenChange]);\n\n  if (!open) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      <div className=\"fixed inset-0 bg-black/60\" onClick={() => onOpenChange(false)} />\n      <div className=\"relative z-50\">{children}</div>\n    </div>\n  );\n}\n\nexport interface DialogContentProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  ({ className = \"\", children }, ref) => (\n    <div\n      ref={ref}\n      className={`relative w-full max-w-lg mx-4 bg-white/[0.04] backdrop-blur-2xl border border-white/[0.10] rounded-[var(--radius-lg)] shadow-xl ${className}`}\n      onClick={(e) => e.stopPropagation()}\n    >\n      {children}\n    </div>\n  ),\n);\nDialogContent.displayName = \"DialogContent\";\n\nexport function DialogHeader({ children, className = \"\" }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={`flex flex-col gap-1.5 p-6 border-b border-white/[0.06] ${className}`}>\n      {children}\n    </div>\n  );\n}\n\nexport const DialogTitle = forwardRef<HTMLHeadingElement, { children: ReactNode; className?: string }>(\n  ({ children, className = \"\" }, ref) => (\n    <h2 ref={ref} className={`text-base font-semibold text-text-primary ${className}`}>\n      {children}\n    </h2>\n  ),\n);\nDialogTitle.displayName = \"DialogTitle\";\n\nexport const DialogDescription = forwardRef<HTMLParagraphElement, { children: ReactNode; className?: string }>(\n  ({ children, className = \"\" }, ref) => (\n    <p ref={ref} className={`text-sm text-text-muted ${className}`}>\n      {children}\n    </p>\n  ),\n);\nDialogDescription.displayName = \"DialogDescription\";\n\nexport const DialogClose = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(\n  ({ className = \"\", ...props }, ref) => (\n    <button\n      ref={ref}\n      className={`absolute right-4 top-4 h-6 w-6 flex items-center justify-center text-text-muted hover:text-text-primary transition-colors ${className}`}\n      aria-label=\"Close\"\n      {...props}\n    >\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n        <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n      </svg>\n    </button>\n  ),\n);\nDialogClose.displayName = \"DialogClose\";\n\nexport function DialogFooter({ children, className = \"\" }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={`flex justify-end gap-3 p-6 border-t border-white/[0.06] ${className}`}>\n      {children}\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport type { ReactNode } from \"react\";\n\nexport interface EmptyStateProps {\n  icon?: ReactNode;\n  title: string;\n  description?: string;\n  action?: ReactNode;\n}\n\nexport function EmptyState({ icon, title, description, action }: EmptyStateProps) {\n  return (\n    <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n      {icon && <div className=\"mb-4 text-text-muted\">{icon}</div>}\n      <h3 className=\"text-sm font-medium text-text-primary\">{title}</h3>\n      {description && <p className=\"mt-1 text-sm text-text-muted\">{description}</p>}\n      {action && <div className=\"mt-4\">{action}</div>}\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport { type InputHTMLAttributes, forwardRef } from \"react\";\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  error?: string;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ label, error, className = \"\", id, ...props }, ref) => {\n    const inputId = id || label?.toLowerCase().replace(/\\s+/g, \"-\");\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <label htmlFor={inputId} className=\"text-sm font-medium text-text-secondary\">\n            {label}\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          className={`h-9 rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 text-sm text-text-primary\n            placeholder:text-text-muted\n            focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${error ? \"border-status-error\" : \"\"} ${className}`}\n          {...props}\n        />\n        {error && <p className=\"text-xs text-status-error\">{error}</p>}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport type { ReactNode } from \"react\";\n\nexport interface KbdProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Kbd({ children, className = \"\" }: KbdProps) {\n  return (\n    <kbd\n      className={`inline-flex h-5 min-w-5 items-center justify-center rounded border border-white/[0.08]\n        bg-white/[0.06] px-1.5 font-mono text-[10px] font-medium text-text-muted ${className}`}\n    >\n      {children}\n    </kbd>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nexport interface LoadingProps {\n  text?: string;\n  className?: string;\n}\n\nexport function Loading({ text = \"Loading\", className = \"\" }: LoadingProps) {\n  return (\n    <div className={`flex items-center gap-1 text-text-muted text-sm font-mono ${className}`}>\n      <span>{text}</span>\n      <span className=\"flex gap-0.5\">\n        <span className=\"animate-pulse\" style={{ animationDelay: \"0ms\" }}>.</span>\n        <span className=\"animate-pulse\" style={{ animationDelay: \"200ms\" }}>.</span>\n        <span className=\"animate-pulse\" style={{ animationDelay: \"400ms\" }}>.</span>\n      </span>\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport { useEffect, useCallback, type ReactNode } from \"react\";\n\nexport interface ModalProps {\n  open: boolean;\n  onClose: () => void;\n  title: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Modal({ open, onClose, title, children, className = \"\" }: ModalProps) {\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n    },\n    [onClose],\n  );\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = \"hidden\";\n    }\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = \"\";\n    };\n  }, [open, handleKeyDown]);\n\n  if (!open) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      <div className=\"absolute inset-0 bg-black/60\" onClick={onClose} />\n      <div\n        className={`relative w-full max-w-md rounded-[var(--radius-lg)] border border-white/[0.10] bg-white/[0.04] backdrop-blur-2xl p-6 shadow-xl ${className}`}\n      >\n        <div className=\"mb-4 flex items-center justify-between\">\n          <h2 className=\"text-base font-semibold text-text-primary\">{title}</h2>\n          <button\n            onClick={onClose}\n            className=\"p-1 text-text-muted transition-colors rounded-sm hover:bg-white/[0.06]\"\n            aria-label=\"Close\"\n          >\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n            </svg>\n          </button>\n        </div>\n        {children}\n      </div>\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport type { ReactNode } from \"react\";\n\nexport interface NavTabItem {\n  label: string;\n  href: string;\n  isActive?: boolean;\n}\n\nexport interface NavTabsProps {\n  items: NavTabItem[];\n  variant?: \"underline\" | \"pill\";\n  className?: string;\n  renderLink?: (props: { href: string; className: string; children: ReactNode }) => ReactNode;\n}\n\nconst variantStyles = {\n  underline: {\n    container: \"flex border-b border-white/[0.06] bg-white/[0.04]\",\n    item: \"px-5 py-2.5 font-mono text-xs uppercase tracking-wider transition-colors border-b-2\",\n    active: \"border-primary font-bold text-text-primary\",\n    inactive: \"border-transparent text-text-muted hover:text-text-primary\",\n  },\n  pill: {\n    container: \"flex items-center gap-1\",\n    item: \"px-3 py-2 text-sm font-medium transition-colors rounded-lg\",\n    active: \"bg-white/[0.06] text-text-primary\",\n    inactive: \"text-text-muted hover:bg-white/[0.04] hover:text-text-primary\",\n  },\n};\n\nexport function NavTabs({ items, variant = \"underline\", className = \"\", renderLink }: NavTabsProps) {\n  const styles = variantStyles[variant];\n\n  return (\n    <nav className={`${styles.container} ${className}`}>\n      {items.map((item) => {\n        const itemClassName = `${styles.item} ${item.isActive ? styles.active : styles.inactive}`;\n\n        if (renderLink) {\n          return (\n            <span key={item.href}>\n              {renderLink({ href: item.href, className: itemClassName, children: item.label })}\n            </span>\n          );\n        }\n\n        return (\n          <a key={item.href} href={item.href} className={itemClassName}>\n            {item.label}\n          </a>\n        );\n      })}\n    </nav>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport type { ReactNode } from \"react\";\n\nexport interface SectionHeaderProps {\n  title: string;\n  badge?: ReactNode;\n  className?: string;\n}\n\nexport function SectionHeader({ title, badge, className = \"\" }: SectionHeaderProps) {\n  return (\n    <div className={`flex items-center justify-between bg-white/[0.06] px-3 py-2.5 rounded-t-xl ${className}`}>\n      <span className=\"text-xs font-semibold text-text-secondary\">{title}</span>\n      {badge}\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport { type SelectHTMLAttributes, forwardRef } from \"react\";\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\nexport interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {\n  label?: string;\n  options: SelectOption[];\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  ({ label, options, className = \"\", id, ...props }, ref) => {\n    const selectId = id || label?.toLowerCase().replace(/\\s+/g, \"-\");\n    return (\n      <div className=\"flex flex-col gap-1.5\">\n        {label && (\n          <label htmlFor={selectId} className=\"text-sm font-medium text-text-secondary\">\n            {label}\n          </label>\n        )}\n        <select\n          ref={ref}\n          id={selectId}\n          className={`h-9 rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 text-sm text-text-primary\n            focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${className}`}\n          {...props}\n        >\n          {options.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </select>\n      </div>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nexport interface SeparatorProps {\n  className?: string;\n}\n\nexport function Separator({ className = \"\" }: SeparatorProps) {\n  return <div className={`mx-1 h-5 w-px shrink-0 bg-white/[0.12] ${className}`} />;\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nexport interface SkeletonProps {\n  className?: string;\n}\n\nexport function Skeleton({ className = \"\" }: SkeletonProps) {\n  return (\n    <div\n      className={`rounded-lg bg-white/[0.06] animate-pulse ${className}`}\n    />\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nexport interface SparklineProps {\n  trend: number[];\n  className?: string;\n}\n\nexport function Sparkline({ trend, className = \"\" }: SparklineProps) {\n  const max = Math.max(...trend);\n  return (\n    <div className={`flex items-end gap-px h-4 ${className}`}>\n      {trend.map((v, i) => {\n        const h = Math.max(2, Math.round((v / max) * 14));\n        const col = v >= 10 ? \"bg-status-error\" : v >= 7 ? \"bg-status-warning\" : \"bg-text-muted\";\n        return <div key={i} className={`w-[3px] rounded-full ${col}`} style={{ height: `${h}px` }} />;\n      })}\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nexport interface SpinnerProps {\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\nconst sizeMap = { sm: \"h-4 w-4\", md: \"h-5 w-5\", lg: \"h-6 w-6\" };\n\nexport function Spinner({ size = \"md\", className = \"\" }: SpinnerProps) {\n  return (\n    <svg\n      className={`animate-spin text-text-muted ${sizeMap[size]} ${className}`}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      role=\"status\"\n      aria-label=\"Loading\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.2\" />\n      <path\n        d=\"M12 2a10 10 0 019.95 9\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport type { ReactNode } from \"react\";\n\ntype StatusDot = \"success\" | \"warning\" | \"danger\" | \"idle\";\n\nexport interface StatusBarItem {\n  dot?: StatusDot;\n  label: string;\n}\n\nexport interface StatusBarProps {\n  items: StatusBarItem[];\n  trailing?: ReactNode;\n  className?: string;\n}\n\nconst dotColors: Record<StatusDot, string> = {\n  success: \"bg-status-success\",\n  warning: \"bg-status-warning\",\n  danger: \"bg-status-error\",\n  idle: \"bg-text-muted\",\n};\n\nexport function StatusBar({ items, trailing, className = \"\" }: StatusBarProps) {\n  return (\n    <div className={`flex h-7 shrink-0 items-center gap-4 border-t border-white/[0.06] bg-white/[0.04] px-4 ${className}`}>\n      {items.map((item, i) => (\n        <div key={i} className=\"flex items-center gap-1.5 text-xs text-text-muted\">\n          {item.dot && (\n            <span className={`inline-block h-1.5 w-1.5 rounded-full ${dotColors[item.dot]}`} />\n          )}\n          {item.label}\n        </div>\n      ))}\n      {trailing && <div className=\"ml-auto text-xs text-text-muted\">{trailing}</div>}\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nimport type { ReactNode } from \"react\";\n\nexport interface TableProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Table({ children, className = \"\" }: TableProps) {\n  return (\n    <div className=\"w-full overflow-x-auto rounded-xl\">\n      <table className={`w-full text-sm ${className}`}>{children}</table>\n    </div>\n  );\n}\n\nexport function TableHead({ children }: { children: ReactNode }) {\n  return (\n    <thead className=\"border-b border-white/[0.06]\">\n      <tr>{children}</tr>\n    </thead>\n  );\n}\n\nexport interface TableHeaderProps {\n  children?: ReactNode;\n  className?: string;\n  onClick?: () => void;\n}\n\nexport function TableHeader({ children, className = \"\", onClick }: TableHeaderProps) {\n  return (\n    <th\n      className={`px-4 py-3 text-left text-xs font-medium text-text-muted ${onClick ? \"cursor-pointer select-none hover:text-text-primary\" : \"\"} ${className}`}\n      onClick={onClick}\n    >\n      {children}\n    </th>\n  );\n}\n\nexport function TableBody({ children }: { children: ReactNode }) {\n  return <tbody className=\"divide-y divide-white/[0.06]\">{children}</tbody>;\n}\n\nexport interface TableRowProps {\n  children: ReactNode;\n  className?: string;\n  onClick?: () => void;\n}\n\nexport function TableRow({ children, className = \"\", onClick }: TableRowProps) {\n  return (\n    <tr className={`hover:bg-white/[0.04] transition-colors ${onClick ? \"cursor-pointer\" : \"\"} ${className}`} onClick={onClick}>\n      {children}\n    </tr>\n  );\n}\n\nexport function TableCell({ children, className = \"\" }: { children: ReactNode; className?: string }) {\n  return <td className={`px-4 py-3.5 text-text-secondary ${className}`}>{children}</td>;\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nexport interface Tab {\n  value: string;\n  label: string;\n}\n\nexport interface TabsProps {\n  tabs: Tab[];\n  value: string;\n  onChange: (value: string) => void;\n  className?: string;\n}\n\nexport function Tabs({ tabs, value, onChange, className = \"\" }: TabsProps) {\n  return (\n    <div className={`flex gap-1 rounded-[var(--radius-lg)] border border-white/[0.08] bg-white/[0.04] p-1 ${className}`}>\n      {tabs.map((tab) => (\n        <button\n          key={tab.value}\n          onClick={() => onChange(tab.value)}\n          className={`px-3 py-1.5 text-sm font-medium transition-all rounded-md\n            ${\n              value === tab.value\n                ? \"bg-white/[0.08] text-text-primary\"\n                : \"text-text-muted hover:bg-white/[0.04] hover:text-text-primary\"\n            }`}\n        >\n          {tab.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n","// SPDX-License-Identifier: Apache-2.0\n// Copyright (c) 2025 ReifyDB\n\nexport interface ToggleProps {\n  options: [string, string];\n  value: string;\n  onChange: (value: string) => void;\n  className?: string;\n}\n\nexport function Toggle({ options, value, onChange, className = \"\" }: ToggleProps) {\n  const [left, right] = options;\n\n  return (\n    <div className={`inline-flex items-center gap-2 text-sm ${className}`}>\n      <span\n        className={`cursor-pointer transition-colors ${value === left ? \"text-text-primary\" : \"text-text-muted\"}`}\n        onClick={() => onChange(left)}\n      >\n        {left}\n      </span>\n      <button\n        onClick={() => onChange(value === left ? right : left)}\n        className={`relative w-10 h-5 rounded-none transition-colors border-2 border-white/[0.08] ${\n          value === right ? \"bg-primary\" : \"bg-white/[0.04]\"\n        }`}\n      >\n        <span\n          className={`absolute top-0.5 w-4 h-4 rounded-none transition-transform bg-text-primary ${\n            value === right ? \"translate-x-5\" : \"translate-x-0.5\"\n          }`}\n        />\n      </button>\n      <span\n        className={`cursor-pointer transition-colors ${value === right ? \"text-text-primary\" : \"text-text-muted\"}`}\n        onClick={() => onChange(right)}\n      >\n        {right}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","variantStyles","jsx","jsx","jsx","jsx","jsx","jsxs","forwardRef","jsx","jsxs","jsx","jsxs","forwardRef","jsx","jsxs","jsx","jsx","jsxs","useEffect","useCallback","jsx","jsxs","jsx","variantStyles","jsx","jsxs","forwardRef","jsx","jsxs","jsx","jsx","jsx","jsx","jsxs","jsx","jsxs","jsx","jsx","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@reifydb/ui",
+  "version": "0.4.7",
+  "description": "Shared UI component library for ReifyDB",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./src/styles/index.css"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/styles",
+    "src/fonts"
+  ],
+  "dependencies": {
+    "prismjs": "^1.30.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@tailwindcss/vite": "^4.2.1",
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.0",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.3.3",
+    "tailwindcss": "^4.2.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.0",
+    "vitest": "^2.1.8"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "keywords": [
+    "reifydb",
+    "ui",
+    "components",
+    "react",
+    "typescript",
+    "tailwind"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reifydb/reifydb.git",
+    "directory": "pkg/typescript/ui"
+  },
+  "homepage": "https://github.com/reifydb/reifydb#readme",
+  "bugs": {
+    "url": "https://github.com/reifydb/reifydb/issues"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "publish:npm": "pnpm publish --access public --no-git-checks"
+  }
+}

package/src/styles/base.css

@@ -0,0 +1,180 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* Copyright (c) 2025 ReifyDB */
+
+@layer base {
+  html {
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    color-scheme: dark;
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  *:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+  ::selection {
+    background: var(--color-primary);
+    color: var(--color-bg-primary);
+  }
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-text-muted);
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-display);
+  }
+}
+
+/* ── Section divider ─────────────────────────────────────── */
+.section-divider {
+  height: 1px;
+  background: var(--color-border-light);
+}
+
+/* ── Card ─────────────────────────────────────────────────── */
+.card-modern {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.card-modern:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
+  box-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 8%, transparent);
+}
+
+/* ── Glass / glow utilities ──────────────────────────────── */
+.glass-card {
+  background: rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-lg);
+  transition: all 0.3s ease;
+}
+.glass-card:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow: var(--shadow-glow-sm);
+}
+
+.glass-card-strong {
+  background: rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  border-radius: var(--radius-lg);
+  transition: all 0.3s ease;
+}
+.glass-card-strong:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.15);
+  box-shadow: var(--shadow-glow-primary);
+}
+
+.glass {
+  background: rgba(26, 26, 26, 0.80);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.glow-primary {
+  box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 15%, transparent);
+}
+
+/* ── Card nested inner ───────────────────────────────────── */
+.card-nested-inner {
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-light);
+  border-radius: 8px;
+}
+
+/* ── Brutalist tab underline ─────────────────────────────── */
+.tab-brutalist {
+  position: relative;
+  padding-bottom: 8px;
+  transition: color 0.15s ease;
+}
+.tab-brutalist::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--color-primary);
+  transition: width 0.15s ease;
+}
+.tab-brutalist-active::after {
+  width: 100%;
+}
+
+/* ── Status indicators ───────────────────────────────────── */
+@keyframes status-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.status-dot-connected {
+  background: var(--color-status-success);
+  animation: status-pulse 1.5s ease-in-out infinite;
+}
+.status-dot-loading {
+  background: var(--color-status-warning);
+  animation: status-pulse 0.6s ease-in-out infinite;
+}
+.status-dot-error {
+  background: var(--color-status-error);
+}
+.status-dot-idle {
+  background: var(--color-text-muted);
+}
+
+/* ── Animations ──────────────────────────────────────────── */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes glow-pulse {
+  0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); }
+  50% { box-shadow: 0 0 40px rgba(129, 140, 248, 0.5); }
+}
+
+@keyframes slide-up-fade {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s ease-out forwards;
+}
+
+.animate-glow-pulse {
+  animation: glow-pulse 3s ease-in-out infinite;
+}
+
+.animate-slide-up {
+  animation: slide-up-fade 0.6s ease-out forwards;
+}
+
+/* ── Scrollbar ───────────────────────────────────────────── */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--color-bg-primary); }
+::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }
+
+/* ── Reduced motion ──────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/src/styles/fonts.css

@@ -0,0 +1,68 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* Copyright (c) 2025 ReifyDB */
+
+/* Inter - Body & Display */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/inter/inter-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/inter/inter-medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/inter/inter-semi-bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/inter/inter-bold.woff2') format('woff2');
+}
+
+/* IBM Plex Mono - Code */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-semi-bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-bold.woff2') format('woff2');
+}

package/src/styles/index.css

@@ -0,0 +1,7 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* Copyright (c) 2025 ReifyDB */
+
+@import "tailwindcss";
+@import "./fonts.css";
+@import "./theme.css";
+@import "./base.css";

package/src/styles/theme.css

@@ -0,0 +1,73 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* Copyright (c) 2025 ReifyDB */
+
+@theme {
+  /* Background Colors - Dark charcoal palette */
+  --color-bg-primary: #1a1a1a;
+  --color-bg-secondary: #222222;
+  --color-bg-tertiary: #2a2a2a;
+  --color-bg-elevated: #333333;
+
+  /* Text Colors - Light on dark */
+  --color-text-primary: #F0F0F0;
+  --color-text-secondary: #A0A0A0;
+  --color-text-muted: #666666;
+
+  /* Primary Colors - Indigo */
+  --color-primary: #818cf8;
+  --color-primary-light: #a5b4fc;
+  --color-primary-dark: #6366f1;
+
+  /* Accent Colors */
+  --color-accent-cyan: #22d3ee;
+  --color-accent-lime: #c4f042;
+
+  /* Border Colors - White-based for dark theme */
+  --color-border-default: rgba(255, 255, 255, 0.12);
+  --color-border-light: rgba(255, 255, 255, 0.08);
+  --color-border-subtle: rgba(255, 255, 255, 0.05);
+
+  /* Code block colors */
+  --color-code-bg: #111111;
+  --color-code-bg-elevated: #1e1e1e;
+  --color-code-border: rgba(255, 255, 255, 0.10);
+  --color-code-text: #E5E5E5;
+  --color-code-text-muted: #737373;
+
+  /* Status colors */
+  --color-status-success: #22C55E;
+  --color-status-warning: #F59E0B;
+  --color-status-error: #DC2626;
+  --color-status-info: #818cf8;
+
+  /* Glow Shadows */
+  --shadow-glow-primary: 0 0 20px rgba(129, 140, 248, 0.15);
+  --shadow-glow-accent: 0 0 20px rgba(196, 240, 66, 0.10);
+  --shadow-glow-sm: 0 0 10px rgba(129, 140, 248, 0.10);
+
+  /* Soft Shadows */
+  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.5);
+
+  /* Rounded Corners */
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+
+  /* Fonts */
+  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SF Mono', Monaco, Inconsolata, monospace;
+
+  /* Semantic grayscale */
+  --color-gray-50: #1a1a1a;
+  --color-gray-100: #222222;
+  --color-gray-200: #333333;
+  --color-gray-400: #666666;
+  --color-gray-500: #888888;
+  --color-gray-600: #aaaaaa;
+  --color-gray-800: #e0e0e0;
+  --color-gray-900: #f0f0f0;
+}