@blueshift-gg/ui-components 0.1.0

package/README.md

@@ -0,0 +1,105 @@
+# @blueshift-gg/ui-components
+
+Blueshift Design System - UI Component Library
+
+## Overview
+
+This package contains the core UI components for the Blueshift Design System, built with:
+
+- **React 19** - UI library
+- **Motion** (formerly Framer Motion) - Animation library
+- **Tailwind CSS v4** - Styling with CSS-first configuration
+- **TypeScript** - Type safety
+- **tsup** - Build tool for ESM/CJS output
+
+## Installation
+
+This is an internal package in the monorepo. To use it in another workspace:
+
+```json
+{
+  "dependencies": {
+  "@blueshift-gg/ui-components": "workspace:*"
+  }
+}
+```
+
+## Usage
+
+### Importing Components
+
+```tsx
+import { Button } from "@blueshift-gg/ui-components/button";
+
+function App() {
+  return <Button>Click me</Button>;
+}
+```
+
+### Importing Styles
+
+Import the complete stylesheet (includes Tailwind + theme):
+
+```css
+@import "@blueshift-gg/ui-components/styles";
+```
+
+Or import just the theme variables:
+
+```css
+@import "tailwindcss";
+@import "@blueshift-gg/ui-components/theme.css";
+```
+
+## Theme Customization
+
+The theme is defined in `src/theme.css` using Tailwind CSS v4's `@theme` directive. Customize colors, fonts, spacing, and more:
+
+```css
+@theme {
+  --color-primary: #3b82f6;
+  --color-secondary: #8b5cf6;
+  --font-sans: "Inter", system-ui, sans-serif;
+  /* ... */
+}
+```
+
+## Building
+
+The package uses tsup for building:
+
+```bash
+pnpm build
+```
+
+This generates:
+- ESM output in `dist/` 
+- CommonJS output in `dist/`
+- TypeScript declarations
+
+## Development
+
+```bash
+# Type checking
+pnpm check-types
+
+# Linting
+pnpm lint
+```
+
+## Exports
+
+Components are exported individually for tree-shaking:
+
+```tsx
+import { Button } from "@blueshift-gg/ui-components/button";
+import { Card } from "@blueshift-gg/ui-components/card";
+```
+
+Styles are exported separately:
+
+```css
+@import "@blueshift-gg/ui-components/styles";     /* Complete styles */
+@import "@blueshift-gg/ui-components/theme.css";  /* Theme only */
+```
+

