@gunkin/uiify 0.0.1-alpha

package/dist/components/internal/choice-family/types.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+export interface ChoiceItem {
+    readonly value: string;
+    readonly label: ReactNode;
+    readonly disabled?: boolean;
+}
+export interface ChoicePanelItem extends ChoiceItem {
+    readonly panel?: ReactNode;
+}
+export type ChoiceOrientation = "horizontal" | "vertical";
+/** "single" renders `type="radio"` and a plain group name; "multiple" renders
+ * `type="checkbox"` and suffixes the group name (see `getChoiceGroupName`). */
+export type ChoiceGroupKind = "single" | "multiple";
+export interface ChoiceGroupProps<TItem extends ChoiceItem = ChoiceItem> {
+    readonly id: string;
+    readonly items: readonly TItem[];
+    readonly namespace: string;
+    readonly kind: ChoiceGroupKind;
+    readonly isChecked: (item: TItem) => boolean;
+    readonly isControlled?: boolean;
+    /** Overrides the derived `getChoiceGroupName(id, kind)` group name. */
+    readonly name?: string;
+    readonly orientation: ChoiceOrientation;
+    readonly className?: string;
+    /** Part name for each item's wrapper div. Defaults to "item" (Stepper uses "step"). */
+    readonly itemPart?: string;
+    /** Adds `data-part="label"` to the label. */
+    readonly labelPart?: boolean;
+    /** Adds `data-uiify-<namespace>-input` to the input. */
+    readonly withInputAttribute?: boolean;
+    /** Adds `data-uiify-<namespace>-trigger` to the label. */
+    readonly withTriggerAttribute?: boolean;
+    /** Extra attributes spread onto the root, e.g. `data-full-width`, `aria-label`. */
+    readonly rootAttributes?: Record<string, string | undefined>;
+    /** Extra attributes spread onto each item's wrapper div, e.g. Stepper's `data-complete`. */
+    readonly itemWrapperAttributes?: (item: TItem) => Record<string, string | undefined>;
+    /** Per-item `className` hook for the input, e.g. RadioGroup's `item.className`. */
+    readonly itemInputClassName?: (item: TItem) => string | undefined;
+    /** Fires on the input's native `change` event, e.g. a client wrapper syncing
+     * a controlled value. Omitted by every uncontrolled (server) consumer. */
+    readonly onItemChange?: (item: TItem) => void;
+    /** Renders the panel content and its wrapper when given; omitted entirely otherwise. */
+    readonly renderPanel?: (item: TItem) => ReactNode;
+    /** Overrides the default `item.label` content, e.g. Stepper's label + description. */
+    readonly renderLabel?: (item: TItem) => ReactNode;
+    /** Trailing content rendered inside the root after the mapped items, e.g. Tabs' `append`. */
+    readonly append?: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/internal/choice-family/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/choice-family/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D;+EAC+E;AAC/E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpD,MAAM,WAAW,gBAAgB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IACrE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,KAAK,EAAE,CAAC;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC;IAC/B,QAAQ,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;IAC7C,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,uEAAuE;IACvE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,uFAAuF;IACvF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,wDAAwD;IACxD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,0DAA0D;IAC1D,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC,mFAAmF;IACnF,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC7D,4FAA4F;IAC5F,QAAQ,CAAC,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACrF,mFAAmF;IACnF,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,GAAG,SAAS,CAAC;IAClE;8EAC0E;IAC1E,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9C,wFAAwF;IACxF,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,SAAS,CAAC;IAClD,sFAAsF;IACtF,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,SAAS,CAAC;IAClD,6FAA6F;IAC7F,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;CAC7B"}

package/dist/components/internal/choice-family/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/internal/choice-family/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/internal/menu/focus-menu-item.d.ts

@@ -0,0 +1,4 @@
+export declare function focusMenuItem(container: HTMLElement | null, options?: {
+    readonly last?: boolean;
+}): void;
+//# sourceMappingURL=focus-menu-item.d.ts.map

package/dist/components/internal/menu/focus-menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/menu/focus-menu-item.ts"],"names":[],"mappings":"AAYA,wBAAgB,aAAa,CAC3B,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,OAAO,GAAE;IAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAO,GACxC,IAAI,CAKN"}

package/dist/components/internal/menu/focus-menu-item.js

@@ -0,0 +1,11 @@
+const MENU_ITEM_SELECTOR = '[role="menuitem"]:not([aria-disabled="true"]),[role="menuitemcheckbox"]:not([aria-disabled="true"]),[role="menuitemradio"]:not([aria-disabled="true"])';
+function focusMenuItem(container, options = {}) {
+  if (!container) return;
+  const items = container.querySelectorAll(MENU_ITEM_SELECTOR);
+  const target = options.last ? items[items.length - 1] : items[0];
+  target?.focus({ preventScroll: true });
+}
+export {
+  focusMenuItem
+};
+//# sourceMappingURL=focus-menu-item.js.map

package/dist/components/internal/menu/focus-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/internal/menu/focus-menu-item.ts"],"sourcesContent":["/**\n * Move focus to the first (or last) enabled item of an open menu surface.\n *\n * One selector shared by DropdownMenu and ContextMenu. Before this, DropdownMenu\n * looked only at `[role=\"menuitem\"]` (missing checkbox/radio items) and\n * ContextMenu looked at all three roles but focused disabled ones.\n */\nconst MENU_ITEM_SELECTOR =\n  '[role=\"menuitem\"]:not([aria-disabled=\"true\"]),' +\n  '[role=\"menuitemcheckbox\"]:not([aria-disabled=\"true\"]),' +\n  '[role=\"menuitemradio\"]:not([aria-disabled=\"true\"])';\n\nexport function focusMenuItem(\n  container: HTMLElement | null,\n  options: { readonly last?: boolean } = {},\n): void {\n  if (!container) return;\n  const items = container.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR);\n  const target = options.last ? items[items.length - 1] : items[0];\n  target?.focus({ preventScroll: true });\n}\n"],"mappings":"AAOA,MAAM,qBACJ;AAIK,SAAS,cACd,WACA,UAAuC,CAAC,GAClC;AACN,MAAI,CAAC,UAAW;AAChB,QAAM,QAAQ,UAAU,iBAA8B,kBAAkB;AACxE,QAAM,SAAS,QAAQ,OAAO,MAAM,MAAM,SAAS,CAAC,IAAI,MAAM,CAAC;AAC/D,UAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AACvC;","names":[]}

