@blueshift-gg/ui-components 0.1.0

package/dist/Tabs.mjs

@@ -0,0 +1,95 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { motion, anticipate } from 'motion/react';
+import { Icon } from './Icon';
+import { breeze } from './utils/easings';
+import { CrosshairCorners } from './CrossHair';
+
+const Tabs = ({
+  className,
+  variant,
+  items,
+  theme,
+  animation,
+  stretch
+}) => {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: classNames(
+        "flex items-center gap-x-1 w-full",
+        variant === "segmented" && "border border-border p-1",
+        !stretch && "!w-max",
+        className
+      ),
+      ...animation,
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        motion.button,
+        {
+          className: classNames(
+            "group hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-center w-full py-3 px-6 text-shade-tertiary",
+            !item.label && "w-max !px-3",
+            item.selected && theme === "secondary" && "!text-shade-primary",
+            item.selected && theme === "primary" && "!text-brand-primary"
+          ),
+          onClick: item.onClick,
+          children: [
+            item.selected && variant === "segmented" && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                layoutId: "segmented-tab-selected",
+                transition: { duration: 0.1, ease: breeze },
+                className: classNames(
+                  "absolute inset-0",
+                  theme === "primary" && "bg-brand-tertiary/8",
+                  theme === "secondary" && "bg-card-foreground"
+                )
+              }
+            ),
+            item.selected && variant === "tab" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { opacity: 0 },
+                  animate: { opacity: [0, 0.15, 0, 0.1, 0, 0.06] },
+                  transition: { duration: 0.5, ease: anticipate },
+                  className: classNames(
+                    "absolute inset-0 group-hover:opacity-15",
+                    theme === "primary" && "bg-brand-primary text-brand-primary",
+                    theme === "secondary" && "bg-shade-tertiary text-shade-primary"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CrosshairCorners,
+                {
+                  animationDelay: 0,
+                  animationDuration: 0.5,
+                  size: 4,
+                  corners: ["bottom-right"]
+                }
+              )
+            ] }),
+            item.icon && /* @__PURE__ */ jsx(Icon, { ...item.icon, className: "flex-shrink-0 relative" }),
+            item.label && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(
+                  "font-mono leading-[100%] relative",
+                  variant === "segmented" && "text-sm",
+                  variant === "tab" && "text-[15px]"
+                ),
+                children: item.label
+              }
+            )
+          ]
+        },
+        item.value
+      ))
+    }
+  );
+};
+
+export { Tabs };
+//# sourceMappingURL=Tabs.mjs.map
+//# sourceMappingURL=Tabs.mjs.map

package/dist/Tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Tabs.tsx"],"names":[],"mappings":"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","file":"Tabs.mjs","sourcesContent":["import classNames from \"classnames\";\nimport { anticipate, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { breeze, crisp, glide, swift } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type TabsProps = {\n  className?: string;\n  variant: \"tab\" | \"segmented\";\n  items: {\n    label?: string;\n    value: string;\n    icon?: IconProps;\n    disabled?: boolean;\n    selected?: boolean;\n    onClick?: () => void;\n  }[];\n  theme: \"primary\" | \"secondary\";\n  animation?: MotionProps;\n  stretch?: boolean;\n};\n\nexport const Tabs = ({\n  className,\n  variant,\n  items,\n  theme,\n  animation,\n  stretch,\n}: TabsProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"flex items-center gap-x-1 w-full\",\n        variant === \"segmented\" && \"border border-border p-1\",\n        !stretch && \"!w-max\",\n        className\n      )}\n      {...animation}\n    >\n      {items.map((item) => (\n        <motion.button\n          className={classNames(\n            \"group hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-center w-full py-3 px-6 text-shade-tertiary\",\n            !item.label && \"w-max !px-3\",\n            item.selected && theme === \"secondary\" && \"!text-shade-primary\",\n            item.selected && theme === \"primary\" && \"!text-brand-primary\"\n          )}\n          key={item.value}\n          onClick={item.onClick}\n        >\n          {item.selected && variant === \"segmented\" && (\n            <motion.div\n              layoutId=\"segmented-tab-selected\"\n              transition={{ duration: 0.1, ease: breeze }}\n              className={classNames(\n                \"absolute inset-0\",\n                theme === \"primary\" && \"bg-brand-tertiary/8\",\n                theme === \"secondary\" && \"bg-card-foreground\"\n              )}\n            ></motion.div>\n          )}\n\n          {item.selected && variant === \"tab\" && (\n            <>\n              <motion.div\n                initial={{ opacity: 0 }}\n                animate={{ opacity: [0, 0.15, 0, 0.1, 0, 0.06] }}\n                transition={{ duration: 0.5, ease: anticipate }}\n                className={classNames(\n                  \"absolute inset-0 group-hover:opacity-15\",\n                  theme === \"primary\" && \"bg-brand-primary text-brand-primary\",\n                  theme === \"secondary\" &&\n                    \"bg-shade-tertiary text-shade-primary\"\n                )}\n              />\n              <CrosshairCorners\n                animationDelay={0}\n                animationDuration={0.5}\n                size={4}\n                corners={[\"bottom-right\"]}\n              />\n            </>\n          )}\n\n          {item.icon && (\n            <Icon {...item.icon} className=\"flex-shrink-0 relative\" />\n          )}\n          {item.label && (\n            <span\n              className={classNames(\n                \"font-mono leading-[100%] relative\",\n                variant === \"segmented\" && \"text-sm\",\n                variant === \"tab\" && \"text-[15px]\"\n              )}\n            >\n              {item.label}\n            </span>\n          )}\n        </motion.button>\n      ))}\n    </motion.div>\n  );\n};\n"]}

