@galaxy-io/dls 1.4.10 → 1.4.12

package/dist/containers/FlexWrapper.d.ts

@@ -1,9 +1,11 @@
+/** Main-axis direction of the flex container. */
 export declare enum FlexDirection {
     ROW = "row",
     COLUMN = "column",
     ROW_REVERSE = "row-reverse",
     COLUMN_REVERSE = "column-reverse"
 }
+/** Cross-axis alignment of children (`align-items`). */
 export declare enum AlignItems {
     START = "start",
     CENTER = "center",
@@ -11,6 +13,7 @@ export declare enum AlignItems {
     BASELINE = "baseline",
     STRETCH = "stretch"
 }
+/** Main-axis distribution of children (`justify-content`). */
 export declare enum JustifyContent {
     START = "start",
     CENTER = "center",
@@ -19,11 +22,13 @@ export declare enum JustifyContent {
     SPACE_AROUND = "space-around",
     SPACE_EVENLY = "space-evenly"
 }
+/** Wrapping behavior when children overflow the main axis. */
 export declare enum FlexWrap {
     NOWRAP = "nowrap",
     WRAP = "wrap",
     WRAP_REVERSE = "wrap-reverse"
 }
+/** Named steps on the spacing scale. `gap` also accepts a raw number of px. */
 export declare enum FlexGap {
     NONE = "0",
     XXSMALL = "2px",
@@ -34,129 +39,57 @@ export declare enum FlexGap {
     XLARGE = "24px",
     XXLARGE = "32px"
 }
-interface FlexWrapperProps {
-    /**
-     * Sets the direction of the flex container
-     * - ROW: Items are placed in a row (default)
-     * - COLUMN: Items are placed in a column
-     * - ROW_REVERSE: Items are placed in a row, from right to left
-     * - COLUMN_REVERSE: Items are placed in a column, from bottom to top
-     */
+export interface FlexWrapperProps {
+    /** @default FlexDirection.ROW */
     direction?: FlexDirection;
-    /**
-     * Defines how flex items are aligned along the cross axis
-     * - START: Items are aligned at the start (default)
-     * - CENTER: Items are centered
-     * - END: Items are aligned at the end
-     * - BASELINE: Items are aligned at their baselines
-     * - STRETCH: Items are stretched to fill the container
-     */
+    /** @default AlignItems.START */
     alignItems?: AlignItems;
-    /**
-     * Defines how flex items are aligned along the main axis
-     * - START: Items are aligned at the start (default)
-     * - CENTER: Items are centered
-     * - END: Items are aligned at the end
-     * - SPACE_BETWEEN: Items are evenly distributed with equal space between them
-     * - SPACE_AROUND: Items are evenly distributed with equal space around them
-     * - SPACE_EVENLY: Items are evenly distributed with equal space between and around them
-     */
+    /** @default JustifyContent.START */
     justifyContent?: JustifyContent;
-    /**
-     * Controls whether flex items should wrap when there isn't enough space
-     * - NOWRAP: Items will not wrap (default)
-     * - WRAP: Items will wrap onto multiple lines if needed
-     * - WRAP_REVERSE: Items will wrap onto multiple lines in reverse order
-     */
+    /** @default FlexWrap.NOWRAP */
     wrap?: FlexWrap;
-    /**
-     * Sets the gap between flex items in pixels or string (for other units)
-     */
+    /** Space between children. A number is px; use `FlexGap` for the scale. */
     gap?: number | string;
     /**
-     * flex-grow of this wrapper when it is itself a child of a flex container.
-     * Defaults to the CSS initial value (0). Saves wrapping in a FlexItem just
-     * to control how the wrapper flexes.
+     * flex-grow / -shrink / -basis of the wrapper itself, for when it is also a
+     * child of another flex container. Saves nesting it in a FlexItem.
      */
     grow?: number;
-    /**
-     * flex-shrink of this wrapper when it is itself a child of a flex container.
-     * Defaults to the CSS initial value (1).
-     */
     shrink?: number;
-    /**
-     * flex-basis of this wrapper when it is itself a child of a flex container.
-     * Defaults to the CSS initial value (auto).
-     */
     basis?: number | string;
-    /**
-     * Sets the width of the flex container in pixels
-     */
+    /** A number is px. @default "auto" */
     width?: number | string;
-    /**
-     * Sets the height of the flex container in pixels
-     */
+    /** A number is px. @default "auto" */
     height?: number | string;
-    /**
-     * Sets the minimum width of the flex container in pixels
-     */
+    /** Pass `0` to let this shrink below its content so nested text can ellipsize. */
     minWidth?: number | string;
-    /**
-     * Sets the maximum width of the flex container in pixels
-     */
     maxWidth?: number | string;
-    /**
-     * Sets the minimum height of the flex container in pixels
-     */
     minHeight?: number | string;
-    /**
-     * Sets the maximum height of the flex container in pixels
-     */
     maxHeight?: number | string;
-    /**
-     * When true, the container will fill its parent's width (equivalent to width: 100%)
-     */
+    /** `width: 100%`. Takes precedence over `width`. */
     fillWidth?: boolean;
-    /**
-     * When true, the container will fill its parent's height (equivalent to height: 100%)
-     */
+    /** `height: 100%`. Takes precedence over `height`. */
     fillHeight?: boolean;
-    /**
-     * Controls how content that overflows the container should be handled
-     * Default is 'visible'
-     */
+    /** @default "visible" */
     overflow?: React.CSSProperties["overflow"];
-    /**
-     * Sets the padding inside the container
-     * Can be a number (for pixels) or a string (for other units)
-     */
+    /** Inner spacing. Use this rather than `margin` — DLS spaces with gap and padding. */
     padding?: React.CSSProperties["padding"];
-    /**
-     * Sets the margin inside the container
-     * Can be a number (for pixels) or a string (for other units)
-     */
+    /** Escape hatch. DLS spaces with `gap` and `padding` — reach for those first. */
     margin?: React.CSSProperties["margin"];
-    /**
-     * Optional click handler for the flex container
-     */
+    /** Also flips the cursor to `pointer`. */
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Optional mousedown handler for the flex container
-     */
     onMouseDown?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Optional mouseenter handler for the flex container
-     */
     onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Optional mouseleave handler for the flex container
-     */
     onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Optional scroll handler for the flex container
-     */
     onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
 }
+/**
+ * The layout workhorse — a `display: flex` div with every flex and sizing knob
+ * as a prop. Compose UI out of these plus whitespace rather than decorating.
+ *
+ * Sizing props respect an explicit `0`, so `minWidth={0}` works as the standard
+ * fix for letting a flex child shrink enough for nested text to ellipsize.
+ */
 declare const FlexWrapper: import("react").ForwardRefExoticComponent<FlexWrapperProps & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/containers/FlexWrapper.js

@@ -4,6 +4,7 @@ import { styled } from "@linaria/react";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/containers/FlexWrapper.tsx
+/** Main-axis direction of the flex container. */
 var FlexDirection = /* @__PURE__ */ function(FlexDirection) {
 	FlexDirection["ROW"] = "row";
 	FlexDirection["COLUMN"] = "column";
@@ -11,6 +12,7 @@ var FlexDirection = /* @__PURE__ */ function(FlexDirection) {
 	FlexDirection["COLUMN_REVERSE"] = "column-reverse";
 	return FlexDirection;
 }({});
+/** Cross-axis alignment of children (`align-items`). */
 var AlignItems = /* @__PURE__ */ function(AlignItems) {
 	AlignItems["START"] = "start";
 	AlignItems["CENTER"] = "center";
@@ -19,6 +21,7 @@ var AlignItems = /* @__PURE__ */ function(AlignItems) {
 	AlignItems["STRETCH"] = "stretch";
 	return AlignItems;
 }({});
+/** Main-axis distribution of children (`justify-content`). */
 var JustifyContent = /* @__PURE__ */ function(JustifyContent) {
 	JustifyContent["START"] = "start";
 	JustifyContent["CENTER"] = "center";
@@ -28,12 +31,14 @@ var JustifyContent = /* @__PURE__ */ function(JustifyContent) {
 	JustifyContent["SPACE_EVENLY"] = "space-evenly";
 	return JustifyContent;
 }({});
+/** Wrapping behavior when children overflow the main axis. */
 var FlexWrap = /* @__PURE__ */ function(FlexWrap) {
 	FlexWrap["NOWRAP"] = "nowrap";
 	FlexWrap["WRAP"] = "wrap";
 	FlexWrap["WRAP_REVERSE"] = "wrap-reverse";
 	return FlexWrap;
 }({});
+/** Named steps on the spacing scale. `gap` also accepts a raw number of px. */
 var FlexGap = /* @__PURE__ */ function(FlexGap) {
 	FlexGap["NONE"] = "0";
 	FlexGap["XXSMALL"] = "2px";
@@ -96,6 +101,13 @@ var StyledFlexWrapper = /*#__PURE__*/ styled("div")({
 		"s12krdms-17": [_exp16()]
 	}
 });
+/**
+* The layout workhorse — a `display: flex` div with every flex and sizing knob
+* as a prop. Compose UI out of these plus whitespace rather than decorating.
+*
+* Sizing props respect an explicit `0`, so `minWidth={0}` works as the standard
+* fix for letting a flex child shrink enough for nested text to ellipsize.
+*/
 var FlexWrapper = forwardRef(({ children, direction, alignItems, justifyContent, wrap, gap, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, overflow, padding, margin, onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll }, ref) => {
 	return /* @__PURE__ */ jsx(StyledFlexWrapper, {
 		ref,

package/dist/containers/GridWrapper.d.ts

@@ -1,16 +1,19 @@
 import type { PropsWithChildren } from "react";
+/** Block-axis alignment of each item inside its own grid area (`align-items`). */
 export declare enum GridAlignItems {
     START = "START",
     CENTER = "CENTER",
     END = "END",
     STRETCH = "STRETCH"
 }
+/** Inline-axis alignment of each item inside its own grid area (`justify-items`). */
 export declare enum GridJustifyItems {
     START = "START",
     CENTER = "CENTER",
     END = "END",
     STRETCH = "STRETCH"
 }
+/** Inline-axis distribution of the whole grid when it's narrower than its container. */
 export declare enum GridJustifyContent {
     START = "START",
     CENTER = "CENTER",
@@ -20,6 +23,7 @@ export declare enum GridJustifyContent {
     SPACE_EVENLY = "SPACE_EVENLY",
     STRETCH = "STRETCH"
 }
+/** Block-axis distribution of the whole grid when it's shorter than its container. */
 export declare enum GridAlignContent {
     START = "START",
     CENTER = "CENTER",
@@ -29,92 +33,47 @@ export declare enum GridAlignContent {
     SPACE_EVENLY = "SPACE_EVENLY",
     STRETCH = "STRETCH"
 }
-interface GridWrapperProps {
-    /**
-     * Number of columns in the grid, or a custom grid-template-columns value
-     * - number: Creates that many equal-width columns using repeat(n, 1fr)
-     * - string: Used directly as grid-template-columns value (e.g., "200px 1fr 1fr")
-     */
+export interface GridWrapperProps {
+    /** A number becomes `repeat(n, 1fr)`; a string is used as-is ("200px 1fr"). @default 1 */
     columns?: number | string;
-    /**
-     * Number of rows in the grid, or a custom grid-template-rows value
-     * - number: Creates that many equal-height rows using repeat(n, 1fr)
-     * - string: Used directly as grid-template-rows value
-     */
+    /** A number becomes `repeat(n, 1fr)`; a string is used as-is. @default "auto" */
     rows?: number | string;
-    /**
-     * Gap between grid items (both row and column gap)
-     * Can be a number (pixels) or string (e.g., "1rem")
-     */
+    /** Space between items on both axes. A number is px. */
     gap?: number | string;
-    /**
-     * Gap between rows only
-     */
+    /** Overrides `gap` on the row axis only. */
     rowGap?: number | string;
-    /**
-     * Gap between columns only
-     */
+    /** Overrides `gap` on the column axis only. */
     columnGap?: number | string;
-    /**
-     * Aligns grid items along the block (column) axis within their grid area
-     */
+    /** @default GridAlignItems.STRETCH */
     alignItems?: GridAlignItems;
-    /**
-     * Aligns grid items along the inline (row) axis within their grid area
-     */
+    /** @default GridJustifyItems.STRETCH */
     justifyItems?: GridJustifyItems;
-    /**
-     * Aligns the grid along the block (column) axis when grid is smaller than container
-     */
+    /** @default GridAlignContent.START */
     alignContent?: GridAlignContent;
-    /**
-     * Aligns the grid along the inline (row) axis when grid is smaller than container
-     */
+    /** @default GridJustifyContent.START */
     justifyContent?: GridJustifyContent;
-    /**
-     * Sets the width of the grid container
-     */
+    /** A number is px. @default "auto" */
     width?: number | string;
-    /**
-     * Sets the height of the grid container
-     */
+    /** A number is px. @default "auto" */
     height?: number | string;
-    /**
-     * Sets the minimum width of the grid container
-     */
     minWidth?: number | string;
-    /**
-     * Sets the maximum width of the grid container
-     */
     maxWidth?: number | string;
-    /**
-     * Sets the minimum height of the grid container
-     */
     minHeight?: number | string;
-    /**
-     * Sets the maximum height of the grid container
-     */
     maxHeight?: number | string;
-    /**
-     * When true, the container will fill its parent's width (width: 100%)
-     */
+    /** `width: 100%`. Takes precedence over `width`. */
     fillWidth?: boolean;
-    /**
-     * When true, the container will fill its parent's height (height: 100%)
-     */
+    /** `height: 100%`. Takes precedence over `height`. */
     fillHeight?: boolean;
-    /**
-     * Sets the padding inside the container
-     */
+    /** Inner spacing. A number is px. */
     padding?: number | string;
-    /**
-     * Sets the margin outside the container
-     */
+    /** Escape hatch. DLS spaces with `gap` and `padding` — reach for those first. */
     margin?: number | string;
-    /**
-     * Controls overflow behavior
-     */
+    /** @default "visible" */
     overflow?: React.CSSProperties["overflow"];
 }
+/**
+ * A `display: grid` container. Use it when children need to line up across both
+ * axes; for a single row or column `FlexWrapper` is the lighter choice.
+ */
 declare const GridWrapper: ({ children, columns, rows, gap, rowGap, columnGap, alignItems, justifyItems, alignContent, justifyContent, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth, fillHeight, padding, margin, overflow, }: PropsWithChildren<GridWrapperProps>) => import("react").JSX.Element;
 export default GridWrapper;

package/dist/containers/GridWrapper.js

@@ -3,6 +3,7 @@ import { getCssSizeValue } from "../utils/linaria.js";
 import { styled } from "@linaria/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/containers/GridWrapper.tsx
+/** Block-axis alignment of each item inside its own grid area (`align-items`). */
 var GridAlignItems = /* @__PURE__ */ function(GridAlignItems) {
 	GridAlignItems["START"] = "START";
 	GridAlignItems["CENTER"] = "CENTER";
@@ -10,6 +11,7 @@ var GridAlignItems = /* @__PURE__ */ function(GridAlignItems) {
 	GridAlignItems["STRETCH"] = "STRETCH";
 	return GridAlignItems;
 }({});
+/** Inline-axis alignment of each item inside its own grid area (`justify-items`). */
 var GridJustifyItems = /* @__PURE__ */ function(GridJustifyItems) {
 	GridJustifyItems["START"] = "START";
 	GridJustifyItems["CENTER"] = "CENTER";
@@ -17,6 +19,7 @@ var GridJustifyItems = /* @__PURE__ */ function(GridJustifyItems) {
 	GridJustifyItems["STRETCH"] = "STRETCH";
 	return GridJustifyItems;
 }({});
+/** Inline-axis distribution of the whole grid when it's narrower than its container. */
 var GridJustifyContent = /* @__PURE__ */ function(GridJustifyContent) {
 	GridJustifyContent["START"] = "START";
 	GridJustifyContent["CENTER"] = "CENTER";
@@ -27,6 +30,7 @@ var GridJustifyContent = /* @__PURE__ */ function(GridJustifyContent) {
 	GridJustifyContent["STRETCH"] = "STRETCH";
 	return GridJustifyContent;
 }({});
+/** Block-axis distribution of the whole grid when it's shorter than its container. */
 var GridAlignContent = /* @__PURE__ */ function(GridAlignContent) {
 	GridAlignContent["START"] = "START";
 	GridAlignContent["CENTER"] = "CENTER";
@@ -88,6 +92,10 @@ var StyledGridWrapper = /*#__PURE__*/ styled("div")({
 		"s40bxfr-17": [_exp16()]
 	}
 });
+/**
+* A `display: grid` container. Use it when children need to line up across both
+* axes; for a single row or column `FlexWrapper` is the lighter choice.
+*/
 var GridWrapper = ({ children, columns, rows, gap, rowGap, columnGap, alignItems, justifyItems, alignContent, justifyContent, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, padding, margin, overflow }) => {
 	return /* @__PURE__ */ jsx(StyledGridWrapper, {
 		columns,

package/dist/containers/Spacing.d.ts

@@ -1,7 +1,10 @@
 import type { PropsWithChildren } from "react";
+/** A length. A number is px; a string is used as-is ("1rem", "auto"). */
 export type SpacingSize = string | number;
 export interface SpacingProps {
+    /** CSS margin shorthand. An array joins with spaces: `[8, 16]` → `8px 16px`. */
     margin?: SpacingSize | SpacingSize[];
+    /** Single-side margin. Ignored when `margin` is set. */
     top?: SpacingSize;
     right?: SpacingSize;
     bottom?: SpacingSize;
@@ -9,5 +12,12 @@ export interface SpacingProps {
     fillWidth?: boolean;
     fillHeight?: boolean;
 }
+/**
+ * Applies margin to its children. Legacy escape hatch — DLS layouts space with
+ * `gap` and `padding`, so prefer `FlexWrapper`/`GridWrapper` for new work.
+ *
+ * `margin` and the per-side props are mutually exclusive: setting `margin` makes
+ * `top`/`right`/`bottom`/`left` no-ops.
+ */
 declare const Spacing: ({ children, margin, top, right, bottom, left, fillWidth, fillHeight, }: PropsWithChildren<SpacingProps>) => import("react").JSX.Element;
 export default Spacing;

package/dist/containers/Spacing.js

@@ -31,6 +31,13 @@ var StyledSpacing = /*#__PURE__*/ styled("div")({
 		"s2h3guw-6": [_exp7()]
 	}
 });
+/**
+* Applies margin to its children. Legacy escape hatch — DLS layouts space with
+* `gap` and `padding`, so prefer `FlexWrapper`/`GridWrapper` for new work.
+*
+* `margin` and the per-side props are mutually exclusive: setting `margin` makes
+* `top`/`right`/`bottom`/`left` no-ops.
+*/
 var Spacing = ({ children, margin, top, right, bottom, left, fillWidth, fillHeight }) => {
 	if (margin !== void 0) return /* @__PURE__ */ jsx(StyledSpacing, {
 		$margin: getSpacingSizeValueFromShorthand(margin),

package/dist/containers/Wrapper.d.ts

@@ -1,16 +1,26 @@
 import type { PropsWithChildren } from "react";
-interface WrapperProps {
+export interface WrapperProps {
+    /** @default "static" */
     position?: React.CSSProperties["position"];
     minWidth?: number | string;
+    /** Doubles as the width when `fillWidth` is off. A number is px. */
     maxWidth?: number | string;
+    /** `width: 100%`. Takes precedence over `maxWidth`. */
     fillWidth?: boolean;
+    /** `height: 100%`. */
     fillHeight?: boolean;
+    /** @default "visible" */
     overflow?: React.CSSProperties["overflow"];
     padding?: React.CSSProperties["padding"];
+    /** Offset — only applies once `position` is not `static`. */
     top?: React.CSSProperties["top"];
     right?: React.CSSProperties["right"];
     bottom?: React.CSSProperties["bottom"];
     left?: React.CSSProperties["left"];
 }
+/**
+ * A plain `div` with positioning and sizing props — the escape hatch for when
+ * you need a positioned box without flex or grid layout on it.
+ */
 declare const Wrapper: ({ children, position, minWidth, maxWidth, fillWidth, fillHeight, overflow, padding, top, right, bottom, left, }: PropsWithChildren<WrapperProps>) => import("react").JSX.Element;
 export default Wrapper;

package/dist/containers/Wrapper.js

@@ -30,6 +30,10 @@ var StyledWrapper = /*#__PURE__*/ styled("div")({
 		"sck44b4-9": [_exp0()]
 	}
 });
+/**
+* A plain `div` with positioning and sizing props — the escape hatch for when
+* you need a positioned box without flex or grid layout on it.
+*/
 var Wrapper = ({ children, position, minWidth, maxWidth, fillWidth, fillHeight, overflow, padding, top, right, bottom, left }) => {
 	return /* @__PURE__ */ jsx(StyledWrapper, {
 		$position: position,

package/dist/dividers/HorizontalDivider.d.ts

@@ -1,5 +1,7 @@
 export interface HorizontalDividerProps {
+    /** Caption centered in a break in the rule. Omit for an unbroken line. */
     label?: string;
 }
+/** A full-width 0.5px hairline rule. Borders, not shadows — this is the separator. */
 declare const HorizontalDivider: ({ label }: HorizontalDividerProps) => import("react").JSX.Element;
 export default HorizontalDivider;

package/dist/dividers/HorizontalDivider.js

@@ -22,6 +22,7 @@ var LabeledDividerWrapper = /*#__PURE__*/ styled("div")({
 	class: "l44ah51",
 	propsAsIs: false
 });
+/** A full-width 0.5px hairline rule. Borders, not shadows — this is the separator. */
 var HorizontalDivider = ({ label }) => {
 	if (!label) return /* @__PURE__ */ jsx(HorizontalDividerLine, {});
 	return /* @__PURE__ */ jsxs(LabeledDividerWrapper, { children: [

package/dist/dividers/VerticalDivider.d.ts

@@ -1,2 +1,6 @@
+/**
+ * A 0.5px hairline rule for separating items in a row. Stretches to the height
+ * of its flex parent, so it needs one — it has no height of its own.
+ */
 declare const VerticalDivider: () => import("react").JSX.Element;
 export default VerticalDivider;

package/dist/dividers/VerticalDivider.js

@@ -10,6 +10,10 @@ var VerticalDividerWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	propsAsIs: false,
 	vars: { "v1f76t13-0": [_exp()] }
 }));
+/**
+* A 0.5px hairline rule for separating items in a row. Stretches to the height
+* of its flex parent, so it needs one — it has no height of its own.
+*/
 var VerticalDivider = () => {
 	return /* @__PURE__ */ jsx(VerticalDividerWrapper, {});
 };

package/dist/drawer/Drawer.d.ts

@@ -1,13 +1,20 @@
 import { type PropsWithChildren } from "react";
 export interface DrawerProps {
+    /** Controlled visibility. The drawer has no open state of its own. */
     open: boolean;
+    /** Called on Escape, and on backdrop click when `closeOnClickOutside` is set. */
     onClose: () => void;
+    /** Panel width. A number is px. @default "60%" */
     width?: number | string;
-    /**
-     * Whether clicking outside the drawer should close it
-     * @default false
-     */
+    /** Close when the backdrop is clicked. @default false */
     closeOnClickOutside?: boolean;
 }
+/**
+ * A panel that slides in from the right 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 Drawer: ({ open, onClose, width, closeOnClickOutside, children, }: PropsWithChildren<DrawerProps>) => import("react").ReactPortal;
 export default Drawer;

package/dist/drawer/Drawer.js

@@ -43,6 +43,13 @@ var DrawerWrapperContentBody = withTheme(/*#__PURE__*/ styled("div")({
 		"d410s14-2": [_exp5()]
 	}
 }));
+/**
+* A panel that slides in from the right 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 Drawer = ({ open, onClose, width, closeOnClickOutside = false, children }) => {
 	const { zIndex, isTopmost } = useOverlay(onClose, open, { layer: OverlayLayer.DRAWER });
 	const handleContentClick = useCallback((e) => {

package/dist/dropdown/Dropdown.d.ts

@@ -1,4 +1,5 @@
 import { type PropsWithChildren, type ReactNode } from "react";
+/** Surface treatment of the dropdown panel. */
 export declare enum DropdownVariant {
     TRANSPARENT = "TRANSPARENT",
     BASE = "BASE",
@@ -6,6 +7,7 @@ export declare enum DropdownVariant {
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY"
 }
+/** Placement relative to the trigger. The `AUTO_*` values pick a side that fits. */
 export declare enum DropdownPosition {
     TOP = "top",
     BOTTOM = "bottom",
@@ -23,6 +25,7 @@ export declare enum DropdownPosition {
     AUTO_START = "auto-start",
     AUTO_END = "auto-end"
 }
+/** What opens the panel. `MANUAL` hands control entirely to `isOpen`. */
 export declare enum DropdownTrigger {
     CLICK = "click",
     HOVER = "hover",
@@ -30,22 +33,43 @@ export declare enum DropdownTrigger {
     MANUAL = "manual"
 }
 export interface DropdownProps {
+    /** @default DropdownVariant.BASE */
     variant?: DropdownVariant;
+    /** Pinned above the scrolling body. */
     header?: ReactNode;
+    /** Panel content. */
     body: ReactNode;
+    /** Pinned below the scrolling body. */
     footer?: ReactNode;
+    /** @default DropdownPosition.BOTTOM_START */
     position?: DropdownPosition;
+    /** `[skidding, distance]` in px from the trigger. @default [0, 6] */
     offset?: [number, number];
+    /** @default DropdownTrigger.CLICK */
     trigger?: DropdownTrigger;
+    /** A number is px. */
     width?: number | string;
+    /** Controlled open state. Pass it together with `onClose`. */
     isOpen?: boolean;
+    /** Called when the panel dismisses itself — Escape, or a click outside. */
     onClose?: () => void;
     minWidth?: number | string;
+    /** Also clips overflowing content. A number is px. */
     maxWidth?: number | string;
+    /** Stretch the trigger wrapper to the parent's width. */
     fillWidth?: boolean;
+    /** Drop the 4px inset — for panels that host their own layout. */
     noPadding?: boolean;
+    /** Drop the hairline border. */
     noBorder?: boolean;
+    /** Render children bare, with no dropdown at all. */
     isDisabled?: boolean;
 }
+/**
+ * A panel anchored to a trigger. Children are the trigger.
+ *
+ * Uncontrolled by default. Pass `isOpen` *and* `onClose` to drive it yourself —
+ * useful when a selection inside the body should close it.
+ */
 declare const Dropdown: ({ children, variant, header, body, footer, position, offset, minWidth, maxWidth, isOpen: controlledIsOpen, onClose, noPadding, noBorder, fillWidth, isDisabled, }: PropsWithChildren<DropdownProps>) => import("react").JSX.Element;
 export default Dropdown;