@tulipfarm/sprout 0.3.1 → 0.4.0

package/dist/components/radio-group.d.ts

@@ -1,5 +1,5 @@
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 export type RadioGroupProps<Value = string> = BaseRadioGroup.Props<Value>;
 export type RadioGroupItemProps<Value = string> = BaseRadio.Root.Props<Value>;
 /**

package/dist/components/radio-group.js

@@ -1,15 +1,15 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import { stateClassName } from "../internal/classes.js";
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { stateClassName } from '../internal/classes.js';
 /**
  * A set of radios where one value is chosen. Arrow keys move between items
  * and select them. Name the group with `aria-label` or `aria-labelledby`.
  * Children may include a legend, helper, or error next to the items.
  */
 export function RadioGroup({ className, ...props }) {
-    return (_jsx(BaseRadioGroup, { "data-slot": "radio-group", ...props, className: stateClassName("sprout-radio-group", className) }));
+    return (_jsx(BaseRadioGroup, { "data-slot": "radio-group", ...props, className: stateClassName('sprout-radio-group', className) }));
 }
 /**
  * A 16px radio with a larger hit area. Name it with a wrapping `Label`, a
@@ -17,5 +17,5 @@ export function RadioGroup({ className, ...props }) {
  * to draw a danger ring.
  */
 export function RadioGroupItem({ className, ...props }) {
-    return (_jsx(BaseRadio.Root, { "data-slot": "radio-group-item", ...props, className: stateClassName("sprout-radio-group-item", className), children: _jsx(BaseRadio.Indicator, { "data-slot": "radio-group-indicator", className: "sprout-radio-group-indicator" }) }));
+    return (_jsx(BaseRadio.Root, { "data-slot": "radio-group-item", ...props, className: stateClassName('sprout-radio-group-item', className), children: _jsx(BaseRadio.Indicator, { "data-slot": "radio-group-indicator", className: "sprout-radio-group-indicator" }) }));
 }

package/dist/components/reasoning-effort.d.ts

@@ -11,9 +11,9 @@ export interface ReasoningEffortProps {
      */
     label?: string | undefined;
     /** Names the slider. Defaults to "Reasoning effort". */
-    "aria-label"?: string | undefined;
+    'aria-label'?: string | undefined;
     /** Points at visible text that names the slider, instead of `aria-label`. */
-    "aria-labelledby"?: string | undefined;
+    'aria-labelledby'?: string | undefined;
     className?: string | undefined;
 }
 /**
@@ -21,4 +21,4 @@ export interface ReasoningEffortProps {
  * a bubble grows out of the track and shows `label` and the level name.
  * Release snaps the thumb to the nearest level.
  */
