@baseline-ui/mcp 0.0.0-nightly-20251117000602 → 0.0.0-nightly-20251118000611

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/data/component-source.json +3 -3
  3. package/dist/data/component-types.json +1 -1
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @baseline-ui/mcp
2
2
 
3
- ## 0.0.0-nightly-20251117000602
3
+ ## 0.0.0-nightly-20251118000611
4
4
 
5
5
  ## 0.46.2
6
6
 
package/dist/data/component-source.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "AudioPlayer": "import { PauseIcon, PlayIcon } from \"@baseline-ui/icons/24\";\nimport React from \"react\";\nimport { VisuallyHidden } from \"react-aria\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { defineMessages, useI18n } from \"../../hooks\";\nimport { useMedia } from \"../../hooks/useMedia\";\nimport { Slider } from \"../Slider\";\nimport { ToggleIconButton } from \"../ToggleIconButton\";\nimport {\n audioPlayerCn,\n mediaPlayerCn,\n mediaProgressCn,\n} from \"./AudioPlayer.css\";\n\nimport type { AudioPlayerProps } from \"./AudioPlayer.types\";\n\nexport const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(\n (\n {\n className,\n style,\n size = \"lg\",\n sources,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n ...arialLabelProps\n },\n ref,\n ) => {\n const audioRef = React.useRef<HTMLAudioElement>(null);\n\n const {\n isPlaying,\n progress,\n duration,\n togglePlay,\n seek,\n formattedDuration,\n formattedCurrentTime,\n setProgress,\n setIsSliderDragging,\n } = useMedia(audioRef);\n\n const { formatMessage } = useI18n();\n\n const dataAttrs = filterTruthyValues({\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-state\": isPlaying ? \"playing\" : \"paused\",\n \"data-loaded\": duration > 0,\n });\n\n return (\n <div\n {...dataAttrs}\n {...arialLabelProps}\n className={classNames(\n audioPlayerCn,\n \"BaselineUI-AudioPlayer\",\n className,\n )}\n role=\"group\"\n style={style}\n ref={ref}\n >\n <VisuallyHidden>\n <audio ref={audioRef}>\n {sources.map(({ url, type }) => (\n <source src={url} type={type} key={url} />\n ))}\n </audio>\n </VisuallyHidden>\n\n <ToggleIconButton\n icon={isPlaying ? PauseIcon : PlayIcon}\n variant=\"toolbar\"\n isSelected={isPlaying}\n size={size}\n aria-label={\n isPlaying\n ? formatMessage(messages.pause)\n : formatMessage(messages.play)\n }\n style={{ borderRadius: \"50%\" }}\n onPress={togglePlay}\n />\n\n <div className={mediaPlayerCn}>\n <span aria-hidden={true}>{formattedCurrentTime}</span>\n\n <Slider\n aria-label={formatMessage(messages.audioTimeline)}\n value={progress}\n minValue={0}\n maxValue={100}\n className={mediaProgressCn}\n onChange={(value) => {\n setProgress(value);\n setIsSliderDragging(true);\n }}\n onChangeEnd={(value) => {\n seek(value);\n setIsSliderDragging(false);\n }}\n />\n\n <span aria-hidden={true}>{formattedDuration}</span>\n </div>\n </div>\n );\n },\n);\n\nAudioPlayer.displayName = \"AudioPlayer\";\n\nconst messages = defineMessages({\n play: {\n id: \"play\",\n defaultMessage: \"Play\",\n },\n pause: {\n id: \"pause\",\n defaultMessage: \"Pause\",\n },\n audioTimeline: {\n id: \"audioTimeline\",\n defaultMessage: \"Audio timeline\",\n },\n});\n",
8
8
  "Avatar": "import { AvatarIcon } from \"@baseline-ui/icons/16\";\nimport { AvatarIcon as AvatarIcon24 } from \"@baseline-ui/icons/24\";\nimport React from \"react\";\n\nimport { classNames } from \"../../utils\";\nimport { notificationCn, userCn, userImgCn } from \"./Avatar.css\";\n\nimport type { AvatarProps } from \"./Avatar.types\";\n\nconst sizeToIcon = {\n sm: AvatarIcon,\n md: AvatarIcon24,\n};\n\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n (\n {\n className,\n style,\n size = \"md\",\n icon: Icon = sizeToIcon[size],\n name,\n imgSrc,\n showInitials,\n isDisabled,\n hasNotifications,\n imgLoading,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n },\n ref,\n ) => {\n const initials = name\n ?.split(\" \")\n .map((n) => n[0])\n .join(\"\");\n\n return (\n <span\n className={classNames(\n userCn({ size, isDisabled }),\n \"BaselineUI-Avatar\",\n className,\n )}\n data-disabled={isDisabled}\n ref={ref}\n style={style}\n aria-disabled={isDisabled}\n data-block-id={dataBlockId}\n data-block-class={dataBlockClass}\n >\n {imgSrc ? (\n <img\n src={imgSrc}\n alt={name}\n loading={imgLoading}\n className={userImgCn}\n />\n ) : null}\n {!showInitials && !imgSrc && <Icon size={size === \"sm\" ? 16 : 24} />}\n {showInitials && !imgSrc\n ? size === \"sm\"\n ? initials[0]\n : initials\n : null}\n\n {hasNotifications ? (\n <div data-testid=\"notification\" className={notificationCn} />\n ) : null}\n </span>\n );\n },\n);\n\nAvatar.displayName = \"Avatar\";\n",
9
9
  "Box": "import { sprinkles } from \"@baseline-ui/tokens\";\nimport React, { useMemo } from \"react\";\n\nimport { classNames } from \"../../utils\";\n\nimport type { BoxProps, SprinkleProps } from \"./Box.types\";\n\nfunction isSprinkleKey(key: unknown): key is keyof SprinkleProps {\n return sprinkles.properties.has(key as keyof SprinkleProps);\n}\n\nexport const Box = React.forwardRef<HTMLDivElement, BoxProps>(\n ({ elementType = \"div\", children, ...rest }, ref) => {\n const ElementType = elementType as React.ElementType;\n\n const { sprinkleProps, domProps } = useMemo(() => {\n const sprinkleProps = {} as SprinkleProps;\n const domProps = {} as React.ComponentPropsWithoutRef<\"div\">;\n\n for (const key in rest) {\n if (isSprinkleKey(key)) {\n // @ts-expect-error Too complicated union\n sprinkleProps[key] = rest[key];\n } else {\n domProps[key] = rest[key];\n }\n }\n\n return { sprinkleProps, domProps };\n }, [rest]);\n\n return (\n <ElementType\n {...domProps}\n className={classNames(\n sprinkles(sprinkleProps),\n \"BaselineUI-Box\",\n domProps.className,\n )}\n ref={ref}\n >\n {children}\n </ElementType>\n );\n },\n);\n\nBox.displayName = \"Box\";\n",
