@reforma/components 0.0.0-stage → 0.1.0

package/dist/RichInput/index.d.ts

@@ -0,0 +1,5 @@
+export { appendTextToDoc, docHasList, docHasMentions, docMentions, docToPlainText, emptyComposerDoc, patchMentionInDoc, plainTextToDoc, prependMentionInDoc, removeMentionsByIds, upsertMentionInDoc, } from './composerDoc';
+export { mentionAttrsFromNode } from './mentionRender';
+export { RichInput, type RichInputProps } from './RichInput';
+export type { ComposerDoc, ComposerMentionAttrs, ComposerMentionKind, RichInputHandle, RichInputMentionRenderer, RichInputMentionRenderProps, RichInputMentionSerializer, RichInputTrigger, RichInputTriggerActionContext, RichInputTriggerItem, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/RichInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RichInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,eAAe,EACf,UAAU,EACV,cAAc,EACd,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,YAAY,EACR,WAAW,EACX,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,2BAA2B,EAC3B,0BAA0B,EAC1B,gBAAgB,EAChB,6BAA6B,EAC7B,oBAAoB,GACvB,MAAM,SAAS,CAAC"}

package/dist/RichInput/index.js

@@ -0,0 +1,19 @@
+import { appendTextToDoc as n, docHasList as t, docHasMentions as p, docMentions as c, docToPlainText as r, emptyComposerDoc as i, patchMentionInDoc as s, plainTextToDoc as d, prependMentionInDoc as m, removeMentionsByIds as a, upsertMentionInDoc as x } from "./composerDoc.js";
+import { mentionAttrsFromNode as M } from "./mentionRender.js";
+import { RichInput as I } from "./RichInput.js";
+export {
+  I as RichInput,
+  n as appendTextToDoc,
+  t as docHasList,
+  p as docHasMentions,
+  c as docMentions,
+  r as docToPlainText,
+  i as emptyComposerDoc,
+  M as mentionAttrsFromNode,
+  s as patchMentionInDoc,
+  d as plainTextToDoc,
+  m as prependMentionInDoc,
+  a as removeMentionsByIds,
+  x as upsertMentionInDoc
+};
+//# sourceMappingURL=index.js.map

package/dist/RichInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/RichInput/mentionRender.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { ComposerMentionAttrs, RichInputMentionRenderer, RichInputMentionRenderProps } from './types';
+export declare function mentionAttrsFromNode(attrs: Record<string, unknown> | undefined | null): ComposerMentionAttrs;
+export declare const RichInputMentionContext: import("react").Context<RichInputMentionRenderer | null>;
+/** Plain-text fallback when the host omits {@link RichInputProps.renderMention}. */
+export declare function defaultRenderMention({ mention }: RichInputMentionRenderProps): ReactNode;
+/** Default copy/prompt text: omit the atom (context lives in attrs). */
+export declare function defaultSerializeMention(_mention: ComposerMentionAttrs): string;
+//# sourceMappingURL=mentionRender.d.ts.map

package/dist/RichInput/mentionRender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mentionRender.d.ts","sourceRoot":"","sources":["../../src/RichInput/mentionRender.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EACR,oBAAoB,EAEpB,wBAAwB,EACxB,2BAA2B,EAC9B,MAAM,SAAS,CAAC;AAEjB,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,IAAI,GAAG,oBAAoB,CAY5G;AAED,eAAO,MAAM,uBAAuB,0DAAuD,CAAC;AAE5F,oFAAoF;AACpF,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,EAAE,2BAA2B,GAAG,SAAS,CAExF;AAED,wEAAwE;AACxE,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,MAAM,CAE9E"}

package/dist/RichInput/mentionRender.js

@@ -0,0 +1,29 @@
+import { createContext as o } from "react";
+function l(n) {
+  const e = String(n?.id ?? ""), i = String(n?.label ?? e), t = n?.data;
+  return {
+    id: e,
+    label: i,
+    kind: n?.kind ?? "file",
+    trigger: typeof n?.mentionSuggestionChar == "string" ? n.mentionSuggestionChar : "@",
+    ...t != null ? {
+      data: t
+    } : {}
+  };
+}
+const u = /* @__PURE__ */ o(null);
+function d({
+  mention: n
+}) {
+  return n.label;
+}
+function c(n) {
+  return "";
+}
+export {
+  u as RichInputMentionContext,
+  d as defaultRenderMention,
+  c as defaultSerializeMention,
+  l as mentionAttrsFromNode
+};
+//# sourceMappingURL=mentionRender.js.map

package/dist/RichInput/mentionRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mentionRender.js","sources":["../../src/RichInput/mentionRender.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type ReactNode } from 'react';\n\nimport type {\n    ComposerMentionAttrs,\n    ComposerMentionKind,\n    RichInputMentionRenderer,\n    RichInputMentionRenderProps,\n} from './types';\n\nexport function mentionAttrsFromNode(attrs: Record<string, unknown> | undefined | null): ComposerMentionAttrs {\n    const id = String(attrs?.id ?? '');\n    const label = String(attrs?.label ?? id);\n    const data = attrs?.data;\n\n    return {\n        id,\n        label,\n        kind: (attrs?.kind as ComposerMentionKind | undefined) ?? 'file',\n        trigger: typeof attrs?.mentionSuggestionChar === 'string' ? attrs.mentionSuggestionChar : '@',\n        ...(data != null ? { data } : {}),\n    };\n}\n\nexport const RichInputMentionContext = createContext<RichInputMentionRenderer | null>(null);\n\n/** Plain-text fallback when the host omits {@link RichInputProps.renderMention}. */\nexport function defaultRenderMention({ mention }: RichInputMentionRenderProps): ReactNode {\n    return mention.label;\n}\n\n/** Default copy/prompt text: omit the atom (context lives in attrs). */\nexport function defaultSerializeMention(_mention: ComposerMentionAttrs): string {\n    return '';\n}\n"],"names":["mentionAttrsFromNode","attrs","id","label","data","RichInputMentionContext","defaultRenderMention","mention","defaultSerializeMention","_mention"],"mappings":";AAGO,SAASA,EAAqBC,GAAO;AAC1C,QAAMC,IAAK,OAAOD,GAAO,MAAM,EAAE,GAC3BE,IAAQ,OAAOF,GAAO,SAASC,CAAE,GACjCE,IAAOH,GAAO;AACpB,SAAO;AAAA,IACL,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAMF,GAAO,QAAQ;AAAA,IACrB,SAAS,OAAOA,GAAO,yBAA0B,WAAWA,EAAM,wBAAwB;AAAA,IAC1F,GAAIG,KAAQ,OAAO;AAAA,MACjB,MAAAA;AAAA,IAAA,IACE,CAAA;AAAA,EAAC;AAET;AACO,MAAMC,sBAAqD,IAAI;AAG/D,SAASC,EAAqB;AAAA,EACnC,SAAAC;AACF,GAAG;AACD,SAAOA,EAAQ;AACjB;AAGO,SAASC,EAAwBC,GAAU;AAChD,SAAO;AACT;"}

