@tecsinapse/react-web-kit 1.22.0 → 1.22.1-beta.2

package/dist/components/atoms/Button/Button.mjs

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useMouseHover } from './hooks/useMouseHover.mjs';
+import { useMousePressed } from './hooks/useMousePressed.mjs';
+import { StyledWebButton } from './styled.mjs';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Button = (_a) => {
+  var _b = _a, {
+    children,
+    disabled,
+    frozen,
+    state,
+    variant,
+    onMouseOut,
+    onMouseOver,
+    onPressIn,
+    onPressOut
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "disabled",
+    "frozen",
+    "state",
+    "variant",
+    "onMouseOut",
+    "onMouseOver",
+    "onPressIn",
+    "onPressOut"
+  ]);
+  const _frozen = frozen || state === "loading";
+  const { mouseOver, handleMouseOut, handleMouseOver } = useMouseHover(
+    !disabled && !_frozen,
+    onMouseOut,
+    onMouseOver
+  );
+  const { pressed, handlePressIn, handlePressOut } = useMousePressed(
+    !disabled && !_frozen,
+    onPressIn,
+    onPressOut
+  );
+  return /* @__PURE__ */ React.createElement(StyledWebButton, __spreadProps(__spreadValues({}, rest), {
+    disabled,
+    frozen: _frozen,
+    state,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    mouseOver,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    pressed,
+    variant
+  }), children);
+};
+
+export { Button as default };
+//# sourceMappingURL=Button.mjs.map

package/dist/components/atoms/Button/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","sources":["../../../../src/components/atoms/Button/Button.tsx"],"sourcesContent":["import { ButtonProps } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { useMouseHover } from './hooks/useMouseHover';\nimport { useMousePressed } from './hooks/useMousePressed';\nimport { StyledWebButton } from './styled';\n\n/**\n * TODO: Add a property 'defaultElement' to render a default\n * component and provide some button's state to it.\n */\nexport type WebButtonProps = ButtonProps & {\n  onMouseOver?: () => void;\n  onMouseOut?: () => void;\n  onPressIn?: () => void;\n  onPressOut?: () => void;\n};\n\nconst Button: FC<WebButtonProps> = ({\n  children,\n  disabled,\n  frozen,\n  state,\n  variant,\n  onMouseOut,\n  onMouseOver,\n  onPressIn,\n  onPressOut,\n  ...rest\n}): JSX.Element => {\n  const _frozen = frozen || state === 'loading';\n  const { mouseOver, handleMouseOut, handleMouseOver } = useMouseHover(\n    !disabled && !_frozen,\n    onMouseOut,\n    onMouseOver\n  );\n  const { pressed, handlePressIn, handlePressOut } = useMousePressed(\n    !disabled && !_frozen,\n    onPressIn,\n    onPressOut\n  );\n\n  return (\n    <StyledWebButton\n      {...rest}\n      disabled={disabled}\n      frozen={_frozen}\n      state={state}\n      onMouseOver={handleMouseOver}\n      onMouseOut={handleMouseOut}\n      mouseOver={mouseOver}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      pressed={pressed}\n      variant={variant}\n    >\n      {children}\n    </StyledWebButton>\n  );\n};\n\nexport default Button;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBM,MAAA,MAAA,GAA6B,CAAC,EAWjB,KAAA;AAXiB,EAClC,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,GA1BF,GAiBoC,EAU/B,EAAA,IAAA,GAAA,SAAA,CAV+B,EAU/B,EAAA;AAAA,IATH,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAM,MAAA,OAAA,GAAU,UAAU,KAAU,KAAA,SAAA,CAAA;AACpC,EAAA,MAAM,EAAE,SAAA,EAAW,cAAgB,EAAA,eAAA,EAAoB,GAAA,aAAA;AAAA,IACrD,CAAC,YAAY,CAAC,OAAA;AAAA,IACd,UAAA;AAAA,IACA,WAAA;AAAA,GACF,CAAA;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,aAAe,EAAA,cAAA,EAAmB,GAAA,eAAA;AAAA,IACjD,CAAC,YAAY,CAAC,OAAA;AAAA,IACd,SAAA;AAAA,IACA,UAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,kDACK,IADL,CAAA,EAAA;AAAA,IAEC,QAAA;AAAA,IACA,MAAQ,EAAA,OAAA;AAAA,IACR,KAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,UAAY,EAAA,cAAA;AAAA,IACZ,SAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA,cAAA;AAAA,IACZ,OAAA;AAAA,IACA,OAAA;AAAA,GAAA,CAAA,EAEC,QACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/atoms/Button/hooks/useMouseHover.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useMouseHover = (active, onMouseOver, onMouseOut) => {
+  const [mouseOver, setMouseOver] = React.useState(false);
+  const handleMouseOver = React.useCallback(() => {
+    if (active) {
+      setMouseOver(true);
+      onMouseOver == null ? void 0 : onMouseOver();
+    }
+  }, [active, setMouseOver]);
+  const handleMouseOut = React.useCallback(() => {
+    if (active) {
+      setMouseOver(false);
+      onMouseOut == null ? void 0 : onMouseOut();
+    }
+  }, [active, setMouseOver]);
+  return {
+    mouseOver,
+    handleMouseOver,
+    handleMouseOut
+  };
+};
+
+exports.useMouseHover = useMouseHover;
+//# sourceMappingURL=useMouseHover.cjs.map

