@pinfold/react 0.0.0-stage → 0.1.0

package/dist/accordion/lazy.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as _pinfold_core from '@pinfold/core';
+import { A as AccordionConfig } from '../types-BZqk8btE.js';
+
+/**
+ * Code-split entry point. Nothing accordion-related enters the main bundle
+ * until the component first renders:
+ *
+ *   import { Accordion } from '@pinfold/react/accordion/lazy';
+ */
+declare const Accordion: React.ComponentType<AccordionConfig & {
+    lazy?: _pinfold_core.PinfoldLazy;
+}>;
+
+export { Accordion, AccordionConfig, Accordion as default };

package/dist/accordion/lazy.js

@@ -0,0 +1,16 @@
+'use client';
+import {
+  createLazyComponent
+} from "../chunk-5ZMK623A.js";
+import "../chunk-Q232PTPW.js";
+
+// src/accordion/lazy.ts
+var Accordion = createLazyComponent(
+  () => import("./client.js").then((m) => ({ default: m.Accordion })),
+  { displayName: "LazyAccordion" }
+);
+var lazy_default = Accordion;
+export {
+  Accordion,
+  lazy_default as default
+};

package/dist/chunk-5ZMK623A.js

@@ -0,0 +1,61 @@
+'use client';
+import {
+  usePinfold
+} from "./chunk-Q232PTPW.js";
+
+// src/lazy.tsx
+import * as React from "react";
+function createLazyComponent(loader, options = {}) {
+  var _a, _b;
+  const Lazy = React.lazy(loader);
+  const fallback = (_a = options.fallback) != null ? _a : null;
+  const Wrapped = (props) => {
+    var _a2, _b2;
+    const ctx = usePinfold();
+    const preferred = (_a2 = props.lazy) != null ? _a2 : ctx.lazy;
+    const strategy = preferred === "auto" ? (_b2 = options.auto) != null ? _b2 : "eager" : preferred;
+    const [ready, setReady] = React.useState(strategy === "eager");
+    const placeholder = React.useRef(null);
+    React.useEffect(() => {
+      if (ready) return;
+      if (strategy === "idle") {
+        const w = window;
+        if (w.requestIdleCallback) {
+          const id2 = w.requestIdleCallback(() => setReady(true));
+          return () => {
+            var _a3;
+            return (_a3 = w.cancelIdleCallback) == null ? void 0 : _a3.call(w, id2);
+          };
+        }
+        const id = setTimeout(() => setReady(true), 200);
+        return () => clearTimeout(id);
+      }
+      const el = placeholder.current;
+      if (!el || typeof IntersectionObserver === "undefined") {
+        setReady(true);
+        return;
+      }
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((e) => e.isIntersecting)) {
+            setReady(true);
+            observer.disconnect();
+          }
+        },
+        { rootMargin: "200px" }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [ready, strategy]);
+    if (!ready) {
+      return /* @__PURE__ */ React.createElement("div", { ref: placeholder, "data-pinfold-lazy": "", style: { minHeight: 1 } }, fallback);
+    }
+    return /* @__PURE__ */ React.createElement(React.Suspense, { fallback }, React.createElement(Lazy, props));
+  };
+  Wrapped.displayName = (_b = options.displayName) != null ? _b : "PinfoldLazy";
+  return Wrapped;
+}
+
+export {
+  createLazyComponent
+};

package/dist/chunk-BPPCPHHU.js