-export declare function ReasoningEffort({ levels, value, onValueChange, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: ReasoningEffortProps): import("react").JSX.Element;
+export declare function ReasoningEffort({ levels, value, onValueChange, label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, }: ReasoningEffortProps): import("react").JSX.Element;

package/dist/components/reasoning-effort.js

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
-import { cn } from "../internal/classes.js";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { cn } from '../internal/classes.js';
 const TRACK = 256;
 const HEIGHT = 32;
 const RADIUS = HEIGHT / 2;
@@ -27,8 +27,7 @@ function smoothstep(t) {
     return x * x * (3 - 2 * x);
 }
 function reducedMotion() {
-    return (typeof window !== "undefined" &&
-        window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
+    return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 }
 function plateauFor(textW) {
     return Math.max(8, textW + TEXT_SIDE * 2 - SHOULDER * 2);
@@ -136,7 +135,7 @@ function shellPath(cx, open, plateauW) {
         cmds.push(`A${RADIUS} ${RADIUS} 0 0 1 ${crownR} ${trackBot}`);
     }
     cmds.push(`H${crownL}Z`);
-    return cmds.join("");
+    return cmds.join('');
 }
 function useTween(target, duration, delay = 0) {
     const ref = useRef(target);
@@ -171,7 +170,7 @@ function useTween(target, duration, delay = 0) {
  * a bubble grows out of the track and shows `label` and the level name.
  * Release snaps the thumb to the nearest level.
  */
-export function ReasoningEffort({ levels, value, onValueChange, label, "aria-label": ariaLabel = "Reasoning effort", "aria-labelledby": ariaLabelledBy, className, }) {
+export function ReasoningEffort({ levels, value, onValueChange, label, 'aria-label': ariaLabel = 'Reasoning effort', 'aria-labelledby': ariaLabelledBy, className, }) {
     const max = Math.max(0, levels.length - 1);
     const current = clamp(Math.round(value), 0, max);
     const trackRef = useRef(null);
@@ -246,14 +245,12 @@ export function ReasoningEffort({ levels, value, onValueChange, label, "aria-lab
         if (w > 0 && Math.abs(w - textW) > 0.4)
             setTextW(w);
     }, [level, label, textW]);
-    return (_jsxs("div", { "data-slot": "reasoning-effort", "data-dragging": dragging, className: cn("sprout-reasoning-effort", className), children: [_jsxs("svg", { className: "sprout-reasoning-effort-shell", viewBox: `0 0 ${TRACK} ${BUMP_H + HEIGHT}`, "aria-hidden": "true", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0", className: "sprout-reasoning-effort-stop-top" }), _jsx("stop", { offset: "1", className: "sprout-reasoning-effort-stop-bottom" })] }) }), _jsx("path", { "data-slot": "reasoning-effort-shell", d: shellPath(center, open, plateauW), fill: `url(#${gradId})`, strokeWidth: "0.5", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }), _jsx("div", { ref: labelRef, "data-slot": "reasoning-effort-bubble", "aria-hidden": "true", className: "sprout-reasoning-effort-bubble", style: {
+    return (_jsxs("div", { "data-slot": "reasoning-effort", "data-dragging": dragging, className: cn('sprout-reasoning-effort', className), children: [_jsxs("svg", { className: "sprout-reasoning-effort-shell", viewBox: `0 0 ${TRACK} ${BUMP_H + HEIGHT}`, "aria-hidden": "true", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0", className: "sprout-reasoning-effort-stop-top" }), _jsx("stop", { offset: "1", className: "sprout-reasoning-effort-stop-bottom" })] }) }), _jsx("path", { "data-slot": "reasoning-effort-shell", d: shellPath(center, open, plateauW), fill: `url(#${gradId})`, strokeWidth: "0.5", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }), _jsx("div", { ref: labelRef, "data-slot": "reasoning-effort-bubble", "aria-hidden": "true", className: "sprout-reasoning-effort-bubble", style: {
                     left: labelX,
                     opacity: reveal,
-                    filter: reveal > 0.98
-                        ? undefined
-                        : `blur(${((1 - reveal) * 3).toFixed(2)}px)`,
+                    filter: reveal > 0.98 ? undefined : `blur(${((1 - reveal) * 3).toFixed(2)}px)`,
                     transform: `translate(-50%, ${3 * (1 - open)}px)`,
-                }, children: _jsxs("span", { className: "sprout-reasoning-effort-bubble-text", children: [label && (_jsx("span", { className: "sprout-reasoning-effort-bubble-label", children: label })), _jsx("span", { className: "sprout-reasoning-effort-bubble-level", children: level })] }, level) }), _jsxs("div", { ref: trackRef, role: "slider", tabIndex: 0, "data-slot": "reasoning-effort-track", "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": levels[current], className: "sprout-reasoning-effort-track", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, children: [_jsx("div", { "data-slot": "reasoning-effort-fill", className: "sprout-reasoning-effort-fill", style: { width: fillW } }), _jsx("div", { "data-slot": "reasoning-effort-thumb", className: "sprout-reasoning-effort-thumb", style: {
+                }, children: _jsxs("span", { className: "sprout-reasoning-effort-bubble-text", children: [label && _jsx("span", { className: "sprout-reasoning-effort-bubble-label", children: label }), _jsx("span", { className: "sprout-reasoning-effort-bubble-level", children: level })] }, level) }), _jsxs("div", { ref: trackRef, role: "slider", tabIndex: 0, "data-slot": "reasoning-effort-track", "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": levels[current], className: "sprout-reasoning-effort-track", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, children: [_jsx("div", { "data-slot": "reasoning-effort-fill", className: "sprout-reasoning-effort-fill", style: { width: fillW } }), _jsx("div", { "data-slot": "reasoning-effort-thumb", className: "sprout-reasoning-effort-thumb", style: {
                             left: thumbLeft,
                             width: thumbW,
                             height: REST_H,

package/dist/components/record-list.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode, type Ref } from 'react';
+export declare const recordListStatusNames: readonly ["ready", "loading", "error"];
+export declare const recordListDensityNames: readonly ["default", "compact"];
+export type RecordListStatus = (typeof recordListStatusNames)[number];
+export type RecordListDensity = (typeof recordListDensityNames)[number];
+/** The most labelled values a row shows. Extra values are left out. */
+export declare const recordListMaxValues = 4;
+export interface RecordListItem {
+    id: string;
+    /** Plain text name of the record. Screen readers use it, and it shows in full on hover. */
+    title: string;
+}
+export interface RecordListValue {
+    /** The field name, such as "Assignee". */
+    label: string;
+    value: ReactNode;
+    /** Full text for the hover hint when `value` is not a string or number. */
+    text?: string | undefined;
+}
+export interface RecordListHandle {
+    /**
+     * Moves focus to the first row, or to the empty or error state when there
+     * are no rows. While `status` is `"loading"` it waits for the next render
+     * that is not loading. Call it after a page change.
+     */
+    focusFirst: () => void;
+}
+export interface RecordListProps<T extends RecordListItem> {
+    /** Rows on the current page, in order. */
+    items: T[];
+    /** Accessible name of the list, such as "Tickets". The row count is added to it. */
+    label: string;
+    /** Title content, such as an icon or key before the text. Screen readers still use `item.title`. */
+    renderTitle?: ((item: T) => ReactNode) | undefined;
+    /** Labelled values under the title. Only the first four show; leave out empty values. */
+    values?: ((item: T) => RecordListValue[]) | undefined;
+    /** Choice badges, such as status and tags. Leave out empty choices. */
+    badges?: ((item: T) => ReactNode) | undefined;
+    /** Row actions, such as an Edit button and a `DropdownMenu`. Clicks here do not open the row. */
+    renderActions?: ((item: T) => ReactNode) | undefined;
+    /** Click or Enter on a row. Open your own Sheet or Dialog here. */
+    onItemOpen?: ((item: T) => void) | undefined;
+    /** `"loading"` dims the current rows, or shows skeleton rows when there are none. Defaults to `"ready"`. */
+    status?: RecordListStatus | undefined;
+    /** Error description. Defaults to a short generic message. */
+    error?: ReactNode;
+    /** Shows a "Try again" button in the error state. */
+    onRetry?: (() => void) | undefined;
+    /** Shown when `items` is empty and ready. Pass a `StatePanel` or text. */
+    empty?: ReactNode;
+    /** Shown under the rows, inside the panel. Put the app's `Pagination` here. */
+    footer?: ReactNode;
+    /** `"compact"` uses less padding for dense pages. Defaults to `"default"`. */
+    density?: RecordListDensity | undefined;
+    /** Gets `focusFirst()` for moving focus after a page change. */
+    ref?: Ref<RecordListHandle> | undefined;
+    className?: string | undefined;
+}
+/**
+ * A reading and triage list of records: one row per record on the current
+ * page, with a title, up to four labelled values, choice badges, and row
+ * actions. The list is one tab stop. Arrow keys, Home, and End move between
+ * rows, Enter opens a row, and Tab reaches the focused row's actions. The app
+ * owns data, paging, and what the actions do.
+ */
+export declare function RecordList<T extends RecordListItem>({ items, label, renderTitle, values, badges, renderActions, onItemOpen, status, error, onRetry, empty, footer, density, ref, className, }: RecordListProps<T>): import("react").JSX.Element;

package/dist/components/record-list.js

@@ -0,0 +1,151 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
+import { cn } from '../internal/classes.js';
+import { Button } from './button.js';
+import { Skeleton, SkeletonGroup } from './skeleton.js';
+import { StatePanel } from '../internal/state-panel.js';
+export const recordListStatusNames = ['ready', 'loading', 'error'];
+export const recordListDensityNames = ['default', 'compact'];
+/** The most labelled values a row shows. Extra values are left out. */
+export const recordListMaxValues = 4;
+const SKELETON_ROWS = 5;
+const ROW = 'data-record-list-row';
+const SAVED_TAB = 'data-record-list-tabindex';
+const FOCUSABLE = 'a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable=""], [contenteditable="true"], [tabindex]';
+const rowsName = (label, count) => `${label}, ${count} ${count === 1 ? 'row' : 'rows'}`;
+const hint = (entry) => entry.text ?? (typeof entry.value === 'string' || typeof entry.value === 'number' ? String(entry.value) : undefined);
+/** Keeps only the active row's own controls in the tab order, so Tab leaves the list after them. */
+function syncTabStops(list) {
+    for (const row of list.querySelectorAll(`[${ROW}]`)) {
+        const active = row.tabIndex === 0;
+        for (const control of row.querySelectorAll(FOCUSABLE)) {
+            if (active) {
+                const saved = control.getAttribute(SAVED_TAB);
+                if (saved === null)
+                    continue;
+                if (saved === '')
+                    control.removeAttribute('tabindex');
+                else
+                    control.setAttribute('tabindex', saved);
+                control.removeAttribute(SAVED_TAB);
+            }
+            else if (!control.hasAttribute(SAVED_TAB) && control.tabIndex >= 0) {
+                control.setAttribute(SAVED_TAB, control.getAttribute('tabindex') ?? '');
+                control.setAttribute('tabindex', '-1');
+            }
+        }
+    }
+}
+function SkeletonRows() {
+    return (_jsx(SkeletonGroup, { label: "Loading rows", gap: "sm", className: "sprout-record-list-skeleton", "data-slot": "record-list-skeleton", children: Array.from({ length: SKELETON_ROWS }, (_, index) => (_jsxs("div", { className: "sprout-record-list-skeleton-row", children: [_jsxs("div", { className: "sprout-record-list-skeleton-main", children: [_jsx(Skeleton, { className: "sprout-record-list-skeleton-title" }), _jsx(Skeleton, { className: "sprout-record-list-skeleton-values" })] }), _jsx(Skeleton, { shape: "action" })] }, index))) }));
+}
+/**
+ * A reading and triage list of records: one row per record on the current
+ * page, with a title, up to four labelled values, choice badges, and row
+ * actions. The list is one tab stop. Arrow keys, Home, and End move between
+ * rows, Enter opens a row, and Tab reaches the focused row's actions. The app
+ * owns data, paging, and what the actions do.
+ */
+export function RecordList({ items, label, renderTitle, values, badges, renderActions, onItemOpen, status = 'ready', error, onRetry, empty, footer, density = 'default', ref, className, }) {
+    const id = useId();
+    const listRef = useRef(null);
+    const stateRef = useRef(null);
+    const pendingFocus = useRef(false);
+    const [activeId, setActiveId] = useState(null);
+    const loading = status === 'loading';
+    const showRows = status !== 'error' && items.length > 0;
+    const current = items.some(item => item.id === activeId) ? activeId : (items[0]?.id ?? null);
+    const rowOf = useCallback((itemId) => [...(listRef.current?.querySelectorAll(`[${ROW}]`) ?? [])].find(row => row.dataset.recordListRow === itemId), []);
+    const flushFocus = useCallback(() => {
+        if (!pendingFocus.current || loading)
+            return;
+        pendingFocus.current = false;
+        if (showRows && items[0]) {
+            setActiveId(items[0].id);
+            rowOf(items[0].id)?.focus();
+        }
+        else
+            stateRef.current?.focus();
+    }, [items, loading, rowOf, showRows]);
+    const latestFlush = useRef(flushFocus);
+    useLayoutEffect(() => {
+        latestFlush.current = flushFocus;
+        flushFocus();
+    });
+    useImperativeHandle(ref, () => ({
+        focusFirst() {
+            pendingFocus.current = true;
+            // A task, not a microtask, so a switch to loading queued in the same handler commits first.
+            setTimeout(() => latestFlush.current());
+        },
+    }), []);
+    useLayoutEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        syncTabStops(list);
+        const observer = new MutationObserver(() => syncTabStops(list));
+        observer.observe(list, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    });
+    const move = (event) => {
+        const row = event.target;
+        if (!row.hasAttribute(ROW) || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const index = items.findIndex(item => item.id === row.dataset.recordListRow);
+        const item = items[index];
+        if (!item)
+            return;
+        if (event.key === 'Enter') {
+            if (!onItemOpen || event.repeat)
+                return;
+            event.preventDefault();
+            onItemOpen(item);
+            return;
+        }
+        const target = event.key === 'ArrowDown'
+            ? items[Math.min(index + 1, items.length - 1)]
+            : event.key === 'ArrowUp'
+                ? items[Math.max(index - 1, 0)]
+                : event.key === 'Home'
+                    ? items[0]
+                    : event.key === 'End'
+                        ? items.at(-1)
+                        : undefined;
+        if (!target || event.shiftKey)
+            return;
+        event.preventDefault();
+        setActiveId(target.id);
+        rowOf(target.id)?.focus();
+    };
+    const open = (event, item) => {
+        const target = event.target;
+        const row = event.currentTarget;
+        // Portaled menus bubble through React, so check the DOM too.
+        if (!onItemOpen || !row.contains(target))
+            return;
+        const control = target.closest(FOCUSABLE);
+        if (control && control !== row && row.contains(control))
+            return;
+        if (target.closest('[data-slot="record-list-actions"]'))
+            return;
+        if (window.getSelection()?.toString())
+            return;
+        onItemOpen(item);
+    };
+    const emptyContent = empty === undefined ? (_jsx(StatePanel, { kind: "empty", heading: "h3", title: "No rows to show", description: "Rows show here when they are added or match the search and filters." })) : typeof empty === 'string' ? (_jsx("p", { className: "sprout-record-list-empty-text", children: empty })) : (empty);
+    return (_jsxs("div", { "data-slot": "record-list", "data-density": density, "data-status": status, className: cn('sprout-record-list', className), children: [status === 'error' ? (_jsx("div", { ref: stateRef, tabIndex: -1, "data-slot": "record-list-state", className: "sprout-record-list-state", children: _jsx(StatePanel, { kind: "error", heading: "h3", title: "Rows did not load", description: error ?? 'Something went wrong while loading the rows.', children: onRetry ? (_jsx(Button, { variant: "outline", onClick: onRetry, children: "Try again" })) : null }) })) : showRows ? (_jsxs(_Fragment, { children: [_jsx("ul", { ref: listRef, "aria-label": rowsName(label, items.length), "aria-busy": loading || undefined, "data-slot": "record-list-items", className: "sprout-record-list-items", onKeyDown: move, children: items.map((item, index) => {
+                            const shown = values?.(item).slice(0, recordListMaxValues) ?? [];
+                            const badgeContent = badges?.(item);
+                            const hasBadges = badgeContent != null && badgeContent !== false;
+                            const actions = renderActions?.(item);
+                            const valuesId = `${id}-${index}-values`;
+                            const badgesId = `${id}-${index}-badges`;
+                            const described = [shown.length > 0 && valuesId, hasBadges && badgesId].filter(Boolean).join(' ');
+                            return (_jsxs("li", { "data-record-list-row": item.id, tabIndex: item.id === current ? 0 : -1, "aria-label": item.title, "aria-describedby": described || undefined, "data-slot": "record-list-item", "data-openable": onItemOpen ? '' : undefined, className: "sprout-record-list-item", onFocus: event => {
+                                    if (event.currentTarget.contains(event.target))
+                                        setActiveId(item.id);
+                                }, onClick: event => open(event, item), children: [_jsx("div", { "data-slot": "record-list-title", className: "sprout-record-list-title", title: item.title, children: renderTitle ? renderTitle(item) : item.title }), shown.length > 0 && (_jsx("dl", { id: valuesId, "data-slot": "record-list-values", className: "sprout-record-list-values", children: shown.map((entry, position) => (_jsxs("div", { className: "sprout-record-list-value", children: [_jsx("dt", { children: entry.label }), _jsx("dd", { title: hint(entry), children: entry.value })] }, `${entry.label}-${position}`))) })), hasBadges && (_jsx("div", { id: badgesId, "data-slot": "record-list-badges", className: "sprout-record-list-badges", children: badgeContent })), actions != null && actions !== false && (_jsx("div", { "data-slot": "record-list-actions", className: "sprout-record-list-actions", children: actions }))] }, item.id));
+                        }) }), _jsx("span", { role: "status", className: "sprout-record-list-sr-only", children: loading ? 'Loading rows…' : '' })] })) : (_jsx("div", { ref: stateRef, tabIndex: -1, "data-slot": "record-list-state", className: "sprout-record-list-state", children: loading ? _jsx(SkeletonRows, {}) : emptyContent })), footer != null && footer !== false && (_jsx("div", { "data-slot": "record-list-footer", className: "sprout-record-list-footer", children: footer }))] }));
+}

package/dist/components/resizable.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps } from 'react';
 export declare const resizableOrientationNames: readonly ["horizontal", "vertical"];
 /** `"horizontal"` places panels side by side. `"vertical"` stacks them. */
 export type ResizableOrientation = (typeof resizableOrientationNames)[number];
@@ -13,7 +13,7 @@ export interface ResizableLayoutChangeDetails {
     /** True for pointer and keyboard resizes. False for mount and container changes. */
     isUserInteraction: boolean;
 }
-export interface ResizablePanelGroupProps extends ComponentProps<"div"> {
+export interface ResizablePanelGroupProps extends ComponentProps<'div'> {
     /** `"horizontal"` (default) places panels side by side. `"vertical"` stacks them. */
     orientation?: ResizableOrientation;
     /** Starting sizes by panel `id`, such as a layout saved by `useResizableLayout`. */
@@ -25,7 +25,7 @@ export interface ResizablePanelGroupProps extends ComponentProps<"div"> {
 }
 /** A row or column of resizable panels separated by `ResizableHandle`s. */
 export declare function ResizablePanelGroup({ orientation, defaultLayout, onLayoutChange, onLayoutChanged, className, children, ref, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
-export interface ResizablePanelProps extends Omit<ComponentProps<"div">, "id"> {
+export interface ResizablePanelProps extends Omit<ComponentProps<'div'>, 'id'> {
     /** Key for this panel in layouts. Set it when saving layouts or showing panels conditionally. */
     id?: string;
     /** Starting size. Panels without one share the space that is left. */
@@ -37,7 +37,7 @@ export interface ResizablePanelProps extends Omit<ComponentProps<"div">, "id"> {
 }
 /** One resizable region. It must be a direct child of `ResizablePanelGroup`. */
 export declare function ResizablePanel({ id: idProp, defaultSize, minSize, maxSize, className, style, ref, ...props }: ResizablePanelProps): import("react").JSX.Element;
-export interface ResizableHandleProps extends ComponentProps<"div"> {
+export interface ResizableHandleProps extends ComponentProps<'div'> {
     /** Shows a small grip on the line, for splits people resize often. */
     withHandle?: boolean;
 }
@@ -54,7 +54,7 @@ export interface UseResizableLayoutOptions {
     /** Only save sizes the person chose, not the starting layout. */
     onlySaveAfterUserInteractions?: boolean | undefined;
     /** Where to save. Defaults to `localStorage`. */
-    storage?: Pick<Storage, "getItem" | "setItem"> | undefined;
+    storage?: Pick<Storage, 'getItem' | 'setItem'> | undefined;
 }
 export interface ResizableLayoutStore {
     defaultLayout: ResizableLayout | undefined;