@withpotter/components 0.13.0-next.101

package/dist/mobile/primitives/inline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/inline.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile Primitives — Inline content layer\n *\n * Pill, Chip, Avatar, IconTile, StatTile, ListRow, MetaRow, MoneyRow, ProgressBar\n */\n\nimport React from 'react';\nimport Link from 'next/link';\nimport { ChevronRight } from 'lucide-react';\n\n// ─────────────────────────────────────────────────────────────\n// Pill\n// Read-only status badge. tone drives the colour.\n// ─────────────────────────────────────────────────────────────\n\ntype PillTone = 'live' | 'draft' | 'paid' | 'overdue' | 'scheduled' | 'neutral';\n\nconst PILL_TONE_MAP: Record<PillTone, { fg: string; bg: string }> = {\n  live: {\n    fg: 'var(--mb-good)',\n    bg: 'color-mix(in srgb, var(--mb-good) 10%, transparent)',\n  },\n  paid: {\n    fg: 'var(--mb-good)',\n    bg: 'color-mix(in srgb, var(--mb-good) 10%, transparent)',\n  },\n  draft: {\n    fg: 'var(--mb-warn)',\n    bg: 'color-mix(in srgb, var(--mb-warn) 10%, transparent)',\n  },\n  overdue: {\n    fg: 'var(--mb-bad)',\n    bg: 'color-mix(in srgb, var(--mb-bad) 10%, transparent)',\n  },\n  scheduled: {\n    fg: 'var(--mb-accent)',\n    bg: 'color-mix(in srgb, var(--mb-accent) 10%, transparent)',\n  },\n  neutral: { fg: 'var(--mb-text-tertiary)', bg: 'var(--mb-elevated)' },\n};\n\nexport function Pill({\n  label,\n  tone = 'neutral',\n}: {\n  label: string;\n  tone?: PillTone;\n}) {\n  const { fg, bg } = PILL_TONE_MAP[tone];\n  return (\n    <span\n      className=\"inline-flex items-center rounded-full px-2 py-0.5 text-3xs font-semibold uppercase tracking-wider\"\n      style={{ background: bg, color: fg }}\n    >\n      {label}\n    </span>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Chip\n// Tappable filter / segment chip. Used in horizontal scroll strips.\n// ─────────────────────────────────────────────────────────────\n\nexport function Chip({\n  label,\n  active,\n  count,\n  onClick,\n}: {\n  label: string;\n  active?: boolean;\n  count?: number;\n  onClick?: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className=\"flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-3 text-xs font-medium\"\n      style={{\n        borderColor: active ? 'var(--mb-accent)' : 'var(--mb-border)',\n        background: active\n          ? 'color-mix(in srgb, var(--mb-accent) 10%, transparent)'\n          : 'var(--mb-card)',\n        color: active ? 'var(--mb-accent)' : 'var(--mb-text-secondary)',\n      }}\n      onClick={onClick}\n    >\n      {label}\n      {count !== undefined && (\n        <span className=\"text-2xs tabular-nums\" style={{ opacity: 0.75 }}>\n          {count}\n        </span>\n      )}\n    </button>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// ActionButton\n// The mobile action control. Named ActionButton rather than Button because a\n// screen often imports both this and the desktop Button, and two things called\n// Button in one file is how the wrong one gets used.\n//\n// It exists because mobile had Pill, Chip, Toggle, SegmentedControl and no\n// button at all, so every screen that needed one wrote `rounded-2xl border\n// py-2.5` against the --mb-* tokens by hand and picked its own radius.\n// ─────────────────────────────────────────────────────────────\n\nexport function ActionButton({\n  children,\n  onClick,\n  variant = 'secondary',\n  disabled,\n  className,\n}: {\n  children: React.ReactNode;\n  onClick?: () => void;\n  variant?: 'primary' | 'secondary';\n  disabled?: boolean;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      className={`inline-flex items-center justify-center gap-1.5 rounded-2xl py-2.5 text-sm font-medium transition-opacity active:opacity-80 disabled:opacity-50 ${\n        variant === 'secondary' ? 'border' : ''\n      } ${className ?? ''}`}\n      style={\n        variant === 'primary'\n          ? { background: 'var(--mb-accent)', color: '#fff' }\n          : {\n              borderColor: 'var(--mb-border)',\n              color: 'var(--mb-text-secondary)',\n            }\n      }\n    >\n      {children}\n    </button>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Avatar\n// Circular or rounded container for initials or an image.\n// size: 24 | 32 | 40 | 56 (px).\n// ─────────────────────────────────────────────────────────────\n\nconst SIZE_MAP: Record<number, string> = {\n  24: 'h-6 w-6 text-3xs',\n  32: 'h-8 w-8 text-3xs',\n  40: 'h-10 w-10 text-xs',\n  56: 'h-14 w-14 text-base',\n};\n\nexport function Avatar({\n  initials,\n  src,\n  size = 40,\n  color,\n}: {\n  initials?: string;\n  src?: string;\n  size?: 24 | 32 | 40 | 56;\n  /** Override background colour (hex / var). Falls back to accent tint. */\n  color?: string;\n}) {\n  const cls = SIZE_MAP[size] ?? SIZE_MAP[40];\n  const bg = color ?? 'color-mix(in srgb, var(--mb-accent) 15%, transparent)';\n  const fg = color ? 'var(--mb-text)' : 'var(--mb-accent)';\n  return (\n    <div\n      className={`flex shrink-0 items-center justify-center rounded-full font-bold ${cls}`}\n      style={{ background: src ? 'transparent' : bg, color: fg }}\n    >\n      {src ? (\n        // eslint-disable-next-line @next/next/no-img-element\n        <img\n          src={src}\n          alt={initials ?? ''}\n          className=\"h-full w-full rounded-full object-cover\"\n        />\n      ) : (\n        initials\n      )}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// IconTile\n// Coloured square holding a Lucide icon. Used in list rows and hubs.\n// size: 36 | 40 | 44 (px).\n// ─────────────────────────────────────────────────────────────\n\nexport function IconTile({\n  icon: Icon,\n  color,\n  size = 40,\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  /** Background colour (hex / var). Falls back to tokens.elevated. */\n  color?: string;\n  size?: 36 | 40 | 44;\n}) {\n  const sizeMap: Record<number, { outer: string; inner: string }> = {\n    36: { outer: 'h-9 w-9 rounded-xl', inner: 'h-3.5 w-3.5' },\n    40: { outer: 'h-10 w-10 rounded-xl', inner: 'h-4 w-4' },\n    44: { outer: 'h-11 w-11 rounded-2xl', inner: 'h-5 w-5' },\n  };\n  const cfg = sizeMap[size] ?? sizeMap[40];\n  return (\n    <div\n      className={`flex shrink-0 items-center justify-center ${cfg.outer}`}\n      style={{ background: color ?? 'var(--mb-elevated)' }}\n    >\n      <Icon\n        className={cfg.inner}\n        style={{ color: 'var(--mb-text-secondary)' }}\n      />\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// StatTile\n// Label + big number + optional trend delta. Used on stats strips.\n// ─────────────────────────────────────────────────────────────\n\nexport function StatTile({\n  label,\n  value,\n  delta,\n  tone,\n}: {\n  label: string;\n  value: string;\n  delta?: string;\n  tone?: 'good' | 'bad' | 'warn';\n}) {\n  const deltaColor =\n    tone === 'good'\n      ? 'var(--mb-good)'\n      : tone === 'bad'\n        ? 'var(--mb-bad)'\n        : tone === 'warn'\n          ? 'var(--mb-warn)'\n          : 'var(--mb-text-tertiary)';\n  return (\n    <div\n      className=\"rounded-2xl border p-3\"\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      <p\n        className=\"text-3xs font-semibold\"\n        style={{ color: 'var(--mb-text-tertiary)' }}\n      >\n        {label}\n      </p>\n      <p\n        className=\"mt-1 text-2xl font-bold tabular-nums\"\n        style={{ color: 'var(--mb-text)' }}\n      >\n        {value}\n      </p>\n      {delta && (\n        <p\n          className=\"mt-0.5 text-2xs font-medium tabular-nums\"\n          style={{ color: deltaColor }}\n        >\n          {delta}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// ListRow\n// Icon · title · optional hint · chevron. The canonical row for\n// navigation lists (settings, hub modules, etc.).\n// Maps to SettingsRow in the mockup gallery (re-exported as alias below).\n// ─────────────────────────────────────────────────────────────\n\nexport function ListRow({\n  icon: Icon,\n  label,\n  hint,\n  tone,\n  trailing,\n  onClick,\n  href,\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  label: string;\n  hint?: string;\n  tone?: 'good' | 'warn' | 'bad';\n  trailing?: React.ReactNode;\n  onClick?: () => void;\n  /** When provided, renders as an internal Next.js link. Ignored if onClick is also provided. */\n  href?: string;\n}) {\n  const hintColor =\n    tone === 'good'\n      ? 'var(--mb-good)'\n      : tone === 'warn'\n        ? 'var(--mb-warn)'\n        : tone === 'bad'\n          ? 'var(--mb-bad)'\n          : 'var(--mb-text-tertiary)';\n  const inner = (\n    <>\n      <div\n        className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl\"\n        style={{ background: 'var(--mb-elevated)' }}\n      >\n        <Icon\n          className=\"h-4 w-4\"\n          style={{ color: 'var(--mb-text-secondary)' }}\n        />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <p\n          className=\"truncate text-md font-medium\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {label}\n        </p>\n        {hint && (\n          <p className=\"mt-0.5 truncate text-2xs\" style={{ color: hintColor }}>\n            {hint}\n          </p>\n        )}\n      </div>\n      {trailing ?? (\n        <ChevronRight\n          className=\"size-4 shrink-0\"\n          style={{ color: 'var(--mb-text-muted)' }}\n        />\n      )}\n    </>\n  );\n  const cls =\n    'flex w-full items-center gap-3 rounded-2xl border p-3.5 text-left';\n  const style = {\n    borderColor: 'var(--mb-border)',\n    background: 'var(--mb-card)',\n    minHeight: '64px',\n  };\n\n  if (href && !onClick) {\n    return (\n      <Link href={href} className={cls} style={style}>\n        {inner}\n      </Link>\n    );\n  }\n  return (\n    <button className={cls} style={style} onClick={onClick} type=\"button\">\n      {inner}\n    </button>\n  );\n}\n\n/**\n * @deprecated Use ListRow. SettingsRow is a re-export alias kept for\n * back-compat with the mockup gallery.\n */\nexport const SettingsRow = ListRow;\n\n// ─────────────────────────────────────────────────────────────\n// MetaRow\n// Key · value pair with an optional trailing slot. Used in detail screens.\n// Maps to FieldRow in the mockup gallery (re-exported as alias below).\n// ─────────────────────────────────────────────────────────────\n\nexport function MetaRow({\n  label,\n  value,\n  mono,\n  trailing,\n}: {\n  label: string;\n  value: string;\n  mono?: boolean;\n  trailing?: React.ReactNode;\n}) {\n  return (\n    <div\n      className=\"rounded-2xl border p-4\"\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      <p className=\"text-2xs\" style={{ color: 'var(--mb-text-tertiary)' }}>\n        {label}\n      </p>\n      <div className=\"mt-1 flex items-center justify-between gap-3\">\n        <p\n          className={`flex-1 text-lg font-medium ${mono ? 'tabular-nums' : ''}`}\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {value}\n        </p>\n        {trailing}\n      </div>\n    </div>\n  );\n}\n\n/**\n * @deprecated Use MetaRow. FieldRow is a re-export alias kept for\n * back-compat with the mockup gallery.\n */\nexport const FieldRow = MetaRow;\n\n// ─────────────────────────────────────────────────────────────\n// MoneyRow\n// Like MetaRow but with tabular figures and accent colour on negatives.\n// ─────────────────────────────────────────────────────────────\n\nexport function MoneyRow({\n  label,\n  value,\n  trailing,\n}: {\n  label: string;\n  value: string;\n  trailing?: React.ReactNode;\n}) {\n  const isNegative = value.startsWith('-') || value.startsWith('−');\n  return (\n    <div\n      className=\"rounded-2xl border p-4\"\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      <p className=\"text-2xs\" style={{ color: 'var(--mb-text-tertiary)' }}>\n        {label}\n      </p>\n      <div className=\"mt-1 flex items-center justify-between gap-3\">\n        <p\n          className=\"flex-1 text-lg font-medium tabular-nums\"\n          style={{ color: isNegative ? 'var(--mb-bad)' : 'var(--mb-text)' }}\n        >\n          {value}\n        </p>\n        {trailing}\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// ProgressBar\n// Thin bar for usage / redemption counts. value 0-100.\n// ─────────────────────────────────────────────────────────────\n\nexport function ProgressBar({\n  value,\n  max = 100,\n  color,\n  label,\n}: {\n  /** Current value. */\n  value: number;\n  /** Maximum value (defaults to 100). */\n  max?: number;\n  /** Fill colour (hex / var). Falls back to accent. */\n  color?: string;\n  /** Optional label rendered to the right of the bar. */\n  label?: string;\n}) {\n  const pct = Math.min(Math.round((value / max) * 100), 100);\n  return (\n    <div className=\"flex items-center gap-2\">\n      <div\n        className=\"h-1 flex-1 overflow-hidden rounded-full\"\n        style={{ background: 'var(--mb-elevated)' }}\n      >\n        <div\n          className=\"h-full rounded-full\"\n          style={{ width: `${pct}%`, background: color ?? 'var(--mb-accent)' }}\n        />\n      </div>\n      {label && (\n        <span\n          className=\"text-3xs tabular-nums\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          {label}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/primitives/inputs.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Mobile Primitives — Inputs layer
+ *
+ * TextField, Stepper, Toggle, SegmentedControl, SearchField
+ *
+ * All inputs share token-driven focus and disabled states.
+ * Minimum tap target 44×44 (iOS HIG).
+ */
+import React from 'react';
+/**
+ * `bare` is the same field without the card around it.
+ *
+ * A form of eight stacked fields does not want eight cards — the address sheet
+ * on the customer record is one panel with eight rows in it, and wrapping each
+ * row in its own surface would make the sheet read as eight separate things.
+ * So that sheet declared a local `field` string and a local `fieldStyle`
+ * object and drew eight raw inputs against them, which is the same private
+ * copy this file exists to prevent, just kept tidily in one place.
+ *
+ * Bare renders the border on the INPUT rather than on a wrapper, at the 44px
+ * tap target the rest of this file holds to. `bare` matches Checkbox's prop of
+ * the same name: the control is unchanged, only the chrome around it is gone.
+ */
+export declare function TextField({ id, label, placeholder, value, onChange, multiline, trailing, disabled, bare, type, maxLength, className, }: {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    multiline?: boolean;
+    trailing?: React.ReactNode;
+    disabled?: boolean;
+    bare?: boolean;
+    type?: string;
+    maxLength?: number;
+    className?: string;
+}): React.JSX.Element;
+export declare function Stepper({ value, min, max, onChange, disabled, }: {
+    value: number;
+    min?: number;
+    max?: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+}): React.JSX.Element;
+export declare function Toggle({ id, on, onChange, label, hint, disabled, }: {
+    id?: string;
+    on: boolean;
+    onChange?: (on: boolean) => void;
+    label?: string;
+    hint?: string;
+    disabled?: boolean;
+}): React.JSX.Element;
+export declare function SegmentedControl<T extends string>({ options, value, onChange, }: {
+    options: {
+        value: T;
+        label: string;
+    }[];
+    value: T;
+    onChange?: (value: T) => void;
+}): React.JSX.Element;
+/**
+ * The mobile search row.
+ *
+ * It had ZERO importers while four screens re-typed its markup by hand, which
+ * is the same story `Chip` told: nothing was wrong with the component, it was
+ * simply invisible, so each screen drew its own. The four had already drifted —
+ * two placeholder treatments (`--mb-text-muted` against `opacity-60`), two text
+ * sizes, and two paddings on a row that is the same row on every screen.
+ *
+ * `className` and `autoFocus` are here because that is what the four wanted:
+ * the margin above the row is the screen's business, and global search opens
+ * with the keyboard up.
+ */
+export declare function SearchField({ placeholder, value, onChange, trailing, className, autoFocus, size, }: {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    trailing?: React.ReactNode;
+    className?: string;
+    autoFocus?: boolean;
+    size?: 'md' | 'sm';
+}): React.JSX.Element;

