@krizaka/ui 3.29.0 → 3.31.0

package/registry/examples/button/signature.js

@@ -5,11 +5,11 @@ import { Button } from "@krizaka/ui/button";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ButtonSignature() {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-    /* @__PURE__ */ jsxs(Button, { variant: "gradient", size: "lg", shape: "cut", shimmer: true, magnetic: true, children: [
+    /* @__PURE__ */ jsxs(Button, { variant: "gradient", size: "lg", children: [
       "Start free",
       /* @__PURE__ */ jsx("svg", { "data-kz-icon": "ForwardIcon", viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) })
     ] }),
-    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", shape: "cut", children: "Talk to us" })
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", children: "Talk to us" })
   ] });
 }
 export {

package/registry/examples/button/signature.tsx

@@ -1,17 +1,17 @@
 import { Button } from "@krizaka/ui/button";
 
-// The one action a page is about: cut corners, the brand gradient, a sheen on hover, a lean toward the pointer
-// (`magnetic`, with MotionObserver mounted). The arrow of a signature icon leans forward on hover too.
+// The one action a page is about: the brand gradient beside a quiet outline. The arrow of a signature icon leans
+// forward on hover; the button itself never moves (krizaka-ui#393).
 export default function ButtonSignature() {
   return (
     <div className="flex flex-wrap items-center gap-3">
-      <Button variant="gradient" size="lg" shape="cut" shimmer magnetic>
+      <Button variant="gradient" size="lg">
         Start free
         <svg data-kz-icon="ForwardIcon" viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
           <path d="M5 12h14M13 6l6 6-6 6" />
         </svg>
       </Button>
-      <Button variant="outline" size="lg" shape="cut">
+      <Button variant="outline" size="lg">
         Talk to us
       </Button>
     </div>

package/registry/examples/card/interactive-link.tsx

@@ -1,6 +1,6 @@
 import { Card } from "@krizaka/ui/card";
 
-// `asChild` + `<a>`: the whole card is one link; `interactive` adds the spotlight and the lift.
+// `asChild` + `<a>`: the whole card is one link; `interactive` adds the quiet hover (a hairline and surface step).
 export default function CardInteractiveLink() {
   return (
     <Card.Root asChild interactive>

package/registry/examples/card-grid/hover-quiet.js

@@ -11,7 +11,7 @@ var shortcuts = [
   { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts \u2014 behind four gates." }
 ];
 function CardGridHoverQuiet() {
-  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, hover: "quiet", children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
+  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
 }
 export {
   CardGridHoverQuiet as default

package/registry/examples/card-grid/hover-quiet.tsx

@@ -11,7 +11,7 @@ const shortcuts = [
 // A whole grid quiet: `hover="quiet"` on the grid, the cards inherit it (a card can still say `hover="light"`).
 export default function CardGridHoverQuiet() {
   return (
-    <CardGrid className="w-full max-w-4xl" min={260} reveal={false} hover="quiet">
+    <CardGrid className="w-full max-w-4xl" min={260} reveal={false}>
       {shortcuts.map((s) => (
         <LinkCard key={s.id} href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta="Open" />
       ))}

package/registry/examples/component-page/button.js

@@ -16,8 +16,8 @@ function ComponentPageButton() {
       summary: "The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in.",
       facts: [{ label: "Web + Mobile", tone: "ok" }, { label: "Stable" }],
       preview: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 p-8", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", shimmer: true, children: "Publish" }),
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", shape: "cut", children: "Save a draft" })
+        /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Publish" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Save a draft" })
       ] }),
       install: { code: 'import { Button } from "@krizaka/ui/button";', language: "ts", copyLabel: "Copy", copiedLabel: "Copied" },
       sections: [

package/registry/examples/component-page/button.tsx

@@ -15,8 +15,8 @@ export default function ComponentPageButton() {
       facts={[{ label: "Web + Mobile", tone: "ok" }, { label: "Stable" }]}
       preview={
         <div className="flex flex-wrap items-center justify-center gap-3 p-8">
-          <Button variant="primary" shape="cut" shimmer>Publish</Button>
-          <Button variant="secondary" shape="cut">Save a draft</Button>
+          <Button variant="primary">Publish</Button>
+          <Button variant="secondary">Save a draft</Button>
         </div>
       }
       install={{ code: 'import { Button } from "@krizaka/ui/button";', language: "ts", copyLabel: "Copy", copiedLabel: "Copied" }}

package/registry/examples/contact-page/team.js

@@ -28,7 +28,7 @@ function ContactPageTeam() {
           /* @__PURE__ */ jsx(Field.Label, { htmlFor: "contact-message", children: "Message" }),
           /* @__PURE__ */ jsx(Textarea, { id: "contact-message", rows: 4 })
         ] }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", shimmer: true, children: "Send" })
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", children: "Send" })
       ] }),
       next: { title: "What happens next", steps: [{ title: "We read it", text: "The same day, on working days." }, { title: "We answer", text: "Within two working days." }] }
     }

package/registry/examples/contact-page/team.tsx

@@ -29,7 +29,7 @@ export default function ContactPageTeam() {
             <Field.Label htmlFor="contact-message">Message</Field.Label>
             <Textarea id="contact-message" rows={4} />
           </Field.Root>
-          <Button type="submit" variant="primary" size="lg" shape="cut" shimmer>Send</Button>
+          <Button type="submit" variant="primary" size="lg">Send</Button>
         </form>
       }
       next={{ title: "What happens next", steps: [{ title: "We read it", text: "The same day, on working days." }, { title: "We answer", text: "Within two working days." }] }}

package/registry/examples/cover-hero/plain.js

@@ -5,7 +5,7 @@ import { Button } from "@krizaka/ui/button";
 import { CoverHero } from "@krizaka/ui/cover-hero";
 import { jsx } from "react/jsx-runtime";
 function CoverHeroPlain() {
-  return /* @__PURE__ */ jsx(CoverHero, { eyebrow: "Plateau \xB7 Montr\xE9al", title: "Atelier S\xE8ve", lead: "Ceramics classes for beginners, in small groups.", actions: /* @__PURE__ */ jsx(Button, { size: "lg", shape: "cut", variant: "primary", children: "Book a class" }) });
+  return /* @__PURE__ */ jsx(CoverHero, { eyebrow: "Plateau \xB7 Montr\xE9al", title: "Atelier S\xE8ve", lead: "Ceramics classes for beginners, in small groups.", actions: /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", children: "Book a class" }) });
 }
 export {
   CoverHeroPlain as default

package/registry/examples/cover-hero/plain.tsx

@@ -3,5 +3,5 @@ import { CoverHero } from "@krizaka/ui/cover-hero";
 
 // Without a cover the hero wears the brand's colours: a new shop still opens on a designed screen.
 export default function CoverHeroPlain() {
-  return <CoverHero eyebrow="Plateau · Montréal" title="Atelier Sève" lead="Ceramics classes for beginners, in small groups." actions={<Button size="lg" shape="cut" variant="primary">Book a class</Button>} />;
+  return <CoverHero eyebrow="Plateau · Montréal" title="Atelier Sève" lead="Ceramics classes for beginners, in small groups." actions={<Button size="lg" variant="primary">Book a class</Button>} />;
 }

package/registry/examples/cover-hero/shop.js

@@ -18,7 +18,7 @@ function CoverHeroShop() {
         /* @__PURE__ */ jsx(Badge, { tone: "success", dot: true, size: "md", children: "Open now \xB7 closes at 5 pm" }),
         /* @__PURE__ */ jsx(Badge, { tone: "scrim", size: "md", children: "Saint-Henri" })
       ] }),
-      actions: /* @__PURE__ */ jsx(Button, { size: "lg", shape: "cut", variant: "primary", children: "Book a walk" })
+      actions: /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", children: "Book a walk" })
     }
   );
 }

