@seekalfred/primitives 0.7.4 → 0.8.0

package/dist/empty-state/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/empty-state/empty-state.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * EmptyState: what a list shows when it has nothing to show. An icon in a\n * circle, a short title, a one- or two-line description and an optional next\n * step, centred on the page surface with room to breathe.\n *\n * Presentational, so there is no React Aria base. It exists because every\n * list has an empty case, and without a shared component each screen picks its\n * own padding, border and alignment, so \"nothing here\" looks different on\n * every page.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\nexport const emptyStateVariants = cva([\n  \"flex flex-col items-center px-5 py-12 text-center\",\n  // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n  // Its own text colour too, so it reads the same on any page background.\n  \"box-border font-sans text-foreground\",\n]);\n\nexport const emptyStateTitleVariants = cva(\n  \"m-0 mt-5 text-base leading-(--leading-normal) font-medium text-foreground\",\n);\n\nexport const emptyStateTextVariants = cva(\n  \"mx-auto mt-0 mb-0 max-w-72 text-sm leading-(--leading-normal) text-pretty text-text-secondary\",\n);\n\nexport const emptyStateActionVariants = cva(\"mt-5 flex flex-wrap justify-center gap-3\");\n\n/**\n * The illustration's frame. It centres what it is given and keeps an image or\n * SVG inside the box at its own aspect ratio; the illustration's SIZE is the\n * caller's, because the artwork sets it, not the empty state.\n */\nexport const emptyStateImageVariants = cva(\n  \"flex max-w-full justify-center [&>img]:h-auto [&>img]:max-w-full [&>svg]:h-auto [&>svg]:max-w-full\",\n);\n\n/**\n * An empty list's message.\n *\n * @example\n * <EmptyState\n *   icon={<Folder aria-hidden=\"true\" />}\n *   title=\"No saved views\"\n *   description=\"Save a set of filters as a view to come back to it later.\"\n *   action={<Button>Create view</Button>}\n * />\n */\nexport interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /**\n   * A short heading above the description. When it is set, `description` (or\n   * `children`) is the supporting text under it.\n   */\n  title?: ReactNode;\n  /** One or two lines of supporting text. `children` is the same slot and works the same way. */\n  description?: ReactNode;\n  /** Why the list is empty, in one short statement. The message when there is no `description`. */\n  children?: ReactNode;\n  /**\n   * A glyph above the message, inside a circle. It settles in once when the state first appears\n   * (small and transparent to rest over 480ms); a different icon component later\n   * swaps in place, and the same one re-rendering stays still. Mark it `aria-hidden`.\n   */\n  icon?: ReactNode;\n  /**\n   * An illustration above the icon and the title: an `<img>`, an inline SVG or any\n   * element. It is the caller's artwork, so the empty state does not hide it from\n   * assistive technology, and the caller names it:\n   * - an `<img>` takes an `alt`, or `alt=\"\"` when it only decorates what the title\n   *   already says;\n   * - an inline `<svg>` has no name of its own, so give it `role=\"img\"` and an\n   *   `aria-label`, or `aria-hidden=\"true\"` when it is decorative.\n   *\n   * The slot reserves no space, so give the artwork its intrinsic size (`width` and\n   * `height` on an `<img>` or `<svg>`): without it the layout jumps when an image\n   * loads. Omitted from the DOM when absent; `false` (as in `cond && <img />`)\n   * counts as absent.\n   */\n  image?: ReactNode;\n  /** A next step under the text: a button or a link. Omitted from the DOM when absent. */\n  action?: ReactNode;\n  /** Extra classes for the box. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** The name an icon swaps under: a different component swaps; the same one re-rendering does not. */\nfunction iconKey(icon: ReactNode) {\n  if (!isValidElement(icon)) return \"icon\";\n  const type = icon.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type.displayName ?? type.name ?? \"icon\");\n}\n\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { title, description, children, icon, image, action, className, ...props },\n  ref,\n) {\n  const frame = useRef<HTMLDivElement>(null);\n  const copy = useRef<HTMLDivElement>(null);\n  const message = description ?? children;\n  // `cond && <img />` hands over `false` when the condition fails: absent, not\n  // an empty slot with its spacing.\n  const hasImage = image != null && typeof image !== \"boolean\";\n  const text = (value: ReactNode) =>\n    typeof value === \"string\" ? (\n      <SwapText swapKey={value} className=\"block\">\n        {value}\n      </SwapText>\n    ) : (\n      value\n    );\n  // The copy column follows its height when the title or the message changes.\n  useHeightFollow(\n    frame,\n    copy,\n    `${typeof title === \"string\" ? title : \"\"}\\n${typeof message === \"string\" ? message : \"\"}`,\n  );\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"empty-state\"\n      className={cn(emptyStateVariants(), className)}\n    >\n      {!hasImage ? null : (\n        <div data-slot=\"empty-state-image\" className={emptyStateImageVariants()}>\n          {image}\n        </div>\n      )}\n      {icon === undefined || icon === null ? null : (\n        <div\n          data-slot=\"empty-state-icon\"\n          aria-hidden=\"true\"\n          className={cnAll(\n            \"grid size-12 place-items-center rounded-circle border-(length:--border-width) border-border bg-muted text-text-secondary motion-safe:animate-empty-state-icon [&_svg]:size-6\",\n            // Under an illustration it clears it by the same step as the title.\n            hasImage && \"mt-5\",\n          )}\n        >\n          <SwapText swapKey={iconKey(icon)} motion=\"glyph\" className=\"grid place-items-center\">\n            {icon}\n          </SwapText>\n        </div>\n      )}\n      <div ref={frame} data-slot=\"empty-state-copy\" className=\"height-follow w-full\">\n        <div ref={copy} className=\"flow-root\">\n          {title == null ? null : (\n            <h3 data-slot=\"empty-state-title\" className={emptyStateTitleVariants()}>\n              {text(title)}\n            </h3>\n          )}\n          {message == null ? null : (\n            <p\n              data-slot=\"empty-state-text\"\n              className={cnAll(\n                emptyStateTextVariants(),\n                // Under the title it sits close; straight under the icon or the\n                // illustration it clears it.\n                title != null ? \"mt-2\" : (icon != null || hasImage) && \"mt-5\",\n              )}\n            >\n              {text(message)}\n            </p>\n          )}\n        </div>\n      </div>\n      {action == null ? null : (\n        <div data-slot=\"empty-state-action\" className={emptyStateActionVariants()}>\n          {action}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,qBAAqB,IAAI,CACpC,qDAGA,sCACF,CAAC;AAED,MAAa,0BAA0B,IACrC,2EACF;AAEA,MAAa,yBAAyB,IACpC,+FACF;AAEA,MAAa,2BAA2B,IAAI,0CAA0C;;;;;;AAOtF,MAAa,0BAA0B,IACrC,oGACF;;AAmDA,SAAS,QAAQ,MAAiB;CAChC,IAAI,CAAC,eAAe,IAAI,GAAG,OAAO;CAClC,MAAM,OAAO,KAAK;CAClB,OAAO,OAAO,SAAS,WAAW,OAAQ,KAAK,eAAe,KAAK,QAAQ;AAC7E;AAEA,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,OAAO,aAAa,UAAU,MAAM,OAAO,QAAQ,WAAW,GAAG,SACnE,KACA;CACA,MAAM,QAAQ,OAAuB,IAAI;CACzC,MAAM,OAAO,OAAuB,IAAI;CACxC,MAAM,UAAU,eAAe;CAG/B,MAAM,WAAW,SAAS,QAAQ,OAAO,UAAU;CACnD,MAAM,QAAQ,UACZ,OAAO,UAAU,WACf,oBAAC,UAAD;EAAU,SAAS;EAAO,WAAU;EACjC,UAAA;CACO,CAAA,IAEV;CAGJ,gBACE,OACA,MACA,GAAG,OAAO,UAAU,WAAW,QAAQ,GAAG,IAAI,OAAO,YAAY,WAAW,UAAU,IACxF;CACA,OACE,qBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;EAJ/C,UAAA;GAMG,CAAC,WAAW,OACX,oBAAC,OAAD;IAAK,aAAU;IAAoB,WAAW,wBAAwB;IACnE,UAAA;GACE,CAAA;GAEN,SAAS,KAAA,KAAa,SAAS,OAAO,OACrC,oBAAC,OAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAW,MACT,gLAEA,YAAY,MACd;IAEA,UAAA,oBAAC,UAAD;KAAU,SAAS,QAAQ,IAAI;KAAG,QAAO;KAAQ,WAAU;KACxD,UAAA;IACO,CAAA;GACP,CAAA;GAEP,oBAAC,OAAD;IAAK,KAAK;IAAO,aAAU;IAAmB,WAAU;IACtD,UAAA,qBAAC,OAAD;KAAK,KAAK;KAAM,WAAU;KAA1B,UAAA,CACG,SAAS,OAAO,OACf,oBAAC,MAAD;MAAI,aAAU;MAAoB,WAAW,wBAAwB;MAClE,UAAA,KAAK,KAAK;KACT,CAAA,GAEL,WAAW,OAAO,OACjB,oBAAC,KAAD;MACE,aAAU;MACV,WAAW,MACT,uBAAuB,GAGvB,SAAS,OAAO,UAAU,QAAQ,QAAQ,aAAa,MACzD;MAEC,UAAA,KAAK,OAAO;KACZ,CAAA,CAEF;;GACF,CAAA;GACJ,UAAU,OAAO,OAChB,oBAAC,OAAD;IAAK,aAAU;IAAqB,WAAW,yBAAyB;IACrE,UAAA;GACE,CAAA;EAEJ;;AAET,CAAC"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/empty-state/empty-state.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * EmptyState: what a list shows when it has nothing to show. An icon in a\n * circle, a short title, a one- or two-line description and an optional next\n * step, centred on the page surface with room to breathe.\n *\n * Presentational, so there is no React Aria base. It exists because every\n * list has an empty case, and without a shared component each screen picks its\n * own padding, border and alignment, so \"nothing here\" looks different on\n * every page.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\nexport const emptyStateVariants = cva([\n  \"flex flex-col items-center px-5 py-12 text-center\",\n  // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n  // Its own text colour too, so it reads the same on any page background.\n  \"box-border font-sans text-foreground\",\n]);\n\nexport const emptyStateTitleVariants = cva(\n  \"m-0 mt-5 font-display text-base leading-(--leading-normal) font-medium text-foreground\",\n);\n\nexport const emptyStateTextVariants = cva(\n  \"mx-auto mt-0 mb-0 max-w-72 text-sm leading-(--leading-normal) text-pretty text-text-secondary\",\n);\n\nexport const emptyStateActionVariants = cva(\"mt-5 flex flex-wrap justify-center gap-3\");\n\n/**\n * The illustration's frame. It centres what it is given and keeps an image or\n * SVG inside the box at its own aspect ratio; the illustration's SIZE is the\n * caller's, because the artwork sets it, not the empty state.\n */\nexport const emptyStateImageVariants = cva(\n  \"flex max-w-full justify-center [&>img]:h-auto [&>img]:max-w-full [&>svg]:h-auto [&>svg]:max-w-full\",\n);\n\n/**\n * An empty list's message.\n *\n * @example\n * <EmptyState\n *   icon={<Folder aria-hidden=\"true\" />}\n *   title=\"No saved views\"\n *   description=\"Save a set of filters as a view to come back to it later.\"\n *   action={<Button>Create view</Button>}\n * />\n */\nexport interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /**\n   * A short heading above the description. When it is set, `description` (or\n   * `children`) is the supporting text under it.\n   */\n  title?: ReactNode;\n  /** One or two lines of supporting text. `children` is the same slot and works the same way. */\n  description?: ReactNode;\n  /** Why the list is empty, in one short statement. The message when there is no `description`. */\n  children?: ReactNode;\n  /**\n   * A glyph above the message, inside a circle. It settles in once when the state first appears\n   * (small and transparent to rest over 480ms); a different icon component later\n   * swaps in place, and the same one re-rendering stays still. Mark it `aria-hidden`.\n   */\n  icon?: ReactNode;\n  /**\n   * An illustration above the icon and the title: an `<img>`, an inline SVG or any\n   * element. It is the caller's artwork, so the empty state does not hide it from\n   * assistive technology, and the caller names it:\n   * - an `<img>` takes an `alt`, or `alt=\"\"` when it only decorates what the title\n   *   already says;\n   * - an inline `<svg>` has no name of its own, so give it `role=\"img\"` and an\n   *   `aria-label`, or `aria-hidden=\"true\"` when it is decorative.\n   *\n   * The slot reserves no space, so give the artwork its intrinsic size (`width` and\n   * `height` on an `<img>` or `<svg>`): without it the layout jumps when an image\n   * loads. Omitted from the DOM when absent; `false` (as in `cond && <img />`)\n   * counts as absent.\n   */\n  image?: ReactNode;\n  /** A next step under the text: a button or a link. Omitted from the DOM when absent. */\n  action?: ReactNode;\n  /**\n   * Draws the empty state as a block of its own. `dashed` gives it a dashed\n   * border, a rounded corner and the muted surface, for a placeholder where a\n   * chart or a panel will go. `none` is the bare box, as before.\n   *\n   * @default \"none\"\n   */\n  frame?: \"none\" | \"dashed\";\n  /**\n   * Where the content sits. `center` is the page-level empty state, as before.\n   * `start` aligns icon, text and action to the leading edge, for a block in a\n   * layout rather than a whole page; with it, and no icon or image, the title\n   * also drops its top margin.\n   *\n   * @default \"center\"\n   */\n  align?: \"center\" | \"start\";\n  /** Extra classes for the box. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** The name an icon swaps under: a different component swaps; the same one re-rendering does not. */\nfunction iconKey(icon: ReactNode) {\n  if (!isValidElement(icon)) return \"icon\";\n  const type = icon.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type.displayName ?? type.name ?? \"icon\");\n}\n\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { title, description, children, icon, image, action, frame: frameStyle = \"none\", align = \"center\", className, ...props },\n  ref,\n) {\n  const frame = useRef<HTMLDivElement>(null);\n  const copy = useRef<HTMLDivElement>(null);\n  const message = description ?? children;\n  // `cond && <img />` hands over `false` when the condition fails: absent, not\n  // an empty slot with its spacing.\n  const hasImage = image != null && typeof image !== \"boolean\";\n  const text = (value: ReactNode) =>\n    typeof value === \"string\" ? (\n      <SwapText swapKey={value} className=\"block\">\n        {value}\n      </SwapText>\n    ) : (\n      value\n    );\n  // The copy column follows its height when the title or the message changes.\n  useHeightFollow(\n    frame,\n    copy,\n    `${typeof title === \"string\" ? title : \"\"}\\n${typeof message === \"string\" ? message : \"\"}`,\n  );\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"empty-state\"\n      data-frame={frameStyle === \"none\" ? undefined : frameStyle}\n      data-align={align === \"center\" ? undefined : align}\n      className={cn(\n        cnAll(\n          emptyStateVariants(),\n          frameStyle === \"dashed\" &&\n            \"rounded-panel border-(length:--border-width) border-dashed border-border bg-muted\",\n          align === \"start\" && \"items-start text-start\",\n        ),\n        className,\n      )}\n    >\n      {!hasImage ? null : (\n        <div\n          data-slot=\"empty-state-image\"\n          className={cnAll(emptyStateImageVariants(), align === \"start\" && \"justify-start\")}\n        >\n          {image}\n        </div>\n      )}\n      {icon === undefined || icon === null ? null : (\n        <div\n          data-slot=\"empty-state-icon\"\n          aria-hidden=\"true\"\n          className={cnAll(\n            \"grid size-12 place-items-center rounded-circle border-(length:--border-width) border-border bg-muted text-text-secondary motion-safe:animate-empty-state-icon [&_svg]:size-6\",\n            // Under an illustration it clears it by the same step as the title.\n            hasImage && \"mt-5\",\n          )}\n        >\n          <SwapText swapKey={iconKey(icon)} motion=\"glyph\" className=\"grid place-items-center\">\n            {icon}\n          </SwapText>\n        </div>\n      )}\n      <div ref={frame} data-slot=\"empty-state-copy\" className=\"height-follow w-full\">\n        <div ref={copy} className=\"flow-root\">\n          {title == null ? null : (\n            <h3\n              data-slot=\"empty-state-title\"\n              className={cnAll(\n                emptyStateTitleVariants(),\n                // First thing in the box: nothing above it to clear.\n                align === \"start\" && icon == null && !hasImage && \"mt-0\",\n              )}\n            >\n              {text(title)}\n            </h3>\n          )}\n          {message == null ? null : (\n            <p\n              data-slot=\"empty-state-text\"\n              className={cnAll(\n                emptyStateTextVariants(),\n                align === \"start\" && \"mx-0\",\n                // Under the title it sits close; straight under the icon or the\n                // illustration it clears it.\n                title != null ? \"mt-2\" : (icon != null || hasImage) && \"mt-5\",\n              )}\n            >\n              {text(message)}\n            </p>\n          )}\n        </div>\n      </div>\n      {action == null ? null : (\n        <div\n          data-slot=\"empty-state-action\"\n          className={cnAll(emptyStateActionVariants(), align === \"start\" && \"justify-start\")}\n        >\n          {action}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,qBAAqB,IAAI,CACpC,qDAGA,sCACF,CAAC;AAED,MAAa,0BAA0B,IACrC,wFACF;AAEA,MAAa,yBAAyB,IACpC,+FACF;AAEA,MAAa,2BAA2B,IAAI,0CAA0C;;;;;;AAOtF,MAAa,0BAA0B,IACrC,oGACF;;AAoEA,SAAS,QAAQ,MAAiB;CAChC,IAAI,CAAC,eAAe,IAAI,GAAG,OAAO;CAClC,MAAM,OAAO,KAAK;CAClB,OAAO,OAAO,SAAS,WAAW,OAAQ,KAAK,eAAe,KAAK,QAAQ;AAC7E;AAEA,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,OAAO,aAAa,UAAU,MAAM,OAAO,QAAQ,OAAO,aAAa,QAAQ,QAAQ,UAAU,WAAW,GAAG,SACjH,KACA;CACA,MAAM,QAAQ,OAAuB,IAAI;CACzC,MAAM,OAAO,OAAuB,IAAI;CACxC,MAAM,UAAU,eAAe;CAG/B,MAAM,WAAW,SAAS,QAAQ,OAAO,UAAU;CACnD,MAAM,QAAQ,UACZ,OAAO,UAAU,WACf,oBAAC,UAAD;EAAU,SAAS;EAAO,WAAU;EACjC,UAAA;CACO,CAAA,IAEV;CAGJ,gBACE,OACA,MACA,GAAG,OAAO,UAAU,WAAW,QAAQ,GAAG,IAAI,OAAO,YAAY,WAAW,UAAU,IACxF;CACA,OACE,qBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,cAAY,eAAe,SAAS,KAAA,IAAY;EAChD,cAAY,UAAU,WAAW,KAAA,IAAY;EAC7C,WAAW,GACT,MACE,mBAAmB,GACnB,eAAe,YACb,qFACF,UAAU,WAAW,wBACvB,GACA,SACF;EAdF,UAAA;GAgBG,CAAC,WAAW,OACX,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,MAAM,wBAAwB,GAAG,UAAU,WAAW,eAAe;IAE/E,UAAA;GACE,CAAA;GAEN,SAAS,KAAA,KAAa,SAAS,OAAO,OACrC,oBAAC,OAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAW,MACT,gLAEA,YAAY,MACd;IAEA,UAAA,oBAAC,UAAD;KAAU,SAAS,QAAQ,IAAI;KAAG,QAAO;KAAQ,WAAU;KACxD,UAAA;IACO,CAAA;GACP,CAAA;GAEP,oBAAC,OAAD;IAAK,KAAK;IAAO,aAAU;IAAmB,WAAU;IACtD,UAAA,qBAAC,OAAD;KAAK,KAAK;KAAM,WAAU;KAA1B,UAAA,CACG,SAAS,OAAO,OACf,oBAAC,MAAD;MACE,aAAU;MACV,WAAW,MACT,wBAAwB,GAExB,UAAU,WAAW,QAAQ,QAAQ,CAAC,YAAY,MACpD;MAEC,UAAA,KAAK,KAAK;KACT,CAAA,GAEL,WAAW,OAAO,OACjB,oBAAC,KAAD;MACE,aAAU;MACV,WAAW,MACT,uBAAuB,GACvB,UAAU,WAAW,QAGrB,SAAS,OAAO,UAAU,QAAQ,QAAQ,aAAa,MACzD;MAEC,UAAA,KAAK,OAAO;KACZ,CAAA,CAEF;;GACF,CAAA;GACJ,UAAU,OAAO,OAChB,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,MAAM,yBAAyB,GAAG,UAAU,WAAW,eAAe;IAEhF,UAAA;GACE,CAAA;EAEJ;;AAET,CAAC"}