package/dist/Avatar.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { c as IconName } from './index-DWGhkMUQ.mjs';
+import { MotionProps } from 'motion/react';
+import { BrandColour } from './utils/colours.mjs';
+
+type AvatarProps = {
+    className?: string;
+    icon: IconName;
+    variant?: BrandColour;
+    iconClassName?: string;
+    crosshair?: "corners" | "cross" | "bordered";
+    thickness: number;
+    animation?: MotionProps;
+};
+declare const Avatar: ({ className, icon, iconClassName, crosshair, thickness, animation, variant, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps };

package/dist/Avatar.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { c as IconName } from './index-ekBNDG0H.js';
+import { MotionProps } from 'motion/react';
+import { BrandColour } from './utils/colours.js';
+
+type AvatarProps = {
+    className?: string;
+    icon: IconName;
+    variant?: BrandColour;
+    iconClassName?: string;
+    crosshair?: "corners" | "cross" | "bordered";
+    thickness: number;
+    animation?: MotionProps;
+};
+declare const Avatar: ({ className, icon, iconClassName, crosshair, thickness, animation, variant, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps };

package/dist/Avatar.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var Icon = require('./Icon');
+var CrossHair = require('./CrossHair');
+var react = require('motion/react');
+var colours = require('./utils/colours');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Avatar = ({
+  className,
+  icon,
+  iconClassName,
+  crosshair,
+  thickness = 1.5,
+  animation,
+  variant
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.motion.div,
+    {
+      className: classNames__default.default(
+        "flex items-center justify-center relative border-current/15 bg-current/5",
+        (crosshair === "corners" || crosshair === "cross") && "p-2",
+        crosshair === "bordered" && "px-3 py-2",
+        className
+      ),
+      style: {
+        borderWidth: thickness,
+        color: colours.BRAND_COLOURS[variant ?? "Secondary"]
+      },
+      ...animation,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: classNames__default.default(
+              "text-current absolute inset-0",
+              crosshair !== "bordered" && "absolute !-inset-[1.5px]"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              CrossHair.CrosshairCorners,
+              {
+                variant: crosshair,
+                className: classNames__default.default("text-current"),
+                animationDelay: 0,
+                animationDuration: 1.5,
+                size: 6
+              },
+              icon
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[32px] w-[32px]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: iconClassName, size: 24 }) })
+      ]
+    }
+  );
+};
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.js.map
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Avatar.tsx"],"names":["jsxs","motion","classNames","BRAND_COLOURS","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAiBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,SAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAWC,2BAAA;AAAA,QACT,0EAAA;AAAA,QAAA,CACC,SAAA,KAAc,SAAA,IAAa,SAAA,KAAc,OAAA,KAAY,KAAA;AAAA,QACtD,cAAc,UAAA,IAAc,WAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAOC,qBAAA,CAAc,OAAA,IAAW,WAAW;AAAA,OAC7C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,2BAAA;AAAA,cACT,+BAAA;AAAA,cACA,cAAc,UAAA,IAAc;AAAA,aAC9B;AAAA,YAEA,QAAA,kBAAAE,cAAA;AAAA,cAACC,0BAAA;AAAA,cAAA;AAAA,gBAEC,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAWH,4BAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,CAAA;AAAA,gBAChB,iBAAA,EAAmB,GAAA;AAAA,gBACnB,IAAA,EAAM;AAAA,eAAA;AAAA,cALD;AAAA;AAMP;AAAA,SACF;AAAA,wBACAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EACb,QAAA,kBAAAA,cAAA,CAACE,SAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAkB,SAAA,EAAW,aAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,EACpE;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.js","sourcesContent":["import classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n  className?: string;\n  icon: IconName;\n  variant?: BrandColour;\n  iconClassName?: string;\n  crosshair?: \"corners\" | \"cross\" | \"bordered\";\n  thickness: number;\n  animation?: MotionProps;\n};\n\nexport const Avatar = ({\n  className,\n  icon,\n  iconClassName,\n  crosshair,\n  thickness = 1.5,\n  animation,\n  variant,\n}: AvatarProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"flex items-center justify-center relative border-current/15 bg-current/5\",\n        (crosshair === \"corners\" || crosshair === \"cross\") && \"p-2\",\n        crosshair === \"bordered\" && \"px-3 py-2\",\n        className\n      )}\n      style={{\n        borderWidth: thickness,\n        color: BRAND_COLOURS[variant ?? \"Secondary\"],\n      }}\n      {...animation}\n    >\n      <div\n        className={classNames(\n          \"text-current absolute inset-0\",\n          crosshair !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n        )}\n      >\n        <CrosshairCorners\n          key={icon}\n          variant={crosshair}\n          className={classNames(\"text-current\")}\n          animationDelay={0}\n          animationDuration={1.5}\n          size={6}\n        />\n      </div>\n      <div className=\"flex items-center justify-center h-[32px] w-[32px]\">\n        <Icon name={icon as IconName} className={iconClassName} size={24} />\n      </div>\n    </motion.div>\n  );\n};\n"]}

package/dist/Avatar.mjs

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+import { CrosshairCorners } from './CrossHair';
+import { motion } from 'motion/react';
+import { BRAND_COLOURS } from './utils/colours';
+
+const Avatar = ({
+  className,
+  icon,
+  iconClassName,
+  crosshair,
+  thickness = 1.5,
+  animation,
+  variant
+}) => {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: classNames(
+        "flex items-center justify-center relative border-current/15 bg-current/5",
+        (crosshair === "corners" || crosshair === "cross") && "p-2",
+        crosshair === "bordered" && "px-3 py-2",
+        className
+      ),
+      style: {
+        borderWidth: thickness,
+        color: BRAND_COLOURS[variant ?? "Secondary"]
+      },
+      ...animation,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              "text-current absolute inset-0",
+              crosshair !== "bordered" && "absolute !-inset-[1.5px]"
+            ),
+            children: /* @__PURE__ */ jsx(
+              CrosshairCorners,
+              {
+                variant: crosshair,
+                className: classNames("text-current"),
+                animationDelay: 0,
+                animationDuration: 1.5,
+                size: 6
+              },
+              icon
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[32px] w-[32px]", children: /* @__PURE__ */ jsx(Icon, { name: icon, className: iconClassName, size: 24 }) })
+      ]
+    }
+  );
+};
+
+export { Avatar };
+//# sourceMappingURL=Avatar.mjs.map
+//# sourceMappingURL=Avatar.mjs.map

