@xenide-io/the-old-ui-theme 0.5.4 → 0.6.0

package/src/components/ui/Metric.tsx

@@ -1,34 +0,0 @@
-import { type ReactNode, type HTMLAttributes } from "react";
-import { cn } from "@/lib/cn";
-
-export interface MetricProps extends HTMLAttributes<HTMLDivElement> {
-  value: string | number;
-  label: string;
-  badge?: ReactNode;
-  trend?: ReactNode;
-  icon?: ReactNode;
-}
-
-export function Metric({
-  value,
-  label,
-  badge,
-  trend,
-  icon,
-  className,
-  ...props
-}: MetricProps) {
-  return (
-    <div className={cn("ph-metric", className)} {...props}>
-      <div className="ph-metric__header">
-        {icon && <span className="ph-metric__icon">{icon}</span>}
-        <span className="ph-metric__label">{label}</span>
-        {badge && <span className="ph-metric__badge">{badge}</span>}
-      </div>
-      <div className="ph-metric__value">{value}</div>
-      {trend && <div className="ph-metric__trend">{trend}</div>}
-    </div>
-  );
-}
-
-Metric.displayName = "Metric";

package/src/components/ui/Navigation.tsx

@@ -1,94 +0,0 @@
-import { IconChevronLeft, IconChevronRight } from "@/components/icons";
-import { cn } from "@/lib/cn";
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-  current?: boolean;
-}
-
-export interface BreadcrumbsProps {
-  items: BreadcrumbItem[];
-  label?: string;
-  className?: string;
-}
-
-export function Breadcrumbs({ items, label = "Breadcrumb", className }: BreadcrumbsProps) {
-  return (
-    <nav aria-label={label} className={cn("ph-breadcrumbs", className)}>
-      {items.map((item, index) => (
-        <span key={`${item.label}-${index}`} className="contents">
-          {index > 0 ? <span className="ph-breadcrumb-sep" aria-hidden="true">/</span> : null}
-          {item.current || !item.href ? (
-            <span className="ph-breadcrumb-current" aria-current={item.current ? "page" : undefined}>
-              {item.label}
-            </span>
-          ) : (
-            <a href={item.href} className="ph-breadcrumb-link">
-              {item.label}
-            </a>
-          )}
-        </span>
-      ))}
-    </nav>
-  );
-}
-
-export interface PaginationProps {
-  page: number;
-  totalPages: number;
-  onPageChange?: (page: number) => void;
-  label?: string;
-  compact?: boolean;
-  className?: string;
-}
-
-export function Pagination({
-  page,
-  totalPages,
-  onPageChange,
-  label = "Pagination",
-  compact = false,
-  className,
-}: PaginationProps) {
-  const pages = compact ? [Math.max(1, page - 1), page, Math.min(totalPages, page + 1)] : [1, 2, 3, totalPages];
-  const uniquePages = Array.from(new Set(pages)).filter((n) => n >= 1 && n <= totalPages);
-
-  return (
-    <nav aria-label={label} className={cn("ph-pagination", className)}>
-      <button
-        type="button"
-        className="ph-pagination-btn"
-        disabled={page <= 1}
-        aria-label="Previous page"
-        onClick={() => onPageChange?.(page - 1)}
-      >
-        <IconChevronLeft className="mx-auto h-4 w-4" aria-hidden />
-      </button>
-      {uniquePages.map((pageNumber, index) => (
-        <span key={pageNumber} className="contents">
-          {!compact && index === uniquePages.length - 1 && pageNumber > 4 ? (
-            <span className="ph-pagination-ellipsis" aria-hidden="true">...</span>
-          ) : null}
-          <button
-            type="button"
-            className={cn("ph-pagination-btn", pageNumber === page && "ph-pagination-btn-active")}
-            aria-current={pageNumber === page ? "page" : undefined}
-            onClick={() => onPageChange?.(pageNumber)}
-          >
-            {pageNumber}
-          </button>
-        </span>
-      ))}
-      <button
-        type="button"
-        className="ph-pagination-btn"
-        disabled={page >= totalPages}
-        aria-label="Next page"
-        onClick={() => onPageChange?.(page + 1)}
-      >
-        <IconChevronRight className="mx-auto h-4 w-4" aria-hidden />
-      </button>
-    </nav>
-  );
-}

