@bearmenu/ui 0.8.13 → 0.8.15

package/dist/components/menu-mocks.d.ts

@@ -1,6 +1,9 @@
-import { MenuFamilyBlockPreview, MenuConceptPreview, MenuFamilyPreview, MenuFamilyTile, MenuFilterChip, MenuIndexEntry, MenuIntentFigure, MenuItemPreview, MenuKitchenPreview, MenuLoosenOption, QaItem, MenuVenuePreview } from './menu-types.js';
-import { PlacePreview } from './place-types.js';
+import { MenuFamilyBlockPreview, MenuConceptPreview, MenuFamilyPreview, MenuFilterChip, MenuIndexEntry, MenuIntentFigure, MenuItemPreview, MenuKitchenPreview, MenuLoosenOption, QaItem, MenuVenuePreview } from './menu-types.js';
+import { DoorwayTile } from './doorway-tiles.js';
+import { P as PlacePreview } from '../place-types-BHdeMMiG.js';
 import 'react';
+import 'react/jsx-runtime';
+import '../lib/grade.js';
 
 /**
  * Fixtures for the menu-hub surfaces — used by their stories, and shipped so
@@ -41,9 +44,17 @@ declare const mockDrinkFamily: MenuFamilyPreview;
  * venue's, never a plate's; the last one ships without, so the story shows
  * the initial fallback beside six real tiles.
  */
-declare const mockFamilyTiles: MenuFamilyTile[];
+declare const mockFamilyTiles: DoorwayTile[];
 /** The closing tile: stone, so it reads as the index and not as an eighth cuisine. */
