@galaxy-io/dls 1.4.9 → 1.4.11

package/dist/inputs/SelectInput.d.ts

@@ -1,47 +1,77 @@
 import { IconVariant } from "../icons/Icon";
 import { TextSize, TextVariant } from "../text/Text";
 import { InputSize } from "./Input";
+/** Surface treatment of the closed trigger. Shared with `MultiSelectInput`. */
 export declare enum SelectInputVariant {
     BASE = "BASE",
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY"
 }
+/** One choice in a select. */
 export interface SelectInputOption {
+    /** Stable identity — selection is matched on this, not on `value`. */
     id: string;
+    /** What the user reads. */
     label: string;
+    /** Your payload. Never inspected by the component. */
     value: unknown;
+    /** Leading graphic, rendered as-is. */
     icon?: React.ReactNode;
+    /** Color role for the label — for status-coded options. */
     variant?: TextVariant;
 }
+/** A shortcut row pinned above the option list. */
 export interface PinnedOption {
     id: string;
     label: string;
+    /** The `SelectInputOption.id` this shortcut selects. */
     optionId: string;
 }
 export interface SelectInputProps {
     label?: string;
+    /** @default SelectInputVariant.PRIMARY */
     variant?: SelectInputVariant;
+    /** @default InputSize.MEDIUM */
     size?: InputSize;
+    /** Every choice. Order is preserved. */
     options: SelectInputOption[];
+    /** Controlled selection. `null` shows the placeholder. */
     value?: SelectInputOption | null;
+    /** @default "Select an option..." */
     placeholder?: string;
+    /** Called with the whole option, not just its id. */
     onChange?: (value: SelectInputOption) => void;
+    /** Trigger width. A number is px. */
     width?: number | string;
     fillWidth?: boolean;
+    /** Panel width. Defaults to matching the trigger. */
     dropdownWidth?: number | string;
     isDisabled?: boolean;
     isRequired?: boolean;
+    /** Controlled open state. Pair it with `onOpenChange`. */
     isOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
+    /** Adds a clear button to the trigger. Omit and the selection can't be cleared. */
     onReset?: () => void;
+    /** Shortcut rows above the list — "All", "None", a recent choice. */
     pinnedOptions?: PinnedOption[];
+    /** Message under the field; also switches the border to the error color. */
     error?: string;
+    /** Supplying this turns the trigger into a search box. Return the filtered list. */
     onSearch?: (searchTerm: string, options: SelectInputOption[]) => SelectInputOption[];
+    /** Debounce before `onSearch` fires, in ms. @default 300 */
     debounceMs?: number;
 }
 export declare const SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP: Record<SelectInputVariant, IconVariant>;
 export declare const SELECT_INPUT_SIZE_TO_ICON_SIZE: Record<InputSize, number>;
 export declare const SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP: Record<InputSize, TextSize>;
+/**
+ * Single-choice dropdown with keyboard navigation and optional search.
+ *
+ * Controlled: `value` is the selected option and `onChange` hands you the whole
+ * option back. Passing `onSearch` turns the trigger into a search box — you own
+ * the filtering, so it works equally well against a local list or a server.
+ */
 declare const SelectInput: ({ label, variant, size, options, value, placeholder, onChange, width, fillWidth, dropdownWidth, isDisabled, isRequired, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions, error, onSearch, debounceMs, }: SelectInputProps) => import("react").JSX.Element;
 export default SelectInput;

package/dist/inputs/SelectInput.js

@@ -18,6 +18,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCounterClockwiseIcon, CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 //#region src/inputs/SelectInput.tsx
+/** Surface treatment of the closed trigger. Shared with `MultiSelectInput`. */
 var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
 	SelectInputVariant["BASE"] = "BASE";
 	SelectInputVariant["PRIMARY"] = "PRIMARY";
@@ -153,6 +154,13 @@ var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
 	[InputSize.MEDIUM]: TextSize.BODY_MD,
 	[InputSize.LARGE]: TextSize.BODY_MD
 };
