@krizaka/ui 3.23.0 → 3.25.0

package/dist/opening-hours.js

@@ -0,0 +1,48 @@
+import {
+  ChevronGlyph
+} from "./chunk-XCBVFMNV.js";
+
+// src/opening-hours/opening-hours.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var openingHours = tv({
+  slots: {
+    root: "group/hours rounded-xl border border-border-default bg-surface-1 text-fg",
+    summary: "flex min-h-14 cursor-pointer list-none items-center gap-3 rounded-xl px-4 py-3 outline-hidden marker:hidden focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-details-marker]:hidden",
+    dot: "h-2.5 w-2.5 shrink-0 rounded-full bg-fg-muted data-[open=true]:bg-success data-[open=true]:motion-safe:animate-pulse",
+    status: "flex min-w-0 flex-1 flex-col leading-tight",
+    state: "text-sm font-bold text-fg",
+    detail: "text-xs text-fg-secondary",
+    today: "hidden shrink-0 text-sm tabular-nums text-fg-secondary sm:block",
+    chevron: "h-4 w-4 shrink-0 text-fg-secondary transition-transform group-open/hours:rotate-180 motion-reduce:transition-none",
+    list: "m-0 flex list-none flex-col gap-0.5 border-t border-border-subtle p-2 sm:p-3",
+    row: "flex items-baseline justify-between gap-4 rounded-lg px-2 py-1.5 text-sm text-fg-secondary data-[today]:bg-accent-soft data-[today]:font-bold data-[today]:text-fg",
+    day: "shrink-0",
+    hours: "text-right tabular-nums"
+  }
+});
+var s = openingHours();
+function OpeningHours({ days, today, status, label, className, ...props }) {
+  const todayHours = days.find((d) => d.id === today)?.hours;
+  return /* @__PURE__ */ jsxs("details", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsxs("summary", { className: s.summary(), children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-open": status.open, className: s.dot() }),
+      /* @__PURE__ */ jsxs("span", { className: s.status(), children: [
+        /* @__PURE__ */ jsx("span", { className: s.state(), children: status.label }),
+        status.detail && /* @__PURE__ */ jsx("span", { className: s.detail(), children: status.detail })
+      ] }),
+      todayHours && /* @__PURE__ */ jsx("span", { className: s.today(), children: todayHours }),
+      /* @__PURE__ */ jsx(ChevronGlyph, { className: s.chevron() }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: s.list(), "aria-label": label, children: days.map((day) => /* @__PURE__ */ jsxs("li", { className: s.row(), "data-today": day.id === today ? "" : void 0, "aria-current": day.id === today ? "date" : void 0, children: [
+      /* @__PURE__ */ jsx("span", { className: s.day(), children: day.label }),
+      /* @__PURE__ */ jsx("span", { className: s.hours(), children: day.hours })
+    ] }, day.id)) })
+  ] });
+}
+export {
+  OpeningHours,
+  openingHours
+};
+//# sourceMappingURL=opening-hours.js.map

