@bearmenu/ui 0.8.13 → 0.8.15

package/src/components/haptic-button.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import { Button, type ButtonProps } from "./button";
-import { useHaptic } from "../hooks/use-haptic";
-
-interface HapticButtonProps extends ButtonProps {
-  hapticStyle?: "light" | "medium" | "heavy";
-}
-
-export function HapticButton({ hapticStyle = "light", onClick, ...props }: HapticButtonProps) {
-  const { trigger } = useHaptic();
-
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    trigger(hapticStyle);
-    onClick?.(e);
-  };
-
-  return <Button {...props} onClick={handleClick} haptic={false} />;
-}

package/src/components/menu-family-tiles.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { MenuFamilyTiles } from "./menu-family-tiles";
-import { mockFamilyTiles, mockFamilyTilesAll } from "./menu-mocks";
-
-const meta: Meta<typeof MenuFamilyTiles> = {
-  title: "Menu/MenuFamilyTiles",
-  component: MenuFamilyTiles,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div className="w-[1100px] bg-background p-4">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "The hub's doorways: every family the city browses by, as a grid of coloured tiles — the family's name, its venue count and one venue's photograph tilted off the corner — closed by one tile that opens the whole index. Two to a row on a phone, four from `lg`, so seven families and the index make two rows at every width.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof MenuFamilyTiles>;
-
-export const Default: Story = { args: { tiles: mockFamilyTiles, all: mockFamilyTilesAll } };
-
-/** Two-up on a phone — seven families and the index in four rows. */
-export const Mobile: Story = {
-  args: { tiles: mockFamilyTiles, all: mockFamilyTilesAll },
-  // The grid's columns follow the viewport, not the wrapper.
-  parameters: { viewport: { defaultViewport: "mobile1" } },
-  decorators: [
-    (Story) => (
-      <div className="w-[390px] bg-background p-3">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-/** No photographs anywhere: every polaroid holds the family's initial. */
-export const WithoutPhotos: Story = {
-  args: {
-    tiles: mockFamilyTiles.map(({ photoUrl: _photoUrl, ...tile }) => tile),
-    all: { ...mockFamilyTilesAll, photoUrl: undefined },
-  },
-};
-
-/** The drinks tab's five going-out families, no index tile. */
-export const Partial: Story = { args: { tiles: mockFamilyTiles.slice(0, 5) } };

package/src/components/menu-family-tiles.test.tsx

@@ -1,30 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { MenuFamilyTiles } from "./menu-family-tiles";
-import { mockFamilyTiles, mockFamilyTilesAll } from "./menu-mocks";
-
-describe("MenuFamilyTiles", () => {
-  it("renders one link per family plus the index tile, in order", () => {
-    render(<MenuFamilyTiles tiles={mockFamilyTiles} all={mockFamilyTilesAll} />);
-    const links = screen.getAllByRole("link");
-    expect(links).toHaveLength(mockFamilyTiles.length + 1);
-    expect(links[0]).toHaveAttribute("href", mockFamilyTiles[0].href);
-    expect(links.at(-1)).toHaveAttribute("href", mockFamilyTilesAll.href);
-    expect(links.at(-1)).toHaveTextContent(mockFamilyTilesAll.label);
-  });
-
-  // A family without a photograph keeps the polaroid — the initial fills it —
-  // so a row of seven never has one tile with a different silhouette.
-  it("draws the initial where a family has no photograph", () => {
-    const [withPhoto, withoutPhoto] = [mockFamilyTiles[0], mockFamilyTiles.at(-1)!];
-    expect(withoutPhoto.photoUrl).toBeUndefined();
-    render(<MenuFamilyTiles tiles={[withPhoto, withoutPhoto]} />);
-    expect(document.querySelectorAll("img")).toHaveLength(1);
-    expect(screen.getByText(withoutPhoto.label.charAt(0))).toBeInTheDocument();
-  });
-
-  it("omits the index tile when no index is given", () => {
-    render(<MenuFamilyTiles tiles={mockFamilyTiles.slice(0, 3)} />);
-    expect(screen.getAllByRole("link")).toHaveLength(3);
-  });
-});

package/src/components/menu-family-tiles.tsx

@@ -1,132 +0,0 @@
-import { cn } from "../lib/utils";
-import type { MenuFamilyTile, MenuLinkComponent, MenuLinkProps } from "./menu-types";
-import { PhotoGround } from "./photo-ground";
-
-/**
- * MenuFamilyTiles — the hub's doorways: every family the city browses by, as
- * a grid of coloured tiles, closed by one tile that opens the whole index.
- *
- * ## A tile, not a card
- *
- * The family card this replaces was a full-width mosaic with chips, a price
- * band and a browse pill — a summary of the family, in a rail the reader had
- * to swipe through one family at a time. The tile is the family's NAME, its
- * venue count and one photograph on the family's hue, two to a row, so seven
- * families and the index fit on one phone screen. The reader is choosing a
- * family here, not learning about one; the summary lives on the page the tile
- * opens.
- *
- * ## The photograph is a polaroid, not a ground
- *
- * One square photograph, tilted, running off the tile's top and right edges
- * — the tile's `overflow-hidden` crops it, so it reads as a print dropped on
- * the tile rather than a thumbnail placed in it — with the name and the count
- * in the bottom-left, under the print's lower edge. Not a ground: white type
- * on a photograph needs a scrim heavy enough to hide the photograph, and the
- * hue is what tells seven tiles apart at a glance. The photograph is the
- * FAMILY's — a plate, a room, a glass — served from the consumer's own origin,
- * never a venue's (a venue on a tile about every venue reads as an
- * endorsement). A family with no photograph gets the same tilted square
- * holding `PhotoGround`'s serif initial, so the silhouette never changes.
- *
- * Every measure on the polaroid is a percentage of the tile, so the tile and
- * the design stay in proportion from a 170px phone cell to a 260px desktop
- * one: 82% of the height, 8% above the top, 4% past the right, 8° over —
- * measured off the design frame.
- *
- * The bottom scrim is mandatory. The honey and terrace hues sit around
- * `oklch(0.6…)`, where white at 14.5px is about 3:1 — under the 4.5:1 the
- * label needs. The scrim takes the label's corner down to where it passes on
- * every hue in the dictionary.
- *
- * Server-safe.
- */
-
-function DefaultLink({ href, ...props }: MenuLinkProps) {
-  return <a href={href} {...props} />;
-}
-
-export type MenuFamilyTilesProps = {
-  tiles: MenuFamilyTile[];
-  /**
-   * The closing tile: the index behind the seven, drawn exactly like them —
-   * its own hue and photograph, `countLabel` as the caption. Only its place in
-   * the grid says it is the index. Omit when there is none.
-   */
-  all?: MenuFamilyTile;
-  linkComponent?: MenuLinkComponent;
-  className?: string;
-};
-
-/**
- * The tile: the design's 16:10, never shorter than two lines of name plus the
- * count need.
- */
-const TILE =
-  "group relative isolate flex aspect-[16/10] min-h-[108px] flex-col justify-end overflow-hidden rounded-2xl bg-muted p-3.5 text-white lg:p-4 " +
-  "transition-[transform,box-shadow] duration-200 hover:-translate-y-0.5 hover:shadow-[var(--shadow-card-hover)] active:translate-y-0 active:scale-[0.99] motion-reduce:transition-none " +
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
-
-/**
- * The polaroid. Same literal family as `PHOTO_GROUND` for the shadow, never a
- * black `rgba` — the shadow is the ground the card family already stands on.
- */
-const POLAROID =
-  "absolute -right-[4%] -top-[8%] z-0 block aspect-square h-[82%] overflow-hidden rounded-[10%] rotate-[8deg] " +
-  "shadow-[0_10px_22px_-6px_oklch(0.16_0.012_55_/_0.65)] transition-transform duration-300 group-hover:rotate-[5deg] motion-reduce:transition-none";
-
-const SCRIM =
-  "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-0 after:h-3/5 after:bg-gradient-to-t after:from-[oklch(0.16_0.012_55_/_0.55)] after:to-transparent after:content-['']";
-
-export function MenuFamilyTiles({
-  tiles,
-  all,
-  linkComponent: LinkComponent = DefaultLink,
-  className,
-}: MenuFamilyTilesProps) {
-  const cells = all ? [...tiles, all] : tiles;
-
-  return (
-    <div className={cn("grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-3.5", className)}>
-      {cells.map((tile) => (
-        <LinkComponent
-          key={tile.slug}
-          href={tile.href}
-          className={cn(TILE, SCRIM)}
-          style={tile.gradient ? { backgroundImage: tile.gradient } : undefined}
-        >
-          <span aria-hidden className={POLAROID}>
-            {tile.photoUrl ? (
-              /* Not lazy: the grid sits directly under the hero, and these
-                 photographs are the first thing the reader looks at. */
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={tile.photoUrl}
-                alt=""
-                decoding="async"
-                className="absolute inset-0 h-full w-full object-cover"
-              />
-            ) : (
-              <PhotoGround
-                photos={[undefined]}
-                initials={tile.label.charAt(0)}
-                mode="stack"
-                glyphClassName="text-[44px]"
-              />
-            )}
-          </span>
-
-          {/* Both lines keep to the left 55%: the polaroid owns the right. */}
-          <span className="relative z-[1] line-clamp-2 max-w-[55%] text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em] lg:text-[16px]">
-            {tile.label}
-          </span>
-          {tile.countLabel && (
-            <span className="relative z-[1] mt-0.5 max-w-[55%] truncate text-[12px] font-medium leading-[1.35] tabular-nums text-white/80 lg:text-[13px]">
-              {tile.countLabel}
-            </span>
-          )}
-        </LinkComponent>
-      ))}
-    </div>
-  );
-}