@stealthscale/component-screen 0.0.1 → 0.2.2

package/dist/recipe-DRMsitrw.js

@@ -0,0 +1,283 @@
+import { below, defineSlotRecipe, dense, interactive, lookVariants, onSlot, onSlots, paletteVariants, sizeVariants, truncate } from "@stealthscale/theme/authoring";
+//#region src/folding/folding.ts
+/**
+* Styles an action that folds to its icon while its row is narrow, for the page, the toolbar and
+* the section.
+*
+* @remarks
+*   A secondary action shows its icon alone, and its words remain for a screen reader. A tertiary
+*   action renders nothing on a narrow row and runs from the row's menu, which the action registers
+*   with. The row measures its own width, so a row beside an open sidebar folds on its own width
+*   and the caller does not write a breakpoint.
+*/
+/**
+* Attribute an action sets on itself while its own row is narrow.
+*
+* @remarks
+*   The action reads the state from its row's context, so a narrow ancestor folds no action of a
+*   wider row inside it. A bar fixed to the window is wider than the page around it in the
+*   document.
+*/
+const NARROW$1 = "data-narrow";
+/**
+* Attribute a toolbar control sets to the id it registers its menu row under, while a narrow row
+* can move it into the row's menu.
+*
+* @remarks
+*   The row reads the attribute in document order. It moves the control nearest its end first, and
+*   its menu lists the moved controls in the row's order.
+*/
+const FOLDS = "data-folds";
+/**
+* Attribute an action sets to its priority.
+*
+* @remarks
+*   The priority is an attribute and not an axis, because a slot recipe resolves its variants once,
+*   at the root, and each action in a row folds on its own priority.
+*/
+const PRIORITY = "data-priority";
+/**
+* Styles an action by its priority while its row is narrow.
+*
+* @remarks
+*   Every action keeps its words on one line at every width, because a wrapped control would make
+*   the row taller. A secondary action hides its element children other than its icon with
+*   `srOnly`, so it keeps its accessible name, and renders as a square around its icon. Its words
+*   must be in an element, because a CSS selector cannot select a bare text node. A primary action
+*   is unchanged.
+*/
+const FOLDING = {
+	[`&[${PRIORITY}=secondary]`]: { [`&[${NARROW$1}]`]: {
+		"& > :not(svg)": { srOnly: true },
+		aspectRatio: "square",
+		justifyContent: "center",
+		paddingInline: "0"
+	} },
+	whiteSpace: "nowrap"
+};
+//#endregion
+//#region src/switcher/recipe.ts
+/**
+* Declares the switcher's slot recipe, which styles the control that shows the current workspace,
+* project or environment and opens the menu of the others.
+*
+* @remarks
+*   The recipe has six slots. The root slot is the trigger, and the mark, the label, the name, the
+*   detail and the indicator are inside it. `Switcher.Root` is the disclosure package's menu, so
+*   the menu's recipe styles the panel and its rows. The trigger takes the button's looks and
+*   palettes from the same layer styles, so an outlined switcher has the button's light edge. The
+*   mark renders an initial, an icon or an avatar in the palette's ink, without a fill. The name
+*   and the detail truncate to keep the control at one height. A pair of chevrons marks a control
+*   that switches and not a direction, so the indicator does not rotate while the menu is open. In
+*   a sidebar closed to icons, and in a narrow toolbar for a switcher with a mark, the control is
+*   its mark alone, square. The words remain in the accessible name in both.
+*/
+/**
+* Selects a part of a switcher drawn as its mark alone, in a sidebar closed to icons.
+*/
+const ICONIC = ".switcher__root[data-iconic] &";
+/**
+* Selects a part of a switcher with a mark in a toolbar too narrow for the name. A switcher
+* without a mark keeps its name, because the name is the only content that identifies it.
+*/
+const NARROW = ".switcher__root[data-narrow]:has(.switcher__mark) &";
+/**
+* Custom property the size axis sets to the height of a button at the switcher's size.
+*/
+const HEIGHT = "--switcher-height";
+/**
+* Styles a control that is one line as wide as its words: in a toolbar and on its own.
+*
+* @remarks
+*   `inlineSize: fit` keeps the control as wide as its words, because a flex container fills its
+*   line otherwise. The detail is hidden, because the control is one line tall. The control is at
+*   least as tall as a button of its size, so it lines up with the buttons in a toolbar: 36px at
+*   `sm` and 40px at `md`. In a narrow toolbar a control with a mark is a square of that height
+*   around the mark, as an action with an icon is.
+*/
+const INLINE = {
+	detail: { display: "none" },
+	root: {
+		"&[data-narrow]:has(.switcher__mark)": {
+			aspectRatio: "square",
+			inlineSize: "auto",
+			justifyContent: "center",
+			paddingInline: "0"
+		},
+		inlineSize: "fit",
+		minBlockSize: `var(${HEIGHT})`
+	}
+};
+/**
+* Styles the control in a sidebar: a row as wide as the column, and the mark alone on a rail.
+*
+* @remarks
+*   On a rail the control has no padding and no edge, so it is the mark's square, as tall as the
+*   rows under it: 32px at `md`.
+*/
+const ROW = { root: {
+	"&[data-iconic]": {
+		alignSelf: "center",
+		aspectRatio: "square",
+		borderWidth: "0",
+		inlineSize: "auto",
+		justifyContent: "center",
+		padding: "0"
+	},
+	inlineSize: "full"
+} };
+/**
+* Styles a ghost switcher at the middle size, alone.
+*/
+const recipe = defineSlotRecipe({
+	base: {
+		detail: {
+			...truncate(),
+			textStyle: "caption",
+			color: "fg.subtle"
+		},
+		indicator: {
+			_open: { rotate: "0deg" },
+			alignItems: "center",
+			color: "fg.subtle",
+			display: "inline-flex",
+			flexShrink: "0",
+			[ICONIC]: { display: "none" },
+			justifyContent: "center",
+			marginInlineStart: "auto",
+			[NARROW]: { display: "none" },
+			transitionDuration: "press",
+			transitionProperty: "common",
+			transitionTimingFunction: "press"
+		},
+		label: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			[ICONIC]: { srOnly: true },
+			minInlineSize: "0",
+			[NARROW]: { srOnly: true },
+			textAlign: "start"
+		},
+		mark: {
+			alignItems: "center",
+			color: "colorPalette.fg",
+			display: "inline-flex",
+			flexShrink: "0",
+			fontWeight: "semibold",
+			justifyContent: "center",
+			lineHeight: "tight",
+			overflow: "clip"
+		},
+		name: {
+			...truncate(),
+			fontWeight: "medium"
+		},
+		root: {
+			...interactive(),
+			alignItems: "center",
+			appearance: "none",
+			borderColor: "transparent",
+			borderWidth: "control",
+			colorPalette: "neutral",
+			display: "flex",
+			minInlineSize: "0"
+		}
+	},
+	className: "switcher",
+	compoundVariants: [{
+		css: { mark: {
+			boxSize: dense("{sizes.icon.lg}"),
+			fontSize: "xs"
+		} },
+		name: "marked",
+		placement: ["alone", "toolbar"]
+	}, (
+	/**
+	* Sets the detail and the indicator in the trigger's own ink on the solid look, where the
+	* page's subtle ink is not read against the fill.
+	*/
+	{
+		css: {
+			detail: { color: "inherit" },
+			indicator: { color: "inherit" }
+		},
+		name: "inked",
+		variant: "solid"
+	})],
+	defaultVariants: {
+		placement: "alone",
+		size: "md",
+		variant: "ghost"
+	},
+	jsx: [/^Switcher(\.\w+)?$/u],
+	slots: [
+		"root",
+		"mark",
+		"label",
+		"name",
+		"detail",
+		"indicator"
+	],
+	variants: {
+		/**
+		* The palette of the look and the mark.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Where the control is placed, which sets its width and its lines.
+		*
+		* @remarks
+		*   `Switcher.Root` reads the placement from the sidebar or the toolbar around it unless a
+		*   caller states one. The `marked` compound sizes the mark to `icon.lg` on one line, because
+		*   the size axis sizes it for a sidebar and a compound applies over an axis.
+		*/
+		placement: {
+			alone: INLINE,
+			sidebar: ROW,
+			toolbar: INLINE
+		},
+		size: onSlots({
+			indicator: sizeVariants((size) => ({ boxSize: dense(`{sizes.icon.${below(size)}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			mark: sizeVariants((size) => ({
+				boxSize: dense(`{sizes.control.${below(below(size))}}`),
+				fontSize: below(size)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			name: sizeVariants((size) => ({ textStyle: `body.${below(size)}` }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			root: sizeVariants((size) => ({
+				textStyle: `body.${below(size)}`,
+				borderRadius: "l2",
+				gap: dense(`{spacing.gap.${size}}`),
+				[HEIGHT]: dense(`{sizes.control.${size}}`),
+				paddingBlock: dense(`{spacing.gap.${below(size)}}`),
+				paddingInline: dense(`{spacing.gap.${size}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			])
+		}),
+		/**
+		* The button's six looks, each one of the theme's layer styles.
+		*
+		* @remarks
+		*   `ghost`, the default, has no fill at rest, so a switcher at the head of a sidebar shows the
+		*   sidebar's own ground and fills under a pointer.
+		*/
+		variant: onSlot("root", lookVariants())
+	}
+});
+//#endregion
+export { PRIORITY as a, NARROW$1 as i, FOLDING as n, FOLDS as r, recipe as t };

package/dist/root-DDwipXru.d.ts

@@ -0,0 +1,327 @@
+import { RecipeProps } from "@stealthscale/theme/authoring";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Menu } from "@stealthscale/component-disclosure";
+//#region src/switcher/choice.d.ts
+/**
+ * Describes one workspace, project or tenant a switcher lists.
+ */
+interface Choice {
+  /**
+   * Plan, role or region, rendered under the name in a sidebar and in the menu's row.
+   */
+  readonly detail?: string | undefined;
+  /**
+   * Whether the reader cannot switch to the choice.
+   */
+  readonly disabled?: boolean | undefined;
+  /**
+   * Address of the choice's own page, which renders its row as a link.
+   */
+  readonly href?: string | undefined;
+  /**
+   * Name of the choice.
+   */
+  readonly label: string;
+  /**
+   * Logo or avatar. The mark shows the name's initials without one.
+   */
+  readonly mark?: ReactNode | undefined;
+  /**
+   * Value the application knows the choice by.
+   */
+  readonly value: string;
+}
+//#endregion
+//#region src/switcher/recipe.d.ts
+/**
+ * Declares the switcher's slot recipe, which styles the control that shows the current workspace,
+ * project or environment and opens the menu of the others.
+ *
+ * @remarks
+ *   The recipe has six slots. The root slot is the trigger, and the mark, the label, the name, the
+ *   detail and the indicator are inside it. `Switcher.Root` is the disclosure package's menu, so
+ *   the menu's recipe styles the panel and its rows. The trigger takes the button's looks and
+ *   palettes from the same layer styles, so an outlined switcher has the button's light edge. The
+ *   mark renders an initial, an icon or an avatar in the palette's ink, without a fill. The name
+ *   and the detail truncate to keep the control at one height. A pair of chevrons marks a control
+ *   that switches and not a direction, so the indicator does not rotate while the menu is open. In
+ *   a sidebar closed to icons, and in a narrow toolbar for a switcher with a mark, the control is
+ *   its mark alone, square. The words remain in the accessible name in both.
+ */
+/**
+ * Styles a ghost switcher at the middle size, alone.
+ */
+declare const recipe: import("@stealthscale/theme/authoring").SlotRecipe<"detail" | "indicator" | "label" | "mark" | "name" | "root", {
+  /**
+   * The palette of the look and the mark.
+   */
+  readonly palette: {
+    accent: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    error: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    info: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    neutral: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    primary: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    secondary: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    success: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    warning: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+  };
+  /**
+   * Where the control is placed, which sets its width and its lines.
+   *
+   * @remarks
+   *   `Switcher.Root` reads the placement from the sidebar or the toolbar around it unless a
+   *   caller states one. The `marked` compound sizes the mark to `icon.lg` on one line, because
+   *   the size axis sizes it for a sidebar and a compound applies over an axis.
+   */
+  readonly placement: {
+    alone: {
+      detail: {
+        display: string;
+      };
+      root: {
+        "&[data-narrow]:has(.switcher__mark)": {
+          aspectRatio: string;
+          inlineSize: string;
+          justifyContent: string;
+          paddingInline: string;
+        };
+        inlineSize: string;
+        minBlockSize: string;
+      };
+    };
+    sidebar: {
+      root: {
+        "&[data-iconic]": {
+          alignSelf: string;
+          aspectRatio: string;
+          borderWidth: string;
+          inlineSize: string;
+          justifyContent: string;
+          padding: string;
+        };
+        inlineSize: string;
+      };
+    };
+    toolbar: {
+      detail: {
+        display: string;
+      };
+      root: {
+        "&[data-narrow]:has(.switcher__mark)": {
+          aspectRatio: string;
+          inlineSize: string;
+          justifyContent: string;
+          paddingInline: string;
+        };
+        inlineSize: string;
+        minBlockSize: string;
+      };
+    };
+  };
+  readonly size: {
+    lg: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
+    md: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
+    sm: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
+  };
+  /**
+   * The button's six looks, each one of the theme's layer styles.
+   *
+   * @remarks
+   *   `ghost`, the default, has no fill at rest, so a switcher at the head of a sidebar shows the
+   *   sidebar's own ground and fills under a pointer.
+   */
+  readonly variant: {
+    ghost: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    outline: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    plain: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    solid: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    subtle: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    surface: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+  };
+}>;
+//#endregion
+//#region src/switcher/sized.d.ts
+/**
+ * Selects one of the sizes the menu renders at, which are the switcher's sizes.
+ */
+type Step = "lg" | "md" | "sm";
+/**
+ * Describes the props of `Sized`: the menu's props and the step.
+ */
+interface SizedProps extends Omit<ComponentProps<typeof Menu.Root>, "size"> {
+  /**
+   * Size the switcher renders at.
+   */
+  readonly step: Step;
+}
+/**
+ * Renders the menu at the step.
+ *
+ * @param props - The step and the menu's props.
+ * @returns The menu at that size.
+ */
+declare function Sized({ step, ...rest }: SizedProps): ReactElement;
+//#endregion
+//#region src/switcher/state.d.ts
+/**
+ * Derives where a switcher renders from the sidebar or the toolbar around it, and provides it to
+ * the switcher's parts.
+ *
+ * @remarks
+ *   A switcher in a sidebar is a row at the sidebar's size, and its mark alone while the sidebar
+ *   is a rail. A switcher in a toolbar is one of the row's controls at the toolbar's size, and a
+ *   switcher with a mark hides its name while the toolbar is narrow. Anywhere else it is one line
+ *   at its own size. A caller's `placement` or `size` applies over the derived one.
+ */
+/**
+ * Selects where a switcher renders.
+ */
+type Placement = "alone" | "sidebar" | "toolbar";
+/**
+ * Selects the size of a switcher.
+ */
+type SwitcherSize = "lg" | "md" | "sm";
+//#endregion
+//#region src/switcher/root.d.ts
+/**
+ * Binds the sized menu as the root that provides the variants.
+ */
+declare const Bound: import("@stealthscale/theme").RootProvider<typeof Sized, {
+  readonly palette: {
+    accent: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    error: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    info: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    neutral: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    primary: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    secondary: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    success: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    warning: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+  };
+  readonly placement: {
+    alone: {
+      detail: {
+        display: string;
+      };
+      root: {
+        "&[data-narrow]:has(.switcher__mark)": {
+          aspectRatio: string;
+          inlineSize: string;
+          justifyContent: string;
+          paddingInline: string;
+        };
+        inlineSize: string;
+        minBlockSize: string;
+      };
+    };
+    sidebar: {
+      root: {
+        "&[data-iconic]": {
+          alignSelf: string;
+          aspectRatio: string;
+          borderWidth: string;
+          inlineSize: string;
+          justifyContent: string;
+          padding: string;
+        };
+        inlineSize: string;
+      };
+    };
+    toolbar: {
+      detail: {
+        display: string;
+      };
+      root: {
+        "&[data-narrow]:has(.switcher__mark)": {
+          aspectRatio: string;
+          inlineSize: string;
+          justifyContent: string;
+          paddingInline: string;
+        };
+        inlineSize: string;
+        minBlockSize: string;
+      };
+    };
+  };
+  readonly size: {
+    lg: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
+    md: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
+    sm: Partial<Record<"indicator" | "mark" | "name" | "root", import("@stealthscale/theme").SystemStyleObject>>;
+  };
+  readonly variant: {
+    ghost: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    outline: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    plain: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    solid: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    subtle: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+    surface: Record<"root", import("@stealthscale/theme").SystemStyleObject>;
+  };
+}>;
+/**
+ * Variant props of the switcher's recipe.
+ */
+type Variants = RecipeProps<typeof recipe>;
+/**
+ * Props of the binding, with the variants typed as the recipe types them.
+ */
+type ProvidedProps = Omit<ComponentProps<typeof Bound>, keyof Variants> & Variants;
+/**
+ * Describes the props of `Root`: the choices and their glyphs, the switcher's variants and the
+ * menu's props.
+ *
+ * @remarks
+ *   The menu's recipe also offers `size` and `variant`. Over the menu's root the two `variant` axes
+ *   intersect to a type no value satisfies, so the switcher's axes replace the menu's here. The
+ *   menu's size is the switcher's `size`, so `step` is omitted.
+ */
+interface RootProps extends Omit<ProvidedProps, "placement" | "size" | "step"> {
+  /**
+   * Glyph that marks the current choice's row in the menu.
+   */
+  readonly checkIcon?: ReactNode | undefined;
+  /**
+   * Value of the choice that is current at first, when the caller does not control it. Defaults to
+   * the first choice.
+   */
+  readonly defaultValue?: string | undefined;
+  /**
+   * Glyph at the end of the trigger.
+   */
+  readonly indicator?: ReactNode | undefined;
+  /**
+   * The choices. With them the root renders the trigger and the menu.
+   */
+  readonly items?: readonly Choice[] | undefined;
+  /**
+   * Kind of thing the switcher switches, which a screen reader announces before the current name.
+   * Used with `items`.
+   */
+  readonly label?: string | undefined;
+  /**
+   * Called with the value of the choice the reader switches to.
+   */
+  readonly onValueChange?: ((value: string) => void) | undefined;
+  /**
+   * Where the switcher renders. Read from the sidebar or the toolbar around it when absent.
+   */
+  readonly placement?: Placement | undefined;
+  /**
+   * Size of the switcher. The sidebar's or the toolbar's size when absent, and `md` alone.
+   */
+  readonly size?: SwitcherSize | undefined;
+  /**
+   * Value of the current choice, when the caller controls it.
+   */
+  readonly value?: string | undefined;
+}
+/**
+ * Renders the menu with the switcher's variants, at the switcher's size.
+ *
+ * @remarks
+ *   A caller's `positioning` applies over the placement's, and a caller's `ids` over the trigger id
+ *   the root shares with the rail's tooltip.
+ * @param props - The choices, the glyphs, the switcher's variants and the menu's props.
+ * @returns The menu, providing the variants and the placement.
+ */
+declare function Root({ checkIcon, children, defaultValue, indicator, items, label, onValueChange, placement, positioning, size, value, ...rest }: RootProps): ReactElement;
+//#endregion
+export { Choice as a, SwitcherSize as i, RootProps as n, Placement as r, Root as t };