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

package/src/components/ui/Calendar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { IconChevronLeft, IconChevronRight } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
 interface CalendarProps {
@@ -64,11 +65,10 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
         <button
           type="button"
           onClick={prevMonth}
+          aria-label="Previous month"
           className="rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink"
         >
-          <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M15 18l-6-6 6-6" />
-          </svg>
+          <IconChevronLeft className="h-5 w-5" aria-hidden />
         </button>
         <span className="text-sm font-semibold text-ph-ink">
           {monthNames[month]} {year}
@@ -76,11 +76,10 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
         <button
           type="button"
           onClick={nextMonth}
+          aria-label="Next month"
           className="rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink"
         >
-          <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M9 18l6-6-6-6" />
-          </svg>
+          <IconChevronRight className="h-5 w-5" aria-hidden />
         </button>
       </div>
 
@@ -99,7 +98,7 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
                 className={cn(
                   "flex h-full w-full items-center justify-center rounded-lg text-sm transition-colors",
                   isSelected(day)
-                    ? "bg-ph-brand font-semibold text-white shadow-ph"
+                    ? "bg-ph-brand font-semibold text-[var(--ph-on-accent)] shadow-ph"
                     : isToday(day)
                     ? "bg-ph-muted font-semibold text-ph-brand ring-1 ring-ph-brand/30"
                     : "text-ph-ink hover:bg-ph-muted"

package/src/components/ui/Card.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from "react";
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export type CardVariant = "default" | "outlined" | "elevated" | "highlighted";
 
-export interface CardProps {
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   children?: ReactNode;
   title?: ReactNode;
   description?: ReactNode;
@@ -13,16 +13,18 @@ export interface CardProps {
   variant?: CardVariant;
   className?: string;
   bodyClassName?: string;
+  interactive?: boolean;
+  titleAs?: "h2" | "h3" | "h4";
 }
 
 const variantMap: Record<CardVariant, string> = {
-  default: "bg-ph-surface",
-  outlined: "border-2 border-ph-border bg-ph-surface",
-  elevated: "bg-ph-surface shadow-ph-md",
-  highlighted: "border border-ph-brand/35 bg-orange-50/40 shadow-ph",
+  default: "",
+  outlined: "border-2 border-ph-border",
+  elevated: "ph-card-elevated",
+  highlighted: "ph-card-highlighted",
 };
 
-export function Card({
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card({
   children,
   title,
   description,
@@ -32,19 +34,25 @@ export function Card({
   variant = "default",
   className,
   bodyClassName,
-}: CardProps) {
+  interactive = false,
+  titleAs: Title = "h3",
+  ...props
+}, ref) {
   return (
     <div
+      ref={ref}
       className={cn(
         "ph-card",
         variantMap[variant],
+        interactive && "ph-card-interactive",
         className
       )}
+      {...props}
     >
-      {media && <div className="-mx-6 -mt-6 mb-4">{media}</div>}
+      {media && <div className="ph-card-media">{media}</div>}
       <div className={cn("ph-card-body", bodyClassName)}>
         {title && (
-          <h3 className="ph-card-title">{title}</h3>
+          <Title className="ph-card-title">{title}</Title>
         )}
         {description && (
           <p className="text-sm text-ph-subtle">{description}</p>
@@ -57,4 +65,6 @@ export function Card({
       )}
     </div>
   );
-}
+});
+
+Card.displayName = "Card";

package/src/components/ui/CollapsibleSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
+import { IconChevronDown } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
 interface CollapsibleSectionProps {
@@ -12,31 +13,30 @@ interface CollapsibleSectionProps {
 
 export function CollapsibleSection({ title, children, defaultOpen = true, id }: CollapsibleSectionProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
+  const generatedId = useId();
+  const contentId = `${id ?? generatedId}-content`;
 
   return (
     <section id={id} className="scroll-mt-20">
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-controls={contentId}
         className="mb-6 flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-muted px-5 py-4 text-left transition hover:bg-ph-muted/80"
       >
         <span className="text-lg font-bold text-ph-ink">{title}</span>
-        <svg
+        <IconChevronDown
           className={cn(
             "h-5 w-5 text-ph-subtle transition-transform duration-200",
             isOpen && "rotate-180"
           )}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M6 9l6 6 6-6" />
-        </svg>
+          aria-hidden
+        />
       </button>
       <div
+        id={contentId}
+        aria-hidden={!isOpen}
         className={cn(
           "overflow-hidden transition-all duration-300",
           isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0"

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;
+}