@mirohq/design-system-base-input 0.0.1-input.0 → 0.0.1-input.1

package/dist/module.js

@@ -1,27 +1,166 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { createContext, useContext } from 'react';
-import { booleanify, removeEventProps } from '@mirohq/design-system-utils';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React, { createContext, useRef, useState, useContext } from 'react';
+import { booleanify, removeEventProps, addPropsToChildren, mergeRefs } from '@mirohq/design-system-utils';
+import { useHover } from '@react-aria/interactions';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled } from '@mirohq/design-system-stitches';
-import { focus } from '@mirohq/design-system-styles';
+import { IconExclamationPointCircle, IconCheckMark } from '@mirohq/design-system-icons';
+import { mergeProps } from '@react-aria/utils';
 
-const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
-const StyledContainer = styled("span", {
-  position: "relative",
-  display: "inline-flex",
-  verticalAlign: "middle",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  width: "100%"
+const StyledIconExclamationPointCircle = styled(
+  IconExclamationPointCircle,
+  {
+    color: "$icon-danger"
+  }
+);
+const StyledIconCheckMark = styled(IconCheckMark, {
+  color: "$icon-success"
 });
-const StyledBaseInput = styled(Primitive.input, {
-  all: "unset",
-  boxSizing: "border-box",
+const StyledValidityBox = styled(Primitive.div, {
+  order: 3,
+  display: "flex",
+  alignItems: "center"
+});
+const StyledBaseInput = styled("div", {
+  alignItems: "center",
   background: "$background-neutrals-container",
   border: "1px solid $border-neutrals",
   borderRadius: "$50",
+  display: "flex",
+  height: "max-content",
+  justifyContent: "flex-end",
+  position: "relative",
+  verticalAlign: "middle",
+  boxSizing: "border-box",
+  width: "100%",
+  variants: {
+    hovered: {
+      true: {},
+      false: {}
+    },
+    focused: {
+      true: {
+        boxShadow: "$focus-controls"
+      },
+      false: {}
+    },
+    valid: {
+      true: {},
+      false: {}
+    },
+    readOnly: {
+      true: {
+        background: "$background-neutrals-disabled",
+        color: "$text-neutrals-subtle"
+      },
+      false: {}
+    },
+    disabled: {
+      true: {
+        background: "$background-neutrals-disabled"
+      },
+      false: {}
+    },
+    ariaDisabled: {
+      true: {
+        background: "$background-neutrals-disabled"
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    /** Idle states */
+    {
+      valid: false,
+      readOnly: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: {
+        borderColor: "$border-danger"
+      }
+    },
+    {
+      valid: true,
+      readOnly: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: {
+        borderColor: "$border-success"
+      }
+    },
+    /** Focus States */
+    {
+      focused: true,
+      readOnly: false,
+      css: {
+        borderColor: "$border-neutrals"
+      }
+    },
+    {
+      focused: true,
+      readOnly: false,
+      valid: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: {
+        borderColor: "$border-danger",
+        boxShadow: "$focus-controls-error"
+      }
+    },
+    {
+      focused: true,
+      readOnly: false,
+      valid: true,
+      disabled: false,
+      ariaDisabled: false,
+      css: {
+        borderColor: "$border-success",
+        boxShadow: "$focus-controls-success"
+      }
+    },
+    /** Hover states */
+    {
+      hovered: true,
+      disabled: false,
+      ariaDisabled: false,
+      readOnly: false,
+      css: {
+        borderColor: "$border-primary-hover"
+      }
+    },
+    {
+      hovered: true,
+      focused: false,
+      valid: false,
+      readOnly: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: {
+        borderColor: "$border-danger-hover"
+      }
+    },
+    {
+      hovered: true,
+      focused: false,
+      valid: true,
+      readOnly: false,
+      disabled: false,
+      ariaDisabled: false,
+      css: {
+        borderColor: "$border-success-hover"
+      }
+    }
+  ]
+});
+
+const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
+const StyledInput = styled(Primitive.input, {
+  all: "unset",
+  background: "transparent",
   color: "$text-neutrals",
   width: "100%",
+  borderRadius: "$50",
+  order: 2,
   "&::placeholder": {
     fontStyle: "italic"
   },
@@ -29,111 +168,227 @@ const StyledBaseInput = styled(Primitive.input, {
     color: "$text-neutrals-subtle"
   },
   "&:read-only": {
-    background: "$background-neutrals-disabled",
-    color: "$text-neutrals"
+    color: "$text-neutrals-subtle"
   },
   "&:disabled, &[aria-disabled=true], &[data-disabled]": {
     caretColor: "transparent",
-    background: "$background-neutrals-disabled",
     "&, &::placeholder": {
       color: "$text-neutrals-disabled"
     },
     "&:selection": {
       background: "transparent"
     }
-  },
-  ["&:hover:not(".concat(disabledAndReadonlySelectors, ")")]: {
-    borderColor: "$border-primary-hover"
-  },
-  "&:focus": focus.css({
-    boxShadow: "$focus-controls"
-  }),
-  ["&:where(:invalid, [data-invalid], [aria-invalid=true]):not(".concat(disabledAndReadonlySelectors, ")")]: {
-    borderColor: "$border-danger",
-    "&:focus": focus.css({
-      boxShadow: "$focus-controls-error"
-    }),
-    "&:hover": {
-      borderColor: "$border-danger-hover"
-    }
   }
 });
 
-const StyledInputSlot = styled(Primitive.div, {
-  position: "absolute",
-  marginInlineEnd: "$50"
+const InputContext = createContext({
+  actionSlotRef: { current: null },
+  setFocused: () => {
+  },
+  setHovered: () => {
+  },
+  setActive: () => {
+  }
 });
-
-const InputContext = createContext({});
 const InputProvider = ({
   children,
+  disabled,
+  ariaDisabled,
+  readOnly,
   ...restProps
-}) => /* @__PURE__ */ jsx(InputContext.Provider, { value: restProps, children });
+}) => {
+  const actionSlotRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [active, setActive] = useState(false);
+  const editable = !booleanify(disabled) && !booleanify(ariaDisabled) && !booleanify(readOnly);
+  return /* @__PURE__ */ jsx(
+    InputContext.Provider,
+    {
+      value: {
+        ...restProps,
+        setFocused,
+        setHovered,
+        setActive,
+        active,
+        hovered,
+        focused,
+        actionSlotRef,
+        disabled,
+        ariaDisabled,
+        readOnly,
+        editable
+      },
+      children
+    }
+  );
+};
 const useInputContext = () => useContext(InputContext);
 
-const InputSlot = React.forwardRef((props, forwardRef) => {
-  const { disabled, ariaDisabled, readOnly } = useInputContext();
-  if (booleanify(disabled) || booleanify(ariaDisabled) || booleanify(readOnly)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(StyledInputSlot, { ...props, ref: forwardRef });
-});
-
 const keyboardEventHandler = (e) => {
   if (e.key !== "Tab") {
     e.preventDefault();
   }
 };
-const BaseInput = React.forwardRef(
-  ({
-    "aria-disabled": ariaDisabled,
-    disabled,
-    readOnly,
-    value,
-    children,
-    ...restProps
-  }, forwardRef) => {
-    let elementProps = restProps;
-    if (booleanify(ariaDisabled)) {
-      elementProps = removeEventProps(restProps, [
-        "onFocus",
-        "onBlur",
-        "onPointerMove"
-      ]);
-      elementProps.onKeyDown = keyboardEventHandler;
-      elementProps.onKeyUp = keyboardEventHandler;
+const Input = React.forwardRef((props, forwardRef) => {
+  const { ariaDisabled, disabled, readOnly, setFocused } = useInputContext();
+  let elementProps = props;
+  if (booleanify(ariaDisabled)) {
+    elementProps = removeEventProps(props, [
+      "onFocus",
+      "onBlur",
+      "onPointerMove"
+    ]);
+    elementProps.onKeyDown = keyboardEventHandler;
+    elementProps.onKeyUp = keyboardEventHandler;
+  }
+  const onBlurEventHandler = () => {
+    setFocused == null ? void 0 : setFocused(false);
+  };
+  const onFocusEventHandler = () => {
+    setFocused == null ? void 0 : setFocused(true);
+  };
+  elementProps = mergeProps(elementProps, {
+    onBlur: onBlurEventHandler,
+    onFocus: onFocusEventHandler
+  });
+  return /* @__PURE__ */ jsx(
+    StyledInput,
+    {
+      ...elementProps,
+      "aria-disabled": ariaDisabled,
+      disabled,
+      readOnly,
+      ref: forwardRef
     }
-    const input = /* @__PURE__ */ jsx(
-      StyledBaseInput,
-      {
-        ...elementProps,
-        "aria-disabled": ariaDisabled,
-        disabled,
-        readOnly,
-        value,
-        ref: forwardRef
+  );
+});
+
+const StyledActionSlot = styled(Primitive.div, {
+  variants: {
+    readOnly: {
+      true: {
+        "& svg[data-icon-component], & img[data-icon-component]": {
+          color: "$icon-neutrals-subtle"
+        }
       }
-    );
-    let render = input;
-    if (children != null) {
-      render = /* @__PURE__ */ jsxs(StyledContainer, { children: [
-        input,
-        children
-      ] });
     }
-    return /* @__PURE__ */ jsx(
-      InputProvider,
-      {
-        disabled,
-        ariaDisabled,
-        readOnly,
-        value,
-        children: render
+  }
+});
+
+const ActionSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { valid, hovered, editable, actionSlotRef, active, readOnly } = useInputContext();
+  const showInputSlot = valid === void 0 || booleanify(hovered) || booleanify(active);
+  let formattedChildren = children;
+  if (!booleanify(editable)) {
+    formattedChildren = addPropsToChildren(children, () => true, {
+      disabled: true
+    });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: showInputSlot && /* @__PURE__ */ jsx(
+    StyledActionSlot,
+    {
+      ...restProps,
+      readOnly,
+      ref: mergeRefs([forwardRef, actionSlotRef]),
+      children: formattedChildren
+    }
+  ) });
+});
+
+const StyledIconSlot = styled(Primitive.div, {
+  alignContent: "center",
+  display: "flex",
+  justifyContent: "center",
+  color: "$icon-neutrals-subtle",
+  variants: {
+    disabled: {
+      true: {
+        "& svg": {
+          color: "$icon-neutrals-disabled"
+        }
       }
-    );
+    }
   }
+});
+
+const IconSlot = React.forwardRef((props, forwardRef) => {
+  const { ariaDisabled, disabled } = useInputContext();
+  return /* @__PURE__ */ jsx(
+    StyledIconSlot,
+    {
+      ...props,
+      disabled: booleanify(disabled != null ? disabled : ariaDisabled),
+      ref: forwardRef
+    }
+  );
+});
+
+const Root = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const {
+    valid,
+    ariaDisabled,
+    disabled,
+    readOnly,
+    focused,
+    active,
+    setHovered,
+    setActive
+  } = useInputContext();
+  const ref = useRef(null);
+  const { hoverProps, isHovered: hovered } = useHover({
+    onHoverChange: setHovered
+  });
+  const ariaDisabledOrDisabled = booleanify(ariaDisabled) || booleanify(disabled);
+  const showValidityIcon = !ariaDisabledOrDisabled && !booleanify(readOnly) && !booleanify(hovered) && !booleanify(focused) && !booleanify(active) && (valid === true || valid === false);
+  const ValidIcon = valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle;
+  return /* @__PURE__ */ jsxs(
+    StyledBaseInput,
+    {
+      ...restProps,
+      ...hoverProps,
+      ref: mergeRefs([ref, forwardRef]),
+      hovered,
+      focused,
+      valid,
+      disabled: booleanify(disabled),
+      ariaDisabled: booleanify(ariaDisabled),
+      readOnly: booleanify(readOnly),
+      "data-invalid": valid === false ? "" : void 0,
+      "data-valid": valid === true ? "" : void 0,
+      onFocus: () => {
+        setActive(true);
+      },
+      onBlur: () => {
+        setTimeout(() => {
+          var _a;
+          if ((ref == null ? void 0 : ref.current) != null && !((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.contains(document.activeElement))) {
+            setActive(false);
+          }
+        }, 0);
+      },
+      children: [
+        children,
+        showValidityIcon && /* @__PURE__ */ jsx(StyledValidityBox, { children: /* @__PURE__ */ jsx(ValidIcon, { size: "small" }) })
+      ]
+    }
+  );
+});
+const BaseInput = React.forwardRef(
+  ({ "aria-disabled": ariaDisabled, disabled, valid, readOnly, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(
+    InputProvider,
+    {
+      valid,
+      disabled,
+      ariaDisabled,
+      readOnly,
+      children: /* @__PURE__ */ jsx(Root, { ...restProps, ref: forwardRef })
+    }
+  )
 );
-BaseInput.InputSlot = InputSlot;
+BaseInput.ActionSlot = ActionSlot;
+BaseInput.IconSlot = IconSlot;
+BaseInput.Input = Input;
 
 export { BaseInput };
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/base-input.styled.tsx","../src/partials/input-slot.styled.tsx","../src/use-input-context.tsx","../src/partials/input-slot.tsx","../src/base-input.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst disabledAndReadonlySelectors =\n  ':read-only, :disabled, [aria-disabled=\"true\"], [data-disabled]'\n\nexport const StyledContainer = styled('span', {\n  position: 'relative',\n  display: 'inline-flex',\n  verticalAlign: 'middle',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  width: '100%',\n})\n\nexport const StyledBaseInput = styled(Primitive.input, {\n  all: 'unset',\n  boxSizing: 'border-box',\n  background: '$background-neutrals-container',\n  border: '1px solid $border-neutrals',\n  borderRadius: '$50',\n  color: '$text-neutrals',\n  width: '100%',\n\n  '&::placeholder': {\n    fontStyle: 'italic',\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]: {\n    color: '$text-neutrals-subtle',\n  },\n\n  '&:read-only': {\n    background: '$background-neutrals-disabled',\n    color: '$text-neutrals',\n  },\n\n  '&:disabled, &[aria-disabled=true], &[data-disabled]': {\n    caretColor: 'transparent',\n    background: '$background-neutrals-disabled',\n    '&, &::placeholder': {\n      color: '$text-neutrals-disabled',\n    },\n    '&:selection': {\n      background: 'transparent',\n    },\n  },\n\n  [`&:hover:not(${disabledAndReadonlySelectors})`]: {\n    borderColor: '$border-primary-hover',\n  },\n\n  '&:focus': focus.css({\n    boxShadow: '$focus-controls',\n  }),\n\n  [`&:where(:invalid, [data-invalid], [aria-invalid=true]):not(${disabledAndReadonlySelectors})`]:\n    {\n      borderColor: '$border-danger',\n      '&:focus': focus.css({\n        boxShadow: '$focus-controls-error',\n      }),\n      '&:hover': {\n        borderColor: '$border-danger-hover',\n      },\n    },\n})\n\nexport type StyledBaseInputProps = ComponentPropsWithRef<typeof StyledBaseInput>\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledInputSlot = styled(Primitive.div, {\n  position: 'absolute',\n  marginInlineEnd: '$50',\n})\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren, HTMLProps } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nexport interface InputContextProps {\n  disabled?: boolean\n  ariaDisabled?: Booleanish\n  readOnly?: boolean\n  value?: HTMLProps<'input'>['value']\n}\n\nconst InputContext = createContext<InputContextProps>({})\n\nexport const InputProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<InputContextProps>): any => (\n  <InputContext.Provider value={restProps}>{children}</InputContext.Provider>\n)\n\nexport const useInputContext = (): InputContextProps => useContext(InputContext)\n","import React from 'react'\nimport type { ComponentPropsWithRef, ElementRef } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { StyledInputSlot } from './input-slot.styled'\nimport { useInputContext } from '../use-input-context'\n\nexport const InputSlot = React.forwardRef<\n  ElementRef<typeof StyledInputSlot>,\n  ComponentPropsWithRef<typeof StyledInputSlot>\n>((props, forwardRef) => {\n  const { disabled, ariaDisabled, readOnly } = useInputContext()\n\n  if (\n    booleanify(disabled) ||\n    booleanify(ariaDisabled) ||\n    booleanify(readOnly)\n  ) {\n    return null\n  }\n\n  return <StyledInputSlot {...props} ref={forwardRef} />\n})\n","import React from 'react'\nimport type {\n  ElementRef,\n  ForwardRefExoticComponent,\n  KeyboardEventHandler,\n} from 'react'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\n\nimport { StyledBaseInput, StyledContainer } from './base-input.styled'\nimport type { StyledBaseInputProps } from './base-input.styled'\nimport { InputSlot } from './partials/input-slot'\nimport { InputProvider } from './use-input-context'\n\nexport interface BaseInputProps extends StyledBaseInputProps {}\n\nconst keyboardEventHandler: KeyboardEventHandler<HTMLInputElement> = e => {\n  if (e.key !== 'Tab') {\n    e.preventDefault()\n  }\n}\n\nexport const BaseInput = React.forwardRef<\n  ElementRef<typeof StyledBaseInput>,\n  BaseInputProps\n>(\n  (\n    {\n      'aria-disabled': ariaDisabled,\n      disabled,\n      readOnly,\n      value,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    let elementProps = restProps\n\n    if (booleanify(ariaDisabled)) {\n      elementProps = removeEventProps(restProps, [\n        'onFocus',\n        'onBlur',\n        'onPointerMove',\n      ])\n\n      elementProps.onKeyDown = keyboardEventHandler\n      elementProps.onKeyUp = keyboardEventHandler\n    }\n\n    const input = (\n      <StyledBaseInput\n        {...elementProps}\n        aria-disabled={ariaDisabled}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={value}\n        ref={forwardRef}\n      />\n    )\n\n    let render = input\n\n    if (children != null) {\n      render = (\n        <StyledContainer>\n          {input}\n          {children}\n        </StyledContainer>\n      )\n    }\n\n    return (\n      <InputProvider\n        disabled={disabled}\n        ariaDisabled={ariaDisabled}\n        readOnly={readOnly}\n        value={value}\n      >\n        {render}\n      </InputProvider>\n    )\n  }\n) as ForwardRefExoticComponent<BaseInputProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  InputSlot: typeof InputSlot\n}\n\nBaseInput.InputSlot = InputSlot\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/base-input.styled.tsx","../src/partials/input.styled.tsx","../hooks/use-input-context.tsx","../src/partials/input.tsx","../src/partials/action-slot.styled.tsx","../src/partials/action-slot.tsx","../src/partials/icon-slot.styled.tsx","../src/partials/icon-slot.tsx","../src/base-input.tsx"],"sourcesContent":["import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { ComponentPropsWithRef } from 'react'\nimport {\n  IconExclamationPointCircle,\n  IconCheckMark,\n} from '@mirohq/design-system-icons'\n\nexport const StyledIconExclamationPointCircle = styled(\n  IconExclamationPointCircle,\n  {\n    color: '$icon-danger',\n  }\n)\n\nexport const StyledIconCheckMark = styled(IconCheckMark, {\n  color: '$icon-success',\n})\n\nexport const StyledValidityBox = styled(Primitive.div, {\n  order: 3,\n  display: 'flex',\n  alignItems: 'center',\n})\n\nexport const StyledBaseInput = styled('div', {\n  alignItems: 'center',\n  background: '$background-neutrals-container',\n  border: '1px solid $border-neutrals',\n  borderRadius: '$50',\n  display: 'flex',\n  height: 'max-content',\n  justifyContent: 'flex-end',\n  position: 'relative',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: '100%',\n  variants: {\n    hovered: {\n      true: {},\n      false: {},\n    },\n    focused: {\n      true: {\n        boxShadow: '$focus-controls',\n      },\n      false: {},\n    },\n    valid: {\n      true: {},\n      false: {},\n    },\n    readOnly: {\n      true: {\n        background: '$background-neutrals-disabled',\n        color: '$text-neutrals-subtle',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        background: '$background-neutrals-disabled',\n      },\n      false: {},\n    },\n    ariaDisabled: {\n      true: {\n        background: '$background-neutrals-disabled',\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    /** Idle states */\n    {\n      valid: false,\n      readOnly: false,\n      disabled: false,\n      ariaDisabled: false,\n      css: {\n        borderColor: '$border-danger',\n      },\n    },\n    {\n      valid: true,\n      readOnly: false,\n      disabled: false,\n      ariaDisabled: false,\n      css: {\n        borderColor: '$border-success',\n      },\n    },\n    /** Focus States */\n    {\n      focused: true,\n      readOnly: false,\n      css: {\n        borderColor: '$border-neutrals',\n      },\n    },\n    {\n      focused: true,\n      readOnly: false,\n      valid: false,\n      disabled: false,\n      ariaDisabled: false,\n      css: {\n        borderColor: '$border-danger',\n        boxShadow: '$focus-controls-error',\n      },\n    },\n    {\n      focused: true,\n      readOnly: false,\n      valid: true,\n      disabled: false,\n      ariaDisabled: false,\n      css: {\n        borderColor: '$border-success',\n        boxShadow: '$focus-controls-success',\n      },\n    },\n    /** Hover states */\n    {\n      hovered: true,\n      disabled: false,\n      ariaDisabled: false,\n      readOnly: false,\n      css: {\n        borderColor: '$border-primary-hover',\n      },\n    },\n    {\n      hovered: true,\n      focused: false,\n      valid: false,\n      readOnly: false,\n      disabled: false,\n      ariaDisabled: false,\n      css: {\n        borderColor: '$border-danger-hover',\n      },\n    },\n    {\n      hovered: true,\n      focused: false,\n      valid: true,\n      readOnly: false,\n      disabled: false,\n      ariaDisabled: false,\n      css: {\n        borderColor: '$border-success-hover',\n      },\n    },\n  ],\n})\n\nexport type StyledBaseInputProps = ComponentPropsWithRef<typeof StyledBaseInput>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst disabledAndReadonlySelectors =\n  ':read-only, :disabled, [aria-disabled=\"true\"], [data-disabled]'\n\nexport const StyledInput = styled(Primitive.input, {\n  all: 'unset',\n  background: 'transparent',\n  color: '$text-neutrals',\n  width: '100%',\n  borderRadius: '$50',\n  order: 2,\n\n  '&::placeholder': {\n    fontStyle: 'italic',\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]: {\n    color: '$text-neutrals-subtle',\n  },\n\n  '&:read-only': {\n    color: '$text-neutrals-subtle',\n  },\n\n  '&:disabled, &[aria-disabled=true], &[data-disabled]': {\n    caretColor: 'transparent',\n    '&, &::placeholder': {\n      color: '$text-neutrals-disabled',\n    },\n    '&:selection': {\n      background: 'transparent',\n    },\n  },\n})\n\nexport type StyledInputProps = ComponentPropsWithRef<typeof StyledInput>\n","import React, { createContext, useContext, useState, useRef } from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nexport interface InputContextProps {\n  disabled?: boolean\n  ariaDisabled?: Booleanish\n  readOnly?: boolean\n  valid?: boolean\n  hovered?: boolean\n  focused?: boolean\n  active?: boolean\n  actionSlotRef: React.RefObject<HTMLDivElement>\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  setHovered: React.Dispatch<React.SetStateAction<boolean>>\n  setActive: React.Dispatch<React.SetStateAction<boolean>>\n  editable?: boolean\n}\n\nconst InputContext = createContext<InputContextProps>({\n  actionSlotRef: { current: null },\n  setFocused: () => {},\n  setHovered: () => {},\n  setActive: () => {},\n})\n\nexport const InputProvider = ({\n  children,\n  disabled,\n  ariaDisabled,\n  readOnly,\n  ...restProps\n}: PropsWithChildren<\n  Omit<\n    InputContextProps,\n    'setFocused' | 'setHovered' | 'actionSlotRef' | 'setActive'\n  >\n>): any => {\n  const actionSlotRef = useRef<HTMLDivElement>(null)\n  const [focused, setFocused] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const [active, setActive] = useState(false)\n  const editable =\n    !booleanify(disabled) && !booleanify(ariaDisabled) && !booleanify(readOnly)\n\n  return (\n    <InputContext.Provider\n      value={{\n        ...restProps,\n        setFocused,\n        setHovered,\n        setActive,\n        active,\n        hovered,\n        focused,\n        actionSlotRef,\n        disabled,\n        ariaDisabled,\n        readOnly,\n        editable,\n      }}\n    >\n      {children}\n    </InputContext.Provider>\n  )\n}\n\nexport const useInputContext = (): InputContextProps => useContext(InputContext)\n","import React from 'react'\nimport type { FocusEventHandler, KeyboardEventHandler, ElementRef } from 'react'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledInput } from './input.styled'\nimport type { StyledInputProps } from './input.styled'\nimport { useInputContext } from '../../hooks/use-input-context'\n\nexport interface InputProps extends StyledInputProps {}\n\nconst keyboardEventHandler: KeyboardEventHandler<HTMLInputElement> = e => {\n  if (e.key !== 'Tab') {\n    e.preventDefault()\n  }\n}\n\nexport const Input = React.forwardRef<\n  ElementRef<typeof StyledInput>,\n  StyledInputProps\n>((props, forwardRef) => {\n  const { ariaDisabled, disabled, readOnly, setFocused } = useInputContext()\n  let elementProps = props\n\n  if (booleanify(ariaDisabled)) {\n    elementProps = removeEventProps(props, [\n      'onFocus',\n      'onBlur',\n      'onPointerMove',\n    ])\n\n    elementProps.onKeyDown = keyboardEventHandler\n    elementProps.onKeyUp = keyboardEventHandler\n  }\n\n  const onBlurEventHandler: FocusEventHandler<HTMLInputElement> = (): void => {\n    setFocused?.(false)\n  }\n\n  const onFocusEventHandler: FocusEventHandler<HTMLInputElement> = (): void => {\n    setFocused?.(true)\n  }\n\n  elementProps = mergeProps(elementProps, {\n    onBlur: onBlurEventHandler,\n    onFocus: onFocusEventHandler,\n  })\n\n  return (\n    <StyledInput\n      {...elementProps}\n      aria-disabled={ariaDisabled}\n      disabled={disabled}\n      readOnly={readOnly}\n      ref={forwardRef}\n    />\n  )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledActionSlot = styled(Primitive.div, {\n  variants: {\n    readOnly: {\n      true: {\n        '& svg[data-icon-component], & img[data-icon-component]': {\n          color: '$icon-neutrals-subtle',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledActionSlotProps = ComponentPropsWithRef<\n  typeof StyledActionSlot\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport {\n  mergeRefs,\n  booleanify,\n  addPropsToChildren,\n} from '@mirohq/design-system-utils'\n\nimport { StyledActionSlot } from './action-slot.styled'\nimport { useInputContext } from '../../hooks/use-input-context'\nimport type { StyledActionSlotProps } from './action-slot.styled'\n\nexport interface ActionSlotProps extends StyledActionSlotProps {}\n\nexport const ActionSlot = React.forwardRef<\n  ElementRef<typeof StyledActionSlot>,\n  StyledActionSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { valid, hovered, editable, actionSlotRef, active, readOnly } =\n    useInputContext()\n\n  const showInputSlot =\n    valid === undefined || booleanify(hovered) || booleanify(active)\n\n  let formattedChildren = children\n\n  if (!booleanify(editable)) {\n    formattedChildren = addPropsToChildren(children, () => true, {\n      disabled: true,\n    })\n  }\n\n  return (\n    <>\n      {showInputSlot && (\n        <StyledActionSlot\n          {...restProps}\n          readOnly={readOnly}\n          ref={mergeRefs([forwardRef, actionSlotRef])}\n        >\n          {formattedChildren}\n        </StyledActionSlot>\n      )}\n    </>\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n  alignContent: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n  color: '$icon-neutrals-subtle',\n  variants: {\n    disabled: {\n      true: {\n        '& svg': {\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { StyledIconSlot } from './icon-slot.styled'\nimport { useInputContext } from '../../hooks/use-input-context'\nimport type { StyledIconSlotProps } from './icon-slot.styled'\n\nexport interface IconSlotProps extends StyledIconSlotProps {}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  StyledIconSlotProps\n>((props, forwardRef) => {\n  const { ariaDisabled, disabled } = useInputContext()\n  return (\n    <StyledIconSlot\n      {...props}\n      disabled={booleanify(disabled ?? ariaDisabled)}\n      ref={forwardRef}\n    />\n  )\n})\n","import React, { useRef } from 'react'\nimport type {\n  DOMAttributes,\n  ElementRef,\n  ForwardRefExoticComponent,\n} from 'react'\nimport { booleanify, mergeRefs } from '@mirohq/design-system-utils'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useHover } from '@react-aria/interactions'\n\nimport {\n  StyledBaseInput,\n  StyledValidityBox,\n  StyledIconExclamationPointCircle,\n  StyledIconCheckMark,\n} from './base-input.styled'\nimport { Input } from './partials/input'\nimport { ActionSlot } from './partials/action-slot'\nimport { IconSlot } from './partials/icon-slot'\nimport { InputProvider, useInputContext } from '../hooks/use-input-context'\nimport type { StyledBaseInputProps } from './base-input.styled'\n\nexport interface BaseInputProps\n  extends Omit<StyledBaseInputProps, keyof DOMAttributes<Element>> {\n  'aria-disabled'?: Booleanish | undefined\n  disabled?: boolean | undefined\n  readOnly?: boolean | undefined\n  valid?: boolean | undefined\n  hovered?: boolean | undefined\n  focused?: boolean | undefined\n  children: React.ReactNode\n}\n\nconst Root = React.forwardRef<\n  ElementRef<typeof StyledBaseInput>,\n  BaseInputProps\n>(({ children, ...restProps }, forwardRef) => {\n  const {\n    valid,\n    ariaDisabled,\n    disabled,\n    readOnly,\n    focused,\n    active,\n    setHovered,\n    setActive,\n  } = useInputContext()\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const { hoverProps, isHovered: hovered } = useHover({\n    onHoverChange: setHovered,\n  })\n\n  const ariaDisabledOrDisabled =\n    booleanify(ariaDisabled) || booleanify(disabled)\n\n  const showValidityIcon =\n    !ariaDisabledOrDisabled &&\n    !booleanify(readOnly) &&\n    !booleanify(hovered) &&\n    !booleanify(focused) &&\n    !booleanify(active) &&\n    (valid === true || valid === false)\n\n  const ValidIcon =\n    valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle\n\n  return (\n    <StyledBaseInput\n      {...restProps}\n      {...hoverProps}\n      ref={mergeRefs([ref, forwardRef])}\n      hovered={hovered}\n      focused={focused}\n      valid={valid}\n      disabled={booleanify(disabled)}\n      ariaDisabled={booleanify(ariaDisabled)}\n      readOnly={booleanify(readOnly)}\n      data-invalid={valid === false ? '' : undefined}\n      data-valid={valid === true ? '' : undefined}\n      onFocus={() => {\n        setActive(true)\n      }}\n      onBlur={() => {\n        setTimeout(() => {\n          if (\n            ref?.current != null &&\n            !ref?.current?.contains(document.activeElement)\n          ) {\n            setActive(false)\n          }\n        }, 0)\n      }}\n    >\n      {children}\n      {showValidityIcon && (\n        <StyledValidityBox>\n          <ValidIcon size='small' />\n        </StyledValidityBox>\n      )}\n    </StyledBaseInput>\n  )\n})\n\nexport const BaseInput = React.forwardRef<\n  ElementRef<typeof StyledBaseInput>,\n  BaseInputProps\n>(\n  (\n    { 'aria-disabled': ariaDisabled, disabled, valid, readOnly, ...restProps },\n    forwardRef\n  ) => (\n    <InputProvider\n      valid={valid}\n      disabled={disabled}\n      ariaDisabled={ariaDisabled}\n      readOnly={readOnly}\n    >\n      <Root {...restProps} ref={forwardRef} />\n    </InputProvider>\n  )\n) as ForwardRefExoticComponent<BaseInputProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\nexport interface Partials {\n  ActionSlot: typeof ActionSlot\n  IconSlot: typeof IconSlot\n  Input: typeof Input\n}\n\nBaseInput.ActionSlot = ActionSlot\nBaseInput.IconSlot = IconSlot\nBaseInput.Input = Input\n"],"names":[],"mappings":"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"}