package/dist/Toast.d.mts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { c as IconName } from './index-DWGhkMUQ.mjs';
+import './utils/colours.mjs';
+
+type ToastProps = {
+    className?: string;
+    title: string;
+    description: string;
+    icon: IconName;
+    variant: "success" | "error" | "info";
+    clearable?: boolean;
+};
+declare const Toast: ({ className, title, description, icon, variant, clearable, }: ToastProps) => react_jsx_runtime.JSX.Element;
+declare const showToast: (props: Omit<ToastProps, "className">) => string | number;
+declare const showSuccessToast: (title: string, description: string) => string | number;
+declare const showErrorToast: (title: string, description: string) => string | number;
+declare const showInfoToast: (title: string, description: string) => string | number;
+
+export { Toast, type ToastProps, showErrorToast, showInfoToast, showSuccessToast, showToast };

package/dist/Toast.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { c as IconName } from './index-ekBNDG0H.js';
+import './utils/colours.js';
+
+type ToastProps = {
+    className?: string;
+    title: string;
+    description: string;
+    icon: IconName;
+    variant: "success" | "error" | "info";
+    clearable?: boolean;
+};
+declare const Toast: ({ className, title, description, icon, variant, clearable, }: ToastProps) => react_jsx_runtime.JSX.Element;
+declare const showToast: (props: Omit<ToastProps, "className">) => string | number;
+declare const showSuccessToast: (title: string, description: string) => string | number;
+declare const showErrorToast: (title: string, description: string) => string | number;
+declare const showInfoToast: (title: string, description: string) => string | number;
+
+export { Toast, type ToastProps, showErrorToast, showInfoToast, showSuccessToast, showToast };

package/dist/Toast.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+var Icon = require('./Icon');
+var classNames = require('classnames');
+var CrossHair = require('./CrossHair');
+var sonner = require('sonner');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Toast = ({
+  className,
+  title,
+  description,
+  icon,
+  variant,
+  clearable
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.motion.div,
+    {
+      className: classNames__default.default(
+        "px-0 pb-4 pt-3 w-[calc(100dvw-32px)] xs:w-[300px] flex flex-col gap-y-2.5 bg-card-foreground gradient-border before:bg-card-border",
+        variant === "success" && "text-state-success",
+        variant === "error" && "text-state-error",
+        variant === "info" && "text-shade-secondary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react.motion.div, { className: "px-3 py-2 bg-current/5 border border-current/15 flex items-center gap-x-2.5 relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CrossHair.CrosshairCorners,
+            {
+              animationDelay: 0,
+              animationDuration: 0.5,
+              variant: "bordered",
+              size: 4,
+              spacingX: 1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: "flex-shrink-0 text-current", size: 16 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm", children: title })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-[160%] font-medium text-shade-primary px-4", children: description })
+      ]
+    }
+  );
+};
+const showToast = (props) => {
+  return sonner.toast.custom((t) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...props }), {
+    duration: 4e3,
+    unstyled: true
+  });
+};
+const showSuccessToast = (title, description) => {
+  return showToast({
+    title,
+    description,
+    icon: "SuccessCircle",
+    variant: "success"
+  });
+};
+const showErrorToast = (title, description) => {
+  return showToast({
+    title,
+    description,
+    icon: "Error",
+    variant: "error"
+  });
+};
+const showInfoToast = (title, description) => {
+  return showToast({
+    title,
+    description,
+    icon: "Loading",
+    variant: "info"
+  });
+};
+
+exports.Toast = Toast;
+exports.showErrorToast = showErrorToast;
+exports.showInfoToast = showInfoToast;
+exports.showSuccessToast = showSuccessToast;
+exports.showToast = showToast;
+//# sourceMappingURL=Toast.js.map
+//# sourceMappingURL=Toast.js.map

