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

package/src/components/ui/DropdownMenu.tsx

@@ -1,39 +1,75 @@
-import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
-import { IconChevronDown } from "@/components/icons";
+"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";
 
-export type DropdownAlign = "start" | "end";
+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 HTMLAttributes<HTMLDetailsElement> {
-  /** Custom trigger node (avatar, icon chip, etc.) */
+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 trigger has no visible text */
+  /** Accessible name when the trigger has no visible text. */
   "aria-label": string;
   children: ReactNode;
-  align?: DropdownAlign;
-  panelClassName?: string;
+  disabled?: boolean;
 }
 
-export interface DropdownButtonProps extends Omit<HTMLAttributes<HTMLDetailsElement>, "children"> {
-  /** Visible button label */
+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 (Run ▾) — divider before trailing chevron */
+  /** Split control styling with a divider before the trailing chevron. */
   split?: boolean;
   icon?: ReactNode;
-  /** Defaults to chevron when omitted */
+  /** Defaults to a chevron when omitted. */
   sideIcon?: ReactNode;
   children: ReactNode;
-  align?: DropdownAlign;
-  panelClassName?: string;
-  /** Overrides accessible name; defaults to `label` */
+  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",
@@ -47,38 +83,85 @@ const variantClass = {
   accent: "ph-btn-accent",
 } as const;
 
-function dropdownPanelClass(align: DropdownAlign, panelClassName?: string) {
-  return cn(
-    "ph-dropdown-panel absolute top-full z-50 mt-0",
-    align === "end" ? "right-0" : "left-0",
-    panelClassName,
+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>
   );
 }
 
-/** Generic `<details>` menu — pass any trigger (avatar, icon chip, etc.). */
+/** Collision-aware menu that flips sides and shifts its alignment to remain visible. */
 export function DropdownMenu({
   trigger,
   children,
-  align = "start",
+  align,
+  side,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  avoidCollisions,
   className,
   panelClassName,
   "aria-label": ariaLabel,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+  disabled,
   ...props
 }: DropdownMenuProps) {
   return (
-    <details className={cn("relative", className)} {...props}>
-      <summary
-        className="cursor-pointer list-none [&::-webkit-details-marker]:hidden"
-        aria-label={ariaLabel}
+    <div className={cn("ph-dropdown", className)} {...props}>
+      <DropdownPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        modal={modal}
       >
-        {trigger}
-      </summary>
-      <div className={dropdownPanelClass(align, panelClassName)}>{children}</div>
-    </details>
+        <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>
   );
 }
 
-/** Lemon-styled dropdown trigger (primary / secondary / accent) with labelled chrome. */
+/** Tactile dropdown trigger backed by the same adaptive menu positioning. */
 export function DropdownButton({
   label,
   variant = "secondary",
@@ -88,51 +171,92 @@ export function DropdownButton({
   icon,
   sideIcon,
   children,
-  align = "start",
+  align,
+  side,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  avoidCollisions,
   className,
   panelClassName,
   "aria-label": ariaLabel,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+  disabled,
   ...props
 }: DropdownButtonProps) {
-  const usesLemonChrome = variant === "primary" || variant === "secondary";
-  const chevron = <IconChevronDown className="h-4 w-4" aria-hidden />;
-  const trailing = sideIcon ?? chevron;
+  const trailing = sideIcon ?? <IconChevronDown className="h-4 w-4" aria-hidden />;
 
   return (
-    <details className={cn("relative", className)} {...props}>
-      <summary
-        className={cn(
-          "ph-btn cursor-pointer list-none [&::-webkit-details-marker]:hidden",
-          variantClass[variant],
-          outline && "ph-btn-outline",
-          sizeClass[size],
-          split && "ph-btn-split",
-        )}
-        aria-label={ariaLabel ?? label}
+    <div className={cn("ph-dropdown", className)} {...props}>
+      <DropdownPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        modal={modal}
       >
-        {usesLemonChrome ? (
-          <ButtonChrome label={label} icon={icon} sideIcon={trailing} split={split} />
-        ) : (
-          <>
-            {icon != null ? <span className="ph-btn-icon">{icon}</span> : null}
-            <span className="ph-btn-label">{label}</span>
-            <span className="ph-btn-side-icon">{trailing}</span>
-          </>
-        )}
-      </summary>
-      <div className={dropdownPanelClass(align, panelClassName)}>{children}</div>
-    </details>
+        <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,
-  ...props
-}: ButtonHTMLAttributes<HTMLButtonElement>) {
+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 (
-    <button type="button" className={cn("ph-dropdown-item w-full text-left", className)} {...props}>
-      {children}
-    </button>
+    <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/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

@@ -1,50 +1,80 @@
 "use client";
 
-import { cn } from "@/lib/cn";
+import type { ReactNode } from "react";
 import { IconClose } from "@/components/icons";
+import { cn } from "@/lib/cn";
 
-interface FilterChip {
+export interface FilterChip {
   id: string;
-  label: string;
+  label: ReactNode;
+  value?: ReactNode;
   active?: boolean;
+  removeLabel?: string;
 }
 
-interface FilterChipsProps {
-  chips: FilterChip[];
-  onToggle: (id: string) => void;
-  onRemove: (id: string) => void;
+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 }: FilterChipsProps) {
+export function FilterChips({
+  chips,
+  onToggle,
+  onRemove,
+  className,
+  "aria-label": ariaLabel = "Applied filters",
+}: 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 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>
+  );
+}