package/dist/components/internal/menu/menu-parts.d.ts

@@ -0,0 +1,6 @@
+import type { ElementType, ReactElement } from "react";
+import type { MenuGroupProps, MenuLabelProps, MenuSeparatorProps } from "./types.js";
+export declare function MenuGroup<TAs extends ElementType = "div">(props: MenuGroupProps<TAs>): ReactElement | null;
+export declare function MenuLabel<TAs extends ElementType = "div">(props: MenuLabelProps<TAs>): ReactElement | null;
+export declare function MenuSeparator<TAs extends ElementType = "div">(props: MenuSeparatorProps<TAs>): ReactElement | null;
+//# sourceMappingURL=menu-parts.d.ts.map

package/dist/components/internal/menu/menu-parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-parts.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/menu/menu-parts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAsCrF,wBAAgB,SAAS,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EACvD,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GACzB,YAAY,GAAG,IAAI,CAErB;AAED,wBAAgB,SAAS,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EACvD,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GACzB,YAAY,GAAG,IAAI,CAErB;AAED,wBAAgB,aAAa,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC3D,KAAK,EAAE,kBAAkB,CAAC,GAAG,CAAC,GAC7B,YAAY,GAAG,IAAI,CAErB"}

package/dist/components/internal/menu/menu-parts.js

@@ -0,0 +1,32 @@
+import { useRenderElement } from "@gunkin/uiify/core/render";
+function useMenuPart(props, options) {
+  const { as, render, children, className, ...consumerProps } = props;
+  return useRenderElement({
+    as,
+    defaultTag: options.defaultTag,
+    render,
+    props: {
+      ...consumerProps,
+      ...className ? { className } : {},
+      children,
+      role: options.role,
+      "data-part": options.part
+    },
+    state: {}
+  });
+}
+function MenuGroup(props) {
+  return useMenuPart(props, { defaultTag: "div", part: "group", role: "group" });
+}
+function MenuLabel(props) {
+  return useMenuPart(props, { defaultTag: "div", part: "label", role: "presentation" });
+}
+function MenuSeparator(props) {
+  return useMenuPart(props, { defaultTag: "div", part: "separator", role: "separator" });
+}
+export {
+  MenuGroup,
+  MenuLabel,
+  MenuSeparator
+};
+//# sourceMappingURL=menu-parts.js.map

package/dist/components/internal/menu/menu-parts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/internal/menu/menu-parts.tsx"],"sourcesContent":["import type { ElementType, ReactElement, ReactNode } from \"react\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport type { MenuGroupProps, MenuLabelProps, MenuSeparatorProps } from \"./types.js\";\n\ninterface MenuPartOptions {\n  readonly defaultTag: ElementType;\n  readonly part: string;\n  readonly role: string;\n}\n\ninterface MenuPartValues {\n  readonly as?: ElementType | undefined;\n  readonly children?: ReactNode;\n  readonly className?: string;\n  readonly render?:\n    | ((props: Record<string, unknown>, state: Record<string, never>) => ReactElement | null)\n    | undefined;\n  readonly [key: string]: unknown;\n}\n\nfunction useMenuPart<TAs extends ElementType>(\n  props: MenuGroupProps<TAs> | MenuLabelProps<TAs> | MenuSeparatorProps<TAs>,\n  options: MenuPartOptions,\n): ReactElement | null {\n  const { as, render, children, className, ...consumerProps } = props as MenuPartValues;\n  return useRenderElement({\n    as,\n    defaultTag: options.defaultTag,\n    render,\n    props: {\n      ...consumerProps,\n      ...(className ? { className } : {}),\n      children,\n      role: options.role,\n      \"data-part\": options.part,\n    },\n    state: {},\n  });\n}\n\nexport function MenuGroup<TAs extends ElementType = \"div\">(\n  props: MenuGroupProps<TAs>,\n): ReactElement | null {\n  return useMenuPart(props, { defaultTag: \"div\", part: \"group\", role: \"group\" });\n}\n\nexport function MenuLabel<TAs extends ElementType = \"div\">(\n  props: MenuLabelProps<TAs>,\n): ReactElement | null {\n  return useMenuPart(props, { defaultTag: \"div\", part: \"label\", role: \"presentation\" });\n}\n\nexport function MenuSeparator<TAs extends ElementType = \"div\">(\n  props: MenuSeparatorProps<TAs>,\n): ReactElement | null {\n  return useMenuPart(props, { defaultTag: \"div\", part: \"separator\", role: \"separator\" });\n}\n"],"mappings":"AACA,SAAS,wBAAwB;AAmBjC,SAAS,YACP,OACA,SACqB;AACrB,QAAM,EAAE,IAAI,QAAQ,UAAU,WAAW,GAAG,cAAc,IAAI;AAC9D,SAAO,iBAAiB;AAAA,IACtB;AAAA,IACA,YAAY,QAAQ;AAAA,IACpB;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,MACA,MAAM,QAAQ;AAAA,MACd,aAAa,QAAQ;AAAA,IACvB;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,SAAS,UACd,OACqB;AACrB,SAAO,YAAY,OAAO,EAAE,YAAY,OAAO,MAAM,SAAS,MAAM,QAAQ,CAAC;AAC/E;AAEO,SAAS,UACd,OACqB;AACrB,SAAO,YAAY,OAAO,EAAE,YAAY,OAAO,MAAM,SAAS,MAAM,eAAe,CAAC;AACtF;AAEO,SAAS,cACd,OACqB;AACrB,SAAO,YAAY,OAAO,EAAE,YAAY,OAAO,MAAM,aAAa,MAAM,YAAY,CAAC;AACvF;","names":[]}