package/dist/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Toast.tsx"],"names":["jsxs","motion","classNames","jsx","CrosshairCorners","Icon","toast"],"mappings":";;;;;;;;;;;;;AAeO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAAkB;AAChB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAWC,2BAAA;AAAA,QACT,oIAAA;AAAA,QACA,YAAY,SAAA,IAAa,oBAAA;AAAA,QACzB,YAAY,OAAA,IAAW,kBAAA;AAAA,QACvB,YAAY,MAAA,IAAU,sBAAA;AAAA,QACtB;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iFAAA,EAAkF,CAAA;AAAA,wBACjGH,eAAA,CAACC,YAAA,CAAO,GAAA,EAAP,EAAW,WAAU,sFAAA,EACpB,QAAA,EAAA;AAAA,0BAAAE,cAAA;AAAA,YAACC,0BAAA;AAAA,YAAA;AAAA,cACC,cAAA,EAAgB,CAAA;AAAA,cAChB,iBAAA,EAAmB,GAAA;AAAA,cACnB,OAAA,EAAQ,UAAA;AAAA,cACR,IAAA,EAAM,CAAA;AAAA,cACN,QAAA,EAAU;AAAA;AAAA,WACZ;AAAA,yCACCC,SAAA,EAAA,EAAK,IAAA,EAAM,MAAM,SAAA,EAAU,4BAAA,EAA6B,MAAM,EAAA,EAAI,CAAA;AAAA,0BACnEF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC7C,CAAA;AAAA,wBACAA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4DAAA,EACV,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;AAGO,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyC;AACjE,EAAA,OAAOG,YAAA,CAAM,OAAO,CAAC,CAAA,oCAAO,KAAA,EAAA,EAAO,GAAG,OAAO,CAAA,EAAI;AAAA,IAC/C,QAAA,EAAU,GAAA;AAAA,IACV,QAAA,EAAU;AAAA,GACX,CAAA;AACH;AAEO,MAAM,gBAAA,GAAmB,CAAC,KAAA,EAAe,WAAA,KAAwB;AACtE,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,KAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV,CAAA;AACH;AAEO,MAAM,cAAA,GAAiB,CAAC,KAAA,EAAe,WAAA,KAAwB;AACpE,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,KAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV,CAAA;AACH;AAEO,MAAM,aAAA,GAAgB,CAAC,KAAA,EAAe,WAAA,KAAwB;AACnE,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,KAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,EAAM,SAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV,CAAA;AACH","file":"Toast.js","sourcesContent":["import { motion } from \"motion/react\";\nimport { Icon, IconName } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { toast } from \"sonner\";\n\nexport type ToastProps = {\n  className?: string;\n  title: string;\n  description: string;\n  icon: IconName;\n  variant: \"success\" | \"error\" | \"info\";\n  clearable?: boolean;\n};\n\nexport const Toast = ({\n  className,\n  title,\n  description,\n  icon,\n  variant,\n  clearable,\n}: ToastProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"px-0 pb-4 pt-3 w-[calc(100dvw-32px)] xs:w-[300px] flex flex-col gap-y-2.5 bg-card-foreground gradient-border before:bg-card-border\",\n        variant === \"success\" && \"text-state-success\",\n        variant === \"error\" && \"text-state-error\",\n        variant === \"info\" && \"text-shade-secondary\",\n        className\n      )}\n    >\n      <div className=\"inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent\"></div>\n      <motion.div className=\"px-3 py-2 bg-current/5 border border-current/15 flex items-center gap-x-2.5 relative\">\n        <CrosshairCorners\n          animationDelay={0}\n          animationDuration={0.5}\n          variant=\"bordered\"\n          size={4}\n          spacingX={1}\n        />\n        <Icon name={icon} className=\"flex-shrink-0 text-current\" size={16} />\n        <span className=\"font-mono text-sm\">{title}</span>\n      </motion.div>\n      <p className=\"text-sm leading-[160%] font-medium text-shade-primary px-4\">\n        {description}\n      </p>\n    </motion.div>\n  );\n};\n\n// Sonner integration helpers\nexport const showToast = (props: Omit<ToastProps, \"className\">) => {\n  return toast.custom((t) => <Toast {...props} />, {\n    duration: 4000,\n    unstyled: true,\n  });\n};\n\nexport const showSuccessToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"SuccessCircle\",\n    variant: \"success\",\n  });\n};\n\nexport const showErrorToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"Error\",\n    variant: \"error\",\n  });\n};\n\nexport const showInfoToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"Loading\",\n    variant: \"info\",\n  });\n};\n"]}

