bonkers-ui 2.0.5 → 2.0.7

package/bonkers.css

@@ -117,11 +117,11 @@
   --color-error-600: #a02323;
   --color-error-700: #6b1818;
 
-  --color-warning-300: #ffbc9b;
-  --color-warning-400: #ffa57a;
-  --color-warning-500: #ff8f59;
-  --color-warning-600: #cc7247;
-  --color-warning-700: #995635;
+  --color-warning-300: #F1A76E;
+  --color-warning-400: #E58F4F;
+  --color-warning-500: #D6702F;
+  --color-warning-600: #B45821;
+  --color-warning-700: #9A4D1B;
 
   --color-accent-300: #c9c9f6;
   --color-accent-400: #8b8bfc;

package/components/UiButton/UiButton.js

@@ -1,10 +1,10 @@
 import { jsx as p } from "react/jsx-runtime";
 import "react";
-import { EButtonTypes as r, EButtonSizes as a, EButtonWeight as t } from "./_types.js";
+import { EButtonTypes as r, EButtonSizes as o, EButtonWeight as t } from "./_types.js";
 import h from "classnames";
-import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1", m = {
+import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1", x = {
   UiButton: g
-}, x = {
+}, m = {
   [r.PRIMARY_BRAND]: `
 		bg-primary-600
 		border
@@ -241,35 +241,34 @@ import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1", m = {
   background: (e) => d(e) ? "focus-visible:before:bg-secondary-500" : "focus-visible:before:bg-white",
   border: (e) => d(e) ? "focus-visible:before:border-secondary-alt-400" : "focus-visible:before:border-primary-600"
 }, u = {
-  [a.SMALL]: "px-md py-xxs",
-  [a.MEDIUM]: "p-sm",
-  [a.LARGE]: "p-md",
-  [a.DEFAULT]: "px-md py-sm"
-}, R = {
+  [o.SMALL]: "px-xs py-xxs rounded-lg focus-visible:before:rounded-xl text-sm",
+  [o.MEDIUM]: "p-sm rounded-lg focus-visible:before:rounded-xl text-md",
+  [o.LARGE]: "px-md py-sm rounded-xl focus-visible:before:rounded-2xl text-xl",
+  [o.XLARGE]: "px-lg py-md rounded-xl focus-visible:before:rounded-2xl text-2xl",
+  [o.DEFAULT]: "px-sm py-sm rounded-lg focus-visible:before:rounded-xl"
+}, f = {
   [t.DEFAULT]: "font-medium",
   [t.BOLD]: "font-bold"
 }, T = ({
   kind: e = r.PRIMARY_BRAND,
-  size: b = a.DEFAULT,
-  fullWidth: i = !1,
-  disabled: o = !1,
+  size: i = o.DEFAULT,
+  fullWidth: b = !1,
+  disabled: a = !1,
   children: n,
-  weight: c = t.BOLD,
-  className: l,
-  onClick: y,
-  ...v
+  weight: l = t.BOLD,
+  className: c,
+  onClick: v,
+  ...y
 }) => /* @__PURE__ */ p(
   "button",
   {
-    ...v,
-    onClick: y,
+    ...y,
+    onClick: v,
     className: h(
-      m.UiButton,
-      "text-base",
+      x.UiButton,
       "cursor-pointer",
       "touch-manipulation",
       "whitespace-nowrap",
-      "rounded-xl",
       "leading-none",
       "flex",
       "gap-xs",
@@ -278,7 +277,6 @@ import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1", m = {
       "relative",
       "transition-all",
       "focus-visible:before:border-2",
-      "focus-visible:before:rounded-2xl",
       "focus-visible:before:absolute",
       "focus-visible:before:-translate-x-1/2",
       "focus-visible:before:-translate-y-1/2",
@@ -290,16 +288,16 @@ import '../../assets/UiButton.css';const g = "_UiButton_1dpbh_1", m = {
       "focus-visible:before:h-[calc(100%+10px)]",
       s.background(e),
       s.border(e),
-      x[e],
-      u[b],
-      R[c],
+      m[e],
+      u[i],
+      f[l],
       {
-        "w-full": i,
-        "pointer-events-none": o
+        "w-full": b,
+        "pointer-events-none": a
       },
-      l
+      c
     ),
-    disabled: o,
+    disabled: a,
     children: n
   }
 );

package/components/UiButton/UiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiButton.js","sources":["../../../src/components/UiButton/UiButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { EButtonSizes, EButtonTypes, EButtonWeight } from \"./_types.ts\";\nimport cx from \"classnames\";\nimport css from \"./UiButton.module.css\";\n\ntype TButtonProps = {\n\tkind?: EButtonTypes;\n\tsize?: EButtonSizes;\n\tfullWidth?: boolean;\n\tweight?: EButtonWeight;\n\tclassName?: string;\n} & React.HTMLAttributes<HTMLElement> &\n\tReact.ButtonHTMLAttributes<HTMLElement> &\n\tReact.AnchorHTMLAttributes<HTMLElement>\n\nconst typeClasses = {\n\t[EButtonTypes.PRIMARY_BRAND]: `\n\t\tbg-primary-600\n\t\tborder\n\t\tborder-primary-600\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-primary-700\n\t\thover:border-primary-700\n\t\tactive:bg-primary-800\n\t\tactive:border-primary-800\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_ACCENT]: `\n\t\tbg-primary-800\n\t\tborder\n\t\tborder-primary-800\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-primary-700\n\t\thover:border-primary-700\n\t\tactive:bg-primary-800\n\t\tactive:border-primary-800\n\t\tactive:text-primary-100\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_NEUTRAL]: `\n\t\tbg-secondary-500\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-secondary-400\n\t\thover:border-secondary-400\n\t\tactive:bg-secondary-500\n\t\tactive:border-secondary-500\n\t\tactive:text-secondary-alt-300\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_DESTRUCTIVE]: `\n\t\tbg-error-500\n\t\tborder\n\t\tborder-error-500\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-error-600\n\t\thover:border-error-600\n\t\tactive:bg-error-700\n\t\tactive:border-error-700\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_INVERSE]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-secondary-500\n\n\t\thover:border-secondary-400\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tdisabled:bg-secondary-alt-700\n\t\tdisabled:border-secondary-alt-700\n\t`,\n\t[EButtonTypes.SECONDARY_BRAND]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-primary-600\n\t\tshadow-md\n\t\ttext-primary-600\n\n\t\thover:bg-primary-50\n\t\thover:border-primary-700\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:border-primary-700\n\t\tactive:text-primary-700\n\t\tdisabled:bg-white\n\t\tdisabled:border-secondary-alt-300\n\t\tdisabled:shadow-none\n\t\tdisabled:text-secondary-alt-300\n\t`,\n\t[EButtonTypes.SECONDARY_ACCENT]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-primary-800\n\t\tshadow-md\n\t\ttext-primary-800\n\n\t\thover:bg-primary-50\n\t\thover:border-primary-700\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:border-primary-800\n\t\tactive:text-primary-800\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_NEUTRAL]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-secondary-500\n\n\t\thover:bg-secondary-alt-200\n\t\thover:border-secondary-400\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tactive:border-secondary-500\n\t\tactive:text-secondary-500\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_DESTRUCTIVE]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-error-500\n\t\tshadow-md\n\t\ttext-error-500\n\n\t\thover:bg-error-100\n\t\thover:border-error-600\n\t\thover:text-error-600\n\t\tactive:bg-error-200\n\t\tactive:border-error-700\n\t\tactive:text-error-700\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_INVERSE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-white\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-secondary-500\n\t\thover:border-secondary-alt-300\n\t\thover:text-secondary-alt-300\n\t\tactive:bg-secondary-400\n\t\tactive:border-white\n\t\tactive:text-white\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.TERTIARY_BRAND]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-primary-600\n\t\tunderline\n\n\t\thover:bg-primary-50\n\t\thover:no-underline\n\t\tactive:bg-primary-100\n\t\tactive:text-primary-700\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_ACCENT]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-primary-800\n\t\tunderline\n\n\t\thover:bg-primary-50\n\t\thover:no-underline\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:text-primary-800\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_NEUTRAL]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-secondary-500\n\t\tunderline\n\n\t\thover:bg-secondary-alt-200\n\t\thover:no-underline\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tactive:text-secondary-500\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_DESTRUCTIVE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-error-500\n\t\tunderline\n\n\t\thover:bg-error-100\n\t\thover:no-underline\n\t\thover:text-error-600\n\t\tactive:bg-error-200\n\t\tactive:text-error-700\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_INVERSE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-white\n\t\tunderline\n\n\t\thover:bg-secondary-500\n\t\thover:no-underline\n\t\thover:text-secondary-alt-300\n\t\tactive:bg-secondary-400\n\t\tactive-text-white\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-700\n\t\tdisabled:underline\n\t`,\n};\n\nconst isInverseType = (type: EButtonTypes): boolean => {\n\treturn (\n\t\ttype === EButtonTypes.PRIMARY_INVERSE\n\t\t|| type === EButtonTypes.SECONDARY_INVERSE\n\t\t|| type === EButtonTypes.TERTIARY_INVERSE\n\t);\n};\n\nconst focusColorClasses = {\n\tbackground: (type: EButtonTypes) =>\n\t\tisInverseType(type)\n\t\t\t? \"focus-visible:before:bg-secondary-500\"\n\t\t\t: \"focus-visible:before:bg-white\",\n\tborder: (type: EButtonTypes) =>\n\t\tisInverseType(type)\n\t\t\t? \"focus-visible:before:border-secondary-alt-400\"\n\t\t\t: \"focus-visible:before:border-primary-600\"\n};\n\nconst sizeClasses = {\n\t[EButtonSizes.SMALL]: \"px-md py-xxs\",\n\t[EButtonSizes.MEDIUM]: \"p-sm\",\n\t[EButtonSizes.LARGE]: \"p-md\",\n\t[EButtonSizes.DEFAULT]: \"px-md py-sm\",\n};\n\nconst weightClasses = {\n\t[EButtonWeight.DEFAULT]: \"font-medium\",\n\t[EButtonWeight.BOLD]: \"font-bold\",\n};\n\nexport const UiButton: React.FC<TButtonProps> = ({\n\tkind = EButtonTypes.PRIMARY_BRAND,\n\tsize = EButtonSizes.DEFAULT,\n\tfullWidth = false,\n\tdisabled = false,\n\tchildren,\n\tweight = EButtonWeight.BOLD,\n\tclassName,\n\tonClick,\n\t...rest\n}) => {\n\treturn (\n\t\t<button\n\t\t\t{ ...rest }\n\t\t\tonClick={ onClick }\n\t\t\tclassName={ cx(\n\t\t\t\tcss.UiButton,\n\t\t\t\t\"text-base\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"touch-manipulation\",\n\t\t\t\t\"whitespace-nowrap\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"leading-none\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"gap-xs\",\n\t\t\t\t\"justify-center\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"transition-all\",\n\t\t\t\t\"focus-visible:before:border-2\",\n\t\t\t\t\"focus-visible:before:rounded-2xl\",\n\t\t\t\t\"focus-visible:before:absolute\",\n\t\t\t\t\"focus-visible:before:-translate-x-1/2\",\n\t\t\t\t\"focus-visible:before:-translate-y-1/2\",\n\t\t\t\t\"focus-visible:before:left-1/2\",\n\t\t\t\t\"focus-visible:before:top-1/2\",\n\t\t\t\t\"focus-visible:before:inset-0\",\n\t\t\t\t\"focus-visible:before:z-[-1]\",\n\t\t\t\t\"focus-visible:before:w-[calc(100%+12px)]\",\n\t\t\t\t\"focus-visible:before:h-[calc(100%+10px)]\",\n\t\t\t\tfocusColorClasses.background(kind),\n\t\t\t\tfocusColorClasses.border(kind),\n\t\t\t\ttypeClasses[kind],\n\t\t\t\tsizeClasses[size],\n\t\t\t\tweightClasses[weight],\n\t\t\t\t{\n\t\t\t\t\t\"w-full\": fullWidth,\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ children }\n\t\t</button>\n\t);\n};\n"],"names":["typeClasses","EButtonTypes","isInverseType","type","focusColorClasses","sizeClasses","EButtonSizes","weightClasses","EButtonWeight","UiButton","kind","size","fullWidth","disabled","children","weight","className","onClick","rest","jsx","cx","css"],"mappings":"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"}
+{"version":3,"file":"UiButton.js","sources":["../../../src/components/UiButton/UiButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { EButtonSizes, EButtonTypes, EButtonWeight } from \"./_types.ts\";\nimport cx from \"classnames\";\nimport css from \"./UiButton.module.css\";\n\ntype TButtonProps = {\n\tkind?: EButtonTypes;\n\tsize?: EButtonSizes;\n\tfullWidth?: boolean;\n\tweight?: EButtonWeight;\n\tclassName?: string;\n} & React.HTMLAttributes<HTMLElement> &\n\tReact.ButtonHTMLAttributes<HTMLElement> &\n\tReact.AnchorHTMLAttributes<HTMLElement>\n\nconst typeClasses = {\n\t[EButtonTypes.PRIMARY_BRAND]: `\n\t\tbg-primary-600\n\t\tborder\n\t\tborder-primary-600\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-primary-700\n\t\thover:border-primary-700\n\t\tactive:bg-primary-800\n\t\tactive:border-primary-800\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_ACCENT]: `\n\t\tbg-primary-800\n\t\tborder\n\t\tborder-primary-800\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-primary-700\n\t\thover:border-primary-700\n\t\tactive:bg-primary-800\n\t\tactive:border-primary-800\n\t\tactive:text-primary-100\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_NEUTRAL]: `\n\t\tbg-secondary-500\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-secondary-400\n\t\thover:border-secondary-400\n\t\tactive:bg-secondary-500\n\t\tactive:border-secondary-500\n\t\tactive:text-secondary-alt-300\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_DESTRUCTIVE]: `\n\t\tbg-error-500\n\t\tborder\n\t\tborder-error-500\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-error-600\n\t\thover:border-error-600\n\t\tactive:bg-error-700\n\t\tactive:border-error-700\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.PRIMARY_INVERSE]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-secondary-500\n\n\t\thover:border-secondary-400\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tdisabled:bg-secondary-alt-700\n\t\tdisabled:border-secondary-alt-700\n\t`,\n\t[EButtonTypes.SECONDARY_BRAND]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-primary-600\n\t\tshadow-md\n\t\ttext-primary-600\n\n\t\thover:bg-primary-50\n\t\thover:border-primary-700\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:border-primary-700\n\t\tactive:text-primary-700\n\t\tdisabled:bg-white\n\t\tdisabled:border-secondary-alt-300\n\t\tdisabled:shadow-none\n\t\tdisabled:text-secondary-alt-300\n\t`,\n\t[EButtonTypes.SECONDARY_ACCENT]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-primary-800\n\t\tshadow-md\n\t\ttext-primary-800\n\n\t\thover:bg-primary-50\n\t\thover:border-primary-700\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:border-primary-800\n\t\tactive:text-primary-800\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_NEUTRAL]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-secondary-500\n\t\tshadow-md\n\t\ttext-secondary-500\n\n\t\thover:bg-secondary-alt-200\n\t\thover:border-secondary-400\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tactive:border-secondary-500\n\t\tactive:text-secondary-500\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_DESTRUCTIVE]: `\n\t\tbg-white\n\t\tborder\n\t\tborder-error-500\n\t\tshadow-md\n\t\ttext-error-500\n\n\t\thover:bg-error-100\n\t\thover:border-error-600\n\t\thover:text-error-600\n\t\tactive:bg-error-200\n\t\tactive:border-error-700\n\t\tactive:text-error-700\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.SECONDARY_INVERSE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-white\n\t\tshadow-md\n\t\ttext-white\n\n\t\thover:bg-secondary-500\n\t\thover:border-secondary-alt-300\n\t\thover:text-secondary-alt-300\n\t\tactive:bg-secondary-400\n\t\tactive:border-white\n\t\tactive:text-white\n\t\tdisabled:bg-secondary-alt-300\n\t\tdisabled:border-transparent\n\t`,\n\t[EButtonTypes.TERTIARY_BRAND]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-primary-600\n\t\tunderline\n\n\t\thover:bg-primary-50\n\t\thover:no-underline\n\t\tactive:bg-primary-100\n\t\tactive:text-primary-700\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_ACCENT]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-primary-800\n\t\tunderline\n\n\t\thover:bg-primary-50\n\t\thover:no-underline\n\t\thover:text-primary-700\n\t\tactive:bg-primary-100\n\t\tactive:text-primary-800\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_NEUTRAL]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-secondary-500\n\t\tunderline\n\n\t\thover:bg-secondary-alt-200\n\t\thover:no-underline\n\t\thover:text-secondary-400\n\t\tactive:bg-secondary-alt-300\n\t\tactive:text-secondary-500\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_DESTRUCTIVE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-error-500\n\t\tunderline\n\n\t\thover:bg-error-100\n\t\thover:no-underline\n\t\thover:text-error-600\n\t\tactive:bg-error-200\n\t\tactive:text-error-700\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-300\n\t\tdisabled:underline\n\t`,\n\t[EButtonTypes.TERTIARY_INVERSE]: `\n\t\tbg-transparent\n\t\tborder\n\t\tborder-transparent\n\t\ttext-white\n\t\tunderline\n\n\t\thover:bg-secondary-500\n\t\thover:no-underline\n\t\thover:text-secondary-alt-300\n\t\tactive:bg-secondary-400\n\t\tactive-text-white\n\t\tdisabled:bg-transparent\n\t\tdisabled:text-secondary-alt-700\n\t\tdisabled:underline\n\t`,\n};\n\nconst isInverseType = (type: EButtonTypes): boolean => {\n\treturn (\n\t\ttype === EButtonTypes.PRIMARY_INVERSE\n\t\t|| type === EButtonTypes.SECONDARY_INVERSE\n\t\t|| type === EButtonTypes.TERTIARY_INVERSE\n\t);\n};\n\nconst focusColorClasses = {\n\tbackground: (type: EButtonTypes) =>\n\t\tisInverseType(type)\n\t\t\t? \"focus-visible:before:bg-secondary-500\"\n\t\t\t: \"focus-visible:before:bg-white\",\n\tborder: (type: EButtonTypes) =>\n\t\tisInverseType(type)\n\t\t\t? \"focus-visible:before:border-secondary-alt-400\"\n\t\t\t: \"focus-visible:before:border-primary-600\"\n};\n\nconst sizeClasses = {\n\t[EButtonSizes.SMALL]: \"px-xs py-xxs rounded-lg focus-visible:before:rounded-xl text-sm\",\n\t[EButtonSizes.MEDIUM]: \"p-sm rounded-lg focus-visible:before:rounded-xl text-md\",\n\t[EButtonSizes.LARGE]: \"px-md py-sm rounded-xl focus-visible:before:rounded-2xl text-xl\",\n\t[EButtonSizes.XLARGE]: \"px-lg py-md rounded-xl focus-visible:before:rounded-2xl text-2xl\",\n\t[EButtonSizes.DEFAULT]: \"px-sm py-sm rounded-lg focus-visible:before:rounded-xl\",\n};\n\nconst weightClasses = {\n\t[EButtonWeight.DEFAULT]: \"font-medium\",\n\t[EButtonWeight.BOLD]: \"font-bold\",\n};\n\nexport const UiButton: React.FC<TButtonProps> = ({\n\tkind = EButtonTypes.PRIMARY_BRAND,\n\tsize = EButtonSizes.DEFAULT,\n\tfullWidth = false,\n\tdisabled = false,\n\tchildren,\n\tweight = EButtonWeight.BOLD,\n\tclassName,\n\tonClick,\n\t...rest\n}) => {\n\treturn (\n\t\t<button\n\t\t\t{ ...rest }\n\t\t\tonClick={ onClick }\n\t\t\tclassName={ cx(\n\t\t\t\tcss.UiButton,\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"touch-manipulation\",\n\t\t\t\t\"whitespace-nowrap\",\n\t\t\t\t\"leading-none\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"gap-xs\",\n\t\t\t\t\"justify-center\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"transition-all\",\n\t\t\t\t\"focus-visible:before:border-2\",\n\t\t\t\t\"focus-visible:before:absolute\",\n\t\t\t\t\"focus-visible:before:-translate-x-1/2\",\n\t\t\t\t\"focus-visible:before:-translate-y-1/2\",\n\t\t\t\t\"focus-visible:before:left-1/2\",\n\t\t\t\t\"focus-visible:before:top-1/2\",\n\t\t\t\t\"focus-visible:before:inset-0\",\n\t\t\t\t\"focus-visible:before:z-[-1]\",\n\t\t\t\t\"focus-visible:before:w-[calc(100%+12px)]\",\n\t\t\t\t\"focus-visible:before:h-[calc(100%+10px)]\",\n\t\t\t\tfocusColorClasses.background(kind),\n\t\t\t\tfocusColorClasses.border(kind),\n\t\t\t\ttypeClasses[kind],\n\t\t\t\tsizeClasses[size],\n\t\t\t\tweightClasses[weight],\n\t\t\t\t{\n\t\t\t\t\t\"w-full\": fullWidth,\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ children }\n\t\t</button>\n\t);\n};\n"],"names":["typeClasses","EButtonTypes","isInverseType","type","focusColorClasses","sizeClasses","EButtonSizes","weightClasses","EButtonWeight","UiButton","kind","size","fullWidth","disabled","children","weight","className","onClick","rest","jsx","cx","css"],"mappings":";;;;;;GAeMA,IAAc;AAAA,EACnB,CAACC,EAAa,aAAa,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc9B,CAACA,EAAa,cAAc,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe/B,CAACA,EAAa,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAehC,CAACA,EAAa,mBAAmB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcpC,CAACA,EAAa,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAahC,CAACA,EAAa,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBhC,CAACA,EAAa,gBAAgB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBjC,CAACA,EAAa,iBAAiB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBlC,CAACA,EAAa,qBAAqB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBtC,CAACA,EAAa,iBAAiB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBlC,CAACA,EAAa,cAAc,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe/B,CAACA,EAAa,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBhC,CAACA,EAAa,gBAAgB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBjC,CAACA,EAAa,oBAAoB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBrC,CAACA,EAAa,gBAAgB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBlC,GAEMC,IAAgB,CAACC,MAErBA,MAASF,EAAa,mBACnBE,MAASF,EAAa,qBACtBE,MAASF,EAAa,kBAIrBG,IAAoB;AAAA,EACzB,YAAY,CAACD,MACZD,EAAcC,CAAI,IACf,0CACA;AAAA,EACJ,QAAQ,CAACA,MACRD,EAAcC,CAAI,IACf,kDACA;AACL,GAEME,IAAc;AAAA,EACnB,CAACC,EAAa,KAAK,GAAG;AAAA,EACtB,CAACA,EAAa,MAAM,GAAG;AAAA,EACvB,CAACA,EAAa,KAAK,GAAG;AAAA,EACtB,CAACA,EAAa,MAAM,GAAG;AAAA,EACvB,CAACA,EAAa,OAAO,GAAG;AACzB,GAEMC,IAAgB;AAAA,EACrB,CAACC,EAAc,OAAO,GAAG;AAAA,EACzB,CAACA,EAAc,IAAI,GAAG;AACvB,GAEaC,IAAmC,CAAC;AAAA,EAChD,MAAAC,IAAOT,EAAa;AAAA,EACpB,MAAAU,IAAOL,EAAa;AAAA,EACpB,WAAAM,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,QAAAC,IAASP,EAAc;AAAA,EACvB,WAAAQ;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACL,SAAAD;AAAA,IACA,WAAYG;AAAA,MACXC,EAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAjB,EAAkB,WAAWM,CAAI;AAAA,MACjCN,EAAkB,OAAOM,CAAI;AAAA,MAC7BV,EAAYU,CAAI;AAAA,MAChBL,EAAYM,CAAI;AAAA,MAChBJ,EAAcQ,CAAM;AAAA,MACpB;AAAA,QACC,UAAUH;AAAA,QACV,uBAAuBC;AAAA,MACxB;AAAA,MACAG;AAAA,IACD;AAAA,IACA,UAAAH;AAAA,IAEE,UAAAC;AAAA,EAAA;AACH;"}

