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

package/src/components/ui/Drawer.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { IconClose } from "@/components/icons";
+import { cn } from "@/lib/cn";
+import { Button } from "@/components/ui/Button";
+
+export type DrawerSide = "left" | "right";
+export type DrawerSize = "sm" | "md" | "lg";
+
+export interface DrawerProps {
+  open?: boolean;
+  onClose?: () => void;
+  title?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  side?: DrawerSide;
+  size?: DrawerSize;
+  className?: string;
+  showCloseButton?: boolean;
+}
+
+const sideMap: Record<DrawerSide, string> = {
+  left: "left-0 border-r",
+  right: "right-0 border-l",
+};
+
+const sizeMap: Record<DrawerSize, string> = {
+  sm: "w-[min(100%,18rem)]",
+  md: "w-[min(100%,22rem)]",
+  lg: "w-[min(100%,30rem)]",
+};
+
+export function Drawer({
+  open = false,
+  onClose,
+  title,
+  children,
+  footer,
+  side = "right",
+  size = "md",
+  className,
+  showCloseButton = true,
+}: DrawerProps) {
+  if (!open) return null;
+
+  return (
+    <>
+      <div className="fixed inset-0 z-[120] bg-black/45 backdrop-blur-[2px]" role="presentation" onClick={onClose} />
+      <aside
+        className={cn(
+          "fixed inset-y-0 z-[130] flex flex-col overflow-y-auto border-ph-border bg-ph-surface shadow-ph-md",
+          sideMap[side],
+          sizeMap[size],
+          className
+        )}
+      >
+        {(title || showCloseButton) && (
+          <header className="flex items-center justify-between border-b border-ph-border px-4 py-3">
+            <span className="text-sm font-bold text-ph-ink">{title}</span>
+            {showCloseButton && onClose && (
+              <Button variant="ghost" className="ph-btn-circle" onClick={onClose} aria-label="Close drawer">
+                <IconClose className="h-5 w-5" />
+              </Button>
+            )}
+          </header>
+        )}
+        <div className="flex-1">{children}</div>
+        {footer && <footer className="border-t border-ph-border px-4 py-3">{footer}</footer>}
+      </aside>
+    </>
+  );
+}