package/dist/Avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,SAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,0EAAA;AAAA,QAAA,CACC,SAAA,KAAc,SAAA,IAAa,SAAA,KAAc,OAAA,KAAY,KAAA;AAAA,QACtD,cAAc,UAAA,IAAc,WAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAO,aAAA,CAAc,OAAA,IAAW,WAAW;AAAA,OAC7C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,+BAAA;AAAA,cACA,cAAc,UAAA,IAAc;AAAA,aAC9B;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBAEC,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAW,WAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,CAAA;AAAA,gBAChB,iBAAA,EAAmB,GAAA;AAAA,gBACnB,IAAA,EAAM;AAAA,eAAA;AAAA,cALD;AAAA;AAMP;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EACb,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAkB,SAAA,EAAW,aAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,EACpE;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.mjs","sourcesContent":["import classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n  className?: string;\n  icon: IconName;\n  variant?: BrandColour;\n  iconClassName?: string;\n  crosshair?: \"corners\" | \"cross\" | \"bordered\";\n  thickness: number;\n  animation?: MotionProps;\n};\n\nexport const Avatar = ({\n  className,\n  icon,\n  iconClassName,\n  crosshair,\n  thickness = 1.5,\n  animation,\n  variant,\n}: AvatarProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"flex items-center justify-center relative border-current/15 bg-current/5\",\n        (crosshair === \"corners\" || crosshair === \"cross\") && \"p-2\",\n        crosshair === \"bordered\" && \"px-3 py-2\",\n        className\n      )}\n      style={{\n        borderWidth: thickness,\n        color: BRAND_COLOURS[variant ?? \"Secondary\"],\n      }}\n      {...animation}\n    >\n      <div\n        className={classNames(\n          \"text-current absolute inset-0\",\n          crosshair !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n        )}\n      >\n        <CrosshairCorners\n          key={icon}\n          variant={crosshair}\n          className={classNames(\"text-current\")}\n          animationDelay={0}\n          animationDuration={1.5}\n          size={6}\n        />\n      </div>\n      <div className=\"flex items-center justify-center h-[32px] w-[32px]\">\n        <Icon name={icon as IconName} className={iconClassName} size={24} />\n      </div>\n    </motion.div>\n  );\n};\n"]}

package/dist/Badge.d.mts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+import { BrandColour } from './utils/colours.mjs';
+import { a as IconProps } from './index-DWGhkMUQ.mjs';
+import { CrosshairCornersProps } from './CrossHair.mjs';
+
+type BadgeProps = {
+    className?: string;
+    label?: string;
+    variant?: BrandColour;
+    icon?: IconProps;
+    iconPosition?: "left" | "right";
+    crosshair?: CrosshairCornersProps;
+    animation?: MotionProps;
+    size?: "sm" | "md";
+};
+declare const Badge: ({ className, variant, icon, crosshair, iconPosition, animation, label, size, }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps };

package/dist/Badge.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+import { BrandColour } from './utils/colours.js';
+import { a as IconProps } from './index-ekBNDG0H.js';
+import { CrosshairCornersProps } from './CrossHair.js';
+
+type BadgeProps = {
+    className?: string;
+    label?: string;
+    variant?: BrandColour;
+    icon?: IconProps;
+    iconPosition?: "left" | "right";
+    crosshair?: CrosshairCornersProps;
+    animation?: MotionProps;
+    size?: "sm" | "md";
+};
+declare const Badge: ({ className, variant, icon, crosshair, iconPosition, animation, label, size, }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps };

