meticulous-ui 3.7.11 → 3.7.13

package/components/Input/RadioGroup/RadioGroup.js

@@ -1,99 +1,109 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { createElement } from "react";
-import PropTypes from "prop-types";
-import Radio from "../Radio/Radio.js";
-import styled, { css } from "styled-components";
-import { blue } from "../../../colors/blue.js";
-import green from "../../../colors/green.js";
-import red from "../../../colors/red.js";
-import yellow from "../../../colors/yellow.js";
-import orange from "../../../colors/orange.js";
-import { black } from "../../../colors/black.js";
-import grey from "../../../colors/grey.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";
-const COLOR_SHADE_MAP = {
-  blue,
-  green,
-  red,
-  yellow,
-  orange,
-  black,
-  grey,
-  violet,
-  teal,
-  purple,
-  pink
-};
-const getColor = (clr) => {
-  var _a;
-  return (_a = COLOR_SHADE_MAP[clr]) != null ? _a : blue.m500;
-};
-const Wrapper = /*@__PURE__*/styled.fieldset`
+import { jsxs as y, jsx as b } from "react/jsx-runtime";
+import { createElement as h } from "react";
+import r from "prop-types";
+import x from "../Radio/Radio.js";
+import w, { css as m } from "styled-components";
+import { blue as t } from "../../../colors/blue.js";
+import k from "../../../colors/green.js";
+import v from "../../../colors/red.js";
+import C from "../../../colors/yellow.js";
+import H from "../../../colors/orange.js";
+import { black as O } from "../../../colors/black.js";
+import j from "../../../colors/grey.js";
+import R from "../../../colors/violet.js";
+import $ from "../../../colors/teal.js";
+import z from "../../../colors/purple.js";
+import A from "../../../colors/pink.js";
+const E = {
+  blue: t,
+  green: k,
+  red: v,
+  yellow: C,
+  orange: H,
+  black: O,
+  grey: j,
+  violet: R,
+  teal: $,
+  purple: z,
+  pink: A
+}, L = (e) => {
+  var i;
+  return (i = E[e]) != null ? i : t.m500;
+}, P = w.fieldset`
   border: none;
   padding: 0;
   margin: 0;
   display: flex;
-  flex-direction: ${({
-  $isHorizonatal
-}) => $isHorizonatal ? "row" : "column"};
+  flex-direction: ${({ $isHorizonatal: e }) => e ? "row" : "column"};
 
