@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/text/EditableText.js

@@ -1,148 +1,166 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { FontFamily } from "../theme/enums.js";
 import Text, { TextSize, TextVariant, TextWeight } from "./Text.js";
-import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
+import { useControlledState } from "../hooks/useControlledState.js";
 /* empty css                       */
-import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/text/EditableText.tsx
-var EditableTextWrapper = /*#__PURE__*/ styled("div")({
-	name: "EditableTextWrapper",
-	class: "et5f6jm",
-	propsAsIs: false
-});
-var _exp2 = () => ({ theme, $variant }) => {
-	return match($variant).with(TextVariant.PRIMARY, () => theme.color.text.primary).with(TextVariant.PRIMARY_ALT, () => theme.color.text.primaryAlt).with(TextVariant.SECONDARY, () => theme.color.text.secondary).with(TextVariant.SECONDARY_ALT, () => theme.color.text.secondaryAlt).with(TextVariant.TERTIARY, () => theme.color.text.tertiary).with(TextVariant.TERTIARY_ALT, () => theme.color.text.tertiaryAlt).with(TextVariant.DISABLED, () => theme.color.text.disabled).with(TextVariant.SUCCESS, () => theme.color.text.success).with(TextVariant.ERROR, () => theme.color.text.error).with(TextVariant.WARNING, () => theme.color.text.warning).with(TextVariant.LIME, () => theme.color.text.lime).with(TextVariant.PURPLE, () => theme.color.text.purple).with(TextVariant.TEAL, () => theme.color.text.teal).with(TextVariant.YELLOW, () => theme.color.text.yellow).with(TextVariant.ORANGE, () => theme.color.text.orange).with(TextVariant.PINK, () => theme.color.text.pink).with(TextVariant.BLUE, () => theme.color.text.blue).exhaustive();
-};
-var _exp3 = () => ({ theme, $isMonospace }) => $isMonospace ? theme.font.mono.family : theme.font.sans.family;
-var _exp4 = () => ({ theme, $size }) => {
-	return match($size).with(TextSize.CAPTION, () => theme.font.sans.size.caption).with(TextSize.BODY_SM, () => theme.font.sans.size.body_sm).with(TextSize.BODY_MD, () => theme.font.sans.size.body_md).with(TextSize.BODY_LG, () => theme.font.sans.size.body_lg).with(TextSize.HEADING_SM, () => theme.font.sans.size.heading_sm).with(TextSize.HEADING_MD, () => theme.font.sans.size.heading_md).with(TextSize.HEADING_LG, () => theme.font.sans.size.heading_lg).exhaustive();
-};
-var _exp5 = () => ({ theme, $weight }) => {
-	return match($weight).with(TextWeight.REGULAR, () => theme.font.sans.weight.regular).with(TextWeight.MEDIUM, () => theme.font.sans.weight.medium).exhaustive();
-};
-var _exp6 = () => ({ theme, $size }) => {
-	return match($size).with(TextSize.CAPTION, () => theme.font.sans.height.caption).with(TextSize.BODY_SM, () => theme.font.sans.height.body_sm).with(TextSize.BODY_MD, () => theme.font.sans.height.body_md).with(TextSize.BODY_LG, () => theme.font.sans.height.body_lg).with(TextSize.HEADING_SM, () => theme.font.sans.height.heading_sm).with(TextSize.HEADING_MD, () => theme.font.sans.height.heading_md).with(TextSize.HEADING_LG, () => theme.font.sans.height.heading_lg).exhaustive();
-};
-var _exp7 = () => ({ theme, $size }) => {
-	return match($size).with(TextSize.CAPTION, () => theme.font.sans.spacing.caption).with(TextSize.BODY_SM, () => theme.font.sans.spacing.body_sm).with(TextSize.BODY_MD, () => theme.font.sans.spacing.body_md).with(TextSize.BODY_LG, () => theme.font.sans.spacing.body_lg).with(TextSize.HEADING_SM, () => theme.font.sans.spacing.heading_sm).with(TextSize.HEADING_MD, () => theme.font.sans.spacing.heading_md).with(TextSize.HEADING_LG, () => theme.font.sans.spacing.heading_lg).exhaustive();
-};
-var _exp8 = () => ({ $align }) => $align ?? "left";
-var EditableTextInput = withTheme(/*#__PURE__*/ styled("input")({
-	name: "EditableTextInput",
-	class: "ekaqvqt",
-	propsAsIs: false,
-	vars: {
-		"ekaqvqt-0": [_exp6()],
-		"ekaqvqt-1": [_exp2()],
-		"ekaqvqt-2": [_exp3()],
-		"ekaqvqt-3": [_exp4()],
-		"ekaqvqt-4": [_exp5()],
-		"ekaqvqt-5": [_exp7()],
-		"ekaqvqt-6": [_exp8()]
-	}
-}));
-var _exp9 = () => ({ theme }) => theme.color.border.tertiary;
-var EditableTextText = withTheme(/*#__PURE__*/ styled("span")({
-	name: "EditableTextText",
-	class: "e1j2x5d3",
-	propsAsIs: false,
-	vars: { "e1j2x5d3-0": [_exp9()] }
-}));
 /**
-* Click-to-edit text. Renders as `Text` until clicked, then swaps to an inline
-* input. Accepts every `TextProps` styling prop on top of its own.
+* Click-to-rename text. It reads as ordinary `Text` until the user clicks it (or presses Enter /
+* Space on it), then becomes an inline text field in the same type: Enter or blur commits, Escape
+* cancels. For renaming one thing in place, one line at a time; a labelled, validated field is
+* `Field` + `TextInput`, multi-line editing is `TextAreaInput`.
 *
-* Holds the draft internally and only calls `onSave` on commit, so it works as
-* an uncontrolled field — `label` is the starting value, not a bound one.
+* The outer `Text as="span"` owns the type metrics (size, line height, letter spacing, family,
+* weight, color) for both modes; the button, its inner `Text`, the hidden sizer and the input
+* inherit them, so switching modes moves nothing. The field is exactly as wide as its text: a
+* hidden sizer holding the draft shares one grid cell with the input (no `field-sizing`). The field
+* is bare: no frame, fill or focus ring, only the caret, so editing looks like typing in place.
 */
