@blueshift-gg/ui-components 0.1.75 → 0.1.76

package/dist/HeadingReveal.js

@@ -0,0 +1,71 @@
+"use client";
+
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { animate, anticipate, stagger } from "motion";
+import { splitText } from "motion-plus";
+
+//#region src/HeadingReveal.tsx
+const HeadingReveal = ({ text, headingLevel, className, color = "#EFF1F6", cursorColor = "#00FFFF", baseDelay = 0, splitBy = "words", speed = .25, containerClassName }) => {
+	const containerRef = useRef(null);
+	useEffect(() => {
+		document.fonts.ready.then(() => {
+			if (!containerRef.current) return;
+			containerRef.current.style.visibility = "visible";
+			const { words, chars } = splitText(containerRef.current.querySelector(headingLevel));
+			animate(splitBy === "words" ? words : chars, {
+				backgroundColor: [
+					"rgba(255,255,255,0)",
+					"rgba(255,255,255,0)",
+					cursorColor,
+					cursorColor,
+					cursorColor,
+					"rgba(255,255,255,0)"
+				],
+				color: [
+					"rgba(255,255,255,0)",
+					"rgba(255,255,255,0)",
+					cursorColor,
+					cursorColor,
+					cursorColor,
+					color
+				]
+			}, {
+				ease: anticipate,
+				duration: speed,
+				delay: stagger(speed / 2, { startDelay: baseDelay })
+			});
+		});
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(containerClassName),
+		ref: containerRef,
+		children: [
+			headingLevel === "h1" && /* @__PURE__ */ jsx("h1", {
+				className: classNames("h1", className),
+				children: text
+			}),
+			headingLevel === "h2" && /* @__PURE__ */ jsx("h2", {
+				className: classNames("h2", className),
+				children: text
+			}),
+			headingLevel === "h3" && /* @__PURE__ */ jsx("h3", {
+				className: classNames("h3", className),
+				children: text
+			}),
+			headingLevel === "p" && /* @__PURE__ */ jsx("p", {
+				className: classNames("p", className),
+				children: text
+			}),
+			headingLevel === "span" && /* @__PURE__ */ jsx("span", {
+				className: classNames("span", className),
+				children: text
+			})
+		]
+	});
+};
+
+//#endregion
+export { HeadingReveal };
+//# sourceMappingURL=HeadingReveal.js.map

package/dist/HeadingReveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingReveal.js","names":[],"sources":["../src/HeadingReveal.tsx"],"sourcesContent":["\"use client\";\n\nimport { animate, stagger, anticipate } from \"motion\";\nimport { splitText } from \"motion-plus\";\nimport { useEffect, useRef } from \"react\";\nimport classNames from \"classnames\";\n\nexport type HeadingRevealProps = {\n  text: string;\n  headingLevel: \"h1\" | \"h2\" | \"h3\" | \"p\" | \"span\";\n  className?: string;\n  containerClassName?: string;\n  color?: string;\n  cursorColor?: string;\n  baseDelay?: number;\n  splitBy?: \"words\" | \"chars\";\n  speed?: number;\n};\nexport const HeadingReveal = ({\n  text,\n  headingLevel,\n  className,\n  color = \"#EFF1F6\",\n  cursorColor = \"#00FFFF\",\n  baseDelay = 0,\n  splitBy = \"words\",\n  speed = 0.25,\n  containerClassName,\n}: HeadingRevealProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    document.fonts.ready.then(() => {\n      if (!containerRef.current) return;\n\n      // Hide the container until the fonts are loaded\n      containerRef.current.style.visibility = \"visible\";\n\n      const { words, chars } = splitText(\n        containerRef.current.querySelector(headingLevel)!,\n      );\n\n      // Animate the words in the h1\n      animate(\n        splitBy === \"words\" ? words : chars,\n        {\n          backgroundColor: [\n            \"rgba(255,255,255,0)\",\n            \"rgba(255,255,255,0)\",\n            cursorColor,\n            cursorColor,\n            cursorColor,\n            \"rgba(255,255,255,0)\",\n          ],\n          color: [\n            \"rgba(255,255,255,0)\",\n            \"rgba(255,255,255,0)\",\n            cursorColor,\n            cursorColor,\n            cursorColor,\n            color,\n          ],\n        },\n        {\n          ease: anticipate,\n          duration: speed,\n          delay: stagger(speed / 2, { startDelay: baseDelay }),\n        },\n      );\n    });\n  }, []);\n\n  return (\n    <div className={classNames(containerClassName)} ref={containerRef}>\n      {headingLevel === \"h1\" && (\n        <h1 className={classNames(\"h1\", className)}>{text}</h1>\n      )}\n      {headingLevel === \"h2\" && (\n        <h2 className={classNames(\"h2\", className)}>{text}</h2>\n      )}\n      {headingLevel === \"h3\" && (\n        <h3 className={classNames(\"h3\", className)}>{text}</h3>\n      )}\n      {headingLevel === \"p\" && (\n        <p className={classNames(\"p\", className)}>{text}</p>\n      )}\n      {headingLevel === \"span\" && (\n        <span className={classNames(\"span\", className)}>{text}</span>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAkBA,MAAa,iBAAiB,EAC5B,MACA,cACA,WACA,QAAQ,WACR,cAAc,WACd,YAAY,GACZ,UAAU,SACV,QAAQ,KACR,yBACwB;CACxB,MAAM,eAAe,OAAuB,KAAK;AAEjD,iBAAgB;AACd,WAAS,MAAM,MAAM,WAAW;AAC9B,OAAI,CAAC,aAAa,QAAS;AAG3B,gBAAa,QAAQ,MAAM,aAAa;GAExC,MAAM,EAAE,OAAO,UAAU,UACvB,aAAa,QAAQ,cAAc,aAAa,CACjD;AAGD,WACE,YAAY,UAAU,QAAQ,OAC9B;IACE,iBAAiB;KACf;KACA;KACA;KACA;KACA;KACA;KACD;IACD,OAAO;KACL;KACA;KACA;KACA;KACA;KACA;KACD;IACF,EACD;IACE,MAAM;IACN,UAAU;IACV,OAAO,QAAQ,QAAQ,GAAG,EAAE,YAAY,WAAW,CAAC;IACrD,CACF;IACD;IACD,EAAE,CAAC;AAEN,QACE,qBAAC;EAAI,WAAW,WAAW,mBAAmB;EAAE,KAAK;;GAClD,iBAAiB,QAChB,oBAAC;IAAG,WAAW,WAAW,MAAM,UAAU;cAAG;KAAU;GAExD,iBAAiB,QAChB,oBAAC;IAAG,WAAW,WAAW,MAAM,UAAU;cAAG;KAAU;GAExD,iBAAiB,QAChB,oBAAC;IAAG,WAAW,WAAW,MAAM,UAAU;cAAG;KAAU;GAExD,iBAAiB,OAChB,oBAAC;IAAE,WAAW,WAAW,KAAK,UAAU;cAAG;KAAS;GAErD,iBAAiB,UAChB,oBAAC;IAAK,WAAW,WAAW,QAAQ,UAAU;cAAG;KAAY;;GAE3D"}