package/dist/Badge.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+var colours = require('./utils/colours');
+var Icon = require('./Icon');
+var classNames = require('classnames');
+var CrossHair = require('./CrossHair');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Badge = ({
+  className,
+  variant,
+  icon,
+  crosshair,
+  iconPosition = "left",
+  animation,
+  label,
+  size = "sm"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.motion.div,
+    {
+      style: { color: colours.BRAND_COLOURS[variant ?? "Secondary"] },
+      className: classNames__default.default(
+        className,
+        "shadow-[inset_0px_0px_6px] text-sm bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1",
+        size === "md" && "!py-2",
+        !label && "!p-2",
+        iconPosition === "left" && label && "pl-1.5 pr-2",
+        iconPosition === "right" && label && "pl-2 pr-1.5",
+        crosshair?.variant === "bordered" && label && iconPosition === "left" && "pl-2.5 pr-3",
+        crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5"
+      ),
+      ...animation,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames__default.default("text-current absolute inset-0"), children: /* @__PURE__ */ jsxRuntime.jsx(
+          CrossHair.CrosshairCorners,
+          {
+            variant: crosshair?.variant,
+            className: classNames__default.default("text-current", crosshair?.className),
+            corners: crosshair?.corners,
+            animationDelay: 0,
+            animationDuration: 1.5,
+            size: 4
+          },
+          icon?.name
+        ) }),
+        icon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: icon.name,
+            className: classNames__default.default(icon.className, "flex-shrink-0 text-current"),
+            size: icon.size || 14,
+            difficulties: icon.difficulties
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: label }),
+        icon && iconPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: icon.name,
+            className: classNames__default.default(icon.className, "flex-shrink-0 text-current"),
+            size: icon.size || 14,
+            difficulties: icon.difficulties
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.Badge = Badge;
+//# sourceMappingURL=Badge.js.map
+//# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Badge.tsx"],"names":["jsxs","motion","BRAND_COLOURS","classNames","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAkBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO;AACT,CAAA,KAAkB;AAChB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,OAAO,EAAE,KAAA,EAAOC,qBAAA,CAAc,OAAA,IAAW,WAAW,CAAA,EAAE;AAAA,MACtD,SAAA,EAAWC,2BAAA;AAAA,QACT,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;AAAA,QACV,YAAA,KAAiB,UAAU,KAAA,IAAS,aAAA;AAAA,QACpC,YAAA,KAAiB,WAAW,KAAA,IAAS,aAAA;AAAA,QACrC,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,MAAA,IACjB,aAAA;AAAA,QACF,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,OAAA,IACjB;AAAA,OACJ;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,2BAAA,CAAW,+BAA+B,CAAA,EACxD,QAAA,kBAAAC,cAAA;AAAA,UAACC,0BAAA;AAAA,UAAA;AAAA,YAEC,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,SAAA,EAAWF,2BAAA,CAAW,cAAA,EAAgB,SAAA,EAAW,SAAS,CAAA;AAAA,YAC1D,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,cAAA,EAAgB,CAAA;AAAA,YAChB,iBAAA,EAAmB,GAAA;AAAA,YACnB,IAAA,EAAM;AAAA,WAAA;AAAA,UAND,IAAA,EAAM;AAAA,SAOb,EACF,CAAA;AAAA,QACC,IAAA,IAAQ,iBAAiB,MAAA,oBACxBC,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAWH,2BAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA,SACrB;AAAA,QAED,KAAA,oBAASC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC5C,IAAA,IAAQ,iBAAiB,OAAA,oBACxBA,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAWH,2BAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA;AACrB;AAAA;AAAA,GAEJ;AAEJ","file":"Badge.js","sourcesContent":["import { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\n\nexport type BadgeProps = {\n  className?: string;\n  label?: string;\n  variant?: BrandColour;\n  icon?: IconProps;\n  iconPosition?: \"left\" | \"right\";\n  crosshair?: CrosshairCornersProps;\n  animation?: MotionProps;\n  size?: \"sm\" | \"md\";\n};\n\nexport const Badge = ({\n  className,\n  variant,\n  icon,\n  crosshair,\n  iconPosition = \"left\",\n  animation,\n  label,\n  size = \"sm\",\n}: BadgeProps) => {\n  return (\n    <motion.div\n      style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n      className={classNames(\n        className,\n        \"shadow-[inset_0px_0px_6px] text-sm bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1\",\n        size === \"md\" && \"!py-2\",\n        !label && \"!p-2\",\n        iconPosition === \"left\" && label && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && \"pl-2 pr-1.5\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"left\" &&\n          \"pl-2.5 pr-3\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"right\" &&\n          \"pl-3 pr-2.5\"\n      )}\n      {...animation}\n    >\n      <div className={classNames(\"text-current absolute inset-0\")}>\n        <CrosshairCorners\n          key={icon?.name}\n          variant={crosshair?.variant}\n          className={classNames(\"text-current\", crosshair?.className)}\n          corners={crosshair?.corners}\n          animationDelay={0}\n          animationDuration={1.5}\n          size={4}\n        />\n      </div>\n      {icon && iconPosition === \"left\" && (\n        <Icon\n          name={icon.name}\n          className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n          size={icon.size || 14}\n          difficulties={icon.difficulties}\n        />\n      )}\n      {label && <span className=\"font-mono\">{label}</span>}\n      {icon && iconPosition === \"right\" && (\n        <Icon\n          name={icon.name}\n          className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n          size={icon.size || 14}\n          difficulties={icon.difficulties}\n        />\n      )}\n    </motion.div>\n  );\n};\n"]}