package/dist/opening-hours.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/opening-hours/opening-hours.tsx"],"sourcesContent":["// Server-safe: no hook, no context (a native <details>). A shop's weekly hours in one quiet row — « Open now · closes at 5 pm »\n// and today's hours — that unfolds into the whole week with today marked. The app computes the status and formats the\n// times (the shop's zone and the reader's locale are its business); this block only lays them out.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const openingHours = tv({\n  slots: {\n    root: \"group/hours rounded-xl border border-border-default bg-surface-1 text-fg\",\n    summary:\n      \"flex min-h-14 cursor-pointer list-none items-center gap-3 rounded-xl px-4 py-3 outline-hidden marker:hidden focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-details-marker]:hidden\",\n    dot: \"h-2.5 w-2.5 shrink-0 rounded-full bg-fg-muted data-[open=true]:bg-success data-[open=true]:motion-safe:animate-pulse\",\n    status: \"flex min-w-0 flex-1 flex-col leading-tight\",\n    state: \"text-sm font-bold text-fg\",\n    detail: \"text-xs text-fg-secondary\",\n    today: \"hidden shrink-0 text-sm tabular-nums text-fg-secondary sm:block\",\n    chevron: \"h-4 w-4 shrink-0 text-fg-secondary transition-transform group-open/hours:rotate-180 motion-reduce:transition-none\",\n    list: \"m-0 flex list-none flex-col gap-0.5 border-t border-border-subtle p-2 sm:p-3\",\n    row: \"flex items-baseline justify-between gap-4 rounded-lg px-2 py-1.5 text-sm text-fg-secondary data-[today]:bg-accent-soft data-[today]:font-bold data-[today]:text-fg\",\n    day: \"shrink-0\",\n    hours: \"text-right tabular-nums\",\n  },\n});\nconst s = openingHours();\n\nexport type OpeningDay = {\n  /** A stable id (`mon`, `1`). */\n  id: string;\n  /** The day's name, translated (`Lundi`). */\n  label: string;\n  /** The day's hours, formatted by the app (`8 h – 12 h, 13 h – 17 h`); the app's word for closed when there are none. */\n  hours: string;\n};\n\nexport type OpeningStatus = {\n  /** Open at this moment. */\n  open: boolean;\n  /** The state in words (`Open now`, `Closed`). */\n  label: string;\n  /** What follows (`closes at 5 pm`, `opens tomorrow at 8 am`). */\n  detail?: string;\n};\n\nexport type OpeningHoursProps = Omit<React.ComponentProps<\"details\">, \"children\"> & {\n  /** The week, in reading order. */\n  days: readonly OpeningDay[];\n  /** The id of today's day: its row is marked (`aria-current=\"date\"`) and its hours show on the closed row. */\n  today?: string;\n  /** Open or closed right now, in words. */\n  status: OpeningStatus;\n  /** The name of the list (`Hours`), passed translated. */\n  label: string;\n};\n\n/** The weekly hours in one row — open now, closes at… — that unfolds into the week, today highlighted. */\nexport function OpeningHours({ days, today, status, label, className, ...props }: OpeningHoursProps) {\n  const todayHours = days.find((d) => d.id === today)?.hours;\n  return (\n    <details className={s.root({ className })} {...props}>\n      <summary className={s.summary()}>\n        <span aria-hidden data-open={status.open} className={s.dot()} />\n        <span className={s.status()}>\n          <span className={s.state()}>{status.label}</span>\n          {status.detail && <span className={s.detail()}>{status.detail}</span>}\n        </span>\n        {todayHours && <span className={s.today()}>{todayHours}</span>}\n        <ChevronGlyph className={s.chevron()} />\n        <span className=\"sr-only\">{label}</span>\n      </summary>\n      <ul className={s.list()} aria-label={label}>\n        {days.map((day) => (\n          <li key={day.id} className={s.row()} data-today={day.id === today ? \"\" : undefined} aria-current={day.id === today ? \"date\" : undefined}>\n            <span className={s.day()}>{day.label}</span>\n            <span className={s.hours()}>{day.hours}</span>\n          </li>\n        ))}\n      </ul>\n    </details>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAS,UAAU;AA0DX,cACA,YADA;AAtDD,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SACE;AAAA,IACF,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AACF,CAAC;AACD,IAAM,IAAI,aAAa;AAgChB,SAAS,aAAa,EAAE,MAAM,OAAO,QAAQ,OAAO,WAAW,GAAG,MAAM,GAAsB;AACnG,QAAM,aAAa,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK,GAAG;AACrD,SACE,qBAAC,aAAQ,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC7C;AAAA,yBAAC,aAAQ,WAAW,EAAE,QAAQ,GAC5B;AAAA,0BAAC,UAAK,eAAW,MAAC,aAAW,OAAO,MAAM,WAAW,EAAE,IAAI,GAAG;AAAA,MAC9D,qBAAC,UAAK,WAAW,EAAE,OAAO,GACxB;AAAA,4BAAC,UAAK,WAAW,EAAE,MAAM,GAAI,iBAAO,OAAM;AAAA,QACzC,OAAO,UAAU,oBAAC,UAAK,WAAW,EAAE,OAAO,GAAI,iBAAO,QAAO;AAAA,SAChE;AAAA,MACC,cAAc,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAI,sBAAW;AAAA,MACvD,oBAAC,gBAAa,WAAW,EAAE,QAAQ,GAAG;AAAA,MACtC,oBAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,OACnC;AAAA,IACA,oBAAC,QAAG,WAAW,EAAE,KAAK,GAAG,cAAY,OAClC,eAAK,IAAI,CAAC,QACT,qBAAC,QAAgB,WAAW,EAAE,IAAI,GAAG,cAAY,IAAI,OAAO,QAAQ,KAAK,QAAW,gBAAc,IAAI,OAAO,QAAQ,SAAS,QAC5H;AAAA,0BAAC,UAAK,WAAW,EAAE,IAAI,GAAI,cAAI,OAAM;AAAA,MACrC,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAI,cAAI,OAAM;AAAA,SAFhC,IAAI,EAGb,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/rail-nav.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   ChevronGlyph
-} from "./chunk-AFY35UCB.js";
+} from "./chunk-P7GZR5CU.js";
 import {
   cn
 } from "./chunk-WU4VLSEA.js";

package/dist/service-card.d.ts

