@blueshift-gg/ui-components 0.1.0

package/dist/GridLines.mjs

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+import { glide } from './utils/easings';
+import classNames from 'classnames';
+
+const GridLines = ({
+  gap = 8,
+  animateLines = true,
+  lines = ["top", "bottom", "left", "right"],
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("absolute", className),
+      style: { inset: `${-gap}px` },
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: {
+              clipPath: animateLines ? "inset(0 0 100% 0)" : "inset(0 0 0 0)"
+            },
+            animate: { clipPath: "inset(0 0 0 0)" },
+            transition: { duration: 0.25, ease: glide },
+            className: classNames(
+              !lines.includes("left") && "hidden",
+              "absolute w-px bg-border-light left-0 top-1/2 -translate-y-1/2"
+            ),
+            style: { height: "100dvh" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: {
+              clipPath: animateLines ? "inset(100% 0 0 0)" : "inset(0 0 0 0)"
+            },
+            animate: { clipPath: "inset(0 0 0 0)" },
+            transition: { duration: 0.25, ease: glide, delay: 0.05 },
+            className: classNames(
+              !lines.includes("right") && "hidden",
+              "absolute w-px bg-border-light right-0 top-1/2 -translate-y-1/2"
+            ),
+            style: { height: "100dvh" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: {
+              clipPath: animateLines ? "inset(0 100% 0 0)" : "inset(0 0 0 0)"
+            },
+            animate: { clipPath: "inset(0 0 0 0)" },
+            transition: { duration: 0.25, ease: glide, delay: 0.1 },
+            className: classNames(
+              !lines.includes("top") && "hidden",
+              "absolute h-px bg-border-light top-0 left-1/2 -translate-x-1/2"
+            ),
+            style: { width: "100dvw" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: {
+              clipPath: animateLines ? "inset(0 0 0 100%)" : "inset(0 0 0 0)"
+            },
+            animate: { clipPath: "inset(0 0 0 0)" },
+            transition: { duration: 0.25, ease: glide, delay: 0.15 },
+            className: classNames(
+              !lines.includes("bottom") && "hidden",
+              "absolute h-px bg-border-light bottom-0 left-1/2 -translate-x-1/2"
+            ),
+            style: { width: "100dvw" }
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { GridLines };
+//# sourceMappingURL=GridLines.mjs.map
+//# sourceMappingURL=GridLines.mjs.map

package/dist/GridLines.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/GridLines.tsx"],"names":[],"mappings":";;;;;AAWO,MAAM,YAAY,CAAC;AAAA,EACxB,GAAA,GAAM,CAAA;AAAA,EACN,YAAA,GAAe,IAAA;AAAA,EACf,KAAA,GAAQ,CAAC,KAAA,EAAO,QAAA,EAAU,QAAQ,OAAO,CAAA;AAAA,EACzC;AACF,CAAA,KAAsB;AACpB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAA,CAAW,UAAA,EAAY,SAAS,CAAA;AAAA,MAC3C,OAAO,EAAE,KAAA,EAAO,CAAA,EAAG,CAAC,GAAG,CAAA,EAAA,CAAA,EAAK;AAAA,MAE5B,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,UAAA,EAAY,EAAE,QAAA,EAAU,IAAA,EAAM,MAAM,KAAA,EAAM;AAAA,YAC1C,SAAA,EAAW,UAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,MAAM,CAAA,IAAK,QAAA;AAAA,cAC3B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,MAAA,EAAQ,QAAA;AAAS;AAAA,SAC5B;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAM,KAAA,EAAO,OAAO,IAAA,EAAK;AAAA,YACvD,SAAA,EAAW,UAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,OAAO,CAAA,IAAK,QAAA;AAAA,cAC5B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,MAAA,EAAQ,QAAA;AAAS;AAAA,SAC5B;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAM,KAAA,EAAO,OAAO,GAAA,EAAI;AAAA,YACtD,SAAA,EAAW,UAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,KAAK,CAAA,IAAK,QAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA;AAAS;AAAA,SAC3B;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAM,KAAA,EAAO,OAAO,IAAA,EAAK;AAAA,YACvD,SAAA,EAAW,UAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,QAAQ,CAAA,IAAK,QAAA;AAAA,cAC7B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA;AAAS;AAAA;AAC3B;AAAA;AAAA,GACF;AAEJ","file":"GridLines.mjs","sourcesContent":["import { motion } from \"motion/react\";\nimport { breeze, glide } from \"./utils/easings\";\nimport classNames from \"classnames\";\n\nexport type GridLinesProps = {\n  className?: string;\n  animateLines?: boolean;\n  gap?: number;\n  lines?: (\"top\" | \"bottom\" | \"left\" | \"right\")[];\n};\n\nexport const GridLines = ({\n  gap = 8,\n  animateLines = true,\n  lines = [\"top\", \"bottom\", \"left\", \"right\"],\n  className,\n}: GridLinesProps) => {\n  return (\n    <div\n      className={classNames(\"absolute\", className)}\n      style={{ inset: `${-gap}px` }}\n    >\n      <motion.div\n        initial={{\n          clipPath: animateLines ? \"inset(0 0 100% 0)\" : \"inset(0 0 0 0)\",\n        }}\n        animate={{ clipPath: \"inset(0 0 0 0)\" }}\n        transition={{ duration: 0.25, ease: glide }}\n        className={classNames(\n          !lines.includes(\"left\") && \"hidden\",\n          \"absolute w-px bg-border-light left-0 top-1/2 -translate-y-1/2\"\n        )}\n        style={{ height: \"100dvh\" }}\n      />\n      <motion.div\n        initial={{\n          clipPath: animateLines ? \"inset(100% 0 0 0)\" : \"inset(0 0 0 0)\",\n        }}\n        animate={{ clipPath: \"inset(0 0 0 0)\" }}\n        transition={{ duration: 0.25, ease: glide, delay: 0.05 }}\n        className={classNames(\n          !lines.includes(\"right\") && \"hidden\",\n          \"absolute w-px bg-border-light right-0 top-1/2 -translate-y-1/2\"\n        )}\n        style={{ height: \"100dvh\" }}\n      />\n      <motion.div\n        initial={{\n          clipPath: animateLines ? \"inset(0 100% 0 0)\" : \"inset(0 0 0 0)\",\n        }}\n        animate={{ clipPath: \"inset(0 0 0 0)\" }}\n        transition={{ duration: 0.25, ease: glide, delay: 0.1 }}\n        className={classNames(\n          !lines.includes(\"top\") && \"hidden\",\n          \"absolute h-px bg-border-light top-0 left-1/2 -translate-x-1/2\"\n        )}\n        style={{ width: \"100dvw\" }}\n      />\n      <motion.div\n        initial={{\n          clipPath: animateLines ? \"inset(0 0 0 100%)\" : \"inset(0 0 0 0)\",\n        }}\n        animate={{ clipPath: \"inset(0 0 0 0)\" }}\n        transition={{ duration: 0.25, ease: glide, delay: 0.15 }}\n        className={classNames(\n          !lines.includes(\"bottom\") && \"hidden\",\n          \"absolute h-px bg-border-light bottom-0 left-1/2 -translate-x-1/2\"\n        )}\n        style={{ width: \"100dvw\" }}\n      />\n    </div>\n  );\n};\n"]}

package/dist/Icon.d.mts

@@ -0,0 +1,3 @@
+import 'react/jsx-runtime';
+import './utils/colours.mjs';
+export { I as Icon, b as IconComponents, c as IconName, a as IconProps, i as iconMetadata } from './index-DWGhkMUQ.mjs';

package/dist/Icon.d.ts

@@ -0,0 +1,3 @@
+import 'react/jsx-runtime';
+import './utils/colours.js';
+export { I as Icon, b as IconComponents, c as IconName, a as IconProps, i as iconMetadata } from './index-ekBNDG0H.js';

package/dist/Icon.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('./icons');
+
+const Icon = ({ className, name, size, difficulties }) => {
+  const IconComponent = icons.IconComponents[name];
+  if (!IconComponent) {
+    console.warn(`Icon ${name} not found`);
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconComponent,
+    {
+      difficulties: difficulties || [],
+      size,
+      className,
+      name
+    }
+  );
+};
+
+Object.defineProperty(exports, "IconComponents", {
+  enumerable: true,
+  get: function () { return icons.IconComponents; }
+});
+Object.defineProperty(exports, "iconMetadata", {
+  enumerable: true,
+  get: function () { return icons.iconMetadata; }
+});
+exports.Icon = Icon;
+//# sourceMappingURL=Icon.js.map
+//# sourceMappingURL=Icon.js.map

package/dist/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Icon.tsx"],"names":["IconComponents","jsx"],"mappings":";;;;;AAUO,MAAM,OAAO,CAAC,EAAE,WAAW,IAAA,EAAM,IAAA,EAAM,cAAa,KAAiB;AAC1E,EAAA,MAAM,aAAA,GAAgBA,qBAAe,IAAI,CAAA;AAEzC,EAAA,IAAI,CAAC,aAAA,EAAe;AAClB,IAAA,OAAA,CAAQ,IAAA,CAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,UAAA,CAAY,CAAA;AACrC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAc,gBAAgB,EAAC;AAAA,MAC/B,IAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ","file":"Icon.js","sourcesContent":["import { courseDifficulty } from \"./utils/colours\";\nimport { IconComponents, type IconName } from \"./icons\";\n\nexport type IconProps = {\n  name: IconName;\n  size?: number;\n  className?: string;\n  difficulties?: Array<keyof typeof courseDifficulty>;\n};\n\nexport const Icon = ({ className, name, size, difficulties }: IconProps) => {\n  const IconComponent = IconComponents[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon ${name} not found`);\n    return null;\n  }\n\n  return (\n    <IconComponent\n      difficulties={difficulties || []}\n      size={size}\n      className={className}\n      name={name}\n    />\n  );\n};\n\n// Re-export for convenience\nexport { IconComponents, iconMetadata, type IconName } from \"./icons\";\n"]}

package/dist/Icon.mjs

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { IconComponents } from './icons';
+export { IconComponents, iconMetadata } from './icons';
+
+const Icon = ({ className, name, size, difficulties }) => {
+  const IconComponent = IconComponents[name];
+  if (!IconComponent) {
+    console.warn(`Icon ${name} not found`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      difficulties: difficulties || [],
+      size,
+      className,
+      name
+    }
+  );
+};
+
+export { Icon };
+//# sourceMappingURL=Icon.mjs.map
+//# sourceMappingURL=Icon.mjs.map

package/dist/Icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Icon.tsx"],"names":[],"mappings":";;;;AAUO,MAAM,OAAO,CAAC,EAAE,WAAW,IAAA,EAAM,IAAA,EAAM,cAAa,KAAiB;AAC1E,EAAA,MAAM,aAAA,GAAgB,eAAe,IAAI,CAAA;AAEzC,EAAA,IAAI,CAAC,aAAA,EAAe;AAClB,IAAA,OAAA,CAAQ,IAAA,CAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,UAAA,CAAY,CAAA;AACrC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAc,gBAAgB,EAAC;AAAA,MAC/B,IAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ","file":"Icon.mjs","sourcesContent":["import { courseDifficulty } from \"./utils/colours\";\nimport { IconComponents, type IconName } from \"./icons\";\n\nexport type IconProps = {\n  name: IconName;\n  size?: number;\n  className?: string;\n  difficulties?: Array<keyof typeof courseDifficulty>;\n};\n\nexport const Icon = ({ className, name, size, difficulties }: IconProps) => {\n  const IconComponent = IconComponents[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon ${name} not found`);\n    return null;\n  }\n\n  return (\n    <IconComponent\n      difficulties={difficulties || []}\n      size={size}\n      className={className}\n      name={name}\n    />\n  );\n};\n\n// Re-export for convenience\nexport { IconComponents, iconMetadata, type IconName } from \"./icons\";\n"]}

