@seekalfred/primitives 0.2.0 → 0.4.0

package/dist/accordion/accordion.d.ts

@@ -0,0 +1,107 @@
+import { VariantProps } from "class-variance-authority";
+import { DisclosureGroupProps, DisclosurePanelProps, DisclosureProps } from "react-aria-components";
+import { ReactNode } from "react";
+//#region src/accordion/accordion.d.ts
+/**
+ * Accordion, ported from the legacy shadcn/Radix component onto React Aria's
+ * Disclosure primitives.
+ *
+ * Every string in the cva blocks below is a STATIC literal. Tailwind scans
+ * source text, so a class assembled at runtime is invisible to it and would
+ * simply never be emitted -- the component would render unstyled with no
+ * error anywhere.
+ *
+ * State comes from React Aria data attributes (`data-expanded`,
+ * `data-focus-visible`, `data-disabled`), never from pseudo-classes.
+ *
+ * ONE BEHAVIOUR IS DELIBERATELY DROPPED. Radix moved focus between headers
+ * with Home/End and the arrow keys; React Aria's useDisclosure has no key
+ * handling, so each trigger is a button in the tab order and arrows do
+ * nothing. The ARIA APG lists arrow navigation for accordions as optional,
+ * and hand-rolling roving focus would mean owning focus management that the
+ * headless base deliberately does not. The TabReachesEveryTrigger story pins
+ * this so it stays a decision rather than becoming a surprise.
+ */
+export declare const accordionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const accordionItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const accordionTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const accordionPanelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * A grouping of collapsible sections.
+ *
+ * Expansion is KEYED, which is the sharpest break from the legacy component:
+ * `type="single" | "multiple"` becomes {@link AccordionProps.allowsMultipleExpanded},
+ * and `value` / `defaultValue` strings become `expandedKeys` /
+ * `defaultExpandedKeys` holding item ids. The change handler receives a
+ * `Set`, not a string.
+ *
+ * The legacy `collapsible` prop has no equivalent and needs none: React
+ * Aria's single-expand mode always allows collapsing the open item.
+ *
+ * @example
+ * <Accordion defaultExpandedKeys={["billing"]}>
+ *   <AccordionItem id="billing">
+ *     <AccordionTrigger icon={<ChevronDown aria-hidden />}>Billing</AccordionTrigger>
+ *     <AccordionPanel>Invoices and payment methods.</AccordionPanel>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+export interface AccordionProps extends Omit<DisclosureGroupProps, "className" | "style">, VariantProps<typeof accordionVariants> {
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+export declare function Accordion({ className, ...props }: AccordionProps): import("react").JSX.Element;
+/**
+ * One collapsible section.
+ *
+ * `id` replaces the legacy `value`, and is what `expandedKeys` refers to.
+ */
+export interface AccordionItemProps extends Omit<DisclosureProps, "className" | "style">, VariantProps<typeof accordionItemVariants> {
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+export declare function AccordionItem({ className, ...props }: AccordionItemProps): import("react").JSX.Element;
+/**
+ * The header button that expands its item.
+ *
+ * Rendered inside a {@link Heading} because screen-reader users navigate an
+ * accordion by heading; that wrapper is what makes it usable rather than
+ * merely operable.
+ */
+export interface AccordionTriggerProps extends VariantProps<typeof accordionTriggerVariants> {
+  /** The header label. */
+  children?: ReactNode;
+  /**
+   * The expand/collapse glyph, rendered after the label.
+   *
+   * Required, and supplied by the caller: this library ships no icon set, so
+   * it stays icon-library agnostic. Mark the glyph `aria-hidden` -- the label
+   * is the accessible name, and a second name source makes the trigger
+   * announce twice. It is sized at `--icon-sm` unless it carries a `size-*`
+   * class of its own, and rotates on expand.
+   */
+  icon: ReactNode;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+  /**
+   * Heading level for the wrapper. Accordions appear at different depths, and
+   * a fixed level would break the document outline wherever it is wrong.
+   *
+   * @default 3
+   */
+  headingLevel?: number;
+}
+export declare function AccordionTrigger({ children, icon, className, headingLevel }: AccordionTriggerProps): import("react").JSX.Element;
+/**
+ * The content revealed when its item expands.
+ *
+ * Named Panel rather than the legacy Content, matching React Aria and the
+ * ARIA pattern.
+ */
+export interface AccordionPanelProps extends Omit<DisclosurePanelProps, "className" | "style">, VariantProps<typeof accordionPanelVariants> {
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+export declare function AccordionPanel({ className, ...props }: AccordionPanelProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=accordion.d.ts.map

package/dist/accordion/accordion.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { Button, Disclosure, DisclosureGroup, DisclosurePanel, Heading } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/accordion/accordion.tsx
+/**
+* Accordion, ported from the legacy shadcn/Radix component onto React Aria's
+* Disclosure primitives.
+*
+* Every string in the cva blocks below is a STATIC literal. Tailwind scans
+* source text, so a class assembled at runtime is invisible to it and would
+* simply never be emitted -- the component would render unstyled with no
+* error anywhere.
+*
+* State comes from React Aria data attributes (`data-expanded`,
+* `data-focus-visible`, `data-disabled`), never from pseudo-classes.
+*
+* ONE BEHAVIOUR IS DELIBERATELY DROPPED. Radix moved focus between headers
+* with Home/End and the arrow keys; React Aria's useDisclosure has no key
+* handling, so each trigger is a button in the tab order and arrows do
+* nothing. The ARIA APG lists arrow navigation for accordions as optional,
+* and hand-rolling roving focus would mean owning focus management that the
+* headless base deliberately does not. The TabReachesEveryTrigger story pins
+* this so it stays a decision rather than becoming a surprise.
+*/
+const accordionVariants = cva("w-full");
+const accordionItemVariants = cva(["border-b-(length:--border-width) border-b-border last:border-b-0", "data-[expanded]:[&_[data-slot=accordion-trigger]_svg]:rotate-180"]);
+const accordionTriggerVariants = cva([
+	"flex w-full items-center justify-between gap-(--density-control-gap)",
+	"text-start text-sm leading-(--leading-normal) font-sans font-medium text-foreground",
+	"rounded-md py-(--density-control-pad-md)",
+	"cursor-pointer select-none",
+	"border-(length:--border-width) border-transparent bg-transparent",
+	"outline-none",
+	"data-[focus-visible]:outline-solid",
+	"data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"data-[focus-visible]:outline-(--color-ring)",
+	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+	"data-[hovered]:underline",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)",
+	"[&_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)"
+]);
+const accordionPanelVariants = cva(["pb-(--density-control-pad-md) font-sans text-sm leading-(--leading-normal) text-foreground"]);
+function Accordion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DisclosureGroup, {
+		...props,
+		"data-slot": "accordion",
+		className: cn(accordionVariants(), className)
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Disclosure, {
+		...props,
+		"data-slot": "accordion-item",
+		className: cn(accordionItemVariants(), className)
+	});
+}
+function AccordionTrigger({ children, icon, className, headingLevel = 3 }) {
+	return /* @__PURE__ */ jsx(Heading, {
+		level: headingLevel,
+		children: /* @__PURE__ */ jsxs(Button, {
+			slot: "trigger",
+			"data-slot": "accordion-trigger",
+			className: cn(accordionTriggerVariants(), className),
+			children: [children, icon]
+		})
+	});
+}
+function AccordionPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DisclosurePanel, {
+		...props,
+		"data-slot": "accordion-panel",
+		className: cn(accordionPanelVariants(), className)
+	});
+}
+//#endregion
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, accordionItemVariants, accordionPanelVariants, accordionTriggerVariants, accordionVariants };
+
+//# sourceMappingURL=accordion.js.map