package/registry/examples/cover-hero/shop.tsx

@@ -14,7 +14,7 @@ export default function CoverHeroShop() {
       title="Pattes de Saint-Henri"
       lead="Neighbourhood dog walks, with a photo and a note after each one."
       facts={<><Badge tone="success" dot size="md">Open now · closes at 5 pm</Badge><Badge tone="scrim" size="md">Saint-Henri</Badge></>}
-      actions={<Button size="lg" shape="cut" variant="primary">Book a walk</Button>}
+      actions={<Button size="lg" variant="primary">Book a walk</Button>}
     />
   );
 }

package/registry/examples/dashboard-layout/orazaka-eric.js

@@ -25,8 +25,8 @@ function DashboardLayoutOrazakaEric() {
       title: "Good morning, Eric",
       description: "Nothing left your server this week: 1,284 requests, all answered locally.",
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", shape: "cut", children: "Add a pack" }),
-        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "New job" })
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", children: "Add a pack" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", children: "New job" })
       ] }),
       toolbar: /* @__PURE__ */ jsxs(Chip.Group, { type: "single", label: "Period", defaultValue: "7d", required: true, children: [
         /* @__PURE__ */ jsx(Chip, { value: "today", children: "Today" }),

package/registry/examples/dashboard-layout/orazaka-eric.tsx

@@ -27,8 +27,8 @@ export default function DashboardLayoutOrazakaEric() {
         description="Nothing left your server this week: 1,284 requests, all answered locally."
         actions={
           <>
-            <Button size="sm" variant="secondary" shape="cut">Add a pack</Button>
-            <Button size="sm" variant="primary" shape="cut">New job</Button>
+            <Button size="sm" variant="secondary">Add a pack</Button>
+            <Button size="sm" variant="primary">New job</Button>
           </>
         }
         toolbar={

package/registry/examples/detail-layout/checkout.js

@@ -20,7 +20,7 @@ function DetailLayoutCheckout() {
       meta: "She keeps 90 %. Paid out every Monday.",
       aside: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4", children: [
         /* @__PURE__ */ jsx(Stat, { label: "You pay", value: `\u20AC${amount}`, hint: "no fee added on top" }),
-        /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", className: "w-full", children: `Tip \u20AC${amount}` })
+        /* @__PURE__ */ jsx(Button, { variant: "primary", className: "w-full", children: `Tip \u20AC${amount}` })
       ] }),
       children: /* @__PURE__ */ jsxs("form", { className: "flex max-w-lg flex-col gap-5", onSubmit: (e) => e.preventDefault(), children: [
         /* @__PURE__ */ jsx(Chip.Group, { type: "single", label: "Amount", value: amount, onValueChange: (v) => v && setAmount(v), required: true, children: AMOUNTS.map((a) => /* @__PURE__ */ jsx(Chip, { value: String(a), children: `\u20AC${a}` }, a)) }),

package/registry/examples/detail-layout/checkout.tsx

@@ -23,7 +23,7 @@ export default function DetailLayoutCheckout() {
         aside={
           <div className="flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4">
             <Stat label="You pay" value={`€${amount}`} hint="no fee added on top" />
-            <Button variant="primary" shape="cut" className="w-full">{`Tip €${amount}`}</Button>
+            <Button variant="primary" className="w-full">{`Tip €${amount}`}</Button>
           </div>
         }
       >

package/registry/examples/detail-layout/job.js

@@ -15,7 +15,7 @@ function DetailLayoutJob() {
       title: "Podcast transcript",
       status: /* @__PURE__ */ jsx(Badge, { tone: "accent", dot: true, children: "Running" }),
       meta: "Whisper large \xB7 started 5 min ago",
-      actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", shape: "cut", children: "Cancel" }),
+      actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", children: "Cancel" }),
       children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "The transcript appears here as it is written." })
     }
   );

package/registry/examples/detail-layout/job.tsx

@@ -12,7 +12,7 @@ export default function DetailLayoutJob() {
       title="Podcast transcript"
       status={<Badge tone="accent" dot>Running</Badge>}
       meta="Whisper large · started 5 min ago"
-      actions={<Button size="sm" variant="danger" shape="cut">Cancel</Button>}
+      actions={<Button size="sm" variant="danger">Cancel</Button>}
     >
       <p className="text-sm text-fg-secondary">The transcript appears here as it is written.</p>
     </DetailLayout>

package/registry/examples/detail-layout/video.js

@@ -19,8 +19,8 @@ function DetailLayoutVideo() {
       status: /* @__PURE__ */ jsx(Badge, { tone: "success", dot: true, children: "Published" }),
       meta: /* @__PURE__ */ jsx(Facts, { items: [{ label: "12:48" }, { label: "Unlock \u20AC4.99" }, { label: "18+ checked", tone: "ok" }] }),
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", shape: "cut", children: "Edit" }),
-        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Share" })
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", children: "Edit" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", children: "Share" })
       ] }),
       tabs: /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Video", children: [
         /* @__PURE__ */ jsx(Tabs.Trigger, { value: "overview", children: "Overview" }),

package/registry/examples/detail-layout/video.tsx

@@ -23,8 +23,8 @@ export default function DetailLayoutVideo() {
           meta={<Facts items={[{ label: "12:48" }, { label: "Unlock €4.99" }, { label: "18+ checked", tone: "ok" }]} />}
           actions={
             <>
-              <Button size="sm" variant="secondary" shape="cut">Edit</Button>
-              <Button size="sm" variant="primary" shape="cut">Share</Button>
+              <Button size="sm" variant="secondary">Edit</Button>
+              <Button size="sm" variant="primary">Share</Button>
             </>
           }
           tabs={

package/registry/examples/docs-hub-page/krizaka.js

@@ -20,7 +20,7 @@ function DocsHubPageKrizaka() {
       eyebrow: "Documentation",
       title: "Build with Krizaka",
       lead: "Every building block the products are made of, documented from its source.",
-      search: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "lg", shape: "cut", className: "w-full justify-between text-fg-secondary", children: [
+      search: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "lg", className: "w-full justify-between text-fg-secondary", children: [
         "Search the documentation ",
         /* @__PURE__ */ jsx(Kbd, { children: "\u2318K" })
       ] }),

package/registry/examples/docs-hub-page/krizaka.tsx

@@ -21,7 +21,7 @@ export default function DocsHubPageKrizaka() {
       title="Build with Krizaka"
       lead="Every building block the products are made of, documented from its source."
       search={
-        <Button variant="secondary" size="lg" shape="cut" className="w-full justify-between text-fg-secondary">
+        <Button variant="secondary" size="lg" className="w-full justify-between text-fg-secondary">
           Search the documentation <Kbd>⌘K</Kbd>
         </Button>
       }

package/registry/examples/empty-state/library.js

@@ -15,7 +15,7 @@ function EmptyStateLibrary() {
         icon: /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", mood: "empty", size: 96 }),
         title: "Nothing here yet",
         description: "Your videos, once published, wait here with their sales. The first one takes about ten minutes.",
-        action: /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", children: "Publish a first video" })
+        action: /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Publish a first video" })
       }
     )
   ] });