package/dist/components/atoms/Button/hooks/useMouseHover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseHover.cjs","sources":["../../../../../src/components/atoms/Button/hooks/useMouseHover.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nexport const useMouseHover = (\n  active: boolean,\n  onMouseOver?: () => void,\n  onMouseOut?: () => void\n) => {\n  const [mouseOver, setMouseOver] = useState<boolean>(false);\n\n  const handleMouseOver = useCallback(() => {\n    if (active) {\n      setMouseOver(true);\n      onMouseOver?.();\n    }\n  }, [active, setMouseOver]);\n\n  const handleMouseOut = useCallback(() => {\n    if (active) {\n      setMouseOver(false);\n      onMouseOut?.();\n    }\n  }, [active, setMouseOver]);\n\n  return {\n    mouseOver,\n    handleMouseOver,\n    handleMouseOut,\n  };\n};\n"],"names":["useState","useCallback"],"mappings":";;;;;;AAEO,MAAM,aAAgB,GAAA,CAC3B,MACA,EAAA,WAAA,EACA,UACG,KAAA;AACH,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAkB,KAAK,CAAA,CAAA;AAEzD,EAAM,MAAA,eAAA,GAAkBC,kBAAY,MAAM;AACxC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,EAAA,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,YAAY,CAAC,CAAA,CAAA;AAEzB,EAAM,MAAA,cAAA,GAAiBA,kBAAY,MAAM;AACvC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,MAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,EAAA,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,YAAY,CAAC,CAAA,CAAA;AAEzB,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/components/atoms/Button/hooks/useMouseHover.mjs

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'react';
+
+const useMouseHover = (active, onMouseOver, onMouseOut) => {
+  const [mouseOver, setMouseOver] = useState(false);
+  const handleMouseOver = useCallback(() => {
+    if (active) {
+      setMouseOver(true);
+      onMouseOver == null ? void 0 : onMouseOver();
+    }
+  }, [active, setMouseOver]);
+  const handleMouseOut = useCallback(() => {
+    if (active) {
+      setMouseOver(false);
+      onMouseOut == null ? void 0 : onMouseOut();
+    }
+  }, [active, setMouseOver]);
+  return {
+    mouseOver,
+    handleMouseOver,
+    handleMouseOut
+  };
+};
+
+export { useMouseHover };
+//# sourceMappingURL=useMouseHover.mjs.map

package/dist/components/atoms/Button/hooks/useMouseHover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseHover.mjs","sources":["../../../../../src/components/atoms/Button/hooks/useMouseHover.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nexport const useMouseHover = (\n  active: boolean,\n  onMouseOver?: () => void,\n  onMouseOut?: () => void\n) => {\n  const [mouseOver, setMouseOver] = useState<boolean>(false);\n\n  const handleMouseOver = useCallback(() => {\n    if (active) {\n      setMouseOver(true);\n      onMouseOver?.();\n    }\n  }, [active, setMouseOver]);\n\n  const handleMouseOut = useCallback(() => {\n    if (active) {\n      setMouseOver(false);\n      onMouseOut?.();\n    }\n  }, [active, setMouseOver]);\n\n  return {\n    mouseOver,\n    handleMouseOver,\n    handleMouseOut,\n  };\n};\n"],"names":[],"mappings":";;AAEO,MAAM,aAAgB,GAAA,CAC3B,MACA,EAAA,WAAA,EACA,UACG,KAAA;AACH,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAkB,KAAK,CAAA,CAAA;AAEzD,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,EAAA,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,YAAY,CAAC,CAAA,CAAA;AAEzB,EAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,MAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,EAAA,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,YAAY,CAAC,CAAA,CAAA;AAEzB,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/components/atoms/Button/hooks/useMousePressed.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useMousePressed = (active, onPressIn, onPressOut) => {
+  const [pressed, setPressed] = React.useState(false);
+  const handlePressIn = React.useCallback(() => {
+    if (active) {
+      setPressed(true);
+      onPressIn == null ? void 0 : onPressIn();
+    }
+  }, [active, setPressed]);
+  const handlePressOut = React.useCallback(() => {
+    if (active) {
+      setPressed(false);
+      onPressOut == null ? void 0 : onPressOut();
+    }
+  }, [active, setPressed]);
+  return {
+    pressed,
+    handlePressIn,
+    handlePressOut
+  };
+};
+
+exports.useMousePressed = useMousePressed;
+//# sourceMappingURL=useMousePressed.cjs.map

