@galaxy-io/dls 1.4.10 → 1.4.12

package/dist/dropdown/Dropdown.js

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Tippy from "@tippyjs/react";
 //#region src/dropdown/Dropdown.tsx
+/** Surface treatment of the dropdown panel. */
 var DropdownVariant = /* @__PURE__ */ function(DropdownVariant) {
 	DropdownVariant["TRANSPARENT"] = "TRANSPARENT";
 	DropdownVariant["BASE"] = "BASE";
@@ -15,6 +16,7 @@ var DropdownVariant = /* @__PURE__ */ function(DropdownVariant) {
 	DropdownVariant["TERTIARY"] = "TERTIARY";
 	return DropdownVariant;
 }({});
+/** Placement relative to the trigger. The `AUTO_*` values pick a side that fits. */
 var DropdownPosition = /* @__PURE__ */ function(DropdownPosition) {
 	DropdownPosition["TOP"] = "top";
 	DropdownPosition["BOTTOM"] = "bottom";
@@ -33,6 +35,7 @@ var DropdownPosition = /* @__PURE__ */ function(DropdownPosition) {
 	DropdownPosition["AUTO_END"] = "auto-end";
 	return DropdownPosition;
 }({});
+/** What opens the panel. `MANUAL` hands control entirely to `isOpen`. */
 var DropdownTrigger = /* @__PURE__ */ function(DropdownTrigger) {
 	DropdownTrigger["CLICK"] = "click";
 	DropdownTrigger["HOVER"] = "hover";
@@ -79,6 +82,12 @@ var DropdownTriggerWrapper = /*#__PURE__*/ styled("span")({
 		"dfdzgmt-2": [_exp0()]
 	}
 });
+/**
+* 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.
+*/
 var Dropdown = ({ children, variant = "BASE", header, body, footer, position = "bottom-start", offset = [0, 6], minWidth, maxWidth, isOpen: controlledIsOpen, onClose, noPadding = false, noBorder = false, fillWidth = false, isDisabled = false }) => {
 	const [internalIsOpen, setInternalIsOpen] = useState(false);
 	const isControlled = controlledIsOpen !== void 0;

package/dist/editor/CodeEditor.d.ts

@@ -1,68 +1,49 @@
 import { Extension } from "@codemirror/state";
 import { LanguageName } from "@uiw/codemirror-extensions-langs";
-import { GalaxyTheme } from "../theme/constants";
-import { Theme } from "../theme/types";
+import { GalaxyTheme, Theme } from "../theme/types";
+/** Background treatment of the editor surface. */
 export declare enum CodeEditorVariant {
     BASE = "BASE",
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY"
 }
+/** A CodeMirror language name — "sql", "json", "python", … */
 export type CodeEditorLanguage = LanguageName;
-type CodeEditorProps = {
-    /**
-     * The content of the code editor.
-     */
+export type CodeEditorProps = {
+    /** Editor contents. Controlled — pair it with `onChange`. */
     content: string;
-    /**
-     * The placeholder of the code editor.
-     */
+    /** Shown when `content` is empty. */
     placeholder?: string;
-    /**
-     * The content type of the code editor.
-     */
+    /** Syntax highlighting mode. Plain text when unset. */
     lang?: CodeEditorLanguage;
-    /**
-     * Whether the code editor is read only.
-     */
+    /** Render contents without allowing edits. */
     isReadOnly?: boolean;
-    /**
-     * Whether to show line numbers.
-     */
+    /** Hide the line-number gutter. */
     noLineNumbers?: boolean;
-    /**
-     * Custom CodeMirror extensions to add to the editor.
-     * Use this for template decorations, custom keymaps, etc.
-     */
+    /** Extra CodeMirror extensions — decorations, keymaps, autocomplete sources. */
     customExtensions?: Extension[];
-    /**
-     * Callback fired when the content changes.
-     */
+    /** Called with the full document on every keystroke. */
     onChange?: (value: string) => void;
-    /**
-     * Callback fired when Cmd/Ctrl+Enter is pressed.
-     */
+    /** Called on Cmd/Ctrl+Enter — the "run this" shortcut. */
     onExecute?: () => void;
-    /**
-     * Border radius for the editor wrapper.
-     */
+    /** A number is px. */
     borderRadius?: string | number;
-    /**
-     * Whether to show a border around the editor.
-     */
+    /** Drop the hairline border. */
     noBorder?: boolean;
-    /**
-     * Sets the padding inside the code editor content area.
-     * Can be a number (for pixels) or a string (for other units).
-     */
+    /** Inset around the content area. A number is px. */
     padding?: React.CSSProperties["padding"];
-    /**
-     * The background color variant of the code editor.
-     * Defaults to PRIMARY.
-     */
+    /** @default CodeEditorVariant.PRIMARY */
     variant?: CodeEditorVariant;
 };
 export declare function createSearchPanelThemeExtension(theme: Theme): Extension;
 export declare function createCodeMirrorThemeExtension(theme: Theme, activeTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>, variant: CodeEditorVariant, isReadOnly?: boolean): Extension;
+/**
+ * A CodeMirror 6 editor themed to match DLS — Berkeley Mono, theme-aware syntax
+ * colors, hairline border.
+ *
+ * Controlled: `content` is the document and `onChange` fires per keystroke.
+ * Extend it through `customExtensions` rather than forking the component.
+ */
 declare const CodeEditor: ({ content, placeholder, lang, customExtensions, onChange, onExecute, borderRadius, noBorder, isReadOnly, noLineNumbers, padding, variant, }: CodeEditorProps) => import("react").JSX.Element;
 export default CodeEditor;

package/dist/editor/CodeEditor.js

@@ -1,4 +1,4 @@
-import { GalaxyTheme } from "../theme/constants.js";
+import { GalaxyTheme } from "../theme/types.js";
 import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 /* empty css                     */
@@ -12,6 +12,7 @@ import { langs, loadLanguage } from "@uiw/codemirror-extensions-langs";
 import { createTheme } from "@uiw/codemirror-themes";
 import CodeMirror from "@uiw/react-codemirror";
 //#region src/editor/CodeEditor.tsx
+/** Background treatment of the editor surface. */
 var CodeEditorVariant = /* @__PURE__ */ function(CodeEditorVariant) {
 	CodeEditorVariant["BASE"] = "BASE";
 	CodeEditorVariant["PRIMARY"] = "PRIMARY";
@@ -365,6 +366,13 @@ function createCodeMirrorThemeExtension(theme, activeTheme, variant, isReadOnly)
 		]
 	});
 }
+/**
+* A CodeMirror 6 editor themed to match DLS — Berkeley Mono, theme-aware syntax
+* colors, hairline border.
+*
+* Controlled: `content` is the document and `onChange` fires per keystroke.
+* Extend it through `customExtensions` rather than forking the component.
+*/
 var CodeEditor = ({ content, placeholder, lang, customExtensions = [], onChange, onExecute, borderRadius, noBorder, isReadOnly, noLineNumbers, padding, variant = "PRIMARY" }) => {
 	const { theme, activeTheme } = useGalaxyTheme();
 	const codeMirrorTheme = useMemo(() => createCodeMirrorThemeExtension(theme, activeTheme, variant, isReadOnly), [

package/dist/hooks/useDismiss.d.ts

@@ -24,4 +24,10 @@ export interface UseDismissOptions {
      */
     onDismiss?: () => void;
 }
+/**
+ * Closes a floating element on Escape or a click outside it. Returns the ref to
+ * attach to the element you want to keep open.
+ *
+ * Accepts either a bare handler or an options object as the first argument.
+ */
 export declare const useDismiss: <T extends HTMLElement = HTMLElement>(handlerOrOptions: (() => void) | UseDismissOptions, options?: UseDismissOptions) => RefObject<T>;

package/dist/hooks/useDismiss.js

@@ -1,6 +1,12 @@
 import { useEffect, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 //#region src/hooks/useDismiss.ts
+/**
+* Closes a floating element on Escape or a click outside it. Returns the ref to
+* attach to the element you want to keep open.
+*
+* Accepts either a bare handler or an options object as the first argument.
+*/
 var useDismiss = (handlerOrOptions, options) => {
 	const isOptionsOnly = typeof handlerOrOptions !== "function";
 	const handler = isOptionsOnly ? void 0 : handlerOrOptions;

package/dist/hooks/useElementClientSize.d.ts

@@ -1,4 +1,5 @@
-interface ElementClientSize {
+/** Measured client size. Both fields are `undefined` before the first measurement. */
+export interface ElementClientSize {
     width: number | undefined;
     height: number | undefined;
 }
@@ -17,4 +18,3 @@ interface ElementClientSize {
  *   first measurement
  */
 export declare const useElementClientSize: (ref: React.RefObject<HTMLElement | null>) => ElementClientSize;
-export {};

package/dist/hooks/useResize.d.ts

@@ -1,5 +1,9 @@
+/**
+ * Which edge or corner stays put while dragging. Edge anchors resize one
+ * dimension; corner anchors resize both.
+ */
 export type ResizeAnchor = "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-interface UseResizeProps {
+export interface UseResizeProps {
     /**
      * Current width of the element
      */
@@ -80,4 +84,3 @@ interface UseResizeProps {
  * });
  */
 export declare const useResize: ({ currentWidth, currentHeight, onWidthChange, onHeightChange, onSizeChange, minWidth, maxWidth, minHeight, maxHeight, anchor, }: UseResizeProps) => (e: React.MouseEvent) => void;
-export {};

package/dist/icons/GalaxyLogomark.d.ts

@@ -1,5 +1,13 @@
-declare const GalaxyLogomark: ({ height, isDark }: {
+/**
+ * The Galaxy mark, in the variant that reads against the active theme.
+ *
+ * `isDark` pins it to the dark-surface artwork regardless of theme — for a
+ * mark sitting on a surface that doesn't follow the theme.
+ */
+declare const GalaxyLogomark: ({ height, isDark, }: {
+    /** Rendered height in px. Width follows the aspect ratio. */
     height: number;
+    /** Force the dark-surface artwork instead of following the theme. */
     isDark?: boolean;
 }) => import("react").JSX.Element;
 export default GalaxyLogomark;

package/dist/icons/GalaxyLogomark.js

@@ -1,4 +1,4 @@
-import { GalaxyTheme } from "../theme/constants.js";
+import { GalaxyTheme } from "../theme/types.js";
 import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
 import SvgGalaxyLogomarkDark from "../assets/components/GalaxyLogomarkDark.js";
 import SvgGalaxyLogomarkLight from "../assets/components/GalaxyLogomarkLight.js";
@@ -6,6 +6,12 @@ import { match } from "ts-pattern";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/icons/GalaxyLogomark.tsx
+/**
+* The Galaxy mark, in the variant that reads against the active theme.
+*
+* `isDark` pins it to the dark-surface artwork regardless of theme — for a
+* mark sitting on a surface that doesn't follow the theme.
+*/
 var GalaxyLogomark = ({ height, isDark }) => {
 	const { activeTheme } = useGalaxyTheme();
 	return useMemo(() => {

package/dist/icons/GalaxyLogomark3D.d.ts

@@ -17,11 +17,17 @@ export interface MaterialConfig {
     sheenColor?: string;
 }
 interface GalaxyLogomark3DProps {
+    /** Square canvas size. A number is px. */
     height: number | string;
+    /** Force the dark-surface material instead of following the theme. */
     isDark?: boolean;
+    /** Spin continuously. */
     isAutoRotate?: boolean;
+    /** Let the user drag to orbit the mesh. */
     isInteractive?: boolean;
+    /** React to hover. */
     isHoverable?: boolean;
+    /** Rotation rate. */
     speed?: number;
     /** Backlight configuration (enables dramatic mode when provided) */
     backlight?: LightConfig;
@@ -36,6 +42,15 @@ interface GalaxyLogomark3DProps {
     /** Environment preset (default: 'studio', or 'night' in dramatic mode) */
     environmentPreset?: PresetsType;
 }
+/**
+ * The Galaxy mark as an interactive 3D mesh, rendered with react-three-fiber.
+ *
+ * The heaviest thing in the library — it pulls in three.js and a ~3MB model.
+ * Reserve it for hero moments; use `GalaxyLogomark` everywhere else.
+ *
+ * Passing any of `backlight`, `spotlight` or `fillLight` switches it into the
+ * dramatic lighting preset.
+ */
 declare const GalaxyLogomark3D: ({ height, isDark, isAutoRotate, isInteractive, isHoverable, speed, backlight, spotlight, fillLight, material, color: colorOverride, environmentPreset, }: GalaxyLogomark3DProps) => import("react").JSX.Element;
 export default GalaxyLogomark3D;
 export type { GalaxyLogomark3DProps };

package/dist/icons/GalaxyLogomark3D.js

@@ -252,6 +252,15 @@ function Scene({ color, isDark, isAutoRotate, isInteractive, isHoverable, isHove
 		})
 	] });
 }
+/**
+* The Galaxy mark as an interactive 3D mesh, rendered with react-three-fiber.
+*
+* The heaviest thing in the library — it pulls in three.js and a ~3MB model.
+* Reserve it for hero moments; use `GalaxyLogomark` everywhere else.
+*
+* Passing any of `backlight`, `spotlight` or `fillLight` switches it into the
+* dramatic lighting preset.
+*/
 var GalaxyLogomark3D = ({ height, isDark = false, isAutoRotate = false, isInteractive = false, isHoverable = false, speed = 2, backlight, spotlight, fillLight, material, color: colorOverride, environmentPreset }) => {
 	const [isHovered, setIsHovered] = useState(false);
 	const { theme } = useGalaxyTheme();

package/dist/icons/GalaxyLogomarkAnimation.d.ts

@@ -1,8 +1,18 @@
 export interface GalaxyLogomarkAnimationProps {
+    /** Square size. A number is px. @default 32 */
     height?: number | string;
+    /** Force the dark-surface fill instead of following the theme. */
     isDark?: boolean;
+    /** Freeze on the first frame. Also stops it looping. @default false */
     isPaused?: boolean;
+    /** Playback rate. @default 1 */
     speed?: number;
 }
+/**
+ * The Galaxy mark as a looping Lottie animation, tinted from the theme.
+ *
+ * Ships a ~700kB animation payload — reach for the static `GalaxyLogomark` for
+ * ordinary chrome and save this for splash and loading moments.
+ */
 declare const GalaxyLogomarkAnimation: ({ height, isDark, isPaused, speed, }: GalaxyLogomarkAnimationProps) => import("react").JSX.Element;
 export default GalaxyLogomarkAnimation;

package/dist/icons/GalaxyLogomarkAnimation.js

@@ -1,4 +1,4 @@
-import { GalaxyTheme } from "../theme/constants.js";
+import { GalaxyTheme } from "../theme/types.js";
 import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import galaxy_animation_default from "../assets/models/galaxy-animation.js";
@@ -20,6 +20,12 @@ var GalaxyLogomarkAnimationWrapper = /*#__PURE__*/ styled("div")({
 		"gm80o9u-1": [_exp3()]
 	}
 });
+/**
+* The Galaxy mark as a looping Lottie animation, tinted from the theme.
+*
+* Ships a ~700kB animation payload — reach for the static `GalaxyLogomark` for
+* ordinary chrome and save this for splash and loading moments.
+*/
 var GalaxyLogomarkAnimation = ({ height = 32, isDark, isPaused = false, speed = 1 }) => {
 	const lottieRef = useRef(null);
 	const { theme, activeTheme } = useGalaxyTheme();

package/dist/icons/GalaxyWordmark.d.ts

@@ -1,5 +1,11 @@
-declare const GalaxyWordmark: ({ height, isDark }: {
+/**
+ * The Galaxy wordmark, in the variant that reads against the active theme.
+ * Use `GalaxyLogomark` when you need just the mark without the word.
+ */
+declare const GalaxyWordmark: ({ height, isDark, }: {
+    /** Rendered height in px. Width follows the aspect ratio. */
     height: number;
+    /** Force the light artwork instead of following the theme. */
     isDark?: boolean;
 }) => import("react").JSX.Element;
 export default GalaxyWordmark;

package/dist/icons/GalaxyWordmark.js

@@ -1,4 +1,4 @@
-import { GalaxyTheme } from "../theme/constants.js";
+import { GalaxyTheme } from "../theme/types.js";
 import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
 import SvgGalaxyWordmarkDark from "../assets/components/GalaxyWordmarkDark.js";
 import SvgGalaxyWordmarkLight from "../assets/components/GalaxyWordmarkLight.js";
@@ -6,6 +6,10 @@ import { match } from "ts-pattern";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/icons/GalaxyWordmark.tsx
+/**
+* The Galaxy wordmark, in the variant that reads against the active theme.
+* Use `GalaxyLogomark` when you need just the mark without the word.
+*/
 var GalaxyWordmark = ({ height, isDark }) => {
 	const { activeTheme } = useGalaxyTheme();
 	return useMemo(() => {

package/dist/icons/Icon.d.ts

@@ -1,4 +1,5 @@
 import type { Icon as PhosphorIcon, IconWeight as PhosphorIconWeight } from "@phosphor-icons/react";
+/** Icon color role. Resolves to a `theme.color.icon.*` token in both themes. */
 export declare enum IconVariant {
     PRIMARY = "PRIMARY",
     PRIMARY_ALT = "PRIMARY_ALT",
@@ -31,11 +32,20 @@ export declare enum IconWeight {
     DUOTONE = "duotone"
 }
 export interface IconProps {
+    /** Phosphor icon *component* — pass `PlusIcon`, not `<PlusIcon />`. */
     component: PhosphorIcon;
+    /** Square size in px. @default 16 */
     size?: number;
+    /** Stroke weight. @default IconWeight.BOLD */
     weight?: PhosphorIconWeight;
+    /** Color role. @default IconVariant.PRIMARY */
     variant?: IconVariant;
+    /** Accessible label. Set it when the icon is the only content. */
     alt?: string;
 }
+/**
+ * Wraps a Phosphor icon so its color comes from a theme token rather than a
+ * hardcoded `color` prop. Never render a Phosphor icon bare.
+ */
 declare const Icon: ({ component: IconComponent, variant, size, weight, alt, }: IconProps) => import("react").JSX.Element;
 export default Icon;

package/dist/icons/Icon.js

@@ -2,6 +2,7 @@ import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
 import { match } from "ts-pattern";
 import { jsx } from "react/jsx-runtime";
 //#region src/icons/Icon.tsx
+/** Icon color role. Resolves to a `theme.color.icon.*` token in both themes. */
 var IconVariant = /* @__PURE__ */ function(IconVariant) {
 	IconVariant["PRIMARY"] = "PRIMARY";
 	IconVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
@@ -38,6 +39,10 @@ var IconWeight = /* @__PURE__ */ function(IconWeight) {
 function getIconColor(variant, theme) {
 	return match(variant).with("PRIMARY", () => theme.color.icon.primary).with("PRIMARY_ALT", () => theme.color.icon.primaryAlt).with("SECONDARY", () => theme.color.icon.secondary).with("SECONDARY_ALT", () => theme.color.icon.secondaryAlt).with("TERTIARY", () => theme.color.icon.tertiary).with("TERTIARY_ALT", () => theme.color.icon.tertiaryAlt).with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).with("WARNING", () => theme.color.icon.warning).with("LOADING", () => theme.color.icon.primary).with("LIME", () => theme.color.icon.lime).with("BLUE", () => theme.color.icon.blue).with("TEAL", () => theme.color.icon.teal).with("YELLOW", () => theme.color.icon.yellow).with("ORANGE", () => theme.color.icon.orange).with("PURPLE", () => theme.color.icon.purple).with("PINK", () => theme.color.icon.pink).with("DISABLED", () => theme.color.text.disabled).with(void 0, () => theme.color.icon.primary).exhaustive();
 }
+/**
+* Wraps a Phosphor icon so its color comes from a theme token rather than a
+* hardcoded `color` prop. Never render a Phosphor icon bare.
+*/
 var Icon = ({ component: IconComponent, variant = "PRIMARY", size = 16, weight = "bold", alt }) => {
 	const { theme } = useGalaxyTheme();
 	return /* @__PURE__ */ jsx(IconComponent, {

package/dist/inputs/CheckboxInput.d.ts

@@ -1,16 +1,23 @@
+/** Fill color when checked. */
 export declare enum CheckboxInputVariant {
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY"
 }
+/** Box size. Two steps only — this is a hit target, not a type scale. */
 export declare enum CheckboxInputSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM"
 }
 export interface CheckboxInputProps {
+    /** @default CheckboxInputVariant.PRIMARY */
     variant?: CheckboxInputVariant;
+    /** @default CheckboxInputSize.MEDIUM */
     size?: CheckboxInputSize;
+    /** Controlled state. The checkbox holds none of its own. */
     isChecked: boolean;
+    /** Draw a dash instead of a tick — for a partially-selected group. */
     isIndeterminate?: boolean;
+    /** Text beside the box. Omit it and set `ariaLabel` instead. */
     label?: string;
     isRequired?: boolean;
     isDisabled?: boolean;
@@ -21,5 +28,11 @@ export interface CheckboxInputProps {
     /** Stops the click from bubbling, e.g. into a clickable table row. */
     stopClickPropagation?: boolean;
 }
+/**
+ * A checkbox with an optional label. Fully controlled — you own `isChecked`.
+ *
+ * `isIndeterminate` is purely visual and does not change what `onChange`
+ * reports; the callback still flips against `isChecked`.
+ */
 declare const CheckboxInput: ({ variant, size, isChecked, isIndeterminate, label, isRequired, isDisabled, onChange, ariaLabel, stopClickPropagation, }: CheckboxInputProps) => import("react").JSX.Element;
 export default CheckboxInput;

package/dist/inputs/CheckboxInput.js

@@ -9,11 +9,13 @@ import { match } from "ts-pattern";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, MinusIcon } from "@phosphor-icons/react";
 //#region src/inputs/CheckboxInput.tsx
+/** Fill color when checked. */
 var CheckboxInputVariant = /* @__PURE__ */ function(CheckboxInputVariant) {
 	CheckboxInputVariant["PRIMARY"] = "PRIMARY";
 	CheckboxInputVariant["SECONDARY"] = "SECONDARY";
 	return CheckboxInputVariant;
 }({});
+/** Box size. Two steps only — this is a hit target, not a type scale. */
 var CheckboxInputSize = /* @__PURE__ */ function(CheckboxInputSize) {
 	CheckboxInputSize["SMALL"] = "SMALL";
 	CheckboxInputSize["MEDIUM"] = "MEDIUM";
@@ -55,6 +57,12 @@ var CHECKBOX_INPUT_SIZE_TO_ICON_SIZE_MAP = {
 	["SMALL"]: 10,
 	["MEDIUM"]: 12
 };
+/**
+* A checkbox with an optional label. Fully controlled — you own `isChecked`.
+*
+* `isIndeterminate` is purely visual and does not change what `onChange`
+* reports; the callback still flips against `isChecked`.
+*/
 var CheckboxInput = ({ variant = "PRIMARY", size = "MEDIUM", isChecked, isIndeterminate = false, label, isRequired = false, isDisabled = false, onChange, ariaLabel, stopClickPropagation = false }) => {
 	const handleClick = (event) => {
 		if (stopClickPropagation) event.stopPropagation();

package/dist/inputs/ColorInput.d.ts

@@ -1,20 +1,35 @@
 import { InputSize } from "./Input";
 export interface ColorInputProps {
     label?: string;
+    /** @default InputSize.MEDIUM */
     size?: InputSize;
+    /** Controlled hex value, e.g. `"#1a1a1a"`. */
     value?: string | null;
     placeholder?: string;
+    /** Called once the choice is committed. */
     onChange?: (value: string | null) => void;
+    /** Called continuously while the user drags in the picker — for live preview. */
     onPreviewChange?: (value: string | null) => void;
+    /** A number is px. */
     width?: number | string;
     fillWidth?: boolean;
     isDisabled?: boolean;
     isRequired?: boolean;
+    /** Message under the field; also switches the border to the error color. */
     error?: string;
+    /** Preset swatches shown above the picker. */
     pinnedHex?: string[];
+    /** Controlled open state. Pair it with `onOpenChange`. */
     isOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
+    /** Replaces the default trigger. The picker still opens on click. */
     children?: React.ReactNode;
 }
+/**
+ * A hex color field with a picker popover. Fully controlled.
+ *
+ * `onPreviewChange` fires throughout the drag while `onChange` fires on commit —
+ * drive a live preview from the first and persist from the second.
+ */
 declare const ColorInput: ({ label, size, value, placeholder, onChange, onPreviewChange, width, fillWidth, isDisabled, isRequired, error, pinnedHex, isOpen: controlledIsOpen, onOpenChange, children, }: ColorInputProps) => import("react").JSX.Element;
 export default ColorInput;

package/dist/inputs/ColorInput.js

@@ -133,6 +133,12 @@ var COLOR_INPUT_SIZE_TO_ICON_SIZE = {
 	[InputSize.MEDIUM]: 16,
 	[InputSize.LARGE]: 18
 };
+/**
+* A hex color field with a picker popover. Fully controlled.
+*
+* `onPreviewChange` fires throughout the drag while `onChange` fires on commit —
+* drive a live preview from the first and persist from the second.
+*/
 var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select color...", onChange, onPreviewChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, pinnedHex = [], isOpen: controlledIsOpen, onOpenChange, children }) => {
 	const [localState, setLocalState] = useState({
 		isOpen: false,

package/dist/inputs/CopyInput.d.ts

@@ -1,13 +1,22 @@
 import { InputSize } from "./Input";
 export interface CopyInputProps {
+    /** The text shown and copied. Read-only — there is no `onChange`. */
     value: string;
     label?: string;
+    /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** @default InputSize.MEDIUM */
     size?: InputSize;
+    /** A number is px. */
     width?: number | string;
     fillWidth?: boolean;
+    /** Render the value in the mono family — usually right for keys and IDs. */
     isMonospace?: boolean;
 }
+/**
+ * A read-only field with a copy-to-clipboard button — API keys, IDs, share links.
+ * The trailing button confirms the copy itself, so you don't need to.
+ */
 declare const CopyInput: {
     ({ value, label, labelTooltip, size, width, fillWidth, isMonospace, }: CopyInputProps): import("react").JSX.Element;
     displayName: string;

package/dist/inputs/CopyInput.js

@@ -11,6 +11,10 @@ var INPUT_SIZE_TO_BUTTON_SIZE = {
 	[InputSize.MEDIUM]: ButtonSize.MEDIUM,
 	[InputSize.LARGE]: ButtonSize.LARGE
 };
+/**
+* A read-only field with a copy-to-clipboard button — API keys, IDs, share links.
+* The trailing button confirms the copy itself, so you don't need to.
+*/
 var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, fillWidth, isMonospace = false }) => {
 	const [copied, setCopied] = useState(false);
 	const inputRef = useRef(null);

package/dist/inputs/DateInput.d.ts

@@ -1,19 +1,32 @@
 import { InputSize } from "./Input";
 export interface DateInputProps {
     label?: string;
+    /** @default InputSize.MEDIUM */
     size?: InputSize;
+    /** Controlled value. `null` shows the placeholder. */
     value?: Date | null;
     placeholder?: string;
+    /** Called with `null` when the selection is cleared. */
     onChange?: (value: Date | null) => void;
+    /** A number is px. */
     width?: number | string;
     fillWidth?: boolean;
     isDisabled?: boolean;
     isRequired?: boolean;
+    /** Message under the field; also switches the border to the error color. */
     error?: string;
+    /** Dates before this are not selectable. */
     minDate?: Date;
+    /** Dates after this are not selectable. */
     maxDate?: Date;
+    /** Override how the selected date reads in the trigger. */
     format?: (date: Date) => string;
 }
 export declare function defaultDateFormat(date: Date): string;
+/**
+ * A date field with a calendar popover. Fully controlled — you own `value`.
+ *
+ * Works in `Date` objects throughout; there is no string parsing to get wrong.
+ */
 declare const DateInput: ({ label, size, value, placeholder, onChange, width, fillWidth, isDisabled, isRequired, error, minDate, maxDate, format, }: DateInputProps) => import("react").JSX.Element;
 export default DateInput;

package/dist/inputs/DateInput.js

@@ -152,6 +152,11 @@ function defaultDateFormat(date) {
 var getInitialViewDate = (value) => {
 	return value || /* @__PURE__ */ new Date();
 };
+/**
+* A date field with a calendar popover. Fully controlled — you own `value`.
+*
+* Works in `Date` objects throughout; there is no string parsing to get wrong.
+*/
 var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select date...", onChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, minDate = new Date(1970, 0, 1), maxDate = DEFAULT_MAX_DATE, format = defaultDateFormat }) => {
 	const [state, setState] = useState({
 		isOpen: false,