package/dist/accordion/accordion.js.map

@@ -0,0 +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 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 function Accordion({ className, ...props }: AccordionProps) {\n  return (\n    <AriaDisclosureGroup\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 function AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AriaDisclosure\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 function AccordionTrigger({\n  children,\n  icon,\n  className,\n  headingLevel = 3,\n}: AccordionTriggerProps) {\n  return (\n    <Heading level={headingLevel}>\n      <AriaButton\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 * 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 function AccordionPanel({ className, ...props }: AccordionPanelProps) {\n  return (\n    <AriaDisclosurePanel\n      {...props}\n      data-slot=\"accordion-panel\"\n      className={cn(accordionPanelVariants(), className)}\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,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;CACjE,OACE,oBAACA,iBAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL;AAeA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACC,YAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,sBAAsB,GAAG,SAAS;CACjD,CAAA;AAEL;AAiCA,SAAgB,iBAAiB,EAC/B,UACA,MACA,WACA,eAAe,KACS;CACxB,OACE,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,qBAACC,QAAD;GACE,MAAK;GACL,aAAU;GACV,WAAW,GAAG,yBAAyB,GAAG,SAAS;GAHrD,UAAA,CAKG,UACA,IACS;;CACL,CAAA;AAEb;AAgBA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OACE,oBAACC,iBAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,uBAAuB,GAAG,SAAS;CAClD,CAAA;AAEL"}

package/dist/accordion/index.d.ts

@@ -0,0 +1,2 @@
+import { Accordion, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps } from "./accordion.js";
+export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/accordion/index.js

@@ -0,0 +1,2 @@
+import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./accordion.js";
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger };

package/dist/alert/alert.d.ts

@@ -0,0 +1,68 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/alert/alert.d.ts
+/**
+ * Alert, ported from the legacy shadcn component.
+ *
+ * There is no React Aria base: RAC ships no static inline alert (its Toast
+ * API is transient and queue-driven), so this is a styled div with
+ * role="alert". Because it is not RAC-backed, its props follow
+ * ARCHITECTURE section 7 rule 1 -- VariantProps & ComponentPropsWithoutRef --
+ * rather than the Button's Omit-from-React-Aria departure, which exists only
+ * to stop RAC-ignored props being advertised.
+ *
+ * Every string below is a STATIC literal. Tailwind scans source text, so a
+ * class assembled at runtime is invisible to it and would never be emitted.
+ *
+ * THE LAYOUT IS THE BIGGEST CHANGE. The legacy component positioned its icon
+ * with `[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4`, pushed the text over
+ * with `[&>svg~*]:pl-7`, and nudged it back with `[&>svg+div]:translate-y-[-3px]`.
+ * All three are physical properties or magic numbers: `left` and `pl` do not
+ * mirror in RTL, so the icon stayed left while the text indented the wrong
+ * side, and `translate-y-[-3px]` is a bracket value that `check:hardcoding`
+ * rejects outright. Flex with an explicit `icon` prop deletes all three
+ * problems rather than porting them.
+ */
+export declare const alertVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * An inline status message.
+ *
+ * Announced by assistive technology the moment it renders, via `role="alert"`.
+ * That makes it the wrong component for content that is present on load and
+ * merely styled as a notice -- use a plain region for those.
+ *
+ * @example
+ * <Alert variant="destructive" icon={<WarningIcon aria-hidden />} title="Save failed">
+ *   Your changes were not saved.
+ * </Alert>
+ */
+export interface AlertProps extends Omit<ComponentPropsWithoutRef<"div">, "title">, VariantProps<typeof alertVariants> {
+  /**
+   * Leading glyph. Mark it `aria-hidden` -- the message text is the
+   * announcement, and an unhidden graphic makes the alert announce twice.
+   *
+   * A prop rather than a positioned child: the legacy `[&>svg]` selectors
+   * only worked when the icon was the first element, and broke in RTL.
+   */
+  icon?: ReactNode;
+  /**
+   * Optional heading. Replaces the legacy `AlertTitle` part.
+   *
+   * Omit it for a single-line alert; most call sites do.
+   */
+  title?: ReactNode;
+  /**
+   * Heading level for {@link AlertProps.title}.
+   *
+   * The legacy `AlertTitle` was always an `<h5>`, which breaks the document
+   * outline anywhere the alert is not nested five deep.
+   *
+   * @default 3
+   */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+export declare function Alert({ className, variant, icon, title, headingLevel, children, ...props }: AlertProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=alert.d.ts.map

package/dist/alert/alert.js

@@ -0,0 +1,67 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/alert/alert.tsx
+/**
+* Alert, ported from the legacy shadcn component.
+*
+* There is no React Aria base: RAC ships no static inline alert (its Toast
+* API is transient and queue-driven), so this is a styled div with
+* role="alert". Because it is not RAC-backed, its props follow
+* ARCHITECTURE section 7 rule 1 -- VariantProps & ComponentPropsWithoutRef --
+* rather than the Button's Omit-from-React-Aria departure, which exists only
+* to stop RAC-ignored props being advertised.
+*
+* Every string below is a STATIC literal. Tailwind scans source text, so a
+* class assembled at runtime is invisible to it and would never be emitted.
+*
+* THE LAYOUT IS THE BIGGEST CHANGE. The legacy component positioned its icon
+* with `[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4`, pushed the text over
+* with `[&>svg~*]:pl-7`, and nudged it back with `[&>svg+div]:translate-y-[-3px]`.
+* All three are physical properties or magic numbers: `left` and `pl` do not
+* mirror in RTL, so the icon stayed left while the text indented the wrong
+* side, and `translate-y-[-3px]` is a bracket value that `check:hardcoding`
+* rejects outright. Flex with an explicit `icon` prop deletes all three
+* problems rather than porting them.
+*/
+const alertVariants = cva([
+	"box-border flex w-full items-start gap-(--density-control-gap)",
+	"rounded-lg border-(length:--border-width) p-(--density-control-pad-md)",
+	"font-sans text-sm leading-(--leading-normal)"
+], {
+	variants: { variant: {
+		default: "bg-background text-foreground border-border",
+		destructive: "bg-background text-destructive-strong border-destructive-strong"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Alert({ className, variant, icon, title, headingLevel = 3, children, ...props }) {
+	const Title = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		role: "alert",
+		"data-slot": "alert",
+		className: cn(alertVariants({ variant }), className),
+		children: [icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "alert-icon",
+			className: "shrink-0 [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-(--icon-sm)",
+			children: icon
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "alert-body",
+			className: "min-w-0 flex-1",
+			children: [title === void 0 ? null : /* @__PURE__ */ jsx(Title, {
+				"data-slot": "alert-title",
+				className: "mb-1 text-sm leading-(--leading-tight) font-medium",
+				children: title
+			}), children === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "alert-description",
+				children
+			})]
+		})]
+	});
+}
+//#endregion
+export { Alert, alertVariants };
+
+//# sourceMappingURL=alert.js.map

package/dist/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":[],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Alert, ported from the legacy shadcn component.\n *\n * There is no React Aria base: RAC ships no static inline alert (its Toast\n * API is transient and queue-driven), so this is a styled div with\n * role=\"alert\". Because it is not RAC-backed, its props follow\n * ARCHITECTURE section 7 rule 1 -- VariantProps & ComponentPropsWithoutRef --\n * rather than the Button's Omit-from-React-Aria departure, which exists only\n * to stop RAC-ignored props being advertised.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n *\n * THE LAYOUT IS THE BIGGEST CHANGE. The legacy component positioned its icon\n * with `[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4`, pushed the text over\n * with `[&>svg~*]:pl-7`, and nudged it back with `[&>svg+div]:translate-y-[-3px]`.\n * All three are physical properties or magic numbers: `left` and `pl` do not\n * mirror in RTL, so the icon stayed left while the text indented the wrong\n * side, and `translate-y-[-3px]` is a bracket value that `check:hardcoding`\n * rejects outright. Flex with an explicit `icon` prop deletes all three\n * problems rather than porting them.\n */\nexport const alertVariants = cva(\n  [\n    // box-border is not boilerplate. Tailwind Preflight sets box-sizing\n    // globally and the legacy app had it; this library's reset is OPT-IN, so\n    // a consumer may load none and the browser default content-box applies.\n    // w-full is width:100%, so the padding and border are then ADDED to it\n    // and the alert overflows its container by exactly 46px at comfortable\n    // density. Measured, not theorised: 346px inside a 300px parent.\n    \"box-border flex w-full items-start gap-(--density-control-gap)\",\n    \"rounded-lg border-(length:--border-width) p-(--density-control-pad-md)\",\n    // font-sans is load-bearing. The library does not style the consumer's\n    // page, so anything that does not set its own face inherits the host's\n    // default -- which is a serif in an unstyled document. The accordion\n    // panel shipped exactly that way and it was caught by eye, not by a test.\n    \"font-sans text-sm leading-(--leading-normal)\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground border-border\",\n        // destructive-STRONG, not destructive. The fill token is 4.04:1 on\n        // the dark page; this role exists so the text and border clear the\n        // 4.5 floor in both themes. The legacy `border-destructive/50` was\n        // also an opacity modifier, which cannot be contrast-checked at all\n        // because the result depends on whatever sits behind it.\n        destructive: \"bg-background text-destructive-strong border-destructive-strong\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/**\n * An inline status message.\n *\n * Announced by assistive technology the moment it renders, via `role=\"alert\"`.\n * That makes it the wrong component for content that is present on load and\n * merely styled as a notice -- use a plain region for those.\n *\n * @example\n * <Alert variant=\"destructive\" icon={<WarningIcon aria-hidden />} title=\"Save failed\">\n *   Your changes were not saved.\n * </Alert>\n */\nexport interface AlertProps\n  // The native `title` attribute is omitted so this component can use the\n  // name for its heading. That attribute renders a browser tooltip, which is\n  // not keyboard reachable and is not announced reliably -- on a role=\"alert\"\n  // it is worth nothing, and silently shadowing it with a ReactNode would be\n  // a type error waiting for the first consumer who tried both.\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\">, VariantProps<typeof alertVariants> {\n  /**\n   * Leading glyph. Mark it `aria-hidden` -- the message text is the\n   * announcement, and an unhidden graphic makes the alert announce twice.\n   *\n   * A prop rather than a positioned child: the legacy `[&>svg]` selectors\n   * only worked when the icon was the first element, and broke in RTL.\n   */\n  icon?: ReactNode;\n  /**\n   * Optional heading. Replaces the legacy `AlertTitle` part.\n   *\n   * Omit it for a single-line alert; most call sites do.\n   */\n  title?: ReactNode;\n  /**\n   * Heading level for {@link AlertProps.title}.\n   *\n   * The legacy `AlertTitle` was always an `<h5>`, which breaks the document\n   * outline anywhere the alert is not nested five deep.\n   *\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n}\n\nexport function Alert({\n  className,\n  variant,\n  icon,\n  title,\n  headingLevel = 3,\n  children,\n  ...props\n}: AlertProps) {\n  const Title = `h${headingLevel}` as const;\n\n  return (\n    <div\n      {...props}\n      role=\"alert\"\n      data-slot=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n    >\n      {/*\n       * The glyph is sized from the icon scale unless the caller sized it,\n       * and never becomes a press target. shrink-0 keeps it square when the\n       * message wraps.\n       */}\n      {icon === undefined ? null : (\n        <span\n          data-slot=\"alert-icon\"\n          className=\"shrink-0 [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-(--icon-sm)\"\n        >\n          {icon}\n        </span>\n      )}\n      <div data-slot=\"alert-body\" className=\"min-w-0 flex-1\">\n        {title === undefined ? null : (\n          // leading-* AFTER text-*, always: tailwind-merge treats a later\n          // text-* as owning line-height and silently strips a leading-*\n          // that precedes it.\n          <Title\n            data-slot=\"alert-title\"\n            className=\"mb-1 text-sm leading-(--leading-tight) font-medium\"\n          >\n            {title}\n          </Title>\n        )}\n        {children === undefined ? null : <div data-slot=\"alert-description\">{children}</div>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,gBAAgB,IAC3B;CAOE;CACA;CAKA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EAMT,aAAa;CACf,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AA8CA,SAAgB,MAAM,EACpB,WACA,SACA,MACA,OACA,eAAe,GACf,UACA,GAAG,SACU;CACb,MAAM,QAAQ,IAAI;CAElB,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,MAAK;EACL,aAAU;EACV,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAJrD,UAAA,CAWG,SAAS,KAAA,IAAY,OACpB,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;GAET,UAAA;EACG,CAAA,GAER,qBAAC,OAAD;GAAK,aAAU;GAAa,WAAU;GAAtC,UAAA,CACG,UAAU,KAAA,IAAY,OAIrB,oBAAC,OAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACI,CAAA,GAER,aAAa,KAAA,IAAY,OAAO,oBAAC,OAAD;IAAK,aAAU;IAAqB;GAAc,CAAA,CAChF;EACF,CAAA,CAAA;;AAET"}

package/dist/alert/index.d.ts

@@ -0,0 +1,2 @@
+import { Alert, AlertProps, alertVariants } from "./alert.js";
+export { Alert, type AlertProps, alertVariants };

package/dist/alert/index.js

@@ -0,0 +1,2 @@
+import { Alert, alertVariants } from "./alert.js";
+export { Alert, alertVariants };

package/dist/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,53 @@
+import { DialogProps } from "../dialog/dialog.js";
+import { ReactNode } from "react";
+//#region src/alert-dialog/alert-dialog.d.ts
+/**
+ * AlertDialog: a confirmation that must be answered.
+ *
+ * A PRESET over `Dialog`, not a second implementation. The legacy
+ * `alert-dialog.tsx` is a 157-line clone of `dialog.tsx` with three
+ * differences, and keeping two copies is how they drift -- the legacy pair
+ * already disagree about `leading-none` on their titles for no stated
+ * reason.
+ *
+ * Census: 2 files, all eight parts used twice each, `AlertDialogPortal`,
+ * `AlertDialogOverlay` and `AlertDialogTrigger` never rendered externally.
+ *
+ * What the preset forces, and why each one is a defect if forgotten:
+ *
+ * - `role="alertdialog"`. React Aria associates the description with
+ *   `aria-describedby` ONLY for this role (useDialog.mjs:29), so a
+ *   confirmation built from a plain Dialog loses the sentence explaining
+ *   what is about to happen.
+ * - `closeButton={false}`. An X in the corner is a third answer to a
+ *   two-answer question, and it is ambiguous: it reads as "cancel" but
+ *   looks like "dismiss".
+ * - `isDismissable={false}`. Clicking the page must not resolve a
+ *   destructive confirmation. Escape still cancels, which is the APG
+ *   behaviour and what Radix does.
+ * - `description` is REQUIRED. A confirmation with no explanation is the
+ *   thing this component exists to prevent, and the role only associates it
+ *   when it is there.
+ *
+ * NO `AlertDialogAction` OR `AlertDialogCancel`. The legacy shipped both,
+ * with `AlertDialogAction` defaulting to the gradient primary button -- and
+ * BOTH call sites override it back to destructive by hand
+ * (`data-table.tsx:146`, `calendar-view.tsx:638`). A default that every
+ * caller fights is not a default. Use a `Button` and say which one it is:
+ * `slot="close"` cancels, and the confirm button picks its own variant.
+ */
+export interface AlertDialogProps extends Omit<DialogProps, "role" | "closeButton" | "closeLabel" | "isDismissable"> {
+  /**
+   * What is about to happen, and whether it can be undone.
+   *
+   * **Required**, unlike on `Dialog`. `role="alertdialog"` is what makes
+   * React Aria wire this to `aria-describedby`, so it is both the sentence
+   * the user needs and the one the screen reader announces with the name.
+   */
+  description: ReactNode;
+  /** The actions. Give the cancel button `slot="close"`. */
+  children?: ReactNode;
+}
+export declare function AlertDialog(props: AlertDialogProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/alert-dialog/alert-dialog.js

@@ -0,0 +1,16 @@
+"use client";
+import { Dialog } from "../dialog/dialog.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/alert-dialog/alert-dialog.tsx
+function AlertDialog(props) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		...props,
+		role: "alertdialog",
+		closeButton: false,
+		isDismissable: false
+	});
+}
+//#endregion
+export { AlertDialog };
+
+//# sourceMappingURL=alert-dialog.js.map

package/dist/alert-dialog/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport { Dialog, type DialogProps } from \"../dialog/dialog.js\";\n\n/**\n * AlertDialog: a confirmation that must be answered.\n *\n * A PRESET over `Dialog`, not a second implementation. The legacy\n * `alert-dialog.tsx` is a 157-line clone of `dialog.tsx` with three\n * differences, and keeping two copies is how they drift -- the legacy pair\n * already disagree about `leading-none` on their titles for no stated\n * reason.\n *\n * Census: 2 files, all eight parts used twice each, `AlertDialogPortal`,\n * `AlertDialogOverlay` and `AlertDialogTrigger` never rendered externally.\n *\n * What the preset forces, and why each one is a defect if forgotten:\n *\n * - `role=\"alertdialog\"`. React Aria associates the description with\n *   `aria-describedby` ONLY for this role (useDialog.mjs:29), so a\n *   confirmation built from a plain Dialog loses the sentence explaining\n *   what is about to happen.\n * - `closeButton={false}`. An X in the corner is a third answer to a\n *   two-answer question, and it is ambiguous: it reads as \"cancel\" but\n *   looks like \"dismiss\".\n * - `isDismissable={false}`. Clicking the page must not resolve a\n *   destructive confirmation. Escape still cancels, which is the APG\n *   behaviour and what Radix does.\n * - `description` is REQUIRED. A confirmation with no explanation is the\n *   thing this component exists to prevent, and the role only associates it\n *   when it is there.\n *\n * NO `AlertDialogAction` OR `AlertDialogCancel`. The legacy shipped both,\n * with `AlertDialogAction` defaulting to the gradient primary button -- and\n * BOTH call sites override it back to destructive by hand\n * (`data-table.tsx:146`, `calendar-view.tsx:638`). A default that every\n * caller fights is not a default. Use a `Button` and say which one it is:\n * `slot=\"close\"` cancels, and the confirm button picks its own variant.\n */\nexport interface AlertDialogProps\n  extends Omit<DialogProps, \"role\" | \"closeButton\" | \"closeLabel\" | \"isDismissable\"> {\n  /**\n   * What is about to happen, and whether it can be undone.\n   *\n   * **Required**, unlike on `Dialog`. `role=\"alertdialog\"` is what makes\n   * React Aria wire this to `aria-describedby`, so it is both the sentence\n   * the user needs and the one the screen reader announces with the name.\n   */\n  description: ReactNode;\n  /** The actions. Give the cancel button `slot=\"close\"`. */\n  children?: ReactNode;\n}\n\nexport function AlertDialog(props: AlertDialogProps) {\n  return <Dialog {...props} role=\"alertdialog\" closeButton={false} isDismissable={false} />;\n}\n"],"mappings":";;;;AAuDA,SAAgB,YAAY,OAAyB;CACnD,OAAO,oBAAC,QAAD;EAAQ,GAAI;EAAO,MAAK;EAAc,aAAa;EAAO,eAAe;CAAQ,CAAA;AAC1F"}