+/**
+* Single-choice dropdown with keyboard navigation and optional search.
+*
+* Controlled: `value` is the selected option and `onChange` hands you the whole
+* option back. Passing `onSearch` turns the trigger into a search box — you own
+* the filtering, so it works equally well against a local list or a server.
+*/
 var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
 	const isSearchable = !!onSearch;
 	const [isHovered, setIsHovered] = useState(false);

package/dist/inputs/SliderInput.d.ts

@@ -1,16 +1,31 @@
 export interface SliderInputProps {
     label?: string;
+    /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** Controlled value. Clamped into `[min, max]`. */
     value: number;
+    /** Fires continuously while dragging, not just on release. */
     onChange: (value: number) => void;
+    /** Drag started — useful for pausing an expensive live preview. */
     onInteractionStart?: () => void;
+    /** Drag finished — commit the value here if `onChange` is too chatty. */
     onInteractionEnd?: () => void;
+    /** @default 0 */
     min?: number;
+    /** @default 100 */
     max?: number;
+    /** Increment the thumb snaps to. @default 1 */
     step?: number;
     isDisabled?: boolean;
+    /** A number is px. */
     width?: number | string;
     fillWidth?: boolean;
 }
+/**
+ * A drag-to-set numeric slider. Fully controlled.
+ *
+ * `onChange` fires on every pointer move. When each change is expensive, drive
+ * a preview from it and commit on `onInteractionEnd`.
+ */
 declare const SliderInput: ({ label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min, max, step, isDisabled, width, fillWidth, }: SliderInputProps) => import("react").JSX.Element;
 export default SliderInput;

package/dist/inputs/SliderInput.js

@@ -58,6 +58,12 @@ var HiddenInput = /*#__PURE__*/ styled("input")({
 	class: "h1trli0w",
 	propsAsIs: false
 });
