trc-ui 0.1.0 → 0.5.0

package/dist/index.js

@@ -23,24 +23,28 @@ function AccentText({ text, accentLast = 0 }) {
   ] });
 }
 var plainText = (text) => text.replaceAll("*", "");
-function Heading({ as: Tag = "h2", size = "xl", accentLast, className, children, ...props }) {
-  return /* @__PURE__ */ jsx(Tag, { className: cx("trc-display", `trc-heading--${size}`, className), ...props, children: typeof children === "string" ? /* @__PURE__ */ jsx(AccentText, { text: children, accentLast }) : children });
+function Heading({ as: Tag2 = "h2", size: size2 = "xl", accentLast, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(Tag2, { className: cx("trc-display", `trc-heading--${size2}`, className), ...props, children: typeof children === "string" ? /* @__PURE__ */ jsx(AccentText, { text: children, accentLast }) : children });
 }
-function Text({ as, size = "md", tone = "muted", className, ...props }) {
-  const Tag = as ?? "p";
-  return /* @__PURE__ */ jsx(Tag, { className: cx("trc-text", `trc-text--${size}`, `trc-text--${tone}`, className), ...props });
+function Text({
+  as,
+  size: size2 = "md",
+  tone = "muted",
+  className,
+  ...props
+}) {
+  const Tag2 = as ?? "p";
+  return /* @__PURE__ */ jsx(Tag2, { className: cx("trc-text", `trc-text--${size2}`, `trc-text--${tone}`, className), ...props });
 }
-function StepNumber({ n, size = "md", className }) {
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cx("trc-step-number", size === "sm" && "trc-step-number--sm", className), children: String(n).padStart(2, "0") });
+function StepNumber({ n, size: size2 = "md", className }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cx("trc-step-number", size2 === "sm" && "trc-step-number--sm", className), children: String(n).padStart(2, "0") });
 }
 
 // src/components/pill.tsx
-import {
-  forwardRef
-} from "react";
+import { forwardRef } from "react";
 
 // src/utils/icons.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var base = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
@@ -59,18 +63,24 @@ var Check = (props) => /* @__PURE__ */ jsx2("svg", { ...base, ...props, children
 var Menu = (props) => /* @__PURE__ */ jsx2("svg", { ...base, ...props, children: /* @__PURE__ */ jsx2("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
 var Close = (props) => /* @__PURE__ */ jsx2("svg", { ...base, ...props, children: /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" }) });
 var ArrowUp = (props) => /* @__PURE__ */ jsx2("svg", { ...base, ...props, children: /* @__PURE__ */ jsx2("path", { d: "M12 19V5M6 11l6-6 6 6" }) });
+var Calendar = (props) => /* @__PURE__ */ jsxs2("svg", { ...base, ...props, children: [
+  /* @__PURE__ */ jsx2("rect", { x: "3", y: "5", width: "18", height: "16", rx: "3" }),
+  /* @__PURE__ */ jsx2("path", { d: "M3 10h18M8 3v4M16 3v4" })
+] });
+var ChevronLeft = (props) => /* @__PURE__ */ jsx2("svg", { ...base, ...props, children: /* @__PURE__ */ jsx2("path", { d: "m15 6-6 6 6 6" }) });
+var ChevronRight = (props) => /* @__PURE__ */ jsx2("svg", { ...base, ...props, children: /* @__PURE__ */ jsx2("path", { d: "m9 6 6 6-6 6" }) });
 
 // src/components/pill.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var pillClass = ({ solid, size }, className) => cx("trc-pill", size === "sm" && "trc-pill--sm", solid && "trc-pill--solid", className);
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var pillClass = ({ solid, size: size2 }, className) => cx("trc-pill", size2 === "sm" && "trc-pill--sm", solid && "trc-pill--solid", className);
 function PillInner({ icon, children }) {
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "trc-pill__fill" }),
     /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "trc-pill__icon", children: icon ?? /* @__PURE__ */ jsx3(ArrowRight, {}) }),
     /* @__PURE__ */ jsx3("span", { className: "trc-pill__label", children })
   ] });
 }