package/dist/alert-dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { AlertDialog, AlertDialogProps } from "./alert-dialog.js";
+export { AlertDialog, type AlertDialogProps };

package/dist/alert-dialog/index.js

@@ -0,0 +1,2 @@
+import { AlertDialog } from "./alert-dialog.js";
+export { AlertDialog };

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,50 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/avatar/avatar.d.ts
+/**
+ * Avatar, ported from the legacy shadcn/Radix component.
+ *
+ * React Aria ships no avatar, so the image load/error state machine is
+ * re-implemented here -- see the status handling below, which is the part
+ * Radix was actually providing.
+ *
+ * The three legacy parts (Avatar / AvatarImage / AvatarFallback) collapse
+ * into one props-driven component. The census is unambiguous: 36 / 35 / 35
+ * uses, always as the same triple, so the compound API bought nothing but
+ * three imports and the chance to forget one.
+ *
+ * Every string below is a STATIC literal. Tailwind scans source text, so a
+ * class assembled at runtime is invisible to it and would never be emitted.
+ */
+export declare const avatarVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A user avatar.
+ *
+ * @example
+ * <Avatar src={user.photoUrl} alt={user.name} fallback={initials(user.name)} />
+ * <Avatar alt="" fallback="JD" />
+ */
+export interface AvatarProps extends Omit<ComponentPropsWithoutRef<"span">, "children">, VariantProps<typeof avatarVariants> {
+  /** Image URL. Omit it to render the fallback alone. */
+  src?: string;
+  /**
+   * Alternative text. **Required**, and `""` is the right value when the
+   * person's name already appears next to the avatar.
+   *
+   * Required on purpose: the census found 15 of 38 legacy `AvatarImage` uses
+   * with no `alt` at all, which renders an `<img>` that fails axe's
+   * `image-alt` rule. Making it required turns that into a decision the
+   * caller makes rather than a default they fall into.
+   */
+  alt: string;
+  /**
+   * Shown until the image loads, and permanently if it fails. Usually
+   * initials.
+   */
+  fallback?: ReactNode;
+}
+export declare function Avatar({ className, size, src, alt, fallback, ...props }: AvatarProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=avatar.d.ts.map

package/dist/avatar/avatar.js

@@ -0,0 +1,91 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/avatar/avatar.tsx
+/**
+* Avatar, ported from the legacy shadcn/Radix component.
+*
+* React Aria ships no avatar, so the image load/error state machine is
+* re-implemented here -- see the status handling below, which is the part
+* Radix was actually providing.
+*
+* The three legacy parts (Avatar / AvatarImage / AvatarFallback) collapse
+* into one props-driven component. The census is unambiguous: 36 / 35 / 35
+* uses, always as the same triple, so the compound API bought nothing but
+* three imports and the chance to forget one.
+*
+* Every string below is a STATIC literal. Tailwind scans source text, so a
+* class assembled at runtime is invisible to it and would never be emitted.
+*/
+const avatarVariants = cva([
+	"relative inline-flex shrink-0 items-center justify-center overflow-hidden",
+	"rounded-full",
+	"box-border",
+	"font-sans font-medium",
+	"bg-muted text-foreground"
+], {
+	variants: { size: {
+		xs: "size-5 text-2xs leading-(--leading-none)",
+		sm: "size-6 text-2xs leading-(--leading-none)",
+		md: "size-8 text-sm leading-(--leading-none)",
+		lg: "size-10 text-sm leading-(--leading-none)",
+		xl: "size-16 text-base leading-(--leading-none)"
+	} },
+	defaultVariants: { size: "md" }
+});
+function Avatar({ className, size, src, alt, fallback, ...props }) {
+	const [status, setStatus] = useState(src === void 0 ? "idle" : "loading");
+	/**
+	* Reset when src changes, during RENDER rather than in an effect.
+	*
+	* React's documented "adjusting state when a prop changes" pattern. An
+	* effect that called setState here would be flagged by
+	* react-hooks/set-state-in-effect, and rightly: it renders once with the
+	* stale status before correcting itself.
+	*/
+	const [renderedSrc, setRenderedSrc] = useState(src);
+	if (src !== renderedSrc) {
+		setRenderedSrc(src);
+		setStatus(src === void 0 ? "idle" : "loading");
+	}
+	/**
+	* Resolve the status from the DOM, not only from events.
+	*
+	* A cached or data-URL image is already decoded by the time React attaches
+	* its handlers, so `onLoad` fires BEFORE any effect could run -- and an
+	* effect that set "loading" would then clobber it and leave the avatar on
+	* its fallback forever. A ref callback runs when the node attaches, which
+	* is early enough to read `complete` and late enough to have a node. The
+	* handlers below still cover the asynchronous case.
+	*/
+	const measure = useCallback((node) => {
+		if (node?.complete) setStatus(node.naturalWidth > 0 ? "loaded" : "error");
+	}, []);
+	const showImage = src !== void 0 && status !== "error";
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		"data-slot": "avatar",
+		"data-status": status,
+		className: cn(avatarVariants({ size }), className),
+		children: [showImage ? /* @__PURE__ */ jsx("img", {
+			ref: measure,
+			"data-slot": "avatar-image",
+			className: "size-full object-cover",
+			src,
+			alt,
+			onLoad: () => setStatus("loaded"),
+			onError: () => setStatus("error")
+		}) : null, status === "loaded" ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "avatar-fallback",
+			"aria-hidden": "true",
+			className: "select-none",
+			children: fallback
+		})]
+	});
+}
+//#endregion
+export { Avatar, avatarVariants };
+
+//# sourceMappingURL=avatar.js.map

