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

package/dist/main.js

@@ -2,45 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var designSystemUtils = require('@mirohq/design-system-utils');
-var interactions = require('@react-aria/interactions');
-var designSystemPrimitive = require('@mirohq/design-system-primitive');
-var designSystemStitches = require('@mirohq/design-system-stitches');
-var designSystemIcons = require('@mirohq/design-system-icons');
-var utils = require('@react-aria/utils');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const StyledIconExclamationPointCircle = designSystemStitches.styled(
-  designSystemIcons.IconExclamationPointCircle,
-  {
-    color: "$icon-danger"
-  }
-);
-const StyledIconCheckMark = designSystemStitches.styled(designSystemIcons.IconCheckMark, {
-  color: "$icon-success"
-});
-const StyledValidityBox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  order: 3,
-  display: "flex",
-  alignItems: "center"
-});
-const StyledBaseInput = designSystemStitches.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%",
+const styles = {
   variants: {
     hovered: {
       true: {},
@@ -159,244 +121,7 @@ const StyledBaseInput = designSystemStitches.styled("div", {
       }
     }
   ]
-});
-
-const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
-const StyledInput = designSystemStitches.styled(designSystemPrimitive.Primitive.input, {
-  all: "unset",
-  background: "transparent",
-  color: "$text-neutrals",
-  width: "100%",
-  borderRadius: "$50",
-  order: 2,
-  "&::placeholder": {
-    fontStyle: "italic"
-  },
-  ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: {
-    color: "$text-neutrals-subtle"
-  },
-  "&:read-only": {
-    color: "$text-neutrals-subtle"
-  },
-  "&:disabled, &[aria-disabled=true], &[data-disabled]": {
-    caretColor: "transparent",
-    "&, &::placeholder": {
-      color: "$text-neutrals-disabled"
-    },
-    "&:selection": {
-      background: "transparent"
-    }
-  }
-});
-
-const InputContext = React.createContext({
-  actionSlotRef: { current: null },
-  setFocused: () => {
-  },
-  setHovered: () => {
-  },
-  setActive: () => {
-  }
-});
-const InputProvider = ({
-  children,
-  disabled,
-  ariaDisabled,
-  readOnly,
-  ...restProps
-}) => {
-  const actionSlotRef = React.useRef(null);
-  const [focused, setFocused] = React.useState(false);
-  const [hovered, setHovered] = React.useState(false);
-  const [active, setActive] = React.useState(false);
-  const editable = !designSystemUtils.booleanify(disabled) && !designSystemUtils.booleanify(ariaDisabled) && !designSystemUtils.booleanify(readOnly);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InputContext.Provider,
-    {
-      value: {
-        ...restProps,
-        setFocused,
-        setHovered,
-        setActive,
-        active,
-        hovered,
-        focused,
-        actionSlotRef,
-        disabled,
-        ariaDisabled,
-        readOnly,
-        editable
-      },
-      children
-    }
-  );
-};
-const useInputContext = () => React.useContext(InputContext);
-
-const keyboardEventHandler = (e) => {
-  if (e.key !== "Tab") {
-    e.preventDefault();
-  }
 };