package/dist/RichInput/types.d.ts

@@ -0,0 +1,78 @@
+import type { JSONContent } from '@tiptap/core';
+import type { ReactNode } from 'react';
+export type ComposerDoc = JSONContent;
+export type ComposerMentionKind = 'file' | 'layer' | 'command' | 'link' | 'integration';
+export type ComposerMentionAttrs = {
+    id: string;
+    label: string;
+    kind: ComposerMentionKind;
+    trigger: string;
+    data?: unknown;
+};
+/** Props passed to {@link RichInputProps.renderMention}. */
+export type RichInputMentionRenderProps = {
+    mention: ComposerMentionAttrs;
+    deleteNode: () => void;
+};
+export type RichInputMentionRenderer = (props: RichInputMentionRenderProps) => ReactNode;
+/** How a mention appears in copy/paste and {@link docToPlainText} (markdown for marks). Empty string omits it. */
+export type RichInputMentionSerializer = (mention: ComposerMentionAttrs) => string;
+/** Helpers for non-insert trigger rows (categories / drill-in menus). */
+export type RichInputTriggerActionContext = {
+    /** Replace the open menu’s items without inserting a mention or closing. */
+    setItems: (items: RichInputTriggerItem[]) => void;
+};
+export type RichInputTriggerItem = {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    endAffix?: ReactNode;
+    /**
+     * Consecutive items with the same `section` share a group.
+     * A non-empty value is shown as the section header (e.g. `Skills`).
+     * Omit for an unlabeled group. Empty groups are not rendered.
+     */
+    section?: string;
+    /** Required to insert a mention; omit when `action` handles the row. */
+    kind?: ComposerMentionKind;
+    /** Chip label; defaults to `label`. */
+    displayText?: string;
+    data?: unknown;
+    /**
+     * Non-insert row (category, “Files & Folders”, Back, …).
+     * Keeps the trigger open; use `setItems` to drill into a submenu.
+     */
+    action?: (ctx: RichInputTriggerActionContext) => void;
+    /**
+     * Consume the trigger query, close the menu, do not insert a mention.
+     * Chat `/summarize` (send a turn) and local commands (open settings) use this.
+     * Distinct from {@link action}, which stays in the slash session.
+     */
+    run?: () => void;
+};
+export type RichInputTriggerPlacement = 'auto' | 'top';
+export type RichInputTrigger = {
+    char: string;
+    /** Restrict to line start (e.g. `/`). */
+    position?: 'any' | 'start';
+    accessibilityLabel: string;
+    /** Fired when the suggestion menu closes (Escape, blur, insert). */
+    onClose?: () => void;
+    onSearch: (query: string) => RichInputTriggerItem[] | Promise<RichInputTriggerItem[]>;
+    /**
+     * Pin the menu to this rect instead of the caret. Chat `/` and `@` use the
+     * composer surface so the list sits on the box, not the glyph.
+     */
+    getAnchorRect?: () => DOMRect | null;
+    /** `top` always opens above the anchor. Default `auto` (more viewport room). */
+    placement?: RichInputTriggerPlacement;
+};
+export type RichInputHandle = {
+    focus: () => void;
+    getDoc: () => ComposerDoc;
+    getPlainText: () => string;
+    insertMention: (attrs: ComposerMentionAttrs) => void;
+    appendText: (text: string) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/RichInput/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/RichInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,CAAC;AAExF,MAAM,MAAM,oBAAoB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,4DAA4D;AAC5D,MAAM,MAAM,2BAA2B,GAAG;IACtC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,CAAC,KAAK,EAAE,2BAA2B,KAAK,SAAS,CAAC;AAEzF,kHAAkH;AAClH,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,CAAC;AAEnF,yEAAyE;AACzE,MAAM,MAAM,6BAA6B,GAAG;IACxC,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,6BAA6B,KAAK,IAAI,CAAC;IACtD;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,KAAK,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,oBAAoB,EAAE,GAAG,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACtF;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IACrC,gFAAgF;IAChF,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,WAAW,CAAC;IAC1B,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACrD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC"}

package/dist/Scrollable/ScrollChromeBars.d.ts

@@ -0,0 +1,12 @@
+export type ScrollChromeBarsProps = {
+    vertical?: boolean;
+    horizontal?: boolean;
+    setScrollbarV?: (el: HTMLDivElement | null) => void;
+    setScrollbarH?: (el: HTMLDivElement | null) => void;
+    onPointerDown: (e: React.PointerEvent) => void;
+};
+export declare function ScrollChromeBars({ vertical, horizontal, setScrollbarV, setScrollbarH, onPointerDown, }: ScrollChromeBarsProps): import("react").JSX.Element;
+export declare namespace ScrollChromeBars {
+    var displayName: string;
+}
+//# sourceMappingURL=ScrollChromeBars.d.ts.map

package/dist/Scrollable/ScrollChromeBars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollChromeBars.d.ts","sourceRoot":"","sources":["../../src/Scrollable/ScrollChromeBars.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,qBAAqB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,QAAQ,EACR,UAAU,EACV,aAAa,EACb,aAAa,EACb,aAAa,GAChB,EAAE,qBAAqB,+BAuBvB;yBA7Be,gBAAgB"}

package/dist/Scrollable/ScrollChromeBars.js

@@ -0,0 +1,28 @@
+import { cn as s } from "@reforma/lib";
+import r from "./Scrollable.module.css.js";
+import { jsxs as n, Fragment as f, jsx as a } from "react/jsx-runtime";
+function b({
+  vertical: o,
+  horizontal: e,
+  setScrollbarV: c,
+  setScrollbarH: m,
+  onPointerDown: l
+}) {
+  const t = o ?? !0, i = e ?? !1;
+  return /* @__PURE__ */ n(f, {
+    children: [t && /* @__PURE__ */ a("div", {
+      ref: c,
+      className: s(r.scrollbar, r.scrollbarV),
+      onPointerDown: l
+    }), i && /* @__PURE__ */ a("div", {
+      ref: m,
+      className: s(r.scrollbar, r.scrollbarH),
+      onPointerDown: l
+    })]
+  });
+}
+b.displayName = "ScrollChromeBars";
+export {
+  b as ScrollChromeBars
+};
+//# sourceMappingURL=ScrollChromeBars.js.map

package/dist/Scrollable/ScrollChromeBars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollChromeBars.js","sources":["../../src/Scrollable/ScrollChromeBars.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\n\nimport styles from './Scrollable.module.css';\n\nexport type ScrollChromeBarsProps = {\n    vertical?: boolean;\n    horizontal?: boolean;\n    setScrollbarV?: (el: HTMLDivElement | null) => void;\n    setScrollbarH?: (el: HTMLDivElement | null) => void;\n    onPointerDown: (e: React.PointerEvent) => void;\n};\n\nexport function ScrollChromeBars({\n    vertical,\n    horizontal,\n    setScrollbarV,\n    setScrollbarH,\n    onPointerDown,\n}: ScrollChromeBarsProps) {\n    const isVerticalEnabled = vertical ?? true;\n    const isHorizontalEnabled = horizontal ?? false;\n\n    return (\n        <>\n            { isVerticalEnabled && (\n                <div\n                    ref={ setScrollbarV }\n                    className={ cn(styles.scrollbar, styles.scrollbarV) }\n                    onPointerDown={ onPointerDown }\n                />\n            ) }\n\n            { isHorizontalEnabled && (\n                <div\n                    ref={ setScrollbarH }\n                    className={ cn(styles.scrollbar, styles.scrollbarH) }\n                    onPointerDown={ onPointerDown }\n                />\n            ) }\n        </>\n    );\n}\n\nScrollChromeBars.displayName = 'ScrollChromeBars';\n"],"names":["ScrollChromeBars","vertical","horizontal","setScrollbarV","setScrollbarH","onPointerDown","isVerticalEnabled","isHorizontalEnabled","_Fragment","_jsx","cn","styles"],"mappings":";;;AAGO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AACF,GAAG;AACD,QAAMC,IAAoBL,KAAY,IAChCM,IAAsBL,KAAc;AAC1C,2BAA0BM,GAAW;AAAA,IACnC,UAAU,CAACF,KAAkCG,gBAAAA,EAAK,OAAO;AAAA,MACvD,KAAKN;AAAA,MACL,WAAWO,EAAGC,EAAO,WAAWA,EAAO,UAAU;AAAA,MACjD,eAAAN;AAAA,IAAA,CACD,GAAGE,KAAoCE,gBAAAA,EAAK,OAAO;AAAA,MAClD,KAAKL;AAAA,MACL,WAAWM,EAAGC,EAAO,WAAWA,EAAO,UAAU;AAAA,MACjD,eAAAN;AAAA,IAAA,CACD,CAAC;AAAA,EAAA,CACH;AACH;AACAL,EAAiB,cAAc;"}

package/dist/Scrollable/ScrollChromeRoot.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+export type ScrollChromeRootProps = {
+    children: ReactNode;
+    className?: string;
+    vertical?: boolean;
+    horizontal?: boolean;
+    edgeFade?: boolean;
+    ref?: Ref<HTMLDivElement | null>;
+    rootPointerHandlers: {
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+    };
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export declare function ScrollChromeRoot({ children, className, vertical, horizontal, edgeFade, ref: userRef, rootPointerHandlers, rootRef, ...attrs }: ScrollChromeRootProps & {
+    rootRef: Ref<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+export declare namespace ScrollChromeRoot {
+    var displayName: string;
+}
+//# sourceMappingURL=ScrollChromeRoot.d.ts.map

package/dist/Scrollable/ScrollChromeRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollChromeRoot.d.ts","sourceRoot":"","sources":["../../src/Scrollable/ScrollChromeRoot.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,qBAAqB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjC,mBAAmB,EAAE;QACjB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;CACL,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,GAAG,EAAE,OAAO,EACZ,mBAAmB,EACnB,OAAO,EACP,GAAG,KAAK,EACX,EAAE,qBAAqB,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAAE,+BA2BjE;yBArCe,gBAAgB"}

package/dist/Scrollable/ScrollChromeRoot.js

@@ -0,0 +1,36 @@
+import { mergeRefs as d, cn as g } from "@reforma/lib";
+import { useMemo as E } from "react";
+import { mergeProps as P } from "react-aria";
+import o from "./Scrollable.module.css.js";
+import { jsx as u } from "react/jsx-runtime";
+function v({
+  children: n,
+  className: m,
+  vertical: i,
+  horizontal: l,
+  edgeFade: s,
+  ref: e,
+  rootPointerHandlers: r,
+  rootRef: t,
+  ...a
+}) {
+  const c = i ?? !0, f = l ?? !1, p = E(() => d(t, e), [t, e]);
+  return /* @__PURE__ */ u("div", {
+    ...P(a, {
+      ref: p,
+      className: g(o.root, m, {
+        [o.scrollV]: c,
+        [o.scrollH]: f,
+        [o.edgeFade]: s
+      }),
+      onPointerEnter: r.onPointerEnter,
+      onPointerLeave: r.onPointerLeave
+    }),
+    children: n
+  });
+}
+v.displayName = "ScrollChromeRoot";
+export {
+  v as ScrollChromeRoot
+};
+//# sourceMappingURL=ScrollChromeRoot.js.map

package/dist/Scrollable/ScrollChromeRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollChromeRoot.js","sources":["../../src/Scrollable/ScrollChromeRoot.tsx"],"sourcesContent":["import { cn, mergeRefs } from '@reforma/lib';\nimport { useMemo } from 'react';\nimport { mergeProps } from 'react-aria';\n\nimport styles from './Scrollable.module.css';\n\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\n\nexport type ScrollChromeRootProps = {\n    children: ReactNode;\n    className?: string;\n    vertical?: boolean;\n    horizontal?: boolean;\n    edgeFade?: boolean;\n    ref?: Ref<HTMLDivElement | null>;\n    rootPointerHandlers: {\n        onPointerEnter: () => void;\n        onPointerLeave: () => void;\n    };\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;\n\nexport function ScrollChromeRoot({\n    children,\n    className,\n    vertical,\n    horizontal,\n    edgeFade,\n    ref: userRef,\n    rootPointerHandlers,\n    rootRef,\n    ...attrs\n}: ScrollChromeRootProps & { rootRef: Ref<HTMLDivElement | null> }) {\n    const isVerticalEnabled = vertical ?? true;\n    const isHorizontalEnabled = horizontal ?? false;\n\n    // mergeRefs() returns a new callback every call — memoize so React does not\n    // detach/reattach (e.g. motion mid-animation) on every parent render.\n    const rootMergedRef = useMemo(\n        () => mergeRefs(rootRef, userRef),\n        [rootRef, userRef]\n    );\n\n    return (\n        <div\n            { ...mergeProps(attrs as HTMLAttributes<HTMLDivElement>, {\n                ref: rootMergedRef,\n                className: cn(styles.root, className, {\n                    [styles.scrollV]: isVerticalEnabled,\n                    [styles.scrollH]: isHorizontalEnabled,\n                    [styles.edgeFade]: edgeFade,\n                }),\n                onPointerEnter: rootPointerHandlers.onPointerEnter,\n                onPointerLeave: rootPointerHandlers.onPointerLeave,\n            }) }\n        >\n            { children }\n        </div>\n    );\n}\n\nScrollChromeRoot.displayName = 'ScrollChromeRoot';\n"],"names":["ScrollChromeRoot","children","className","vertical","horizontal","edgeFade","userRef","rootPointerHandlers","rootRef","attrs","isVerticalEnabled","isHorizontalEnabled","rootMergedRef","useMemo","mergeRefs","mergeProps","cn","styles"],"mappings":";;;;;AAKO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAKC;AAAA,EACL,qBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAoBP,KAAY,IAChCQ,IAAsBP,KAAc,IAIpCQ,IAAgBC,EAAQ,MAAMC,EAAUN,GAASF,CAAO,GAAG,CAACE,GAASF,CAAO,CAAC;AACnF,2BAAyB,OAAO;AAAA,IAC9B,GAAGS,EAAWN,GAAO;AAAA,MACnB,KAAKG;AAAA,MACL,WAAWI,EAAGC,EAAO,MAAMf,GAAW;AAAA,QACpC,CAACe,EAAO,OAAO,GAAGP;AAAA,QAClB,CAACO,EAAO,OAAO,GAAGN;AAAA,QAClB,CAACM,EAAO,QAAQ,GAAGZ;AAAA,MAAA,CACpB;AAAA,MACD,gBAAgBE,EAAoB;AAAA,MACpC,gBAAgBA,EAAoB;AAAA,IAAA,CACrC;AAAA,IACD,UAAAN;AAAA,EAAA,CACD;AACH;AACAD,EAAiB,cAAc;"}

package/dist/Scrollable/ScrollContainer.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode, Ref } from 'react';
+export type ScrollContainerProps = {
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement | null>;
+    contentRef?: Ref<HTMLDivElement | null>;
+    containerClass?: string;
+    contentClass?: string;
+    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+};
+export declare function ScrollContainer({ children, ref: userRef, contentRef, containerClass, contentClass, onScroll, }: ScrollContainerProps): import("react").JSX.Element;
+export declare namespace ScrollContainer {
+    var displayName: string;
+}
+//# sourceMappingURL=ScrollContainer.d.ts.map

package/dist/Scrollable/ScrollContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../../src/Scrollable/ScrollContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACzD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,GAAG,EAAE,OAAO,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,QAAQ,GACX,EAAE,oBAAoB,+BAgBtB;yBAvBe,eAAe"}

package/dist/Scrollable/ScrollContainer.js

@@ -0,0 +1,28 @@
+import { cn as r } from "@reforma/lib";
+import e from "./Scrollable.module.css.js";
+import { jsx as n } from "react/jsx-runtime";
+function m({
+  children: o,
+  ref: t,
+  contentRef: i,
+  containerClass: a,
+  contentClass: c,
+  onScroll: l
+}) {
+  return /* @__PURE__ */ n("div", {
+    ref: t,
+    className: r(e.container, a),
+    onScroll: l,
+    tabIndex: -1,
+    children: /* @__PURE__ */ n("div", {
+      ref: i,
+      className: r(e.content, c),
+      children: o
+    })
+  });
+}
+m.displayName = "ScrollContainer";
+export {
+  m as ScrollContainer
+};
+//# sourceMappingURL=ScrollContainer.js.map

package/dist/Scrollable/ScrollContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollContainer.js","sources":["../../src/Scrollable/ScrollContainer.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\n\nimport styles from './Scrollable.module.css';\n\nimport type { ReactNode, Ref } from 'react';\n\nexport type ScrollContainerProps = {\n    children: ReactNode;\n    ref?: Ref<HTMLDivElement | null>;\n    contentRef?: Ref<HTMLDivElement | null>;\n    containerClass?: string;\n    contentClass?: string;\n    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n};\n\nexport function ScrollContainer({\n    children,\n    ref: userRef,\n    contentRef,\n    containerClass,\n    contentClass,\n    onScroll,\n}: ScrollContainerProps) {\n    return (\n        <div\n            ref={ userRef }\n            className={ cn(styles.container, containerClass) }\n            onScroll={ onScroll }\n            tabIndex={ -1 }\n        >\n            <div\n                ref={ contentRef }\n                className={ cn(styles.content, contentClass) }\n            >\n                { children }\n            </div>\n        </div>\n    );\n}\n\nScrollContainer.displayName = 'ScrollContainer';\n"],"names":["ScrollContainer","children","userRef","contentRef","containerClass","contentClass","onScroll","cn","styles"],"mappings":";;;AAGO,SAASA,EAAgB;AAAA,EAC9B,UAAAC;AAAA,EACA,KAAKC;AAAA,EACL,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,GAAG;AACD,2BAAyB,OAAO;AAAA,IAC9B,KAAKJ;AAAA,IACL,WAAWK,EAAGC,EAAO,WAAWJ,CAAc;AAAA,IAC9C,UAAAE;AAAA,IACA,UAAU;AAAA,IACV,4BAA4B,OAAO;AAAA,MACjC,KAAKH;AAAA,MACL,WAAWI,EAAGC,EAAO,SAASH,CAAY;AAAA,MAC1C,UAAAJ;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;AACAD,EAAgB,cAAc;"}

package/dist/Scrollable/ScrollExpandChevronButton.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonProps } from '../Button';
+import type { FC } from 'react';
+export type ScrollExpandChevronButtonProps = {
+    expanded: boolean;
+    /** When the scroll region is collapsed (preview); activating expands to full content. */
+    labelExpand: string;
+    /** When full content is shown; activating collapses back to the preview height. */
+    labelCollapse: string;
+} & Omit<ButtonProps, 'children' | 'aria-expanded' | 'aria-label' | 'type'>;
+/** Bottom-centered overlay control used with {@link Scrollable} `overlay` + height clamp on the scroll root. */
+export declare const ScrollExpandChevronButton: FC<ScrollExpandChevronButtonProps>;
+//# sourceMappingURL=ScrollExpandChevronButton.d.ts.map

package/dist/Scrollable/ScrollExpandChevronButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollExpandChevronButton.d.ts","sourceRoot":"","sources":["../../src/Scrollable/ScrollExpandChevronButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,MAAM,8BAA8B,GAAG;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,yFAAyF;IACzF,WAAW,EAAE,MAAM,CAAC;IACpB,mFAAmF;IACnF,aAAa,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC;AAE5E,gHAAgH;AAChH,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAyBxE,CAAC"}

package/dist/Scrollable/ScrollExpandChevronButton.js

@@ -0,0 +1,30 @@
+import { ChevronDown as m } from "@reforma/icons/8";
+import { Button as p } from "../Button/Button.js";
+import { jsx as t } from "react/jsx-runtime";
+const c = ({
+  expanded: r,
+  labelExpand: o,
+  labelCollapse: a,
+  className: n,
+  variant: e = "transparent",
+  size: i = "xs",
+  ...l
+}) => /* @__PURE__ */ t(p, {
+  ...l,
+  type: "button",
+  variant: e,
+  size: i,
+  className: n,
+  "aria-expanded": r,
+  "aria-label": r ? a : o,
+  fullWidth: !0,
+  children: /* @__PURE__ */ t(m, {
+    "aria-hidden": !0,
+    "aria-expanded": r,
+    className: "chevron"
+  })
+});
+export {
+  c as ScrollExpandChevronButton
+};
+//# sourceMappingURL=ScrollExpandChevronButton.js.map

package/dist/Scrollable/ScrollExpandChevronButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollExpandChevronButton.js","sources":["../../src/Scrollable/ScrollExpandChevronButton.tsx"],"sourcesContent":["import { ChevronDown } from '@reforma/icons/8';\n\nimport { Button, type ButtonProps } from '../Button';\n\nimport type { FC } from 'react';\n\nexport type ScrollExpandChevronButtonProps = {\n    expanded: boolean;\n    /** When the scroll region is collapsed (preview); activating expands to full content. */\n    labelExpand: string;\n    /** When full content is shown; activating collapses back to the preview height. */\n    labelCollapse: string;\n} & Omit<ButtonProps, 'children' | 'aria-expanded' | 'aria-label' | 'type'>;\n\n/** Bottom-centered overlay control used with {@link Scrollable} `overlay` + height clamp on the scroll root. */\nexport const ScrollExpandChevronButton: FC<ScrollExpandChevronButtonProps> = ({\n    expanded,\n    labelExpand,\n    labelCollapse,\n    className,\n    variant = 'transparent',\n    size = 'xs',\n    ...buttonRest\n}) => (\n    <Button\n        { ...buttonRest }\n        type=\"button\"\n        variant={ variant }\n        size={ size }\n        className={ className }\n        aria-expanded={ expanded }\n        aria-label={ expanded ? labelCollapse : labelExpand }\n        fullWidth\n    >\n        <ChevronDown\n            aria-hidden\n            aria-expanded={ expanded }\n            className=\"chevron\"\n        />\n    </Button>\n);\n"],"names":["ScrollExpandChevronButton","expanded","labelExpand","labelCollapse","className","variant","size","buttonRest","Button","ChevronDown"],"mappings":";;;AAIO,MAAMA,IAA4B,CAAC;AAAA,EACxC,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,wBAAwBC,GAAQ;AAAA,EAC9B,GAAGD;AAAA,EACH,MAAM;AAAA,EACN,SAAAF;AAAA,EACA,MAAAC;AAAA,EACA,WAAAF;AAAA,EACA,iBAAiBH;AAAA,EACjB,cAAcA,IAAWE,IAAgBD;AAAA,EACzC,WAAW;AAAA,EACX,4BAA4BO,GAAa;AAAA,IACvC,eAAe;AAAA,IACf,iBAAiBR;AAAA,IACjB,WAAW;AAAA,EAAA,CACZ;AACH,CAAC;"}

package/dist/Scrollable/Scrollable.d.ts

@@ -0,0 +1,44 @@
+import type { Ref } from 'react';
+import type { StickToBottomOptions } from '../hooks/useStickToBottom';
+/** `slot` value for children rendered in the overlay layer (with {@link useScrollable}), same pattern as {@link filterSlots}. */
+export declare const SCROLLABLE_OVERLAY_SLOT = "overlay";
+export type ScrollableProps = {
+    children?: React.ReactNode;
+    ref?: Ref<HTMLDivElement | null>;
+    containerRef?: Ref<HTMLDivElement | null>;
+    contentRef?: Ref<HTMLDivElement | null>;
+    className?: string;
+    containerClass?: string;
+    contentClass?: string;
+    /**
+     * Optional overlay region after the scroll container, inside `useScrollable` context.
+     * Prefer a child with `slot={SCROLLABLE_OVERLAY_SLOT}` (see {@link filterSlots}); this prop overrides that slot when set.
+     */
+    overlay?: React.ReactNode;
+    poolingInterval?: number;
+    onScroll?: (e: Event) => void;
+    alwaysShowScrollbar?: boolean;
+    vertical?: boolean;
+    horizontal?: boolean;
+    gap?: number;
+    /**
+     * Stick-to-bottom for the scrollport.
+     * The hook always mounts; refs are always attached. Activity is controlled by `enabled`:
+     * - `false` — inert (`enabled: false`), `useScrollable().stickToBottom` is `null`
+     * - `true` / options — active; pause with `enabled: false` or `setEnabled(false)` without tearing down refs
+     */
+    stickToBottom?: boolean | StickToBottomOptions;
+    edgeFade?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onScroll'>;
+/**
+ * Custom scroll container with optional stick-to-bottom.
+ *
+ * The **root** element exposes scroll-edge hints when the corresponding axis is enabled:
+ * - Vertical: `data-scroll-v-start`, `data-scroll-v-end` (near top / bottom).
+ * - Horizontal: `data-scroll-h-start`, `data-scroll-h-end` (near left / right).
+ * Values are booleans in React; in the DOM they appear as `"true"` / `"false"`.
+ * The same flags are available from {@link useScrollable}.
+ * Overlay UI: pass a child with `slot={SCROLLABLE_OVERLAY_SLOT}`, or use the `overlay` prop.
+ */
+export declare function Scrollable({ ref: userRef, children, className, containerClass, contentClass, containerRef, contentRef, overlay, onScroll, alwaysShowScrollbar, vertical, horizontal, poolingInterval, gap, stickToBottom, edgeFade, ...attrs }: ScrollableProps): import("react").JSX.Element;
+//# sourceMappingURL=Scrollable.d.ts.map

package/dist/Scrollable/Scrollable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollable.d.ts","sourceRoot":"","sources":["../../src/Scrollable/Scrollable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAA6B,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,iIAAiI;AACjI,eAAO,MAAM,uBAAuB,YAAY,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,oBAAoB,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAE3D;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACvB,GAAG,EAAE,OAAO,EACZ,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,UAAU,EACV,eAAe,EACf,GAAO,EACP,aAAqB,EACrB,QAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,+BAuJjB"}

package/dist/Scrollable/Scrollable.js

@@ -0,0 +1,108 @@
+import { mergeRefs as v, cn as J } from "@reforma/lib";
+import { useMemo as t, useRef as K, useCallback as z } from "react";
+import { useStickToBottom as N } from "../hooks/useStickToBottom.js";
+import { filterSlots as g } from "../Slot/Slot.js";
+import { ScrollableContext as Q } from "./scrollable-context.js";
+import U from "./Scrollable.module.css.js";
+import { elementScrollAxisSource as h } from "./scrollAxisSource.js";
+import { ScrollChromeBars as W } from "./ScrollChromeBars.js";
+import { ScrollChromeRoot as X } from "./ScrollChromeRoot.js";
+import { ScrollContainer as Z } from "./ScrollContainer.js";
+import { useScrollChrome as $ } from "./useScrollChrome.js";
+import { jsx as m, jsxs as tt } from "react/jsx-runtime";
+const E = "overlay";
+function St({
+  ref: H,
+  children: a,
+  className: V,
+  containerClass: x,
+  contentClass: k,
+  containerRef: S,
+  contentRef: d,
+  overlay: y,
+  onScroll: p,
+  alwaysShowScrollbar: L,
+  vertical: O,
+  horizontal: P,
+  poolingInterval: T,
+  gap: j = 0,
+  stickToBottom: r = !1,
+  edgeFade: A = !1,
+  ...M
+}) {
+  const w = t(() => g(a, E), [a]), B = t(() => g(a, (e) => e !== E, null), [a]), D = y ?? w, f = K(null), c = z(() => f.current, []), s = O ?? !0, i = P ?? !1, _ = t(() => s ? h(c, "vertical") : null, [c, s]), F = t(() => i ? h(c, "horizontal") : null, [c, i]), o = $({
+    verticalSource: _,
+    horizontalSource: F,
+    gap: j,
+    alwaysShowScrollbar: L,
+    poolingInterval: T
+  }), l = r !== !1, I = t(() => l ? typeof r == "object" && r !== null ? {
+    resize: "instant",
+    ...r,
+    enabled: r.enabled !== !1
+  } : {
+    enabled: !0,
+    initial: "instant",
+    resize: "instant"
+  } : {
+    enabled: !1,
+    initial: !1
+  }, [l, r]), u = N(I), {
+    scrollRef: b,
+    contentRef: R
+  } = u, {
+    edgesRef: n
+  } = o, C = z(() => {
+    const e = f.current;
+    e && (e.scrollTop = 0);
+  }, []), Y = t(() => ({
+    stickToBottom: l ? u : null,
+    scrollToTop: C,
+    get atVerticalStart() {
+      return n.current.atVerticalStart;
+    },
+    get atVerticalEnd() {
+      return n.current.atVerticalEnd;
+    },
+    get atHorizontalStart() {
+      return n.current.atHorizontalStart;
+    },
+    get atHorizontalEnd() {
+      return n.current.atHorizontalEnd;
+    }
+  }), [n, C, l, u]), q = t(() => v(f, S, b), [S, b]), G = t(() => v(d, R), [d, R]);
+  return /* @__PURE__ */ m(Q, {
+    value: Y,
+    children: /* @__PURE__ */ tt(X, {
+      ...M,
+      ref: H,
+      rootRef: o.rootRef,
+      className: V,
+      vertical: s,
+      horizontal: i,
+      edgeFade: A,
+      rootPointerHandlers: o.rootPointerHandlers,
+      children: [/* @__PURE__ */ m(Z, {
+        ref: q,
+        contentRef: G,
+        containerClass: J(l && U.containerStickToBottom, x),
+        contentClass: k,
+        onScroll: p ? (e) => {
+          p(e.nativeEvent);
+        } : void 0,
+        children: B
+      }), /* @__PURE__ */ m(W, {
+        vertical: s,
+        horizontal: i,
+        setScrollbarV: o.setScrollbarV,
+        setScrollbarH: o.setScrollbarH,
+        onPointerDown: o.handlePointerDown
+      }), D]
+    })
+  });
+}
+export {
+  E as SCROLLABLE_OVERLAY_SLOT,
+  St as Scrollable
+};
+//# sourceMappingURL=Scrollable.js.map

package/dist/Scrollable/Scrollable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollable.js","sources":["../../src/Scrollable/Scrollable.tsx"],"sourcesContent":["import { cn, mergeRefs } from '@reforma/lib';\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport { useStickToBottom } from '../hooks/useStickToBottom';\nimport { filterSlots } from '../Slot';\nimport { ScrollableContext } from './scrollable-context';\nimport styles from './Scrollable.module.css';\nimport { elementScrollAxisSource } from './scrollAxisSource';\nimport { ScrollChromeBars } from './ScrollChromeBars';\nimport { ScrollChromeRoot } from './ScrollChromeRoot';\nimport { ScrollContainer } from './ScrollContainer';\nimport { useScrollChrome } from './useScrollChrome';\n\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport type { StickToBottomOptions } from '../hooks/useStickToBottom';\nimport type { ScrollableContextValue } from './scrollable-context';\n\n/** `slot` value for children rendered in the overlay layer (with {@link useScrollable}), same pattern as {@link filterSlots}. */\nexport const SCROLLABLE_OVERLAY_SLOT = 'overlay';\n\nexport type ScrollableProps = {\n    children?: React.ReactNode;\n\n    ref?: Ref<HTMLDivElement | null>;\n    containerRef?: Ref<HTMLDivElement | null>;\n    contentRef?: Ref<HTMLDivElement | null>;\n\n    className?: string;\n    containerClass?: string;\n    contentClass?: string;\n\n    /**\n     * Optional overlay region after the scroll container, inside `useScrollable` context.\n     * Prefer a child with `slot={SCROLLABLE_OVERLAY_SLOT}` (see {@link filterSlots}); this prop overrides that slot when set.\n     */\n    overlay?: React.ReactNode;\n    poolingInterval?: number;\n    onScroll?: (e: Event) => void;\n    alwaysShowScrollbar?: boolean;\n    vertical?: boolean;\n    horizontal?: boolean;\n    gap?: number;\n    /**\n     * Stick-to-bottom for the scrollport.\n     * The hook always mounts; refs are always attached. Activity is controlled by `enabled`:\n     * - `false` — inert (`enabled: false`), `useScrollable().stickToBottom` is `null`\n     * - `true` / options — active; pause with `enabled: false` or `setEnabled(false)` without tearing down refs\n     */\n    stickToBottom?: boolean | StickToBottomOptions;\n    edgeFade?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onScroll'>;\n\n/**\n * Custom scroll container with optional stick-to-bottom.\n *\n * The **root** element exposes scroll-edge hints when the corresponding axis is enabled:\n * - Vertical: `data-scroll-v-start`, `data-scroll-v-end` (near top / bottom).\n * - Horizontal: `data-scroll-h-start`, `data-scroll-h-end` (near left / right).\n * Values are booleans in React; in the DOM they appear as `\"true\"` / `\"false\"`.\n * The same flags are available from {@link useScrollable}.\n * Overlay UI: pass a child with `slot={SCROLLABLE_OVERLAY_SLOT}`, or use the `overlay` prop.\n */\nexport function Scrollable({\n    ref: userRef,\n    children,\n    className,\n    containerClass,\n    contentClass,\n    containerRef,\n    contentRef,\n    overlay,\n    onScroll,\n    alwaysShowScrollbar,\n    vertical,\n    horizontal,\n    poolingInterval,\n    gap = 0,\n    stickToBottom = false,\n    edgeFade = false,\n    ...attrs\n}: ScrollableProps) {\n    const overlayFromSlot = useMemo(\n        (): ReactNode => filterSlots(children, SCROLLABLE_OVERLAY_SLOT),\n        [children]\n    );\n\n    const scrollChildren = useMemo(\n        (): ReactNode => filterSlots(\n            children,\n            slot => slot !== SCROLLABLE_OVERLAY_SLOT,\n            null\n        ),\n        [children]\n    );\n\n    const overlayResolved = overlay ?? overlayFromSlot;\n\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n    const getScrollElement = useCallback(\n        () => scrollContainerRef.current,\n        []\n    );\n\n    const isVerticalEnabled = vertical ?? true;\n    const isHorizontalEnabled = horizontal ?? false;\n\n    const verticalSource = useMemo(\n        () => (isVerticalEnabled ? elementScrollAxisSource(getScrollElement, 'vertical') : null),\n        [getScrollElement, isVerticalEnabled]\n    );\n\n    const horizontalSource = useMemo(\n        () => (isHorizontalEnabled ? elementScrollAxisSource(getScrollElement, 'horizontal') : null),\n        [getScrollElement, isHorizontalEnabled]\n    );\n\n    const chrome = useScrollChrome({\n        verticalSource,\n        horizontalSource,\n        gap,\n        alwaysShowScrollbar,\n        poolingInterval,\n    });\n\n    // Hook always runs (Rules of Hooks). Behavior is gated by `enabled`, not by omitting refs:\n    // - `false` → enabled: false (inert listeners, no pin, context null)\n    // - `true` / options → active (options.enabled can still pause at runtime)\n    const stickConfigured = stickToBottom !== false;\n    const stickToBottomHookOptions = useMemo((): StickToBottomOptions => {\n        if (!stickConfigured) {\n            return { enabled: false, initial: false };\n        }\n\n        if (typeof stickToBottom === 'object' && stickToBottom !== null) {\n            return {\n                resize: 'instant',\n                ...stickToBottom,\n                enabled: stickToBottom.enabled !== false,\n            };\n        }\n\n        return { enabled: true, initial: 'instant', resize: 'instant' };\n    }, [stickConfigured, stickToBottom]);\n\n    const stickToBottomInstance = useStickToBottom(stickToBottomHookOptions);\n    const { scrollRef: stickScrollRef, contentRef: stickContentRef } = stickToBottomInstance;\n\n    const { edgesRef } = chrome;\n\n    const scrollToTop = useCallback(() => {\n        const el = scrollContainerRef.current;\n\n        if (el) {\n            el.scrollTop = 0;\n        }\n    }, []);\n\n    const scrollableContextValue = useMemo<ScrollableContextValue>(\n        () => ({\n            stickToBottom: stickConfigured ? stickToBottomInstance : null,\n            scrollToTop,\n            get atVerticalStart() {\n                return edgesRef.current.atVerticalStart;\n            },\n            get atVerticalEnd() {\n                return edgesRef.current.atVerticalEnd;\n            },\n            get atHorizontalStart() {\n                return edgesRef.current.atHorizontalStart;\n            },\n            get atHorizontalEnd() {\n                return edgesRef.current.atHorizontalEnd;\n            },\n        }),\n        [edgesRef, scrollToTop, stickConfigured, stickToBottomInstance]\n    );\n\n    // mergeRefs() returns a new callback every call — memoize so React does not\n    // detach/reattach stick listeners on every parent render (e.g. isAtBottom flips).\n    const containerMergedRef = useMemo(\n        () => mergeRefs<HTMLDivElement>(scrollContainerRef, containerRef, stickScrollRef),\n        [containerRef, stickScrollRef]\n    );\n\n    const contentMergedRef = useMemo(\n        () => mergeRefs<HTMLDivElement>(contentRef, stickContentRef),\n        [contentRef, stickContentRef]\n    );\n\n    return (\n        <ScrollableContext value={ scrollableContextValue }>\n            <ScrollChromeRoot\n                { ...attrs as HTMLAttributes<HTMLDivElement> }\n                ref={ userRef }\n                rootRef={ chrome.rootRef }\n                className={ className }\n                vertical={ isVerticalEnabled }\n                horizontal={ isHorizontalEnabled }\n                edgeFade={ edgeFade }\n                rootPointerHandlers={ chrome.rootPointerHandlers }\n            >\n                <ScrollContainer\n                    ref={ containerMergedRef }\n                    contentRef={ contentMergedRef }\n                    containerClass={ cn(\n                        stickConfigured && styles.containerStickToBottom,\n                        containerClass\n                    ) }\n                    contentClass={ contentClass }\n                    onScroll={ onScroll\n                        ? (e) => {\n                            onScroll(e.nativeEvent);\n                        }\n                        : undefined }\n                >\n                    { scrollChildren }\n                </ScrollContainer>\n\n                <ScrollChromeBars\n                    vertical={ isVerticalEnabled }\n                    horizontal={ isHorizontalEnabled }\n                    setScrollbarV={ chrome.setScrollbarV }\n                    setScrollbarH={ chrome.setScrollbarH }\n                    onPointerDown={ chrome.handlePointerDown }\n                />\n\n                { overlayResolved }\n            </ScrollChromeRoot>\n        </ScrollableContext>\n    );\n}\n"],"names":["SCROLLABLE_OVERLAY_SLOT","Scrollable","userRef","children","className","containerClass","contentClass","containerRef","contentRef","overlay","onScroll","alwaysShowScrollbar","vertical","horizontal","poolingInterval","gap","stickToBottom","edgeFade","attrs","overlayFromSlot","useMemo","filterSlots","scrollChildren","slot","overlayResolved","scrollContainerRef","useRef","getScrollElement","useCallback","isVerticalEnabled","isHorizontalEnabled","verticalSource","elementScrollAxisSource","horizontalSource","chrome","useScrollChrome","stickConfigured","stickToBottomHookOptions","stickToBottomInstance","useStickToBottom","stickScrollRef","stickContentRef","edgesRef","scrollToTop","el","scrollableContextValue","containerMergedRef","mergeRefs","contentMergedRef","ScrollableContext","ScrollChromeRoot","_jsx","ScrollContainer","cn","styles","ScrollChromeBars"],"mappings":"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"}

package/dist/Scrollable/Scrollable.module.css

@@ -0,0 +1 @@
+@layer components{.Scrollable_root_HZRUuL{--ms-size: var(--scrollbar-size);--ms-gap: var(--spacing-xxs);display:flex;position:relative;overflow:hidden}.Scrollable_root_HZRUuL.Scrollable_scrollV_aT2wve{flex-direction:row}.Scrollable_root_HZRUuL.Scrollable_scrollH_D0afWp{flex-direction:column}.Scrollable_root_HZRUuL.Scrollable_scrollV_aT2wve>.Scrollable_container_iaOGty{flex:1;min-height:0;overflow-x:hidden;overflow-y:scroll}.Scrollable_root_HZRUuL.Scrollable_scrollH_D0afWp>.Scrollable_container_iaOGty{flex:1;min-width:0;overflow-x:scroll;overflow-y:hidden}.Scrollable_root_HZRUuL.Scrollable_scrollV_aT2wve.Scrollable_scrollH_D0afWp>.Scrollable_container_iaOGty{overflow-x:scroll;overflow-y:scroll}.Scrollable_container_iaOGty{scrollbar-width:none;-ms-overflow-style:none}.Scrollable_containerStickToBottom_iTTjCu{overflow-anchor:none}.Scrollable_container_iaOGty::-webkit-scrollbar{display:none}.Scrollable_content_3ww16P{min-height:100%}.Scrollable_scrollbar_IK11Ix{position:absolute;opacity:0;z-index:calc(var(--z-raised) + 1);transition:opacity .15s ease-out;border-radius:var(--radius-full);pointer-events:none}.Scrollable_scrollbarV_tROv9K,.Scrollable_scrollbarH_Qe9Jer{pointer-events:auto}.Scrollable_root_HZRUuL.Scrollable_hover_jbU0jU>.Scrollable_scrollbar_IK11Ix,.Scrollable_root_HZRUuL.Scrollable_inDrag_IvgysF>.Scrollable_scrollbar_IK11Ix,.Scrollable_scrollbar_IK11Ix:hover,.Scrollable_scrollbar_IK11Ix:active{opacity:1}.Scrollable_scrollbarV_tROv9K{top:var(--ms-gap);right:var(--ms-gap);bottom:var(--ms-gap);width:var(--ms-size)}.Scrollable_scrollbarH_Qe9Jer{right:var(--ms-gap);bottom:var(--ms-gap);left:var(--ms-gap);height:var(--ms-size)}.Scrollable_root_HZRUuL.Scrollable_scrollV_aT2wve.Scrollable_scrollH_D0afWp>.Scrollable_scrollbarH_Qe9Jer{right:calc(var(--ms-gap) + var(--ms-size) + var(--ms-gap))}.Scrollable_scrollbarV_tROv9K:before,.Scrollable_scrollbarH_Qe9Jer:before{position:absolute;transition:background .15s ease-out;border-radius:var(--radius-full);background:var(--scrollbar-thumb-bg);pointer-events:none;content:""}.Scrollable_scrollbarV_tROv9K:before{top:var(--ms-thumb-offset, 0);right:0;left:0;height:var(--ms-thumb-length, 20%);min-height:var(--spacing-8)}.Scrollable_scrollbarH_Qe9Jer:before{top:0;right:0;bottom:0;left:var(--ms-thumb-offset, 0);width:var(--ms-thumb-length, 20%);min-width:var(--spacing-8)}.Scrollable_scrollbarV_tROv9K:hover:before,.Scrollable_scrollbarH_Qe9Jer:hover:before{background:var(--scrollbar-thumb-bg-hover)}.Scrollable_root_HZRUuL:not([data-scroll-show-v=true])>.Scrollable_scrollbarV_tROv9K{visibility:hidden;pointer-events:none}.Scrollable_root_HZRUuL:not([data-scroll-show-h=true])>.Scrollable_scrollbarH_Qe9Jer{visibility:hidden;pointer-events:none}.Scrollable_edgeFade_69mL3v{--scrollbar-fade: 20px}.Scrollable_edgeFade_69mL3v[data-scroll-v-start=false][data-scroll-v-end=false]>.Scrollable_container_iaOGty{-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--scrollbar-fade),black calc(100% - var(--scrollbar-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--scrollbar-fade),black calc(100% - var(--scrollbar-fade)),transparent 100%)}.Scrollable_edgeFade_69mL3v[data-scroll-v-start=true][data-scroll-v-end=false]>.Scrollable_container_iaOGty{-webkit-mask-image:linear-gradient(to bottom,black 0,black calc(100% - var(--scrollbar-fade)),transparent 100%);mask-image:linear-gradient(to bottom,black 0,black calc(100% - var(--scrollbar-fade)),transparent 100%)}.Scrollable_edgeFade_69mL3v[data-scroll-v-start=false][data-scroll-v-end=true]>.Scrollable_container_iaOGty{-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--scrollbar-fade),black 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--scrollbar-fade),black 100%)}.Scrollable_edgeFade_69mL3v[data-scroll-v-start=true][data-scroll-v-end=true]>.Scrollable_container_iaOGty{-webkit-mask-image:none;mask-image:none}}