@galaxy-io/dls 1.4.9 → 1.4.11

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;

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, {