package/registry/examples/empty-state/library.tsx

@@ -13,7 +13,7 @@ export default function EmptyStateLibrary() {
         icon={<Mascot bird="flamingo" mood="empty" size={96} />}
         title="Nothing here yet"
         description="Your videos, once published, wait here with their sales. The first one takes about ten minutes."
-        action={<Button variant="primary" shape="cut">Publish a first video</Button>}
+        action={<Button variant="primary">Publish a first video</Button>}
       />
     </Page>
   );

package/registry/examples/glow-card/spotlight.tsx

@@ -1,6 +1,6 @@
 import { GlowCard } from "@krizaka/ui/glow-card";
 
-// `glow="spotlight"`: only the bloom under the pointer, for a dense grid where rings would be too much.
+// `glow="spotlight"` is deprecated (krizaka-ui#393): the bloom under the pointer is retired, so these cards draw no ring.
 export default function GlowCardSpotlight() {
   return (
     <div className="grid w-full max-w-lg grid-cols-2 gap-3">

package/registry/examples/landing-page/krizaka.js

@@ -13,8 +13,8 @@ function LandingPageKrizaka() {
       title: "Products that keep what is yours",
       lead: "Krizaka builds sovereign AI and a platform where creators are paid \u2014 open source, on your servers or ours.",
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", shimmer: true, children: "See the products" }),
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "lg", shape: "cut", children: "Read the docs" })
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", children: "See the products" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "lg", children: "Read the docs" })
       ] }),
       visualLabel: "orazaka.local \u2014 console",
       visual: /* @__PURE__ */ jsxs("div", { className: "grid gap-3 p-5", children: [
@@ -35,7 +35,7 @@ function LandingPageKrizaka() {
         { id: "blocks", size: "md", title: "Open building blocks", text: "Users, billing, notifications \u2014 on Maven Central and npm." },
         { id: "ui", size: "md", title: "One design system", text: "Krizaka UI, web and mobile, documented from its code." }
       ],
-      closing: { title: "Something to build together?", body: "Tell us what you need; a person answers within two days.", actions: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", children: "Contact us" }) }
+      closing: { title: "Something to build together?", body: "Tell us what you need; a person answers within two days.", actions: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", children: "Contact us" }) }
     }
   );
 }

package/registry/examples/landing-page/krizaka.tsx

@@ -13,8 +13,8 @@ export default function LandingPageKrizaka() {
       lead="Krizaka builds sovereign AI and a platform where creators are paid — open source, on your servers or ours."
       actions={
         <>
-          <Button variant="primary" size="lg" shape="cut" shimmer>See the products</Button>
-          <Button variant="secondary" size="lg" shape="cut">Read the docs</Button>
+          <Button variant="primary" size="lg">See the products</Button>
+          <Button variant="secondary" size="lg">Read the docs</Button>
         </>
       }
       visualLabel="orazaka.local — console"
@@ -38,7 +38,7 @@ export default function LandingPageKrizaka() {
         { id: "blocks", size: "md", title: "Open building blocks", text: "Users, billing, notifications — on Maven Central and npm." },
         { id: "ui", size: "md", title: "One design system", text: "Krizaka UI, web and mobile, documented from its code." },
       ]}
-      closing={{ title: "Something to build together?", body: "Tell us what you need; a person answers within two days.", actions: <Button variant="primary" size="lg" shape="cut">Contact us</Button> }}
+      closing={{ title: "Something to build together?", body: "Tell us what you need; a person answers within two days.", actions: <Button variant="primary" size="lg">Contact us</Button> }}
     />
   );
 }