package/dist/Input.d.mts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+import { c as IconName } from './index-DWGhkMUQ.mjs';
+import { BadgeProps } from './Badge.mjs';
+import { TooltipProps } from './Tooltip.mjs';
+import './utils/colours.mjs';
+import './CrossHair.mjs';
+
+type InputProps = {
+    title: string;
+    value: string;
+    className?: string;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onClear?: () => void;
+    badge?: BadgeProps;
+    message?: string;
+    hasMessage?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    isValid?: boolean;
+    type?: "generic" | "value";
+    balance?: {
+        amount: string;
+        unit: string;
+        icon?: IconName;
+    };
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    animation?: MotionProps;
+    tooltip?: TooltipProps;
+};
+declare const Input: ({ title, value, className, onChange, onFocus, onBlur, onClear, badge, type, message, hasMessage, disabled, placeholder, isValid, balance, action, animation, tooltip, }: InputProps) => react_jsx_runtime.JSX.Element;
+
+export { Input, type InputProps };

package/dist/Input.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+import { c as IconName } from './index-ekBNDG0H.js';
+import { BadgeProps } from './Badge.js';
+import { TooltipProps } from './Tooltip.js';
+import './utils/colours.js';
+import './CrossHair.js';
+
+type InputProps = {
+    title: string;
+    value: string;
+    className?: string;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onClear?: () => void;
+    badge?: BadgeProps;
+    message?: string;
+    hasMessage?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    isValid?: boolean;
+    type?: "generic" | "value";
+    balance?: {
+        amount: string;
+        unit: string;
+        icon?: IconName;
+    };
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    animation?: MotionProps;
+    tooltip?: TooltipProps;
+};
+declare const Input: ({ title, value, className, onChange, onFocus, onBlur, onClear, badge, type, message, hasMessage, disabled, placeholder, isValid, balance, action, animation, tooltip, }: InputProps) => react_jsx_runtime.JSX.Element;
+
+export { Input, type InputProps };