package/dist/Icon.d.ts

@@ -0,0 +1,17 @@
+import { IconComponents, IconName, iconMetadata } from "./icons/index.js";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
+
+//#region src/Icon.d.ts
+type IconProps = {
+  name: IconName;
+  size?: number;
+  className?: string;
+};
+declare const Icon: ({
+  className,
+  name,
+  size
+}: IconProps) => react_jsx_runtime26.JSX.Element | null;
+//#endregion
+export { Icon, IconComponents, type IconName, IconProps, iconMetadata };
+//# sourceMappingURL=Icon.d.ts.map

package/dist/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","names":[],"sources":["../src/Icon.tsx"],"sourcesContent":[],"mappings":";;;;KAIY,SAAA;QACJ;;EADI,SAAA,CAAA,EAAS,MAAA;AAMrB,CAAA;AAAqB,cAAR,IAAQ,EAAA,CAAA;EAAA,SAAA;EAAA,IAAA;EAAA;AAAA,CAAA,EAA2B,SAA3B,EAAA,GAAoC,mBAAA,CAAA,GAAA,CAAA,OAAA,GAApC,IAAA"}

package/dist/Icon.js

@@ -0,0 +1,22 @@
+"use client";
+
+import { IconComponents, iconMetadata } from "./icons/index.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Icon.tsx
+const Icon = ({ className, name, size }) => {
+	const IconComponent = IconComponents[name];
+	if (!IconComponent) {
+		console.warn(`Icon ${name} not found`);
+		return null;
+	}
+	return /* @__PURE__ */ jsx(IconComponent, {
+		size,
+		className,
+		name
+	});
+};
+
+//#endregion
+export { Icon, IconComponents, iconMetadata };
+//# sourceMappingURL=Icon.js.map

package/dist/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":[],"sources":["../src/Icon.tsx"],"sourcesContent":["\"use client\";\n\nimport { IconComponents, type IconName } from \"./icons\";\n\nexport type IconProps = {\n  name: IconName;\n  size?: number;\n  className?: string;\n};\n\nexport const Icon = ({ className, name, size }: 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      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"],"mappings":";;;;;;AAUA,MAAa,QAAQ,EAAE,WAAW,MAAM,WAAsB;CAC5D,MAAM,gBAAgB,eAAe;AAErC,KAAI,CAAC,eAAe;AAClB,UAAQ,KAAK,QAAQ,KAAK,YAAY;AACtC,SAAO;;AAGT,QACE,oBAAC;EACO;EACK;EACL;GACN"}

package/dist/Input.d.ts

@@ -0,0 +1,64 @@
+import { BadgeProps } from "./Badge.js";
+import { TooltipProps } from "./Tooltip.js";
+import { IconName } from "./icons/index.js";
+import "./Icon.js";
+import { MotionProps } from "motion/react";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
+
+//#region src/Input.d.ts
+type InputProps = {
+  title?: string;
+  value: string;
+  className?: string;
+  innerClassname?: 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;
+  children?: React.ReactNode;
+  inputClassName?: string;
+};
+declare const Input: ({
+  title,
+  value,
+  className,
+  onChange,
+  onFocus,
+  onBlur,
+  onClear,
+  badge,
+  type,
+  message,
+  hasMessage,
+  disabled,
+  placeholder,
+  isValid,
+  balance,
+  action,
+  animation,
+  tooltip,
+  children,
+  innerClassname,
+  inputClassName
+}: InputProps) => react_jsx_runtime36.JSX.Element;
+//#endregion
+export { Input, InputProps };
+//# sourceMappingURL=Input.d.ts.map

