meticulous-ui 3.7.11 → 3.7.13

package/components/Input/Input/Input.js

@@ -1,79 +1,43 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import styled, { css } from "styled-components";
-import white from "../../../colors/white.js";
-import grey from "../../../colors/grey.js";
-import { black } from "../../../colors/black.js";
-import red from "../../../colors/red.js";
-import { blue } from "../../../colors/blue.js";
-import green from "../../../colors/green.js";
-import yellow from "../../../colors/yellow.js";
-import orange from "../../../colors/orange.js";
-import violet from "../../../colors/violet.js";
-import teal from "../../../colors/teal.js";
-import purple from "../../../colors/purple.js";
-import pink from "../../../colors/pink.js";
-import SvgIcon from "../Textarea/SvgIcon.js";
-const COLOR_SHADE_MAP = {
-  blue: blue.m500,
-  red: red.m500,
-  green: green.m500,
-  yellow: yellow.m500,
-  orange: orange.m500,
-  black: black.m500,
-  grey: grey.m500,
-  violet: violet.m500,
-  teal: teal.m500,
-  purple: purple.m500,
-  pink: pink.m500
-};
-const getColor = (clr) => {
-  var _a;
-  return (_a = COLOR_SHADE_MAP[clr]) != null ? _a : grey.m500;
-};
-const getCssShade = ({
-  $hasError,
-  $shade,
-  $isFocused,
-  value,
-  $onlyPh
-}) => {
-  if ($hasError) {
-    return typeof value === "string" && !value && !$isFocused ? grey.m500 : red.m400;
-  }
-  if ($isFocused && !$onlyPh) {
-    return $shade;
-  }
-  return grey.m500;
-};
-const getPadding = ({
-  $hasLeftIcon,
-  $hasRightIcon
-}) => {
-  if ($hasLeftIcon && $hasRightIcon) {
-    return "0 3.84rem";
-  }
-  if ($hasLeftIcon) {
-    return "0 0.96rem 0 3.84rem";
-  }
-  if ($hasRightIcon) {
-    return "0 3.84rem 0 0.96rem";
-  }
-  return "0 0.96rem";
-};
-const InputBox = /*@__PURE__*/styled.input`
+import { jsxs as R, jsx as i } from "react/jsx-runtime";
+import { useState as _ } from "react";
+import n, { css as C } from "styled-components";
+import D from "../../../colors/white.js";
+import m from "../../../colors/grey.js";
+import { black as F } from "../../../colors/black.js";
+import h from "../../../colors/red.js";
+import { blue as M } from "../../../colors/blue.js";
+import q from "../../../colors/green.js";
+import G from "../../../colors/yellow.js";
+import J from "../../../colors/orange.js";
+import K from "../../../colors/violet.js";
+import N from "../../../colors/teal.js";
+import Q from "../../../colors/purple.js";
+import U from "../../../colors/pink.js";
+import I from "../Textarea/SvgIcon.js";
+const V = {
+  blue: M.m500,
+  red: h.m500,
+  green: q.m500,
+  yellow: G.m500,
+  orange: J.m500,
+  black: F.m500,
+  grey: m.m500,
+  violet: K.m500,
+  teal: N.m500,
+  purple: Q.m500,
+  pink: U.m500
+}, X = (o) => {
+  var r;
+  return (r = V[o]) != null ? r : m.m500;
+}, $ = ({ $hasError: o, $shade: r, $isFocused: e, value: t, $onlyPh: l }) => o ? typeof t == "string" && !t && !e ? m.m500 : h.m400 : e && !l ? r : m.m500, Y = ({ $hasLeftIcon: o, $hasRightIcon: r }) => o && r ? "0 3.84rem" : o ? "0 0.96rem 0 3.84rem" : r ? "0 3.84rem 0 0.96rem" : "0 0.96rem", Z = n.input`
   height: 4.8rem;
   border-radius: 0.64rem;
   font-size: 2.24rem;
-  border: 2px solid ${({
-  $hasError
-}) => $hasError ? red.m400 : black.m200};
-  padding: ${getPadding};
+  border: 2px solid ${({ $hasError: o }) => o ? h.m400 : F.m200};
+  padding: ${Y};
   font-weight: 400;
   transition: border-color 0.3s ease;
-  background-color: ${({
-  $background
-}) => $background} !important;
+  background-color: ${({ $background: o }) => o} !important;
   overflow: hidden;
 
   &:-webkit-autofill,