-  ${({
-  $isHorizonatal
-}) => $isHorizonatal ? css`
+  ${({ $isHorizonatal: e }) => e ? m`
           flex-wrap: wrap;
           justify-content: space-between;
-        ` : css`
+        ` : m`
           gap: 1.92rem;
         `};
-`;
-const RadioGroup = ({
-  options,
-  color = "blue",
-  value,
-  onChange,
-  isHorizonatal,
-  label,
-  ariaLabel,
-  name,
-  ...rest
+`, S = ({
+  options: e,
+  color: i = "blue",
+  value: a,
+  onChange: l,
+  isHorizonatal: s,
+  label: n,
+  ariaLabel: p,
+  name: f,
+  ...c
 }) => {
-  const shade = getColor(color);
-  const clickHandler = (val) => {
-    if (val !== value) {
-      onChange(val);
+  const d = L(i), g = (o) => {
+    o !== a && l(o);
+  }, u = (o) => /* @__PURE__ */ h(
+    x,
+    {
+      ...o,
+      key: o == null ? void 0 : o.value,
+      name: f,
+      color: d,
+      isSelected: a === (o == null ? void 0 : o.value),
+      onChange: g
+    }
+  );
+  return /* @__PURE__ */ y(
+    P,
+    {
+      role: "radiogroup",
+      "aria-label": n ? void 0 : p,
+      $isHorizonatal: s,
+      ...c,
+      children: [
+        n && /* @__PURE__ */ b("legend", { children: n }),
+        e.map(u)
+      ]
     }
-  };
-  const renderOption = (opt) => /* @__PURE__ */ createElement(Radio, { ...opt, key: opt == null ? void 0 : opt.value, name, color: shade, isSelected: value === (opt == null ? void 0 : opt.value), onChange: clickHandler });
-  return /* @__PURE__ */ jsxs(Wrapper, { role: "radiogroup", "aria-label": !label ? ariaLabel : void 0, $isHorizonatal: isHorizonatal, ...rest, children: [
-    label && /* @__PURE__ */ jsx("legend", { children: label }),
-    options.map(renderOption)
-  ] });
+  );
 };
-RadioGroup.propTypes = {
+S.propTypes = {
   /** Array of option objects, each with { value, label, disabled? } */
-  options: /* @__PURE__ */ PropTypes.arrayOf(/* @__PURE__ */ PropTypes.shape({
-    value: PropTypes.any,
-    label: PropTypes.string,
-    disabled: PropTypes.bool
-  })),
+  options: r.arrayOf(
+    r.shape({
+      value: r.any,
+      label: r.string,
+      disabled: r.bool
+    })
+  ),
   /** Currently selected value */
-  value: PropTypes.any,
+  value: r.any,
   /** Called with the selected value when a radio is clicked */
-  onChange: PropTypes.func,
+  onChange: r.func,
   /** Color theme key for the radio accent. Defaults to 'blue' */
-  color: PropTypes.string,
+  color: r.string,
   /** Renders options in a row when true */
-  isHorizonatal: PropTypes.bool,
+  isHorizonatal: r.bool,
   /** Visible legend text for the radio group */
-  label: PropTypes.string,
+  label: r.string,
   /** Accessible label when no visible label is provided */
-  ariaLabel: PropTypes.string,
+  ariaLabel: r.string,
   /** HTML name attribute shared by all radio inputs in the group */
-  name: PropTypes.string
+  name: r.string
 };
 export {
-  RadioGroup as default
+  S as default
 };

package/components/Input/RadioGroup/index.js

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

package/components/Input/Textarea/SvgIcon.js

@@ -1,16 +1,6 @@
-import { jsx } from "react/jsx-runtime";
-import { Suspense } from "react";
-const SvgIcon = ({
-  svgIcon,
-  iconStyles
-}) => {
-  if (!svgIcon) return null;
-  const Icon = svgIcon;
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { style: {
-    width: "1em",
-    height: "1em"
-  } }), children: /* @__PURE__ */ jsx(Icon, { ...iconStyles }) });
-};
+import { jsx as e } from "react/jsx-runtime";
+import { Suspense as n } from "react";
+const c = ({ svgIcon: t, iconStyles: r }) => t ? /* @__PURE__ */ e(n, { fallback: /* @__PURE__ */ e("div", { style: { width: "1em", height: "1em" } }), children: /* @__PURE__ */ e(t, { ...r }) }) : null;
 export {
-  SvgIcon as default
+  c as default
 };

package/components/Input/Textarea/Textarea.js

@@ -1,75 +1,50 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef } from "react";
-import white from "../../../colors/white.js";
-import grey from "../../../colors/grey.js";
-import SvgIcon from "./SvgIcon.js";
-import styled, { css } from "styled-components";
-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";
-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 TextareaBox = /*@__PURE__*/styled.textarea`
+import { jsxs as H, jsx as i } from "react/jsx-runtime";
+import { useState as K, useRef as Q } from "react";
+import U from "../../../colors/white.js";
+import s from "../../../colors/grey.js";
+import B from "./SvgIcon.js";
+import n, { css as c } from "styled-components";
+import { black as L } from "../../../colors/black.js";
+import v from "../../../colors/red.js";
+import { blue as V } from "../../../colors/blue.js";
+import X from "../../../colors/green.js";
+import Y from "../../../colors/yellow.js";
+import Z from "../../../colors/orange.js";
+import ee from "../../../colors/violet.js";
+import oe from "../../../colors/teal.js";
+import re from "../../../colors/purple.js";
+import te from "../../../colors/pink.js";
+const ie = {
+  blue: V.m500,
+  red: v.m500,
+  green: X.m500,
+  yellow: Y.m500,
+  orange: Z.m500,
+  black: L.m500,
+  grey: s.m500,
+  violet: ee.m500,
+  teal: oe.m500,
+  purple: re.m500,
+  pink: te.m500
+}, ne = (e) => {
+  var o;
+  return (o = ie[e]) != null ? o : s.m500;
+}, x = ({ $hasError: e, $shade: o, $isFocused: r, value: a, $onlyPh: d }) => e ? typeof a == "string" && !a && !r ? s.m500 : v.m400 : r && !d ? o : s.m500, se = n.textarea`
   border-radius: 0.64rem;
   font-size: 2.24rem;
-  border: 2px solid ${({
-  $hasError
-}) => $hasError ? red.m400 : black.m200};
+  border: 2px solid ${({ $hasError: e }) => e ? v.m400 : L.m200};
   padding: 0.96rem;
   font-weight: 400;
   transition: border-color 0.3s ease;
-  background-color: ${({
-  $background
-}) => $background} !important;
+  background-color: ${({ $background: e }) => e} !important;
   min-height: 2.24rem;
   min-width: 4.8rem;
 
-  ${({
-  $isResizeNone
-}) => $isResizeNone && css`
+  ${({ $isResizeNone: e }) => e && c`
       resize: none;
     `}
 
-  ${({
-  $isDynamic
-}) => $isDynamic && css`
+  ${({ $isDynamic: e }) => e && c`
       resize: none;
     `}
 
@@ -83,52 +58,38 @@ const TextareaBox = /*@__PURE__*/styled.textarea`
   }
 
   &::placeholder {
-    color: ${grey.m500};
+    color: ${s.m500};
     font-weight: 300;
     font-size: 2.24rem;
-    background-color: ${({
-  $background
-}) => $background};
+    background-color: ${({ $background: e }) => e};
     pointer-events: none;
   }
 
   &:focus {
     border: 2px solid
-      ${({
-  $shade,
-  $hasError
-}) => getCssShade({
-  $shade,
-  $hasError,
-  $isFocused: true
-})};
+      ${({ $shade: e, $hasError: o }) => x({ $shade: e, $hasError: o, $isFocused: !0 })};
     outline: none;
   }
-`;
-const HelperText = /*@__PURE__*/styled.p`
+`, ae = n.p`
   margin-top: 0.64rem;
   margin-left: 0.64rem;
   font-size: 1.28rem;
-  color: ${getCssShade};
-`;
-const Wrapper = /*@__PURE__*/styled.div`
+  color: ${x};
+`, me = n.div`
   position: relative;
   width: fit-content;
-`;
-const Label = /*@__PURE__*/styled.div`
+`, le = n.div`
   position: absolute;
   top: -0.64rem;
   left: 0.8rem;
   font-size: 1.28rem;
-  background-color: ${({
-  $outerBackground
-}) => $outerBackground};
+  background-color: ${({ $outerBackground: e }) => e};
   border-radius: 0.64rem;
   margin: 0 0.64rem;
   transition: 0.25s;
   font-weight: 400;
   pointer-events: none;
-  color: ${getCssShade};
+  color: ${x};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -136,131 +97,106 @@ const Label = /*@__PURE__*/styled.div`
   max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
   max-width: stretch; /* Modern Standard */
 
-  ${({
-  $isFocused,
-  $value,
-  $onlyPh
-}) => !$onlyPh && ($isFocused || $value) ? css`
+  ${({ $isFocused: e, $value: o, $onlyPh: r }) => !r && (e || o) ? c`
           top: -0.64rem;
           left: 0.8rem;
           padding: 0 0.64rem;
           margin: 0;
-        ` : css`
+        ` : c`
           top: 1.28rem;
           left: 0.8rem;
           font-size: 2.24rem;
         `}
-`;
-const Parent = /*@__PURE__*/styled.div`
+`, ce = n.div`
   overflow: hidden;
-`;
-const LeftIconWrapper = /*@__PURE__*/styled.div`
+`, de = n.div`
   position: absolute;
   top: 1.28rem;
   left: 0.96rem;
-`;
-const RightIconWrapper = /*@__PURE__*/styled.div`
+`, pe = n.div`
   position: absolute;
   top: 1.28rem;
   right: 0.96rem;
-`;
-const Textarea = ({
-  label,
-  onChange,
-  value,
-  type,
-  hasError,
-  name = "textarea",
-  color = "blue",
-  helperText = "",
-  background = "transparent",
-  outerBackground = white,
-  isDynamic,
-  isResizeNone,
-  rows = "2",
-  cols = "20",
-  leftIcon,
-  rightIcon,
-  placeholder,
-  ...params
+`, Re = ({
+  label: e,
+  onChange: o,
+  value: r,
+  type: a,
+  hasError: d,
+  name: k = "textarea",
+  color: j = "blue",
+  helperText: p = "",
+  background: y = "transparent",
+  outerBackground: A = U,
+  isDynamic: z,
+  isResizeNone: E,
+  rows: O = "2",
+  cols: P = "20",
+  leftIcon: f,
+  rightIcon: h,
+  placeholder: u,
+  ...W
 }) => {
-  const [$isFocused, setIsFocused] = useState(false);
-  const $shade = getColor(color);
-  const textAreaRef = useRef(null);
-  const resizeToContent = (element) => {
-    element.style.height = "";
-    const overflow = element.scrollHeight - element.clientHeight;
-    if (overflow > 0) {
-      const currentHeight = parseFloat(window.getComputedStyle(element).height);
-      element.style.height = `${currentHeight + overflow}px`;
-    }
-  };
-  const handleFocus = () => setIsFocused(true);
-  const handleBlur = () => setIsFocused(false);
-  const handleChange = (e) => {
-    if (isDynamic && textAreaRef.current) {
-      resizeToContent(textAreaRef.current);
+  const [m, C] = K(!1), g = ne(j), b = Q(null), M = (t) => {
+    t.style.height = "";
+    const R = t.scrollHeight - t.clientHeight;
+    if (R > 0) {
+      const J = parseFloat(window.getComputedStyle(t).height);
+      t.style.height = `${J + R}px`;
     }
-    onChange(e);
-  };
-  const iconStyles = {
-    color: grey.m500,
-    size: 20
-  };
-  const $hasLeftIcon = !!leftIcon;
-  const $hasRightIcon = !!rightIcon;
-  const $hasError = hasError;
-  const $isDynamic = isDynamic;
-  const $background = background;
-  const rowsObj = {
-    rows
-  };
-  const textareaId = `textarea-${name}`;
-  const helperId = helperText ? `${textareaId}-helper` : void 0;
-  return /* @__PURE__ */ jsxs(Wrapper, { children: [
-    /* @__PURE__ */ jsx(TextareaBox, { ...{
-      type,
-      name,
-      $hasError,
-      value,
-      $isFocused,
-      $shade,
-      $isDynamic,
-      $background,
-      cols,
-      $hasLeftIcon,
-      $hasRightIcon,
-      $isResizeNone: isResizeNone,
-      ...rowsObj
-    }, id: textareaId, "aria-invalid": $hasError ? true : void 0, "aria-describedby": helperId, ref: textAreaRef, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ...params }),
-    leftIcon && /* @__PURE__ */ jsx(LeftIconWrapper, { "aria-hidden": "true", style: {
-      top: "1.2rem",
-      transform: "none"
-    }, children: /* @__PURE__ */ jsx(SvgIcon, { svgIcon: leftIcon, iconStyles }) }),
-    rightIcon && /* @__PURE__ */ jsx(RightIconWrapper, { "aria-hidden": "true", style: {
-      top: "1.2rem",
-      transform: "none"
-    }, children: /* @__PURE__ */ jsx(SvgIcon, { svgIcon: rightIcon, iconStyles }) }),
-    /* @__PURE__ */ jsxs(Parent, { children: [
-      (label || placeholder && !value) && /* @__PURE__ */ jsx(Label, { as: "label", htmlFor: textareaId, ...{
-        $hasError,
-        $isFocused,
-        $shade,
-        $value: 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 })
+  }, T = () => C(!0), _ = () => C(!1), D = (t) => {
+    z && b.current && M(b.current), o(t);
+  }, S = { color: s.m500, size: 20 }, w = !!f, F = !!h, l = d, N = z, q = y, G = { rows: O }, $ = `textarea-${k}`, I = p ? `${$}-helper` : void 0;
+  return /* @__PURE__ */ H(me, { children: [
+    /* @__PURE__ */ i(
+      se,
+      {
+        type: a,
+        name: k,
+        $hasError: l,
+        value: r,
+        $isFocused: m,
+        $shade: g,
+        $isDynamic: N,
+        $background: q,
+        cols: P,
+        $hasLeftIcon: w,
+        $hasRightIcon: F,
+        $isResizeNone: E,
+        ...G,
+        id: $,
+        "aria-invalid": l ? !0 : void 0,
+        "aria-describedby": I,
+        ref: b,
+        onFocus: T,
+        onBlur: _,
+        onChange: D,
+        ...W
+      }
+    ),
+    f && /* @__PURE__ */ i(de, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ i(B, { svgIcon: f, iconStyles: S }) }),
+    h && /* @__PURE__ */ i(pe, { "aria-hidden": "true", style: { top: "1.2rem", transform: "none" }, children: /* @__PURE__ */ i(B, { svgIcon: h, iconStyles: S }) }),
+    /* @__PURE__ */ H(ce, { children: [
+      (e || u && !r) && /* @__PURE__ */ i(
+        le,
+        {
+          as: "label",
+          htmlFor: $,
+          $hasError: l,
+          $isFocused: m,
+          $shade: g,
+          $value: r,
+          $outerBackground: m || r ? A : y,
+          $hasLeftIcon: w,
+          $hasRightIcon: F,
+          $onlyPh: u && !e,
+          children: e || u
+        }
+      ),
+      p && /* @__PURE__ */ i(ae, { id: I, $hasError: l, $isFocused: m, $shade: g, $hasLeftIcon: w, children: p })
     ] })
   ] });
 };
 export {
-  Textarea as default
+  Re as default
 };

package/components/Input/Textarea/index.js

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