package/dist/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","names":[],"sources":["../src/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;KAWY,UAAA;;;;EAAA,cAAU,CAAA,EAAA,MAAA;EASZ,QAAA,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAUC,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAMG,MAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EACF,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EACC,KAAM,CAAA,EAlBT,UAkBS;EAAS,OAAA,CAAA,EAAA,MAAA;EAIf,UA6JZ,CAAA,EAAA,OAAA;EA7JqB,QAAA,CAAA,EAAA,OAAA;EAAA,WAAA,CAAA,EAAA,MAAA;EAAA,OAAA,CAAA,EAAA,OAAA;EAAA,IAAA,CAAA,EAAA,SAAA,GAAA,OAAA;EAAA,OAAA,CAAA,EAAA;IAAA,MAAA,EAAA,MAAA;IAAA,IAAA,EAAA,MAAA;IAAA,IAAA,CAAA,EAZX,QAYW;EAAA,CAAA;EAAA,MAAA,CAAA,EAAA;IAAA,KAAA,EAAA,MAAA;IAAA,OAAA,EAAA,GAAA,GAAA,IAAA;EAAA,CAAA;EAAA,SAAA,CAAA,EANR,WAMQ;EAAA,OAAA,CAAA,EALV,YAKU;EAAA,QAAA,CAAA,EAJT,KAAA,CAAM,SAIG;EAAA,cAAA,CAAA,EAAA,MAAA;CAAA;AAAA,cAAT,KAAS,EAAA,CAAA;EAAA,KAAA;EAAA,KAAA;EAAA,SAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,OAAA;EAAA,KAAA;EAAA,IAAA;EAAA,OAAA;EAAA,UAAA;EAAA,QAAA;EAAA,WAAA;EAAA,OAAA;EAAA,OAAA;EAAA,MAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,cAAA;EAAA;AAAA,CAAA,EAsBnB,UAtBmB,EAAA,GAsBT,mBAAA,CAAA,GAAA,CAAA,OAtBS"}

package/dist/Input.js