package/src/components/ui/NumberField.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import { useState, type InputHTMLAttributes } from "react";
-import { cn } from "@/lib/cn";
-
-export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
-  value?: number;
-  onChange?: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  label?: string;
-}
-
-export function NumberField({
-  value: controlledValue,
-  onChange,
-  min,
-  max,
-  step = 1,
-  label,
-  className,
-  disabled,
-  defaultValue,
-  ...inputProps
-}: NumberFieldProps) {
-  const [internal, setInternal] = useState(controlledValue ?? 0);
-  const value = controlledValue ?? internal;
-
-  const set = (v: number) => {
-    const clamped = Math.max(min ?? -Infinity, Math.min(max ?? Infinity, v));
-    setInternal(clamped);
-    onChange?.(clamped);
-  };
-
-  return (
-    <div className={cn("ph-number-field", className)}>
-      {label && <label className="ph-label">{label}</label>}
-      <div className="ph-number-field__control">
-        <button
-          type="button"
-          disabled={disabled || (min !== undefined && value <= min)}
-          onClick={() => set(value - step)}
-          className="ph-number-field__btn"
-          aria-label="Decrease"
-        >
-          <svg width="12" height="2" viewBox="0 0 12 2" fill="currentColor"><rect y="0" width="12" height="2" rx="1" /></svg>
-        </button>
-        <input
-          type="number"
-          value={value}
-          onChange={(e) => set(Number(e.target.value))}
-          disabled={disabled}
-          min={min}
-          max={max}
-          step={step}
-          className="ph-number-field__input"
-          {...inputProps}
-        />
-        <button
-          type="button"
-          disabled={disabled || (max !== undefined && value >= max)}
-          onClick={() => set(value + step)}
-          className="ph-number-field__btn"
-          aria-label="Increase"
-        >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M6 2v8M2 6h8" />
-          </svg>
-        </button>
-      </div>
-    </div>
-  );
-}
-
-NumberField.displayName = "NumberField";

package/src/components/ui/Popover.tsx

@@ -1,73 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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/Rating.tsx

@@ -1,65 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import { IconStar } from "@/components/icons";
-import { cn } from "@/lib/cn";
-
-export interface RatingProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
-  label?: string;
-  value?: number;
-  max?: number;
-  readOnly?: boolean;
-  onChange?: (value: number) => void;
-  wrapperClassName?: string;
-}
-
-export function Rating({
-  label,
-  value = 0,
-  max = 5,
-  readOnly = true,
-  onChange,
-  className,
-  wrapperClassName,
-  ...props
-}: RatingProps) {
-  const stars = Array.from({ length: max }, (_, index) => index + 1);
-
-  return (
-    <div className={cn("ph-field", wrapperClassName)}>
-      {label && <span className="ph-label">{label}</span>}
-      <div
-        className={cn("ph-rating flex", className)}
-        role={readOnly ? "img" : "radiogroup"}
-        aria-label={label ?? `Rating: ${value} out of ${max}`}
-        {...props}
-      >
-        {stars.map((star) => {
-          const active = star <= value;
-
-          if (readOnly) {
-            return (
-              <IconStar
-                key={star}
-                className={cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border")}
-                aria-hidden
-              />
-            );
-          }
-
-          return (
-            <button
-              key={star}
-              type="button"
-              className="rounded p-0.5 transition hover:scale-105 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-brand"
-              role="radio"
-              aria-checked={active}
-              aria-label={`${star} out of ${max}`}
-              onClick={() => onChange?.(star)}
-            >
-              <IconStar className={cn("h-6 w-6", active ? "text-amber-500" : "text-ph-border")} />
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/src/components/ui/Resizable.tsx

@@ -1,71 +0,0 @@
-"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

@@ -1,51 +0,0 @@
-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

@@ -1,54 +0,0 @@
-"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

@@ -1,79 +0,0 @@
-"use client";
-
-import { type ReactNode } 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;
-  children?: ReactNode;
-  collapsed?: boolean;
-  onCollapse?: (collapsed: boolean) => void;
-}
-
-export function Sidebar({ groups, className, header, footer, children, 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 ?? 'default'} className="ph-sidebar__group">
-            {group.label && !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>
-      {children}
-      {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, href, onClick, collapsed }: SidebarItemDef & { collapsed: boolean }) {
-  const Comp = onClick ? "button" : "a";
-  return (
-    <Comp
-      type={onClick ? "button" as const : undefined}
-      href={onClick ? undefined : href}
-      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={cn("ph-sidebar__item-icon shrink-0 flex items-center justify-center", collapsed ? "w-5 h-5" : "w-4 h-4")}>{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";