package/registry/examples/link-card/hover-quiet.js

@@ -11,7 +11,7 @@ var shortcuts = [
   { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts \u2014 behind four gates." }
 ];
 function LinkCardHoverQuiet() {
-  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { hover: "quiet", href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
+  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
 }
 export {
   LinkCardHoverQuiet as default

package/registry/examples/link-card/hover-quiet.tsx

@@ -13,7 +13,7 @@ export default function LinkCardHoverQuiet() {
   return (
     <CardGrid className="w-full max-w-4xl" min={260} reveal={false}>
       {shortcuts.map((s) => (
-        <LinkCard key={s.id} hover="quiet" href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta="Open" />
+        <LinkCard key={s.id} href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta="Open" />
       ))}
     </CardGrid>
   );

package/registry/examples/map/route.js

@@ -0,0 +1,36 @@
+"use client";
+
+// registry/examples/map/route.tsx
+import { Button } from "@krizaka/ui/button";
+import { Map, Marker, Pulse, Route, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STUDIO = [-73.6005, 45.5229];
+var HOME = [-73.5695, 45.5268];
+var PATH = [STUDIO, [-73.5935, 45.5232], [-73.5862, 45.5159], [-73.5753, 45.5171], HOME];
+function MapRoute() {
+  const [run, setRun] = React.useState(0);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xl flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs(
+      Map,
+      {
+        label: "A delivery from the studio to Parc La Fontaine",
+        center: [-73.585, 45.521],
+        zoom: 13.2,
+        className: "h-80 w-full",
+        fallback: /* @__PURE__ */ jsx(StaticMap, { label: "A delivery from the studio to Parc La Fontaine", center: [-73.585, 45.521], zoom: 13.2, places: [{ position: STUDIO, label: "Studio" }, { position: HOME, label: "Parc La Fontaine" }] }),
+        children: [
+          /* @__PURE__ */ jsx(Route, { path: PATH, label: "Delivery from the studio to Parc La Fontaine, 3 km", courier: true, tripDuration: 3600 }),
+          /* @__PURE__ */ jsx(Marker, { position: STUDIO, label: "Studio", drop: 0 }),
+          /* @__PURE__ */ jsx(Marker, { position: HOME, label: "Parc La Fontaine", drop: 260 }),
+          /* @__PURE__ */ jsx(Pulse, { position: HOME, label: "Orders are picking up around Parc La Fontaine", size: 64 })
+        ]
+      },
+      run
+    ),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => setRun((n) => n + 1), children: "Replay" })
+  ] });
+}
+export {
+  MapRoute as default
+};