@@ -0,0 +1,70 @@
+'use client';
+import {
+  useIsomorphicLayoutEffect
+} from "./chunk-Q232PTPW.js";
+
+// src/slots.ts
+import { cn, mergeProps } from "@pinfold/core";
+function slotProps(overrides, slot, base) {
+  var _a, _b, _c;
+  if (!overrides) return base;
+  const extraClass = (_a = overrides.classNames) == null ? void 0 : _a[slot];
+  const extraStyle = (_b = overrides.styles) == null ? void 0 : _b[slot];
+  let next = base;
+  if (extraClass) next = { ...next, className: cn(next.className, extraClass) };
+  if (extraStyle) next = { ...next, style: { ...next.style, ...extraStyle } };
+  return mergeProps(next, (_c = overrides.slotProps) == null ? void 0 : _c[slot]);
+}
+function renderSlot(overrides, slot, props, state, children, defaultRender) {
+  var _a;
+  const custom = (_a = overrides == null ? void 0 : overrides.render) == null ? void 0 : _a[slot];
+  if (custom) return custom({ props, state, children });
+  return defaultRender(props, children);
+}
+
+// src/component.tsx
+import * as React from "react";
+function usePinfoldComponent(displayName, api, render, buildParts) {
+  const renderRef = React.useRef(render);
+  renderRef.current = render;
+  const ref = React.useRef(null);
+  if (ref.current === null) {
+    const store2 = { version: 0, listeners: /* @__PURE__ */ new Set() };
+    const subscribe = (listener) => {
+      store2.listeners.add(listener);
+      return () => {
+        store2.listeners.delete(listener);
+      };
+    };
+    const snapshot = () => store2.version;
+    const useFresh = () => React.useSyncExternalStore(subscribe, snapshot, snapshot);
+    const Component2 = ((props) => {
+      useFresh();
+      return renderRef.current(props);
+    });
+    Component2.displayName = displayName;
+    const parts = buildParts ? buildParts() : {};
+    for (const key of Object.keys(parts)) {
+      const part = parts[key];
+      const Live = (props) => {
+        useFresh();
+        return part(props);
+      };
+      Live.displayName = `${displayName}.${key}`;
+      Component2[key] = Live;
+    }
+    ref.current = { store: store2, Component: Component2 };
+  }
+  const { store, Component } = ref.current;
+  store.version++;
+  useIsomorphicLayoutEffect(() => {
+    store.listeners.forEach((listener) => listener());
+  });
+  return Object.assign(Component, api, { displayName });
+}
+
+export {
+  slotProps,
+  renderSlot,
+  usePinfoldComponent
+};

package/dist/chunk-DQWSDHRY.cjs

@@ -0,0 +1,71 @@
+"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }'use client';
+
+
+var _chunkVPKVOJHAcjs = require('./chunk-VPKVOJHA.cjs');
+
+// src/slots.ts
+var _core = require('@pinfold/core');
+function slotProps(overrides, slot, base) {
+  var _a, _b, _c;
+  if (!overrides) return base;
+  const extraClass = (_a = overrides.classNames) == null ? void 0 : _a[slot];
+  const extraStyle = (_b = overrides.styles) == null ? void 0 : _b[slot];
+  let next = base;
+  if (extraClass) next = { ...next, className: _core.cn.call(void 0, next.className, extraClass) };
+  if (extraStyle) next = { ...next, style: { ...next.style, ...extraStyle } };
+  return _core.mergeProps.call(void 0, next, (_c = overrides.slotProps) == null ? void 0 : _c[slot]);
+}
+function renderSlot(overrides, slot, props, state, children, defaultRender) {
+  var _a;
+  const custom = (_a = overrides == null ? void 0 : overrides.render) == null ? void 0 : _a[slot];
+  if (custom) return custom({ props, state, children });
+  return defaultRender(props, children);
+}
+
+// src/component.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+function usePinfoldComponent(displayName, api, render, buildParts) {
+  const renderRef = React.useRef(render);
+  renderRef.current = render;
+  const ref = React.useRef(null);
+  if (ref.current === null) {
+    const store2 = { version: 0, listeners: /* @__PURE__ */ new Set() };
+    const subscribe = (listener) => {
+      store2.listeners.add(listener);
+      return () => {
+        store2.listeners.delete(listener);
+      };
+    };
+    const snapshot = () => store2.version;
+    const useFresh = () => React.useSyncExternalStore(subscribe, snapshot, snapshot);
+    const Component2 = ((props) => {
+      useFresh();
+      return renderRef.current(props);
+    });
+    Component2.displayName = displayName;
+    const parts = buildParts ? buildParts() : {};
+    for (const key of Object.keys(parts)) {
+      const part = parts[key];
+      const Live = (props) => {
+        useFresh();
+        return part(props);
+      };
+      Live.displayName = `${displayName}.${key}`;
+      Component2[key] = Live;
+    }
+    ref.current = { store: store2, Component: Component2 };
+  }
+  const { store, Component } = ref.current;
+  store.version++;
+  _chunkVPKVOJHAcjs.useIsomorphicLayoutEffect.call(void 0, () => {
+    store.listeners.forEach((listener) => listener());
+  });
+  return Object.assign(Component, api, { displayName });
+}
+
+
+
+
+
+exports.slotProps = slotProps; exports.renderSlot = renderSlot; exports.usePinfoldComponent = usePinfoldComponent;

package/dist/chunk-Q232PTPW.js