package/src/components/ui/DropdownMenu.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
+import type {
+  ButtonHTMLAttributes,
+  ComponentPropsWithoutRef,
+  HTMLAttributes,
+  ReactNode,
+} from "react";
+import { IconCheck, IconChevronDown } from "@/components/icons";
+import { cn } from "@/lib/cn";
+import { ButtonChrome } from "@/components/ui/ButtonChrome";
+import type { ButtonSize } from "@/components/ui/Button";
+
+type ContentProps = ComponentPropsWithoutRef<typeof DropdownPrimitive.Content>;
+
+export type DropdownAlign = NonNullable<ContentProps["align"]>;
+export type DropdownSide = NonNullable<ContentProps["side"]>;
+
+interface DropdownPlacementProps {
+  align?: DropdownAlign;
+  side?: DropdownSide;
+  sideOffset?: number;
+  alignOffset?: number;
+  collisionPadding?: ContentProps["collisionPadding"];
+  avoidCollisions?: boolean;
+  panelClassName?: string;
+}
+
+interface DropdownOpenProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  modal?: boolean;
+}
+
+export interface DropdownMenuProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children">,
+    DropdownPlacementProps,
+    DropdownOpenProps {
+  /** Custom non-interactive trigger node, such as an avatar or icon chip. */
+  trigger: ReactNode;
+  /** Accessible name when the trigger has no visible text. */
+  "aria-label": string;
+  children: ReactNode;
+  disabled?: boolean;
+}
+
+export interface DropdownButtonProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children">,
+    DropdownPlacementProps,
+    DropdownOpenProps {
+  /** Visible button label. */
+  label: string;
+  variant?: "primary" | "secondary" | "accent";
+  outline?: boolean;
+  size?: ButtonSize;
+  /** Split control styling with a divider before the trailing chevron. */
+  split?: boolean;
+  icon?: ReactNode;
+  /** Defaults to a chevron when omitted. */
+  sideIcon?: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+  /** Overrides the accessible name; defaults to `label`. */
+  "aria-label"?: string;
+}
+
+export type DropdownItemProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export type DropdownRadioGroupProps = ComponentPropsWithoutRef<typeof DropdownPrimitive.RadioGroup>;
+export type DropdownRadioItemProps = ComponentPropsWithoutRef<typeof DropdownPrimitive.RadioItem>;
+
+const sizeClass: Record<ButtonSize, string> = {
+  xs: "ph-btn-xs",
+  sm: "ph-btn-sm",
+  md: "",
+  lg: "ph-btn-lg",
+};
+
+const variantClass = {
+  primary: "ph-btn-primary",
+  secondary: "ph-btn-secondary",
+  accent: "ph-btn-accent",
+} as const;
+
+function DropdownContent({
+  children,
+  align = "start",
+  side = "bottom",
+  sideOffset = 7,
+  alignOffset = 0,
+  collisionPadding = 8,
+  avoidCollisions = true,
+  panelClassName,
+}: DropdownPlacementProps & { children: ReactNode }) {
+  return (
+    <DropdownPrimitive.Portal>
+      <DropdownPrimitive.Content
+        className={cn("ph-dropdown-panel", panelClassName)}
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+        avoidCollisions={avoidCollisions}
+        sticky="partial"
+      >
+        {children}
+        <DropdownPrimitive.Arrow className="ph-dropdown-arrow" width={12} height={6} />
+      </DropdownPrimitive.Content>
+    </DropdownPrimitive.Portal>
+  );
+}
+
+/** Collision-aware menu that flips sides and shifts its alignment to remain visible. */
+export function DropdownMenu({
+  trigger,
+  children,
+  align,
+  side,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  avoidCollisions,
+  className,
+  panelClassName,
+  "aria-label": ariaLabel,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+  disabled,
+  ...props
+}: DropdownMenuProps) {
+  return (
+    <div className={cn("ph-dropdown", className)} {...props}>
+      <DropdownPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        modal={modal}
+      >
+        <DropdownPrimitive.Trigger asChild disabled={disabled}>
+          <button type="button" className="ph-dropdown-trigger" aria-label={ariaLabel}>
+            {trigger}
+          </button>
+        </DropdownPrimitive.Trigger>
+        <DropdownContent
+          align={align}
+          side={side}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          collisionPadding={collisionPadding}
+          avoidCollisions={avoidCollisions}
+          panelClassName={panelClassName}
+        >
+          {children}
+        </DropdownContent>
+      </DropdownPrimitive.Root>
+    </div>
+  );
+}
+
+/** Tactile dropdown trigger backed by the same adaptive menu positioning. */
+export function DropdownButton({
+  label,
+  variant = "secondary",
+  outline = false,
+  size = "md",
+  split = false,
+  icon,
+  sideIcon,
+  children,
+  align,
+  side,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  avoidCollisions,
+  className,
+  panelClassName,
+  "aria-label": ariaLabel,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+  disabled,
+  ...props
+}: DropdownButtonProps) {
+  const trailing = sideIcon ?? <IconChevronDown className="h-4 w-4" aria-hidden />;
+
+  return (
+    <div className={cn("ph-dropdown", className)} {...props}>
+      <DropdownPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        modal={modal}
+      >
+        <DropdownPrimitive.Trigger asChild disabled={disabled}>
+          <button
+            type="button"
+            disabled={disabled}
+            className={cn(
+              "ph-btn ph-btn-raised ph-dropdown-button",
+              variantClass[variant],
+              outline && "ph-btn-outline",
+              sizeClass[size],
+              split && "ph-btn-split",
+            )}
+            aria-label={ariaLabel}
+          >
+            <ButtonChrome label={label} icon={icon} sideIcon={trailing} split={split} />
+          </button>
+        </DropdownPrimitive.Trigger>
+        <DropdownContent
+          align={align}
+          side={side}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          collisionPadding={collisionPadding}
+          avoidCollisions={avoidCollisions}
+          panelClassName={panelClassName}
+        >
+          {children}
+        </DropdownContent>
+      </DropdownPrimitive.Root>
+    </div>
+  );
+}
+
+export function DropdownItem({ className, children, disabled, ...props }: DropdownItemProps) {
+  return (
+    <DropdownPrimitive.Item asChild disabled={disabled}>
+      <button
+        type="button"
+        disabled={disabled}
+        className={cn("ph-dropdown-item w-full text-left", className)}
+        {...props}
+      >
+        {children}
+      </button>
+    </DropdownPrimitive.Item>
+  );
+}
+
+export function DropdownRadioGroup(props: DropdownRadioGroupProps) {
+  return <DropdownPrimitive.RadioGroup {...props} />;
+}
+
+export function DropdownRadioItem({ className, children, ...props }: DropdownRadioItemProps) {
+  return (
+    <DropdownPrimitive.RadioItem className={cn("ph-dropdown-item ph-dropdown-radio-item", className)} {...props}>
+      <span className="ph-dropdown-item-indicator" aria-hidden>
+        <DropdownPrimitive.ItemIndicator>
+          <IconCheck className="h-3.5 w-3.5" />
+        </DropdownPrimitive.ItemIndicator>
+      </span>
+      <span>{children}</span>
+    </DropdownPrimitive.RadioItem>
+  );
+}