package/registry/examples/map/route.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { Map, Marker, Pulse, Route, StaticMap } from "@krizaka/ui/map";
+import * as React from "react";
+
+const STUDIO = [-73.6005, 45.5229] as const;
+const HOME = [-73.5695, 45.5268] as const;
+const PATH = [STUDIO, [-73.5935, 45.5232], [-73.5862, 45.5159], [-73.5753, 45.5171], HOME] as const;
+
+// A delivery in Montréal: the pins drop (staggered), the route draws itself, a courier makes the trip, a demand pulse
+// beats at the destination. Under reduced motion everything is in place at once, the courier at the end.
+export default function MapRoute() {
+  const [run, setRun] = React.useState(0);
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-3">
+      <Map
+        key={run}
+        label="A delivery from the studio to Parc La Fontaine"
+        center={[-73.585, 45.521]}
+        zoom={13.2}
+        className="h-80 w-full"
+        fallback={<StaticMap label="A delivery from the studio to Parc La Fontaine" center={[-73.585, 45.521]} zoom={13.2} places={[{ position: STUDIO, label: "Studio" }, { position: HOME, label: "Parc La Fontaine" }]} />}
+      >
+        <Route path={PATH} label="Delivery from the studio to Parc La Fontaine, 3 km" courier tripDuration={3600} />
+        <Marker position={STUDIO} label="Studio" drop={0} />
+        <Marker position={HOME} label="Parc La Fontaine" drop={260} />
+        <Pulse position={HOME} label="Orders are picking up around Parc La Fontaine" size={64} />
+      </Map>
+      <Button variant="secondary" size="sm" onClick={() => setRun((n) => n + 1)}>
+        Replay
+      </Button>
+    </div>
+  );
+}

package/registry/examples/marketing-layout/pricing.js

@@ -29,7 +29,7 @@ function MarketingLayoutPricing() {
         "\u2014 ",
         x
       ] }, x)) }),
-      /* @__PURE__ */ jsxs(Button, { variant: p.featured ? "primary" : "secondary", shape: "cut", className: "mt-auto w-full", children: [
+      /* @__PURE__ */ jsxs(Button, { variant: p.featured ? "primary" : "secondary", className: "mt-auto w-full", children: [
         "Choose ",
         p.name
       ] })