@@ -0,0 +1,115 @@
+'use client';
+
+// src/hooks.ts
+import * as React from "react";
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useId2(provided) {
+  const generated = React.useId();
+  return provided || "pinfold-" + generated.replace(/[^\w-]/g, "");
+}
+function useEvent(fn) {
+  const ref = React.useRef(fn);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  });
+  return React.useCallback(((...args) => ref.current(...args)), []);
+}
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  const currentRef = React.useRef(current);
+  currentRef.current = current;
+  const setValue = useEvent((next) => {
+    const resolved = typeof next === "function" ? next(currentRef.current) : next;
+    if (Object.is(resolved, currentRef.current)) return;
+    if (!isControlled) setUncontrolled(resolved);
+    onChange == null ? void 0 : onChange(resolved);
+  });
+  return [current, setValue];
+}
+
+// src/provider.tsx
+import * as React2 from "react";
+var DEFAULTS = {
+  theme: "system",
+  radius: "md",
+  dir: "ltr",
+  size: "md",
+  tone: "primary",
+  stylePack: "default",
+  lazy: "auto",
+  disableAnimation: false,
+  defaults: {}
+};
+var PinfoldContext = React2.createContext(DEFAULTS);
+function usePinfold() {
+  return React2.useContext(PinfoldContext);
+}
+function PinfoldProvider(props) {
+  const { children, applyToDocument = false, className, config, ...own } = props;
+  const parent = React2.useContext(PinfoldContext);
+  const overrides = { ...stripUndefined(config != null ? config : {}), ...stripUndefined(own) };
+  const value = React2.useMemo(
+    () => ({ ...parent, ...overrides, defaults: mergeDefaults(parent.defaults, overrides.defaults) }),
+    // Keyed on the serialised overrides: configs are plain data, and inline objects must not bust the memo.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [parent, stableKey(overrides)]
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (!applyToDocument) return;
+    const el = document.documentElement;
+    const attrs = [
+      ["data-pinfold-theme", value.theme === "system" ? null : value.theme],
+      ["data-pinfold-radius", value.radius],
+      ["data-pinfold-style", value.stylePack === "default" ? null : value.stylePack]
+    ];
+    const previous = attrs.map(([name]) => el.getAttribute(name));
+    attrs.forEach(([name, v]) => restore(el, name, v));
+    return () => attrs.forEach(([name], i) => restore(el, name, previous[i]));
+  }, [applyToDocument, value.theme, value.radius, value.stylePack]);
+  const body = applyToDocument ? children : /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      className: className ? "pinfold " + className : "pinfold",
+      dir: value.dir,
+      "data-pinfold-theme": value.theme === "system" ? void 0 : value.theme,
+      "data-pinfold-radius": value.radius,
+      "data-pinfold-style": value.stylePack === "default" ? void 0 : value.stylePack
+    },
+    children
+  );
+  return /* @__PURE__ */ React2.createElement(PinfoldContext.Provider, { value }, body);
+}
+function mergeDefaults(parent, own) {
+  if (!own) return parent;
+  const out = { ...parent };
+  for (const key in own) out[key] = { ...parent[key], ...own[key] };
+  return out;
+}
+function stableKey(obj) {
+  let fn = 0;
+  return JSON.stringify(obj, (_, v) => typeof v === "function" ? `fn${fn++}` : v);
+}
+function restore(el, attr, v) {
+  if (v == null) el.removeAttribute(attr);
+  else el.setAttribute(attr, v);
+}
+function stripUndefined(obj) {
+  const out = {};
+  for (const k in obj) if (obj[k] !== void 0) out[k] = obj[k];
+  return out;
+}
+
+export {
+  useIsomorphicLayoutEffect,
+  useId2 as useId,
+  useEvent,
+  useControllableState,
+  usePinfold,
+  PinfoldProvider
+};

package/dist/chunk-RJPT3NTP.cjs