10
- "ButtonSelect": "import { CaretDownIcon } from \"@baseline-ui/icons/8\";\nimport { PressResponder } from \"@react-aria/interactions\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { useHover } from \"react-aria\";\nimport { useSelectState } from \"react-stately\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { defineMessages, useI18n } from \"../../hooks\";\nimport { ActionIconButton } from \"../ActionIconButton\";\nimport { Box } from \"../Box\";\nimport { Select } from \"../Select\";\nimport { SelectContext } from \"../Select/Select\";\nimport { ToggleButton } from \"../ToggleButton\";\nimport { toggleButtonCn } from \"../ToggleButton/ToggleButton.css\";\nimport { ToggleIconButton } from \"../ToggleIconButton\";\nimport { containerCn, selectCn, selectTriggerCn } from \"./ButtonSelect.css\";\nimport { Tooltip } from \"../Tooltip\";\nimport { ActionButton } from \"../ActionButton\";\nimport { ListCollectionBuilder } from \"../shared/components/ListCollectionBuilder\";\nimport {\n ListBoxItemContent,\n ListOptionContext,\n} from \"../UNSAFE_ListBox/ListBox\";\n\nimport type { ListItem } from \"../shared/types/List\";\nimport type { BaseCollection } from \"@react-aria/collections\";\nimport type { PressEvent } from \"@react-aria/interactions\";\nimport type { Key } from \"@react-types/shared\";\nimport type { SelectProps } from \"../Select\";\nimport type { ListOption } from \"../ListBox\";\nimport type { ButtonSelectProps } from \"./ButtonSelect.types\";\n\nconst ButtonSelectCore = React.forwardRef<\n HTMLDivElement,\n Omit<ButtonSelectProps, \"onPress\"> & {\n collection: BaseCollection<ListItem>;\n onButtonPress?: (e: PressEvent) => void;\n }\n>(\n (\n {\n className,\n style,\n items,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n hideLabel,\n size = \"md\",\n isDisabled,\n excludeFromTabOrder,\n onButtonPress,\n onButtonAction,\n isSelected,\n defaultSelected,\n onButtonSelectionChange,\n collection,\n moreAriaLabel,\n optionStyle,\n optionClassName,\n triggerClassName,\n triggerStyle,\n tooltipProps,\n buttonBehaviour = \"toggle\",\n ...rest\n },\n ref,\n ) => {\n const { formatMessage } = useI18n();\n\n const state = useSelectState({\n ...rest,\n collection,\n defaultValue: rest.defaultSelectedKey || items?.[0]?.id,\n children: undefined,\n selectionMode: \"single\",\n validationState: rest.validationState === \"error\" ? \"invalid\" : \"valid\",\n });\n\n const _buttonBehaviour = useMemo(() => {\n if (typeof buttonBehaviour === \"function\") {\n return buttonBehaviour(state.value as string);\n }\n return buttonBehaviour;\n }, [buttonBehaviour, state.value]);\n\n const [isButtonSelected, setIsButtonSelected] = useControlledState(\n isSelected,\n !!defaultSelected,\n (isSelected) => {\n onButtonSelectionChange?.({\n isSelected,\n selectedKey: state.value as string,\n });\n },\n );\n\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const button = useMemo(() => {\n const selectedItem = state.collection.getItem(state.value as string);\n if (!selectedItem) return null;\n\n const buttonLabel =\n selectedItem?.textValue || selectedItem?.[\"aria-label\"];\n const _item = selectedItem?.value as ListOption;\n\n const Icon = _item?.icon;\n\n const isToggle = _buttonBehaviour === \"toggle\";\n const isButtonDisabled =\n isDisabled || state.disabledKeys.has(state.value as string);\n\n const sharedProps = {\n size,\n ...(isToggle && { isSelected: isButtonSelected }),\n onPress: (e: PressEvent) => {\n if (isToggle) {\n setIsButtonSelected(!isButtonSelected);\n }\n onButtonPress?.(e);\n onButtonAction?.({\n isSelected: isToggle ? !isButtonSelected : false,\n selectedKey: state.value as string,\n buttonBehaviour: _buttonBehaviour,\n });\n },\n isDisabled: isButtonDisabled,\n excludeFromTabOrder,\n className: classNames(\n typeof optionClassName === \"function\"\n ? optionClassName(_item, {\n isButton: true,\n isSelected: isButtonSelected,\n })\n : optionClassName,\n \"BaselineUI-ButtonSelect-Button\",\n ),\n style:\n typeof optionStyle === \"function\"\n ? optionStyle(_item, {\n isButton: true,\n isSelected: isButtonSelected,\n })\n : optionStyle,\n };\n\n if (hideLabel && Icon) {\n return (\n <Tooltip\n variant=\"inverse\"\n size=\"sm\"\n includeArrow={false}\n text={buttonLabel}\n placement=\"bottom start\"\n offset={4}\n {...(typeof tooltipProps === \"function\"\n ? tooltipProps(\"button\")\n : tooltipProps)}\n >\n {_buttonBehaviour === \"action\" ? (\n <ActionIconButton\n icon={Icon}\n aria-label={buttonLabel}\n variant=\"toolbar\"\n {...sharedProps}\n />\n ) : (\n <ToggleIconButton\n icon={Icon}\n aria-label={buttonLabel}\n variant=\"toolbar\"\n {...sharedProps}\n />\n )}\n </Tooltip>\n );\n } else {\n return _buttonBehaviour === \"toggle\" ? (\n <ToggleButton\n iconStart={Icon}\n label={buttonLabel}\n variant=\"toolbar\"\n {...sharedProps}\n />\n ) : (\n <ActionButton\n label={buttonLabel}\n variant=\"toolbar\"\n {...sharedProps}\n />\n );\n }\n }, [\n state.collection,\n state.value,\n state.disabledKeys,\n _buttonBehaviour,\n isDisabled,\n size,\n isButtonSelected,\n excludeFromTabOrder,\n optionClassName,\n optionStyle,\n hideLabel,\n onButtonPress,\n onButtonAction,\n setIsButtonSelected,\n tooltipProps,\n ]);\n\n const ariaLabel = rest[\"aria-label\"];\n\n const renderTrigger = useCallback<\n Exclude<SelectProps[\"renderTrigger\"], undefined>\n >(\n ({ buttonProps, ref }) => {\n delete buttonProps[\"aria-labelledby\"];\n\n const label =\n moreAriaLabel || `${formatMessage(messages.more)} ${ariaLabel}`;\n\n return (\n <Tooltip\n variant=\"inverse\"\n size=\"sm\"\n includeArrow={false}\n text={label}\n placement=\"bottom start\"\n offset={4}\n {...tooltipProps}\n >\n <PressResponder {...buttonProps}>\n <ActionIconButton\n aria-label={label}\n ref={ref}\n icon={CaretDownIcon}\n variant=\"toolbar\"\n size={size}\n className={({ isFocusVisible }) =>\n classNames(\n toggleButtonCn({\n isSelected:\n isButtonSelected && _buttonBehaviour === \"toggle\",\n isFocusVisible,\n }),\n selectTriggerCn,\n triggerClassName,\n \"BaselineUI-ButtonSelect-Trigger\",\n )\n }\n style={triggerStyle}\n isDisabled={isDisabled}\n excludeFromTabOrder={excludeFromTabOrder}\n />\n </PressResponder>\n </Tooltip>\n );\n },\n [\n ariaLabel,\n _buttonBehaviour,\n excludeFromTabOrder,\n formatMessage,\n isButtonSelected,\n isDisabled,\n moreAriaLabel,\n size,\n tooltipProps,\n triggerClassName,\n triggerStyle,\n ],\n );\n\n const dataAttrs = filterTruthyValues({\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-hovered\": isHovered,\n \"data-selected\": isButtonSelected,\n \"data-disabled\": isDisabled,\n \"data-expanded\": state.isOpen,\n \"data-button-behaviour\": _buttonBehaviour,\n });\n\n const containerRef = useObjectRef(ref);\n\n const contextValue = useMemo(\n () => ({ state, popoverAnchorRef: containerRef }),\n [state, containerRef],\n );\n\n return (\n <SelectContext.Provider value={contextValue}>\n <Box\n {...hoverProps}\n role=\"group\"\n display=\"inline-flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n className={classNames(\n containerCn,\n \"BaselineUI-ButtonSelect\",\n className,\n )}\n aria-label={rest[\"aria-label\"]}\n aria-labelledby={rest[\"aria-labelledby\"]}\n aria-describedby={rest[\"aria-describedby\"]}\n aria-details={rest[\"aria-details\"]}\n style={style}\n ref={containerRef}\n {...dataAttrs}\n >\n {button}\n\n <Select\n isDisabled={isDisabled}\n placement=\"bottom start\"\n items={items}\n {...rest}\n variant=\"ghost\"\n renderTrigger={renderTrigger}\n className={classNames(selectCn, \"BaselineUI-ButtonSelect-Select\")}\n />\n </Box>\n </SelectContext.Provider>\n );\n },\n);\n\nButtonSelectCore.displayName = \"ButtonSelectCore\";\n\nexport const ButtonSelect = React.forwardRef<HTMLDivElement, ButtonSelectProps>(\n (\n {\n onPress,\n optionStyle,\n optionClassName,\n onSelectionChange,\n onOptionPress,\n ...props\n },\n ref,\n ) => {\n const onPressHandler = useCallback(\n (e: PressEvent, key: string) => {\n onOptionPress?.(e, key);\n // When clicking the selected option, react-aria won't call onSelectionChange\n // because the selection doesn't change, so we call it here\n if (props.selectedKey === key) {\n onSelectionChange?.(key);\n }\n },\n [onOptionPress, onSelectionChange, props.selectedKey],\n );\n\n const wrappedOnSelectionChange = useCallback(\n (key: Key | null) => {\n // Always call onSelectionChange when react-aria calls it (when selection changes)\n if (key) {\n onSelectionChange?.(key as string);\n }\n },\n [onSelectionChange],\n );\n\n const contextValue = useMemo(\n () => ({ onPress: onPressHandler }),\n [onPressHandler],\n );\n\n return (\n <ListOptionContext.Provider value={contextValue}>\n <ListCollectionBuilder\n items={props.items}\n listBoxProps={{\n renderOption: (item, itemProps) => (\n <ListBoxItemContent {...itemProps} item={item} />\n ),\n optionStyle: (item, props) =>\n typeof optionStyle === \"function\"\n ? optionStyle(item, {\n isButton: false,\n isSelected: props.isSelected,\n })\n : optionStyle,\n optionClassName: (item, props) =>\n typeof optionClassName === \"function\"\n ? optionClassName(item, {\n isButton: false,\n isSelected: props.isSelected,\n })\n : optionClassName,\n }}\n >\n {(collection) => (\n <ButtonSelectCore\n collection={collection}\n onButtonPress={onPress}\n onSelectionChange={wrappedOnSelectionChange}\n optionStyle={optionStyle}\n optionClassName={optionClassName}\n {...props}\n ref={ref}\n />\n )}\n </ListCollectionBuilder>\n </ListOptionContext.Provider>\n );\n },\n);\n\nButtonSelect.displayName = \"ButtonSelect\";\n\nconst messages = defineMessages({\n more: {\n id: \"more\",\n defaultMessage: \"More\",\n },\n});\n",
10
+ "ButtonSelect": "import { CaretDownIcon } from \"@baseline-ui/icons/8\";\nimport { PressResponder } from \"@react-aria/interactions\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { useHover } from \"react-aria\";\nimport { useSelectState } from \"react-stately\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { defineMessages, useI18n } from \"../../hooks\";\nimport { ActionIconButton } from \"../ActionIconButton\";\nimport { Box } from \"../Box\";\nimport { Select } from \"../Select\";\nimport { SelectContext } from \"../Select/Select\";\nimport { ToggleButton } from \"../ToggleButton\";\nimport { toggleButtonCn } from \"../ToggleButton/ToggleButton.css\";\nimport { ToggleIconButton } from \"../ToggleIconButton\";\nimport { containerCn, selectCn, selectTriggerCn } from \"./ButtonSelect.css\";\nimport { Tooltip } from \"../Tooltip\";\nimport { ActionButton } from \"../ActionButton\";\nimport { ListCollectionBuilder } from \"../shared/components/ListCollectionBuilder\";\nimport { ListOptionContext } from \"../UNSAFE_ListBox/ListBox\";\nimport { ListOptionContent } from \"../UNSAFE_ListBox/ListBoxUI\";\n\nimport type { ListItem } from \"../shared/types/List\";\nimport type { BaseCollection } from \"@react-aria/collections\";\nimport type { PressEvent } from \"@react-aria/interactions\";\nimport type { Key } from \"@react-types/shared\";\nimport type { SelectProps } from \"../Select\";\nimport type { ListOption } from \"../ListBox\";\nimport type { ButtonSelectProps } from \"./ButtonSelect.types\";\n\nconst ButtonSelectCore = React.forwardRef<\n HTMLDivElement,\n Omit<ButtonSelectProps, \"onPress\"> & {\n collection: BaseCollection<ListItem>;\n onButtonPress?: (e: PressEvent) => void;\n }\n>(\n (\n {\n className,\n style,\n items,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n hideLabel,\n size = \"md\",\n isDisabled,\n excludeFromTabOrder,\n onButtonPress,\n onButtonAction,\n isSelected,\n defaultSelected,\n onButtonSelectionChange,\n collection,\n moreAriaLabel,\n optionStyle,\n optionClassName,\n triggerClassName,\n triggerStyle,\n tooltipProps,\n buttonBehaviour = \"toggle\",\n ...rest\n },\n ref,\n ) => {\n const { formatMessage } = useI18n();\n\n const state = useSelectState({\n ...rest,\n collection,\n defaultValue: rest.defaultSelectedKey || items?.[0]?.id,\n children: undefined,\n selectionMode: \"single\",\n validationState: rest.validationState === \"error\" ? \"invalid\" : \"valid\",\n });\n\n const _buttonBehaviour = useMemo(() => {\n if (typeof buttonBehaviour === \"function\") {\n return buttonBehaviour(state.value as string);\n }\n return buttonBehaviour;\n }, [buttonBehaviour, state.value]);\n\n const [isButtonSelected, setIsButtonSelected] = useControlledState(\n isSelected,\n !!defaultSelected,\n (isSelected) => {\n onButtonSelectionChange?.({\n isSelected,\n selectedKey: state.value as string,\n });\n },\n );\n\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const button = useMemo(() => {\n const selectedItem = state.collection.getItem(state.value as string);\n if (!selectedItem) return null;\n\n const buttonLabel =\n selectedItem?.textValue || selectedItem?.[\"aria-label\"];\n const _item = selectedItem?.value as ListOption;\n\n const Icon = _item?.icon;\n\n const isToggle = _buttonBehaviour === \"toggle\";\n const isButtonDisabled =\n isDisabled || state.disabledKeys.has(state.value as string);\n\n const sharedProps = {\n size,\n ...(isToggle && { isSelected: isButtonSelected }),\n onPress: (e: PressEvent) => {\n if (isToggle) {\n setIsButtonSelected(!isButtonSelected);\n }\n onButtonPress?.(e);\n onButtonAction?.({\n isSelected: isToggle ? !isButtonSelected : false,\n selectedKey: state.value as string,\n buttonBehaviour: _buttonBehaviour,\n });\n },\n isDisabled: isButtonDisabled,\n excludeFromTabOrder,\n className: classNames(\n typeof optionClassName === \"function\"\n ? optionClassName(_item, {\n isButton: true,\n isSelected: isButtonSelected,\n })\n : optionClassName,\n \"BaselineUI-ButtonSelect-Button\",\n ),\n style:\n typeof optionStyle === \"function\"\n ? optionStyle(_item, {\n isButton: true,\n isSelected: isButtonSelected,\n })\n : optionStyle,\n };\n\n if (hideLabel && Icon) {\n return (\n <Tooltip\n variant=\"inverse\"\n size=\"sm\"\n includeArrow={false}\n text={buttonLabel}\n placement=\"bottom start\"\n offset={4}\n {...(typeof tooltipProps === \"function\"\n ? tooltipProps(\"button\")\n : tooltipProps)}\n >\n {_buttonBehaviour === \"action\" ? (\n <ActionIconButton\n icon={Icon}\n aria-label={buttonLabel}\n variant=\"toolbar\"\n {...sharedProps}\n />\n ) : (\n <ToggleIconButton\n icon={Icon}\n aria-label={buttonLabel}\n variant=\"toolbar\"\n {...sharedProps}\n />\n )}\n </Tooltip>\n );\n } else {\n return _buttonBehaviour === \"toggle\" ? (\n <ToggleButton\n iconStart={Icon}\n label={buttonLabel}\n variant=\"toolbar\"\n {...sharedProps}\n />\n ) : (\n <ActionButton\n label={buttonLabel}\n variant=\"toolbar\"\n {...sharedProps}\n />\n );\n }\n }, [\n state.collection,\n state.value,\n state.disabledKeys,\n _buttonBehaviour,\n isDisabled,\n size,\n isButtonSelected,\n excludeFromTabOrder,\n optionClassName,\n optionStyle,\n hideLabel,\n onButtonPress,\n onButtonAction,\n setIsButtonSelected,\n tooltipProps,\n ]);\n\n const ariaLabel = rest[\"aria-label\"];\n\n const renderTrigger = useCallback<\n Exclude<SelectProps[\"renderTrigger\"], undefined>\n >(\n ({ buttonProps, ref }) => {\n delete buttonProps[\"aria-labelledby\"];\n\n const label =\n moreAriaLabel || `${formatMessage(messages.more)} ${ariaLabel}`;\n\n return (\n <Tooltip\n variant=\"inverse\"\n size=\"sm\"\n includeArrow={false}\n text={label}\n placement=\"bottom start\"\n offset={4}\n {...tooltipProps}\n >\n <PressResponder {...buttonProps}>\n <ActionIconButton\n aria-label={label}\n ref={ref}\n icon={CaretDownIcon}\n variant=\"toolbar\"\n size={size}\n className={({ isFocusVisible }) =>\n classNames(\n toggleButtonCn({\n isSelected:\n isButtonSelected && _buttonBehaviour === \"toggle\",\n isFocusVisible,\n }),\n selectTriggerCn,\n triggerClassName,\n \"BaselineUI-ButtonSelect-Trigger\",\n )\n }\n style={triggerStyle}\n isDisabled={isDisabled}\n excludeFromTabOrder={excludeFromTabOrder}\n />\n </PressResponder>\n </Tooltip>\n );\n },\n [\n ariaLabel,\n _buttonBehaviour,\n excludeFromTabOrder,\n formatMessage,\n isButtonSelected,\n isDisabled,\n moreAriaLabel,\n size,\n tooltipProps,\n triggerClassName,\n triggerStyle,\n ],\n );\n\n const dataAttrs = filterTruthyValues({\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-hovered\": isHovered,\n \"data-selected\": isButtonSelected,\n \"data-disabled\": isDisabled,\n \"data-expanded\": state.isOpen,\n \"data-button-behaviour\": _buttonBehaviour,\n });\n\n const containerRef = useObjectRef(ref);\n\n const contextValue = useMemo(\n () => ({ state, popoverAnchorRef: containerRef }),\n [state, containerRef],\n );\n\n return (\n <SelectContext.Provider value={contextValue}>\n <Box\n {...hoverProps}\n role=\"group\"\n display=\"inline-flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n className={classNames(\n containerCn,\n \"BaselineUI-ButtonSelect\",\n className,\n )}\n aria-label={rest[\"aria-label\"]}\n aria-labelledby={rest[\"aria-labelledby\"]}\n aria-describedby={rest[\"aria-describedby\"]}\n aria-details={rest[\"aria-details\"]}\n style={style}\n ref={containerRef}\n {...dataAttrs}\n >\n {button}\n\n <Select\n isDisabled={isDisabled}\n placement=\"bottom start\"\n items={items}\n {...rest}\n variant=\"ghost\"\n renderTrigger={renderTrigger}\n className={classNames(selectCn, \"BaselineUI-ButtonSelect-Select\")}\n />\n </Box>\n </SelectContext.Provider>\n );\n },\n);\n\nButtonSelectCore.displayName = \"ButtonSelectCore\";\n\nexport const ButtonSelect = React.forwardRef<HTMLDivElement, ButtonSelectProps>(\n (\n {\n onPress,\n optionStyle,\n optionClassName,\n onSelectionChange,\n onOptionPress,\n ...props\n },\n ref,\n ) => {\n const onPressHandler = useCallback(\n (e: PressEvent, key: string) => {\n onOptionPress?.(e, key);\n // When clicking the selected option, react-aria won't call onSelectionChange\n // because the selection doesn't change, so we call it here\n if (props.selectedKey === key) {\n onSelectionChange?.(key);\n }\n },\n [onOptionPress, onSelectionChange, props.selectedKey],\n );\n\n const wrappedOnSelectionChange = useCallback(\n (key: Key | null) => {\n // Always call onSelectionChange when react-aria calls it (when selection changes)\n if (key) {\n onSelectionChange?.(key as string);\n }\n },\n [onSelectionChange],\n );\n\n const contextValue = useMemo(\n () => ({ onPress: onPressHandler }),\n [onPressHandler],\n );\n\n return (\n <ListOptionContext.Provider value={contextValue}>\n <ListCollectionBuilder\n items={props.items}\n listBoxProps={{\n renderOption: (item, itemProps) => (\n <ListOptionContent {...itemProps} item={item} />\n ),\n optionStyle: (item, props) =>\n typeof optionStyle === \"function\"\n ? optionStyle(item, {\n isButton: false,\n isSelected: props.isSelected,\n })\n : optionStyle,\n optionClassName: (item, props) =>\n typeof optionClassName === \"function\"\n ? optionClassName(item, {\n isButton: false,\n isSelected: props.isSelected,\n })\n : optionClassName,\n }}\n >\n {(collection) => (\n <ButtonSelectCore\n collection={collection}\n onButtonPress={onPress}\n onSelectionChange={wrappedOnSelectionChange}\n optionStyle={optionStyle}\n optionClassName={optionClassName}\n {...props}\n ref={ref}\n />\n )}\n </ListCollectionBuilder>\n </ListOptionContext.Provider>\n );\n },\n);\n\nButtonSelect.displayName = \"ButtonSelect\";\n\nconst messages = defineMessages({\n more: {\n id: \"more\",\n defaultMessage: \"More\",\n },\n});\n",
11
11
  "Checkbox": "import React from \"react\";\nimport {\n VisuallyHidden,\n mergeProps,\n useCheckbox,\n useFocusRing,\n useHover,\n useObjectRef,\n} from \"react-aria\";\nimport { useToggleState } from \"react-stately\";\nimport { CheckmarkIcon, MinusIcon } from \"@baseline-ui/icons/12\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { checkBoxLabelCn, checkboxCn, checkboxIconCn } from \"./Checkbox.css\";\n\nimport type { CheckboxProps } from \"./Checkbox.types\";\n\nexport const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n className,\n style,\n label,\n labelPosition = \"end\",\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n ...rest\n },\n ref,\n ) => {\n const labelRef = useObjectRef(ref);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const state = useToggleState(rest);\n const { isFocusVisible, isFocused, focusProps } = useFocusRing();\n const { inputProps, isPressed, isDisabled, isSelected, isReadOnly } =\n useCheckbox({ ...rest, children: label }, state, inputRef);\n const { hoverProps, isHovered } = useHover(\n {\n isDisabled,\n },\n labelRef,\n );\n\n const dataAttrs = filterTruthyValues({\n \"data-disabled\": isDisabled,\n \"data-readonly\": isReadOnly,\n \"data-hovered\": isHovered,\n \"data-selected\": isSelected,\n \"data-pressed\": isPressed,\n \"data-indeterminate\": rest.isIndeterminate,\n \"data-invalid\": rest.isInvalid,\n \"data-focus-visible\": isFocusVisible,\n \"data-focused\": isFocused,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n });\n\n return (\n <label\n {...dataAttrs}\n className={classNames(\n checkboxCn({ labelPosition }),\n \"BaselineUI-Checkbox\",\n className,\n )}\n style={style}\n ref={labelRef}\n >\n <VisuallyHidden>\n <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n <div\n {...hoverProps}\n className={checkboxIconCn({\n isSelected: isSelected && !rest.isIndeterminate,\n isIndeterminate: rest.isIndeterminate,\n isFocusVisible,\n isDisabled,\n isReadOnly,\n hasError: rest.isInvalid,\n isHovered,\n })}\n >\n {isSelected && !rest.isIndeterminate ? (\n <CheckmarkIcon size={12} />\n ) : null}\n {rest.isIndeterminate ? <MinusIcon size={12} /> : null}\n </div>\n {label ? (\n <span className={checkBoxLabelCn({ isDisabled })}>{label}</span>\n ) : null}\n </label>\n );\n },\n);\n\nCheckbox.displayName = \"Checkbox\";\n",
