@blueshift-gg/ui-components 0.1.0

package/dist/Button.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('motion/react');
+var classNames = require('classnames');
+var Icon = require('./Icon');
+var CrossHair = require('./CrossHair');
+var DecryptedText = require('./DecryptText');
+var react = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var DecryptedText__default = /*#__PURE__*/_interopDefault(DecryptedText);
+
+const Button = ({
+  label,
+  variant = "primary",
+  size = "lg",
+  className = "",
+  onClick,
+  disabled = false,
+  icon,
+  iconPosition = "left",
+  loading = false,
+  crosshairProps = {
+    variant: "corners"
+  },
+  hideLabel,
+  animation,
+  useHoverEffect = true,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const [isHovering, setIsHovering] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.motion.button,
+    {
+      disabled,
+      onClick,
+      onMouseEnter: () => {
+        setIsHovering(true);
+        onMouseEnter?.();
+      },
+      onMouseLeave: () => {
+        setIsHovering(false);
+        onMouseLeave?.();
+      },
+      className: classNames__default.default(
+        // Animation
+        "relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono",
+        // Base Styles
+        "disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]",
+        // Themes
+        variant === "primary" && "bg-primary-button text-background gradient-border before:bg-primary-button-border",
+        variant === "secondary" && "bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border",
+        // Sizes
+        size === "lg" && "py-4 pl-6 pr-6 text-base",
+        size === "md" && "py-3 pl-4 pr-4 text-sm",
+        size === "sm" && "py-2 pl-3 pr-3 text-sm leading-[20px]",
+        size === "xs" && "text-[10px] px-3 py-1.5",
+        size === "lg" && hideLabel && "h-[50px] w-[50px] justify-center !pr-0 !pl-0",
+        size === "md" && hideLabel && "h-[42px] w-[42px] justify-center !pr-0 !pl-0",
+        size === "sm" && hideLabel && "h-[36px] w-[36px] justify-center !pr-0 !pl-0",
+        // Icon offsets
+        size === "lg" && icon && iconPosition === "right" && "pl-6 pr-[22px]",
+        size === "lg" && icon && iconPosition === "left" && "pl-[22px] pr-6",
+        size === "md" && icon && iconPosition === "right" && "pl-4 pr-[18px]",
+        size === "md" && icon && iconPosition === "left" && "pl-[18px] pr-4",
+        size === "sm" && icon && iconPosition === "right" && "pl-3 pr-[14px]",
+        size === "sm" && icon && iconPosition === "left" && "pl-[14px] pr-3",
+        className
+      ),
+      ...animation,
+      children: [
+        crosshairProps && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: classNames__default.default(
+              "will-change-transform absolute transition-all duration-50 ease-glide inset-0",
+              variant === "secondary" && "text-shade-mute",
+              variant === "primary" && "text-background",
+              crosshairProps.variant === "corners" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current",
+              crosshairProps.variant === "cross" && useHoverEffect && "-inset-1 text-shade-primary",
+              crosshairProps.variant === "bordered" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              CrossHair.CrosshairCorners,
+              {
+                size: size === "xs" ? 3 : size === "sm" ? 4 : 6,
+                animationDelay: 0,
+                variant: crosshairProps.variant,
+                animationDuration: 1.5,
+                ...crosshairProps
+              }
+            )
+          }
+        ),
+        icon && iconPosition === "left" && size !== "xs" && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            size: icon.size,
+            name: loading ? "Loading" : icon.name,
+            className: classNames__default.default(icon.className, "flex-shrink-0"),
+            difficulties: icon.difficulties
+          }
+        ),
+        !hideLabel && label && /* @__PURE__ */ jsxRuntime.jsx(
+          DecryptedText__default.default,
+          {
+            speed: label.length / 0.6,
+            isHovering,
+            text: label
+          }
+        ),
+        icon && iconPosition === "right" && size !== "xs" && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            size: icon.size,
+            name: loading ? "Loading" : icon.name,
+            className: classNames__default.default(icon.className, "flex-shrink-0"),
+            difficulties: icon.difficulties
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button.tsx"],"names":["useState","jsxs","motion","classNames","jsx","CrosshairCorners","Icon","DecryptedText"],"mappings":"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","file":"Button.js","sourcesContent":["import { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState } from \"react\";\nimport { courseDifficulty } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n  className?: string;\n  disabled?: boolean;\n  icon?: {\n    name: IconName;\n    className?: string;\n    size?: number;\n    difficulties?: Array<keyof typeof courseDifficulty>;\n  };\n  iconPosition?: \"left\" | \"right\";\n  hideLabel?: boolean;\n  label?: string;\n  loading?: boolean;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n  variant?: \"primary\" | \"secondary\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\n};\n\nexport const Button = ({\n  label,\n  variant = \"primary\",\n  size = \"lg\",\n  className = \"\",\n  onClick,\n  disabled = false,\n  icon,\n  iconPosition = \"left\",\n  loading = false,\n  crosshairProps = {\n    variant: \"corners\",\n  },\n  hideLabel,\n  animation,\n  useHoverEffect = true,\n  onMouseEnter,\n  onMouseLeave,\n}: ButtonProps) => {\n  const [isHovering, setIsHovering] = useState(false);\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      onMouseEnter={() => {\n        setIsHovering(true);\n        onMouseEnter?.();\n      }}\n      onMouseLeave={() => {\n        setIsHovering(false);\n        onMouseLeave?.();\n      }}\n      className={classNames(\n        // Animation\n        \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n        // Base Styles\n        \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n        // Themes\n        variant === \"primary\" &&\n          \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n        variant === \"secondary\" &&\n          \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n        // Sizes\n        size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n        size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n        size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n        size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n        size === \"lg\" &&\n          hideLabel &&\n          \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n        size === \"md\" &&\n          hideLabel &&\n          \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n        size === \"sm\" &&\n          hideLabel &&\n          \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n        // Icon offsets\n        size === \"lg\" && icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n        size === \"lg\" && icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n        size === \"md\" && icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n        size === \"md\" && icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n        size === \"sm\" && icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n        size === \"sm\" && icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n        className\n      )}\n      {...animation}\n    >\n      {crosshairProps && (\n        <div\n          className={classNames(\n            \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n            variant === \"secondary\" && \"text-shade-mute\",\n            variant === \"primary\" && \"text-background\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n            crosshairProps.variant === \"cross\" &&\n              useHoverEffect &&\n              \"-inset-1 text-shade-primary\",\n            crosshairProps.variant === \"bordered\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\"\n          )}\n        >\n          <CrosshairCorners\n            size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n            animationDelay={0}\n            variant={crosshairProps.variant}\n            animationDuration={1.5}\n            {...crosshairProps}\n          />\n        </div>\n      )}\n      {icon && iconPosition === \"left\" && size !== \"xs\" && (\n        <Icon\n          size={icon.size}\n          name={loading ? \"Loading\" : icon.name}\n          className={classNames(icon.className, \"flex-shrink-0\")}\n          difficulties={icon.difficulties}\n        />\n      )}\n      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering}\n          text={label}\n        />\n      )}\n      {icon && iconPosition === \"right\" && size !== \"xs\" && (\n        <Icon\n          size={icon.size}\n          name={loading ? \"Loading\" : icon.name}\n          className={classNames(icon.className, \"flex-shrink-0\")}\n          difficulties={icon.difficulties}\n        />\n      )}\n    </motion.button>\n  );\n};\n"]}