package/dist/components/atoms/Button/hooks/useMousePressed.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMousePressed.cjs","sources":["../../../../../src/components/atoms/Button/hooks/useMousePressed.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nexport const useMousePressed = (\n  active: boolean,\n  onPressIn?: () => void,\n  onPressOut?: () => void\n) => {\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  const handlePressIn = useCallback(() => {\n    if (active) {\n      setPressed(true);\n      onPressIn?.();\n    }\n  }, [active, setPressed]);\n\n  const handlePressOut = useCallback(() => {\n    if (active) {\n      setPressed(false);\n      onPressOut?.();\n    }\n  }, [active, setPressed]);\n\n  return {\n    pressed,\n    handlePressIn,\n    handlePressOut,\n  };\n};\n"],"names":["useState","useCallback"],"mappings":";;;;;;AAEO,MAAM,eAAkB,GAAA,CAC7B,MACA,EAAA,SAAA,EACA,UACG,KAAA;AACH,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAkB,KAAK,CAAA,CAAA;AAErD,EAAM,MAAA,aAAA,GAAgBC,kBAAY,MAAM;AACtC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,MAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,EAAA,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,UAAU,CAAC,CAAA,CAAA;AAEvB,EAAM,MAAA,cAAA,GAAiBA,kBAAY,MAAM;AACvC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,MAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,EAAA,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,UAAU,CAAC,CAAA,CAAA;AAEvB,EAAO,OAAA;AAAA,IACL,OAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/components/atoms/Button/hooks/useMousePressed.mjs

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'react';
+
+const useMousePressed = (active, onPressIn, onPressOut) => {
+  const [pressed, setPressed] = useState(false);
+  const handlePressIn = useCallback(() => {
+    if (active) {
+      setPressed(true);
+      onPressIn == null ? void 0 : onPressIn();
+    }
+  }, [active, setPressed]);
+  const handlePressOut = useCallback(() => {
+    if (active) {
+      setPressed(false);
+      onPressOut == null ? void 0 : onPressOut();
+    }
+  }, [active, setPressed]);
+  return {
+    pressed,
+    handlePressIn,
+    handlePressOut
+  };
+};
+
+export { useMousePressed };
+//# sourceMappingURL=useMousePressed.mjs.map