-const Input = React__default["default"].forwardRef((props, forwardRef) => {
-  const { ariaDisabled, disabled, readOnly, setFocused } = useInputContext();
-  let elementProps = props;
-  if (designSystemUtils.booleanify(ariaDisabled)) {
-    elementProps = designSystemUtils.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 = utils.mergeProps(elementProps, {
-    onBlur: onBlurEventHandler,
-    onFocus: onFocusEventHandler
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledInput,
-    {
-      ...elementProps,
-      "aria-disabled": ariaDisabled,
-      disabled,
-      readOnly,
-      ref: forwardRef
-    }
-  );
-});
-
-const StyledActionSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  variants: {
-    readOnly: {
-      true: {
-        "& svg[data-icon-component], & img[data-icon-component]": {
-          color: "$icon-neutrals-subtle"
-        }
-      }
-    }
-  }
-});
-
-const ActionSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
-  const { valid, hovered, editable, actionSlotRef, active, readOnly } = useInputContext();
-  const showInputSlot = valid === void 0 || designSystemUtils.booleanify(hovered) || designSystemUtils.booleanify(active);
-  let formattedChildren = children;
-  if (!designSystemUtils.booleanify(editable)) {
-    formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
-      disabled: true
-    });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: showInputSlot && /* @__PURE__ */ jsxRuntime.jsx(
-    StyledActionSlot,
-    {
-      ...restProps,
-      readOnly,
-      ref: designSystemUtils.mergeRefs([forwardRef, actionSlotRef]),
-      children: formattedChildren
-    }
-  ) });
-});
-
-const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  alignContent: "center",
-  display: "flex",
-  justifyContent: "center",
-  color: "$icon-neutrals-subtle",
-  variants: {
-    disabled: {
-      true: {
-        "& svg": {
-          color: "$icon-neutrals-disabled"
-        }
-      }
-    }
-  }
-});
-
-const IconSlot = React__default["default"].forwardRef((props, forwardRef) => {
-  const { ariaDisabled, disabled } = useInputContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledIconSlot,
-    {
-      ...props,
-      disabled: designSystemUtils.booleanify(disabled != null ? disabled : ariaDisabled),
-      ref: forwardRef
-    }
-  );
-});
-
-const Root = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
-  const {
-    valid,
-    ariaDisabled,
-    disabled,
-    readOnly,
-    focused,
-    active,
-    setHovered,
-    setActive
-  } = useInputContext();
-  const ref = React.useRef(null);
-  const { hoverProps, isHovered: hovered } = interactions.useHover({
-    onHoverChange: setHovered
-  });
-  const ariaDisabledOrDisabled = designSystemUtils.booleanify(ariaDisabled) || designSystemUtils.booleanify(disabled);
-  const showValidityIcon = !ariaDisabledOrDisabled && !designSystemUtils.booleanify(readOnly) && !designSystemUtils.booleanify(hovered) && !designSystemUtils.booleanify(focused) && !designSystemUtils.booleanify(active) && (valid === true || valid === false);
-  const ValidIcon = valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    StyledBaseInput,
-    {
-      ...restProps,
-      ...hoverProps,
-      ref: designSystemUtils.mergeRefs([ref, forwardRef]),
-      hovered,
-      focused,
-      valid,
-      disabled: designSystemUtils.booleanify(disabled),
-      ariaDisabled: designSystemUtils.booleanify(ariaDisabled),
-      readOnly: designSystemUtils.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__ */ jsxRuntime.jsx(StyledValidityBox, { children: /* @__PURE__ */ jsxRuntime.jsx(ValidIcon, { size: "small" }) })
-      ]
-    }
-  );
-});
-const BaseInput = React__default["default"].forwardRef(
-  ({ "aria-disabled": ariaDisabled, disabled, valid, readOnly, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
-    InputProvider,
-    {
-      valid,
-      disabled,
-      ariaDisabled,
-      readOnly,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, ref: forwardRef })
-    }
-  )
-);
-BaseInput.ActionSlot = ActionSlot;
-BaseInput.IconSlot = IconSlot;
-BaseInput.Input = Input;
 
-exports.BaseInput = BaseInput;
+exports.styles = styles;
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.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":["styled","IconExclamationPointCircle","IconCheckMark","Primitive","createContext","useRef","useState","booleanify","jsx","useContext","React","removeEventProps","mergeProps","addPropsToChildren","mergeRefs","useHover","jsxs"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/styles.ts"],"sourcesContent":["export const styles = {\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"],"names":[],"mappings":"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"}

package/dist/module.js

@@ -1,38 +1,4 @@
-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 { IconExclamationPointCircle, IconCheckMark } from '@mirohq/design-system-icons';
-import { mergeProps } from '@react-aria/utils';
-
-const StyledIconExclamationPointCircle = styled(
-  IconExclamationPointCircle,
-  {
-    color: "$icon-danger"
-  }
-);
-const StyledIconCheckMark = styled(IconCheckMark, {
-  color: "$icon-success"
-});
-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%",
+const styles = {
   variants: {
     hovered: {
       true: {},
@@ -151,244 +117,7 @@ const StyledBaseInput = styled("div", {
       }
     }
   ]
-});
-
-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"
-  },
-  ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: {
-    color: "$text-neutrals-subtle"
-  },
-  "&:read-only": {
-    color: "$text-neutrals-subtle"
-  },
-  "&:disabled, &[aria-disabled=true], &[data-disabled]": {
-    caretColor: "transparent",
-    "&, &::placeholder": {
-      color: "$text-neutrals-disabled"
-    },
-    "&:selection": {
-      background: "transparent"
-    }
-  }
-});
-
-const InputContext = createContext({
-  actionSlotRef: { current: null },
-  setFocused: () => {
-  },
-  setHovered: () => {
-  },
-  setActive: () => {
-  }
-});
-const InputProvider = ({
-  children,
-  disabled,
-  ariaDisabled,
-  readOnly,
-  ...restProps
-}) => {
-  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 keyboardEventHandler = (e) => {
-  if (e.key !== "Tab") {
-    e.preventDefault();
-  }
-};
-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 StyledActionSlot = styled(Primitive.div, {
-  variants: {
-    readOnly: {
-      true: {
-        "& svg[data-icon-component], & img[data-icon-component]": {
-          color: "$icon-neutrals-subtle"
-        }
-      }
-    }
-  }
-});
-
-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.ActionSlot = ActionSlot;
-BaseInput.IconSlot = IconSlot;
-BaseInput.Input = Input;
 
-export { BaseInput };
+export { styles };
 //# sourceMappingURL=module.js.map