@@ -0,0 +1,168 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+import { L as LinkComponent } from './block-link-BAg4eoZk.js';
+
+declare const serviceCard: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            titles?: tailwind_variants.ClassValue;
+            name?: tailwind_variants.ClassValue;
+            facts?: tailwind_variants.ClassValue;
+            tag?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            included?: tailwind_variants.ClassValue;
+            includedItem?: tailwind_variants.ClassValue;
+            foot?: tailwind_variants.ClassValue;
+            priceBlock?: tailwind_variants.ClassValue;
+            from?: tailwind_variants.ClassValue;
+            price?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            titles?: tailwind_variants.ClassValue;
+            name?: tailwind_variants.ClassValue;
+            facts?: tailwind_variants.ClassValue;
+            tag?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            included?: tailwind_variants.ClassValue;
+            includedItem?: tailwind_variants.ClassValue;
+            foot?: tailwind_variants.ClassValue;
+            priceBlock?: tailwind_variants.ClassValue;
+            from?: tailwind_variants.ClassValue;
+            price?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    media: string;
+    body: string;
+    head: string;
+    icon: string;
+    titles: string;
+    name: string;
+    facts: string;
+    tag: string;
+    description: string;
+    included: string;
+    includedItem: string;
+    foot: string;
+    priceBlock: string;
+    from: string;
+    price: string;
+    action: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            titles?: tailwind_variants.ClassValue;
+            name?: tailwind_variants.ClassValue;
+            facts?: tailwind_variants.ClassValue;
+            tag?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            included?: tailwind_variants.ClassValue;
+            includedItem?: tailwind_variants.ClassValue;
+            foot?: tailwind_variants.ClassValue;
+            priceBlock?: tailwind_variants.ClassValue;
+            from?: tailwind_variants.ClassValue;
+            price?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    media: string;
+    body: string;
+    head: string;
+    icon: string;
+    titles: string;
+    name: string;
+    facts: string;
+    tag: string;
+    description: string;
+    included: string;
+    includedItem: string;
+    foot: string;
+    priceBlock: string;
+    from: string;
+    price: string;
+    action: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    media: string;
+    body: string;
+    head: string;
+    icon: string;
+    titles: string;
+    name: string;
+    facts: string;
+    tag: string;
+    description: string;
+    included: string;
+    includedItem: string;
+    foot: string;
+    priceBlock: string;
+    from: string;
+    price: string;
+    action: string;
+}>>;
+type ServiceCardProps = Omit<React.ComponentProps<"article">, "title" | "children"> & {
+    /** The service's name (the heading). */
+    name: string;
+    /** Its price, formatted by the app (`22,00 $`): the card never formats money. */
+    price: string;
+    /** The words before the price when it varies (`From`, `À partir de`), passed translated. */
+    priceFrom?: string;
+    /** How long it takes (`30 min`) — the first fact. */
+    duration?: string;
+    /** How many it takes (`Up to 5 dogs`, `1 person`) — the second fact. */
+    capacity?: string;
+    /** One or two sentences: what it is. */
+    description?: string;
+    /** What is included, one short line each (a check precedes it). */
+    included?: readonly string[];
+    /** A tag on the top right (`Popular`): only from real data, never decoration. */
+    tag?: string;
+    /** An icon tile before the name (a signature icon): decorative. */
+    icon?: React.ReactNode;
+    /** A photo or a loop above the card (an `img`, a `video`): fills a 16:9 band. */
+    media?: React.ReactNode;
+    /** This service is the chosen one (the accent, `data-selected`). */
+    selected?: boolean;
+    /** The words of the way in (`Book`, `Choose`): the accessible name of the press. */
+    actionLabel: string;
+    /** The way in, as an address (the booking page with this service preselected). */
+    href?: string;
+    /** The app's link component for internal addresses (Next's `Link`). */
+    linkAs?: LinkComponent;
+    /** The way in, as a press (a client parent). Ignored when `href` is set. */
+    onSelect?: () => void;
+    /**
+     * The heading level of the name.
+     * @default "h3"
+     */
+    titleAs?: "h2" | "h3" | "h4";
+    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay. */
+    reveal?: number;
+};
+/** A service as a card: icon or photo, duration, price, what is included, the capacity, a tag — one way in. */
+declare function ServiceCard({ name, price, priceFrom, duration, capacity, description, included, tag, icon, media, selected, actionLabel, href, linkAs, onSelect, titleAs: Title, reveal, className, style, ...props }: ServiceCardProps): React.JSX.Element;
+
+export { ServiceCard, type ServiceCardProps, serviceCard };

package/dist/service-card.js