package/dist/components/atoms/Button/hooks/useMousePressed.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMousePressed.mjs","sources":["../../../../../src/components/atoms/Button/hooks/useMousePressed.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nexport const useMousePressed = (\n  active: boolean,\n  onPressIn?: () => void,\n  onPressOut?: () => void\n) => {\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  const handlePressIn = useCallback(() => {\n    if (active) {\n      setPressed(true);\n      onPressIn?.();\n    }\n  }, [active, setPressed]);\n\n  const handlePressOut = useCallback(() => {\n    if (active) {\n      setPressed(false);\n      onPressOut?.();\n    }\n  }, [active, setPressed]);\n\n  return {\n    pressed,\n    handlePressIn,\n    handlePressOut,\n  };\n};\n"],"names":[],"mappings":";;AAEO,MAAM,eAAkB,GAAA,CAC7B,MACA,EAAA,SAAA,EACA,UACG,KAAA;AACH,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,KAAK,CAAA,CAAA;AAErD,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,MAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,EAAA,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,UAAU,CAAC,CAAA,CAAA;AAEvB,EAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,MAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,EAAA,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,UAAU,CAAC,CAAA,CAAA;AAEvB,EAAO,OAAA;AAAA,IACL,OAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/components/atoms/Button/styled.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var nativeStyled = require('@emotion/native');
+var reactCore = require('@tecsinapse/react-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var nativeStyled__default = /*#__PURE__*/_interopDefaultLegacy(nativeStyled);
+
+const webStyles = () => {
+  return nativeStyled.css`
+    & * {
+      user-select: none;
+    }
+  `;
+};
+const hoverStyles = ({
+  mouseOver,
+  pressed,
+  theme,
+  variant = "filled",
+  disabled
+}) => {
+  const variantColor = reactCore.colorVC[variant];
+  const variantColorGradation = reactCore.colorGradationVC[variant];
+  const variantBorderColor = reactCore.borderColorVC[variant];
+  const variantBorderColorGradation = reactCore.borderColorGradationVC[variant];
+  return mouseOver && !disabled && !pressed && nativeStyled.css`
+      background-color: ${theme == null ? void 0 : theme.color[variantColor][variantColorGradation]};
+      border-color: ${theme == null ? void 0 : theme.color[variantBorderColor][variantBorderColorGradation]};
+    `;
+};
+const StyledWebButton = nativeStyled__default["default"](reactCore.Button)(webStyles, hoverStyles);
+
+exports.StyledWebButton = StyledWebButton;
+//# sourceMappingURL=styled.cjs.map

package/dist/components/atoms/Button/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/atoms/Button/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  borderColorGradationVC,\n  borderColorVC,\n  Button,\n  colorGradationVC,\n  colorVC,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { WebButtonProps } from './Button';\n\nconst webStyles = () => {\n  return css`\n    & * {\n      user-select: none;\n    }\n  `;\n};\n\nconst hoverStyles = ({\n  mouseOver,\n  pressed,\n  theme,\n  variant = 'filled',\n  disabled,\n}: { mouseOver: boolean; pressed: boolean } & WebButtonProps &\n  Partial<StyleProps>) => {\n  const variantColor = colorVC[variant];\n  const variantColorGradation = colorGradationVC[variant];\n  const variantBorderColor = borderColorVC[variant];\n  const variantBorderColorGradation = borderColorGradationVC[variant];\n  return (\n    mouseOver &&\n    !disabled &&\n    !pressed &&\n    css`\n      background-color: ${theme?.color[variantColor][variantColorGradation]};\n      border-color: ${theme?.color[variantBorderColor][\n        variantBorderColorGradation\n      ]};\n    `\n  );\n};\n\nexport const StyledWebButton = styled(Button)<\n  { mouseOver: boolean; pressed: boolean } & WebButtonProps &\n    Partial<StyleProps>\n>(webStyles, hoverStyles);\n"],"names":["css","colorVC","colorGradationVC","borderColorVC","borderColorGradationVC","styled","Button"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAY,MAAM;AACtB,EAAO,OAAAA,gBAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAKT,CAAA,CAAA;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAU,GAAA,QAAA;AAAA,EACV,QAAA;AACF,CAC0B,KAAA;AACxB,EAAA,MAAM,eAAeC,iBAAQ,CAAA,OAAA,CAAA,CAAA;AAC7B,EAAA,MAAM,wBAAwBC,0BAAiB,CAAA,OAAA,CAAA,CAAA;AAC/C,EAAA,MAAM,qBAAqBC,uBAAc,CAAA,OAAA,CAAA,CAAA;AACzC,EAAA,MAAM,8BAA8BC,gCAAuB,CAAA,OAAA,CAAA,CAAA;AAC3D,EAAA,OACE,SACA,IAAA,CAAC,QACD,IAAA,CAAC,OACD,IAAAJ,gBAAA,CAAA;AAAA,wBACsB,EAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,MAAM,YAAc,CAAA,CAAA,qBAAA,CAAA,CAAA;AAAA,oBAC/B,EAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,MAAM,kBAC3B,CAAA,CAAA,2BAAA,CAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAIR,CAAA,CAAA;AAEO,MAAM,eAAkB,GAAAK,gCAAA,CAAOC,gBAAM,CAAA,CAG1C,WAAW,WAAW;;;;"}

package/dist/components/atoms/Button/styled.mjs