package/components/UiButton/_types.d.ts

@@ -19,7 +19,8 @@ export declare enum EButtonSizes {
     DEFAULT = "default",
     SMALL = "sm",
     MEDIUM = "md",
-    LARGE = "lg"
+    LARGE = "lg",
+    XLARGE = "xl"
 }
 export declare enum EButtonWeight {
     DEFAULT = "default",

package/components/UiButton/_types.js

@@ -1,4 +1,4 @@
-var R = /* @__PURE__ */ ((r) => (r.PRIMARY_BRAND = "primary-brand", r.PRIMARY_ACCENT = "primary-accent", r.PRIMARY_NEUTRAL = "primary-neutral", r.PRIMARY_DESTRUCTIVE = "primary-destructive", r.PRIMARY_INVERSE = "primary-inverse", r.SECONDARY_BRAND = "secondary-brand", r.SECONDARY_ACCENT = "secondary-accent", r.SECONDARY_NEUTRAL = "secondary-neutral", r.SECONDARY_DESTRUCTIVE = "secondary-destructive", r.SECONDARY_INVERSE = "secondary-inverse", r.TERTIARY_BRAND = "tertiary-brand", r.TERTIARY_ACCENT = "tertiary-accent", r.TERTIARY_NEUTRAL = "tertiary-neutral", r.TERTIARY_DESTRUCTIVE = "tertiary-destructive", r.TERTIARY_INVERSE = "tertiary-inverse", r))(R || {}), a = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.SMALL = "sm", r.MEDIUM = "md", r.LARGE = "lg", r))(a || {}), A = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.BOLD = "bold", r))(A || {});
+var R = /* @__PURE__ */ ((r) => (r.PRIMARY_BRAND = "primary-brand", r.PRIMARY_ACCENT = "primary-accent", r.PRIMARY_NEUTRAL = "primary-neutral", r.PRIMARY_DESTRUCTIVE = "primary-destructive", r.PRIMARY_INVERSE = "primary-inverse", r.SECONDARY_BRAND = "secondary-brand", r.SECONDARY_ACCENT = "secondary-accent", r.SECONDARY_NEUTRAL = "secondary-neutral", r.SECONDARY_DESTRUCTIVE = "secondary-destructive", r.SECONDARY_INVERSE = "secondary-inverse", r.TERTIARY_BRAND = "tertiary-brand", r.TERTIARY_ACCENT = "tertiary-accent", r.TERTIARY_NEUTRAL = "tertiary-neutral", r.TERTIARY_DESTRUCTIVE = "tertiary-destructive", r.TERTIARY_INVERSE = "tertiary-inverse", r))(R || {}), a = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.SMALL = "sm", r.MEDIUM = "md", r.LARGE = "lg", r.XLARGE = "xl", r))(a || {}), A = /* @__PURE__ */ ((r) => (r.DEFAULT = "default", r.BOLD = "bold", r))(A || {});
 export {
   a as EButtonSizes,
   R as EButtonTypes,

package/components/UiButton/_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"_types.js","sources":["../../../src/components/UiButton/_types.ts"],"sourcesContent":["export enum EButtonTypes {\n\tPRIMARY_BRAND = \"primary-brand\",\n\tPRIMARY_ACCENT = \"primary-accent\",\n\tPRIMARY_NEUTRAL = \"primary-neutral\",\n\tPRIMARY_DESTRUCTIVE = \"primary-destructive\",\n\tPRIMARY_INVERSE = \"primary-inverse\",\n\tSECONDARY_BRAND = \"secondary-brand\",\n\tSECONDARY_ACCENT = \"secondary-accent\",\n\tSECONDARY_NEUTRAL = \"secondary-neutral\",\n\tSECONDARY_DESTRUCTIVE = \"secondary-destructive\",\n\tSECONDARY_INVERSE = \"secondary-inverse\",\n\tTERTIARY_BRAND = \"tertiary-brand\",\n\tTERTIARY_ACCENT = \"tertiary-accent\",\n\tTERTIARY_NEUTRAL = \"tertiary-neutral\",\n\tTERTIARY_DESTRUCTIVE = \"tertiary-destructive\",\n\tTERTIARY_INVERSE = \"tertiary-inverse\"\n}\n\nexport enum EButtonSizes {\n\tDEFAULT = \"default\",\n\tSMALL = \"sm\",\n\tMEDIUM = \"md\",\n\tLARGE = \"lg\"\n}\n\nexport enum EButtonWeight {\n\tDEFAULT = \"default\",\n\tBOLD = \"bold\",\n}\n"],"names":["EButtonTypes","EButtonSizes","EButtonWeight"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,gBAAgB,iBAChBA,EAAA,iBAAiB,kBACjBA,EAAA,kBAAkB,mBAClBA,EAAA,sBAAsB,uBACtBA,EAAA,kBAAkB,mBAClBA,EAAA,kBAAkB,mBAClBA,EAAA,mBAAmB,oBACnBA,EAAA,oBAAoB,qBACpBA,EAAA,wBAAwB,yBACxBA,EAAA,oBAAoB,qBACpBA,EAAA,iBAAiB,kBACjBA,EAAA,kBAAkB,mBAClBA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,mBAAmB,oBAfRA,IAAAA,KAAA,CAAA,CAAA,GAkBAC,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,MACRA,EAAA,SAAS,MACTA,EAAA,QAAQ,MAJGA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,OAAO,QAFIA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"_types.js","sources":["../../../src/components/UiButton/_types.ts"],"sourcesContent":["export enum EButtonTypes {\n\tPRIMARY_BRAND = \"primary-brand\",\n\tPRIMARY_ACCENT = \"primary-accent\",\n\tPRIMARY_NEUTRAL = \"primary-neutral\",\n\tPRIMARY_DESTRUCTIVE = \"primary-destructive\",\n\tPRIMARY_INVERSE = \"primary-inverse\",\n\tSECONDARY_BRAND = \"secondary-brand\",\n\tSECONDARY_ACCENT = \"secondary-accent\",\n\tSECONDARY_NEUTRAL = \"secondary-neutral\",\n\tSECONDARY_DESTRUCTIVE = \"secondary-destructive\",\n\tSECONDARY_INVERSE = \"secondary-inverse\",\n\tTERTIARY_BRAND = \"tertiary-brand\",\n\tTERTIARY_ACCENT = \"tertiary-accent\",\n\tTERTIARY_NEUTRAL = \"tertiary-neutral\",\n\tTERTIARY_DESTRUCTIVE = \"tertiary-destructive\",\n\tTERTIARY_INVERSE = \"tertiary-inverse\"\n}\n\nexport enum EButtonSizes {\n\tDEFAULT = \"default\",\n\tSMALL = \"sm\",\n\tMEDIUM = \"md\",\n\tLARGE = \"lg\",\n\tXLARGE = \"xl\"\n}\n\nexport enum EButtonWeight {\n\tDEFAULT = \"default\",\n\tBOLD = \"bold\",\n}\n"],"names":["EButtonTypes","EButtonSizes","EButtonWeight"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,gBAAgB,iBAChBA,EAAA,iBAAiB,kBACjBA,EAAA,kBAAkB,mBAClBA,EAAA,sBAAsB,uBACtBA,EAAA,kBAAkB,mBAClBA,EAAA,kBAAkB,mBAClBA,EAAA,mBAAmB,oBACnBA,EAAA,oBAAoB,qBACpBA,EAAA,wBAAwB,yBACxBA,EAAA,oBAAoB,qBACpBA,EAAA,iBAAiB,kBACjBA,EAAA,kBAAkB,mBAClBA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,mBAAmB,oBAfRA,IAAAA,KAAA,CAAA,CAAA,GAkBAC,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,MACRA,EAAA,SAAS,MACTA,EAAA,QAAQ,MACRA,EAAA,SAAS,MALEA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,OAAO,QAFIA,IAAAA,KAAA,CAAA,CAAA;"}

package/components/UiInput/UiInput.base.js

@@ -1,35 +1,39 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { jsxs as s, jsx as d } from "react/jsx-runtime";
 import "react";
 import { UiTypography as p } from "../UiTypography/UiTypography.js";
 import { EInputKind as e } from "./_types.js";
-import t from "classnames";
-const f = ({ postIcon: o, preIcon: a, className: d, kind: l = e.DEFAULT, ...r }) => {
-  const s = {
-    [e.DEFAULT]: "border-secondary-alt-600 hover:border-secondary-alt-700",
+import i from "classnames";
+const h = ({ postIcon: o, preIcon: t, className: l, kind: a = e.DEFAULT, ...r }) => {
+  const n = {
+    [e.DEFAULT]: "border-secondary-alt-600",
     [e.ERROR]: "border-error",
     [e.SUCCESS]: "border-primary-600"
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     p,
     {
       tag: "label",
       htmlFor: r.id,
-      className: t(
+      className: i(
         "ui-input-wrapper",
         "flex flex-row items-center gap-sm rounded-xl border p-sm",
-        l && s[l],
+        "hover:border-secondary-alt-700",
+        "focus-within:outline-4",
+        "focus-within:outline-primary-300",
+        "active:ring focus-within:ring-secondary-alt-700",
+        a && n[a],
         {
           "bg-white": !r.disabled,
           "border-secondary-alt-300 bg-secondary-alt-200": r.disabled
         },
-        d
+        l
       ),
       children: [
-        a || null,
-        /* @__PURE__ */ n(
+        t || null,
+        /* @__PURE__ */ d(
           "input",
           {
-            className: t("border-0 flex-1 bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full"),
+            className: i("bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full"),
             ...r
           }
         ),
@@ -39,6 +43,6 @@ const f = ({ postIcon: o, preIcon: a, className: d, kind: l = e.DEFAULT, ...r })
   );
 };
 export {
-  f as UiInputBase
+  h as UiInputBase
 };
 //# sourceMappingURL=UiInput.base.js.map

package/components/UiInput/UiInput.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiInput.base.js","sources":["../../../src/components/UiInput/UiInput.base.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiTypography } from \"../UiTypography\";\nimport { EInputKind } from \"./_types\";\nimport cx from \"classnames\";\n\nexport type TUiInputBaseProps = {\n\tid: string;\n\tpostIcon?: React.ReactNode;\n\tpreIcon?: React.ReactNode;\n\tkind?: EInputKind;\n\tclassName?: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputBase: React.FC<\n\tTUiInputBaseProps\n> = ({ postIcon, preIcon, className, kind = EInputKind.DEFAULT, ...rest } ) => {\n\n\tconst stateClasses = {\n\t\t[EInputKind.DEFAULT]: \"border-secondary-alt-600 hover:border-secondary-alt-700\",\n\t\t[EInputKind.ERROR]: \"border-error\",\n\t\t[EInputKind.SUCCESS]: \"border-primary-600\",\n\t};\n\n\treturn (\n\t\t<UiTypography\n\t\t\ttag=\"label\"\n\t\t\thtmlFor={ rest.id }\n\t\t\tclassName={\n\t\t\t\tcx(\n\t\t\t\t\t\"ui-input-wrapper\",\n\t\t\t\t\t\"flex flex-row items-center gap-sm rounded-xl border p-sm\",\n\t\t\t\t\tkind && stateClasses[kind],\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-white\": !rest.disabled,\n\t\t\t\t\t\t\"border-secondary-alt-300 bg-secondary-alt-200\": rest.disabled,\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ preIcon\n\t\t\t\t? preIcon\n\t\t\t\t: null }\n\t\t\t<input\n\t\t\t\tclassName={ cx(\"border-0 flex-1 bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full\") }\n\t\t\t\t{ ...rest }\n\t\t\t/>\n\t\t\t{ postIcon\n\t\t\t\t? postIcon\n\t\t\t\t: null }\n\t\t</UiTypography>\n\t);\n};\n"],"names":["UiInputBase","postIcon","preIcon","className","kind","EInputKind","rest","stateClasses","jsxs","UiTypography","cx","jsx"],"mappings":";;;;;AAaa,MAAAA,IAET,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,MAAAC,IAAOC,EAAW,SAAS,GAAGC,QAAY;AAE9E,QAAMC,IAAe;AAAA,IACpB,CAACF,EAAW,OAAO,GAAG;AAAA,IACtB,CAACA,EAAW,KAAK,GAAG;AAAA,IACpB,CAACA,EAAW,OAAO,GAAG;AAAA,EACvB;AAGC,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAI;AAAA,MACJ,SAAUH,EAAK;AAAA,MACf,WACCI;AAAA,QACC;AAAA,QACA;AAAA,QACAN,KAAQG,EAAaH,CAAI;AAAA,QACzB;AAAA,UACC,YAAY,CAACE,EAAK;AAAA,UAClB,iDAAiDA,EAAK;AAAA,QACvD;AAAA,QACAH;AAAA,MACD;AAAA,MAGC,UAAA;AAAA,QAAAD,KAEC;AAAA,QACH,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD,EAAG,yFAAyF;AAAA,YACtG,GAAGJ;AAAA,UAAA;AAAA,QACN;AAAA,QACEL,KAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ;AAEF;"}
+{"version":3,"file":"UiInput.base.js","sources":["../../../src/components/UiInput/UiInput.base.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiTypography } from \"../UiTypography\";\nimport { EInputKind } from \"./_types\";\nimport cx from \"classnames\";\n\nexport type TUiInputBaseProps = {\n\tid: string;\n\tpostIcon?: React.ReactNode;\n\tpreIcon?: React.ReactNode;\n\tkind?: EInputKind;\n\tclassName?: string;\n\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputBase: React.FC<\n\tTUiInputBaseProps\n> = ({ postIcon, preIcon, className, kind = EInputKind.DEFAULT, ...rest } ) => {\n\n\tconst stateClasses = {\n\t\t[EInputKind.DEFAULT]: \"border-secondary-alt-600\",\n\t\t[EInputKind.ERROR]: \"border-error\",\n\t\t[EInputKind.SUCCESS]: \"border-primary-600\",\n\t};\n\n\treturn (\n\t\t<UiTypography\n\t\t\ttag=\"label\"\n\t\t\thtmlFor={ rest.id }\n\t\t\tclassName={\n\t\t\t\tcx(\n\t\t\t\t\t\"ui-input-wrapper\",\n\t\t\t\t\t\"flex flex-row items-center gap-sm rounded-xl border p-sm\",\n\t\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\t\t\"focus-within:outline-4\",\n\t\t\t\t\t\"focus-within:outline-primary-300\",\n\t\t\t\t\t\"active:ring focus-within:ring-secondary-alt-700\",\n\t\t\t\t\tkind && stateClasses[kind],\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-white\": !rest.disabled,\n\t\t\t\t\t\t\"border-secondary-alt-300 bg-secondary-alt-200\": rest.disabled,\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ preIcon\n\t\t\t\t? preIcon\n\t\t\t\t: null }\n\t\t\t<input\n\t\t\t\tclassName={ cx(\"bg-transparent outline-hidden placeholder:text-secondary-alt-600 w-full\") }\n\t\t\t\t{ ...rest }\n\t\t\t/>\n\n\t\t\t{ postIcon\n\t\t\t\t? postIcon\n\t\t\t\t: null }\n\n\t\t</UiTypography>\n\t);\n};\n"],"names":["UiInputBase","postIcon","preIcon","className","kind","EInputKind","rest","stateClasses","jsxs","UiTypography","cx","jsx"],"mappings":";;;;;AAca,MAAAA,IAET,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,MAAAC,IAAOC,EAAW,SAAS,GAAGC,QAAY;AAE9E,QAAMC,IAAe;AAAA,IACpB,CAACF,EAAW,OAAO,GAAG;AAAA,IACtB,CAACA,EAAW,KAAK,GAAG;AAAA,IACpB,CAACA,EAAW,OAAO,GAAG;AAAA,EACvB;AAGC,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAI;AAAA,MACJ,SAAUH,EAAK;AAAA,MACf,WACCI;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN,KAAQG,EAAaH,CAAI;AAAA,QACzB;AAAA,UACC,YAAY,CAACE,EAAK;AAAA,UAClB,iDAAiDA,EAAK;AAAA,QACvD;AAAA,QACAH;AAAA,MACD;AAAA,MAGC,UAAA;AAAA,QAAAD,KAEC;AAAA,QACH,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD,EAAG,yEAAyE;AAAA,YACtF,GAAGJ;AAAA,UAAA;AAAA,QACN;AAAA,QAEEL,KAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEF;"}

package/components/UiInput/UiInputText.d.ts

@@ -1,12 +1,13 @@
 import { default as React } from 'react';
+import { TUiInputBaseProps } from './UiInput.base.tsx';
 import { EInputKind } from './_types.ts';
 type TUiInputTextProps = {
     id: string;
     kind?: EInputKind;
-    statusMessage?: string;
+    statusMessage?: string | React.ReactElement;
     title?: React.ReactNode;
     subtitle?: React.ReactNode;
     infoComponent?: React.ReactNode;
-} & React.InputHTMLAttributes<HTMLInputElement>;
+} & TUiInputBaseProps;
 export declare const UiInputText: React.FC<TUiInputTextProps>;
 export {};

package/components/UiInput/UiInputText.js

@@ -3,10 +3,10 @@ import "react";
 import { UiInputBase as l } from "./UiInput.base.js";
 import { UiInputTitled as u } from "./UiInputTitled.js";
 import { EInputKind as s } from "./_types.js";
-import { UiTypography as d } from "../UiTypography/UiTypography.js";
+import { UiTypography as x } from "../UiTypography/UiTypography.js";
 import { ETypographySizes as f } from "../UiTypography/_types.js";
 import { EColors as i } from "../../_types/colors.js";
-import x from "classnames";
+import d from "classnames";
 const j = ({
   kind: o,
   title: m,
@@ -15,14 +15,14 @@ const j = ({
   statusMessage: t,
   ...e
 }) => /* @__PURE__ */ n(u, { title: m, subtitle: a, infoComponent: p, children: [
+  /* @__PURE__ */ r(l, { kind: o, ...e }),
   t ? /* @__PURE__ */ r(
-    d,
+    x,
     {
-      className: x(
-        "mb-xxs",
+      className: d(
         "transition-all duration-300 ease-in-out",
-        "max-h-0 opacity-0 overflow-hidden",
-        "data-[status=true]:max-h-lg data-[status=true]:opacity-100"
+        "max-h-0 opacity-0 overflow-hidden gap-xxs mt-xxs",
+        "data-[status=true]:max-h-full data-[status=true]:opacity-100"
       ),
       lineHeight: !0,
       color: o === s.ERROR ? i.ERROR : i.PRIMARY,
@@ -30,8 +30,7 @@ const j = ({
       "data-status": !!t,
       children: t
     }
-  ) : null,
-  /* @__PURE__ */ r(l, { kind: o, ...e })
+  ) : null
 ] });
 export {
   j as UiInputText

package/components/UiInput/UiInputText.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiInputText.js","sources":["../../../src/components/UiInput/UiInputText.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiInputBase } from \"./UiInput.base.tsx\";\nimport { UiInputTitled } from \"./UiInputTitled.tsx\";\nimport { EInputKind } from \"./_types.ts\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography/index.ts\";\nimport cx from \"classnames\";\n\ntype TUiInputTextProps = {\n\tid: string;\n\tkind?: EInputKind;\n\tstatusMessage?: string;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const UiInputText: React.FC<TUiInputTextProps> = ({\n\tkind,\n\ttitle,\n\tinfoComponent,\n\tsubtitle,\n\tstatusMessage,\n\t...rest\n}) => {\n\treturn (\n\t\t<UiInputTitled title={ title } subtitle={ subtitle } infoComponent={ infoComponent } >\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"mb-xxs\",\n\t\t\t\t\t\t\t\"transition-all duration-300 ease-in-out\",\n\t\t\t\t\t\t\t\"max-h-0 opacity-0 overflow-hidden\",\n\t\t\t\t\t\t\t\"data-[status=true]:max-h-lg data-[status=true]:opacity-100\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tkind === EInputKind.ERROR\n\t\t\t\t\t\t\t\t? EColors.ERROR\n\t\t\t\t\t\t\t\t: EColors.PRIMARY\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\tdata-status={ !!statusMessage }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\t\t\t<UiInputBase kind={ kind } { ...rest }/>\n\t\t</UiInputTitled>\n\t);\n};\n"],"names":["UiInputText","kind","title","infoComponent","subtitle","statusMessage","rest","jsxs","UiInputTitled","jsx","UiTypography","cx","EInputKind","EColors","ETypographySizes","UiInputBase"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAA2C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAEG,gBAAAC,EAAAC,GAAA,EAAc,OAAAN,GAAgB,UAAAE,GAAsB,eAAAD,GAClD,UAAA;AAAA,EAEAE,IAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,YAAU;AAAA,MACV,OACCV,MAASW,EAAW,QACjBC,EAAQ,QACRA,EAAQ;AAAA,MAEZ,MAAOC,EAAiB;AAAA,MACxB,eAAc,CAAC,CAACT;AAAA,MAEd,UAAAA;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,EACF,gBAAAI,EAAAM,GAAA,EAAY,MAAAd,GAAgB,GAAGK,EAAM,CAAA;AAAA,GACvC;"}
+{"version":3,"file":"UiInputText.js","sources":["../../../src/components/UiInput/UiInputText.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiInputBase, type TUiInputBaseProps } from \"./UiInput.base.tsx\";\nimport { UiInputTitled } from \"./UiInputTitled.tsx\";\nimport { EInputKind } from \"./_types.ts\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography/index.ts\";\nimport cx from \"classnames\";\n\ntype TUiInputTextProps = {\n\tid: string;\n\tkind?: EInputKind;\n\tstatusMessage?: string | React.ReactElement;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n} & TUiInputBaseProps;\n\nexport const UiInputText: React.FC<TUiInputTextProps> = ({\n\tkind,\n\ttitle,\n\tinfoComponent,\n\tsubtitle,\n\tstatusMessage,\n\t...rest\n}) => {\n\treturn (\n\t\t<UiInputTitled title={ title } subtitle={ subtitle } infoComponent={ infoComponent } >\n\t\t\t<UiInputBase kind={ kind } { ...rest }/>\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"transition-all duration-300 ease-in-out\",\n\t\t\t\t\t\t\t\"max-h-0 opacity-0 overflow-hidden gap-xxs mt-xxs\",\n\t\t\t\t\t\t\t\"data-[status=true]:max-h-full data-[status=true]:opacity-100\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tkind === EInputKind.ERROR\n\t\t\t\t\t\t\t\t? EColors.ERROR\n\t\t\t\t\t\t\t\t: EColors.PRIMARY\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\tdata-status={ !!statusMessage }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\n\t\t</UiInputTitled>\n\t);\n};\n"],"names":["UiInputText","kind","title","infoComponent","subtitle","statusMessage","rest","jsxs","UiInputTitled","jsx","UiInputBase","UiTypography","cx","EInputKind","EColors","ETypographySizes"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAA2C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAEG,gBAAAC,EAAAC,GAAA,EAAc,OAAAN,GAAgB,UAAAE,GAAsB,eAAAD,GACpD,UAAA;AAAA,EAAC,gBAAAM,EAAAC,GAAA,EAAY,MAAAT,GAAgB,GAAGK,EAAM,CAAA;AAAA,EACpCD,IAEA,gBAAAI;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,YAAU;AAAA,MACV,OACCX,MAASY,EAAW,QACjBC,EAAQ,QACRA,EAAQ;AAAA,MAEZ,MAAOC,EAAiB;AAAA,MACxB,eAAc,CAAC,CAACV;AAAA,MAEd,UAAAA;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,GAEJ;"}

package/components/UiInputRange/UiInputRange.js

@@ -1,70 +1,81 @@
-import { jsxs as S, jsx as e } from "react/jsx-runtime";
-import n from "react";
-import h from "classnames";
-import '../../assets/UiInputRange.css';const W = "_thumb_hkko1_18", F = {
-  thumb: W
-}, w = ({
+import { jsxs as z, jsx as n } from "react/jsx-runtime";
+import s from "react";
+import b from "classnames";
+import '../../assets/UiInputRange.css';const C = "_thumb_hkko1_18", F = {
+  thumb: C
+}, O = ({
   value: o,
   min: a,
-  max: r,
-  step: p,
-  onChangeHandler: m,
-  className: b,
-  ...l
+  max: i,
+  step: f,
+  onChangeHandler: g,
+  className: x,
+  ...u
 }) => {
-  const c = n.useRef(null), i = n.useRef(null), [f, g] = n.useState(0), [x, y] = n.useState(0);
-  n.useEffect(() => {
-    if (!c.current || !i.current) return;
-    const t = parseFloat(String(o)), s = parseFloat(String(a)), M = parseFloat(String(r)), k = (t - s) / (M - s) * 100, N = i.current.getBoundingClientRect().width, P = c.current.clientWidth, u = N / P * 100, d = k * (1 - u / 100);
-    g(Math.max(0, Math.min(100, d))), y(Math.max(0, Math.min(100, d + u)));
-  }, [a, r, o]);
+  const e = s.useRef(null), c = s.useRef(null), [p, y] = s.useState(0), l = s.useCallback(() => {
+    var h, m;
+    if (!e.current || !c.current) return;
+    const t = parseFloat(String(o)), r = parseFloat(String(a)), R = parseFloat(String(i)), N = ((h = c.current) == null ? void 0 : h.getBoundingClientRect().width) ?? 0, d = ((m = e.current) == null ? void 0 : m.getBoundingClientRect().width) ?? 0;
+    if (d === 0) return;
+    const P = (t - r) / (R - r) * 100, k = N / d * 100, w = Math.max(0, Math.min(100, P * (1 - k / 100)));
+    y(w);
+  }, [a, i, o]);
+  s.useEffect(() => {
+    l();
+    const t = new ResizeObserver(() => {
+      l();
+    });
+    return e.current && t.observe(e.current), () => {
+      t.disconnect();
+    };
+  }, [l]);
   const v = (t) => {
     if (t === o) return;
-    const s = parseFloat(t.toFixed(10));
-    m(s);
+    const r = parseFloat(t.toFixed(10));
+    g(r);
   };
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ z(
     "div",
     {
-      className: h(
+      className: b(
         "relative box-content h-xl py-xxs",
-        l.disabled && "opacity-60 cursor-default pointer-events-none",
-        b
+        u.disabled && "opacity-60 cursor-default pointer-events-none",
+        x
       ),
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n(
           "input",
           {
-            ...l,
-            ref: c,
+            ...u,
+            ref: e,
             className: "absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent",
             style: {
               touchAction: "none"
             },
             type: "range",
             min: a,
-            max: r,
-            step: p,
+            max: i,
+            step: f,
             value: o,
             onChange: (t) => v(+t.target.value),
             onTouchStart: (t) => t.stopPropagation(),
             onTouchMove: (t) => t.stopPropagation()
           }
         ),
-        /* @__PURE__ */ e("div", { className: "pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt" }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n("div", { className: "pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt" }),
+        /* @__PURE__ */ n(
           "div",
           {
-            className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary",
+            className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary-600",
             style: {
-              width: `${x}%`
+              width: `${p}%`
             }
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n(
           "div",
           {
-            className: h(
+            className: b(
               F.thumb,
               "pointer-events-none",
               "absolute",
@@ -73,13 +84,13 @@ import '../../assets/UiInputRange.css';const W = "_thumb_hkko1_18", F = {
               "-translate-y-1/2",
               "rounded-full",
               "bg-white",
-              "border-primary"
+              "border-primary-600"
             ),
-            ref: i,
+            ref: c,
             style: {
-              left: `${f}%`
+              left: `${p}%`
             },
-            children: /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary" })
+            children: /* @__PURE__ */ n("div", { className: "absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-600" })
           }
         )
       ]
@@ -87,6 +98,6 @@ import '../../assets/UiInputRange.css';const W = "_thumb_hkko1_18", F = {
   );
 };
 export {
-  w as UiInputRange
+  O as UiInputRange
 };
 //# sourceMappingURL=UiInputRange.js.map

package/components/UiInputRange/UiInputRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiInputRange.js","sources":["../../../src/components/UiInputRange/UiInputRange.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiInputRange.module.css\";\n\nexport type TUiInputRangeProps = {\n\tvalue: number;\n\tmin: string | number;\n\tmax: string | number;\n\tstep: string | number;\n\tonChangeHandler: (value: number) => void;\n\tclassName?: string;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\tclassName,\n\t...rest\n}) => {\n\tconst track = React.useRef<HTMLInputElement>(null);\n\tconst thumb = React.useRef<HTMLDivElement>(null);\n\n\tconst [thumbPosition, setThumbPosition] = React.useState(0);\n\tconst [trackWidth, setTrackWidth] = React.useState(0);\n\n\tReact.useEffect(() => {\n\t\tif (!track.current || !thumb.current) return;\n\n\t\tconst numValue = parseFloat(String(value));\n\t\tconst numMin = parseFloat(String(min));\n\t\tconst numMax = parseFloat(String(max));\n\n\t\tconst percentage = ((numValue - numMin) / (numMax - numMin)) * 100;\n\n\t\tconst thumbWidth = thumb.current.getBoundingClientRect().width;\n\t\tconst trackWidth = track.current.clientWidth;\n\t\tconst thumbWidthPercentage = (thumbWidth / trackWidth) * 100;\n\t\tconst adjustedPercentage = percentage * (1 - thumbWidthPercentage / 100);\n\n\t\tsetThumbPosition(Math.max(0, Math.min(100, adjustedPercentage)));\n\t\tsetTrackWidth(Math.max(0, Math.min(100, adjustedPercentage + thumbWidthPercentage)));\n\t}, [min, max, value]);\n\n\tconst handleOnChange = (newValue: number) => {\n\t\tif (newValue === value) return;\n\t\tconst preciseValue = parseFloat(newValue.toFixed(10));\n\t\tonChangeHandler(preciseValue);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ cx(\n\t\t\t\t\"relative box-content h-xl py-xxs\",\n\t\t\t\trest.disabled && \"opacity-60 cursor-default pointer-events-none\",\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<input\n\t\t\t\t{ ...rest }\n\t\t\t\tref={ track }\n\t\t\t\tclassName=\"absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttouchAction: \"none\",\n\t\t\t\t} }\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tstep={ step }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ (e) => handleOnChange(+e.target.value) }\n\t\t\t\tonTouchStart={ (e) => e.stopPropagation() }\n\t\t\t\tonTouchMove={ (e) => e.stopPropagation() }\n\t\t\t/>\n\n\t\t\t<div className=\"pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt\" />\n\n\t\t\t<div\n\t\t\t\tclassName=\"pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary\"\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${trackWidth}%`,\n\t\t\t\t} }\n\t\t\t/>\n\n\t\t\t<div\n\t\t\t\tclassName={ cx(\n\t\t\t\t\tstyles.thumb,\n\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"box-content\",\n\t\t\t\t\t\"size-md\",\n\t\t\t\t\t\"-translate-y-1/2\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\"border-primary\",\n\t\t\t\t) }\n\t\t\t\tref={ thumb }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${thumbPosition}%`,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div className=\"absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["UiInputRange","value","min","max","step","onChangeHandler","className","rest","track","React","thumb","thumbPosition","setThumbPosition","trackWidth","setTrackWidth","numValue","numMin","numMax","percentage","thumbWidth","thumbWidthPercentage","adjustedPercentage","handleOnChange","newValue","preciseValue","jsxs","cx","jsx","e","styles"],"mappings":";;;;;GAaaA,IAA6C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAAC,IAAQC,EAAM,OAAyB,IAAI,GAC3CC,IAAQD,EAAM,OAAuB,IAAI,GAEzC,CAACE,GAAeC,CAAgB,IAAIH,EAAM,SAAS,CAAC,GACpD,CAACI,GAAYC,CAAa,IAAIL,EAAM,SAAS,CAAC;AAEpD,EAAAA,EAAM,UAAU,MAAM;AACrB,QAAI,CAACD,EAAM,WAAW,CAACE,EAAM,QAAS;AAEtC,UAAMK,IAAW,WAAW,OAAOd,CAAK,CAAC,GACnCe,IAAS,WAAW,OAAOd,CAAG,CAAC,GAC/Be,IAAS,WAAW,OAAOd,CAAG,CAAC,GAE/Be,KAAeH,IAAWC,MAAWC,IAASD,KAAW,KAEzDG,IAAaT,EAAM,QAAQ,sBAAwB,EAAA,OACnDG,IAAaL,EAAM,QAAQ,aAC3BY,IAAwBD,IAAaN,IAAc,KACnDQ,IAAqBH,KAAc,IAAIE,IAAuB;AAEnD,IAAAR,EAAA,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKS,CAAkB,CAAC,CAAC,GACjDP,EAAA,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKO,IAAqBD,CAAoB,CAAC,CAAC;AAAA,EACjF,GAAA,CAAClB,GAAKC,GAAKF,CAAK,CAAC;AAEd,QAAAqB,IAAiB,CAACC,MAAqB;AAC5C,QAAIA,MAAatB,EAAO;AACxB,UAAMuB,IAAe,WAAWD,EAAS,QAAQ,EAAE,CAAC;AACpD,IAAAlB,EAAgBmB,CAAY;AAAA,EAC7B;AAGC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACAnB,EAAK,YAAY;AAAA,QACjBD;AAAA,MACD;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAqB;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGpB;AAAA,YACL,KAAMC;AAAA,YACN,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,aAAa;AAAA,YACd;AAAA,YACA,MAAK;AAAA,YACL,KAAAN;AAAA,YACA,KAAAC;AAAA,YACA,MAAAC;AAAA,YACA,OAAAH;AAAA,YACA,UAAW,CAAC2B,MAAMN,EAAe,CAACM,EAAE,OAAO,KAAK;AAAA,YAChD,cAAe,CAACA,MAAMA,EAAE,gBAAgB;AAAA,YACxC,aAAc,CAACA,MAAMA,EAAE,gBAAgB;AAAA,UAAA;AAAA,QACxC;AAAA,QAEA,gBAAAD,EAAC,OAAI,EAAA,WAAU,wGAAwG,CAAA;AAAA,QAEvH,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,OAAO,GAAGd,CAAU;AAAA,YAAA;AAAA,UACrB;AAAA,QACD;AAAA,QAEA,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD;AAAA,cACXG,EAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA,YACA,KAAMnB;AAAA,YACN,OAAQ;AAAA,cACP,MAAM,GAAGC,CAAa;AAAA,YACvB;AAAA,YAEA,UAAA,gBAAAgB,EAAC,OAAI,EAAA,WAAU,+FAA+F,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/G;AAAA,IAAA;AAAA,EACD;AAEF;"}
+{"version":3,"file":"UiInputRange.js","sources":["../../../src/components/UiInputRange/UiInputRange.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiInputRange.module.css\";\n\nexport type TUiInputRangeProps = {\n\tvalue: number;\n\tmin: string | number;\n\tmax: string | number;\n\tstep: string | number;\n\tonChangeHandler: (value: number) => void;\n\tclassName?: string;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\tclassName,\n\t...rest\n}) => {\n\tconst track = React.useRef<HTMLInputElement>(null);\n\tconst thumb = React.useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = React.useState(0);\n\n\tconst updatePositions = React.useCallback(() => {\n\t\tif (!track.current || !thumb.current) return;\n\n\t\tconst numValue = parseFloat(String(value));\n\t\tconst numMin = parseFloat(String(min));\n\t\tconst numMax = parseFloat(String(max));\n\n\t\tconst thumbWidth = thumb.current?.getBoundingClientRect().width ?? 0;\n\t\tconst trackWidth = track.current?.getBoundingClientRect().width ?? 0;\n\n\t\tif (trackWidth === 0) return;\n\n\t\tconst percentage = ((numValue - numMin) / (numMax - numMin)) * 100;\n\t\tconst thumbWidthPercentage = (thumbWidth / trackWidth) * 100;\n\n\t\tconst adjustedPercentage = Math.max(0, Math.min(100, percentage * (1 - thumbWidthPercentage / 100)));\n\n\t\tsetPosition(adjustedPercentage);\n\t}, [min, max, value]);\n\n\tReact.useEffect(() => {\n\t\tupdatePositions();\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tupdatePositions();\n\t\t});\n\n\t\tif (track.current) {\n\t\t\tresizeObserver.observe(track.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [updatePositions]);\n\n\tconst handleOnChange = (newValue: number) => {\n\t\tif (newValue === value) return;\n\t\tconst preciseValue = parseFloat(newValue.toFixed(10));\n\t\tonChangeHandler(preciseValue);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ cx(\n\t\t\t\t\"relative box-content h-xl py-xxs\",\n\t\t\t\trest.disabled && \"opacity-60 cursor-default pointer-events-none\",\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<input\n\t\t\t\t{ ...rest }\n\t\t\t\tref={ track }\n\t\t\t\tclassName=\"absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttouchAction: \"none\",\n\t\t\t\t} }\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tstep={ step }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ (e) => handleOnChange(+e.target.value) }\n\t\t\t\tonTouchStart={ (e) => e.stopPropagation() }\n\t\t\t\tonTouchMove={ (e) => e.stopPropagation() }\n\t\t\t/>\n\n\t\t\t<div className=\"pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt\" />\n\n\t\t\t<div\n\t\t\t\tclassName=\"pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary-600\"\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${position}%`,\n\t\t\t\t} }\n\t\t\t/>\n\n\t\t\t<div\n\t\t\t\tclassName={ cx(\n\t\t\t\t\tstyles.thumb,\n\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"box-content\",\n\t\t\t\t\t\"size-md\",\n\t\t\t\t\t\"-translate-y-1/2\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\"border-primary-600\",\n\t\t\t\t) }\n\t\t\t\tref={ thumb }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${position}%`,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div className=\"absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-600\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["UiInputRange","value","min","max","step","onChangeHandler","className","rest","track","React","thumb","position","setPosition","updatePositions","numValue","numMin","numMax","thumbWidth","_a","trackWidth","_b","percentage","thumbWidthPercentage","adjustedPercentage","resizeObserver","handleOnChange","newValue","preciseValue","jsxs","cx","jsx","e","styles"],"mappings":"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"}