-var PillButton = forwardRef(function PillButton2({ solid, size = "md", icon, loading = false, disabled, type = "button", className, children, ...props }, ref) {
+var PillButton = forwardRef(function PillButton2({ solid, size: size2 = "md", icon, loading = false, disabled, type = "button", className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx3(
     "button",
     {
@@ -78,22 +88,27 @@ var PillButton = forwardRef(function PillButton2({ solid, size = "md", icon, loa
       type,
       disabled: disabled || loading,
       "aria-busy": loading || void 0,
-      className: pillClass({ solid, size }, className),
+      className: pillClass({ solid, size: size2 }, className),
       ...props,
       children: /* @__PURE__ */ jsx3(PillInner, { icon: loading ? /* @__PURE__ */ jsx3(Spinner, { className: "trc-spin" }) : icon, children })
     }
   );
 });
-var PillLink = forwardRef(function PillLink2({ as, solid, size = "md", icon, className, children, ...props }, ref) {
-  const Tag = as ?? "a";
-  return /* @__PURE__ */ jsx3(Tag, { ref, className: pillClass({ solid, size }, className), ...props, children: /* @__PURE__ */ jsx3(PillInner, { icon, children }) });
+var PillLink = forwardRef(function PillLink2({ as, solid, size: size2 = "md", icon, className, children, ...props }, ref) {
+  const Tag2 = as ?? "a";
+  return /* @__PURE__ */ jsx3(Tag2, { ref, className: pillClass({ solid, size: size2 }, className), ...props, children: /* @__PURE__ */ jsx3(PillInner, { icon, children }) });
 });
 
 // src/components/surfaces.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function Container({ as, size = "default", className, ...props }) {
-  const Tag = as ?? "div";
-  return /* @__PURE__ */ jsx4(Tag, { className: cx("trc-container", size !== "default" && `trc-container--${size}`, className), ...props });
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Container({
+  as,
+  size: size2 = "default",
+  className,
+  ...props
+}) {
+  const Tag2 = as ?? "div";
+  return /* @__PURE__ */ jsx4(Tag2, { className: cx("trc-container", size2 !== "default" && `trc-container--${size2}`, className), ...props });
 }
 function Section({
   as,
@@ -103,11 +118,11 @@ function Section({
   children,
   ...props
 }) {
-  const Tag = as ?? "section";
+  const Tag2 = as ?? "section";
   if (inset) {
-    return /* @__PURE__ */ jsx4(Tag, { className: cx("trc-section-inset", className), ...props, children: /* @__PURE__ */ jsx4("div", { className: cx("trc-section-inset__card", spacing !== "none" && `trc-section--${spacing}`), children }) });
+    return /* @__PURE__ */ jsx4(Tag2, { className: cx("trc-section-inset", className), ...props, children: /* @__PURE__ */ jsx4("div", { className: cx("trc-section-inset__card", spacing !== "none" && `trc-section--${spacing}`), children }) });
   }
-  return /* @__PURE__ */ jsx4(Tag, { className: cx(spacing !== "none" && `trc-section--${spacing}`, className), ...props, children });
+  return /* @__PURE__ */ jsx4(Tag2, { className: cx(spacing !== "none" && `trc-section--${spacing}`, className), ...props, children });
 }
 function Card({
   as,
@@ -119,9 +134,9 @@ function Card({
   children,
   ...props
 }) {
-  const Tag = as ?? "div";
-  return /* @__PURE__ */ jsxs3(
-    Tag,
+  const Tag2 = as ?? "div";
+  return /* @__PURE__ */ jsxs4(
+    Tag2,
     {
       className: cx(
         "trc-card",
@@ -142,7 +157,7 @@ function Card({
 
 // src/components/field.tsx
 import { createContext, forwardRef as forwardRef2, useContext, useId } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FieldContext = createContext(null);
 function Field({ label, hint, error, required = false, id, className, children }) {
   const generated = useId();
@@ -153,10 +168,10 @@ function Field({ label, hint, error, required = false, id, className, children }
     FieldContext.Provider,
     {
       value: { id: fieldId, describedBy: message ? messageId : void 0, invalid: error != null, required },
-      children: /* @__PURE__ */ jsxs4("div", { className: cx("trc-field", className), children: [
-        /* @__PURE__ */ jsxs4("label", { htmlFor: fieldId, className: "trc-field__label", children: [
+      children: /* @__PURE__ */ jsxs5("div", { className: cx("trc-field", className), children: [
+        /* @__PURE__ */ jsxs5("label", { htmlFor: fieldId, className: "trc-field__label", children: [
           label,
-          required && /* @__PURE__ */ jsxs4("span", { "aria-hidden": true, className: "trc-field__required", children: [
+          required && /* @__PURE__ */ jsxs5("span", { "aria-hidden": true, className: "trc-field__required", children: [
             " ",
             "*"
           ] })
@@ -197,8 +212,8 @@ var Textarea = forwardRef2(function Textarea2({ invalid, rows = 4, className, ..
 var Select = forwardRef2(function Select2({ invalid, placeholder, defaultValue, className, children, ...props }, ref) {
   const a11y = useFieldProps({ ...props, invalid });
   const initial = defaultValue ?? (props.value === void 0 && placeholder != null ? "" : void 0);
-  return /* @__PURE__ */ jsxs4("span", { className: cx("trc-select", className), children: [
-    /* @__PURE__ */ jsxs4("select", { ref, className: "trc-control trc-control--select", defaultValue: initial, ...props, ...a11y, children: [
+  return /* @__PURE__ */ jsxs5("span", { className: cx("trc-select", className), children: [
+    /* @__PURE__ */ jsxs5("select", { ref, className: "trc-control trc-control--select", defaultValue: initial, ...props, ...a11y, children: [
       placeholder != null && /* @__PURE__ */ jsx5("option", { value: "", disabled: true, children: placeholder }),
       children
     ] }),
@@ -208,7 +223,7 @@ var Select = forwardRef2(function Select2({ invalid, placeholder, defaultValue,
 
 // src/components/toggle.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ToggleLabel({
   kind,
   label,
@@ -216,30 +231,32 @@ function ToggleLabel({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs5("label", { className: cx("trc-toggle", `trc-toggle--${kind}`, className), children: [
+  return /* @__PURE__ */ jsxs6("label", { className: cx("trc-toggle", `trc-toggle--${kind}`, className), children: [
     children,
-    /* @__PURE__ */ jsxs5("span", { className: "trc-toggle__text", children: [
+    /* @__PURE__ */ jsxs6("span", { className: "trc-toggle__text", children: [
       /* @__PURE__ */ jsx6("span", { className: "trc-toggle__label", children: label }),
       description != null && /* @__PURE__ */ jsx6("span", { className: "trc-toggle__description", children: description })
     ] })
   ] });
 }
 var Checkbox = forwardRef3(function Checkbox2({ label, description, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx6(ToggleLabel, { kind: "checkbox", label, description, className, children: /* @__PURE__ */ jsxs5("span", { className: "trc-checkbox", children: [
+  return /* @__PURE__ */ jsx6(ToggleLabel, { kind: "checkbox", label, description, className, children: /* @__PURE__ */ jsxs6("span", { className: "trc-checkbox", children: [
     /* @__PURE__ */ jsx6("input", { ref, type: "checkbox", className: "trc-checkbox__input", ...props }),
     /* @__PURE__ */ jsx6(Check, { className: "trc-checkbox__check" })
   ] }) });
 });
 var Switch = forwardRef3(function Switch2({ label, description, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx6(ToggleLabel, { kind: "switch", label, description, className, children: /* @__PURE__ */ jsxs5("span", { className: "trc-switch", children: [
+  return /* @__PURE__ */ jsx6(ToggleLabel, { kind: "switch", label, description, className, children: /* @__PURE__ */ jsxs6("span", { className: "trc-switch", children: [
     /* @__PURE__ */ jsx6("input", { ref, type: "checkbox", role: "switch", className: "trc-switch__input", ...props }),
     /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "trc-switch__thumb" })
   ] }) });
 });
 
 // src/components/site-header.tsx
-import { useEffect as useEffect2, useId as useId2, useRef as useRef2, useState } from "react";
-import { createPortal } from "react-dom";
+import { useEffect as useEffect2, useId as useId3, useRef as useRef3, useState } from "react";
+
+// src/components/layer.tsx
+import { useId as useId2, useRef as useRef2 } from "react";
 
 // src/hooks/use-modal.ts
 import { useEffect, useRef } from "react";
@@ -261,9 +278,9 @@ function useModal(open, panelRef, onClose) {
         return;
       }
       if (e.key !== "Tab") return;
-      const items = [...panel.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null);
-      const first = items[0];
-      const last = items[items.length - 1];
+      const items2 = [...panel.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null);
+      const first = items2[0];
+      const last = items2[items2.length - 1];
       if (!first || !last) {
         e.preventDefault();
         return;
@@ -285,8 +302,88 @@ function useModal(open, panelRef, onClose) {
   }, [open, panelRef]);
 }
 
+// src/utils/portal.tsx
+import { useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+var noop = () => () => {
+};
+var useIsClient = () => useSyncExternalStore(
+  noop,
+  () => true,
+  () => false
+);
+function Portal({ children }) {
+  return useIsClient() ? createPortal(children, document.body) : null;
+}
+
+// src/components/layer.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function ModalLayer({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  closeLabel,
+  closeOnOverlay,
+  rootClassName,
+  panelClassName
+}) {
+  const titleId = useId2();
+  const descriptionId = useId2();
+  const panel = useRef2(null);
+  useModal(open, panel, onClose);
+  return /* @__PURE__ */ jsx7(Portal, { children: /* @__PURE__ */ jsxs7("div", { className: cx("trc-layer", rootClassName, open && "trc-layer--open"), "aria-hidden": !open, children: [
+    /* @__PURE__ */ jsx7("div", { className: "trc-layer__overlay", onClick: closeOnOverlay ? onClose : void 0 }),
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref: panel,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": description != null ? descriptionId : void 0,
+        tabIndex: -1,
+        className: panelClassName,
+        children: [
+          /* @__PURE__ */ jsxs7("div", { className: "trc-layer__head", children: [
+            /* @__PURE__ */ jsx7("h2", { id: titleId, className: "trc-layer__title", children: title }),
+            /* @__PURE__ */ jsx7("button", { type: "button", className: "trc-layer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx7(Close, {}) })
+          ] }),
+          description != null && /* @__PURE__ */ jsx7("p", { id: descriptionId, className: "trc-layer__description", children: description }),
+          children != null && /* @__PURE__ */ jsx7("div", { className: "trc-layer__body", children }),
+          footer != null && /* @__PURE__ */ jsx7("div", { className: "trc-layer__footer", children: footer })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/drawer.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Drawer({
+  side = "right",
+  size: size2 = "sm",
+  closeLabel = "Close",
+  closeOnOverlay = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    ModalLayer,
+    {
+      ...props,
+      closeLabel,
+      closeOnOverlay,
+      rootClassName: `trc-layer--drawer trc-layer--${side}`,
+      panelClassName: cx("trc-drawer", `trc-drawer--${size2}`, className)
+    }
+  );
+}
+
 // src/components/site-header.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var isMenu = (item) => "items" in item;
 function SiteHeader({
   logo,
@@ -310,11 +407,11 @@ function SiteHeader({
     window.addEventListener("scroll", update, { passive: true });
     return () => window.removeEventListener("scroll", update);
   }, [scrollThreshold]);
-  return /* @__PURE__ */ jsxs6("header", { className: cx("trc-header", className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: cx("trc-header__bar", scrolled && "trc-header__bar--scrolled"), children: [
-      /* @__PURE__ */ jsx7(LinkTag, { href: homeHref, "aria-label": logoLabel, className: "trc-header__logo", children: logo }),
-      nav.length > 0 && /* @__PURE__ */ jsx7("nav", { className: "trc-header__nav", children: nav.map(
-        (item, i) => isMenu(item) ? /* @__PURE__ */ jsx7(NavDropdown, { menu: item, linkAs: LinkTag }, i) : /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs8("header", { className: cx("trc-header", className), children: [
+    /* @__PURE__ */ jsxs8("div", { className: cx("trc-header__bar", scrolled && "trc-header__bar--scrolled"), children: [
+      /* @__PURE__ */ jsx9(LinkTag, { href: homeHref, "aria-label": logoLabel, className: "trc-header__logo", children: logo }),
+      nav.length > 0 && /* @__PURE__ */ jsx9("nav", { className: "trc-header__nav", children: nav.map(
+        (item, i) => isMenu(item) ? /* @__PURE__ */ jsx9(NavDropdown, { menu: item, linkAs: LinkTag }, i) : /* @__PURE__ */ jsx9(
           LinkTag,
           {
             href: item.href,
@@ -325,10 +422,10 @@ function SiteHeader({
           i
         )
       ) }),
-      /* @__PURE__ */ jsxs6("div", { className: "trc-header__end", children: [
-        actions && /* @__PURE__ */ jsx7("div", { className: "trc-header__actions", children: actions }),
-        cta && /* @__PURE__ */ jsx7(PillLink, { as: LinkTag, href: cta.href, size: "sm", className: "trc-header__cta", children: cta.label }),
-        (nav.length > 0 || cta || mobileFooter) && /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs8("div", { className: "trc-header__end", children: [
+        actions && /* @__PURE__ */ jsx9("div", { className: "trc-header__actions", children: actions }),
+        cta && /* @__PURE__ */ jsx9(PillLink, { as: LinkTag, href: cta.href, size: "sm", className: "trc-header__cta", children: cta.label }),
+        (nav.length > 0 || cta || mobileFooter) && /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -336,12 +433,12 @@ function SiteHeader({
             "aria-label": menuLabel,
             "aria-expanded": open,
             onClick: () => setOpen(true),
-            children: /* @__PURE__ */ jsx7(Menu, {})
+            children: /* @__PURE__ */ jsx9(Menu, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       MobileMenu,
       {
         open,
@@ -357,19 +454,21 @@ function SiteHeader({
   ] });
 }
 function NavDropdown({ menu, linkAs: LinkTag }) {
-  const id = useId2();
+  const id = useId3();
   const [open, setOpen] = useState(false);
-  const closeTimer = useRef2(void 0);
-  const button = useRef2(null);
+  const closeTimer = useRef3(void 0);
+  const button = useRef3(null);
+  const openedByHover = useRef3(false);
   const show = () => {
     window.clearTimeout(closeTimer.current);
+    if (!open) openedByHover.current = true;
     setOpen(true);
   };
   const hide = () => {
     closeTimer.current = window.setTimeout(() => setOpen(false), 120);
   };
   useEffect2(() => () => window.clearTimeout(closeTimer.current), []);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: "trc-dropdown",
@@ -383,22 +482,25 @@ function NavDropdown({ menu, linkAs: LinkTag }) {
       },
       onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && setOpen(false),
       children: [
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs8(
           "button",
           {
             ref: button,
             type: "button",
             "aria-expanded": open,
             "aria-controls": id,
-            onClick: () => setOpen((o) => !o),
+            onClick: () => {
+              if (open && openedByHover.current) openedByHover.current = false;
+              else setOpen((o) => !o);
+            },
             className: cx("trc-header__link", "trc-dropdown__trigger", open && "trc-dropdown__trigger--open"),
             children: [
               menu.label,
-              /* @__PURE__ */ jsx7(ChevronDown, { className: "trc-dropdown__chevron" })
+              /* @__PURE__ */ jsx9(ChevronDown, { className: "trc-dropdown__chevron" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx7("div", { id, className: cx("trc-dropdown__panel", open && "trc-dropdown__panel--open"), children: /* @__PURE__ */ jsx7("ul", { className: "trc-dropdown__list", children: menu.items.map((item, i) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx9("div", { id, className: cx("trc-dropdown__panel", open && "trc-dropdown__panel--open"), children: /* @__PURE__ */ jsx9("ul", { className: "trc-dropdown__list", children: menu.items.map((item, i) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsxs8(
           LinkTag,
           {
             href: item.href,
@@ -406,8 +508,8 @@ function NavDropdown({ menu, linkAs: LinkTag }) {
             onClick: () => setOpen(false),
             className: "trc-dropdown__item",
             children: [
-              /* @__PURE__ */ jsx7("span", { className: "trc-dropdown__label", children: item.label }),
-              item.description != null && /* @__PURE__ */ jsx7("span", { className: "trc-dropdown__description", children: item.description })
+              /* @__PURE__ */ jsx9("span", { className: "trc-dropdown__label", children: item.label }),
+              item.description != null && /* @__PURE__ */ jsx9("span", { className: "trc-dropdown__description", children: item.description })
             ]
           }
         ) }, i)) }) })
@@ -425,66 +527,39 @@ function MobileMenu({
   title,
   closeLabel
 }) {
-  const titleId = useId2();
-  const panel = useRef2(null);
-  const [mounted, setMounted] = useState(false);
-  useEffect2(() => setMounted(true), []);
-  useModal(open, panel, onClose);
-  if (!mounted) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs6("div", { className: cx("trc-drawer", open && "trc-drawer--open"), "aria-hidden": !open, children: [
-      /* @__PURE__ */ jsx7("div", { className: "trc-drawer__overlay", onClick: onClose }),
-      /* @__PURE__ */ jsxs6(
-        "div",
+  return /* @__PURE__ */ jsxs8(Drawer, { open, onClose, title, closeLabel, className: "trc-mobile-menu", children: [
+    /* @__PURE__ */ jsx9("nav", { className: "trc-mobile-nav", children: nav.map(
+      (item, i) => isMenu(item) ? /* @__PURE__ */ jsxs8("div", { className: "trc-mobile-nav__group", children: [
+        /* @__PURE__ */ jsx9("p", { className: "trc-mobile-nav__heading", children: item.label }),
+        /* @__PURE__ */ jsx9("ul", { className: "trc-mobile-nav__sub", children: item.items.map((sub, j) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsx9(
+          LinkTag,
+          {
+            href: sub.href,
+            "aria-current": sub.active ? "page" : void 0,
+            onClick: onClose,
+            className: "trc-mobile-nav__sublink",
+            children: sub.label
+          }
+        ) }, j)) })
+      ] }, i) : /* @__PURE__ */ jsx9(
+        LinkTag,
         {
-          ref: panel,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": titleId,
-          tabIndex: -1,
-          className: "trc-drawer__panel",
-          children: [
-            /* @__PURE__ */ jsxs6("div", { className: "trc-drawer__head", children: [
-              /* @__PURE__ */ jsx7("p", { id: titleId, className: "trc-drawer__title", children: title }),
-              /* @__PURE__ */ jsx7("button", { type: "button", className: "trc-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx7(Close, {}) })
-            ] }),
-            /* @__PURE__ */ jsx7("nav", { className: "trc-mobile-nav", children: nav.map(
-              (item, i) => isMenu(item) ? /* @__PURE__ */ jsxs6("div", { className: "trc-mobile-nav__group", children: [
-                /* @__PURE__ */ jsx7("p", { className: "trc-mobile-nav__heading", children: item.label }),
-                /* @__PURE__ */ jsx7("ul", { className: "trc-mobile-nav__sub", children: item.items.map((sub, j) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(
-                  LinkTag,
-                  {
-                    href: sub.href,
-                    "aria-current": sub.active ? "page" : void 0,
-                    onClick: onClose,
-                    className: "trc-mobile-nav__sublink",
-                    children: sub.label
-                  }
-                ) }, j)) })
-              ] }, i) : /* @__PURE__ */ jsx7(
-                LinkTag,
-                {
-                  href: item.href,
-                  "aria-current": item.active ? "page" : void 0,
-                  onClick: onClose,
-                  className: cx("trc-mobile-nav__link", item.active && "trc-mobile-nav__link--active"),
-                  children: item.label
-                },
-                i
-              )
-            ) }),
-            cta && /* @__PURE__ */ jsx7(PillLink, { as: LinkTag, href: cta.href, onClick: onClose, className: "trc-drawer__cta", children: cta.label }),
-            footer != null && /* @__PURE__ */ jsx7("div", { className: "trc-drawer__footer", children: footer })
-          ]
-        }
+          href: item.href,
+          "aria-current": item.active ? "page" : void 0,
+          onClick: onClose,
+          className: cx("trc-mobile-nav__link", item.active && "trc-mobile-nav__link--active"),
+          children: item.label
+        },
+        i
       )
-    ] }),
-    document.body
-  );
+    ) }),
+    cta && /* @__PURE__ */ jsx9(PillLink, { as: LinkTag, href: cta.href, onClick: onClose, className: "trc-mobile-menu__cta", children: cta.label }),
+    footer != null && /* @__PURE__ */ jsx9("div", { className: "trc-mobile-menu__footer", children: footer })
+  ] });
 }
 
 // src/components/site-footer.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function SiteFooter({
   logo,
   logoLabel,
@@ -499,28 +574,28 @@ function SiteFooter({
   linkAs: LinkTag = "a",
   className
 }) {
-  return /* @__PURE__ */ jsx8("footer", { className: cx("trc-footer", className), children: /* @__PURE__ */ jsxs7("div", { className: "trc-footer__card", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "trc-footer__main", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "trc-footer__brand", children: [
-        logo != null && /* @__PURE__ */ jsx8(LinkTag, { href: homeHref, "aria-label": logoLabel, className: "trc-footer__logo", children: logo }),
-        tagline != null && /* @__PURE__ */ jsx8("p", { className: "trc-footer__tagline", children: tagline }),
-        children != null && /* @__PURE__ */ jsx8("div", { className: "trc-footer__extra", children })
+  return /* @__PURE__ */ jsx10("footer", { className: cx("trc-footer", className), children: /* @__PURE__ */ jsxs9("div", { className: "trc-footer__card", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "trc-footer__main", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "trc-footer__brand", children: [
+        logo != null && /* @__PURE__ */ jsx10(LinkTag, { href: homeHref, "aria-label": logoLabel, className: "trc-footer__logo", children: logo }),
+        tagline != null && /* @__PURE__ */ jsx10("p", { className: "trc-footer__tagline", children: tagline }),
+        children != null && /* @__PURE__ */ jsx10("div", { className: "trc-footer__extra", children })
       ] }),
-      columns.length > 0 && /* @__PURE__ */ jsx8("nav", { className: "trc-footer__columns", "aria-label": columnsLabel, children: columns.map((col, i) => /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsx8("p", { className: "trc-footer__heading", children: col.title }),
-        /* @__PURE__ */ jsx8("ul", { className: "trc-footer__list", children: col.links.map((link, j) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(LinkTag, { href: link.href, className: "trc-footer__link", children: link.label }) }, j)) })
+      columns.length > 0 && /* @__PURE__ */ jsx10("nav", { className: "trc-footer__columns", "aria-label": columnsLabel, children: columns.map((col, i) => /* @__PURE__ */ jsxs9("div", { children: [
+        /* @__PURE__ */ jsx10("p", { className: "trc-footer__heading", children: col.title }),
+        /* @__PURE__ */ jsx10("ul", { className: "trc-footer__list", children: col.links.map((link, j) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(LinkTag, { href: link.href, className: "trc-footer__link", children: link.label }) }, j)) })
       ] }, i)) })
     ] }),
-    (copyright != null || legal.length > 0) && /* @__PURE__ */ jsxs7("div", { className: "trc-footer__bottom", children: [
-      copyright != null && /* @__PURE__ */ jsx8("p", { className: "trc-footer__copyright", children: copyright }),
-      legal.length > 0 && /* @__PURE__ */ jsx8("nav", { "aria-label": legalLabel, className: "trc-footer__legal", children: legal.map((link, i) => /* @__PURE__ */ jsx8(LinkTag, { href: link.href, className: "trc-footer__legal-link", children: link.label }, i)) })
+    (copyright != null || legal.length > 0) && /* @__PURE__ */ jsxs9("div", { className: "trc-footer__bottom", children: [
+      copyright != null && /* @__PURE__ */ jsx10("p", { className: "trc-footer__copyright", children: copyright }),
+      legal.length > 0 && /* @__PURE__ */ jsx10("nav", { "aria-label": legalLabel, className: "trc-footer__legal", children: legal.map((link, i) => /* @__PURE__ */ jsx10(LinkTag, { href: link.href, className: "trc-footer__legal-link", children: link.label }, i)) })
     ] })
   ] }) });
 }
 
 // src/components/hero.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState2 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var delay = (ms) => ({ "--trc-delay": `${ms}ms` });
 function PageHero({
   title,
@@ -533,22 +608,22 @@ function PageHero({
   className
 }) {
   const words = title.split(" ").length;
-  return /* @__PURE__ */ jsx9("section", { className: cx("trc-hero-inset", className), children: /* @__PURE__ */ jsxs8("div", { className: "trc-page-hero", children: [
-    /* @__PURE__ */ jsx9("div", { "aria-hidden": true, className: "trc-hero__media", children: typeof image === "string" ? /* @__PURE__ */ jsx9("img", { src: image, alt: "", className: "trc-hero__image", style: { objectPosition: imagePosition } }) : image != null ? image : /* @__PURE__ */ jsx9("div", { className: "trc-page-hero__glow" }) }),
-    /* @__PURE__ */ jsx9("div", { "aria-hidden": true, className: "trc-page-hero__veil" }),
-    /* @__PURE__ */ jsxs8("div", { className: "trc-page-hero__content", children: [
-      /* @__PURE__ */ jsx9("h1", { className: "trc-display trc-page-hero__title trc-enter", style: delay(150), children: /* @__PURE__ */ jsx9(AccentText, { text: title, accentLast: accentLast ?? (words > 3 ? 2 : 1) }) }),
-      description != null && /* @__PURE__ */ jsx9("p", { className: "trc-page-hero__description trc-enter", style: delay(250), children: description }),
-      meta != null && /* @__PURE__ */ jsx9("div", { className: "trc-page-hero__meta trc-enter", style: delay(350), children: meta }),
-      children != null && /* @__PURE__ */ jsx9("div", { className: "trc-page-hero__actions trc-enter", style: delay(450), children })
+  return /* @__PURE__ */ jsx11("section", { className: cx("trc-hero-inset", className), children: /* @__PURE__ */ jsxs10("div", { className: "trc-page-hero", children: [
+    /* @__PURE__ */ jsx11("div", { "aria-hidden": true, className: "trc-hero__media", children: typeof image === "string" ? /* @__PURE__ */ jsx11("img", { src: image, alt: "", className: "trc-hero__image", style: { objectPosition: imagePosition } }) : image != null ? image : /* @__PURE__ */ jsx11("div", { className: "trc-page-hero__glow" }) }),
+    /* @__PURE__ */ jsx11("div", { "aria-hidden": true, className: "trc-page-hero__veil" }),
+    /* @__PURE__ */ jsxs10("div", { className: "trc-page-hero__content", children: [
+      /* @__PURE__ */ jsx11("h1", { className: "trc-display trc-page-hero__title trc-enter", style: delay(150), children: /* @__PURE__ */ jsx11(AccentText, { text: title, accentLast: accentLast ?? (words > 3 ? 2 : 1) }) }),
+      description != null && /* @__PURE__ */ jsx11("p", { className: "trc-page-hero__description trc-enter", style: delay(250), children: description }),
+      meta != null && /* @__PURE__ */ jsx11("div", { className: "trc-page-hero__meta trc-enter", style: delay(350), children: meta }),
+      children != null && /* @__PURE__ */ jsx11("div", { className: "trc-page-hero__actions trc-enter", style: delay(450), children })
     ] })
   ] }) });
 }
 var prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function HeroVideo({ clips, children, aside, fade = 1.2, parallax = true, className }) {
-  const videos = useRef3([]);
-  const section = useRef3(null);
-  const media = useRef3(null);
+  const videos = useRef4([]);
+  const section = useRef4(null);
+  const media = useRef4(null);
   const [active, setActive] = useState2(-1);
   useEffect3(() => {
     if (clips.length === 0) return;
@@ -591,8 +666,8 @@ function HeroVideo({ clips, children, aside, fade = 1.2, parallax = true, classN
     });
     setActive((i + 1) % clips.length);
   };
-  return /* @__PURE__ */ jsx9("section", { ref: section, className: cx("trc-hero-inset", className), children: /* @__PURE__ */ jsxs8("div", { className: "trc-hero-video", children: [
-    /* @__PURE__ */ jsx9("div", { ref: media, "aria-hidden": true, className: "trc-hero__media trc-hero-video__media", children: clips.map((clip, i) => /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx11("section", { ref: section, className: cx("trc-hero-inset", className), children: /* @__PURE__ */ jsxs10("div", { className: "trc-hero-video", children: [
+    /* @__PURE__ */ jsx11("div", { ref: media, "aria-hidden": true, className: "trc-hero__media trc-hero-video__media", children: clips.map((clip, i) => /* @__PURE__ */ jsxs10(
       "video",
       {
         ref: (el) => {
@@ -610,23 +685,23 @@ function HeroVideo({ clips, children, aside, fade = 1.2, parallax = true, classN
         },
         onEnded: () => i === active && playNext(i),
         children: [
-          clip.webm && /* @__PURE__ */ jsx9("source", { src: clip.webm, type: "video/webm" }),
-          clip.mp4 && /* @__PURE__ */ jsx9("source", { src: clip.mp4, type: "video/mp4" })
+          clip.webm && /* @__PURE__ */ jsx11("source", { src: clip.webm, type: "video/webm" }),
+          clip.mp4 && /* @__PURE__ */ jsx11("source", { src: clip.mp4, type: "video/mp4" })
         ]
       },
       i
     )) }),
-    /* @__PURE__ */ jsx9("div", { "aria-hidden": true, className: "trc-hero-video__veil" }),
-    /* @__PURE__ */ jsxs8("div", { className: "trc-hero-video__content", children: [
-      /* @__PURE__ */ jsx9("div", { className: "trc-hero-video__main", children }),
-      aside != null && /* @__PURE__ */ jsx9("div", { className: "trc-hero-video__aside", children: aside })
+    /* @__PURE__ */ jsx11("div", { "aria-hidden": true, className: "trc-hero-video__veil" }),
+    /* @__PURE__ */ jsxs10("div", { className: "trc-hero-video__content", children: [
+      /* @__PURE__ */ jsx11("div", { className: "trc-hero-video__main", children }),
+      aside != null && /* @__PURE__ */ jsx11("div", { className: "trc-hero-video__aside", children: aside })
     ] })
   ] }) });
 }
 
 // src/components/back-to-top.tsx
 import { useEffect as useEffect4, useState as useState3 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function BackToTop({ label = "Back to top", threshold = 0.8, className }) {
   const [visible, setVisible] = useState3(false);
   useEffect4(() => {
@@ -635,7 +710,7 @@ function BackToTop({ label = "Back to top", threshold = 0.8, className }) {
     window.addEventListener("scroll", update, { passive: true });
     return () => window.removeEventListener("scroll", update);
   }, [threshold]);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       type: "button",
@@ -647,39 +722,1902 @@ function BackToTop({ label = "Back to top", threshold = 0.8, className }) {
       "aria-hidden": !visible,
       tabIndex: visible ? 0 : -1,
       className: cx("trc-back-to-top", visible && "trc-back-to-top--visible", className),
-      children: /* @__PURE__ */ jsx10(ArrowUp, {})
+      children: /* @__PURE__ */ jsx12(ArrowUp, {})
+    }
+  );
+}
+
+// src/components/dialog.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Dialog({ size: size2 = "md", closeLabel = "Close", closeOnOverlay = true, className, ...props }) {
+  return /* @__PURE__ */ jsx13(
+    ModalLayer,
+    {
+      ...props,
+      closeLabel,
+      closeOnOverlay,
+      rootClassName: "trc-layer--dialog",
+      panelClassName: cx("trc-dialog", `trc-dialog--${size2}`, className)
+    }
+  );
+}
+
+// src/components/dropdown-menu.tsx
+import {
+  cloneElement,
+  useId as useId4,
+  useRef as useRef6,
+  useState as useState4
+} from "react";
+
+// src/hooks/use-floating.ts
+import { useEffect as useEffect5, useLayoutEffect, useRef as useRef5 } from "react";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect5 : useLayoutEffect;
+var MARGIN = 8;
+function useAnchoredPosition(open, anchorRef, floatingRef, { side = "bottom", align = "start", offset = 8 } = {}) {
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    const update = () => {
+      const anchor = anchorRef.current;
+      const floating = floatingRef.current;
+      if (!anchor || !floating) return;
+      const a = anchor.getBoundingClientRect();
+      const f = floating.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const below = a.bottom + offset;
+      const above = a.top - offset - f.height;
+      const fitsBelow = below + f.height <= vh - MARGIN;
+      const fitsAbove = above >= MARGIN;
+      const resolved = side === "bottom" ? fitsBelow || !fitsAbove ? "bottom" : "top" : fitsAbove || !fitsBelow ? "top" : "bottom";
+      const top = resolved === "bottom" ? below : above;
+      let left = align === "start" ? a.left : align === "end" ? a.right - f.width : a.left + a.width / 2 - f.width / 2;
+      left = Math.min(Math.max(left, MARGIN), Math.max(MARGIN, vw - f.width - MARGIN));
+      floating.style.top = `${Math.round(top)}px`;
+      floating.style.left = `${Math.round(left)}px`;
+      floating.dataset.side = resolved;
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, side, align, offset]);
+}
+function useDismiss(open, refs, onDismiss) {
+  const dismiss2 = useRef5(onDismiss);
+  dismiss2.current = onDismiss;
+  useEffect5(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!refs.some((ref) => ref.current?.contains(target))) dismiss2.current("outside");
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") dismiss2.current("escape");
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+}
+
+// src/utils/compose.ts
+import { version } from "react";
+function callAll(...fns) {
+  return (...args) => fns.forEach((fn) => fn?.(...args));
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref) ref.current = value;
+    }
+  };
+}
+function getElementRef(element) {
+  const fromProps = element.props.ref;
+  if (Number.parseInt(version, 10) >= 19) return fromProps;
+  return element.ref;
+}
+
+// src/components/dropdown-menu.tsx
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var isAction = (item) => item !== "separator";
+var textOf = (item) => (item.textValue ?? (typeof item.label === "string" ? item.label : "")).toLowerCase();
+function DropdownMenu({ trigger, items: items2, align = "start", linkAs: LinkTag = "a", className }) {
+  const [open, setOpen] = useState4(false);
+  const triggerRef = useRef6(null);
+  const menuRef = useRef6(null);
+  const itemRefs = useRef6([]);
+  const generatedId = useId4();
+  const triggerId = trigger.props.id ?? `${generatedId}-trigger`;
+  const menuId = `${generatedId}-menu`;
+  const enabled = items2.map((item, i) => isAction(item) && !item.disabled ? i : -1).filter((i) => i >= 0);
+  const focusItem = (index) => index !== void 0 && itemRefs.current[index]?.focus();
+  const openMenu = (focus) => {
+    setOpen(true);
+    requestAnimationFrame(() => focusItem(focus === "first" ? enabled[0] : enabled[enabled.length - 1]));
+  };
+  const close = (returnFocus = true) => {
+    setOpen(false);
+    if (returnFocus) triggerRef.current?.focus();
+  };
+  useAnchoredPosition(open, triggerRef, menuRef, { side: "bottom", align });
+  useDismiss(open, [triggerRef, menuRef], (reason) => close(reason === "escape"));
+  const select = (item) => {
+    item.onSelect?.();
+    close();
+  };
+  const onMenuKeyDown = (e) => {
+    const current = itemRefs.current.findIndex((el) => el === document.activeElement);
+    const position = enabled.indexOf(current);
+    const move = (to) => {
+      e.preventDefault();
+      focusItem(enabled[(to + enabled.length) % enabled.length]);
+    };
+    if (e.key === "ArrowDown") move(position + 1);
+    else if (e.key === "ArrowUp") move(position - 1);
+    else if (e.key === "Home") move(0);
+    else if (e.key === "End") move(enabled.length - 1);
+    else if (e.key === "Tab") close(false);
+    else if (e.key.length === 1 && /\S/.test(e.key)) {
+      const letter = e.key.toLowerCase();
+      const order = [...enabled.slice(position + 1), ...enabled.slice(0, position + 1)];
+      const match = order.find((i) => textOf(items2[i]).startsWith(letter));
+      if (match !== void 0) focusItem(match);
+    }
+  };
+  const triggerElement = cloneElement(trigger, {
+    ref: mergeRefs(triggerRef, getElementRef(trigger)),
+    id: triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? menuId : void 0,
+    onClick: callAll(trigger.props.onClick, () => open ? close() : openMenu("first")),
+    onKeyDown: callAll(trigger.props.onKeyDown, (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openMenu(e.key === "ArrowDown" ? "first" : "last");
+      }
+    })
+  });
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    triggerElement,
+    open && /* @__PURE__ */ jsx14(Portal, { children: /* @__PURE__ */ jsx14(
+      "div",
+      {
+        ref: menuRef,
+        id: menuId,
+        role: "menu",
+        "aria-labelledby": triggerId,
+        className: cx("trc-floating", "trc-menu", className),
+        onKeyDown: onMenuKeyDown,
+        children: items2.map((item, i) => {
+          if (!isAction(item)) return /* @__PURE__ */ jsx14("div", { role: "separator", className: "trc-menu__separator" }, i);
+          const shared = {
+            ref: (el) => {
+              itemRefs.current[i] = el;
+            },
+            role: "menuitem",
+            tabIndex: -1,
+            "aria-disabled": item.disabled || void 0,
+            className: cx("trc-menu__item", item.danger && "trc-menu__item--danger"),
+            onMouseMove: (e) => !item.disabled && e.currentTarget.focus(),
+            children: /* @__PURE__ */ jsxs11(Fragment3, { children: [
+              /* @__PURE__ */ jsx14("span", { className: "trc-menu__label", children: item.label }),
+              item.hint != null && /* @__PURE__ */ jsx14("span", { className: "trc-menu__hint", children: item.hint })
+            ] })
+          };
+          return item.href && !item.disabled ? /* @__PURE__ */ jsx14(LinkTag, { href: item.href, ...shared, onClick: () => select(item) }, i) : /* @__PURE__ */ jsx14(
+            "div",
+            {
+              ...shared,
+              onClick: () => !item.disabled && select(item),
+              onKeyDown: (e) => {
+                if ((e.key === "Enter" || e.key === " ") && !item.disabled) {
+                  e.preventDefault();
+                  select(item);
+                }
+              }
+            },
+            i
+          );
+        })
+      }
+    ) })
+  ] });
+}
+
+// src/components/popover.tsx
+import { cloneElement as cloneElement2, useEffect as useEffect6, useId as useId5, useRef as useRef7, useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function Popover({
+  trigger,
+  title,
+  label,
+  children,
+  side = "bottom",
+  align = "start",
+  open: controlled,
+  onOpenChange,
+  className
+}) {
+  const [uncontrolled, setUncontrolled] = useState5(false);
+  const open = controlled ?? uncontrolled;
+  const setOpen = (value) => {
+    if (controlled === void 0) setUncontrolled(value);
+    onOpenChange?.(value);
+  };
+  const triggerRef = useRef7(null);
+  const panelRef = useRef7(null);
+  const id = useId5();
+  useAnchoredPosition(open, triggerRef, panelRef, { side, align });
+  useDismiss(open, [triggerRef, panelRef], (reason) => {
+    setOpen(false);
+    if (reason === "escape") triggerRef.current?.focus();
+  });
+  useEffect6(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    const first = panel?.querySelector(
+      "[data-autofocus], input, select, textarea, button, a[href], [tabindex]:not([tabindex='-1'])"
+    );
+    (first ?? panel)?.focus();
+  }, [open]);
+  const triggerElement = cloneElement2(trigger, {
+    ref: mergeRefs(triggerRef, getElementRef(trigger)),
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "aria-controls": open ? `${id}-panel` : void 0,
+    onClick: callAll(trigger.props.onClick, () => setOpen(!open))
+  });
+  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    triggerElement,
+    open && /* @__PURE__ */ jsx15(Portal, { children: /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref: panelRef,
+        id: `${id}-panel`,
+        role: "dialog",
+        "aria-labelledby": title != null ? `${id}-title` : void 0,
+        "aria-label": title == null ? label : void 0,
+        tabIndex: -1,
+        className: cx("trc-floating", "trc-popover", className),
+        children: [
+          title != null && /* @__PURE__ */ jsx15("p", { id: `${id}-title`, className: "trc-popover__title", children: title }),
+          /* @__PURE__ */ jsx15("div", { className: "trc-popover__body", children })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/tooltip.tsx
+import { cloneElement as cloneElement3, useEffect as useEffect7, useId as useId6, useRef as useRef8, useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function Tooltip({ label, children, side = "top", delay: delay2 = 300, className }) {
+  const [open, setOpen] = useState6(false);
+  const anchorRef = useRef8(null);
+  const tipRef = useRef8(null);
+  const timer = useRef8(void 0);
+  const id = useId6();
+  const show = (wait) => {
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setOpen(true), wait);
+  };
+  const hide = () => {
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setOpen(false), 100);
+  };
+  useEffect7(() => () => window.clearTimeout(timer.current), []);
+  useEffect7(() => {
+    if (!open) return;
+    const onKeyDown = (e) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  useAnchoredPosition(open, anchorRef, tipRef, { side, align: "center", offset: 8 });
+  const child = cloneElement3(children, {
+    ref: mergeRefs(anchorRef, getElementRef(children)),
+    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" "),
+    onMouseEnter: callAll(children.props.onMouseEnter, () => show(delay2)),
+    onMouseLeave: callAll(children.props.onMouseLeave, hide),
+    onFocus: callAll(children.props.onFocus, () => show(0)),
+    onBlur: callAll(children.props.onBlur, () => {
+      window.clearTimeout(timer.current);
+      setOpen(false);
+    })
+  });
+  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    child,
+    /* @__PURE__ */ jsx16(Portal, { children: /* @__PURE__ */ jsx16(
+      "div",
+      {
+        ref: tipRef,
+        id,
+        role: "tooltip",
+        className: cx("trc-floating", "trc-tooltip", open && "trc-tooltip--open", className),
+        onMouseEnter: () => window.clearTimeout(timer.current),
+        onMouseLeave: hide,
+        children: label
+      }
+    ) })
+  ] });
+}
+
+// src/components/toast.tsx
+import { useEffect as useEffect8, useRef as useRef9, useState as useState7, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+var items = [];
+var nextId = 1;
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => listeners.forEach((listener) => listener());
+var subscribe = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+var EMPTY = [];
+var LEAVE_MS = 200;
+function dismiss(id) {
+  items = items.map((t) => id === void 0 || t.id === id ? { ...t, leaving: true } : t);
+  emit();
+  window.setTimeout(() => {
+    items = items.filter((t) => !(t.leaving && (id === void 0 || t.id === id)));
+    emit();
+  }, LEAVE_MS);
+}
+function toast(title, options = {}) {
+  const id = nextId++;
+  items = [...items, { ...options, id, title, leaving: false }];
+  emit();
+  return id;
+}
+toast.success = (title, options = {}) => toast(title, { ...options, tone: "success" });
+toast.error = (title, options = {}) => toast(title, { ...options, tone: "error" });
+toast.dismiss = dismiss;
+function Toaster({
+  position = "bottom-right",
+  duration = 5e3,
+  label = "Notifications",
+  closeLabel = "Close"
+}) {
+  const toasts = useSyncExternalStore2(
+    subscribe,
+    () => items,
+    () => EMPTY
+  );
+  const [paused, setPaused] = useState7(false);
+  return /* @__PURE__ */ jsx17(Portal, { children: /* @__PURE__ */ jsx17(
+    "section",
+    {
+      "aria-label": label,
+      className: cx("trc-toaster", `trc-toaster--${position}`),
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && setPaused(false),
+      children: /* @__PURE__ */ jsx17("ol", { "aria-live": "polite", "aria-relevant": "additions", className: "trc-toaster__list", children: toasts.map((t) => /* @__PURE__ */ jsx17(ToastCard, { toast: t, duration: t.duration ?? duration, paused, closeLabel }, t.id)) })
+    }
+  ) });
+}
+function ToastCard({
+  toast: t,
+  duration,
+  paused,
+  closeLabel
+}) {
+  const remaining = useRef9(duration);
+  useEffect8(() => {
+    if (paused || t.leaving || !Number.isFinite(remaining.current)) return;
+    const started = Date.now();
+    const timer = window.setTimeout(() => dismiss(t.id), remaining.current);
+    return () => {
+      window.clearTimeout(timer);
+      remaining.current -= Date.now() - started;
+    };
+  }, [paused, t.leaving, t.id]);
+  const tone = t.tone ?? "default";
+  return /* @__PURE__ */ jsxs14("li", { className: cx("trc-toast", `trc-toast--${tone}`, t.leaving && "trc-toast--leaving"), children: [
+    /* @__PURE__ */ jsxs14("div", { className: "trc-toast__text", role: tone === "error" ? "alert" : void 0, children: [
+      /* @__PURE__ */ jsx17("p", { className: "trc-toast__title", children: t.title }),
+      t.description != null && /* @__PURE__ */ jsx17("p", { className: "trc-toast__description", children: t.description })
+    ] }),
+    t.action && /* @__PURE__ */ jsx17(
+      "button",
+      {
+        type: "button",
+        className: "trc-toast__action",
+        onClick: () => {
+          t.action?.onClick();
+          dismiss(t.id);
+        },
+        children: t.action.label
+      }
+    ),
+    /* @__PURE__ */ jsx17("button", { type: "button", className: "trc-toast__close", "aria-label": closeLabel, onClick: () => dismiss(t.id), children: /* @__PURE__ */ jsx17(Close, {}) })
+  ] });
+}
+
+// src/components/alert.tsx
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+function Alert({ title, tone = "info", actions, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs15("div", { className: cx("trc-alert", `trc-alert--${tone}`, className), ...props, children: [
+    title != null && /* @__PURE__ */ jsx18("p", { className: "trc-alert__title", children: title }),
+    children != null && /* @__PURE__ */ jsx18("div", { className: "trc-alert__body", children }),
+    actions != null && /* @__PURE__ */ jsx18("div", { className: "trc-alert__actions", children: actions })
+  ] });
+}
+
+// src/components/tabs.tsx
+import { useId as useId7, useRef as useRef11 } from "react";
+
+// src/hooks/use-controllable.ts
+import { useRef as useRef10, useState as useState8 } from "react";
+function useControllable(value, defaultValue, onChange) {
+  const [internal, setInternal] = useState8(defaultValue);
+  const controlled = useRef10(value !== void 0).current;
+  const current = controlled ? value : internal;
+  const set = (next) => {
+    if (!controlled) setInternal(next);
+    onChange?.(next);
+  };
+  return [current, set];
+}
+
+// src/components/tabs.tsx
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function Tabs({
+  items: items2,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  activation = "automatic",
+  className
+}) {
+  const firstEnabled = items2.find((item) => !item.disabled)?.value ?? "";
+  const [selected, setSelected] = useControllable(value, defaultValue ?? firstEnabled, onValueChange);
+  const id = useId7();
+  const tabRefs = useRef11([]);
+  const enabled = items2.map((item, i) => item.disabled ? -1 : i).filter((i) => i >= 0);
+  const onKeyDown = (e, index) => {
+    const position = enabled.indexOf(index);
+    let target;
+    if (e.key === "ArrowRight") target = enabled[(position + 1) % enabled.length];
+    else if (e.key === "ArrowLeft") target = enabled[(position - 1 + enabled.length) % enabled.length];
+    else if (e.key === "Home") target = enabled[0];
+    else if (e.key === "End") target = enabled[enabled.length - 1];
+    if (target === void 0) return;
+    e.preventDefault();
+    tabRefs.current[target]?.focus();
+    if (activation === "automatic") setSelected(items2[target].value);
+  };
+  return /* @__PURE__ */ jsxs16("div", { className: cx("trc-tabs", className), children: [
+    /* @__PURE__ */ jsx19("div", { role: "tablist", "aria-label": label, className: "trc-tabs__list", children: items2.map((item, i) => {
+      const isSelected = item.value === selected;
+      return /* @__PURE__ */ jsx19(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[i] = el;
+          },
+          type: "button",
+          role: "tab",
+          id: `${id}-tab-${i}`,
+          "aria-selected": isSelected,
+          "aria-controls": `${id}-panel-${i}`,
+          disabled: item.disabled,
+          tabIndex: isSelected ? 0 : -1,
+          className: "trc-tabs__tab",
+          onClick: () => setSelected(item.value),
+          onKeyDown: (e) => onKeyDown(e, i),
+          children: item.label
+        },
+        item.value
+      );
+    }) }),
+    items2.map((item, i) => /* @__PURE__ */ jsx19(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${id}-panel-${i}`,
+        "aria-labelledby": `${id}-tab-${i}`,
+        hidden: item.value !== selected,
+        tabIndex: 0,
+        className: "trc-tabs__panel",
+        children: item.content
+      },
+      item.value
+    ))
+  ] });
+}
+
+// src/components/segmented-control.tsx
+import { useId as useId8 } from "react";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  name,
+  size: size2 = "md",
+  className
+}) {
+  const [selected, setSelected] = useControllable(value, defaultValue ?? options[0]?.value ?? "", onValueChange);
+  const generated = useId8();
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cx("trc-segmented", size2 === "sm" && "trc-segmented--sm", className),
+      children: options.map((option) => /* @__PURE__ */ jsxs17("label", { className: "trc-segmented__option", children: [
+        /* @__PURE__ */ jsx20(
+          "input",
+          {
+            type: "radio",
+            name: name ?? generated,
+            value: option.value,
+            checked: option.value === selected,
+            disabled: option.disabled,
+            onChange: () => setSelected(option.value),
+            className: "trc-segmented__input"
+          }
+        ),
+        /* @__PURE__ */ jsx20("span", { className: "trc-segmented__label", children: option.label })
+      ] }, option.value))
     }
   );
 }
+
+// src/components/accordion.tsx
+import { useId as useId9, useRef as useRef12 } from "react";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+function Accordion({
+  items: items2,
+  type = "single",
+  value,
+  defaultValue = [],
+  onValueChange,
+  headingLevel = 3,
+  className
+}) {
+  const [open, setOpen] = useControllable(value, defaultValue, onValueChange);
+  const id = useId9();
+  const buttons = useRef12([]);
+  const Heading2 = `h${headingLevel}`;
+  const enabled = items2.map((item, i) => item.disabled ? -1 : i).filter((i) => i >= 0);
+  const toggle = (itemValue) => {
+    const isOpen = open.includes(itemValue);
+    if (type === "single") setOpen(isOpen ? [] : [itemValue]);
+    else setOpen(isOpen ? open.filter((v) => v !== itemValue) : [...open, itemValue]);
+  };
+  const onKeyDown = (e, index) => {
+    const position = enabled.indexOf(index);
+    let target;
+    if (e.key === "ArrowDown") target = enabled[(position + 1) % enabled.length];
+    else if (e.key === "ArrowUp") target = enabled[(position - 1 + enabled.length) % enabled.length];
+    else if (e.key === "Home") target = enabled[0];
+    else if (e.key === "End") target = enabled[enabled.length - 1];
+    if (target === void 0) return;
+    e.preventDefault();
+    buttons.current[target]?.focus();
+  };
+  return /* @__PURE__ */ jsx21("div", { className: cx("trc-accordion", className), children: items2.map((item, i) => {
+    const isOpen = open.includes(item.value);
+    return /* @__PURE__ */ jsxs18("div", { className: cx("trc-accordion__item", isOpen && "trc-accordion__item--open"), children: [
+      /* @__PURE__ */ jsx21(Heading2, { className: "trc-accordion__heading", children: /* @__PURE__ */ jsxs18(
+        "button",
+        {
+          ref: (el) => {
+            buttons.current[i] = el;
+          },
+          type: "button",
+          id: `${id}-trigger-${i}`,
+          "aria-expanded": isOpen,
+          "aria-controls": `${id}-panel-${i}`,
+          disabled: item.disabled,
+          className: "trc-accordion__trigger",
+          onClick: () => toggle(item.value),
+          onKeyDown: (e) => onKeyDown(e, i),
+          children: [
+            /* @__PURE__ */ jsx21("span", { children: item.title }),
+            /* @__PURE__ */ jsx21(ChevronDown, { className: "trc-accordion__chevron" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx21(
+        "div",
+        {
+          id: `${id}-panel-${i}`,
+          role: "region",
+          "aria-labelledby": `${id}-trigger-${i}`,
+          className: "trc-accordion__panel",
+          children: /* @__PURE__ */ jsx21("div", { className: "trc-accordion__inner", children: /* @__PURE__ */ jsx21("div", { className: "trc-accordion__content", children: item.content }) })
+        }
+      )
+    ] }, item.value);
+  }) });
+}
+
+// src/components/steps.tsx
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+function Steps({ items: items2, current, className }) {
+  return /* @__PURE__ */ jsx22("ol", { className: cx("trc-steps", className), children: items2.map((item, i) => {
+    const state = current === void 0 ? "default" : i < current ? "complete" : i === current ? "current" : "upcoming";
+    return /* @__PURE__ */ jsxs19(
+      "li",
+      {
+        className: cx("trc-steps__item", `trc-steps__item--${state}`),
+        "aria-current": state === "current" ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ jsx22("span", { "aria-hidden": true, className: "trc-steps__number", children: String(i + 1).padStart(2, "0") }),
+          /* @__PURE__ */ jsxs19("div", { className: "trc-steps__text", children: [
+            /* @__PURE__ */ jsx22("p", { className: "trc-steps__title", children: item.title }),
+            item.description != null && /* @__PURE__ */ jsx22("div", { className: "trc-steps__description", children: item.description })
+          ] })
+        ]
+      },
+      i
+    );
+  }) });
+}
+
+// src/components/breadcrumbs.tsx
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+function Breadcrumbs({ items: items2, label = "Breadcrumb", linkAs: LinkTag = "a", className }) {
+  return /* @__PURE__ */ jsx23("nav", { "aria-label": label, className: cx("trc-breadcrumbs", className), children: /* @__PURE__ */ jsx23("ol", { className: "trc-breadcrumbs__list", children: items2.map((item, i) => {
+    const last = i === items2.length - 1;
+    return /* @__PURE__ */ jsxs20("li", { className: "trc-breadcrumbs__item", children: [
+      last || !item.href ? /* @__PURE__ */ jsx23("span", { "aria-current": last ? "page" : void 0, className: "trc-breadcrumbs__current", children: item.label }) : /* @__PURE__ */ jsx23(LinkTag, { href: item.href, className: "trc-breadcrumbs__link", children: item.label }),
+      !last && /* @__PURE__ */ jsx23("span", { "aria-hidden": true, className: "trc-breadcrumbs__separator", children: "/" })
+    ] }, i);
+  }) }) });
+}
+
+// src/utils/label.ts
+function fill(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
+}
+
+// src/components/pagination.tsx
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+function paginationRange(page, total, siblings = 1) {
+  const slots = siblings * 2 + 5;
+  if (total <= slots) return Array.from({ length: total }, (_, i) => i + 1);
+  const range = (from, to) => Array.from({ length: to - from + 1 }, (_, i) => from + i);
+  if (page <= siblings + 3) return [...range(1, slots - 2), "ellipsis", total];
+  if (page >= total - siblings - 2) return [1, "ellipsis", ...range(total - slots + 3, total)];
+  return [1, "ellipsis", ...range(page - siblings, page + siblings), "ellipsis", total];
+}
+function Pagination({
+  page,
+  total,
+  onPageChange,
+  href,
+  siblings = 1,
+  linkAs: LinkTag = "a",
+  label = "Pagination",
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  pageLabel = "Page {page}",
+  className
+}) {
+  if (total <= 1) return null;
+  const getHref = href === void 0 ? void 0 : typeof href === "string" ? (p) => href.replace("{page}", String(p)) : href;
+  const control = (target, content, extra) => {
+    const disabled = target < 1 || target > total;
+    const common = {
+      className: cx("trc-pagination__control", extra.className),
+      "aria-label": extra.ariaLabel,
+      "aria-current": extra.current ? "page" : void 0
+    };
+    if (getHref) {
+      return disabled ? /* @__PURE__ */ jsx24("span", { ...common, "aria-disabled": "true", children: content }) : /* @__PURE__ */ jsx24(LinkTag, { href: getHref(target), ...common, children: content });
+    }
+    return /* @__PURE__ */ jsx24("button", { type: "button", ...common, disabled, onClick: () => !extra.current && onPageChange?.(target), children: content });
+  };
+  return /* @__PURE__ */ jsx24("nav", { "aria-label": label, className: cx("trc-pagination", className), children: /* @__PURE__ */ jsxs21("ul", { className: "trc-pagination__list", children: [
+    /* @__PURE__ */ jsx24("li", { children: control(page - 1, /* @__PURE__ */ jsx24(ArrowLeft, {}), { className: "trc-pagination__step", ariaLabel: previousLabel }) }),
+    paginationRange(page, total, siblings).map(
+      (entry, i) => entry === "ellipsis" ? /* @__PURE__ */ jsx24("li", { "aria-hidden": true, className: "trc-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx24("li", { children: control(entry, entry, {
+        className: "trc-pagination__page",
+        ariaLabel: typeof pageLabel === "string" ? fill(pageLabel, { page: entry }) : pageLabel(entry),
+        current: entry === page
+      }) }, entry)
+    ),
+    /* @__PURE__ */ jsx24("li", { children: control(page + 1, /* @__PURE__ */ jsx24(ArrowRight, {}), { className: "trc-pagination__step", ariaLabel: nextLabel }) })
+  ] }) });
+}
+
+// src/components/language-switcher.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function LanguageSwitcher({
+  languages,
+  value,
+  onChange,
+  label = "Language",
+  linkAs: LinkTag = "a",
+  className
+}) {
+  return /* @__PURE__ */ jsx25("nav", { "aria-label": label, className: cx("trc-languages", className), children: languages.map((language) => {
+    const common = {
+      lang: language.code,
+      "aria-label": language.name,
+      "aria-current": language.code === value ? "true" : void 0,
+      className: "trc-languages__item",
+      children: language.code.toUpperCase()
+    };
+    return language.href ? /* @__PURE__ */ jsx25(LinkTag, { href: language.href, hrefLang: language.code, ...common }, language.code) : /* @__PURE__ */ jsx25("button", { type: "button", onClick: () => onChange?.(language.code), ...common }, language.code);
+  }) });
+}
+
+// src/components/radio-group.tsx
+import { useId as useId10 } from "react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+function RadioGroup({
+  label,
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  hint,
+  error,
+  required = false,
+  orientation = "vertical",
+  className
+}) {
+  const [selected, setSelected] = useControllable(
+    value,
+    defaultValue,
+    (v) => v && onValueChange?.(v)
+  );
+  const id = useId10();
+  const message = error ?? hint;
+  return /* @__PURE__ */ jsxs22(
+    "fieldset",
+    {
+      className: cx("trc-radio-group", className),
+      "aria-describedby": message != null ? `${id}-message` : void 0,
+      "aria-invalid": error != null || void 0,
+      "aria-required": required || void 0,
+      children: [
+        /* @__PURE__ */ jsxs22("legend", { className: "trc-field__label", children: [
+          label,
+          required && /* @__PURE__ */ jsxs22("span", { "aria-hidden": true, className: "trc-field__required", children: [
+            " ",
+            "*"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx26("div", { className: cx("trc-radio-group__options", orientation === "horizontal" && "trc-radio-group__options--row"), children: options.map((option) => /* @__PURE__ */ jsxs22("label", { className: "trc-toggle trc-toggle--radio", children: [
+          /* @__PURE__ */ jsx26("span", { className: "trc-radio", children: /* @__PURE__ */ jsx26(
+            "input",
+            {
+              type: "radio",
+              name: name ?? id,
+              value: option.value,
+              checked: selected === option.value,
+              disabled: option.disabled,
+              required,
+              onChange: () => setSelected(option.value),
+              className: "trc-radio__input"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs22("span", { className: "trc-toggle__text", children: [
+            /* @__PURE__ */ jsx26("span", { className: "trc-toggle__label", children: option.label }),
+            option.description != null && /* @__PURE__ */ jsx26("span", { className: "trc-toggle__description", children: option.description })
+          ] })
+        ] }, option.value)) }),
+        message != null && /* @__PURE__ */ jsx26("p", { id: `${id}-message`, className: cx("trc-field__message", error != null && "trc-field__message--error"), children: message })
+      ]
+    }
+  );
+}
+
+// src/components/password-input.tsx
+import { forwardRef as forwardRef4, useState as useState9 } from "react";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+var PasswordInput = forwardRef4(function PasswordInput2({ showLabel = "Show", hideLabel = "Hide", noun = "password", className, autoComplete = "current-password", ...props }, ref) {
+  const [visible, setVisible] = useState9(false);
+  const { id } = useFieldProps(props);
+  return /* @__PURE__ */ jsxs23("span", { className: cx("trc-password", className), children: [
+    /* @__PURE__ */ jsx27(Input, { ref, ...props, id, type: visible ? "text" : "password", autoComplete }),
+    /* @__PURE__ */ jsxs23("button", { type: "button", className: "trc-password__toggle", "aria-controls": id, onClick: () => setVisible((v) => !v), children: [
+      visible ? hideLabel : showLabel,
+      " ",
+      /* @__PURE__ */ jsx27("span", { className: "trc-visually-hidden", children: noun })
+    ] })
+  ] });
+});
+
+// src/components/pin-input.tsx
+import { useRef as useRef13 } from "react";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+function PinInput({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  type = "numeric",
+  mask = false,
+  label = "Verification code",
+  charLabel = "Character {index} of {length}",
+  invalid,
+  disabled,
+  id,
+  name,
+  className
+}) {
+  const [code, setCode] = useControllable(value, defaultValue, onChange);
+  const inputs = useRef13([]);
+  const field = useFieldProps({ id, invalid });
+  const accepted = type === "numeric" ? /[0-9]/ : /[0-9a-z]/i;
+  const clean = (text) => [...text].filter((c) => accepted.test(c)).join("");
+  const update = (next) => {
+    const trimmed = next.slice(0, length);
+    setCode(trimmed);
+    if (trimmed.length === length && !trimmed.includes(" ")) onComplete?.(trimmed);
+  };
+  const focus = (index) => {
+    const target = inputs.current[Math.max(0, Math.min(index, length - 1))];
+    target?.focus();
+    target?.select();
+  };
+  const charAt = (i) => code[i] && code[i] !== " " ? code[i] : "";
+  const setCharAt = (i, char) => {
+    const chars = Array.from({ length }, (_, k) => code[k] ?? " ");
+    chars[i] = char || " ";
+    return chars.join("").replace(/\s+$/, "");
+  };
+  const onInput = (i, raw) => {
+    const typed = clean(raw);
+    if (!typed) return;
+    if (typed.length > 1) {
+      const merged = (code.slice(0, i).padEnd(i, " ") + typed).slice(0, length);
+      update(merged);
+      focus(Math.min(i + typed.length, length - 1));
+      return;
+    }
+    update(setCharAt(i, typed.slice(-1)));
+    focus(i + 1);
+  };
+  const onKeyDown = (i, e) => {
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      if (charAt(i)) update(setCharAt(i, ""));
+      else if (i > 0) {
+        update(setCharAt(i - 1, ""));
+        focus(i - 1);
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focus(i - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focus(i + 1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focus(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focus(length - 1);
+    }
+  };
+  const onPaste = (i, e) => {
+    e.preventDefault();
+    onInput(i, e.clipboardData.getData("text"));
+  };
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      role: "group",
+      "aria-label": label,
+      "aria-describedby": field["aria-describedby"],
+      className: cx("trc-pin", className),
+      children: [
+        Array.from({ length }, (_, i) => /* @__PURE__ */ jsx28(
+          "input",
+          {
+            ref: (el) => {
+              inputs.current[i] = el;
+            },
+            id: i === 0 ? field.id : void 0,
+            type: mask ? "password" : "text",
+            inputMode: type === "numeric" ? "numeric" : "text",
+            autoComplete: i === 0 ? "one-time-code" : "off",
+            maxLength: length,
+            "aria-label": typeof charLabel === "string" ? fill(charLabel, { index: i + 1, length }) : charLabel(i, length),
+            "aria-invalid": field["aria-invalid"],
+            disabled,
+            value: charAt(i),
+            onChange: (e) => onInput(i, e.target.value.replace(charAt(i), "") || e.target.value),
+            onKeyDown: (e) => onKeyDown(i, e),
+            onPaste: (e) => onPaste(i, e),
+            onFocus: (e) => e.target.select(),
+            className: "trc-control trc-pin__box"
+          },
+          i
+        )),
+        name && /* @__PURE__ */ jsx28("input", { type: "hidden", name, value: code.replace(/\s/g, "") })
+      ]
+    }
+  );
+}
+
+// src/components/combobox.tsx
+import { useEffect as useEffect9, useId as useId11, useRef as useRef14, useState as useState10 } from "react";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+var normalize = (text) => text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+function Combobox({
+  options,
+  value,
+  defaultValue = null,
+  onValueChange,
+  placeholder,
+  emptyText = "No results",
+  invalid,
+  disabled,
+  required,
+  id,
+  name,
+  className
+}) {
+  const [selected, setSelected] = useControllable(value, defaultValue, onValueChange);
+  const selectedOption = options.find((o) => o.value === selected) ?? null;
+  const [query, setQuery] = useState10(selectedOption?.label ?? "");
+  const [open, setOpen] = useState10(false);
+  const [active, setActive] = useState10(-1);
+  const wrapperRef = useRef14(null);
+  const inputRef = useRef14(null);
+  const listRef = useRef14(null);
+  const listId = useId11();
+  const a11y = useFieldProps({ id, invalid, required });
+  const searching = query !== (selectedOption?.label ?? "");
+  const visible = searching ? options.filter((o) => normalize(o.label).includes(normalize(query))) : options;
+  const enabled = visible.map((o, i) => o.disabled ? -1 : i).filter((i) => i >= 0);
+  useEffect9(() => {
+    if (!open) setQuery(selectedOption?.label ?? "");
+  }, [selectedOption?.label, open]);
+  useAnchoredPosition(open, wrapperRef, listRef, { side: "bottom", align: "start", offset: 6 });
+  useIsomorphicLayoutEffect(() => {
+    if (open && listRef.current && wrapperRef.current)
+      listRef.current.style.width = `${wrapperRef.current.offsetWidth}px`;
+  }, [open]);
+  useDismiss(open, [wrapperRef, listRef], () => close());
+  useEffect9(() => {
+    if (open && active >= 0)
+      listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [open, active]);
+  const openList = (index) => {
+    setOpen(true);
+    const current = visible.findIndex((o) => o.value === selected);
+    setActive(index ?? (current >= 0 ? current : enabled[0] ?? -1));
+  };
+  const close = () => {
+    setOpen(false);
+    setActive(-1);
+    setQuery(selectedOption?.label ?? "");
+  };
+  const choose = (option) => {
+    if (option.disabled) return;
+    setSelected(option.value);
+    setQuery(option.label);
+    setOpen(false);
+    setActive(-1);
+  };
+  const onKeyDown = (e) => {
+    const position = enabled.indexOf(active);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) openList();
+      else setActive(enabled[(position + 1) % enabled.length] ?? -1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!open) openList(enabled[enabled.length - 1]);
+      else setActive(enabled[(position - 1 + enabled.length) % enabled.length] ?? -1);
+    } else if (e.key === "Enter" && open) {
+      e.preventDefault();
+      const option = visible[active];
+      if (option) choose(option);
+    } else if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        close();
+      } else if (query) {
+        setQuery(selectedOption?.label ?? "");
+      }
+    } else if (e.key === "Tab" && open) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ jsxs25("div", { ref: wrapperRef, className: cx("trc-combobox", className), children: [
+    /* @__PURE__ */ jsx29(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": open && active >= 0 ? `${listId}-${active}` : void 0,
+        autoComplete: "off",
+        placeholder,
+        disabled,
+        value: query,
+        onChange: (e) => {
+          setQuery(e.target.value);
+          setOpen(true);
+          setActive(0);
+        },
+        onClick: () => open ? close() : openList(),
+        onKeyDown,
+        className: "trc-control trc-combobox__input",
+        ...a11y
+      }
+    ),
+    /* @__PURE__ */ jsx29(ChevronDown, { "aria-hidden": true, className: "trc-combobox__chevron" }),
+    name && /* @__PURE__ */ jsx29("input", { type: "hidden", name, value: selected ?? "" }),
+    open && /* @__PURE__ */ jsx29(Portal, { children: /* @__PURE__ */ jsxs25("ul", { ref: listRef, id: listId, role: "listbox", className: "trc-floating trc-listbox", children: [
+      visible.length === 0 && /* @__PURE__ */ jsx29("li", { role: "presentation", className: "trc-listbox__empty", children: emptyText }),
+      visible.map((option, i) => /* @__PURE__ */ jsxs25(
+        "li",
+        {
+          id: `${listId}-${i}`,
+          "data-index": i,
+          role: "option",
+          "aria-selected": option.value === selected,
+          "aria-disabled": option.disabled || void 0,
+          className: cx("trc-listbox__option", i === active && "trc-listbox__option--active"),
+          onMouseDown: (e) => e.preventDefault(),
+          onMouseMove: () => !option.disabled && setActive(i),
+          onClick: () => choose(option),
+          children: [
+            /* @__PURE__ */ jsx29("span", { className: "trc-listbox__label", children: option.label }),
+            option.description != null && /* @__PURE__ */ jsx29("span", { className: "trc-listbox__description", children: option.description })
+          ]
+        },
+        option.value
+      ))
+    ] }) })
+  ] });
+}
+
+// src/components/file-input.tsx
+import {
+  forwardRef as forwardRef5,
+  useId as useId12,
+  useState as useState11
+} from "react";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+function acceptsFile(file, accept) {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean).some(
+    (rule) => rule.startsWith(".") ? name.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule
+  );
+}
+function validateFiles(files, { accept, maxSize, maxFiles }, alreadyAccepted = 0) {
+  const accepted = [];
+  const rejected = [];
+  for (const file of files) {
+    if (!acceptsFile(file, accept)) rejected.push({ file, reason: "type" });
+    else if (maxSize !== void 0 && file.size > maxSize) rejected.push({ file, reason: "size" });
+    else if (maxFiles !== void 0 && alreadyAccepted + accepted.length >= maxFiles)
+      rejected.push({ file, reason: "count" });
+    else accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+var FileInput = forwardRef5(function FileInput2({
+  onFilesChange,
+  buttonLabel = "Choose a file",
+  placeholder = "No file chosen",
+  countLabel = "{count} files",
+  disabled,
+  invalid,
+  className,
+  ...props
+}, ref) {
+  const [files, setFiles] = useState11([]);
+  const a11y = useFieldProps({ ...props, invalid });
+  const summary = files.length === 0 ? placeholder : files.length === 1 ? files[0].name : typeof countLabel === "string" ? fill(countLabel, { count: files.length }) : countLabel(files.length);
+  return /* @__PURE__ */ jsxs26("label", { className: cx("trc-file-input", disabled && "trc-file-input--disabled", className), children: [
+    /* @__PURE__ */ jsx30(
+      "input",
+      {
+        ref,
+        ...props,
+        ...a11y,
+        type: "file",
+        disabled,
+        className: "trc-visually-hidden",
+        onChange: (e) => {
+          const chosen = [...e.target.files ?? []];
+          setFiles(chosen);
+          onFilesChange?.(chosen);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx30("span", { "aria-hidden": true, className: "trc-file-input__button", children: buttonLabel }),
+    /* @__PURE__ */ jsx30("span", { className: cx("trc-file-input__name", files.length === 0 && "trc-file-input__name--empty"), children: summary })
+  ] });
+});
+var DEFAULT_REJECTIONS = {
+  type: "{name}: this type of file is not accepted",
+  size: "{name}: the file is too large",
+  count: "{name}: too many files"
+};
+function Dropzone({
+  accept,
+  maxSize,
+  maxFiles,
+  multiple = true,
+  onFilesChange,
+  title = "Drop files here or",
+  browseLabel = "browse",
+  hint,
+  removeLabel = "Remove {name}",
+  rejectionLabel = DEFAULT_REJECTIONS,
+  name,
+  disabled,
+  id,
+  className
+}) {
+  const [files, setFiles] = useState11([]);
+  const [rejections, setRejections] = useState11([]);
+  const rejectionText = (rejection) => typeof rejectionLabel === "function" ? rejectionLabel(rejection) : fill(rejectionLabel[rejection.reason] ?? DEFAULT_REJECTIONS[rejection.reason], { name: rejection.file.name });
+  const [dragging, setDragging] = useState11(false);
+  const hintId = useId12();
+  const a11y = useFieldProps({ id });
+  const add = (incoming) => {
+    const base2 = multiple ? files : [];
+    const { accepted, rejected } = validateFiles(
+      multiple ? incoming : incoming.slice(0, 1),
+      { accept, maxSize, maxFiles },
+      base2.length
+    );
+    const next = [...base2, ...accepted];
+    setFiles(next);
+    setRejections(rejected);
+    onFilesChange?.(next);
+  };
+  const remove = (index) => {
+    const next = files.filter((_, i) => i !== index);
+    setFiles(next);
+    setRejections([]);
+    onFilesChange?.(next);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    if (!disabled) add([...e.dataTransfer.files]);
+  };
+  return /* @__PURE__ */ jsxs26("div", { className: cx("trc-dropzone", className), children: [
+    /* @__PURE__ */ jsxs26(
+      "label",
+      {
+        className: cx(
+          "trc-dropzone__area",
+          dragging && "trc-dropzone__area--dragging",
+          disabled && "trc-dropzone__area--disabled"
+        ),
+        onDragEnter: (e) => {
+          e.preventDefault();
+          if (!disabled) setDragging(true);
+        },
+        onDragOver: (e) => e.preventDefault(),
+        onDragLeave: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+        },
+        onDrop,
+        children: [
+          /* @__PURE__ */ jsx30(
+            "input",
+            {
+              type: "file",
+              accept,
+              multiple,
+              name,
+              disabled,
+              className: "trc-visually-hidden",
+              onChange: (e) => {
+                add([...e.target.files ?? []]);
+                e.target.value = "";
+              },
+              ...a11y,
+              "aria-describedby": cx(a11y["aria-describedby"], hint != null && hintId) || void 0
+            }
+          ),
+          /* @__PURE__ */ jsxs26("span", { className: "trc-dropzone__title", children: [
+            title,
+            " ",
+            /* @__PURE__ */ jsx30("span", { className: "trc-dropzone__browse", children: browseLabel })
+          ] }),
+          hint != null && /* @__PURE__ */ jsx30("span", { id: hintId, "aria-hidden": true, className: "trc-dropzone__hint", children: hint })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx30("div", { "aria-live": "polite", children: rejections.length > 0 && /* @__PURE__ */ jsx30("ul", { className: "trc-dropzone__rejections", children: rejections.map((rejection, i) => /* @__PURE__ */ jsx30("li", { children: rejectionText(rejection) }, i)) }) }),
+    files.length > 0 && /* @__PURE__ */ jsx30("ul", { className: "trc-dropzone__files", children: files.map((file, i) => /* @__PURE__ */ jsxs26("li", { className: "trc-dropzone__file", children: [
+      /* @__PURE__ */ jsx30("span", { className: "trc-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ jsx30("span", { className: "trc-dropzone__file-size", children: formatBytes(file.size) }),
+      /* @__PURE__ */ jsx30(
+        "button",
+        {
+          type: "button",
+          className: "trc-dropzone__remove",
+          "aria-label": typeof removeLabel === "string" ? fill(removeLabel, { name: file.name }) : removeLabel(file),
+          onClick: () => remove(i),
+          children: /* @__PURE__ */ jsx30(Close, {})
+        }
+      )
+    ] }, `${file.name}-${i}`)) })
+  ] });
+}
+
+// src/components/slider.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+var Slider = forwardRef6(function Slider2({
+  value,
+  defaultValue,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = false,
+  formatValue = (v) => v,
+  invalid,
+  className,
+  style,
+  ...props
+}, ref) {
+  const [current, setCurrent] = useControllable(value, defaultValue ?? min, onValueChange);
+  const a11y = useFieldProps({ ...props, invalid });
+  const progress = max > min ? (current - min) / (max - min) * 100 : 0;
+  const formatted = formatValue(current);
+  return /* @__PURE__ */ jsxs27("div", { className: cx("trc-slider", className), children: [
+    /* @__PURE__ */ jsx31(
+      "input",
+      {
+        ref,
+        ...props,
+        ...a11y,
+        type: "range",
+        min,
+        max,
+        step,
+        value: current,
+        "aria-valuetext": typeof formatted === "string" ? formatted : void 0,
+        onChange: (e) => setCurrent(Number(e.target.value)),
+        className: "trc-slider__input",
+        style: { ...style, "--trc-slider-progress": `${progress}%` }
+      }
+    ),
+    showValue && /* @__PURE__ */ jsx31("output", { htmlFor: a11y.id, className: "trc-slider__value", "aria-hidden": true, children: formatted })
+  ] });
+});
+
+// src/components/date-picker.tsx
+import { useEffect as useEffect10, useId as useId13, useRef as useRef15, useState as useState12 } from "react";
+
+// src/utils/dates.ts
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+var addDays = (date, days) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+function addMonths(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
+}
+var sameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var toISODate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+function gridStart(month, weekStartsOn) {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1);
+  const offset = (first.getDay() - weekStartsOn + 7) % 7;
+  return addDays(first, -offset);
+}
+var isBefore = (a, b) => startOfDay(a).getTime() < startOfDay(b).getTime();
+
+// src/components/date-picker.tsx
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+function DatePicker({
+  value,
+  defaultValue = null,
+  onValueChange,
+  min,
+  max,
+  locale,
+  weekStartsOn = 1,
+  placeholder = "Choose a date",
+  formatDate,
+  name,
+  label = "Choose a date",
+  previousMonthLabel = "Previous month",
+  nextMonthLabel = "Next month",
+  invalid,
+  disabled,
+  required,
+  id,
+  className
+}) {
+  const [selected, setSelected] = useControllable(value, defaultValue, onValueChange);
+  const [open, setOpen] = useState12(false);
+  const [focused, setFocused] = useState12(() => startOfDay(selected ?? /* @__PURE__ */ new Date()));
+  const triggerRef = useRef15(null);
+  const panelRef = useRef15(null);
+  const uid = useId13();
+  const a11y = useFieldProps({ id, invalid, required });
+  const display = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+  const full = new Intl.DateTimeFormat(locale, { dateStyle: "full" });
+  const monthTitle = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" });
+  const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  const weekdayLong = new Intl.DateTimeFormat(locale, { weekday: "long" });
+  const format = formatDate ?? ((d) => display.format(d));
+  const outOfRange = (date) => !!min && isBefore(date, min) || !!max && isBefore(max, date);
+  const clamp = (date) => min && isBefore(date, min) ? startOfDay(min) : max && isBefore(max, date) ? startOfDay(max) : date;
+  const openCalendar = () => {
+    setFocused(clamp(startOfDay(selected ?? /* @__PURE__ */ new Date())));
+    setOpen(true);
+  };
+  const close = (returnFocus = true) => {
+    setOpen(false);
+    if (returnFocus) triggerRef.current?.focus();
+  };
+  const choose = (date) => {
+    if (outOfRange(date)) return;
+    setSelected(date);
+    close();
+  };
+  useAnchoredPosition(open, triggerRef, panelRef, { side: "bottom", align: "start" });
+  useDismiss(open, [triggerRef, panelRef], (reason) => close(reason === "escape"));
+  useEffect10(() => {
+    if (open) panelRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
+  }, [open, focused]);
+  const onGridKeyDown = (e) => {
+    const moves = {
+      ArrowLeft: () => addDays(focused, -1),
+      ArrowRight: () => addDays(focused, 1),
+      ArrowUp: () => addDays(focused, -7),
+      ArrowDown: () => addDays(focused, 7),
+      Home: () => addDays(focused, -((focused.getDay() - weekStartsOn + 7) % 7)),
+      End: () => addDays(focused, 6 - (focused.getDay() - weekStartsOn + 7) % 7),
+      PageUp: () => addMonths(focused, e.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(focused, e.shiftKey ? 12 : 1)
+    };
+    const move = moves[e.key];
+    if (move) {
+      e.preventDefault();
+      setFocused(clamp(move()));
+    }
+  };
+  const onPanelKeyDown = (e) => {
+    if (e.key !== "Tab") return;
+    const items2 = [
+      ...panelRef.current?.querySelectorAll("button:not([disabled]):not([tabindex='-1'])") ?? []
+    ];
+    const first = items2[0];
+    const last = items2[items2.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last?.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first?.focus();
+    }
+  };
+  const start = gridStart(focused, weekStartsOn);
+  const days = Array.from({ length: 42 }, (_, i) => addDays(start, i));
+  const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7));
+  const today = startOfDay(/* @__PURE__ */ new Date());
+  const valueId = `${uid}-value`;
+  return /* @__PURE__ */ jsxs28("div", { className: cx("trc-date-picker", className), children: [
+    /* @__PURE__ */ jsxs28(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        id: a11y.id,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-invalid": a11y["aria-invalid"],
+        "aria-describedby": cx(valueId, a11y["aria-describedby"]) || void 0,
+        disabled,
+        onClick: () => open ? close() : openCalendar(),
+        className: cx("trc-control", "trc-date-picker__trigger", !selected && "trc-date-picker__trigger--empty"),
+        children: [
+          /* @__PURE__ */ jsx32("span", { id: valueId, children: selected ? format(selected) : placeholder }),
+          /* @__PURE__ */ jsx32(Calendar, { className: "trc-date-picker__icon" })
+        ]
+      }
+    ),
+    name && /* @__PURE__ */ jsx32("input", { type: "hidden", name, value: selected ? toISODate(selected) : "", required }),
+    open && /* @__PURE__ */ jsx32(Portal, { children: /* @__PURE__ */ jsxs28(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": label,
+        className: "trc-floating trc-calendar",
+        onKeyDown: onPanelKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs28("div", { className: "trc-calendar__head", children: [
+            /* @__PURE__ */ jsx32(
+              "button",
+              {
+                type: "button",
+                className: "trc-calendar__nav",
+                "aria-label": previousMonthLabel,
+                onClick: () => setFocused(clamp(addMonths(focused, -1))),
+                children: /* @__PURE__ */ jsx32(ChevronLeft, {})
+              }
+            ),
+            /* @__PURE__ */ jsx32("p", { id: `${uid}-title`, className: "trc-calendar__title", "aria-live": "polite", children: monthTitle.format(focused) }),
+            /* @__PURE__ */ jsx32(
+              "button",
+              {
+                type: "button",
+                className: "trc-calendar__nav",
+                "aria-label": nextMonthLabel,
+                onClick: () => setFocused(clamp(addMonths(focused, 1))),
+                children: /* @__PURE__ */ jsx32(ChevronRight, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs28(
+            "table",
+            {
+              role: "grid",
+              "aria-labelledby": `${uid}-title`,
+              className: "trc-calendar__grid",
+              onKeyDown: onGridKeyDown,
+              children: [
+                /* @__PURE__ */ jsx32("thead", { children: /* @__PURE__ */ jsx32("tr", { children: weeks[0].map((day) => /* @__PURE__ */ jsx32("th", { scope: "col", abbr: weekdayLong.format(day), className: "trc-calendar__weekday", children: weekdayShort.format(day).replace(".", "").slice(0, 3) }, day.getDay())) }) }),
+                /* @__PURE__ */ jsx32("tbody", { children: weeks.map((week, w) => /* @__PURE__ */ jsx32("tr", { children: week.map((day) => {
+                  const isSelected = sameDay(day, selected);
+                  const disabledDay = outOfRange(day);
+                  return /* @__PURE__ */ jsx32("td", { role: "gridcell", "aria-selected": isSelected || void 0, children: /* @__PURE__ */ jsx32(
+                    "button",
+                    {
+                      type: "button",
+                      "data-date": toISODate(day),
+                      tabIndex: sameDay(day, focused) ? 0 : -1,
+                      "aria-label": full.format(day),
+                      "aria-current": sameDay(day, today) ? "date" : void 0,
+                      disabled: disabledDay,
+                      onClick: () => choose(day),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          choose(day);
+                        }
+                      },
+                      className: cx(
+                        "trc-calendar__day",
+                        day.getMonth() !== focused.getMonth() && "trc-calendar__day--outside",
+                        isSelected && "trc-calendar__day--selected"
+                      ),
+                      children: day.getDate()
+                    }
+                  ) }, toISODate(day));
+                }) }, w)) })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/avatar.tsx
+import { Children, useState as useState13 } from "react";
+import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+function initials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const letters = words.length > 1 ? [words[0][0], words[words.length - 1][0]] : [words[0]?.[0]];
+  return letters.filter(Boolean).join("").toUpperCase();
+}
+function Avatar({ name, src, size: size2 = "md", className }) {
+  const [failed, setFailed] = useState13(false);
+  const showImage = src && !failed;
+  return /* @__PURE__ */ jsx33("span", { className: cx("trc-avatar", `trc-avatar--${size2}`, className), children: showImage ? /* @__PURE__ */ jsx33("img", { src, alt: name, className: "trc-avatar__image", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx33("span", { role: "img", "aria-label": name, className: "trc-avatar__initials", children: initials(name) }) });
+}
+function AvatarGroup({
+  children,
+  max = 4,
+  moreLabel = "{count} more",
+  size: size2 = "md",
+  className
+}) {
+  const items2 = Children.toArray(children);
+  const hidden = items2.length - max;
+  return /* @__PURE__ */ jsxs29("span", { className: cx("trc-avatar-group", className), children: [
+    items2.slice(0, max),
+    hidden > 0 && /* @__PURE__ */ jsx33("span", { className: cx("trc-avatar", `trc-avatar--${size2}`, "trc-avatar--more"), children: /* @__PURE__ */ jsxs29(
+      "span",
+      {
+        role: "img",
+        "aria-label": typeof moreLabel === "string" ? fill(moreLabel, { count: hidden }) : moreLabel(hidden),
+        className: "trc-avatar__initials",
+        children: [
+          "+",
+          hidden
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/tag.tsx
+import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
+function Tag({ tone = "default", onRemove, removeLabel = "Remove", className, children, ...props }) {
+  return /* @__PURE__ */ jsxs30("span", { className: cx("trc-tag", tone === "accent" && "trc-tag--accent", className), ...props, children: [
+    children,
+    onRemove && /* @__PURE__ */ jsx34(
+      "button",
+      {
+        type: "button",
+        className: "trc-tag__remove",
+        "aria-label": `${removeLabel} ${typeof children === "string" ? children : ""}`.trim(),
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsx34(Close, {})
+      }
+    )
+  ] });
+}
+
+// src/components/stat.tsx
+import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+function Stat({ label, value, change, changeTone = "neutral", description, className }) {
+  return /* @__PURE__ */ jsxs31("dl", { className: cx("trc-stat", className), children: [
+    /* @__PURE__ */ jsx35("dt", { className: "trc-stat__label", children: label }),
+    /* @__PURE__ */ jsx35("dd", { className: "trc-stat__value", children: value }),
+    (change != null || description != null) && /* @__PURE__ */ jsxs31("dd", { className: "trc-stat__meta", children: [
+      change != null && /* @__PURE__ */ jsx35("span", { className: cx("trc-stat__change", `trc-stat__change--${changeTone}`), children: change }),
+      description != null && /* @__PURE__ */ jsx35("span", { className: "trc-stat__description", children: description })
+    ] })
+  ] });
+}
+
+// src/components/table.tsx
+import { useState as useState14 } from "react";
+import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+var compare = (a, b) => {
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a ?? "").localeCompare(String(b ?? ""), void 0, { numeric: true, sensitivity: "base" });
+};
+function Table({
+  columns,
+  rows,
+  rowKey,
+  caption,
+  hideCaption = false,
+  defaultSort,
+  dense = false,
+  emptyText = "No data",
+  className
+}) {
+  const [sort, setSort] = useState14(defaultSort);
+  const field = (row, key) => row[key];
+  const sorted = (() => {
+    const column = columns.find((c) => c.key === sort?.key);
+    if (!sort || !column) return rows;
+    const value = (row) => column.sortValue ? column.sortValue(row) : field(row, column.key);
+    const ordered = [...rows].sort((a, b) => compare(value(a), value(b)));
+    return sort.direction === "ascending" ? ordered : ordered.reverse();
+  })();
+  const toggle = (key) => setSort(
+    (current) => current?.key === key && current.direction === "ascending" ? { key, direction: "descending" } : { key, direction: "ascending" }
+  );
+  return /* @__PURE__ */ jsx36(
+    "div",
+    {
+      className: cx("trc-table", dense && "trc-table--dense", className),
+      role: "region",
+      "aria-label": typeof caption === "string" ? caption : void 0,
+      tabIndex: 0,
+      children: /* @__PURE__ */ jsxs32("table", { className: "trc-table__table", children: [
+        /* @__PURE__ */ jsx36("caption", { className: cx("trc-table__caption", hideCaption && "trc-visually-hidden"), children: caption }),
+        /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsx36("tr", { children: columns.map((column) => {
+          const direction = sort?.key === column.key ? sort.direction : void 0;
+          return /* @__PURE__ */ jsx36(
+            "th",
+            {
+              scope: "col",
+              "aria-sort": column.sortable ? direction ?? "none" : void 0,
+              className: cx("trc-table__head", column.align && `trc-table__cell--${column.align}`),
+              children: column.sortable ? /* @__PURE__ */ jsxs32("button", { type: "button", className: "trc-table__sort", onClick: () => toggle(column.key), children: [
+                column.header,
+                /* @__PURE__ */ jsx36(
+                  ChevronDown,
+                  {
+                    className: cx(
+                      "trc-table__sort-icon",
+                      direction && "trc-table__sort-icon--active",
+                      direction === "ascending" && "trc-table__sort-icon--up"
+                    )
+                  }
+                )
+              ] }) : column.header
+            },
+            column.key
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx36("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36("td", { colSpan: columns.length, className: "trc-table__empty", children: emptyText }) }) : sorted.map((row) => /* @__PURE__ */ jsx36("tr", { children: columns.map((column) => /* @__PURE__ */ jsx36(
+          "td",
+          {
+            className: cx("trc-table__cell", column.align && `trc-table__cell--${column.align}`),
+            children: column.render ? column.render(row) : field(row, column.key)
+          },
+          column.key
+        )) }, rowKey(row))) })
+      ] })
+    }
+  );
+}
+
+// src/components/loading.tsx
+import { useId as useId14 } from "react";
+import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+var size = (value) => typeof value === "number" ? `${value}px` : value;
+function Skeleton({ width, height, circle = false, lines, className }) {
+  if (lines && lines > 1) {
+    return /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: cx("trc-skeleton-lines", className), style: { width: size(width) }, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx37(
+      "span",
+      {
+        className: "trc-skeleton trc-skeleton--text",
+        style: { width: i === lines - 1 ? "60%" : "100%" }
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx37(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cx(
+        "trc-skeleton",
+        circle && "trc-skeleton--circle",
+        !height && !circle && "trc-skeleton--text",
+        className
+      ),
+      style: { width: size(width), height: size(height) ?? (circle ? size(width) : void 0) }
+    }
+  );
+}
+function Spinner2({ size: s = "md", label = "Loading", className }) {
+  return /* @__PURE__ */ jsxs33("span", { role: "status", className: cx("trc-spinner", `trc-spinner--${s}`, className), children: [
+    /* @__PURE__ */ jsxs33("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: "trc-spinner__svg", children: [
+      /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "10", className: "trc-spinner__track" }),
+      /* @__PURE__ */ jsx37("path", { d: "M12 2a10 10 0 0 1 10 10", className: "trc-spinner__arc" })
+    ] }),
+    /* @__PURE__ */ jsx37("span", { className: "trc-visually-hidden", children: label })
+  ] });
+}
+function Progress({
+  value,
+  max = 100,
+  label,
+  "aria-label": ariaLabel,
+  showValue = false,
+  formatValue = (v, m) => `${Math.round(v / m * 100)} %`,
+  className
+}) {
+  const id = useId14();
+  const determinate = value !== void 0 && value !== null;
+  const clamped = determinate ? Math.min(Math.max(value, 0), max) : 0;
+  const text = determinate ? formatValue(clamped, max) : void 0;
+  return /* @__PURE__ */ jsxs33("div", { className: cx("trc-progress", !determinate && "trc-progress--indeterminate", className), children: [
+    (label != null || showValue && text) && /* @__PURE__ */ jsxs33("div", { className: "trc-progress__head", children: [
+      label != null && /* @__PURE__ */ jsx37("span", { id: `${id}-label`, className: "trc-progress__label", children: label }),
+      showValue && text && /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "trc-progress__value", children: text })
+    ] }),
+    /* @__PURE__ */ jsx37(
+      "div",
+      {
+        role: "progressbar",
+        "aria-labelledby": label != null ? `${id}-label` : void 0,
+        "aria-label": label == null ? ariaLabel : void 0,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": determinate ? clamped : void 0,
+        "aria-valuetext": text,
+        className: "trc-progress__track",
+        children: /* @__PURE__ */ jsx37(
+          "div",
+          {
+            className: "trc-progress__fill",
+            style: { "--trc-progress": `${clamped / max * 100}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/kbd.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+function Kbd({ className, ...props }) {
+  return /* @__PURE__ */ jsx38("kbd", { className: cx("trc-kbd", className), ...props });
+}
+function Divider({ label, orientation = "horizontal", className }) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx38("span", { role: "separator", "aria-orientation": "vertical", className: cx("trc-divider--vertical", className) });
+  }
+  if (label == null) return /* @__PURE__ */ jsx38("hr", { className: cx("trc-divider", className) });
+  return /* @__PURE__ */ jsx38("div", { role: "separator", className: cx("trc-divider-label", className), children: /* @__PURE__ */ jsx38("span", { className: "trc-divider-label__text", children: label }) });
+}
+
+// src/components/code-block.tsx
+import { useEffect as useEffect11, useRef as useRef16, useState as useState15 } from "react";
+import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+var BADGES = {
+  tsx: "TS",
+  ts: "TS",
+  jsx: "JS",
+  js: "JS",
+  css: "CSS",
+  bash: "SH",
+  sh: "SH",
+  html: "HTML",
+  json: "JSON"
+};
+var CopyIcon = () => /* @__PURE__ */ jsxs34(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx39("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5" }),
+      /* @__PURE__ */ jsx39("path", { d: "M5 15H4.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5" })
+    ]
+  }
+);
+function CodeBlock({
+  code,
+  title,
+  language,
+  children,
+  copyLabel = "Copy code",
+  copiedLabel = "Copied",
+  className
+}) {
+  const [copied, setCopied] = useState15(false);
+  const timer = useRef16(void 0);
+  useEffect11(() => () => window.clearTimeout(timer.current), []);
+  const copy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setCopied(false), 1600);
+  };
+  const button = /* @__PURE__ */ jsxs34(
+    "button",
+    {
+      type: "button",
+      onClick: copy,
+      className: "trc-code__copy",
+      "aria-label": copyLabel,
+      title: copyLabel,
+      "data-copied": copied,
+      children: [
+        copied ? /* @__PURE__ */ jsx39(Check, {}) : /* @__PURE__ */ jsx39(CopyIcon, {}),
+        /* @__PURE__ */ jsx39("span", { className: "trc-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs34("div", { className: cx("trc-code", title == null && "trc-code--bare", className), children: [
+    title != null ? /* @__PURE__ */ jsxs34("div", { className: "trc-code__bar", children: [
+      /* @__PURE__ */ jsxs34("span", { className: "trc-code__file", children: [
+        language && /* @__PURE__ */ jsx39("span", { className: "trc-code__lang", children: BADGES[language] ?? language.toUpperCase() }),
+        title
+      ] }),
+      button
+    ] }) : button,
+    /* @__PURE__ */ jsx39("pre", { className: "trc-code__pre", children: /* @__PURE__ */ jsx39("code", { children: children ?? code }) })
+  ] });
+}
 export {
   AccentText,
+  Accordion,
+  Alert,
   ArrowLeft,
   ArrowRight,
   ArrowUp,
+  Avatar,
+  AvatarGroup,
   BackToTop,
+  Breadcrumbs,
+  Calendar,
   Card,
   Check,
   Checkbox,
   ChevronDown,
+  ChevronLeft,
+  ChevronRight,
   Close,
+  CodeBlock,
+  Combobox,
   Container,
+  DatePicker,
+  Dialog,
+  Divider,
+  Drawer,
+  DropdownMenu,
+  Dropzone,
   Field,
+  FileInput,
   Heading,
   HeroVideo,
   Input,
+  Kbd,
+  LanguageSwitcher,
   Menu,
   PageHero,
+  Pagination,
+  PasswordInput,
   PillButton,
   PillLink,
+  PinInput,
+  Popover,
+  Progress,
+  RadioGroup,
   Section,
+  SegmentedControl,
   Select,
   SiteFooter,
   SiteHeader,
+  Skeleton,
+  Slider,
+  Spinner2 as Spinner,
+  Stat,
   StepNumber,
+  Steps,
   Switch,
+  Table,
+  Tabs,
+  Tag,
   Text,
   Textarea,
+  Toaster,
+  Tooltip,
+  acceptsFile,
   cx,
-  plainText
+  formatBytes,
+  initials,
+  paginationRange,
+  plainText,
+  toast,
+  validateFiles
 };
 //# sourceMappingURL=index.js.map