@@ -0,0 +1,133 @@
+"use client";
+
+import { Icon } from "./Icon.js";
+import { CrosshairCorners } from "./CrossHair.js";
+import { crisp } from "./utils/easings.js";
+import { Badge } from "./Badge.js";
+import { Tooltip } from "./Tooltip.js";
+import { Button } from "./Button.js";
+import { AnimatePresence, motion } from "motion/react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+
+//#region src/Input.tsx
+const Input = ({ title, value, className, onChange, onFocus, onBlur, onClear, badge, type, message, hasMessage = true, disabled, placeholder, isValid = true, balance, action, animation, tooltip, children, innerClassname, inputClassName }) => {
+	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: [
+			title && /* @__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] pr-4 relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border enabled:focus-within:border-current/20 enabled:focus-within:bg-current/2 enabled:focus-within:shadow-[inset_0px_0px_12px] enabled: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 && "!pr-1.5", innerClassname),
+				children: [onFocus && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute inset-1.5 text-shade-mute enabled:group-hover/input:text-shade-primary enabled:group-focus-within/input:inset-0.5 enabled: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: .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", "[-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", inputClassName),
+							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"
+							})
+						}),
+						children && children,
+						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: .1,
+						ease: crisp
+					},
+					className: classNames("text-sm text-shade-secondary font-medium leading-[100%]", !isValid && "text-state-error"),
+					children: message
+				}) })
+			})
+		]
+	});
+};
+
+//#endregion
+export { Input };
+//# sourceMappingURL=Input.js.map

package/dist/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../src/Input.tsx"],"sourcesContent":["\"use client\";\nimport { 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  innerClassname?: 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  children?: React.ReactNode;\n  inputClassName?: string;\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  children,\n  innerClassname,\n  inputClassName,\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      {title && (\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      )}\n      <div\n        className={classNames(\n          \"min-h-[44px] pr-4 relative h-full py-1.5 flex items-center justify-between group/input bg-background border text-shade-tertiary border-border enabled:focus-within:border-current/20 enabled:focus-within:bg-current/2 enabled:focus-within:shadow-[inset_0px_0px_12px] enabled: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          !!children && \"!pr-1.5\",\n          innerClassname\n        )}\n      >\n        {onFocus && (\n          <div className=\"pointer-events-none absolute inset-1.5 text-shade-mute enabled:group-hover/input:text-shade-primary enabled:group-focus-within/input:inset-0.5 enabled: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              inputClassName\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          {children && children}\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"],"mappings":";;;;;;;;;;;;;;AA0CA,MAAa,SAAS,EACpB,OACA,OACA,WACA,UACA,SACA,QACA,SACA,OACA,MACA,SACA,aAAa,MACb,UACA,aACA,UAAU,MACV,SACA,QACA,WACA,SACA,UACA,gBACA,qBACgB;CAChB,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;AACzD,QACE,qBAAC,OAAO;EACN,GAAI;EACJ,WAAW,WACT,uDACA,UACD;;GAEA,SACC,qBAAC;IAAI,WAAU;eACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAK,WAAU;gBACb;OACI,EACN,WACC,qBAAC;MACC,WAAU;MACV,oBAAoB,iBAAiB,KAAK;MAC1C,oBAAoB,iBAAiB,MAAM;iBAE3C,oBAAC;OACC,QAAQ;OACR,UAAU,QAAQ;OAClB,aAAa,QAAQ;QACrB,EACF,oBAAC;OAAK,MAAK;OAAO,MAAM;OAAI,WAAU;QAAwB;OAC1D;MAEJ,EACL,WACC,qBAAC;KAAI,WAAU;gBACb,oBAAC;MACC,MAAM,QAAQ;MACd,MAAM;MACN,WAAU;OACV,EACF,qBAAC;MAAK,WAAU;;OACb,QAAQ;OAAO;OAAE,QAAQ;;OACrB;MACH;KAEJ;GAER,qBAAC;IACC,WAAW,WACT,4VACA,CAAC,WAAW,0CACZ,CAAC,CAAC,SAAS,oBACX,CAAC,SAAS,aACV,CAAC,CAAC,YAAY,WACd,eACD;eAEA,WACC,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,MAAM;MACN,SAAQ;MACR,SAAS,CAAC,eAAe;MACzB,gBAAgB;MAChB,mBAAmB;OACnB;MACE,EAER,qBAAC;KACC,WAAW,WACT,sDACD;;MAEA,SAAS,oBAAC,SAAM,GAAI,QAAS;MAC9B,oBAAC;OACC,WAAW,WACT,uGACA,SAAS,WAAW,iCAEpB,oMACA,eACD;OACQ;OACD;OACK;OACN;OACP,WAAW,MAAM,WAAW,EAAE,OAAO,MAAM;OACjC;OACV,MAAM,SAAS,UAAU,WAAW;QACpC;MACD,WAAW,SACV,oBAAC;OACC,SAAS;OACT,WAAU;OACV,MAAK;iBAEL,oBAAC;QACC,MAAK;QACL,MAAM;QACN,WAAU;SACV;QACK;MAEV,YAAY;MACZ,UACC,oBAAC;OACC,OAAO,OAAO;OACd,SAAS,OAAO;OAChB,SAAQ;OACR,MAAK;OACL,gBAAgB;QAChB;;MAEA;KACF;GACL,cACC,oBAAC;IAAI,WAAU;cACb,oBAAC,6BACE,WACC,oBAAC,OAAO;KACN,SAAS;MAAE,SAAS;MAAG,QAAQ;MAAa;KAC5C,SAAS;MAAE,SAAS;MAAG,QAAQ;MAAa;KAC5C,MAAM;MAAE,SAAS;MAAG,QAAQ;MAAa;KACzC,YAAY;MAAE,UAAU;MAAK,MAAM;MAAO;KAC1C,WAAW,WACT,2DACA,CAAC,WAAW,mBACb;eAEA;MACW,GAEA;KACd;;GAEG"}

package/dist/Logo.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime99 from "react/jsx-runtime";
+
+//#region src/Logo.d.ts
+type LogoProps = {
+  width?: number;
+  height?: number;
+  hideText?: boolean;
+  isScrolled?: boolean;
+};
+declare const Logo: ({
+  width,
+  height,
+  hideText,
+  isScrolled
+}: LogoProps) => react_jsx_runtime99.JSX.Element;
+//#endregion
+export { Logo, LogoProps };
+//# sourceMappingURL=Logo.d.ts.map

package/dist/Logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","names":[],"sources":["../src/Logo.tsx"],"sourcesContent":[],"mappings":";;;KAMY,SAAA;;;EAAA,QAAA,CAAA,EAAA,OAAS;EAOR,UAgHZ,CAAA,EAAA,OAAA;CAhHoB;AAAA,cAAR,IAAQ,EAAA,CAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAKlB,SALkB,EAAA,GAKT,mBAAA,CAAA,GAAA,CAAA,OALS"}

package/dist/Logo.js

@@ -0,0 +1,125 @@
+"use client";
+
+import { glide, nova } from "./utils/easings.js";
+import { AnimatePresence, motion } from "motion/react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Logo.tsx
+const Logo = ({ width = 144, height = 20, hideText = false, isScrolled = false }) => {
+	function getAnimation(delay) {
+		return {
+			initial: { opacity: 0 },
+			animate: { opacity: [
+				0,
+				.25,
+				.5,
+				1,
+				.75,
+				1
+			] },
+			transition: {
+				duration: .3,
+				delay: delay * .4,
+				ease: nova
+			}
+		};
+	}
+	return /* @__PURE__ */ jsxs(motion.svg, {
+		width,
+		height,
+		viewBox: "0 0 144 20",
+		preserveAspectRatio: "xMinYMid meet",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		className: classNames("relative z-10", isScrolled && "h-full", "overflow-visible"),
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "popLayout",
+				children: hideText && /* @__PURE__ */ jsx("clipPath", {
+					id: "text-clip",
+					children: /* @__PURE__ */ jsx(motion.rect, {
+						x: "28",
+						y: "0",
+						height: "20",
+						initial: { width: 116 },
+						animate: { width: hideText ? 0 : 116 },
+						transition: {
+							duration: .15,
+							ease: glide
+						}
+					})
+				})
+			}) }),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M4 4.00013H0V0.000131835H4V4.00013Z",
+				fill: "#00FFFF",
+				id: "1",
+				...getAnimation(0)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M15.9997 4H11.9997V0H15.9997V4Z",
+				fill: "#00FFFF",
+				id: "2",
+				...getAnimation(.6)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M7.99987 8.00013H4V4.00013H7.99987V8.00013Z",
+				fill: "#00FFFF",
+				id: "3",
+				...getAnimation(.9)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M19.9996 7.99987H15.9997V4H19.9997L19.9996 7.99987Z",
+				fill: "#00FFFF",
+				id: "4",
+				...getAnimation(.3)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M11.9999 12H7.99987V8.00013H11.9999V12Z",
+				fill: "#00FFFF",
+				id: "5",
+				...getAnimation(.2)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M23.9996 11.9999H19.9997L19.9996 7.99987H23.9996V11.9999Z",
+				fill: "#00FFFF",
+				id: "6",
+				...getAnimation(.1)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M7.99987 16H4V12H7.99987V16Z",
+				fill: "#00FFFF",
+				id: "7",
+				...getAnimation(.5)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M19.9997 15.9999H15.9997V11.9999H19.9997V15.9999Z",
+				fill: "#00FFFF",
+				id: "8",
+				...getAnimation(.7)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M4 20H0V16H4V20Z",
+				fill: "#00FFFF",
+				id: "9",
+				...getAnimation(.4)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M15.9997 19.9999H11.9997V15.9999H15.9997V19.9999Z",
+				fill: "#00FFFF",
+				id: "10",
+				...getAnimation(.6)
+			}),
+			/* @__PURE__ */ jsx(motion.path, {
+				d: "M42.3 6.06C41.3333 5.44667 40.1666 5.14667 38.8 5.14667C37.72 5.14667 36.7933 5.34667 36.0133 5.75333C35.2333 6.16 34.6333 6.74 34.2066 7.50667H34.1133V0H30.5666V16.1667H28.8066V20H32.4466V17.4267H33.4466C33.94 18.2533 34.6066 18.8867 35.4466 19.3333C36.2866 19.78 37.3066 20 38.4933 20C39.9666 20 41.2133 19.6933 42.22 19.0867C43.2266 18.4733 43.9933 17.6133 44.52 16.4933C45.0466 15.3733 45.3066 14.0667 45.3066 12.5733C45.3066 11.08 45.0466 9.75333 44.5333 8.64667C44.02 7.53333 43.2733 6.67333 42.3066 6.06667L42.3 6.06ZM40.7666 15.7733C40.1066 16.54 39.1333 16.9267 37.8466 16.9267C36.72 16.9267 35.8133 16.6067 35.1333 15.96C34.4533 15.32 34.1066 14.44 34.1066 13.3267V11.8C34.1066 10.6867 34.4466 9.81333 35.1333 9.16667C35.8133 8.52667 36.72 8.2 37.8466 8.2C39.1333 8.2 40.1066 8.58667 40.7666 9.35333C41.4266 10.1267 41.7533 11.1933 41.7533 12.5533C41.7533 13.9133 41.4266 14.9867 40.7666 15.7533V15.7733ZM47.5 0H51.0466V20H47.5V0ZM67.5933 5.45333H64.0466V13.4067C64.0466 14.5 63.7266 15.3533 63.0933 15.9533C62.46 16.5533 61.5466 16.86 60.3533 16.86C59.2266 16.86 58.38 16.58 57.8066 16.0133C57.2333 15.4467 56.9466 14.6133 56.9466 13.5V5.45333H53.4V14.2133C53.4 15.9933 53.9266 17.4 54.98 18.44C56.0333 19.48 57.54 20 59.4933 20C60.76 20 61.8133 19.78 62.6466 19.3467C63.48 18.9133 64.1733 18.28 64.7333 17.4533H65.7333V20H69.3733V16.1933H67.5866V5.45333H67.5933ZM80.94 5.98667C79.8933 5.42667 78.64 5.14 77.18 5.14C75.72 5.14 74.3866 5.44 73.2733 6.03333C72.16 6.62667 71.3066 7.48 70.7 8.58C70.0933 9.68 69.7933 11 69.7933 12.52C69.7933 14.04 70.1 15.3667 70.7066 16.4867C71.32 17.6067 72.1866 18.4733 73.3133 19.08C74.44 19.6933 75.7733 19.9933 77.3133 19.9933C79.14 19.9933 80.6466 19.5667 81.8466 18.72C83.0466 17.8733 83.8133 16.6933 84.1466 15.1867H80.5733C80.3533 15.84 79.9666 16.3267 79.42 16.6533C78.8733 16.98 78.16 17.14 77.2866 17.14C76.1133 17.14 75.1733 16.82 74.4666 16.1733C73.76 15.5333 73.34 14.6067 73.2133 13.4H84.2133V12.16C84.2133 10.7133 83.9266 9.46667 83.3533 8.41333C82.78 7.36 81.9733 6.54667 80.9266 5.98667H80.94ZM73.3 11C73.52 10.0333 73.9666 9.28667 74.6333 8.76C75.3 8.23333 76.1466 7.97333 77.18 7.97333C78.2133 7.97333 79.06 8.23333 79.68 8.74667C80.3 9.26 80.68 10.0133 80.82 11H73.2933H73.3ZM94.96 11.2867L91.7466 10.6667C91.16 10.5533 90.7333 10.3867 90.46 10.1667C90.1933 9.94667 90.0533 9.65333 90.0533 9.28667C90.0533 8.79333 90.2666 8.42 90.6933 8.16667C91.12 7.91333 91.74 7.78667 92.5533 7.78667C93.46 7.78667 94.1533 7.94667 94.64 8.27333C95.1266 8.6 95.4533 9.12 95.6266 9.83333H99.0533C98.9266 8.34 98.3133 7.18667 97.2066 6.36667C96.1 5.54667 94.6133 5.14 92.74 5.14C90.8666 5.14 89.4 5.54 88.3333 6.34C87.2666 7.14 86.74 8.22 86.74 9.56667C86.74 11.66 88.14 12.98 90.9333 13.52L94.0733 14.1133C94.7266 14.24 95.1866 14.42 95.4666 14.66C95.7466 14.9 95.88 15.2333 95.88 15.66C95.88 16.7267 94.9666 17.2533 93.14 17.2533C92.06 17.2533 91.2333 17.0733 90.6666 16.72C90.0933 16.36 89.7533 15.8133 89.64 15.0667H86.1866C86.28 16.62 86.9266 17.8333 88.1133 18.7C89.3066 19.5667 90.9333 20 92.9933 20C95.0533 20 96.5266 19.5933 97.5866 18.7867C98.6533 17.98 99.18 16.8533 99.18 15.4067C99.18 14.28 98.84 13.38 98.1533 12.7133C97.4733 12.0467 96.4 11.5733 94.94 11.2867H94.96ZM109.533 5.45333C108.453 5.45333 107.52 5.65333 106.727 6.06C105.933 6.46667 105.307 7.05333 104.847 7.83333H104.753V0H101.207V20H104.753V12.0467C104.753 10.92 105.053 10.06 105.66 9.47333C106.26 8.88667 107.147 8.59333 108.3 8.59333C109.453 8.59333 110.34 8.88667 110.94 9.47333C111.54 10.06 111.847 10.92 111.847 12.0467V20H115.393V11.38C115.393 9.58667 114.867 8.15333 113.813 7.07333C112.76 5.99333 111.333 5.45333 109.54 5.45333H109.533ZM119.2 0.14C118.647 0.14 118.173 0.333333 117.787 0.726667C117.4 1.11333 117.2 1.58667 117.2 2.14667C117.2 2.70667 117.393 3.17333 117.787 3.56667C118.173 3.95333 118.647 4.14667 119.2 4.14667C119.753 4.14667 120.227 3.95333 120.613 3.56667C121 3.18 121.2 2.70667 121.2 2.14667C121.2 1.58667 121.007 1.12 120.613 0.726667C120.227 0.34 119.753 0.14 119.2 0.14ZM117.44 5.71333H120.987V20H117.44V5.71333ZM126.287 0.713333C125.753 1.18667 125.487 1.92667 125.487 2.92667V5.71333H122.793V8.47333H125.46V20H129.007V8.47333H132.267V5.71333H128.96V2.76H132.553V0H128.507C127.553 0 126.813 0.24 126.28 0.713333H126.287ZM140.267 17.22V8.49333H143.667V5.73333H140.22V1.44667H136.747V5.72667H134.2V8.48667H136.72V17.12C136.72 18.0867 136.98 18.8067 137.493 19.2867C138.007 19.76 138.733 20 139.667 20H143.993V17.22H140.26H140.267Z",
+				fill: "#EFF1F6",
+				clipPath: "url(#text-clip)"
+			})
+		]
+	}, isScrolled ? "scrolled" : "no-scroll");
+};
+
+//#endregion
+export { Logo };
+//# sourceMappingURL=Logo.js.map

