@galaxy-io/dls 2.0.2 → 2.1.0

package/dist/theme/ThemeSwitcher.d.ts

@@ -12,12 +12,28 @@ export declare enum ThemeSwitcherSize {
     /** 40px control. */
     X_LARGE = "X_LARGE"
 }
+/** Surface set; ThemeSwitcher passes the step to ToggleInput. */
+export declare enum ThemeSwitcherVariant {
+    /** `background.base`. */
+    BASE = "BASE",
+    /** `background.primary`. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
 export interface ThemeSwitcherProps extends AriaAttributes {
     /**
      * Control rung: 20 / 24 / 32 / 36 / 40px tall.
      * @default ThemeSwitcherSize.MEDIUM
      */
     size?: ThemeSwitcherSize;
+    /**
+     * Track fill, one surface step.
+     * @default ThemeSwitcherVariant.PRIMARY
+     */
+    variant?: ThemeSwitcherVariant;
     /**
      * Show only the icons; each segment's name moves to its `aria-label` and tooltip. For tight spots such as a sidebar footer or a user menu.
      * @default false

package/dist/theme/ThemeSwitcher.js

@@ -1,6 +1,6 @@
 import { GalaxyTheme } from "./enums.js";
 import { useGalaxyTheme } from "./useGalaxyTheme.js";
-import ToggleInput, { ToggleInputSize } from "../inputs/ToggleInput.js";
+import ToggleInput, { ToggleInputSize, ToggleInputVariant } from "../inputs/ToggleInput.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { MonitorIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
@@ -29,6 +29,18 @@ var ThemeSwitcherSize = /* @__PURE__ */ function(ThemeSwitcherSize) {
 	ThemeSwitcherSize["X_LARGE"] = "X_LARGE";
 	return ThemeSwitcherSize;
 }({});
+/** Surface set; ThemeSwitcher passes the step to ToggleInput. */
+var ThemeSwitcherVariant = /* @__PURE__ */ function(ThemeSwitcherVariant) {
+	/** `background.base`. */
+	ThemeSwitcherVariant["BASE"] = "BASE";
+	/** `background.primary`. The default. */
+	ThemeSwitcherVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary`. */
+	ThemeSwitcherVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary`. */
+	ThemeSwitcherVariant["TERTIARY"] = "TERTIARY";
+	return ThemeSwitcherVariant;
+}({});
 /** The three built-in themes, in the 1.x order, each with its glyph. */
 var THEME_SWITCHER_OPTIONS = [
 	{
@@ -73,8 +85,15 @@ var THEME_SWITCHER_SIZE_TO_TOGGLE_INPUT_SIZE_MAP = {
 	["LARGE"]: ToggleInputSize.LARGE,
 	["X_LARGE"]: ToggleInputSize.X_LARGE
 };
+/** ThemeSwitcher's surface step is ToggleInput's surface step. */
+var THEME_SWITCHER_VARIANT_TO_TOGGLE_INPUT_VARIANT_MAP = {
+	["BASE"]: ToggleInputVariant.BASE,
+	["PRIMARY"]: ToggleInputVariant.PRIMARY,
+	["SECONDARY"]: ToggleInputVariant.SECONDARY,
+	["TERTIARY"]: ToggleInputVariant.TERTIARY
+};
 /** The System / Dark / Light control, bound to the nearest `GalaxyProvider`. */
-var ThemeSwitcher = forwardRef(function ThemeSwitcher({ size = "MEDIUM", isIconOnly = false, label, ariaLabel = "Theme", fillWidth = false, className, style, ...rest }, ref) {
+var ThemeSwitcher = forwardRef(function ThemeSwitcher({ size = "MEDIUM", variant = "PRIMARY", isIconOnly = false, label, ariaLabel = "Theme", fillWidth = false, className, style, ...rest }, ref) {
 	const { selectedTheme, setTheme } = useGalaxyTheme();
 	return /* @__PURE__ */ jsx(ToggleInput, {
 		ref,
@@ -82,6 +101,7 @@ var ThemeSwitcher = forwardRef(function ThemeSwitcher({ size = "MEDIUM", isIconO
 		value: selectedTheme,
 		onChange: setTheme,
 		size: THEME_SWITCHER_SIZE_TO_TOGGLE_INPUT_SIZE_MAP[size],
+		variant: THEME_SWITCHER_VARIANT_TO_TOGGLE_INPUT_VARIANT_MAP[variant],
 		...label === void 0 ? { ariaLabel } : { label },
 		fillWidth,
 		...rest,
@@ -91,4 +111,4 @@ var ThemeSwitcher = forwardRef(function ThemeSwitcher({ size = "MEDIUM", isIconO
 });
 ThemeSwitcher.displayName = "ThemeSwitcher";
 //#endregion
-export { ThemeSwitcherSize, ThemeSwitcher as default };
+export { ThemeSwitcherSize, ThemeSwitcherVariant, ThemeSwitcher as default };

package/dist/widget/Widget.d.ts

@@ -1,5 +1,6 @@
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type MouseEvent, type ReactNode } from "react";
+import type { Space } from "../theme/enums.js";
 /** Card fill (Constitution V-A surface set). */
 export declare enum WidgetVariant {
     /** `background.base`. */
@@ -40,7 +41,7 @@ export interface WidgetGroupContextValue {
 export declare const WidgetGroupContext: import("react").Context<WidgetGroupContextValue | null>;
 /** Every Widget prop except the two coupled pairs (`isInteractive` / `onClick`, `isCollapsible` / `header`). */
 interface WidgetBaseProps extends AriaAttributes {
-    /** The body: a column with the size's inset (none with `isFlush`) and gap. */
+    /** The body: a column with the size's inset (none with `isFlush`) and `gap`. */
     children?: ReactNode;
     /**
      * Surface fill of the card.
@@ -52,6 +53,12 @@ interface WidgetBaseProps extends AriaAttributes {
      * @default WidgetSize.MEDIUM
      */
     size?: WidgetSize;
+    /**
+     * Space between the body's children, from the space scale. `0` stacks them edge to edge (a
+     * flush chart over a table).
+     * @default the size's gap: 8 / 12 / 16
+     */
+    gap?: Space;
     /**
      * The header row's title. A string renders as a medium `Text` at the size's step; a node renders
      * as-is and must not contain controls (put them in `actions`). Omit it for a body-only card.

package/dist/widget/Widget.js

@@ -1,5 +1,6 @@
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import { gapToCss } from "../utils/css.js";
 import Divider from "../layout/Divider.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import IconSlot from "../icons/internal/IconSlot.js";
@@ -113,7 +114,7 @@ var Panel = /*#__PURE__*/ styled("section")({
 	class: "gx-Widget-Panel-p1u3h98q",
 	propsAsIs: false
 });
-/** The body region: a column of the children. */
+/** The body region: a column of the children, spaced by `--gx-widget-gap`. */
 var Body = /*#__PURE__*/ styled("div")({
 	name: "Body",
 	class: "gx-Widget-Body-b1t0k6w8",
@@ -143,12 +144,18 @@ var WIDGET_SIZE_TO_ROW_CSS_MAP = {
 	["MEDIUM"]: "gx-Widget-MEDIUM-m14youd7",
 	["LARGE"]: "gx-Widget-LARGE-lmk1xrm"
 };
-/** Body inset and gap. */
+/** Body inset. */
 var WIDGET_SIZE_TO_BODY_CSS_MAP = {
 	["SMALL"]: "gx-Widget-SMALL-s1qcxaeu",
 	["MEDIUM"]: "gx-Widget-MEDIUM-m1niqf43",
 	["LARGE"]: "gx-Widget-LARGE-l1wi0lfv"
 };
+/** The body gap when `gap` is unset: the same step as the inset. */
+var WIDGET_SIZE_TO_GAP_MAP = {
+	["SMALL"]: 8,
+	["MEDIUM"]: 12,
+	["LARGE"]: 16
+};
 var WIDGET_SIZE_TO_TEXT_SIZE_MAP = {
 	["SMALL"]: TextSize.BODY_SM,
 	["MEDIUM"]: TextSize.BODY_MD,
@@ -181,7 +188,7 @@ var INTERACTIVE_CSS = "gx-Widget-INTERACTIVE_CSS-i11hrzgx";
 var DISABLED_CSS = "gx-Widget-DISABLED_CSS-d27d11a";
 /** Chosen: a `text.primary` hairline, also on hover (declared after the hover states, so it wins). */
 var SELECTED_CSS = "gx-Widget-SELECTED_CSS-s13jeom8";
-/** `isFlush`: no body inset (the gap stays); the body clips its content inside the corners it shares. */
+/** `isFlush`: no body inset (`gap` stays); the body clips its content inside the corners it shares. */
 var FLUSH_CSS = "gx-Widget-FLUSH_CSS-f18mgbxd";
 /** A flush body with no header row above it rounds the card's top corners. */
 var FLUSH_TOP_CORNERS_CSS = "gx-Widget-FLUSH_TOP_CORNERS_CSS-f1djym4t";
@@ -217,7 +224,7 @@ var headerColors = (isOpen, isDisabled) => match({
 /** Whether a slot has something to render. */
 var hasContent = (node) => node !== void 0 && node !== null && node !== false;
 /** A card: a bordered surface with an optional (collapsible) header, actions, footer and states. */
-var Widget = forwardRef(function Widget({ children, variant = "PRIMARY", size = "MEDIUM", header, subheader, icon, actions, footer, isFlush = false, isCollapsible = false, hasCaret = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, isDisabled = false, isLoading = false, isSelected, isInteractive = false, onClick, ariaLabel, id, className, style, ...rest }, ref) {
+var Widget = forwardRef(function Widget({ children, variant = "PRIMARY", size = "MEDIUM", gap, header, subheader, icon, actions, footer, isFlush = false, isCollapsible = false, hasCaret = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, isDisabled = false, isLoading = false, isSelected, isInteractive = false, onClick, ariaLabel, id, className, style, ...rest }, ref) {
 	const baseId = useId();
 	const rootId = id ?? baseId;
 	const titleId = `${baseId}-title`;
@@ -259,6 +266,7 @@ var Widget = forwardRef(function Widget({ children, variant = "PRIMARY", size =
 		hasHeaderRow && /* @__PURE__ */ jsx(Divider, {}),
 		/* @__PURE__ */ jsx(Body, {
 			id: bodyId,
+			style: { "--gx-widget-gap": gapToCss(gap ?? WIDGET_SIZE_TO_GAP_MAP[size]) },
 			className: cx(WIDGET_SIZE_TO_BODY_CSS_MAP[size], isFlush && FLUSH_CSS, isFlush && !hasHeaderRow && FLUSH_TOP_CORNERS_CSS, isFlush && !hasFooter && FLUSH_BOTTOM_CORNERS_CSS),
 			children: isLoading ? /* @__PURE__ */ jsx(Loading, { children: /* @__PURE__ */ jsx(Spinner, {
 				variant: SpinnerVariant.SECONDARY,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",