package/dist/mobile/primitives/inputs.js

@@ -0,0 +1,292 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Minus, Plus, Search } from "lucide-react";
+function TextField({
+  id,
+  label,
+  placeholder,
+  value,
+  onChange,
+  multiline,
+  trailing,
+  disabled,
+  bare,
+  type = "text",
+  maxLength,
+  className = ""
+}) {
+  const generatedId = React.useId();
+  const controlId = id ?? generatedId;
+  const inputBase = "w-full bg-transparent text-lg [@media(pointer:coarse)]:text-base outline-none placeholder:text-[var(--mb-text-muted)] disabled:opacity-50";
+  if (bare) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: controlId,
+        type,
+        "aria-label": label,
+        maxLength,
+        className: `h-11 w-full rounded-2xl border px-3.5 text-md [@media(pointer:coarse)]:text-base outline-none placeholder:text-[var(--mb-text-muted)] disabled:opacity-50 ${className}`,
+        placeholder,
+        value,
+        disabled,
+        onChange: (e) => onChange?.(e.target.value),
+        style: {
+          borderColor: "var(--mb-border)",
+          background: "var(--mb-canvas)",
+          color: "var(--mb-text)"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded-2xl border p-4 ${className}`,
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: controlId,
+            className: "mb-1.5 text-2xs font-medium",
+            style: { color: "var(--mb-text-tertiary)" },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          multiline ? /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: controlId,
+              maxLength,
+              className: `${inputBase} min-h-[80px] resize-none`,
+              placeholder,
+              value,
+              disabled,
+              onChange: (e) => onChange?.(e.target.value),
+              style: { color: "var(--mb-text)" }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: controlId,
+              type,
+              maxLength,
+              className: inputBase,
+              placeholder,
+              value,
+              disabled,
+              onChange: (e) => onChange?.(e.target.value),
+              style: { color: "var(--mb-text)" }
+            }
+          ),
+          trailing && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: trailing })
+        ] })
+      ]
+    }
+  );
+}
+function Stepper({
+  value,
+  min = 0,
+  max,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-1 rounded-full border",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "flex h-11 w-11 items-center justify-center rounded-full",
+            style: { color: "var(--mb-text-secondary)" },
+            disabled: disabled || value <= min,
+            onClick: () => onChange?.(value - 1),
+            "aria-label": "Decrease",
+            children: /* @__PURE__ */ jsx(Minus, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "w-8 text-center text-md font-semibold tabular-nums",
+            style: { color: "var(--mb-text)" },
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "flex h-11 w-11 items-center justify-center rounded-full",
+            style: { color: "var(--mb-text-secondary)" },
+            disabled: disabled || max !== void 0 && value >= max,
+            onClick: () => onChange?.(value + 1),
+            "aria-label": "Increase",
+            children: /* @__PURE__ */ jsx(Plus, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function Toggle({
+  id,
+  on,
+  onChange,
+  label,
+  hint,
+  disabled
+}) {
+  const generatedId = React.useId();
+  const controlId = id ?? generatedId;
+  const labelId = label ? `${controlId}-label` : void 0;
+  const hintId = hint ? `${controlId}-hint` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+    (label || hint) && /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          id: labelId,
+          htmlFor: controlId,
+          className: "block text-md font-medium",
+          style: { color: "var(--mb-text)" },
+          children: label
+        }
+      ),
+      hint && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: hintId,
+          className: "mt-0.5 text-xs",
+          style: { color: "var(--mb-text-tertiary)" },
+          children: hint
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: controlId,
+        type: "button",
+        role: "switch",
+        "aria-checked": on,
+        "aria-labelledby": labelId,
+        "aria-describedby": hintId,
+        "aria-label": label ? void 0 : "Toggle",
+        disabled,
+        className: "relative h-11 w-[50px] shrink-0",
+        style: {
+          opacity: disabled ? 0.4 : 1
+        },
+        onClick: () => onChange?.(!on),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute inset-x-0 top-1/2 h-[30px] -translate-y-1/2 rounded-full transition-colors",
+              style: {
+                background: on ? "var(--mb-accent)" : "var(--mb-elevated)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute left-0.5 top-1/2 h-[26px] w-[26px] -translate-y-1/2 rounded-full shadow-sm transition-transform",
+              style: {
+                background: "var(--mb-accent-fg)",
+                transform: on ? "translate(20px, -50%)" : "translate(0, -50%)"
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SegmentedControl({
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex rounded-2xl p-0.5",
+      style: { background: "var(--mb-elevated)" },
+      children: options.map((opt) => {
+        const isActive = opt.value === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "flex-1 rounded-xl py-2 text-sm font-medium transition-colors",
+            style: {
+              background: isActive ? "var(--mb-surface)" : "transparent",
+              color: isActive ? "var(--mb-text)" : "var(--mb-text-tertiary)"
+            },
+            onClick: () => onChange?.(opt.value),
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+function SearchField({
+  placeholder = "Search\u2026",
+  value,
+  onChange,
+  trailing,
+  className = "",
+  autoFocus,
+  size = "md"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-center gap-2 border ${size === "sm" ? "h-[33px] rounded-xl px-3" : "h-[44px] rounded-2xl px-3.5"} ${className}`,
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsx(
+          Search,
+          {
+            className: "size-4 shrink-0",
+            style: { color: "var(--mb-text-tertiary)" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "search",
+            inputMode: "search",
+            autoFocus,
+            placeholder,
+            value,
+            onChange: (e) => onChange?.(e.target.value),
+            className: "min-w-0 flex-1 bg-transparent text-sm [@media(pointer:coarse)]:text-base outline-none placeholder:text-[var(--mb-text-muted)]",
+            style: { color: "var(--mb-text)" }
+          }
+        ),
+        trailing && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: trailing })
+      ]
+    }
+  );
+}
+export {
+  SearchField,
+  SegmentedControl,
+  Stepper,
+  TextField,
+  Toggle
+};
+//# sourceMappingURL=inputs.js.map