12
12
  "ColorInput": "import { useControlledState } from \"@react-stately/utils\";\nimport React, { useMemo } from \"react\";\nimport { mergeProps, useId, useOverlayTrigger } from \"react-aria\";\nimport { useOverlayTriggerState } from \"react-stately\";\n\nimport _messages from \"./intl\";\nimport { classNames } from \"../../utils\";\nimport { Separator } from \"../Separator\";\nimport { Dialog } from \"../Dialog\";\nimport { CustomColors } from \"./CustomColors\";\nimport { ColorPresetList } from \"./ColorPresetList\";\nimport { ColorInputButton } from \"./ColorInputButton\";\nimport {\n colorInputCn,\n colorInputLabelCn,\n dialogCn,\n maxWidthCn,\n} from \"./ColorInput.css\";\nimport { defineMessages, useI18n, usePortalContainer } from \"../../hooks\";\nimport { PopoverContent } from \"../Popover/PopoverContent\";\nimport { Picker } from \"./Picker\";\nimport {\n FALLBACK_COLOR,\n NONE_ID,\n getParsedColor,\n getPresetsWithNone,\n} from \"./utils\";\nimport { useColorTrigger } from \"./hooks/useColorTrigger\";\n\nimport type Messages from \"./intl/en.json\";\nimport type { ColorInputProps } from \"./ColorInput.types\";\n\nexport const ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n (\n {\n className,\n style,\n allowRemoval,\n allowAlpha = true,\n presets,\n labelPosition = \"top\",\n colorLabel = true,\n includePicker = true,\n onChange,\n onChangeEnd,\n defaultValue,\n storePickedColorKey = \"baselinePickedColor\",\n value,\n addColorButtonLabel,\n removeColorButtonLabel,\n customColorsLabel,\n onTriggerPress,\n renderTriggerButton = ({\n isOpen,\n color,\n ref,\n colorName,\n triggerProps,\n labelId,\n isIndeterminate,\n indeterminateIcon,\n }) => (\n <ColorInputButton\n {...mergeProps(triggerProps, {\n ...(rest.label\n ? { \"aria-labelledby\": labelId }\n : { \"aria-label\": rest[\"aria-label\"] }),\n })}\n ref={ref}\n isOpen={isOpen}\n isDisabled={rest.isDisabled}\n labelPosition={labelPosition}\n color={color}\n colorLabel={colorLabel}\n colorName={colorName}\n isIndeterminate={isIndeterminate}\n indeterminateIcon={indeterminateIcon}\n />\n ),\n pickerMode = \"active\",\n offset = 2,\n placement = labelPosition === \"start\" ? \"bottom end\" : \"bottom start\",\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n isIndeterminate,\n indeterminateIcon,\n ...rest\n },\n ref,\n ) => {\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const dialogRef = React.useRef<HTMLDivElement>(null);\n const state = useOverlayTriggerState(rest);\n const { triggerProps, overlayProps } = useOverlayTrigger(\n { type: \"listbox\" },\n state,\n triggerRef,\n );\n const _portalContainer = usePortalContainer(rest.portalContainer);\n\n const [color, setColor] = useControlledState(\n value === undefined ? undefined : getParsedColor(value),\n getParsedColor(defaultValue),\n (color) => onChange?.(color?.toFormat(\"rgba\") || null),\n );\n\n const { formatMessage } = useI18n<typeof Messages>(_messages);\n\n const _presets = useMemo(\n () => getPresetsWithNone(formatMessage(messages.noColor), presets),\n [presets, formatMessage],\n );\n\n const labelId = useId();\n\n const { colorName } = useColorTrigger({\n colorLabel,\n color,\n presets: _presets,\n isIndeterminate,\n });\n\n const presetsToShow = useMemo(\n () => _presets.filter((p) => allowRemoval || p.id !== NONE_ID),\n [_presets, allowRemoval],\n );\n\n const _addColorButtonLabel =\n addColorButtonLabel || formatMessage(messages.addColor);\n\n const _removeColorButtonLabel =\n removeColorButtonLabel || formatMessage(messages.removeColor);\n\n const _customColorsLabel =\n customColorsLabel || formatMessage(messages.customColors);\n\n const customColors = (\n <CustomColors\n color={color || FALLBACK_COLOR}\n setColor={(color) => {\n setColor(color);\n onChangeEnd?.(color?.toFormat(\"rgba\") || null);\n }}\n storePickedColorKey={storePickedColorKey}\n addColorButtonLabel={_addColorButtonLabel}\n removeColorButtonLabel={_removeColorButtonLabel}\n customColorsLabel={_customColorsLabel}\n pickerMode={pickerMode}\n allowAlpha={allowAlpha}\n isIndeterminate={!!isIndeterminate}\n />\n );\n\n return (\n <>\n <div\n className={classNames(\n { [colorInputCn]: labelPosition === \"start\" },\n \"BaselineUI-ColorInput-Trigger\",\n className,\n )}\n data-block-id={dataBlockId}\n data-block-class={dataBlockClass}\n style={style}\n ref={ref}\n >\n {rest.label ? (\n <label\n id={labelId}\n className={colorInputLabelCn({ labelPosition })}\n >\n {rest.label}\n </label>\n ) : null}\n\n {renderTriggerButton({\n isOpen: state.isOpen,\n color,\n ref: triggerRef,\n colorName,\n triggerProps: mergeProps(triggerProps, {\n onPress: onTriggerPress,\n }),\n labelId,\n isIndeterminate,\n indeterminateIcon,\n })}\n </div>\n <PopoverContent\n {...rest}\n portalContainer={_portalContainer}\n placement={placement}\n state={state}\n offset={offset}\n className={classNames(maxWidthCn, \"BaselineUI-ColorInput-Popover\")}\n triggerRef={triggerRef}\n overlayProps={overlayProps}\n >\n <Dialog\n size=\"content\"\n className={dialogCn({\n includesCustomColorPicker: includePicker,\n })}\n ref={dialogRef}\n aria-labelledby={rest.label ? labelId : undefined}\n aria-label={rest[\"aria-label\"]}\n >\n {includePicker && pickerMode === \"active\" ? (\n <>\n <Picker\n color={color || FALLBACK_COLOR}\n setColor={setColor}\n allowAlpha={allowAlpha}\n onChangeEnd={(color) => {\n onChangeEnd?.(color?.toFormat(\"rgba\") || null);\n }}\n />\n\n {customColors}\n </>\n ) : null}\n\n {!!presetsToShow.length && (\n <>\n {includePicker && pickerMode === \"active\" ? (\n <Separator />\n ) : null}\n\n <ColorPresetList\n autoFocus={\n includePicker && pickerMode === \"active\" ? false : \"first\"\n }\n state={state}\n triggerRef={triggerRef}\n presets={presetsToShow}\n color={color}\n setColor={(color) => {\n setColor(color);\n onChangeEnd?.(color?.toFormat(\"rgba\") || null);\n }}\n isIndeterminate={!!isIndeterminate}\n />\n </>\n )}\n\n {includePicker && pickerMode === \"lazy\" ? customColors : null}\n </Dialog>\n </PopoverContent>\n </>\n );\n },\n);\n\nColorInput.displayName = \"ColorInput\";\n\nconst messages = defineMessages({\n addColor: {\n defaultMessage: \"Add color\",\n id: \"addColor\",\n },\n removeColor: {\n defaultMessage: \"Remove color\",\n id: \"removeColor\",\n },\n customColors: {\n defaultMessage: \"Custom colors\",\n id: \"customColors\",\n },\n noColor: {\n defaultMessage: \"No color\",\n id: \"noColor\",\n },\n transparent: {\n defaultMessage: \"Transparent\",\n id: \"transparent\",\n },\n});\n",
13
13
  "ColorSwatch": "import { parseColor } from \"@react-stately/color\";\nimport React from \"react\";\nimport { Focusable, mergeProps, useHover } from \"react-aria\";\nimport { useColorSwatch } from \"@react-aria/color\";\nimport { HelpIcon } from \"@baseline-ui/icons/16\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { defineMessages, useI18n } from \"../../hooks\";\nimport { Box } from \"../Box\";\nimport { NONE_ID, getTransparentStyle } from \"../ColorInput/utils\";\nimport { Tooltip } from \"../Tooltip\";\nimport { useSharedTooltipProps } from \"../shared/tooltips\";\nimport { colorSwatchCn, indeterminateCn, noneCn } from \"./ColorSwatch.css\";\n\nimport type { ColorSwatchProps } from \"./ColorSwatch.types\";\n\nexport const ColorSwatch = React.forwardRef<HTMLDivElement, ColorSwatchProps>(\n (\n {\n color,\n isFocusVisible,\n isSelected,\n isInteractive,\n isDisabled,\n style,\n className,\n id,\n tooltip,\n isIndeterminate,\n indeterminateIcon: IndeterminateIcon = HelpIcon,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n ...rest\n },\n ref,\n ) => {\n const parsed =\n color &&\n color !== NONE_ID &&\n (typeof color === \"string\" ? parseColor(color) : color);\n\n const { formatMessage } = useI18n();\n\n const isNone = !parsed;\n\n const { colorSwatchProps } = useColorSwatch({\n color: isNone ? \"#000000\" : color,\n });\n\n const { hoverProps, isHovered } = useHover({\n isDisabled: isDisabled || !isInteractive,\n });\n\n const dataAttrs = filterTruthyValues({\n \"data-focus-visible\": isFocusVisible,\n \"data-selected\": isSelected,\n \"data-hovered\": isHovered,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-disabled\": isDisabled,\n \"data-interactive\": isInteractive,\n \"data-indeterminate\": isIndeterminate,\n });\n\n const inferredTooltipContent = isNone\n ? formatMessage(messages.none)\n : colorSwatchProps[\"aria-label\"];\n\n // prefer provided aria-label over inferred one\n const tooltipContent = rest[\"aria-label\"] ?? inferredTooltipContent;\n\n const { tooltipProps } = useSharedTooltipProps({\n tooltip,\n label: tooltipContent,\n });\n\n const content = (\n <div\n {...mergeProps(hoverProps, dataAttrs, isNone ? {} : colorSwatchProps)}\n style={style}\n aria-label={\n isNone ? formatMessage(messages.none) : colorSwatchProps[\"aria-label\"]\n }\n role=\"img\"\n className={classNames(\n colorSwatchCn({\n removeBlendMode: isNone,\n isFocusVisible,\n isDisabled: !!isDisabled,\n isSelected: !!isSelected,\n isHovered,\n }),\n \"BaselineUI-ColorSwatch\",\n className,\n )}\n ref={ref}\n id={id}\n {...rest}\n >\n <Box\n display=\"inline-flex\"\n justifyContent=\"center\"\n alignItems=\"center\"\n borderRadius=\"full\"\n height=\"full\"\n width=\"full\"\n opacity={isDisabled ? \"medium\" : undefined}\n style={\n parsed && !isIndeterminate\n ? getTransparentStyle(parsed, 4)\n : undefined\n }\n >\n {isNone && !isIndeterminate ? <div className={noneCn} /> : null}\n {isIndeterminate && IndeterminateIcon ? (\n <IndeterminateIcon\n role=\"presentation\"\n size={16}\n className={indeterminateCn}\n aria-hidden=\"true\"\n />\n ) : null}\n </Box>\n </div>\n );\n\n return tooltipProps && !isDisabled ? (\n <Tooltip {...tooltipProps}>\n <Focusable>{content}</Focusable>\n </Tooltip>\n ) : (\n content\n );\n },\n);\n\nColorSwatch.displayName = \"ColorSwatch\";\n\nconst messages = defineMessages({\n none: {\n id: \"none\",\n defaultMessage: \"None\",\n },\n});\n",
@@ -34,7 +34,7 @@
34
34
  "Link": "import { mergeRefs } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { mergeProps, useFocusRing, useHover, useLink } from \"react-aria\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { linkCn } from \"./Link.css\";\n\nimport type { LinkProps } from \"./Link.types\";\n\nexport const Link = React.forwardRef<HTMLElement, LinkProps>(\n (\n {\n className,\n style,\n children,\n variant = \"default\",\n size = \"md\",\n elementType = \"a\",\n type = \"body\",\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n title,\n role,\n ...props\n },\n ref,\n ) => {\n const linkRef = React.useRef<HTMLElement>(null);\n const { linkProps, isPressed } = useLink(\n { ...props, elementType: props.onPress ? \"span\" : elementType },\n linkRef,\n );\n const { isFocusVisible, isFocused, focusProps } = useFocusRing();\n const { hoverProps, isHovered } = useHover({\n isDisabled: props.isDisabled,\n });\n\n const LinkElement = elementType as React.ElementType;\n\n const dataAttrs = filterTruthyValues({\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-disabled\": props.isDisabled,\n \"data-focused\": isFocused,\n \"data-pressed\": isPressed,\n \"data-focus-visible\": isFocusVisible,\n \"data-hovered\": isHovered,\n role,\n title,\n });\n\n return (\n <LinkElement\n {...mergeProps(linkProps, focusProps, hoverProps, dataAttrs)}\n className={classNames(\n linkCn({\n variant,\n isFocusVisible,\n isHovered,\n isDisabled: props.isDisabled,\n size,\n isActive: isPressed,\n type,\n }),\n \"BaselineUI-Link\",\n className,\n )}\n ref={mergeRefs(linkRef, ref)}\n style={style}\n >\n {children}\n </LinkElement>\n );\n },\n);\n\nLink.displayName = \"Link\";\n",
35
35
  "ListBox": "import { mergeRefs } from \"@react-aria/utils\";\nimport React, { useContext, useEffect } from \"react\";\nimport {\n DragPreview,\n ListKeyboardDelegate,\n mergeProps,\n useFocusRing,\n useListBox,\n useLocale,\n} from \"react-aria\";\nimport { useListState } from \"react-stately\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { useCollectionChildren } from \"../shared/collection\";\nimport { useDragDrop } from \"./hooks/useDragDrop\";\nimport { listBoxCn } from \"./ListBox.css\";\nimport { ListBoxSection } from \"./ListBoxSection\";\nimport { ListOption } from \"./ListOption\";\nimport { useSharedList } from \"./hooks/useSharedList\";\nimport { useDragAutoScroll } from \"./hooks/useDragAutoScroll\";\n\nimport type { ListItem } from \"../shared/types/List\";\nimport type { ComboBoxState, ListState } from \"react-stately\";\nimport type { DragPreviewRenderer } from \"react-aria\";\nimport type { ListBoxProps } from \"./ListBox.types\";\n\nexport const ListBoxContext = React.createContext<\n ListState<ListItem> | ComboBoxState<ListItem> | null\n>(null);\n\nconst ListBoxCore = React.forwardRef<\n HTMLUListElement,\n ListBoxProps & {\n state: ListState<ListItem> | ComboBoxState<ListItem>;\n }\n>(\n (\n {\n className,\n layout = \"stack\",\n orientation = \"vertical\",\n showSelectedIcon = true,\n style,\n renderOption,\n enableReorder = false,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n renderDragPreview,\n onReorder,\n state,\n listBoxHandle,\n ...rest\n },\n ref,\n ) => {\n const previewRef = React.useRef<DragPreviewRenderer>(null);\n\n const { direction } = useLocale();\n\n const ulRef = React.useRef<HTMLUListElement>(null);\n\n const { listBoxProps } = useListBox(\n {\n ...rest,\n /**\n * When dragging is enabled, we want to select the item on press up\n * otherwise the other items will be deselected when dragging.\n */\n shouldSelectOnPressUp: enableReorder,\n keyboardDelegate: new ListKeyboardDelegate({\n collection: state.collection,\n ref: ulRef,\n layout,\n orientation,\n direction,\n disabledKeys: state.disabledKeys,\n }),\n },\n state,\n ulRef,\n );\n\n useSharedList({ handle: listBoxHandle }, state, ulRef);\n\n const { collectionProps, dragState, dropState } = useDragDrop(\n {\n ...rest,\n onReorder,\n layout,\n orientation,\n enableReorder,\n preview: previewRef,\n },\n state,\n ulRef,\n );\n\n const { isFocusVisible, isFocused, focusProps } = useFocusRing();\n\n const dataAttrs = filterTruthyValues({\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-layout\": layout,\n \"data-empty\": state.collection.size === 0,\n \"data-focused\": isFocused,\n \"data-focus-visible\": isFocusVisible,\n \"data-orientation\": orientation,\n });\n\n useDragAutoScroll({ ref: ulRef, isDisabled: !enableReorder });\n\n return (\n <ul\n {...mergeProps(listBoxProps, focusProps, dataAttrs, collectionProps)}\n className={classNames(listBoxCn, \"BaselineUI-ListBox\", className)}\n style={style}\n ref={mergeRefs(ref, ulRef)}\n >\n {[...state.collection].map((item) => {\n const props = {\n key: item.key,\n state,\n dragState,\n dropState,\n renderOption,\n renderDropIndicator: rest.renderDropIndicator,\n renderSectionHeader: rest.renderSectionHeader,\n showSelectedIcon,\n orientation,\n dropIndicatorStyle: rest.dropIndicatorStyle,\n dropIndicatorClassName: rest.dropIndicatorClassName,\n optionStyle: rest.optionStyle,\n optionClassName: rest.optionClassName,\n sectionClassName: rest.sectionClassName,\n sectionStyle: rest.sectionStyle,\n showSectionHeader: rest.showSectionHeader,\n withSectionHeaderPadding: rest.withSectionHeaderPadding,\n };\n\n return item.type === \"section\" ? (\n <ListBoxSection {...props} key={item.key} section={item} />\n ) : (\n <ListOption {...props} key={item.key} item={item} />\n );\n })}\n\n {renderDragPreview ? (\n <DragPreview ref={previewRef}>{renderDragPreview}</DragPreview>\n ) : null}\n </ul>\n );\n },\n);\n\nListBoxCore.displayName = \"ListBoxCore\";\n\nconst ListBoxStandalone = React.forwardRef<HTMLUListElement, ListBoxProps>(\n (props, ref) => {\n const _children = useCollectionChildren();\n\n const state = useListState({\n ...props,\n children: _children,\n });\n\n return <ListBoxCore {...props} ref={ref} state={state} />;\n },\n);\n\nListBoxStandalone.displayName = \"ListBoxStandalone\";\n\nexport const ListBox = React.forwardRef<HTMLUListElement, ListBoxProps>(\n (props, ref) => {\n const state = useContext(ListBoxContext);\n\n useEffect(() => {\n if (!props.items && !state) {\n throw new Error(\n \"ListBox: You must provide a `state` or `items` prop to render the listbox.\",\n );\n }\n }, [props.items, state]);\n\n return state ? (\n <ListBoxCore {...props} ref={ref} state={state} />\n ) : (\n <ListBoxStandalone {...props} ref={ref} />\n );\n },\n);\n\nListBox.displayName = \"ListBox\";\n",