package/dist/components/internal/menu/menu-utils.d.ts

@@ -0,0 +1,3 @@
+import type { MenuSelectEvent } from "./types.js";
+export declare function createMenuSelectEvent(): MenuSelectEvent;
+//# sourceMappingURL=menu-utils.d.ts.map

package/dist/components/internal/menu/menu-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/menu/menu-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,wBAAgB,qBAAqB,IAAI,eAAe,CAUvD"}

package/dist/components/internal/menu/menu-utils.js

@@ -0,0 +1,15 @@
+function createMenuSelectEvent() {
+  let defaultPrevented = false;
+  return {
+    get defaultPrevented() {
+      return defaultPrevented;
+    },
+    preventDefault() {
+      defaultPrevented = true;
+    }
+  };
+}
+export {
+  createMenuSelectEvent
+};
+//# sourceMappingURL=menu-utils.js.map

package/dist/components/internal/menu/menu-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/internal/menu/menu-utils.ts"],"sourcesContent":["import type { MenuSelectEvent } from \"./types.js\";\n\nexport function createMenuSelectEvent(): MenuSelectEvent {\n  let defaultPrevented = false;\n  return {\n    get defaultPrevented() {\n      return defaultPrevented;\n    },\n    preventDefault() {\n      defaultPrevented = true;\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,wBAAyC;AACvD,MAAI,mBAAmB;AACvB,SAAO;AAAA,IACL,IAAI,mBAAmB;AACrB,aAAO;AAAA,IACT;AAAA,IACA,iBAAiB;AACf,yBAAmB;AAAA,IACrB;AAAA,EACF;AACF;","names":[]}

package/dist/components/internal/menu/types.d.ts