package/dist/mobile/primitives/inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/inputs.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile Primitives — Inputs layer\n *\n * TextField, Stepper, Toggle, SegmentedControl, SearchField\n *\n * All inputs share token-driven focus and disabled states.\n * Minimum tap target 44×44 (iOS HIG).\n */\n\nimport React from 'react';\nimport { Minus, Plus, Search } from 'lucide-react';\n\n// ─────────────────────────────────────────────────────────────\n// TextField\n// Single-line or multiline text input.\n// ─────────────────────────────────────────────────────────────\n\n/**\n * `bare` is the same field without the card around it.\n *\n * A form of eight stacked fields does not want eight cards — the address sheet\n * on the customer record is one panel with eight rows in it, and wrapping each\n * row in its own surface would make the sheet read as eight separate things.\n * So that sheet declared a local `field` string and a local `fieldStyle`\n * object and drew eight raw inputs against them, which is the same private\n * copy this file exists to prevent, just kept tidily in one place.\n *\n * Bare renders the border on the INPUT rather than on a wrapper, at the 44px\n * tap target the rest of this file holds to. `bare` matches Checkbox's prop of\n * the same name: the control is unchanged, only the chrome around it is gone.\n */\nexport function TextField({\n  id,\n  label,\n  placeholder,\n  value,\n  onChange,\n  multiline,\n  trailing,\n  disabled,\n  bare,\n  type = 'text',\n  maxLength,\n  className = '',\n}: {\n  id?: string;\n  label?: string;\n  placeholder?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  multiline?: boolean;\n  trailing?: React.ReactNode;\n  disabled?: boolean;\n  bare?: boolean;\n  type?: string;\n  maxLength?: number;\n  className?: string;\n}) {\n  const generatedId = React.useId();\n  const controlId = id ?? generatedId;\n  // 16px on a touch device or iOS Safari zooms the page in on focus and never\n  // zooms back out. Same floor `Input` carries; see `touchFieldType` there.\n  const inputBase =\n    'w-full bg-transparent text-lg [@media(pointer:coarse)]:text-base outline-none placeholder:text-[var(--mb-text-muted)] disabled:opacity-50';\n\n  if (bare) {\n    return (\n      <input\n        id={controlId}\n        type={type}\n        aria-label={label}\n        maxLength={maxLength}\n        className={`h-11 w-full rounded-2xl border px-3.5 text-md [@media(pointer:coarse)]:text-base outline-none placeholder:text-[var(--mb-text-muted)] disabled:opacity-50 ${className}`}\n        placeholder={placeholder}\n        value={value}\n        disabled={disabled}\n        onChange={(e) => onChange?.(e.target.value)}\n        style={{\n          borderColor: 'var(--mb-border)',\n          background: 'var(--mb-canvas)',\n          color: 'var(--mb-text)',\n        }}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={`rounded-2xl border p-4 ${className}`}\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      {label && (\n        <label\n          htmlFor={controlId}\n          className=\"mb-1.5 text-2xs font-medium\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          {label}\n        </label>\n      )}\n      <div className=\"flex items-center gap-2\">\n        {multiline ? (\n          <textarea\n            id={controlId}\n            maxLength={maxLength}\n            className={`${inputBase} min-h-[80px] resize-none`}\n            placeholder={placeholder}\n            value={value}\n            disabled={disabled}\n            onChange={(e) => onChange?.(e.target.value)}\n            style={{ color: 'var(--mb-text)' }}\n          />\n        ) : (\n          <input\n            id={controlId}\n            type={type}\n            maxLength={maxLength}\n            className={inputBase}\n            placeholder={placeholder}\n            value={value}\n            disabled={disabled}\n            onChange={(e) => onChange?.(e.target.value)}\n            style={{ color: 'var(--mb-text)' }}\n          />\n        )}\n        {trailing && <div className=\"shrink-0\">{trailing}</div>}\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Stepper\n// Increment / decrement control for numeric quantities.\n// ─────────────────────────────────────────────────────────────\n\nexport function Stepper({\n  value,\n  min = 0,\n  max,\n  onChange,\n  disabled,\n}: {\n  value: number;\n  min?: number;\n  max?: number;\n  onChange?: (value: number) => void;\n  disabled?: boolean;\n}) {\n  return (\n    <div\n      className=\"flex items-center gap-1 rounded-full border\"\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      <button\n        type=\"button\"\n        className=\"flex h-11 w-11 items-center justify-center rounded-full\"\n        style={{ color: 'var(--mb-text-secondary)' }}\n        disabled={disabled || value <= min}\n        onClick={() => onChange?.(value - 1)}\n        aria-label=\"Decrease\"\n      >\n        <Minus />\n      </button>\n      <span\n        className=\"w-8 text-center text-md font-semibold tabular-nums\"\n        style={{ color: 'var(--mb-text)' }}\n      >\n        {value}\n      </span>\n      <button\n        type=\"button\"\n        className=\"flex h-11 w-11 items-center justify-center rounded-full\"\n        style={{ color: 'var(--mb-text-secondary)' }}\n        disabled={disabled || (max !== undefined && value >= max)}\n        onClick={() => onChange?.(value + 1)}\n        aria-label=\"Increase\"\n      >\n        <Plus />\n      </button>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Toggle\n// iOS-style on/off switch.\n// ─────────────────────────────────────────────────────────────\n\nexport function Toggle({\n  id,\n  on,\n  onChange,\n  label,\n  hint,\n  disabled,\n}: {\n  id?: string;\n  on: boolean;\n  onChange?: (on: boolean) => void;\n  label?: string;\n  hint?: string;\n  disabled?: boolean;\n}) {\n  const generatedId = React.useId();\n  const controlId = id ?? generatedId;\n  const labelId = label ? `${controlId}-label` : undefined;\n  const hintId = hint ? `${controlId}-hint` : undefined;\n\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      {(label || hint) && (\n        <div className=\"min-w-0 flex-1\">\n          {label && (\n            <label\n              id={labelId}\n              htmlFor={controlId}\n              className=\"block text-md font-medium\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {label}\n            </label>\n          )}\n          {hint && (\n            <p\n              id={hintId}\n              className=\"mt-0.5 text-xs\"\n              style={{ color: 'var(--mb-text-tertiary)' }}\n            >\n              {hint}\n            </p>\n          )}\n        </div>\n      )}\n      <button\n        id={controlId}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={on}\n        aria-labelledby={labelId}\n        aria-describedby={hintId}\n        aria-label={label ? undefined : 'Toggle'}\n        disabled={disabled}\n        className=\"relative h-11 w-[50px] shrink-0\"\n        style={{\n          opacity: disabled ? 0.4 : 1,\n        }}\n        onClick={() => onChange?.(!on)}\n      >\n        <span\n          className=\"absolute inset-x-0 top-1/2 h-[30px] -translate-y-1/2 rounded-full transition-colors\"\n          style={{\n            background: on ? 'var(--mb-accent)' : 'var(--mb-elevated)',\n          }}\n        />\n        <span\n          className=\"absolute left-0.5 top-1/2 h-[26px] w-[26px] -translate-y-1/2 rounded-full shadow-sm transition-transform\"\n          style={{\n            background: 'var(--mb-accent-fg)',\n            transform: on ? 'translate(20px, -50%)' : 'translate(0, -50%)',\n          }}\n        />\n      </button>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// SegmentedControl\n// Pill-style tab switcher (2–5 options).\n// ─────────────────────────────────────────────────────────────\n\nexport function SegmentedControl<T extends string>({\n  options,\n  value,\n  onChange,\n}: {\n  options: { value: T; label: string }[];\n  value: T;\n  onChange?: (value: T) => void;\n}) {\n  return (\n    <div\n      className=\"flex rounded-2xl p-0.5\"\n      style={{ background: 'var(--mb-elevated)' }}\n    >\n      {options.map((opt) => {\n        const isActive = opt.value === value;\n        return (\n          <button\n            type=\"button\"\n            key={opt.value}\n            className=\"flex-1 rounded-xl py-2 text-sm font-medium transition-colors\"\n            style={{\n              background: isActive ? 'var(--mb-surface)' : 'transparent',\n              color: isActive ? 'var(--mb-text)' : 'var(--mb-text-tertiary)',\n            }}\n            onClick={() => onChange?.(opt.value)}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// SearchField\n// Search input with leading icon and optional trailing slot.\n// ─────────────────────────────────────────────────────────────\n\n/**\n * The mobile search row.\n *\n * It had ZERO importers while four screens re-typed its markup by hand, which\n * is the same story `Chip` told: nothing was wrong with the component, it was\n * simply invisible, so each screen drew its own. The four had already drifted —\n * two placeholder treatments (`--mb-text-muted` against `opacity-60`), two text\n * sizes, and two paddings on a row that is the same row on every screen.\n *\n * `className` and `autoFocus` are here because that is what the four wanted:\n * the margin above the row is the screen's business, and global search opens\n * with the keyboard up.\n */\nexport function SearchField({\n  placeholder = 'Search…',\n  value,\n  onChange,\n  trailing,\n  className = '',\n  autoFocus,\n  size = 'md',\n}: {\n  placeholder?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  trailing?: React.ReactNode;\n  className?: string;\n  autoFocus?: boolean;\n  size?: 'md' | 'sm';\n}) {\n  return (\n    <div\n      className={`flex items-center gap-2 border ${\n        size === 'sm'\n          ? 'h-[33px] rounded-xl px-3'\n          : 'h-[44px] rounded-2xl px-3.5'\n      } ${className}`}\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      <Search\n        className=\"size-4 shrink-0\"\n        style={{ color: 'var(--mb-text-tertiary)' }}\n      />\n      <input\n        type=\"search\"\n        inputMode=\"search\"\n        autoFocus={autoFocus}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e) => onChange?.(e.target.value)}\n        className=\"min-w-0 flex-1 bg-transparent text-sm [@media(pointer:coarse)]:text-base outline-none placeholder:text-[var(--mb-text-muted)]\"\n        style={{ color: 'var(--mb-text)' }}\n      />\n      {trailing && <div className=\"shrink-0\">{trailing}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/primitives/intent-switcher.d.ts