package/dist/Input.js

@@ -0,0 +1,186 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('motion/react');
+var Icon = require('./Icon');
+var classNames = require('classnames');
+var Badge = require('./Badge');
+var Button = require('./Button');
+var easings = require('./utils/easings');
+var CrossHair = require('./CrossHair');
+var Tooltip = require('./Tooltip');
+var react = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Input = ({
+  title,
+  value,
+  className,
+  onChange,
+  onFocus,
+  onBlur,
+  onClear,
+  badge,
+  type,
+  message,
+  hasMessage = true,
+  disabled,
+  placeholder,
+  isValid = true,
+  balance,
+  action,
+  animation,
+  tooltip
+}) => {
+  const [isTooltipOpen, setIsTooltipOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.motion.div,
+    {
+      ...animation,
+      className: classNames__default.default(
+        "flex flex-col gap-y-2.5 w-full relative group/input",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-1 flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-shade-primary leading-[100%]", children: title }),
+            tooltip && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "h-[14px] w-[14px] relative",
+                onMouseEnter: () => setIsTooltipOpen(true),
+                onMouseLeave: () => setIsTooltipOpen(false),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Tooltip.Tooltip,
+                    {
+                      isOpen: isTooltipOpen,
+                      position: tooltip.position,
+                      description: tooltip.description
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "Info", size: 14, className: "text-shade-tertiary" })
+                ]
+              }
+            )
+          ] }),
+          balance && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                name: balance.icon,
+                size: 12,
+                className: "text-shade-tertiary"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-shade-primary leading-[100%] text-sm font-mono", children: [
+              balance.amount,
+              " ",
+              balance.unit
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: classNames__default.default(
+              "min-h-[44px] relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border focus-within:border-current/20 focus-within:bg-current/2 focus-within:shadow-[inset_0px_0px_12px] focus-within:shadow-current/10 transition-colors duration-100 ease-crisp",
+              !isValid && "border-state-error/20 text-state-error",
+              !!badge && "pl-1.5 pr-[10px]",
+              !badge && "pl-3 pr-4"
+            ),
+            children: [
+              onFocus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-1.5 text-shade-mute group-hover/input:text-shade-primary group-focus-within/input:inset-0.5 group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide", children: /* @__PURE__ */ jsxRuntime.jsx(
+                CrossHair.CrosshairCorners,
+                {
+                  size: 6,
+                  variant: "corners",
+                  corners: ["bottom-right"],
+                  animationDelay: 0,
+                  animationDuration: 0.75
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: classNames__default.default(
+                    "flex w-full items-center gap-x-3 text-shade-primary"
+                  ),
+                  children: [
+                    badge && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { ...badge }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        className: classNames__default.default(
+                          "h-full w-full flex-shrink font-medium focus:outline-none bg-transparent placeholder:text-shade-mute",
+                          type === "value" && "text-2xl font-mono text-right",
+                          // Hide buttons
+                          "[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
+                        ),
+                        onFocus,
+                        onBlur,
+                        placeholder,
+                        value,
+                        onChange: (e) => onChange?.(e.target.value),
+                        disabled,
+                        type: type === "value" ? "number" : "text"
+                      }
+                    ),
+                    onClear && value && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: onClear,
+                        className: "absolute right-2 p-2 hover:bg-border-light/50 transition-colors duration-100 ease-crisp",
+                        type: "button",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          Icon.Icon,
+                          {
+                            name: "Close",
+                            size: 12,
+                            className: "text-shade-tertiary hover:text-shade-primary transition-colors duration-100 ease-crisp"
+                          }
+                        )
+                      }
+                    ),
+                    action && /* @__PURE__ */ jsxRuntime.jsx(
+                      Button.Button,
+                      {
+                        label: action.label,
+                        onClick: action.onClick,
+                        variant: "secondary",
+                        size: "xs",
+                        useHoverEffect: false
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        hasMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[14px] ml-auto px-1", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: message && /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.motion.span,
+          {
+            initial: { opacity: 0, filter: "blur(4px)" },
+            animate: { opacity: 1, filter: "blur(0px)" },
+            exit: { opacity: 0, filter: "blur(4px)" },
+            transition: { duration: 0.1, ease: easings.crisp },
+            className: classNames__default.default(
+              "text-sm text-shade-secondary font-medium leading-[100%]",
+              !isValid && "text-state-error"
+            ),
+            children: message
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+
+exports.Input = Input;
+//# sourceMappingURL=Input.js.map
+//# sourceMappingURL=Input.js.map

package/dist/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Input.tsx"],"names":["useState","jsxs","motion","classNames","jsx","Tooltip","Icon","CrosshairCorners","Badge","Button","AnimatePresence","crisp"],"mappings":"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","file":"Input.js","sourcesContent":["import { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconName, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport { crisp } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { useState } from \"react\";\n\nexport type InputProps = {\n  title: string;\n  value: string;\n  className?: string;\n  onChange?: (value: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onClear?: () => void;\n  badge?: BadgeProps;\n  message?: string;\n  hasMessage?: boolean;\n  disabled?: boolean;\n  placeholder?: string;\n  isValid?: boolean;\n  type?: \"generic\" | \"value\";\n  balance?: {\n    amount: string;\n    unit: string;\n    icon?: IconName;\n  };\n  action?: {\n    label: string;\n    onClick: () => void;\n  };\n  animation?: MotionProps;\n  tooltip?: TooltipProps;\n};\n\nexport const Input = ({\n  title,\n  value,\n  className,\n  onChange,\n  onFocus,\n  onBlur,\n  onClear,\n  badge,\n  type,\n  message,\n  hasMessage = true,\n  disabled,\n  placeholder,\n  isValid = true,\n  balance,\n  action,\n  animation,\n  tooltip,\n}: InputProps) => {\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n  return (\n    <motion.div\n      {...animation}\n      className={classNames(\n        \"flex flex-col gap-y-2.5 w-full relative group/input\",\n        className\n      )}\n    >\n      <div className=\"px-1 flex items-center justify-between w-full\">\n        <div className=\"flex items-center gap-x-1.5\">\n          <span className=\"font-medium text-shade-primary leading-[100%]\">\n            {title}\n          </span>\n          {tooltip && (\n            <div\n              className=\"h-[14px] w-[14px] relative\"\n              onMouseEnter={() => setIsTooltipOpen(true)}\n              onMouseLeave={() => setIsTooltipOpen(false)}\n            >\n              <Tooltip\n                isOpen={isTooltipOpen}\n                position={tooltip.position}\n                description={tooltip.description}\n              />\n              <Icon name=\"Info\" size={14} className=\"text-shade-tertiary\" />\n            </div>\n          )}\n        </div>\n        {balance && (\n          <div className=\"flex items-center gap-x-1.5\">\n            <Icon\n              name={balance.icon as IconName}\n              size={12}\n              className=\"text-shade-tertiary\"\n            />\n            <span className=\"font-medium text-shade-primary leading-[100%] text-sm font-mono\">\n              {balance.amount} {balance.unit}\n            </span>\n          </div>\n        )}\n      </div>\n      <div\n        className={classNames(\n          \"min-h-[44px] relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border focus-within:border-current/20 focus-within:bg-current/2 focus-within:shadow-[inset_0px_0px_12px] focus-within:shadow-current/10 transition-colors duration-100 ease-crisp\",\n          !isValid && \"border-state-error/20 text-state-error\",\n          !!badge && \"pl-1.5 pr-[10px]\",\n          !badge && \"pl-3 pr-4\"\n        )}\n      >\n        {onFocus && (\n          <div className=\"pointer-events-none absolute inset-1.5 text-shade-mute group-hover/input:text-shade-primary group-focus-within/input:inset-0.5 group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide\">\n            <CrosshairCorners\n              size={6}\n              variant=\"corners\"\n              corners={[\"bottom-right\"]}\n              animationDelay={0}\n              animationDuration={0.75}\n            />\n          </div>\n        )}\n        <div\n          className={classNames(\n            \"flex w-full items-center gap-x-3 text-shade-primary\"\n          )}\n        >\n          {badge && <Badge {...badge} />}\n          <input\n            className={classNames(\n              \"h-full w-full flex-shrink font-medium focus:outline-none bg-transparent placeholder:text-shade-mute\",\n              type === \"value\" && \"text-2xl font-mono text-right\",\n              // Hide buttons\n              \"[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            )}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            value={value}\n            onChange={(e) => onChange?.(e.target.value)}\n            disabled={disabled}\n            type={type === \"value\" ? \"number\" : \"text\"}\n          />\n          {onClear && value && (\n            <button\n              onClick={onClear}\n              className=\"absolute right-2 p-2 hover:bg-border-light/50 transition-colors duration-100 ease-crisp\"\n              type=\"button\"\n            >\n              <Icon\n                name=\"Close\"\n                size={12}\n                className=\"text-shade-tertiary hover:text-shade-primary transition-colors duration-100 ease-crisp\"\n              />\n            </button>\n          )}\n          {action && (\n            <Button\n              label={action.label}\n              onClick={action.onClick}\n              variant=\"secondary\"\n              size=\"xs\"\n              useHoverEffect={false}\n            />\n          )}\n        </div>\n      </div>\n      {hasMessage && (\n        <div className=\"h-[14px] ml-auto px-1\">\n          <AnimatePresence>\n            {message && (\n              <motion.span\n                initial={{ opacity: 0, filter: \"blur(4px)\" }}\n                animate={{ opacity: 1, filter: \"blur(0px)\" }}\n                exit={{ opacity: 0, filter: \"blur(4px)\" }}\n                transition={{ duration: 0.1, ease: crisp }}\n                className={classNames(\n                  \"text-sm text-shade-secondary font-medium leading-[100%]\",\n                  !isValid && \"text-state-error\"\n                )}\n              >\n                {message}\n              </motion.span>\n            )}\n          </AnimatePresence>\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"]}

package/dist/Input.mjs

@@ -0,0 +1,180 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion, AnimatePresence } from 'motion/react';
+import { Icon } from './Icon';
+import classNames from 'classnames';
+import { Badge } from './Badge';
+import { Button } from './Button';
+import { crisp } from './utils/easings';
+import { CrosshairCorners } from './CrossHair';
+import { Tooltip } from './Tooltip';
+import { useState } from 'react';
+
+const Input = ({
+  title,
+  value,
+  className,
+  onChange,
+  onFocus,
+  onBlur,
+  onClear,
+  badge,
+  type,
+  message,
+  hasMessage = true,
+  disabled,
+  placeholder,
+  isValid = true,
+  balance,
+  action,
+  animation,
+  tooltip
+}) => {
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ...animation,
+      className: classNames(
+        "flex flex-col gap-y-2.5 w-full relative group/input",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-1 flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-shade-primary leading-[100%]", children: title }),
+            tooltip && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "h-[14px] w-[14px] relative",
+                onMouseEnter: () => setIsTooltipOpen(true),
+                onMouseLeave: () => setIsTooltipOpen(false),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      isOpen: isTooltipOpen,
+                      position: tooltip.position,
+                      description: tooltip.description
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Icon, { name: "Info", size: 14, className: "text-shade-tertiary" })
+                ]
+              }
+            )
+          ] }),
+          balance && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1.5", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: balance.icon,
+                size: 12,
+                className: "text-shade-tertiary"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "font-medium text-shade-primary leading-[100%] text-sm font-mono", children: [
+              balance.amount,
+              " ",
+              balance.unit
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(
+              "min-h-[44px] relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border focus-within:border-current/20 focus-within:bg-current/2 focus-within:shadow-[inset_0px_0px_12px] focus-within:shadow-current/10 transition-colors duration-100 ease-crisp",
+              !isValid && "border-state-error/20 text-state-error",
+              !!badge && "pl-1.5 pr-[10px]",
+              !badge && "pl-3 pr-4"
+            ),
+            children: [
+              onFocus && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-1.5 text-shade-mute group-hover/input:text-shade-primary group-focus-within/input:inset-0.5 group-focus-within/input:text-shade-primary transition-all duration-50 ease-glide", children: /* @__PURE__ */ jsx(
+                CrosshairCorners,
+                {
+                  size: 6,
+                  variant: "corners",
+                  corners: ["bottom-right"],
+                  animationDelay: 0,
+                  animationDuration: 0.75
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classNames(
+                    "flex w-full items-center gap-x-3 text-shade-primary"
+                  ),
+                  children: [
+                    badge && /* @__PURE__ */ jsx(Badge, { ...badge }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        className: classNames(
+                          "h-full w-full flex-shrink font-medium focus:outline-none bg-transparent placeholder:text-shade-mute",
+                          type === "value" && "text-2xl font-mono text-right",
+                          // Hide buttons
+                          "[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
+                        ),
+                        onFocus,
+                        onBlur,
+                        placeholder,
+                        value,
+                        onChange: (e) => onChange?.(e.target.value),
+                        disabled,
+                        type: type === "value" ? "number" : "text"
+                      }
+                    ),
+                    onClear && value && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClear,
+                        className: "absolute right-2 p-2 hover:bg-border-light/50 transition-colors duration-100 ease-crisp",
+                        type: "button",
+                        children: /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            name: "Close",
+                            size: 12,
+                            className: "text-shade-tertiary hover:text-shade-primary transition-colors duration-100 ease-crisp"
+                          }
+                        )
+                      }
+                    ),
+                    action && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        label: action.label,
+                        onClick: action.onClick,
+                        variant: "secondary",
+                        size: "xs",
+                        useHoverEffect: false
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        hasMessage && /* @__PURE__ */ jsx("div", { className: "h-[14px] ml-auto px-1", children: /* @__PURE__ */ jsx(AnimatePresence, { children: message && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: { opacity: 0, filter: "blur(4px)" },
+            animate: { opacity: 1, filter: "blur(0px)" },
+            exit: { opacity: 0, filter: "blur(4px)" },
+            transition: { duration: 0.1, ease: crisp },
+            className: classNames(
+              "text-sm text-shade-secondary font-medium leading-[100%]",
+              !isValid && "text-state-error"
+            ),
+            children: message
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+
+export { Input };
+//# sourceMappingURL=Input.mjs.map
+//# sourceMappingURL=Input.mjs.map