@@ -0,0 +1,30 @@
+import nativeStyled, { css } from '@emotion/native';
+import { Button, colorVC, colorGradationVC, borderColorVC, borderColorGradationVC } from '@tecsinapse/react-core';
+
+const webStyles = () => {
+  return css`
+    & * {
+      user-select: none;
+    }
+  `;
+};
+const hoverStyles = ({
+  mouseOver,
+  pressed,
+  theme,
+  variant = "filled",
+  disabled
+}) => {
+  const variantColor = colorVC[variant];
+  const variantColorGradation = colorGradationVC[variant];
+  const variantBorderColor = borderColorVC[variant];
+  const variantBorderColorGradation = borderColorGradationVC[variant];
+  return mouseOver && !disabled && !pressed && css`
+      background-color: ${theme == null ? void 0 : theme.color[variantColor][variantColorGradation]};
+      border-color: ${theme == null ? void 0 : theme.color[variantBorderColor][variantBorderColorGradation]};
+    `;
+};
+const StyledWebButton = nativeStyled(Button)(webStyles, hoverStyles);
+
+export { StyledWebButton };
+//# sourceMappingURL=styled.mjs.map

package/dist/components/atoms/Button/styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.mjs","sources":["../../../../src/components/atoms/Button/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  borderColorGradationVC,\n  borderColorVC,\n  Button,\n  colorGradationVC,\n  colorVC,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { WebButtonProps } from './Button';\n\nconst webStyles = () => {\n  return css`\n    & * {\n      user-select: none;\n    }\n  `;\n};\n\nconst hoverStyles = ({\n  mouseOver,\n  pressed,\n  theme,\n  variant = 'filled',\n  disabled,\n}: { mouseOver: boolean; pressed: boolean } & WebButtonProps &\n  Partial<StyleProps>) => {\n  const variantColor = colorVC[variant];\n  const variantColorGradation = colorGradationVC[variant];\n  const variantBorderColor = borderColorVC[variant];\n  const variantBorderColorGradation = borderColorGradationVC[variant];\n  return (\n    mouseOver &&\n    !disabled &&\n    !pressed &&\n    css`\n      background-color: ${theme?.color[variantColor][variantColorGradation]};\n      border-color: ${theme?.color[variantBorderColor][\n        variantBorderColorGradation\n      ]};\n    `\n  );\n};\n\nexport const StyledWebButton = styled(Button)<\n  { mouseOver: boolean; pressed: boolean } & WebButtonProps &\n    Partial<StyleProps>\n>(webStyles, hoverStyles);\n"],"names":["styled"],"mappings":";;;AAWA,MAAM,YAAY,MAAM;AACtB,EAAO,OAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAKT,CAAA,CAAA;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAU,GAAA,QAAA;AAAA,EACV,QAAA;AACF,CAC0B,KAAA;AACxB,EAAA,MAAM,eAAe,OAAQ,CAAA,OAAA,CAAA,CAAA;AAC7B,EAAA,MAAM,wBAAwB,gBAAiB,CAAA,OAAA,CAAA,CAAA;AAC/C,EAAA,MAAM,qBAAqB,aAAc,CAAA,OAAA,CAAA,CAAA;AACzC,EAAA,MAAM,8BAA8B,sBAAuB,CAAA,OAAA,CAAA,CAAA;AAC3D,EAAA,OACE,SACA,IAAA,CAAC,QACD,IAAA,CAAC,OACD,IAAA,GAAA,CAAA;AAAA,wBACsB,EAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,MAAM,YAAc,CAAA,CAAA,qBAAA,CAAA,CAAA;AAAA,oBAC/B,EAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,MAAM,kBAC3B,CAAA,CAAA,2BAAA,CAAA,CAAA;AAAA,IAAA,CAAA,CAAA;AAIR,CAAA,CAAA;AAEO,MAAM,eAAkB,GAAAA,YAAA,CAAO,MAAM,CAAA,CAG1C,WAAW,WAAW;;;;"}

package/dist/components/atoms/Dropdown/index.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styled = require('./styled.cjs');
+var reactTransitionGroup = require('react-transition-group');
+var animations = require('../../molecules/Select/animations.cjs');
+require('@tecsinapse/react-core');
+var useClickAwayListener = require('../../../hooks/useClickAwayListener.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const Component = ({
+  visible,
+  setVisible,
+  children
+}) => {
+  const refDropDown = React__default["default"].useRef(null);
+  useClickAwayListener.useClickAwayListener(refDropDown, setVisible);
+  return /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.Transition, {
+    in: visible,
+    timeout: 300
+  }, (state) => /* @__PURE__ */ React__default["default"].createElement(styled.StyledContainerDropdown, {
+    style: __spreadValues(__spreadValues({}, animations.defaultStyles), animations.transition["bottom"][state]),
+    ref: refDropDown
+  }, children));
+};
+const Dropdown = Component;
+
+exports.Dropdown = Dropdown;
+//# sourceMappingURL=index.cjs.map