@@ -0,0 +1,48 @@
+import type { ButtonHTMLAttributes, ElementType, HTMLAttributes, ReactNode, RefObject } from "react";
+import type { AnchorAlign, AnchorSide } from "@gunkin/uiify/core/anchor-position";
+import type { PopoverChangeHandler } from "@gunkin/uiify/core/popover";
+import type { RenderableProps } from "@gunkin/uiify/core/render";
+export interface MenuPartOwnProps {
+    readonly children?: ReactNode;
+    readonly className?: string;
+}
+export type MenuGroupProps<TAs extends ElementType = "div"> = RenderableProps<TAs, MenuPartOwnProps, Record<string, never>, HTMLElement>;
+export type MenuLabelProps<TAs extends ElementType = "div"> = RenderableProps<TAs, MenuPartOwnProps, Record<string, never>, HTMLElement>;
+export type MenuSeparatorProps<TAs extends ElementType = "div"> = RenderableProps<TAs, Omit<MenuPartOwnProps, "children">, Record<string, never>, HTMLElement>;
+/**
+ * Cancelable "an item was chosen" event, shared by DropdownMenu and
+ * ContextMenu items. Canonical home for what used to be declared in
+ * `dropdown-menu/types.ts` and imported across a component-directory boundary
+ * by `context-menu/types.ts`.
+ */
+export interface MenuSelectEvent {
+    readonly defaultPrevented: boolean;
+    preventDefault(): void;
+}
+export interface UseMenuSurfaceOptions {
+    readonly align?: AnchorAlign;
+    readonly defaultOpen?: boolean;
+    /** `"auto"` for click-dismissable surfaces, `"manual"` when the compound drives dismissal. */
+    readonly mode: "auto" | "manual";
+    readonly onOpenChange?: PopoverChangeHandler;
+    readonly open?: boolean;
+    readonly side?: AnchorSide;
+}
+export interface UseMenuSurfaceReturn {
+    readonly anchorProps: HTMLAttributes<HTMLElement>;
+    readonly close: () => void;
+    readonly contentRef: RefObject<HTMLDivElement | null>;
+    /** Return focus to the element that opened the surface. */
+    readonly focusTrigger: () => void;
+    readonly open: boolean;
+    readonly openPopover: () => void;
+    /** Open (if closed) and move focus into the list on the next microtask. */
+    readonly openToItem: (last?: boolean) => void;
+    readonly popupProps: HTMLAttributes<HTMLElement>;
+    readonly popupRef: (element: HTMLElement | null) => void;
+    readonly positionerProps: HTMLAttributes<HTMLElement>;
+    readonly setTriggerElement: (element: HTMLElement | null) => void;
+    readonly triggerProps: ButtonHTMLAttributes<HTMLButtonElement>;
+    readonly triggerRef: RefObject<HTMLElement | null>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/internal/menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,WAAW,EACX,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CAC3E,GAAG,EACH,gBAAgB,EAChB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EACrB,WAAW,CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CAC3E,GAAG,EACH,gBAAgB,EAChB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EACrB,WAAW,CACZ,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CAC/E,GAAG,EACH,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EAClC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EACrB,WAAW,CACZ,CAAC;AAEF;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACnC,cAAc,IAAI,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC,QAAQ,CAAC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IAC7C,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAClD,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACtD,2DAA2D;IAC3D,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC;IAClC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAC;IACjC,2EAA2E;IAC3E,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACjD,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,eAAe,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACtD,QAAQ,CAAC,iBAAiB,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE,QAAQ,CAAC,YAAY,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC/D,QAAQ,CAAC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACpD"}

package/dist/components/internal/menu/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/internal/menu/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/internal/menu/use-menu-surface.d.ts

@@ -0,0 +1,12 @@
+import type { UseMenuSurfaceOptions, UseMenuSurfaceReturn } from "./types.js";
+/**
+ * Shared body of DropdownMenu and ContextMenu's per-menu state: a popover
+ * surface anchored to its invoker, with focus management for opening into the
+ * item list and returning to the trigger.
+ *
+ * `anchorRef`/`positionerRef` are deliberately not part of the return value —
+ * `useAnchorPosition` returns no-op refs for both (see core/use-anchor-position.ts),
+ * so the menu compounds were merging them into their DOM ref for nothing.
+ */
+export declare function useMenuSurface(options: UseMenuSurfaceOptions): UseMenuSurfaceReturn;
+//# sourceMappingURL=use-menu-surface.d.ts.map

package/dist/components/internal/menu/use-menu-surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu-surface.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/menu/use-menu-surface.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAE9E;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,oBAAoB,CAkDnF"}

package/dist/components/internal/menu/use-menu-surface.js

@@ -0,0 +1,56 @@
+"use client";
+import { useCallback, useRef } from "react";
+import { useAnchorPosition } from "@gunkin/uiify/core/anchor-position";
+import { usePopover } from "@gunkin/uiify/core/popover";
+import { useIsomorphicLayoutEffect } from "@gunkin/uiify/hooks";
+import { focusMenuItem } from "./focus-menu-item.js";
+function useMenuSurface(options) {
+  const { align, defaultOpen, mode, onOpenChange, open, side } = options;
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  const popover = usePopover({
+    mode,
+    ...defaultOpen !== void 0 ? { defaultOpen } : {},
+    ...open !== void 0 ? { open } : {},
+    ...onOpenChange ? { onOpenChange } : {}
+  });
+  const anchor = useAnchorPosition({
+    ...align !== void 0 ? { align } : {},
+    ...side !== void 0 ? { side } : {}
+  });
+  const focusTrigger = useCallback(() => {
+    triggerRef.current?.focus({ preventScroll: true });
+  }, []);
+  const setTriggerElement = useCallback((element) => {
+    triggerRef.current = element;
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (popover.open) focusMenuItem(contentRef.current);
+  }, [popover.open]);
+  const openToItem = useCallback(
+    (last) => {
+      if (!popover.open) popover.openPopover();
+      queueMicrotask(() => focusMenuItem(contentRef.current, last !== void 0 ? { last } : {}));
+    },
+    [popover]
+  );
+  return {
+    anchorProps: anchor.anchorProps,
+    close: popover.close,
+    contentRef,
+    focusTrigger,
+    open: popover.open,
+    openPopover: popover.openPopover,
+    openToItem,
+    popupProps: popover.popupProps,
+    popupRef: popover.popupRef,
+    positionerProps: anchor.positionerProps,
+    setTriggerElement,
+    triggerProps: popover.triggerProps,
+    triggerRef
+  };
+}
+export {
+  useMenuSurface
+};
+//# sourceMappingURL=use-menu-surface.js.map

package/dist/components/internal/menu/use-menu-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/internal/menu/use-menu-surface.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef } from \"react\";\nimport { useAnchorPosition } from \"@gunkin/uiify/core/anchor-position\";\nimport { usePopover } from \"@gunkin/uiify/core/popover\";\nimport { useIsomorphicLayoutEffect } from \"@gunkin/uiify/hooks\";\nimport { focusMenuItem } from \"./focus-menu-item.js\";\nimport type { UseMenuSurfaceOptions, UseMenuSurfaceReturn } from \"./types.js\";\n\n/**\n * Shared body of DropdownMenu and ContextMenu's per-menu state: a popover\n * surface anchored to its invoker, with focus management for opening into the\n * item list and returning to the trigger.\n *\n * `anchorRef`/`positionerRef` are deliberately not part of the return value —\n * `useAnchorPosition` returns no-op refs for both (see core/use-anchor-position.ts),\n * so the menu compounds were merging them into their DOM ref for nothing.\n */\nexport function useMenuSurface(options: UseMenuSurfaceOptions): UseMenuSurfaceReturn {\n  const { align, defaultOpen, mode, onOpenChange, open, side } = options;\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const popover = usePopover({\n    mode,\n    ...(defaultOpen !== undefined ? { defaultOpen } : {}),\n    ...(open !== undefined ? { open } : {}),\n    ...(onOpenChange ? { onOpenChange } : {}),\n  });\n  const anchor = useAnchorPosition({\n    ...(align !== undefined ? { align } : {}),\n    ...(side !== undefined ? { side } : {}),\n  });\n\n  const focusTrigger = useCallback(() => {\n    triggerRef.current?.focus({ preventScroll: true });\n  }, []);\n\n  const setTriggerElement = useCallback((element: HTMLElement | null) => {\n    triggerRef.current = element;\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (popover.open) focusMenuItem(contentRef.current);\n  }, [popover.open]);\n\n  const openToItem = useCallback(\n    (last?: boolean) => {\n      if (!popover.open) popover.openPopover();\n      queueMicrotask(() => focusMenuItem(contentRef.current, last !== undefined ? { last } : {}));\n    },\n    [popover],\n  );\n\n  return {\n    anchorProps: anchor.anchorProps,\n    close: popover.close,\n    contentRef,\n    focusTrigger,\n    open: popover.open,\n    openPopover: popover.openPopover,\n    openToItem,\n    popupProps: popover.popupProps,\n    popupRef: popover.popupRef,\n    positionerProps: anchor.positionerProps,\n    setTriggerElement,\n    triggerProps: popover.triggerProps,\n    triggerRef,\n  };\n}\n"],"mappings":";AAEA,SAAS,aAAa,cAAc;AACpC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAYvB,SAAS,eAAe,SAAsD;AACnF,QAAM,EAAE,OAAO,aAAa,MAAM,cAAc,MAAM,KAAK,IAAI;AAC/D,QAAM,aAAa,OAA2B,IAAI;AAClD,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,UAAU,WAAW;AAAA,IACzB;AAAA,IACA,GAAI,gBAAgB,SAAY,EAAE,YAAY,IAAI,CAAC;AAAA,IACnD,GAAI,SAAS,SAAY,EAAE,KAAK,IAAI,CAAC;AAAA,IACrC,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA,EACzC,CAAC;AACD,QAAM,SAAS,kBAAkB;AAAA,IAC/B,GAAI,UAAU,SAAY,EAAE,MAAM,IAAI,CAAC;AAAA,IACvC,GAAI,SAAS,SAAY,EAAE,KAAK,IAAI,CAAC;AAAA,EACvC,CAAC;AAED,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,EACnD,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,YAAY,CAAC,YAAgC;AACrE,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,4BAA0B,MAAM;AAC9B,QAAI,QAAQ,KAAM,eAAc,WAAW,OAAO;AAAA,EACpD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,aAAa;AAAA,IACjB,CAAC,SAAmB;AAClB,UAAI,CAAC,QAAQ,KAAM,SAAQ,YAAY;AACvC,qBAAe,MAAM,cAAc,WAAW,SAAS,SAAS,SAAY,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC;AAAA,IAC5F;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO;AAAA,IACL,aAAa,OAAO;AAAA,IACpB,OAAO,QAAQ;AAAA,IACf;AAAA,IACA;AAAA,IACA,MAAM,QAAQ;AAAA,IACd,aAAa,QAAQ;AAAA,IACrB;AAAA,IACA,YAAY,QAAQ;AAAA,IACpB,UAAU,QAAQ;AAAA,IAClB,iBAAiB,OAAO;AAAA,IACxB;AAAA,IACA,cAAc,QAAQ;AAAA,IACtB;AAAA,EACF;AACF;","names":[]}

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

