@langchain/macaw-components 1.0.0-beta.0

package/dist/components/Typeahead/TypeaheadView.js

@@ -0,0 +1,228 @@
+import { cn } from "../../utils/cn.js";
+import { CONTROL_SIZES } from "../../utils/componentSizes.js";
+import { Text } from "../Text/Text.js";
+import { CaretDownIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { Icon } from "../Icon/Icon.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../Popover/Popover.js";
+import { Command as Command$1, CommandEmpty, CommandItem, CommandList } from "../Command/Command.js";
+import { CONTROL_ICON_SIZES } from "../../utils/controlIconSizes.js";
+import { isTypeaheadOption } from "./Typeahead.utils.js";
+import { TypeaheadClearButton, TypeaheadCreateOption, TypeaheadDefaultOption, TypeaheadDefaultTag } from "./TypeaheadParts.js";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
+import { Command } from "cmdk";
+//#region packages/components/src/components/Typeahead/TypeaheadView.tsx
+var CONTROL_RADIUS_CLASSES = {
+	xs: "rounded-xs",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-md"
+};
+var MULTIPLE_INPUT_HEIGHT_CLASSES = {
+	xs: "h-4",
+	sm: "h-5",
+	md: "h-6",
+	lg: "h-6"
+};
+var INPUT_TEXT_CLASSES = {
+	xs: "text-xxs leading-[1.15]",
+	sm: "text-xs leading-normal",
+	md: "text-sm leading-normal",
+	lg: "text-sm leading-normal"
+};
+function TypeaheadView({ root, state, ids, input, selection, list, createOption, popoverContentRef }) {
+	const controlRef = useRef(null);
+	const preventInputDismiss = (event) => {
+		if (open && event.target instanceof HTMLInputElement && event.target.getAttribute("role") === "combobox" && controlRef.current?.contains(event.target)) event.preventDefault();
+	};
+	const { ref: rootRef, handleBlur, dataTestId, className } = root;
+	const { size, disabled, isError, multiple, open, setOpen } = state;
+	const { commandLabel, resolvedInputId, listId, selectedSummaryId, inputAriaLabel } = ids;
+	const { value: inputValue, onValueChange: handleInputValueChange, onKeyDown: handleKeyDown, placeholder, leftDecorator, showPlaceholderWithValues, autoFocus, autoComplete, setNode: setInputNode, focus: focusInput } = input;
+	const { selectedValues, selectedKeys, getTagProps, renderTags, getLabel, getValue, showClearButton, clearValue, forcePopupIcon, selectedSummary } = selection;
+	const { ref: listRef, items, emptyText, emptyState, listFooter, hideEmptyList, optionIsDisabled, selectValue, renderOption } = list;
+	const hasValue = selectedValues.length > 0;
+	const visibleItems = open ? items : [];
+	const visibleShowCreateOption = open && createOption.show;
+	const showEmptyState = open && visibleItems.length === 0 && !visibleShowCreateOption && (emptyState != null || !hideEmptyList);
+	const controlHeightClass = multiple ? CONTROL_SIZES[size].minHeightClassName : CONTROL_SIZES[size].heightClassName;
+	const controlPaddingClass = size === "xs" || size === "sm" ? "px-space-2" : "px-space-3";
+	const renderedTags = multiple && (renderTags ? renderTags(selectedValues, getTagProps) : selectedValues.map((selected, index) => {
+		const tagProps = getTagProps({ index });
+		return /* @__PURE__ */ jsx(TypeaheadDefaultTag, {
+			selected,
+			index,
+			disabled,
+			size,
+			getLabel,
+			getValue,
+			onRemove: tagProps.onDelete
+		}, `${getValue(selected)}-${index}`);
+	}));
+	const inputField = /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-space-2", multiple ? "min-w-0 flex-1" : "flex-1", !multiple && (size === "xs" ? "min-w-12" : "min-w-16")),
+		children: [leftDecorator != null ? /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 shrink items-center text-icon-tertiary",
+			children: leftDecorator
+		}) : !multiple && !hasValue ? /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": true,
+			icon: MagnifyingGlassIcon,
+			iconClassName: CONTROL_ICON_SIZES[size].iconClassName,
+			className: "text-icon-tertiary",
+			weight: "regular"
+		}) : null, /* @__PURE__ */ jsx(Command.Input, {
+			ref: setInputNode,
+			id: resolvedInputId,
+			value: inputValue,
+			onValueChange: handleInputValueChange,
+			onFocus: () => {
+				if (!disabled) setOpen(true);
+			},
+			onKeyDown: handleKeyDown,
+			placeholder: hasValue && multiple && !showPlaceholderWithValues ? void 0 : placeholder,
+			disabled,
+			autoFocus,
+			autoComplete,
+			role: "combobox",
+			"aria-expanded": open,
+			"aria-controls": listId,
+			"aria-autocomplete": "list",
+			"aria-haspopup": "listbox",
+			"aria-invalid": isError || void 0,
+			"aria-describedby": multiple ? selectedSummaryId : void 0,
+			"aria-label": inputAriaLabel,
+			className: cn("min-w-0 max-w-full border-none bg-transparent p-0 outline-none placeholder:text-placeholder", INPUT_TEXT_CLASSES[size], disabled && "cursor-not-allowed", multiple ? cn(MULTIPLE_INPUT_HEIGHT_CLASSES[size], "w-full") : "h-full w-full flex-1")
+		})]
+	});
+	const actionControls = /* @__PURE__ */ jsxs("div", {
+		className: cn("flex shrink-0 items-center gap-space-1 text-icon-tertiary", multiple ? "self-center" : "ml-auto"),
+		style: { marginInlineEnd: showClearButton && !forcePopupIcon ? CONTROL_ICON_SIZES[size].actionOffset : void 0 },
+		children: [showClearButton && /* @__PURE__ */ jsx(TypeaheadClearButton, {
+			size,
+			label: multiple ? "Clear selections" : "Clear selection",
+			onClick: (event) => {
+				event.stopPropagation();
+				clearValue();
+			}
+		}), forcePopupIcon && /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": true,
+			icon: CaretDownIcon,
+			iconClassName: CONTROL_ICON_SIZES[size].iconClassName,
+			className: cn("text-icon-tertiary transition-transform", open && "rotate-180"),
+			weight: "regular"
+		})]
+	});
+	return /* @__PURE__ */ jsx(Command$1, {
+		ref: rootRef,
+		shouldFilter: false,
+		label: commandLabel,
+		className: "overflow-visible bg-transparent",
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [
+				/* @__PURE__ */ jsx(PopoverAnchor, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("div", {
+						ref: controlRef,
+						...root.props,
+						"data-testid": dataTestId,
+						onBlur: handleBlur,
+						className: cn("w-full cursor-text border border-default bg-elevated text-primary transition-colors", multiple ? "flex flex-wrap items-center gap-space-1" : "flex items-center gap-space-1 overflow-hidden", "focus-within:border-focus focus-within:bg-elevated hover:bg-elevated-hover", controlHeightClass, multiple && {
+							"px-space-1 py-0": size === "xs",
+							"px-space-1 py-px": size === "sm",
+							"px-space-2 py-0.5": size === "md",
+							"px-space-3 py-space-1": size === "lg"
+						}, !multiple && controlPaddingClass, CONTROL_RADIUS_CLASSES[size], isError && "border-error focus-within:border-error", disabled && "cursor-not-allowed border-disabled bg-disabled text-disabled opacity-70", className),
+						onClick: (event) => {
+							root.props.onClick?.(event);
+							if (!disabled) {
+								focusInput();
+								setOpen(true);
+							}
+						},
+						children: multiple ? /* @__PURE__ */ jsxs(Fragment$1, { children: [renderedTags, /* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-16 flex-1 items-center gap-space-1",
+							children: [inputField, actionControls]
+						})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [inputField, actionControls] })
+					})
+				}),
+				multiple && /* @__PURE__ */ jsx("span", {
+					id: selectedSummaryId,
+					className: "sr-only",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: selectedSummary
+				}),
+				/* @__PURE__ */ jsx(PopoverContent, {
+					ref: popoverContentRef,
+					hidden: !open,
+					className: cn("w-[var(--radix-popover-trigger-width)] min-w-48 max-w-[calc(100vw-1rem)] bg-elevated p-space-1 text-primary", !open && "hidden"),
+					align: "start",
+					sideOffset: 4,
+					forceMount: true,
+					onOpenAutoFocus: (event) => event.preventDefault(),
+					onCloseAutoFocus: (event) => event.preventDefault(),
+					onFocusOutside: preventInputDismiss,
+					onInteractOutside: preventInputDismiss,
+					children: /* @__PURE__ */ jsxs(CommandList, {
+						ref: listRef,
+						id: listId,
+						"aria-label": `${commandLabel} options`,
+						"aria-multiselectable": multiple ? true : void 0,
+						className: "max-h-[18.75rem]",
+						children: [
+							showEmptyState && /* @__PURE__ */ jsx(CommandEmpty, { children: emptyState ?? /* @__PURE__ */ jsx(Text, {
+								variant: "sm",
+								color: "secondary",
+								children: emptyText
+							}) }),
+							visibleItems.map((item) => {
+								const { option } = item;
+								const optionKey = getValue(option);
+								const optionLabel = getLabel(option);
+								const selected = selectedKeys.has(optionKey);
+								const optionDisabled = optionIsDisabled(item);
+								const optionState = {
+									selected,
+									disabled: optionDisabled,
+									inputValue
+								};
+								return /* @__PURE__ */ jsx(CommandItem, {
+									value: optionKey,
+									disabled: optionDisabled,
+									keywords: isTypeaheadOption(option) ? [optionLabel, ...option.keywords ?? []] : [optionLabel],
+									onSelect: () => selectValue(option),
+									"aria-checked": multiple ? selected : void 0,
+									className: cn("flex items-center gap-space-2 rounded-sm px-space-2 py-space-2 text-sm text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2", optionDisabled && "text-disabled"),
+									children: renderOption && item.source === "option" ? renderOption(option, optionState) : /* @__PURE__ */ jsx(TypeaheadDefaultOption, {
+										option,
+										state: optionState,
+										getLabel
+									})
+								}, optionKey);
+							}),
+							visibleShowCreateOption && /* @__PURE__ */ jsx(CommandItem, {
+								value: `__typeahead_create__${createOption.inputValue}`,
+								keywords: [createOption.inputValue],
+								onSelect: createOption.onCreate,
+								"aria-label": createOption.inputValue ? `Add ${createOption.inputValue}` : "Add new",
+								className: "flex items-center gap-space-2 rounded-sm p-space-2 text-sm text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2",
+								children: /* @__PURE__ */ jsx(TypeaheadCreateOption, {
+									inputValue: createOption.inputValue,
+									label: createOption.label
+								})
+							}),
+							listFooter
+						]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { TypeaheadView };
+
+//# sourceMappingURL=TypeaheadView.js.map

package/dist/components/Typeahead/TypeaheadView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeaheadView.js","names":[],"sources":["../../../src/components/Typeahead/TypeaheadView.tsx"],"sourcesContent":["/* eslint-disable max-lines -- Keep the control, tag layout, and popover rendering together in this view. */\nimport type {\n  FocusEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n} from 'react';\nimport { useRef } from 'react';\n\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';\n\nimport { CaretDownIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { CONTROL_SIZES } from '../../utils/componentSizes';\nimport { CONTROL_ICON_SIZES } from '../../utils/controlIconSizes';\nimport { Command, CommandEmpty, CommandItem, CommandList } from '../Command';\nimport { Icon } from '../Icon';\nimport { Popover, PopoverAnchor, PopoverContent } from '../Popover';\nimport { Text } from '../Text';\nimport type {\n  TypeaheadListItem,\n  TypeaheadMultipleValue,\n  TypeaheadRenderOptionState,\n  TypeaheadSelectedValue,\n  TypeaheadSize,\n  TypeaheadTagProps,\n} from './Typeahead.types';\nimport { isTypeaheadOption } from './Typeahead.utils';\nimport {\n  TypeaheadClearButton,\n  TypeaheadCreateOption,\n  TypeaheadDefaultOption,\n  TypeaheadDefaultTag,\n} from './TypeaheadParts';\n\ninterface TypeaheadViewRootProps {\n  ref: Ref<HTMLDivElement>;\n  props: HTMLAttributes<HTMLDivElement>;\n  handleBlur: (event: FocusEvent<HTMLDivElement>) => void;\n  dataTestId?: string;\n  className?: string;\n}\n\ninterface TypeaheadViewState {\n  size: TypeaheadSize;\n  disabled: boolean;\n  isError: boolean;\n  multiple?: boolean;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\ninterface TypeaheadViewIds {\n  commandLabel: string;\n  resolvedInputId: string;\n  listId: string;\n  selectedSummaryId: string;\n  inputAriaLabel?: string;\n}\n\ninterface TypeaheadViewInputProps {\n  value: string;\n  onValueChange: (value: string) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n  placeholder: string;\n  leftDecorator?: ReactNode;\n  showPlaceholderWithValues: boolean;\n  autoFocus?: boolean;\n  autoComplete?: string;\n  setNode: (node: HTMLInputElement | null) => void;\n  focus: () => void;\n}\n\ninterface TypeaheadViewSelectionProps<TOption> {\n  selectedValues: TypeaheadMultipleValue<TOption>;\n  selectedKeys: Set<string>;\n  getTagProps: (params: { index: number }) => TypeaheadTagProps;\n  renderTags?: (\n    value: TypeaheadMultipleValue<TOption>,\n    getTagProps: (params: { index: number }) => TypeaheadTagProps\n  ) => ReactNode;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  getValue: (option: TypeaheadSelectedValue<TOption>) => string;\n  showClearButton: boolean;\n  clearValue: () => void;\n  forcePopupIcon: boolean;\n  selectedSummary?: string;\n}\n\ninterface TypeaheadViewListProps<TOption> {\n  ref: Ref<HTMLDivElement>;\n  items: TypeaheadListItem<TOption>[];\n  emptyText: string;\n  emptyState?: ReactNode;\n  listFooter?: ReactNode;\n  hideEmptyList: boolean;\n  optionIsDisabled: (item: TypeaheadListItem<TOption>) => boolean;\n  selectValue: (selected: TypeaheadSelectedValue<TOption>) => void;\n  renderOption?: (\n    option: TOption,\n    state: TypeaheadRenderOptionState\n  ) => ReactNode;\n}\n\ninterface TypeaheadViewCreateOptionProps {\n  show: boolean;\n  inputValue: string;\n  label?: ReactNode;\n  onCreate: () => void;\n}\n\ninterface TypeaheadViewProps<TOption> {\n  root: TypeaheadViewRootProps;\n  state: TypeaheadViewState;\n  ids: TypeaheadViewIds;\n  input: TypeaheadViewInputProps;\n  selection: TypeaheadViewSelectionProps<TOption>;\n  list: TypeaheadViewListProps<TOption>;\n  createOption: TypeaheadViewCreateOptionProps;\n  popoverContentRef: Ref<HTMLDivElement>;\n}\n\nconst CONTROL_RADIUS_CLASSES = {\n  xs: 'rounded-xs',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-md',\n} as const satisfies Record<TypeaheadSize, string>;\n\nconst MULTIPLE_INPUT_HEIGHT_CLASSES = {\n  xs: 'h-4',\n  sm: 'h-5',\n  md: 'h-6',\n  lg: 'h-6',\n} as const satisfies Record<TypeaheadSize, string>;\n\nconst INPUT_TEXT_CLASSES = {\n  xs: 'text-xxs leading-[1.15]',\n  sm: 'text-xs leading-normal',\n  md: 'text-sm leading-normal',\n  lg: 'text-sm leading-normal',\n} as const satisfies Record<TypeaheadSize, string>;\n\nexport function TypeaheadView<TOption>({\n  root,\n  state,\n  ids,\n  input,\n  selection,\n  list,\n  createOption,\n  popoverContentRef,\n}: TypeaheadViewProps<TOption>) {\n  const controlRef = useRef<HTMLDivElement | null>(null);\n  const preventInputDismiss = (event: Event) => {\n    if (\n      open &&\n      event.target instanceof HTMLInputElement &&\n      event.target.getAttribute('role') === 'combobox' &&\n      controlRef.current?.contains(event.target)\n    ) {\n      event.preventDefault();\n    }\n  };\n  const { ref: rootRef, handleBlur, dataTestId, className } = root;\n  const { size, disabled, isError, multiple, open, setOpen } = state;\n  const {\n    commandLabel,\n    resolvedInputId,\n    listId,\n    selectedSummaryId,\n    inputAriaLabel,\n  } = ids;\n  const {\n    value: inputValue,\n    onValueChange: handleInputValueChange,\n    onKeyDown: handleKeyDown,\n    placeholder,\n    leftDecorator,\n    showPlaceholderWithValues,\n    autoFocus,\n    autoComplete,\n    setNode: setInputNode,\n    focus: focusInput,\n  } = input;\n  const {\n    selectedValues,\n    selectedKeys,\n    getTagProps,\n    renderTags,\n    getLabel,\n    getValue,\n    showClearButton,\n    clearValue,\n    forcePopupIcon,\n    selectedSummary,\n  } = selection;\n  const {\n    ref: listRef,\n    items,\n    emptyText,\n    emptyState,\n    listFooter,\n    hideEmptyList,\n    optionIsDisabled,\n    selectValue,\n    renderOption,\n  } = list;\n  const hasValue = selectedValues.length > 0;\n  const visibleItems = open ? items : [];\n  const visibleShowCreateOption = open && createOption.show;\n  const showEmptyState =\n    open &&\n    visibleItems.length === 0 &&\n    !visibleShowCreateOption &&\n    (emptyState != null || !hideEmptyList);\n  const controlHeightClass = multiple\n    ? CONTROL_SIZES[size].minHeightClassName\n    : CONTROL_SIZES[size].heightClassName;\n  const controlPaddingClass =\n    size === 'xs' || size === 'sm' ? 'px-space-2' : 'px-space-3';\n  const renderedTags =\n    multiple &&\n    (renderTags\n      ? renderTags(selectedValues, getTagProps)\n      : selectedValues.map((selected, index) => {\n          const tagProps = getTagProps({ index });\n          return (\n            <TypeaheadDefaultTag\n              key={`${getValue(selected)}-${index}`}\n              selected={selected}\n              index={index}\n              disabled={disabled}\n              size={size}\n              getLabel={getLabel}\n              getValue={getValue}\n              onRemove={tagProps.onDelete}\n            />\n          );\n        }));\n  const inputField = (\n    <div\n      className={cn(\n        'flex items-center gap-space-2',\n        multiple ? 'min-w-0 flex-1' : 'flex-1',\n        !multiple && (size === 'xs' ? 'min-w-12' : 'min-w-16')\n      )}\n    >\n      {leftDecorator != null ? (\n        <div className=\"flex min-w-0 shrink items-center text-icon-tertiary\">\n          {leftDecorator}\n        </div>\n      ) : !multiple && !hasValue ? (\n        <Icon\n          aria-hidden\n          icon={MagnifyingGlassIcon}\n          iconClassName={CONTROL_ICON_SIZES[size].iconClassName}\n          className=\"text-icon-tertiary\"\n          weight=\"regular\"\n        />\n      ) : null}\n      {/*\n        cmdk rewrites some of these combobox attributes as the query changes, so\n        useTypeaheadDomSync re-asserts them imperatively. Keep the two attribute\n        sets in sync when editing either here or in that hook.\n      */}\n      <CommandPrimitive.Input\n        ref={setInputNode}\n        id={resolvedInputId}\n        value={inputValue}\n        onValueChange={handleInputValueChange}\n        onFocus={() => {\n          if (!disabled) {\n            setOpen(true);\n          }\n        }}\n        onKeyDown={handleKeyDown}\n        placeholder={\n          hasValue && multiple && !showPlaceholderWithValues\n            ? undefined\n            : placeholder\n        }\n        disabled={disabled}\n        autoFocus={autoFocus}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-invalid={isError || undefined}\n        aria-describedby={multiple ? selectedSummaryId : undefined}\n        aria-label={inputAriaLabel}\n        className={cn(\n          'min-w-0 max-w-full border-none bg-transparent p-0 outline-none placeholder:text-placeholder',\n          INPUT_TEXT_CLASSES[size],\n          disabled && 'cursor-not-allowed',\n          multiple\n            ? cn(MULTIPLE_INPUT_HEIGHT_CLASSES[size], 'w-full')\n            : 'h-full w-full flex-1'\n        )}\n      />\n    </div>\n  );\n  const actionControls = (\n    <div\n      className={cn(\n        'flex shrink-0 items-center gap-space-1 text-icon-tertiary',\n        multiple ? 'self-center' : 'ml-auto'\n      )}\n      style={{\n        marginInlineEnd:\n          showClearButton && !forcePopupIcon\n            ? CONTROL_ICON_SIZES[size].actionOffset\n            : undefined,\n      }}\n    >\n      {showClearButton && (\n        <TypeaheadClearButton\n          size={size}\n          label={multiple ? 'Clear selections' : 'Clear selection'}\n          onClick={(event) => {\n            event.stopPropagation();\n            clearValue();\n          }}\n        />\n      )}\n      {forcePopupIcon && (\n        <Icon\n          aria-hidden\n          icon={CaretDownIcon}\n          iconClassName={CONTROL_ICON_SIZES[size].iconClassName}\n          className={cn(\n            'text-icon-tertiary transition-transform',\n            open && 'rotate-180'\n          )}\n          weight=\"regular\"\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <Command\n      ref={rootRef}\n      shouldFilter={false}\n      label={commandLabel}\n      className=\"overflow-visible bg-transparent\"\n    >\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverAnchor asChild>\n          <div\n            ref={controlRef}\n            {...root.props}\n            data-testid={dataTestId}\n            onBlur={handleBlur}\n            className={cn(\n              'w-full cursor-text border border-default bg-elevated text-primary transition-colors',\n              multiple\n                ? 'flex flex-wrap items-center gap-space-1'\n                : 'flex items-center gap-space-1 overflow-hidden',\n              'focus-within:border-focus focus-within:bg-elevated hover:bg-elevated-hover',\n              controlHeightClass,\n              multiple && {\n                'px-space-1 py-0': size === 'xs',\n                'px-space-1 py-px': size === 'sm',\n                'px-space-2 py-0.5': size === 'md',\n                'px-space-3 py-space-1': size === 'lg',\n              },\n              !multiple && controlPaddingClass,\n              CONTROL_RADIUS_CLASSES[size],\n              isError && 'border-error focus-within:border-error',\n              disabled &&\n                'cursor-not-allowed border-disabled bg-disabled text-disabled opacity-70',\n              className\n            )}\n            onClick={(event) => {\n              root.props.onClick?.(event);\n              if (!disabled) {\n                focusInput();\n                setOpen(true);\n              }\n            }}\n          >\n            {multiple ? (\n              <>\n                {renderedTags}\n                <div className=\"flex min-w-16 flex-1 items-center gap-space-1\">\n                  {inputField}\n                  {actionControls}\n                </div>\n              </>\n            ) : (\n              <>\n                {inputField}\n                {actionControls}\n              </>\n            )}\n          </div>\n        </PopoverAnchor>\n\n        {multiple && (\n          <span\n            id={selectedSummaryId}\n            className=\"sr-only\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            {selectedSummary}\n          </span>\n        )}\n\n        <PopoverContent\n          ref={popoverContentRef}\n          hidden={!open}\n          className={cn(\n            'w-[var(--radix-popover-trigger-width)] min-w-48 max-w-[calc(100vw-1rem)] bg-elevated p-space-1 text-primary',\n            !open && 'hidden'\n          )}\n          align=\"start\"\n          sideOffset={4}\n          forceMount\n          onOpenAutoFocus={(event) => event.preventDefault()}\n          onCloseAutoFocus={(event) => event.preventDefault()}\n          onFocusOutside={preventInputDismiss}\n          onInteractOutside={preventInputDismiss}\n        >\n          <CommandList\n            ref={listRef}\n            id={listId}\n            aria-label={`${commandLabel} options`}\n            aria-multiselectable={multiple ? true : undefined}\n            className=\"max-h-[18.75rem]\"\n          >\n            {showEmptyState && (\n              <CommandEmpty>\n                {emptyState ?? (\n                  <Text variant=\"sm\" color=\"secondary\">\n                    {emptyText}\n                  </Text>\n                )}\n              </CommandEmpty>\n            )}\n\n            {visibleItems.map((item) => {\n              const { option } = item;\n              const optionKey = getValue(option);\n              const optionLabel = getLabel(option);\n              const selected = selectedKeys.has(optionKey);\n              const optionDisabled = optionIsDisabled(item);\n              const optionState = {\n                selected,\n                disabled: optionDisabled,\n                inputValue,\n              };\n\n              return (\n                <CommandItem\n                  key={optionKey}\n                  value={optionKey}\n                  disabled={optionDisabled}\n                  keywords={\n                    isTypeaheadOption(option)\n                      ? [optionLabel, ...(option.keywords ?? [])]\n                      : [optionLabel]\n                  }\n                  onSelect={() => selectValue(option)}\n                  aria-checked={multiple ? selected : undefined}\n                  className={cn(\n                    'flex items-center gap-space-2 rounded-sm px-space-2 py-space-2 text-sm text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2',\n                    optionDisabled && 'text-disabled'\n                  )}\n                >\n                  {renderOption && item.source === 'option' ? (\n                    renderOption(option as TOption, optionState)\n                  ) : (\n                    <TypeaheadDefaultOption\n                      option={option}\n                      state={optionState}\n                      getLabel={getLabel}\n                    />\n                  )}\n                </CommandItem>\n              );\n            })}\n\n            {visibleShowCreateOption && (\n              <CommandItem\n                value={`__typeahead_create__${createOption.inputValue}`}\n                keywords={[createOption.inputValue]}\n                onSelect={createOption.onCreate}\n                aria-label={\n                  createOption.inputValue\n                    ? `Add ${createOption.inputValue}`\n                    : 'Add new'\n                }\n                className=\"flex items-center gap-space-2 rounded-sm p-space-2 text-sm text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2\"\n              >\n                <TypeaheadCreateOption\n                  inputValue={createOption.inputValue}\n                  label={createOption.label}\n                />\n              </CommandItem>\n            )}\n\n            {listFooter}\n          </CommandList>\n        </PopoverContent>\n      </Popover>\n    </Command>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Typeahead/index.d.ts

@@ -0,0 +1,2 @@
+export { Typeahead } from './Typeahead.js';
+export type { TypeaheadFilterOptionsState, TypeaheadOption, TypeaheadProps, TypeaheadRenderOptionState, TypeaheadSize, TypeaheadTagProps, } from './Typeahead.types.js';

package/dist/components/Typeahead/index.js

@@ -0,0 +1,2 @@
+import { Typeahead } from "./Typeahead.js";
+export { Typeahead };

package/dist/components/Typeahead/useTypeaheadDomSync.d.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from 'react';
+export declare function useTypeaheadDomSync({ autoComplete, commandLabel, inputAriaLabel, inputRef, inputValue, isError, listId, listRef, multiple, open, resolvedInputId, selectedSummaryId, }: {
+    autoComplete?: string;
+    commandLabel: string;
+    inputAriaLabel?: string;
+    inputRef: RefObject<HTMLInputElement | null>;
+    inputValue: string;
+    isError: boolean;
+    listId: string;
+    listRef: RefObject<HTMLDivElement | null>;
+    multiple?: boolean;
+    open: boolean;
+    resolvedInputId: string;
+    selectedSummaryId: string;
+}): void;

package/dist/components/Typeahead/useTypeaheadDomSync.js

@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+//#region packages/components/src/components/Typeahead/useTypeaheadDomSync.ts
+function useTypeaheadDomSync({ autoComplete, commandLabel, inputAriaLabel, inputRef, inputValue, isError, listId, listRef, multiple, open, resolvedInputId, selectedSummaryId }) {
+	useEffect(() => {
+		const input = inputRef.current;
+		const list = listRef.current;
+		input?.setAttribute("id", resolvedInputId);
+		input?.setAttribute("aria-controls", listId);
+		input?.setAttribute("aria-expanded", String(open));
+		input?.setAttribute("aria-haspopup", "listbox");
+		input?.setAttribute("autocomplete", autoComplete ?? "off");
+		if (inputAriaLabel) input?.setAttribute("aria-label", inputAriaLabel);
+		else {
+			input?.removeAttribute("aria-label");
+			input?.removeAttribute("aria-labelledby");
+		}
+		if (isError) input?.setAttribute("aria-invalid", "true");
+		else input?.removeAttribute("aria-invalid");
+		if (multiple) input?.setAttribute("aria-describedby", selectedSummaryId);
+		else input?.removeAttribute("aria-describedby");
+		list?.setAttribute("id", listId);
+		list?.setAttribute("aria-label", `${commandLabel} options`);
+		if (multiple) list?.setAttribute("aria-multiselectable", "true");
+		else list?.removeAttribute("aria-multiselectable");
+	}, [
+		autoComplete,
+		commandLabel,
+		inputAriaLabel,
+		inputRef,
+		inputValue,
+		isError,
+		listId,
+		listRef,
+		multiple,
+		open,
+		resolvedInputId,
+		selectedSummaryId
+	]);
+}
+//#endregion
+export { useTypeaheadDomSync };
+
+//# sourceMappingURL=useTypeaheadDomSync.js.map

package/dist/components/Typeahead/useTypeaheadDomSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTypeaheadDomSync.js","names":[],"sources":["../../../src/components/Typeahead/useTypeaheadDomSync.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nexport function useTypeaheadDomSync({\n  autoComplete,\n  commandLabel,\n  inputAriaLabel,\n  inputRef,\n  inputValue,\n  isError,\n  listId,\n  listRef,\n  multiple,\n  open,\n  resolvedInputId,\n  selectedSummaryId,\n}: {\n  autoComplete?: string;\n  commandLabel: string;\n  inputAriaLabel?: string;\n  inputRef: RefObject<HTMLInputElement | null>;\n  inputValue: string;\n  isError: boolean;\n  listId: string;\n  listRef: RefObject<HTMLDivElement | null>;\n  multiple?: boolean;\n  open: boolean;\n  resolvedInputId: string;\n  selectedSummaryId: string;\n}) {\n  useEffect(() => {\n    // cmdk owns these DOM nodes and may rewrite combobox attributes as input changes.\n    const input = inputRef.current;\n    const list = listRef.current;\n\n    input?.setAttribute('id', resolvedInputId);\n    input?.setAttribute('aria-controls', listId);\n    input?.setAttribute('aria-expanded', String(open));\n    input?.setAttribute('aria-haspopup', 'listbox');\n    input?.setAttribute('autocomplete', autoComplete ?? 'off');\n    if (inputAriaLabel) {\n      input?.setAttribute('aria-label', inputAriaLabel);\n    } else {\n      input?.removeAttribute('aria-label');\n      input?.removeAttribute('aria-labelledby');\n    }\n    if (isError) {\n      input?.setAttribute('aria-invalid', 'true');\n    } else {\n      input?.removeAttribute('aria-invalid');\n    }\n    if (multiple) {\n      input?.setAttribute('aria-describedby', selectedSummaryId);\n    } else {\n      input?.removeAttribute('aria-describedby');\n    }\n\n    list?.setAttribute('id', listId);\n    list?.setAttribute('aria-label', `${commandLabel} options`);\n    if (multiple) {\n      list?.setAttribute('aria-multiselectable', 'true');\n    } else {\n      list?.removeAttribute('aria-multiselectable');\n    }\n  }, [\n    autoComplete,\n    commandLabel,\n    inputAriaLabel,\n    inputRef,\n    inputValue,\n    isError,\n    listId,\n    listRef,\n    multiple,\n    open,\n    resolvedInputId,\n    selectedSummaryId,\n  ]);\n}\n"],"mappings":";;AAGA,SAAgB,oBAAoB,EAClC,cACA,cACA,gBACA,UACA,YACA,SACA,QACA,SACA,UACA,MACA,iBACA,qBAcC;CACD,gBAAgB;EAEd,MAAM,QAAQ,SAAS;EACvB,MAAM,OAAO,QAAQ;EAErB,OAAO,aAAa,MAAM,eAAe;EACzC,OAAO,aAAa,iBAAiB,MAAM;EAC3C,OAAO,aAAa,iBAAiB,OAAO,IAAI,CAAC;EACjD,OAAO,aAAa,iBAAiB,SAAS;EAC9C,OAAO,aAAa,gBAAgB,gBAAgB,KAAK;EACzD,IAAI,gBACF,OAAO,aAAa,cAAc,cAAc;OAC3C;GACL,OAAO,gBAAgB,YAAY;GACnC,OAAO,gBAAgB,iBAAiB;EAC1C;EACA,IAAI,SACF,OAAO,aAAa,gBAAgB,MAAM;OAE1C,OAAO,gBAAgB,cAAc;EAEvC,IAAI,UACF,OAAO,aAAa,oBAAoB,iBAAiB;OAEzD,OAAO,gBAAgB,kBAAkB;EAG3C,MAAM,aAAa,MAAM,MAAM;EAC/B,MAAM,aAAa,cAAc,GAAG,aAAa,SAAS;EAC1D,IAAI,UACF,MAAM,aAAa,wBAAwB,MAAM;OAEjD,MAAM,gBAAgB,sBAAsB;CAEhD,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}

package/dist/components/Typeahead/useTypeaheadUncontrolledInput.d.ts

@@ -0,0 +1,11 @@
+import type { TypeaheadMultipleValue, TypeaheadSelectedValue, TypeaheadSingleValue } from './Typeahead.types.js';
+export declare function useTypeaheadUncontrolledInput<TOption>({ clearOnBlur, controlledInputValue, freeSolo, getLabel, multiple, open, setUncontrolledInputValue, value, }: {
+    clearOnBlur?: boolean;
+    controlledInputValue?: string;
+    freeSolo: boolean;
+    getLabel: (option: TypeaheadSelectedValue<TOption>) => string;
+    multiple?: boolean;
+    open: boolean;
+    setUncontrolledInputValue: (value: string) => void;
+    value: TypeaheadSingleValue<TOption> | TypeaheadMultipleValue<TOption>;
+}): void;

package/dist/components/Typeahead/useTypeaheadUncontrolledInput.js

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+//#region packages/components/src/components/Typeahead/useTypeaheadUncontrolledInput.ts
+function useTypeaheadUncontrolledInput({ clearOnBlur, controlledInputValue, freeSolo, getLabel, multiple, open, setUncontrolledInputValue, value }) {
+	const singleValue = Array.isArray(value) ? null : value;
+	useEffect(() => {
+		if (controlledInputValue !== void 0 || multiple) return;
+		setUncontrolledInputValue(singleValue == null ? "" : getLabel(singleValue));
+	}, [
+		controlledInputValue,
+		getLabel,
+		multiple,
+		setUncontrolledInputValue,
+		singleValue
+	]);
+	useEffect(() => {
+		if (open || controlledInputValue !== void 0) return;
+		if (clearOnBlur ?? !freeSolo) setUncontrolledInputValue(multiple || singleValue == null ? "" : getLabel(singleValue));
+	}, [
+		clearOnBlur,
+		controlledInputValue,
+		freeSolo,
+		getLabel,
+		multiple,
+		open,
+		setUncontrolledInputValue,
+		singleValue
+	]);
+}
+//#endregion
+export { useTypeaheadUncontrolledInput };
+
+//# sourceMappingURL=useTypeaheadUncontrolledInput.js.map

package/dist/components/Typeahead/useTypeaheadUncontrolledInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTypeaheadUncontrolledInput.js","names":[],"sources":["../../../src/components/Typeahead/useTypeaheadUncontrolledInput.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport type {\n  TypeaheadMultipleValue,\n  TypeaheadSelectedValue,\n  TypeaheadSingleValue,\n} from './Typeahead.types';\n\nexport function useTypeaheadUncontrolledInput<TOption>({\n  clearOnBlur,\n  controlledInputValue,\n  freeSolo,\n  getLabel,\n  multiple,\n  open,\n  setUncontrolledInputValue,\n  value,\n}: {\n  clearOnBlur?: boolean;\n  controlledInputValue?: string;\n  freeSolo: boolean;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  multiple?: boolean;\n  open: boolean;\n  setUncontrolledInputValue: (value: string) => void;\n  value: TypeaheadSingleValue<TOption> | TypeaheadMultipleValue<TOption>;\n}) {\n  const singleValue: TypeaheadSingleValue<TOption> = Array.isArray(value)\n    ? null\n    : value;\n\n  useEffect(() => {\n    if (controlledInputValue !== undefined || multiple) return;\n    setUncontrolledInputValue(singleValue == null ? '' : getLabel(singleValue));\n  }, [\n    controlledInputValue,\n    getLabel,\n    multiple,\n    setUncontrolledInputValue,\n    singleValue,\n  ]);\n\n  useEffect(() => {\n    if (open || controlledInputValue !== undefined) return;\n    if (clearOnBlur ?? !freeSolo) {\n      setUncontrolledInputValue(\n        multiple || singleValue == null ? '' : getLabel(singleValue)\n      );\n    }\n  }, [\n    clearOnBlur,\n    controlledInputValue,\n    freeSolo,\n    getLabel,\n    multiple,\n    open,\n    setUncontrolledInputValue,\n    singleValue,\n  ]);\n}\n"],"mappings":";;AAQA,SAAgB,8BAAuC,EACrD,aACA,sBACA,UACA,UACA,UACA,MACA,2BACA,SAUC;CACD,MAAM,cAA6C,MAAM,QAAQ,KAAK,IAClE,OACA;CAEJ,gBAAgB;EACd,IAAI,yBAAyB,KAAA,KAAa,UAAU;EACpD,0BAA0B,eAAe,OAAO,KAAK,SAAS,WAAW,CAAC;CAC5E,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,QAAQ,yBAAyB,KAAA,GAAW;EAChD,IAAI,eAAe,CAAC,UAClB,0BACE,YAAY,eAAe,OAAO,KAAK,SAAS,WAAW,CAC7D;CAEJ,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}

package/dist/components/UnsavedChangesDialog.d.ts

@@ -0,0 +1,14 @@
+import type { FC, ReactNode } from 'react';
+type TProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm?: () => Promise<void> | void;
+    onDiscard?: () => void;
+    title: string;
+    description: string;
+    saveCopy?: string | ReactNode;
+    discardCopy?: string;
+    disabledSaveTooltip?: string;
+};
+declare const UnsavedChangesDialog: FC<TProps>;
+export default UnsavedChangesDialog;

package/dist/components/UnsavedChangesDialog.js

@@ -0,0 +1,67 @@
+import { Text } from "./Text/Text.js";
+import { Tooltip } from "./Tooltip/Tooltip.js";
+import { Button } from "./Button/Button.js";
+import { Dialog, DialogContent } from "./Dialog/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FloppyDiskIcon } from "@phosphor-icons/react/dist/ssr/FloppyDisk";
+import { WarningCircleIcon } from "@phosphor-icons/react/dist/ssr/WarningCircle";
+//#region packages/components/src/components/UnsavedChangesDialog.tsx
+var UnsavedChangesDialog = ({ isOpen, onClose, onConfirm, onDiscard, title, description, saveCopy = "Save", discardCopy = "Discard", disabledSaveTooltip }) => {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: (open) => !open && onClose(),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "w-96 flex-col rounded-lg bg-background shadow-xl",
+			onEscapeKeyDown: (e) => {
+				e.preventDefault();
+				onClose();
+			},
+			title,
+			titleIcon: onConfirm ? FloppyDiskIcon : WarningCircleIcon,
+			titleIconIntent: onConfirm ? "info" : "warning",
+			showClose: false,
+			children: [/* @__PURE__ */ jsx(Text, {
+				variant: "sm",
+				color: "secondary",
+				children: description
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full flex-row justify-end gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						"data-testid": "save-confirmation-modal-cancel-button",
+						size: "sm",
+						color: "secondary",
+						onClick: onClose,
+						children: "Cancel"
+					}),
+					onDiscard && /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						"data-testid": "save-confirmation-modal-discard-button",
+						color: "error",
+						variant: "outlined",
+						onClick: onDiscard,
+						children: discardCopy
+					}),
+					onConfirm && /* @__PURE__ */ jsx(Tooltip, {
+						title: disabledSaveTooltip,
+						children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							"data-testid": "save-confirmation-modal-save-button",
+							color: "primary",
+							disabled: !!disabledSaveTooltip,
+							onClick: async () => {
+								await onConfirm();
+								onClose();
+							},
+							children: saveCopy
+						}) })
+					})
+				]
+			})]
+		})
+	});
+};
+//#endregion
+export { UnsavedChangesDialog as default };
+
+//# sourceMappingURL=UnsavedChangesDialog.js.map

package/dist/components/UnsavedChangesDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnsavedChangesDialog.js","names":[],"sources":["../../src/components/UnsavedChangesDialog.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\nimport { FloppyDiskIcon } from '@phosphor-icons/react/dist/ssr/FloppyDisk';\nimport { WarningCircleIcon } from '@phosphor-icons/react/dist/ssr/WarningCircle';\n\nimport { Button } from './Button';\nimport { Dialog, DialogContent } from './Dialog';\nimport { Text } from './Text';\nimport { Tooltip } from './Tooltip';\n\ntype TProps = {\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm?: () => Promise<void> | void;\n  onDiscard?: () => void;\n  title: string;\n  description: string;\n  saveCopy?: string | ReactNode;\n  discardCopy?: string;\n  disabledSaveTooltip?: string;\n};\n\nconst UnsavedChangesDialog: FC<TProps> = ({\n  isOpen,\n  onClose,\n  onConfirm,\n  onDiscard,\n  title,\n  description,\n  saveCopy = 'Save',\n  discardCopy = 'Discard',\n  disabledSaveTooltip,\n}) => {\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n      <DialogContent\n        className=\"w-96 flex-col rounded-lg bg-background shadow-xl\"\n        onEscapeKeyDown={(e) => {\n          e.preventDefault();\n          onClose();\n        }}\n        title={title}\n        titleIcon={onConfirm ? FloppyDiskIcon : WarningCircleIcon}\n        titleIconIntent={onConfirm ? 'info' : 'warning'}\n        showClose={false}\n      >\n        <Text variant=\"sm\" color=\"secondary\">\n          {description}\n        </Text>\n        <div className=\"flex w-full flex-row justify-end gap-2\">\n          <Button\n            data-testid=\"save-confirmation-modal-cancel-button\"\n            size=\"sm\"\n            color=\"secondary\"\n            onClick={onClose}\n          >\n            Cancel\n          </Button>\n          {onDiscard && (\n            <Button\n              size=\"sm\"\n              data-testid=\"save-confirmation-modal-discard-button\"\n              color=\"error\"\n              variant=\"outlined\"\n              onClick={onDiscard}\n            >\n              {discardCopy}\n            </Button>\n          )}\n\n          {onConfirm && (\n            <Tooltip title={disabledSaveTooltip}>\n              <div>\n                <Button\n                  size=\"sm\"\n                  data-testid=\"save-confirmation-modal-save-button\"\n                  color=\"primary\"\n                  disabled={!!disabledSaveTooltip}\n                  onClick={async () => {\n                    await onConfirm();\n                    onClose();\n                  }}\n                >\n                  {saveCopy}\n                </Button>\n              </div>\n            </Tooltip>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default UnsavedChangesDialog;\n"],"mappings":";;;;;;;;AAsBA,IAAM,wBAAoC,EACxC,QACA,SACA,WACA,WACA,OACA,aACA,WAAW,QACX,cAAc,WACd,0BACI;CACJ,OACE,oBAAC,QAAD;EAAQ,MAAM;EAAQ,eAAe,SAAS,CAAC,QAAQ,QAAQ;EAC7D,UAAA,qBAAC,eAAD;GACE,WAAU;GACV,kBAAkB,MAAM;IACtB,EAAE,eAAe;IACjB,QAAQ;GACV;GACO;GACP,WAAW,YAAY,iBAAiB;GACxC,iBAAiB,YAAY,SAAS;GACtC,WAAW;GATb,UAAA,CAWE,oBAAC,MAAD;IAAM,SAAQ;IAAK,OAAM;IACtB,UAAA;GACG,CAAA,GACN,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MACE,eAAY;MACZ,MAAK;MACL,OAAM;MACN,SAAS;MACV,UAAA;KAEO,CAAA;KACP,aACC,oBAAC,QAAD;MACE,MAAK;MACL,eAAY;MACZ,OAAM;MACN,SAAQ;MACR,SAAS;MAER,UAAA;KACK,CAAA;KAGT,aACC,oBAAC,SAAD;MAAS,OAAO;MACd,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD;OACE,MAAK;OACL,eAAY;OACZ,OAAM;OACN,UAAU,CAAC,CAAC;OACZ,SAAS,YAAY;QACnB,MAAM,UAAU;QAChB,QAAQ;OACV;OAEC,UAAA;MACK,CAAA,EACL,CAAA;KACE,CAAA;IAER;GACQ,CAAA,CAAA;;CACT,CAAA;AAEZ"}

package/dist/components/index.d.ts

@@ -0,0 +1,58 @@
+export { Button } from './Button/index.js';
+export type { ButtonProps } from './Button/index.js';
+export { ButtonGroup } from './ButtonGroup/index.js';
+export type { ButtonGroupProps } from './ButtonGroup/index.js';
+export { Card } from './Card/index.js';
+export type { CardIntent, CardProps } from './Card/index.js';
+export { Divider } from './Divider/index.js';
+export type { DividerProps } from './Divider/index.js';
+export { EmptyState } from './EmptyState/index.js';
+export type { EmptyStateProps, EmptyStateSize, EmptyStateVariant, } from './EmptyState/index.js';
+export { Avatar } from './Avatar/index.js';
+export type { AvatarProps } from './Avatar/index.js';
+export { ErrorState } from './ErrorState/index.js';
+export type { ErrorStateProps } from './ErrorState/index.js';
+export { Badge } from './Badge/index.js';
+export type { BadgeProps } from './Badge/index.js';
+export { Banner } from './Banner/Banner.js';
+export type { BannerProps } from './Banner/Banner.js';
+export { Checkbox, getCheckedState } from './Checkbox/index.js';
+export type { CheckboxProps } from './Checkbox/index.js';
+export { ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow, } from './ChartTooltip/index.js';
+export type { ChartTooltipBodyProps, ChartTooltipHeaderProps, ChartTooltipProps, ChartTooltipRowProps, } from './ChartTooltip/index.js';
+export { RadioButton } from './RadioButton/index.js';
+export type { RadioButtonProps } from './RadioButton/index.js';
+export { RadioCard } from './RadioCard/RadioCard.js';
+export type { RadioCardProps } from './RadioCard/RadioCard.js';
+export { RadioGroup, RadioGroupItem } from './RadioGroup/index.js';
+export type { RadioGroupProps, RadioGroupItemProps } from './RadioGroup/index.js';
+export { Icon } from './Icon/index.js';
+export type { IconComponent, IconProps } from './Icon/index.js';
+export { IconButton } from './IconButton/index.js';
+export type { IconButtonProps } from './IconButton/index.js';
+export { Kbd, KbdGroup } from './Kbd/index.js';
+export type { KbdProps, KbdGroupProps } from './Kbd/index.js';
+export { Input } from './Input/index.js';
+export type { InputIconAction, InputProps } from './Input/index.js';
+export { Textarea } from './Textarea/index.js';
+export type { TextareaProps } from './Textarea/index.js';
+export { Link } from './Link/index.js';
+export type { LinkProps } from './Link/index.js';
+export { Text } from './Text/index.js';
+export type { TextProps } from './Text/index.js';
+export { Tooltip, TooltipProvider } from './Tooltip/index.js';
+export type { TooltipProps } from './Tooltip/index.js';
+export { GroupedTabs } from './GroupedTabs/GroupedTabs.js';
+export type { GroupedTabOption, GroupedTabsProps, } from './GroupedTabs/GroupedTabs.js';
+export { Spinner, SpinnerIcon } from './Spinner/index.js';
+export { Skeleton, SkeletonRows, CircleSkeleton } from './Skeleton/index.js';
+export { LinearProgress } from './LinearProgress/index.js';
+export type { LinearProgressProps } from './LinearProgress/index.js';
+export { formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime, MetricChart, } from './MetricChart/index.js';
+export type { MetricChartProps, MetricChartSize, MetricCurrencyFormatOptions, MetricDateTimeFormatOptions, MetricDurationFormatOptions, MetricDurationUnit, MetricNumberFormatOptions, } from './MetricChart/index.js';
+export { ProgressBar } from './ProgressBar/index.js';
+export type { ProgressBarColor, ProgressBarLabelPosition, ProgressBarProps, ProgressBarSize, } from './ProgressBar/index.js';
+export { Slider } from './Slider/index.js';
+export type { SliderProps, SliderStepLabel } from './Slider/index.js';
+export { Switch } from './Switch/index.js';
+export type { SwitchProps } from './Switch/index.js';

package/dist/components/index.js

@@ -0,0 +1,35 @@
+import { Text } from "./Text/Text.js";
+import { Tooltip } from "./Tooltip/Tooltip.js";
+import { TooltipProvider } from "./Tooltip/index.js";
+import { Avatar } from "./Avatar/Avatar.js";
+import { Badge } from "./Badge/Badge.js";
+import { Icon } from "./Icon/Icon.js";
+import { Spinner, SpinnerIcon } from "./Spinner/Spinner.js";
+import { IconButton } from "./IconButton/IconButton.js";
+import { Banner } from "./Banner/Banner.js";
+import { Button } from "./Button/Button.js";
+import { ButtonGroup } from "./ButtonGroup/ButtonGroup.js";
+import { Card } from "./Card/Card.js";
+import { Link } from "./Link/Link.js";
+import { EmptyState } from "./EmptyState/EmptyState.js";
+import { CircleSkeleton, Skeleton, SkeletonRows } from "./Skeleton/Skeleton.js";
+import { ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow } from "./ChartTooltip/ChartTooltip.js";
+import { Checkbox } from "./Checkbox/Checkbox.js";
+import { getCheckedState } from "./Checkbox/getCheckedState.js";
+import { Divider } from "./Divider/Divider.js";
+import { t as ErrorState } from "../_chunks/ErrorState-CmPX01HV.js";
+import { GroupedTabs } from "./GroupedTabs/GroupedTabs.js";
+import { Input } from "./Input/Input.js";
+import { Kbd, KbdGroup } from "./Kbd/Kbd.js";
+import { LinearProgress } from "./LinearProgress/LinearProgress.js";
+import { MetricChart } from "./MetricChart/MetricChart.js";
+import { formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime } from "./MetricChart/formatters.js";
+import { ProgressBar } from "./ProgressBar/ProgressBar.js";
+import { RadioButton } from "./RadioButton/RadioButton.js";
+import { RadioCard } from "./RadioCard/RadioCard.js";
+import { RadioGroup } from "./RadioGroup/RadioGroup.js";
+import { RadioGroupItem } from "./RadioGroup/RadioGroupItem.js";
+import { Slider } from "./Slider/Slider.js";
+import { Switch } from "./Switch/Switch.js";
+import { Textarea } from "./Textarea/Textarea.js";
+export { Avatar, Badge, Banner, Button, ButtonGroup, Card, ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow, Checkbox, CircleSkeleton, Divider, EmptyState, ErrorState, GroupedTabs, Icon, IconButton, Input, Kbd, KbdGroup, LinearProgress, Link, MetricChart, ProgressBar, RadioButton, RadioCard, RadioGroup, RadioGroupItem, Skeleton, SkeletonRows, Slider, Spinner, SpinnerIcon, Switch, Text, Textarea, Tooltip, TooltipProvider, formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime, getCheckedState };