36
36
  "Markdown": "import React, { useMemo } from \"react\";\nimport markdownit from \"markdown-it\";\n\nimport { classNames } from \"../../utils\";\nimport { blinkingCaretCn, markdownCn, markdownContentCn } from \"./Markdown.css\";\n\nimport type { MarkdownProps } from \"./Markdown.types\";\n\nconst md = markdownit();\n\nexport const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(\n (\n {\n className,\n style,\n children,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n showCaret,\n },\n ref,\n ) => {\n const html = useMemo(() => {\n let text = children;\n\n if (!children || (Array.isArray(children) && children.length === 0)) {\n text = \"\";\n }\n\n return md.render(text);\n }, [children]);\n\n return (\n <div\n className={classNames(\n markdownCn,\n markdownContentCn,\n { [blinkingCaretCn]: showCaret },\n \"BaselineUI-Markdown\",\n className,\n )}\n data-block-id={dataBlockId}\n data-block-class={dataBlockClass}\n style={style}\n ref={ref}\n dangerouslySetInnerHTML={{ __html: html }}\n />\n );\n },\n);\n\nMarkdown.displayName = \"Markdown\";\n",
37
- "Menu": "import React, { useEffect, useMemo } from \"react\";\nimport { useMenuTriggerState } from \"react-stately\";\nimport { mergeProps, useMenuTrigger } from \"react-aria\";\n\nimport { usePortalContainer } from \"../../hooks\";\nimport { ActionButton } from \"../ActionButton\";\nimport { PopoverContent } from \"../Popover/PopoverContent\";\nimport { useCollectionChildren } from \"../shared/collection\";\nimport { MenuContent } from \"./MenuContent\";\n\nimport type { MenuItem, MenuProps } from \"./Menu.types\";\n\nexport const Menu = React.forwardRef<HTMLUListElement, MenuProps>(\n (\n {\n defaultOpen,\n onOpenChange,\n isOpen,\n isDisabled,\n contentClassName,\n placement = \"bottom start\",\n isNonModal,\n shouldFlip,\n shouldUpdatePosition,\n boundaryElement,\n crossOffset,\n offset,\n triggerLabel,\n renderTrigger = ({ buttonProps, ref }) => (\n <ActionButton {...buttonProps} variant=\"popover\" ref={ref} />\n ),\n portalContainer,\n ...props\n },\n ref,\n ) => {\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const _portalContainer = usePortalContainer(portalContainer);\n\n const state = useMenuTriggerState({\n defaultOpen,\n isOpen,\n onOpenChange,\n });\n\n const { menuTriggerProps, menuProps } = useMenuTrigger<MenuItem>(\n {\n isDisabled,\n type: \"menu\",\n },\n state,\n buttonRef,\n );\n\n const _children = useCollectionChildren();\n\n const triggerButtonProps = useMemo(\n () =>\n mergeProps(menuTriggerProps, {\n isDisabled,\n isSelected: state.isOpen,\n className: \"BaselineUI-Menu-Trigger\",\n label:\n typeof triggerLabel === \"function\"\n ? triggerLabel(state.isOpen)\n : triggerLabel,\n }),\n [menuTriggerProps, isDisabled, state.isOpen, triggerLabel],\n );\n\n useEffect(() => {\n if (!triggerLabel && !renderTrigger) {\n console.warn(\n \"The `triggerLabel` prop is required when no `renderTrigger` or `children` is provided.\",\n );\n }\n }, [renderTrigger, triggerLabel]);\n\n return (\n <>\n {renderTrigger({ buttonProps: triggerButtonProps, ref: buttonRef })}\n {state.isOpen ? (\n <PopoverContent\n triggerRef={buttonRef}\n state={state}\n placement={placement}\n isNonModal={isNonModal}\n shouldFlip={shouldFlip}\n shouldUpdatePosition={shouldUpdatePosition}\n boundaryElement={boundaryElement}\n crossOffset={crossOffset}\n offset={offset || 2}\n className=\"BaselineUI-Menu-Popover\"\n portalContainer={_portalContainer}\n >\n <MenuContent\n className={contentClassName}\n {...menuProps}\n {...props}\n ref={ref}\n autoFocus={state.focusStrategy || \"first\"}\n >\n {_children}\n </MenuContent>\n </PopoverContent>\n ) : null}\n </>\n );\n },\n);\n\nMenu.displayName = \"Menu\";\n",
37
+ "Menu": "import React, { useContext, useEffect } from \"react\";\nimport {\n Menu as AriaMenu,\n MenuTrigger,\n OverlayTriggerStateContext,\n PopoverContext,\n useContextProps,\n} from \"react-aria-components\";\n\nimport { usePortalContainer } from \"../../hooks\";\nimport { ActionButton } from \"../ActionButton\";\nimport { PopoverContent } from \"../Popover/PopoverContent\";\nimport { classNames } from \"../../utils\";\nimport { menuContentCn } from \"./Menu.css\";\nimport { ListOption, ListSection } from \"../UNSAFE_ListBox/ListBoxUI\";\n\nimport type { MenuProps } from \"./Menu.types\";\n\nexport const Menu = React.forwardRef<HTMLDivElement, MenuProps>(\n (\n {\n defaultOpen,\n onOpenChange,\n isOpen,\n isDisabled,\n contentClassName,\n placement = \"bottom start\",\n isNonModal,\n shouldFlip,\n shouldUpdatePosition,\n boundaryElement,\n crossOffset,\n offset,\n triggerLabel,\n renderTrigger = ({ buttonProps, ref }) => (\n <ActionButton {...buttonProps} variant=\"popover\" ref={ref} />\n ),\n portalContainer,\n ...props\n },\n ref,\n ) => {\n const _portalContainer = usePortalContainer(portalContainer);\n\n useEffect(() => {\n if (!triggerLabel && !renderTrigger) {\n console.warn(\n \"The `triggerLabel` prop is required when no `renderTrigger` or `children` is provided.\",\n );\n }\n }, [renderTrigger, triggerLabel]);\n\n return (\n <MenuTrigger\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n isOpen={isOpen}\n >\n <MyTrigger\n isDisabled={isDisabled}\n renderTrigger={renderTrigger}\n triggerLabel={triggerLabel}\n />\n <MyPopover\n placement={placement}\n isNonModal={isNonModal}\n shouldFlip={shouldFlip}\n shouldUpdatePosition={shouldUpdatePosition}\n boundaryElement={boundaryElement}\n crossOffset={crossOffset}\n offset={offset || 2}\n className=\"BaselineUI-Menu-Popover\"\n portalContainer={_portalContainer}\n >\n <AriaMenu\n {...props}\n className={classNames(menuContentCn, contentClassName)}\n ref={ref}\n >\n {props.items.map((item) =>\n \"children\" in item ? (\n <ListSection\n key={item.id}\n section={item}\n componentName=\"Menu\"\n />\n ) : (\n <ListOption key={item.id} item={item} componentName=\"Menu\" />\n ),\n )}\n </AriaMenu>\n </MyPopover>\n </MenuTrigger>\n );\n },\n);\n\nconst MyTrigger = React.forwardRef<\n HTMLButtonElement,\n Pick<MenuProps, \"renderTrigger\" | \"triggerLabel\" | \"isDisabled\">\n>(({ renderTrigger, triggerLabel, isDisabled, ...props }, ref) => {\n const state = useContext(OverlayTriggerStateContext);\n\n return renderTrigger?.({\n buttonProps: {\n ...props,\n isDisabled,\n label:\n typeof triggerLabel === \"function\"\n ? triggerLabel(state?.isOpen || false)\n : triggerLabel,\n isOpen: state?.isOpen || false,\n className: \"BaselineUI-Menu-Trigger\",\n },\n ref: ref as React.RefObject<HTMLButtonElement>,\n });\n});\n\nMyTrigger.displayName = \"MyTrigger\";\n\nconst MyPopover = ({ children, ...props }) => {\n const state = useContext(OverlayTriggerStateContext);\n const [popoverProps] = useContextProps(props, undefined, PopoverContext);\n\n return state?.isOpen ? (\n <PopoverContent {...popoverProps} state={state}>\n {children}\n </PopoverContent>\n ) : null;\n};\n\nMenu.displayName = \"Menu\";\n",
38
38
  "MessageFormat": "import React, { Fragment } from \"react\";\n\nimport { invariant } from \"../../utils\";\nimport { useI18n } from \"../../hooks/useI18n\";\n\nimport type { MessageFormatProps } from \"./MessageFormat.types\";\n\nexport const MessageFormat: React.FC<MessageFormatProps> = ({\n id,\n defaultMessage,\n elementType: ElementType = Fragment,\n}) => {\n invariant(id || defaultMessage, \"`id` or `defaultMessage` is required.\");\n const intl = useI18n();\n\n return <ElementType>{intl.formatMessage(id) || defaultMessage}</ElementType>;\n};\n\nMessageFormat.displayName = \"MessageFormat\";\n",
39
39
  "Modal": "import React, { useMemo } from \"react\";\nimport { useOverlayTrigger } from \"react-aria\";\nimport { useOverlayTriggerState } from \"react-stately\";\n\nimport type { OverlayTriggerState } from \"react-stately\";\nimport type { AriaButtonProps } from \"react-aria\";\nimport type { DOMProps } from \"@react-types/shared\";\nimport type { ModalProps } from \"./Modal.types\";\n\nexport const ModalContext = React.createContext<{\n state: OverlayTriggerState | null;\n triggerProps: AriaButtonProps<\"button\">;\n overlayProps?: DOMProps;\n}>({\n state: null,\n triggerProps: {},\n overlayProps: {},\n});\n\nexport const Modal: React.FC<ModalProps> = ({ children, ...rest }) => {\n const state = useOverlayTriggerState(rest);\n const { triggerProps, overlayProps } = useOverlayTrigger(\n { type: \"dialog\" },\n state,\n );\n\n const modalContextValue = useMemo(\n () => ({\n state,\n triggerProps,\n overlayProps,\n }),\n [state, triggerProps, overlayProps],\n );\n\n return (\n <ModalContext.Provider value={modalContextValue}>\n {children}\n </ModalContext.Provider>\n );\n};\n\nModal.displayName = \"Modal\";\n",
40
40
  "NumberFormat": "import React from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\n\nimport type { NumberFormatProps } from \"./NumberFormat.types\";\n\nexport const NumberFormat: React.FC<NumberFormatProps> = ({\n value,\n ...props\n}) => {\n const formatter = useNumberFormatter(props);\n return <>{formatter.format(value)}</>;\n};\n\nNumberFormat.displayName = \"NumberFormat\";\n",
@@ -52,7 +52,7 @@
52
52
  "Reaction": "import { CheckmarkIcon as CMIMed } from \"@baseline-ui/icons/20\";\nimport { CheckmarkIcon as CMISm } from \"@baseline-ui/icons/16\";\nimport React from \"react\";\nimport { VisuallyHidden, useFocusRing, useHover, useSwitch } from \"react-aria\";\nimport { useToggleState } from \"react-stately\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { NumberFormat } from \"../NumberFormat\";\nimport {\n labelCn,\n reactionCn,\n reactionCountCn,\n reactionIconWrapperCn,\n} from \"./Reaction.css\";\n\nimport type { ToggleProps } from \"react-stately\";\nimport type { AriaToggleButtonProps } from \"react-aria\";\nimport type { ReactionProps } from \"./Reaction.types\";\n\nexport const Reaction = React.forwardRef<HTMLLabelElement, ReactionProps>(\n (\n {\n className,\n count,\n style,\n size = \"md\",\n icon,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n ...rest\n },\n ref,\n ) => {\n const shared = {\n isRequired: false,\n } as AriaToggleButtonProps & ToggleProps;\n\n const Icon = icon || (size === \"md\" ? CMIMed : CMISm);\n\n if (!rest[\"aria-label\"] && !rest[\"aria-labelledby\"]) {\n console.warn(\n \"You must provide either an `aria-label` or `aria-labelledby` prop to the `Reaction` component.\",\n );\n }\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const state = useToggleState({ ...rest, ...shared });\n const { inputProps, isPressed, isDisabled, isReadOnly, isSelected } =\n useSwitch({ ...rest, ...shared }, state, inputRef);\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const { hoverProps, isHovered } = useHover({});\n\n const dataAttrs = filterTruthyValues({\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-focused\": isFocused,\n \"data-focus-visible\": isFocusVisible,\n \"data-disabled\": isDisabled,\n \"data-hovered\": isHovered,\n \"data-pressed\": isPressed,\n \"data-selected\": isSelected,\n });\n\n return (\n <label\n ref={ref}\n style={style}\n className={classNames(labelCn, \"BaselineUI-Reaction\", className)}\n {...dataAttrs}\n >\n <VisuallyHidden>\n <input {...inputProps} {...focusProps} ref={inputRef} />\n </VisuallyHidden>\n <div\n {...hoverProps}\n className={reactionCn({\n isSelected,\n isFocusVisible,\n isHovered,\n isReadOnly,\n isDisabled,\n })}\n >\n <div\n className={reactionIconWrapperCn({\n isDisabled,\n isReadOnly,\n })}\n >\n <Icon size={size === \"md\" ? 20 : 16} />\n </div>\n <div\n className={reactionCountCn({\n isSelected: state.isSelected,\n isDisabled,\n isReadOnly,\n size,\n })}\n >\n <NumberFormat value={count} />\n </div>\n </div>\n </label>\n );\n },\n);\n\nReaction.displayName = \"Reaction\";\n",