package/dist/components/atoms/Dropdown/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction } from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface DropdownProps {\n  visible: boolean;\n  setVisible: Dispatch<SetStateAction<boolean>>;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n  visible,\n  setVisible,\n  children,\n}): JSX.Element => {\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setVisible);\n\n  return (\n    <Transition in={visible} timeout={300}>\n      {state => (\n        <StyledContainerDropdown\n          style={{ ...defaultStyles, ...transition['bottom'][state] }}\n          ref={refDropDown}\n        >\n          {children}\n        </StyledContainerDropdown>\n      )}\n    </Transition>\n  );\n};\n\nexport const Dropdown = Component;\n"],"names":["React","useClickAwayListener","Transition","StyledContainerDropdown","defaultStyles","transition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAiE,CAAC;AAAA,EACtE,OAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmB,KAAA;AACjB,EAAM,MAAA,WAAA,GAAcA,yBAAM,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAAC,yCAAA,CAAqB,aAAa,UAAU,CAAA,CAAA;AAE5C,EAAA,uBACGD,yBAAA,CAAA,aAAA,CAAAE,+BAAA,EAAA;AAAA,IAAW,EAAI,EAAA,OAAA;AAAA,IAAS,OAAS,EAAA,GAAA;AAAA,GAAA,EAC/B,2BACEF,yBAAA,CAAA,aAAA,CAAAG,8BAAA,EAAA;AAAA,IACC,KAAO,EAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EAAKC,wBAAkB,CAAA,EAAAC,qBAAA,CAAW,QAAU,CAAA,CAAA,KAAA,CAAA,CAAA;AAAA,IACnD,GAAK,EAAA,WAAA;AAAA,GAAA,EAEJ,QACH,CAEJ,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,QAAW,GAAA;;;;"}

package/dist/components/atoms/Dropdown/index.mjs

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyledContainerDropdown } from './styled.mjs';
+import { Transition } from 'react-transition-group';
+import { defaultStyles, transition } from '../../molecules/Select/animations.mjs';
+import '@tecsinapse/react-core';
+import { useClickAwayListener } from '../../../hooks/useClickAwayListener.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const Component = ({
+  visible,
+  setVisible,
+  children
+}) => {
+  const refDropDown = React.useRef(null);
+  useClickAwayListener(refDropDown, setVisible);
+  return /* @__PURE__ */ React.createElement(Transition, {
+    in: visible,
+    timeout: 300
+  }, (state) => /* @__PURE__ */ React.createElement(StyledContainerDropdown, {
+    style: __spreadValues(__spreadValues({}, defaultStyles), transition["bottom"][state]),
+    ref: refDropDown
+  }, children));
+};
+const Dropdown = Component;
+
+export { Dropdown };
+//# sourceMappingURL=index.mjs.map

package/dist/components/atoms/Dropdown/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction } from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface DropdownProps {\n  visible: boolean;\n  setVisible: Dispatch<SetStateAction<boolean>>;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n  visible,\n  setVisible,\n  children,\n}): JSX.Element => {\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setVisible);\n\n  return (\n    <Transition in={visible} timeout={300}>\n      {state => (\n        <StyledContainerDropdown\n          style={{ ...defaultStyles, ...transition['bottom'][state] }}\n          ref={refDropDown}\n        >\n          {children}\n        </StyledContainerDropdown>\n      )}\n    </Transition>\n  );\n};\n\nexport const Dropdown = Component;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAiE,CAAC;AAAA,EACtE,OAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmB,KAAA;AACjB,EAAM,MAAA,WAAA,GAAc,KAAM,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAA,oBAAA,CAAqB,aAAa,UAAU,CAAA,CAAA;AAE5C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAW,EAAI,EAAA,OAAA;AAAA,IAAS,OAAS,EAAA,GAAA;AAAA,GAAA,EAC/B,2BACE,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AAAA,IACC,KAAO,EAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EAAK,aAAkB,CAAA,EAAA,UAAA,CAAW,QAAU,CAAA,CAAA,KAAA,CAAA,CAAA;AAAA,IACnD,GAAK,EAAA,WAAA;AAAA,GAAA,EAEJ,QACH,CAEJ,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,QAAW,GAAA;;;;"}