package/dist/Toast.mjs

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+import { Icon } from './Icon';
+import classNames from 'classnames';
+import { CrosshairCorners } from './CrossHair';
+import { toast } from 'sonner';
+
+const Toast = ({
+  className,
+  title,
+  description,
+  icon,
+  variant,
+  clearable
+}) => {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: classNames(
+        "px-0 pb-4 pt-3 w-[calc(100dvw-32px)] xs:w-[300px] flex flex-col gap-y-2.5 bg-card-foreground gradient-border before:bg-card-border",
+        variant === "success" && "text-state-success",
+        variant === "error" && "text-state-error",
+        variant === "info" && "text-shade-secondary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent" }),
+        /* @__PURE__ */ jsxs(motion.div, { className: "px-3 py-2 bg-current/5 border border-current/15 flex items-center gap-x-2.5 relative", children: [
+          /* @__PURE__ */ jsx(
+            CrosshairCorners,
+            {
+              animationDelay: 0,
+              animationDuration: 0.5,
+              variant: "bordered",
+              size: 4,
+              spacingX: 1
+            }
+          ),
+          /* @__PURE__ */ jsx(Icon, { name: icon, className: "flex-shrink-0 text-current", size: 16 }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: title })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm leading-[160%] font-medium text-shade-primary px-4", children: description })
+      ]
+    }
+  );
+};
+const showToast = (props) => {
+  return toast.custom((t) => /* @__PURE__ */ jsx(Toast, { ...props }), {
+    duration: 4e3,
+    unstyled: true
+  });
+};
+const showSuccessToast = (title, description) => {
+  return showToast({
+    title,
+    description,
+    icon: "SuccessCircle",
+    variant: "success"
+  });
+};
+const showErrorToast = (title, description) => {
+  return showToast({
+    title,
+    description,
+    icon: "Error",
+    variant: "error"
+  });
+};
+const showInfoToast = (title, description) => {
+  return showToast({
+    title,
+    description,
+    icon: "Loading",
+    variant: "info"
+  });
+};
+
+export { Toast, showErrorToast, showInfoToast, showSuccessToast, showToast };
+//# sourceMappingURL=Toast.mjs.map
+//# sourceMappingURL=Toast.mjs.map

