df5dd3a70e
- Adopt BoardUI (Pro init): theme tokens, Inter, .dark mode, Button, SegmentedControl, Meter, Skeleton and ThemeToggle; remap the app's color aliases onto BoardUI tokens and swap lucide for Remix icons - Retint BoardUI's neutral ramp to cool slate with a salmon accent; drop the dotted background; raise muted text contrast - Simplify the landing page and remove the overlap explorer - Planner: explicit "I have this" toggle on grocery lines, pantry panel above the menu with the staples list spelled out, sticky aisle header fix, and a "Download PDF" plan export (jsPDF, lazy-loaded) - Recipes: replace the family cabbage soup with Cade's Cabbage Soup (adds Bone-In Ham Steak to the catalog); remove Ham, Bean & Cabbage Soup - Remove unused BoardUI components, dependencies and exports Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
import { RiCheckLine } from "@remixicon/react";
|
|
import type { ReactNode } from "react";
|
|
import { cx } from "@/utils/cx";
|
|
|
|
// A pill-shaped on/off filter toggle on BoardUI tokens.
|
|
// Shows a check when pressed so state never relies on color alone.
|
|
|
|
interface ChipProps {
|
|
pressed: boolean;
|
|
onClick: () => void;
|
|
children: ReactNode;
|
|
/** "sm" for dense filter rows, "md" for settings panels. */
|
|
size?: "sm" | "md";
|
|
/** Dashed outline when off: tells a second filter row apart from the first. */
|
|
dashed?: boolean;
|
|
}
|
|
|
|
export function Chip({ pressed, onClick, children, size = "md", dashed = false }: ChipProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-pressed={pressed}
|
|
onClick={onClick}
|
|
className={cx(
|
|
"inline-flex cursor-pointer items-center gap-1.5 rounded-full border transition-colors duration-150 ease",
|
|
"outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring",
|
|
size === "sm" ? "min-h-8 px-2.5 py-1 text-caption-1-medium" : "min-h-9 px-3.5 py-1.5 text-body-medium",
|
|
pressed
|
|
? "border-accent-500 bg-button-ghost-background text-button-ghost-foreground"
|
|
: cx(
|
|
"border-border-button-default bg-background-primary-default text-text-secondary hover:border-border-button-hover hover:bg-background-secondary-hover hover:text-text-primary",
|
|
dashed && "border-dashed",
|
|
),
|
|
)}
|
|
>
|
|
{pressed && <RiCheckLine className="size-3.5 shrink-0" aria-hidden />}
|
|
<span className="inline-flex items-center gap-1.5">{children}</span>
|
|
</button>
|
|
);
|
|
}
|