package/dist/components/atoms/Dropdown/styled.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('@emotion/styled');
+var reactCore = require('@tecsinapse/react-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledContainerDropdown = styled__default["default"]("div")`
+  width: auto;
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  box-shadow: 0 2px 8px
+    ${({ theme }) => reactCore.hex2rgba(theme.miscellaneous.shadow, 0.05)};
+  position: absolute;
+  padding-bottom: ${({ theme }) => theme.spacing.mili};
+  margin-top: 8px;
+  z-index: ${({ theme }) => theme.zIndex.select};
+`;
+
+exports.StyledContainerDropdown = StyledContainerDropdown;
+//# sourceMappingURL=styled.cjs.map

package/dist/components/atoms/Dropdown/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/atoms/Dropdown/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerDropdown = styled('div')<Partial<StyleProps>>`\n  width: auto;\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0 2px 8px\n    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.05)};\n  position: absolute;\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  margin-top: 8px;\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n`;\n"],"names":["styled","hex2rgba"],"mappings":";;;;;;;;;;;AAGa,MAAA,uBAAA,GAA0BA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA,oBAAA,EAE7B,CAAC,EAAE,KAAM,EAAA,KAC3B,MAAM,aAAc,CAAA,YAAA,CAAA;AAAA,iBAAA,EACL,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA;AAAA,IAE3D,EAAA,CAAC,EAAE,KAAM,EAAA,KAAkBC,mBAAS,KAAM,CAAA,aAAA,CAAc,QAAQ,IAAI,CAAA,CAAA;AAAA;AAAA,kBAAA,EAEtD,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA,WAAA,EAEhD,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,MAAO,CAAA,MAAA,CAAA;AAAA;;;;"}

package/dist/components/atoms/Dropdown/styled.mjs

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+import { hex2rgba } from '@tecsinapse/react-core';
+
+const StyledContainerDropdown = styled("div")`
+  width: auto;
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  box-shadow: 0 2px 8px
+    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
+  position: absolute;
+  padding-bottom: ${({ theme }) => theme.spacing.mili};
+  margin-top: 8px;
+  z-index: ${({ theme }) => theme.zIndex.select};
+`;
+
+export { StyledContainerDropdown };
+//# sourceMappingURL=styled.mjs.map

package/dist/components/atoms/Dropdown/styled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.mjs","sources":["../../../../src/components/atoms/Dropdown/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerDropdown = styled('div')<Partial<StyleProps>>`\n  width: auto;\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0 2px 8px\n    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.05)};\n  position: absolute;\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  margin-top: 8px;\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n`;\n"],"names":[],"mappings":";;;AAGa,MAAA,uBAAA,GAA0B,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA,oBAAA,EAE7B,CAAC,EAAE,KAAM,EAAA,KAC3B,MAAM,aAAc,CAAA,YAAA,CAAA;AAAA,iBAAA,EACL,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA;AAAA,IAE3D,EAAA,CAAC,EAAE,KAAM,EAAA,KAAkB,SAAS,KAAM,CAAA,aAAA,CAAc,QAAQ,IAAI,CAAA,CAAA;AAAA;AAAA,kBAAA,EAEtD,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA,WAAA,EAEhD,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,MAAO,CAAA,MAAA,CAAA;AAAA;;;;"}

package/dist/components/atoms/Input/Input.cjs

@@ -0,0 +1,131 @@
+'use strict';
+
+var reactCore = require('@tecsinapse/react-core');
+var React = require('react');
+var reactNativeWeb = require('react-native-web');
+var styled = require('./styled.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Input = React__default["default"].forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      labelColor,
+      labelColorVariant,
+      labelColorTone,
+      labelTypography,
+      labelStack,
+      labelWeight,
+      leftComponent,
+      rightComponent,
+      disabled,
+      style,
+      borderColor,
+      borderColorGradation,
+      inputContainerStyle,
+      variant = "default",
+      hintComponent,
+      hint,
+      onFocus,
+      onBlur,
+      placeholder,
+      value
+    } = _b, rest = __objRest(_b, [
+      "label",
+      "labelColor",
+      "labelColorVariant",
+      "labelColorTone",
+      "labelTypography",
+      "labelStack",
+      "labelWeight",
+      "leftComponent",
+      "rightComponent",
+      "disabled",
+      "style",
+      "borderColor",
+      "borderColorGradation",
+      "inputContainerStyle",
+      "variant",
+      "hintComponent",
+      "hint",
+      "onFocus",
+      "onBlur",
+      "placeholder",
+      "value"
+    ]);
+    const _hint = hintComponent || /* @__PURE__ */ React__default["default"].createElement(reactCore.Hint, {
+      text: hint,
+      variant
+    });
+    const { focused, handleBlur, handleFocus } = reactCore.useInputFocus(
+      onFocus,
+      onBlur,
+      !disabled
+    );
+    const onlyLabel = label && !placeholder;
+    return /* @__PURE__ */ React__default["default"].createElement(reactNativeWeb.View, {
+      style
+    }, /* @__PURE__ */ React__default["default"].createElement(reactCore.InputContainer, {
+      label: value ? label : void 0,
+      labelColor,
+      labelColorVariant,
+      labelColorTone,
+      labelTypography,
+      labelStack,
+      labelWeight,
+      leftComponent,
+      rightComponent,
+      borderColor,
+      borderColorGradation,
+      inputContainerStyle,
+      focused,
+      disabled,
+      variant
+    }, /* @__PURE__ */ React__default["default"].createElement(styled.StyledWebTextInput, __spreadProps(__spreadValues({}, rest), {
+      placeholder: onlyLabel ? label : placeholder,
+      value,
+      ref,
+      disabled,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }))), hint && _hint);
+  }
+);
+Input.displayName = "Input";
+
+module.exports = Input;
+//# sourceMappingURL=Input.cjs.map

package/dist/components/atoms/Input/Input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.cjs","sources":["../../../../src/components/atoms/Input/Input.tsx"],"sourcesContent":["import {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { TextInput, View } from 'react-native';\nimport { StyledWebTextInput } from './styled';\n\nexport type InputWebProps = Omit<InputElementProps, 'style'> &\n  InputContainerProps & { ref?: React.Ref<HTMLInputElement | undefined> };\n\nconst Input: FC<InputWebProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || <Hint text={hint} variant={variant} />;\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    const onlyLabel = label && !placeholder;\n\n    return (\n      <View style={style}>\n        <InputContainer\n          label={value ? label : undefined}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={inputContainerStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledWebTextInput\n            {...rest}\n            placeholder={onlyLabel ? label : placeholder}\n            value={value}\n            ref={ref as React.Ref<TextInput>}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </InputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["React","Hint","useInputFocus","View","InputContainer","StyledWebTextInput"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,QAA2BA,yBAAM,CAAA,UAAA;AAAA,EACrC,CACE,IAwBA,GACG,KAAA;AAzBH,IACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACV,aAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,KArCN,GAgBI,EAsBK,EAAA,IAAA,GAAA,SAAA,CAtBL,EAsBK,EAAA;AAAA,MArBH,OAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,eAAA;AAAA,MACA,gBAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,aAAA;AAAA,MACA,sBAAA;AAAA,MACA,qBAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,KAAA,CAAA,CAAA;AAKF,IAAM,MAAA,KAAA,GAAQ,iCAAkBA,yBAAA,CAAA,aAAA,CAAAC,cAAA,EAAA;AAAA,MAAK,IAAM,EAAA,IAAA;AAAA,MAAM,OAAA;AAAA,KAAkB,CAAA,CAAA;AACnE,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,WAAA,EAAgB,GAAAC,uBAAA;AAAA,MAC3C,OAAA;AAAA,MACA,MAAA;AAAA,MACA,CAAC,QAAA;AAAA,KACH,CAAA;AAEA,IAAM,MAAA,SAAA,GAAY,SAAS,CAAC,WAAA,CAAA;AAE5B,IAAA,uBACGF,yBAAA,CAAA,aAAA,CAAAG,mBAAA,EAAA;AAAA,MAAK,KAAA;AAAA,KAAA,kBACHH,yBAAA,CAAA,aAAA,CAAAI,wBAAA,EAAA;AAAA,MACC,KAAA,EAAO,QAAQ,KAAQ,GAAA,KAAA,CAAA;AAAA,MACvB,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,KAEA,kBAAAJ,yBAAA,CAAA,aAAA,CAACK,4DACK,IADL,CAAA,EAAA;AAAA,MAEC,WAAA,EAAa,YAAY,KAAQ,GAAA,WAAA;AAAA,MACjC,KAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,KACV,CAAA,CACF,CACC,EAAA,IAAA,IAAQ,KACX,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}