package/dist/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","names":[],"sources":["../src/Logo.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { crisp, glide, nova } from \"./utils/easings\";\n\nexport type LogoProps = {\n  width?: number;\n  height?: number;\n  hideText?: boolean;\n  isScrolled?: boolean;\n};\n\nexport const Logo = ({\n  width = 144,\n  height = 20,\n  hideText = false,\n  isScrolled = false,\n}: LogoProps) => {\n  function getAnimation(delay: number) {\n    return {\n      initial: { opacity: 0 },\n      animate: { opacity: [0, 0.25, 0.5, 1, 0.75, 1] },\n      transition: { duration: 0.3, delay: delay * 0.4, ease: nova },\n    };\n  }\n\n  return (\n    <motion.svg\n      width={width}\n      height={height}\n      viewBox=\"0 0 144 20\"\n      preserveAspectRatio=\"xMinYMid meet\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(\n        \"relative z-10\",\n        isScrolled && \"h-full\",\n        \"overflow-visible\",\n      )}\n      key={isScrolled ? \"scrolled\" : \"no-scroll\"}\n    >\n      <defs>\n        <AnimatePresence mode=\"popLayout\">\n          {hideText && (\n            <clipPath id=\"text-clip\">\n              <motion.rect\n                x=\"28\"\n                y=\"0\"\n                height=\"20\"\n                initial={{ width: 116 }}\n                animate={{ width: hideText ? 0 : 116 }}\n                transition={{ duration: 0.15, ease: glide }}\n              />\n            </clipPath>\n          )}\n        </AnimatePresence>\n      </defs>\n      <motion.path\n        d=\"M4 4.00013H0V0.000131835H4V4.00013Z\"\n        fill=\"#00FFFF\"\n        id=\"1\"\n        {...getAnimation(0)}\n      />\n      <motion.path\n        d=\"M15.9997 4H11.9997V0H15.9997V4Z\"\n        fill=\"#00FFFF\"\n        id=\"2\"\n        {...getAnimation(0.6)}\n      />\n      <motion.path\n        d=\"M7.99987 8.00013H4V4.00013H7.99987V8.00013Z\"\n        fill=\"#00FFFF\"\n        id=\"3\"\n        {...getAnimation(0.9)}\n      />\n      <motion.path\n        d=\"M19.9996 7.99987H15.9997V4H19.9997L19.9996 7.99987Z\"\n        fill=\"#00FFFF\"\n        id=\"4\"\n        {...getAnimation(0.3)}\n      />\n      <motion.path\n        d=\"M11.9999 12H7.99987V8.00013H11.9999V12Z\"\n        fill=\"#00FFFF\"\n        id=\"5\"\n        {...getAnimation(0.2)}\n      />\n      <motion.path\n        d=\"M23.9996 11.9999H19.9997L19.9996 7.99987H23.9996V11.9999Z\"\n        fill=\"#00FFFF\"\n        id=\"6\"\n        {...getAnimation(0.1)}\n      />\n      <motion.path\n        d=\"M7.99987 16H4V12H7.99987V16Z\"\n        fill=\"#00FFFF\"\n        id=\"7\"\n        {...getAnimation(0.5)}\n      />\n      <motion.path\n        d=\"M19.9997 15.9999H15.9997V11.9999H19.9997V15.9999Z\"\n        fill=\"#00FFFF\"\n        id=\"8\"\n        {...getAnimation(0.7)}\n      />\n      <motion.path\n        d=\"M4 20H0V16H4V20Z\"\n        fill=\"#00FFFF\"\n        id=\"9\"\n        {...getAnimation(0.4)}\n      />\n      <motion.path\n        d=\"M15.9997 19.9999H11.9997V15.9999H15.9997V19.9999Z\"\n        fill=\"#00FFFF\"\n        id=\"10\"\n        {...getAnimation(0.6)}\n      />\n      <motion.path\n        d=\"M42.3 6.06C41.3333 5.44667 40.1666 5.14667 38.8 5.14667C37.72 5.14667 36.7933 5.34667 36.0133 5.75333C35.2333 6.16 34.6333 6.74 34.2066 7.50667H34.1133V0H30.5666V16.1667H28.8066V20H32.4466V17.4267H33.4466C33.94 18.2533 34.6066 18.8867 35.4466 19.3333C36.2866 19.78 37.3066 20 38.4933 20C39.9666 20 41.2133 19.6933 42.22 19.0867C43.2266 18.4733 43.9933 17.6133 44.52 16.4933C45.0466 15.3733 45.3066 14.0667 45.3066 12.5733C45.3066 11.08 45.0466 9.75333 44.5333 8.64667C44.02 7.53333 43.2733 6.67333 42.3066 6.06667L42.3 6.06ZM40.7666 15.7733C40.1066 16.54 39.1333 16.9267 37.8466 16.9267C36.72 16.9267 35.8133 16.6067 35.1333 15.96C34.4533 15.32 34.1066 14.44 34.1066 13.3267V11.8C34.1066 10.6867 34.4466 9.81333 35.1333 9.16667C35.8133 8.52667 36.72 8.2 37.8466 8.2C39.1333 8.2 40.1066 8.58667 40.7666 9.35333C41.4266 10.1267 41.7533 11.1933 41.7533 12.5533C41.7533 13.9133 41.4266 14.9867 40.7666 15.7533V15.7733ZM47.5 0H51.0466V20H47.5V0ZM67.5933 5.45333H64.0466V13.4067C64.0466 14.5 63.7266 15.3533 63.0933 15.9533C62.46 16.5533 61.5466 16.86 60.3533 16.86C59.2266 16.86 58.38 16.58 57.8066 16.0133C57.2333 15.4467 56.9466 14.6133 56.9466 13.5V5.45333H53.4V14.2133C53.4 15.9933 53.9266 17.4 54.98 18.44C56.0333 19.48 57.54 20 59.4933 20C60.76 20 61.8133 19.78 62.6466 19.3467C63.48 18.9133 64.1733 18.28 64.7333 17.4533H65.7333V20H69.3733V16.1933H67.5866V5.45333H67.5933ZM80.94 5.98667C79.8933 5.42667 78.64 5.14 77.18 5.14C75.72 5.14 74.3866 5.44 73.2733 6.03333C72.16 6.62667 71.3066 7.48 70.7 8.58C70.0933 9.68 69.7933 11 69.7933 12.52C69.7933 14.04 70.1 15.3667 70.7066 16.4867C71.32 17.6067 72.1866 18.4733 73.3133 19.08C74.44 19.6933 75.7733 19.9933 77.3133 19.9933C79.14 19.9933 80.6466 19.5667 81.8466 18.72C83.0466 17.8733 83.8133 16.6933 84.1466 15.1867H80.5733C80.3533 15.84 79.9666 16.3267 79.42 16.6533C78.8733 16.98 78.16 17.14 77.2866 17.14C76.1133 17.14 75.1733 16.82 74.4666 16.1733C73.76 15.5333 73.34 14.6067 73.2133 13.4H84.2133V12.16C84.2133 10.7133 83.9266 9.46667 83.3533 8.41333C82.78 7.36 81.9733 6.54667 80.9266 5.98667H80.94ZM73.3 11C73.52 10.0333 73.9666 9.28667 74.6333 8.76C75.3 8.23333 76.1466 7.97333 77.18 7.97333C78.2133 7.97333 79.06 8.23333 79.68 8.74667C80.3 9.26 80.68 10.0133 80.82 11H73.2933H73.3ZM94.96 11.2867L91.7466 10.6667C91.16 10.5533 90.7333 10.3867 90.46 10.1667C90.1933 9.94667 90.0533 9.65333 90.0533 9.28667C90.0533 8.79333 90.2666 8.42 90.6933 8.16667C91.12 7.91333 91.74 7.78667 92.5533 7.78667C93.46 7.78667 94.1533 7.94667 94.64 8.27333C95.1266 8.6 95.4533 9.12 95.6266 9.83333H99.0533C98.9266 8.34 98.3133 7.18667 97.2066 6.36667C96.1 5.54667 94.6133 5.14 92.74 5.14C90.8666 5.14 89.4 5.54 88.3333 6.34C87.2666 7.14 86.74 8.22 86.74 9.56667C86.74 11.66 88.14 12.98 90.9333 13.52L94.0733 14.1133C94.7266 14.24 95.1866 14.42 95.4666 14.66C95.7466 14.9 95.88 15.2333 95.88 15.66C95.88 16.7267 94.9666 17.2533 93.14 17.2533C92.06 17.2533 91.2333 17.0733 90.6666 16.72C90.0933 16.36 89.7533 15.8133 89.64 15.0667H86.1866C86.28 16.62 86.9266 17.8333 88.1133 18.7C89.3066 19.5667 90.9333 20 92.9933 20C95.0533 20 96.5266 19.5933 97.5866 18.7867C98.6533 17.98 99.18 16.8533 99.18 15.4067C99.18 14.28 98.84 13.38 98.1533 12.7133C97.4733 12.0467 96.4 11.5733 94.94 11.2867H94.96ZM109.533 5.45333C108.453 5.45333 107.52 5.65333 106.727 6.06C105.933 6.46667 105.307 7.05333 104.847 7.83333H104.753V0H101.207V20H104.753V12.0467C104.753 10.92 105.053 10.06 105.66 9.47333C106.26 8.88667 107.147 8.59333 108.3 8.59333C109.453 8.59333 110.34 8.88667 110.94 9.47333C111.54 10.06 111.847 10.92 111.847 12.0467V20H115.393V11.38C115.393 9.58667 114.867 8.15333 113.813 7.07333C112.76 5.99333 111.333 5.45333 109.54 5.45333H109.533ZM119.2 0.14C118.647 0.14 118.173 0.333333 117.787 0.726667C117.4 1.11333 117.2 1.58667 117.2 2.14667C117.2 2.70667 117.393 3.17333 117.787 3.56667C118.173 3.95333 118.647 4.14667 119.2 4.14667C119.753 4.14667 120.227 3.95333 120.613 3.56667C121 3.18 121.2 2.70667 121.2 2.14667C121.2 1.58667 121.007 1.12 120.613 0.726667C120.227 0.34 119.753 0.14 119.2 0.14ZM117.44 5.71333H120.987V20H117.44V5.71333ZM126.287 0.713333C125.753 1.18667 125.487 1.92667 125.487 2.92667V5.71333H122.793V8.47333H125.46V20H129.007V8.47333H132.267V5.71333H128.96V2.76H132.553V0H128.507C127.553 0 126.813 0.24 126.28 0.713333H126.287ZM140.267 17.22V8.49333H143.667V5.73333H140.22V1.44667H136.747V5.72667H134.2V8.48667H136.72V17.12C136.72 18.0867 136.98 18.8067 137.493 19.2867C138.007 19.76 138.733 20 139.667 20H143.993V17.22H140.26H140.267Z\"\n        fill=\"#EFF1F6\"\n        clipPath=\"url(#text-clip)\"\n      />\n    </motion.svg>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,MAAa,QAAQ,EACnB,QAAQ,KACR,SAAS,IACT,WAAW,OACX,aAAa,YACE;CACf,SAAS,aAAa,OAAe;AACnC,SAAO;GACL,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS;IAAC;IAAG;IAAM;IAAK;IAAG;IAAM;IAAE,EAAE;GAChD,YAAY;IAAE,UAAU;IAAK,OAAO,QAAQ;IAAK,MAAM;IAAM;GAC9D;;AAGH,QACE,qBAAC,OAAO;EACC;EACC;EACR,SAAQ;EACR,qBAAoB;EACpB,MAAK;EACL,OAAM;EACN,WAAW,WACT,iBACA,cAAc,UACd,mBACD;;GAGD,oBAAC,oBACC,oBAAC;IAAgB,MAAK;cACnB,YACC,oBAAC;KAAS,IAAG;eACX,oBAAC,OAAO;MACN,GAAE;MACF,GAAE;MACF,QAAO;MACP,SAAS,EAAE,OAAO,KAAK;MACvB,SAAS,EAAE,OAAO,WAAW,IAAI,KAAK;MACtC,YAAY;OAAE,UAAU;OAAM,MAAM;OAAO;OAC3C;MACO;KAEG,GACb;GACP,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,EAAE;KACnB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,GAAI;KACrB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,GAAI;KACrB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,GAAI;KACrB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,GAAI;KACrB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,GAAI;KACrB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,GAAI;KACrB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,GAAI;KACrB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,GAAI;KACrB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,IAAG;IACH,GAAI,aAAa,GAAI;KACrB;GACF,oBAAC,OAAO;IACN,GAAE;IACF,MAAK;IACL,UAAS;KACT;;IAlFG,aAAa,aAAa,YAmFpB"}