@@ -0,0 +1,27 @@
+/**
+ * IntentSwitcher
+ *
+ * Horizontal pill row letting a multi-intent merchant change the active intent
+ * scope on screens like Manage and Catalog. In single-intent mode it renders
+ * nothing.
+ *
+ * Leads with "All", which is the honest default: a business that seats guests,
+ * does takeaway and sells sauce has one order queue, and narrowing to one
+ * archetype is a choice the merchant makes, not the state they land in. Without
+ * it there was no way back to the whole picture once a pill was pressed.
+ *
+ * Pairs with `useActiveIntent()` from `@withpotter/lib/intents/use-active-intent`.
+ */
+import React from 'react';
+import type { IntentConfig } from '@withpotter/lib/intents/types';
+export interface IntentSwitcherProps {
+    intents: IntentConfig[];
+    /** The narrowed archetype, or null when the view spans all of them. */
+    activeKey: string | null;
+    onChange: (key: string) => void;
+    /** Clears the narrowing. Omit to hide the All pill. */
+    onShowAll?: () => void;
+    /** Hide the row entirely if only one intent is provided. Default true. */
+    hideWhenSingle?: boolean;
+}
+export declare function IntentSwitcher({ intents, activeKey, onChange, onShowAll, hideWhenSingle, }: IntentSwitcherProps): React.JSX.Element | null;