@@ -86,154 +50,128 @@ const InputBox = /*@__PURE__*/styled.input`
   }
 
   &::placeholder {
-    color: ${grey.m500};
+    color: ${m.m500};
     font-weight: 300;
     font-size: 2.24rem;
-    background-color: ${({
-  $background
-}) => $background};
+    background-color: ${({ $background: o }) => o};
     pointer-events: none;
   }
 
   &:focus {
     border: 2px solid
-      ${({
-  $shade,
-  $hasError
-}) => getCssShade({
-  $shade,
-  $hasError,
-  $isFocused: true
-})};
+      ${({ $shade: o, $hasError: r }) => $({ $shade: o, $hasError: r, $isFocused: !0 })};
     outline: none;
   }
-`;
-const HelperText = /*@__PURE__*/styled.p`
+`, T = n.p`
   margin-top: 0.64rem;
   margin-left: 0.64rem;
   font-size: 1.28rem;
-  color: ${getCssShade};
-`;
-const Wrapper = /*@__PURE__*/styled.div`
+  color: ${$};
+`, oo = n.div`
   position: relative;
   width: fit-content;
-`;
-const LeftIconWrapper = /*@__PURE__*/styled.div`
+`, ro = n.div`
   position: absolute;
   top: 1.28rem;
   left: 0.96rem;
-`;
-const RightIconWrapper = /*@__PURE__*/styled.div`
+`, eo = n.div`
   position: absolute;
   top: 1.28rem;
   right: 0.96rem;
 `;
-/*@__PURE__*/styled.div`
+n.div`
   position: relative;
   width: 100%;
 `;
-const Label = /*@__PURE__*/styled.div`
+const to = n.div`
   position: absolute;
   top: -0.64rem;
   left: 0.8rem;
   font-size: 1.28rem;
-  background-color: ${({
-  $outerBackground
-}) => $outerBackground};
+  background-color: ${({ $outerBackground: o }) => o};
   border-radius: 0.64rem;
   margin: 0 0.64rem;
   transition: 0.25s;
   font-weight: 400;
   pointer-events: none;
-  color: ${getCssShade};
+  color: ${$};
 
-  ${({
-  $isFocused,
-  value,
-  $onlyPh
-}) => !$onlyPh && ($isFocused || value) ? css`
+  ${({ $isFocused: o, value: r, $onlyPh: e }) => !e && (o || r) ? C`
           top: -0.64rem;
-          left: ${({
-  $hasLeftIcon
-}) => $hasLeftIcon ? 3.52 : 0.8}rem;
+          left: ${({ $hasLeftIcon: t }) => t ? 3.52 : 0.8}rem;
           padding: 0 0.64rem;
           margin: 0;
-        ` : css`
+        ` : C`
           top: 1.28rem;
-          left: ${({
-  $hasLeftIcon
-}) => $hasLeftIcon ? 3.52 : 0.8}rem;
+          left: ${({ $hasLeftIcon: t }) => t ? 3.52 : 0.8}rem;
           font-size: 2.24rem;
         `}