package/dist/Badge.mjs

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+import { BRAND_COLOURS } from './utils/colours';
+import { Icon } from './Icon';
+import classNames from 'classnames';
+import { CrosshairCorners } from './CrossHair';
+
+const Badge = ({
+  className,
+  variant,
+  icon,
+  crosshair,
+  iconPosition = "left",
+  animation,
+  label,
+  size = "sm"
+}) => {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      style: { color: BRAND_COLOURS[variant ?? "Secondary"] },
+      className: classNames(
+        className,
+        "shadow-[inset_0px_0px_6px] text-sm bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1",
+        size === "md" && "!py-2",
+        !label && "!p-2",
+        iconPosition === "left" && label && "pl-1.5 pr-2",
+        iconPosition === "right" && label && "pl-2 pr-1.5",
+        crosshair?.variant === "bordered" && label && iconPosition === "left" && "pl-2.5 pr-3",
+        crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5"
+      ),
+      ...animation,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classNames("text-current absolute inset-0"), children: /* @__PURE__ */ jsx(
+          CrosshairCorners,
+          {
+            variant: crosshair?.variant,
+            className: classNames("text-current", crosshair?.className),
+            corners: crosshair?.corners,
+            animationDelay: 0,
+            animationDuration: 1.5,
+            size: 4
+          },
+          icon?.name
+        ) }),
+        icon && iconPosition === "left" && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: icon.name,
+            className: classNames(icon.className, "flex-shrink-0 text-current"),
+            size: icon.size || 14,
+            difficulties: icon.difficulties
+          }
+        ),
+        label && /* @__PURE__ */ jsx("span", { className: "font-mono", children: label }),
+        icon && iconPosition === "right" && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: icon.name,
+            className: classNames(icon.className, "flex-shrink-0 text-current"),
+            size: icon.size || 14,
+            difficulties: icon.difficulties
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Badge };
+//# sourceMappingURL=Badge.mjs.map
+//# sourceMappingURL=Badge.mjs.map

