@mirohq/design-system-combobox 0.1.0-combobox.0 → 0.1.0-combobox.1

package/dist/main.js

@@ -4,59 +4,83 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var designSystemBaseForm = require('@mirohq/design-system-base-form');
 var interactions = require('@react-aria/interactions');
 var designSystemUtils = require('@mirohq/design-system-utils');
-var designSystemBaseForm = require('@mirohq/design-system-base-form');
 var designSystemInput = require('@mirohq/design-system-input');
 var designSystemIcons = require('@mirohq/design-system-icons');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
-var Ariakit = require('@ariakit/react');
 var reactPopover = require('@radix-ui/react-popover');
+var react = require('@ariakit/react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Ariakit__namespace = /*#__PURE__*/_interopNamespace(Ariakit);
 
 const StyledTrigger = designSystemStitches.styled(designSystemInput.Input, {});
 
+const ComboboxContext = React.createContext({});
+const ComboboxProvider = ({
+  children,
+  defaultOpen,
+  valid,
+  value: valueProp,
+  defaultValue: defaultValueProp,
+  ...restProps
+}) => {
+  const [openState, setOpenState] = React.useState(defaultOpen);
+  const [value, setValue] = React.useState(valueProp);
+  const [defaultValue, setDefaultValue] = React.useState(defaultValueProp);
+  const [searchValue, setSearchValue] = React.useState();
+  const { valid: formFieldValid } = designSystemBaseForm.useFormFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComboboxContext.Provider,
+    {
+      value: {
+        ...restProps,
+        valid: valid != null ? valid : formFieldValid,
+        openState,
+        setOpenState,
+        value,
+        setValue,
+        setDefaultValue,
+        defaultValue,
+        searchValue,
+        setSearchValue
+      },
+      children
+    }
+  );
+};
+const useComboboxContext = () => React.useContext(ComboboxContext);
+
 const Trigger = React__default["default"].forwardRef(
   ({
     id,
     children,
     size = "large",
     "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    placeholder,
     onHoverChange,
     onHoverStart,
     onHoverEnd,
     ...restProps
   }, forwardRef) => {
+    const {
+      "aria-disabled": ariaDisabled,
+      valid: comboboxValid,
+      disabled,
+      value
+    } = useComboboxContext();
     const {
       formElementId,
       ariaDescribedBy: formFieldContextDescribedBy,
-      ariaInvalid,
+      ariaInvalid: formFieldAriaInvalid,
       valid: formFieldValid
     } = designSystemBaseForm.useFormFieldContext();
-    const valid = formFieldValid;
+    const valid = formFieldValid != null ? formFieldValid : comboboxValid;
     const { hoverProps } = interactions.useHover({
       onHoverStart,
       onHoverEnd,
@@ -67,14 +91,17 @@ const Trigger = React__default["default"].forwardRef(
     const commonProps = {
       ...restProps,
       ref: forwardRef,
-      "aria-invalid": ariaInvalid,
+      "aria-disabled": ariaDisabled,
+      "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
       "aria-describedby": designSystemUtils.stringAttrValue(
         ariaDescribedBy,
         formFieldContextDescribedBy
       ),
       valid,
+      disabled,
       invalid: designSystemUtils.booleanishAttrValue(valid),
-      id: id != null ? id : formElementId
+      id: id != null ? id : formElementId,
+      placeholder: value === void 0 ? placeholder : void 0
     };
     const variants = {
       size
@@ -95,7 +122,12 @@ const StyledContent = designSystemStitches.styled(designSystemPrimitive.Primitiv
   zIndex: "$select"
 });
 
-const Content = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledContent, { ...restProps, ref: forwardRef, children }));
+const Content = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { open, openState } = useComboboxContext();
+  if (!designSystemUtils.booleanify(open != null ? open : openState))
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledContent, { ...restProps, ref: forwardRef, children });
+});
 
 const StyledItem = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   borderRadius: "$50",
@@ -114,34 +146,114 @@ const StyledItem = designSystemStitches.styled(designSystemPrimitive.Primitive.d
   }
 });
 
-const StyledItemIndicator = designSystemStitches.styled(Ariakit__namespace.ComboboxItemCheck, {});
-
 const Item = React__default["default"].forwardRef(
-  ({ textValue, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledItem, { ref: forwardRef, ...restProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StyledItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCheckMark, { size: "small" }) }),
-    children
-  ] })
+  ({ value, textValue, children, ...restProps }, forwardRef) => {
+    const { value: comboboxValue } = useComboboxContext();
+    const isSelected = comboboxValue === value;
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledItem, { ref: forwardRef, ...restProps, children: [
+      isSelected && /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCheckMark, { size: "small", weight: "thin" }),
+      children
+    ] });
+  }
 );
 
 const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(reactPopover.Portal, { ...props });
 
-const StyledGroup = designSystemStitches.styled(Ariakit.Group, {});
+const StyledGroup = designSystemStitches.styled(react.Group, {});
 
 const Group = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGroup, { ...props, ref: forwardRef }));
 
-const StyledGroupLabel = designSystemStitches.styled(Ariakit.GroupLabel, {});
+const StyledGroupLabel = designSystemStitches.styled(react.GroupLabel, {});
 
 const GroupLabel = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
 
-const StyledCombobox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
+const StyledValue = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {});
 
-const Combobox = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledCombobox, { ...props, ref: forwardRef }));
+const Value = React__default["default"].forwardRef(
+  (props, forwardRef) => {
+    const { value } = useComboboxContext();
+    const isEmpty = value === void 0;
+    if (isEmpty) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { ref: forwardRef, ...props, children: value });
+  }
+);
+
+const StyledComboboxContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
+
+const Root = React__default["default"].forwardRef(
+  ({
+    onOpen,
+    onClose,
+    onValueChange,
+    value: valueProp,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    const {
+      required,
+      readOnly,
+      "aria-disabled": ariaDisabled,
+      disabled,
+      direction
+    } = useComboboxContext();
+    const { setRequired, setDisabled, setAriaDisabled, setReadOnly } = designSystemBaseForm.useFormFieldContext();
+    React.useEffect(() => {
+      setRequired == null ? void 0 : setRequired(required);
+      setDisabled == null ? void 0 : setDisabled(disabled);
+      setAriaDisabled == null ? void 0 : setAriaDisabled(ariaDisabled);
+      setReadOnly == null ? void 0 : setReadOnly(readOnly);
+    }, [
+      readOnly,
+      disabled,
+      ariaDisabled,
+      required,
+      setRequired,
+      setDisabled,
+      setAriaDisabled,
+      setReadOnly
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledComboboxContent, { ...restProps, ref: forwardRef, dir: direction, children });
+  }
+);
+const Combobox = React__default["default"].forwardRef(
+  ({
+    "aria-disabled": ariaDisabled,
+    defaultOpen = false,
+    open,
+    valid,
+    disabled,
+    readOnly,
+    required,
+    value,
+    defaultValue,
+    direction = "ltr",
+    ...restProps
+  }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
+    ComboboxProvider,
+    {
+      defaultValue,
+      value,
+      defaultOpen,
+      open,
+      valid,
+      required,
+      disabled,
+      readOnly,
+      "aria-disabled": ariaDisabled,
+      direction,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, value, ref: forwardRef })
+    }
+  )
+);
 Combobox.Portal = Portal;
 Combobox.Trigger = Trigger;
 Combobox.Content = Content;
 Combobox.Item = Item;
 Combobox.Group = Group;
 Combobox.GroupLabel = GroupLabel;