package/dist/Toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Toast.tsx"],"names":[],"mappings":";;;;;;;AAeO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAAkB;AAChB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,oIAAA;AAAA,QACA,YAAY,SAAA,IAAa,oBAAA;AAAA,QACzB,YAAY,OAAA,IAAW,kBAAA;AAAA,QACvB,YAAY,MAAA,IAAU,sBAAA;AAAA,QACtB;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iFAAA,EAAkF,CAAA;AAAA,wBACjG,IAAA,CAAC,MAAA,CAAO,GAAA,EAAP,EAAW,WAAU,sFAAA,EACpB,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,cAAA,EAAgB,CAAA;AAAA,cAChB,iBAAA,EAAmB,GAAA;AAAA,cACnB,OAAA,EAAQ,UAAA;AAAA,cACR,IAAA,EAAM,CAAA;AAAA,cACN,QAAA,EAAU;AAAA;AAAA,WACZ;AAAA,8BACC,IAAA,EAAA,EAAK,IAAA,EAAM,MAAM,SAAA,EAAU,4BAAA,EAA6B,MAAM,EAAA,EAAI,CAAA;AAAA,0BACnE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC7C,CAAA;AAAA,wBACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4DAAA,EACV,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;AAGO,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyC;AACjE,EAAA,OAAO,KAAA,CAAM,OAAO,CAAC,CAAA,yBAAO,KAAA,EAAA,EAAO,GAAG,OAAO,CAAA,EAAI;AAAA,IAC/C,QAAA,EAAU,GAAA;AAAA,IACV,QAAA,EAAU;AAAA,GACX,CAAA;AACH;AAEO,MAAM,gBAAA,GAAmB,CAAC,KAAA,EAAe,WAAA,KAAwB;AACtE,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,KAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV,CAAA;AACH;AAEO,MAAM,cAAA,GAAiB,CAAC,KAAA,EAAe,WAAA,KAAwB;AACpE,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,KAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV,CAAA;AACH;AAEO,MAAM,aAAA,GAAgB,CAAC,KAAA,EAAe,WAAA,KAAwB;AACnE,EAAA,OAAO,SAAA,CAAU;AAAA,IACf,KAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,EAAM,SAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV,CAAA;AACH","file":"Toast.mjs","sourcesContent":["import { motion } from \"motion/react\";\nimport { Icon, IconName } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { toast } from \"sonner\";\n\nexport type ToastProps = {\n  className?: string;\n  title: string;\n  description: string;\n  icon: IconName;\n  variant: \"success\" | \"error\" | \"info\";\n  clearable?: boolean;\n};\n\nexport const Toast = ({\n  className,\n  title,\n  description,\n  icon,\n  variant,\n  clearable,\n}: ToastProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"px-0 pb-4 pt-3 w-[calc(100dvw-32px)] xs:w-[300px] flex flex-col gap-y-2.5 bg-card-foreground gradient-border before:bg-card-border\",\n        variant === \"success\" && \"text-state-success\",\n        variant === \"error\" && \"text-state-error\",\n        variant === \"info\" && \"text-shade-secondary\",\n        className\n      )}\n    >\n      <div className=\"inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent\"></div>\n      <motion.div className=\"px-3 py-2 bg-current/5 border border-current/15 flex items-center gap-x-2.5 relative\">\n        <CrosshairCorners\n          animationDelay={0}\n          animationDuration={0.5}\n          variant=\"bordered\"\n          size={4}\n          spacingX={1}\n        />\n        <Icon name={icon} className=\"flex-shrink-0 text-current\" size={16} />\n        <span className=\"font-mono text-sm\">{title}</span>\n      </motion.div>\n      <p className=\"text-sm leading-[160%] font-medium text-shade-primary px-4\">\n        {description}\n      </p>\n    </motion.div>\n  );\n};\n\n// Sonner integration helpers\nexport const showToast = (props: Omit<ToastProps, \"className\">) => {\n  return toast.custom((t) => <Toast {...props} />, {\n    duration: 4000,\n    unstyled: true,\n  });\n};\n\nexport const showSuccessToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"SuccessCircle\",\n    variant: \"success\",\n  });\n};\n\nexport const showErrorToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"Error\",\n    variant: \"error\",\n  });\n};\n\nexport const showInfoToast = (title: string, description: string) => {\n  return showToast({\n    title,\n    description,\n    icon: \"Loading\",\n    variant: \"info\",\n  });\n};\n"]}