53
53
  "ScrollControlButton": "import { ArrowDownCircleFilledIcon } from \"@baseline-ui/icons/16\";\nimport { useInteractionModality } from \"@react-aria/interactions\";\nimport { getOwnerDocument, getOwnerWindow, mergeRefs } from \"@react-aria/utils\";\nimport React, { useCallback, useEffect } from \"react\";\nimport { mergeProps, useButton, useFocusRing, useHover } from \"react-aria\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { iconColorCn, tagCn, textColorCn } from \"../TagGroup/TagGroup.css\";\nimport { scrollControlButtonCn } from \"./ScrollControlButton.css\";\n\nimport type { ScrollControlButtonProps } from \"./ScrollControlButton.types\";\n\n// Since not all browsers calculate scroll height same way, we need to add a buffer to the bottom of the scroll.\nconst SCROLL_BUFFER = 2;\n\nexport const ScrollControlButton = React.forwardRef<\n HTMLButtonElement,\n ScrollControlButtonProps\n>(\n (\n {\n className,\n style,\n hideForKeyboard,\n scrollRef,\n label,\n delay = 1500,\n smoothScroll = true,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n },\n ref,\n ) => {\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const modality = useInteractionModality();\n const [isScrolling, setIsScrolling] = React.useState(false);\n const getIsAtBottom = useCallback(() => {\n const scrollElement =\n scrollRef?.current || getOwnerDocument(buttonRef.current).body;\n\n // we need to check if scrollElement is using column-reverse direction\n // because scrollHeight is calculated differently in that case\n const scrollElementComputedStyle =\n getOwnerWindow(scrollElement).getComputedStyle(scrollElement);\n\n if (scrollElementComputedStyle.flexDirection === \"column-reverse\") {\n return scrollElement.scrollTop + SCROLL_BUFFER >= 0;\n }\n\n return (\n scrollElement.scrollTop + scrollElement.clientHeight + SCROLL_BUFFER >=\n scrollElement.scrollHeight\n );\n }, [scrollRef]);\n const [isAtBottom, setIsAtBottom] = React.useState(getIsAtBottom);\n\n const { buttonProps, isPressed } = useButton(\n {\n onPress: () => {\n const scrollElement =\n scrollRef?.current || getOwnerDocument(buttonRef.current).body;\n\n scrollElement.scrollTo({\n top: scrollElement.scrollHeight,\n behavior: smoothScroll ? \"smooth\" : \"auto\",\n });\n },\n },\n buttonRef,\n );\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const { hoverProps, isHovered } = useHover({});\n\n const dataAttrs = filterTruthyValues({\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-pressed\": isPressed,\n \"data-focus-visible\": isFocusVisible,\n \"data-hovered\": isHovered,\n \"data-focused\": isFocused,\n });\n\n useEffect(() => {\n setIsAtBottom(getIsAtBottom());\n }, [getIsAtBottom]);\n\n useEffect(() => {\n const scrollElement =\n scrollRef?.current || getOwnerDocument(buttonRef.current).body;\n\n const isScrollendSupported =\n \"onscrollend\" in getOwnerWindow(scrollElement);\n\n const handleScrollend = () => {\n setTimeout(() => {\n setIsScrolling(false);\n setIsAtBottom(getIsAtBottom());\n }, delay);\n };\n\n const scrollHandler = () => {\n setIsScrolling(true);\n if (!isScrollendSupported) {\n handleScrollend();\n }\n };\n\n scrollElement.addEventListener(\"scroll\", scrollHandler);\n scrollElement.addEventListener(\"scrollend\", handleScrollend);\n\n return () => {\n scrollElement.removeEventListener(\"scroll\", scrollHandler);\n scrollElement.removeEventListener(\"scrollend\", handleScrollend);\n };\n }, [scrollRef, delay, getIsAtBottom]);\n\n return (\n <AnimatePresence initial={false}>\n {(hideForKeyboard ? modality !== \"keyboard\" : true) &&\n !isScrolling &&\n !isAtBottom ? (\n <motion.button\n initial={{\n opacity: 0,\n transform: \"translateX(-50%) translateY(10px)\",\n }}\n animate={{\n opacity: 1,\n transform: \"translateX(-50%) translateY(0)\",\n }}\n exit={{\n opacity: 0,\n transform: \"translateX(-50%) translateY(10px)\",\n }}\n transition={{ duration: 0.3 }}\n {...(mergeProps(\n buttonProps,\n focusProps,\n hoverProps,\n dataAttrs,\n ) as React.ComponentProps<typeof motion.button>)}\n className={classNames(\n scrollControlButtonCn,\n tagCn({\n isFocusVisible,\n variant: \"high-contrast\",\n isHovered,\n }),\n textColorCn({ variant: \"high-contrast\" }),\n \"BaselineUI-ScrollControlButton\",\n className,\n )}\n style={style}\n ref={mergeRefs(ref, buttonRef)}\n >\n <ArrowDownCircleFilledIcon\n size={16}\n className={iconColorCn({ variant: \"high-contrast\" })}\n />\n {label}\n </motion.button>\n ) : null}\n </AnimatePresence>\n );\n },\n);\n\nScrollControlButton.displayName = \"ScrollControlButton\";\n",
54
54
  "SearchInput": "import { XIcon } from \"@baseline-ui/icons/16\";\nimport { XIcon as XIcon12 } from \"@baseline-ui/icons/12\";\nimport { SearchIcon } from \"@baseline-ui/icons/24\";\nimport { SearchIcon as SI20 } from \"@baseline-ui/icons/20\";\nimport React from \"react\";\nimport { mergeProps, useFocusRing, useSearchField } from \"react-aria\";\nimport { useSearchFieldState } from \"react-stately\";\nimport { FieldInputContext } from \"react-aria-components\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport {\n removeDataAttributes,\n useContextProps,\n} from \"react-aria-components/src/utils\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { ActionIconButton } from \"../ActionIconButton\";\nimport { inputCn, searchCn } from \"./SearchInput.css\";\n\nimport type { SearchInputProps } from \"./SearchInput.types\";\n\nconst sizeToIconMap = {\n sm: SI20,\n md: SearchIcon,\n lg: SearchIcon,\n};\n\nexport const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(\n (\n {\n className,\n size = \"md\",\n variant = \"primary\",\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n style,\n isClearFocusable = false,\n ...props\n },\n ref,\n ) => {\n let searchFieldRef = React.useRef<HTMLInputElement>(null);\n\n [props, searchFieldRef as unknown] = useContextProps(\n props,\n searchFieldRef,\n FieldInputContext,\n );\n\n const state = useSearchFieldState(props);\n\n const { inputProps, clearButtonProps } = useSearchField(\n {\n ...removeDataAttributes(props),\n \"aria-haspopup\": false,\n \"aria-autocomplete\": \"none\",\n type: \"search\",\n },\n state,\n searchFieldRef,\n );\n\n const { focusProps, isFocusVisible, isFocused } = useFocusRing({\n within: true,\n isTextInput: true,\n });\n\n const Icon = sizeToIconMap[size];\n\n const CloseIcon = size === \"sm\" ? XIcon12 : XIcon;\n\n const dataAttrs = filterTruthyValues({\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-focused\": isFocused,\n \"data-disabled\": props.isDisabled,\n \"data-focus-visible\": isFocusVisible,\n });\n\n const domProps = filterDOMProps(props, { global: true });\n delete domProps.id;\n\n return (\n <div\n {...domProps}\n {...dataAttrs}\n className={classNames(\n searchCn({\n size,\n isFocused,\n variant,\n hasText: !!state.value,\n isDisabled: props.isDisabled,\n }),\n \"BaselineUI-SearchInput\",\n className,\n )}\n style={style}\n ref={ref}\n >\n <Icon size={size === \"sm\" ? 20 : 24} />\n <input\n {...mergeProps(inputProps, focusProps)}\n className={inputCn}\n ref={searchFieldRef}\n />\n {state.value !== \"\" && (\n <ActionIconButton\n icon={CloseIcon}\n {...clearButtonProps}\n size={size === \"sm\" ? \"xs\" : \"sm\"}\n variant=\"secondary\"\n isExcludedFromRovingFocus={!isClearFocusable}\n excludeFromTabOrder={!isClearFocusable}\n {...(isClearFocusable\n ? {\n onPressStart: (e) => {\n clearButtonProps.onPressStart?.(e);\n clearButtonProps.onPress?.(e);\n },\n }\n : {})}\n />\n )}\n </div>\n );\n },\n);\n\nSearchInput.displayName = \"SearchInput\";\n",