@@ -0,0 +1,62 @@
+"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }'use client';
+
+
+var _chunkVPKVOJHAcjs = require('./chunk-VPKVOJHA.cjs');
+
+// src/lazy.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+function createLazyComponent(loader, options = {}) {
+  var _a, _b;
+  const Lazy = React.lazy(loader);
+  const fallback = (_a = options.fallback) != null ? _a : null;
+  const Wrapped = (props) => {
+    var _a2, _b2;
+    const ctx = _chunkVPKVOJHAcjs.usePinfold.call(void 0, );
+    const preferred = (_a2 = props.lazy) != null ? _a2 : ctx.lazy;
+    const strategy = preferred === "auto" ? (_b2 = options.auto) != null ? _b2 : "eager" : preferred;
+    const [ready, setReady] = React.useState(strategy === "eager");
+    const placeholder = React.useRef(null);
+    React.useEffect(() => {
+      if (ready) return;
+      if (strategy === "idle") {
+        const w = window;
+        if (w.requestIdleCallback) {
+          const id2 = w.requestIdleCallback(() => setReady(true));
+          return () => {
+            var _a3;
+            return (_a3 = w.cancelIdleCallback) == null ? void 0 : _a3.call(w, id2);
+          };
+        }
+        const id = setTimeout(() => setReady(true), 200);
+        return () => clearTimeout(id);
+      }
+      const el = placeholder.current;
+      if (!el || typeof IntersectionObserver === "undefined") {
+        setReady(true);
+        return;
+      }
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((e) => e.isIntersecting)) {
+            setReady(true);
+            observer.disconnect();
+          }
+        },
+        { rootMargin: "200px" }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [ready, strategy]);
+    if (!ready) {
+      return /* @__PURE__ */ React.createElement("div", { ref: placeholder, "data-pinfold-lazy": "", style: { minHeight: 1 } }, fallback);
+    }
+    return /* @__PURE__ */ React.createElement(React.Suspense, { fallback }, React.createElement(Lazy, props));
+  };
+  Wrapped.displayName = (_b = options.displayName) != null ? _b : "PinfoldLazy";
+  return Wrapped;
+}
+
+
+
+exports.createLazyComponent = createLazyComponent;

package/dist/chunk-VPKVOJHA.cjs

@@ -0,0 +1,116 @@
+"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }'use client';
+
+// src/hooks.ts
+var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react);
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useId2(provided) {
+  const generated = React.useId();
+  return provided || "pinfold-" + generated.replace(/[^\w-]/g, "");
+}
+function useEvent(fn) {
+  const ref = React.useRef(fn);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  });
+  return React.useCallback(((...args) => ref.current(...args)), []);
+}
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  const currentRef = React.useRef(current);
+  currentRef.current = current;
+  const setValue = useEvent((next) => {
+    const resolved = typeof next === "function" ? next(currentRef.current) : next;
+    if (Object.is(resolved, currentRef.current)) return;
+    if (!isControlled) setUncontrolled(resolved);
+    onChange == null ? void 0 : onChange(resolved);
+  });
+  return [current, setValue];
+}
+
+// src/provider.tsx
+
+var DEFAULTS = {
+  theme: "system",
+  radius: "md",
+  dir: "ltr",
+  size: "md",
+  tone: "primary",
+  stylePack: "default",
+  lazy: "auto",
+  disableAnimation: false,
+  defaults: {}
+};
+var PinfoldContext = React2.createContext(DEFAULTS);
+function usePinfold() {
+  return React2.useContext(PinfoldContext);
+}
+function PinfoldProvider(props) {
+  const { children, applyToDocument = false, className, config, ...own } = props;
+  const parent = React2.useContext(PinfoldContext);
+  const overrides = { ...stripUndefined(config != null ? config : {}), ...stripUndefined(own) };
+  const value = React2.useMemo(
+    () => ({ ...parent, ...overrides, defaults: mergeDefaults(parent.defaults, overrides.defaults) }),
+    // Keyed on the serialised overrides: configs are plain data, and inline objects must not bust the memo.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [parent, stableKey(overrides)]
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (!applyToDocument) return;
+    const el = document.documentElement;
+    const attrs = [
+      ["data-pinfold-theme", value.theme === "system" ? null : value.theme],
+      ["data-pinfold-radius", value.radius],
+      ["data-pinfold-style", value.stylePack === "default" ? null : value.stylePack]
+    ];
+    const previous = attrs.map(([name]) => el.getAttribute(name));
+    attrs.forEach(([name, v]) => restore(el, name, v));
+    return () => attrs.forEach(([name], i) => restore(el, name, previous[i]));
+  }, [applyToDocument, value.theme, value.radius, value.stylePack]);
+  const body = applyToDocument ? children : /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      className: className ? "pinfold " + className : "pinfold",
+      dir: value.dir,
+      "data-pinfold-theme": value.theme === "system" ? void 0 : value.theme,
+      "data-pinfold-radius": value.radius,
+      "data-pinfold-style": value.stylePack === "default" ? void 0 : value.stylePack
+    },
+    children
+  );
+  return /* @__PURE__ */ React2.createElement(PinfoldContext.Provider, { value }, body);
+}
+function mergeDefaults(parent, own) {
+  if (!own) return parent;
+  const out = { ...parent };
+  for (const key in own) out[key] = { ...parent[key], ...own[key] };
+  return out;
+}
+function stableKey(obj) {
+  let fn = 0;
+  return JSON.stringify(obj, (_, v) => typeof v === "function" ? `fn${fn++}` : v);
+}
+function restore(el, attr, v) {
+  if (v == null) el.removeAttribute(attr);
+  else el.setAttribute(attr, v);
+}
+function stripUndefined(obj) {
+  const out = {};
+  for (const k in obj) if (obj[k] !== void 0) out[k] = obj[k];
+  return out;
+}
+
+
+
+
+
+
+
+
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect; exports.useId = useId2; exports.useEvent = useEvent; exports.useControllableState = useControllableState; exports.usePinfold = usePinfold; exports.PinfoldProvider = PinfoldProvider;