package/dist/Button.mjs

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+import { CrosshairCorners } from './CrossHair';
+import DecryptedText from './DecryptText';
+import { useState } from 'react';
+
+const Button = ({
+  label,
+  variant = "primary",
+  size = "lg",
+  className = "",
+  onClick,
+  disabled = false,
+  icon,
+  iconPosition = "left",
+  loading = false,
+  crosshairProps = {
+    variant: "corners"
+  },
+  hideLabel,
+  animation,
+  useHoverEffect = true,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const [isHovering, setIsHovering] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      disabled,
+      onClick,
+      onMouseEnter: () => {
+        setIsHovering(true);
+        onMouseEnter?.();
+      },
+      onMouseLeave: () => {
+        setIsHovering(false);
+        onMouseLeave?.();
+      },
+      className: classNames(
+        // Animation
+        "relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono",
+        // Base Styles
+        "disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]",
+        // Themes
+        variant === "primary" && "bg-primary-button text-background gradient-border before:bg-primary-button-border",
+        variant === "secondary" && "bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border",
+        // Sizes
+        size === "lg" && "py-4 pl-6 pr-6 text-base",
+        size === "md" && "py-3 pl-4 pr-4 text-sm",
+        size === "sm" && "py-2 pl-3 pr-3 text-sm leading-[20px]",
+        size === "xs" && "text-[10px] px-3 py-1.5",
+        size === "lg" && hideLabel && "h-[50px] w-[50px] justify-center !pr-0 !pl-0",
+        size === "md" && hideLabel && "h-[42px] w-[42px] justify-center !pr-0 !pl-0",
+        size === "sm" && hideLabel && "h-[36px] w-[36px] justify-center !pr-0 !pl-0",
+        // Icon offsets
+        size === "lg" && icon && iconPosition === "right" && "pl-6 pr-[22px]",
+        size === "lg" && icon && iconPosition === "left" && "pl-[22px] pr-6",
+        size === "md" && icon && iconPosition === "right" && "pl-4 pr-[18px]",
+        size === "md" && icon && iconPosition === "left" && "pl-[18px] pr-4",
+        size === "sm" && icon && iconPosition === "right" && "pl-3 pr-[14px]",
+        size === "sm" && icon && iconPosition === "left" && "pl-[14px] pr-3",
+        className
+      ),
+      ...animation,
+      children: [
+        crosshairProps && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              "will-change-transform absolute transition-all duration-50 ease-glide inset-0",
+              variant === "secondary" && "text-shade-mute",
+              variant === "primary" && "text-background",
+              crosshairProps.variant === "corners" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current",
+              crosshairProps.variant === "cross" && useHoverEffect && "-inset-1 text-shade-primary",
+              crosshairProps.variant === "bordered" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current"
+            ),
+            children: /* @__PURE__ */ jsx(
+              CrosshairCorners,
+              {
+                size: size === "xs" ? 3 : size === "sm" ? 4 : 6,
+                animationDelay: 0,
+                variant: crosshairProps.variant,
+                animationDuration: 1.5,
+                ...crosshairProps
+              }
+            )
+          }
+        ),
+        icon && iconPosition === "left" && size !== "xs" && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: icon.size,
+            name: loading ? "Loading" : icon.name,
+            className: classNames(icon.className, "flex-shrink-0"),
+            difficulties: icon.difficulties
+          }
+        ),
+        !hideLabel && label && /* @__PURE__ */ jsx(
+          DecryptedText,
+          {
+            speed: label.length / 0.6,
+            isHovering,
+            text: label
+          }
+        ),
+        icon && iconPosition === "right" && size !== "xs" && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: icon.size,
+            name: loading ? "Loading" : icon.name,
+            className: classNames(icon.className, "flex-shrink-0"),
+            difficulties: icon.difficulties
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Button };
+//# sourceMappingURL=Button.mjs.map
+//# sourceMappingURL=Button.mjs.map