-declare const mockFamilyTilesAll: MenuFamilyTile;
+declare const mockFamilyTilesAll: DoorwayTile;
+/**
+ * The homepage's seven occasions in the day's order, ground treatment: the
+ * mood's hue multiplied over a room. The last one ships without a photograph
+ * so the story shows the initial on the bare hue.
+ */
+declare const mockOccasionTiles: DoorwayTile[];
+/** The closing tile: stone, so it reads as the index and not as an eighth mood. */
+declare const mockOccasionTilesAll: DoorwayTile;
 /** Formatters the stories pass. Real callers inject locale-aware ones. */
 declare const mockFormatters: {
     price: (value: number) => string;
@@ -94,4 +105,4 @@ declare const mockFamilyBlock: MenuFamilyBlockPreview;
 declare const mockBareFamilyBlock: MenuFamilyBlockPreview;
 declare const mockQa: QaItem[];
 
-export { mockBareFamilyBlock, mockConcept, mockDrinkFamily, mockFamily, mockFamilyBlock, mockFamilyTiles, mockFamilyTilesAll, mockFilterChips, mockFormatters, mockGradients, mockHubLabels, mockIndexEntries, mockIntentFigures, mockItems, mockKitchens, mockLoosenOptions, mockMatchedKitchens, mockPlaces, mockQa, mockVenues };
+export { mockBareFamilyBlock, mockConcept, mockDrinkFamily, mockFamily, mockFamilyBlock, mockFamilyTiles, mockFamilyTilesAll, mockFilterChips, mockFormatters, mockGradients, mockHubLabels, mockIndexEntries, mockIntentFigures, mockItems, mockKitchens, mockLoosenOptions, mockMatchedKitchens, mockOccasionTiles, mockOccasionTilesAll, mockPlaces, mockQa, mockVenues };

package/dist/components/menu-mocks.js

@@ -1,4 +1,4 @@
-import { __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 
 // src/components/menu-mocks.ts
 var mockGradients = {
@@ -351,6 +351,27 @@ var mockFamilyTilesAll = {
   gradient: "linear-gradient(150deg, oklch(0.50 0.03 70), oklch(0.40 0.028 64))",
   photoUrl: familyPhoto(60)
 };
+var occasionGradient = (l, c, h) => `linear-gradient(150deg, oklch(${l} ${c} ${h}), color-mix(in oklab, oklch(${l} ${c} ${h}) 82%, black))`;
+var occasionPhoto = (hue) => "data:image/svg+xml;utf8," + encodeURIComponent(
+  `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="320"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 20% 88%)"/><stop offset="1" stop-color="hsl(${hue} 18% 52%)"/></linearGradient></defs><rect width="640" height="320" fill="url(#g)"/><circle cx="420" cy="120" r="70" fill="white" opacity=".6"/><rect x="60" y="200" width="220" height="80" fill="hsl(${hue} 15% 40%)" opacity=".5"/></svg>`
+);
+var mockOccasionTiles = [
+  { slug: "brunch", label: "Brunch", countLabel: "314 places", href: "/menu/cuisines/breakfast-brunch", gradient: occasionGradient(0.62, 0.14, 82), photoUrl: occasionPhoto(40) },
+  { slug: "laptop-and-coffee", label: "Laptop and coffee", countLabel: "52 places", href: "/occasions/laptop-and-coffee", gradient: occasionGradient(0.44, 0.1, 52), photoUrl: occasionPhoto(30) },
+  { slug: "quiet", label: "Somewhere quiet", countLabel: "108 places", href: "/occasions/quiet", gradient: occasionGradient(0.38, 0.09, 255), photoUrl: occasionPhoto(210) },
+  { slug: "something-sweet", label: "Something sweet", countLabel: "120 places", href: "/occasions/something-sweet", gradient: occasionGradient(0.5, 0.08, 335), photoUrl: occasionPhoto(330) },
+  { slug: "with-friends", label: "With friends", countLabel: "158 places", href: "/occasions/with-friends", gradient: occasionGradient(0.6, 0.14, 358), photoUrl: occasionPhoto(10) },
+  { slug: "date-night", label: "Date night", countLabel: "53 places", href: "/occasions/date-night", gradient: occasionGradient(0.44, 0.15, 18), photoUrl: occasionPhoto(0) },
+  { slug: "late-night", label: "Late night", countLabel: "59 places", href: "/occasions/late-night", gradient: occasionGradient(0.34, 0.1, 300) }
+];
+var mockOccasionTilesAll = {
+  slug: "all",
+  label: "All occasions",
+  countLabel: "14 sets",
+  href: "/occasions",
+  gradient: "linear-gradient(150deg, oklch(0.50 0.03 70), oklch(0.40 0.028 64))",
+  photoUrl: occasionPhoto(60)
+};
 var mockFormatters = {
   price: (value) => `${value} lei`,
   number: (value) => value.toLocaleString("en-US"),
@@ -513,4 +534,4 @@ var mockQa = [
   }
 ];
 
-export { mockBareFamilyBlock, mockConcept, mockDrinkFamily, mockFamily, mockFamilyBlock, mockFamilyTiles, mockFamilyTilesAll, mockFilterChips, mockFormatters, mockGradients, mockHubLabels, mockIndexEntries, mockIntentFigures, mockItems, mockKitchens, mockLoosenOptions, mockMatchedKitchens, mockPlaces, mockQa, mockVenues };
+export { mockBareFamilyBlock, mockConcept, mockDrinkFamily, mockFamily, mockFamilyBlock, mockFamilyTiles, mockFamilyTilesAll, mockFilterChips, mockFormatters, mockGradients, mockHubLabels, mockIndexEntries, mockIntentFigures, mockItems, mockKitchens, mockLoosenOptions, mockMatchedKitchens, mockOccasionTiles, mockOccasionTilesAll, mockPlaces, mockQa, mockVenues };

package/dist/components/menu-types.d.ts

@@ -1,5 +1,7 @@
 import { ComponentType, CSSProperties, ReactNode } from 'react';
-import { MenuSizeAndPrice, PlacePreview } from './place-types.js';
+import { M as MenuSizeAndPrice, P as PlacePreview } from '../place-types-BHdeMMiG.js';
+import 'react/jsx-runtime';
+import '../lib/grade.js';
 
 /**
  * Structural mirror of the openapi `Dish` / `Drink` schemas, decoupled from any
@@ -203,37 +205,6 @@ type MenuVenueSignature = {
     /** The digest called this the venue's signature rather than merely frequent. */
     isSignature?: boolean;
 };
-/**
- * A family tile — a cuisine on the dishes tab, a going-out family on the
- * drinks tab — as the hub's doorway grid draws it: a hue, a name, a venue
- * count and one venue's photograph.
- *
- * `href` is required: a tile that cannot resolve to a real destination is not
- * rendered rather than linking nowhere.
- */
-type MenuFamilyTile = {
-    slug: string;
-    label: string;
-    /**
-     * The venue count, already formatted by the caller — "64", "1,204" — because
-     * thousands separators are locale-dependent and the DS owns no locale.
-     */
-    countLabel?: string;
-    href: string;
-    /**
-     * Finished CSS gradient for the tile's ground, e.g.
-     * `linear-gradient(150deg, …)`.
-     *
-     * A gradient rather than a token name, for the same reason `<MenuField>`
-     * takes one: the hue tables are app-owned, and a component referencing
-     * `var(--h-pizza)` renders an invisible tile in any consumer that does not
-     * happen to define that variable. A missing gradient falls back to `bg-muted`
-     * — visible and obviously unstyled, rather than white text on white.
-     */
-    gradient?: string;
-    /** Pre-resolved VENUE photograph. Venue photography is real; item photography is not. */
-    photoUrl?: string;
-};
 /**
  * One figure in the intent hero — a number the reader can tap to filter by.
  *
@@ -361,7 +332,9 @@ type MenuIndexEntry = {
     gradient?: string;
 };
 /**
- * A family on the cuisines index — the hub's card, opened out sideways.
+ * A family on the cuisines index — the hub's card, opened out sideways — and,
+ * with `kicker` / `facts` / `badge`, a concept on the dishes index: the same
+ * card with the unit swapped, as the design draws it.
  *
  * Deliberately thin. The reader here is choosing a cuisine, not a venue, and
  * every field the block does NOT carry is a decision the next page owns.
@@ -369,7 +342,21 @@ type MenuIndexEntry = {
 type MenuFamilyBlockPreview = {
     slug: string;
     name: string;
+    /** Small caps over the name, e.g. "DESSERT CONCEPT". Composed by the caller. */
+    kicker?: string;
     venueCount: number;
+    /**
+     * Further pre-formatted facts on the count line, after the unit and before
+     * the price band, e.g. `["50 names"]`. Each is one fact; the block draws the
+     * separators.
+     */
+    facts?: string[];
+    /**
+     * The pill in the photo's corner, e.g. "168 mentions". When given it replaces
+     * the "+N more" overflow pill, which the concept card has no room for beside
+     * a name-chip overflow that already says it.
+     */
+    badge?: string;
     /** Facet chips. Labels only — the block never prints their counts. */
     chips?: MenuFamilyChip[];
     /** Composed price band, e.g. "22–86 lei". */
@@ -441,4 +428,4 @@ type MenuHubLabels = {
     until: string;
 };
 
-export { type MenuConceptPreview, type MenuConceptRow, type MenuFamilyBlockPreview, type MenuFamilyChip, type MenuFamilyPreview, type MenuFamilyTile, type MenuFilterChip, type MenuFormatters, type MenuHubLabels, type MenuIndexEntry, type MenuIntentFigure, type MenuItemPlaceRef, type MenuItemPreview, type MenuKitchenDish, type MenuKitchenPreview, type MenuLinkComponent, type MenuLinkProps, type MenuLoosenOption, MenuSizeAndPrice, type MenuVenuePreview, type MenuVenueSignature, type QaItem };
+export { type MenuConceptPreview, type MenuConceptRow, type MenuFamilyBlockPreview, type MenuFamilyChip, type MenuFamilyPreview, type MenuFilterChip, type MenuFormatters, type MenuHubLabels, type MenuIndexEntry, type MenuIntentFigure, type MenuItemPlaceRef, type MenuItemPreview, type MenuKitchenDish, type MenuKitchenPreview, type MenuLinkComponent, type MenuLinkProps, type MenuLoosenOption, MenuSizeAndPrice, type MenuVenuePreview, type MenuVenueSignature, type QaItem };

package/dist/components/motion-icon-actions.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionIconProps } from './motion-icon.js';
+import 'framer-motion';
+import 'react';
+
+type MotionDirection = "right" | "left";
+declare function MotionArrow({ direction, ...props }: MotionIconProps & {
+    direction?: MotionDirection;
+}): react_jsx_runtime.JSX.Element;
+declare function MotionCaret({ direction, ...props }: MotionIconProps & {
+    direction?: MotionDirection;
+}): react_jsx_runtime.JSX.Element;
+declare function MotionX(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionCircleX(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionExternalLink(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionSend(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionNavigation(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionLocate(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionMaximize(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionPhone(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionMail(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionFlag(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionLogIn(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionLogOut(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionSettings(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+
+export { MotionArrow, MotionCaret, MotionCircleX, type MotionDirection, MotionExternalLink, MotionFlag, MotionLocate, MotionLogIn, MotionLogOut, MotionMail, MotionMaximize, MotionNavigation, MotionPhone, MotionSend, MotionSettings, MotionX };

package/dist/components/motion-icon-actions.js

@@ -0,0 +1,336 @@
+import { beats, pivot, poses, MotionIcon, returnTransition, useSvgId } from '../chunk-L3VEMP5A.js';
+import '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import { motion } from 'framer-motion';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function returning(play, transition) {
+  const held = {};
+  for (const key of Object.keys(play)) held[key] = play[key][0];
+  return poses(held, held, play, transition);
+}
+var flip = (values, direction) => direction === "right" ? values : values.map((v) => -v);
+var ARROW = beats([0, 0.14, 0.42, 0.58, 0.82, 1], 0.6);
+function arrowParts(direction) {
+  const tailX = direction === "right" ? 5 : 19;
+  return {
+    head: returning({ x: flip([0, -2.5, 9, 8, -1, 0], direction) }, ARROW),
+    shaft: returning({ scaleX: [1, 0.82, 1, 1.45, 0.93, 1] }, ARROW),
+    tail: pivot(tailX, 12),
+    headD: direction === "right" ? "m12 5 7 7-7 7" : "m12 19-7-7 7-7",
+    shaftD: direction === "right" ? "M5 12h14" : "M19 12H5"
+  };
+}
+var ARROW_RIGHT = arrowParts("right");
+var ARROW_LEFT = arrowParts("left");
+function MotionArrow(_a) {
+  var _b = _a, {
+    direction = "right"
+  } = _b, props = __objRest(_b, [
+    "direction"
+  ]);
+  const parts = direction === "right" ? ARROW_RIGHT : ARROW_LEFT;
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(motion.path, { variants: parts.shaft, style: parts.tail, d: parts.shaftD }),
+    /* @__PURE__ */ jsx(motion.path, { variants: parts.head, d: parts.headD })
+  ] }));
+}
+var CARET = beats([0, 0.14, 0.4, 0.56, 0.8, 1], 0.56);
+function caretParts(direction) {
+  const apexX = direction === "right" ? 15 : 9;
+  const armX = direction === "right" ? 9 : 15;
+  const upperSwing = flip([0, 8, -25, -20, 6, 0], direction);
+  return {
+    body: returning({ x: flip([0, -2, 7, 6.5, -1, 0], direction) }, CARET),
+    upper: returning({ rotate: upperSwing }, CARET),
+    lower: returning({ rotate: upperSwing.map((v) => -v) }, CARET),
+    apex: pivot(apexX, 12),
+    upperD: `M${apexX} 12 ${armX} 6`,
+    lowerD: `M${apexX} 12 ${armX} 18`
+  };
+}
+var CARET_RIGHT = caretParts("right");
+var CARET_LEFT = caretParts("left");
+function MotionCaret(_a) {
+  var _b = _a, {
+    direction = "right"
+  } = _b, props = __objRest(_b, [
+    "direction"
+  ]);
+  const parts = direction === "right" ? CARET_RIGHT : CARET_LEFT;
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: parts.body, children: [
+    /* @__PURE__ */ jsx(motion.path, { variants: parts.upper, style: parts.apex, d: parts.upperD }),
+    /* @__PURE__ */ jsx(motion.path, { variants: parts.lower, style: parts.apex, d: parts.lowerD })
+  ] }) }));
+}
+var X_TIMES = beats([0, 0.15, 0.42, 0.56, 0.8, 1], 0.56);
+var bladeA = returning({ rotate: [0, 7, -48, -45, 5, 0] }, X_TIMES);
+var bladeB = returning({ rotate: [0, -7, 48, 45, -5, 0] }, X_TIMES);
+function MotionX(props) {
+  const crossing = pivot(12, 12);
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(motion.path, { variants: bladeA, style: crossing, d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx(motion.path, { variants: bladeB, style: crossing, d: "m6 6 12 12" })
+  ] }));
+}
+var CLEAR = beats([0, 0.18, 0.4, 0.54, 0.72, 1], 0.6);
+var clearRing = returning(
+  { scaleY: [1, 0.66, 1.06, 1, 0.9, 1], scaleX: [1, 1.1, 1, 1, 1, 1] },
+  CLEAR
+);
+var clearX = returning(
+  {
+    y: [0, 0, -11, -11, 1, 0],
+    scaleY: [1, 0.66, 1, 1, 1, 1],
+    opacity: [1, 1, 1, 0, 1, 1]
+  },
+  CLEAR
+);
+function MotionCircleX(props) {
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(motion.circle, { variants: clearRing, style: pivot(12, 22), cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxs(motion.g, { variants: clearX, style: pivot(12, 12), children: [
+      /* @__PURE__ */ jsx("path", { d: "m15 9-6 6" }),
+      /* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
+    ] })
+  ] }));
+}
+var EXTERNAL = beats([0, 0.16, 0.4, 0.5, 0.62, 1], 0.6);
+var leavingArrow = returning(
+  {
+    x: [0, -2, 9, 9, -5, 0],
+    y: [0, 2, -9, -9, 5, 0],
+    opacity: [1, 1, 1, 0, 0, 1]
+  },
+  EXTERNAL
+);
+var recoilingBox = returning({ scaleY: [1, 1, 0.9, 1.03, 1, 1] }, EXTERNAL);
+function MotionExternalLink(props) {
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        variants: recoilingBox,
+        style: pivot(10.5, 21),
+        d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+      }
+    ),
+    /* @__PURE__ */ jsxs(motion.g, { variants: leavingArrow, children: [
+      /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+      /* @__PURE__ */ jsx("path", { d: "M10 14 21 3" })
+    ] })
+  ] }));
+}
+var SEND_TIMES = [0, 0.14, 0.36, 0.5, 0.72, 1];
+var SEND = beats(SEND_TIMES, 0.62);
+var sendArrow = {
+  rest: { y: 0, opacity: 1, transition: returnTransition },
+  active: { y: -18, opacity: 0, transition: returnTransition },
+  play: {
+    y: [0, 2.5, -18, -18, -18, -18],
+    opacity: [1, 1, 1, 0, 0, 0],
+    transition: SEND
+  }
+};
+var sendShaft = {
+  rest: { scaleY: 1, transition: returnTransition },
+  active: { scaleY: 1, transition: returnTransition },
+  play: { scaleY: [1, 0.85, 1.25, 1, 1, 1], transition: SEND }
+};
+var stopBlock = {
+  rest: { y: 6, opacity: 0, fillOpacity: 0, scaleY: 1, transition: returnTransition },
+  active: { y: 0, opacity: 1, fillOpacity: 1, scaleY: 1, transition: returnTransition },
+  play: {
+    y: [-12, -12, -12, -12, 1, 0],
+    opacity: [0, 0, 0, 1, 1, 1],
+    fillOpacity: [0, 0, 0, 0, 1, 1],
+    scaleY: [1, 1, 1, 1, 0.82, 1],
+    transition: SEND
+  }
+};
+function MotionSend(props) {
+  const floor = pivot(12, 19);
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsxs(motion.g, { variants: sendArrow, children: [
+      /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7" }),
+      /* @__PURE__ */ jsx(motion.path, { variants: sendShaft, style: floor, d: "M12 19V5" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      motion.rect,
+      {
+        variants: stopBlock,
+        style: floor,
+        fill: "currentColor",
+        fillOpacity: 0,
+        opacity: 0,
+        x: "5",
+        y: "5",
+        width: "14",
+        height: "14",
+        rx: "2"
+      }
+    )
+  ] }));
+}
+var needle = returning(
+  { rotate: [0, 12, -38, 14, -5, 0] },
+  beats([0, 0.16, 0.44, 0.64, 0.84, 1], 0.62)
+);
+function MotionNavigation(props) {
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(motion.polygon, { variants: needle, style: pivot(12, 12), points: "3 11 22 2 13 21 11 13 3 11" }) }));
+}
+var LOCATE = beats([0, 0.16, 0.44, 0.6, 0.8, 1], 0.62);
+var reticle = returning(
+  { x: [0, 2, -7, 0.8, -0.3, 0], y: [0, -1.5, 5, -0.6, 0.2, 0] },
+  LOCATE
+);
+var ring = returning({ scale: [1, 1, 1, 0.9, 1.02, 1] }, LOCATE);
+var tick = (axis, inward) => axis === "x" ? returning({ x: [0, 0, 0, inward, 0, 0] }, LOCATE) : returning({ y: [0, 0, 0, inward, 0, 0] }, LOCATE);
+var tickLeft = tick("x", 2.5);
+var tickRight = tick("x", -2.5);
+var tickTop = tick("y", 2.5);
+var tickBottom = tick("y", -2.5);
+var lockDot = returning(
+  { scale: [1, 1, 1, 1.35, 1, 1], fillOpacity: [0, 0, 0, 1, 1, 0] },
+  LOCATE
+);
+function MotionLocate(props) {
+  const centre = pivot(12, 12);
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsxs(motion.g, { variants: reticle, children: [
+      /* @__PURE__ */ jsx(motion.line, { variants: tickLeft, x1: "2", x2: "5", y1: "12", y2: "12" }),
+      /* @__PURE__ */ jsx(motion.line, { variants: tickRight, x1: "19", x2: "22", y1: "12", y2: "12" }),
+      /* @__PURE__ */ jsx(motion.line, { variants: tickTop, x1: "12", x2: "12", y1: "2", y2: "5" }),
+      /* @__PURE__ */ jsx(motion.line, { variants: tickBottom, x1: "12", x2: "12", y1: "19", y2: "22" }),
+      /* @__PURE__ */ jsx(motion.circle, { variants: ring, style: centre, cx: "12", cy: "12", r: "7" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      motion.circle,
+      {
+        variants: lockDot,
+        style: centre,
+        fill: "currentColor",
+        fillOpacity: 0,
+        cx: "12",
+        cy: "12",
+        r: "3"
+      }
+    )
+  ] }));
+}
+var MAXIMIZE = beats([0, 0.16, 0.44, 0.6, 0.82, 1], 0.6);
+var CORNER_OFFSET = [0, -2, 7, 6, -0.8, 0];
+var DIAGONAL_STRETCH = CORNER_OFFSET.map((d) => (9.9 + d * Math.SQRT2) / 9.9);
+var cornerTopRight = returning(
+  { x: CORNER_OFFSET, y: CORNER_OFFSET.map((d) => -d) },
+  MAXIMIZE
+);
+var cornerBottomLeft = returning(
+  { x: CORNER_OFFSET.map((d) => -d), y: CORNER_OFFSET },
+  MAXIMIZE
+);
+var diagonal = returning({ scale: DIAGONAL_STRETCH }, MAXIMIZE);
+function MotionMaximize(props) {
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(motion.path, { variants: cornerTopRight, d: "M15 3h6v6" }),
+    /* @__PURE__ */ jsx(motion.path, { variants: diagonal, style: pivot(14, 10), d: "m21 3-7 7" }),
+    /* @__PURE__ */ jsx(motion.path, { variants: diagonal, style: pivot(10, 14), d: "m3 21 7-7" }),
+    /* @__PURE__ */ jsx(motion.path, { variants: cornerBottomLeft, d: "M9 21H3v-6" })
+  ] }));
+}
+var PHONE = beats([0, 0.14, 0.42, 0.56, 0.8, 1], 0.64);
+var handset = returning({ rotate: [0, -6, 46, 40, -5, 0] }, PHONE);
+var cradle = returning({ scaleY: [1, 0.97, 1, 1, 0.92, 1] }, PHONE);
+function MotionPhone(props) {
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(motion.g, { variants: cradle, style: pivot(18.5, 22), children: /* @__PURE__ */ jsx(
+    motion.path,
+    {
+      variants: handset,
+      style: pivot(18.5, 18.5),
+      d: "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"
+    }
+  ) }) }));
+}
+var MAIL_TIMES = [0, 0.14, 0.42, 0.56, 0.84, 1];
+var flap = returning({ scaleY: [1, 1.12, -1.15, -1, 1.08, 1] }, beats(MAIL_TIMES, 0.64));
+var envelope = returning({ scaleY: [1, 1, 0.92, 1] }, beats([0, 0.84, 0.92, 1], 0.64));
+function MotionMail(props) {
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(motion.rect, { variants: envelope, style: pivot(12, 20), x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        variants: flap,
+        style: pivot(12, 5.5),
+        d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"
+      }
+    )
+  ] }));
+}
+var FLAG = beats([0, 0.18, 0.4, 0.56, 0.76, 1], 0.62);
+var wholeFlag = returning({ y: [0, -8, 1.2, 0, 0, 0] }, FLAG);
+var pole = returning({ scaleY: [1, 1, 0.88, 1.02, 1, 1] }, FLAG);
+var cloth = returning({ rotate: [0, 5, -22, 12, -4, 0] }, FLAG);
+function MotionFlag(props) {
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: wholeFlag, children: [
+    /* @__PURE__ */ jsx(motion.path, { variants: pole, style: pivot(4, 22), d: "M4 22V4" }),
+    /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        variants: cloth,
+        style: pivot(4, 4),
+        d: "M4 4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"
+      }
+    )
+  ] }) }));
+}
+var DOOR_REEL = beats([0, 0.16, 0.6, 0.78, 1], 0.6);
+var reel = returning({ x: [0, -2, 17.2, 15.6, 16] }, DOOR_REEL);
+function DoorArrow({ shaftD, headD, dx }) {
+  return /* @__PURE__ */ jsxs("g", { transform: dx ? `translate(${dx} 0)` : void 0, children: [
+    /* @__PURE__ */ jsx("path", { d: shaftD }),
+    /* @__PURE__ */ jsx("path", { d: headD })
+  ] });
+}
+var doorKickIn = returning({ x: [0, 0, 1.5, -0.4, 0] }, beats([0, 0.5, 0.64, 0.82, 1], 0.6));
+function MotionLogIn(props) {
+  const clipId = useSvgId("door-in");
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "3", width: "17", height: "18" }) }) }),
+    /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsxs(motion.g, { variants: reel, children: [
+      /* @__PURE__ */ jsx(DoorArrow, { shaftD: "M15 12H3", headD: "m10 17 5-5-5-5", dx: 0 }),
+      /* @__PURE__ */ jsx(DoorArrow, { shaftD: "M15 12H3", headD: "m10 17 5-5-5-5", dx: -16 })
+    ] }) }),
+    /* @__PURE__ */ jsx(motion.path, { variants: doorKickIn, d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" })
+  ] }));
+}
+var doorKickOut = returning({ x: [0, 0, -1.5, 0.4, 0] }, beats([0, 0.3, 0.44, 0.62, 1], 0.6));
+function MotionLogOut(props) {
+  const clipId = useSvgId("door-out");
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: "8", y: "3", width: "16", height: "18" }) }) }),
+    /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsxs(motion.g, { variants: reel, children: [
+      /* @__PURE__ */ jsx(DoorArrow, { shaftD: "M21 12H9", headD: "m16 17 5-5-5-5", dx: 0 }),
+      /* @__PURE__ */ jsx(DoorArrow, { shaftD: "M21 12H9", headD: "m16 17 5-5-5-5", dx: -16 })
+    ] }) }),
+    /* @__PURE__ */ jsx(motion.path, { variants: doorKickOut, d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
+  ] }));
+}
+var gear = returning({ rotate: [0, -10, 98, 87, 90] }, beats([0, 0.16, 0.62, 0.8, 1], 0.6));
+var hub = returning({ scale: [1, 0.8, 0.8, 1.2, 1] }, beats([0, 0.16, 0.62, 0.78, 1], 0.6));
+function MotionSettings(props) {
+  const centre = pivot(12, 12);
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        variants: gear,
+        style: centre,
+        d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
+      }
+    ),
+    /* @__PURE__ */ jsx(motion.circle, { variants: hub, style: centre, cx: "12", cy: "12", r: "3" })
+  ] }));
+}
+
+export { MotionArrow, MotionCaret, MotionCircleX, MotionExternalLink, MotionFlag, MotionLocate, MotionLogIn, MotionLogOut, MotionMail, MotionMaximize, MotionNavigation, MotionPhone, MotionSend, MotionSettings, MotionX };