package/dist/client.cjs

@@ -0,0 +1,30 @@
+"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});'use client';
+
+
+
+
+var _chunkDQWSDHRYcjs = require('./chunk-DQWSDHRY.cjs');
+
+
+var _chunkRJPT3NTPcjs = require('./chunk-RJPT3NTP.cjs');
+
+
+
+
+
+
+
+var _chunkVPKVOJHAcjs = require('./chunk-VPKVOJHA.cjs');
+
+
+
+
+
+
+
+
+
+
+
+exports.PinfoldProvider = _chunkVPKVOJHAcjs.PinfoldProvider; exports.createLazyComponent = _chunkRJPT3NTPcjs.createLazyComponent; exports.renderSlot = _chunkDQWSDHRYcjs.renderSlot; exports.slotProps = _chunkDQWSDHRYcjs.slotProps; exports.useControllableState = _chunkVPKVOJHAcjs.useControllableState; exports.useEvent = _chunkVPKVOJHAcjs.useEvent; exports.useId = _chunkVPKVOJHAcjs.useId; exports.useIsomorphicLayoutEffect = _chunkVPKVOJHAcjs.useIsomorphicLayoutEffect; exports.usePinfold = _chunkVPKVOJHAcjs.usePinfold; exports.usePinfoldComponent = _chunkDQWSDHRYcjs.usePinfoldComponent;

