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

package/src/components/ui/FilterChips.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import { IconClose } from "@/components/icons";
+
+interface FilterChip {
+  id: string;
+  label: string;
+  active?: boolean;
+}
+
+interface FilterChipsProps {
+  chips: FilterChip[];
+  onToggle: (id: string) => void;
+  onRemove: (id: string) => void;
+  className?: string;
+}
+
+export function FilterChips({ chips, onToggle, onRemove, className }: FilterChipsProps) {
+  return (
+    <div className={cn("flex flex-wrap gap-2", className)}>
+      {chips.map((chip) => (
+        <button
+          key={chip.id}
+          type="button"
+          onClick={() => onToggle(chip.id)}
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
+            chip.active
+              ? "bg-ph-brand text-white"
+              : "bg-ph-muted text-ph-subtle hover:bg-ph-border hover:text-ph-ink"
+          )}
+        >
+          {chip.label}
+          {chip.active && (
+            <span
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove(chip.id);
+              }}
+              className="ml-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full hover:bg-white/20"
+            >
+              <IconClose className="h-3 w-3" />
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/HoverCard.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/cn";
+
+interface HoverCardProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function HoverCard({ trigger, children, className }: HoverCardProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div
+      className="relative inline-block"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+    >
+      {trigger}
+      <div
+        className={cn(
+          "absolute left-1/2 top-full z-50 mt-2 w-64 -translate-x-1/2 rounded-lg border border-ph-border bg-ph-surface p-4 shadow-ph-md transition-all duration-150",
+          isVisible
+            ? "visible translate-y-0 opacity-100"
+            : "invisible -translate-y-1 opacity-0",
+          className
+        )}
+      >
+        <div className="absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 border-l border-t border-ph-border bg-ph-surface" />
+        <div className="relative">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Indicator.tsx

@@ -0,0 +1,61 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type IndicatorPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+
+export interface IndicatorProps extends ComponentPropsWithoutRef<"div"> {
+  /** The element to attach the indicator to */
+  children: ReactNode;
+  /** Badge content (number, text, or "!") */
+  badge?: ReactNode;
+  /** Indicator colour */
+  color?: string;
+  /** Position of the indicator dot */
+  position?: IndicatorPosition;
+  /** Show a simple dot instead of a badge */
+  dot?: boolean;
+  /** Offset from corner (default: 2px) */
+  offset?: number;
+}
+
+const positionMap: Record<IndicatorPosition, string> = {
+  "top-right": "-right-[2px] -top-[2px]",
+  "top-left": "-left-[2px] -top-[2px]",
+  "bottom-right": "-right-[2px] -bottom-[2px]",
+  "bottom-left": "-left-[2px] -bottom-[2px]",
+};
+
+export function Indicator({
+  children,
+  badge,
+  color = "bg-ph-brand",
+  position = "top-right",
+  dot = false,
+  className,
+  ...props
+}: IndicatorProps) {
+  return (
+    <div className={cn("relative inline-flex items-center justify-center", className)} {...props}>
+      {dot ? (
+        <span
+          className={cn(
+            "absolute z-10 h-2.5 w-2.5 rounded-full border-2 border-white",
+            color,
+            positionMap[position],
+          )}
+        />
+      ) : badge != null ? (
+        <span
+          className={cn(
+            "absolute z-10 flex min-h-[22px] min-w-[22px] items-center justify-center rounded-full px-1 text-[11px] font-bold text-white",
+            color,
+            positionMap[position],
+          )}
+        >
+          {badge}
+        </span>
+      ) : null}
+      {children}
+    </div>
+  );
+}

package/src/components/ui/Input.tsx

@@ -0,0 +1,359 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { useId } from "react";
+import { cn } from "@/lib/cn";
+
+export type InputSize = "sm" | "md" | "lg";
+export type InputVariant = "default" | "ghost";
+
+export interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
+  label?: string;
+  hideLabel?: boolean;
+  error?: string;
+  helperText?: string;
+  size?: InputSize;
+  variant?: InputVariant;
+  wrapperClassName?: string;
+}
+
+const sizeMap: Record<InputSize, string> = {
+  sm: "ph-input-sm",
+  md: "",
+  lg: "ph-input-lg",
+};
+
+export function Input({
+  id: idProp,
+  label,
+  hideLabel = false,
+  error,
+  helperText,
+  size = "md",
+  variant = "default",
+  className,
+  wrapperClassName,
+  disabled,
+  ...props
+}: InputProps) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hasError = Boolean(error);
+
+  return (
+    <div className={cn("ph-field", wrapperClassName)}>
+      {label && (
+        <label
+          htmlFor={id}
+          className={cn(
+            "ph-label",
+            hideLabel && "sr-only",
+            disabled && "opacity-50"
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <input
+        id={id}
+        disabled={disabled}
+        aria-invalid={hasError || undefined}
+        className={cn(
+          "ph-input w-full",
+          sizeMap[size],
+          variant === "ghost" && "ph-input-ghost",
+          hasError && "ph-input-error",
+          disabled && "cursor-not-allowed opacity-60",
+          className
+        )}
+        {...props}
+      />
+      {helperText && !hasError && (
+        <p className="mt-1 text-xs text-ph-subtle">{helperText}</p>
+      )}
+      {error && (
+        <p className="mt-1 text-xs font-medium text-ph-danger">{error}</p>
+      )}
+    </div>
+  );
+}
+
+export interface SelectProps extends Omit<ComponentPropsWithoutRef<"select">, "size"> {
+  label?: string;
+  hideLabel?: boolean;
+  error?: string;
+  helperText?: string;
+  size?: InputSize;
+  wrapperClassName?: string;
+  children: ReactNode;
+}
+
+export function Select({
+  id: idProp,
+  label,
+  hideLabel = false,
+  error,
+  helperText,
+  size = "md",
+  className,
+  wrapperClassName,
+  disabled,
+  children,
+  ...props
+}: SelectProps) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hasError = Boolean(error);
+
+  return (
+    <div className={cn("ph-field", wrapperClassName)}>
+      {label && (
+        <label
+          htmlFor={id}
+          className={cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50")}
+        >
+          {label}
+        </label>
+      )}
+      <select
+        id={id}
+        disabled={disabled}
+        aria-invalid={hasError || undefined}
+        className={cn(
+          "ph-select w-full",
+          sizeMap[size],
+          hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
+          disabled && "cursor-not-allowed opacity-60",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+      {helperText && !hasError && (
+        <p className="mt-1 text-xs text-ph-subtle">{helperText}</p>
+      )}
+      {error && (
+        <p className="mt-1 text-xs font-medium text-ph-danger">{error}</p>
+      )}
+    </div>
+  );
+}
+
+export interface TextareaProps extends Omit<ComponentPropsWithoutRef<"textarea">, "size"> {
+  label?: string;
+  hideLabel?: boolean;
+  error?: string;
+  helperText?: string;
+  size?: InputSize;
+  wrapperClassName?: string;
+}
+
+export function Textarea({
+  id: idProp,
+  label,
+  hideLabel = false,
+  error,
+  helperText,
+  size = "md",
+  className,
+  wrapperClassName,
+  disabled,
+  ...props
+}: TextareaProps) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hasError = Boolean(error);
+
+  return (
+    <div className={cn("ph-field", wrapperClassName)}>
+      {label && (
+        <label
+          htmlFor={id}
+          className={cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50")}
+        >
+          {label}
+        </label>
+      )}
+      <textarea
+        id={id}
+        disabled={disabled}
+        aria-invalid={hasError || undefined}
+        className={cn(
+          "ph-textarea w-full",
+          sizeMap[size],
+          hasError && "border-ph-danger focus:border-ph-danger focus:ring-ph-danger/20",
+          disabled && "cursor-not-allowed opacity-60",
+          className
+        )}
+        {...props}
+      />
+      {helperText && !hasError && (
+        <p className="mt-1 text-xs text-ph-subtle">{helperText}</p>
+      )}
+      {error && (
+        <p className="mt-1 text-xs font-medium text-ph-danger">{error}</p>
+      )}
+    </div>
+  );
+}
+
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: ReactNode;
+  error?: string;
+  helperText?: string;
+  wrapperClassName?: string;
+}
+
+export function Checkbox({
+  id: idProp,
+  label,
+  error,
+  helperText,
+  className,
+  wrapperClassName,
+  disabled,
+  ...props
+}: CheckboxProps) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hasError = Boolean(error);
+
+  return (
+    <div className={cn("ph-control-row", wrapperClassName)}>
+      <input
+        id={id}
+        type="checkbox"
+        disabled={disabled}
+        aria-invalid={hasError || undefined}
+        className={cn(
+          "ph-checkbox",
+          hasError && "border-ph-danger",
+          disabled && "cursor-not-allowed opacity-60",
+          className
+        )}
+        {...props}
+      />
+      <label htmlFor={id} className={cn("cursor-pointer", disabled && "opacity-60")}>
+        {label}
+      </label>
+      {helperText && !hasError && (
+        <p className="mt-0.5 text-xs text-ph-subtle">{helperText}</p>
+      )}
+      {error && (
+        <p className="mt-0.5 text-xs font-medium text-ph-danger">{error}</p>
+      )}
+    </div>
+  );
+}
+
+export interface RadioProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: ReactNode;
+  wrapperClassName?: string;
+}
+
+export function Radio({
+  id: idProp,
+  label,
+  className,
+  wrapperClassName,
+  disabled,
+  ...props
+}: RadioProps) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+
+  return (
+    <div className={cn("ph-control-row", wrapperClassName, disabled && "opacity-60")}>
+      <input
+        id={id}
+        type="radio"
+        disabled={disabled}
+        className={cn("ph-radio", disabled && "cursor-not-allowed", className)}
+        {...props}
+      />
+      <label htmlFor={id} className={cn("cursor-pointer", disabled && "opacity-60")}>
+        {label}
+      </label>
+    </div>
+  );
+}
+
+export interface ToggleProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: ReactNode;
+  wrapperClassName?: string;
+}
+
+export function Toggle({
+  id: idProp,
+  label,
+  className,
+  wrapperClassName,
+  disabled,
+  ...props
+}: ToggleProps) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+
+  return (
+    <label className={cn("ph-control-row-between", wrapperClassName, disabled && "opacity-60")}>
+      <span className={disabled ? "opacity-60" : undefined}>{label}</span>
+      <input
+        id={id}
+        type="checkbox"
+        role="switch"
+        disabled={disabled}
+        className={cn("ph-toggle", disabled && "cursor-not-allowed", className)}
+        {...props}
+      />
+    </label>
+  );
+}
+
+export interface RangeProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: string;
+  minLabel?: string;
+  maxLabel?: string;
+  valueLabel?: string;
+  wrapperClassName?: string;
+}
+
+export function Range({
+  label,
+  minLabel,
+  maxLabel,
+  valueLabel,
+  wrapperClassName,
+  className,
+  ...props
+}: RangeProps) {
+  return (
+    <div className={cn("ph-field", wrapperClassName)}>
+      {label && <label className="ph-label">{label}</label>}
+      <input type="range" className={cn("ph-range", className)} {...props} />
+      {(minLabel || valueLabel || maxLabel) && (
+        <div className="flex justify-between text-xs text-ph-mutedtext">
+          <span>{minLabel}</span>
+          <span>{valueLabel}</span>
+          <span>{maxLabel}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export interface FileUploadProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: string;
+  prompt?: string;
+  wrapperClassName?: string;
+}
+
+export function FileUpload({ label, prompt = "Drop file or browse", wrapperClassName, className, ...props }: FileUploadProps) {
+  return (
+    <div className={cn("ph-field", wrapperClassName)}>
+      {label && <label className="ph-label">{label}</label>}
+      <label className="flex cursor-pointer items-center gap-3 rounded-lg border border-dashed border-ph-border bg-ph-surface px-4 py-6 text-sm text-ph-subtle transition hover:bg-ph-muted/60">
+        <input type="file" className={cn("sr-only", className)} {...props} />
+        {prompt}
+      </label>
+    </div>
+  );
+}

package/src/components/ui/Kbd.tsx

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type KbdVariant = "shortcut" | "key" | "token";
+
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+  variant?: KbdVariant;
+  keys?: ReactNode[];
+  children?: ReactNode;
+}
+
+export function Kbd({ variant = "shortcut", keys, children, className, ...props }: KbdProps) {
+  if (variant === "token") {
+    return (
+      <code className={cn("ph-kbd text-ph-ink", className)} {...props}>
+        {children}
+      </code>
+    );
+  }
+
+  const content = keys?.length ? keys.join(" ") : normalizeShortcut(children);
+
+  return (
+    <kbd className={cn("ph-shortcut", className)} {...props}>
+      {content}
+    </kbd>
+  );
+}
+
+function normalizeShortcut(children: ReactNode) {
+  if (typeof children !== "string") return children;
+
+  return children
+    .replace(/\bCommand\b|\bCmd\b/g, "⌘")
+    .replace(/\bOption\b|\bAlt\b/g, "⌥")
+    .replace(/\bShift\b/g, "⇧")
+    .replace(/\bControl\b|\bCtrl\b/g, "⌃");
+}

package/src/components/ui/Modal.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import { IconClose } from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface ModalProps {
+  open?: boolean;
+  onClose?: () => void;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  footer?: ReactNode;
+  size?: ModalSize;
+  className?: string;
+  showCloseButton?: boolean;
+}
+
+const sizeMap: Record<ModalSize, string> = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[calc(100%-2rem)]",
+};
+
+export function Modal({
+  open = false,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  className,
+  showCloseButton = true,
+}: ModalProps) {
+  if (!open) return null;
+
+  return (
+    <div className="ph-modal-overlay" role="presentation" onClick={onClose}>
+      <div
+        role="dialog"
+        aria-modal
+        className={cn(
+          "ph-modal-panel",
+          sizeMap[size],
+          className
+        )}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {(title || showCloseButton) && (
+          <header className="flex items-start justify-between gap-4">
+            <div>
+              {title && <h3 className="text-lg font-bold text-ph-ink">{title}</h3>}
+              {description && <p className="mt-1 text-sm text-ph-subtle">{description}</p>}
+            </div>
+            {showCloseButton && onClose && (
+              <button
+                type="button"
+                onClick={onClose}
+                className="shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink"
+                aria-label="Close"
+              >
+                <IconClose className="h-5 w-5" />
+              </button>
+            )}
+          </header>
+        )}
+        <div className="mt-4">{children}</div>
+        {footer && <div className="mt-6 flex justify-end gap-2 border-t border-ph-border pt-5">{footer}</div>}
+      </div>
+    </div>
+  );
+}