package/dist/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":"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","file":"Button.mjs","sourcesContent":["import { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState } from \"react\";\nimport { courseDifficulty } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n  className?: string;\n  disabled?: boolean;\n  icon?: {\n    name: IconName;\n    className?: string;\n    size?: number;\n    difficulties?: Array<keyof typeof courseDifficulty>;\n  };\n  iconPosition?: \"left\" | \"right\";\n  hideLabel?: boolean;\n  label?: string;\n  loading?: boolean;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n  variant?: \"primary\" | \"secondary\";\n  crosshairProps?: CrosshairCornersProps;\n  useHoverEffect?: boolean;\n  animation?: MotionProps;\n};\n\nexport const Button = ({\n  label,\n  variant = \"primary\",\n  size = \"lg\",\n  className = \"\",\n  onClick,\n  disabled = false,\n  icon,\n  iconPosition = \"left\",\n  loading = false,\n  crosshairProps = {\n    variant: \"corners\",\n  },\n  hideLabel,\n  animation,\n  useHoverEffect = true,\n  onMouseEnter,\n  onMouseLeave,\n}: ButtonProps) => {\n  const [isHovering, setIsHovering] = useState(false);\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      onMouseEnter={() => {\n        setIsHovering(true);\n        onMouseEnter?.();\n      }}\n      onMouseLeave={() => {\n        setIsHovering(false);\n        onMouseLeave?.();\n      }}\n      className={classNames(\n        // Animation\n        \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n        // Base Styles\n        \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n        // Themes\n        variant === \"primary\" &&\n          \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n        variant === \"secondary\" &&\n          \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n        // Sizes\n        size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n        size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n        size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n        size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n        size === \"lg\" &&\n          hideLabel &&\n          \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n        size === \"md\" &&\n          hideLabel &&\n          \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n        size === \"sm\" &&\n          hideLabel &&\n          \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n        // Icon offsets\n        size === \"lg\" && icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n        size === \"lg\" && icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n        size === \"md\" && icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n        size === \"md\" && icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n        size === \"sm\" && icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n        size === \"sm\" && icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n        className\n      )}\n      {...animation}\n    >\n      {crosshairProps && (\n        <div\n          className={classNames(\n            \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n            variant === \"secondary\" && \"text-shade-mute\",\n            variant === \"primary\" && \"text-background\",\n            crosshairProps.variant === \"corners\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n            crosshairProps.variant === \"cross\" &&\n              useHoverEffect &&\n              \"-inset-1 text-shade-primary\",\n            crosshairProps.variant === \"bordered\" &&\n              useHoverEffect &&\n              \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\"\n          )}\n        >\n          <CrosshairCorners\n            size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n            animationDelay={0}\n            variant={crosshairProps.variant}\n            animationDuration={1.5}\n            {...crosshairProps}\n          />\n        </div>\n      )}\n      {icon && iconPosition === \"left\" && size !== \"xs\" && (\n        <Icon\n          size={icon.size}\n          name={loading ? \"Loading\" : icon.name}\n          className={classNames(icon.className, \"flex-shrink-0\")}\n          difficulties={icon.difficulties}\n        />\n      )}\n      {!hideLabel && label && (\n        <DecryptedText\n          speed={label.length / 0.6}\n          isHovering={isHovering}\n          text={label}\n        />\n      )}\n      {icon && iconPosition === \"right\" && size !== \"xs\" && (\n        <Icon\n          size={icon.size}\n          name={loading ? \"Loading\" : icon.name}\n          className={classNames(icon.className, \"flex-shrink-0\")}\n          difficulties={icon.difficulties}\n        />\n      )}\n    </motion.button>\n  );\n};\n"]}