55
- "Select": "import React, { useContext, useEffect } from \"react\";\nimport { HiddenSelect, mergeProps, useSelect } from \"react-aria\";\nimport { useSelectState } from \"react-stately\";\nimport {\n AutocompleteStateContext,\n CollectionRendererContext,\n ListBoxContext,\n ListStateContext,\n} from \"react-aria-components\";\nimport { removeDataAttributes } from \"react-aria-components/src/utils\";\n\nimport { classNames, invariant } from \"../../utils\";\nimport { defineMessages, useI18n, usePortalContainer } from \"../../hooks\";\nimport { UNSAFE_ListBox as ListBox } from \"../UNSAFE_ListBox\";\nimport { PopoverContent } from \"../Popover/PopoverContent\";\nimport {\n actionButtonCn,\n footerContainerCn,\n listBoxCn,\n popoverContentCn,\n searchCn,\n} from \"./Select.css\";\nimport { SelectButton } from \"./SelectButton\";\nimport {\n textInputLabelCn,\n textInputLabelContainerCn,\n textInputRootCn,\n} from \"../TextInput/TextInput.css\";\nimport { getMessage } from \"../TextInput/utils/getMessage\";\nimport { ListCollectionBuilder } from \"../shared/components/ListCollectionBuilder\";\nimport { ListBoxItemContent } from \"../UNSAFE_ListBox/ListBox\";\nimport { ActionButton } from \"../ActionButton\";\nimport { Box } from \"../Box\";\nimport { Separator } from \"../Separator\";\nimport { SearchInput } from \"../SearchInput\";\n\nimport type { ListItem, ListOption } from \"../shared/types/List\";\nimport type { SelectState } from \"react-stately\";\nimport type { SelectProps } from \"./Select.types\";\nimport type { Node } from \"@react-types/shared\";\n\nexport const SelectContext = React.createContext<{\n state: SelectState<ListItem> | null;\n popoverAnchorRef: React.RefObject<HTMLElement> | null;\n}>({ state: null, popoverAnchorRef: null });\n\nconst SelectCore = React.forwardRef<\n HTMLDivElement,\n SelectProps & {\n state: SelectState<ListItem>;\n }\n>(\n (\n {\n className,\n style,\n labelPosition = \"top\",\n variant = \"primary\",\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n onTriggerPress,\n placement = \"bottom start\",\n triggerClassName,\n triggerStyle,\n state,\n optionStyle,\n optionClassName,\n hideSelectAll,\n hideClear,\n renderTrigger = ({\n buttonProps,\n selectedValue,\n valueProps,\n isOpen,\n ref,\n selectionMode,\n onRemove,\n maxCount,\n }) => {\n return (\n <SelectButton\n {...buttonProps}\n className={triggerClassName}\n style={triggerStyle}\n isOpen={isOpen}\n isReadOnly={rest.isReadOnly}\n ref={ref}\n variant={variant}\n validationState={rest.validationState}\n valueProps={valueProps}\n value={selectedValue}\n fallbackValue={rest.placeholder}\n selectionMode={selectionMode}\n onRemove={onRemove}\n maxCount={maxCount}\n />\n );\n },\n ...rest\n },\n ref,\n ) => {\n const { popoverAnchorRef } = useContext(SelectContext);\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const { formatMessage } = useI18n();\n const autoCompleteContext = useContext(AutocompleteStateContext);\n const { isVirtualized } = useContext(CollectionRendererContext);\n\n const _portalContainer = usePortalContainer(rest.portalContainer);\n const {\n labelProps,\n triggerProps,\n valueProps,\n menuProps,\n descriptionProps,\n errorMessageProps,\n } = useSelect(\n {\n ...removeDataAttributes(rest),\n validationState: rest.validationState === \"error\" ? \"invalid\" : \"valid\",\n },\n state,\n triggerRef,\n );\n\n const message = getMessage({\n ...rest,\n descriptionProps,\n errorMessageProps,\n labelPosition,\n });\n\n const selectedValue =\n (state.selectedItems as Node<ListOption>[])?.map(\n (item) => item.value as ListOption,\n ) ?? null;\n\n return (\n <>\n <div\n style={style}\n className={classNames(\n textInputRootCn({ labelPosition }),\n \"BaselineUI-Select\",\n className,\n )}\n data-block-id={dataBlockId}\n data-block-class={dataBlockClass}\n ref={ref}\n >\n {rest.label || message ? (\n <div\n className={textInputLabelContainerCn({\n labelPosition,\n hasMessage: !!message,\n })}\n >\n {rest.label ? (\n <div\n {...labelProps}\n className={classNames(\n textInputLabelCn,\n \"BaselineUI-Select-Label\",\n )}\n >\n {rest.label}\n </div>\n ) : null}\n\n {labelPosition === \"start\" && message}\n </div>\n ) : null}\n <HiddenSelect\n state={state}\n triggerRef={triggerRef}\n isDisabled={rest.isDisabled}\n label={rest.label}\n name={rest.name}\n />\n\n {renderTrigger({\n buttonProps: mergeProps(\n {\n onPressStart: onTriggerPress,\n \"aria-labelledby\": labelProps.id,\n },\n triggerProps,\n ),\n selectedValue,\n valueProps,\n isOpen: state.isOpen,\n ref: triggerRef,\n selectionMode: rest.selectionMode ?? \"single\",\n onRemove: (keys) => {\n state.selectionManager.setSelectedKeys(\n new Set(\n [...state.selectionManager.selectedKeys].filter(\n (key) => !keys.has(key),\n ),\n ),\n );\n },\n maxCount: rest.maxCount ?? 2,\n })}\n\n {labelPosition === \"top\" && message}\n </div>\n\n {state ? (\n <ListStateContext.Provider value={state}>\n <PopoverContent\n placement={placement}\n state={state}\n portalContainer={_portalContainer}\n offset={2}\n triggerRef={popoverAnchorRef || triggerRef}\n style={style}\n className=\"BaselineUI-Select-Popover\"\n {...rest}\n >\n <Box\n display=\"flex\"\n flex={1}\n flexDirection=\"column\"\n className={popoverContentCn}\n >\n {autoCompleteContext ? (\n <>\n <SearchInput\n size=\"sm\"\n aria-label={formatMessage(messages.search)}\n placeholder={formatMessage(messages.search)}\n className={classNames(\n searchCn,\n \"BaselineUI-Select-SearchInput\",\n )}\n autoFocus={true}\n />\n <Separator />\n </>\n ) : null}\n\n <ListBoxContext.Provider value={menuProps}>\n <ListBox\n label={rest.label}\n escapeKeyBehavior=\"none\"\n className={listBoxCn({ isVirtualized })}\n optionStyle={optionStyle}\n optionClassName={optionClassName}\n />\n </ListBoxContext.Provider>\n {state.selectionManager.selectionMode === \"multiple\" &&\n (!hideSelectAll || !hideClear) && (\n <Box\n display=\"flex\"\n flexDirection=\"row\"\n className={footerContainerCn}\n >\n {!hideSelectAll && (\n <ActionButton\n variant=\"ghost\"\n size=\"md\"\n label={formatMessage(messages.selectAll)}\n onPress={() => {\n if (state.selectionManager.isSelectAll) return;\n // Select all enabled items only (exclude disabled keys)\n const allKeys = [...state.collection.getKeys()];\n const enabledKeys = allKeys.filter(\n (key) =>\n !state.selectionManager.disabledKeys.has(key) &&\n state.selectionManager.canSelectItem(key),\n );\n state.selectionManager.setSelectedKeys(\n new Set(enabledKeys),\n );\n }}\n className={actionButtonCn}\n />\n )}\n {!hideSelectAll && !hideClear && (\n <Separator orientation=\"vertical\" />\n )}\n {!hideClear && (\n <ActionButton\n variant=\"ghost\"\n label={formatMessage(messages.clear)}\n size=\"md\"\n onPress={() => {\n if (state.selectionManager.isEmpty) return;\n state.selectionManager.clearSelection();\n }}\n className={actionButtonCn}\n />\n )}\n </Box>\n )}\n </Box>\n </PopoverContent>\n </ListStateContext.Provider>\n ) : null}\n </>\n );\n },\n);\n\nSelectCore.displayName = \"SelectCore\";\n\nconst SelectStandalone = React.forwardRef<HTMLDivElement, SelectProps>(\n ({ collection, ...props }, ref) => {\n const state = useSelectState({\n ...props,\n collection,\n validationState: props.validationState === \"error\" ? \"invalid\" : \"valid\",\n children: undefined,\n });\n\n return <SelectCore {...props} ref={ref} state={state} />;\n },\n);\n\nSelectStandalone.displayName = \"SelectStandalone\";\n\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>(\n ({ optionStyle, optionClassName, ...props }, ref) => {\n const { state } = useContext(SelectContext);\n\n useEffect(() => {\n invariant(\n state || props.items,\n \"Select: A `state` that can be passed via context or `items` are required.\",\n );\n }, [props.items, state]);\n\n return state ? (\n <SelectCore\n {...props}\n optionStyle={optionStyle}\n optionClassName={optionClassName}\n ref={ref}\n state={state}\n />\n ) : (\n <ListCollectionBuilder\n items={props.items}\n listBoxProps={{\n renderOption: (item, props) => (\n <ListBoxItemContent\n {...props}\n item={item}\n selectionIcon={\n props.selectionMode === \"multiple\" ? \"checkbox\" : \"checkmark\"\n }\n />\n ),\n optionStyle,\n optionClassName,\n }}\n >\n {(collection) => (\n <SelectStandalone collection={collection} {...props} ref={ref} />\n )}\n </ListCollectionBuilder>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n\nconst messages = defineMessages({\n selectAll: {\n id: \"selectAll\",\n defaultMessage: \"Select All\",\n },\n clear: {\n id: \"clear\",\n defaultMessage: \"Clear\",\n },\n search: {\n id: \"search\",\n defaultMessage: \"Search\",\n },\n});\n",
55
+ "Select": "import React, { useContext, useEffect } from \"react\";\nimport { HiddenSelect, mergeProps, useSelect } from \"react-aria\";\nimport { useSelectState } from \"react-stately\";\nimport {\n AutocompleteStateContext,\n CollectionRendererContext,\n ListBoxContext,\n ListStateContext,\n} from \"react-aria-components\";\nimport { removeDataAttributes } from \"react-aria-components/src/utils\";\n\nimport { classNames, invariant } from \"../../utils\";\nimport { defineMessages, useI18n, usePortalContainer } from \"../../hooks\";\nimport { UNSAFE_ListBox as ListBox } from \"../UNSAFE_ListBox\";\nimport { PopoverContent } from \"../Popover/PopoverContent\";\nimport {\n actionButtonCn,\n footerContainerCn,\n listBoxCn,\n popoverContentCn,\n searchCn,\n} from \"./Select.css\";\nimport { SelectButton } from \"./SelectButton\";\nimport {\n textInputLabelCn,\n textInputLabelContainerCn,\n textInputRootCn,\n} from \"../TextInput/TextInput.css\";\nimport { getMessage } from \"../TextInput/utils/getMessage\";\nimport { ListCollectionBuilder } from \"../shared/components/ListCollectionBuilder\";\nimport { ActionButton } from \"../ActionButton\";\nimport { Box } from \"../Box\";\nimport { Separator } from \"../Separator\";\nimport { SearchInput } from \"../SearchInput\";\nimport { ListOptionContent } from \"../UNSAFE_ListBox/ListBoxUI\";\n\nimport type { ListItem, ListOption } from \"../shared/types/List\";\nimport type { SelectState } from \"react-stately\";\nimport type { SelectProps } from \"./Select.types\";\nimport type { Node } from \"@react-types/shared\";\n\nexport const SelectContext = React.createContext<{\n state: SelectState<ListItem> | null;\n popoverAnchorRef: React.RefObject<HTMLElement> | null;\n}>({ state: null, popoverAnchorRef: null });\n\nconst SelectCore = React.forwardRef<\n HTMLDivElement,\n SelectProps & {\n state: SelectState<ListItem>;\n }\n>(\n (\n {\n className,\n style,\n labelPosition = \"top\",\n variant = \"primary\",\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n onTriggerPress,\n placement = \"bottom start\",\n triggerClassName,\n triggerStyle,\n state,\n optionStyle,\n optionClassName,\n hideSelectAll,\n hideClear,\n renderTrigger = ({\n buttonProps,\n selectedValue,\n valueProps,\n isOpen,\n ref,\n selectionMode,\n onRemove,\n maxCount,\n }) => {\n return (\n <SelectButton\n {...buttonProps}\n className={triggerClassName}\n style={triggerStyle}\n isOpen={isOpen}\n isReadOnly={rest.isReadOnly}\n ref={ref}\n variant={variant}\n validationState={rest.validationState}\n valueProps={valueProps}\n value={selectedValue}\n fallbackValue={rest.placeholder}\n selectionMode={selectionMode}\n onRemove={onRemove}\n maxCount={maxCount}\n />\n );\n },\n ...rest\n },\n ref,\n ) => {\n const { popoverAnchorRef } = useContext(SelectContext);\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const { formatMessage } = useI18n();\n const autoCompleteContext = useContext(AutocompleteStateContext);\n const { isVirtualized } = useContext(CollectionRendererContext);\n\n const _portalContainer = usePortalContainer(rest.portalContainer);\n const {\n labelProps,\n triggerProps,\n valueProps,\n menuProps,\n descriptionProps,\n errorMessageProps,\n } = useSelect(\n {\n ...removeDataAttributes(rest),\n validationState: rest.validationState === \"error\" ? \"invalid\" : \"valid\",\n },\n state,\n triggerRef,\n );\n\n const message = getMessage({\n ...rest,\n descriptionProps,\n errorMessageProps,\n labelPosition,\n });\n\n const selectedValue =\n (state.selectedItems as Node<ListOption>[])?.map(\n (item) => item.value as ListOption,\n ) ?? null;\n\n return (\n <>\n <div\n style={style}\n className={classNames(\n textInputRootCn({ labelPosition }),\n \"BaselineUI-Select\",\n className,\n )}\n data-block-id={dataBlockId}\n data-block-class={dataBlockClass}\n ref={ref}\n >\n {rest.label || message ? (\n <div\n className={textInputLabelContainerCn({\n labelPosition,\n hasMessage: !!message,\n })}\n >\n {rest.label ? (\n <div\n {...labelProps}\n className={classNames(\n textInputLabelCn,\n \"BaselineUI-Select-Label\",\n )}\n >\n {rest.label}\n </div>\n ) : null}\n\n {labelPosition === \"start\" && message}\n </div>\n ) : null}\n <HiddenSelect\n state={state}\n triggerRef={triggerRef}\n isDisabled={rest.isDisabled}\n label={rest.label}\n name={rest.name}\n />\n\n {renderTrigger({\n buttonProps: mergeProps(\n {\n onPressStart: onTriggerPress,\n \"aria-labelledby\": labelProps.id,\n },\n triggerProps,\n ),\n selectedValue,\n valueProps,\n isOpen: state.isOpen,\n ref: triggerRef,\n selectionMode: rest.selectionMode ?? \"single\",\n onRemove: (keys) => {\n state.selectionManager.setSelectedKeys(\n new Set(\n [...state.selectionManager.selectedKeys].filter(\n (key) => !keys.has(key),\n ),\n ),\n );\n },\n maxCount: rest.maxCount ?? 2,\n })}\n\n {labelPosition === \"top\" && message}\n </div>\n\n {state ? (\n <ListStateContext.Provider value={state}>\n <PopoverContent\n placement={placement}\n state={state}\n portalContainer={_portalContainer}\n offset={2}\n triggerRef={popoverAnchorRef || triggerRef}\n style={style}\n className=\"BaselineUI-Select-Popover\"\n {...rest}\n >\n <Box\n display=\"flex\"\n flex={1}\n flexDirection=\"column\"\n className={popoverContentCn}\n >\n {autoCompleteContext ? (\n <>\n <SearchInput\n size=\"sm\"\n aria-label={formatMessage(messages.search)}\n placeholder={formatMessage(messages.search)}\n className={classNames(\n searchCn,\n \"BaselineUI-Select-SearchInput\",\n )}\n autoFocus={true}\n />\n <Separator />\n </>\n ) : null}\n\n <ListBoxContext.Provider value={menuProps}>\n <ListBox\n label={rest.label}\n escapeKeyBehavior=\"none\"\n className={listBoxCn({ isVirtualized })}\n optionStyle={optionStyle}\n optionClassName={optionClassName}\n />\n </ListBoxContext.Provider>\n {state.selectionManager.selectionMode === \"multiple\" &&\n (!hideSelectAll || !hideClear) && (\n <Box\n display=\"flex\"\n flexDirection=\"row\"\n className={footerContainerCn}\n >\n {!hideSelectAll && (\n <ActionButton\n variant=\"ghost\"\n size=\"md\"\n label={formatMessage(messages.selectAll)}\n onPress={() => {\n if (state.selectionManager.isSelectAll) return;\n // Select all enabled items only (exclude disabled keys)\n const allKeys = [...state.collection.getKeys()];\n const enabledKeys = allKeys.filter(\n (key) =>\n !state.selectionManager.disabledKeys.has(key) &&\n state.selectionManager.canSelectItem(key),\n );\n state.selectionManager.setSelectedKeys(\n new Set(enabledKeys),\n );\n }}\n className={actionButtonCn}\n />\n )}\n {!hideSelectAll && !hideClear && (\n <Separator orientation=\"vertical\" />\n )}\n {!hideClear && (\n <ActionButton\n variant=\"ghost\"\n label={formatMessage(messages.clear)}\n size=\"md\"\n onPress={() => {\n if (state.selectionManager.isEmpty) return;\n state.selectionManager.clearSelection();\n }}\n className={actionButtonCn}\n />\n )}\n </Box>\n )}\n </Box>\n </PopoverContent>\n </ListStateContext.Provider>\n ) : null}\n </>\n );\n },\n);\n\nSelectCore.displayName = \"SelectCore\";\n\nconst SelectStandalone = React.forwardRef<HTMLDivElement, SelectProps>(\n ({ collection, ...props }, ref) => {\n const state = useSelectState({\n ...props,\n collection,\n validationState: props.validationState === \"error\" ? \"invalid\" : \"valid\",\n children: undefined,\n });\n\n return <SelectCore {...props} ref={ref} state={state} />;\n },\n);\n\nSelectStandalone.displayName = \"SelectStandalone\";\n\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>(\n ({ optionStyle, optionClassName, ...props }, ref) => {\n const { state } = useContext(SelectContext);\n\n useEffect(() => {\n invariant(\n state || props.items,\n \"Select: A `state` that can be passed via context or `items` are required.\",\n );\n }, [props.items, state]);\n\n return state ? (\n <SelectCore\n {...props}\n optionStyle={optionStyle}\n optionClassName={optionClassName}\n ref={ref}\n state={state}\n />\n ) : (\n <ListCollectionBuilder\n items={props.items}\n listBoxProps={{\n renderOption: (item, props) => (\n <ListOptionContent\n {...props}\n item={item}\n selectionIcon={\n props.selectionMode === \"multiple\" ? \"checkbox\" : \"checkmark\"\n }\n />\n ),\n optionStyle,\n optionClassName,\n }}\n >\n {(collection) => (\n <SelectStandalone collection={collection} {...props} ref={ref} />\n )}\n </ListCollectionBuilder>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n\nconst messages = defineMessages({\n selectAll: {\n id: \"selectAll\",\n defaultMessage: \"Select All\",\n },\n clear: {\n id: \"clear\",\n defaultMessage: \"Clear\",\n },\n search: {\n id: \"search\",\n defaultMessage: \"Search\",\n },\n});\n",
56
56
  "Separator": "import React from \"react\";\nimport { useSeparator } from \"react-aria\";\n\nimport { classNames } from \"../../utils\";\nimport { separatorCn } from \"./Separator.css\";\n\nimport type { SeparatorProps } from \"./Separator.types\";\n\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n (\n {\n className,\n style,\n variant = \"primary\",\n orientation = \"horizontal\",\n UNSAFE_omitRole,\n elementType: ElementType = \"div\",\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n ...rest\n },\n ref,\n ) => {\n const { separatorProps } = useSeparator({\n ...rest,\n orientation,\n elementType: ElementType,\n });\n\n return (\n <ElementType\n {...separatorProps}\n // @ts-expect-error - `className` is not a valid prop for `ElementType`\n className={classNames(\n separatorCn({\n isVertical: orientation === \"vertical\",\n isSecondary: variant === \"secondary\",\n }),\n \"BaselineUI-Separator\",\n className,\n )}\n data-orientation={orientation}\n data-block-id={dataBlockId}\n data-block-class={dataBlockClass}\n style={style}\n role={UNSAFE_omitRole ? undefined : separatorProps.role}\n ref={ref}\n />\n );\n },\n);\n\nSeparator.displayName = \"Separator\";\n",
57
57
  "Slider": "import { mergeRefs } from \"@react-aria/utils\";\nimport React from \"react\";\nimport {\n VisuallyHidden,\n mergeProps,\n useFocusRing,\n useHover,\n useLocale,\n useNumberFormatter,\n useSlider,\n useSliderThumb,\n} from \"react-aria\";\nimport { useSliderState } from \"react-stately\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport {\n sliderCn,\n sliderContentCn,\n sliderHeaderCn as sliderHeaderCn,\n sliderLabelCn,\n sliderThumbCn,\n sliderThumbHandleCn,\n sliderTrackCn,\n sliderTrackHighlightCn,\n} from \"./Slider.css\";\nimport { NumberInput } from \"../NumberInput\";\n\nimport type { SliderState } from \"react-stately\";\nimport type { AriaSliderProps } from \"react-aria\";\nimport type { RefObject } from \"react\";\nimport type { SliderProps } from \"./Slider.types\";\n\nexport const Slider = React.forwardRef<HTMLDivElement, SliderProps>(\n (\n {\n className,\n style,\n onChange,\n onChangeEnd,\n numberFormatOptions,\n isDisabled,\n step,\n minValue,\n maxValue,\n value,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-details\": ariaDetails,\n \"aria-describedby\": ariaDescribedBy,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n defaultValue,\n isReadOnly,\n label,\n id,\n includeNumberInput,\n },\n ref,\n ) => {\n const trackRef = React.useRef<HTMLDivElement>(null);\n\n const multiProps = {\n onChange:\n onChange === undefined\n ? undefined\n : (vals: number[]) => {\n onChange(vals[0]);\n },\n isDisabled: isDisabled || isReadOnly,\n step,\n minValue,\n maxValue,\n onChangeEnd:\n onChangeEnd === undefined\n ? undefined\n : (vals: number[]) => {\n onChangeEnd(vals[0]);\n },\n value: value === undefined ? undefined : [value],\n defaultValue: defaultValue === undefined ? undefined : [defaultValue],\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-details\": ariaDetails,\n \"aria-describedby\": ariaDescribedBy,\n id,\n label,\n } as AriaSliderProps<number[]>;\n\n const numberFormatter = useNumberFormatter(numberFormatOptions);\n const state = useSliderState({\n ...multiProps,\n numberFormatter,\n });\n\n const { trackProps, groupProps, labelProps } = useSlider(\n multiProps,\n state,\n trackRef,\n );\n\n const numberInput = (\n <NumberInput\n variant=\"ghost\"\n showStepper={false}\n aria-label={ariaLabel}\n aria-labelledby={labelProps.id}\n value={state.getThumbValue(0)}\n formatOptions={numberFormatOptions}\n onChange={(val) => {\n state.setThumbValue(0, val);\n }}\n style={{ width: 55, textAlign: \"right\", flexShrink: 0 }}\n />\n );\n\n return (\n <div\n {...groupProps}\n style={style}\n data-block-id={dataBlockId}\n data-block-class={dataBlockClass}\n className={classNames(sliderCn, \"BaselineUI-Slider\", className)}\n >\n {label ? (\n <div className={sliderHeaderCn}>\n <label\n {...labelProps}\n className={classNames(\n sliderLabelCn({\n isDisabled,\n hasNumberInput: !!includeNumberInput,\n }),\n \"BaselineUI-Slider-Label\",\n )}\n >\n {label}\n </label>\n\n {includeNumberInput ? numberInput : null}\n </div>\n ) : null}\n <div className={sliderContentCn}>\n <div\n {...trackProps}\n className={classNames(sliderTrackCn, \"BaselineUI-Slider-Track\")}\n ref={mergeRefs(trackRef, ref)}\n data-testid=\"track\"\n >\n <Thumb\n state={state}\n trackRef={trackRef}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n />\n </div>\n\n {includeNumberInput && !label ? numberInput : null}\n </div>\n </div>\n );\n },\n);\n\nSlider.displayName = \"Slider\";\n\nfunction Thumb({\n state,\n trackRef,\n isDisabled,\n isReadOnly,\n}: {\n state: SliderState;\n trackRef: RefObject<HTMLDivElement>;\n isDisabled?: boolean;\n isReadOnly?: boolean;\n}) {\n const inputRef = React.useRef(null);\n const { thumbProps, inputProps, isDragging } = useSliderThumb(\n {\n trackRef,\n inputRef,\n },\n state,\n );\n\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const { hoverProps, isHovered } = useHover({ isDisabled });\n const { direction } = useLocale();\n\n const dataAttrs = filterTruthyValues({\n \"data-disabled\": isDisabled,\n \"data-readonly\": isReadOnly,\n \"data-hovered\": isHovered,\n \"data-focus-visible\": isFocusVisible,\n \"data-dragging\": isDragging,\n \"data-focused\": isFocused,\n });\n\n return (\n <>\n <div\n className={classNames(\n sliderTrackHighlightCn({\n isDisabled,\n isFocusVisible,\n active: isDragging,\n isHovered,\n }),\n \"BaselineUI-Slider-TrackHighlight\",\n )}\n style={{\n width:\n direction === \"rtl\"\n ? `calc(100% - ${thumbProps.style?.left})`\n : thumbProps.style?.left,\n }}\n data-testid=\"track-highlight\"\n />\n <div\n {...mergeProps(thumbProps, hoverProps, dataAttrs)}\n className={classNames(\n sliderThumbHandleCn,\n \"BaselineUI-Slider-ThumbHandle\",\n )}\n data-testid=\"thumb\"\n >\n <div\n className={classNames(\n sliderThumbCn({\n isDisabled,\n isFocusVisible,\n active: isDragging,\n isReadOnly,\n isHovered,\n }),\n \"BaselineUI-Slider-Thumb\",\n )}\n />\n <VisuallyHidden>\n <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n </VisuallyHidden>\n </div>\n </>\n );\n}\n",