@@ -0,0 +1,112 @@
+import {
+  BlockLink
+} from "./chunk-2AGSO3WH.js";
+import {
+  CheckGlyph
+} from "./chunk-XCBVFMNV.js";
+
+// src/service-card/service-card.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var serviceCard = tv({
+  slots: {
+    root: "group kz-spotlight kz-lift relative flex h-full min-w-0 flex-col overflow-hidden rounded-xl border border-border-default bg-surface-1 text-fg transition-colors hover:border-accent/50 focus-within:ring-2 focus-within:ring-ring data-[selected]:border-accent data-[selected]:bg-accent-soft",
+    media: "relative aspect-[16/9] w-full overflow-hidden bg-media [&>img]:h-full [&>img]:w-full [&>img]:object-cover",
+    body: "flex flex-1 flex-col gap-3 p-4 sm:p-5",
+    head: "flex items-start gap-3",
+    icon: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-fg-accent [&>svg]:h-5 [&>svg]:w-5",
+    titles: "flex min-w-0 flex-1 flex-col gap-1",
+    name: "m-0 font-display text-lg font-bold leading-tight tracking-tight text-fg",
+    facts: "m-0 flex list-none flex-wrap gap-x-2 gap-y-0.5 p-0 text-xs text-fg-secondary",
+    tag: "shrink-0 rounded-full bg-accent px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-on-accent",
+    description: "m-0 text-sm leading-relaxed text-fg-secondary",
+    included: "m-0 flex list-none flex-col gap-1.5 p-0 text-sm text-fg-secondary",
+    includedItem: "flex items-start gap-2 [&>svg]:mt-0.5 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-accent",
+    foot: "mt-auto flex items-end justify-between gap-3 border-t border-border-subtle pt-3",
+    priceBlock: "flex flex-col leading-none",
+    from: "mb-1 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
+    price: "font-display text-2xl font-black tabular-nums text-fg",
+    action: "inline-flex min-h-9 items-center gap-1 rounded-full text-sm font-bold text-fg-accent no-underline after:absolute after:inset-0 after:content-[''] focus-visible:outline-hidden group-data-[selected]:text-fg"
+  }
+});
+var s = serviceCard();
+function ServiceCard({
+  name,
+  price,
+  priceFrom,
+  duration,
+  capacity,
+  description,
+  included,
+  tag,
+  icon,
+  media,
+  selected,
+  actionLabel,
+  href,
+  linkAs,
+  onSelect,
+  titleAs: Title = "h3",
+  reveal,
+  className,
+  style,
+  ...props
+}) {
+  const id = React.useId();
+  const facts = [duration, capacity].filter(Boolean);
+  const arrow = /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2192" });
+  const revealStyle = reveal === void 0 ? style : { ...style, "--kz-delay": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "aria-labelledby": id,
+      "data-selected": selected ? "" : void 0,
+      "data-reveal": reveal === void 0 ? void 0 : "",
+      style: revealStyle,
+      className: s.root({ className }),
+      ...props,
+      children: [
+        media && /* @__PURE__ */ jsx("div", { className: s.media(), children: media }),
+        /* @__PURE__ */ jsxs("div", { className: s.body(), children: [
+          /* @__PURE__ */ jsxs("div", { className: s.head(), children: [
+            icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.icon(), children: icon }),
+            /* @__PURE__ */ jsxs("div", { className: s.titles(), children: [
+              /* @__PURE__ */ jsx(Title, { id, className: s.name(), children: name }),
+              facts.length > 0 && /* @__PURE__ */ jsx("ul", { className: s.facts(), children: facts.map((fact, i) => /* @__PURE__ */ jsxs("li", { children: [
+                i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7 " }),
+                fact
+              ] }, i)) })
+            ] }),
+            tag && /* @__PURE__ */ jsx("span", { className: s.tag(), children: tag })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: s.description(), children: description }),
+          included && included.length > 0 && /* @__PURE__ */ jsx("ul", { className: s.included(), children: included.map((line) => /* @__PURE__ */ jsxs("li", { className: s.includedItem(), children: [
+            /* @__PURE__ */ jsx(CheckGlyph, {}),
+            /* @__PURE__ */ jsx("span", { children: line })
+          ] }, line)) }),
+          /* @__PURE__ */ jsxs("div", { className: s.foot(), children: [
+            /* @__PURE__ */ jsxs("p", { className: s.priceBlock(), children: [
+              priceFrom && /* @__PURE__ */ jsx("span", { className: s.from(), children: priceFrom }),
+              /* @__PURE__ */ jsx("span", { className: s.price(), children: price })
+            ] }),
+            href ? /* @__PURE__ */ jsxs(BlockLink, { href, linkAs, className: s.action(), "aria-describedby": id, children: [
+              actionLabel,
+              " ",
+              arrow
+            ] }) : onSelect ? /* @__PURE__ */ jsxs("button", { type: "button", onClick: onSelect, "aria-pressed": selected ?? false, "aria-describedby": id, className: s.action(), children: [
+              actionLabel,
+              " ",
+              arrow
+            ] }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ServiceCard,
+  serviceCard
+};
+//# sourceMappingURL=service-card.js.map

package/dist/service-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/service-card/service-card.tsx"],"sourcesContent":["// Server-safe: no hook, no context. A service a shop sells, as a card that argues: icon or photo, name, duration, price\n// (« from » when it varies), what is included, the capacity, a « Popular » tag — and one way in: a link (the booking page\n// with this service chosen) or a button (`onSelect`, from a client parent). The whole card takes the press.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { CheckGlyph } from \"../glyphs\";\n\nexport const serviceCard = tv({\n  slots: {\n    root:\n      \"group kz-spotlight kz-lift relative flex h-full min-w-0 flex-col overflow-hidden rounded-xl border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"hover:border-accent/50 focus-within:ring-2 focus-within:ring-ring data-[selected]:border-accent data-[selected]:bg-accent-soft\",\n    media: \"relative aspect-[16/9] w-full overflow-hidden bg-media [&>img]:h-full [&>img]:w-full [&>img]:object-cover\",\n    body: \"flex flex-1 flex-col gap-3 p-4 sm:p-5\",\n    head: \"flex items-start gap-3\",\n    icon: \"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-fg-accent [&>svg]:h-5 [&>svg]:w-5\",\n    titles: \"flex min-w-0 flex-1 flex-col gap-1\",\n    name: \"m-0 font-display text-lg font-bold leading-tight tracking-tight text-fg\",\n    facts: \"m-0 flex list-none flex-wrap gap-x-2 gap-y-0.5 p-0 text-xs text-fg-secondary\",\n    tag: \"shrink-0 rounded-full bg-accent px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-on-accent\",\n    description: \"m-0 text-sm leading-relaxed text-fg-secondary\",\n    included: \"m-0 flex list-none flex-col gap-1.5 p-0 text-sm text-fg-secondary\",\n    includedItem: \"flex items-start gap-2 [&>svg]:mt-0.5 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-accent\",\n    foot: \"mt-auto flex items-end justify-between gap-3 border-t border-border-subtle pt-3\",\n    priceBlock: \"flex flex-col leading-none\",\n    from: \"mb-1 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    price: \"font-display text-2xl font-black tabular-nums text-fg\",\n    action:\n      \"inline-flex min-h-9 items-center gap-1 rounded-full text-sm font-bold text-fg-accent no-underline \" +\n      \"after:absolute after:inset-0 after:content-[''] focus-visible:outline-hidden group-data-[selected]:text-fg\",\n  },\n});\nconst s = serviceCard();\n\nexport type ServiceCardProps = Omit<React.ComponentProps<\"article\">, \"title\" | \"children\"> & {\n  /** The service's name (the heading). */\n  name: string;\n  /** Its price, formatted by the app (`22,00 $`): the card never formats money. */\n  price: string;\n  /** The words before the price when it varies (`From`, `À partir de`), passed translated. */\n  priceFrom?: string;\n  /** How long it takes (`30 min`) — the first fact. */\n  duration?: string;\n  /** How many it takes (`Up to 5 dogs`, `1 person`) — the second fact. */\n  capacity?: string;\n  /** One or two sentences: what it is. */\n  description?: string;\n  /** What is included, one short line each (a check precedes it). */\n  included?: readonly string[];\n  /** A tag on the top right (`Popular`): only from real data, never decoration. */\n  tag?: string;\n  /** An icon tile before the name (a signature icon): decorative. */\n  icon?: React.ReactNode;\n  /** A photo or a loop above the card (an `img`, a `video`): fills a 16:9 band. */\n  media?: React.ReactNode;\n  /** This service is the chosen one (the accent, `data-selected`). */\n  selected?: boolean;\n  /** The words of the way in (`Book`, `Choose`): the accessible name of the press. */\n  actionLabel: string;\n  /** The way in, as an address (the booking page with this service preselected). */\n  href?: string;\n  /** The app's link component for internal addresses (Next's `Link`). */\n  linkAs?: LinkComponent;\n  /** The way in, as a press (a client parent). Ignored when `href` is set. */\n  onSelect?: () => void;\n  /**\n   * The heading level of the name.\n   * @default \"h3\"\n   */\n  titleAs?: \"h2\" | \"h3\" | \"h4\";\n  /** Enters on scroll (MotionObserver): the index in the grid becomes the delay. */\n  reveal?: number;\n};\n\n/** A service as a card: icon or photo, duration, price, what is included, the capacity, a tag — one way in. */\nexport function ServiceCard({\n  name, price, priceFrom, duration, capacity, description, included, tag, icon, media, selected, actionLabel, href, linkAs, onSelect, titleAs: Title = \"h3\", reveal, className, style, ...props\n}: ServiceCardProps) {\n  const id = React.useId();\n  const facts = [duration, capacity].filter(Boolean);\n  const arrow = <span aria-hidden>→</span>;\n  const revealStyle = reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <article\n      aria-labelledby={id}\n      data-selected={selected ? \"\" : undefined}\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      style={revealStyle}\n      className={s.root({ className })}\n      {...props}\n    >\n      {media && <div className={s.media()}>{media}</div>}\n      <div className={s.body()}>\n        <div className={s.head()}>\n          {icon && <span aria-hidden className={s.icon()}>{icon}</span>}\n          <div className={s.titles()}>\n            <Title id={id} className={s.name()}>{name}</Title>\n            {facts.length > 0 && (\n              <ul className={s.facts()}>\n                {facts.map((fact, i) => (\n                  <li key={i}>{i > 0 && <span aria-hidden>· </span>}{fact}</li>\n                ))}\n              </ul>\n            )}\n          </div>\n          {tag && <span className={s.tag()}>{tag}</span>}\n        </div>\n        {description && <p className={s.description()}>{description}</p>}\n        {included && included.length > 0 && (\n          <ul className={s.included()}>\n            {included.map((line) => (\n              <li key={line} className={s.includedItem()}>\n                <CheckGlyph />\n                <span>{line}</span>\n              </li>\n            ))}\n          </ul>\n        )}\n        <div className={s.foot()}>\n          <p className={s.priceBlock()}>\n            {priceFrom && <span className={s.from()}>{priceFrom}</span>}\n            <span className={s.price()}>{price}</span>\n          </p>\n          {href ? (\n            <BlockLink href={href} linkAs={linkAs} className={s.action()} aria-describedby={id}>\n              {actionLabel} {arrow}\n            </BlockLink>\n          ) : onSelect ? (\n            <button type=\"button\" onClick={onSelect} aria-pressed={selected ?? false} aria-describedby={id} className={s.action()}>\n              {actionLabel} {arrow}\n            </button>\n          ) : null}\n        </div>\n      </div>\n    </article>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/site-footer.js

@@ -4,10 +4,10 @@ import {
   familyLabels,
   siteById,
   sitesByGroup
-} from "./chunk-2L67YTNV.js";
+} from "./chunk-FTX66XZY.js";
 import {
   KrizakaLogo
-} from "./chunk-YCIBJ6OQ.js";
+} from "./chunk-4DH2HW3D.js";
 
 // src/site-footer/site-footer.tsx
 import { Slot } from "radix-ui";

package/dist/slot-picker.d.ts

@@ -0,0 +1,119 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+import { L as LinkComponent } from './block-link-BAg4eoZk.js';
+
+declare const slotPicker: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            time?: tailwind_variants.ClassValue;
+            note?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            days?: tailwind_variants.ClassValue;
+            dayName?: tailwind_variants.ClassValue;
+            daySub?: tailwind_variants.ClassValue;
+            times?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            time?: tailwind_variants.ClassValue;
+            note?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            days?: tailwind_variants.ClassValue;
+            dayName?: tailwind_variants.ClassValue;
+            daySub?: tailwind_variants.ClassValue;
+            times?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    days: string;
+    day: string;
+    dayName: string;
+    daySub: string;
+    times: string;
+    time: string;
+    note: string;
+    empty: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            time?: tailwind_variants.ClassValue;
+            note?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            days?: tailwind_variants.ClassValue;
+            dayName?: tailwind_variants.ClassValue;
+            daySub?: tailwind_variants.ClassValue;
+            times?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    days: string;
+    day: string;
+    dayName: string;
+    daySub: string;
+    times: string;
+    time: string;
+    note: string;
+    empty: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    days: string;
+    day: string;
+    dayName: string;
+    daySub: string;
+    times: string;
+    time: string;
+    note: string;
+    empty: string;
+}>>;
+type PickerSlot = {
+    /** A stable id (the slot's start as an ISO string). */
+    id: string;
+    /** The time in words, formatted by the app (`9 h 30`). */
+    label: string;
+    /** What to know about it (`2 places left`), shown beside the time and read with it. */
+    note?: string;
+    /** Not offered any more: shown, disabled. */
+    disabled?: boolean;
+    /** Makes the time a link to this address (the booking page with the slot chosen). */
+    href?: string;
+};
+type PickerDay = {
+    /** A stable id (`2026-10-19`). */
+    id: string;
+    /** The day's name, translated (`Today`, `Mon`). */
+    label: string;
+    /** Under it (`19 Oct`). */
+    sub?: string;
+    /** Its free times, in order. */
+    slots: readonly PickerSlot[];
+};
+type SlotPickerProps = Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> & {
+    /** The days that have free times, in order. */
+    days: readonly PickerDay[];
+    /** The name of the group (`Available times`), passed translated. */
+    label: string;
+    /** Said when no day has a free time. */
+    emptyLabel: string;
+    /** The chosen slot's id (controlled). */
+    value?: string | null;
+    /** Called with the chosen slot's id. */
+    onValueChange?: (id: string) => void;
+    /** The first day shown. Default: the first of `days`. */
+    defaultDay?: string;
+    /** The app's link component for the times that have an `href`. */
+    linkAs?: LinkComponent;
+};
+/** Tappable free times by day: the day strip, then the day's chips — links or toggles. */
+declare function SlotPicker({ days, label, emptyLabel, value, onValueChange, defaultDay, linkAs, className, ...props }: SlotPickerProps): React.JSX.Element;
+
+export { type PickerDay, type PickerSlot, SlotPicker, type SlotPickerProps, slotPicker };

package/dist/slot-picker.js

@@ -0,0 +1,46 @@
+"use client";
+import {
+  BlockLink
+} from "./chunk-C7LTF5CC.js";
+
+// src/slot-picker/slot-picker.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var slotPicker = tv({
+  slots: {
+    root: "flex min-w-0 flex-col gap-3",
+    days: "flex gap-2 overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+    day: "flex min-h-12 min-w-[4.5rem] shrink-0 cursor-pointer flex-col items-center justify-center rounded-xl border border-border-default bg-surface-1 px-3 py-1.5 text-center leading-tight text-fg-secondary transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-accent aria-pressed:bg-accent-soft aria-pressed:text-fg",
+    dayName: "text-xs font-bold",
+    daySub: "text-[11px] tabular-nums text-fg-muted",
+    times: "m-0 flex list-none flex-wrap gap-2 p-0",
+    time: "inline-flex min-h-11 min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full border border-border-default bg-surface-1 px-4 text-sm font-semibold tabular-nums text-fg no-underline transition-colors hover:border-accent/60 hover:bg-accent-soft focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-on-accent disabled:cursor-not-allowed disabled:opacity-50",
+    note: "text-[11px] font-medium text-fg-secondary group-aria-pressed:text-on-accent",
+    empty: "m-0 rounded-xl border border-dashed border-border-default px-4 py-6 text-center text-sm text-fg-secondary"
+  }
+});
+var s = slotPicker();
+function SlotPicker({ days, label, emptyLabel, value, onValueChange, defaultDay, linkAs, className, ...props }) {
+  const [dayId, setDayId] = React.useState(defaultDay ?? days[0]?.id);
+  const active = days.find((d) => d.id === dayId) ?? days[0];
+  if (!active) return /* @__PURE__ */ jsx("p", { className: s.empty({ className }), children: emptyLabel });
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: s.days(), role: "group", "aria-label": label, children: days.map((day) => /* @__PURE__ */ jsxs("button", { type: "button", "aria-pressed": day.id === active.id, onClick: () => setDayId(day.id), className: s.day(), children: [
+      /* @__PURE__ */ jsx("span", { className: s.dayName(), children: day.label }),
+      day.sub && /* @__PURE__ */ jsx("span", { className: s.daySub(), children: day.sub })
+    ] }, day.id)) }),
+    /* @__PURE__ */ jsx("ul", { className: s.times(), "aria-label": `${active.label}${active.sub ? ` ${active.sub}` : ""}`, children: active.slots.map((slot) => /* @__PURE__ */ jsx("li", { children: slot.href ? /* @__PURE__ */ jsxs(BlockLink, { href: slot.href, linkAs, className: s.time(), children: [
+      slot.label,
+      slot.note && /* @__PURE__ */ jsx("span", { className: s.note(), children: slot.note })
+    ] }) : /* @__PURE__ */ jsxs("button", { type: "button", "aria-pressed": value === slot.id, disabled: slot.disabled, onClick: () => onValueChange?.(slot.id), className: s.time({ className: "group" }), children: [
+      slot.label,
+      slot.note && /* @__PURE__ */ jsx("span", { className: s.note(), children: slot.note })
+    ] }) }, slot.id)) })
+  ] });
+}
+export {
+  SlotPicker,
+  slotPicker
+};
+//# sourceMappingURL=slot-picker.js.map