package/dist/Checkbox.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type CheckboxProps = {
+    checked: boolean;
+    className?: string;
+    disabled?: boolean;
+    handleChange?: (checked: boolean) => void;
+    theme?: "primary" | "secondary";
+};
+declare const Checkbox: ({ checked, className, disabled, handleChange, theme, }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+export { Checkbox, type CheckboxProps };

package/dist/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type CheckboxProps = {
+    checked: boolean;
+    className?: string;
+    disabled?: boolean;
+    handleChange?: (checked: boolean) => void;
+    theme?: "primary" | "secondary";
+};
+declare const Checkbox: ({ checked, className, disabled, handleChange, theme, }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+export { Checkbox, type CheckboxProps };

package/dist/Checkbox.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var react = require('motion/react');
+var easings = require('./utils/easings');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Checkbox = ({
+  checked,
+  className,
+  disabled,
+  handleChange,
+  theme = "primary"
+}) => {
+  const handleInputChange = (event) => {
+    if (handleChange) {
+      handleChange(event.target.checked);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[14px] w-[14px] flex-shrink-0 items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group grid size-[14px] grid-cols-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked,
+        disabled,
+        onChange: handleInputChange,
+        className: classNames__default.default(
+          className,
+          "border-shade-mute col-start-1 row-start-1 appearance-none border-[1.5px] bg-transparent transition duration-100 ease-in-out checked:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-[1.5px] disabled:bg-card-solid disabled:opacity-40 forced-colors:appearance-auto",
+          {
+            "checked:border-brand-secondary indeterminate:border-brand-secondary focus-visible:outline-brand-secondary": theme === "primary",
+            "checked:border-secondary indeterminate:border-secondary focus-visible:outline-secondary": theme === "secondary"
+          }
+        )
+      }
+    ),
+    checked && /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.motion.div,
+      {
+        initial: { opacity: 0, scale: 0 },
+        animate: { opacity: 1, scale: 1 },
+        transition: { duration: 0.1, ease: easings.crisp },
+        exit: { opacity: 0, scale: 0 },
+        className: classNames__default.default(
+          "pointer-events-none col-start-1 row-start-1 size-1 self-center justify-self-center opacity-0 group-has-[:checked]:opacity-100",
+          {
+            "bg-brand-primary": theme === "primary",
+            "bg-shade-secondary": theme === "secondary"
+          }
+        )
+      }
+    ) })
+  ] }) });
+};
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.js.map
+//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Checkbox.tsx"],"names":["jsxs","jsx","classNames","AnimatePresence","motion","crisp"],"mappings":";;;;;;;;;;;AAYO,MAAM,WAAW,CAAC;AAAA,EACvB,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA,GAAQ;AACV,CAAA,KAAqB;AACnB,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAA+C;AACxE,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,YAAA,CAAa,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,IACnC;AAAA,EACF,CAAA;AAEA,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,qDACb,QAAA,kBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oCAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,UAAA;AAAA,QACL,OAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAWC,2BAAA;AAAA,UACT,SAAA;AAAA,UACA,4SAAA;AAAA,UACA;AAAA,YACE,6GACE,KAAA,KAAU,SAAA;AAAA,YACZ,2FACE,KAAA,KAAU;AAAA;AACd;AACF;AAAA,KACF;AAAA,IACC,OAAA,oBACCD,cAAA,CAACE,qBAAA,EAAA,EAAgB,IAAA,EAAK,WAAA,EACpB,QAAA,kBAAAF,cAAA;AAAA,MAACG,YAAA,CAAO,GAAA;AAAA,MAAP;AAAA,QACC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAChC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAChC,UAAA,EAAY,EAAE,QAAA,EAAU,GAAA,EAAK,MAAMC,aAAA,EAAM;AAAA,QACzC,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAC7B,SAAA,EAAWH,2BAAA;AAAA,UACT,+HAAA;AAAA,UACA;AAAA,YACE,oBAAoB,KAAA,KAAU,SAAA;AAAA,YAC9B,sBAAsB,KAAA,KAAU;AAAA;AAClC;AACF;AAAA,KACD,EACH;AAAA,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ","file":"Checkbox.js","sourcesContent":["import classNames from \"classnames\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { crisp } from \"./utils/easings\";\n\nexport type CheckboxProps = {\n  checked: boolean;\n  className?: string;\n  disabled?: boolean;\n  handleChange?: (checked: boolean) => void;\n  theme?: \"primary\" | \"secondary\";\n};\n\nexport const Checkbox = ({\n  checked,\n  className,\n  disabled,\n  handleChange,\n  theme = \"primary\",\n}: CheckboxProps) => {\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (handleChange) {\n      handleChange(event.target.checked);\n    }\n  };\n\n  return (\n    <div className=\"flex h-[14px] w-[14px] flex-shrink-0 items-center\">\n      <div className=\"group grid size-[14px] grid-cols-1\">\n        <input\n          type=\"checkbox\"\n          checked={checked}\n          disabled={disabled}\n          onChange={handleInputChange}\n          className={classNames(\n            className,\n            \"border-shade-mute col-start-1 row-start-1 appearance-none border-[1.5px] bg-transparent transition duration-100 ease-in-out checked:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-[1.5px] disabled:bg-card-solid disabled:opacity-40 forced-colors:appearance-auto\",\n            {\n              \"checked:border-brand-secondary indeterminate:border-brand-secondary focus-visible:outline-brand-secondary\":\n                theme === \"primary\",\n              \"checked:border-secondary indeterminate:border-secondary focus-visible:outline-secondary\":\n                theme === \"secondary\",\n            }\n          )}\n        />\n        {checked && (\n          <AnimatePresence mode=\"popLayout\">\n            <motion.div\n              initial={{ opacity: 0, scale: 0 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ duration: 0.1, ease: crisp }}\n              exit={{ opacity: 0, scale: 0 }}\n              className={classNames(\n                \"pointer-events-none col-start-1 row-start-1 size-1 self-center justify-self-center opacity-0 group-has-[:checked]:opacity-100\",\n                {\n                  \"bg-brand-primary\": theme === \"primary\",\n                  \"bg-shade-secondary\": theme === \"secondary\",\n                }\n              )}\n            ></motion.div>\n          </AnimatePresence>\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/Checkbox.mjs

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { AnimatePresence, motion } from 'motion/react';
+import { crisp } from './utils/easings';
+
+const Checkbox = ({
+  checked,
+  className,
+  disabled,
+  handleChange,
+  theme = "primary"
+}) => {
+  const handleInputChange = (event) => {
+    if (handleChange) {
+      handleChange(event.target.checked);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex h-[14px] w-[14px] flex-shrink-0 items-center", children: /* @__PURE__ */ jsxs("div", { className: "group grid size-[14px] grid-cols-1", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked,
+        disabled,
+        onChange: handleInputChange,
+        className: classNames(
+          className,
+          "border-shade-mute col-start-1 row-start-1 appearance-none border-[1.5px] bg-transparent transition duration-100 ease-in-out checked:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-[1.5px] disabled:bg-card-solid disabled:opacity-40 forced-colors:appearance-auto",
+          {
+            "checked:border-brand-secondary indeterminate:border-brand-secondary focus-visible:outline-brand-secondary": theme === "primary",
+            "checked:border-secondary indeterminate:border-secondary focus-visible:outline-secondary": theme === "secondary"
+          }
+        )
+      }
+    ),
+    checked && /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, scale: 0 },
+        animate: { opacity: 1, scale: 1 },
+        transition: { duration: 0.1, ease: crisp },
+        exit: { opacity: 0, scale: 0 },
+        className: classNames(
+          "pointer-events-none col-start-1 row-start-1 size-1 self-center justify-self-center opacity-0 group-has-[:checked]:opacity-100",
+          {
+            "bg-brand-primary": theme === "primary",
+            "bg-shade-secondary": theme === "secondary"
+          }
+        )
+      }
+    ) })
+  ] }) });
+};
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.mjs.map
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Checkbox.tsx"],"names":[],"mappings":";;;;;AAYO,MAAM,WAAW,CAAC;AAAA,EACvB,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA,GAAQ;AACV,CAAA,KAAqB;AACnB,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAA+C;AACxE,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,YAAA,CAAa,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,IACnC;AAAA,EACF,CAAA;AAEA,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAU,qDACb,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oCAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,UAAA;AAAA,QACL,OAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAW,UAAA;AAAA,UACT,SAAA;AAAA,UACA,4SAAA;AAAA,UACA;AAAA,YACE,6GACE,KAAA,KAAU,SAAA;AAAA,YACZ,2FACE,KAAA,KAAU;AAAA;AACd;AACF;AAAA,KACF;AAAA,IACC,OAAA,oBACC,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAA,EAAK,WAAA,EACpB,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA,CAAO,GAAA;AAAA,MAAP;AAAA,QACC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAChC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAChC,UAAA,EAAY,EAAE,QAAA,EAAU,GAAA,EAAK,MAAM,KAAA,EAAM;AAAA,QACzC,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAC7B,SAAA,EAAW,UAAA;AAAA,UACT,+HAAA;AAAA,UACA;AAAA,YACE,oBAAoB,KAAA,KAAU,SAAA;AAAA,YAC9B,sBAAsB,KAAA,KAAU;AAAA;AAClC;AACF;AAAA,KACD,EACH;AAAA,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ","file":"Checkbox.mjs","sourcesContent":["import classNames from \"classnames\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { crisp } from \"./utils/easings\";\n\nexport type CheckboxProps = {\n  checked: boolean;\n  className?: string;\n  disabled?: boolean;\n  handleChange?: (checked: boolean) => void;\n  theme?: \"primary\" | \"secondary\";\n};\n\nexport const Checkbox = ({\n  checked,\n  className,\n  disabled,\n  handleChange,\n  theme = \"primary\",\n}: CheckboxProps) => {\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (handleChange) {\n      handleChange(event.target.checked);\n    }\n  };\n\n  return (\n    <div className=\"flex h-[14px] w-[14px] flex-shrink-0 items-center\">\n      <div className=\"group grid size-[14px] grid-cols-1\">\n        <input\n          type=\"checkbox\"\n          checked={checked}\n          disabled={disabled}\n          onChange={handleInputChange}\n          className={classNames(\n            className,\n            \"border-shade-mute col-start-1 row-start-1 appearance-none border-[1.5px] bg-transparent transition duration-100 ease-in-out checked:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-[1.5px] disabled:bg-card-solid disabled:opacity-40 forced-colors:appearance-auto\",\n            {\n              \"checked:border-brand-secondary indeterminate:border-brand-secondary focus-visible:outline-brand-secondary\":\n                theme === \"primary\",\n              \"checked:border-secondary indeterminate:border-secondary focus-visible:outline-secondary\":\n                theme === \"secondary\",\n            }\n          )}\n        />\n        {checked && (\n          <AnimatePresence mode=\"popLayout\">\n            <motion.div\n              initial={{ opacity: 0, scale: 0 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ duration: 0.1, ease: crisp }}\n              exit={{ opacity: 0, scale: 0 }}\n              className={classNames(\n                \"pointer-events-none col-start-1 row-start-1 size-1 self-center justify-self-center opacity-0 group-has-[:checked]:opacity-100\",\n                {\n                  \"bg-brand-primary\": theme === \"primary\",\n                  \"bg-shade-secondary\": theme === \"secondary\",\n                }\n              )}\n            ></motion.div>\n          </AnimatePresence>\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/Codeblock.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+
+type CodeblockProps = {
+    code: string;
+    language: "Rust" | "Typescript" | "Assembly";
+    animation?: MotionProps;
+};
+declare const Codeblock: ({ code, language, animation }: CodeblockProps) => react_jsx_runtime.JSX.Element;
+
+export { Codeblock, type CodeblockProps };

