@bearmenu/ui 0.8.16 → 0.8.17

package/src/components/menu-filter-chips.tsx

@@ -59,11 +59,19 @@ export type MenuFilterChipsProps = {
   onMorePointerDown?: () => void;
   /** Locale-aware integer formatter for the counts. Defaults to `String`. */
   formatCount?: (value: number) => string;
+  /**
+   * `sm` (36px) is the row under a page header. `lg` (44px) is for a row
+   * inside a sticky bar, where the chips are the only thing the thumb can
+   * reach and 36px sits under the target floor.
+   */
+  chipSize?: MenuFilterChipSize;
   /** Accessible name for the row. */
   ariaLabel?: string;
   className?: string;
 };
 
+export type MenuFilterChipSize = "sm" | "lg";
+
 export function MenuFilterChips({
   chips,
   onToggle,
@@ -73,6 +81,7 @@ export function MenuFilterChips({
   moreIcon,
   onMorePointerDown,
   formatCount = String,
+  chipSize = "sm",
   ariaLabel,
   className,
 }: MenuFilterChipsProps) {
@@ -99,6 +108,7 @@ export function MenuFilterChips({
             <Chip
               key={chip.key}
               chip={chip}
+              size={chipSize}
               onToggle={() => onToggle(chip.key)}
               formatCount={formatCount}
             />
@@ -120,7 +130,11 @@ export function MenuFilterChips({
               onPointerDown={onMorePointerDown}
               aria-label={moreLabel}
               aria-haspopup="dialog"
-              className="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden"
+              className={cn(
+                "inline-flex shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden",
+                // The one control that never scrolls keeps the chips' height.
+                chipSize === "lg" ? "size-11" : "size-10"
+              )}
             >
               {moreIcon}
             </button>
@@ -143,10 +157,12 @@ export function MenuFilterChips({
 
 function Chip({
   chip,
+  size,
   onToggle,
   formatCount,
 }: {
   chip: MenuFilterChip;
+  size: MenuFilterChipSize;
   onToggle: () => void;
   formatCount: (value: number) => string;
 }) {
@@ -156,7 +172,8 @@ function Chip({
       onClick={onToggle}
       aria-pressed={chip.active}
       className={cn(
-        "inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        size === "lg" ? "h-11" : "h-9",
         chip.active
           ? "border-accent font-semibold text-accent shadow-[0_1px_2px_oklch(0.51_0.095_45_/_0.08)]"
           : "border-border bg-card text-foreground hover:border-accent/40",
@@ -226,12 +243,23 @@ export function MenuFilterSummary({
  */
 const CHIP_WIDTHS = [128, 104, 96, 148, 112, 88];
 
-export function MenuFilterChipsSkeleton({ className }: { className?: string }) {
+export function MenuFilterChipsSkeleton({
+  className,
+  chipSize = "sm",
+}: {
+  className?: string;
+  /** Match the row it stands in for, so the chips do not jump 8px on load. */
+  chipSize?: MenuFilterChipSize;
+}) {
   return (
     <div className={cn("flex items-center gap-2 overflow-hidden", className)} aria-hidden>
       <Skeleton className="h-3 w-[92px] shrink-0" />
       {CHIP_WIDTHS.map((width, index) => (
-        <Skeleton key={index} className="h-9 shrink-0 rounded-full" style={{ width }} />
+        <Skeleton
+          key={index}
+          className={cn("shrink-0 rounded-full", chipSize === "lg" ? "h-11" : "h-9")}
+          style={{ width }}
+        />
       ))}
     </div>
   );

package/src/components/menu-kitchen-list.tsx

@@ -61,6 +61,18 @@ export type MenuKitchenListLabels = {
   showMore?: string;
 };
 
+/**
+ * `wide` (default): the intent page's full-width list — from `lg` the venue
+ * takes a fixed 226px column and the dish stands beside it in a column of its
+ * own. `stacked`: the list sits in a narrow column (a concept card's row
+ * half), so the venue keeps the row and the dish takes a SECOND LINE under it
+ * from `lg`; in a half-width card the dish column had ~100px and its kicker,
+ * name and meta wrapped into a stack of single words. `phone`: the phone row
+ * at every width — no dish line, the venue and its price only — for a card
+ * that keeps its phone form on a desktop rail.
+ */
+export type MenuKitchenListLayout = "wide" | "stacked" | "phone";
+
 export type MenuKitchenListProps = {
   kitchens: MenuKitchenPreview[];
   labels: MenuKitchenListLabels;
@@ -69,6 +81,7 @@ export type MenuKitchenListProps = {
    * navigates for the eleventh — the list is the page.
    */
   onShowMore?: () => void;
+  layout?: MenuKitchenListLayout;
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
@@ -77,6 +90,7 @@ export function MenuKitchenList({
   kitchens,
   labels,
   onShowMore,
+  layout = "wide",
   linkComponent = DefaultLink,
   className,
 }: MenuKitchenListProps) {
@@ -90,7 +104,12 @@ export function MenuKitchenList({
                 because `<ol>` admits only list items, so a sibling element
                 between them would be invalid markup. */}
             {index > 0 && <Separator />}
-            <KitchenRow kitchen={kitchen} labels={labels} linkComponent={linkComponent} />
+            <KitchenRow
+              kitchen={kitchen}
+              labels={labels}
+              layout={layout}
+              linkComponent={linkComponent}
+            />
           </li>
         ))}
       </ol>
@@ -111,17 +130,25 @@ export function MenuKitchenList({
 function KitchenRow({
   kitchen,
   labels,
+  layout,
   linkComponent: LinkComponent,
 }: {
   kitchen: MenuKitchenPreview;
   labels: MenuKitchenListLabels;
+  layout: MenuKitchenListLayout;
   linkComponent: MenuLinkComponent;
 }) {
   const { place, dish } = kitchen;
   const openNow = place.open_now === true;
+  const wide = layout === "wide";
 
   return (
-    <div className="relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:flex-nowrap lg:gap-4 lg:py-3.5">
+    <div
+      className={cn(
+        "relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:gap-4 lg:py-3.5",
+        wide && "lg:flex-nowrap"
+      )}
+    >
       {/* The venue link, stretched. `z-[1]` — the dish link sits above it. */}
       <LinkComponent
         href={kitchen.href}
@@ -149,7 +176,12 @@ function KitchenRow({
         />
       </span>
 
-      <div className="flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none">
+      <div
+        className={cn(
+          "flex min-w-0 flex-1 flex-col gap-0.5",
+          wide && "lg:w-[226px] lg:flex-none"
+        )}
+      >
         {/* One line with an ellipsis on a phone, where the row is the whole
             width; two lines from `lg`, where the column is 226px and
             "ADRIATICA GELATERIA ITALIANA" would otherwise lose its half. */}
@@ -190,8 +222,15 @@ function KitchenRow({
            one tap away on the venue's own page, with room to state it.
 
            `order-5` puts it last in the visual order without moving it in the
-           DOM, where it belongs to the venue. */
-        <div className="hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0">
+           DOM, where it belongs to the venue. In the `stacked` layout it is a
+           second LINE under the venue, indented past the thumbnail. */
+        <div
+          className={cn(
+            "hidden min-w-0 basis-full pl-[57px]",
+            layout !== "phone" && "lg:block",
+            wide ? "lg:order-none lg:flex-1 lg:basis-auto lg:pl-0" : "lg:order-5 lg:pl-[74px]"
+          )}
+        >
           <span
             className={cn(
               "flex items-center gap-1.5 text-[9px] font-extrabold uppercase tracking-[0.1em]",
@@ -230,7 +269,7 @@ function KitchenRow({
         </div>
       )}
 
-      <div className="ml-auto flex shrink-0 items-center gap-[11px] lg:ml-0">
+      <div className={cn("ml-auto flex shrink-0 items-center gap-[11px]", wide && "lg:ml-0")}>
         {kitchen.priceLabel && (
           <span className="text-base font-extrabold tabular-nums text-accent">
             {kitchen.priceLabel}

package/src/components/photo-ground.tsx

@@ -38,6 +38,13 @@ import { cn } from "../lib/utils";
 /** The ground under the photography. Fixed, and deliberately not a token. */
 export const PHOTO_GROUND = "bg-[oklch(0.21_0.012_55)]";
 
+/**
+ * The shadow a glyph wears when it stands on `PHOTO_GROUND` in a photograph's
+ * place — the card family's fallback treatment: a ground and a lifted glyph,
+ * never a bare icon on a flat fill. Same literal family as the ground.
+ */
+export const PHOTO_GLYPH_SHADOW = "drop-shadow-[0_2px_6px_oklch(0.16_0.012_55_/_0.6)]";
+
 /** The uniform dark overlay a card may put over every photograph. */
 const OVERLAY = "absolute inset-0 bg-[oklch(0.16_0.012_55_/_0.5)]";
 

package/src/components/section-header.test.tsx

@@ -25,4 +25,19 @@ describe("SectionHeader", () => {
     expect(screen.getByText("Still to start").className).toContain("hidden");
     expect(screen.getByText("Still to start").className).toContain("lg:block");
   });
+
+  it("holds trailing controls at the row's end, beside the action", () => {
+    render(
+      <SectionHeader
+        title="Concepts"
+        action="See all"
+        actionHref="/concepts"
+        trailing={<button type="button">Next</button>}
+      />
+    );
+    const next = screen.getByRole("button", { name: "Next" });
+    const action = screen.getByRole("link", { name: "See all" });
+    expect(next.parentElement).toBe(action.parentElement);
+    expect(next.parentElement).not.toContainElement(screen.getByText("Concepts"));
+  });
 });

package/src/components/section-header.tsx

@@ -60,6 +60,12 @@ export type SectionHeaderProps = {
    * would dilute the headings that matter. Defaults to `"h2"`.
    */
   as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
+  /**
+   * Controls at the end of the title row, after `action` — a rail's
+   * previous / next pair on desktop. The header owns none of their
+   * behaviour; it only holds the slot.
+   */
+  trailing?: React.ReactNode;
   className?: string;
 };
 
@@ -91,6 +97,7 @@ export function SectionHeader({
   linkComponent: LinkComponent = DefaultLink,
   onAction,
   as: Heading = "h2",
+  trailing,
   className,
 }: SectionHeaderProps) {
   const actionIcon = <ChevronRight className="h-3.5 w-3.5" aria-hidden />;
@@ -110,18 +117,25 @@ export function SectionHeader({
           )}
         </div>
 
-        {action &&
-          (actionHref ? (
-            <LinkComponent href={actionHref} className={actionClasses} onClick={onAction}>
-              {action}
-              {actionIcon}
-            </LinkComponent>
-          ) : onAction ? (
-            <button type="button" className={actionClasses} onClick={onAction}>
-              {action}
-              {actionIcon}
-            </button>
-          ) : null)}
+        {/* The action and the trailing controls share the row's end, so the
+            action never floats to the middle when both are present. */}
+        {(action || trailing) && (
+          <div className="flex shrink-0 items-center gap-3">
+            {action &&
+              (actionHref ? (
+                <LinkComponent href={actionHref} className={actionClasses} onClick={onAction}>
+                  {action}
+                  {actionIcon}
+                </LinkComponent>
+              ) : onAction ? (
+                <button type="button" className={actionClasses} onClick={onAction}>
+                  {action}
+                  {actionIcon}
+                </button>
+              ) : null)}
+            {trailing}
+          </div>
+        )}
       </div>
 
       {subtitle && (

package/src/components/toggle-group.stories.tsx

@@ -1,6 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
-import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from "lucide-react";
+import {
+  Bold,
+  Italic,
+  Underline,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  LayoutGrid,
+  List,
+} from "lucide-react";
+import { Button } from "./button";
 
 const meta = {
   title: "Components/ToggleGroup",
@@ -58,3 +68,29 @@ export const Outline: Story = {
     </ToggleGroup>
   ),
 };
+
+/**
+ * The segmented control: one 44px muted capsule, the on cell a raised card.
+ * Sits beside pill buttons at the same height — the browse toolbar's view
+ * switch. Single, always one on.
+ */
+export const Segmented: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Button variant="outline" size="pill">
+        Filters
+      </Button>
+      <Button variant="outline" size="pill">
+        Sort
+      </Button>
+      <ToggleGroup type="single" variant="segmented" defaultValue="list" aria-label="View">
+        <ToggleGroupItem value="list" aria-label="Rows">
+          <List />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="grid" aria-label="Cards">
+          <LayoutGrid />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};

package/src/components/toggle-group.tsx

@@ -26,13 +26,14 @@ function ToggleGroup({
       data-size={size}
       className={cn(
         "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        // The segmented control's capsule: muted ground, the on cell a raised
+        // card inside it (see `toggleVariants.segmented`). 44px tall.
+        "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted data-[variant=segmented]:p-0.5",
         className
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
+      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
   );
 }
@@ -45,18 +46,22 @@ function ToggleGroupItem({
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
   const context = React.useContext(ToggleGroupContext);
+  const resolved = context.variant || variant;
 
   return (
     <ToggleGroupPrimitive.Item
       data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
+      data-variant={resolved}
       data-size={context.size || size}
       className={cn(
         toggleVariants({
-          variant: context.variant || variant,
+          variant: resolved,
           size: context.size || size,
         }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        resolved === "segmented"
+          ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]"
+          : "rounded-none first:rounded-l-md last:rounded-r-md",
         className
       )}
       {...props}

package/src/components/toggle.tsx

@@ -14,6 +14,14 @@ const toggleVariants = cva(
         default: "bg-transparent",
         outline:
           "border border-border bg-transparent hover:bg-accent/50 hover:text-accent-foreground data-[state=on]:border-primary",
+        /**
+         * One cell of a segmented control: a raised card on the group's
+         * muted capsule when on, quiet type when off. The group
+         * (`ToggleGroup variant="segmented"`) supplies the capsule; the cell
+         * never fills with the accent, which would read as a primary button.
+         */
+        segmented:
+          "h-10 w-11 rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-foreground data-[state=on]:shadow-[var(--shadow-card)]",
       },
       size: {
         default: "h-9 px-2 min-w-9",

package/dist/chunk-SXQZ7DLH.js

@@ -1,167 +0,0 @@
-import { Separator } from './chunk-NWZGSLPU.js';
-import { Skeleton } from './chunk-XBBEX4SF.js';
-import { cn } from './chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
-import { Star, Clock, Check, MessageSquare, ChevronRight } from 'lucide-react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-function DefaultLink(_a) {
-  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
-  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
-}
-function MenuKitchenList({
-  kitchens,
-  labels,
-  onShowMore,
-  linkComponent = DefaultLink,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx("ol", { children: kitchens.map((kitchen, index) => /* @__PURE__ */ jsxs("li", { className: "[&:first-child>div]:pt-0", children: [
-      index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsx(KitchenRow, { kitchen, labels, linkComponent })
-    ] }, kitchen.place.slug)) }),
-    onShowMore && labels.showMore && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onShowMore,
-        className: "mt-2 self-start rounded-md py-2 text-[13px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
-        children: labels.showMore
-      }
-    )
-  ] });
-}
-function KitchenRow({
-  kitchen,
-  labels,
-  linkComponent: LinkComponent
-}) {
-  const { place, dish } = kitchen;
-  const openNow = place.open_now === true;
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:flex-nowrap lg:gap-4 lg:py-3.5", children: [
-    /* @__PURE__ */ jsx(
-      LinkComponent,
-      {
-        href: kitchen.href,
-        "aria-label": labels.openVenue(place.name),
-        className: "absolute inset-0 z-[1] rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { className: "relative h-[46px] w-[46px] shrink-0 overflow-hidden rounded-[11px] bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]", children: [
-      place.thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: place.thumbnail_url,
-          alt: "",
-          loading: "lazy",
-          decoding: "async",
-          className: "h-full w-full object-cover"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          title: openNow ? labels.openNow : void 0,
-          className: cn(
-            "absolute right-[5px] top-[5px] h-[7px] w-[7px] rounded-full ring-2 ring-white/85",
-            openNow ? "bg-[var(--free,oklch(0.55_0.13_155))]" : "bg-[oklch(0.8_0.01_60)]"
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none", children: [
-      /* @__PURE__ */ jsx("span", { className: "truncate text-[14.5px] font-bold tracking-[-0.01em] lg:line-clamp-2 lg:whitespace-normal lg:text-[15.5px] lg:leading-tight", children: place.name }),
-      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-xs text-muted-foreground", children: [
-        place.rating && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Star, { className: "h-[11px] w-[11px] shrink-0", "aria-hidden": true }),
-          place.rating.rating,
-          kitchen.metaLabel && " \xB7 "
-        ] }),
-        kitchen.metaLabel
-      ] }),
-      kitchen.hoursLabel && /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cn(
-            "mt-[3px] inline-flex h-[21px] w-max items-center gap-[5px] rounded-md px-2 text-[10.5px] font-bold",
-            openNow ? "bg-[oklch(0.96_0.02_155)] text-[var(--free,oklch(0.45_0.13_155))]" : "bg-muted text-muted-foreground"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Clock, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
-            kitchen.hoursLabel
-          ]
-        }
-      )
-    ] }),
-    dish && /* DESKTOP ONLY, where it is a column of its own beside the venue.
-               On the phone it wrapped to a third line under the row — kicker, dish,
-               mention count — which turned a four-line venue row into a seven-line
-               block and, ten rows down, buried the venue names the list exists to
-               be scanned for. The dish is not what a reader is choosing here; it is
-               one tap away on the venue's own page, with room to state it.
-    
-               `order-5` puts it last in the visual order without moving it in the
-               DOM, where it belongs to the venue. */
-    /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0", children: [
-      /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cn(
-            "flex items-center gap-1.5 text-[9px] font-extrabold uppercase tracking-[0.1em]",
-            dish.matched ? "text-accent" : "text-[oklch(0.72_0.01_60)]"
-          ),
-          children: [
-            dish.kicker,
-            dish.matched && dish.matchLabel && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-[5px] bg-accent-subtle px-1.5 py-px text-[10.5px] font-bold normal-case tracking-normal text-accent", children: [
-              /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
-              dish.matchLabel
-            ] })
-          ]
-        }
-      ),
-      dish.href ? /* @__PURE__ */ jsx(
-        LinkComponent,
-        {
-          href: dish.href,
-          "aria-label": labels.openDish(dish.name),
-          className: "relative z-[2] mt-0.5 block truncate font-serif text-[13.5px] italic underline decoration-[oklch(0.84_0.01_60)] decoration-1 underline-offset-[3px] transition-colors hover:text-accent hover:decoration-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:text-[15px]",
-          children: dish.name
-        }
-      ) : /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate font-serif text-[13.5px] italic lg:text-[15px]", children: dish.name }),
-      dish.meta && /* @__PURE__ */ jsxs("span", { className: "mt-[3px] flex items-center gap-1 text-[11.5px] text-muted-foreground", children: [
-        !dish.matched && /* @__PURE__ */ jsx(MessageSquare, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
-        dish.meta
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-[11px] lg:ml-0", children: [
-      kitchen.priceLabel && /* @__PURE__ */ jsx("span", { className: "text-base font-extrabold tabular-nums text-accent", children: kitchen.priceLabel }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "h-[15px] w-[15px] shrink-0 text-muted-foreground", "aria-hidden": true })
-    ] })
-  ] });
-}
-function MenuKitchenListSkeleton({
-  rows = 10,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { children: [
-    index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-[11px] py-3 lg:flex-nowrap lg:gap-4 lg:py-3.5", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-[46px] w-[46px] rounded-[11px] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5 lg:w-[226px] lg:flex-none", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[60%]" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[45%]" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-[21px] w-[120px] rounded-md" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-[90px]" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-4 w-[70%]" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-3 w-[40%]" })
-      ] }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-5 w-[56px] lg:ml-0" })
-    ] })
-  ] }, index)) });
-}
-
-export { MenuKitchenList, MenuKitchenListSkeleton };