@stealthscale/component-screen 0.0.0-stage → 0.2.1

package/dist/rolldown-runtime-D7D4PA-g.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll 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 };