package/dist/components/motion-icon-controls.js

@@ -1,4 +1,4 @@
-export { MotionBookmark, MotionCheck, MotionChevron, MotionCopy, MotionEye, MotionHeart, MotionPlayPause, MotionRefresh, MotionSearch, MotionShare, MotionSliders, MotionSort, MotionStar, MotionTheme } from '../chunk-YOKHBAIH.js';
-import '../chunk-G7IFL4Z4.js';
+export { MotionBookmark, MotionCheck, MotionChevron, MotionCopy, MotionEye, MotionHeart, MotionPlayPause, MotionRefresh, MotionSearch, MotionShare, MotionSliders, MotionSort, MotionStar, MotionTheme } from '../chunk-4OF4T4AI.js';
+import '../chunk-L3VEMP5A.js';
 import '../chunk-FEK5XGZW.js';
-import '../chunk-3GWWZKX7.js';
+import '../chunk-MMUBH76A.js';

package/dist/components/motion-icon-set.d.ts

@@ -23,5 +23,17 @@ declare function MotionMapPin(props: MotionIconProps): react_jsx_runtime.JSX.Ele
  * still, which is what sells the contents moving.
  */
 declare function MotionCalendar(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionLayoutGrid(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * The one gesture that HOLDS on the drinks side: rest is the exact lucide
+ * glyph (empty, line visible), active is the bowl filled to the line. Outline
+ * → solid mass is the largest silhouette change in the set, and at the
+ * segmented control's 16px that is still ~4.7px of rising liquid.
+ */
+declare function MotionWine(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionMap(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionFlame(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionCalendarClock(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionList(props: MotionIconProps): react_jsx_runtime.JSX.Element;
 
-export { MotionCalendar, MotionHouse, MotionMapPin, MotionUtensils };
+export { MotionCalendar, MotionCalendarClock, MotionFlame, MotionHouse, MotionLayoutGrid, MotionList, MotionMap, MotionMapPin, MotionUtensils, MotionWine };