@ponti-studios/ui 1.2.0 → 1.4.0

package/src/components/navigation/app-navigation.tsx

@@ -7,13 +7,36 @@ import { Slot } from "../../lib/slot";
 import { Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger } from "../overlays/sheet";
 import { Button } from "../primitives/button";
 
-/** True while rendering inside the mobile Sheet copy of the nav content. */
-const MobileMenuContext = React.createContext(false);
+type MobileMenuState = {
+  /** True while rendering inside the mobile Sheet copy of the nav content. */
+  isMobile: boolean;
+  variant?: NavigationVariant;
+};
+
+const MobileMenuContext = React.createContext<MobileMenuState>({ isMobile: false });
+
+/** @internal Undocumented — not part of the public API surface. */
+type NavigationVariant = "nokia";
+
+// Nokia 3310-style monochrome LCD skin for the mobile Sheet. See
+// src/styles/nokia.css for the palette/font tokens and scanline texture.
+const NOKIA_SHEET_CLASSNAME =
+  "nokia-screen rounded-none border-[6px] border-nokia-bezel bg-nokia-screen p-4 font-nokia text-nokia-ink shadow-[0_0_0_3px_var(--color-nokia-screen-deep),0_10px_30px_-6px_rgba(0,0,0,0.65)]";
+const NOKIA_SHEET_CLOSE_CLASSNAME =
+  "text-nokia-ink hover:bg-nokia-ink hover:text-nokia-screen rounded-none border-2 border-nokia-ink";
+const NOKIA_LIST_CLASSNAME = "!grid grid-cols-3 gap-3";
+const NOKIA_ITEM_CLASSNAME =
+  "!h-auto !max-h-none w-full flex-col justify-center gap-1 rounded-none border-2 border-nokia-ink/40 px-2 py-3 text-center font-nokia text-base tracking-widest uppercase hover:bg-transparent active:bg-nokia-ink active:text-nokia-screen data-[active]:border-nokia-ink data-[active]:bg-nokia-ink data-[active]:text-nokia-screen";
 
 export interface NavigationRootProps {
   children: ReactNode;
   ariaLabel?: string;
   className?: string;
+  /**
+   * @internal Undocumented mobile-Sheet skin, not part of the public API
+   * (no README/Storybook entry). Opt in at your own risk.
+   */
+  variant?: NavigationVariant;
 }
 
 /**
@@ -30,8 +53,10 @@ function NavigationRoot({
   children,
   ariaLabel = "Primary navigation",
   className,
+  variant,
 }: NavigationRootProps) {
   const [mobileOpen, setMobileOpen] = React.useState(false);
+  const isNokia = variant === "nokia";
 
   const items = React.Children.toArray(children);
   const brand = items.find(
@@ -63,10 +88,15 @@ function NavigationRoot({
                 <Menu className="size-4" aria-hidden="true" />
               </Button>
             </SheetTrigger>
-            <SheetContent>
+            <SheetContent
+              className={isNokia ? NOKIA_SHEET_CLASSNAME : undefined}
+              closeClassName={isNokia ? NOKIA_SHEET_CLOSE_CLASSNAME : undefined}
+            >
               <SheetTitle className="sr-only">Navigation menu</SheetTitle>
               <div className="mt-8 flex flex-1 flex-col gap-4">
-                <MobileMenuContext.Provider value={true}>{rest}</MobileMenuContext.Provider>
+                <MobileMenuContext.Provider value={{ isMobile: true, variant }}>
+                  {rest}
+                </MobileMenuContext.Provider>
               </div>
             </SheetContent>
           </Sheet>
@@ -93,12 +123,14 @@ export interface NavigationListProps {
 
 /** Semantic `<ul>` of `Navigation.Item`s. Lays out horizontally on desktop, stacks inside the mobile Sheet. */
 function NavigationList({ children, className }: NavigationListProps) {
-  const isMobile = React.useContext(MobileMenuContext);
+  const { isMobile, variant } = React.useContext(MobileMenuContext);
+  const isNokia = isMobile && variant === "nokia";
   return (
     <ul
       className={cn(
         "flex items-center gap-1",
         isMobile && "flex-col items-stretch gap-1",
+        isNokia && NOKIA_LIST_CLASSNAME,
         className,
       )}
     >
@@ -124,9 +156,11 @@ function NavigationItem({
   children,
   ...props
 }: NavigationItemProps) {
-  const isMobile = React.useContext(MobileMenuContext);
+  const { isMobile, variant } = React.useContext(MobileMenuContext);
+  const isNokia = isMobile && variant === "nokia";
   const itemClassName = cn(
     "inline-flex h-9 max-h-9 shrink-0 items-center px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground data-[active]:font-semibold data-[active]:text-foreground",
+    isNokia && NOKIA_ITEM_CLASSNAME,
     className,
   );
 
@@ -166,12 +200,14 @@ export interface NavigationActionProps {
  * for a link that should close the menu when tapped.
  */
 function NavigationAction({ children, className }: NavigationActionProps) {
-  const isMobile = React.useContext(MobileMenuContext);
+  const { isMobile, variant } = React.useContext(MobileMenuContext);
+  const isNokia = isMobile && variant === "nokia";
   return (
     <div
       className={cn(
         "flex items-center gap-3",
         isMobile && "mt-2 flex-col items-stretch gap-3 border-t pt-4",
+        isNokia && "border-nokia-ink/40",
         className,
       )}
     >

package/src/components/navigation/tabs.tsx

@@ -25,7 +25,10 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "text-foreground focus-visible:ring-ring data-active:bg-background data-active:text-foreground data-active:border-border flex flex-1 items-center justify-center gap-2 rounded-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-active:border",
+        "text-foreground flex flex-1 items-center justify-center gap-2 rounded-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-all",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+        "data-active:ring-1 data-active:ring-inset data-active:bg-background data-active:text-foreground data-active:ring-border",
         className,
       )}
       {...props}

package/src/components/overlays/command.tsx

@@ -2,6 +2,7 @@ import { Combobox as CommandPrimitive } from "@base-ui/react/combobox";
 import { SearchIcon } from "lucide-react";
 import * as React from "react";
 
+import { cn } from "../../lib/utils";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
 
 function Command({
@@ -14,7 +15,10 @@ function Command({
   return (
     <div
       data-slot="command"
-      className={`bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md ${className ?? ""}`}
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
     >
       <CommandPrimitive.Root {...props}>{children}</CommandPrimitive.Root>
     </div>
@@ -63,7 +67,11 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         aria-label={ariaLabel}
-        className={`placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 ${className ?? ""}`}
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
         onChange={(event) => {
           onChange?.(event);
           onValueChange?.(event.currentTarget.value);
@@ -74,14 +82,18 @@ function CommandInput({
   );
 }
 
-function CommandList({ children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
   if (typeof children === "function") {
     return (
       <CommandPrimitive.List
         data-slot="command-list"
         aria-label="Command results"
         tabIndex={0}
-        className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto"
+        className={cn("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
         {...props}
       >
         {children}
@@ -103,7 +115,7 @@ function CommandList({ children, ...props }: React.ComponentProps<typeof Command
         data-slot="command-list"
         aria-label="Command results"
         tabIndex={0}
-        className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto"
+        className={cn("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
         {...props}
       >
         {listChildren}
@@ -113,11 +125,14 @@ function CommandList({ children, ...props }: React.ComponentProps<typeof Command
   );
 }
 
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className="py-6 text-center text-sm"
+      className={cn("py-6 text-center text-sm", className)}
       {...props}
     />
   );
@@ -132,7 +147,7 @@ function CommandGroup({
   return (
     <CommandPrimitive.Group
       data-slot="command-group"
-      className={`text-foreground overflow-hidden p-1 ${className ?? ""}`}
+      className={cn("text-foreground overflow-hidden p-1", className)}
       {...props}
     >
       {heading ? (
@@ -153,7 +168,11 @@ function CommandItem({ className, onSelect, onClick, ...props }: CommandItemProp
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
-      className={`data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 ${className ?? ""}`}
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none",
+        "data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
       onClick={(event) => {
         onClick?.(event);
         onSelect?.();
@@ -168,24 +187,30 @@ function CommandSeparator({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="command-separator"
       aria-hidden="true"
-      className={`bg-border -mx-1 h-px ${className ?? ""}`}
+      className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
   );
 }
 
-function CommandShortcut(props: React.ComponentProps<"span">) {
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"
-      className="text-muted-foreground ml-auto text-xs tracking-widest"
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
   );
 }
 
-function CommandListLoading(props: React.ComponentProps<"div">) {
-  return <div data-slot="command-list-loading" className="py-6 text-center text-sm" {...props} />;
+function CommandListLoading({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="command-list-loading"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  );
 }
 
 export {

package/src/components/overlays/popover.stories.tsx

@@ -25,12 +25,24 @@ export const Default: Story = {
         </div>
         <div className="grid gap-4 pt-4">
           <div className="grid grid-cols-3 items-center gap-4">
-            <label className="text-sm">Width</label>
-            <input className="col-span-2 h-8 rounded border px-2 text-sm" defaultValue="100%" />
+            <label htmlFor="popover-width" className="text-sm">
+              Width
+            </label>
+            <input
+              id="popover-width"
+              className="col-span-2 h-8 rounded border px-2 text-sm"
+              defaultValue="100%"
+            />
           </div>
           <div className="grid grid-cols-3 items-center gap-4">
-            <label className="text-sm">Height</label>
-            <input className="col-span-2 h-8 rounded border px-2 text-sm" defaultValue="25px" />
+            <label htmlFor="popover-height" className="text-sm">
+              Height
+            </label>
+            <input
+              id="popover-height"
+              className="col-span-2 h-8 rounded border px-2 text-sm"
+              defaultValue="25px"
+            />
           </div>
         </div>
       </PopoverContent>

package/src/components/overlays/sheet.tsx

@@ -72,12 +72,15 @@ const sheetClassName = [
   "md:w-3/4 md:max-w-sm md:min-h-0",
 ];
 
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Popup> {}
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Popup> {
+  /** Applied to the built-in close button, alongside its default styling. */
+  closeClassName?: string;
+}
 
 const SheetContent = React.forwardRef<
   React.ComponentRef<typeof SheetPrimitive.Popup>,
   SheetContentProps
->(({ className, children, ...props }, ref) => (
+>(({ className, closeClassName, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Popup
@@ -86,7 +89,12 @@ const SheetContent = React.forwardRef<
       className={cn(sheetClassName, className)}
       {...props}
     >
-      <SheetPrimitive.Close className="text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none md:top-4 md:right-4">
+      <SheetPrimitive.Close
+        className={cn(
+          "text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none md:top-4 md:right-4",
+          closeClassName,
+        )}
+      >
         <X className="size-4.5" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

package/src/components/primitives/badge.tsx

@@ -12,7 +12,7 @@ const badgeVariants = cva(
         secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80",
         destructive: "bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90",
         outline: "border-border text-foreground [a&]:hover:bg-muted",
-        ghost: "[a&]:[a&]: [a&]: [a&]:",
+        ghost: "bg-transparent text-foreground [a&]:hover:bg-muted",
         link: "text-foreground underline-offset-4 [a&]:hover:underline",
         /** Quiet metadata marker for real reference IDs (case/appointment/feed
          * numbers) — never for decorative sequence markers. */

package/src/components/primitives/button.tsx

@@ -6,7 +6,12 @@ import { cn } from "../../lib/utils";
 import { Spinner } from "../feedback/spinner";
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium transition-colors outline-none",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  ],
   {
     variants: {
       variant: {

package/src/styles/index.css

@@ -18,6 +18,7 @@
 @import "./tokens/generated/light.css";
 @import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
 @import "./animations.css";
+@import "./nokia.css";
 
 @theme {
   --animate-accordion-down: accordion-down 200ms ease-out;

package/src/styles/nokia.css

@@ -0,0 +1,38 @@
+/*
+ * Undocumented "nokia" Navigation variant — Nokia 3310-style monochrome LCD
+ * skin for the mobile Sheet menu. Not part of the public API surface (no
+ * README/Storybook entry); opt in via `<Navigation variant="nokia">`.
+ */
+@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
+
+@theme {
+  --color-nokia-screen: #c8d6a6;
+  --color-nokia-screen-deep: #b0c188;
+  --color-nokia-ink: #26331b;
+  --color-nokia-bezel: #1a1a1a;
+  --font-nokia: "VT323", "Courier New", monospace;
+}
+
+/* No `position: relative` here — SheetContent is `position: fixed` via its
+ * own Tailwind class, and a same-specificity `.nokia-screen { position:
+ * relative }` loaded later in the cascade would silently win and break the
+ * sheet's fixed/inset layout (bit us once already; see labs' app.css). The
+ * `::before` overlay below still gets a positioning context from the
+ * ancestor's `fixed`, so this class never needs to set position itself. */
+.nokia-screen {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    rgb(0 0 0 / 0.05) 0,
+    rgb(0 0 0 / 0.05) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+}
+
+.nokia-screen::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 12px 2px rgb(0 0 0 / 0.25);
+  pointer-events: none;
+}

package/src/components/filters/filters.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, within } from "storybook/test";
-
-import { Input } from "../forms/input";
-import { Filters } from "./filters";
-
-const meta = {
-  title: "Filters/Compound",
-  component: Filters,
-  tags: ["autodocs"],
-  args: {
-    children: null,
-  },
-} satisfies Meta<typeof Filters>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const statusOptions = [
-  { value: "active", label: "Active" },
-  { value: "interview", label: "Interview" },
-  { value: "offer", label: "Offer" },
-];
-
-export const Default: Story = {
-  render: () => (
-    <div className="w-[720px]">
-      <Filters>
-        <Filters.Search label="Search">
-          <Input placeholder="Search applications..." aria-label="Search applications" />
-        </Filters.Search>
-        <Filters.Select
-          value="active"
-          options={statusOptions}
-          onChange={() => {}}
-          placeholder="All statuses"
-          label="Status"
-        />
-        <Filters.Select
-          value=""
-          options={[{ value: "engineer", label: "Engineer" }]}
-          onChange={() => {}}
-          placeholder="All roles"
-          label="Role"
-        />
-        <Filters.Active
-          filters={[
-            { id: "status", label: "Status: Active", onRemove: () => {} },
-            { id: "sort", label: "Date", onRemove: () => {}, variant: "sort", direction: "desc" },
-          ]}
-          onClearAll={() => {}}
-        />
-      </Filters>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByText("Search")).toBeInTheDocument();
-    await expect(canvas.getByRole("textbox", { name: "Search applications" })).toBeInTheDocument();
-
-    await expect(canvas.getByText("Status")).toBeInTheDocument();
-    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
-
-    await expect(canvas.getByText("Role")).toBeInTheDocument();
-    await expect(canvas.getByRole("combobox", { name: "Role" })).toBeInTheDocument();
-
-    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
-    await expect(canvas.getByText("Date")).toBeInTheDocument();
-    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
-  },
-};

package/src/components/filters/filters.tsx

@@ -1,72 +0,0 @@
-import { Children, isValidElement, type ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-import { ActiveFiltersBar, type ActiveFiltersBarProps } from "./active-filters-bar";
-import { FilterSelect, type FilterSelectProps } from "./filter-select";
-import { Label } from "../primitives/label";
-
-export function FiltersSearch({ label, children }: { label: string; children: ReactNode }) {
-  const id = `filters-search-${label.toLowerCase().replace(/\s+/g, "-")}`;
-  return (
-    <div className="flex-1 space-y-2">
-      <Label htmlFor={id}>{label}</Label>
-      {children}
-    </div>
-  );
-}
-FiltersSearch.slot = "search";
-
-export function FiltersSelect(props: FilterSelectProps) {
-  return <FilterSelect {...props} label={props.label ?? props.placeholder} />;
-}
-FiltersSelect.slot = "select";
-
-export function FiltersActive(props: ActiveFiltersBarProps) {
-  return <ActiveFiltersBar {...props} />;
-}
-FiltersActive.slot = "active";
-
-export interface FiltersProps {
-  children: ReactNode;
-  className?: string;
-}
-
-function FiltersRoot({ children, className }: FiltersProps) {
-  const search: ReactNode[] = [];
-  const selects: ReactNode[] = [];
-  const active: ReactNode[] = [];
-
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child)) return;
-    const slot = (child.type as any)?.slot;
-    if (slot === "search") search.push(child);
-    else if (slot === "select") selects.push(child);
-    else if (slot === "active") active.push(child);
-  });
-
-  return (
-    <div className={cn("flex flex-col gap-4", className)}>
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-start">
-        {search}
-        {selects.map((s, i) => (
-          <div key={i} className="sm:w-48">
-            {s}
-          </div>
-        ))}
-      </div>
-      {active}
-    </div>
-  );
-}
-
-type FiltersComponent = typeof FiltersRoot & {
-  Search: typeof FiltersSearch;
-  Select: typeof FiltersSelect;
-  Active: typeof FiltersActive;
-};
-
-export const Filters: FiltersComponent = Object.assign(FiltersRoot, {
-  Search: FiltersSearch,
-  Select: FiltersSelect,
-  Active: FiltersActive,
-});

package/src/components/filters/search-filter-bar.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Input } from "../forms/input";
-import { FilterSelect } from "./filter-select";
-import { SearchFilterBar } from "./search-filter-bar";
-
-const meta = {
-  title: "Filters/SearchFilterBar",
-  component: SearchFilterBar,
-  tags: ["autodocs"],
-} satisfies Meta<typeof SearchFilterBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Legacy: Story = {
-  args: {
-    activeFilters: [],
-  },
-  render: () => (
-    <div className="w-[720px]">
-      <SearchFilterBar
-        activeFilters={[{ id: "status", label: "Status: Active", onRemove: () => {} }]}
-        onClearAll={() => {}}
-        search={<Input placeholder="Search..." aria-label="Search" />}
-        filters={[
-          <FilterSelect
-            key="status"
-            value="active"
-            options={[{ value: "active", label: "Active" }]}
-            onChange={() => {}}
-            placeholder="All"
-            label="Status"
-          />,
-        ]}
-      />
-    </div>
-  ),
-};

package/src/components/filters/search-filter-bar.tsx

@@ -1,46 +0,0 @@
-import { type ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-import { ActiveFiltersBar, type ActiveFilter } from "./active-filters-bar";
-
-export interface SearchFilterBarProps {
-  activeFilters: ActiveFilter[];
-  onClearAll?: () => void;
-  search?: ReactNode;
-  filters?: ReactNode[];
-  results?: ReactNode;
-  children?: ReactNode;
-  className?: string;
-  filterItemClassName?: string;
-}
-
-export function SearchFilterBar({
-  activeFilters,
-  onClearAll,
-  search,
-  filters,
-  results,
-  children,
-  className,
-  filterItemClassName = "sm:w-48",
-}: SearchFilterBarProps) {
-  return (
-    <div className={cn("flex flex-col gap-4", className)}>
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
-        {search ? <div className="flex-1">{search}</div> : null}
-
-        {filters?.map((filter, index) => (
-          <div key={index} className={filterItemClassName}>
-            {filter}
-          </div>
-        ))}
-
-        {results ? <div className="self-start lg:ml-auto lg:self-auto">{results}</div> : null}
-
-        {children}
-      </div>
-
-      <ActiveFiltersBar filters={activeFilters} onClearAll={onClearAll} />
-    </div>
-  );
-}