+/**
+* A drag-to-set numeric slider. Fully controlled.
+*
+* `onChange` fires on every pointer move. When each change is expensive, drive
+* a preview from it and commit on `onInteractionEnd`.
+*/
 var SliderInput = ({ label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min = 0, max = 100, step = 1, isDisabled = false, width, fillWidth }) => {
 	const [isDragging, setIsDragging] = useState(false);
 	const sliderRef = useRef(null);

package/dist/inputs/SwitcherInput.d.ts

@@ -1,13 +1,22 @@
 import { InputSize } from "./Input";
 export interface SwitcherInputItem {
+    /** Matched against `selectedId` to decide which segment is active. */
     id: string;
     label: string;
+    /** Called when this segment is clicked. Update `selectedId` yourself. */
     onClick: () => void;
 }
-interface SwitcherInputProps {
+export interface SwitcherInputProps {
+    /** @default InputSize.MEDIUM */
     size?: InputSize;
+    /** Segments, left to right. */
     items: SwitcherInputItem[];
+    /** The `id` of the active segment. Controlled — nothing moves until this changes. */
     selectedId: string;
 }
+/**
+ * A segmented control for switching between a few mutually exclusive views.
+ * Each item carries its own `onClick`, so there is no top-level change handler.
+ */
 declare const SwitcherInput: ({ size, items, selectedId }: SwitcherInputProps) => import("react").JSX.Element;
 export default SwitcherInput;

package/dist/inputs/SwitcherInput.js

@@ -40,6 +40,10 @@ var StyledSwitcherInputItem = withTheme(/*#__PURE__*/ styled("div")({
 		"s1pe4aqp-2": [_exp7()]
 	}
 }));
+/**
+* A segmented control for switching between a few mutually exclusive views.
+* Each item carries its own `onClick`, so there is no top-level change handler.
+*/
 var SwitcherInput = ({ size = InputSize.MEDIUM, items, selectedId }) => {
 	return /* @__PURE__ */ jsx(StyledSwitcherInput, {
 		$size: size,

package/dist/inputs/TextAreaInput.d.ts

@@ -1,8 +1,10 @@
+/** Text size and inset density. Row count comes from `lines`, not from this. */
 export declare enum TextAreaSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
+/** Background treatment. `TRANSPARENT` is for embedding in an existing surface. */
 export declare enum TextAreaVariant {
     TRANSPARENT = "TRANSPARENT",
     BASE = "BASE",
@@ -11,30 +13,52 @@ export declare enum TextAreaVariant {
     TERTIARY = "TERTIARY"
 }
 export interface TextAreaInputProps {
+    /** Controlled value. */
     value?: string;
     onChange: (value: string) => void;
+    /** @default TextAreaVariant.PRIMARY */
     variant?: TextAreaVariant;
+    /** @default TextAreaSize.MEDIUM */
     size?: TextAreaSize;
+    /** Visible rows before scrolling. @default 3 */
     lines?: number;
     placeholder?: string;
     label?: string;
+    /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** Message under the field; also switches the border to the error color. */
     error?: string;
+    /** Appends the red required asterisk. Note: `required`, not `isRequired`. */
     required?: boolean;
+    /** Note: `disabled`, not `isDisabled` — this input predates the `is` convention. */
     disabled?: boolean;
     autoFocus?: boolean;
+    /** Character-count bounds, validated on blur. Not a numeric range. */
     min?: number;
     max?: number;
     onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /** A number is px. */
     width?: number | string;
+    /** A number is px. Overrides the height implied by `lines`. */
     height?: number | string;
     fillWidth?: boolean;
+    /** Grow to the parent's height. Pairs with a flex parent. */
     fillHeight?: boolean;
+    /** Drop the hairline border. */
     noBorder?: boolean;
+    /** Collapse the inset to 0. */
     noPadding?: boolean;
+    /** Swap the field for a shimmer placeholder. */
     isLoading?: boolean;
 }
+/**
+ * A multi-line text field. Not resizable by the user — size it with `lines`,
+ * `height`, or `fillHeight`.
+ *
+ * Note this one takes `required`/`disabled` rather than the `isRequired`/
+ * `isDisabled` the other inputs use.
+ */
 declare const TextAreaInput: import("react").ForwardRefExoticComponent<TextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaInput;

package/dist/inputs/TextAreaInput.js

@@ -10,12 +10,14 @@ import { match } from "ts-pattern";
 import { forwardRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inputs/TextAreaInput.tsx
+/** Text size and inset density. Row count comes from `lines`, not from this. */
 var TextAreaSize = /* @__PURE__ */ function(TextAreaSize) {
 	TextAreaSize["SMALL"] = "SMALL";
 	TextAreaSize["MEDIUM"] = "MEDIUM";
 	TextAreaSize["LARGE"] = "LARGE";
 	return TextAreaSize;
 }({});
+/** Background treatment. `TRANSPARENT` is for embedding in an existing surface. */
 var TextAreaVariant = /* @__PURE__ */ function(TextAreaVariant) {
 	TextAreaVariant["TRANSPARENT"] = "TRANSPARENT";
 	TextAreaVariant["BASE"] = "BASE";
@@ -146,6 +148,13 @@ var TEXTAREA_SIZE_TO_SHIMMER_HEIGHT_MAP = {
 	["MEDIUM"]: 14,
 	["LARGE"]: 16
 };
+/**
+* A multi-line text field. Not resizable by the user — size it with `lines`,
+* `height`, or `fillHeight`.
+*
+* Note this one takes `required`/`disabled` rather than the `isRequired`/
+* `isDisabled` the other inputs use.
+*/
 var TextAreaInput = forwardRef(({ variant = "PRIMARY", size = "MEDIUM", lines = 3, value, min, max, placeholder, label, labelTooltip, error, required, disabled, autoFocus, onChange, onKeyDown, onBlur, onFocus, width, height, fillWidth, fillHeight, noBorder, noPadding, isLoading }, ref) => {
 	const [state, setState] = useState(DEFAULT_STATE);
 	const handleFocus = (e) => {

package/dist/inputs/TextInput.d.ts

@@ -1,4 +1,11 @@
 import { type InputProps } from "./Input";
-type TextInputProps = Omit<InputProps<string>, "type" | "parse">;
+/** Every `InputProps` field except `type` and `parse`, which are fixed to text. */
+export type TextInputProps = Omit<InputProps<string>, "type" | "parse">;
+/**
+ * A single-line text field. The default input.
+ *
+ * `min`/`max` bound the *character count*, not a numeric range — the field
+ * validates length on blur and shows its own error. A `error` you pass wins.
+ */
 declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/inputs/TextInput.js

@@ -3,6 +3,12 @@ import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/inputs/TextInput.tsx
 var DEFAULT_STATE = { error: "" };
+/**
+* A single-line text field. The default input.
+*
+* `min`/`max` bound the *character count*, not a numeric range — the field
+* validates length on blur and shows its own error. A `error` you pass wins.
+*/
 var TextInput = forwardRef(({ size, value, min, max, placeholder, label, labelTooltip, leading, trailing, error, isRequired, isDisabled, autoFocus, onChange, onKeyDown, onBlur, fillWidth, width, isMonospace }, ref) => {
 	const [state, setState] = useState(DEFAULT_STATE);
 	const handleFocus = () => {

package/dist/inputs/ToggleInput.d.ts

@@ -1,11 +1,22 @@
 export interface ToggleInputProps {
+    /** Label rendered above the switch, like the other inputs. */
     label?: string;
+    /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** Controlled state. The switch holds none of its own. */
     value: boolean;
     onChange: (value: boolean) => void;
     isDisabled?: boolean;
+    /** A number is px. Ignored when `fillWidth` is set. */
     width?: number | string;
+    /** Stretch to the parent's width, pushing the switch to the right edge. */
     fillWidth?: boolean;
 }
+/**
+ * An on/off switch. Fully controlled — you own `value`.
+ *
+ * Use it for settings that apply immediately. For something that only takes
+ * effect on submit, a `CheckboxInput` reads more honestly.
+ */
 declare const ToggleInput: ({ label, labelTooltip, value, onChange, isDisabled, width, fillWidth, }: ToggleInputProps) => import("react").JSX.Element;
 export default ToggleInput;

package/dist/inputs/ToggleInput.js

@@ -44,6 +44,12 @@ var HiddenInput = /*#__PURE__*/ styled("input")({
 	class: "h1smouvb",
 	propsAsIs: false
 });
+/**
+* An on/off switch. Fully controlled — you own `value`.
+*
+* Use it for settings that apply immediately. For something that only takes
+* effect on submit, a `CheckboxInput` reads more honestly.
+*/
 var ToggleInput = ({ label, labelTooltip, value, onChange, isDisabled = false, width, fillWidth }) => {
 	const handleClick = useCallback(() => {
 		if (!isDisabled) onChange(!value);

package/dist/lists/BulletedList.d.ts

@@ -1,11 +1,15 @@
+/** Item text size — maps onto the matching `TextSize` step. */
 export declare enum BulletedListSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
 export interface BulletedListProps {
+    /** One string per bullet. Plain text only — no nesting, no rich content. */
     items: string[];
+    /** @default BulletedListSize.MEDIUM */
     size?: BulletedListSize;
 }
+/** An unordered list of plain strings, each rendered through `Text`. */
 declare const BulletedList: ({ items, size }: BulletedListProps) => import("react").JSX.Element;
 export default BulletedList;

package/dist/lists/BulletedList.js

@@ -20,6 +20,7 @@ var StyledBulletedListItem = /*#__PURE__*/ styled("li")({
 	class: "s13x8jj4",
 	propsAsIs: false
 });
+/** Item text size — maps onto the matching `TextSize` step. */
 var BulletedListSize = /* @__PURE__ */ function(BulletedListSize) {
 	BulletedListSize["SMALL"] = "SMALL";
 	BulletedListSize["MEDIUM"] = "MEDIUM";
@@ -31,6 +32,7 @@ var BULLETED_LIST_SIZE_TO_TEXT_SIZE_MAP = {
 	["MEDIUM"]: TextSize.BODY_MD,
 	["LARGE"]: TextSize.BODY_LG
 };
+/** An unordered list of plain strings, each rendered through `Text`. */
 var BulletedList = ({ items, size = "MEDIUM" }) => {
 	return /* @__PURE__ */ jsx(StyledBulletedList, { children: items.map((item, index) => /* @__PURE__ */ jsx(StyledBulletedListItem, { children: /* @__PURE__ */ jsx(Text, {
 		size: BULLETED_LIST_SIZE_TO_TEXT_SIZE_MAP[size],

package/dist/modal/Modal.d.ts

@@ -1,7 +1,15 @@
 import { type PropsWithChildren } from "react";
 export interface ModalProps {
+    /** Controlled visibility. The modal has no open state of its own. */
     open: boolean;
+    /** Called on Escape and on backdrop click. */
     onClose: () => void;
 }
+/**
+ * A centered dialog over a dimmed backdrop. Fully controlled — you own `open`.
+ *
+ * Stacking and Escape handling come from `OverlayProvider`, so only the topmost
+ * overlay closes on Escape. Wrap your app in that provider.
+ */
 declare const Modal: ({ open, onClose, children }: PropsWithChildren<ModalProps>) => import("react").ReactPortal;
 export default Modal;

package/dist/modal/Modal.js

@@ -28,6 +28,12 @@ var ModalContentWrapper = /*#__PURE__*/ styled("div")({
 	class: "m1jgo9vf",
 	propsAsIs: false
 });
+/**
+* A centered dialog over a dimmed backdrop. Fully controlled — you own `open`.
+*
+* Stacking and Escape handling come from `OverlayProvider`, so only the topmost
+* overlay closes on Escape. Wrap your app in that provider.
+*/
 var Modal = ({ open, onClose, children }) => {
 	const { zIndex, isTopmost } = useOverlay(onClose, open, { layer: OverlayLayer.MODAL });
 	const handleContentClick = useCallback((e) => {

package/dist/overlay/OverlayProvider.d.ts

@@ -1,5 +1,6 @@
 import { type PropsWithChildren } from "react";
 import { OverlayLayer } from "./constants";
+/** One registered overlay in the stack. */
 export interface OverlayEntry {
     id: string;
     onDismiss: () => void;
@@ -7,8 +8,11 @@ export interface OverlayEntry {
     dismissOnOverlayClick: boolean;
     zIndex: number;
 }
+/** Options for `useOverlay`'s third argument. */
 export interface OverlayRegisterOptions {
+    /** Stacking tier. Modals always sit above drawers. @default OverlayLayer.MODAL */
     layer?: OverlayLayer;
+    /** Call `onDismiss` when the shared backdrop is clicked. */
     dismissOnOverlayClick?: boolean;
 }
 export interface OverlayInfo {
@@ -21,6 +25,13 @@ export interface OverlayContextValue {
     overlays: OverlayEntry[];
 }
 export declare const OverlayContext: import("react").Context<OverlayContextValue | null>;
+/**
+ * Coordinates every `Modal` and `Drawer` on the page. Mount it once near the
+ * root, above anything that opens an overlay.
+ *
+ * Renders one shared backdrop for the whole stack and routes Escape to the
+ * topmost overlay only, so nesting a modal over a drawer behaves.
+ */
 export declare const OverlayProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
 export default OverlayProvider;
 export { getOverlayZIndex, OVERLAY_LAYER_PRIORITY, OVERLAY_Z_INDEX, OVERLAY_Z_INDEX_BASE, OVERLAY_Z_INDEX_STEP, OverlayLayer, } from "./constants";

package/dist/overlay/OverlayProvider.js

@@ -28,6 +28,13 @@ var SharedOverlay = withTheme(/*#__PURE__*/ styled("div")({
 		"s1hpu3t7-6": [_exp7()]
 	}
 }));
+/**
+* Coordinates every `Modal` and `Drawer` on the page. Mount it once near the
+* root, above anything that opens an overlay.
+*
+* Renders one shared backdrop for the whole stack and routes Escape to the
+* topmost overlay only, so nesting a modal over a drawer behaves.
+*/
 var OverlayProvider = ({ children }) => {
 	const [overlays, setOverlays] = useState([]);
 	const zIndexCounterRef = useRef(0);

package/dist/overlay/constants.d.ts

@@ -1,3 +1,4 @@
+/** Which stacking tier an overlay belongs to. Modals always sit above drawers. */
 export declare enum OverlayLayer {
     DRAWER = "DRAWER",
     MODAL = "MODAL"

package/dist/overlay/constants.js

@@ -1,4 +1,5 @@
 //#region src/overlay/constants.ts
+/** Which stacking tier an overlay belongs to. Modals always sit above drawers. */
 var OverlayLayer = /* @__PURE__ */ function(OverlayLayer) {
 	OverlayLayer["DRAWER"] = "DRAWER";
 	OverlayLayer["MODAL"] = "MODAL";

package/dist/overlay/useOverlay.d.ts

@@ -1,7 +1,18 @@
 import { type OverlayRegisterOptions } from "./OverlayProvider";
 export interface UseOverlayReturn {
+    /** The z-index to render this overlay at. Assigned by its position in the stack. */
     zIndex: number;
+    /** True when nothing is stacked above. Only the topmost overlay should act on Escape. */
     isTopmost: boolean;
 }
+/**
+ * Registers an overlay in the global stack and returns its z-index and whether
+ * it's on top. `Modal` and `Drawer` use it internally — reach for it only when
+ * building your own overlay that must interleave correctly with theirs.
+ *
+ * Registration follows `enabled`, so pass your `open` flag straight through.
+ * Falls back to a computed top-of-stack z-index when there's no
+ * `OverlayProvider`, so it degrades rather than throwing.
+ */
 export declare const useOverlay: (onDismiss: () => void, enabled: boolean, options?: OverlayRegisterOptions) => UseOverlayReturn;
 export default useOverlay;

package/dist/overlay/useOverlay.js

@@ -2,6 +2,15 @@ import { OVERLAY_Z_INDEX_BASE } from "./constants.js";
 import { OverlayContext } from "./OverlayProvider.js";
 import { useContext, useEffect, useId } from "react";
 //#region src/overlay/useOverlay.ts
+/**
+* Registers an overlay in the global stack and returns its z-index and whether
+* it's on top. `Modal` and `Drawer` use it internally — reach for it only when
+* building your own overlay that must interleave correctly with theirs.
+*
+* Registration follows `enabled`, so pass your `open` flag straight through.
+* Falls back to a computed top-of-stack z-index when there's no
+* `OverlayProvider`, so it degrades rather than throwing.
+*/
 var useOverlay = (onDismiss, enabled, options) => {
 	const context = useContext(OverlayContext);
 	const id = useId();

package/dist/resizable/HorizontalResizeHandle.d.ts

@@ -1,10 +1,17 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
-interface HorizontalResizeHandleProps {
+export interface HorizontalResizeHandleProps {
+    /** Not implemented — the component ignores it. */
     icon?: PhosphorIcon;
     onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onMouseMove?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
+/**
+ * The grab bar for resizing a pane vertically (it spans horizontally, dragging
+ * up and down). Absolutely positioned — give it a `position: relative` parent.
+ *
+ * Presentation only: wire the handlers to `useResize` to move anything.
+ */
 declare const HorizontalResizeHandle: ({ onMouseDown, onMouseUp, onMouseMove, onMouseEnter, }: HorizontalResizeHandleProps) => import("react").JSX.Element;
 export default HorizontalResizeHandle;

package/dist/resizable/HorizontalResizeHandle.js

@@ -20,6 +20,12 @@ var HorizontalResizeHandleStyled = withTheme(/*#__PURE__*/ styled("div")({
 		"hvnpu6g-4": [_exp5()]
 	}
 }));
+/**
+* The grab bar for resizing a pane vertically (it spans horizontally, dragging
+* up and down). Absolutely positioned — give it a `position: relative` parent.
+*
+* Presentation only: wire the handlers to `useResize` to move anything.
+*/
 var HorizontalResizeHandle = ({ onMouseDown, onMouseUp, onMouseMove, onMouseEnter }) => {
 	return /* @__PURE__ */ jsx(HorizontalResizeHandleStyled, {
 		onMouseDown,

package/dist/resizable/VerticalResizeHandle.d.ts

@@ -1,5 +1,6 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
-interface VerticalResizeHandleProps {
+export interface VerticalResizeHandleProps {
+    /** Not implemented — the component ignores it. */
     icon?: PhosphorIcon;
     onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -7,5 +8,11 @@ interface VerticalResizeHandleProps {
     onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
+/**
+ * The grab bar for resizing a pane horizontally (it spans vertically, dragging
+ * left and right). Absolutely positioned — give it a `position: relative` parent.
+ *
+ * Presentation only: wire the handlers to `useResize` to move anything.
+ */
 declare const VerticalResizeHandle: ({ onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave, }: VerticalResizeHandleProps) => import("react").JSX.Element;
 export default VerticalResizeHandle;

package/dist/resizable/VerticalResizeHandle.js

@@ -20,6 +20,12 @@ var VerticalResizeHandleStyled = withTheme(/*#__PURE__*/ styled("div")({
 		"v1ha5e5c-4": [_exp5()]
 	}
 }));
+/**
+* The grab bar for resizing a pane horizontally (it spans vertically, dragging
+* left and right). Absolutely positioned — give it a `position: relative` parent.
+*
+* Presentation only: wire the handlers to `useResize` to move anything.
+*/
 var VerticalResizeHandle = ({ onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave }) => {
 	return /* @__PURE__ */ jsx(VerticalResizeHandleStyled, {
 		onMouseDown,

package/dist/shapes/Circle.d.ts

@@ -1,6 +1,9 @@
-interface CircleProps {
+export interface CircleProps {
+    /** Diameter. A number is px. */
     size: number | string;
+    /** Fill color. @default theme.color.text.tertiary */
     hex?: string;
 }
+/** A filled dot. Used for status indicators and legend swatches. */
 declare const Circle: ({ size, hex }: CircleProps) => import("react").JSX.Element;
 export default Circle;

package/dist/shapes/Circle.js

@@ -15,6 +15,7 @@ var CircleWrapper = withTheme(/*#__PURE__*/ styled("div")({
 		"cmbdg2q-1": [_exp3()]
 	}
 }));
+/** A filled dot. Used for status indicators and legend swatches. */
 var Circle = ({ size, hex }) => {
 	return /* @__PURE__ */ jsx(CircleWrapper, {
 		$size: size,

package/dist/shapes/Square.d.ts

@@ -1,6 +1,9 @@
-interface SquareProps {
+export interface SquareProps {
+    /** Side length. A number is px. */
     size: number | string;
+    /** Fill color. @default theme.color.text.tertiary */
     hex?: string;
 }
+/** A filled square. Used for legend swatches and color chips. */
 declare const Square: ({ size, hex }: SquareProps) => import("react").JSX.Element;
 export default Square;

package/dist/shapes/Square.js

@@ -15,6 +15,7 @@ var SquareWrapper = withTheme(/*#__PURE__*/ styled("div")({
 		"s1ibzzfh-1": [_exp3()]
 	}
 }));
+/** A filled square. Used for legend swatches and color chips. */
 var Square = ({ size, hex }) => {
 	return /* @__PURE__ */ jsx(SquareWrapper, {
 		$size: size,