package/dist/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Badge.tsx"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO;AACT,CAAA,KAAkB;AAChB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,OAAO,EAAE,KAAA,EAAO,aAAA,CAAc,OAAA,IAAW,WAAW,CAAA,EAAE;AAAA,MACtD,SAAA,EAAW,UAAA;AAAA,QACT,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;AAAA,QACV,YAAA,KAAiB,UAAU,KAAA,IAAS,aAAA;AAAA,QACpC,YAAA,KAAiB,WAAW,KAAA,IAAS,aAAA;AAAA,QACrC,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,MAAA,IACjB,aAAA;AAAA,QACF,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,OAAA,IACjB;AAAA,OACJ;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,+BAA+B,CAAA,EACxD,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YAEC,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,SAAA,EAAW,SAAS,CAAA;AAAA,YAC1D,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,cAAA,EAAgB,CAAA;AAAA,YAChB,iBAAA,EAAmB,GAAA;AAAA,YACnB,IAAA,EAAM;AAAA,WAAA;AAAA,UAND,IAAA,EAAM;AAAA,SAOb,EACF,CAAA;AAAA,QACC,IAAA,IAAQ,iBAAiB,MAAA,oBACxB,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAW,UAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA,SACrB;AAAA,QAED,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC5C,IAAA,IAAQ,iBAAiB,OAAA,oBACxB,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAW,UAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA;AACrB;AAAA;AAAA,GAEJ;AAEJ","file":"Badge.mjs","sourcesContent":["import { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\n\nexport type BadgeProps = {\n  className?: string;\n  label?: string;\n  variant?: BrandColour;\n  icon?: IconProps;\n  iconPosition?: \"left\" | \"right\";\n  crosshair?: CrosshairCornersProps;\n  animation?: MotionProps;\n  size?: \"sm\" | \"md\";\n};\n\nexport const Badge = ({\n  className,\n  variant,\n  icon,\n  crosshair,\n  iconPosition = \"left\",\n  animation,\n  label,\n  size = \"sm\",\n}: BadgeProps) => {\n  return (\n    <motion.div\n      style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n      className={classNames(\n        className,\n        \"shadow-[inset_0px_0px_6px] text-sm bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1\",\n        size === \"md\" && \"!py-2\",\n        !label && \"!p-2\",\n        iconPosition === \"left\" && label && \"pl-1.5 pr-2\",\n        iconPosition === \"right\" && label && \"pl-2 pr-1.5\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"left\" &&\n          \"pl-2.5 pr-3\",\n        crosshair?.variant === \"bordered\" &&\n          label &&\n          iconPosition === \"right\" &&\n          \"pl-3 pr-2.5\"\n      )}\n      {...animation}\n    >\n      <div className={classNames(\"text-current absolute inset-0\")}>\n        <CrosshairCorners\n          key={icon?.name}\n          variant={crosshair?.variant}\n          className={classNames(\"text-current\", crosshair?.className)}\n          corners={crosshair?.corners}\n          animationDelay={0}\n          animationDuration={1.5}\n          size={4}\n        />\n      </div>\n      {icon && iconPosition === \"left\" && (\n        <Icon\n          name={icon.name}\n          className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n          size={icon.size || 14}\n          difficulties={icon.difficulties}\n        />\n      )}\n      {label && <span className=\"font-mono\">{label}</span>}\n      {icon && iconPosition === \"right\" && (\n        <Icon\n          name={icon.name}\n          className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n          size={icon.size || 14}\n          difficulties={icon.difficulties}\n        />\n      )}\n    </motion.div>\n  );\n};\n"]}

package/dist/Button.d.mts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+import { CrosshairCornersProps } from './CrossHair.mjs';
+import { courseDifficulty } from './utils/colours.mjs';
+import { c as IconName } from './index-DWGhkMUQ.mjs';
+
+type ButtonProps = {
+    className?: string;
+    disabled?: boolean;
+    icon?: {
+        name: IconName;
+        className?: string;
+        size?: number;
+        difficulties?: Array<keyof typeof courseDifficulty>;
+    };
+    iconPosition?: "left" | "right";
+    hideLabel?: boolean;
+    label?: string;
+    loading?: boolean;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "primary" | "secondary";
+    crosshairProps?: CrosshairCornersProps;
+    useHoverEffect?: boolean;
+    animation?: MotionProps;
+};
+declare const Button: ({ label, variant, size, className, onClick, disabled, icon, iconPosition, loading, crosshairProps, hideLabel, animation, useHoverEffect, onMouseEnter, onMouseLeave, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps };

package/dist/Button.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps } from 'motion/react';
+import { CrosshairCornersProps } from './CrossHair.js';
+import { courseDifficulty } from './utils/colours.js';
+import { c as IconName } from './index-ekBNDG0H.js';
+
+type ButtonProps = {
+    className?: string;
+    disabled?: boolean;
+    icon?: {
+        name: IconName;
+        className?: string;
+        size?: number;
+        difficulties?: Array<keyof typeof courseDifficulty>;
+    };
+    iconPosition?: "left" | "right";
+    hideLabel?: boolean;
+    label?: string;
+    loading?: boolean;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "primary" | "secondary";
+    crosshairProps?: CrosshairCornersProps;
+    useHoverEffect?: boolean;
+    animation?: MotionProps;
+};
+declare const Button: ({ label, variant, size, className, onClick, disabled, icon, iconPosition, loading, crosshairProps, hideLabel, animation, useHoverEffect, onMouseEnter, onMouseLeave, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps };