@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/accordion/accordion.js

@@ -44,9 +44,10 @@ const accordionTriggerVariants = cva([
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
 	"[&_svg:not([class*='size-'])]:size-(--icon-sm)",
 	"[&_svg]:text-muted-foreground",
-	"[&_svg]:motion-safe:transition-transform [&_svg]:motion-safe:duration-(--duration-fast)"
+	"[&_svg]:motion-safe:transition-transform [&_svg]:motion-safe:duration-(--duration-snappy) [&_svg]:motion-safe:ease-snappy",
+	"[&_svg]:motion-safe:transition-[transform,color]"
 ]);
-const accordionPanelVariants = cva(["pb-(--density-control-pad-md) font-sans text-sm leading-(--leading-normal) text-foreground"]);
+const accordionPanelVariants = cva(["pb-(--density-control-pad-md) font-sans text-sm leading-(--leading-normal) text-foreground", "accordion-panel"]);
 const Accordion = forwardRef(function Accordion({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DisclosureGroup, {
 		ref,
@@ -75,12 +76,17 @@ const AccordionTrigger = forwardRef(function AccordionTrigger({ children, icon,
 		})
 	});
 });
-const AccordionPanel = forwardRef(function AccordionPanel({ className, ...props }, ref) {
+const AccordionPanel = forwardRef(function AccordionPanel({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DisclosurePanel, {
 		ref,
 		...props,
 		"data-slot": "accordion-panel",
-		className: cn(accordionPanelVariants(), className)
+		className: cn(accordionPanelVariants(), className),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "accordion-panel-content",
+			className: "accordion-panel-content",
+			children
+		})
 	});
 });
 //#endregion

package/dist/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["AriaDisclosureGroup","AriaDisclosure","AriaButton","AriaDisclosurePanel"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Disclosure as AriaDisclosure,\n  DisclosureGroup as AriaDisclosureGroup,\n  DisclosurePanel as AriaDisclosurePanel,\n  Heading,\n  type DisclosureGroupProps as AriaDisclosureGroupProps,\n  type DisclosurePanelProps as AriaDisclosurePanelProps,\n  type DisclosureProps as AriaDisclosureProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Accordion, ported from the legacy shadcn/Radix component onto React Aria's\n * Disclosure primitives.\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 -- the component would render unstyled with no\n * error anywhere.\n *\n * State comes from React Aria data attributes (`data-expanded`,\n * `data-focus-visible`, `data-disabled`), never from pseudo-classes.\n *\n * ONE BEHAVIOUR IS DELIBERATELY DROPPED. Radix moved focus between headers\n * with Home/End and the arrow keys; React Aria's useDisclosure has no key\n * handling, so each trigger is a button in the tab order and arrows do\n * nothing. The ARIA APG lists arrow navigation for accordions as optional,\n * and hand-rolling roving focus would mean owning focus management that the\n * headless base deliberately does not. The TabReachesEveryTrigger story pins\n * this so it stays a decision rather than becoming a surprise.\n */\nexport const accordionVariants = cva(\"w-full\");\n\nexport const accordionItemVariants = cva([\n  // The divider between items. border-b-0 on the last child rather than\n  // border-t on siblings: it survives a single-item accordion, which the\n  // sibling form does not.\n  \"border-b-(length:--border-width) border-b-border last:border-b-0\",\n  // The chevron rotation is authored HERE, not on the trigger: React Aria\n  // puts data-expanded on the Disclosure, and CSS cannot look upward from\n  // the button to its expanded ancestor.\n  \"data-[expanded]:[&_[data-slot=accordion-trigger]_svg]:rotate-180\",\n]);\n\nexport const accordionTriggerVariants = cva([\n  \"flex w-full items-center justify-between gap-(--density-control-gap)\",\n  // text-start, never text-left. Logical properties are what make RTL work\n  // without a second stylesheet (ARCHITECTURE section 5 rule 4).\n  \"text-start text-sm leading-(--leading-normal) font-sans font-medium text-foreground\",\n  \"rounded-md py-(--density-control-pad-md)\",\n  \"cursor-pointer select-none\",\n\n  // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n  // A bare <button> then keeps the user-agent border, ButtonFace grey and\n  // Arial -- the same defence the Button base carries, for the same reason.\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n\n  // A real outline, not a ring. The legacy component focused with\n  // ring-[3px], a box-shadow, which forced-colors discards entirely -- and\n  // axe has no focus-indicator rule, so nothing would have caught it.\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style:none\n  // and the width utility resolves its style from that same variable, so\n  // without it the ring gets a width and a colour and paints nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"data-[hovered]:underline\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n\n  // The chevron. Sized from the icon scale unless the caller sized it, and\n  // never a press target of its own.\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  \"[&_svg]:text-muted-foreground\",\n  // Rotation is the whole motion story for this component -- see the panel\n  // note below for why the panel itself does not animate.\n  \"[&_svg]:motion-safe:transition-transform [&_svg]:motion-safe:duration-(--duration-fast)\",\n]);\n\nexport const accordionPanelVariants = cva([\n  // font-sans is not decoration. The panel is a plain <div> inheriting from\n  // the consumer's body, and the library deliberately does not style the\n  // page -- so without this the copy renders in the browser's default serif\n  // while the trigger above it renders in the brand face. Caught by eye in\n  // the browser, not by any assertion, which is why NoUaLeak now covers the\n  // panel too.\n  \"pb-(--density-control-pad-md) font-sans text-sm leading-(--leading-normal) text-foreground\",\n  // No expand/collapse animation, deliberately. React Aria hides a collapsed\n  // panel with the `hidden` attribute, which is display:none, and CSS cannot\n  // transition out of display:none. Overriding [hidden] would restore the\n  // animation by breaking the accessibility semantics that make hidden\n  // correct -- the panel would stay in the accessibility tree while\n  // collapsed. @starting-style with transition-behavior:allow-discrete could\n  // do this properly once the browser floor allows it.\n]);\n\n/**\n * A grouping of collapsible sections.\n *\n * Expansion is KEYED, which is the sharpest break from the legacy component:\n * `type=\"single\" | \"multiple\"` becomes {@link AccordionProps.allowsMultipleExpanded},\n * and `value` / `defaultValue` strings become `expandedKeys` /\n * `defaultExpandedKeys` holding item ids. The change handler receives a\n * `Set`, not a string.\n *\n * The legacy `collapsible` prop has no equivalent and needs none: React\n * Aria's single-expand mode always allows collapsing the open item.\n *\n * @example\n * <Accordion defaultExpandedKeys={[\"billing\"]}>\n *   <AccordionItem id=\"billing\">\n *     <AccordionTrigger icon={<ChevronDown aria-hidden />}>Billing</AccordionTrigger>\n *     <AccordionPanel>Invoices and payment methods.</AccordionPanel>\n *   </AccordionItem>\n * </Accordion>\n */\nexport interface AccordionProps\n  extends\n    Omit<AriaDisclosureGroupProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaDisclosureGroup\n      ref={ref}\n      {...props}\n      data-slot=\"accordion\"\n      className={cn(accordionVariants(), className)}\n    />\n  );\n});\n\n/**\n * One collapsible section.\n *\n * `id` replaces the legacy `value`, and is what `expandedKeys` refers to.\n */\nexport interface AccordionItemProps\n  extends\n    Omit<AriaDisclosureProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionItemVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaDisclosure\n      ref={ref}\n      {...props}\n      data-slot=\"accordion-item\"\n      className={cn(accordionItemVariants(), className)}\n    />\n  );\n});\n\n/**\n * The header button that expands its item.\n *\n * Rendered inside a {@link Heading} because screen-reader users navigate an\n * accordion by heading; that wrapper is what makes it usable rather than\n * merely operable.\n */\nexport interface AccordionTriggerProps extends VariantProps<typeof accordionTriggerVariants> {\n  /** The header label. */\n  children?: ReactNode;\n  /**\n   * The expand/collapse glyph, rendered after the label.\n   *\n   * Required, and supplied by the caller: this library ships no icon set, so\n   * it stays icon-library agnostic. Mark the glyph `aria-hidden` -- the label\n   * is the accessible name, and a second name source makes the trigger\n   * announce twice. It is sized at `--icon-sm` unless it carries a `size-*`\n   * class of its own, and rotates on expand.\n   */\n  icon: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Heading level for the wrapper. Accordions appear at different depths, and\n   * a fixed level would break the document outline wherever it is wrong.\n   *\n   * @default 3\n   */\n  headingLevel?: number;\n}\n\nexport const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(\n  function AccordionTrigger({ children, icon, className, headingLevel = 3 }, ref) {\n    return (\n      <Heading level={headingLevel}>\n        <AriaButton\n          // The ref goes on the button, not the Heading wrapping it: Heading has\n          // no interactive behaviour, while the button is what expands/collapses\n          // and carries the press/focus data attributes.\n          ref={ref}\n          slot=\"trigger\"\n          data-slot=\"accordion-trigger\"\n          className={cn(accordionTriggerVariants(), className)}\n        >\n          {children}\n          {icon}\n        </AriaButton>\n      </Heading>\n    );\n  },\n);\n\n/**\n * The content revealed when its item expands.\n *\n * Named Panel rather than the legacy Content, matching React Aria and the\n * ARIA pattern.\n */\nexport interface AccordionPanelProps\n  extends\n    Omit<AriaDisclosurePanelProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionPanelVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n  function AccordionPanel({ className, ...props }, ref) {\n    return (\n      <AriaDisclosurePanel\n        ref={ref}\n        {...props}\n        data-slot=\"accordion-panel\"\n        className={cn(accordionPanelVariants(), className)}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,oBAAoB,IAAI,QAAQ;AAE7C,MAAa,wBAAwB,IAAI,CAIvC,oEAIA,kEACF,CAAC;AAED,MAAa,2BAA2B,IAAI;CAC1C;CAGA;CACA;CACA;CAKA;CAQA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAIA;CACA;CACA;CAGA;AACF,CAAC;AAED,MAAa,yBAAyB,IAAI,CAOxC,4FAQF,CAAC;AA8BD,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,iBAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL,CAAC;AAeD,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,YAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,sBAAsB,GAAG,SAAS;CACjD,CAAA;AAEL,CAAC;AAiCD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,UAAU,MAAM,WAAW,eAAe,KAAK,KAAK;CAC9E,OACE,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,qBAACC,QAAD;GAIO;GACL,MAAK;GACL,aAAU;GACV,WAAW,GAAG,yBAAyB,GAAG,SAAS;GAPrD,UAAA,CASG,UACA,IACS;;CACL,CAAA;AAEb,CACF;AAgBA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACC,iBAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,uBAAuB,GAAG,SAAS;CAClD,CAAA;AAEL,CACF"}
+{"version":3,"file":"accordion.js","names":["AriaDisclosureGroup","AriaDisclosure","AriaButton","AriaDisclosurePanel"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Disclosure as AriaDisclosure,\n  DisclosureGroup as AriaDisclosureGroup,\n  DisclosurePanel as AriaDisclosurePanel,\n  Heading,\n  type DisclosureGroupProps as AriaDisclosureGroupProps,\n  type DisclosurePanelProps as AriaDisclosurePanelProps,\n  type DisclosureProps as AriaDisclosureProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Accordion, ported from the legacy shadcn/Radix component onto React Aria's\n * Disclosure primitives.\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 -- the component would render unstyled with no\n * error anywhere.\n *\n * State comes from React Aria data attributes (`data-expanded`,\n * `data-focus-visible`, `data-disabled`), never from pseudo-classes.\n *\n * ONE BEHAVIOUR IS DELIBERATELY DROPPED. Radix moved focus between headers\n * with Home/End and the arrow keys; React Aria's useDisclosure has no key\n * handling, so each trigger is a button in the tab order and arrows do\n * nothing. The ARIA APG lists arrow navigation for accordions as optional,\n * and hand-rolling roving focus would mean owning focus management that the\n * headless base deliberately does not. The TabReachesEveryTrigger story pins\n * this so it stays a decision rather than becoming a surprise.\n */\nexport const accordionVariants = cva(\"w-full\");\n\nexport const accordionItemVariants = cva([\n  // The divider between items. border-b-0 on the last child rather than\n  // border-t on siblings: it survives a single-item accordion, which the\n  // sibling form does not.\n  \"border-b-(length:--border-width) border-b-border last:border-b-0\",\n  // The chevron rotation is authored HERE, not on the trigger: React Aria\n  // puts data-expanded on the Disclosure, and CSS cannot look upward from\n  // the button to its expanded ancestor.\n  \"data-[expanded]:[&_[data-slot=accordion-trigger]_svg]:rotate-180\",\n]);\n\nexport const accordionTriggerVariants = cva([\n  \"flex w-full items-center justify-between gap-(--density-control-gap)\",\n  // text-start, never text-left. Logical properties are what make RTL work\n  // without a second stylesheet (ARCHITECTURE section 5 rule 4).\n  \"text-start text-sm leading-(--leading-normal) font-sans font-medium text-foreground\",\n  \"rounded-md py-(--density-control-pad-md)\",\n  \"cursor-pointer select-none\",\n\n  // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n  // A bare <button> then keeps the user-agent border, ButtonFace grey and\n  // Arial -- the same defence the Button base carries, for the same reason.\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n\n  // A real outline, not a ring. The legacy component focused with\n  // ring-[3px], a box-shadow, which forced-colors discards entirely -- and\n  // axe has no focus-indicator rule, so nothing would have caught it.\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style:none\n  // and the width utility resolves its style from that same variable, so\n  // without it the ring gets a width and a colour and paints nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"data-[hovered]:underline\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n\n  // The chevron. Sized from the icon scale unless the caller sized it, and\n  // never a press target of its own.\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  \"[&_svg]:text-muted-foreground\",\n  // Rotation is the whole motion story for this component -- see the panel\n  // note below for why the panel itself does not animate.\n  \"[&_svg]:motion-safe:transition-transform [&_svg]:motion-safe:duration-(--duration-snappy) [&_svg]:motion-safe:ease-snappy\",\n  // The icon takes its full colour once its panel is open.\n  \"[&_svg]:motion-safe:transition-[transform,color]\",\n]);\n\nexport const accordionPanelVariants = cva([\n  // font-sans is not decoration. The panel is a plain <div> inheriting from\n  // the consumer's body, and the library deliberately does not style the\n  // page -- so without this the copy renders in the browser's default serif\n  // while the trigger above it renders in the brand face. Caught by eye in\n  // the browser, not by any assertion, which is why NoUaLeak now covers the\n  // panel too.\n  \"pb-(--density-control-pad-md) font-sans text-sm leading-(--leading-normal) text-foreground\",\n  // Opens and closes in place (see the accordion-panel utility): the collapsed\n  // panel is kept as a box of no height, out of the accessibility tree.\n  \"accordion-panel\",\n]);\n\n/**\n * A grouping of collapsible sections.\n *\n * Expansion is KEYED, which is the sharpest break from the legacy component:\n * `type=\"single\" | \"multiple\"` becomes {@link AccordionProps.allowsMultipleExpanded},\n * and `value` / `defaultValue` strings become `expandedKeys` /\n * `defaultExpandedKeys` holding item ids. The change handler receives a\n * `Set`, not a string.\n *\n * The legacy `collapsible` prop has no equivalent and needs none: React\n * Aria's single-expand mode always allows collapsing the open item.\n *\n * @example\n * <Accordion defaultExpandedKeys={[\"billing\"]}>\n *   <AccordionItem id=\"billing\">\n *     <AccordionTrigger icon={<ChevronDown aria-hidden />}>Billing</AccordionTrigger>\n *     <AccordionPanel>Invoices and payment methods.</AccordionPanel>\n *   </AccordionItem>\n * </Accordion>\n */\nexport interface AccordionProps\n  extends\n    Omit<AriaDisclosureGroupProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaDisclosureGroup\n      ref={ref}\n      {...props}\n      data-slot=\"accordion\"\n      className={cn(accordionVariants(), className)}\n    />\n  );\n});\n\n/**\n * One collapsible section.\n *\n * `id` replaces the legacy `value`, and is what `expandedKeys` refers to.\n */\nexport interface AccordionItemProps\n  extends\n    Omit<AriaDisclosureProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionItemVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaDisclosure\n      ref={ref}\n      {...props}\n      data-slot=\"accordion-item\"\n      className={cn(accordionItemVariants(), className)}\n    />\n  );\n});\n\n/**\n * The header button that expands its item.\n *\n * Rendered inside a {@link Heading} because screen-reader users navigate an\n * accordion by heading; that wrapper is what makes it usable rather than\n * merely operable.\n */\nexport interface AccordionTriggerProps extends VariantProps<typeof accordionTriggerVariants> {\n  /** The header label. */\n  children?: ReactNode;\n  /**\n   * The expand/collapse glyph, rendered after the label.\n   *\n   * Required, and supplied by the caller: this library ships no icon set, so\n   * it stays icon-library agnostic. Mark the glyph `aria-hidden` -- the label\n   * is the accessible name, and a second name source makes the trigger\n   * announce twice. It is sized at `--icon-sm` unless it carries a `size-*`\n   * class of its own, and rotates on expand.\n   */\n  icon: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Heading level for the wrapper. Accordions appear at different depths, and\n   * a fixed level would break the document outline wherever it is wrong.\n   *\n   * @default 3\n   */\n  headingLevel?: number;\n}\n\nexport const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(\n  function AccordionTrigger({ children, icon, className, headingLevel = 3 }, ref) {\n    return (\n      <Heading level={headingLevel}>\n        <AriaButton\n          // The ref goes on the button, not the Heading wrapping it: Heading has\n          // no interactive behaviour, while the button is what expands/collapses\n          // and carries the press/focus data attributes.\n          ref={ref}\n          slot=\"trigger\"\n          data-slot=\"accordion-trigger\"\n          className={cn(accordionTriggerVariants(), className)}\n        >\n          {children}\n          {icon}\n        </AriaButton>\n      </Heading>\n    );\n  },\n);\n\n/**\n * The content revealed when its item expands.\n *\n * Named Panel rather than the legacy Content, matching React Aria and the\n * ARIA pattern.\n */\nexport interface AccordionPanelProps\n  extends\n    Omit<AriaDisclosurePanelProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionPanelVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n  function AccordionPanel({ className, children, ...props }, ref) {\n    return (\n      <AriaDisclosurePanel\n        ref={ref}\n        {...props}\n        data-slot=\"accordion-panel\"\n        className={cn(accordionPanelVariants(), className)}\n      >\n        {/* A wrapper, so the answer can settle down into place while the panel opens. */}\n        <div data-slot=\"accordion-panel-content\" className=\"accordion-panel-content\">\n          {children}\n        </div>\n      </AriaDisclosurePanel>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,oBAAoB,IAAI,QAAQ;AAE7C,MAAa,wBAAwB,IAAI,CAIvC,oEAIA,kEACF,CAAC;AAED,MAAa,2BAA2B,IAAI;CAC1C;CAGA;CACA;CACA;CAKA;CAQA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAIA;CACA;CACA;CAGA;CAEA;AACF,CAAC;AAED,MAAa,yBAAyB,IAAI,CAOxC,8FAGA,iBACF,CAAC;AA8BD,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,iBAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL,CAAC;AAeD,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,YAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,sBAAsB,GAAG,SAAS;CACjD,CAAA;AAEL,CAAC;AAiCD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,UAAU,MAAM,WAAW,eAAe,KAAK,KAAK;CAC9E,OACE,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,qBAACC,QAAD;GAIO;GACL,MAAK;GACL,aAAU;GACV,WAAW,GAAG,yBAAyB,GAAG,SAAS;GAPrD,UAAA,CASG,UACA,IACS;;CACL,CAAA;AAEb,CACF;AAgBA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAC9D,OACE,oBAACC,iBAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,uBAAuB,GAAG,SAAS;EAGjD,UAAA,oBAAC,OAAD;GAAK,aAAU;GAA0B,WAAU;GAChD;EACE,CAAA;CACc,CAAA;AAEzB,CACF"}

package/dist/action-button/action-button.d.ts

@@ -0,0 +1,50 @@
+import { buttonVariants } from "../button/button.js";
+import { VariantProps } from "class-variance-authority";
+import { ButtonProps } from "react-aria-components";
+//#region src/action-button/action-button.d.ts
+/**
+ * Props.
+ *
+ * Deliberately NOT Button's props: an action button owns its own content (the
+ * morphing label and the arrow, spinner or tick beside it), so `children` is the
+ * resting label as a plain string rather than arbitrary content, and `onAction`
+ * replaces `onPress` because it is awaited. It does take Button's `variant` and
+ * `size`, so it looks like the Button next to it.
+ */
+export interface ActionButtonProps extends Omit<ButtonProps, "className" | "style" | "onPress" | "children" | "isPending">, VariantProps<typeof buttonVariants> {
+  /** The label at rest. A plain string: it is split into letters to morph. */
+  children: string;
+  /** The label once the action succeeds. */
+  successLabel?: string;
+  /** The label while the action runs. */
+  pendingLabel?: string;
+  /**
+   * What the button does. If it returns a promise the button stays pending
+   * until it settles; a rejection returns the button to rest and goes to
+   * `onActionError`. A press while pending is ignored.
+   */
+  onAction: () => void | Promise<void>;
+  /** How long the success state shows before the button returns to rest, in ms. `0` keeps it. */
+  resetAfterMs?: number;
+  /** Called when `onAction` throws or rejects. Without it the error is dropped, because the button has already returned to rest. */
+  onActionError?: (error: unknown) => void;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A button that runs an action and shows it through: its label morphs from the
+ * resting text to a pending one and then a success one, the arrow becomes a
+ * spinner and then a tick that draws itself, and the button's width follows the
+ * text on a spring.
+ *
+ * Use it for one async commit ("Save", "Send"). It stays focusable while
+ * pending (`aria-disabled`, not disabled), so a keyboard user keeps focus
+ * through the whole action, and a live region announces the pending and success
+ * labels. The accessible name is always the resting label.
+ *
+ * @example
+ * <ActionButton onAction={save} pendingLabel="Saving" successLabel="Saved">Save changes</ActionButton>
+ */
+export declare const ActionButton: import("react").ForwardRefExoticComponent<ActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+//# sourceMappingURL=action-button.d.ts.map

package/dist/action-button/action-button.js

@@ -0,0 +1,159 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { anchorsLayer, pressScaleFor, useAriaBusy, useExitBackstop, useLeavingItems } from "../lib/motion.js";
+import { buttonVariants } from "../button/button.js";
+import { MorphText } from "../lib/morph-text.js";
+import "class-variance-authority";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/action-button/action-button.tsx
+const ICON = "size-(--icon-sm)";
+/** The tick draws itself from its short stroke, the way a hand would write it. */
+function DrawnCheck() {
+	return /* @__PURE__ */ jsx("svg", {
+		className: ICON,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 12l5 5L20 6",
+			pathLength: 1,
+			className: "[stroke-dasharray:1] motion-safe:animate-check-draw"
+		})
+	});
+}
+function Arrow() {
+	return /* @__PURE__ */ jsx("svg", {
+		className: ICON,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7" })
+	});
+}
+function Spinner() {
+	return /* @__PURE__ */ jsx("span", { className: "size-4 rounded-circle border-(length:--border-width-spinner) border-current border-r-transparent motion-safe:animate-spin-fast" });
+}
+function PhaseIcon({ state }) {
+	if (state === "pending") return /* @__PURE__ */ jsx(Spinner, {});
+	if (state === "success") return /* @__PURE__ */ jsx(DrawnCheck, {});
+	return /* @__PURE__ */ jsx(Arrow, {});
+}
+/** Classes for one phase of the icon slot. The arrow moves; the spinner and tick scale. */
+function phaseClasses(state, leaving, animated) {
+	const arrow = state === "idle";
+	if (leaving) return arrow ? "motion-safe:animate-arrow-out motion-reduce:animate-fade-out" : "motion-safe:animate-glyph-out motion-reduce:animate-fade-out";
+	if (!animated) return "";
+	return arrow ? "motion-safe:animate-arrow-in motion-reduce:animate-fade-in" : "motion-safe:animate-glyph-in motion-reduce:animate-fade-in";
+}
+function IconSlot({ state }) {
+	const phaseRef = useRef(null);
+	const { leaving, changed, remove } = useLeavingItems(state, state, () => phaseRef.current);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("grid shrink-0 place-items-center", ICON),
+		children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingIcon, {
+			id: item.id,
+			state: item.value,
+			onDone: remove
+		}, item.id)), /* @__PURE__ */ jsx("span", {
+			ref: phaseRef,
+			className: cn(`col-start-1 row-start-1 grid place-items-center ${ICON} ${phaseClasses(state, false, changed)}`),
+			children: /* @__PURE__ */ jsx(PhaseIcon, { state })
+		}, state)]
+	});
+}
+function LeavingIcon({ id, state, onDone }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		className: cn(`col-start-1 row-start-1 grid place-items-center ${ICON} ${phaseClasses(state, true, true)}`),
+		children: /* @__PURE__ */ jsx(PhaseIcon, { state })
+	});
+}
+/**
+* A button that runs an action and shows it through: its label morphs from the
+* resting text to a pending one and then a success one, the arrow becomes a
+* spinner and then a tick that draws itself, and the button's width follows the
+* text on a spring.
+*
+* Use it for one async commit ("Save", "Send"). It stays focusable while
+* pending (`aria-disabled`, not disabled), so a keyboard user keeps focus
+* through the whole action, and a live region announces the pending and success
+* labels. The accessible name is always the resting label.
+*
+* @example
+* <ActionButton onAction={save} pendingLabel="Saving" successLabel="Saved">Save changes</ActionButton>
+*/
+const ActionButton = forwardRef(function ActionButton({ children: label, successLabel = "Saved", pendingLabel = "Saving", onAction, resetAfterMs = 2400, onActionError, className, variant, size, onPressStart, ...props }, ref) {
+	const [state, setState] = useState("idle");
+	const resetTimer = useRef(null);
+	const busy = useAriaBusy(state === "pending");
+	useEffect(() => () => {
+		if (resetTimer.current) clearTimeout(resetTimer.current);
+	}, []);
+	async function run() {
+		if (state === "pending") return;
+		if (resetTimer.current) clearTimeout(resetTimer.current);
+		setState("pending");
+		try {
+			await onAction();
+			setState("success");
+			if (resetAfterMs > 0) resetTimer.current = setTimeout(() => setState("idle"), resetAfterMs);
+		} catch (error) {
+			setState("idle");
+			onActionError?.(error);
+		}
+	}
+	const pressStart = (event) => {
+		const target = event.target;
+		if (state === "pending" || anchorsLayer(props)) target.style.removeProperty("--press-scale");
+		else target.style.setProperty("--press-scale", pressScaleFor(target.offsetWidth));
+		onPressStart?.(event);
+	};
+	const text = state === "pending" ? pendingLabel : state === "success" ? successLabel : label;
+	const status = state === "pending" ? pendingLabel : state === "success" ? successLabel : "";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+		...props,
+		ref: mergeRefs(ref, busy),
+		"aria-disabled": state === "pending" ? true : props["aria-disabled"],
+		"data-pending": state === "pending" || void 0,
+		onPress: () => void run(),
+		onPressStart: pressStart,
+		"data-slot": "button",
+		"data-status": state,
+		className: cn(`${buttonVariants({
+			variant,
+			size
+		})} relative overflow-hidden`, className),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "inline-flex min-h-5 items-center justify-center gap-2 whitespace-nowrap",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx(MorphText, { text }), /* @__PURE__ */ jsx(IconSlot, { state })]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		role: "status",
+		children: status
+	})] });
+});
+//#endregion
+export { ActionButton };
+
+//# sourceMappingURL=action-button.js.map

package/dist/action-button/action-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.js","names":["AriaButton"],"sources":["../../src/action-button/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, useCallback, useEffect, useRef, useState, type RefObject } from \"react\";\nimport {\n  Button as AriaButton,\n  type ButtonProps as AriaButtonProps,\n  type PressEvent,\n} from \"react-aria-components\";\n\nimport { buttonVariants } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { MorphText } from \"../lib/morph-text.js\";\nimport {\n  anchorsLayer,\n  pressScaleFor,\n  useAriaBusy,\n  useExitBackstop,\n  useLeavingItems,\n} from \"../lib/motion.js\";\n\ntype ActionState = \"idle\" | \"pending\" | \"success\";\n\n/**\n * Props.\n *\n * Deliberately NOT Button's props: an action button owns its own content (the\n * morphing label and the arrow, spinner or tick beside it), so `children` is the\n * resting label as a plain string rather than arbitrary content, and `onAction`\n * replaces `onPress` because it is awaited. It does take Button's `variant` and\n * `size`, so it looks like the Button next to it.\n */\nexport interface ActionButtonProps\n  extends\n    Omit<AriaButtonProps, \"className\" | \"style\" | \"onPress\" | \"children\" | \"isPending\">,\n    VariantProps<typeof buttonVariants> {\n  /** The label at rest. A plain string: it is split into letters to morph. */\n  children: string;\n  /** The label once the action succeeds. */\n  successLabel?: string;\n  /** The label while the action runs. */\n  pendingLabel?: string;\n  /**\n   * What the button does. If it returns a promise the button stays pending\n   * until it settles; a rejection returns the button to rest and goes to\n   * `onActionError`. A press while pending is ignored.\n   */\n  onAction: () => void | Promise<void>;\n  /** How long the success state shows before the button returns to rest, in ms. `0` keeps it. */\n  resetAfterMs?: number;\n  /** Called when `onAction` throws or rejects. Without it the error is dropped, because the button has already returned to rest. */\n  onActionError?: (error: unknown) => void;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst ICON = \"size-(--icon-sm)\";\n\n/** The tick draws itself from its short stroke, the way a hand would write it. */\nfunction DrawnCheck() {\n  return (\n    <svg\n      className={ICON}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M4 12l5 5L20 6\"\n        pathLength={1}\n        className=\"[stroke-dasharray:1] motion-safe:animate-check-draw\"\n      />\n    </svg>\n  );\n}\n\nfunction Arrow() {\n  return (\n    <svg\n      className={ICON}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M5 12h14M12 5l7 7-7 7\" />\n    </svg>\n  );\n}\n\nfunction Spinner() {\n  return (\n    <span className=\"size-4 rounded-circle border-(length:--border-width-spinner) border-current border-r-transparent motion-safe:animate-spin-fast\" />\n  );\n}\n\nfunction PhaseIcon({ state }: { state: ActionState }) {\n  if (state === \"pending\") return <Spinner />;\n  if (state === \"success\") return <DrawnCheck />;\n  return <Arrow />;\n}\n\n/** Classes for one phase of the icon slot. The arrow moves; the spinner and tick scale. */\nfunction phaseClasses(state: ActionState, leaving: boolean, animated: boolean) {\n  const arrow = state === \"idle\";\n  if (leaving) {\n    return arrow\n      ? \"motion-safe:animate-arrow-out motion-reduce:animate-fade-out\"\n      : \"motion-safe:animate-glyph-out motion-reduce:animate-fade-out\";\n  }\n  if (!animated) return \"\";\n  return arrow\n    ? \"motion-safe:animate-arrow-in motion-reduce:animate-fade-in\"\n    : \"motion-safe:animate-glyph-in motion-reduce:animate-fade-in\";\n}\n\nfunction IconSlot({ state }: { state: ActionState }) {\n  const phaseRef = useRef<HTMLSpanElement>(null);\n  // The phases share one grid cell, so a leaving one needs no rect: it simply stays under the new one.\n  const { leaving, changed, remove } = useLeavingItems<ActionState>(\n    state,\n    state,\n    () => phaseRef.current,\n  );\n  return (\n    <span className={cn(\"grid shrink-0 place-items-center\", ICON)}>\n      {leaving.map((item) => (\n        <LeavingIcon key={item.id} id={item.id} state={item.value} onDone={remove} />\n      ))}\n      <span\n        key={state}\n        ref={phaseRef}\n        className={cn(\n          `col-start-1 row-start-1 grid place-items-center ${ICON} ${phaseClasses(state, false, changed)}`,\n        )}\n      >\n        <PhaseIcon state={state} />\n      </span>\n    </span>\n  );\n}\n\nfunction LeavingIcon({\n  id,\n  state,\n  onDone,\n}: {\n  id: number;\n  state: ActionState;\n  onDone: (id: number) => void;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      className={cn(\n        `col-start-1 row-start-1 grid place-items-center ${ICON} ${phaseClasses(state, true, true)}`,\n      )}\n    >\n      <PhaseIcon state={state} />\n    </span>\n  );\n}\n\n/**\n * A button that runs an action and shows it through: its label morphs from the\n * resting text to a pending one and then a success one, the arrow becomes a\n * spinner and then a tick that draws itself, and the button's width follows the\n * text on a spring.\n *\n * Use it for one async commit (\"Save\", \"Send\"). It stays focusable while\n * pending (`aria-disabled`, not disabled), so a keyboard user keeps focus\n * through the whole action, and a live region announces the pending and success\n * labels. The accessible name is always the resting label.\n *\n * @example\n * <ActionButton onAction={save} pendingLabel=\"Saving\" successLabel=\"Saved\">Save changes</ActionButton>\n */\nexport const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(function ActionButton(\n  {\n    children: label,\n    successLabel = \"Saved\",\n    pendingLabel = \"Saving\",\n    onAction,\n    resetAfterMs = 2400,\n    onActionError,\n    className,\n    variant,\n    size,\n    onPressStart,\n    ...props\n  },\n  ref,\n) {\n  const [state, setState] = useState<ActionState>(\"idle\");\n  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const busy = useAriaBusy(state === \"pending\");\n\n  useEffect(\n    () => () => {\n      if (resetTimer.current) clearTimeout(resetTimer.current);\n    },\n    [],\n  );\n\n  async function run() {\n    if (state === \"pending\") return;\n    if (resetTimer.current) clearTimeout(resetTimer.current);\n    setState(\"pending\");\n    try {\n      await onAction();\n      setState(\"success\");\n      if (resetAfterMs > 0) resetTimer.current = setTimeout(() => setState(\"idle\"), resetAfterMs);\n    } catch (error) {\n      setState(\"idle\");\n      onActionError?.(error);\n    }\n  }\n\n  const pressStart = (event: PressEvent) => {\n    const target = event.target as HTMLElement;\n    // A pending button does not scale: drop the depth a previous press left behind.\n    if (state === \"pending\" || anchorsLayer(props)) target.style.removeProperty(\"--press-scale\");\n    else target.style.setProperty(\"--press-scale\", pressScaleFor(target.offsetWidth));\n    onPressStart?.(event);\n  };\n\n  const text = state === \"pending\" ? pendingLabel : state === \"success\" ? successLabel : label;\n  const status = state === \"pending\" ? pendingLabel : state === \"success\" ? successLabel : \"\";\n\n  return (\n    <>\n      <AriaButton\n        {...props}\n        ref={mergeRefs(ref, busy as RefObject<HTMLButtonElement | null>)}\n        // Not React Aria's isPending: it announces through a transient role=\"img\" node\n        // whose label id does not resolve, which axe rejects, and this button has its\n        // own live region. aria-disabled and aria-busy keep it focusable and announced.\n        aria-disabled={state === \"pending\" ? true : props[\"aria-disabled\"]}\n        data-pending={state === \"pending\" || undefined}\n        onPress={() => void run()}\n        onPressStart={pressStart}\n        data-slot=\"button\"\n        data-status={state}\n        className={cn(`${buttonVariants({ variant, size })} relative overflow-hidden`, className)}\n      >\n        <span\n          className=\"inline-flex min-h-5 items-center justify-center gap-2 whitespace-nowrap\"\n          aria-hidden=\"true\"\n        >\n          <MorphText text={text} />\n          <IconSlot state={state} />\n        </span>\n        <span className=\"sr-only\">{label}</span>\n      </AriaButton>\n      {/* Beside the button, not inside it: inside, its text would join the button's accessible name. */}\n      <span className=\"sr-only\" role=\"status\">\n        {status}\n      </span>\n    </>\n  );\n});\n"],"mappings":"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"}

package/dist/action-button/index.d.ts

@@ -0,0 +1,2 @@
+import { ActionButton, ActionButtonProps } from "./action-button.js";
+export { ActionButton, type ActionButtonProps };

package/dist/action-button/index.js

@@ -0,0 +1,2 @@
+import { ActionButton } from "./action-button.js";
+export { ActionButton };

package/dist/activity-heatmap/activity-heatmap.d.ts

@@ -0,0 +1,92 @@
+import { ReactNode } from "react";
+//#region src/activity-heatmap/activity-heatmap.d.ts
+/**
+ * ActivityHeatmap: one square per day, weeks as columns, four tints of the
+ * primary chart colour for how busy a day was. Use it when rhythm, streaks and
+ * quiet weeks matter more than exact comparisons; use a bar chart when the
+ * exact comparison is the point.
+ *
+ * The squares wave in once, diagonally, when the grid is seen. A tooltip
+ * glides between squares on hover or keyboard focus and its words rise in. A
+ * new range recolours the grid in a sweep instead of redrawing it, and the
+ * total rolls to its new number. The legend's squares preview a level on the
+ * grid (the others step back) and pin it on press.
+ *
+ * It sits in a card (`framed`, on by default). A year switch (`periods`) sits
+ * beside the total, and a detail line under the legend says what the hovered,
+ * focused or selected day holds (`describeDay`).
+ *
+ * The grid is a `grid` of `gridcell`s with one tab stop: arrow keys move by
+ * day (up and down) and by week (left and right), Home and End jump to the
+ * ends, Enter selects. A visually hidden table carries every day.
+ */
+export interface ActivityDay {
+  /** Calendar day as YYYY-MM-DD. */
+  date: string;
+  count: number;
+}
+/** What `describeDay` is given for one day. */
+export interface ActivityDayDetail {
+  /** The day as YYYY-MM-DD. */
+  date: string;
+  count: number;
+  /** The day spelled out, such as "Tuesday, March 18". The year is added when the range spans more than one. */
+  label: string;
+  /** The nouns for the count, as passed in `unit`. */
+  unit: {
+    one: string;
+    other: string;
+  };
+}
+export interface ActivityHeatmapProps {
+  /** One entry per day, oldest first. Days missing inside the range count as zero. */
+  days: ActivityDay[];
+  /** Accessible name for the grid, such as "Contributions in 2025". */
+  label: string;
+  /** Finishes the summary line: "1,284 contributions in {period}". */
+  period: string;
+  /** Nouns for the count. @default { one: "contribution", other: "contributions" } */
+  unit?: {
+    one: string;
+    other: string;
+  };
+  /** Upper bounds for levels one to three; anything above the last is level four. Defaults to quarters of the busiest day. */
+  thresholds?: [number, number, number];
+  /** @default 0 (Sunday) */
+  weekStartsOn?: 0 | 1;
+  /** Controlled selected day, as YYYY-MM-DD. */
+  selectedDate?: string | null;
+  defaultSelectedDate?: string | null;
+  /** Called with the day's YYYY-MM-DD when a day is pressed or chosen with Enter. */
+  onSelectDate?: (date: string) => void;
+  /** Controls beside the summary. */
+  actions?: ReactNode;
+  /**
+   * The ranges to switch between, such as ["2025", "2024", "2023"], shown as a segmented switch beside the summary with the one
+   * equal to `period` selected. You own the data: when `onPeriodChange` fires, pass the new `days`, `period` and `label`.
+   */
+  periods?: string[];
+  /** Called with the chosen entry of `periods`. */
+  onPeriodChange?: (period: string) => void;
+  /** Accessible name for the switch. @default "Period" */
+  periodsLabel?: string;
+  /**
+   * The sentence under the legend about the hovered, focused or selected day. Return the whole sentence, so it can carry data
+   * the heatmap does not hold. Pass `null` to remove the line. The default is date and count only:
+   * "Tuesday, March 18: 4 contributions."
+   */
+  describeDay?: ((day: ActivityDayDetail) => string) | null;
+  /** The detail line when no day is hovered, focused or selected. @default "Hover or select a day for details." */
+  detailHint?: string;
+  /** Draws the card around it: border, panel radius, surface and padding. Turn it off to place the heatmap inside a card of your own. @default true */
+  framed?: boolean;
+  /** Shown instead of the grid when there are no days. @default "No activity yet" */
+  emptyLabel?: string;
+  /** Formatting locale. Fixed by default so server and client render the same labels. @default "en-US" */
+  locale?: string;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+export declare const ActivityHeatmap: import("react").ForwardRefExoticComponent<ActivityHeatmapProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=activity-heatmap.d.ts.map