-var EditableText = ({ label, onSave, size = TextSize.BODY_MD, variant = TextVariant.PRIMARY, weight = TextWeight.REGULAR, align = "left", isMonospace = false, ...textProps }) => {
-	const [state, setState] = useState(() => ({
-		localLabel: label,
-		editedLabel: label,
-		isEditing: false,
-		isHovered: false
-	}));
-	const handleClick = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		setState((prev) => ({
-			...prev,
-			isHovered: false,
-			isEditing: true
-		}));
-	};
-	const handleMouseEnter = () => {
-		setState((prev) => ({
-			...prev,
-			isHovered: true
-		}));
-	};
-	const handleMouseLeave = () => {
-		setState((prev) => ({
-			...prev,
-			isHovered: false
-		}));
-	};
-	const handleInputFocus = (e) => {
-		e.target.select();
+/** The outer `Text`: an inline box as wide as its content, never wider than its parent. */
+var Root = "gx-EditableText-rt5f6jm";
+var FILL_WIDTH_CSS = "gx-EditableText-FILL_WIDTH_CSS-fkaqvqt";
+var DISPLAY_CSS = "gx-EditableText-DISPLAY_CSS-d1j2x5d3";
+/** A decoration, not a border, so the hover / focus cue adds no height. */
+var BUTTON_CSS = "gx-EditableText-BUTTON_CSS-b12zn331";
+var FIELD_WRAPPER_CSS = "gx-EditableText-FIELD_WRAPPER_CSS-f1y3v9qg";
+/** With `fillWidth`, the button and the field take the whole root, so neither mode changes width. */
+var FILL_CHILD_CSS = "gx-EditableText-FILL_CHILD_CSS-f1hzos16";
+/** Holds the draft so the grid cell, and so the input, is exactly as wide as the text. */
+var SIZER_CSS = "gx-EditableText-SIZER_CSS-sa44p0k";
+/**
+* The field: no frame, fill, focus ring or padding of its own, only the caret (and the selected
+* text on entry), so the text does not move between modes and the edit reads as typing in place.
+*/
+var INPUT_CSS = "gx-EditableText-INPUT_CSS-iogpntu";
+/** Inline text that turns into a same-type field on click and commits on Enter or blur. */
+var EditableText = forwardRef(function EditableText({ value, defaultValue, onChange, ariaLabel, placeholder, size = TextSize.BODY_MD, weight = TextWeight.REGULAR, family = FontFamily.SANS, maxLength, isDisabled = false, fillWidth = false, className, ...rest }, ref) {
+	const [committed, setCommitted] = useControlledState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange
+	});
+	const [isEditing, setIsEditing] = useState(false);
+	const [draft, setDraft] = useState("");
+	const buttonRef = useRef(null);
+	const inputRef = useRef(null);
+	/** True from the moment an edit ends until the next one starts: the input's late blur is ignored. */
+	const hasEndedRef = useRef(true);
+	/** Set by Enter / Escape: focus the button once it is back in the DOM. */
+	const shouldRestoreFocusRef = useRef(false);
+	const isFieldShown = isEditing && !isDisabled;
+	useEffect(() => {
+		if (isDisabled && isEditing) {
+			hasEndedRef.current = true;
+			setIsEditing(false);
+		}
+	}, [isDisabled, isEditing]);
+	useIsomorphicLayoutEffect(() => {
+		if (isFieldShown) inputRef.current?.focus();
+		else if (shouldRestoreFocusRef.current) {
+			shouldRestoreFocusRef.current = false;
+			buttonRef.current?.focus();
+		}
+	}, [isFieldShown]);
+	const startEditing = () => {
+		if (isDisabled) return;
+		hasEndedRef.current = false;
+		setDraft(committed);
+		setIsEditing(true);
 	};
-	const handleChange = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		setState((prev) => ({
-			...prev,
-			editedLabel: e.target.value
-		}));
+	const commit = (shouldRestoreFocus) => {
+		if (hasEndedRef.current) return;
+		hasEndedRef.current = true;
+		shouldRestoreFocusRef.current = shouldRestoreFocus;
+		if (draft !== committed) setCommitted(draft);
+		setIsEditing(false);
 	};
-	const handleSave = () => {
-		setState((prev) => ({
-			...prev,
-			isEditing: false
-		}));
-		onSave(state.editedLabel);
+	const cancel = () => {
+		if (hasEndedRef.current) return;
+		hasEndedRef.current = true;
+		shouldRestoreFocusRef.current = true;
+		setDraft(committed);
+		setIsEditing(false);
 	};
-	const handleKeyDown = (e) => {
-		if (e.key === "Enter") handleSave();
-		else if (e.key === "Escape") setState((prev) => ({
-			...prev,
-			isEditing: false,
-			editedLabel: label
-		}));
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			if (event.nativeEvent.isComposing) return;
+			event.preventDefault();
+			commit(true);
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			event.nativeEvent.stopImmediatePropagation();
+			cancel();
+		}
 	};
-	return /* @__PURE__ */ jsx(EditableTextWrapper, { children: state.isEditing ? /* @__PURE__ */ jsx(EditableTextInput, {
-		value: state.editedLabel,
-		onChange: handleChange,
-		onBlur: handleSave,
-		onFocus: handleInputFocus,
-		onKeyDown: handleKeyDown,
-		maxLength: 128,
-		$size: size,
-		$variant: variant,
-		$weight: weight,
-		$align: align,
-		$isMonospace: isMonospace,
-		autoFocus: true,
-		placeholder: label
-	}) : /* @__PURE__ */ jsx(EditableTextText, {
-		onClick: handleClick,
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		children: /* @__PURE__ */ jsx(FlexWrapper, {
-			alignItems: AlignItems.END,
-			gap: 4,
-			children: /* @__PURE__ */ jsx(Text, {
-				...textProps,
-				size,
-				variant,
-				weight,
-				align,
-				isMonospace,
-				children: state.editedLabel
-			})
+	const shownText = committed || placeholder || "";
+	let content;
+	if (isFieldShown) content = /* @__PURE__ */ jsxs("span", {
+		className: cx(FIELD_WRAPPER_CSS, fillWidth && FILL_CHILD_CSS),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: SIZER_CSS,
+			"aria-hidden": true,
+			children: draft || placeholder || " "
+		}), /* @__PURE__ */ jsx("input", {
+			className: INPUT_CSS,
+			type: "text",
+			size: 1,
+			value: draft,
+			placeholder,
+			maxLength,
+			"aria-label": ariaLabel,
+			ref: inputRef,
+			onFocus: (event) => event.currentTarget.select(),
+			onChange: (event) => setDraft(event.currentTarget.value),
+			onKeyDown: handleKeyDown,
+			onBlur: () => commit(false)
+		})]
+	});
+	else if (isDisabled) content = /* @__PURE__ */ jsx("span", {
+		className: DISPLAY_CSS,
+		children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size,
+			weight,
+			family,
+			variant: TextVariant.INHERIT,
+			lineClamp: 1,
+			shouldTooltipOnOverflow: true,
+			children: shownText
 		})
-	}) });
-};
+	});
+	else content = /* @__PURE__ */ jsx("button", {
+		ref: buttonRef,
+		type: "button",
+		className: cx(DISPLAY_CSS, BUTTON_CSS, fillWidth && FILL_CHILD_CSS),
+		"aria-label": shownText ? `${ariaLabel}: ${shownText}` : ariaLabel,
+		onClick: startEditing,
+		children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size,
+			weight,
+			family,
+			variant: committed ? TextVariant.INHERIT : TextVariant.TERTIARY,
+			lineClamp: 1,
+			shouldTooltipOnOverflow: true,
+			children: shownText
+		})
+	});
+	return /* @__PURE__ */ jsx(Text, {
+		...rest,
+		as: "span",
+		ref,
+		size,
+		weight,
+		family,
+		variant: isDisabled ? TextVariant.DISABLED : TextVariant.PRIMARY,
+		className: cx(Root, fillWidth && FILL_WIDTH_CSS, className),
+		children: content
+	});
+});
+EditableText.displayName = "EditableText";
 //#endregion
 export { EditableText as default };