package/dist/slot-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slot-picker/slot-picker.tsx"],"sourcesContent":["// Client (the chosen day). The next free times of a service as tappable chips: a strip of days, then the day's times.\n// A time is a link (`href`: the booking page with the time chosen) or a toggle the reader presses (`value`,\n// `onValueChange`). The app computes the slots (its availability is the truth) and formats the labels.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\n\nexport const slotPicker = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-3\",\n    days: \"flex gap-2 overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n    day:\n      \"flex min-h-12 min-w-[4.5rem] shrink-0 cursor-pointer flex-col items-center justify-center rounded-xl border border-border-default bg-surface-1 px-3 py-1.5 text-center leading-tight text-fg-secondary \" +\n      \"transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-pressed:border-accent aria-pressed:bg-accent-soft aria-pressed:text-fg\",\n    dayName: \"text-xs font-bold\",\n    daySub: \"text-[11px] tabular-nums text-fg-muted\",\n    times: \"m-0 flex list-none flex-wrap gap-2 p-0\",\n    time:\n      \"inline-flex min-h-11 min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full border border-border-default bg-surface-1 px-4 text-sm font-semibold tabular-nums text-fg no-underline \" +\n      \"transition-colors hover:border-accent/60 hover:bg-accent-soft focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-on-accent disabled:cursor-not-allowed disabled:opacity-50\",\n    note: \"text-[11px] font-medium text-fg-secondary group-aria-pressed:text-on-accent\",\n    empty: \"m-0 rounded-xl border border-dashed border-border-default px-4 py-6 text-center text-sm text-fg-secondary\",\n  },\n});\nconst s = slotPicker();\n\nexport type PickerSlot = {\n  /** A stable id (the slot's start as an ISO string). */\n  id: string;\n  /** The time in words, formatted by the app (`9 h 30`). */\n  label: string;\n  /** What to know about it (`2 places left`), shown beside the time and read with it. */\n  note?: string;\n  /** Not offered any more: shown, disabled. */\n  disabled?: boolean;\n  /** Makes the time a link to this address (the booking page with the slot chosen). */\n  href?: string;\n};\n\nexport type PickerDay = {\n  /** A stable id (`2026-10-19`). */\n  id: string;\n  /** The day's name, translated (`Today`, `Mon`). */\n  label: string;\n  /** Under it (`19 Oct`). */\n  sub?: string;\n  /** Its free times, in order. */\n  slots: readonly PickerSlot[];\n};\n\nexport type SlotPickerProps = Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> & {\n  /** The days that have free times, in order. */\n  days: readonly PickerDay[];\n  /** The name of the group (`Available times`), passed translated. */\n  label: string;\n  /** Said when no day has a free time. */\n  emptyLabel: string;\n  /** The chosen slot's id (controlled). */\n  value?: string | null;\n  /** Called with the chosen slot's id. */\n  onValueChange?: (id: string) => void;\n  /** The first day shown. Default: the first of `days`. */\n  defaultDay?: string;\n  /** The app's link component for the times that have an `href`. */\n  linkAs?: LinkComponent;\n};\n\n/** Tappable free times by day: the day strip, then the day's chips — links or toggles. */\nexport function SlotPicker({ days, label, emptyLabel, value, onValueChange, defaultDay, linkAs, className, ...props }: SlotPickerProps) {\n  const [dayId, setDayId] = React.useState(defaultDay ?? days[0]?.id);\n  const active = days.find((d) => d.id === dayId) ?? days[0];\n  if (!active) return <p className={s.empty({ className })}>{emptyLabel}</p>;\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.days()} role=\"group\" aria-label={label}>\n        {days.map((day) => (\n          <button key={day.id} type=\"button\" aria-pressed={day.id === active.id} onClick={() => setDayId(day.id)} className={s.day()}>\n            <span className={s.dayName()}>{day.label}</span>\n            {day.sub && <span className={s.daySub()}>{day.sub}</span>}\n          </button>\n        ))}\n      </div>\n      <ul className={s.times()} aria-label={`${active.label}${active.sub ? ` ${active.sub}` : \"\"}`}>\n        {active.slots.map((slot) => (\n          <li key={slot.id}>\n            {slot.href ? (\n              <BlockLink href={slot.href} linkAs={linkAs} className={s.time()}>\n                {slot.label}\n                {slot.note && <span className={s.note()}>{slot.note}</span>}\n              </BlockLink>\n            ) : (\n              <button type=\"button\" aria-pressed={value === slot.id} disabled={slot.disabled} onClick={() => onValueChange?.(slot.id)} className={s.time({ className: \"group\" })}>\n                {slot.label}\n                {slot.note && <span className={s.note()}>{slot.note}</span>}\n              </button>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AAsEG,cAKZ,YALY;AAlEf,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KACE;AAAA,IAGF,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MACE;AAAA,IAGF,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AA4Cd,SAAS,WAAW,EAAE,MAAM,OAAO,YAAY,OAAO,eAAe,YAAY,QAAQ,WAAW,GAAG,MAAM,GAAoB;AACtI,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,cAAc,KAAK,CAAC,GAAG,EAAE;AAClE,QAAM,SAAS,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK,KAAK,KAAK,CAAC;AACzD,MAAI,CAAC,OAAQ,QAAO,oBAAC,OAAE,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,sBAAW;AACtE,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,wBAAC,SAAI,WAAW,EAAE,KAAK,GAAG,MAAK,SAAQ,cAAY,OAChD,eAAK,IAAI,CAAC,QACT,qBAAC,YAAoB,MAAK,UAAS,gBAAc,IAAI,OAAO,OAAO,IAAI,SAAS,MAAM,SAAS,IAAI,EAAE,GAAG,WAAW,EAAE,IAAI,GACvH;AAAA,0BAAC,UAAK,WAAW,EAAE,QAAQ,GAAI,cAAI,OAAM;AAAA,MACxC,IAAI,OAAO,oBAAC,UAAK,WAAW,EAAE,OAAO,GAAI,cAAI,KAAI;AAAA,SAFvC,IAAI,EAGjB,CACD,GACH;AAAA,IACA,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAG,cAAY,GAAG,OAAO,KAAK,GAAG,OAAO,MAAM,IAAI,OAAO,GAAG,KAAK,EAAE,IACvF,iBAAO,MAAM,IAAI,CAAC,SACjB,oBAAC,QACE,eAAK,OACJ,qBAAC,aAAU,MAAM,KAAK,MAAM,QAAgB,WAAW,EAAE,KAAK,GAC3D;AAAA,WAAK;AAAA,MACL,KAAK,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK;AAAA,OACtD,IAEA,qBAAC,YAAO,MAAK,UAAS,gBAAc,UAAU,KAAK,IAAI,UAAU,KAAK,UAAU,SAAS,MAAM,gBAAgB,KAAK,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,WAAW,QAAQ,CAAC,GAC9J;AAAA,WAAK;AAAA,MACL,KAAK,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK;AAAA,OACtD,KAVK,KAAK,EAYd,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/sticky-action.d.ts

