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

package/dist/main.js

@@ -0,0 +1,147 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+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');
+
+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 Trigger = React__default["default"].forwardRef(
+  ({
+    id,
+    children,
+    size = "large",
+    "aria-describedby": ariaDescribedBy,
+    onHoverChange,
+    onHoverStart,
+    onHoverEnd,
+    ...restProps
+  }, forwardRef) => {
+    const {
+      formElementId,
+      ariaDescribedBy: formFieldContextDescribedBy,
+      ariaInvalid,
+      valid: formFieldValid
+    } = designSystemBaseForm.useFormFieldContext();
+    const valid = formFieldValid;
+    const { hoverProps } = interactions.useHover({
+      onHoverStart,
+      onHoverEnd,
+      onHoverChange: (isHovering) => {
+        onHoverChange == null ? void 0 : onHoverChange(isHovering);
+      }
+    });
+    const commonProps = {
+      ...restProps,
+      ref: forwardRef,
+      "aria-invalid": ariaInvalid,
+      "aria-describedby": designSystemUtils.stringAttrValue(
+        ariaDescribedBy,
+        formFieldContextDescribedBy
+      ),
+      valid,
+      invalid: designSystemUtils.booleanishAttrValue(valid),
+      id: id != null ? id : formElementId
+    };
+    const variants = {
+      size
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledTrigger, { ...hoverProps, ...commonProps, ...variants, children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(designSystemInput.Input.ActionButton, { label: "custom label", children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronDown, { size: "small", weight: "thin" }) })
+    ] });
+  }
+);
+
+const StyledContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  backgroundColor: "$background-neutrals-container",
+  borderRadius: "$50",
+  boxShadow: "$50",
+  minWidth: "var(--radix-select-trigger-width)",
+  padding: "$50",
+  zIndex: "$select"
+});
+
+const Content = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledContent, { ...restProps, ref: forwardRef, children }));
+
+const StyledItem = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  borderRadius: "$50",
+  boxSizing: "border-box",
+  color: "$text-neutrals",
+  cursor: "pointer",
+  fontSize: "$175",
+  lineHeight: 1.5,
+  position: "relative",
+  userSelect: "none",
+  padding: "6px 0",
+  paddingInline: "$150 $100",
+  '&:hover:not([aria-disabled="true"])': {
+    background: "$background-primary-subtle-hover",
+    color: "$text-primary-hover"
+  }
+});
+
+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
+  ] })
+);
+
+const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(reactPopover.Portal, { ...props });
+
+const StyledGroup = designSystemStitches.styled(Ariakit.Group, {});
+
+const Group = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGroup, { ...props, ref: forwardRef }));
+
+const StyledGroupLabel = designSystemStitches.styled(Ariakit.GroupLabel, {});
+
+const GroupLabel = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
+
+const StyledCombobox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
+
+const Combobox = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledCombobox, { ...props, ref: forwardRef }));
+Combobox.Portal = Portal;
+Combobox.Trigger = Trigger;
+Combobox.Content = Content;
+Combobox.Item = Item;
+Combobox.Group = Group;
+Combobox.GroupLabel = GroupLabel;
+
+exports.Combobox = Combobox;
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +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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"}

package/dist/module.js

@@ -0,0 +1,121 @@
+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 { useFormFieldContext } from '@mirohq/design-system-base-form';
+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';
+
+const StyledTrigger = styled(Input, {});
+
+const Trigger = React.forwardRef(
+  ({
+    id,
+    children,
+    size = "large",
+    "aria-describedby": ariaDescribedBy,
+    onHoverChange,
+    onHoverStart,
+    onHoverEnd,
+    ...restProps
+  }, forwardRef) => {
+    const {
+      formElementId,
+      ariaDescribedBy: formFieldContextDescribedBy,
+      ariaInvalid,
+      valid: formFieldValid
+    } = useFormFieldContext();
+    const valid = formFieldValid;
+    const { hoverProps } = useHover({
+      onHoverStart,
+      onHoverEnd,
+      onHoverChange: (isHovering) => {
+        onHoverChange == null ? void 0 : onHoverChange(isHovering);
+      }
+    });
+    const commonProps = {
+      ...restProps,
+      ref: forwardRef,
+      "aria-invalid": ariaInvalid,
+      "aria-describedby": stringAttrValue(
+        ariaDescribedBy,
+        formFieldContextDescribedBy
+      ),
+      valid,
+      invalid: booleanishAttrValue(valid),
+      id: id != null ? id : formElementId
+    };
+    const variants = {
+      size
+    };
+    return /* @__PURE__ */ jsxs(StyledTrigger, { ...hoverProps, ...commonProps, ...variants, children: [
+      children,
+      /* @__PURE__ */ jsx(Input.ActionButton, { label: "custom label", children: /* @__PURE__ */ jsx(IconChevronDown, { size: "small", weight: "thin" }) })
+    ] });
+  }
+);
+
+const StyledContent = styled(Primitive.div, {
+  backgroundColor: "$background-neutrals-container",
+  borderRadius: "$50",
+  boxShadow: "$50",
+  minWidth: "var(--radix-select-trigger-width)",
+  padding: "$50",
+  zIndex: "$select"
+});
+
+const Content = React.forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledContent, { ...restProps, ref: forwardRef, children }));
+
+const StyledItem = styled(Primitive.div, {
+  borderRadius: "$50",
+  boxSizing: "border-box",
+  color: "$text-neutrals",
+  cursor: "pointer",
+  fontSize: "$175",
+  lineHeight: 1.5,
+  position: "relative",
+  userSelect: "none",
+  padding: "6px 0",
+  paddingInline: "$150 $100",
+  '&:hover:not([aria-disabled="true"])': {
+    background: "$background-primary-subtle-hover",
+    color: "$text-primary-hover"
+  }
+});
+
+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
+  ] })
+);
+
+const Portal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
+
+const StyledGroup = styled(Group$1, {});
+
+const Group = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledGroup, { ...props, ref: forwardRef }));
+
+const StyledGroupLabel = styled(GroupLabel$1, {});
+
+const GroupLabel = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
+
+const StyledCombobox = styled(Primitive.div, {});
+
+const Combobox = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledCombobox, { ...props, ref: forwardRef }));
+Combobox.Portal = Portal;
+Combobox.Trigger = Trigger;
+Combobox.Content = Content;
+Combobox.Item = Item;
+Combobox.Group = Group;
+Combobox.GroupLabel = GroupLabel;
+
+export { Combobox };
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +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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"}