@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/billing/plan-card.d.ts

@@ -1,113 +1,14 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { e5 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-DiPX4Vue.js';
-import { ChoiceCardProps } from '../components/choice-card.js';
-import { PlanPrices, BillingCurrency, BillingInterval } from './plan-price.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import '../components/data-table-sort.js';
-import '../components/swipeable-row.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
-import '../components/stat-tile.js';
-import '../components/chip.js';
-import 'lucide-react';
-import '../components/field-parts.js';
-import '../components/write-lock.js';
-import '../components/mini-calendar.js';
-import '../components/calendar-heatmap.js';
-import '../components/popover.js';
-import '../hooks/use-breakpoint.js';
-import '../components/field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import '../components/month-picker.js';
-import '../components/page-contents.js';
-import '../components/series-chart-labels.js';
-import '../components/pie-chart-labels.js';
-import '../components/sparkline.js';
-import '../components/signature-pad.js';
-import '../components/password-strength.js';
-import '../components/swatch-picker.js';
-import '../components/tile-radio.js';
-import '../components/icon-picker.js';
-import '../components/dialog-frame.js';
-import '../components/modal.js';
-import '../hooks/use-search-param-state.js';
-import '../components/measured-grid.js';
-import '../components/user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import '../components/menu-item.js';
-import '../components/floating-panel.js';
-import '../hooks/use-authed-src.js';
-import '../components/account-settings-labels.js';
-import '../components/bulk-action-bar.js';
-import '../components/list.js';
-import '../components/breadcrumbs.js';
-import '../components/toast.js';
-import '../components/description-list.js';
-import '../components/line-items.js';
-import '../components/error-boundary.js';
-import '../components/authed-image.js';
-import '../components/image-grid.js';
-import '../components/lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import '../components/account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../components/appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import '../components/reauth-dialog.js';
-import '../components/server-wake.js';
-import '../lib/server-wake.js';
-import '../components/translation-review-labels.js';
-import '../lib/translation-review.js';
-import '../components/country-select.js';
-import '../components/inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import '../components/sign-chip.js';
-import '../components/column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import '../components/focus-ring.js';
-
+import type { ReactNode } from "react";
+import type { LabelOverride } from "../i18n/kit-labels.js";
+import type { ChoiceCardProps } from "../components/choice-card.js";
+import type { BillingLabels } from "./billing-labels.js";
+import type { BillingCurrency, BillingInterval, PlanPrices } from "./plan-price.js";
 /**
  * One plan of the app's catalogue (docs/billing-harmonization.md §3.1) as a page shows it:
  * server-kit's `PlanSpec` from `GET /billing/plans`, plus the words, which are the app's
  * (display names and feature lines come from its i18n, never from the provider).
  */
-interface BillingPlan {
+export interface BillingPlan {
     /** The plan code, lowercase on the wire (§12.16); compared without case here. */
     code: string;
     /** The app's display name, in the reader's language: "Pro". */
@@ -128,10 +29,10 @@ interface BillingPlan {
  * How a plan stands to the one the payer pays for now: `current` is it, `upgrade` comes
  * after it in the catalogue's order (`PlanSpec.sort`), `downgrade` before it.
  */
-type PlanRelation = "current" | "upgrade" | "downgrade";
+export type PlanRelation = "current" | "upgrade" | "downgrade";
 /** The plan's place against `current`, by the order of `plans`; `undefined` without a
  *  current plan (a trial, an ended plan) or for a code that is not in the list. */
-declare function planRelation(plans: readonly Pick<BillingPlan, "code">[], code: string, current: string | null | undefined): PlanRelation | undefined;
+export declare function planRelation(plans: readonly Pick<BillingPlan, "code">[], code: string, current: string | null | undefined): PlanRelation | undefined;
 /** What both parts need to draw a plan. */
 interface PlanDisplayProps {
     /** The currency the prices are shown in (§2.6). */
@@ -149,7 +50,7 @@ interface PlanDisplayProps {
     /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
     labels?: LabelOverride<BillingLabels>;
 }
-interface PlanCardProps extends Omit<ChoiceCardProps, "type" | "title" | "description" | "icon" | "indeterminate" | "value" | "labels">, PlanDisplayProps {
+export interface PlanCardProps extends Omit<ChoiceCardProps, "type" | "title" | "description" | "icon" | "indeterminate" | "value" | "labels">, PlanDisplayProps {
     plan: BillingPlan;
     /** See {@link PlanRelation}. `current` draws the "Current plan" chip — a word in the
      *  card's name, never a colour alone. */
@@ -172,15 +73,15 @@ interface PlanCardProps extends Omit<ChoiceCardProps, "type" | "title" | "descri
  * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,
  * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.
  */
-declare const PlanCard: react.ForwardRefExoticComponent<PlanCardProps & react.RefAttributes<HTMLInputElement>>;
+export declare function PlanCard({ ref, plan, relation, pricePreview, currency, interval, dimensionLabels, formatLimit, locale: localeProp, labels: labelsProp, disabled, ...rest }: PlanCardProps): import("react").JSX.Element;
 /** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`
  *  takes (§4). */
-interface PlanChoice {
+export interface PlanChoice {
     plan: string;
     interval: BillingInterval;
     currency: BillingCurrency;
 }
-interface PlanPickerProps extends Omit<PlanDisplayProps, "currency" | "interval"> {
+export interface PlanPickerProps extends Omit<PlanDisplayProps, "currency" | "interval"> {
     /** The catalogue, in its order (`PlanSpec.sort`): cheapest first. The order decides
      *  upgrade and downgrade. */
     plans: readonly BillingPlan[];
@@ -243,6 +144,5 @@ interface PlanPickerProps extends Omit<PlanDisplayProps, "currency" | "interval"
  * must be able to pay (§3.3). It is off, with the reason on hover and focus, while
  * nothing is picked or the current plan is.
  */
-declare function PlanPicker({ plans, current, value: valueProp, defaultValue, onValueChange, interval: intervalProp, defaultInterval, onIntervalChange, currency: currencyProp, defaultCurrency, onCurrencyChange, currencies: currenciesProp, onChoose, pending, pricePreview, legend, name, className, gridClassName, cardClassName, dimensionLabels, formatLimit, locale: localeProp, labels: labelsProp, }: PlanPickerProps): react.JSX.Element;
-
-export { type BillingPlan, PlanCard, type PlanCardProps, type PlanChoice, PlanPicker, type PlanPickerProps, type PlanRelation, planRelation };
+export declare function PlanPicker({ plans, current, value: valueProp, defaultValue, onValueChange, interval: intervalProp, defaultInterval, onIntervalChange, currency: currencyProp, defaultCurrency, onCurrencyChange, currencies: currenciesProp, onChoose, pending, pricePreview, legend, name, className, gridClassName, cardClassName, dimensionLabels, formatLimit, locale: localeProp, labels: labelsProp, }: PlanPickerProps): import("react").JSX.Element;
+export {};

package/dist/billing/plan-card.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useState } from "react";
+import { useId, useState } from "react";
 import { Check, Gauge } from "lucide-react";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { formatNumber } from "../lib/format.js";
@@ -8,7 +8,7 @@ import { cn } from "../lib/cn.js";
 import { ChoiceCard } from "../components/choice-card.js";
 import { Chip } from "../components/chip.js";
 import { ToggleGroup } from "../components/toggle-group.js";
-import { Button } from "../components/ui.js";
+import { Button } from "../components/button.js";
 import { useBillingLabels } from "./billing-labels.js";
 import { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from "./plan-price.js";
 function planRelation(plans, code, current) {
@@ -21,15 +21,18 @@ function planRelation(plans, code, current) {
 }
 function SpanList({ name, items, icon }) {
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx("span", { role: "list", "aria-label": name, className: "block space-y-1", children: items.map((item, i) => /* @__PURE__ */ jsxs("span", { role: "listitem", className: "flex items-start gap-1.5 text-[var(--text-secondary)]", children: [
-    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mt-[0.0625rem] flex shrink-0 text-[var(--text-muted)] [&_svg]:size-3.5", children: icon }),
+  return /* @__PURE__ */ jsx("span", { role: "list", "aria-label": name, className: "block space-y-1", children: items.map((item, i) => /* @__PURE__ */ jsxs("span", { role: "listitem", className: "flex items-start gap-1.5 text-secondary", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mt-[0.0625rem] flex shrink-0 text-muted [&_svg]:size-3.5", children: icon }),
     /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
       item,
       " "
     ] })
   ] }, i)) });
 }
-const PlanCard = forwardRef(function PlanCard2({
+function PlanCard({
+  // The radio `<input>` (ChoiceCard's): a React 19 ref prop since 0.34 (MOD-4, refactor
+  // audit 2026-10), where this was `forwardRef`.
+  ref,
   plan,
   relation,
   pricePreview,
@@ -41,7 +44,7 @@ const PlanCard = forwardRef(function PlanCard2({
   labels: labelsProp,
   disabled,
   ...rest
-}, ref) {
+}) {
   const labels = useBillingLabels(labelsProp);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const locale = useKitLocale(localeProp);
@@ -61,20 +64,20 @@ const PlanCard = forwardRef(function PlanCard2({
           "data-part": "price",
           className: cn(
             "tabular-nums",
-            price.kind === "not-offered" ? "text-xs text-[var(--text-muted)]" : "text-lg font-semibold leading-tight text-[var(--text-primary)]"
+            price.kind === "not-offered" ? "text-xs text-muted" : "text-lg font-semibold leading-tight text-primary"
           ),
           children: figure
         }
       ),
       priced && /* @__PURE__ */ jsxs(Fragment, { children: [
         " ",
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-secondary)]", children: interval === "year" ? labels.perYear : labels.perMonth }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-secondary", children: interval === "year" ? labels.perYear : labels.perMonth }),
         " ",
-        /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--text-muted)]", children: labels.vatIncluded })
+        /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted", children: labels.vatIncluded })
       ] }),
       " "
     ] }),
-    plan.description !== void 0 && plan.description !== null && /* @__PURE__ */ jsxs("span", { className: "block text-[var(--text-secondary)]", children: [
+    plan.description !== void 0 && plan.description !== null && /* @__PURE__ */ jsxs("span", { className: "block text-secondary", children: [
       plan.description,
       " "
     ] }),
@@ -101,8 +104,7 @@ const PlanCard = forwardRef(function PlanCard2({
       description: body
     }
   );
-});
-PlanCard.displayName = "PlanCard";
+}
 function pricedCurrencies(plans) {
   const found = /* @__PURE__ */ new Set();
   for (const p of plans) for (const c of Object.keys(p.prices ?? {})) found.add(c);
@@ -203,7 +205,7 @@ function PlanPicker({
         "aria-labelledby": legend !== void 0 ? legendId : void 0,
         "aria-label": legend === void 0 ? labels.plans : void 0,
         children: [
-          legend !== void 0 && /* @__PURE__ */ jsx("legend", { id: legendId, className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: legend }),
+          legend !== void 0 && /* @__PURE__ */ jsx("legend", { id: legendId, className: "mb-2 text-sm font-medium text-primary", children: legend }),
           /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", gridClassName), children: plans.map((plan) => /* @__PURE__ */ jsx(
             PlanCard,
             {

package/dist/billing/plan-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/billing/plan-card.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check, Gauge } from \"lucide-react\";\n\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { formatNumber } from \"../lib/format\";\nimport { cn } from \"../lib/cn\";\nimport { ChoiceCard } from \"../components/choice-card\";\nimport type { ChoiceCardProps } from \"../components/choice-card\";\nimport { Chip } from \"../components/chip\";\nimport { ToggleGroup } from \"../components/toggle-group\";\nimport { Button } from \"../components/ui\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\nimport { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from \"./plan-price\";\nimport type { BillingCurrency, BillingInterval, PlanPrices } from \"./plan-price\";\n\n/**\n * One plan of the app's catalogue (docs/billing-harmonization.md §3.1) as a page shows it:\n * server-kit's `PlanSpec` from `GET /billing/plans`, plus the words, which are the app's\n * (display names and feature lines come from its i18n, never from the provider).\n */\nexport interface BillingPlan {\n  /** The plan code, lowercase on the wire (§12.16); compared without case here. */\n  code: string;\n  /** The app's display name, in the reader's language: \"Pro\". */\n  name: string;\n  /** A line under the price. */\n  description?: ReactNode;\n  /** Gross prices in minor units, per currency and period (§3.1, §12.17). None at all —\n   *  or 0 — is a free plan. */\n  prices?: PlanPrices | null;\n  /** Dimension → limit; `null` is unlimited (§3.1). Shown in the object's order. */\n  limits?: Readonly<Record<string, number | null>>;\n  /** The app's feature lines. */\n  features?: readonly ReactNode[];\n  /** Not choosable — a plan being retired, say. */\n  disabled?: boolean;\n}\n\n/**\n * How a plan stands to the one the payer pays for now: `current` is it, `upgrade` comes\n * after it in the catalogue's order (`PlanSpec.sort`), `downgrade` before it.\n */\nexport type PlanRelation = \"current\" | \"upgrade\" | \"downgrade\";\n\n/** The plan's place against `current`, by the order of `plans`; `undefined` without a\n *  current plan (a trial, an ended plan) or for a code that is not in the list. */\nexport function planRelation(\n  plans: readonly Pick<BillingPlan, \"code\">[],\n  code: string,\n  current: string | null | undefined,\n): PlanRelation | undefined {\n  if (!current) return undefined;\n  const index = (c: string) => plans.findIndex((p) => p.code.toLowerCase() === c.toLowerCase());\n  const at = index(code);\n  const now = index(current);\n  if (at < 0 || now < 0) return undefined;\n  return at === now ? \"current\" : at > now ? \"upgrade\" : \"downgrade\";\n}\n\n/** What both parts need to draw a plan. */\ninterface PlanDisplayProps {\n  /** The currency the prices are shown in (§2.6). */\n  currency: BillingCurrency;\n  /** The period the prices are shown for. */\n  interval: BillingInterval;\n  /** The app's name of each limit's dimension (\"Budgets\"). A dimension without one is\n   *  shown by its key. */\n  dimensionLabels?: Readonly<Record<string, string>>;\n  /** How a limit's figure is written — kastlan's storage is bytes (`formatFileSize`).\n   *  Default: a number in the kit's locale. */\n  formatLimit?: (dimension: string, value: number) => string;\n  /** Over the provider's locale. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\nexport interface PlanCardProps\n  extends Omit<ChoiceCardProps, \"type\" | \"title\" | \"description\" | \"icon\" | \"indeterminate\" | \"value\" | \"labels\">,\n    PlanDisplayProps {\n  plan: BillingPlan;\n  /** See {@link PlanRelation}. `current` draws the \"Current plan\" chip — a word in the\n   *  card's name, never a colour alone. */\n  relation?: PlanRelation;\n  /**\n   * The provider's own localised price in place of the catalogue's figure (§12.17) — a\n   * Merchant of Record's price preview for the buyer's country, tax included. The period\n   * and \"VAT included\" stay: the law asks for a gross price, and the card says so.\n   */\n  pricePreview?: ReactNode;\n}\n\n/** A list from spans (`role=\"list\"`): the card is a `<label>`, which may hold phrasing\n *  content only, so a `<ul>` there would be invalid HTML. */\nfunction SpanList({ name, items, icon }: { name: string; items: ReactNode[]; icon: ReactNode }) {\n  if (items.length === 0) return null;\n  return (\n    <span role=\"list\" aria-label={name} className=\"block space-y-1\">\n      {items.map((item, i) => (\n        <span role=\"listitem\" key={i} className=\"flex items-start gap-1.5 text-[var(--text-secondary)]\">\n          <span aria-hidden className=\"mt-[0.0625rem] flex shrink-0 text-[var(--text-muted)] [&_svg]:size-3.5\">\n            {icon}\n          </span>\n          <span className=\"min-w-0\">\n            {item}\n            {/* A space between the items' texts in the flattened description. */}{\" \"}\n          </span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\n/**\n * One plan as a {@link ChoiceCard} radio (§7): the name (and \"Current plan\"), the GROSS\n * price in the chosen currency and period through `formatMoney` (\"CHF 49 per year, VAT\n * included\", §12.17), the limits (\"Budgets: 3\", \"Seats: Unlimited\") and the app's feature\n * lines. A plan with prices but none for this currency and period is shown, \"Not offered\n * for this billing period\", and cannot be picked.\n *\n * A radio of a set: give the cards one `name`, or use {@link PlanPicker}, which does that\n * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,\n * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.\n */\nexport const PlanCard = forwardRef<HTMLInputElement, PlanCardProps>(function PlanCard(\n  {\n    plan,\n    relation,\n    pricePreview,\n    currency,\n    interval,\n    dimensionLabels,\n    formatLimit,\n    locale: localeProp,\n    labels: labelsProp,\n    disabled,\n    ...rest\n  },\n  ref,\n) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale(localeProp);\n  const price = planPrice(plan.prices, currency, interval);\n\n  const priced = price.kind === \"price\";\n  const figure = priced\n    ? pricePreview !== undefined && pricePreview !== null\n      ? pricePreview\n      : formatPlanPrice(price.minor, currency, { locale })\n    : price.kind === \"free\"\n      ? labels.free\n      : labels.notOffered;\n\n  const limitLines = Object.entries(plan.limits ?? {}).map(([dimension, value]) => {\n    const name = dimensionLabels?.[dimension] ?? dimension;\n    const shown =\n      value === null ? labels.unlimited : formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });\n    return common.fieldValue(name, shown);\n  });\n\n  const body = (\n    <span className=\"mt-1 block space-y-2\">\n      <span className=\"block\">\n        <span\n          data-part=\"price\"\n          className={cn(\n            \"tabular-nums\",\n            price.kind === \"not-offered\"\n              ? \"text-xs text-[var(--text-muted)]\"\n              : \"text-lg font-semibold leading-tight text-[var(--text-primary)]\",\n          )}\n        >\n          {figure}\n        </span>\n        {priced && (\n          <>\n            {\" \"}\n            <span className=\"text-xs text-[var(--text-secondary)]\">\n              {interval === \"year\" ? labels.perYear : labels.perMonth}\n            </span>{\" \"}\n            <span className=\"block text-xs text-[var(--text-muted)]\">{labels.vatIncluded}</span>\n          </>\n        )}{\" \"}\n      </span>\n      {plan.description !== undefined && plan.description !== null && (\n        <span className=\"block text-[var(--text-secondary)]\">{plan.description} </span>\n      )}\n      <SpanList name={labels.limits} items={limitLines} icon={<Gauge />} />\n      <SpanList name={labels.features} items={[...(plan.features ?? [])]} icon={<Check />} />\n    </span>\n  );\n\n  return (\n    <ChoiceCard\n      ref={ref}\n      {...rest}\n      type=\"radio\"\n      value={plan.code}\n      disabled={disabled || plan.disabled || price.kind === \"not-offered\"}\n      data-plan={plan.code}\n      data-relation={relation}\n      title={\n        <>\n          {plan.name}\n          {relation === \"current\" && (\n            <>\n              {\" \"}\n              <Chip size=\"xs\" tone=\"brand\" shape=\"square\" caps className=\"ms-1 align-[0.0625rem]\">\n                {labels.current}\n              </Chip>\n            </>\n          )}\n        </>\n      }\n      description={body}\n    />\n  );\n});\nPlanCard.displayName = \"PlanCard\";\n\n/** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`\n *  takes (§4). */\nexport interface PlanChoice {\n  plan: string;\n  interval: BillingInterval;\n  currency: BillingCurrency;\n}\n\nexport interface PlanPickerProps extends Omit<PlanDisplayProps, \"currency\" | \"interval\"> {\n  /** The catalogue, in its order (`PlanSpec.sort`): cheapest first. The order decides\n   *  upgrade and downgrade. */\n  plans: readonly BillingPlan[];\n  /**\n   * The plan the payer pays for now (`plan` of the overview while `active` or\n   * `past_due`). Leave it out during a trial and after a plan ended: then every plan is\n   * \"Choose …\", the trial's plan included, since none is paid for yet.\n   */\n  current?: string | null;\n  /** The picked plan, controlled. `null` while none is. */\n  value?: string | null;\n  /** The picked plan, uncontrolled. Default: `current`, else nothing. */\n  defaultValue?: string | null;\n  onValueChange?: (plan: string) => void;\n  /** The period, controlled. */\n  interval?: BillingInterval;\n  /** The period, uncontrolled. Default `year` — lead with yearly (§12.17). */\n  defaultInterval?: BillingInterval;\n  onIntervalChange?: (interval: BillingInterval) => void;\n  /** The currency, controlled. */\n  currency?: BillingCurrency;\n  /** The currency, uncontrolled. Default: the account's stored currency is the app's to\n   *  pass here (§12.18); without it, {@link billingCurrencyFor} the kit's locale. */\n  defaultCurrency?: BillingCurrency;\n  onCurrencyChange?: (currency: BillingCurrency) => void;\n  /** The currencies the payer may switch between. Default: every currency a plan has a\n   *  price in. The switch shows only for more than one. */\n  currencies?: readonly BillingCurrency[];\n  /** The button: the app starts its checkout (`POST /billing/checkout`, then off to the\n   *  provider's page). The kit sends no request. */\n  onChoose: (choice: PlanChoice) => void;\n  /** The checkout is being opened: the button's spinner, no second press. */\n  pending?: boolean;\n  /** The provider's localised price for a plan, or `undefined` for the catalogue's —\n   *  see {@link PlanCardProps.pricePreview}. */\n  pricePreview?: (plan: BillingPlan, choice: Omit<PlanChoice, \"plan\">) => ReactNode | undefined;\n  /** A visible question over the cards. Without one the set is named \"Plans\". */\n  legend?: ReactNode;\n  /** Shared by the radios. Generated if omitted. */\n  name?: string;\n  /** Classes for the whole picker. */\n  className?: string;\n  /** Classes for the card grid. Default: one column, two from `sm`, three from `lg`. */\n  gridClassName?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n}\n\n/** Every currency some plan has a price in, CHF first. */\nfunction pricedCurrencies(plans: readonly BillingPlan[]): BillingCurrency[] {\n  const found = new Set<BillingCurrency>();\n  for (const p of plans) for (const c of Object.keys(p.prices ?? {})) found.add(c as BillingCurrency);\n  return ([\"CHF\", \"EUR\"] as const).filter((c) => found.has(c));\n}\n\n/** Every period some plan has a price for, yearly first. */\nfunction pricedIntervals(plans: readonly BillingPlan[]): BillingInterval[] {\n  const found = new Set<BillingInterval>();\n  for (const p of plans)\n    for (const byInterval of Object.values(p.prices ?? {}))\n      for (const [k, v] of Object.entries(byInterval ?? {})) if (typeof v === \"number\") found.add(k as BillingInterval);\n  return BILLING_INTERVALS.filter((i) => found.has(i));\n}\n\n/**\n * The plans to choose from (§7): the period switch — yearly first (§12.17) — and, where\n * the payer may pay in either, the currency switch (§2.6); a {@link PlanCard} per plan in\n * a radio set; and one button that says what pressing it does: \"Upgrade to Pro\", \"Switch\n * to Free\", or \"Choose Pro\" with no plan paid for yet.\n *\n * One button under the set rather than one per card: each card IS a radio — a `<label>`\n * round an `<input>` — and a button inside a label is interactive content inside\n * interactive content. Picking and committing are two steps anyway: the price under the\n * picked card is what checkout will charge.\n *\n * The button never takes the write lock: billing itself always works, a read-only payer\n * must be able to pay (§3.3). It is off, with the reason on hover and focus, while\n * nothing is picked or the current plan is.\n */\nexport function PlanPicker({\n  plans,\n  current,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  interval: intervalProp,\n  defaultInterval = \"year\",\n  onIntervalChange,\n  currency: currencyProp,\n  defaultCurrency,\n  onCurrencyChange,\n  currencies: currenciesProp,\n  onChoose,\n  pending,\n  pricePreview,\n  legend,\n  name,\n  className,\n  gridClassName,\n  cardClassName,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n}: PlanPickerProps) {\n  const labels = useBillingLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const generated = useId();\n  const groupName = name ?? generated;\n  const legendId = `${generated}-legend`;\n\n  const [ownValue, setOwnValue] = useState<string | null>(() => defaultValue ?? current ?? null);\n  const [ownInterval, setOwnInterval] = useState<BillingInterval>(defaultInterval);\n  const [ownCurrency, setOwnCurrency] = useState<BillingCurrency>(\n    () => defaultCurrency ?? billingCurrencyFor(locale),\n  );\n  const value = valueProp !== undefined ? valueProp : ownValue;\n  const interval = intervalProp ?? ownInterval;\n  const currency = currencyProp ?? ownCurrency;\n\n  const pick = (code: string) => {\n    if (valueProp === undefined) setOwnValue(code);\n    onValueChange?.(code);\n  };\n  const setInterval = (next: BillingInterval) => {\n    if (intervalProp === undefined) setOwnInterval(next);\n    onIntervalChange?.(next);\n  };\n  const setCurrency = (next: BillingCurrency) => {\n    if (currencyProp === undefined) setOwnCurrency(next);\n    onCurrencyChange?.(next);\n  };\n\n  const currencies = currenciesProp ?? pricedCurrencies(plans);\n  const intervals = pricedIntervals(plans);\n  const picked = value ? plans.find((p) => p.code.toLowerCase() === value.toLowerCase()) : undefined;\n  const relation = picked ? planRelation(plans, picked.code, current) : undefined;\n  const pickedPrice = picked ? planPrice(picked.prices, currency, interval) : undefined;\n\n  const buttonText = !picked\n    ? labels.choosePlan\n    : relation === \"upgrade\"\n      ? labels.upgrade(picked.name)\n      : relation === \"downgrade\"\n        ? labels.downgrade(picked.name)\n        : labels.choose(picked.name);\n  const blocked = !picked\n    ? labels.pickFirst\n    : relation === \"current\"\n      ? labels.isCurrent\n      : pickedPrice?.kind === \"not-offered\"\n        ? labels.notOffered\n        : undefined;\n\n  return (\n    <div className={cn(\"min-w-0 space-y-3\", className)} data-billing-interval={interval} data-billing-currency={currency}>\n      {(intervals.length > 1 || currencies.length > 1) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {intervals.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.interval}\n              // Content-wide, so the two switches share a row and wrap only when narrow.\n              className=\"w-auto\"\n              options={intervals.map((i) => ({ value: i, label: i === \"year\" ? labels.yearly : labels.monthly }))}\n              value={interval}\n              onChange={setInterval}\n            />\n          )}\n          {currencies.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.currency}\n              className=\"w-auto\"\n              options={currencies.map((c) => ({ value: c, label: c }))}\n              value={currency}\n              onChange={setCurrency}\n            />\n          )}\n        </div>\n      )}\n      <fieldset\n        className=\"min-w-0\"\n        aria-labelledby={legend !== undefined ? legendId : undefined}\n        aria-label={legend === undefined ? labels.plans : undefined}\n      >\n        {legend !== undefined && (\n          <legend id={legendId} className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n            {legend}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3\", gridClassName)}>\n          {plans.map((plan) => (\n            <PlanCard\n              key={plan.code}\n              plan={plan}\n              name={groupName}\n              currency={currency}\n              interval={interval}\n              relation={planRelation(plans, plan.code, current)}\n              pricePreview={pricePreview?.(plan, { interval, currency })}\n              checked={picked?.code === plan.code}\n              onCheckedChange={(on) => on && pick(plan.code)}\n              dimensionLabels={dimensionLabels}\n              formatLimit={formatLimit}\n              locale={locale}\n              labels={labelsProp}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n      </fieldset>\n      <div className=\"flex justify-end\">\n        <Button\n          type=\"button\"\n          variant=\"primary\"\n          className=\"max-sm:w-full\"\n          disabledReason={blocked}\n          pending={pending}\n          onClick={() => picked && onChoose({ plan: picked.code, interval, currency })}\n        >\n          {buttonText}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAuGU,SA4EA,UA5EA,KAGA,YAHA;AAvGV,SAAS,YAAY,OAAO,gBAAgB;AAE5C,SAAS,OAAO,aAAa;AAE7B,SAAS,uBAAuB,cAAc,oBAAoB;AAElE,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAEjC,SAAS,mBAAmB,oBAAoB,iBAAiB,iBAAiB;AAkC3E,SAAS,aACd,OACA,MACA,SAC0B;AAC1B,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,QAAQ,CAAC,MAAc,MAAM,UAAU,CAAC,MAAM,EAAE,KAAK,YAAY,MAAM,EAAE,YAAY,CAAC;AAC5F,QAAM,KAAK,MAAM,IAAI;AACrB,QAAM,MAAM,MAAM,OAAO;AACzB,MAAI,KAAK,KAAK,MAAM,EAAG,QAAO;AAC9B,SAAO,OAAO,MAAM,YAAY,KAAK,MAAM,YAAY;AACzD;AAqCA,SAAS,SAAS,EAAE,MAAM,OAAO,KAAK,GAA0D;AAC9F,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,oBAAC,UAAK,MAAK,QAAO,cAAY,MAAM,WAAU,mBAC3C,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,UAAK,MAAK,YAAmB,WAAU,yDACtC;AAAA,wBAAC,UAAK,eAAW,MAAC,WAAU,0EACzB,gBACH;AAAA,IACA,qBAAC,UAAK,WAAU,WACb;AAAA;AAAA,MACsE;AAAA,OACzE;AAAA,OAPyB,CAQ3B,CACD,GACH;AAEJ;AAaO,MAAM,WAAW,WAA4C,SAASA,UAC3E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,QAAQ,UAAU,KAAK,QAAQ,UAAU,QAAQ;AAEvD,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,SAAS,SACX,iBAAiB,UAAa,iBAAiB,OAC7C,eACA,gBAAgB,MAAM,OAAO,UAAU,EAAE,OAAO,CAAC,IACnD,MAAM,SAAS,SACb,OAAO,OACP,OAAO;AAEb,QAAM,aAAa,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,WAAW,KAAK,MAAM;AAC/E,UAAM,OAAO,kBAAkB,SAAS,KAAK;AAC7C,UAAM,QACJ,UAAU,OAAO,OAAO,YAAY,cAAc,YAAY,WAAW,KAAK,IAAI,aAAa,OAAO,EAAE,OAAO,CAAC;AAClH,WAAO,OAAO,WAAW,MAAM,KAAK;AAAA,EACtC,CAAC;AAED,QAAM,OACJ,qBAAC,UAAK,WAAU,wBACd;AAAA,yBAAC,UAAK,WAAU,SACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,MAAM,SAAS,gBACX,qCACA;AAAA,UACN;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,UACC,iCACG;AAAA;AAAA,QACD,oBAAC,UAAK,WAAU,wCACb,uBAAa,SAAS,OAAO,UAAU,OAAO,UACjD;AAAA,QAAQ;AAAA,QACR,oBAAC,UAAK,WAAU,0CAA0C,iBAAO,aAAY;AAAA,SAC/E;AAAA,MACC;AAAA,OACL;AAAA,IACC,KAAK,gBAAgB,UAAa,KAAK,gBAAgB,QACtD,qBAAC,UAAK,WAAU,sCAAsC;AAAA,WAAK;AAAA,MAAY;AAAA,OAAC;AAAA,IAE1E,oBAAC,YAAS,MAAM,OAAO,QAAQ,OAAO,YAAY,MAAM,oBAAC,SAAM,GAAI;AAAA,IACnE,oBAAC,YAAS,MAAM,OAAO,UAAU,OAAO,CAAC,GAAI,KAAK,YAAY,CAAC,CAAE,GAAG,MAAM,oBAAC,SAAM,GAAI;AAAA,KACvF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK,YAAY,MAAM,SAAS;AAAA,MACtD,aAAW,KAAK;AAAA,MAChB,iBAAe;AAAA,MACf,OACE,iCACG;AAAA,aAAK;AAAA,QACL,aAAa,aACZ,iCACG;AAAA;AAAA,UACD,oBAAC,QAAK,MAAK,MAAK,MAAK,SAAQ,OAAM,UAAS,MAAI,MAAC,WAAU,0BACxD,iBAAO,SACV;AAAA,WACF;AAAA,SAEJ;AAAA,MAEF,aAAa;AAAA;AAAA,EACf;AAEJ,CAAC;AACD,SAAS,cAAc;AA4DvB,SAAS,iBAAiB,OAAkD;AAC1E,QAAM,QAAQ,oBAAI,IAAqB;AACvC,aAAW,KAAK,MAAO,YAAW,KAAK,OAAO,KAAK,EAAE,UAAU,CAAC,CAAC,EAAG,OAAM,IAAI,CAAoB;AAClG,SAAQ,CAAC,OAAO,KAAK,EAAY,OAAO,CAAC,MAAM,MAAM,IAAI,CAAC,CAAC;AAC7D;AAGA,SAAS,gBAAgB,OAAkD;AACzE,QAAM,QAAQ,oBAAI,IAAqB;AACvC,aAAW,KAAK;AACd,eAAW,cAAc,OAAO,OAAO,EAAE,UAAU,CAAC,CAAC;AACnD,iBAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,cAAc,CAAC,CAAC,EAAG,KAAI,OAAO,MAAM,SAAU,OAAM,IAAI,CAAoB;AACpH,SAAO,kBAAkB,OAAO,CAAC,MAAM,MAAM,IAAI,CAAC,CAAC;AACrD;AAiBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AACV,GAAoB;AAClB,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,QAAQ;AAC1B,QAAM,WAAW,GAAG,SAAS;AAE7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,MAAM,gBAAgB,WAAW,IAAI;AAC7F,QAAM,CAAC,aAAa,cAAc,IAAI,SAA0B,eAAe;AAC/E,QAAM,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,MAAM,mBAAmB,mBAAmB,MAAM;AAAA,EACpD;AACA,QAAM,QAAQ,cAAc,SAAY,YAAY;AACpD,QAAM,WAAW,gBAAgB;AACjC,QAAM,WAAW,gBAAgB;AAEjC,QAAM,OAAO,CAAC,SAAiB;AAC7B,QAAI,cAAc,OAAW,aAAY,IAAI;AAC7C,oBAAgB,IAAI;AAAA,EACtB;AACA,QAAM,cAAc,CAAC,SAA0B;AAC7C,QAAI,iBAAiB,OAAW,gBAAe,IAAI;AACnD,uBAAmB,IAAI;AAAA,EACzB;AACA,QAAM,cAAc,CAAC,SAA0B;AAC7C,QAAI,iBAAiB,OAAW,gBAAe,IAAI;AACnD,uBAAmB,IAAI;AAAA,EACzB;AAEA,QAAM,aAAa,kBAAkB,iBAAiB,KAAK;AAC3D,QAAM,YAAY,gBAAgB,KAAK;AACvC,QAAM,SAAS,QAAQ,MAAM,KAAK,CAAC,MAAM,EAAE,KAAK,YAAY,MAAM,MAAM,YAAY,CAAC,IAAI;AACzF,QAAM,WAAW,SAAS,aAAa,OAAO,OAAO,MAAM,OAAO,IAAI;AACtE,QAAM,cAAc,SAAS,UAAU,OAAO,QAAQ,UAAU,QAAQ,IAAI;AAE5E,QAAM,aAAa,CAAC,SAChB,OAAO,aACP,aAAa,YACX,OAAO,QAAQ,OAAO,IAAI,IAC1B,aAAa,cACX,OAAO,UAAU,OAAO,IAAI,IAC5B,OAAO,OAAO,OAAO,IAAI;AACjC,QAAM,UAAU,CAAC,SACb,OAAO,YACP,aAAa,YACX,OAAO,YACP,aAAa,SAAS,gBACpB,OAAO,aACP;AAER,SACE,qBAAC,SAAI,WAAW,GAAG,qBAAqB,SAAS,GAAG,yBAAuB,UAAU,yBAAuB,UACxG;AAAA,eAAU,SAAS,KAAK,WAAW,SAAS,MAC5C,qBAAC,SAAI,WAAU,qCACZ;AAAA,gBAAU,SAAS,KAClB;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,OAAO;AAAA,UAEnB,WAAU;AAAA,UACV,SAAS,UAAU,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,MAAM,SAAS,OAAO,SAAS,OAAO,QAAQ,EAAE;AAAA,UAClG,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ;AAAA,MAED,WAAW,SAAS,KACnB;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,OAAO;AAAA,UACnB,WAAU;AAAA,UACV,SAAS,WAAW,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAE,EAAE;AAAA,UACvD,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,mBAAiB,WAAW,SAAY,WAAW;AAAA,QACnD,cAAY,WAAW,SAAY,OAAO,QAAQ;AAAA,QAEjD;AAAA,qBAAW,UACV,oBAAC,YAAO,IAAI,UAAU,WAAU,uDAC7B,kBACH;AAAA,UAEF,oBAAC,SAAI,WAAW,GAAG,wDAAwD,aAAa,GACrF,gBAAM,IAAI,CAAC,SACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA,UAAU,aAAa,OAAO,KAAK,MAAM,OAAO;AAAA,cAChD,cAAc,eAAe,MAAM,EAAE,UAAU,SAAS,CAAC;AAAA,cACzD,SAAS,QAAQ,SAAS,KAAK;AAAA,cAC/B,iBAAiB,CAAC,OAAO,MAAM,KAAK,KAAK,IAAI;AAAA,cAC7C;AAAA,cACA;AAAA,cACA;AAAA,cACA,QAAQ;AAAA,cACR,WAAW;AAAA;AAAA,YAbN,KAAK;AAAA,UAcZ,CACD,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,SAAI,WAAU,oBACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,gBAAgB;AAAA,QAChB;AAAA,QACA,SAAS,MAAM,UAAU,SAAS,EAAE,MAAM,OAAO,MAAM,UAAU,SAAS,CAAC;AAAA,QAE1E;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":["PlanCard"]}
+{"version":3,"sources":["../../src/billing/plan-card.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check, Gauge } from \"lucide-react\";\n\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { formatNumber } from \"../lib/format\";\nimport { cn } from \"../lib/cn\";\nimport { ChoiceCard } from \"../components/choice-card\";\nimport type { ChoiceCardProps } from \"../components/choice-card\";\nimport { Chip } from \"../components/chip\";\nimport { ToggleGroup } from \"../components/toggle-group\";\nimport { Button } from \"../components/button\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\nimport { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from \"./plan-price\";\nimport type { BillingCurrency, BillingInterval, PlanPrices } from \"./plan-price\";\n\n/**\n * One plan of the app's catalogue (docs/billing-harmonization.md §3.1) as a page shows it:\n * server-kit's `PlanSpec` from `GET /billing/plans`, plus the words, which are the app's\n * (display names and feature lines come from its i18n, never from the provider).\n */\nexport interface BillingPlan {\n  /** The plan code, lowercase on the wire (§12.16); compared without case here. */\n  code: string;\n  /** The app's display name, in the reader's language: \"Pro\". */\n  name: string;\n  /** A line under the price. */\n  description?: ReactNode;\n  /** Gross prices in minor units, per currency and period (§3.1, §12.17). None at all —\n   *  or 0 — is a free plan. */\n  prices?: PlanPrices | null;\n  /** Dimension → limit; `null` is unlimited (§3.1). Shown in the object's order. */\n  limits?: Readonly<Record<string, number | null>>;\n  /** The app's feature lines. */\n  features?: readonly ReactNode[];\n  /** Not choosable — a plan being retired, say. */\n  disabled?: boolean;\n}\n\n/**\n * How a plan stands to the one the payer pays for now: `current` is it, `upgrade` comes\n * after it in the catalogue's order (`PlanSpec.sort`), `downgrade` before it.\n */\nexport type PlanRelation = \"current\" | \"upgrade\" | \"downgrade\";\n\n/** The plan's place against `current`, by the order of `plans`; `undefined` without a\n *  current plan (a trial, an ended plan) or for a code that is not in the list. */\nexport function planRelation(\n  plans: readonly Pick<BillingPlan, \"code\">[],\n  code: string,\n  current: string | null | undefined,\n): PlanRelation | undefined {\n  if (!current) return undefined;\n  const index = (c: string) => plans.findIndex((p) => p.code.toLowerCase() === c.toLowerCase());\n  const at = index(code);\n  const now = index(current);\n  if (at < 0 || now < 0) return undefined;\n  return at === now ? \"current\" : at > now ? \"upgrade\" : \"downgrade\";\n}\n\n/** What both parts need to draw a plan. */\ninterface PlanDisplayProps {\n  /** The currency the prices are shown in (§2.6). */\n  currency: BillingCurrency;\n  /** The period the prices are shown for. */\n  interval: BillingInterval;\n  /** The app's name of each limit's dimension (\"Budgets\"). A dimension without one is\n   *  shown by its key. */\n  dimensionLabels?: Readonly<Record<string, string>>;\n  /** How a limit's figure is written — kastlan's storage is bytes (`formatFileSize`).\n   *  Default: a number in the kit's locale. */\n  formatLimit?: (dimension: string, value: number) => string;\n  /** Over the provider's locale. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\nexport interface PlanCardProps\n  extends Omit<ChoiceCardProps, \"type\" | \"title\" | \"description\" | \"icon\" | \"indeterminate\" | \"value\" | \"labels\">,\n    PlanDisplayProps {\n  plan: BillingPlan;\n  /** See {@link PlanRelation}. `current` draws the \"Current plan\" chip — a word in the\n   *  card's name, never a colour alone. */\n  relation?: PlanRelation;\n  /**\n   * The provider's own localised price in place of the catalogue's figure (§12.17) — a\n   * Merchant of Record's price preview for the buyer's country, tax included. The period\n   * and \"VAT included\" stay: the law asks for a gross price, and the card says so.\n   */\n  pricePreview?: ReactNode;\n}\n\n/** A list from spans (`role=\"list\"`): the card is a `<label>`, which may hold phrasing\n *  content only, so a `<ul>` there would be invalid HTML. */\nfunction SpanList({ name, items, icon }: { name: string; items: ReactNode[]; icon: ReactNode }) {\n  if (items.length === 0) return null;\n  return (\n    <span role=\"list\" aria-label={name} className=\"block space-y-1\">\n      {items.map((item, i) => (\n        <span role=\"listitem\" key={i} className=\"flex items-start gap-1.5 text-secondary\">\n          <span aria-hidden className=\"mt-[0.0625rem] flex shrink-0 text-muted [&_svg]:size-3.5\">\n            {icon}\n          </span>\n          <span className=\"min-w-0\">\n            {item}\n            {/* A space between the items' texts in the flattened description. */}{\" \"}\n          </span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\n/**\n * One plan as a {@link ChoiceCard} radio (§7): the name (and \"Current plan\"), the GROSS\n * price in the chosen currency and period through `formatMoney` (\"CHF 49 per year, VAT\n * included\", §12.17), the limits (\"Budgets: 3\", \"Seats: Unlimited\") and the app's feature\n * lines. A plan with prices but none for this currency and period is shown, \"Not offered\n * for this billing period\", and cannot be picked.\n *\n * A radio of a set: give the cards one `name`, or use {@link PlanPicker}, which does that\n * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,\n * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.\n */\nexport function PlanCard({\n  // The radio `<input>` (ChoiceCard's): a React 19 ref prop since 0.34 (MOD-4, refactor\n  // audit 2026-10), where this was `forwardRef`.\n  ref,\n  plan,\n  relation,\n  pricePreview,\n  currency,\n  interval,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n  disabled,\n  ...rest\n}: PlanCardProps) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale(localeProp);\n  const price = planPrice(plan.prices, currency, interval);\n\n  const priced = price.kind === \"price\";\n  const figure = priced\n    ? pricePreview !== undefined && pricePreview !== null\n      ? pricePreview\n      : formatPlanPrice(price.minor, currency, { locale })\n    : price.kind === \"free\"\n      ? labels.free\n      : labels.notOffered;\n\n  const limitLines = Object.entries(plan.limits ?? {}).map(([dimension, value]) => {\n    const name = dimensionLabels?.[dimension] ?? dimension;\n    const shown =\n      value === null ? labels.unlimited : formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });\n    return common.fieldValue(name, shown);\n  });\n\n  const body = (\n    <span className=\"mt-1 block space-y-2\">\n      <span className=\"block\">\n        <span\n          data-part=\"price\"\n          className={cn(\n            \"tabular-nums\",\n            price.kind === \"not-offered\"\n              ? \"text-xs text-muted\"\n              : \"text-lg font-semibold leading-tight text-primary\",\n          )}\n        >\n          {figure}\n        </span>\n        {priced && (\n          <>\n            {\" \"}\n            <span className=\"text-xs text-secondary\">\n              {interval === \"year\" ? labels.perYear : labels.perMonth}\n            </span>{\" \"}\n            <span className=\"block text-xs text-muted\">{labels.vatIncluded}</span>\n          </>\n        )}{\" \"}\n      </span>\n      {plan.description !== undefined && plan.description !== null && (\n        <span className=\"block text-secondary\">{plan.description} </span>\n      )}\n      <SpanList name={labels.limits} items={limitLines} icon={<Gauge />} />\n      <SpanList name={labels.features} items={[...(plan.features ?? [])]} icon={<Check />} />\n    </span>\n  );\n\n  return (\n    <ChoiceCard\n      ref={ref}\n      {...rest}\n      type=\"radio\"\n      value={plan.code}\n      disabled={disabled || plan.disabled || price.kind === \"not-offered\"}\n      data-plan={plan.code}\n      data-relation={relation}\n      title={\n        <>\n          {plan.name}\n          {relation === \"current\" && (\n            <>\n              {\" \"}\n              <Chip size=\"xs\" tone=\"brand\" shape=\"square\" caps className=\"ms-1 align-[0.0625rem]\">\n                {labels.current}\n              </Chip>\n            </>\n          )}\n        </>\n      }\n      description={body}\n    />\n  );\n}\n\n/** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`\n *  takes (§4). */\nexport interface PlanChoice {\n  plan: string;\n  interval: BillingInterval;\n  currency: BillingCurrency;\n}\n\nexport interface PlanPickerProps extends Omit<PlanDisplayProps, \"currency\" | \"interval\"> {\n  /** The catalogue, in its order (`PlanSpec.sort`): cheapest first. The order decides\n   *  upgrade and downgrade. */\n  plans: readonly BillingPlan[];\n  /**\n   * The plan the payer pays for now (`plan` of the overview while `active` or\n   * `past_due`). Leave it out during a trial and after a plan ended: then every plan is\n   * \"Choose …\", the trial's plan included, since none is paid for yet.\n   */\n  current?: string | null;\n  /** The picked plan, controlled. `null` while none is. */\n  value?: string | null;\n  /** The picked plan, uncontrolled. Default: `current`, else nothing. */\n  defaultValue?: string | null;\n  onValueChange?: (plan: string) => void;\n  /** The period, controlled. */\n  interval?: BillingInterval;\n  /** The period, uncontrolled. Default `year` — lead with yearly (§12.17). */\n  defaultInterval?: BillingInterval;\n  onIntervalChange?: (interval: BillingInterval) => void;\n  /** The currency, controlled. */\n  currency?: BillingCurrency;\n  /** The currency, uncontrolled. Default: the account's stored currency is the app's to\n   *  pass here (§12.18); without it, {@link billingCurrencyFor} the kit's locale. */\n  defaultCurrency?: BillingCurrency;\n  onCurrencyChange?: (currency: BillingCurrency) => void;\n  /** The currencies the payer may switch between. Default: every currency a plan has a\n   *  price in. The switch shows only for more than one. */\n  currencies?: readonly BillingCurrency[];\n  /** The button: the app starts its checkout (`POST /billing/checkout`, then off to the\n   *  provider's page). The kit sends no request. */\n  onChoose: (choice: PlanChoice) => void;\n  /** The checkout is being opened: the button's spinner, no second press. */\n  pending?: boolean;\n  /** The provider's localised price for a plan, or `undefined` for the catalogue's —\n   *  see {@link PlanCardProps.pricePreview}. */\n  pricePreview?: (plan: BillingPlan, choice: Omit<PlanChoice, \"plan\">) => ReactNode | undefined;\n  /** A visible question over the cards. Without one the set is named \"Plans\". */\n  legend?: ReactNode;\n  /** Shared by the radios. Generated if omitted. */\n  name?: string;\n  /** Classes for the whole picker. */\n  className?: string;\n  /** Classes for the card grid. Default: one column, two from `sm`, three from `lg`. */\n  gridClassName?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n}\n\n/** Every currency some plan has a price in, CHF first. */\nfunction pricedCurrencies(plans: readonly BillingPlan[]): BillingCurrency[] {\n  const found = new Set<BillingCurrency>();\n  for (const p of plans) for (const c of Object.keys(p.prices ?? {})) found.add(c as BillingCurrency);\n  return ([\"CHF\", \"EUR\"] as const).filter((c) => found.has(c));\n}\n\n/** Every period some plan has a price for, yearly first. */\nfunction pricedIntervals(plans: readonly BillingPlan[]): BillingInterval[] {\n  const found = new Set<BillingInterval>();\n  for (const p of plans)\n    for (const byInterval of Object.values(p.prices ?? {}))\n      for (const [k, v] of Object.entries(byInterval ?? {})) if (typeof v === \"number\") found.add(k as BillingInterval);\n  return BILLING_INTERVALS.filter((i) => found.has(i));\n}\n\n/**\n * The plans to choose from (§7): the period switch — yearly first (§12.17) — and, where\n * the payer may pay in either, the currency switch (§2.6); a {@link PlanCard} per plan in\n * a radio set; and one button that says what pressing it does: \"Upgrade to Pro\", \"Switch\n * to Free\", or \"Choose Pro\" with no plan paid for yet.\n *\n * One button under the set rather than one per card: each card IS a radio — a `<label>`\n * round an `<input>` — and a button inside a label is interactive content inside\n * interactive content. Picking and committing are two steps anyway: the price under the\n * picked card is what checkout will charge.\n *\n * The button never takes the write lock: billing itself always works, a read-only payer\n * must be able to pay (§3.3). It is off, with the reason on hover and focus, while\n * nothing is picked or the current plan is.\n */\nexport function PlanPicker({\n  plans,\n  current,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  interval: intervalProp,\n  defaultInterval = \"year\",\n  onIntervalChange,\n  currency: currencyProp,\n  defaultCurrency,\n  onCurrencyChange,\n  currencies: currenciesProp,\n  onChoose,\n  pending,\n  pricePreview,\n  legend,\n  name,\n  className,\n  gridClassName,\n  cardClassName,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n}: PlanPickerProps) {\n  const labels = useBillingLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const generated = useId();\n  const groupName = name ?? generated;\n  const legendId = `${generated}-legend`;\n\n  const [ownValue, setOwnValue] = useState<string | null>(() => defaultValue ?? current ?? null);\n  const [ownInterval, setOwnInterval] = useState<BillingInterval>(defaultInterval);\n  const [ownCurrency, setOwnCurrency] = useState<BillingCurrency>(\n    () => defaultCurrency ?? billingCurrencyFor(locale),\n  );\n  const value = valueProp !== undefined ? valueProp : ownValue;\n  const interval = intervalProp ?? ownInterval;\n  const currency = currencyProp ?? ownCurrency;\n\n  const pick = (code: string) => {\n    if (valueProp === undefined) setOwnValue(code);\n    onValueChange?.(code);\n  };\n  const setInterval = (next: BillingInterval) => {\n    if (intervalProp === undefined) setOwnInterval(next);\n    onIntervalChange?.(next);\n  };\n  const setCurrency = (next: BillingCurrency) => {\n    if (currencyProp === undefined) setOwnCurrency(next);\n    onCurrencyChange?.(next);\n  };\n\n  const currencies = currenciesProp ?? pricedCurrencies(plans);\n  const intervals = pricedIntervals(plans);\n  const picked = value ? plans.find((p) => p.code.toLowerCase() === value.toLowerCase()) : undefined;\n  const relation = picked ? planRelation(plans, picked.code, current) : undefined;\n  const pickedPrice = picked ? planPrice(picked.prices, currency, interval) : undefined;\n\n  const buttonText = !picked\n    ? labels.choosePlan\n    : relation === \"upgrade\"\n      ? labels.upgrade(picked.name)\n      : relation === \"downgrade\"\n        ? labels.downgrade(picked.name)\n        : labels.choose(picked.name);\n  const blocked = !picked\n    ? labels.pickFirst\n    : relation === \"current\"\n      ? labels.isCurrent\n      : pickedPrice?.kind === \"not-offered\"\n        ? labels.notOffered\n        : undefined;\n\n  return (\n    <div className={cn(\"min-w-0 space-y-3\", className)} data-billing-interval={interval} data-billing-currency={currency}>\n      {(intervals.length > 1 || currencies.length > 1) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {intervals.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.interval}\n              // Content-wide, so the two switches share a row and wrap only when narrow.\n              className=\"w-auto\"\n              options={intervals.map((i) => ({ value: i, label: i === \"year\" ? labels.yearly : labels.monthly }))}\n              value={interval}\n              onChange={setInterval}\n            />\n          )}\n          {currencies.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.currency}\n              className=\"w-auto\"\n              options={currencies.map((c) => ({ value: c, label: c }))}\n              value={currency}\n              onChange={setCurrency}\n            />\n          )}\n        </div>\n      )}\n      <fieldset\n        className=\"min-w-0\"\n        aria-labelledby={legend !== undefined ? legendId : undefined}\n        aria-label={legend === undefined ? labels.plans : undefined}\n      >\n        {legend !== undefined && (\n          <legend id={legendId} className=\"mb-2 text-sm font-medium text-primary\">\n            {legend}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3\", gridClassName)}>\n          {plans.map((plan) => (\n            <PlanCard\n              key={plan.code}\n              plan={plan}\n              name={groupName}\n              currency={currency}\n              interval={interval}\n              relation={planRelation(plans, plan.code, current)}\n              pricePreview={pricePreview?.(plan, { interval, currency })}\n              checked={picked?.code === plan.code}\n              onCheckedChange={(on) => on && pick(plan.code)}\n              dimensionLabels={dimensionLabels}\n              formatLimit={formatLimit}\n              locale={locale}\n              labels={labelsProp}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n      </fieldset>\n      <div className=\"flex justify-end\">\n        <Button\n          type=\"button\"\n          variant=\"primary\"\n          className=\"max-sm:w-full\"\n          disabledReason={blocked}\n          pending={pending}\n          onClick={() => picked && onChoose({ plan: picked.code, interval, currency })}\n        >\n          {buttonText}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/billing/plan-limit-notice.d.ts

@@ -1,108 +1,9 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-import { e5 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-DiPX4Vue.js';
-import { AlertTone } from '../components/alert-banner.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import '../components/data-table-sort.js';
-import '../components/swipeable-row.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
-import '../components/stat-tile.js';
-import '../components/chip.js';
-import 'lucide-react';
-import '../components/field-parts.js';
-import '../components/write-lock.js';
-import '../components/mini-calendar.js';
-import '../components/calendar-heatmap.js';
-import '../components/popover.js';
-import '../hooks/use-breakpoint.js';
-import '../components/field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import '../components/month-picker.js';
-import '../components/page-contents.js';
-import '../components/series-chart-labels.js';
-import '../components/pie-chart-labels.js';
-import '../components/sparkline.js';
-import '../components/signature-pad.js';
-import '../components/password-strength.js';
-import '../components/swatch-picker.js';
-import '../components/tile-radio.js';
-import '../components/icon-picker.js';
-import '../components/dialog-frame.js';
-import '../components/modal.js';
-import '../hooks/use-search-param-state.js';
-import '../components/measured-grid.js';
-import '../components/user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import '../components/menu-item.js';
-import '../components/floating-panel.js';
-import '../hooks/use-authed-src.js';
-import '../components/account-settings-labels.js';
-import '../components/bulk-action-bar.js';
-import '../components/list.js';
-import '../components/breadcrumbs.js';
-import '../components/toast.js';
-import '../components/description-list.js';
-import '../components/line-items.js';
-import '../components/error-boundary.js';
-import '../components/authed-image.js';
-import '../components/image-grid.js';
-import '../components/lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import '../components/account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../components/appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import '../components/reauth-dialog.js';
-import '../components/server-wake.js';
-import '../lib/server-wake.js';
-import '../components/translation-review-labels.js';
-import '../lib/translation-review.js';
-import '../components/country-select.js';
-import '../components/inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import '../components/sign-chip.js';
-import '../components/column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import '../components/focus-ring.js';
-
+import type { ComponentPropsWithoutRef } from "react";
+import type { LabelOverride } from "../i18n/kit-labels.js";
+import type { AlertTone } from "../components/alert-banner.js";
+import type { BillingLabels } from "./billing-labels.js";
 /** The `contact` mode's mail: to support, its subject naming the dimension. */
-declare function planLimitMailto(email: string, subject: string): string;
+export declare function planLimitMailto(email: string, subject: string): string;
 interface PlanLimitNoticeBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
     /** The dimension as the refusal names it (`"budgets"`, `"seats"`) — `isPlanLimit(err)`'s
      *  `dimension`. Carried as `data-dimension`. */
@@ -128,7 +29,7 @@ interface PlanLimitNoticeBaseProps extends Omit<ComponentPropsWithoutRef<"div">,
     /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
     labels?: LabelOverride<BillingLabels>;
 }
-type PlanLimitNoticeProps = PlanLimitNoticeBaseProps & ({
+export type PlanLimitNoticeProps = PlanLimitNoticeBaseProps & ({
     /** Plans are bought: "Choose a plan" → the app's subscription page. */
     mode: "upgrade";
     /** The subscription page. */
@@ -151,6 +52,5 @@ type PlanLimitNoticeProps = PlanLimitNoticeBaseProps & ({
  * the refusal: `const hit = isPlanLimit(err); hit && <PlanLimitNotice {...hit} …/>`. The
  * kit sends nothing — the mail opens the reader's own client.
  */
-declare function PlanLimitNotice(props: PlanLimitNoticeProps): react.JSX.Element;
-
-export { PlanLimitNotice, type PlanLimitNoticeProps, planLimitMailto };
+export declare function PlanLimitNotice(props: PlanLimitNoticeProps): import("react").JSX.Element;
+export {};

package/dist/billing/plan-limit-notice.js

@@ -4,7 +4,7 @@ import { useKitLocale } from "../i18n/kit-labels.js";
 import { formatNumber } from "../lib/format.js";
 import { AlertBanner } from "../components/alert-banner.js";
 import { ProgressBar } from "../components/progress-bar.js";
-import { Button } from "../components/ui.js";
+import { Button } from "../components/button.js";
 import { useBillingLabels } from "./billing-labels.js";
 function encodeStrict(value) {
   return encodeURIComponent(value).replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);

package/dist/billing/plan-limit-notice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/billing/plan-limit-notice.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\n\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { formatNumber } from \"../lib/format\";\nimport { AlertBanner } from \"../components/alert-banner\";\nimport type { AlertTone } from \"../components/alert-banner\";\nimport { ProgressBar } from \"../components/progress-bar\";\nimport { Button } from \"../components/ui\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\n\n/** RFC 3986 percent-encoding, `!'()*` too — a mail client that splits on `'` is the one\n *  that breaks \"Plan limit: Ada's plots\" (landing/access.ts keeps the same rule). */\nfunction encodeStrict(value: string): string {\n  return encodeURIComponent(value).replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);\n}\n\n/** The `contact` mode's mail: to support, its subject naming the dimension. */\nexport function planLimitMailto(email: string, subject: string): string {\n  const to = encodeStrict(email).replace(/%40/g, \"@\");\n  return `mailto:${to}?subject=${encodeStrict(subject)}`;\n}\n\ninterface PlanLimitNoticeBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onClick\"> {\n  /** The dimension as the refusal names it (`\"budgets\"`, `\"seats\"`) — `isPlanLimit(err)`'s\n   *  `dimension`. Carried as `data-dimension`. */\n  dimension: string;\n  /** The app's name for it, in the reader's language: \"Budgets\". Default: the key. */\n  dimensionLabel?: string;\n  /** How many there are. Left out (keksdose's legacy `plan_budget_limit` body has no\n   *  `used`), it is read as `limit`: the create was refused for being at it. */\n  used?: number;\n  /** The plan's limit for the dimension. Left out — a body without one — the notice says\n   *  its words and draws no meter. */\n  limit?: number;\n  /** The payer's plan code, as `isPlanLimit` reads it — carried as `data-plan`, so the\n   *  refusal can be spread in whole: `<PlanLimitNotice {...isPlanLimit(err)} …/>`. */\n  plan?: string;\n  /** How a figure is written — kastlan's storage limit is bytes (`formatFileSize`).\n   *  Default: a number in the kit's locale. */\n  formatValue?: (value: number) => string;\n  /** Over the provider's locale, for the default figures. */\n  locale?: string;\n  /** Default `warning`. */\n  tone?: AlertTone;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\nexport type PlanLimitNoticeProps = PlanLimitNoticeBaseProps &\n  (\n    | {\n        /** Plans are bought: \"Choose a plan\" → the app's subscription page. */\n        mode: \"upgrade\";\n        /** The subscription page. */\n        href: string;\n        email?: never;\n      }\n    | {\n        /** The operator grants plans by hand (keksdose's today): \"Ask for more\" → a mail. */\n        mode: \"contact\";\n        /** The support address: `support@` the app's domain. */\n        email: string;\n        href?: never;\n      }\n  );\n\n/**\n * A create refused at the plan's limit (docs/billing-harmonization.md §3.4): \"Plan limit\n * reached\", what to do, the dimension's meter (\"Budgets — 3 of 3\") and the app's way to\n * more — `upgrade`, a link to the subscription page, or `contact`, a mail to support.\n *\n * A limit gates CREATION only: a downgrade never deletes or hides what is over the new\n * limit (§3.4), so `used` may be past `limit`; the meter then fills and turns red. Feed it\n * the refusal: `const hit = isPlanLimit(err); hit && <PlanLimitNotice {...hit} …/>`. The\n * kit sends nothing — the mail opens the reader's own client.\n */\nexport function PlanLimitNotice(props: PlanLimitNoticeProps) {\n  const {\n    dimension,\n    dimensionLabel,\n    used: usedProp,\n    limit,\n    plan,\n    formatValue,\n    locale: localeProp,\n    tone = \"warning\",\n    labels: labelsProp,\n    mode,\n    href,\n    email,\n    className,\n    ...rest\n  } = props;\n  const labels = useBillingLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const used = usedProp ?? limit ?? 0;\n  const name = dimensionLabel ?? dimension;\n  const figure = (value: number) => (formatValue ? formatValue(value) : formatNumber(value, { locale }));\n\n  const action =\n    mode === \"upgrade\" ? (\n      <Button href={href} variant=\"secondary\" size=\"sm\">\n        {labels.choosePlan}\n      </Button>\n    ) : (\n      <Button href={planLimitMailto(email, labels.contactSubject(name))} variant=\"secondary\" size=\"sm\">\n        {labels.askForMore}\n      </Button>\n    );\n\n  return (\n    <AlertBanner\n      {...rest}\n      tone={tone}\n      action={action}\n      data-plan-limit-mode={mode}\n      data-dimension={dimension}\n      data-plan={plan}\n      className={className}\n    >\n      <span className=\"block font-medium\">{labels.limitReached}</span>\n      <span className=\"block\">{mode === \"upgrade\" ? labels.limitUpgrade : labels.limitContact}</span>\n      {limit !== undefined && (\n        <ProgressBar\n          as=\"span\"\n          variant=\"meter\"\n          size=\"slim\"\n          value={used}\n          max={limit}\n          label={name}\n          showValue\n          // The bar is clamped at `max` and hands its formatter the clamped value; the\n          // figures are the real ones, so \"5 of 3\" after a downgrade says what the bar\n          // cannot draw.\n          formatValue={() => labels.usage(figure(used), figure(limit))}\n          tone={used > limit ? \"danger\" : \"warning\"}\n          className=\"mt-2\"\n          locale={locale}\n        />\n      )}\n    </AlertBanner>\n  );\n}\n"],"mappings":";AAuGM,cAUF,YAVE;AArGN,SAAS,oBAAoB;AAE7B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAKjC,SAAS,aAAa,OAAuB;AAC3C,SAAO,mBAAmB,KAAK,EAAE,QAAQ,YAAY,CAAC,MAAM,IAAI,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,CAAC,EAAE;AAC9G;AAGO,SAAS,gBAAgB,OAAe,SAAyB;AACtE,QAAM,KAAK,aAAa,KAAK,EAAE,QAAQ,QAAQ,GAAG;AAClD,SAAO,UAAU,EAAE,YAAY,aAAa,OAAO,CAAC;AACtD;AAwDO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,OAAO,YAAY,SAAS;AAClC,QAAM,OAAO,kBAAkB;AAC/B,QAAM,SAAS,CAAC,UAAmB,cAAc,YAAY,KAAK,IAAI,aAAa,OAAO,EAAE,OAAO,CAAC;AAEpG,QAAM,SACJ,SAAS,YACP,oBAAC,UAAO,MAAY,SAAQ,aAAY,MAAK,MAC1C,iBAAO,YACV,IAEA,oBAAC,UAAO,MAAM,gBAAgB,OAAO,OAAO,eAAe,IAAI,CAAC,GAAG,SAAQ,aAAY,MAAK,MACzF,iBAAO,YACV;AAGJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,wBAAsB;AAAA,MACtB,kBAAgB;AAAA,MAChB,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,qBAAqB,iBAAO,cAAa;AAAA,QACzD,oBAAC,UAAK,WAAU,SAAS,mBAAS,YAAY,OAAO,eAAe,OAAO,cAAa;AAAA,QACvF,UAAU,UACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAO;AAAA,YACP,KAAK;AAAA,YACL,OAAO;AAAA,YACP,WAAS;AAAA,YAIT,aAAa,MAAM,OAAO,MAAM,OAAO,IAAI,GAAG,OAAO,KAAK,CAAC;AAAA,YAC3D,MAAM,OAAO,QAAQ,WAAW;AAAA,YAChC,WAAU;AAAA,YACV;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/billing/plan-limit-notice.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\n\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { formatNumber } from \"../lib/format\";\nimport { AlertBanner } from \"../components/alert-banner\";\nimport type { AlertTone } from \"../components/alert-banner\";\nimport { ProgressBar } from \"../components/progress-bar\";\nimport { Button } from \"../components/button\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\n\n/** RFC 3986 percent-encoding, `!'()*` too — a mail client that splits on `'` is the one\n *  that breaks \"Plan limit: Ada's plots\" (landing/access.ts keeps the same rule). */\nfunction encodeStrict(value: string): string {\n  return encodeURIComponent(value).replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);\n}\n\n/** The `contact` mode's mail: to support, its subject naming the dimension. */\nexport function planLimitMailto(email: string, subject: string): string {\n  const to = encodeStrict(email).replace(/%40/g, \"@\");\n  return `mailto:${to}?subject=${encodeStrict(subject)}`;\n}\n\ninterface PlanLimitNoticeBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onClick\"> {\n  /** The dimension as the refusal names it (`\"budgets\"`, `\"seats\"`) — `isPlanLimit(err)`'s\n   *  `dimension`. Carried as `data-dimension`. */\n  dimension: string;\n  /** The app's name for it, in the reader's language: \"Budgets\". Default: the key. */\n  dimensionLabel?: string;\n  /** How many there are. Left out (keksdose's legacy `plan_budget_limit` body has no\n   *  `used`), it is read as `limit`: the create was refused for being at it. */\n  used?: number;\n  /** The plan's limit for the dimension. Left out — a body without one — the notice says\n   *  its words and draws no meter. */\n  limit?: number;\n  /** The payer's plan code, as `isPlanLimit` reads it — carried as `data-plan`, so the\n   *  refusal can be spread in whole: `<PlanLimitNotice {...isPlanLimit(err)} …/>`. */\n  plan?: string;\n  /** How a figure is written — kastlan's storage limit is bytes (`formatFileSize`).\n   *  Default: a number in the kit's locale. */\n  formatValue?: (value: number) => string;\n  /** Over the provider's locale, for the default figures. */\n  locale?: string;\n  /** Default `warning`. */\n  tone?: AlertTone;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\nexport type PlanLimitNoticeProps = PlanLimitNoticeBaseProps &\n  (\n    | {\n        /** Plans are bought: \"Choose a plan\" → the app's subscription page. */\n        mode: \"upgrade\";\n        /** The subscription page. */\n        href: string;\n        email?: never;\n      }\n    | {\n        /** The operator grants plans by hand (keksdose's today): \"Ask for more\" → a mail. */\n        mode: \"contact\";\n        /** The support address: `support@` the app's domain. */\n        email: string;\n        href?: never;\n      }\n  );\n\n/**\n * A create refused at the plan's limit (docs/billing-harmonization.md §3.4): \"Plan limit\n * reached\", what to do, the dimension's meter (\"Budgets — 3 of 3\") and the app's way to\n * more — `upgrade`, a link to the subscription page, or `contact`, a mail to support.\n *\n * A limit gates CREATION only: a downgrade never deletes or hides what is over the new\n * limit (§3.4), so `used` may be past `limit`; the meter then fills and turns red. Feed it\n * the refusal: `const hit = isPlanLimit(err); hit && <PlanLimitNotice {...hit} …/>`. The\n * kit sends nothing — the mail opens the reader's own client.\n */\nexport function PlanLimitNotice(props: PlanLimitNoticeProps) {\n  const {\n    dimension,\n    dimensionLabel,\n    used: usedProp,\n    limit,\n    plan,\n    formatValue,\n    locale: localeProp,\n    tone = \"warning\",\n    labels: labelsProp,\n    mode,\n    href,\n    email,\n    className,\n    ...rest\n  } = props;\n  const labels = useBillingLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const used = usedProp ?? limit ?? 0;\n  const name = dimensionLabel ?? dimension;\n  const figure = (value: number) => (formatValue ? formatValue(value) : formatNumber(value, { locale }));\n\n  const action =\n    mode === \"upgrade\" ? (\n      <Button href={href} variant=\"secondary\" size=\"sm\">\n        {labels.choosePlan}\n      </Button>\n    ) : (\n      <Button href={planLimitMailto(email, labels.contactSubject(name))} variant=\"secondary\" size=\"sm\">\n        {labels.askForMore}\n      </Button>\n    );\n\n  return (\n    <AlertBanner\n      {...rest}\n      tone={tone}\n      action={action}\n      data-plan-limit-mode={mode}\n      data-dimension={dimension}\n      data-plan={plan}\n      className={className}\n    >\n      <span className=\"block font-medium\">{labels.limitReached}</span>\n      <span className=\"block\">{mode === \"upgrade\" ? labels.limitUpgrade : labels.limitContact}</span>\n      {limit !== undefined && (\n        <ProgressBar\n          as=\"span\"\n          variant=\"meter\"\n          size=\"slim\"\n          value={used}\n          max={limit}\n          label={name}\n          showValue\n          // The bar is clamped at `max` and hands its formatter the clamped value; the\n          // figures are the real ones, so \"5 of 3\" after a downgrade says what the bar\n          // cannot draw.\n          formatValue={() => labels.usage(figure(used), figure(limit))}\n          tone={used > limit ? \"danger\" : \"warning\"}\n          className=\"mt-2\"\n          locale={locale}\n        />\n      )}\n    </AlertBanner>\n  );\n}\n"],"mappings":";AAuGM,cAUF,YAVE;AArGN,SAAS,oBAAoB;AAE7B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAKjC,SAAS,aAAa,OAAuB;AAC3C,SAAO,mBAAmB,KAAK,EAAE,QAAQ,YAAY,CAAC,MAAM,IAAI,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,CAAC,EAAE;AAC9G;AAGO,SAAS,gBAAgB,OAAe,SAAyB;AACtE,QAAM,KAAK,aAAa,KAAK,EAAE,QAAQ,QAAQ,GAAG;AAClD,SAAO,UAAU,EAAE,YAAY,aAAa,OAAO,CAAC;AACtD;AAwDO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,OAAO,YAAY,SAAS;AAClC,QAAM,OAAO,kBAAkB;AAC/B,QAAM,SAAS,CAAC,UAAmB,cAAc,YAAY,KAAK,IAAI,aAAa,OAAO,EAAE,OAAO,CAAC;AAEpG,QAAM,SACJ,SAAS,YACP,oBAAC,UAAO,MAAY,SAAQ,aAAY,MAAK,MAC1C,iBAAO,YACV,IAEA,oBAAC,UAAO,MAAM,gBAAgB,OAAO,OAAO,eAAe,IAAI,CAAC,GAAG,SAAQ,aAAY,MAAK,MACzF,iBAAO,YACV;AAGJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,wBAAsB;AAAA,MACtB,kBAAgB;AAAA,MAChB,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,qBAAqB,iBAAO,cAAa;AAAA,QACzD,oBAAC,UAAK,WAAU,SAAS,mBAAS,YAAY,OAAO,eAAe,OAAO,cAAa;AAAA,QACvF,UAAU,UACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAO;AAAA,YACP,KAAK;AAAA,YACL,OAAO;AAAA,YACP,WAAS;AAAA,YAIT,aAAa,MAAM,OAAO,MAAM,OAAO,IAAI,GAAG,OAAO,KAAK,CAAC;AAAA,YAC3D,MAAM,OAAO,QAAQ,WAAW;AAAA,YAChC,WAAU;AAAA,YACV;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}