@@ -0,0 +1,12 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const stickyAction: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1/90 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-xl md:hidden", {} | {}, undefined, tailwind_variants.TVReturnTypeLike<unknown, undefined>>;
+type StickyActionProps = React.ComponentProps<"div"> & {
+    /** The action: one `ButtonLink` (full width is added). */
+    children: React.ReactNode;
+};
+/** The one action of a page, held at the bottom edge of a phone. */
+declare function StickyAction({ className, children, ...props }: StickyActionProps): React.JSX.Element;
+
+export { StickyAction, type StickyActionProps, stickyAction };

package/dist/sticky-action.js

@@ -0,0 +1,14 @@
+// src/sticky-action/sticky-action.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var stickyAction = tv({
+  base: "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1/90 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-xl md:hidden"
+});
+function StickyAction({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: stickyAction({ className }), ...props, children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-md flex-col [&>*]:w-full", children }) });
+}
+export {
+  StickyAction,
+  stickyAction
+};
+//# sourceMappingURL=sticky-action.js.map

package/dist/sticky-action.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sticky-action/sticky-action.tsx"],"sourcesContent":["// Server-safe: pure CSS. The main action of a page, stuck to the bottom of a phone's screen while the page scrolls: put it\n// as the last child of the page's `main` (a sticky element holds the viewport's edge inside its container). From `md` up it\n// is not drawn — the page's own buttons are within reach.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stickyAction = tv({\n  base: \"sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1/90 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-xl md:hidden\",\n});\n\nexport type StickyActionProps = React.ComponentProps<\"div\"> & {\n  /** The action: one `ButtonLink` (full width is added). */\n  children: React.ReactNode;\n};\n\n/** The one action of a page, held at the bottom edge of a phone. */\nexport function StickyAction({ className, children, ...props }: StickyActionProps) {\n  return (\n    <div className={stickyAction({ className })} {...props}>\n      <div className=\"mx-auto flex max-w-md flex-col [&>*]:w-full\">{children}</div>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAeb;AAbC,IAAM,eAAe,GAAG;AAAA,EAC7B,MAAM;AACR,CAAC;AAQM,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,MAAM,GAAsB;AACjF,SACE,oBAAC,SAAI,WAAW,aAAa,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/C,8BAAC,SAAI,WAAU,+CAA+C,UAAS,GACzE;AAEJ;","names":[]}