package/src/components/ui/EmptyState.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+
+interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center rounded-xl border border-dashed border-ph-border bg-ph-muted/50 px-8 py-16 text-center",
+        className
+      )}
+    >
+      {icon && (
+        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext">
+          {icon}
+        </div>
+      )}
+      <h3 className="text-base font-semibold text-ph-ink">{title}</h3>
+      {description && (
+        <p className="mt-1 max-w-sm text-sm text-ph-subtle">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}

package/src/components/ui/FilterBar.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { IconArrowDown, IconTuning } from "@/components/icons";
+import { cn } from "@/lib/cn";
+import {
+  DropdownMenu,
+  DropdownRadioGroup,
+  DropdownRadioItem,
+  type DropdownAlign,
+} from "@/components/ui/DropdownMenu";
+
+export interface FilterMenuOption {
+  value: string;
+  label: ReactNode;
+  /** Plain-text label used for typeahead and accessible trigger naming. */
+  textValue?: string;
+  disabled?: boolean;
+}
+
+export interface FilterMenuProps {
+  label: string;
+  value?: string;
+  options: readonly FilterMenuOption[];
+  onValueChange: (value: string) => void;
+  placeholder?: ReactNode;
+  align?: DropdownAlign;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface SortMenuProps extends Omit<FilterMenuProps, "placeholder"> {
+  direction?: "ascending" | "descending";
+}
+
+export interface FilterBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  children: ReactNode;
+  label?: string;
+  onClear?: () => void;
+  clearLabel?: string;
+  resultCount?: ReactNode;
+}
+
+export function FilterBar({
+  children,
+  label = "Filters and sorting",
+  onClear,
+  clearLabel = "Clear all",
+  resultCount,
+  className,
+  ...props
+}: FilterBarProps) {
+  return (
+    <div className={cn("ph-filter-bar", className)} {...props}>
+      <div className="ph-filter-bar__controls" role="group" aria-label={label}>
+        {children}
+        {onClear ? (
+          <button type="button" className="ph-filter-bar__clear" onClick={onClear}>
+            {clearLabel}
+          </button>
+        ) : null}
+      </div>
+      {resultCount != null ? (
+        <output className="ph-filter-bar__results" aria-live="polite">
+          {resultCount}
+        </output>
+      ) : null}
+    </div>
+  );
+}
+
+export function FilterMenu({
+  label,
+  value,
+  options,
+  onValueChange,
+  placeholder = "Any",
+  align = "start",
+  disabled,
+  className,
+}: FilterMenuProps) {
+  const selected = options.find((option) => option.value === value);
+  const displayValue = selected?.label ?? placeholder;
+  const accessibleValue = selected ? getOptionText(selected) : String(placeholder);
+
+  return (
+    <DropdownMenu
+      aria-label={`${label}: ${accessibleValue}`}
+      align={align}
+      disabled={disabled}
+      className={className}
+      trigger={
+        <span className={cn("ph-filter-menu-trigger", selected && "ph-filter-menu-trigger--active")}>
+          <IconTuning className="h-3.5 w-3.5" aria-hidden />
+          <span className="ph-filter-menu-trigger__label">{label}</span>
+          <span className="ph-filter-menu-trigger__value">{displayValue}</span>
+        </span>
+      }
+    >
+      <DropdownRadioGroup value={value} onValueChange={onValueChange}>
+        {options.map((option) => (
+          <DropdownRadioItem
+            key={option.value}
+            value={option.value}
+            textValue={getOptionText(option)}
+            disabled={option.disabled}
+          >
+            {option.label}
+          </DropdownRadioItem>
+        ))}
+      </DropdownRadioGroup>
+    </DropdownMenu>
+  );
+}
+
+export function SortMenu({
+  label,
+  value,
+  options,
+  onValueChange,
+  direction = "descending",
+  align = "end",
+  disabled,
+  className,
+}: SortMenuProps) {
+  const selected = options.find((option) => option.value === value);
+
+  return (
+    <DropdownMenu
+      aria-label={`${label}: ${selected ? getOptionText(selected) : "Choose sort order"}`}
+      align={align}
+      disabled={disabled}
+      className={className}
+      trigger={
+        <span className="ph-filter-menu-trigger ph-sort-menu-trigger">
+          <IconArrowDown
+            className={cn("h-3.5 w-3.5", direction === "ascending" && "rotate-180")}
+            aria-hidden
+          />
+          <span className="ph-filter-menu-trigger__label">{label}</span>
+          {selected ? <span className="ph-filter-menu-trigger__value">{selected.label}</span> : null}
+        </span>
+      }
+    >
+      <DropdownRadioGroup value={value} onValueChange={onValueChange}>
+        {options.map((option) => (
+          <DropdownRadioItem
+            key={option.value}
+            value={option.value}
+            textValue={getOptionText(option)}
+            disabled={option.disabled}
+          >
+            {option.label}
+          </DropdownRadioItem>
+        ))}
+      </DropdownRadioGroup>
+    </DropdownMenu>
+  );
+}
+
+function getOptionText(option: FilterMenuOption) {
+  if (option.textValue) return option.textValue;
+  if (typeof option.label === "string" || typeof option.label === "number") return String(option.label);
+  return option.value;
+}

package/src/components/ui/FilterChips.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { IconClose } from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export interface FilterChip {
+  id: string;
+  label: ReactNode;
+  value?: ReactNode;
+  active?: boolean;
+  removeLabel?: string;
+}
+
+export interface FilterChipsProps {
+  chips: readonly FilterChip[];
+  onToggle?: (id: string) => void;
+  onRemove?: (id: string) => void;
+  className?: string;
+  "aria-label"?: string;
+}
+
+export function FilterChips({
+  chips,
+  onToggle,
+  onRemove,
+  className,
+  "aria-label": ariaLabel = "Applied filters",
+}: FilterChipsProps) {
+  return (
+    <div className={cn("ph-filter-chips", className)} role="group" aria-label={ariaLabel}>
+      {chips.map((chip) => {
+        const label = chip.removeLabel ?? getChipText(chip);
+        const content = (
+          <>
+            <span className="ph-filter-chip__label">{chip.label}</span>
+            {chip.value != null ? <span className="ph-filter-chip__value">{chip.value}</span> : null}
+          </>
+        );
+
+        return (
+          <span
+            key={chip.id}
+            className={cn("ph-filter-chip", chip.active && "ph-filter-chip--active")}
+            data-state={chip.active ? "on" : "off"}
+          >
+            {onToggle ? (
+              <button
+                type="button"
+                className="ph-filter-chip__main"
+                aria-pressed={Boolean(chip.active)}
+                onClick={() => onToggle(chip.id)}
+              >
+                {content}
+              </button>
+            ) : (
+              <span className="ph-filter-chip__main">{content}</span>
+            )}
+            {chip.active && onRemove ? (
+              <button
+                type="button"
+                className="ph-filter-chip__remove"
+                aria-label={`Remove ${label} filter`}
+                onClick={() => onRemove(chip.id)}
+              >
+                <IconClose className="h-3 w-3" aria-hidden />
+              </button>
+            ) : null}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function getChipText(chip: FilterChip) {
+  const label = typeof chip.label === "string" || typeof chip.label === "number" ? String(chip.label) : chip.id;
+  const value = typeof chip.value === "string" || typeof chip.value === "number" ? String(chip.value) : null;
+  return value ? `${label}: ${value}` : label;
+}

package/src/components/ui/FilterControls.tsx

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+import { FilterBar, type FilterBarProps } from "@/components/ui/FilterBar";
+import { FilterChips, type FilterChipsProps } from "@/components/ui/FilterChips";
+
+export interface FilterControlsProps extends ComponentPropsWithoutRef<"div"> {
+  children: ReactNode;
+  barProps?: Omit<FilterBarProps, "children">;
+  chipsProps?: FilterChipsProps;
+  emptyState?: ReactNode;
+}
+
+/** Combines filter controls and their applied chips without owning filter state. */
+export function FilterControls({
+  children,
+  barProps,
+  chipsProps,
+  emptyState,
+  className,
+  ...props
+}: FilterControlsProps) {
+  const hasChips = Boolean(chipsProps?.chips.length);
+
+  return (
+    <div className={cn("ph-filter-controls", className)} {...props}>
+      <FilterBar {...barProps}>{children}</FilterBar>
+      {hasChips && chipsProps ? <FilterChips {...chipsProps} /> : emptyState ?? null}
+    </div>
+  );
+}