package/dist/index.d.ts

@@ -18,8 +18,10 @@ import { Calendar, CalendarProps, CalendarRange, CalendarRangeProps, calendarCel
 import { CardDecision, CardStack, CardStackProps } from "./card-stack/card-stack.js";
 import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
 import { Carousel, CarouselProps } from "./carousel/carousel.js";
-import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
+import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxCardVariants, checkboxVariants } from "./checkbox/checkbox.js";
 import { ChipAttrs, ChipGroup, ChipGroupProps, ChipOption } from "./chip-group/chip-group.js";
+import { CodeBlock, CodeBlockProps, codeBlockVariants } from "./code-block/code-block.js";
+import { CommandPalette, CommandPaletteItem, CommandPaletteProps, CommandPaletteShortcutOptions, commandPaletteListVariants, commandPaletteOptionVariants, matchesCommandPaletteShortcut, useCommandPaletteShortcut } from "./command-palette/command-palette.js";
 import { ConfirmMorph, ConfirmMorphMode, ConfirmMorphProps, ConfirmMorphState } from "./confirm-morph/confirm-morph.js";
 import { CopyButton, CopyButtonProps } from "./copy-button/copy-button.js";
 import { Countdown, CountdownProps, CountdownUnit } from "./countdown/countdown.js";
