@galaxy-io/dls 1.4.10 → 1.4.11

package/dist/theme/GalaxyTheme.d.ts

@@ -1,6 +1,5 @@
 import { type PropsWithChildren } from "react";
-import { GalaxyTheme } from "./constants";
-import type { Theme } from "./types";
+import { GalaxyTheme, type Theme } from "./types";
 declare const ThemeProvider: import("react").ComponentType<{
     children: React.ReactNode;
     theme?: Theme | undefined;
@@ -9,28 +8,60 @@ declare const ThemeProvider: import("react").ComponentType<{
 }, C>(WrappedComponent: import("react").ComponentType<Props> & C) => import("react").ComponentType<import("@callstack/react-theme-provider").$Without<Props, "theme"> & {
     theme?: import("@callstack/react-theme-provider").$DeepPartial<Theme> | undefined;
 }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<Props> & C, {}>, useTheme: <T = Theme>(overrides?: import("@callstack/react-theme-provider").$DeepPartial<T> | undefined) => T;
+/**
+ * How the provider learns the OS theme. Supply your own on platforms where
+ * `prefers-color-scheme` isn't the source of truth (Electron, React Native).
+ */
 export interface ThemeDetector {
+    /** Read the OS theme once, at mount. */
     detectInitialTheme(): Promise<GalaxyTheme.DARK | GalaxyTheme.LIGHT>;
+    /** Subscribe to OS theme changes. Returns an unsubscribe function. */
     onThemeChange(callback: (theme: GalaxyTheme.DARK | GalaxyTheme.LIGHT) => void): () => void;
 }
+/** Default detector — reads `prefers-color-scheme`. Falls back to DARK off-browser. */
 export declare const BrowserThemeDetector: ThemeDetector;
-interface GalaxyThemeContextValue {
+/** What `useGalaxyTheme()` returns. */
+export interface GalaxyThemeContextValue {
+    /** The resolved token set. Read colors and fonts from here. */
     theme: Theme;
+    /** The theme actually rendering. Never `SYSTEM` — that's already resolved. */
     activeTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>;
+    /** The user's stored preference. Can be `SYSTEM`. Bind theme pickers to this. */
     selectedTheme: GalaxyTheme;
+    /** What the OS reports. Use it to label "System (Dark)" in a picker. */
     systemTheme: GalaxyTheme.DARK | GalaxyTheme.LIGHT;
+    /** Whether the detector can read an OS theme at all. */
     isSystemThemeSupported: boolean;
+    /** Update the preference. Persists through `storage` when one is supplied. */
     setTheme: (theme: GalaxyTheme) => void;
 }
-interface GalaxyThemeProviderProps {
+export interface GalaxyThemeProviderProps {
+    /** Theme to start on when nothing is stored. @default GalaxyTheme.SYSTEM */
     initialTheme?: GalaxyTheme;
+    /** Key the preference is stored under. @default "galaxy-theme" */
     storageKey?: string;
+    /** How the OS theme is read. @default BrowserThemeDetector */
     themeDetector?: ThemeDetector;
+    /**
+     * Where the preference persists. Omit and the choice is lost on reload.
+     * Pass your own adapter — DLS never touches `localStorage` directly, so it
+     * stays safe to render on a server.
+     */
     storage?: {
         get: (key: string) => GalaxyTheme | null;
         set: (key: string, theme: GalaxyTheme) => void;
     };
 }
+/**
+ * Root provider. Wrap the app once, above everything that renders DLS.
+ *
+ * Resolves `SYSTEM` to the OS theme and feeds the token set to every
+ * `withTheme(styled.x)` component. Without it `useGalaxyTheme()` throws.
+ */
 declare const GalaxyThemeProvider: ({ children, initialTheme, storageKey, themeDetector, storage, }: PropsWithChildren<GalaxyThemeProviderProps>) => import("react").JSX.Element;
+/**
+ * Read the active theme, the user's preference, and `setTheme`.
+ * Throws when called outside a `GalaxyThemeProvider`.
+ */
 export declare const useGalaxyTheme: () => GalaxyThemeContextValue;
 export { GalaxyThemeProvider, ThemeProvider, useTheme, withTheme };

package/dist/theme/GalaxyTheme.js

@@ -1,9 +1,11 @@
-import { DEFAULT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_STORAGE_KEY, GalaxyTheme } from "./constants.js";
+import { GalaxyTheme } from "./types.js";
+import { DEFAULT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_STORAGE_KEY } from "./constants.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { createTheming } from "@callstack/react-theme-provider";
 import { jsx } from "react/jsx-runtime";
 //#region src/theme/GalaxyTheme.tsx
 var { ThemeProvider, withTheme, useTheme } = createTheming(DEFAULT_THEME);
+/** Default detector — reads `prefers-color-scheme`. Falls back to DARK off-browser. */
 var BrowserThemeDetector = {
 	detectInitialTheme: () => {
 		if (typeof window !== "undefined" && window.matchMedia) {
@@ -26,6 +28,12 @@ var BrowserThemeDetector = {
 	}
 };
 var GalaxyThemeContext = createContext(void 0);
+/**
+* Root provider. Wrap the app once, above everything that renders DLS.
+*
+* Resolves `SYSTEM` to the OS theme and feeds the token set to every
+* `withTheme(styled.x)` component. Without it `useGalaxyTheme()` throws.
+*/
 var GalaxyThemeProvider = ({ children, initialTheme, storageKey = GALAXY_THEME_STORAGE_KEY, themeDetector = BrowserThemeDetector, storage }) => {
 	const [systemTheme, setSystemTheme] = useState(() => {
 		return GalaxyTheme.DARK;
@@ -98,6 +106,10 @@ var GalaxyThemeProvider = ({ children, initialTheme, storageKey = GALAXY_THEME_S
 		})
 	});
 };
+/**
+* Read the active theme, the user's preference, and `setTheme`.
+* Throws when called outside a `GalaxyThemeProvider`.
+*/
 var useGalaxyTheme = () => {
 	const context = useContext(GalaxyThemeContext);
 	if (context === void 0) throw new Error("useGalaxyTheme must be used within a GalaxyThemeProvider");

package/dist/theme/constants.d.ts

@@ -1,11 +1,6 @@
 import type { SelectInputOption } from "../inputs/SelectInput";
-import type { Theme } from "./types";
+import { GalaxyTheme, type Theme } from "./types";
 export declare const GALAXY_THEME_STORAGE_KEY = "galaxy:theme";
-export declare enum GalaxyTheme {
-    SYSTEM = "SYSTEM",
-    DARK = "DARK",
-    LIGHT = "LIGHT"
-}
 export declare const GALAXY_DARK_THEME: Theme;
 export declare const GALAXY_LIGHT_THEME: Theme;
 export declare const GALAXY_THEME_OPTIONS: SelectInputOption[];

package/dist/theme/constants.js

@@ -1,14 +1,9 @@
+import { GalaxyTheme } from "./types.js";
 import { GALAXY_FONT } from "./typography.js";
 import { GALAXY_DARK_COLOR } from "./variants/dark.js";
 import { GALAXY_LIGHT_COLOR } from "./variants/light.js";
 //#region src/theme/constants.ts
 var GALAXY_THEME_STORAGE_KEY = "galaxy:theme";
-var GalaxyTheme = /* @__PURE__ */ function(GalaxyTheme) {
-	GalaxyTheme["SYSTEM"] = "SYSTEM";
-	GalaxyTheme["DARK"] = "DARK";
-	GalaxyTheme["LIGHT"] = "LIGHT";
-	return GalaxyTheme;
-}({});
 var GALAXY_DARK_THEME = {
 	color: GALAXY_DARK_COLOR,
 	font: GALAXY_FONT
@@ -19,25 +14,25 @@ var GALAXY_LIGHT_THEME = {
 };
 var GALAXY_THEME_OPTIONS = [
 	{
-		id: "SYSTEM",
+		id: GalaxyTheme.SYSTEM,
 		label: "System",
-		value: "SYSTEM"
+		value: GalaxyTheme.SYSTEM
 	},
 	{
-		id: "DARK",
+		id: GalaxyTheme.DARK,
 		label: "Dark",
-		value: "DARK"
+		value: GalaxyTheme.DARK
 	},
 	{
-		id: "LIGHT",
+		id: GalaxyTheme.LIGHT,
 		label: "Light",
-		value: "LIGHT"
+		value: GalaxyTheme.LIGHT
 	}
 ];
 var GALAXY_THEME_MAP = {
-	["DARK"]: GALAXY_DARK_THEME,
-	["LIGHT"]: GALAXY_LIGHT_THEME
+	[GalaxyTheme.DARK]: GALAXY_DARK_THEME,
+	[GalaxyTheme.LIGHT]: GALAXY_LIGHT_THEME
 };
 var DEFAULT_THEME = GALAXY_DARK_THEME;
 //#endregion
-export { DEFAULT_THEME, GALAXY_DARK_THEME, GALAXY_LIGHT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_OPTIONS, GALAXY_THEME_STORAGE_KEY, GalaxyTheme };
+export { DEFAULT_THEME, GALAXY_DARK_THEME, GALAXY_LIGHT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_OPTIONS, GALAXY_THEME_STORAGE_KEY };

package/dist/theme/index.js

@@ -1,6 +1,7 @@
+import { GalaxyTheme } from "./types.js";
 import { GALAXY_FONT } from "./typography.js";
 import { GALAXY_DARK_COLOR } from "./variants/dark.js";
 import { GALAXY_LIGHT_COLOR } from "./variants/light.js";
-import { DEFAULT_THEME, GALAXY_DARK_THEME, GALAXY_LIGHT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_OPTIONS, GALAXY_THEME_STORAGE_KEY, GalaxyTheme } from "./constants.js";
+import { DEFAULT_THEME, GALAXY_DARK_THEME, GALAXY_LIGHT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_OPTIONS, GALAXY_THEME_STORAGE_KEY } from "./constants.js";
 import { BrowserThemeDetector, GalaxyThemeProvider, ThemeProvider, useGalaxyTheme, useTheme, withTheme } from "./GalaxyTheme.js";
 export { BrowserThemeDetector, DEFAULT_THEME, GALAXY_DARK_COLOR, GALAXY_DARK_THEME, GALAXY_FONT, GALAXY_LIGHT_COLOR, GALAXY_LIGHT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_OPTIONS, GALAXY_THEME_STORAGE_KEY, GalaxyTheme, GalaxyThemeProvider, ThemeProvider, useGalaxyTheme, useTheme, withTheme };

package/dist/theme/types.d.ts

@@ -1,3 +1,10 @@
+/** Theme preference. `SYSTEM` follows the OS and resolves to `DARK` or `LIGHT`. */
+export declare enum GalaxyTheme {
+    SYSTEM = "SYSTEM",
+    DARK = "DARK",
+    LIGHT = "LIGHT"
+}
+/** Text colors. Target of `TextVariant`; `*Alt` inverts against the theme. */
 export type ThemeTextColor = {
     primary: string;
     primaryAlt: string;
@@ -20,6 +27,7 @@ export type ThemeTextColor = {
     galaxy: string;
     galaxyAlt: string;
 };
+/** Surface colors. `base`/`primary`/`secondary` are the neutral stack; accents are for status only. */
 export type ThemeBackgroundColor = {
     base: string;
     baseAlt: string;
@@ -54,6 +62,7 @@ export type ThemeBackgroundColor = {
     galaxy: string;
     galaxyAlt: string;
 };
+/** Border colors. Always paired with a `0.5px solid` hairline — DLS uses borders, not shadows. */
 export type ThemeBorderColor = {
     primary: string;
     secondary: string;
@@ -73,6 +82,7 @@ export type ThemeBorderColor = {
     galaxy: string;
     galaxyAlt: string;
 };
+/** Icon colors. Target of `IconVariant`. */
 export type ThemeIconColor = {
     primary: string;
     primaryAlt: string;
@@ -94,6 +104,7 @@ export type ThemeIconColor = {
     galaxy: string;
     galaxyAlt: string;
 };
+/** Black/white overlay tints. `bw<N>` is N% opacity; `*Alt` is the inverse. */
 export type ThemeOpacityColor = {
     bw100: string;
     bw100Alt: string;
@@ -118,10 +129,12 @@ export type ThemeOpacityColor = {
     bw0: string;
     bw0Alt: string;
 };
+/** Numeric font weights. Target of `TextWeight`. */
 export type ThemeFontWeight = {
     regular: number;
     medium: number;
 };
+/** Font sizes per `TextSize` step. */
 export type ThemeFontSize = {
     caption: string;
     body_sm: string;
@@ -131,6 +144,7 @@ export type ThemeFontSize = {
     heading_md: string;
     heading_lg: string;
 };
+/** Line heights per `TextSize` step. */
 export type ThemeFontHeight = {
     caption: string;
     body_sm: string;
@@ -140,6 +154,7 @@ export type ThemeFontHeight = {
     heading_md: string;
     heading_lg: string;
 };
+/** Letter spacing per `TextSize` step. */
 export type ThemeFontSpacing = {
     caption: string;
     body_sm: string;
@@ -149,6 +164,7 @@ export type ThemeFontSpacing = {
     heading_md: string;
     heading_lg: string;
 };
+/** One font family plus its full metric scale. */
 export type ThemeFont = {
     family: string;
     weight: ThemeFontWeight;
@@ -156,6 +172,10 @@ export type ThemeFont = {
     height: ThemeFontHeight;
     spacing: ThemeFontSpacing;
 };
+/**
+ * The resolved token set for the active theme. Reach it via `useGalaxyTheme()`,
+ * or as the `theme` prop inside a `withTheme(styled.x)` component.
+ */
 export type Theme = {
     color: {
         text: ThemeTextColor;
@@ -169,6 +189,7 @@ export type Theme = {
         mono: ThemeFont;
     };
 };
+/** Adds the injected `theme` prop to a styled component's own props. */
 export type PropsWithTheme<P = unknown> = P & {
     theme: Theme;
 };

package/dist/theme/types.js

@@ -0,0 +1,10 @@
+//#region src/theme/types.ts
+/** Theme preference. `SYSTEM` follows the OS and resolves to `DARK` or `LIGHT`. */
+var GalaxyTheme = /* @__PURE__ */ function(GalaxyTheme) {
+	GalaxyTheme["SYSTEM"] = "SYSTEM";
+	GalaxyTheme["DARK"] = "DARK";
+	GalaxyTheme["LIGHT"] = "LIGHT";
+	return GalaxyTheme;
+}({});
+//#endregion
+export { GalaxyTheme };

package/dist/toast/Toast.d.ts

@@ -1,5 +1,6 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { ButtonProps } from "../buttons/Button";
+/** Severity. Sets the border tint and the default icon. */
 export declare enum ToastVariant {
     PRIMARY = "PRIMARY",
     SUCCESS = "SUCCESS",
@@ -7,12 +8,22 @@ export declare enum ToastVariant {
     ERROR = "ERROR"
 }
 export interface ToastProps {
+    /** @default ToastVariant.PRIMARY */
     variant?: ToastVariant;
+    /** Overrides the icon the variant would pick. Pass the component, not an element. */
     icon?: PhosphorIcon;
+    /** Headline. A string is wrapped in `Text`; a node renders as-is. */
     header: string | React.ReactNode;
+    /** Supporting line under the header. */
     subheader: string | React.ReactNode;
+    /** Buttons in a row along the bottom. Each entry is full `ButtonProps`. */
     actions?: ButtonProps[];
+    /** Adds a dismiss ×. `ToastProvider` supplies this — don't set it by hand. */
     onClose?: () => void;
 }
+/**
+ * The toast card itself. You rarely render this directly — call `showToast`
+ * from `useToast()` and let `ToastProvider` mount, stack and time it out.
+ */
 declare const Toast: ({ variant, icon, header, subheader, actions, onClose, }: ToastProps) => import("react").JSX.Element;
 export default Toast;

package/dist/toast/Toast.js

@@ -10,6 +10,7 @@ import { match } from "ts-pattern";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircleIcon, SpinnerGapIcon, WarningIcon, XIcon } from "@phosphor-icons/react";
 //#region src/toast/Toast.tsx
+/** Severity. Sets the border tint and the default icon. */
 var ToastVariant = /* @__PURE__ */ function(ToastVariant) {
 	ToastVariant["PRIMARY"] = "PRIMARY";
 	ToastVariant["SUCCESS"] = "SUCCESS";
@@ -30,6 +31,10 @@ var StyledToast = withTheme(/*#__PURE__*/ styled("div")({
 		"sgmrm4-2": [_exp3()]
 	}
 }));
+/**
+* The toast card itself. You rarely render this directly — call `showToast`
+* from `useToast()` and let `ToastProvider` mount, stack and time it out.
+*/
 var Toast = ({ variant = "PRIMARY", icon, header, subheader, actions, onClose }) => {
 	const renderIcon = () => {
 		if (icon) return /* @__PURE__ */ jsx(Icon, {

package/dist/toast/ToastProvider.d.ts

@@ -1,16 +1,25 @@
 import { PropsWithChildren } from "react";
 import { ToastVariant, type ToastProps } from "./Toast";
+/** What you pass to `showToast`. Every `ToastProps` field except `onClose`, which the provider owns. */
 export type ShowToastProps = Omit<ToastProps, "onClose"> & {
+    /** Milliseconds before auto-dismiss. Pass `0` to make it stay. @default 3000 */
     timeout?: number;
+    /** Viewport offset. Toasts sharing the same four values stack together. */
     top?: number | string;
     left?: number | string;
     right?: number | string;
     bottom?: number | string;
 };
 export interface ToastContextProps {
+    /** Queue a toast. Returns its id, for dismissing it early via `hideToast`. */
     showToast: (options: ShowToastProps) => string;
+    /** Dismiss one toast by id, or every toast when called with no argument. */
     hideToast: (id?: string) => void;
 }
 export declare const ToastContext: import("react").Context<ToastContextProps | undefined>;
+/**
+ * Owns the toast queue. Mount it once near the root, then call `showToast` from
+ * `useToast()` anywhere below. Handles stacking, timers and dismissal.
+ */
 export declare const ToastProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
 export { ToastVariant };

package/dist/toast/ToastProvider.js

@@ -16,6 +16,10 @@ var positionKey = (toast) => JSON.stringify([
 	toast.bottom,
 	toast.left
 ]);
+/**
+* Owns the toast queue. Mount it once near the root, then call `showToast` from
+* `useToast()` anywhere below. Handles stacking, timers and dismissal.
+*/
 var ToastProvider = ({ children }) => {
 	const [toasts, setToasts] = useState([]);
 	const timeoutRefs = useRef(/* @__PURE__ */ new Map());

package/dist/toast/useToast.d.ts

@@ -1 +1,8 @@
+/**
+ * Returns `{ showToast, hideToast }`. `showToast` returns the new toast's id,
+ * which you can pass to `hideToast` to dismiss that one early — call it with no
+ * argument to clear them all.
+ *
+ * Throws when called outside a `ToastProvider`.
+ */
 export declare const useToast: () => import("./ToastProvider").ToastContextProps;

package/dist/toast/useToast.js

@@ -1,6 +1,13 @@
 import { ToastContext } from "./ToastProvider.js";
 import { useContext } from "react";
 //#region src/toast/useToast.ts
+/**
+* Returns `{ showToast, hideToast }`. `showToast` returns the new toast's id,
+* which you can pass to `hideToast` to dismiss that one early — call it with no
+* argument to clear them all.
+*
+* Throws when called outside a `ToastProvider`.
+*/
 var useToast = () => {
 	const context = useContext(ToastContext);
 	if (!context) throw new Error("useToast must be used within a ToastProvider");

package/dist/tooltip/Tooltip.d.ts

@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from "react";
+/** Placement relative to the trigger. The `AUTO_*` values pick a side that fits. */
 export declare enum TooltipPosition {
     TOP = "top",
     BOTTOM = "bottom",
@@ -16,22 +17,39 @@ export declare enum TooltipPosition {
     AUTO_START = "auto-start",
     AUTO_END = "auto-end"
 }
+/** Surface treatment of the tooltip bubble. */
 export declare enum TooltipVariant {
     BASE = "BASE",
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY"
 }
-interface TooltipProps {
+export interface TooltipProps {
+    /** Tooltip content. A string is wrapped in `Text`; a node renders as-is. */
     body: string | React.ReactNode;
+    /** @default TooltipVariant.SECONDARY */
     variant?: TooltipVariant;
+    /** @default TooltipPosition.TOP */
     position?: TooltipPosition;
+    /** Milliseconds to hover before it appears. @default 0 */
     delay?: number;
+    /** `[skidding, distance]` in px from the trigger. @default [0, 4] */
     offset?: [number, number];
+    /** Keep it open while the pointer is over it, so links inside stay reachable. */
     isInteractive?: boolean;
+    /** Drop the 8px inset — for tooltips that host their own layout. */
     noPadding?: boolean;
+    /** Drop the hairline border. */
     noBorder?: boolean;
+    /** Render children bare, with no tooltip at all. */
     isDisabled?: boolean;
 }
+/**
+ * Wraps a trigger and shows `body` on hover or keyboard focus. Children are the
+ * trigger, wrapped in an inline-block span.
+ *
+ * Sits at z-index 10000, above modals and drawers. Set `isInteractive` if the
+ * body contains anything clickable.
+ */
 declare const Tooltip: ({ children, variant, body, position, delay, offset, isInteractive, noPadding, noBorder, isDisabled, }: PropsWithChildren<TooltipProps>) => string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;
 export default Tooltip;

package/dist/tooltip/Tooltip.js

@@ -6,6 +6,7 @@ import { match } from "ts-pattern";
 import { jsx } from "react/jsx-runtime";
 import Tippy from "@tippyjs/react";
 //#region src/tooltip/Tooltip.tsx
+/** Placement relative to the trigger. The `AUTO_*` values pick a side that fits. */
 var TooltipPosition = /* @__PURE__ */ function(TooltipPosition) {
 	TooltipPosition["TOP"] = "top";
 	TooltipPosition["BOTTOM"] = "bottom";
@@ -24,6 +25,7 @@ var TooltipPosition = /* @__PURE__ */ function(TooltipPosition) {
 	TooltipPosition["AUTO_END"] = "auto-end";
 	return TooltipPosition;
 }({});
+/** Surface treatment of the tooltip bubble. */
 var TooltipVariant = /* @__PURE__ */ function(TooltipVariant) {
 	TooltipVariant["BASE"] = "BASE";
 	TooltipVariant["PRIMARY"] = "PRIMARY";
@@ -54,6 +56,13 @@ var TooltipContent = withTheme(/*#__PURE__*/ styled("span")({
 		"tjda4tq-2": [_exp3()]
 	}
 }));
+/**
+* Wraps a trigger and shows `body` on hover or keyboard focus. Children are the
+* trigger, wrapped in an inline-block span.
+*
+* Sits at z-index 10000, above modals and drawers. Set `isInteractive` if the
+* body contains anything clickable.
+*/
 var Tooltip = ({ children, variant = "SECONDARY", body, position = "top", delay = 0, offset = [0, 4], isInteractive = false, noPadding = false, noBorder = false, isDisabled = false }) => {
 	if (isDisabled) return children;
 	return /* @__PURE__ */ jsx(Tippy, {

package/dist/transform/Fade.d.ts

@@ -1,6 +1,13 @@
 import type { PropsWithChildren } from "react";
 export interface FadeProps {
+    /** Seconds to wait before starting. @default 0 */
     delay?: number;
 }
+/**
+ * Fades children in on mount and out on unmount, over 200ms.
+ *
+ * The exit half only runs inside a framer-motion `AnimatePresence`. Fills its
+ * parent (100% × 100%).
+ */
 declare const Fade: ({ children, delay }: PropsWithChildren<FadeProps>) => import("react").JSX.Element;
 export default Fade;

package/dist/transform/Fade.js

@@ -1,6 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 //#region src/transform/Fade.tsx
+/**
+* Fades children in on mount and out on unmount, over 200ms.
+*
+* The exit half only runs inside a framer-motion `AnimatePresence`. Fills its
+* parent (100% × 100%).
+*/
 var Fade = ({ children, delay = 0 }) => {
 	return /* @__PURE__ */ jsx(motion.div, {
 		initial: { opacity: 0 },

package/dist/transform/Flash.d.ts

@@ -1,3 +1,7 @@
 import { PropsWithChildren } from "react";
+/**
+ * Pulses children between full and 40% opacity, forever, on a 1s cycle.
+ * Signals "in progress" — pair it with a real completion state.
+ */
 declare const Flash: ({ children }: PropsWithChildren) => import("react").JSX.Element;
 export default Flash;

package/dist/transform/Flash.js

@@ -7,6 +7,10 @@ var StyledFlash = /*#__PURE__*/ styled("span")({
 	class: "s18o9ih0",
 	propsAsIs: false
 });
+/**
+* Pulses children between full and 40% opacity, forever, on a 1s cycle.
+* Signals "in progress" — pair it with a real completion state.
+*/
 var Flash = ({ children }) => {
 	return /* @__PURE__ */ jsx(StyledFlash, { children });
 };

package/dist/transform/Rotate.d.ts

@@ -1,8 +1,15 @@
 import type { PropsWithChildren } from "react";
 export interface RotateProps {
+    /** Rotated to `deg` when true, back to 0 when false. */
     isRotated: boolean;
+    /** Angle in degrees at the rotated end. @default 180 */
     deg?: number;
+    /** Transition duration in seconds. @default 0.075 */
     speed?: number;
 }
+/**
+ * Tweens children between 0° and `deg` as `isRotated` flips. State-driven, not
+ * looping — the usual case is a chevron on an expand/collapse toggle.
+ */
 declare const Rotate: ({ children, isRotated, deg, speed }: PropsWithChildren<RotateProps>) => import("react").JSX.Element;
 export default Rotate;

package/dist/transform/Rotate.js

@@ -16,6 +16,10 @@ var RotateWrapper = /*#__PURE__*/ styled("div")({
 		"r530s5l-1": [_exp2()]
 	}
 });
+/**
+* Tweens children between 0° and `deg` as `isRotated` flips. State-driven, not
+* looping — the usual case is a chevron on an expand/collapse toggle.
+*/
 var Rotate = ({ children, isRotated, deg = 180, speed }) => {
 	return /* @__PURE__ */ jsx(RotateWrapper, {
 		$isRotated: isRotated,

package/dist/transform/ScaleFade.d.ts

@@ -1,6 +1,13 @@
 import type { PropsWithChildren } from "react";
 export interface ScaleFadeProps {
+    /** Seconds to wait before starting. @default 0 */
     delay?: number;
 }
+/**
+ * Fades children in while scaling from 95% to 100%, over 200ms. The entrance for
+ * things that pop: menus, popovers, toasts.
+ *
+ * The exit half only runs inside a framer-motion `AnimatePresence`.
+ */
 declare const ScaleFade: ({ children, delay }: PropsWithChildren<ScaleFadeProps>) => import("react").JSX.Element;
 export default ScaleFade;

package/dist/transform/ScaleFade.js

@@ -1,6 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 //#region src/transform/ScaleFade.tsx
+/**
+* Fades children in while scaling from 95% to 100%, over 200ms. The entrance for
+* things that pop: menus, popovers, toasts.
+*
+* The exit half only runs inside a framer-motion `AnimatePresence`.
+*/
 var ScaleFade = ({ children, delay = 0 }) => {
 	return /* @__PURE__ */ jsx(motion.div, {
 		initial: {

package/dist/transform/Spin.d.ts

@@ -1,7 +1,14 @@
 import type { PropsWithChildren } from "react";
 export interface SpinProps {
+    /** Rotations per second. Higher is faster. @default 1 */
     speed?: number;
+    /** @default true */
     isSpinning?: boolean;
 }
+/**
+ * Rotates children continuously — the loading spinner, usually wrapping an
+ * `Icon`. When `isSpinning` is false the children render bare, with no wrapper
+ * element, so toggling it does not shift layout.
+ */
 declare const Spin: ({ children, speed, isSpinning }: PropsWithChildren<SpinProps>) => import("react").JSX.Element;
 export default Spin;

package/dist/transform/Spin.js

@@ -9,6 +9,11 @@ var StyledSpin = /*#__PURE__*/ styled("div")({
 	propsAsIs: false,
 	vars: { "sonzivr-0": [_exp(), "s"] }
 });
+/**
+* Rotates children continuously — the loading spinner, usually wrapping an
+* `Icon`. When `isSpinning` is false the children render bare, with no wrapper
+* element, so toggling it does not shift layout.
+*/
 var Spin = ({ children, speed = 1, isSpinning = true }) => {
 	if (isSpinning) return /* @__PURE__ */ jsx(StyledSpin, {
 		$speed: speed,