package/dist/Pagination.d.ts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime28 from "react/jsx-runtime";
+
+//#region src/Pagination.d.ts
+type PaginationProps = {
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  itemsPerPage?: number;
+  itemsPerPageOptions?: number[];
+  onItemsPerPageChange: (itemsPerPage: number) => void;
+  className?: string;
+};
+declare const Pagination: ({
+  totalPages,
+  currentPage,
+  onPageChange,
+  onItemsPerPageChange,
+  className,
+  itemsPerPage,
+  itemsPerPageOptions
+}: PaginationProps) => react_jsx_runtime28.JSX.Element;
+type PaginationButtonProps = {
+  label: string;
+  onClick: () => void;
+  disabled: boolean;
+  isControl?: boolean;
+  isActive?: boolean;
+  controlDirection?: "left" | "right";
+};
+declare const PaginationButton: ({
+  label,
+  onClick,
+  disabled,
+  isControl,
+  isActive,
+  controlDirection
+}: PaginationButtonProps) => react_jsx_runtime28.JSX.Element;
+//#endregion
+export { Pagination, PaginationButton, PaginationButtonProps, PaginationProps };
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","names":[],"sources":["../src/Pagination.tsx"],"sourcesContent":[],"mappings":";;;KASY,eAAA;;;EAAA,YAAA,EAAA,CAAA,IAAe,EAAA,MAAA,EAAA,GAAA,IAAA;EAUd,YAAA,CAmIZ,EAAA,MAAA;EAnI0B,mBAAA,CAAA,EAAA,MAAA,EAAA;EAAA,oBAAA,EAAA,CAAA,YAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAA,SAAA,CAAA,EAAA,MAAA;CAAA;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,UAAA;EAAA,WAAA;EAAA,YAAA;EAAA,oBAAA;EAAA,SAAA;EAAA,YAAA;EAAA;AAAA,CAAA,EAQxB,eARwB,EAAA,GAQT,mBAAA,CAAA,GAAA,CAAA,OARS;AAAA,KAqIf,qBAAA,GArIe;EAAA,KAAA,EAAA,MAAA;EAQxB,OAAA,EAAA,GAAA,GAAA,IAAA;EAAe,QAAA,EAAA,OAAA;EA2HjB,SAAA,CAAA,EAAA,OAAA;EAEW,QAAA,CAAA,EAAA,OAAA;EASC,gBAAA,CAAA,EA+CZ,MAAA,GAAA,OAAA;CA/CgC;AAAA,cAApB,gBAAoB,EAAA,CAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAO9B,qBAP8B,EAAA,GAOT,mBAAA,CAAA,GAAA,CAAA,OAPS"}