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

package/src/components/ui/Snack.tsx

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

@@ -1,33 +0,0 @@
-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,74 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/cn";
-import { IconCheck } from "@/components/icons";
-
-interface Step {
-  id: string;
-  label: string;
-  description?: string;
-  status?: "pending" | "current" | "completed" | "error";
-}
-
-interface StepperProps {
-  steps: Step[];
-  currentStep: number;
-  className?: string;
-}
-
-export function Stepper({ steps, currentStep, className }: StepperProps) {
-  return (
-    <div className={cn("flex items-start gap-2", className)}>
-      {steps.map((step, index) => {
-        const isCompleted = index < currentStep;
-        const isCurrent = index === currentStep;
-        const isPending = index > currentStep;
-        const isError = step.status === "error";
-
-        return (
-          <div key={step.id} className="flex flex-1 items-start gap-2">
-            <div className="flex flex-1 flex-col items-center">
-              <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-[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 ? (
-                  <IconCheck className="h-5 w-5" aria-hidden />
-                ) : (
-                  index + 1
-                )}
-              </div>
-              <div className="mt-2 text-center">
-                <p
-                  className={cn(
-                    "text-sm font-semibold",
-                    isCurrent && "text-ph-ink",
-                    !isCurrent && "text-ph-mutedtext"
-                  )}
-                >
-                  {step.label}
-                </p>
-                {step.description && (
-                  <p className="mt-0.5 text-xs text-ph-mutedtext">{step.description}</p>
-                )}
-              </div>
-            </div>
-            {index < steps.length - 1 && (
-              <div
-                className={cn(
-                  "mt-4 h-0.5 flex-1 rounded-full transition-colors",
-                  isCompleted ? "bg-ph-success" : "bg-ph-border"
-                )}
-              />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/ui/Tabs.tsx

@@ -1,53 +0,0 @@
-import { cn } from "@/lib/cn";
-
-export interface TabItem {
-  value: string;
-  label: string;
-}
-
-export type TabsVariant = "pill" | "underline";
-
-export interface TabsProps {
-  items: TabItem[];
-  value: string;
-  onChange: (value: string) => void;
-  variant?: TabsVariant;
-  className?: string;
-}
-
-export function Tabs({ items, value, onChange, variant = "pill", className }: TabsProps) {
-  if (variant === "underline") {
-    return (
-      <div className={cn("flex gap-6 border-b border-ph-border", className)}>
-        {items.map((item) => (
-          <button
-            key={item.value}
-            type="button"
-            onClick={() => onChange(item.value)}
-            className={cn(
-              "-mb-px border-b-2 pb-2 text-sm font-semibold transition",
-              value === item.value ? "border-ph-brand text-ph-ink" : "border-transparent text-ph-mutedtext hover:text-ph-ink"
-            )}
-          >
-            {item.label}
-          </button>
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("ph-tabs-row inline-flex", className)}>
-      {items.map((item) => (
-        <button
-          key={item.value}
-          type="button"
-          onClick={() => onChange(item.value)}
-          className={cn("ph-tab", value === item.value && "ph-tab-active")}
-        >
-          {item.label}
-        </button>
-      ))}
-    </div>
-  );
-}

package/src/components/ui/Tag.tsx

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

@@ -1,54 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-export interface TerminalProps extends ComponentPropsWithoutRef<"div"> {
-  /** Window title */
-  title?: string;
-  /** Terminal lines — array of { text, color? } or plain strings */
-  lines?: Array<{ text: string; color?: string } | string>;
-  /** Custom content instead of lines */
-  children?: ReactNode;
-}
-
-export function Terminal({
-  title = "sandbox",
-  lines,
-  children,
-  className,
-  ...props
-}: TerminalProps) {
-  return (
-    <div
-      className={cn(
-        "overflow-hidden rounded-xl border border-ph-border shadow-ph-md",
-        className,
-      )}
-      {...props}
-    >
-      <header className="flex items-center gap-2 border-b border-ph-border bg-ph-muted px-4 py-3">
-        <div className="h-3 w-3 rounded-full bg-red-400" />
-        <div className="h-3 w-3 rounded-full bg-amber-400" />
-        <div className="h-3 w-3 rounded-full bg-emerald-400" />
-        {title && (
-          <span className="text-xs font-medium text-ph-mutedtext">{title}</span>
-        )}
-      </header>
-      <div className="ph-code rounded-none border-x-0 border-b-0 text-[13px] leading-relaxed">
-        {children || (
-          <>
-            {lines?.map((line, i) => {
-              const text = typeof line === "string" ? line : line.text;
-              const color = typeof line === "string" ? undefined : line.color;
-              return (
-                <span key={i}>
-                  <span className={color || "text-neutral-600"}>{text}</span>
-                  {i < lines.length - 1 && <br />}
-                </span>
-              );
-            })}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/ui/ThemeManager.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { useLayoutEffect } from "react";
-import { persistTheme, readStoredTheme } from "@/themes";
-
-export interface ThemeManagerProps {
-  children?: ReactNode;
-}
-
-/** Client wrapper that keeps html[data-theme] synced with localStorage. */
-export function ThemeManager({ children }: ThemeManagerProps) {
-  useLayoutEffect(() => {
-    persistTheme(readStoredTheme());
-  }, []);
-
-  return <>{children}</>;
-}

package/src/components/ui/Timeline.tsx

@@ -1,60 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-export interface TimelineEvent {
-  id: string;
-  title: string;
-  description?: string;
-  time?: string;
-  icon?: ReactNode;
-  color?: string;
-}
-
-export interface TimelineProps extends ComponentPropsWithoutRef<"ol"> {
-  events: TimelineEvent[];
-  /** Alternate left/right layout on large screens */
-  alternate?: boolean;
-}
-
-export function Timeline({
-  events,
-  alternate = false,
-  className,
-  ...props
-}: TimelineProps) {
-  return (
-    <ol
-      className={cn("relative space-y-8", className)}
-      {...props}
-    >
-      {events.map((event, idx) => {
-        const align = alternate && idx % 2 !== 0 ? "lg:flex-row-reverse" : "";
-        return (
-          <li key={event.id} className={cn("relative flex gap-6", align)}>
-            <div
-              className={cn(
-                "relative z-10 flex h-12 w-12 shrink-0 items-center justify-center rounded-full ring-8 ring-ph-muted shadow-md",
-                event.color || "bg-ph-brand text-white",
-              )}
-            >
-              {event.icon}
-            </div>
-            <article className="flex-1 rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph">
-              <div className="flex flex-wrap items-baseline gap-3">
-                <h4 className="text-base font-semibold text-ph-ink">{event.title}</h4>
-                {event.time && (
-                  <time className="text-[11px] font-semibold uppercase tracking-wide text-ph-mutedtext">
-                    {event.time}
-                  </time>
-                )}
-              </div>
-              {event.description && (
-                <p className="mt-2 text-sm text-ph-subtle">{event.description}</p>
-              )}
-            </article>
-          </li>
-        );
-      })}
-    </ol>
-  );
-}

package/src/components/ui/Toast.tsx

@@ -1,70 +0,0 @@
-import type { ReactNode } from "react";
-import {
-  IconCancel,
-  IconCheckCircle,
-  IconClose,
-  IconErrorOutline,
-  IconExclamation,
-} from "@/components/icons";
-import { cn } from "@/lib/cn";
-
-export type ToastStatus = "info" | "success" | "warning" | "danger";
-
-export interface ToastProps {
-  status?: ToastStatus;
-  title: string;
-  description?: string;
-  onDismiss?: () => void;
-  className?: string;
-}
-
-const statusConfig: Record<ToastStatus, { icon: typeof IconErrorOutline; color: string; bg: string } > = {
-  info: { icon: IconErrorOutline, color: "text-ph-info", bg: "ph-toast-info" },
-  success: { icon: IconCheckCircle, color: "text-ph-success", bg: "ph-toast-success" },
-  warning: { icon: IconExclamation, color: "text-ph-warning", bg: "ph-toast-warning" },
-  danger: { icon: IconCancel, color: "text-ph-danger", bg: "ph-toast-danger" },
-};
-
-export function Toast({
-  status = "info",
-  title,
-  description,
-  onDismiss,
-  className,
-}: ToastProps) {
-  const config = statusConfig[status];
-  const Icon = config.icon;
-
-  return (
-    <div className={cn("ph-toast", config.bg, className)}>
-      <Icon className={cn("mt-0.5 h-5 w-5 shrink-0", config.color)} aria-hidden />
-      <div className="pr-8">
-        <div className="font-semibold">{title}</div>
-        {description && <p className="mt-1 text-xs text-ph-subtle">{description}</p>}
-      </div>
-      {onDismiss && (
-        <button
-          type="button"
-          aria-label={`Dismiss ${title}`}
-          className="absolute right-2 top-2 ph-btn ph-btn-ghost ph-btn-xs ph-btn-circle"
-          onClick={onDismiss}
-        >
-          <IconClose className="h-4 w-4" />
-        </button>
-      )}
-    </div>
-  );
-}
-
-export interface ToastStackProps {
-  children?: ReactNode;
-  className?: string;
-}
-
-export function ToastStack({ children, className }: ToastStackProps) {
-  return (
-    <div className={cn("ph-toast-stack", className)}>
-      {children}
-    </div>
-  );
-}

package/src/components/ui/Toggle.tsx

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

package/src/components/ui/Widget.tsx

@@ -1,31 +0,0 @@
-import { type ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-export interface WidgetProps {
-  title: ReactNode;
-  onClose?: () => void;
-  actions?: ReactNode;
-  children?: ReactNode;
-  className?: string;
-}
-
-export function Widget({ title, onClose, actions, children, className }: WidgetProps) {
-  return (
-    <div className={cn("ph-widget", className)}>
-      <div className="ph-widget__header">
-        <span className="ph-widget__title">{title}</span>
-        {actions}
-        {onClose && (
-          <button type="button" onClick={onClose} className="ph-widget__close" aria-label="Close">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-              <path d="M3 3l8 8M11 3l-8 8" />
-            </svg>
-          </button>
-        )}
-      </div>
-      <div className="ph-widget__content">{children}</div>
-    </div>
-  );
-}
-
-Widget.displayName = "Widget";