package/dist/mobile/primitives/intent-switcher.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { resolveIcon } from "@withpotter/lib/intents/icon-map";
+function IntentSwitcher({
+  intents,
+  activeKey,
+  onChange,
+  onShowAll,
+  hideWhenSingle = true
+}) {
+  if (hideWhenSingle && intents.length <= 1) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex gap-2 overflow-x-auto pb-1",
+      style: {
+        scrollbarWidth: "none",
+        WebkitOverflowScrolling: "touch",
+        marginLeft: "-4px",
+        marginRight: "-4px",
+        paddingLeft: "4px",
+        paddingRight: "4px"
+      },
+      role: "tablist",
+      "aria-label": "Active intent",
+      children: [
+        onShowAll ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": activeKey === null,
+            onClick: onShowAll,
+            className: "inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-[background-color,color,transform] duration-[var(--motion-fast)] ease-out active:scale-[var(--motion-press-scale)]",
+            style: {
+              background: activeKey === null ? "var(--mb-accent)" : "var(--mb-surface)",
+              color: activeKey === null ? "#fff" : "var(--mb-text-secondary)",
+              border: activeKey === null ? "1px solid transparent" : "1px solid var(--mb-border)"
+            },
+            children: "All"
+          }
+        ) : null,
+        intents.map((intent) => {
+          const Icon = resolveIcon(intent.icon);
+          const active = intent.key === activeKey;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": active,
+              onClick: () => onChange(intent.key),
+              className: "inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-[background-color,color,transform] duration-[var(--motion-fast)] ease-out active:scale-[var(--motion-press-scale)]",
+              style: {
+                background: active ? "var(--mb-accent)" : "var(--mb-surface)",
+                color: active ? "#fff" : "var(--mb-text-secondary)",
+                border: active ? "1px solid transparent" : "1px solid var(--mb-border)"
+              },
+              children: [
+                Icon ? /* @__PURE__ */ jsx(Icon, { size: 14, strokeWidth: 2.2 }) : null,
+                intent.label
+              ]
+            },
+            intent.key
+          );
+        })
+      ]
+    }
+  );
+}
+export {
+  IntentSwitcher
+};
+//# sourceMappingURL=intent-switcher.js.map