package/dist/Codeblock.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+
+type CodeblockProps = {
+    code: string;
+    language: "Rust" | "Typescript" | "Assembly";
+    animation?: MotionProps;
+};
+declare const Codeblock: ({ code, language, animation }: CodeblockProps) => react_jsx_runtime.JSX.Element;
+
+export { Codeblock, type CodeblockProps };

package/dist/Codeblock.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('motion/react');
+var classNames = require('classnames');
+var CrossHair = require('./CrossHair');
+var Icon = require('./Icon');
+var usehooksTs = require('usehooks-ts');
+var react = require('react');
+var easings = require('./utils/easings');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Codeblock = ({ code, language, animation }) => {
+  const [_, copyToClipboard] = usehooksTs.useCopyToClipboard();
+  const [isCopied, setIsCopied] = react.useState(false);
+  const handleCopy = () => {
+    copyToClipboard(code);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.motion.div,
+    {
+      className: classNames__default.default(
+        "relative bg-card-foreground w-full flex flex-col gap-y-6 gradient-border before:bg-card-border pt-3 pb-6",
+        language === "Rust" && "text-brand-rust",
+        language === "Typescript" && "text-brand-typescript",
+        language === "Assembly" && "text-brand-assembly"
+      ),
+      ...animation,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.motion.div, { className: "px-3.5 py-2 bg-current/5 border border-current/15 flex items-center justify-between relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CrossHair.CrosshairCorners,
+            {
+              animationDelay: 0,
+              animationDuration: 0.5,
+              variant: "bordered",
+              size: 6,
+              spacingX: 1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                name: language,
+                className: "flex-shrink-0 text-current",
+                size: 16
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm", children: language })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onClick: () => handleCopy(),
+              className: "w-[16px] h-[16px] text-shade-secondary hover:text-shade-primary relative z-10",
+              children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxRuntime.jsx(
+                react$1.motion.div,
+                {
+                  initial: { opacity: 0, filter: "blur(4px)", scale: 0.4 },
+                  animate: { opacity: 1, filter: "blur(0px)", scale: 1 },
+                  exit: { opacity: 0, filter: "blur(4px)", scale: 0.4 },
+                  transition: { duration: 0.2, ease: easings.silk },
+                  children: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "Success", size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "Copy", size: 16 })
+                },
+                isCopied ? "copied" : "copy"
+              ) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent" }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "px-6 font-mono-code", children: code })
+      ]
+    }
+  );
+};
+
+exports.Codeblock = Codeblock;
+//# sourceMappingURL=Codeblock.js.map
+//# sourceMappingURL=Codeblock.js.map

