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

package/src/components/ui/FormField.tsx

@@ -0,0 +1,69 @@
+import { useId, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface FormFieldControlProps {
+  id: string;
+  "aria-describedby"?: string;
+  "aria-errormessage"?: string;
+  "aria-invalid"?: true;
+}
+
+export interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  controlId?: string;
+  label?: ReactNode;
+  hideLabel?: boolean;
+  helperText?: ReactNode;
+  error?: ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  children: ReactNode | ((controlProps: FormFieldControlProps) => ReactNode);
+}
+
+export function FormField({
+  controlId,
+  label,
+  hideLabel = false,
+  helperText,
+  error,
+  required = false,
+  disabled = false,
+  children,
+  className,
+  ...props
+}: FormFieldProps) {
+  const generatedId = useId();
+  const id = controlId ?? generatedId;
+  const descriptionId = helperText && !error ? `${id}-description` : undefined;
+  const errorId = error ? `${id}-error` : undefined;
+  const controlProps: FormFieldControlProps = {
+    id,
+    "aria-describedby": descriptionId,
+    "aria-errormessage": errorId,
+    "aria-invalid": error ? true : undefined,
+  };
+
+  return (
+    <div className={cn("ph-field", className)} {...props}>
+      {label ? (
+        <label
+          htmlFor={id}
+          className={cn("ph-label", hideLabel && "sr-only", disabled && "opacity-50")}
+        >
+          {label}
+          {required ? <span aria-hidden="true"> *</span> : null}
+        </label>
+      ) : null}
+      {typeof children === "function" ? children(controlProps) : children}
+      {descriptionId ? (
+        <p id={descriptionId} className="mt-1 text-xs text-ph-subtle">
+          {helperText}
+        </p>
+      ) : null}
+      {errorId ? (
+        <p id={errorId} className="mt-1 text-xs font-medium text-ph-danger">
+          {error}
+        </p>
+      ) : null}
+    </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,385 @@
+import { forwardRef, useId, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { FormField } from "@/components/ui/FormField";
+import { IconCheck } from "@/components/icons";
+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",
+};
+
+function joinIds(...ids: Array<string | undefined>) {
+  const value = ids.filter(Boolean).join(" ");
+  return value || undefined;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
+  id: idProp,
+  label,
+  hideLabel = false,
+  error,
+  helperText,
+  size = "md",
+  variant = "default",
+  className,
+  wrapperClassName,
+  disabled,
+  required,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hasError = Boolean(error);
+
+  return (
+    <FormField
+      controlId={id}
+      label={label}
+      hideLabel={hideLabel}
+      helperText={helperText}
+      error={error}
+      required={required}
+      disabled={disabled}
+      className={wrapperClassName}
+    >
+      {(fieldProps) => (
+        <input
+          {...fieldProps}
+          ref={ref}
+          disabled={disabled}
+          required={required}
+          aria-describedby={joinIds(ariaDescribedBy, fieldProps["aria-describedby"])}
+          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}
+        />
+      )}
+    </FormField>
+  );
+});
+
+Input.displayName = "Input";
+
+export interface SelectProps extends Omit<ComponentPropsWithoutRef<"select">, "size"> {
+  label?: string;
+  hideLabel?: boolean;
+  error?: string;
+  helperText?: string;
+  size?: InputSize;
+  wrapperClassName?: string;
+  children: ReactNode;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select({
+  id: idProp,
+  label,
+  hideLabel = false,
+  error,
+  helperText,
+  size = "md",
+  className,
+  wrapperClassName,
+  disabled,
+  children,
+  required,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hasError = Boolean(error);
+
+  return (
+    <FormField controlId={id} label={label} hideLabel={hideLabel} helperText={helperText} error={error} required={required} disabled={disabled} className={wrapperClassName}>
+      {(fieldProps) => (
+        <select
+          {...fieldProps}
+          ref={ref}
+          disabled={disabled}
+          required={required}
+          aria-describedby={joinIds(ariaDescribedBy, fieldProps["aria-describedby"])}
+          className={cn(
+            "ph-select w-full",
+            sizeMap[size],
+            hasError && "ph-input-error",
+            disabled && "cursor-not-allowed opacity-60",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </select>
+      )}
+    </FormField>
+  );
+});
+
+Select.displayName = "Select";
+
+export interface TextareaProps extends Omit<ComponentPropsWithoutRef<"textarea">, "size"> {
+  label?: string;
+  hideLabel?: boolean;
+  error?: string;
+  helperText?: string;
+  size?: InputSize;
+  wrapperClassName?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({
+  id: idProp,
+  label,
+  hideLabel = false,
+  error,
+  helperText,
+  size = "md",
+  className,
+  wrapperClassName,
+  disabled,
+  required,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hasError = Boolean(error);
+
+  return (
+    <FormField controlId={id} label={label} hideLabel={hideLabel} helperText={helperText} error={error} required={required} disabled={disabled} className={wrapperClassName}>
+      {(fieldProps) => (
+        <textarea
+          {...fieldProps}
+          ref={ref}
+          disabled={disabled}
+          required={required}
+          aria-describedby={joinIds(ariaDescribedBy, fieldProps["aria-describedby"])}
+          className={cn(
+            "ph-textarea w-full",
+            sizeMap[size],
+            hasError && "ph-input-error",
+            disabled && "cursor-not-allowed opacity-60",
+            className
+          )}
+          {...props}
+        />
+      )}
+    </FormField>
+  );
+});
+
+Textarea.displayName = "Textarea";
+
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: ReactNode;
+  error?: string;
+  helperText?: string;
+  wrapperClassName?: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox({
+  id: idProp,
+  label,
+  error,
+  helperText,
+  className,
+  wrapperClassName,
+  disabled,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hasError = Boolean(error);
+  const descriptionId = helperText && !hasError ? `${id}-description` : undefined;
+  const errorId = error ? `${id}-error` : undefined;
+
+  return (
+    <div className={cn("ph-control-row", wrapperClassName)}>
+      <span className="ph-checkbox-wrap">
+        <input
+          ref={ref}
+          id={id}
+          type="checkbox"
+          disabled={disabled}
+          aria-invalid={hasError || undefined}
+          aria-describedby={joinIds(ariaDescribedBy, descriptionId)}
+          aria-errormessage={errorId}
+          className={cn(
+            "ph-checkbox",
+            hasError && "border-ph-danger",
+            disabled && "cursor-not-allowed opacity-60",
+            className
+          )}
+          {...props}
+        />
+        <IconCheck className="ph-checkbox-icon" aria-hidden />
+      </span>
+      <div className="ph-control-copy">
+        <label htmlFor={id} className={cn("cursor-pointer", disabled && "opacity-60")}>
+          {label}
+        </label>
+        {descriptionId ? <p id={descriptionId} className="text-xs text-ph-subtle">{helperText}</p> : null}
+        {errorId ? <p id={errorId} className="text-xs font-medium text-ph-danger">{error}</p> : null}
+      </div>
+    </div>
+  );
+});
+
+Checkbox.displayName = "Checkbox";
+
+export interface RadioProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: ReactNode;
+  wrapperClassName?: string;
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio({
+  id: idProp,
+  label,
+  className,
+  wrapperClassName,
+  disabled,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+
+  return (
+    <div className={cn("ph-control-row", wrapperClassName, disabled && "opacity-60")}>
+      <input
+        ref={ref}
+        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>
+  );
+});
+
+Radio.displayName = "Radio";
+
+export interface ToggleProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: ReactNode;
+  wrapperClassName?: string;
+}
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle({
+  id: idProp,
+  label,
+  className,
+  wrapperClassName,
+  disabled,
+  ...props
+}, ref) {
+  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
+        ref={ref}
+        id={id}
+        type="checkbox"
+        role="switch"
+        disabled={disabled}
+        className={cn("ph-toggle", disabled && "cursor-not-allowed", className)}
+        {...props}
+      />
+    </label>
+  );
+});
+
+Toggle.displayName = "Toggle";
+
+export interface RangeProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: string;
+  minLabel?: string;
+  maxLabel?: string;
+  valueLabel?: string;
+  wrapperClassName?: string;
+}
+
+export const Range = forwardRef<HTMLInputElement, RangeProps>(function Range({
+  id: idProp,
+  label,
+  minLabel,
+  maxLabel,
+  valueLabel,
+  wrapperClassName,
+  className,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+
+  return (
+    <div className={cn("ph-field", wrapperClassName)}>
+      {label && <label htmlFor={id} className="ph-label">{label}</label>}
+      <input ref={ref} id={id} 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>
+  );
+});
+
+Range.displayName = "Range";
+
+export interface FileUploadProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+  label?: string;
+  prompt?: string;
+  wrapperClassName?: string;
+}
+
+export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(function FileUpload({
+  id: idProp,
+  label,
+  prompt = "Drop file or browse",
+  wrapperClassName,
+  className,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+
+  return (
+    <div className={cn("ph-field", wrapperClassName)}>
+      {label && <label htmlFor={id} className="ph-label">{label}</label>}
+      <label htmlFor={id} className="ph-file-upload">
+        <input ref={ref} id={id} type="file" className={cn("sr-only", className)} {...props} />
+        {prompt}
+      </label>
+    </div>
+  );
+});
+
+FileUpload.displayName = "FileUpload";

package/src/components/ui/Kbd.tsx

@@ -0,0 +1,113 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type KbdVariant = "shortcut" | "key" | "token";
+export type KbdPlatform = "text" | "mac" | "windows";
+
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+  variant?: KbdVariant;
+  keys?: readonly ReactNode[];
+  platform?: KbdPlatform;
+  separator?: ReactNode;
+  children?: ReactNode;
+}
+
+const platformLabels: Record<KbdPlatform, Record<string, string>> = {
+  text: {
+    command: "Command",
+    cmd: "Command",
+    option: "Option",
+    alt: "Alt",
+    control: "Control",
+    ctrl: "Control",
+    shift: "Shift",
+  },
+  mac: {
+    command: "⌘",
+    cmd: "⌘",
+    option: "⌥",
+    alt: "⌥",
+    control: "⌃",
+    ctrl: "⌃",
+    shift: "⇧",
+  },
+  windows: {
+    command: "Win",
+    cmd: "Win",
+    option: "Alt",
+    alt: "Alt",
+    control: "Ctrl",
+    ctrl: "Ctrl",
+    shift: "Shift",
+  },
+};
+
+const spokenLabels: Record<string, string> = {
+  "⌘": "Command",
+  "⌥": "Option",
+  "⌃": "Control",
+  "⇧": "Shift",
+  "↵": "Enter",
+  "⏎": "Enter",
+  "⌫": "Backspace",
+  "⎋": "Escape",
+};
+
+export function Kbd({
+  variant = "shortcut",
+  keys,
+  platform = "text",
+  separator,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: KbdProps) {
+  if (variant === "token") {
+    return (
+      <code className={cn("ph-code-token ph-kbd", className)} aria-label={ariaLabel} {...props}>
+        {children}
+      </code>
+    );
+  }
+
+  const sourceKeys = keys?.length ? keys : children != null ? [children] : [];
+  const displayKeys = sourceKeys.map((key) => formatKey(key, platform));
+  const accessibleLabel = ariaLabel ?? getShortcutLabel(displayKeys);
+
+  if (variant === "key") {
+    return (
+      <kbd className={cn("ph-keycap", className)} aria-label={accessibleLabel} {...props}>
+        {displayKeys[0]}
+      </kbd>
+    );
+  }
+
+  return (
+    <kbd className={cn("ph-shortcut-group ph-keycap", className)} aria-label={accessibleLabel} {...props}>
+      {displayKeys.map((key, index) => (
+        <span key={index} className="contents">
+          {index > 0 && separator != null ? <span className="ph-shortcut-separator" aria-hidden="true">{separator}</span> : null}
+          <span className="ph-shortcut-key" aria-hidden={accessibleLabel ? true : undefined}>{key}</span>
+        </span>
+      ))}
+    </kbd>
+  );
+}
+
+function formatKey(key: ReactNode, platform: KbdPlatform) {
+  if (typeof key !== "string") return key;
+  return platformLabels[platform][key.toLowerCase()] ?? key;
+}
+
+function getShortcutLabel(keys: ReactNode[]) {
+  const labels = keys.map((key) => {
+    if (typeof key !== "string" && typeof key !== "number") return null;
+    const value = String(key);
+    return spokenLabels[value] ?? value;
+  });
+
+  return labels.every((label): label is string => label != null)
+    ? labels.join(" + ")
+    : undefined;
+}