58
58
  "Switch": "import React from \"react\";\nimport { useToggleState } from \"react-stately\";\nimport {\n VisuallyHidden,\n mergeProps,\n useFocusRing,\n useHover,\n useSwitch,\n} from \"react-aria\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport {\n switchCn,\n switchKnobCn,\n switchLabelCn,\n switchRootCn,\n switchStatusLabelCn,\n switchWrapperCn,\n} from \"./Switch.css\";\n\nimport type { SwitchProps } from \"./Switch.types\";\n\nexport const Switch = React.forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n className,\n label,\n labelPosition = \"top\",\n statusLabel,\n style,\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n ...rest\n },\n ref,\n ) => {\n const switchRef = React.useRef<HTMLInputElement>(null);\n const state = useToggleState(rest);\n const { inputProps, isPressed } = useSwitch(\n { ...rest, children: label },\n state,\n switchRef,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n const { hoverProps, isHovered } = useHover({ isDisabled: rest.isDisabled });\n\n const dataAttrs = filterTruthyValues({\n \"data-block-id\": dataBlockId,\n \"data-block-class\": dataBlockClass,\n \"data-focused\": isFocusVisible,\n \"data-disabled\": rest.isDisabled,\n \"data-focus-visible\": isFocusVisible,\n \"data-selected\": state.isSelected,\n \"data-readonly\": rest.isReadOnly,\n \"data-hovered\": isHovered,\n \"data-pressed\": isPressed,\n });\n\n const switchComponent = (\n <div\n className={classNames(\n switchCn({\n isSelected: state.isSelected,\n isDisabled: !!rest.isDisabled,\n isFocused: isFocusVisible,\n isReadOnly: !!rest.isReadOnly,\n }),\n \"BaselineUI-Switch-Track\",\n )}\n >\n <div\n className={classNames(\n switchKnobCn({\n isSelected: state.isSelected,\n isDisabled: rest.isDisabled,\n isReadOnly: rest.isReadOnly,\n }),\n \"BaselineUI-Switch-Knob\",\n )}\n data-testid=\"switch-knob\"\n />\n </div>\n );\n\n return (\n <label\n {...mergeProps(dataAttrs, hoverProps)}\n className={classNames(\n switchRootCn({\n labelPosition,\n }),\n \"BaselineUI-Switch\",\n className,\n )}\n style={style}\n ref={ref}\n >\n {label ? (\n <span\n className={classNames(switchLabelCn, \"BaselineUI-Switch-Label\")}\n >\n {label}\n </span>\n ) : null}\n <VisuallyHidden>\n <input {...mergeProps(inputProps, focusProps)} ref={switchRef} />\n </VisuallyHidden>\n\n {statusLabel ? (\n <div className={switchWrapperCn({ labelPosition })}>\n <span\n className={classNames(\n \"BaselineUI-Switch-Status-Label\",\n switchStatusLabelCn,\n )}\n >\n {state.isSelected ? statusLabel.on : statusLabel.off}\n </span>\n {switchComponent}\n </div>\n ) : (\n switchComponent\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = \"Switch\";\n",
package/dist/data/component-types.json CHANGED
@@ -34,7 +34,7 @@
34
34
  "Link": "type LinkProps = {\n/** Identifies the element (or elements) that describes the object. */\n \"aria-describedby\"?: string;\n/** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n \"aria-details\"?: string;\n/** Defines a string value that labels the current element. */\n \"aria-label\"?: string;\n/** Identifies the element (or elements) that labels the current element. */\n \"aria-labelledby\"?: string;\n/** Whether the element should receive focus on render. */\n \"autoFocus\"?: boolean;\n/** The children to render. */\n \"children\": ReactNode;\n/** The className applied to the root element of the component. */\n \"className\"?: string;\n/** Represents a data block group. This is similar to `data-block-id` but it\ndoesn't have to be unique just like `class`. This is used to group blocks\ntogether in the DOM and in the block map. It is added as a data attribute\n`data-block-class` to the root element of the block if a DOM node is\nrendered. */\n \"data-block-class\"?: string;\n/** The unique identifier for the block. This is used to identify the block in\nthe DOM and in the block map. It is added as a data attribute\n`data-block-id` to the root element of the block if a DOM node is\nrendered. */\n \"data-block-id\"?: string;\n/** Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). */\n \"download\"?: string | boolean;\n/** The HTML element used to render the link, e.g. 'a', or 'span'. */\n/** @default a */\n \"elementType\"?: string;\n/** A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). */\n \"href\"?: string;\n/** Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). */\n \"hrefLang\"?: string;\n/** Whether the link is disabled. */\n \"isDisabled\"?: boolean;\n \"key\"?: Key | null;\n/** Handler that is called when the element loses focus. */\n \"onBlur\"?: ((e: FocusEvent<Element, Element>) => void);\n/** **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`\nprovided for compatibility with other libraries. `onPress` provides \nadditional event details for non-mouse interactions. */\n \"onClick\"?: ((e: MouseEvent<FocusableElement, MouseEvent>) => void);\n/** Handler that is called when the element receives focus. */\n \"onFocus\"?: ((e: FocusEvent<Element, Element>) => void);\n/** Handler that is called when the element's focus status changes. */\n \"onFocusChange\"?: ((isFocused: boolean) => void);\n/** Handler that is called when a key is pressed. */\n \"onKeyDown\"?: ((e: KeyboardEvent) => void);\n/** Handler that is called when a key is released. */\n \"onKeyUp\"?: ((e: KeyboardEvent) => void);\n/** Handler that is called when the press is released over the target. */\n \"onPress\"?: ((e: PressEvent) => void);\n/** Handler that is called when the press state changes. */\n \"onPressChange\"?: ((isPressed: boolean) => void);\n/** Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target. */\n \"onPressEnd\"?: ((e: PressEvent) => void);\n/** Handler that is called when a press interaction starts. */\n \"onPressStart\"?: ((e: PressEvent) => void);\n/** Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not. */\n \"onPressUp\"?: ((e: PressEvent) => void);\n/** A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). */\n \"ping\"?: string;\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n \"ref\"?: LegacyRef<HTMLElement>;\n/** How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n \"referrerPolicy\"?: HTMLAttributeReferrerPolicy;\n/** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */\n \"rel\"?: string;\n/** Optional ARIA role, useful for specifying a different role for the link. */\n/** @default \"link\" */\n \"role\"?: AriaRole;\n/** Options for the configured client side router. */\n \"routerOptions\"?: undefined;\n/** The size of the link. */\n/** @default md */\n \"size\"?: \"sm\" | \"md\" | \"lg\";\n/** The style applied to the root element of the component. */\n \"style\"?: CSSProperties;\n/** The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n \"target\"?: HTMLAttributeAnchorTarget;\n/** The title of the link, for providing additional information. */\n \"title\"?: string;\n/** The type of the link. */\n/** @default body */\n \"type\"?: \"body\" | \"label\";\n/** The link's style variant. */\n/** @default default */\n \"variant\"?: \"default\" | \"inline\";\n}",
35
35
  "ListBox": "type ListBoxProps = {\n/** The drag types that the droppable collection accepts. If the collection accepts directories, include `DIRECTORY_DRAG_TYPE` in your array of allowed types. */\n/** @default 'all' */\n \"acceptedDragTypes\"?: \"all\" | (string | symbol)[];\n/** Identifies the element (or elements) that describes the object. */\n \"aria-describedby\"?: string;\n/** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n \"aria-details\"?: string;\n/** Defines a string value that labels the current element. */\n \"aria-label\"?: string;\n/** Identifies the element (or elements) that labels the current element. */\n \"aria-labelledby\"?: string;\n/** Whether to auto focus the listbox or an option. */\n \"autoFocus\"?: boolean | FocusStrategy;\n/** The className applied to the root element of the component. */\n \"className\"?: string;\n/** Represents a data block group. This is similar to `data-block-id` but it\ndoesn't have to be unique just like `class`. This is used to group blocks\ntogether in the DOM and in the block map. It is added as a data attribute\n`data-block-class` to the root element of the block if a DOM node is\nrendered. */\n \"data-block-class\"?: string;\n/** The unique identifier for the block. This is used to identify the block in\nthe DOM and in the block map. It is added as a data attribute\n`data-block-id` to the root element of the block if a DOM node is\nrendered. */\n \"data-block-id\"?: string;\n/** The initial selected keys in the collection (uncontrolled). */\n \"defaultSelectedKeys\"?: Iterable<Key> | \"all\";\n/** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */\n \"disabledKeys\"?: Iterable<Key>;\n/** Whether the collection allows empty selection. */\n \"disallowEmptySelection\"?: boolean;\n/** The CSS class name for the drop indicator. */\n \"dropIndicatorClassName\"?: string;\n/** The style of the drop indicator used in a component. */\n \"dropIndicatorStyle\"?: CSSProperties;\n/** Indicates whether reordering is enabled. */\n/** @default false */\n \"enableReorder\"?: boolean;\n/** Whether pressing the escape key should clear selection in the listbox or not.\n\nMost experiences should not modify this option as it eliminates a keyboard user's ability to\neasily clear selection. Only use if the escape key is being handled externally or should not\ntrigger selection clearing contextually. */\n/** @default 'clearSelection' */\n \"escapeKeyBehavior\"?: \"clearSelection\" | \"none\";\n/** A function that returns the items being dragged. */\n \"getItems\"?: ((keys: Set<Key>, items: object[]) => DragItem[]);\n/** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */\n \"id\"?: string;\n/** Whether the drag events should be disabled.\nWhether the drop events should be disabled. */\n \"isDisabled\"?: boolean;\n/** The items to render in the listbox. Items have the following shape:\n\n```ts\nexport type ListOption = {\n id: string;\n label: string;\n description?: string;\n icon?: React.FC<IconProps>;\n};\n\nexport type ListSection = {\n id: string;\n title?: string;\n type: \"section\";\n children: ListOption[];\n};\n\ntype ListItem = ListOption | ListSection;\n``` */\n \"items\"?: ListItem[];\n \"key\"?: Key | null;\n/** The label for the listbox. */\n \"label\"?: ReactNode;\n/** Whether the items are arranged in a stack or grid. */\n/** @default stack */\n \"layout\"?: \"grid\" | \"stack\";\n/** A delegate object that provides layout information for items in the collection.\nBy default this uses the DOM, but this can be overridden to implement things like\nvirtualized scrolling. */\n \"layoutDelegate\"?: LayoutDelegate;\n/** Handle to access the listbox methods. */\n \"listBoxHandle\"?: RefObject<ListHandle>;\n/** Handler that is called when a user performs an action on an item. The exact user event depends on\nthe collection's `selectionBehavior` prop and the interaction modality. */\n \"onAction\"?: ((key: Key) => void);\n/** Handler that is called when the element loses focus. */\n \"onBlur\"?: ((e: FocusEvent<Element, Element>) => void);\n/** Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation. */\n \"onDragEnd\"?: ((e: DraggableCollectionEndEvent) => void);\n/** Handler that is called when the drag is moved. */\n \"onDragMove\"?: ((e: DraggableCollectionMoveEvent) => void);\n/** Handler that is called when a drag operation is started. */\n \"onDragStart\"?: ((e: DraggableCollectionStartEvent) => void);\n/** Handler that is called when a valid drag is dropped on a drop target. When defined, this overrides other\ndrop handlers such as `onInsert`, and `onItemDrop`. */\n \"onDrop\"?: ((e: DroppableCollectionDropEvent) => void);\n/** Handler that is called when the element receives focus. */\n \"onFocus\"?: ((e: FocusEvent<Element, Element>) => void);\n/** Handler that is called when the element's focus status changes. */\n \"onFocusChange\"?: ((isFocused: boolean) => void);\n/** A custom keyboard event handler for drop targets. */\n \"onKeyDown\"?: ((e: KeyboardEvent) => void);\n/** Handler that is called when items are moved within the source collection.\nThis handler allows dropping both on or between items, and items may be\nmoved to a different parent item within a tree. */\n \"onMove\"?: ((e: DroppableCollectionReorderEvent) => void);\n/** Handler that is called when items are reordered within the collection.\nThis handler only allows dropping between items, not on items.\nIt does not allow moving items to a different parent item within a tree. */\n \"onReorder\"?: ((e: DroppableCollectionReorderEvent) => void);\n/** Handler that is called when the selection changes. */\n \"onSelectionChange\"?: ((keys: Selection) => void);\n/** The CSS class name for the option. */\n \"optionClassName\"?: string | ((item: ListOption<Record<string, any>>, state: UIState) => string);\n/** The style of the option. */\n \"optionStyle\"?: CSSProperties | ((item: ListOption<Record<string, any>>, state: UIState) => CSSProperties);\n/** The primary orientation of the items. Usually this is the direction that\nthe collection scrolls. */\n/** @default vertical */\n \"orientation\"?: Orientation;\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n \"ref\"?: LegacyRef<HTMLUListElement>;\n/** The custom render function for the drag preview. This can be used to render\na custom drag preview when dragging items. */\n \"renderDragPreview\"?: ((items: DragItem[]) => Element);\n/** Renders the drop indicator component. */\n \"renderDropIndicator\"?: ((options: { dropIndicatorProps: HTMLAttributes<HTMLLIElement>; isDropTarget: boolean; isHidden: boolean; orientation: Orientation; }, ref: RefObject<...>) => ReactNode);\n/** The custom render function for the listbox options.\n@param item Node<ListItem>\n@param options [OptionAria]()\n@param ref React.RefObject<HTMLLIElement> */\n \"renderOption\"?: ((item: Node<ListItem>, options: OptionAria & { showSelectedIcon?: boolean; _state: ListState<ListItem>; }, ref: Ref<...>) => ReactNode);\n/** The custom render function for the listbox sections.\n@param section ListSection\n@param ref React.RefObject<HTMLDivElement> */\n \"renderSectionHeader\"?: ((section: Node<ListItem>, ref: Ref<HTMLSpanElement>) => ReactNode);\n/** The CSS class name for the section. */\n \"sectionClassName\"?: string | ((item: ListSection<Record<string, any>>) => string);\n/** The style of the section. */\n \"sectionStyle\"?: CSSProperties | ((item: ListSection<Record<string, any>>) => CSSProperties);\n/** The currently selected keys in the collection (controlled). */\n \"selectedKeys\"?: Iterable<Key> | \"all\";\n/** How multiple selection should behave in the collection. */\n \"selectionBehavior\"?: SelectionBehavior;\n/** The type of selection that is allowed in the collection. */\n \"selectionMode\"?: SelectionMode;\n/** Whether options should be focused when the user hovers over them. */\n \"shouldFocusOnHover\"?: boolean;\n/** Whether focus should wrap around when the end/start is reached. */\n \"shouldFocusWrap\"?: boolean;\n/** Whether selection should occur on press up instead of press down. */\n \"shouldSelectOnPressUp\"?: boolean;\n/** Whether the listbox items should use virtual focus instead of being focused directly. */\n \"shouldUseVirtualFocus\"?: boolean;\n/** Whether to show each section title when provided. */\n/** @default false */\n \"showSectionHeader\"?: boolean;\n/** Whether to show the selected checkmark icon. */\n/** @default true */\n \"showSelectedIcon\"?: boolean;\n/** The style applied to the root element of the component. */\n \"style\"?: CSSProperties;\n/** Wether to add initial padding to section titles if shown. */\n/** @default false */\n \"withSectionHeaderPadding\"?: boolean;\n}",