+Combobox.Value = Value;
 
 exports.Combobox = Combobox;
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/item.styled.tsx","../src/partials/item-indicator.styled.tsx","../src/partials/item.tsx","../src/partials/portal.tsx","../src/partials/group.styled.tsx","../src/partials/group.tsx","../src/partials/group-label.styled.tsx","../src/partials/group-label.tsx","../src/combobox.styled.tsx","../src/combobox.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Input } from '@mirohq/design-system-input'\n\nexport const StyledTrigger = styled(Input, {})\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport {\n  booleanishAttrValue,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport { Input } from '@mirohq/design-system-input'\nimport { IconChevronDown } from '@mirohq/design-system-icons'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps, HoverEvents {\n  /**\n   * The content.\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the trigger.\n   * @default 'large'\n   */\n  size?: StyledTriggerProps['size']\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>(\n  (\n    {\n      id,\n      children,\n      size = 'large',\n      'aria-describedby': ariaDescribedBy,\n      onHoverChange,\n      onHoverStart,\n      onHoverEnd,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const {\n      formElementId,\n      ariaDescribedBy: formFieldContextDescribedBy,\n      ariaInvalid,\n      valid: formFieldValid,\n    } = useFormFieldContext()\n\n    /** @todo: validity, add validation logic after implementing the combobox context */\n    const valid = formFieldValid\n\n    const { hoverProps } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange: isHovering => {\n        onHoverChange?.(isHovering)\n      },\n    })\n\n    const commonProps = {\n      ...restProps,\n      ref: forwardRef,\n      'aria-invalid': ariaInvalid,\n      'aria-describedby': stringAttrValue(\n        ariaDescribedBy,\n        formFieldContextDescribedBy\n      ),\n      valid,\n      invalid: booleanishAttrValue(valid),\n      id: id ?? formElementId,\n    }\n\n    const variants = {\n      size,\n    }\n\n    return (\n      <StyledTrigger {...hoverProps} {...commonProps} {...variants}>\n        {children}\n        <Input.ActionButton label='custom label'>\n          <IconChevronDown size='small' weight='thin' />\n        </Input.ActionButton>\n      </StyledTrigger>\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledContent = styled(Primitive.div, {\n  backgroundColor: '$background-neutrals-container',\n  borderRadius: '$50',\n  boxShadow: '$50',\n  minWidth: 'var(--radix-select-trigger-width)',\n  padding: '$50',\n  zIndex: '$select',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef, ReactNode } from 'react'\n\nimport { StyledContent } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * Combobox's content.\n   */\n  children?: ReactNode\n}\n\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(({ children, ...restProps }, forwardRef) => (\n  <StyledContent {...restProps} ref={forwardRef}>\n    {children}\n  </StyledContent>\n))\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledItem = styled(Primitive.div, {\n  borderRadius: '$50',\n  boxSizing: 'border-box',\n  color: '$text-neutrals',\n  cursor: 'pointer',\n  fontSize: '$175',\n  lineHeight: 1.5,\n  position: 'relative',\n  userSelect: 'none',\n  padding: '6px 0',\n  paddingInline: '$150 $100',\n\n  '&:hover:not([aria-disabled=\"true\"])': {\n    background: '$background-primary-subtle-hover',\n    color: '$text-primary-hover',\n  },\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import * as Ariakit from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledItemIndicator = styled(Ariakit.ComboboxItemCheck, {})\n\nexport type StyledItemIndicatorProps = StrictComponentProps<\n  typeof StyledItemIndicator\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { IconCheckMark } from '@mirohq/design-system-icons'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItemIndicator } from './item-indicator.styled'\n\nexport interface ItemProps extends StyledItemProps {\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n\n  /**\n   * When true, prevents the user from interacting with the item.\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Optional text used for typeahead purposes. By default the typeahead\n   * behavior will use the Combobox's item text. Use this when the content is\n   * complex, or you have non-textual content inside.\n   */\n  textValue?: string\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n  ({ textValue, children, ...restProps }, forwardRef) => (\n    <StyledItem ref={forwardRef} {...restProps}>\n      <StyledItemIndicator>\n        <IconCheckMark size='small' />\n      </StyledItemIndicator>\n      {children}\n    </StyledItem>\n  )\n)\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal: React.FC<PortalProps> = props => <RadixPortal {...props} />\n","import { Group } from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledGroup = styled(Group, {})\n\nexport type StyledGroupProps = StrictComponentProps<typeof StyledGroup>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledGroup } from './group.styled'\nimport type { StyledGroupProps } from './group.styled'\n\nexport interface GroupProps extends StyledGroupProps {}\n\nexport const Group = React.forwardRef<\n  ElementRef<typeof StyledGroup>,\n  GroupProps\n>((props, forwardRef) => <StyledGroup {...props} ref={forwardRef} />)\n","import { GroupLabel } from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledGroupLabel = styled(GroupLabel, {})\n\nexport type StyledGroupLabelProps = StrictComponentProps<\n  typeof StyledGroupLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledGroupLabel } from './group-label.styled'\nimport type { StyledGroupLabelProps } from './group-label.styled'\n\nexport interface GroupLabelProps extends StyledGroupLabelProps {}\n\nexport const GroupLabel = React.forwardRef<\n  ElementRef<typeof StyledGroupLabel>,\n  GroupLabelProps\n>((props, forwardRef) => <StyledGroupLabel {...props} ref={forwardRef} />)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCombobox = styled(Primitive.div, {})\n\nexport type StyledComboboxProps = ComponentPropsWithRef<typeof StyledCombobox>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Item } from './partials/item'\nimport { Portal } from './partials/portal'\nimport { Group } from './partials/group'\nimport { GroupLabel } from './partials/group-label'\nimport { StyledCombobox } from './combobox.styled'\nimport type { StyledComboboxProps } from './combobox.styled'\n\nexport interface ComboboxProps extends StyledComboboxProps {}\n\nexport const Combobox = React.forwardRef<\n  ElementRef<typeof StyledCombobox>,\n  ComboboxProps\n>((props, forwardRef) => (\n  <StyledCombobox {...props} ref={forwardRef} />\n)) as ForwardRefExoticComponent<ComboboxProps> & Partials\n\nexport interface Partials {\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Item: typeof Item\n  Group: typeof Group\n  GroupLabel: typeof GroupLabel\n}\n\nCombobox.Portal = Portal\nCombobox.Trigger = Trigger\nCombobox.Content = Content\nCombobox.Item = Item\nCombobox.Group = Group\nCombobox.GroupLabel = GroupLabel\n"],"names":["styled","Input","React","useFormFieldContext","useHover","stringAttrValue","booleanishAttrValue","jsx","IconChevronDown","Primitive","Ariakit","jsxs","IconCheckMark","RadixPortal","Group","GroupLabel"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/partials/trigger.styled.tsx","../src/hooks/use-combobox-context.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/item.styled.tsx","../src/partials/item.tsx","../src/partials/portal.tsx","../src/partials/group.styled.tsx","../src/partials/group.tsx","../src/partials/group-label.styled.tsx","../src/partials/group-label.tsx","../src/partials/value.styled.tsx","../src/partials/value.tsx","../src/combobox.styled.tsx","../src/combobox.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Input } from '@mirohq/design-system-input'\n\nexport const StyledTrigger = styled(Input, {})\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import { createContext, useContext, useState } from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport type { FormElementProps } from '@mirohq/design-system-base-form'\n\nimport type { Direction } from '../types'\n\ninterface ComboboxProps extends FormElementProps {\n  open?: boolean\n  defaultOpen?: boolean\n  value?: string\n  defaultValue?: string\n  searchValue?: string\n  direction?: Direction\n}\n\ninterface ComboboxContextProps extends ComboboxProps {\n  setOpenState: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  openState?: boolean | undefined\n  setValue: React.Dispatch<React.SetStateAction<string | undefined>>\n  setDefaultValue: React.Dispatch<React.SetStateAction<string | undefined>>\n  setSearchValue: React.Dispatch<React.SetStateAction<string | undefined>>\n}\n\nexport type ComboboxProviderProps = ComboboxProps\n\nconst ComboboxContext = createContext<ComboboxContextProps>({} as any)\n\nexport const ComboboxProvider = ({\n  children,\n  defaultOpen,\n  valid,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  ...restProps\n}: PropsWithChildren<ComboboxProviderProps>): JSX.Element => {\n  const [openState, setOpenState] = useState(defaultOpen)\n  const [value, setValue] = useState(valueProp)\n  const [defaultValue, setDefaultValue] = useState(defaultValueProp)\n  const [searchValue, setSearchValue] = useState<string | undefined>()\n\n  const { valid: formFieldValid } = useFormFieldContext()\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        ...restProps,\n        valid: valid ?? formFieldValid,\n        openState,\n        setOpenState,\n        value,\n        setValue,\n        setDefaultValue,\n        defaultValue,\n        searchValue,\n        setSearchValue,\n      }}\n    >\n      {children}\n    </ComboboxContext.Provider>\n  )\n}\n\nexport const useComboboxContext = (): ComboboxContextProps =>\n  useContext(ComboboxContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport {\n  booleanishAttrValue,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport { Input } from '@mirohq/design-system-input'\nimport { IconChevronDown } from '@mirohq/design-system-icons'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\nimport { useComboboxContext } from '../hooks/use-combobox-context'\n\nexport interface TriggerProps extends StyledTriggerProps, HoverEvents {\n  /**\n   * The content.\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the trigger.\n   * @default 'large'\n   */\n  size?: StyledTriggerProps['size']\n\n  /**\n   * The content that will be rendered inside the Combobox.Trigger when no value or\n   * defaultValue is set.\n   */\n  placeholder?: string\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>(\n  (\n    {\n      id,\n      children,\n      size = 'large',\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      placeholder,\n      onHoverChange,\n      onHoverStart,\n      onHoverEnd,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const {\n      'aria-disabled': ariaDisabled,\n      valid: comboboxValid,\n      disabled,\n      value,\n    } = useComboboxContext()\n\n    const {\n      formElementId,\n      ariaDescribedBy: formFieldContextDescribedBy,\n      ariaInvalid: formFieldAriaInvalid,\n      valid: formFieldValid,\n    } = useFormFieldContext()\n\n    const valid = formFieldValid ?? comboboxValid\n\n    const { hoverProps } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange: isHovering => {\n        onHoverChange?.(isHovering)\n      },\n    })\n\n    const commonProps = {\n      ...restProps,\n      ref: forwardRef,\n      'aria-disabled': ariaDisabled,\n      'aria-invalid': ariaInvalid ?? formFieldAriaInvalid,\n      'aria-describedby': stringAttrValue(\n        ariaDescribedBy,\n        formFieldContextDescribedBy\n      ),\n      valid,\n      disabled,\n      invalid: booleanishAttrValue(valid),\n      id: id ?? formElementId,\n      placeholder: value === undefined ? placeholder : undefined,\n    }\n\n    const variants = {\n      size,\n    }\n\n    return (\n      <StyledTrigger {...hoverProps} {...commonProps} {...variants}>\n        {children}\n        <Input.ActionButton label='custom label'>\n          <IconChevronDown size='small' weight='thin' />\n        </Input.ActionButton>\n      </StyledTrigger>\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledContent = styled(Primitive.div, {\n  backgroundColor: '$background-neutrals-container',\n  borderRadius: '$50',\n  boxShadow: '$50',\n  minWidth: 'var(--radix-select-trigger-width)',\n  padding: '$50',\n  zIndex: '$select',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { StyledContent } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport { useComboboxContext } from '../hooks/use-combobox-context'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * Combobox's content.\n   */\n  children?: ReactNode\n}\n\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { open, openState } = useComboboxContext()\n\n  if (!booleanify(open ?? openState)) return null\n\n  return (\n    <StyledContent {...restProps} ref={forwardRef}>\n      {children}\n    </StyledContent>\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledItem = styled(Primitive.div, {\n  borderRadius: '$50',\n  boxSizing: 'border-box',\n  color: '$text-neutrals',\n  cursor: 'pointer',\n  fontSize: '$175',\n  lineHeight: 1.5,\n  position: 'relative',\n  userSelect: 'none',\n  padding: '6px 0',\n  paddingInline: '$150 $100',\n\n  '&:hover:not([aria-disabled=\"true\"])': {\n    background: '$background-primary-subtle-hover',\n    color: '$text-primary-hover',\n  },\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { IconCheckMark } from '@mirohq/design-system-icons'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\nimport { useComboboxContext } from '../hooks/use-combobox-context'\n\nexport interface ItemProps extends StyledItemProps {\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n\n  /**\n   * When true, prevents the user from interacting with the item.\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Optional text used for typeahead purposes. By default the typeahead\n   * behavior will use the Combobox's item text. Use this when the content is\n   * complex, or you have non-textual content inside.\n   */\n  textValue?: string\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n  ({ value, textValue, children, ...restProps }, forwardRef) => {\n    const { value: comboboxValue } = useComboboxContext()\n    const isSelected = comboboxValue === value\n\n    return (\n      <StyledItem ref={forwardRef} {...restProps}>\n        {isSelected && <IconCheckMark size='small' weight='thin' />}\n        {children}\n      </StyledItem>\n    )\n  }\n)\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal: React.FC<PortalProps> = props => <RadixPortal {...props} />\n","import { Group } from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledGroup = styled(Group, {})\n\nexport type StyledGroupProps = StrictComponentProps<typeof StyledGroup>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledGroup } from './group.styled'\nimport type { StyledGroupProps } from './group.styled'\n\nexport interface GroupProps extends StyledGroupProps {}\n\nexport const Group = React.forwardRef<\n  ElementRef<typeof StyledGroup>,\n  GroupProps\n>((props, forwardRef) => <StyledGroup {...props} ref={forwardRef} />)\n","import { GroupLabel } from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledGroupLabel = styled(GroupLabel, {})\n\nexport type StyledGroupLabelProps = StrictComponentProps<\n  typeof StyledGroupLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledGroupLabel } from './group-label.styled'\nimport type { StyledGroupLabelProps } from './group-label.styled'\n\nexport interface GroupLabelProps extends StyledGroupLabelProps {}\n\nexport const GroupLabel = React.forwardRef<\n  ElementRef<typeof StyledGroupLabel>,\n  GroupLabelProps\n>((props, forwardRef) => <StyledGroupLabel {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledValue = styled(Primitive.span, {})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useComboboxContext } from '../hooks/use-combobox-context'\nimport { StyledValue } from './value.styled'\n\nexport const Value = React.forwardRef<ElementRef<typeof StyledValue>>(\n  (props, forwardRef) => {\n    const { value } = useComboboxContext()\n    const isEmpty = value === undefined\n\n    if (isEmpty) {\n      return null\n    }\n\n    return (\n      <StyledValue ref={forwardRef} {...props}>\n        {value}\n      </StyledValue>\n    )\n  }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledComboboxContent = styled(Primitive.div, {})\n\nexport type StyledComboboxProps = ComponentPropsWithRef<\n  typeof StyledComboboxContent\n>\n","import React, { useEffect } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Item } from './partials/item'\nimport { Portal } from './partials/portal'\nimport { Group } from './partials/group'\nimport { GroupLabel } from './partials/group-label'\nimport { Value } from './partials/value'\nimport { StyledComboboxContent } from './combobox.styled'\nimport {\n  ComboboxProvider,\n  useComboboxContext,\n} from './hooks/use-combobox-context'\nimport type { ComboboxProviderProps } from './hooks/use-combobox-context'\nimport type { Direction } from './types'\n\nexport interface ComboboxProps extends ComboboxProviderProps {\n  /**\n   * The value of the combobox when initially rendered. Use when you do not need\n   * to control the state of the combobox.\n   */\n  defaultValue?: string\n\n  /**\n   * The controlled value of the combobox. Should be used in conjunction with\n   * onValueChange.\n   */\n  value?: string\n\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  /**\n   * The open state of the combobox when it is initially rendered. Use when you do\n   * not need to control its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * The controlled open state of the combobox. Must be used in conjunction with\n   * onOpen and onClose.\n   */\n  open?: boolean\n\n  /**\n   * Event handler called when the combobox opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the combobox closes.\n   */\n  onClose?: () => void\n\n  /**\n   * The reading direction of the combobox when applicable. If omitted, inherits\n   * globally from DirectionProvider or assumes LTR (left-to-right) reading\n   * mode.\n   * @default 'ltr'\n   */\n  direction?: Direction\n\n  /**\n   * The content of the combobox\n   */\n  children?: React.ReactNode\n}\n\nconst Root = React.forwardRef<\n  ElementRef<typeof StyledComboboxContent>,\n  ComboboxProps\n>(\n  (\n    {\n      onOpen,\n      onClose,\n      onValueChange,\n      value: valueProp,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const {\n      required,\n      readOnly,\n      'aria-disabled': ariaDisabled,\n      disabled,\n      direction,\n    } = useComboboxContext()\n\n    const { setRequired, setDisabled, setAriaDisabled, setReadOnly } =\n      useFormFieldContext()\n\n    useEffect(() => {\n      setRequired?.(required)\n      setDisabled?.(disabled)\n      setAriaDisabled?.(ariaDisabled)\n      setReadOnly?.(readOnly)\n    }, [\n      readOnly,\n      disabled,\n      ariaDisabled,\n      required,\n      setRequired,\n      setDisabled,\n      setAriaDisabled,\n      setReadOnly,\n    ])\n\n    return (\n      <StyledComboboxContent {...restProps} ref={forwardRef} dir={direction}>\n        {children}\n      </StyledComboboxContent>\n    )\n  }\n)\n\nexport const Combobox = React.forwardRef<\n  ElementRef<typeof StyledComboboxContent>,\n  ComboboxProps\n>(\n  (\n    {\n      'aria-disabled': ariaDisabled,\n      defaultOpen = false,\n      open,\n      valid,\n      disabled,\n      readOnly,\n      required,\n      value,\n      defaultValue,\n      direction = 'ltr',\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <ComboboxProvider\n      defaultValue={defaultValue}\n      value={value}\n      defaultOpen={defaultOpen}\n      open={open}\n      valid={valid}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      aria-disabled={ariaDisabled}\n      direction={direction}\n    >\n      <Root {...restProps} value={value} ref={forwardRef} />\n    </ComboboxProvider>\n  )\n) as ForwardRefExoticComponent<ComboboxProps> & Partials\n\nexport interface Partials {\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Item: typeof Item\n  Group: typeof Group\n  GroupLabel: typeof GroupLabel\n  Value: typeof Value\n}\n\nCombobox.Portal = Portal\nCombobox.Trigger = Trigger\nCombobox.Content = Content\nCombobox.Item = Item\nCombobox.Group = Group\nCombobox.GroupLabel = GroupLabel\nCombobox.Value = Value\n"],"names":["styled","Input","createContext","useState","useFormFieldContext","jsx","useContext","React","useHover","stringAttrValue","booleanishAttrValue","IconChevronDown","Primitive","booleanify","jsxs","IconCheckMark","RadixPortal","Group","GroupLabel","useEffect"],"mappings":"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"}

package/dist/module.js

@@ -1,36 +1,78 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
-import { useHover } from '@react-aria/interactions';
-import { stringAttrValue, booleanishAttrValue } from '@mirohq/design-system-utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { createContext, useState, useContext, useEffect } from 'react';
 import { useFormFieldContext } from '@mirohq/design-system-base-form';
+import { useHover } from '@react-aria/interactions';
+import { stringAttrValue, booleanishAttrValue, booleanify } from '@mirohq/design-system-utils';
 import { Input } from '@mirohq/design-system-input';
 import { IconChevronDown, IconCheckMark } from '@mirohq/design-system-icons';
 import { styled } from '@mirohq/design-system-stitches';
 import { Primitive } from '@mirohq/design-system-primitive';
-import * as Ariakit from '@ariakit/react';
-import { Group as Group$1, GroupLabel as GroupLabel$1 } from '@ariakit/react';
 import { Portal as Portal$1 } from '@radix-ui/react-popover';
+import { Group as Group$1, GroupLabel as GroupLabel$1 } from '@ariakit/react';
 
 const StyledTrigger = styled(Input, {});
 
+const ComboboxContext = createContext({});
+const ComboboxProvider = ({
+  children,
+  defaultOpen,
+  valid,
+  value: valueProp,
+  defaultValue: defaultValueProp,
+  ...restProps
+}) => {
+  const [openState, setOpenState] = useState(defaultOpen);
+  const [value, setValue] = useState(valueProp);
+  const [defaultValue, setDefaultValue] = useState(defaultValueProp);
+  const [searchValue, setSearchValue] = useState();
+  const { valid: formFieldValid } = useFormFieldContext();
+  return /* @__PURE__ */ jsx(
+    ComboboxContext.Provider,
+    {
+      value: {
+        ...restProps,
+        valid: valid != null ? valid : formFieldValid,
+        openState,
+        setOpenState,
+        value,
+        setValue,
+        setDefaultValue,
+        defaultValue,
+        searchValue,
+        setSearchValue
+      },
+      children
+    }
+  );
+};
+const useComboboxContext = () => useContext(ComboboxContext);
+
 const Trigger = React.forwardRef(
   ({
     id,
     children,
     size = "large",
     "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    placeholder,
     onHoverChange,
     onHoverStart,
     onHoverEnd,
     ...restProps
   }, forwardRef) => {
+    const {
+      "aria-disabled": ariaDisabled,
+      valid: comboboxValid,
+      disabled,
+      value
+    } = useComboboxContext();
     const {
       formElementId,
       ariaDescribedBy: formFieldContextDescribedBy,
-      ariaInvalid,
+      ariaInvalid: formFieldAriaInvalid,
       valid: formFieldValid
     } = useFormFieldContext();
-    const valid = formFieldValid;
+    const valid = formFieldValid != null ? formFieldValid : comboboxValid;
     const { hoverProps } = useHover({
       onHoverStart,
       onHoverEnd,
@@ -41,14 +83,17 @@ const Trigger = React.forwardRef(
     const commonProps = {
       ...restProps,
       ref: forwardRef,
-      "aria-invalid": ariaInvalid,
+      "aria-disabled": ariaDisabled,
+      "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
       "aria-describedby": stringAttrValue(
         ariaDescribedBy,
         formFieldContextDescribedBy
       ),
       valid,
+      disabled,
       invalid: booleanishAttrValue(valid),
-      id: id != null ? id : formElementId
+      id: id != null ? id : formElementId,
+      placeholder: value === void 0 ? placeholder : void 0
     };
     const variants = {
       size
@@ -69,7 +114,12 @@ const StyledContent = styled(Primitive.div, {
   zIndex: "$select"
 });
 
-const Content = React.forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledContent, { ...restProps, ref: forwardRef, children }));
+const Content = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { open, openState } = useComboboxContext();
+  if (!booleanify(open != null ? open : openState))
+    return null;
+  return /* @__PURE__ */ jsx(StyledContent, { ...restProps, ref: forwardRef, children });
+});
 
 const StyledItem = styled(Primitive.div, {
   borderRadius: "$50",
@@ -88,13 +138,15 @@ const StyledItem = styled(Primitive.div, {
   }
 });
 
-const StyledItemIndicator = styled(Ariakit.ComboboxItemCheck, {});
-
 const Item = React.forwardRef(
-  ({ textValue, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(StyledItem, { ref: forwardRef, ...restProps, children: [
-    /* @__PURE__ */ jsx(StyledItemIndicator, { children: /* @__PURE__ */ jsx(IconCheckMark, { size: "small" }) }),
-    children
-  ] })
+  ({ value, textValue, children, ...restProps }, forwardRef) => {
+    const { value: comboboxValue } = useComboboxContext();
+    const isSelected = comboboxValue === value;
+    return /* @__PURE__ */ jsxs(StyledItem, { ref: forwardRef, ...restProps, children: [
+      isSelected && /* @__PURE__ */ jsx(IconCheckMark, { size: "small", weight: "thin" }),
+      children
+    ] });
+  }
 );
 
 const Portal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
@@ -107,15 +159,93 @@ const StyledGroupLabel = styled(GroupLabel$1, {});
 
 const GroupLabel = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
 
-const StyledCombobox = styled(Primitive.div, {});
+const StyledValue = styled(Primitive.span, {});
+
+const Value = React.forwardRef(
+  (props, forwardRef) => {
+    const { value } = useComboboxContext();
+    const isEmpty = value === void 0;
+    if (isEmpty) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(StyledValue, { ref: forwardRef, ...props, children: value });
+  }
+);
 
-const Combobox = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledCombobox, { ...props, ref: forwardRef }));
+const StyledComboboxContent = styled(Primitive.div, {});
+
+const Root = React.forwardRef(
+  ({
+    onOpen,
+    onClose,
+    onValueChange,
+    value: valueProp,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    const {
+      required,
+      readOnly,
+      "aria-disabled": ariaDisabled,
+      disabled,
+      direction
+    } = useComboboxContext();
+    const { setRequired, setDisabled, setAriaDisabled, setReadOnly } = useFormFieldContext();
+    useEffect(() => {
+      setRequired == null ? void 0 : setRequired(required);
+      setDisabled == null ? void 0 : setDisabled(disabled);
+      setAriaDisabled == null ? void 0 : setAriaDisabled(ariaDisabled);
+      setReadOnly == null ? void 0 : setReadOnly(readOnly);
+    }, [
+      readOnly,
+      disabled,
+      ariaDisabled,
+      required,
+      setRequired,
+      setDisabled,
+      setAriaDisabled,
+      setReadOnly
+    ]);
+    return /* @__PURE__ */ jsx(StyledComboboxContent, { ...restProps, ref: forwardRef, dir: direction, children });
+  }
+);
+const Combobox = React.forwardRef(
+  ({
+    "aria-disabled": ariaDisabled,
+    defaultOpen = false,
+    open,
+    valid,
+    disabled,
+    readOnly,
+    required,
+    value,
+    defaultValue,
+    direction = "ltr",
+    ...restProps
+  }, forwardRef) => /* @__PURE__ */ jsx(
+    ComboboxProvider,
+    {
+      defaultValue,
+      value,
+      defaultOpen,
+      open,
+      valid,
+      required,
+      disabled,
+      readOnly,
+      "aria-disabled": ariaDisabled,
+      direction,
+      children: /* @__PURE__ */ jsx(Root, { ...restProps, value, ref: forwardRef })
+    }
+  )
+);
 Combobox.Portal = Portal;
 Combobox.Trigger = Trigger;
 Combobox.Content = Content;
 Combobox.Item = Item;
 Combobox.Group = Group;
 Combobox.GroupLabel = GroupLabel;
+Combobox.Value = Value;
 
 export { Combobox };
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/item.styled.tsx","../src/partials/item-indicator.styled.tsx","../src/partials/item.tsx","../src/partials/portal.tsx","../src/partials/group.styled.tsx","../src/partials/group.tsx","../src/partials/group-label.styled.tsx","../src/partials/group-label.tsx","../src/combobox.styled.tsx","../src/combobox.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Input } from '@mirohq/design-system-input'\n\nexport const StyledTrigger = styled(Input, {})\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport {\n  booleanishAttrValue,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport { Input } from '@mirohq/design-system-input'\nimport { IconChevronDown } from '@mirohq/design-system-icons'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps, HoverEvents {\n  /**\n   * The content.\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the trigger.\n   * @default 'large'\n   */\n  size?: StyledTriggerProps['size']\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>(\n  (\n    {\n      id,\n      children,\n      size = 'large',\n      'aria-describedby': ariaDescribedBy,\n      onHoverChange,\n      onHoverStart,\n      onHoverEnd,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const {\n      formElementId,\n      ariaDescribedBy: formFieldContextDescribedBy,\n      ariaInvalid,\n      valid: formFieldValid,\n    } = useFormFieldContext()\n\n    /** @todo: validity, add validation logic after implementing the combobox context */\n    const valid = formFieldValid\n\n    const { hoverProps } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange: isHovering => {\n        onHoverChange?.(isHovering)\n      },\n    })\n\n    const commonProps = {\n      ...restProps,\n      ref: forwardRef,\n      'aria-invalid': ariaInvalid,\n      'aria-describedby': stringAttrValue(\n        ariaDescribedBy,\n        formFieldContextDescribedBy\n      ),\n      valid,\n      invalid: booleanishAttrValue(valid),\n      id: id ?? formElementId,\n    }\n\n    const variants = {\n      size,\n    }\n\n    return (\n      <StyledTrigger {...hoverProps} {...commonProps} {...variants}>\n        {children}\n        <Input.ActionButton label='custom label'>\n          <IconChevronDown size='small' weight='thin' />\n        </Input.ActionButton>\n      </StyledTrigger>\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledContent = styled(Primitive.div, {\n  backgroundColor: '$background-neutrals-container',\n  borderRadius: '$50',\n  boxShadow: '$50',\n  minWidth: 'var(--radix-select-trigger-width)',\n  padding: '$50',\n  zIndex: '$select',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef, ReactNode } from 'react'\n\nimport { StyledContent } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * Combobox's content.\n   */\n  children?: ReactNode\n}\n\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(({ children, ...restProps }, forwardRef) => (\n  <StyledContent {...restProps} ref={forwardRef}>\n    {children}\n  </StyledContent>\n))\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledItem = styled(Primitive.div, {\n  borderRadius: '$50',\n  boxSizing: 'border-box',\n  color: '$text-neutrals',\n  cursor: 'pointer',\n  fontSize: '$175',\n  lineHeight: 1.5,\n  position: 'relative',\n  userSelect: 'none',\n  padding: '6px 0',\n  paddingInline: '$150 $100',\n\n  '&:hover:not([aria-disabled=\"true\"])': {\n    background: '$background-primary-subtle-hover',\n    color: '$text-primary-hover',\n  },\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import * as Ariakit from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledItemIndicator = styled(Ariakit.ComboboxItemCheck, {})\n\nexport type StyledItemIndicatorProps = StrictComponentProps<\n  typeof StyledItemIndicator\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { IconCheckMark } from '@mirohq/design-system-icons'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItemIndicator } from './item-indicator.styled'\n\nexport interface ItemProps extends StyledItemProps {\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n\n  /**\n   * When true, prevents the user from interacting with the item.\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Optional text used for typeahead purposes. By default the typeahead\n   * behavior will use the Combobox's item text. Use this when the content is\n   * complex, or you have non-textual content inside.\n   */\n  textValue?: string\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n  ({ textValue, children, ...restProps }, forwardRef) => (\n    <StyledItem ref={forwardRef} {...restProps}>\n      <StyledItemIndicator>\n        <IconCheckMark size='small' />\n      </StyledItemIndicator>\n      {children}\n    </StyledItem>\n  )\n)\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal: React.FC<PortalProps> = props => <RadixPortal {...props} />\n","import { Group } from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledGroup = styled(Group, {})\n\nexport type StyledGroupProps = StrictComponentProps<typeof StyledGroup>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledGroup } from './group.styled'\nimport type { StyledGroupProps } from './group.styled'\n\nexport interface GroupProps extends StyledGroupProps {}\n\nexport const Group = React.forwardRef<\n  ElementRef<typeof StyledGroup>,\n  GroupProps\n>((props, forwardRef) => <StyledGroup {...props} ref={forwardRef} />)\n","import { GroupLabel } from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledGroupLabel = styled(GroupLabel, {})\n\nexport type StyledGroupLabelProps = StrictComponentProps<\n  typeof StyledGroupLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledGroupLabel } from './group-label.styled'\nimport type { StyledGroupLabelProps } from './group-label.styled'\n\nexport interface GroupLabelProps extends StyledGroupLabelProps {}\n\nexport const GroupLabel = React.forwardRef<\n  ElementRef<typeof StyledGroupLabel>,\n  GroupLabelProps\n>((props, forwardRef) => <StyledGroupLabel {...props} ref={forwardRef} />)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCombobox = styled(Primitive.div, {})\n\nexport type StyledComboboxProps = ComponentPropsWithRef<typeof StyledCombobox>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Item } from './partials/item'\nimport { Portal } from './partials/portal'\nimport { Group } from './partials/group'\nimport { GroupLabel } from './partials/group-label'\nimport { StyledCombobox } from './combobox.styled'\nimport type { StyledComboboxProps } from './combobox.styled'\n\nexport interface ComboboxProps extends StyledComboboxProps {}\n\nexport const Combobox = React.forwardRef<\n  ElementRef<typeof StyledCombobox>,\n  ComboboxProps\n>((props, forwardRef) => (\n  <StyledCombobox {...props} ref={forwardRef} />\n)) as ForwardRefExoticComponent<ComboboxProps> & Partials\n\nexport interface Partials {\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Item: typeof Item\n  Group: typeof Group\n  GroupLabel: typeof GroupLabel\n}\n\nCombobox.Portal = Portal\nCombobox.Trigger = Trigger\nCombobox.Content = Content\nCombobox.Item = Item\nCombobox.Group = Group\nCombobox.GroupLabel = GroupLabel\n"],"names":["RadixPortal","Group","GroupLabel"],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/partials/trigger.styled.tsx","../src/hooks/use-combobox-context.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/item.styled.tsx","../src/partials/item.tsx","../src/partials/portal.tsx","../src/partials/group.styled.tsx","../src/partials/group.tsx","../src/partials/group-label.styled.tsx","../src/partials/group-label.tsx","../src/partials/value.styled.tsx","../src/partials/value.tsx","../src/combobox.styled.tsx","../src/combobox.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Input } from '@mirohq/design-system-input'\n\nexport const StyledTrigger = styled(Input, {})\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import { createContext, useContext, useState } from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport type { FormElementProps } from '@mirohq/design-system-base-form'\n\nimport type { Direction } from '../types'\n\ninterface ComboboxProps extends FormElementProps {\n  open?: boolean\n  defaultOpen?: boolean\n  value?: string\n  defaultValue?: string\n  searchValue?: string\n  direction?: Direction\n}\n\ninterface ComboboxContextProps extends ComboboxProps {\n  setOpenState: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  openState?: boolean | undefined\n  setValue: React.Dispatch<React.SetStateAction<string | undefined>>\n  setDefaultValue: React.Dispatch<React.SetStateAction<string | undefined>>\n  setSearchValue: React.Dispatch<React.SetStateAction<string | undefined>>\n}\n\nexport type ComboboxProviderProps = ComboboxProps\n\nconst ComboboxContext = createContext<ComboboxContextProps>({} as any)\n\nexport const ComboboxProvider = ({\n  children,\n  defaultOpen,\n  valid,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  ...restProps\n}: PropsWithChildren<ComboboxProviderProps>): JSX.Element => {\n  const [openState, setOpenState] = useState(defaultOpen)\n  const [value, setValue] = useState(valueProp)\n  const [defaultValue, setDefaultValue] = useState(defaultValueProp)\n  const [searchValue, setSearchValue] = useState<string | undefined>()\n\n  const { valid: formFieldValid } = useFormFieldContext()\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        ...restProps,\n        valid: valid ?? formFieldValid,\n        openState,\n        setOpenState,\n        value,\n        setValue,\n        setDefaultValue,\n        defaultValue,\n        searchValue,\n        setSearchValue,\n      }}\n    >\n      {children}\n    </ComboboxContext.Provider>\n  )\n}\n\nexport const useComboboxContext = (): ComboboxContextProps =>\n  useContext(ComboboxContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport {\n  booleanishAttrValue,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport { Input } from '@mirohq/design-system-input'\nimport { IconChevronDown } from '@mirohq/design-system-icons'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\nimport { useComboboxContext } from '../hooks/use-combobox-context'\n\nexport interface TriggerProps extends StyledTriggerProps, HoverEvents {\n  /**\n   * The content.\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the trigger.\n   * @default 'large'\n   */\n  size?: StyledTriggerProps['size']\n\n  /**\n   * The content that will be rendered inside the Combobox.Trigger when no value or\n   * defaultValue is set.\n   */\n  placeholder?: string\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>(\n  (\n    {\n      id,\n      children,\n      size = 'large',\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      placeholder,\n      onHoverChange,\n      onHoverStart,\n      onHoverEnd,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const {\n      'aria-disabled': ariaDisabled,\n      valid: comboboxValid,\n      disabled,\n      value,\n    } = useComboboxContext()\n\n    const {\n      formElementId,\n      ariaDescribedBy: formFieldContextDescribedBy,\n      ariaInvalid: formFieldAriaInvalid,\n      valid: formFieldValid,\n    } = useFormFieldContext()\n\n    const valid = formFieldValid ?? comboboxValid\n\n    const { hoverProps } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange: isHovering => {\n        onHoverChange?.(isHovering)\n      },\n    })\n\n    const commonProps = {\n      ...restProps,\n      ref: forwardRef,\n      'aria-disabled': ariaDisabled,\n      'aria-invalid': ariaInvalid ?? formFieldAriaInvalid,\n      'aria-describedby': stringAttrValue(\n        ariaDescribedBy,\n        formFieldContextDescribedBy\n      ),\n      valid,\n      disabled,\n      invalid: booleanishAttrValue(valid),\n      id: id ?? formElementId,\n      placeholder: value === undefined ? placeholder : undefined,\n    }\n\n    const variants = {\n      size,\n    }\n\n    return (\n      <StyledTrigger {...hoverProps} {...commonProps} {...variants}>\n        {children}\n        <Input.ActionButton label='custom label'>\n          <IconChevronDown size='small' weight='thin' />\n        </Input.ActionButton>\n      </StyledTrigger>\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledContent = styled(Primitive.div, {\n  backgroundColor: '$background-neutrals-container',\n  borderRadius: '$50',\n  boxShadow: '$50',\n  minWidth: 'var(--radix-select-trigger-width)',\n  padding: '$50',\n  zIndex: '$select',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { StyledContent } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport { useComboboxContext } from '../hooks/use-combobox-context'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * Combobox's content.\n   */\n  children?: ReactNode\n}\n\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { open, openState } = useComboboxContext()\n\n  if (!booleanify(open ?? openState)) return null\n\n  return (\n    <StyledContent {...restProps} ref={forwardRef}>\n      {children}\n    </StyledContent>\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledItem = styled(Primitive.div, {\n  borderRadius: '$50',\n  boxSizing: 'border-box',\n  color: '$text-neutrals',\n  cursor: 'pointer',\n  fontSize: '$175',\n  lineHeight: 1.5,\n  position: 'relative',\n  userSelect: 'none',\n  padding: '6px 0',\n  paddingInline: '$150 $100',\n\n  '&:hover:not([aria-disabled=\"true\"])': {\n    background: '$background-primary-subtle-hover',\n    color: '$text-primary-hover',\n  },\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { IconCheckMark } from '@mirohq/design-system-icons'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\nimport { useComboboxContext } from '../hooks/use-combobox-context'\n\nexport interface ItemProps extends StyledItemProps {\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n\n  /**\n   * When true, prevents the user from interacting with the item.\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Optional text used for typeahead purposes. By default the typeahead\n   * behavior will use the Combobox's item text. Use this when the content is\n   * complex, or you have non-textual content inside.\n   */\n  textValue?: string\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n  ({ value, textValue, children, ...restProps }, forwardRef) => {\n    const { value: comboboxValue } = useComboboxContext()\n    const isSelected = comboboxValue === value\n\n    return (\n      <StyledItem ref={forwardRef} {...restProps}>\n        {isSelected && <IconCheckMark size='small' weight='thin' />}\n        {children}\n      </StyledItem>\n    )\n  }\n)\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal: React.FC<PortalProps> = props => <RadixPortal {...props} />\n","import { Group } from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledGroup = styled(Group, {})\n\nexport type StyledGroupProps = StrictComponentProps<typeof StyledGroup>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledGroup } from './group.styled'\nimport type { StyledGroupProps } from './group.styled'\n\nexport interface GroupProps extends StyledGroupProps {}\n\nexport const Group = React.forwardRef<\n  ElementRef<typeof StyledGroup>,\n  GroupProps\n>((props, forwardRef) => <StyledGroup {...props} ref={forwardRef} />)\n","import { GroupLabel } from '@ariakit/react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledGroupLabel = styled(GroupLabel, {})\n\nexport type StyledGroupLabelProps = StrictComponentProps<\n  typeof StyledGroupLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledGroupLabel } from './group-label.styled'\nimport type { StyledGroupLabelProps } from './group-label.styled'\n\nexport interface GroupLabelProps extends StyledGroupLabelProps {}\n\nexport const GroupLabel = React.forwardRef<\n  ElementRef<typeof StyledGroupLabel>,\n  GroupLabelProps\n>((props, forwardRef) => <StyledGroupLabel {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledValue = styled(Primitive.span, {})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useComboboxContext } from '../hooks/use-combobox-context'\nimport { StyledValue } from './value.styled'\n\nexport const Value = React.forwardRef<ElementRef<typeof StyledValue>>(\n  (props, forwardRef) => {\n    const { value } = useComboboxContext()\n    const isEmpty = value === undefined\n\n    if (isEmpty) {\n      return null\n    }\n\n    return (\n      <StyledValue ref={forwardRef} {...props}>\n        {value}\n      </StyledValue>\n    )\n  }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledComboboxContent = styled(Primitive.div, {})\n\nexport type StyledComboboxProps = ComponentPropsWithRef<\n  typeof StyledComboboxContent\n>\n","import React, { useEffect } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Item } from './partials/item'\nimport { Portal } from './partials/portal'\nimport { Group } from './partials/group'\nimport { GroupLabel } from './partials/group-label'\nimport { Value } from './partials/value'\nimport { StyledComboboxContent } from './combobox.styled'\nimport {\n  ComboboxProvider,\n  useComboboxContext,\n} from './hooks/use-combobox-context'\nimport type { ComboboxProviderProps } from './hooks/use-combobox-context'\nimport type { Direction } from './types'\n\nexport interface ComboboxProps extends ComboboxProviderProps {\n  /**\n   * The value of the combobox when initially rendered. Use when you do not need\n   * to control the state of the combobox.\n   */\n  defaultValue?: string\n\n  /**\n   * The controlled value of the combobox. Should be used in conjunction with\n   * onValueChange.\n   */\n  value?: string\n\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n\n  /**\n   * The open state of the combobox when it is initially rendered. Use when you do\n   * not need to control its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * The controlled open state of the combobox. Must be used in conjunction with\n   * onOpen and onClose.\n   */\n  open?: boolean\n\n  /**\n   * Event handler called when the combobox opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the combobox closes.\n   */\n  onClose?: () => void\n\n  /**\n   * The reading direction of the combobox when applicable. If omitted, inherits\n   * globally from DirectionProvider or assumes LTR (left-to-right) reading\n   * mode.\n   * @default 'ltr'\n   */\n  direction?: Direction\n\n  /**\n   * The content of the combobox\n   */\n  children?: React.ReactNode\n}\n\nconst Root = React.forwardRef<\n  ElementRef<typeof StyledComboboxContent>,\n  ComboboxProps\n>(\n  (\n    {\n      onOpen,\n      onClose,\n      onValueChange,\n      value: valueProp,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const {\n      required,\n      readOnly,\n      'aria-disabled': ariaDisabled,\n      disabled,\n      direction,\n    } = useComboboxContext()\n\n    const { setRequired, setDisabled, setAriaDisabled, setReadOnly } =\n      useFormFieldContext()\n\n    useEffect(() => {\n      setRequired?.(required)\n      setDisabled?.(disabled)\n      setAriaDisabled?.(ariaDisabled)\n      setReadOnly?.(readOnly)\n    }, [\n      readOnly,\n      disabled,\n      ariaDisabled,\n      required,\n      setRequired,\n      setDisabled,\n      setAriaDisabled,\n      setReadOnly,\n    ])\n\n    return (\n      <StyledComboboxContent {...restProps} ref={forwardRef} dir={direction}>\n        {children}\n      </StyledComboboxContent>\n    )\n  }\n)\n\nexport const Combobox = React.forwardRef<\n  ElementRef<typeof StyledComboboxContent>,\n  ComboboxProps\n>(\n  (\n    {\n      'aria-disabled': ariaDisabled,\n      defaultOpen = false,\n      open,\n      valid,\n      disabled,\n      readOnly,\n      required,\n      value,\n      defaultValue,\n      direction = 'ltr',\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <ComboboxProvider\n      defaultValue={defaultValue}\n      value={value}\n      defaultOpen={defaultOpen}\n      open={open}\n      valid={valid}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      aria-disabled={ariaDisabled}\n      direction={direction}\n    >\n      <Root {...restProps} value={value} ref={forwardRef} />\n    </ComboboxProvider>\n  )\n) as ForwardRefExoticComponent<ComboboxProps> & Partials\n\nexport interface Partials {\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Item: typeof Item\n  Group: typeof Group\n  GroupLabel: typeof GroupLabel\n  Value: typeof Value\n}\n\nCombobox.Portal = Portal\nCombobox.Trigger = Trigger\nCombobox.Content = Content\nCombobox.Item = Item\nCombobox.Group = Group\nCombobox.GroupLabel = GroupLabel\nCombobox.Value = Value\n"],"names":["RadixPortal","Group","GroupLabel"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentPropsWithRef } from 'react';
+import react__default, { ReactNode } from 'react';
 import { HoverEvents } from '@react-types/shared';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import { StrictComponentProps } from '@mirohq/design-system-stitches';
@@ -10,6 +10,7 @@ import * as packages_components_input_src_types from 'packages/components/input/
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 import { PopoverPortalProps } from '@radix-ui/react-popover';
 import * as _ariakit_react from '@ariakit/react';
+import { FormElementProps } from '@mirohq/design-system-base-form';
 
 declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<packages_components_input_src_types.ClearableInputProps> & packages_components_input_src_input.Partials, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
@@ -512,6 +513,11 @@ interface TriggerProps extends StyledTriggerProps, HoverEvents {
      * @default 'large'
      */
     size?: StyledTriggerProps['size'];
+    /**
+     * The content that will be rendered inside the Combobox.Trigger when no value or
+     * defaultValue is set.
+     */
+    placeholder?: string;
 }
 declare const Trigger: react__default.ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & react__default.RefAttributes<HTMLInputElement>>;
 
@@ -2522,498 +2528,65 @@ interface GroupLabelProps extends StyledGroupLabelProps {
 }
 declare const GroupLabel: react__default.ForwardRefExoticComponent<Omit<GroupLabelProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-declare const StyledCombobox: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
-    'border-widths': {
-        readonly none: 0;
-        readonly sm: "1px";
-        readonly md: "2px";
-        readonly lg: "4px";
-    };
-    colors: {
-        readonly black: any;
-        readonly 'blue-100': any;
-        readonly 'blue-200': any;
-        readonly 'blue-300': any;
-        readonly 'blue-400': any;
-        readonly 'blue-500': any;
-        readonly 'blue-600': any;
-        readonly 'blue-700': any;
-        readonly 'blue-800': any;
-        readonly 'blue-900': any;
-        readonly 'blue-1000': any;
-        readonly 'gray-100': any;
-        readonly 'gray-200': any;
-        readonly 'gray-300': any;
-        readonly 'gray-400': any;
-        readonly 'gray-500': any;
-        readonly 'gray-600': any;
-        readonly 'gray-700': any;
-        readonly 'gray-800': any;
-        readonly 'gray-900': any;
-        readonly 'green-100': any;
-        readonly 'green-200': any;
-        readonly 'green-300': any;
-        readonly 'green-400': any;
-        readonly 'green-500': any;
-        readonly 'green-600': any;
-        readonly 'green-700': any;
-        readonly 'green-800': any;
-        readonly 'green-900': any;
-        readonly 'indigo-100': any;
-        readonly 'indigo-200': any;
-        readonly 'indigo-300': any;
-        readonly 'indigo-400': any;
-        readonly 'indigo-500': any;
-        readonly 'indigo-600': any;
-        readonly 'indigo-700': any;
-        readonly 'indigo-800': any;
-        readonly 'indigo-900': any;
-        readonly 'red-100': any;
-        readonly 'red-200': any;
-        readonly 'red-300': any;
-        readonly 'red-400': any;
-        readonly 'red-500': any;
-        readonly 'red-600': any;
-        readonly 'red-700': any;
-        readonly 'red-800': any;
-        readonly 'red-900': any;
-        readonly transparent: any;
-        readonly white: any;
-        readonly 'yellow-100': any;
-        readonly 'yellow-200': any;
-        readonly 'yellow-300': any;
-        readonly 'yellow-400': any;
-        readonly 'yellow-500': any;
-        readonly 'yellow-600': any;
-        readonly 'yellow-700': any;
-        readonly 'yellow-800': any;
-        readonly 'yellow-900': any;
-        "background-alpha-active"?: any;
-        "background-alpha-hover"?: any;
-        "background-danger-prominent"?: any;
-        "background-danger-prominent-active"?: any;
-        "background-danger-prominent-hover"?: any;
-        "background-danger-subtle"?: any;
-        "background-danger-subtle-active"?: any;
-        "background-danger-subtle-hover"?: any;
-        "background-neutrals"?: any;
-        "background-neutrals-active"?: any;
-        "background-neutrals-container"?: any;
-        "background-neutrals-controls-disabled"?: any;
-        "background-neutrals-disabled"?: any;
-        "background-neutrals-hover"?: any;
-        "background-neutrals-inactive"?: any;
-        "background-neutrals-inactive-hover"?: any;
-        "background-neutrals-inverted"?: any;
-        "background-neutrals-inverted-subtle"?: any;
-        "background-neutrals-page"?: any;
-        "background-neutrals-page-subtle"?: any;
-        "background-neutrals-scrolls"?: any;
-        "background-neutrals-scrolls-expanded"?: any;
-        "background-neutrals-scrolls-hover"?: any;
-        "background-neutrals-scrolls-pressed"?: any;
-        "background-neutrals-scrolls-pressed-hover"?: any;
-        "background-neutrals-subtle"?: any;
-        "background-neutrals-subtle-active"?: any;
-        "background-neutrals-subtle-hover"?: any;
-        "background-primary-prominent"?: any;
-        "background-primary-prominent-active"?: any;
-        "background-primary-prominent-expanded"?: any;
-        "background-primary-prominent-hover"?: any;
-        "background-primary-prominent-pressed"?: any;
-        "background-primary-prominent-pressed-hover"?: any;
-        "background-primary-prominent-selected"?: any;
-        "background-primary-subtle"?: any;
-        "background-primary-subtle-active"?: any;
-        "background-primary-subtle-expanded"?: any;
-        "background-primary-subtle-hover"?: any;
-        "background-primary-subtle-pressed"?: any;
-        "background-primary-subtle-pressed-hover"?: any;
-        "background-primary-subtle-selected"?: any;
-        "background-success"?: any;
-        "background-success-prominent"?: any;
-        "background-success-prominent-active"?: any;
-        "background-success-prominent-hover"?: any;
-        "background-warning-prominent"?: any;
-        "background-warning-subtle"?: any;
-        "border-danger"?: any;
-        "border-danger-active"?: any;
-        "border-danger-hover"?: any;
-        "border-focus-inner"?: any;
-        "border-focus-middle"?: any;
-        "border-focus-outer"?: any;
-        "border-neutrals"?: any;
-        "border-neutrals-active"?: any;
-        "border-neutrals-controls"?: any;
-        "border-neutrals-controls-disabled"?: any;
-        "border-neutrals-disabled"?: any;
-        "border-neutrals-hover"?: any;
-        "border-neutrals-inverted"?: any;
-        "border-neutrals-subtle"?: any;
-        "border-neutrals-text"?: any;
-        "border-neutrals-text-active"?: any;
-        "border-neutrals-text-hover"?: any;
-        "border-neutrals-text-subtle"?: any;
-        "border-neutrals-text-subtle-active"?: any;
-        "border-neutrals-text-subtle-hover"?: any;
-        "border-neutrals-transparent"?: any;
-        "border-primary"?: any;
-        "border-primary-active"?: any;
-        "border-primary-hover"?: any;
-        "border-primary-inverted"?: any;
-        "border-success"?: any;
-        "border-success-active"?: any;
-        "border-success-hover"?: any;
-        "border-warning"?: any;
-        "icon-danger"?: any;
-        "icon-danger-active"?: any;
-        "icon-danger-hover"?: any;
-        "icon-danger-inverted"?: any;
-        "icon-neutrals"?: any;
-        "icon-neutrals-disabled"?: any;
-        "icon-neutrals-inactive"?: any;
-        "icon-neutrals-inactive-hover"?: any;
-        "icon-neutrals-inverted"?: any;
-        "icon-neutrals-search"?: any;
-        "icon-neutrals-subtle"?: any;
-        "icon-neutrals-text"?: any;
-        "icon-primary"?: any;
-        "icon-primary-active"?: any;
-        "icon-primary-hover"?: any;
-        "icon-primary-inverted"?: any;
-        "icon-primary-selected"?: any;
-        "icon-success"?: any;
-        "icon-success-active"?: any;
-        "icon-success-hover"?: any;
-        "icon-success-inverted"?: any;
-        "icon-warning"?: any;
-        "icon-warning-prominent"?: any;
-        "icon-warning-subtle"?: any;
-        "text-danger"?: any;
-        "text-danger-active"?: any;
-        "text-danger-hover"?: any;
-        "text-danger-inverted"?: any;
-        "text-neutrals"?: any;
-        "text-neutrals-active"?: any;
-        "text-neutrals-disabled"?: any;
-        "text-neutrals-hover"?: any;
-        "text-neutrals-inverted"?: any;
-        "text-neutrals-placeholder"?: any;
-        "text-neutrals-placeholder-only"?: any;
-        "text-neutrals-subtle"?: any;
-        "text-neutrals-subtle-active"?: any;
-        "text-neutrals-subtle-hover"?: any;
-        "text-primary"?: any;
-        "text-primary-active"?: any;
-        "text-primary-hover"?: any;
-        "text-primary-inverted"?: any;
-        "text-primary-inverted-subtle"?: any;
-        "text-primary-selected"?: any;
-        "text-success"?: any;
-        "text-success-active"?: any;
-        "text-success-hover"?: any;
-        "text-success-inverted"?: any;
-        "text-warning"?: any;
-        "text-warning-subtle"?: any;
-    };
-    'font-sizes': {
-        readonly 150: "0.75rem";
-        readonly 175: "0.875rem";
-        readonly 200: "1rem";
-        readonly 225: "1.125rem";
-        readonly 250: "1.25rem";
-        readonly 300: "1.5rem";
-        readonly 400: "2rem";
-        readonly 500: "2.5rem";
-        readonly 600: "3rem";
-        readonly 800: "4rem";
-        readonly 900: "4.5rem";
-    };
-    fonts: {
-        readonly heading: "Roobert, sans-serif";
-        readonly body: "Open Sans, sans-serif";
-    };
-    radii: {
-        readonly none: 0;
-        readonly half: "999em";
-        readonly 25: "2px";
-        readonly 50: "4px";
-        readonly 75: "6px";
-        readonly 100: "8px";
-        readonly 200: "16px";
-    };
-    shadows: {
-        readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
-        readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
-        readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
-        readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
-        readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
-        readonly 'focus-controls-success': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$background-success-prominent, 0 0 0 5px $colors$background-success";
-    };
-    sizes: {
-        readonly number: string;
-        readonly 'icon-200': "16px";
-        readonly 'icon-300': "24px";
-        readonly 'icon-400': "32px";
-    };
-    space: {
-        readonly 0: "0px";
-        readonly 25: "2px";
-        readonly 50: "4px";
-        readonly 100: "8px";
-        readonly 150: "12px";
-        readonly 200: "16px";
-        readonly 300: "24px";
-        readonly 400: "32px";
-        readonly 500: "40px";
-        readonly 600: "48px";
-        readonly 700: "56px";
-        readonly 800: "64px";
-        readonly 1200: "96px";
-        readonly 1600: "128px";
-    };
-    'space-gap': {
-        readonly 0: any;
-        readonly 50: any;
-        readonly 100: any;
-        readonly 200: any;
-        readonly 300: any;
-    };
-    'space-inset': {
-        readonly 0: any;
-        readonly 50: any;
-        readonly 100: any;
-        readonly 150: any;
-        readonly 200: any;
-        readonly 300: any;
-        readonly 400: any;
-        readonly 500: any;
-        readonly 600: any;
-        readonly 700: any;
-        readonly 800: any;
-        readonly 1200: any;
-        readonly 1600: any;
-    };
-    'space-offset': {
-        readonly 0: any;
-        readonly 50: any;
-        readonly 100: any;
-        readonly 150: any;
-        readonly 200: any;
-        readonly 300: any;
-        readonly 400: any;
-        readonly 600: any;
-        readonly 800: any;
-        readonly 1200: any;
-        readonly 1600: any;
-        readonly 'stacking-0': any;
-        readonly 'stacking-100': any;
-        readonly 'stacking-200': any;
-        readonly 'stacking-300': any;
-        readonly 'stacking-400': any;
-        readonly 'stacking-500': any;
-        readonly 'stacking-800': any;
-    };
-    'stroke-width': {
-        readonly thin: "1.5px";
-        readonly normal: "2px";
-        readonly bold: "4px";
-    };
-    'z-indices': {
-        readonly dropdownMenu: 100;
-        readonly select: 200;
-        readonly popover: 300;
-        readonly tooltip: 400;
-    };
-}, {
-    readonly background: "colors";
-    readonly backgroundColor: "colors";
-    readonly backgroundImage: "colors";
-    readonly blockSize: "sizes";
-    readonly border: "colors";
-    readonly borderBlock: "colors";
-    readonly borderBlockEnd: "colors";
-    readonly borderBlockStart: "colors";
-    readonly borderBottom: "colors";
-    readonly borderBottomColor: "colors";
-    readonly borderBottomLeftRadius: "radii";
-    readonly borderBottomRightRadius: "radii";
-    readonly borderBottomStyle: "border-styles";
-    readonly borderBottomWidth: "border-widths";
-    readonly borderColor: "colors";
-    readonly borderImage: "colors";
-    readonly borderInline: "colors";
-    readonly borderInlineEnd: "colors";
-    readonly borderInlineStart: "colors";
-    readonly borderLeft: "colors";
-    readonly borderLeftColor: "colors";
-    readonly borderLeftStyle: "border-styles";
-    readonly borderLeftWidth: "border-widths";
-    readonly borderRadius: "radii";
-    readonly borderRight: "colors";
-    readonly borderRightColor: "colors";
-    readonly borderRightStyle: "border-styles";
-    readonly borderRightWidth: "border-widths";
-    readonly borderSpacing: "space-offset";
-    readonly borderStyle: "border-styles";
-    readonly borderTop: "colors";
-    readonly borderTopColor: "colors";
-    readonly borderTopLeftRadius: "radii";
-    readonly borderTopRightRadius: "radii";
-    readonly borderTopStyle: "border-styles";
-    readonly borderTopWidth: "border-widths";
-    readonly borderWidth: "border-widths";
-    readonly bottom: "space";
-    readonly boxShadow: "shadows";
-    readonly caretColor: "colors";
-    readonly color: "colors";
-    readonly columnGap: "space-gap";
-    readonly columnRuleColor: "colors";
-    readonly fill: "colors";
-    readonly flexBasis: "sizes";
-    readonly fontFamily: "fonts";
-    readonly fontSize: "font-sizes";
-    readonly fontWeight: "font-weights";
-    readonly gap: "space-gap";
-    readonly gridColumnGap: "space-gap";
-    readonly gridGap: "space-gap";
-    readonly gridRowGap: "space-gap";
-    readonly gridTemplateColumns: "sizes";
-    readonly gridTemplateRows: "sizes";
-    readonly height: "sizes";
-    readonly inlineSize: "sizes";
-    readonly inset: "space-inset";
-    readonly insetBlock: "space-inset";
-    readonly insetBlockEnd: "space-inset";
-    readonly insetBlockStart: "space-inset";
-    readonly insetInline: "space-inset";
-    readonly insetInlineEnd: "space-inset";
-    readonly insetInlineStart: "space-inset";
-    readonly left: "space";
-    readonly letterSpacing: "letter-spacings";
-    readonly lineHeight: "line-heights";
-    readonly margin: "space-offset";
-    readonly marginBlock: "space-offset";
-    readonly marginBlockEnd: "space-offset";
-    readonly marginBlockStart: "space-offset";
-    readonly marginBottom: "space-offset";
-    readonly marginInline: "space-offset";
-    readonly marginInlineEnd: "space-offset";
-    readonly marginInlineStart: "space-offset";
-    readonly marginLeft: "space-offset";
-    readonly marginRight: "space-offset";
-    readonly marginTop: "space-offset";
-    readonly maxBlockSize: "sizes";
-    readonly maxHeight: "sizes";
-    readonly maxInlineSize: "sizes";
-    readonly maxWidth: "sizes";
-    readonly minBlockSize: "sizes";
-    readonly minHeight: "sizes";
-    readonly minInlineSize: "sizes";
-    readonly minWidth: "sizes";
-    readonly outline: "colors";
-    readonly outlineColor: "colors";
-    readonly padding: "space-inset";
-    readonly paddingBlock: "space-inset";
-    readonly paddingBlockEnd: "space-inset";
-    readonly paddingBlockStart: "space-inset";
-    readonly paddingBottom: "space-inset";
-    readonly paddingInline: "space-inset";
-    readonly paddingInlineEnd: "space-inset";
-    readonly paddingInlineStart: "space-inset";
-    readonly paddingLeft: "space-inset";
-    readonly paddingRight: "space-inset";
-    readonly paddingTop: "space-inset";
-    readonly right: "space";
-    readonly rowGap: "space-gap";
-    readonly scrollMargin: "space-offset";
-    readonly scrollMarginBlock: "space-offset";
-    readonly scrollMarginBlockEnd: "space-offset";
-    readonly scrollMarginBlockStart: "space-offset";
-    readonly scrollMarginBottom: "space-offset";
-    readonly scrollMarginInline: "space-offset";
-    readonly scrollMarginInlineEnd: "space-offset";
-    readonly scrollMarginInlineStart: "space-offset";
-    readonly scrollMarginLeft: "space-offset";
-    readonly scrollMarginRight: "space-offset";
-    readonly scrollMarginTop: "space-offset";
-    readonly scrollPadding: "space-inset";
-    readonly scrollPaddingBlock: "space-inset";
-    readonly scrollPaddingBlockEnd: "space-inset";
-    readonly scrollPaddingBlockStart: "space-inset";
-    readonly scrollPaddingBottom: "space-inset";
-    readonly scrollPaddingInline: "space-inset";
-    readonly scrollPaddingInlineEnd: "space-inset";
-    readonly scrollPaddingInlineStart: "space-inset";
-    readonly scrollPaddingLeft: "space-inset";
-    readonly scrollPaddingRight: "space-inset";
-    readonly scrollPaddingTop: "space-inset";
-    readonly stroke: "colors";
-    readonly strokeWidth: "stroke-width";
-    readonly textDecorationColor: "colors";
-    readonly textShadow: "shadows";
-    readonly top: "space";
-    readonly transition: "transitions";
-    readonly width: "sizes";
-    readonly zIndex: "z-indices";
-}, {
-    paddingX: (value: {
-        readonly [$$PropertyValue]: "padding";
-    }) => {
-        paddingLeft: {
-            readonly [$$PropertyValue]: "padding";
-        };
-        paddingRight: {
-            readonly [$$PropertyValue]: "padding";
-        };
-    };
-    paddingY: (value: {
-        readonly [$$PropertyValue]: "padding";
-    }) => {
-        paddingTop: {
-            readonly [$$PropertyValue]: "padding";
-        };
-        paddingBottom: {
-            readonly [$$PropertyValue]: "padding";
-        };
-    };
-    marginX: (value: {
-        readonly [$$PropertyValue]: "margin";
-    }) => {
-        marginLeft: {
-            readonly [$$PropertyValue]: "margin";
-        };
-        marginRight: {
-            readonly [$$PropertyValue]: "margin";
-        };
-    };
-    marginY: (value: {
-        readonly [$$PropertyValue]: "margin";
-    }) => {
-        marginTop: {
-            readonly [$$PropertyValue]: "margin";
-        };
-        marginBottom: {
-            readonly [$$PropertyValue]: "margin";
-        };
-    };
-    square: (value: {
-        readonly [$$PropertyValue]: "width";
-    }) => {
-        width: {
-            readonly [$$PropertyValue]: "width";
-        };
-        height: {
-            readonly [$$PropertyValue]: "width";
-        };
-    };
-    _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
-        '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
-    };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
-declare type StyledComboboxProps = ComponentPropsWithRef<typeof StyledCombobox>;
+declare const Value: react__default.ForwardRefExoticComponent<react__default.RefAttributes<HTMLSpanElement>>;
+
+declare type Direction = 'ltr' | 'rtl';
+
+interface ComboboxProps$1 extends FormElementProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    value?: string;
+    defaultValue?: string;
+    searchValue?: string;
+    direction?: Direction;
+}
+declare type ComboboxProviderProps = ComboboxProps$1;
 
-interface ComboboxProps extends StyledComboboxProps {
+interface ComboboxProps extends ComboboxProviderProps {
+    /**
+     * The value of the combobox when initially rendered. Use when you do not need
+     * to control the state of the combobox.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the combobox. Should be used in conjunction with
+     * onValueChange.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The open state of the combobox when it is initially rendered. Use when you do
+     * not need to control its open state.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled open state of the combobox. Must be used in conjunction with
+     * onOpen and onClose.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the combobox opens.
+     */
+    onOpen?: () => void;
+    /**
+     * Event handler called when the combobox closes.
+     */
+    onClose?: () => void;
+    /**
+     * The reading direction of the combobox when applicable. If omitted, inherits
+     * globally from DirectionProvider or assumes LTR (left-to-right) reading
+     * mode.
+     * @default 'ltr'
+     */
+    direction?: Direction;
+    /**
+     * The content of the combobox
+     */
+    children?: react__default.ReactNode;
 }
 declare const Combobox: react__default.ForwardRefExoticComponent<ComboboxProps> & Partials;
 interface Partials {
@@ -3023,6 +2596,7 @@ interface Partials {
     Item: typeof Item;
     Group: typeof Group;
     GroupLabel: typeof GroupLabel;
+    Value: typeof Value;
 }
 
 export { Combobox, ComboboxProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-combobox",
-  "version": "0.1.0-combobox.0",
+  "version": "0.1.0-combobox.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -32,13 +32,13 @@
     "@react-aria/interactions": "^3.13.0",
     "@react-types/shared": "^3.16.0",
     "@mirohq/design-system-base-form": "^0.1.0",
+    "@mirohq/design-system-form": "^0.1.1",
     "@mirohq/design-system-icons": "^0.36.2",
     "@mirohq/design-system-input": "^0.1.1",
-    "@mirohq/design-system-form": "^0.1.1",
+    "@mirohq/design-system-stitches": "^2.6.0",
     "@mirohq/design-system-primitive": "^1.1.2",
     "@mirohq/design-system-styles": "^1.1.19",
-    "@mirohq/design-system-utils": "^0.15.0",
-    "@mirohq/design-system-stitches": "^2.6.0"
+    "@mirohq/design-system-utils": "^0.15.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",