@bolt-foundry/gambit 0.8.5 → 0.8.6-rc.1

package/esm/simulator-ui/src/gds/Accordion.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export type AccordionItem = {
+    id: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    headerActions?: React.ReactNode;
+    itemClassName?: string;
+    contentClassName?: string;
+};
+type AccordionProps = {
+    items: Array<AccordionItem>;
+    allowMultiple?: boolean;
+    className?: string;
+};
+export default function Accordion({ items, allowMultiple, className }: AccordionProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

package/esm/simulator-ui/src/gds/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/Accordion.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,EAAE,KAAK,EAAE,aAAqB,EAAE,SAAS,EAAE,EAAE,cAAc,qBAkG5D"}

package/esm/simulator-ui/src/gds/Accordion.js

@@ -0,0 +1,47 @@
+// deno-lint-ignore-file
+import React, { useMemo, useState } from "react";
+import { classNames } from "../utils.js";
+import Icon from "./Icon.js";
+export default function Accordion({ items, allowMultiple = false, className }) {
+    const defaultOpenIds = useMemo(() => new Set(items.filter((item) => item.defaultOpen).map((item) => item.id)), [items]);
+    const [openIds, setOpenIds] = useState(defaultOpenIds);
+    const toggleItem = (id) => {
+        setOpenIds((prev) => {
+            const next = new Set(prev);
+            const isOpen = next.has(id);
+            if (allowMultiple) {
+                if (isOpen) {
+                    next.delete(id);
+                }
+                else {
+                    next.add(id);
+                }
+                return next;
+            }
+            if (isOpen) {
+                next.clear();
+            }
+            else {
+                next.clear();
+                next.add(id);
+            }
+            return next;
+        });
+    };
+    return (React.createElement("div", { className: classNames("gds-accordion", className) }, items.map((item) => {
+        const isOpen = openIds.has(item.id);
+        const contentId = `${item.id}-content`;
+        return (React.createElement("div", { key: item.id, className: classNames("gds-accordion-item", item.itemClassName, isOpen && "open") },
+            React.createElement("div", { className: "gds-accordion-header" },
+                React.createElement("button", { type: "button", className: "gds-accordion-trigger", "aria-expanded": isOpen, "aria-controls": contentId, disabled: item.disabled, onClick: () => toggleItem(item.id) },
+                    React.createElement("span", { className: "gds-accordion-title" }, item.title)),
+                item.headerActions
+                    ? (React.createElement("span", { className: classNames("gds-accordion-actions", item.disabled && "gds-accordion-actions--disabled") }, item.headerActions))
+                    : null,
+                React.createElement("button", { type: "button", className: "gds-accordion-trigger gds-accordion-trigger--icon", "aria-expanded": isOpen, "aria-controls": contentId, disabled: item.disabled, onClick: () => toggleItem(item.id) },
+                    React.createElement("span", { className: "calibrate-run-toggle-icon gds-accordion-chevron" },
+                        React.createElement(Icon, { name: "chevronDown", size: 10 })))),
+            React.createElement("div", { id: contentId, className: classNames("gds-accordion-content", item.contentClassName), hidden: !isOpen },
+                React.createElement("div", { className: "gds-accordion-content-inner" }, item.content))));
+    })));
+}

package/esm/simulator-ui/src/gds/Badge.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type BadgeVariant = "idle" | "running" | "completed" | "error" | "canceled" | "ghost";
+export default function Badge(props: React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: BadgeVariant;
+    title?: string;
+    status?: string;
+    tooltip?: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/esm/simulator-ui/src/gds/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,SAAS,GACT,WAAW,GACX,OAAO,GACP,UAAU,GACV,OAAO,CAAC;AAYZ,MAAM,CAAC,OAAO,UAAU,KAAK,CAC3B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IAC7C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBA6BF"}

package/esm/simulator-ui/src/gds/Badge.js

@@ -0,0 +1,27 @@
+import React from "react";
+import Tooltip from "./Tooltip.js";
+import { classNames } from "../utils.js";
+const STATUS_VARIANT_MAP = {
+    idle: "idle",
+    running: "running",
+    completed: "completed",
+    error: "error",
+    canceled: "canceled",
+    pending: "running",
+    finished: "completed",
+};
+export default function Badge(props) {
+    const { variant, status, tooltip, className, children, ...rest } = props;
+    const statusText = status ??
+        (typeof children === "string" ? children : undefined);
+    const inferredVariant = statusText
+        ? STATUS_VARIANT_MAP[statusText.trim().toLowerCase()]
+        : undefined;
+    const badgeElement = (React.createElement("span", { className: classNames("badge", (variant ?? inferredVariant)
+            ? `badge--${variant ?? inferredVariant}`
+            : undefined, className), ...rest }, children));
+    if (tooltip === undefined || tooltip === null || tooltip === false) {
+        return badgeElement;
+    }
+    return React.createElement(Tooltip, { content: tooltip }, badgeElement);
+}

package/esm/simulator-ui/src/gds/Button.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type ButtonVariant = "primary" | "primary-deemph" | "secondary" | "ghost" | "danger" | "ghost-danger";
+export type ButtonSize = "large" | "medium" | "small";
+type ButtonProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    href?: string;
+    tab?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+export default function Button(props: ButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/esm/simulator-ui/src/gds/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,gBAAgB,GAChB,WAAW,GACX,OAAO,GACP,QAAQ,GACR,cAAc,CAAC;AACnB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,KAAK,WAAW,GACZ;IACA,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,GACC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAC7C,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,qBAwBhD"}

package/esm/simulator-ui/src/gds/Button.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { classNames } from "../utils.js";
+export default function Button(props) {
+    const { variant = "secondary", size = "medium", className, type, href, tab = false, ...rest } = props;
+    const classes = classNames("gds-button", `gds-button--${variant}`, `gds-button--size-${size}`, tab && "gds-button--tab", className);
+    if (href) {
+        return React.createElement("a", { className: classes, href: href, ...rest });
+    }
+    return React.createElement("button", { type: type ?? "button", className: classes, ...rest });
+}

package/esm/simulator-ui/src/gds/Callout.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type CalloutVariant = "muted" | "emphasis" | "danger";
+type CalloutProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: CalloutVariant;
+    title?: React.ReactNode;
+    actions?: React.ReactNode;
+};
+export default function Callout(props: CalloutProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Callout.d.ts.map

package/esm/simulator-ui/src/gds/Callout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/Callout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE7D,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,qBAmClD"}

package/esm/simulator-ui/src/gds/Callout.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { classNames } from "../utils.js";
+export default function Callout(props) {
+    const { variant = "muted", title, actions, className, children, ...rest } = props;
+    const hasStructuredContent = title !== undefined || actions !== undefined;
+    return (React.createElement("div", { className: classNames("callout", `callout--${variant}`, className), ...rest }, hasStructuredContent
+        ? (React.createElement("div", { className: "callout-main" },
+            React.createElement("div", { className: "callout-body" },
+                title !== undefined && (React.createElement("div", { className: "callout-title" }, title)),
+                children !== undefined &&
+                    children !== null &&
+                    React.createElement("div", { className: "callout-message" }, children)),
+            actions !== undefined && actions !== null && (React.createElement("div", { className: "callout-actions" }, actions))))
+        : children));
+}

package/esm/simulator-ui/src/gds/Icon.d.ts

@@ -0,0 +1,37 @@
+import { ChevronDownIcon } from "./icons/ChevronDown.js";
+import { CircleInfoIcon } from "./icons/CircleInfo.js";
+import { CircleSolidChevronDownIcon } from "./icons/CircleSolidChevronDown.js";
+import { ChatIcon } from "./icons/Chat.js";
+import { CloseIcon } from "./icons/Close.js";
+import { CopiedIcon } from "./icons/Copied.js";
+import { CopyIcon } from "./icons/Copy.js";
+import { FlagIcon } from "./icons/Flag.js";
+import { HamburgerMenuIcon } from "./icons/HamburgerMenu.js";
+import { TrashIcon } from "./icons/Trash.js";
+import { ReviewIcon } from "./icons/Review.js";
+import { TimesIcon } from "./icons/Times.js";
+declare const ICONS: {
+    chevronDown: typeof ChevronDownIcon;
+    chat: typeof ChatIcon;
+    close: typeof CloseIcon;
+    flag: typeof FlagIcon;
+    hamburgerMenu: typeof HamburgerMenuIcon;
+    circleSolidChevronDown: typeof CircleSolidChevronDownIcon;
+    copy: typeof CopyIcon;
+    copied: typeof CopiedIcon;
+    circleInfo: typeof CircleInfoIcon;
+    review: typeof ReviewIcon;
+    trash: typeof TrashIcon;
+    times: typeof TimesIcon;
+};
+export type IconName = keyof typeof ICONS;
+type IconProps = {
+    name: IconName;
+    size?: number | string;
+    className?: string;
+    title?: string;
+    style?: React.CSSProperties;
+};
+export default function Icon({ name, size, className, title, style, }: IconProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/esm/simulator-ui/src/gds/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,QAAA,MAAM,KAAK;;;;;;;;;;;;;CAaV,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAE1C,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,IAAY,EACZ,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE,SAAS,+BAgBX"}

package/esm/simulator-ui/src/gds/Icon.js

@@ -0,0 +1,32 @@
+import { ChevronDownIcon } from "./icons/ChevronDown.js";
+import { CircleInfoIcon } from "./icons/CircleInfo.js";
+import { CircleSolidChevronDownIcon } from "./icons/CircleSolidChevronDown.js";
+import { ChatIcon } from "./icons/Chat.js";
+import { CloseIcon } from "./icons/Close.js";
+import { CopiedIcon } from "./icons/Copied.js";
+import { CopyIcon } from "./icons/Copy.js";
+import { FlagIcon } from "./icons/Flag.js";
+import { HamburgerMenuIcon } from "./icons/HamburgerMenu.js";
+import { TrashIcon } from "./icons/Trash.js";
+import { ReviewIcon } from "./icons/Review.js";
+import { TimesIcon } from "./icons/Times.js";
+const ICONS = {
+    chevronDown: ChevronDownIcon,
+    chat: ChatIcon,
+    close: CloseIcon,
+    flag: FlagIcon,
+    hamburgerMenu: HamburgerMenuIcon,
+    circleSolidChevronDown: CircleSolidChevronDownIcon,
+    copy: CopyIcon,
+    copied: CopiedIcon,
+    circleInfo: CircleInfoIcon,
+    review: ReviewIcon,
+    trash: TrashIcon,
+    times: TimesIcon,
+};
+export default function Icon({ name, size = "1em", className, title, style, }) {
+    const Svg = ICONS[name];
+    const ariaHidden = title ? undefined : true;
+    const role = title ? "img" : undefined;
+    return (React.createElement(Svg, { width: size, height: size, className: className, "aria-hidden": ariaHidden, role: role, focusable: "false", title: title, style: style }));
+}

package/esm/simulator-ui/src/gds/List.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export default function List(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+//# sourceMappingURL=List.d.ts.map

package/esm/simulator-ui/src/gds/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,OAAO,UAAU,IAAI,CAC1B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,qBAQ5C"}

package/esm/simulator-ui/src/gds/List.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { classNames } from "../utils.js";
+export default function List(props) {
+    const { className, children, ...rest } = props;
+    return (React.createElement("div", { className: classNames("gds-list", className), ...rest }, children));
+}

package/esm/simulator-ui/src/gds/ListItem.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export default function ListItem(props: React.HTMLAttributes<HTMLDivElement> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=ListItem.d.ts.map

package/esm/simulator-ui/src/gds/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,OAAO,UAAU,QAAQ,CAC9B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,qBAkBF"}

package/esm/simulator-ui/src/gds/ListItem.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { classNames } from "../utils.js";
+export default function ListItem(props) {
+    const { className, title, description, meta, children, ...rest } = props;
+    return (React.createElement("div", { className: classNames("gds-list-item", className), ...rest },
+        title && (React.createElement("div", { className: "gds-list-item-header" },
+            React.createElement("div", { className: "gds-list-item-title" }, title))),
+        description && (React.createElement("div", { className: "gds-list-item-description" }, description)),
+        meta && React.createElement("div", { className: "gds-list-item-meta" }, meta),
+        children));
+}

package/esm/simulator-ui/src/gds/Listbox.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+export type ListboxOption = {
+    kind?: "option";
+    value: string;
+    label: string;
+    triggerLabel?: string;
+    triggerMeta?: string | null;
+    meta?: string | null;
+    disabled?: boolean;
+} | {
+    kind: "header";
+    label: string;
+} | {
+    kind: "separator";
+};
+export type ListboxProps = {
+    value?: string | null;
+    options: Array<ListboxOption>;
+    placeholder?: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    label?: string;
+    labelClassName?: string;
+    id?: string;
+    popoverMatchTriggerWidth?: boolean;
+    popoverMinWidth?: number;
+    popoverAlign?: "left" | "right";
+    size?: "default" | "small";
+};
+export default function Listbox(props: ListboxProps): React.JSX.Element;
+//# sourceMappingURL=Listbox.d.ts.map

package/esm/simulator-ui/src/gds/Listbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/Listbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAQN,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,GAAG;IACF,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,qBAyOlD"}

package/esm/simulator-ui/src/gds/Listbox.js

@@ -0,0 +1,151 @@
+// deno-lint-ignore-file
+import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import Icon from "./Icon.js";
+import ScrollingText from "./ScrollingText.js";
+export default function Listbox(props) {
+    const { value, options, placeholder = "Select", disabled = false, onChange, label, labelClassName, id, popoverMatchTriggerWidth = true, popoverMinWidth, popoverAlign = "left", size = "default", } = props;
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const [popoverStyle, setPopoverStyle] = useState(null);
+    const autoId = useId();
+    const controlId = id ?? `listbox-${autoId}`;
+    const labelId = `${controlId}-label`;
+    const labelClasses = labelClassName
+        ? `gds-listbox-field-label ${labelClassName}`
+        : "gds-listbox-field-label";
+    const selected = useMemo(() => {
+        for (const option of options) {
+            if (option.kind === "header" || option.kind === "separator")
+                continue;
+            if (option.value === value)
+                return option;
+        }
+        return null;
+    }, [options, value]);
+    const selectedTriggerMeta = useMemo(() => {
+        if (!selected)
+            return null;
+        if ("triggerMeta" in selected)
+            return selected.triggerMeta ?? null;
+        return selected.meta ?? null;
+    }, [selected]);
+    const updatePopover = useCallback(() => {
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const offset = 6;
+        const viewportPadding = 8;
+        const popoverHeight = popoverRef.current?.offsetHeight ?? 0;
+        const style = {
+            position: "fixed",
+            top: rect.bottom + offset,
+        };
+        if (popoverHeight > 0 &&
+            rect.bottom + offset + popoverHeight >
+                globalThis.innerHeight - viewportPadding) {
+            style.top = Math.max(viewportPadding, rect.top - offset - popoverHeight);
+        }
+        if (popoverMatchTriggerWidth) {
+            style.width = rect.width;
+        }
+        else if (typeof popoverMinWidth === "number" && Number.isFinite(popoverMinWidth)) {
+            style.minWidth = popoverMinWidth;
+        }
+        if (popoverAlign === "right") {
+            style.left = popoverMatchTriggerWidth
+                ? rect.right - rect.width
+                : rect.right;
+            if (!popoverMatchTriggerWidth) {
+                style.transform = "translateX(-100%)";
+            }
+        }
+        else {
+            style.left = rect.left;
+        }
+        setPopoverStyle((prev) => {
+            if (prev?.top === style.top &&
+                prev?.left === style.left &&
+                prev?.width === style.width &&
+                prev?.minWidth === style.minWidth &&
+                prev?.transform === style.transform) {
+                return prev;
+            }
+            return style;
+        });
+    }, [popoverAlign, popoverMatchTriggerWidth, popoverMinWidth]);
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        updatePopover();
+    }, [open, updatePopover]);
+    useLayoutEffect(() => {
+        if (!open || !popoverStyle || !popoverRef.current)
+            return;
+        updatePopover();
+    }, [open, popoverStyle, updatePopover]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleOutside = (event) => {
+            const target = event.target;
+            const isInRoot = rootRef.current &&
+                target &&
+                rootRef.current.contains(target);
+            const isInPopover = popoverRef.current &&
+                target &&
+                popoverRef.current.contains(target);
+            if (!isInRoot && !isInPopover) {
+                setOpen(false);
+            }
+        };
+        const handleKey = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                setOpen(false);
+            }
+        };
+        const handleReposition = () => updatePopover();
+        document.addEventListener("mousedown", handleOutside);
+        document.addEventListener("keydown", handleKey);
+        globalThis.addEventListener("resize", handleReposition);
+        globalThis.addEventListener("scroll", handleReposition, true);
+        return () => {
+            document.removeEventListener("mousedown", handleOutside);
+            document.removeEventListener("keydown", handleKey);
+            globalThis.removeEventListener("resize", handleReposition);
+            globalThis.removeEventListener("scroll", handleReposition, true);
+        };
+    }, [open, updatePopover]);
+    const rootClassName = size === "small"
+        ? "gds-listbox gds-listbox--size-small"
+        : "gds-listbox";
+    return (React.createElement("div", { className: rootClassName, ref: rootRef },
+        label && (React.createElement("label", { className: labelClasses, htmlFor: controlId, id: labelId }, label)),
+        React.createElement("button", { id: controlId, type: "button", className: "gds-listbox-trigger", onClick: () => setOpen((prev) => !prev), "aria-haspopup": "listbox", "aria-labelledby": label ? labelId : undefined, "aria-expanded": open, disabled: disabled, ref: triggerRef },
+            React.createElement(ScrollingText, { text: selected?.triggerLabel ?? selected?.label ?? placeholder, className: "gds-listbox-label" }),
+            selectedTriggerMeta && (React.createElement(ScrollingText, { text: selectedTriggerMeta, className: "gds-listbox-meta" })),
+            React.createElement("span", { className: "gds-listbox-caret", "aria-hidden": "true" },
+                React.createElement(Icon, { name: "chevronDown", size: 8 }))),
+        open && popoverStyle &&
+            createPortal(React.createElement("div", { className: "gds-listbox-popover", role: "listbox", style: popoverStyle, ref: popoverRef }, options.map((option, index) => {
+                if (option.kind === "separator") {
+                    return (React.createElement("div", { key: `separator-${index}`, className: "gds-listbox-separator", role: "separator" }));
+                }
+                if (option.kind === "header") {
+                    return (React.createElement("div", { key: `header-${index}`, className: "gds-listbox-header" }, option.label));
+                }
+                const isSelected = option.value === value;
+                return (React.createElement("button", { key: option.value, type: "button", role: "option", "aria-selected": isSelected, className: "gds-listbox-option", disabled: option.disabled, onClick: () => {
+                        if (option.disabled)
+                            return;
+                        setOpen(false);
+                        onChange(option.value);
+                    } },
+                    React.createElement(ScrollingText, { text: option.label, className: "gds-listbox-option-label" }),
+                    option.meta && (React.createElement(ScrollingText, { text: option.meta, className: "gds-listbox-option-meta" }))));
+            })), document.body)));
+}

package/esm/simulator-ui/src/gds/PageGrid.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type PageGridProps<T extends React.ElementType = "div"> = {
+    as?: T;
+    className?: string;
+    columns?: string;
+    children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className" | "children">;
+export default function PageGrid<T extends React.ElementType = "div">(props: PageGridProps<T>): React.JSX.Element;
+export {};
+//# sourceMappingURL=PageGrid.d.ts.map

package/esm/simulator-ui/src/gds/PageGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageGrid.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/PageGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI;IACxD,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC;AAE7E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAClE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,qBAaxB"}

package/esm/simulator-ui/src/gds/PageGrid.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { classNames } from "../utils.js";
+export default function PageGrid(props) {
+    const { as, className, columns, children, ...rest } = props;
+    const Component = (as ?? "div");
+    return (React.createElement(Component, { className: classNames("page-grid", className), style: columns ? { gridTemplateColumns: columns } : undefined, ...rest }, children));
+}

package/esm/simulator-ui/src/gds/PageShell.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export default function PageShell(props: {
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=PageShell.d.ts.map

package/esm/simulator-ui/src/gds/PageShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageShell.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/PageShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAGA"}

package/esm/simulator-ui/src/gds/PageShell.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { classNames } from "../utils.js";
+export default function PageShell(props) {
+    const { className, children } = props;
+    return React.createElement("div", { className: classNames("app-shell", className) }, children);
+}

package/esm/simulator-ui/src/gds/Panel.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const Panel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType;
+} & React.RefAttributes<HTMLElement>>;
+export default Panel;
+//# sourceMappingURL=Panel.d.ts.map

package/esm/simulator-ui/src/gds/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/Panel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,QAAA,MAAM,KAAK;SAHJ,KAAK,CAAC,WAAW;qCAUtB,CAAC;AAIH,eAAe,KAAK,CAAC"}

package/esm/simulator-ui/src/gds/Panel.js

@@ -0,0 +1,9 @@
+// deno-lint-ignore-file
+import React, { forwardRef } from "react";
+import { classNames } from "../utils.js";
+const Panel = forwardRef((props, ref) => {
+    const { as: Component = "div", className, children, ...rest } = props;
+    return (React.createElement(Component, { className: classNames("panel", className), ref: ref, ...rest }, children));
+});
+Panel.displayName = "Panel";
+export default Panel;

package/esm/simulator-ui/src/gds/ScrollingText.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type ScrollingTextProps = React.HTMLAttributes<HTMLSpanElement> & {
+    text: string;
+    as?: "span" | "div";
+    speed?: number;
+};
+export default function ScrollingText(props: ScrollingTextProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ScrollingText.d.ts.map

package/esm/simulator-ui/src/gds/ScrollingText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollingText.d.ts","sourceRoot":"","sources":["../../../../src/simulator-ui/src/gds/ScrollingText.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAgF9D"}

package/esm/simulator-ui/src/gds/ScrollingText.js

@@ -0,0 +1,60 @@
+// deno-lint-ignore-file
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { classNames } from "../utils.js";
+export default function ScrollingText(props) {
+    const { text, as, className, speed = 40, style, title, ...rest } = props;
+    const containerRef = useRef(null);
+    const innerRef = useRef(null);
+    const [scrollDistance, setScrollDistance] = useState(0);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const measure = useCallback(() => {
+        const container = containerRef.current;
+        const inner = innerRef.current;
+        if (!container || !inner)
+            return;
+        const distance = Math.max(inner.scrollWidth - container.clientWidth, 0);
+        setScrollDistance(distance);
+        setIsOverflowing(distance > 1);
+    }, []);
+    useLayoutEffect(() => {
+        measure();
+    }, [measure, text]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        if (typeof ResizeObserver !== "undefined") {
+            const observer = new ResizeObserver(() => measure());
+            observer.observe(container);
+            return () => observer.disconnect();
+        }
+        const handleResize = () => measure();
+        globalThis.addEventListener("resize", handleResize);
+        return () => globalThis.removeEventListener("resize", handleResize);
+    }, [measure]);
+    const safeSpeed = speed > 0 ? speed : 40;
+    const duration = scrollDistance > 0 ? scrollDistance / safeSpeed : 0;
+    const Tag = (as ?? "span");
+    const mergedStyle = {
+        ...style,
+        "--gds-scroll-distance": `${scrollDistance}px`,
+        "--gds-scroll-duration": `${duration}s`,
+    };
+    const resolvedTitle = title ?? (isOverflowing ? text : undefined);
+    const sharedProps = {
+        className: classNames("gds-scrolling-text", isOverflowing && "gds-scrolling-text--overflow", className),
+        style: mergedStyle,
+        title: resolvedTitle,
+        ...rest,
+    };
+    if (Tag === "div") {
+        return (React.createElement("div", { ref: (node) => {
+                containerRef.current = node;
+            }, ...sharedProps },
+            React.createElement("span", { className: "gds-scrolling-text__inner", ref: innerRef }, text)));
+    }
+    return (React.createElement("span", { ref: (node) => {
+            containerRef.current = node;
+        }, ...sharedProps },
+        React.createElement("span", { className: "gds-scrolling-text__inner", ref: innerRef }, text)));
+}