@@ -35,6 +37,8 @@ import { FloatingButtonGroup, FloatingButtonGroupAction, FloatingButtonGroupItem
 import { Gauge, GaugeProps, GaugeThreshold, GaugeTone } from "./gauge/gauge.js";
 import { BellIcon, ChevronIcon, ChevronIconProps, CopyCheckIcon, HeartIcon, IconMorph, IconMorphIconProps, IconMorphName, IconMorphProps, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph/icon-morph.js";
 import { InViewTitle, InViewTitleProps, InViewTitleVariant } from "./in-view-title/in-view-title.js";
+import { Tooltip, TooltipProps, TooltipTrigger, TooltipTriggerProps, tooltipVariants } from "./tooltip/tooltip.js";
+import { InfoTooltip, InfoTooltipProps } from "./info-tooltip/info-tooltip.js";
 import { Input, InputProps, inputVariants } from "./input/input.js";
 import { Label, LabelProps, labelVariants } from "./label/label.js";
 import { cn, cnAll } from "./lib/cn.js";
@@ -81,7 +85,7 @@ import { Streamgraph, StreamgraphDatum, StreamgraphProps, StreamgraphSeries } fr
 import { SwipeAction, SwipeActions, SwipeActionsProps, SwipeActionsRow, SwipeActionsRowProps } from "./swipe-actions/swipe-actions.js";
 import "./swipe-actions/index.js";
 import { Switch, SwitchProps, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
-import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants } from "./table/table.js";
+import { Column, RowAttributes, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants } from "./table/table.js";
 import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, tabListVariants, tabPanelVariants, tabVariants, tabsVariants } from "./tabs/tabs.js";
 import { TextShimmer, TextShimmerProps } from "./text-shimmer/text-shimmer.js";
 import { TagInput, TagInputProps } from "./tag-input/tag-input.js";
@@ -91,8 +95,8 @@ import { Textarea, TextareaProps, textareaVariants } from "./textarea/textarea.j
 import { Theme, ThemeSwitch, ThemeSwitchProps, ThemeSwitchVariant } from "./theme-switch/theme-switch.js";
 import { TimePicker, TimePickerProps, timePickerItemVariants, timePickerListVariants } from "./time-picker/time-picker.js";
 import { ToastContent, ToastRegion, ToastRegionProps, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
-import { Tooltip, TooltipProps, TooltipTrigger, TooltipTriggerProps, tooltipVariants } from "./tooltip/tooltip.js";
+import { ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, toggleButtonGroupVariants, toggleButtonVariants } from "./toggle-button/toggle-button.js";
 import { Treemap, TreemapNode, TreemapProps } from "./treemap/treemap.js";
 import { UsageMeter, UsageMeterProps, UsageMeterSegment, UsageMeterStatus } from "./usage-meter/usage-meter.js";
 import { WaffleCategory, WaffleChart, WaffleChartProps } from "./waffle-chart/waffle-chart.js";
-export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, type ActivityDay, type ActivityDayDetail, ActivityHeatmap, type ActivityHeatmapProps, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, InfoGlyph as AlertInfoIcon, type AlertProps, type StatusIconProps as AlertStatusIconProps, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, type AnimatedCounterProps, type Announcement, type AnnouncementAction, AnnouncementBar, type AnnouncementBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDatum, type BarChartProps, type BarChartSeries, type BarChartSeriesDatum, type BarChartSeriesProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, BrushChart, type BrushChartAnnotation, type BrushChartDatum, type BrushChartProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, type CardDecision, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardStack, type CardStackProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, type ChipAttrs, ChipGroup, type ChipGroupProps, type ChipOption, type Column, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, Countdown, type CountdownProps, type CountdownUnit, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, DonutChart, type DonutChartCenter, type DonutChartDatum, type DonutChartProps, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, InViewTitle, type InViewTitleProps, type InViewTitleVariant, Input, type InputProps, LINE_CHART_DRAW_MS, Label, type LabelProps, LineChart, type LineChartBand, type LineChartDatum, type LineChartMarker, type LineChartProps, type LineChartReference, type LineChartSeries, type LineChartTone, type LineChartTooltipContext, type Mention, type MentionChannel, MentionInput, type MentionInputHandle, type MentionInputProps, type MentionKind, type MentionPerson, type MentionValue, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, MoneyInput, type MoneyInputDetails, type MoneyInputProps, type MoneyInputSize, MorphSelect, type MorphSelectGroup, type MorphSelectItem, type MorphSelectOption, type MorphSelectProps, MultiSelect, MultiSelectGroup, type MultiSelectGroupProps, type MultiSelectProps, NumberField, type NumberFieldProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, PHONE_COUNTRIES, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, type PhoneCountry, PhoneInput, type PhoneInputDetails, type PhoneInputProps, type PhoneStatus, type Platform, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, type PopoverHoverTriggerProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioGroupVariant, type RadioProps, type Reaction, type ReactionOption, Reactions, type ReactionsProps, Ridgeline, type RidgelineProps, type RidgelineSeries, type RowKey, SPARKLINE_DRAW_MS, ScrollArea, type ScrollAreaProps, ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type ShortcutBinding, ShortcutKbd, type ShortcutKbdProps, ShortcutKeys, type ShortcutKeysProps, ShortcutRecorder, type ShortcutRecorderProps, type ShortcutToken, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderMark, type SliderProps, type SliderValue, SlopeChart, type SlopeChartProps, type SlopeItem, Sparkline, type SparklineProps, type SparklineTone, Spinner, type SpinnerProps, SplitBar, type SplitBarProps, SplitButton, type SplitButtonAction, type SplitButtonProps, type SplitSegment, StatCard, type StatCardChangeTone, type StatCardProps, type StatCardTone, type StatCardTrend, Stepper, type StepperOrientation, type StepperProps, type StepperStatus, type StepperStep, Streamgraph, type StreamgraphDatum, type StreamgraphProps, type StreamgraphSeries, SunMoonIcon, type SwipeAction, SwipeActions, type SwipeActionsProps, SwipeActionsRow, type SwipeActionsRowProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, TagInput, type TagInputProps, TextMorph, type TextMorphProps, TextReveal, type TextRevealProps, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Treemap, type TreemapNode, type TreemapProps, UsageMeter, type UsageMeterProps, type UsageMeterSegment, type UsageMeterStatus, type WaffleCategory, WaffleChart, type WaffleChartProps, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSkeletonVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
+export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, type ActivityDay, type ActivityDayDetail, ActivityHeatmap, type ActivityHeatmapProps, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, InfoGlyph as AlertInfoIcon, type AlertProps, type StatusIconProps as AlertStatusIconProps, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, type AnimatedCounterProps, type Announcement, type AnnouncementAction, AnnouncementBar, type AnnouncementBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDatum, type BarChartProps, type BarChartSeries, type BarChartSeriesDatum, type BarChartSeriesProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, BrushChart, type BrushChartAnnotation, type BrushChartDatum, type BrushChartProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, type CardDecision, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardStack, type CardStackProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, type ChipAttrs, ChipGroup, type ChipGroupProps, type ChipOption, CodeBlock, type CodeBlockProps, type Column, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, type CommandPaletteShortcutOptions, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, Countdown, type CountdownProps, type CountdownUnit, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, DonutChart, type DonutChartCenter, type DonutChartDatum, type DonutChartProps, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, InViewTitle, type InViewTitleProps, type InViewTitleVariant, InfoTooltip, type InfoTooltipProps, Input, type InputProps, LINE_CHART_DRAW_MS, Label, type LabelProps, LineChart, type LineChartBand, type LineChartDatum, type LineChartMarker, type LineChartProps, type LineChartReference, type LineChartSeries, type LineChartTone, type LineChartTooltipContext, type Mention, type MentionChannel, MentionInput, type MentionInputHandle, type MentionInputProps, type MentionKind, type MentionPerson, type MentionValue, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, MoneyInput, type MoneyInputDetails, type MoneyInputProps, type MoneyInputSize, MorphSelect, type MorphSelectGroup, type MorphSelectItem, type MorphSelectOption, type MorphSelectProps, MultiSelect, MultiSelectGroup, type MultiSelectGroupProps, type MultiSelectProps, NumberField, type NumberFieldProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, PHONE_COUNTRIES, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, type PhoneCountry, PhoneInput, type PhoneInputDetails, type PhoneInputProps, type PhoneStatus, type Platform, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, type PopoverHoverTriggerProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioGroupVariant, type RadioProps, type Reaction, type ReactionOption, Reactions, type ReactionsProps, Ridgeline, type RidgelineProps, type RidgelineSeries, type RowAttributes, type RowKey, SPARKLINE_DRAW_MS, ScrollArea, type ScrollAreaProps, ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type ShortcutBinding, ShortcutKbd, type ShortcutKbdProps, ShortcutKeys, type ShortcutKeysProps, ShortcutRecorder, type ShortcutRecorderProps, type ShortcutToken, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderMark, type SliderProps, type SliderValue, SlopeChart, type SlopeChartProps, type SlopeItem, Sparkline, type SparklineProps, type SparklineTone, Spinner, type SpinnerProps, SplitBar, type SplitBarProps, SplitButton, type SplitButtonAction, type SplitButtonProps, type SplitSegment, StatCard, type StatCardChangeTone, type StatCardProps, type StatCardTone, type StatCardTrend, Stepper, type StepperOrientation, type StepperProps, type StepperStatus, type StepperStep, Streamgraph, type StreamgraphDatum, type StreamgraphProps, type StreamgraphSeries, SunMoonIcon, type SwipeAction, SwipeActions, type SwipeActionsProps, SwipeActionsRow, type SwipeActionsRowProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, TagInput, type TagInputProps, TextMorph, type TextMorphProps, TextReveal, type TextRevealProps, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Treemap, type TreemapNode, type TreemapProps, UsageMeter, type UsageMeterProps, type UsageMeterSegment, type UsageMeterStatus, type WaffleCategory, WaffleChart, type WaffleChartProps, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxCardVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, codeBlockVariants, commandPaletteListVariants, commandPaletteOptionVariants, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesCommandPaletteShortcut, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSkeletonVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, tooltipVariants, useCommandPaletteShortcut, usePlatform, usePressedKeys };

package/dist/index.js

@@ -20,10 +20,16 @@ import { Calendar, CalendarRange, calendarCellVariants, calendarClearVariants, c
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
 import { CardStack } from "./card-stack/card-stack.js";
 import { Carousel } from "./carousel/carousel.js";
-import { Checkbox, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
+import { Checkbox, checkboxBoxVariants, checkboxCardVariants, checkboxVariants } from "./checkbox/checkbox.js";
 import { ChipGroup } from "./chip-group/chip-group.js";
-import { ConfirmMorph } from "./confirm-morph/confirm-morph.js";
 import { CopyButton } from "./copy-button/copy-button.js";
+import { CodeBlock, codeBlockVariants } from "./code-block/code-block.js";
+import { Label, labelVariants } from "./label/label.js";
+import { Input, inputVariants } from "./input/input.js";
+import { formatShortcut, matchesShortcut, normalizeShortcut, shortcutFromEvent, shortcutTokens } from "./shortcut-recorder/shortcut-model.js";
+import { ShortcutKbd, ShortcutKeys, ShortcutRecorder, usePlatform, usePressedKeys } from "./shortcut-recorder/shortcut-recorder.js";
+import { CommandPalette, commandPaletteListVariants, commandPaletteOptionVariants, matchesCommandPaletteShortcut, useCommandPaletteShortcut } from "./command-palette/command-palette.js";
+import { ConfirmMorph } from "./confirm-morph/confirm-morph.js";
 import { Countdown } from "./countdown/countdown.js";
 import { Popover, PopoverHoverTrigger, PopoverTrigger, popoverVariants } from "./popover/popover.js";
 import { datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants } from "./date-picker/picker-parts.js";
@@ -39,8 +45,7 @@ import { FloatingButtonGroup } from "./floating-button-group/floating-button-gro
 import { Gauge } from "./gauge/gauge.js";
 import { BellIcon, ChevronIcon, CopyCheckIcon, HeartIcon, IconMorph, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph/icon-morph.js";
 import { InViewTitle } from "./in-view-title/in-view-title.js";
-import { Label, labelVariants } from "./label/label.js";
-import { Input, inputVariants } from "./input/input.js";
+import { InfoTooltip } from "./info-tooltip/info-tooltip.js";
 import { LINE_CHART_DRAW_MS, LineChart } from "./line-chart/line-chart.js";
 import { MentionInput, mentionText, serializeMentions } from "./mention-input/mention-input.js";
 import { Select, SelectItem, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
@@ -64,8 +69,6 @@ import { ScrubInput } from "./scrub-input/scrub-input.js";
 import { SearchField } from "./search-field/search-field.js";
 import { Separator, separatorVariants } from "./separator/separator.js";
 import { Sheet, sheetOverlayVariants, sheetPanelVariants } from "./sheet/sheet.js";
-import { formatShortcut, matchesShortcut, normalizeShortcut, shortcutFromEvent, shortcutTokens } from "./shortcut-recorder/shortcut-model.js";
-import { ShortcutKbd, ShortcutKeys, ShortcutRecorder, usePlatform, usePressedKeys } from "./shortcut-recorder/shortcut-recorder.js";
 import { SideNav, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants } from "./side-nav/side-nav.js";
 import { Skeleton, skeletonVariants } from "./skeleton/skeleton.js";
 import { Slider, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
@@ -79,7 +82,7 @@ import { Stepper } from "./stepper/stepper.js";
 import { Streamgraph } from "./streamgraph/streamgraph.js";
 import { SwipeActions, SwipeActionsRow } from "./swipe-actions/swipe-actions.js";
 import { Switch, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
-import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants } from "./table/table.js";
+import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants } from "./table/table.js";
 import { TextShimmer } from "./text-shimmer/text-shimmer.js";
 import { TagInput } from "./tag-input/tag-input.js";
 import { TextMorph } from "./text-morph/text-morph.js";
@@ -88,7 +91,8 @@ import { Textarea, textareaVariants } from "./textarea/textarea.js";
 import { ThemeSwitch } from "./theme-switch/theme-switch.js";
 import { TimePicker, timePickerItemVariants, timePickerListVariants } from "./time-picker/time-picker.js";
 import { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
+import { ToggleButton, ToggleButtonGroup, toggleButtonGroupVariants, toggleButtonVariants } from "./toggle-button/toggle-button.js";
 import { Treemap } from "./treemap/treemap.js";
 import { UsageMeter } from "./usage-meter/usage-meter.js";
 import { WaffleChart } from "./waffle-chart/waffle-chart.js";
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActionButton, ActivityHeatmap, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, InfoGlyph as AlertInfoIcon, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, AnnouncementBar, Avatar, Badge, BarChart, BellIcon, BreadcrumbItem, Breadcrumbs, BrushChart, Button, ButtonGroup, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardStack, CardTitle, Carousel, Checkbox, ChevronIcon, ChipGroup, ConfirmMorph, CopyButton, CopyCheckIcon, Countdown, DatePicker, DateRangePicker, Dialog, DialogFooter, DialogTrigger, DonutChart, EmptyState, ExpandingButtonGroup, FileDropZone, FilterBar, FloatingButtonGroup, Gauge, HeartIcon, IconMorph, InViewTitle, Input, LINE_CHART_DRAW_MS, Label, LineChart, MentionInput, Menu, MenuIcon, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, MorphSelect, MultiSelect, MultiSelectGroup, NumberField, OnboardingChecklist, PHONE_COUNTRIES, PageHeader, PasswordField, PasswordStrength, PhoneInput, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, PopoverTrigger, Progress, Radio, RadioGroup, Reactions, Ridgeline, SPARKLINE_DRAW_MS, ScrollArea, ScrubInput, SearchField, Select, SelectItem, Separator, Sheet, ShortcutKbd, ShortcutKeys, ShortcutRecorder, SideNav, Skeleton, Slider, SlopeChart, Sparkline, Spinner, SplitBar, SplitButton, StatCard, Stepper, Streamgraph, SunMoonIcon, SwipeActions, SwipeActionsRow, Switch, Tab, TabList, TabPanel, Table, Tabs, TagInput, TextMorph, TextReveal, TextShimmer, Textarea, ThemeSwitch, TimePicker, ToastRegion, Tooltip, TooltipTrigger, Treemap, UsageMeter, WaffleChart, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSkeletonVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActionButton, ActivityHeatmap, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, InfoGlyph as AlertInfoIcon, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, AnnouncementBar, Avatar, Badge, BarChart, BellIcon, BreadcrumbItem, Breadcrumbs, BrushChart, Button, ButtonGroup, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardStack, CardTitle, Carousel, Checkbox, ChevronIcon, ChipGroup, CodeBlock, CommandPalette, ConfirmMorph, CopyButton, CopyCheckIcon, Countdown, DatePicker, DateRangePicker, Dialog, DialogFooter, DialogTrigger, DonutChart, EmptyState, ExpandingButtonGroup, FileDropZone, FilterBar, FloatingButtonGroup, Gauge, HeartIcon, IconMorph, InViewTitle, InfoTooltip, Input, LINE_CHART_DRAW_MS, Label, LineChart, MentionInput, Menu, MenuIcon, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, MorphSelect, MultiSelect, MultiSelectGroup, NumberField, OnboardingChecklist, PHONE_COUNTRIES, PageHeader, PasswordField, PasswordStrength, PhoneInput, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, PopoverTrigger, Progress, Radio, RadioGroup, Reactions, Ridgeline, SPARKLINE_DRAW_MS, ScrollArea, ScrubInput, SearchField, Select, SelectItem, Separator, Sheet, ShortcutKbd, ShortcutKeys, ShortcutRecorder, SideNav, Skeleton, Slider, SlopeChart, Sparkline, Spinner, SplitBar, SplitButton, StatCard, Stepper, Streamgraph, SunMoonIcon, SwipeActions, SwipeActionsRow, Switch, Tab, TabList, TabPanel, Table, Tabs, TagInput, TextMorph, TextReveal, TextShimmer, Textarea, ThemeSwitch, TimePicker, ToastRegion, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, Treemap, UsageMeter, WaffleChart, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxCardVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, codeBlockVariants, commandPaletteListVariants, commandPaletteOptionVariants, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesCommandPaletteShortcut, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSkeletonVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, tooltipVariants, useCommandPaletteShortcut, usePlatform, usePressedKeys };

package/dist/info-tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import { InfoTooltip, InfoTooltipProps } from "./info-tooltip.js";
+export { InfoTooltip, type InfoTooltipProps };

package/dist/info-tooltip/index.js

@@ -0,0 +1,2 @@
+import { InfoTooltip } from "./info-tooltip.js";
+export { InfoTooltip };

package/dist/info-tooltip/info-tooltip.d.ts

@@ -0,0 +1,35 @@
+import { Button } from "../button/button.js";
+import { TooltipProps } from "../tooltip/tooltip.js";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/info-tooltip/info-tooltip.d.ts
+export interface InfoTooltipProps extends Omit<ComponentPropsWithoutRef<typeof Button>, "children" | "variant" | "size" | "aria-label" | "className" | "content"> {
+  /** The help text the tooltip shows. */
+  content: ReactNode;
+  /**
+   * The trigger's accessible name. Say what the help is about ("More about
+   * Visibility score"), not just that there is some: several triggers on one
+   * page otherwise read identically.
+   *
+   * @default "More information"
+   */
+  label?: string;
+  /** Where the tooltip opens. @default "top" */
+  placement?: TooltipProps["placement"];
+  /** Extra classes for the trigger button. Merged last, so they win conflicts. */
+  className?: string;
+  /** Extra classes for the tooltip bubble, e.g. a max width. Merged last. */
+  tooltipClassName?: string;
+}
+/**
+ * A small "i" button that explains something in a tooltip. A real, focusable
+ * button (the compact `icon-sm` Button, 24px so it is a legal target around a
+ * 14px glyph), so the help text is reachable from the keyboard as well as by
+ * hover; its name is `label`. Other button props (`id`, `data-testid`,
+ * `aria-describedby`, ...) are passed to the trigger.
+ *
+ * @example
+ * <InfoTooltip label="More about Visibility score" content="Share of answers that mention you." />
+ */
+export declare const InfoTooltip: import("react").ForwardRefExoticComponent<InfoTooltipProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+//# sourceMappingURL=info-tooltip.d.ts.map

package/dist/info-tooltip/info-tooltip.js

@@ -0,0 +1,49 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../button/button.js";
+import { Tooltip, TooltipTrigger } from "../tooltip/tooltip.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/info-tooltip/info-tooltip.tsx
+/**
+* A small "i" button that explains something in a tooltip. A real, focusable
+* button (the compact `icon-sm` Button, 24px so it is a legal target around a
+* 14px glyph), so the help text is reachable from the keyboard as well as by
+* hover; its name is `label`. Other button props (`id`, `data-testid`,
+* `aria-describedby`, ...) are passed to the trigger.
+*
+* @example
+* <InfoTooltip label="More about Visibility score" content="Share of answers that mention you." />
+*/
+const InfoTooltip = forwardRef(function InfoTooltip({ content, label = "More information", placement = "top", className, tooltipClassName, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(Button, {
+		...props,
+		ref,
+		variant: "ghost",
+		size: "icon-sm",
+		"aria-label": label,
+		className: cn("rounded-full text-muted-foreground", className),
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9.5"
+			}), /* @__PURE__ */ jsx("path", { d: "M12 11v5.5M12 7.5h.01" })]
+		})
+	}), /* @__PURE__ */ jsx(Tooltip, {
+		placement,
+		className: cn("max-w-80", tooltipClassName),
+		children: content
+	})] });
+});
+//#endregion
+export { InfoTooltip };
+
+//# sourceMappingURL=info-tooltip.js.map

