@xenide-io/the-old-ui-theme 0.3.0 → 0.3.2

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/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/Table.tsx

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

package/src/components/ui/Tag.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type TagType = "default" | "primary" | "success" | "warning" | "danger" | "info" | "muted" | "highlight";
+
+export interface TagProps extends HTMLAttributes<HTMLDivElement> {
+  type?: TagType;
+  size?: "sm" | "md";
+  icon?: ReactNode;
+  closable?: boolean;
+  onClose?: () => void;
+  children: ReactNode;
+}
+
+const typeClass: Record<TagType, string> = {
+  default: "ph-tag-default",
+  primary: "ph-tag-primary",
+  success: "ph-tag-success",
+  warning: "ph-tag-warning",
+  danger: "ph-tag-danger",
+  info: "ph-tag-info",
+  muted: "ph-tag-muted",
+  highlight: "ph-tag-highlight",
+};
+
+export const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag({
+  type = "default",
+  size = "md",
+  icon,
+  closable = false,
+  onClose,
+  className,
+  children,
+  ...props
+}, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "ph-tag",
+        typeClass[type],
+        size === "sm" && "ph-tag-sm",
+        className
+      )}
+      {...props}
+    >
+      {icon && <span className="ph-tag__icon">{icon}</span>}
+      <span className="ph-tag__text">{children}</span>
+      {closable && (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onClose?.(); }}
+          className="ph-tag__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>
+      )}
+    </div>
+  );
+});
+
+Tag.displayName = "Tag";

package/src/components/ui/Toggle.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton({
+  pressed = false,
+  onPressedChange,
+  icon,
+  children,
+  className,
+  ...props
+}, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={pressed}
+      onClick={() => onPressedChange?.(!pressed)}
+      className={cn(
+        "ph-toggle-btn",
+        pressed && "ph-toggle-btn--pressed",
+        className
+      )}
+      {...props}
+    >
+      {icon && <span className="ph-toggle-btn__icon">{icon}</span>}
+      {children}
+    </button>
+  );
+});
+
+ToggleButton.displayName = "ToggleButton";
+
+export interface ToggleGroupProps {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function ToggleGroup({
+  type = "single",
+  value,
+  onValueChange,
+  children,
+  className,
+}: ToggleGroupProps) {
+  return (
+    <div className={cn("ph-toggle-group", className)} role="group">
+      {children}
+    </div>
+  );
+}
+
+ToggleGroup.displayName = "ToggleGroup";