package/dist/text/Ellipsis.d.ts

@@ -1,12 +1,38 @@
-export interface EllipsisProps {
-    /** Animate the dots. Static when false. */
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Color role of the dots (color set subset, Constitution V-A). */
+export declare enum EllipsisVariant {
+    /** Primary copy, `text.primary`. */
+    PRIMARY = "PRIMARY",
+    /** Supporting copy, `text.secondary`. The default. */
+    SECONDARY = "SECONDARY",
+    /** Hints and metadata, `text.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
+export interface EllipsisProps extends AriaAttributes {
+    /**
+     * Pulse the dots in sequence. Static "..." when false.
+     * @default true
+     */
     isPulse?: boolean;
-    /** Duration of one pulse cycle in seconds. @default 1 */
+    /**
+     * Length of one pulse cycle, in milliseconds.
+     * @default 1200
+     */
     speed?: number;
+    /**
+     * Color role of the dots.
+     * @default EllipsisVariant.SECONDARY
+     */
+    variant?: EllipsisVariant;
+    /** DOM id on the span. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the span. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the span. */
+    className?: string;
+    /** Inline style on the span; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * Three dots that pulse in sequence — the "…thinking" affordance. Renders the
- * literal characters, so it aligns with adjacent text rather than a spinner.
- */
-declare const Ellipsis: ({ isPulse, speed }: EllipsisProps) => import("react").JSX.Element;
+/** Three dots that pulse in sequence: the "…thinking" affordance after a label. */
+declare const Ellipsis: import("react").ForwardRefExoticComponent<EllipsisProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Ellipsis;

package/dist/text/Ellipsis.js

@@ -1,32 +1,64 @@
+import Span, { SpanVariant } from "./Span.js";
 /* empty css                   */
-import { styled } from "@linaria/react";
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/text/Ellipsis.tsx
-var _exp = () => ({ $speed }) => $speed;
-var _exp2 = () => ({ $isPulse }) => $isPulse ? "running" : "paused";
-var StyledEllipsis = /*#__PURE__*/ styled("span")({
-	name: "StyledEllipsis",
-	class: "szfsuud",
-	propsAsIs: false,
-	vars: {
-		"szfsuud-0": [_exp(), "s"],
-		"szfsuud-1": [_exp2()]
-	}
-});
 /**
-* Three dots that pulse in sequence — the "…thinking" affordance. Renders the
-* literal characters, so it aligns with adjacent text rather than a spinner.
+* The animated loading ellipsis: three dots that pulse in sequence after a label ("Generating…").
+* It is a loading affordance, not truncation (truncation is `Text lineClamp`). It renders the literal
+* characters through `Span`, so it inherits the enclosing `Text`'s step, family and line height and
+* sits on its baseline; `variant` sets the color.
+*
+* `speed` is continuous, so it is written as the `--gx-ellipsis-speed` custom property in `style`
+* (the Span `hex` pattern) and read by the pulse block; the second and third dots start a sixth and
+* a third of a cycle late. Under `prefers-reduced-motion` (and a provider's `reducedMotion`) the
+* animation is removed and the dots render as a static, full-color "...". The dots are decorative
+* (`aria-hidden`): the label beside them carries the meaning.
+*/
+/** Color role of the dots (color set subset, Constitution V-A). */
+var EllipsisVariant = /* @__PURE__ */ function(EllipsisVariant) {
+	/** Primary copy, `text.primary`. */
+	EllipsisVariant["PRIMARY"] = "PRIMARY";
+	/** Supporting copy, `text.secondary`. The default. */
+	EllipsisVariant["SECONDARY"] = "SECONDARY";
+	/** Hints and metadata, `text.tertiary`. */
+	EllipsisVariant["TERTIARY"] = "TERTIARY";
+	return EllipsisVariant;
+}({});
+/** Each `EllipsisVariant` is the `SpanVariant` of the same name. */
+var ELLIPSIS_VARIANT_TO_SPAN_VARIANT_MAP = {
+	["PRIMARY"]: SpanVariant.PRIMARY,
+	["SECONDARY"]: SpanVariant.SECONDARY,
+	["TERTIARY"]: SpanVariant.TERTIARY
+};
+/** The three dots never break across lines. */
+var ROOT_CSS = "gx-Ellipsis-ROOT_CSS-rzfsuud";
+/**
+* The 1.x pulse: each dot rests at half opacity and peaks at 40% of the cycle, staggered. The
+* keyframes are global, so the name is `gx-` prefixed.
 */
-var Ellipsis = ({ isPulse = false, speed = 1 }) => {
-	return /* @__PURE__ */ jsxs(StyledEllipsis, {
-		$isPulse: isPulse,
-		$speed: speed,
+var PULSE_CSS = "gx-Ellipsis-PULSE_CSS-p17l0lus";
+/** Three dots that pulse in sequence: the "…thinking" affordance after a label. */
+var Ellipsis = forwardRef(function Ellipsis({ isPulse = true, speed = 1200, variant = "SECONDARY", className, style, ...rest }, ref) {
+	const variables = { "--gx-ellipsis-speed": `${speed}ms` };
+	return /* @__PURE__ */ jsxs(Span, {
+		"aria-hidden": true,
+		...rest,
+		ref,
+		variant: ELLIPSIS_VARIANT_TO_SPAN_VARIANT_MAP[variant],
+		className: cx(ROOT_CSS, isPulse && PULSE_CSS, className),
+		style: {
+			...variables,
+			...style
+		},
 		children: [
-			/* @__PURE__ */ jsx("span", { children: "." }),
-			/* @__PURE__ */ jsx("span", { children: "." }),
-			/* @__PURE__ */ jsx("span", { children: "." })
+			/* @__PURE__ */ jsx(Span, { children: "." }),
+			/* @__PURE__ */ jsx(Span, { children: "." }),
+			/* @__PURE__ */ jsx(Span, { children: "." })
 		]
 	});
-};
+});
+Ellipsis.displayName = "Ellipsis";
 //#endregion
-export { Ellipsis as default };
+export { EllipsisVariant, Ellipsis as default };

package/dist/text/Kbd.d.ts

@@ -0,0 +1,72 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+import { FontFamily } from "../theme/enums.js";
+/** Cap fill: a surface step (Constitution V-A surface set). */
+export declare enum KbdVariant {
+    /** The canvas fill, `background.base`. */
+    BASE = "BASE",
+    /** A panel fill, `background.primary`. */
+    PRIMARY = "PRIMARY",
+    /** A raised fill, `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** The most elevated fill, `background.tertiary`. The default (1.x unset). */
+    TERTIARY = "TERTIARY"
+}
+/** Canonical rungs; the member names the control rung or text step the caps sit with. */
+export declare enum KbdSize {
+    /** 12px caps, caption text; beside a 20px control or `CAPTION` text. */
+    X_SMALL = "X_SMALL",
+    /** 16px caps, caption text; beside a 24px control or `BODY_SM` text. */
+    SMALL = "SMALL",
+    /** 16px caps, `body_sm` text; beside a 32px control or `BODY_MD` text. The default. */
+    MEDIUM = "MEDIUM",
+    /** 20px caps, `body_md` text; beside a 36px control or `BODY_LG` / `HEADING_SM` text. */
+    LARGE = "LARGE",
+    /** 20px caps, `body_md` text; beside a 40px control. */
+    X_LARGE = "X_LARGE"
+}
+export interface KbdProps extends AriaAttributes {
+    /**
+     * Keys in press order, one cap per entry. `useHotkey` grammar tokens (`"mod"`, `"shift"`,
+     * `"enter"`, `"k"`) get platform labels; any other string renders verbatim. An empty array
+     * renders nothing.
+     */
+    hotKeys: string[];
+    /**
+     * Cap fill (surface step). Ignored with `isPlain`.
+     * @default KbdVariant.TERTIARY
+     */
+    variant?: KbdVariant;
+    /**
+     * No fill, no border, and the host's text color (`color: inherit`): for caps on a solid host
+     * such as a `PRIMARY` or `ERROR` Button. `variant` is ignored.
+     * @default false
+     */
+    isPlain?: boolean;
+    /**
+     * Matches the rung of the control the caps sit in, or the text step they sit beside.
+     * @default KbdSize.MEDIUM
+     */
+    size?: KbdSize;
+    /**
+     * Cap type family. `MONO` for code-adjacent contexts.
+     * @default FontFamily.SANS
+     */
+    family?: FontFamily;
+    /**
+     * Disabled look (`text.disabled`, `border.disabled`) for a shortcut inside a disabled host. Kbd
+     * itself is never interactive.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** DOM id on the root `<kbd>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<kbd>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<kbd>`. */
+    className?: string;
+    /** Inline style on the root `<kbd>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A keyboard shortcut as key caps, with platform-aware labels. Display only. */
+declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
+export default Kbd;