package/dist/info-tooltip/info-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../src/info-tooltip/info-tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { Tooltip, TooltipTrigger, type TooltipProps } from \"../tooltip/tooltip.js\";\n\nexport interface InfoTooltipProps\n  extends Omit<\n    ComponentPropsWithoutRef<typeof Button>,\n    \"children\" | \"variant\" | \"size\" | \"aria-label\" | \"className\" | \"content\"\n  > {\n  /** The help text the tooltip shows. */\n  content: ReactNode;\n  /**\n   * The trigger's accessible name. Say what the help is about (\"More about\n   * Visibility score\"), not just that there is some: several triggers on one\n   * page otherwise read identically.\n   *\n   * @default \"More information\"\n   */\n  label?: string;\n  /** Where the tooltip opens. @default \"top\" */\n  placement?: TooltipProps[\"placement\"];\n  /** Extra classes for the trigger button. Merged last, so they win conflicts. */\n  className?: string;\n  /** Extra classes for the tooltip bubble, e.g. a max width. Merged last. */\n  tooltipClassName?: string;\n}\n\n/**\n * A small \"i\" button that explains something in a tooltip. A real, focusable\n * button (the compact `icon-sm` Button, 24px so it is a legal target around a\n * 14px glyph), so the help text is reachable from the keyboard as well as by\n * hover; its name is `label`. Other button props (`id`, `data-testid`,\n * `aria-describedby`, ...) are passed to the trigger.\n *\n * @example\n * <InfoTooltip label=\"More about Visibility score\" content=\"Share of answers that mention you.\" />\n */\nexport const InfoTooltip = forwardRef<HTMLButtonElement, InfoTooltipProps>(function InfoTooltip(\n  { content, label = \"More information\", placement = \"top\", className, tooltipClassName, ...props },\n  ref,\n) {\n  return (\n    <TooltipTrigger>\n      <Button\n        {...props}\n        ref={ref}\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        aria-label={label}\n        className={cn(\"rounded-full text-muted-foreground\", className)}\n      >\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"9.5\" />\n          <path d=\"M12 11v5.5M12 7.5h.01\" />\n        </svg>\n      </Button>\n      <Tooltip placement={placement} className={cn(\"max-w-80\", tooltipClassName)}>\n        {content}\n      </Tooltip>\n    </TooltipTrigger>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,SAAS,QAAQ,oBAAoB,YAAY,OAAO,WAAW,kBAAkB,GAAG,SAC1F,KACA;CACA,OACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,sCAAsC,SAAS;EAE7D,UAAA,qBAAC,OAAD;GACE,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,eAAY;GAPd,UAAA,CASE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;GAAO,CAAA,GACjC,oBAAC,QAAD,EAAM,GAAE,wBAAyB,CAAA,CAC9B;;CACC,CAAA,GACR,oBAAC,SAAD;EAAoB;EAAW,WAAW,GAAG,YAAY,gBAAgB;EACtE,UAAA;CACM,CAAA,CACK,EAAA,CAAA;AAEpB,CAAC"}