package/dist/mobile/primitives/intent-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/intent-switcher.tsx"],"sourcesContent":["'use client';\n\n/**\n * IntentSwitcher\n *\n * Horizontal pill row letting a multi-intent merchant change the active intent\n * scope on screens like Manage and Catalog. In single-intent mode it renders\n * nothing.\n *\n * Leads with \"All\", which is the honest default: a business that seats guests,\n * does takeaway and sells sauce has one order queue, and narrowing to one\n * archetype is a choice the merchant makes, not the state they land in. Without\n * it there was no way back to the whole picture once a pill was pressed.\n *\n * Pairs with `useActiveIntent()` from `@withpotter/lib/intents/use-active-intent`.\n */\n\nimport React from 'react';\nimport { resolveIcon } from '@withpotter/lib/intents/icon-map';\nimport type { IntentConfig } from '@withpotter/lib/intents/types';\n\nexport interface IntentSwitcherProps {\n  intents: IntentConfig[];\n  /** The narrowed archetype, or null when the view spans all of them. */\n  activeKey: string | null;\n  onChange: (key: string) => void;\n  /** Clears the narrowing. Omit to hide the All pill. */\n  onShowAll?: () => void;\n  /** Hide the row entirely if only one intent is provided. Default true. */\n  hideWhenSingle?: boolean;\n}\n\nexport function IntentSwitcher({\n  intents,\n  activeKey,\n  onChange,\n  onShowAll,\n  hideWhenSingle = true,\n}: IntentSwitcherProps) {\n  if (hideWhenSingle && intents.length <= 1) return null;\n\n  return (\n    <div\n      className=\"flex gap-2 overflow-x-auto pb-1\"\n      style={{\n        scrollbarWidth: 'none',\n        WebkitOverflowScrolling: 'touch',\n        marginLeft: '-4px',\n        marginRight: '-4px',\n        paddingLeft: '4px',\n        paddingRight: '4px',\n      }}\n      role=\"tablist\"\n      aria-label=\"Active intent\"\n    >\n      {onShowAll ? (\n        <button\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={activeKey === null}\n          onClick={onShowAll}\n          className=\"inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-[background-color,color,transform] duration-[var(--motion-fast)] ease-out active:scale-[var(--motion-press-scale)]\"\n          style={{\n            background:\n              activeKey === null ? 'var(--mb-accent)' : 'var(--mb-surface)',\n            color: activeKey === null ? '#fff' : 'var(--mb-text-secondary)',\n            border:\n              activeKey === null\n                ? '1px solid transparent'\n                : '1px solid var(--mb-border)',\n          }}\n        >\n          All\n        </button>\n      ) : null}\n      {intents.map((intent) => {\n        const Icon = resolveIcon(intent.icon);\n        const active = intent.key === activeKey;\n        return (\n          <button\n            key={intent.key}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={active}\n            onClick={() => onChange(intent.key)}\n            className=\"inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-[background-color,color,transform] duration-[var(--motion-fast)] ease-out active:scale-[var(--motion-press-scale)]\"\n            style={{\n              background: active ? 'var(--mb-accent)' : 'var(--mb-surface)',\n              color: active ? '#fff' : 'var(--mb-text-secondary)',\n              border: active\n                ? '1px solid transparent'\n                : '1px solid var(--mb-border)',\n            }}\n          >\n            {Icon ? <Icon size={14} strokeWidth={2.2} /> : null}\n            {intent.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAwDQ,cAuBE,YAvBF;AAtCR,SAAS,mBAAmB;AAcrB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,GAAwB;AACtB,MAAI,kBAAkB,QAAQ,UAAU,EAAG,QAAO;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,gBAAgB;AAAA,QAChB,yBAAyB;AAAA,QACzB,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,aAAa;AAAA,QACb,cAAc;AAAA,MAChB;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MAEV;AAAA,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAe,cAAc;AAAA,YAC7B,SAAS;AAAA,YACT,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YACE,cAAc,OAAO,qBAAqB;AAAA,cAC5C,OAAO,cAAc,OAAO,SAAS;AAAA,cACrC,QACE,cAAc,OACV,0BACA;AAAA,YACR;AAAA,YACD;AAAA;AAAA,QAED,IACE;AAAA,QACH,QAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,OAAO,YAAY,OAAO,IAAI;AACpC,gBAAM,SAAS,OAAO,QAAQ;AAC9B,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,iBAAe;AAAA,cACf,SAAS,MAAM,SAAS,OAAO,GAAG;AAAA,cAClC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,YAAY,SAAS,qBAAqB;AAAA,gBAC1C,OAAO,SAAS,SAAS;AAAA,gBACzB,QAAQ,SACJ,0BACA;AAAA,cACN;AAAA,cAEC;AAAA,uBAAO,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,IAAK;AAAA,gBAC9C,OAAO;AAAA;AAAA;AAAA,YAfH,OAAO;AAAA,UAgBd;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/mobile/primitives/layout.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Mobile Primitives — Layout layer
+ *
+ * Section, Caption, SectionHeader, Sheet, EmptyState
+ */
+import React from 'react';
+export declare function Caption({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function Section({ eyebrow, children, className, }: {
+    eyebrow?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export declare function SectionHeader({ title, trailing, }: {
+    title: string;
+    trailing?: React.ReactNode;
+}): React.JSX.Element;
+export declare function Sheet({ title, subtitle, onDismiss, children, }: {
+    title?: string;
+    subtitle?: string;
+    onDismiss?: () => void;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function EmptyState({ icon: Icon, title, body, action, }: {
+    icon?: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    title: string;
+    body?: string;
+    action?: React.ReactNode;
+}): React.JSX.Element;