package/dist/client.d.cts

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { PinfoldTheme, PinfoldRadius, PinfoldDir, PinfoldSize, PinfoldTone, PinfoldStylePack, PinfoldLazy, PropsBag } from '@pinfold/core';
+import { S as SlotOverrides } from './types-BZqk8btE.cjs';
+import { AccordionConfig } from './accordion/client.cjs';
+export { P as PinfoldComponent, b as SlotRenderer, c as Slottable, u as usePinfoldComponent } from './types-BZqk8btE.cjs';
+
+/** Per-component defaults. Data, state and ids never belong here, only how components look and behave. */
+interface PinfoldComponentDefaults {
+    accordion?: Partial<Omit<AccordionConfig, 'items' | 'fields' | 'value' | 'defaultValue' | 'id'>>;
+}
+/**
+ * The global config, usually in `pinfold.config.ts` (or `.js`):
+ *
+ *   export default defineConfig({ theme: 'system', radius: 'lg', defaults: { accordion: { variant: 'separated' } } });
+ *
+ * and handed to the provider once: `<PinfoldProvider config={config}>`.
+ * Precedence, highest first: component config, `defaults.<component>`, this
+ * global theme, the library defaults. A nested provider overrides its section.
+ */
+interface PinfoldConfig {
+    theme?: PinfoldTheme;
+    radius?: PinfoldRadius;
+    dir?: PinfoldDir;
+    size?: PinfoldSize;
+    tone?: PinfoldTone;
+    /** Visual style pack (needs `@pinfold/css/packs.css`). Default `'default'`. */
+    stylePack?: PinfoldStylePack;
+    /** Default code-loading strategy for `/lazy` entries. Default `'auto'`. */
+    lazy?: PinfoldLazy;
+    /** Disable every component transition, e.g. in tests or on low-power devices. */
+    disableAnimation?: boolean;
+    defaults?: PinfoldComponentDefaults;
+}
+
+interface PinfoldContextValue {
+    theme: PinfoldTheme;
+    radius: PinfoldRadius;
+    dir: PinfoldDir;
+    size: PinfoldSize;
+    tone: PinfoldTone;
+    stylePack: PinfoldStylePack;
+    lazy: PinfoldLazy;
+    /** Disable every component transition, e.g. in tests or on low-power devices. */
+    disableAnimation: boolean;
+    defaults: PinfoldComponentDefaults;
+}
+/** Component-level defaults. Every component calls this; the provider is optional. */
+declare function usePinfold(): PinfoldContextValue;
+interface PinfoldProviderProps extends PinfoldConfig {
+    children?: React.ReactNode;
+    /** A whole config from `defineConfig()`. Individual props override it. */
+    config?: PinfoldConfig;
+    /**
+     * Write `data-pinfold-theme` / `data-pinfold-radius` / `data-pinfold-style`
+     * onto `<html>` instead of a wrapper element. Use this when portals
+     * (dialogs, tooltips) must inherit the theme. Default: false.
+     */
+    applyToDocument?: boolean;
+    className?: string;
+}
+declare function PinfoldProvider(props: PinfoldProviderProps): React.ReactElement;
+
+/** SSR-safe layout effect. */
+declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+/**
+ * Stable, SSR-safe id (React 18+ `useId`). The characters React wraps ids in
+ * (`:` in 18, `«»` in 19) are stripped so the id is also a valid CSS selector.
+ */
+declare function useId(provided?: string): string;
+/**
+ * A callback whose identity never changes but which always sees fresh props.
+ * Lets us hand stable handlers to consumers without re-render churn.
+ */
+declare function useEvent<T extends (...args: any[]) => any>(fn: T): T;
+interface ControllableStateOptions<T> {
+    value?: T;
+    defaultValue: T | (() => T);
+    onChange?: (value: T) => void;
+}
+/** One state hook that is controlled, uncontrolled, or both. */
+declare function useControllableState<T>({ value, defaultValue, onChange, }: ControllableStateOptions<T>): [T, (next: T | ((prev: T) => T)) => void];
+
+/**
+ * Fold a slot's `classNames`, `styles` and `slotProps` overrides into the
+ * behaviour props a component generated. Handlers chain, classes concatenate,
+ * styles merge.
+ */
+declare function slotProps<Slot extends string, State>(overrides: SlotOverrides<Slot, State> | undefined, slot: Slot, base: PropsBag): PropsBag;
+/**
+ * Render a slot, letting the consumer swap the element while keeping every
+ * accessibility prop. `defaultRender` is used when no override exists.
+ */
+declare function renderSlot<Slot extends string, State>(overrides: SlotOverrides<Slot, State> | undefined, slot: Slot, props: PropsBag, state: State, children: React.ReactNode, defaultRender: (props: PropsBag, children: React.ReactNode) => React.ReactNode): React.ReactNode;
+
+interface LazyOptions {
+    /** Rendered while the chunk downloads, and in the placeholder. Default: nothing. */
+    fallback?: React.ReactNode;
+    /** Name shown in React DevTools. */
+    displayName?: string;
+    /** What `lazy: 'auto'` means for this component: `eager` when light, `visible` when heavy. Default `eager`. */
+    auto?: Exclude<PinfoldLazy, 'auto'>;
+}
+/**
+ * Wrap a dynamic import into a drop-in component with its own Suspense
+ * boundary, so consumers get code-splitting without touching their tree:
+ *
+ *   const Accordion = createLazyComponent(() => import('@pinfold/react/accordion'));
+ *   <Accordion items={items} lazy="visible" />
+ *
+ * `lazy` (prop, else the provider): `eager` loads at once, `visible` when the
+ * placeholder nears the viewport, `idle` when the browser is idle. Lazy entries
+ * render on the client; for complete server HTML use the main entry.
+ */
+declare function createLazyComponent<P extends object>(loader: () => Promise<{
+    default: React.ComponentType<P>;
+}>, options?: LazyOptions): React.ComponentType<P & {
+    lazy?: PinfoldLazy;
+}>;
+
+export { PinfoldProvider, SlotOverrides, createLazyComponent, renderSlot, slotProps, useControllableState, useEvent, useId, useIsomorphicLayoutEffect, usePinfold };
+export type { ControllableStateOptions, LazyOptions, PinfoldContextValue, PinfoldProviderProps };