package/dist/Tooltip.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TooltipProps = {
+    description: string;
+    isOpen?: boolean;
+    position: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "center-left" | "center-right";
+};
+declare const Tooltip: ({ description, position, isOpen }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TooltipProps = {
+    description: string;
+    isOpen?: boolean;
+    position: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "center-left" | "center-right";
+};
+declare const Tooltip: ({ description, position, isOpen }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/Tooltip.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var react = require('motion/react');
+var easings = require('./utils/easings');
+var CrossHair = require('./CrossHair');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Tooltip = ({ description, position, isOpen }) => {
+  const getPositionBasedAnimation = (position2) => {
+    const baseAnimation = {
+      animate: { opacity: 1, y: 0, x: 0, scale: 1 },
+      exit: { opacity: 0, scale: 0.9 },
+      transition: { duration: 0.15, ease: easings.crisp, delay: 0.15 }
+    };
+    if (position2.startsWith("bottom")) {
+      return {
+        ...baseAnimation,
+        initial: { opacity: 0, y: -10, scale: 0.9 },
+        exit: { ...baseAnimation.exit, y: -10 }
+      };
+    } else if (position2.startsWith("top")) {
+      return {
+        ...baseAnimation,
+        initial: { opacity: 0, y: 10, scale: 0.9 },
+        exit: { ...baseAnimation.exit, y: 10 }
+      };
+    } else if (position2.startsWith("center-left")) {
+      return {
+        ...baseAnimation,
+        initial: { opacity: 0, x: 10, scale: 0.9 },
+        exit: { ...baseAnimation.exit, x: 10 }
+      };
+    } else if (position2.startsWith("center-right")) {
+      return {
+        ...baseAnimation,
+        initial: { opacity: 0, x: -10, scale: 0.9 },
+        exit: { ...baseAnimation.exit, x: -10 }
+      };
+    }
+    return {
+      ...baseAnimation,
+      initial: { opacity: 0, y: -10, scale: 0.9 },
+      exit: { ...baseAnimation.exit, y: -10 }
+    };
+  };
+  const animations = getPositionBasedAnimation(position);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+    react.motion.div,
+    {
+      ...animations,
+      className: classNames__default.default(
+        "z-50 absolute font-medium w-max max-w-[200px] px-2.5 pt-1.5 pb-2 bg-card-foreground gradient-border before:bg-border text-xs leading-[150%] text-shade-tertiary",
+        "after:absolute after:bg-border",
+        !position.startsWith("center") && "after:!w-[10px] after:!h-[5px]",
+        position.startsWith("center") && "after:!h-[10px] after:!w-[5px]",
+        getTooltipPosition(position),
+        getArrowPosition(position)
+      ),
+      style: { transformOrigin: getTransformOrigin(position) },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+          CrossHair.CrosshairCorners,
+          {
+            size: 4,
+            variant: "corners",
+            className: "text-shade-mute",
+            animationDelay: 0.15,
+            animationDuration: 0.75,
+            corners: position === "top-left" || position === "bottom-right" ? ["bottom-left", "top-right"] : ["bottom-right", "top-left"]
+          }
+        ) }),
+        description
+      ]
+    },
+    position
+  ) });
+};
+const getTooltipPosition = (position) => {
+  switch (position) {
+    case "top-right":
+      return "bottom-[calc(100%+6px)] left-1/2 mb-1";
+    case "top-center":
+      return "bottom-[calc(100%+6px)] left-1/2 -translate-x-1/2 mb-1";
+    case "top-left":
+      return "bottom-[calc(100%+6px)] right-1/2 mb-1";
+    case "bottom-right":
+      return "top-[calc(100%+6px)] left-1/2 mt-1";
+    case "bottom-center":
+      return "top-[calc(100%+6px)] left-1/2 -translate-x-1/2 mt-1";
+    case "bottom-left":
+      return "top-[calc(100%+6px)] right-1/2 mt-1";
+    case "center-left":
+      return "right-[calc(100%+6px)] top-1/2 -translate-y-1/2 mr-1";
+    case "center-right":
+      return "left-[calc(100%+6px)] top-1/2 -translate-y-1/2 ml-1";
+  }
+};
+const getTransformOrigin = (position) => {
+  switch (position) {
+    case "bottom-right":
+      return "bottom left";
+    case "bottom-center":
+      return "bottom center";
+    case "bottom-left":
+      return "bottom right";
+    case "top-right":
+      return "top left";
+    case "top-center":
+      return "top center";
+    case "top-left":
+      return "top right";
+    case "center-left":
+      return "center right";
+    case "center-right":
+      return "center left";
+  }
+};
+const getArrowPosition = (position) => {
+  switch (position) {
+    case "bottom-right":
+      return "after:top-[calc(0%-5px)] after:left-0 after:[clip-path:polygon(0%_0%,100%_100%,0%_100%,0%_0%)]";
+    case "bottom-center":
+      return "after:top-[calc(0%-5px)] after:left-1/2 after:-translate-x-1/2 after:[clip-path:polygon(50%_0%,0%_100%,100%_100%)]";
+    case "bottom-left":
+      return "after:top-[calc(0%-5px)] after:right-0 after:[clip-path:polygon(100%_0%,0%_100%,100%_100%,100%_0%)]";
+    case "top-right":
+      return "after:bottom-[calc(0%-5px)] after:left-0 after:[clip-path:polygon(0%_100%,100%_0%,0%_0%,0%_100%)]";
+    case "top-center":
+      return "after:bottom-[calc(0%-5px)] after:left-1/2 after:-translate-x-1/2 after:[clip-path:polygon(50%_100%,0%_0%,100%_0%)]";
+    case "top-left":
+      return "after:bottom-[calc(0%-5px)] after:right-0 after:[clip-path:polygon(100%_100%,0%_0%,100%_0%,100%_100%)]";
+    case "center-right":
+      return "after:top-1/2 after:left-[calc(0%-5px)] after:-translate-y-1/2 after:[clip-path:polygon(100%_0%,0%_50%,100%_100%)]";
+    case "center-left":
+      return "after:top-1/2 after:right-[calc(0%-5px)] after:-translate-y-1/2 after:[clip-path:polygon(0%_0%,100%_50%,0%_100%)]";
+  }
+};
+
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip.js.map
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Tooltip.tsx"],"names":["position","crisp","jsx","AnimatePresence","jsxs","motion","classNames","CrosshairCorners"],"mappings":"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","file":"Tooltip.js","sourcesContent":["import classNames from \"classnames\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { crisp, swift } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type TooltipProps = {\n  description: string;\n  isOpen?: boolean;\n  position:\n    | \"top-left\"\n    | \"top-center\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-center\"\n    | \"bottom-right\"\n    | \"center-left\"\n    | \"center-right\";\n};\n\nexport const Tooltip = ({ description, position, isOpen }: TooltipProps) => {\n  const getPositionBasedAnimation = (position: TooltipProps[\"position\"]) => {\n    const baseAnimation = {\n      animate: { opacity: 1, y: 0, x: 0, scale: 1 },\n      exit: { opacity: 0, scale: 0.9 },\n      transition: { duration: 0.15, ease: crisp, delay: 0.15 },\n    };\n\n    if (position.startsWith(\"bottom\")) {\n      return {\n        ...baseAnimation,\n        initial: { opacity: 0, y: -10, scale: 0.9 },\n        exit: { ...baseAnimation.exit, y: -10 },\n      };\n    } else if (position.startsWith(\"top\")) {\n      return {\n        ...baseAnimation,\n        initial: { opacity: 0, y: 10, scale: 0.9 },\n        exit: { ...baseAnimation.exit, y: 10 },\n      };\n    } else if (position.startsWith(\"center-left\")) {\n      return {\n        ...baseAnimation,\n        initial: { opacity: 0, x: 10, scale: 0.9 },\n        exit: { ...baseAnimation.exit, x: 10 },\n      };\n    } else if (position.startsWith(\"center-right\")) {\n      return {\n        ...baseAnimation,\n        initial: { opacity: 0, x: -10, scale: 0.9 },\n        exit: { ...baseAnimation.exit, x: -10 },\n      };\n    }\n\n    // Fallback to default animation\n    return {\n      ...baseAnimation,\n      initial: { opacity: 0, y: -10, scale: 0.9 },\n      exit: { ...baseAnimation.exit, y: -10 },\n    };\n  };\n\n  const animations = getPositionBasedAnimation(position);\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <motion.div\n          key={position}\n          {...animations}\n          className={classNames(\n            \"z-50 absolute font-medium w-max max-w-[200px] px-2.5 pt-1.5 pb-2 bg-card-foreground gradient-border before:bg-border text-xs leading-[150%] text-shade-tertiary\",\n            \"after:absolute after:bg-border\",\n            !position.startsWith(\"center\") && \"after:!w-[10px] after:!h-[5px]\",\n            position.startsWith(\"center\") && \"after:!h-[10px] after:!w-[5px]\",\n            getTooltipPosition(position),\n            getArrowPosition(position)\n          )}\n          style={{ transformOrigin: getTransformOrigin(position) }}\n        >\n          <div className=\"absolute inset-0.5\">\n            <CrosshairCorners\n              size={4}\n              variant=\"corners\"\n              className=\"text-shade-mute\"\n              animationDelay={0.15}\n              animationDuration={0.75}\n              corners={\n                position === \"top-left\" || position === \"bottom-right\"\n                  ? [\"bottom-left\", \"top-right\"]\n                  : [\"bottom-right\", \"top-left\"]\n              }\n            />\n          </div>\n          {description}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nconst getTooltipPosition = (position: TooltipProps[\"position\"]) => {\n  switch (position) {\n    case \"top-right\":\n      return \"bottom-[calc(100%+6px)] left-1/2 mb-1\";\n    case \"top-center\":\n      return \"bottom-[calc(100%+6px)] left-1/2 -translate-x-1/2 mb-1\";\n    case \"top-left\":\n      return \"bottom-[calc(100%+6px)] right-1/2 mb-1\";\n    case \"bottom-right\":\n      return \"top-[calc(100%+6px)] left-1/2 mt-1\";\n    case \"bottom-center\":\n      return \"top-[calc(100%+6px)] left-1/2 -translate-x-1/2 mt-1\";\n    case \"bottom-left\":\n      return \"top-[calc(100%+6px)] right-1/2 mt-1\";\n    case \"center-left\":\n      return \"right-[calc(100%+6px)] top-1/2 -translate-y-1/2 mr-1\";\n    case \"center-right\":\n      return \"left-[calc(100%+6px)] top-1/2 -translate-y-1/2 ml-1\";\n  }\n};\n\nconst getTransformOrigin = (position: TooltipProps[\"position\"]) => {\n  switch (position) {\n    case \"bottom-right\":\n      return \"bottom left\";\n    case \"bottom-center\":\n      return \"bottom center\";\n    case \"bottom-left\":\n      return \"bottom right\";\n    case \"top-right\":\n      return \"top left\";\n    case \"top-center\":\n      return \"top center\";\n    case \"top-left\":\n      return \"top right\";\n    case \"center-left\":\n      return \"center right\";\n    case \"center-right\":\n      return \"center left\";\n  }\n};\n\nconst getArrowPosition = (position: TooltipProps[\"position\"]) => {\n  switch (position) {\n    case \"bottom-right\":\n      return \"after:top-[calc(0%-5px)] after:left-0 after:[clip-path:polygon(0%_0%,100%_100%,0%_100%,0%_0%)]\";\n    case \"bottom-center\":\n      return \"after:top-[calc(0%-5px)] after:left-1/2 after:-translate-x-1/2 after:[clip-path:polygon(50%_0%,0%_100%,100%_100%)]\";\n    case \"bottom-left\":\n      return \"after:top-[calc(0%-5px)] after:right-0 after:[clip-path:polygon(100%_0%,0%_100%,100%_100%,100%_0%)]\";\n    case \"top-right\":\n      return \"after:bottom-[calc(0%-5px)] after:left-0 after:[clip-path:polygon(0%_100%,100%_0%,0%_0%,0%_100%)]\";\n    case \"top-center\":\n      return \"after:bottom-[calc(0%-5px)] after:left-1/2 after:-translate-x-1/2 after:[clip-path:polygon(50%_100%,0%_0%,100%_0%)]\";\n    case \"top-left\":\n      return \"after:bottom-[calc(0%-5px)] after:right-0 after:[clip-path:polygon(100%_100%,0%_0%,100%_0%,100%_100%)]\";\n    case \"center-right\":\n      return \"after:top-1/2 after:left-[calc(0%-5px)] after:-translate-y-1/2 after:[clip-path:polygon(100%_0%,0%_50%,100%_100%)]\";\n    case \"center-left\":\n      return \"after:top-1/2 after:right-[calc(0%-5px)] after:-translate-y-1/2 after:[clip-path:polygon(0%_0%,100%_50%,0%_100%)]\";\n  }\n};\n"]}