@xenide-io/the-old-ui-theme 0.2.9 → 0.3.1

package/src/components/ui/Popover.tsx

@@ -0,0 +1,73 @@
+import { useState, useRef, useEffect, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+  trigger: ReactNode;
+  children: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: "top" | "bottom" | "left" | "right";
+  matchTriggerWidth?: boolean;
+  padded?: boolean;
+}
+
+export function Popover({
+  trigger,
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  placement = "bottom",
+  matchTriggerWidth = false,
+  padded = true,
+  className,
+  ...props
+}: PopoverProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClick = (e: MouseEvent) => {
+      if (
+        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&
+        panelRef.current && !panelRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isOpen, setOpen]);
+
+  return (
+    <div className={cn("ph-popover relative inline-flex", className)} {...props}>
+      <div
+        ref={triggerRef}
+        onClick={() => setOpen(!isOpen)}
+        className="ph-popover__trigger"
+      >
+        {trigger}
+      </div>
+      {isOpen && (
+        <div
+          ref={panelRef}
+          className={cn(
+            "ph-popover__panel",
+            `ph-popover--${placement}`,
+            padded && "ph-popover__panel--padded",
+            matchTriggerWidth && "ph-popover__panel--match"
+          )}
+          style={matchTriggerWidth ? { width: triggerRef.current?.offsetWidth } : undefined}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+Popover.displayName = "Popover";

package/src/components/ui/ProgressCircle.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode, HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ProgressCircleProps extends HTMLAttributes<HTMLSpanElement> {
+  progress: number;
+  size?: number;
+  strokeWidth?: number;
+  children?: ReactNode;
+}
+
+export function ProgressCircle({
+  progress,
+  size = 40,
+  strokeWidth: sw,
+  children,
+  className,
+  ...props
+}: ProgressCircleProps) {
+  const stroke = sw ?? size * 0.08;
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (Math.min(1, Math.max(0, progress)) * circumference);
+
+  return (
+    <span
+      className={cn("ph-progress-circle", className)}
+      style={{ width: size, height: size }}
+      role="progressbar"
+      aria-valuenow={Math.round(progress * 100)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      {...props}
+    >
+      <svg width={size} height={size}>
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={stroke}
+          opacity={0.15}
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={stroke}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+          className="ph-progress-circle__bar"
+        />
+      </svg>
+      {children && <span className="ph-progress-circle__content">{children}</span>}
+    </span>
+  );
+}
+
+ProgressCircle.displayName = "ProgressCircle";

package/src/components/ui/Resizable.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState, useRef, useCallback, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ResizableProps extends HTMLAttributes<HTMLDivElement> {
+  left: ReactNode;
+  right: ReactNode;
+  defaultLeftWidth?: number;
+  minLeftWidth?: number;
+  minRightWidth?: number;
+}
+
+export function Resizable({
+  left,
+  right,
+  defaultLeftWidth = 50,
+  minLeftWidth = 20,
+  minRightWidth = 20,
+  className,
+  ...props
+}: ResizableProps) {
+  const [leftPercent, setLeftPercent] = useState(defaultLeftWidth);
+  const dragging = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    dragging.current = true;
+    const startX = e.clientX;
+    const startPercent = leftPercent;
+
+    const handleMove = (ev: MouseEvent) => {
+      if (!dragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const delta = ((ev.clientX - startX) / rect.width) * 100;
+      const newVal = Math.max(minLeftWidth, Math.min(100 - minRightWidth, startPercent + delta));
+      setLeftPercent(newVal);
+    };
+
+    const handleUp = () => {
+      dragging.current = false;
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleUp);
+    };
+
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("mouseup", handleUp);
+  }, [leftPercent, minLeftWidth, minRightWidth]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("ph-resizable flex overflow-hidden", className)}
+      {...props}
+    >
+      <div className="ph-resizable__left overflow-auto" style={{ width: `${leftPercent}%` }}>
+        {left}
+      </div>
+      <div
+        className="ph-resizable__handle cursor-col-resize shrink-0"
+        onMouseDown={handleMouseDown}
+      />
+      <div className="ph-resizable__right flex-1 overflow-auto">
+        {right}
+      </div>
+    </div>
+  );
+}
+
+Resizable.displayName = "Resizable";

package/src/components/ui/Row.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, type ReactElement, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface RowProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: ReactElement | null;
+  sideIcon?: ReactElement | null;
+  status?: "default" | "success" | "warning" | "danger" | "muted";
+  fullWidth?: boolean;
+  center?: boolean;
+  size?: "sm" | "md" | "lg";
+  children?: ReactNode;
+}
+
+export const Row = forwardRef<HTMLDivElement, RowProps>(function Row({
+  icon,
+  sideIcon,
+  status = "default",
+  fullWidth = false,
+  center = false,
+  size = "md",
+  className,
+  children,
+  ...props
+}, ref) {
+  const symbolic = children === null || children === undefined || children === false;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "ph-row",
+        status !== "default" && `ph-row--${status}`,
+        fullWidth && "ph-row--full-width",
+        center && "ph-row--center",
+        size === "sm" && "ph-row--sm",
+        size === "lg" && "ph-row--lg",
+        symbolic && "ph-row--symbolic",
+        className
+      )}
+      {...props}
+    >
+      <div className="ph-row__main">
+        {icon && <span className="ph-row__icon">{icon}</span>}
+        {!symbolic && <div className="ph-row__content">{children}</div>}
+        {sideIcon && <span className="ph-row__side-icon">{sideIcon}</span>}
+      </div>
+    </div>
+  );
+});
+
+Row.displayName = "Row";