package/dist/input/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from "../lib/field-surface.js";
 import { FieldShell, hasFieldProps, useFieldWiring } from "../lib/field-shell.js";
+import { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from "../lib/field-surface.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { Input } from "react-aria-components";

package/dist/lib/selection-control.js

@@ -51,7 +51,38 @@ const selectionRingVariants = cva([
 	"group-data-[focus-visible]:outline-offset-(--focus-ring-offset)",
 	"group-data-[focus-visible]:outline-(--color-ring)"
 ]);
+/**
+* A selectable card: one choice (Radio) or one option (Checkbox) drawn as a
+* bordered surface the whole of which is the hit target.
+*
+* Selection is shown twice, by the border AND by the mark inside the card (the
+* radio dot, the checkbox tick), so it never rests on colour alone (WCAG 1.4.1).
+* The border reuses StatCard's selected filter pair (`border-primary-strong`,
+* hover darkens an unselected edge).
+*
+* FOCUS is the approved style: the card's own 1px border turns dark, with no
+* ring. React Aria puts the state on the label, which IS the card, so its own
+* `data-[focus-visible]:` is the state (no `group-` hop). The doubled selected
+* rule makes a focused, selected card show it too. Forced colours override a
+* border colour, so only there does the outline come back.
+*/
+const selectionCardVariants = cva([
+	"group flex items-start gap-3 p-4",
+	"rounded-panel border-(length:--border-width) border-border bg-surface",
+	"box-border font-sans text-sm leading-(--leading-normal) text-foreground text-start",
+	"cursor-pointer select-none",
+	"motion-safe:transition-[border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle",
+	"data-[hovered]:not-data-[selected]:border-muted-foreground",
+	"data-[selected]:border-primary-strong",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)",
+	"outline-none",
+	"data-[focus-visible]:border-foreground",
+	"data-[focus-visible]:data-[selected]:border-foreground",
+	"forced-colors:data-[focus-visible]:outline-solid",
+	"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)"
+]);
 //#endregion