36
36
  "Markdown": "type MarkdownProps = {\n/** The markdown to render. */\n \"children\": string;\n/** The className applied to the root element of the component. */\n \"className\"?: string;\n/** Represents a data block group. This is similar to `data-block-id` but it\ndoesn't have to be unique just like `class`. This is used to group blocks\ntogether in the DOM and in the block map. It is added as a data attribute\n`data-block-class` to the root element of the block if a DOM node is\nrendered. */\n \"data-block-class\"?: string;\n/** The unique identifier for the block. This is used to identify the block in\nthe DOM and in the block map. It is added as a data attribute\n`data-block-id` to the root element of the block if a DOM node is\nrendered. */\n \"data-block-id\"?: string;\n \"key\"?: Key | null;\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n \"ref\"?: LegacyRef<HTMLDivElement>;\n/** The flag to show the caret at the end */\n \"showCaret\"?: boolean;\n/** The style applied to the root element of the component. */\n \"style\"?: CSSProperties;\n}",
37
- "Menu": "type MenuProps = {\n/** Identifies the element (or elements) that describes the object. */\n \"aria-describedby\"?: string;\n/** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n \"aria-details\"?: string;\n/** Defines a string value that labels the current element. */\n \"aria-label\"?: string;\n/** Identifies the element (or elements) that labels the current element. */\n \"aria-labelledby\"?: string;\n/** Where the focus should be set. */\n \"autoFocus\"?: boolean | FocusStrategy;\n/** Element that that serves as the positioning boundary. */\n/** @default document.body */\n \"boundaryElement\"?: Element;\n/** The `className` property assigned to the root element of the component. */\n \"className\"?: string;\n/** The `className` property assigned to the content element of the component. */\n \"contentClassName\"?: string;\n/** The additional offset applied along the cross axis between the element and its\nanchor element. */\n/** @default 0 */\n \"crossOffset\"?: number;\n/** Whether the overlay is open by default (uncontrolled). */\n \"defaultOpen\"?: boolean;\n/** The initial selected keys in the collection (uncontrolled). */\n \"defaultSelectedKeys\"?: Iterable<Key> | \"all\";\n/** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */\n \"disabledKeys\"?: Iterable<Key>;\n/** Whether the collection allows empty selection. */\n \"disallowEmptySelection\"?: boolean;\n/** Whether pressing the escape key should clear selection in the menu or not.\n\nMost experiences should not modify this option as it eliminates a keyboard user's ability to\neasily clear selection. Only use if the escape key is being handled externally or should not\ntrigger selection clearing contextually. */\n/** @default 'clearSelection' */\n \"escapeKeyBehavior\"?: \"clearSelection\" | \"none\";\n/** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */\n \"id\"?: string;\n/** Whether menu trigger is disabled. */\n \"isDisabled\"?: boolean;\n/** Whether the popover is non-modal, i.e. elements outside the popover may be\ninteracted with by assistive technologies.\n\nMost popovers should not use this option as it may negatively impact the screen\nreader experience. Only use with components such as combobox, which are designed\nto handle this situation carefully. */\n \"isNonModal\"?: boolean;\n/** Whether the overlay is open by default (controlled). */\n \"isOpen\"?: boolean;\n/** The `className` property assigned to the item element of the component. */\n \"itemClassName\"?: string;\n/** A list of items to render in the menu. Items have the following shape:\n\n```ts\nexport type MenuOption = {\n id: string;\n label: string;\n keyboardShortcut?: string;\n icon?: React.FC<IconProps>;\n};\n\nexport type MenuSection = {\n id: string;\n title?: string;\n type: \"section\";\n children: MenuOption[];\n};\n\nexport type MenuItem = MenuOption | MenuSection;\n``` */\n \"items\": MenuItem[];\n \"key\"?: Key | null;\n/** The additional offset applied along the main axis between the element and its\nanchor element. */\n/** @default 0 */\n \"offset\"?: number;\n/** Handler that is called when an item is selected. */\n \"onAction\"?: ((key: Key) => void);\n/** Handler that is called when the menu should close after selecting an item. */\n \"onClose\"?: (() => void);\n/** Handler that is called when the overlay's open state changes. */\n \"onOpenChange\"?: ((isOpen: boolean) => void);\n/** Handler that is called when the selection changes. */\n \"onSelectionChange\"?: ((keys: Selection) => void);\n/** The placement of the element with respect to its anchor element. */\n/** @default bottom start */\n \"placement\"?: Placement;\n/** The container element for the popover. By default, the modal is rendered as\na child of the body element. */\n/** @default document.body */\n \"portalContainer\"?: HTMLElement;\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n \"ref\"?: LegacyRef<HTMLUListElement>;\n/** A function that renders the trigger element of the component. The default\nimplementation renders an `ActionButton` component.\n\n```tsx\n<Menu renderTrigger={({ buttonProps, ref }) => <ActionButton {...buttonProps} label=\"Label\" ref={ref} />\n``` */\n/** @default Function */\n \"renderTrigger\"?: ((options: { buttonProps: ActionButtonProps; ref: RefObject<HTMLButtonElement>; }) => ReactNode);\n/** The currently selected keys in the collection (controlled). */\n \"selectedKeys\"?: Iterable<Key> | \"all\";\n/** The type of selection that is allowed in the collection. */\n \"selectionMode\"?: SelectionMode;\n/** Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely. */\n/** @default true */\n \"shouldFlip\"?: boolean;\n/** Whether keyboard navigation is circular. */\n \"shouldFocusWrap\"?: boolean;\n/** Whether the overlay should update its position automatically. */\n/** @default true */\n \"shouldUpdatePosition\"?: boolean;\n/** How the menu is triggered. */\n/** @default 'press' */\n \"trigger\"?: MenuTriggerType;\n/** The label of the trigger element. This can be a string, a React node, or a\nfunction that accepts a boolean indicating whether the menu is open. */\n \"triggerLabel\"?: ReactNode | ((isOpen: boolean) => ReactNode);\n}",
37
+ "Menu": "type MenuProps = {\n/** Identifies the element (or elements) that describes the object. */\n \"aria-describedby\"?: string;\n/** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n \"aria-details\"?: string;\n/** Defines a string value that labels the current element. */\n \"aria-label\"?: string;\n/** Identifies the element (or elements) that labels the current element. */\n \"aria-labelledby\"?: string;\n/** Where the focus should be set. */\n \"autoFocus\"?: boolean | FocusStrategy;\n/** Element that that serves as the positioning boundary. */\n/** @default document.body */\n \"boundaryElement\"?: Element;\n/** The `className` property assigned to the root element of the component. */\n \"className\"?: string;\n/** The `className` property assigned to the content element of the component. */\n \"contentClassName\"?: string;\n/** The additional offset applied along the cross axis between the element and its\nanchor element. */\n/** @default 0 */\n \"crossOffset\"?: number;\n/** Whether the overlay is open by default (uncontrolled). */\n \"defaultOpen\"?: boolean;\n/** The initial selected keys in the collection (uncontrolled). */\n \"defaultSelectedKeys\"?: Iterable<Key> | \"all\";\n/** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */\n \"disabledKeys\"?: Iterable<Key>;\n/** Whether the collection allows empty selection. */\n \"disallowEmptySelection\"?: boolean;\n/** Whether pressing the escape key should clear selection in the menu or not.\n\nMost experiences should not modify this option as it eliminates a keyboard user's ability to\neasily clear selection. Only use if the escape key is being handled externally or should not\ntrigger selection clearing contextually. */\n/** @default 'clearSelection' */\n \"escapeKeyBehavior\"?: \"clearSelection\" | \"none\";\n/** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */\n \"id\"?: string;\n/** Whether menu trigger is disabled. */\n \"isDisabled\"?: boolean;\n/** Whether the popover is non-modal, i.e. elements outside the popover may be\ninteracted with by assistive technologies.\n\nMost popovers should not use this option as it may negatively impact the screen\nreader experience. Only use with components such as combobox, which are designed\nto handle this situation carefully. */\n \"isNonModal\"?: boolean;\n/** Whether the overlay is open by default (controlled). */\n \"isOpen\"?: boolean;\n/** The `className` property assigned to the item element of the component. */\n \"itemClassName\"?: string;\n/** A list of items to render in the menu. Items have the following shape:\n\n```ts\nexport type MenuOption = {\n id: string;\n label: string;\n keyboardShortcut?: string;\n icon?: React.FC<IconProps>;\n};\n\nexport type MenuSection = {\n id: string;\n title?: string;\n type: \"section\";\n children: MenuOption[];\n};\n\nexport type MenuItem = MenuOption | MenuSection;\n``` */\n \"items\": MenuItem[];\n \"key\"?: Key | null;\n/** The additional offset applied along the main axis between the element and its\nanchor element. */\n/** @default 0 */\n \"offset\"?: number;\n/** Handler that is called when an item is selected. */\n \"onAction\"?: ((key: Key) => void);\n/** Handler that is called when the menu should close after selecting an item. */\n \"onClose\"?: (() => void);\n/** Handler that is called when the overlay's open state changes. */\n \"onOpenChange\"?: ((isOpen: boolean) => void);\n/** Handler that is called when the selection changes. */\n \"onSelectionChange\"?: ((keys: Selection) => void);\n/** The placement of the element with respect to its anchor element. */\n/** @default bottom start */\n \"placement\"?: Placement;\n/** The container element for the popover. By default, the modal is rendered as\na child of the body element. */\n/** @default document.body */\n \"portalContainer\"?: HTMLElement;\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n \"ref\"?: LegacyRef<HTMLDivElement>;\n/** A function that renders the trigger element of the component. The default\nimplementation renders an `ActionButton` component.\n\n```tsx\n<Menu renderTrigger={({ buttonProps, ref }) => <ActionButton {...buttonProps} label=\"Label\" ref={ref} />\n``` */\n/** @default Function */\n \"renderTrigger\"?: ((options: { buttonProps: ActionButtonProps & { isOpen: boolean; }; ref: RefObject<HTMLButtonElement>; }) => ReactNode);\n/** The currently selected keys in the collection (controlled). */\n \"selectedKeys\"?: Iterable<Key> | \"all\";\n/** The type of selection that is allowed in the collection. */\n \"selectionMode\"?: SelectionMode;\n/** Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely. */\n/** @default true */\n \"shouldFlip\"?: boolean;\n/** Whether keyboard navigation is circular. */\n \"shouldFocusWrap\"?: boolean;\n/** Whether the overlay should update its position automatically. */\n/** @default true */\n \"shouldUpdatePosition\"?: boolean;\n/** How the menu is triggered. */\n/** @default 'press' */\n \"trigger\"?: MenuTriggerType;\n/** The label of the trigger element. This can be a string, a React node, or a\nfunction that accepts a boolean indicating whether the menu is open. */\n \"triggerLabel\"?: ReactNode | ((isOpen: boolean) => ReactNode);\n}",
38
38
  "MessageFormat": "type MessageFormatProps = {\n/** The default message to use if the message id is not found. */\n \"defaultMessage\"?: string;\n/** By default `<MessageFormat>` will render the formatted string into a\n`<React.Fragment>`. If you need to customize rendering, you can either wrap\nit with another React element (recommended), specify a different tagName\n(e.g., 'div') */\n \"elementType\"?: ElementType<any, keyof IntrinsicElements>;\n/** The id of the message to format. */\n \"id\": string;\n}",
39
39
  "Modal": "type ModalProps = {\n/** The contents of the modal. */\n \"children\": ReactNode;\n/** Whether the overlay is open by default (uncontrolled). */\n \"defaultOpen\"?: boolean;\n/** Whether the overlay is open by default (controlled). */\n \"isOpen\"?: boolean;\n/** Handler that is called when the overlay's open state changes. */\n \"onOpenChange\"?: ((isOpen: boolean) => void);\n}",
40
40
  "NumberFormat": "type NumberFormatProps = {\n \"compactDisplay\"?: \"short\" | \"long\";\n \"currency\"?: string;\n \"currencyDisplay\"?: keyof NumberFormatOptionsCurrencyDisplayRegistry;\n \"currencySign\"?: \"standard\" | \"accounting\";\n \"localeMatcher\"?: \"lookup\" | \"best fit\";\n \"maximumFractionDigits\"?: number;\n \"maximumSignificantDigits\"?: number;\n \"minimumFractionDigits\"?: number;\n \"minimumIntegerDigits\"?: number;\n \"minimumSignificantDigits\"?: number;\n \"notation\"?: \"standard\" | \"scientific\" | \"engineering\" | \"compact\";\n/** Overrides default numbering system for the current locale. */\n \"numberingSystem\"?: string;\n \"roundingIncrement\"?: 1 | 2 | 5 | 10 | 20 | 25 | 50 | 100 | 200 | 250 | 500 | 1000 | 2000 | 2500 | 5000;\n \"roundingMode\"?: \"ceil\" | \"floor\" | \"expand\" | \"trunc\" | \"halfCeil\" | \"halfFloor\" | \"halfExpand\" | \"halfTrunc\" | \"halfEven\";\n \"roundingPriority\"?: \"auto\" | \"morePrecision\" | \"lessPrecision\";\n \"signDisplay\"?: keyof NumberFormatOptionsSignDisplayRegistry;\n \"style\"?: keyof NumberFormatOptionsStyleRegistry;\n \"trailingZeroDisplay\"?: \"auto\" | \"stripIfInteger\";\n \"unit\"?: string;\n \"unitDisplay\"?: \"short\" | \"long\" | \"narrow\";\n \"useGrouping\"?: boolean | keyof NumberFormatOptionsUseGroupingRegistry | \"true\" | \"false\";\n/** The number to format. */\n \"value\": number;\n}",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@baseline-ui/mcp",
3
- "version": "0.0.0-nightly-20251117000602",
3
+ "version": "0.0.0-nightly-20251118000611",
4
4
  "description": "MCP server for Baseline UI design system documentation",
5
5
  "type": "module",
6
6
  "bin": "dist/index.js",