package/dist/Codeblock.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Codeblock.tsx"],"names":["useCopyToClipboard","useState","jsxs","motion","classNames","jsx","CrosshairCorners","Icon","AnimatePresence","silk"],"mappings":"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","file":"Codeblock.js","sourcesContent":["import { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Icon } from \"./Icon\";\nimport { useCopyToClipboard } from \"usehooks-ts\";\nimport { useState } from \"react\";\nimport { silk } from \"./utils/easings\";\nimport { GridLines } from \"./GridLines\";\n\nexport type CodeblockProps = {\n  code: string;\n  language: \"Rust\" | \"Typescript\" | \"Assembly\";\n  animation?: MotionProps;\n};\n\nexport const Codeblock = ({ code, language, animation }: CodeblockProps) => {\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n  const handleCopy = () => {\n    copyToClipboard(code);\n    setIsCopied(true);\n    setTimeout(() => {\n      setIsCopied(false);\n    }, 2000);\n  };\n  return (\n    <motion.div\n      className={classNames(\n        \"relative bg-card-foreground w-full flex flex-col gap-y-6 gradient-border before:bg-card-border pt-3 pb-6\",\n        language === \"Rust\" && \"text-brand-rust\",\n        language === \"Typescript\" && \"text-brand-typescript\",\n        language === \"Assembly\" && \"text-brand-assembly\"\n      )}\n      {...animation}\n    >\n      <motion.div className=\"px-3.5 py-2 bg-current/5 border border-current/15 flex items-center justify-between relative\">\n        <CrosshairCorners\n          animationDelay={0}\n          animationDuration={0.5}\n          variant=\"bordered\"\n          size={6}\n          spacingX={1}\n        />\n        <div className=\"flex items-center gap-x-2\">\n          <Icon\n            name={language}\n            className=\"flex-shrink-0 text-current\"\n            size={16}\n          />\n          <span className=\"font-mono text-sm\">{language}</span>\n        </div>\n\n        <div\n          onClick={() => handleCopy()}\n          className=\"w-[16px] h-[16px] text-shade-secondary hover:text-shade-primary relative z-10\"\n        >\n          <AnimatePresence mode=\"popLayout\">\n            <motion.div\n              initial={{ opacity: 0, filter: \"blur(4px)\", scale: 0.4 }}\n              animate={{ opacity: 1, filter: \"blur(0px)\", scale: 1 }}\n              exit={{ opacity: 0, filter: \"blur(4px)\", scale: 0.4 }}\n              transition={{ duration: 0.2, ease: silk }}\n              key={isCopied ? \"copied\" : \"copy\"}\n            >\n              {isCopied ? (\n                <Icon name=\"Success\" size={16} />\n              ) : (\n                <Icon name=\"Copy\" size={16} />\n              )}\n            </motion.div>\n          </AnimatePresence>\n        </div>\n      </motion.div>\n      <div className=\"inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent\"></div>\n      <pre className=\"px-6 font-mono-code\">{code}</pre>\n    </motion.div>\n  );\n};\n"]}