-export { selectionLabelVariants, selectionRingVariants };
+export { selectionCardVariants, selectionLabelVariants, selectionRingVariants };
 
 //# sourceMappingURL=selection-control.js.map

package/dist/lib/selection-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control.js","names":[],"sources":["../../src/lib/selection-control.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The parts every selection control shares: Checkbox, Radio and Switch.\n *\n * Extracted at the Rule of Three, and for the reason this migration keeps\n * running into -- the legacy shipped `input.tsx` and `textarea.tsx` styling\n * one surface twice, and `dialog.tsx` and `alert-dialog.tsx` doing the same,\n * and both pairs had already drifted in ways nobody decided. Three controls\n * with the same label geometry and the same focus ring is where that starts.\n *\n * React Aria renders all three as a `<label>` wrapping a visually-hidden\n * real input, and puts the state on the LABEL -- so the visible box or track\n * has to reach its own state through `group-*`.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\n\n/**\n * The label that wraps the control and its text.\n *\n * `group` is load-bearing: React Aria puts `data-selected`,\n * `data-focus-visible` and the rest on this element, and CSS cannot look\n * upward from the box to them.\n */\nexport const selectionLabelVariants = cva([\n  \"group inline-flex items-center gap-2\",\n\n  // WCAG 2.2 target-size (2.5.8) wants 24x24 CSS pixels. The controls are\n  // 16-20px, which is conventional, so the LABEL carries the target: with\n  // text it is large anyway, and without -- a table row selector -- this\n  // minimum is the only thing keeping it hittable.\n  //\n  // Measured, not assumed: axe's target-size rule did NOT fire on a 16px\n  // control during the Checkbox sabotage run. Only the explicit assertion\n  // caught it.\n  \"min-h-6 min-w-6 justify-center\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // An unstyled <label> inherits the host page's serif; the Accordion\n  // shipped its panel exactly that way.\n  \"box-border font-sans text-sm leading-(--leading-normal) text-foreground\",\n\n  \"cursor-pointer select-none\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * The focus ring, drawn on the VISIBLE control rather than the input.\n *\n * React Aria's input is visually hidden, and an outline on a clipped 1px\n * element is invisible.\n *\n * `outline-solid` is load-bearing, not decoration. `outline-none` sets both\n * `outline-style: none` and `--tw-outline-style: none`, and the width\n * utility resolves its style from that same variable -- so a focus rule can\n * apply a width and a colour while faithfully re-applying none, and paint\n * nothing at all. Button shipped exactly that: keyboard-focusable with no\n * visible ring, and every automated gate stayed green because axe has no\n * focus-indicator rule.\n */\nexport const selectionRingVariants = cva([\n  \"outline-none\",\n  \"group-data-[focus-visible]:outline-solid\",\n  \"group-data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"group-data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"group-data-[focus-visible]:outline-(--color-ring)\",\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,yBAAyB,IAAI;CACxC;CAUA;CAKA;CAEA;CACA;AACF,CAAC;;;;;;;;;;;;;;;AAgBD,MAAa,wBAAwB,IAAI;CACvC;CACA;CACA;CACA;CACA;AACF,CAAC"}
+{"version":3,"file":"selection-control.js","names":[],"sources":["../../src/lib/selection-control.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The parts every selection control shares: Checkbox, Radio and Switch.\n *\n * Extracted at the Rule of Three, and for the reason this migration keeps\n * running into -- the legacy shipped `input.tsx` and `textarea.tsx` styling\n * one surface twice, and `dialog.tsx` and `alert-dialog.tsx` doing the same,\n * and both pairs had already drifted in ways nobody decided. Three controls\n * with the same label geometry and the same focus ring is where that starts.\n *\n * React Aria renders all three as a `<label>` wrapping a visually-hidden\n * real input, and puts the state on the LABEL -- so the visible box or track\n * has to reach its own state through `group-*`.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\n\n/**\n * The label that wraps the control and its text.\n *\n * `group` is load-bearing: React Aria puts `data-selected`,\n * `data-focus-visible` and the rest on this element, and CSS cannot look\n * upward from the box to them.\n */\nexport const selectionLabelVariants = cva([\n  \"group inline-flex items-center gap-2\",\n\n  // WCAG 2.2 target-size (2.5.8) wants 24x24 CSS pixels. The controls are\n  // 16-20px, which is conventional, so the LABEL carries the target: with\n  // text it is large anyway, and without -- a table row selector -- this\n  // minimum is the only thing keeping it hittable.\n  //\n  // Measured, not assumed: axe's target-size rule did NOT fire on a 16px\n  // control during the Checkbox sabotage run. Only the explicit assertion\n  // caught it.\n  \"min-h-6 min-w-6 justify-center\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // An unstyled <label> inherits the host page's serif; the Accordion\n  // shipped its panel exactly that way.\n  \"box-border font-sans text-sm leading-(--leading-normal) text-foreground\",\n\n  \"cursor-pointer select-none\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * The focus ring, drawn on the VISIBLE control rather than the input.\n *\n * React Aria's input is visually hidden, and an outline on a clipped 1px\n * element is invisible.\n *\n * `outline-solid` is load-bearing, not decoration. `outline-none` sets both\n * `outline-style: none` and `--tw-outline-style: none`, and the width\n * utility resolves its style from that same variable -- so a focus rule can\n * apply a width and a colour while faithfully re-applying none, and paint\n * nothing at all. Button shipped exactly that: keyboard-focusable with no\n * visible ring, and every automated gate stayed green because axe has no\n * focus-indicator rule.\n */\nexport const selectionRingVariants = cva([\n  \"outline-none\",\n  \"group-data-[focus-visible]:outline-solid\",\n  \"group-data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"group-data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"group-data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A selectable card: one choice (Radio) or one option (Checkbox) drawn as a\n * bordered surface the whole of which is the hit target.\n *\n * Selection is shown twice, by the border AND by the mark inside the card (the\n * radio dot, the checkbox tick), so it never rests on colour alone (WCAG 1.4.1).\n * The border reuses StatCard's selected filter pair (`border-primary-strong`,\n * hover darkens an unselected edge).\n *\n * FOCUS is the approved style: the card's own 1px border turns dark, with no\n * ring. React Aria puts the state on the label, which IS the card, so its own\n * `data-[focus-visible]:` is the state (no `group-` hop). The doubled selected\n * rule makes a focused, selected card show it too. Forced colours override a\n * border colour, so only there does the outline come back.\n */\nexport const selectionCardVariants = cva([\n  \"group flex items-start gap-3 p-4\",\n  \"rounded-panel border-(length:--border-width) border-border bg-surface\",\n  \"box-border font-sans text-sm leading-(--leading-normal) text-foreground text-start\",\n  \"cursor-pointer select-none\",\n  \"motion-safe:transition-[border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n  \"data-[hovered]:not-data-[selected]:border-muted-foreground\",\n  \"data-[selected]:border-primary-strong\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"outline-none\",\n  \"data-[focus-visible]:border-foreground\",\n  \"data-[focus-visible]:data-[selected]:border-foreground\",\n  \"forced-colors:data-[focus-visible]:outline-solid\",\n  \"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,yBAAyB,IAAI;CACxC;CAUA;CAKA;CAEA;CACA;AACF,CAAC;;;;;;;;;;;;;;;AAgBD,MAAa,wBAAwB,IAAI;CACvC;CACA;CACA;CACA;CACA;AACF,CAAC;;;;;;;;;;;;;;;;AAiBD,MAAa,wBAAwB,IAAI;CACvC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC"}

package/dist/line-chart/line-chart.d.ts

@@ -168,7 +168,8 @@ export interface LineChartProps {
    * `"zero"` counts it as zero, as before. `"gap"` breaks the line (and its
    * area) there, leaves it out of the scale, hides the crosshair dot on it and
    * reads it as `missingLabel` in the tooltip and the data table. A point with
-   * missing neighbours on both sides is drawn as a dot. `"connect"` is the same,
+   * missing neighbours on both sides is drawn as a dot, and so is the only point
+   * of a chart with one datum (at the centre, in every mode). `"connect"` is the same,
    * except the line runs on across missing values between two present ones,
    * through the straight line between them (a projection known at a few
    * points); before the first value and after the last, nothing is drawn.

package/dist/line-chart/line-chart.js

@@ -78,7 +78,7 @@ function pinScale(scale, min, max) {
 /** The line through every value, sampled densely on x from 0 to 1 in data units. Monotone tangents keep a smooth curve from swinging past the data. */
 function curveFor(values, smooth) {
 	if (values.length === 0) return [];
-	if (values.length === 1) return [[0, values[0]], [1, values[0]]];
+	if (values.length === 1) return [[.5, values[0]]];
 	const last = values.length - 1;
 	const step = 1 / last;
 	if (!smooth) return values.map((value, index) => [index * step, value]);
@@ -125,7 +125,7 @@ function breaksFor(values, across = false) {
 	const present = values.flatMap((value, index) => value === null ? [] : [index]);
 	if (!present.length) return values.length ? [[-Infinity, Infinity]] : [];
 	const last = values.length - 1;
-	if (last === 0) return [];
+	if (last === 0) return [[-Infinity, .5], [.5, Infinity]];
 	const breaks = [];
 	if (present[0] > 0) breaks.push([-Infinity, present[0] / last]);
 	for (let at = 1; at < present.length; at++) if (!across && present[at] - present[at - 1] > 1) breaks.push([present[at - 1] / last, present[at] / last]);