package/src/components/ui/ScrollArea.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useRef, useState, useEffect, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  orientation?: "vertical" | "horizontal" | "both";
+}
+
+export function ScrollArea({
+  children,
+  orientation = "vertical",
+  className,
+  ...props
+}: ScrollAreaProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const [showTop, setShowTop] = useState(false);
+  const [showBottom, setShowBottom] = useState(false);
+
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    const update = () => {
+      setShowTop(el.scrollTop > 4);
+      setShowBottom(el.scrollTop < el.scrollHeight - el.clientHeight - 4);
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => { el.removeEventListener("scroll", update); ro.disconnect(); };
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        "ph-scroll-area relative overflow-hidden",
+        orientation === "horizontal" && "overflow-x-auto",
+        orientation === "both" && "overflow-auto",
+        className
+      )}
+      {...props}
+    >
+      {showTop && <div className="ph-scroll-area__shadow-top" />}
+      <div ref={viewportRef} className="ph-scroll-area__viewport overflow-y-auto overscroll-contain">
+        {children}
+      </div>
+      {showBottom && <div className="ph-scroll-area__shadow-bottom" />}
+    </div>
+  );
+}
+
+ScrollArea.displayName = "ScrollArea";

package/src/components/ui/SettingsLayout.tsx

@@ -0,0 +1,94 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { IconTuning } from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export interface SettingsNavItem {
+  id: string;
+  label: ReactNode;
+  href: string;
+  icon?: ReactNode;
+  active?: boolean;
+  badge?: ReactNode;
+}
+
+export interface SettingsNavGroup {
+  label: ReactNode;
+  items: readonly SettingsNavItem[];
+}
+
+export interface SettingsNavProps extends ComponentPropsWithoutRef<"div"> {
+  groups: readonly SettingsNavGroup[];
+}
+
+export interface SettingsLayoutProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  navigation: ReactNode;
+  navigationLabel?: string;
+  children: ReactNode;
+}
+
+export function SettingsNav({ groups, className, ...props }: SettingsNavProps) {
+  return (
+    <div className={cn("ph-settings-nav", className)} {...props}>
+      {groups.map((group, index) => (
+        <div className="ph-settings-nav__group" key={index}>
+          <h3>{group.label}</h3>
+          <div className="ph-settings-nav__items">
+            {group.items.map((item) => (
+              <a
+                key={item.id}
+                href={item.href}
+                className={cn("ph-settings-nav__item", item.active && "ph-settings-nav__item--active")}
+                aria-current={item.active ? "page" : undefined}
+              >
+                {item.icon ? <span className="ph-settings-nav__icon">{item.icon}</span> : null}
+                <span>{item.label}</span>
+                {item.badge ? <span className="ph-settings-nav__badge">{item.badge}</span> : null}
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SettingsLayout({
+  title,
+  description,
+  actions,
+  navigation,
+  navigationLabel = "Settings",
+  children,
+  className,
+  ...props
+}: SettingsLayoutProps) {
+  return (
+    <section className={cn("ph-settings-layout", className)} {...props}>
+      <header className="ph-settings-layout__header">
+        <div>
+          <h2>{title}</h2>
+          {description ? <p>{description}</p> : null}
+        </div>
+        {actions ? <div className="ph-settings-layout__actions">{actions}</div> : null}
+      </header>
+
+      <details className="ph-settings-layout__mobile-nav">
+        <summary>
+          <IconTuning className="h-4 w-4" aria-hidden />
+          Settings menu
+        </summary>
+        <nav aria-label={navigationLabel}>{navigation}</nav>
+      </details>
+
+      <div className="ph-settings-layout__grid">
+        <aside className="ph-settings-layout__sidebar">
+          <nav aria-label={navigationLabel}>{navigation}</nav>
+        </aside>
+        <div className="ph-settings-layout__content">{children}</div>
+      </div>
+    </section>
+  );
+}

package/src/components/ui/ShowcaseWrapper.tsx

@@ -3,6 +3,7 @@
 import { useState, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 import { CodeBlock } from "@/components/ui";
+import { IconCodePreview } from "@/components/icons";
 
 interface ShowcaseWrapperProps {
   id?: string;
@@ -39,26 +40,13 @@ export function ShowcaseWrapper({
             className={cn(
               "flex h-10 w-10 items-center justify-center rounded-full border transition-all",
               showCode
-                ? "border-ph-brand bg-ph-brand text-white shadow-lg shadow-ph-brand/25"
+                ? "border-ph-brand bg-ph-brand text-[var(--ph-on-accent)] shadow-lg shadow-ph-brand/25"
                 : "border-ph-border bg-ph-surface text-ph-subtle hover:border-ph-brand hover:text-ph-brand"
             )}
             title={showCode ? "Hide code" : "Show code"}
+            aria-label={showCode ? "Hide code" : "Show code"}
           >
-            <svg
-              className="h-5 w-5"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-              <line x1="8" y1="21" x2="16" y2="21" />
-              <line x1="12" y1="17" x2="12" y2="21" />
-              <line x1="6" y1="8" x2="6" y2="8" />
-              <line x1="10" y1="8" x2="10" y2="8" />
-            </svg>
+            <IconCodePreview className="h-5 w-5" aria-hidden />
           </button>
         </div>
         <hr />

package/src/components/ui/Sidebar.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { type ReactNode, useState } from "react";
+import { cn } from "@/lib/cn";
+
+export interface SidebarGroup {
+  label: string;
+  items: SidebarItemDef[];
+}
+
+export interface SidebarItemDef {
+  label: string;
+  icon?: ReactNode;
+  href?: string;
+  badge?: ReactNode;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+export interface SidebarProps {
+  groups: SidebarGroup[];
+  className?: string;
+  header?: ReactNode;
+  footer?: ReactNode;
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+}
+
+export function Sidebar({ groups, className, header, footer, collapsed = false, onCollapse }: SidebarProps) {
+  return (
+    <nav className={cn("ph-sidebar flex flex-col h-full", collapsed && "ph-sidebar--collapsed", className)}>
+      {header && <div className="ph-sidebar__header px-3 py-3 border-b border-ph-border-subtle">{header}</div>}
+      <div className="ph-sidebar__body flex-1 overflow-y-auto px-2 py-3 space-y-5">
+        {groups.map((group) => (
+          <div key={group.label} className="ph-sidebar__group">
+            {!collapsed && (
+              <h3 className="ph-sidebar__group-label px-2 mb-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext">
+                {group.label}
+              </h3>
+            )}
+            <div className="ph-sidebar__items space-y-0.5">
+              {group.items.map((item) => (
+                <SidebarItem key={item.label} {...item} collapsed={collapsed} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      {footer && <div className="ph-sidebar__footer px-3 py-3 border-t border-ph-border-subtle">{footer}</div>}
+    </nav>
+  );
+}
+
+function SidebarItem({ label, icon, badge, active, onClick, collapsed }: SidebarItemDef & { collapsed: boolean }) {
+  const Comp = onClick ? "button" : "a";
+  return (
+    <Comp
+      type={onClick ? "button" as const : undefined}
+      href={onClick ? undefined : undefined}
+      onClick={onClick}
+      className={cn(
+        "ph-sidebar__item flex items-center gap-2.5 w-full rounded-md px-2.5 py-2 text-sm text-left transition",
+        active
+          ? "bg-ph-selected-bg text-ph-selected-text font-medium"
+          : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
+        collapsed && "justify-center px-2"
+      )}
+      title={collapsed ? label : undefined}
+    >
+      {icon && <span className="ph-sidebar__item-icon shrink-0 w-4 h-4 flex items-center justify-center">{icon}</span>}
+      {!collapsed && <span className="ph-sidebar__item-label truncate flex-1">{label}</span>}
+      {!collapsed && badge && <span className="ph-sidebar__item-badge shrink-0">{badge}</span>}
+    </Comp>
+  );
+}
+
+Sidebar.displayName = "Sidebar";

package/src/components/ui/Snack.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface SnackProps extends HTMLAttributes<HTMLSpanElement> {
+  type?: "regular" | "pill";
+  onClose?: () => void;
+  wrap?: boolean;
+  children: ReactNode;
+}
+
+export const Snack = forwardRef<HTMLSpanElement, SnackProps>(function Snack({
+  type = "regular",
+  onClose,
+  wrap = false,
+  className,
+  children,
+  ...props
+}, ref) {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        "ph-snack",
+        type === "pill" && "ph-snack--pill",
+        !wrap && "truncate",
+        className
+      )}
+      title={typeof children === "string" ? children : undefined}
+      {...props}
+    >
+      <span className="ph-snack__text">{children}</span>
+      {onClose && (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onClose(); }}
+          className="ph-snack__close"
+          aria-label="Remove"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M3 3l6 6M9 3l-6 6" />
+          </svg>
+        </button>
+      )}
+    </span>
+  );
+});
+
+Snack.displayName = "Snack";

package/src/components/ui/Spinner.tsx

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: "sm" | "md" | "lg";
+  textColored?: boolean;
+}
+
+export function Spinner({ size = "sm", textColored = false, className, ...props }: SpinnerProps) {
+  return (
+    <span
+      className={cn(
+        "ph-spinner",
+        `ph-spinner--${size}`,
+        textColored && "ph-spinner--text-colored",
+        className
+      )}
+      role="status"
+      aria-label="Loading"
+      {...props}
+    >
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="ph-spinner__svg">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" opacity={0.2} />
+        <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+      </svg>
+    </span>
+  );
+}
+
+Spinner.displayName = "Spinner";

package/src/components/ui/Splotch.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export type SplotchColor = "purple" | "blue" | "green" | "black" | "white" | "orange" | "red" | "yellow";
+
+export interface SplotchProps extends HTMLAttributes<HTMLDivElement> {
+  color: SplotchColor;
+}
+
+const colorMap: Record<SplotchColor, string> = {
+  purple: "ph-splotch--purple",
+  blue: "ph-splotch--blue",
+  green: "ph-splotch--green",
+  black: "ph-splotch--black",
+  white: "ph-splotch--white",
+  orange: "ph-splotch--orange",
+  red: "ph-splotch--red",
+  yellow: "ph-splotch--yellow",
+};
+
+export function Splotch({ color, className, ...props }: SplotchProps) {
+  return (
+    <div
+      className={cn("ph-splotch", colorMap[color], className)}
+      aria-hidden="true"
+      {...props}
+    >
+      <div className="ph-splotch__paint" />
+    </div>
+  );
+}
+
+Splotch.displayName = "Splotch";

package/src/components/ui/Stepper.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/cn";
+import { IconCheck } from "@/components/icons";
 
 interface Step {
   id: string;
@@ -30,16 +31,14 @@ export function Stepper({ steps, currentStep, className }: StepperProps) {
               <div
                 className={cn(
                   "flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-colors",
-                  isCompleted && "bg-ph-success text-white",
-                  isCurrent && !isError && "bg-ph-brand text-white ring-4 ring-ph-brand/20",
-                  isCurrent && isError && "bg-ph-danger text-white",
+                  isCompleted && "bg-ph-success text-[var(--ph-on-success)]",
+                  isCurrent && !isError && "bg-ph-brand text-[var(--ph-on-accent)] ring-4 ring-ph-brand/20",
+                  isCurrent && isError && "bg-ph-danger text-[var(--ph-on-danger)]",
                   isPending && "bg-ph-muted text-ph-mutedtext"
                 )}
               >
                 {isCompleted ? (
-                  <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
-                    <path d="M5 13l4 4L19 7" />
-                  </svg>
+                  <IconCheck className="h-5 w-5" aria-hidden />
                 ) : (
                   index + 1
                 )}

package/src/components/ui/Table.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CSSProperties, ReactNode } from "react";
 import { cn } from "@/lib/cn";