-`;
-const Input = ({
-  label,
-  onChange,
-  value,
-  type,
-  hasError,
-  name = "input",
-  color = "blue",
-  size = "20",
-  disableAutoComplete,
-  helperText = "",
-  background = "transparent",
-  outerBackground = white,
-  leftIcon,
-  rightIcon,
-  placeholder,
-  ...params
+`, ko = ({
+  label: o,
+  onChange: r,
+  value: e,
+  type: t,
+  hasError: l,
+  name: v = "input",
+  color: S = "blue",
+  size: B = "20",
+  disableAutoComplete: L,
+  helperText: p = "",
+  background: w = "transparent",
+  outerBackground: P = D,
+  leftIcon: d,
+  rightIcon: c,
+  placeholder: u,
+  ...W
 }) => {
-  const [$isFocused, setIsFocused] = useState(false);
-  const $shade = getColor(color);
-  const handleFocus = () => setIsFocused(true);
-  const handleBlur = () => setIsFocused(false);
-  const handleChange = (e) => {
-    onChange(e);
-  };
-  const iconStyles = {
-    color: grey.m500,
-    size: 22
-  };
-  const $hasLeftIcon = !!leftIcon;
-  const $hasRightIcon = !!rightIcon;
-  const $hasError = hasError;
-  const $background = background;
-  const inputId = `input-${name}`;
-  const helperId = helperText ? `${inputId}-helper` : void 0;
-  return /* @__PURE__ */ jsxs(Wrapper, { children: [
-    /* @__PURE__ */ jsx(InputBox, { ...{
-      type,
-      name,
-      $hasError,
-      size,
-      value,
-      $isFocused,
-      $shade,
-      $background,
-      $hasLeftIcon,
-      $hasRightIcon
-    }, id: inputId, "aria-invalid": $hasError ? true : void 0, "aria-describedby": helperId, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, autoComplete: disableAutoComplete ? "off" : "on", ...params }),
-    leftIcon && /* @__PURE__ */ jsx(LeftIconWrapper, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(SvgIcon, { svgIcon: leftIcon, iconStyles }) }),
-    rightIcon && /* @__PURE__ */ jsx(RightIconWrapper, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(SvgIcon, { svgIcon: rightIcon, iconStyles }) }),
-    (label || placeholder && !value) && /* @__PURE__ */ jsx(Label, { as: "label", htmlFor: inputId, ...{
-      $hasError,
-      $isFocused,
-      $shade,
-      value,
-      $outerBackground: $isFocused || !!value ? outerBackground : background,
-      $hasLeftIcon,
-      $hasRightIcon,
-      $onlyPh: placeholder && !label
-    }, children: label || placeholder }),
-    helperText && /* @__PURE__ */ jsx(HelperText, { id: helperId, ...{
-      $hasError,
-      $isFocused,
-      $shade,
-      $hasLeftIcon
-    }, children: helperText })
+  const [s, k] = _(!1), f = X(S), j = () => k(!0), A = () => k(!1), E = (O) => {
+    r(O);
+  }, x = { color: m.m500, size: 22 }, g = !!d, y = !!c, a = l, H = w, b = `input-${v}`, z = p ? `${b}-helper` : void 0;
+  return /* @__PURE__ */ R(oo, { children: [
+    /* @__PURE__ */ i(
+      Z,
+      {
+        type: t,
+        name: v,
+        $hasError: a,
+        size: B,
+        value: e,
+        $isFocused: s,
+        $shade: f,
+        $background: H,
+        $hasLeftIcon: g,
+        $hasRightIcon: y,
+        id: b,
+        "aria-invalid": a ? !0 : void 0,
+        "aria-describedby": z,
+        onFocus: j,
+        onBlur: A,
+        onChange: E,
+        autoComplete: L ? "off" : "on",
+        ...W
+      }
+    ),
+    d && /* @__PURE__ */ i(ro, { "aria-hidden": "true", children: /* @__PURE__ */ i(I, { svgIcon: d, iconStyles: x }) }),
+    c && /* @__PURE__ */ i(eo, { "aria-hidden": "true", children: /* @__PURE__ */ i(I, { svgIcon: c, iconStyles: x }) }),
+    (o || u && !e) && /* @__PURE__ */ i(
+      to,
+      {
+        as: "label",
+        htmlFor: b,
+        $hasError: a,
+        $isFocused: s,
+        $shade: f,
+        value: e,
+        $outerBackground: s || e ? P : w,
+        $hasLeftIcon: g,
+        $hasRightIcon: y,
+        $onlyPh: u && !o,
+        children: o || u
+      }
+    ),
+    p && /* @__PURE__ */ i(T, { id: z, $hasError: a, $isFocused: s, $shade: f, $hasLeftIcon: g, children: p })
   ] });
 };
 export {
-  Input as default
+  ko as default
 };

package/components/Input/Input/index.js

@@ -1,4 +1,4 @@
-import Input from "./Input.js";
+import o from "./Input.js";
 export {
-  Input as default
+  o as default
 };

package/components/Input/Radio/Radio.js

@@ -1,9 +1,9 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import P from "../../Typography/P/P.js";
-import { blue } from "../../../colors/blue.js";
-import styled, { css } from "styled-components";
-import grey from "../../../colors/grey.js";
-const Circle = /*@__PURE__*/styled.div`
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
+import y from "../../Typography/P/P.js";
+import { blue as m } from "../../../colors/blue.js";
+import i, { css as l } from "styled-components";
+import u from "../../../colors/grey.js";
+const k = i.div`
   position: absolute;
   width: 1.12rem;
   height: 1.12rem;
@@ -11,26 +11,18 @@ const Circle = /*@__PURE__*/styled.div`
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  background-color: ${({
-  $isSelected,
-  $shade
-}) => $isSelected ? $shade : "transparent"};
+  background-color: ${({ $isSelected: e, $shade: t }) => e ? t : "transparent"};
   transition: background-color 0.35s ease;
-`;
-const CircleBorder = /*@__PURE__*/styled.div`
+`, f = i.div`
   width: 1.76rem;
   height: 1.76rem;
-  border: 1px solid ${({
-  $isSelected,
-  $shade
-}) => $isSelected ? $shade : grey.m900};
+  border: 1px solid ${({ $isSelected: e, $shade: t }) => e ? t : u.m900};
   border-radius: 50%;
   position: relative;
   transition:
     border-color 0.5s ease,
     box-shadow 0.5s ease;
-`;
-const HiddenInput = /*@__PURE__*/styled.input`
+`, v = i.input`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -40,56 +32,55 @@ const HiddenInput = /*@__PURE__*/styled.input`
   white-space: nowrap;
   opacity: 0;
   margin: 0;
-`;
-const Wrapper = /*@__PURE__*/styled.label`
+`, D = i.label`
   display: flex;
   align-items: center;
   gap: 1.28rem;
   width: max-content;
 
-  &:focus-within ${CircleBorder} {
-    box-shadow: 0 0 0 1px ${({
-  $focusShade
-}) => $focusShade || grey.m900};
+  &:focus-within ${f} {
+    box-shadow: 0 0 0 1px ${({ $focusShade: e }) => e || u.m900};
   }
 
-  ${({
-  $disabled
-}) => $disabled ? css`
+  ${({ $disabled: e }) => e ? l`
           pointer-events: none;
           opacity: 0.4;
           cursor: not-allowed;
-        ` : css`
+        ` : l`
           cursor: pointer;
         `}
-`;
-const Radio = ({
-  label,
-  value,
-  name,
-  color,
-  textColor,
-  isSelected,
-  disabled,
-  onChange,
-  ...rest
+`, E = ({
+  label: e,
+  value: t,
+  name: w,
+  color: r,
+  textColor: b,
+  isSelected: o,
+  disabled: s,
+  onChange: a,
+  ...g
 }) => {
-  var _a, _b;
-  const innerShade = (_a = color == null ? void 0 : color.m500) != null ? _a : blue.m500;
-  const outerShade = (_b = color == null ? void 0 : color.m800) != null ? _b : blue.m800;
-  const changeHandler = () => onChange(value);
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      if (!disabled) onChange(value);
-    }
-  };
-  return /* @__PURE__ */ jsxs(Wrapper, { $disabled: disabled, $focusShade: outerShade, ...rest, children: [
-    /* @__PURE__ */ jsx(HiddenInput, { type: "radio", name, value, checked: isSelected, disabled, onChange: changeHandler, onKeyDown: handleKeyDown }),
-    /* @__PURE__ */ jsx(CircleBorder, { "aria-hidden": "true", $isSelected: isSelected, $shade: outerShade, children: /* @__PURE__ */ jsx(Circle, { $isSelected: isSelected, $shade: innerShade }) }),
-    /* @__PURE__ */ jsx(P, { color: textColor, size: "1.92rem", children: label })
+  var p, h;
+  const x = (p = r == null ? void 0 : r.m500) != null ? p : m.m500, d = (h = r == null ? void 0 : r.m800) != null ? h : m.m800;
+  return /* @__PURE__ */ $(D, { $disabled: s, $focusShade: d, ...g, children: [
+    /* @__PURE__ */ n(
+      v,
+      {
+        type: "radio",
+        name: w,
+        value: t,
+        checked: o,
+        disabled: s,
+        onChange: () => a(t),
+        onKeyDown: (c) => {
+          c.key === "Enter" && (c.preventDefault(), s || a(t));
+        }
+      }
+    ),
+    /* @__PURE__ */ n(f, { "aria-hidden": "true", $isSelected: o, $shade: d, children: /* @__PURE__ */ n(k, { $isSelected: o, $shade: x }) }),
+    /* @__PURE__ */ n(y, { color: b, size: "1.92rem", children: e })
   ] });
 };
 export {
-  Radio as default
+  E as default
 };