package/dist/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useCallback, useState, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Avatar, ported from the legacy shadcn/Radix component.\n *\n * React Aria ships no avatar, so the image load/error state machine is\n * re-implemented here -- see the status handling below, which is the part\n * Radix was actually providing.\n *\n * The three legacy parts (Avatar / AvatarImage / AvatarFallback) collapse\n * into one props-driven component. The census is unambiguous: 36 / 35 / 35\n * uses, always as the same triple, so the compound API bought nothing but\n * three imports and the chance to forget one.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n */\nexport const avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 items-center justify-center overflow-hidden\",\n    \"rounded-full\",\n    // box-border: this library's reset is OPT-IN, so a consumer may load\n    // none and the browser default content-box applies. The Alert shipped\n    // overflowing its container by 46px for exactly this reason.\n    \"box-border\",\n    // font-sans: initials are text, and an unstyled document renders text in\n    // a serif. The accordion panel shipped that way.\n    \"font-sans font-medium\",\n    \"bg-muted text-foreground\",\n  ],\n  {\n    variants: {\n      // Sizes come from the census, not from taste: call sites reach for\n      // h-5 / h-6 / h-8 / h-10 / h-16 through className because the legacy\n      // component has no size prop. size-7 (2 uses) has no variant; those\n      // sites pick sm or md.\n      //\n      // Deliberately NOT on the density scale. An avatar is content, not a\n      // control -- it does not shrink when a table is compacted, and putting\n      // it on --density-control-* would couple a portrait to a button's\n      // rhythm. If that turns out wrong it becomes an --avatar-* scale.\n      size: {\n        xs: \"size-5 text-2xs leading-(--leading-none)\",\n        sm: \"size-6 text-2xs leading-(--leading-none)\",\n        md: \"size-8 text-sm leading-(--leading-none)\",\n        lg: \"size-10 text-sm leading-(--leading-none)\",\n        xl: \"size-16 text-base leading-(--leading-none)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\ntype Status = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\n/**\n * A user avatar.\n *\n * @example\n * <Avatar src={user.photoUrl} alt={user.name} fallback={initials(user.name)} />\n * <Avatar alt=\"\" fallback=\"JD\" />\n */\nexport interface AvatarProps\n  extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\">, VariantProps<typeof avatarVariants> {\n  /** Image URL. Omit it to render the fallback alone. */\n  src?: string;\n  /**\n   * Alternative text. **Required**, and `\"\"` is the right value when the\n   * person's name already appears next to the avatar.\n   *\n   * Required on purpose: the census found 15 of 38 legacy `AvatarImage` uses\n   * with no `alt` at all, which renders an `<img>` that fails axe's\n   * `image-alt` rule. Making it required turns that into a decision the\n   * caller makes rather than a default they fall into.\n   */\n  alt: string;\n  /**\n   * Shown until the image loads, and permanently if it fails. Usually\n   * initials.\n   */\n  fallback?: ReactNode;\n}\n\nexport function Avatar({ className, size, src, alt, fallback, ...props }: AvatarProps) {\n  const [status, setStatus] = useState<Status>(src === undefined ? \"idle\" : \"loading\");\n\n  /**\n   * Reset when src changes, during RENDER rather than in an effect.\n   *\n   * React's documented \"adjusting state when a prop changes\" pattern. An\n   * effect that called setState here would be flagged by\n   * react-hooks/set-state-in-effect, and rightly: it renders once with the\n   * stale status before correcting itself.\n   */\n  const [renderedSrc, setRenderedSrc] = useState(src);\n  if (src !== renderedSrc) {\n    setRenderedSrc(src);\n    setStatus(src === undefined ? \"idle\" : \"loading\");\n  }\n\n  /**\n   * Resolve the status from the DOM, not only from events.\n   *\n   * A cached or data-URL image is already decoded by the time React attaches\n   * its handlers, so `onLoad` fires BEFORE any effect could run -- and an\n   * effect that set \"loading\" would then clobber it and leave the avatar on\n   * its fallback forever. A ref callback runs when the node attaches, which\n   * is early enough to read `complete` and late enough to have a node. The\n   * handlers below still cover the asynchronous case.\n   */\n  const measure = useCallback((node: HTMLImageElement | null) => {\n    if (node?.complete) {\n      setStatus(node.naturalWidth > 0 ? \"loaded\" : \"error\");\n    }\n  }, []);\n\n  const showImage = src !== undefined && status !== \"error\";\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar\"\n      data-status={status}\n      className={cn(avatarVariants({ size }), className)}\n    >\n      {showImage ? (\n        <img\n          ref={measure}\n          data-slot=\"avatar-image\"\n          className=\"size-full object-cover\"\n          src={src}\n          alt={alt}\n          onLoad={() => setStatus(\"loaded\")}\n          onError={() => setStatus(\"error\")}\n        />\n      ) : null}\n      {status === \"loaded\" ? null : (\n        // aria-hidden: when the image is present the img carries the\n        // accessible name, and when it is not the initials are decorative\n        // shorthand for a name the surrounding UI already states.\n        <span data-slot=\"avatar-fallback\" aria-hidden=\"true\" className=\"select-none\">\n          {fallback}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,iBAAiB,IAC5B;CACE;CACA;CAIA;CAGA;CACA;AACF,GACA;CACE,UAAU,EAUR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAgCA,SAAgB,OAAO,EAAE,WAAW,MAAM,KAAK,KAAK,UAAU,GAAG,SAAsB;CACrF,MAAM,CAAC,QAAQ,aAAa,SAAiB,QAAQ,KAAA,IAAY,SAAS,SAAS;;;;;;;;;CAUnF,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,IAAI,QAAQ,aAAa;EACvB,eAAe,GAAG;EAClB,UAAU,QAAQ,KAAA,IAAY,SAAS,SAAS;CAClD;;;;;;;;;;;CAYA,MAAM,UAAU,aAAa,SAAkC;EAC7D,IAAI,MAAM,UACR,UAAU,KAAK,eAAe,IAAI,WAAW,OAAO;CAExD,GAAG,CAAC,CAAC;CAEL,MAAM,YAAY,QAAQ,KAAA,KAAa,WAAW;CAElD,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,eAAa;EACb,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EAJnD,UAAA,CAMG,YACC,oBAAC,OAAD;GACE,KAAK;GACL,aAAU;GACV,WAAU;GACL;GACA;GACL,cAAc,UAAU,QAAQ;GAChC,eAAe,UAAU,OAAO;EACjC,CAAA,IACC,MACH,WAAW,WAAW,OAIrB,oBAAC,QAAD;GAAM,aAAU;GAAkB,eAAY;GAAO,WAAU;GAC5D,UAAA;EACG,CAAA,CAEJ;;AAEV"}

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { Avatar, AvatarProps, avatarVariants } from "./avatar.js";
+export { Avatar, type AvatarProps, avatarVariants };