@@ -0,0 +1,7 @@
+import type { ElementType, ReactElement } from "react";
+import type { LineChartProps } from "./types.js";
+export declare function LineChart<TAs extends ElementType = "figure">(props: LineChartProps<TAs>): ReactElement | null;
+export declare namespace LineChart {
+    var displayName: string;
+}
+//# sourceMappingURL=LineChart.d.ts.map

package/dist/components/line-chart/LineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/components/line-chart/LineChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAA+B,YAAY,EAAE,MAAM,OAAO,CAAC;AAcpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,wBAAgB,SAAS,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC1D,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GACzB,YAAY,GAAG,IAAI,CAqKrB;yBAvKe,SAAS"}

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

@@ -0,0 +1,169 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRenderElement } from "@gunkin/uiify/core/render";
+import {
+  axisLabelsFor,
+  axisStyle,
+  crosshairStyle,
+  cursorStyle,
+  geometryFor,
+  getValueBounds,
+  monthLabelsFor,
+  pointStyle,
+  pointsStyle,
+  valueLabelsFor
+} from "./line-chart-geometry.js";
+function LineChart(props) {
+  const {
+    as,
+    render,
+    data,
+    xAxis,
+    yAxis,
+    "aria-label": ariaLabel,
+    activePointIndex,
+    cursorY,
+    interactive = false,
+    onPointClick,
+    onPointPointerLeave,
+    onPointPointerMove,
+    selectedPointIndex,
+    ...consumerProps
+  } = props;
+  const { min, max } = getValueBounds(data);
+  const label = ariaLabel ?? "Line chart";
+  const timeLabels = axisLabelsFor(xAxis, monthLabelsFor(data));
+  const valueLabels = axisLabelsFor(yAxis, valueLabelsFor(min, max));
+  const readoutIndex = activePointIndex ?? selectedPointIndex ?? (data.length > 0 ? data.length - 1 : void 0);
+  const readoutPoint = readoutIndex === void 0 ? void 0 : data[readoutIndex];
+  const crosshairPoint = activePointIndex === void 0 ? void 0 : data[activePointIndex];
+  const points = data.map((point, index) => {
+    const geometry = geometryFor(point, data[index - 1], index, data.length, min, max);
+    const isActive = activePointIndex === index;
+    const isSelected = selectedPointIndex === index;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      onPointClick?.(index);
+    };
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        "aria-hidden": interactive ? void 0 : true,
+        "data-crosshair-active": interactive && isActive ? "" : void 0,
+        "data-point-selected": interactive && isSelected ? "" : void 0,
+        "data-time": String(point.time),
+        "data-trend": geometry.trend,
+        style: pointStyle(geometry, isActive ? cursorY : void 0),
+        children: interactive ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "line-chart__point-hit",
+            type: "button",
+            "aria-label": `Point ${String(point.time)}`,
+            "aria-pressed": isSelected,
+            onClick: () => onPointClick?.(index),
+            onKeyDown: handleKeyDown,
+            onPointerLeave: onPointPointerLeave,
+            onPointerMove: (event) => onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY })
+          }
+        ) : null
+      },
+      `${point.time}-${index}`
+    );
+  });
+  return useRenderElement({
+    as,
+    defaultTag: "figure",
+    props: {
+      ...consumerProps,
+      "aria-label": label,
+      "data-uiify-line-chart": "",
+      "data-interactive": interactive ? "" : void 0,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("figcaption", { children: label }),
+        interactive && readoutPoint ? /* @__PURE__ */ jsxs("div", { className: "line-chart__readout", "aria-live": "polite", children: [
+          /* @__PURE__ */ jsx("span", { className: "line-chart__readout-time", children: String(readoutPoint.time) }),
+          /* @__PURE__ */ jsx("span", { children: readoutPoint.value })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "line-chart__plot", "aria-hidden": interactive ? void 0 : true, children: [
+          /* @__PURE__ */ jsx("div", { className: "line-chart__scroll-viewport", children: /* @__PURE__ */ jsxs("div", { className: "line-chart__canvas", children: [
+            /* @__PURE__ */ jsxs("div", { className: "line-chart__viewport", children: [
+              /* @__PURE__ */ jsx(
+                "ol",
+                {
+                  className: "line-chart__points",
+                  "aria-label": `${label} points`,
+                  style: pointsStyle(data.length),
+                  children: points
+                }
+              ),
+              interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "line-chart__crosshair",
+                  "aria-hidden": "true",
+                  style: crosshairStyle(activePointIndex, data.length, cursorY),
+                  children: /* @__PURE__ */ jsx("span", { className: "line-chart__crosshair-marker", children: "+" })
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "line-chart__time-viewport", children: /* @__PURE__ */ jsxs(
+              "ol",
+              {
+                className: "line-chart__time-axis",
+                "data-axis": "time",
+                "aria-label": `${label} dates`,
+                children: [
+                  timeLabels.map((axisLabel, index) => /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      style: axisStyle("x", axisLabel.position),
+                      children: axisLabel.label
+                    },
+                    `${axisLabel.position}-${index}`
+                  )),
+                  interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      className: "line-chart__crosshair-time",
+                      style: crosshairStyle(activePointIndex, data.length, void 0),
+                      children: String(crosshairPoint.time)
+                    }
+                  ) : null
+                ]
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs("ol", { className: "line-chart__value-axis", "data-axis": "value", "aria-label": `${label} values`, children: [
+            valueLabels.map((axisLabel, index) => /* @__PURE__ */ jsx(
+              "li",
+              {
+                style: axisStyle("y", axisLabel.position),
+                children: axisLabel.label
+              },
+              `${axisLabel.position}-${index}`
+            )),
+            interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx("li", { className: "line-chart__crosshair-value", style: cursorStyle(cursorY), children: crosshairPoint.value }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("table", { className: "line-chart__data", "aria-label": `${label} data`, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Time" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Value" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: data.map((point, index) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", children: String(point.time) }),
+            /* @__PURE__ */ jsx("td", { children: point.value })
+          ] }, `${point.time}-${index}`)) })
+        ] })
+      ] })
+    },
+    render,
+    state: {}
+  });
+}
+LineChart.displayName = "LineChart";
+export {
+  LineChart
+};
+//# sourceMappingURL=LineChart.js.map

package/dist/components/line-chart/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/line-chart/LineChart.tsx"],"sourcesContent":["import type { ElementType, KeyboardEvent, PointerEvent, ReactElement } from \"react\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport {\n  axisLabelsFor,\n  axisStyle,\n  crosshairStyle,\n  cursorStyle,\n  geometryFor,\n  getValueBounds,\n  monthLabelsFor,\n  pointStyle,\n  pointsStyle,\n  valueLabelsFor,\n} from \"./line-chart-geometry.js\";\nimport type { LineChartProps } from \"./types.js\";\n\nexport function LineChart<TAs extends ElementType = \"figure\">(\n  props: LineChartProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    data,\n    xAxis,\n    yAxis,\n    \"aria-label\": ariaLabel,\n    activePointIndex,\n    cursorY,\n    interactive = false,\n    onPointClick,\n    onPointPointerLeave,\n    onPointPointerMove,\n    selectedPointIndex,\n    ...consumerProps\n  } = props as LineChartProps<\"figure\">;\n  const { min, max } = getValueBounds(data);\n  const label = ariaLabel ?? \"Line chart\";\n  const timeLabels = axisLabelsFor(xAxis, monthLabelsFor(data));\n  const valueLabels = axisLabelsFor(yAxis, valueLabelsFor(min, max));\n  const readoutIndex =\n    activePointIndex ?? selectedPointIndex ?? (data.length > 0 ? data.length - 1 : undefined);\n  const readoutPoint = readoutIndex === undefined ? undefined : data[readoutIndex];\n  const crosshairPoint = activePointIndex === undefined ? undefined : data[activePointIndex];\n  const points = data.map((point, index) => {\n    const geometry = geometryFor(point, data[index - 1], index, data.length, min, max);\n    const isActive = activePointIndex === index;\n    const isSelected = selectedPointIndex === index;\n    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n      if (event.key !== \"Enter\" && event.key !== \" \") return;\n      event.preventDefault();\n      onPointClick?.(index);\n    };\n\n    return (\n      <li\n        key={`${point.time}-${index}`}\n        aria-hidden={interactive ? undefined : true}\n        data-crosshair-active={interactive && isActive ? \"\" : undefined}\n        data-point-selected={interactive && isSelected ? \"\" : undefined}\n        data-time={String(point.time)}\n        data-trend={geometry.trend}\n        style={pointStyle(geometry, isActive ? cursorY : undefined)}\n      >\n        {interactive ? (\n          <button\n            className=\"line-chart__point-hit\"\n            type=\"button\"\n            aria-label={`Point ${String(point.time)}`}\n            aria-pressed={isSelected}\n            onClick={() => onPointClick?.(index)}\n            onKeyDown={handleKeyDown}\n            onPointerLeave={onPointPointerLeave}\n            onPointerMove={(event: PointerEvent<HTMLButtonElement>) =>\n              onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY })\n            }\n          />\n        ) : null}\n      </li>\n    );\n  });\n\n  return useRenderElement({\n    as,\n    defaultTag: \"figure\",\n    props: {\n      ...consumerProps,\n      \"aria-label\": label,\n      \"data-uiify-line-chart\": \"\",\n      \"data-interactive\": interactive ? \"\" : undefined,\n      children: (\n        <>\n          <figcaption>{label}</figcaption>\n          {interactive && readoutPoint ? (\n            <div className=\"line-chart__readout\" aria-live=\"polite\">\n              <span className=\"line-chart__readout-time\">{String(readoutPoint.time)}</span>\n              <span>{readoutPoint.value}</span>\n            </div>\n          ) : null}\n          <div className=\"line-chart__plot\" aria-hidden={interactive ? undefined : true}>\n            <div className=\"line-chart__scroll-viewport\">\n              <div className=\"line-chart__canvas\">\n                <div className=\"line-chart__viewport\">\n                  <ol\n                    className=\"line-chart__points\"\n                    aria-label={`${label} points`}\n                    style={pointsStyle(data.length)}\n                  >\n                    {points}\n                  </ol>\n                  {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                    <div\n                      className=\"line-chart__crosshair\"\n                      aria-hidden=\"true\"\n                      style={crosshairStyle(activePointIndex, data.length, cursorY)}\n                    >\n                      <span className=\"line-chart__crosshair-marker\">+</span>\n                    </div>\n                  ) : null}\n                </div>\n                <div className=\"line-chart__time-viewport\">\n                  <ol\n                    className=\"line-chart__time-axis\"\n                    data-axis=\"time\"\n                    aria-label={`${label} dates`}\n                  >\n                    {timeLabels.map((axisLabel, index) => (\n                      <li\n                        key={`${axisLabel.position}-${index}`}\n                        style={axisStyle(\"x\", axisLabel.position)}\n                      >\n                        {axisLabel.label}\n                      </li>\n                    ))}\n                    {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                      <li\n                        className=\"line-chart__crosshair-time\"\n                        style={crosshairStyle(activePointIndex, data.length, undefined)}\n                      >\n                        {String(crosshairPoint.time)}\n                      </li>\n                    ) : null}\n                  </ol>\n                </div>\n              </div>\n            </div>\n            <ol className=\"line-chart__value-axis\" data-axis=\"value\" aria-label={`${label} values`}>\n              {valueLabels.map((axisLabel, index) => (\n                <li\n                  key={`${axisLabel.position}-${index}`}\n                  style={axisStyle(\"y\", axisLabel.position)}\n                >\n                  {axisLabel.label}\n                </li>\n              ))}\n              {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                <li className=\"line-chart__crosshair-value\" style={cursorStyle(cursorY)}>\n                  {crosshairPoint.value}\n                </li>\n              ) : null}\n            </ol>\n          </div>\n          <table className=\"line-chart__data\" aria-label={`${label} data`}>\n            <thead>\n              <tr>\n                <th scope=\"col\">Time</th>\n                <th scope=\"col\">Value</th>\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((point, index) => (\n                <tr key={`${point.time}-${index}`}>\n                  <th scope=\"row\">{String(point.time)}</th>\n                  <td>{point.value}</td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </>\n      ),\n    },\n    render,\n    state: {},\n  });\n}\nLineChart.displayName = \"LineChart\";\n"],"mappings":"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","names":[]}

package/dist/components/line-chart/client/LineChartClient.d.ts

@@ -0,0 +1,7 @@
+import type { ElementType, ReactElement } from "react";
+import type { LineChartProps } from "../types.js";
+export declare function LineChartClient<TAs extends ElementType = "figure">(props: LineChartProps<TAs>): ReactElement | null;
+export declare namespace LineChartClient {
+    var displayName: string;
+}
+//# sourceMappingURL=LineChartClient.d.ts.map

package/dist/components/line-chart/client/LineChartClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChartClient.d.ts","sourceRoot":"","sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,WAAW,EAAE,YAAY,EAAO,MAAM,OAAO,CAAC;AAI3E,OAAO,KAAK,EAA4B,cAAc,EAAE,MAAM,aAAa,CAAC;AAgB5E,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GACzB,YAAY,GAAG,IAAI,CA2DrB;yBA7De,eAAe"}

package/dist/components/line-chart/client/LineChartClient.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useChartViewport } from "../../../hooks/use-chart-viewport.js";
+import { useMergedRefs } from "../../../hooks/use-merged-refs.js";
+import { LineChart } from "../LineChart.js";
+const Y_AXIS_COLUMN_WIDTH = 72 + 12;
+function LineChartClient(props) {
+  const {
+    data,
+    ref: consumerRef,
+    style: consumerStyle,
+    onPointClick: consumerOnPointClick,
+    onPointPointerLeave: consumerOnPointPointerLeave,
+    onPointPointerMove: consumerOnPointPointerMove,
+    ...consumerProps
+  } = props;
+  const viewport = useChartViewport({
+    itemCount: data.length,
+    measuredWidthOffset: Y_AXIS_COLUMN_WIDTH,
+    minItemWidth: 24
+  });
+  const [cursor, setCursor] = useState(null);
+  const [selectedPointIndex, setSelectedPointIndex] = useState();
+  const chartRef = useMergedRefs(viewport.ref, consumerRef);
+  const handlePointClick = useCallback(
+    (index) => {
+      setSelectedPointIndex(index);
+      consumerOnPointClick?.(index);
+    },
+    [consumerOnPointClick]
+  );
+  const handlePointPointerLeave = useCallback(() => {
+    setCursor(null);
+    consumerOnPointPointerLeave?.();
+  }, [consumerOnPointPointerLeave]);
+  const handlePointPointerMove = useCallback(
+    (position) => {
+      setCursor(position);
+      consumerOnPointPointerMove?.(position);
+    },
+    [consumerOnPointPointerMove]
+  );
+  const style = {
+    ...consumerStyle,
+    "--line-scale": String(viewport.scale)
+  };
+  const chartProps = {
+    ...consumerProps,
+    data,
+    activePointIndex: cursor?.index,
+    cursorY: cursor?.offsetY,
+    interactive: true,
+    onPointClick: handlePointClick,
+    onPointPointerLeave: handlePointPointerLeave,
+    onPointPointerMove: handlePointPointerMove,
+    ref: chartRef,
+    selectedPointIndex,
+    style
+  };
+  return /* @__PURE__ */ jsx(LineChart, { ...chartProps });
+}
+LineChartClient.displayName = "LineChartClient";
+export {
+  LineChartClient
+};
+//# sourceMappingURL=LineChartClient.js.map

package/dist/components/line-chart/client/LineChartClient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\nimport type { CSSProperties, ElementType, ReactElement, Ref } from \"react\";\nimport { useChartViewport } from \"../../../hooks/use-chart-viewport.js\";\nimport { useMergedRefs } from \"../../../hooks/use-merged-refs.js\";\nimport { LineChart } from \"../LineChart.js\";\nimport type { LineChartPointerPosition, LineChartProps } from \"../types.js\";\n\ninterface CursorState extends LineChartPointerPosition {}\n\ninterface InteractiveLineStyle extends CSSProperties {\n  \"--line-scale\": string;\n}\n\n/**\n * `.line-chart__plot`'s fixed price-axis column (4.5rem) plus its grid gap\n * (0.75rem) — see line-chart.css. `useChartViewport` measures the whole\n * `<figure>`, but points only ever get the width left over after this\n * column, so it must be subtracted before sizing `minItemWidth`.\n */\nconst Y_AXIS_COLUMN_WIDTH = 72 + 12;\n\nexport function LineChartClient<TAs extends ElementType = \"figure\">(\n  props: LineChartProps<TAs>,\n): ReactElement | null {\n  const {\n    data,\n    ref: consumerRef,\n    style: consumerStyle,\n    onPointClick: consumerOnPointClick,\n    onPointPointerLeave: consumerOnPointPointerLeave,\n    onPointPointerMove: consumerOnPointPointerMove,\n    ...consumerProps\n  } = props as LineChartProps<\"figure\"> & {\n    ref?: Ref<HTMLElement>;\n    style?: CSSProperties;\n  };\n  const viewport = useChartViewport({\n    itemCount: data.length,\n    measuredWidthOffset: Y_AXIS_COLUMN_WIDTH,\n    minItemWidth: 24,\n  });\n  const [cursor, setCursor] = useState<CursorState | null>(null);\n  const [selectedPointIndex, setSelectedPointIndex] = useState<number | undefined>();\n  const chartRef = useMergedRefs<HTMLElement>(viewport.ref, consumerRef);\n  const handlePointClick = useCallback(\n    (index: number) => {\n      setSelectedPointIndex(index);\n      consumerOnPointClick?.(index);\n    },\n    [consumerOnPointClick],\n  );\n  const handlePointPointerLeave = useCallback(() => {\n    setCursor(null);\n    consumerOnPointPointerLeave?.();\n  }, [consumerOnPointPointerLeave]);\n  const handlePointPointerMove = useCallback(\n    (position: LineChartPointerPosition) => {\n      setCursor(position);\n      consumerOnPointPointerMove?.(position);\n    },\n    [consumerOnPointPointerMove],\n  );\n\n  const style: InteractiveLineStyle = {\n    ...consumerStyle,\n    \"--line-scale\": String(viewport.scale),\n  };\n  const chartProps = {\n    ...consumerProps,\n    data,\n    activePointIndex: cursor?.index,\n    cursorY: cursor?.offsetY,\n    interactive: true,\n    onPointClick: handlePointClick,\n    onPointPointerLeave: handlePointPointerLeave,\n    onPointPointerMove: handlePointPointerMove,\n    ref: chartRef,\n    selectedPointIndex,\n    style,\n  } as LineChartProps<\"figure\">;\n\n  return <LineChart {...chartProps} />;\n}\nLineChartClient.displayName = \"LineChartClient\";\n"],"mappings":";AAmFS;AAjFT,SAAS,aAAa,gBAAgB;AAEtC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAe1B,MAAM,sBAAsB,KAAK;AAE1B,SAAS,gBACd,OACqB;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,IACP,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,WAAW,iBAAiB;AAAA,IAChC,WAAW,KAAK;AAAA,IAChB,qBAAqB;AAAA,IACrB,cAAc;AAAA,EAChB,CAAC;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,IAAI;AAC7D,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAA6B;AACjF,QAAM,WAAW,cAA2B,SAAS,KAAK,WAAW;AACrE,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAkB;AACjB,4BAAsB,KAAK;AAC3B,6BAAuB,KAAK;AAAA,IAC9B;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AACA,QAAM,0BAA0B,YAAY,MAAM;AAChD,cAAU,IAAI;AACd,kCAA8B;AAAA,EAChC,GAAG,CAAC,2BAA2B,CAAC;AAChC,QAAM,yBAAyB;AAAA,IAC7B,CAAC,aAAuC;AACtC,gBAAU,QAAQ;AAClB,mCAA6B,QAAQ;AAAA,IACvC;AAAA,IACA,CAAC,0BAA0B;AAAA,EAC7B;AAEA,QAAM,QAA8B;AAAA,IAClC,GAAG;AAAA,IACH,gBAAgB,OAAO,SAAS,KAAK;AAAA,EACvC;AACA,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH;AAAA,IACA,kBAAkB,QAAQ;AAAA,IAC1B,SAAS,QAAQ;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,KAAK;AAAA,IACL;AAAA,IACA;AAAA,EACF;AAEA,SAAO,oBAAC,aAAW,GAAG,YAAY;AACpC;AACA,gBAAgB,cAAc;","names":[]}

package/dist/components/line-chart/client/index.d.ts

@@ -0,0 +1,3 @@
+export { LineChartClient } from "./LineChartClient.js";
+export type { LineChartAxisLabel, LineChartData, LineChartOwnProps, LineChartPointerPosition, LineChartProps, } from "../types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/line-chart/client/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/line-chart/client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EACV,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,GACf,MAAM,aAAa,CAAC"}