@galvyn-io/design 0.1.0

package/README.md

@@ -0,0 +1,316 @@
+# @galvyn-io/design
+
+Dark-first design system with monotone canvas and surgical accent color. Built for internal tools and admin panels.
+
+Works with **Next.js + Tailwind CSS + shadcn/ui** out of the box.
+
+## Quick Start
+
+### 1. Install
+
+```bash
+npm install @galvyn-io/design
+```
+
+### 2. Import CSS
+
+In your `app/globals.css` (or wherever your global styles live):
+
+```css
+/* Import BEFORE Tailwind directives and shadcn styles */
+@import "@galvyn-io/design/css";
+
+/* Then your existing Tailwind + shadcn imports */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Optional: set accent hue per-project */
+:root {
+  --galvyn-accent-hue: 220; /* blue (default) */
+  /* Try: 180 (teal), 270 (purple), 340 (pink), 150 (green), 30 (amber) */
+}
+```
+
+### 3. Add Tailwind Preset
+
+In your `tailwind.config.ts`:
+
+```ts
+import type { Config } from 'tailwindcss';
+import galvynPreset from '@galvyn-io/design/preset';
+
+export default {
+  presets: [galvynPreset],  // ← adds galvyn-* utilities
+  content: [
+    './app/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    // ... your paths
+  ],
+  // ... rest of your config (shadcn, etc.)
+} satisfies Config;
+```
+
+> **Note:** The preset _extends_ your config. It does NOT override shadcn or any existing utilities. All galvyn classes are namespaced with `galvyn-*`.
+
+### 4. Use It
+
+```tsx
+// Tailwind classes
+<div className="bg-galvyn-bg-000 text-galvyn-text-100">
+  <button className="bg-galvyn-accent-400 text-white rounded-galvyn-md">
+    Deploy
+  </button>
+</div>
+
+// Gradient border utility class
+<div className="galvyn-border-gradient rounded-galvyn-lg bg-galvyn-surface-100 p-4">
+  Card with gradient border
+</div>
+
+// React components (optional)
+import { Button, Card, Badge } from '@galvyn-io/design/components';
+
+<Card border="strong">
+  <Badge variant="success" dot>Healthy</Badge>
+  <Button variant="accent">Deploy</Button>
+</Card>
+```
+
+---
+
+## Architecture
+
+```
+@galvyn-io/design
+├── /css          → CSS custom properties + utility classes (the core)
+├── /preset       → Tailwind preset (extends, never overrides)
+├── /components   → React primitives (Button, Card, Badge, etc.)
+├── /tokens       → Token constants + helper functions
+└── index         → Re-exports tokens, types, helpers
+```
+
+### Three import paths, each independent:
+
+| Import | What | Required? |
+|--------|------|-----------|
+| `@galvyn-io/design/css` | CSS variables + utility classes | **Yes** |
+| `@galvyn-io/design/preset` | Tailwind preset | **Yes** (if using Tailwind) |
+| `@galvyn-io/design/components` | React components | Optional |
+
+---
+
+## Accent Hue System
+
+The entire accent palette is driven by a single CSS variable:
+
+```css
+:root {
+  --galvyn-accent-hue: 220;  /* Change this to rotate everything */
+}
+```
+
+| Hue | Color | Vibe |
+|-----|-------|------|
+| `220` | Blue | Default / Vercel |
+| `180` | Teal | Cloud / infra |
+| `270` | Purple | Raycast |
+| `340` | Pink | Warm |
+| `150` | Green | Growth |
+| `30` | Amber | Alert |
+
+You can also set it per-component or per-section:
+
+```tsx
+import { galvynAccent } from '@galvyn-io/design';
+
+// Different accent per project
+<div style={galvynAccent('teal')}>
+  This section uses teal accent
+</div>
+
+// Or with a raw hue value
+<div style={galvynAccent(300)}>
+  Custom hue
+</div>
+```
+
+---
+
+## shadcn Compatibility
+
+Galvyn is designed to coexist with shadcn/ui:
+
+- All CSS variables are prefixed `--galvyn-*` (no collision with shadcn's `--` vars)
+- The Tailwind preset uses `extend` (never replaces shadcn utilities)
+- All Tailwind classes are namespaced: `bg-galvyn-*`, `text-galvyn-*`, etc.
+- You can use shadcn components alongside Galvyn components
+
+**Recommended approach:** Use shadcn for complex components (Dialog, Dropdown, etc.) and style them with Galvyn CSS variables for consistent theming.
+
+```tsx
+// shadcn Dialog, styled with Galvyn tokens
+<Dialog>
+  <DialogContent className="bg-galvyn-surface-100 border-galvyn-border-200">
+    <DialogTitle className="text-galvyn-text-000">Settings</DialogTitle>
+  </DialogContent>
+</Dialog>
+```
+
+---
+
+## Gradient Borders
+
+The signature effect. Four tiers:
+
+```html
+<!-- Subtle (default cards) -->
+<div class="galvyn-border-gradient">...</div>
+
+<!-- Medium (focused elements) -->
+<div class="galvyn-border-gradient galvyn-border-gradient-medium">...</div>
+
+<!-- Strong (accent-tinted) -->
+<div class="galvyn-border-gradient galvyn-border-gradient-strong">...</div>
+
+<!-- Accent (full gradient) -->
+<div class="galvyn-border-gradient galvyn-border-gradient-accent">...</div>
+
+<!-- Shimmer (animated, use sparingly) -->
+<div class="galvyn-border-gradient galvyn-border-shimmer">...</div>
+```
+
+Or with the React helper:
+
+```tsx
+import { GradientBorder } from '@galvyn-io/design/components';
+
+<GradientBorder variant="strong" className="p-4 rounded-galvyn-lg">
+  Premium content
+</GradientBorder>
+```
+
+---
+
+## Multi-Project Setup
+
+Each project installs the same package but can customize:
+
+```
+galvyn-dashboard/     → --galvyn-accent-hue: 220 (blue)
+jarvis-agent/         → --galvyn-accent-hue: 180 (teal)
+golf-booking-agent/   → --galvyn-accent-hue: 150 (green)
+```
+
+When you update the package:
+
+```bash
+# In each project
+npm update @galvyn-io/design
+```
+
+Or pin to a version in `package.json` and update when ready.
+
+---
+
+## Components
+
+All components use CSS variables — they automatically respond to theme and accent changes.
+
+### Button
+
+```tsx
+import { Button } from '@galvyn-io/design/components';
+
+<Button variant="default" size="md">Default</Button>
+<Button variant="accent">Deploy</Button>
+<Button variant="danger" size="sm">Delete</Button>
+<Button variant="ghost" loading>Loading...</Button>
+```
+
+### Badge
+
+```tsx
+import { Badge } from '@galvyn-io/design/components';
+
+<Badge variant="success" dot>Healthy</Badge>
+<Badge variant="error">3 errors</Badge>
+<Badge variant="accent">New</Badge>
+```
+
+### Card
+
+```tsx
+import { Card } from '@galvyn-io/design/components';
+
+<Card border="subtle" padding="md">Default card</Card>
+<Card border="strong" padding="lg" hover>Clickable card</Card>
+```
+
+### Input
+
+```tsx
+import { Input } from '@galvyn-io/design/components';
+
+<Input label="Project" placeholder="my-project" hint="Lowercase only" />
+<Input label="Endpoint" mono placeholder="https://..." />
+<Input label="Region" error="Invalid region" />
+```
+
+### StatusDot, Kbd
+
+```tsx
+import { StatusDot, Kbd } from '@galvyn-io/design/components';
+
+<StatusDot status="online" label="API Gateway" />
+<Kbd>⌘</Kbd><Kbd>K</Kbd>
+```
+
+---
+
+## Development
+
+```bash
+git clone https://github.com/galvyn-io/galvyn-design.git
+cd galvyn-design
+npm install
+npm run build    # builds to dist/
+npm run dev      # watch mode
+```
+
+### Publishing
+
+```bash
+npm run release  # builds + publishes to npm
+```
+
+---
+
+## Token Reference
+
+### Color Tokens
+
+| Token | Dark | Light | Usage |
+|-------|------|-------|-------|
+| `--galvyn-bg-000` | `#09090b` | `#ffffff` | Page background |
+| `--galvyn-bg-100` | `#0c0c0e` | `#fafafa` | App background |
+| `--galvyn-surface-100` | `#141416` | `#ffffff` | Card/panel bg |
+| `--galvyn-surface-hover` | `#2a2a2d` | `#ededf0` | Hover state |
+| `--galvyn-text-100` | `#fafafa` | `#18181b` | Primary text |
+| `--galvyn-text-200` | `#a1a1aa` | `#52525b` | Secondary text |
+| `--galvyn-text-300` | `#71717a` | `#71717a` | Tertiary text |
+| `--galvyn-accent-400` | hsl-based | hsl-based | Primary accent |
+
+### Spacing (4px grid)
+
+`space-1` = 4px, `space-2` = 8px, `space-3` = 12px, `space-4` = 16px, `space-6` = 24px, `space-8` = 32px
+
+### Radii
+
+`sm` = 4px, `md` = 6px, `lg` = 8px, `xl` = 12px, `2xl` = 16px
+
+---
+
+## License
+
+MIT

package/dist/components/index.cjs

@@ -0,0 +1,134 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/index.tsx
+
+// src/tokens/index.ts
+function galvynBorderClass(variant = "subtle") {
+  if (variant === "none") return "";
+  const base = "galvyn-border-gradient";
+  if (variant === "subtle") return base;
+  if (variant === "shimmer") return `${base} galvyn-border-shimmer`;
+  return `${base} galvyn-border-gradient-${variant}`;
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var GradientBorder = react.forwardRef(
+  ({ variant = "subtle", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(galvynBorderClass(variant), className),
+      ...props,
+      children
+    }
+  )
+);
+GradientBorder.displayName = "GradientBorder";
+var BUTTON_VARIANT_CLASSES = {
+  default: "galvyn-btn-default",
+  secondary: "galvyn-btn-secondary",
+  ghost: "galvyn-btn-ghost",
+  accent: "galvyn-btn-accent",
+  danger: "galvyn-btn-danger"
+};
+var BUTTON_SIZE_CLASSES = {
+  sm: "galvyn-btn-sm",
+  md: "galvyn-btn-md",
+  lg: "galvyn-btn-lg"
+};
+var Button = react.forwardRef(
+  ({ variant = "default", size = "md", loading, icon, children, className, disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      className: cn(
+        "galvyn-btn",
+        BUTTON_VARIANT_CLASSES[variant],
+        BUTTON_SIZE_CLASSES[size],
+        "galvyn-focus-ring galvyn-transition",
+        className
+      ),
+      disabled: loading || disabled,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+        icon && !loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "galvyn-btn-icon", children: icon }),
+        children
+      ]
+    }
+  )
+);
+Button.displayName = "Button";
+var Input = react.forwardRef(
+  ({ label, hint, error, icon, mono, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "galvyn-input-wrapper", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "galvyn-input-label", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("galvyn-input-container", error && "galvyn-input-error"), children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "galvyn-input-icon", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          className: cn(
+            "galvyn-input galvyn-focus-ring",
+            mono && "galvyn-input-mono",
+            className
+          ),
+          "aria-invalid": !!error,
+          ...props
+        }
+      )
+    ] }),
+    (hint || error) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("galvyn-input-hint", error && "galvyn-input-hint-error"), children: error || hint })
+  ] })
+);
+Input.displayName = "Input";
+var Badge = ({
+  variant = "default",
+  size = "sm",
+  dot = false,
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(`galvyn-badge galvyn-badge-${variant} galvyn-badge-${size}`, className), ...props, children: [
+  dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "galvyn-badge-dot" }),
+  children
+] });
+var Card = react.forwardRef(
+  ({ border = "subtle", padding = "md", hover = false, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "galvyn-card",
+        `galvyn-card-pad-${padding}`,
+        hover && "galvyn-card-hover",
+        galvynBorderClass(border),
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+Card.displayName = "Card";
+var Kbd = ({ children, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: cn("galvyn-kbd", className), ...props, children });
+var StatusDot = ({ status, label, className }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("galvyn-status", className), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `galvyn-status-dot galvyn-status-dot-${status}` }),
+  label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "galvyn-status-label", children: label })
+] });
+var Spinner = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "galvyn-spinner", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5 7a5.5 5.5 0 00-5.5-5.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+] });
+
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Card = Card;
+exports.GradientBorder = GradientBorder;
+exports.Input = Input;
+exports.Kbd = Kbd;
+exports.StatusDot = StatusDot;

package/dist/components/index.d.cts

@@ -0,0 +1,47 @@
+import React from 'react';
+
+type GalvynVariant = 'default' | 'secondary' | 'ghost' | 'accent' | 'danger';
+type GalvynSize = 'sm' | 'md' | 'lg';
+type GalvynBorderGradient = 'none' | 'subtle' | 'medium' | 'strong' | 'accent' | 'shimmer';
+
+interface GradientBorderProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: GalvynBorderGradient;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const GradientBorder: React.ForwardRefExoticComponent<GradientBorderProps & React.RefAttributes<HTMLDivElement>>;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: GalvynVariant;
+    size?: GalvynSize;
+    loading?: boolean;
+    icon?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    icon?: React.ReactNode;
+    mono?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'default' | 'accent' | 'success' | 'warning' | 'error';
+    size?: 'sm' | 'md';
+    dot?: boolean;
+}
+declare const Badge: React.FC<BadgeProps>;
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    border?: GalvynBorderGradient;
+    padding?: GalvynSize;
+    hover?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const Kbd: React.FC<React.HTMLAttributes<HTMLElement>>;
+interface StatusDotProps {
+    status: 'online' | 'offline' | 'warning' | 'error';
+    label?: string;
+    className?: string;
+}
+declare const StatusDot: React.FC<StatusDotProps>;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, GradientBorder, type GradientBorderProps, Input, type InputProps, Kbd, StatusDot, type StatusDotProps };

package/dist/components/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+
+type GalvynVariant = 'default' | 'secondary' | 'ghost' | 'accent' | 'danger';
+type GalvynSize = 'sm' | 'md' | 'lg';
+type GalvynBorderGradient = 'none' | 'subtle' | 'medium' | 'strong' | 'accent' | 'shimmer';
+
+interface GradientBorderProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: GalvynBorderGradient;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const GradientBorder: React.ForwardRefExoticComponent<GradientBorderProps & React.RefAttributes<HTMLDivElement>>;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: GalvynVariant;
+    size?: GalvynSize;
+    loading?: boolean;
+    icon?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    icon?: React.ReactNode;
+    mono?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'default' | 'accent' | 'success' | 'warning' | 'error';
+    size?: 'sm' | 'md';
+    dot?: boolean;
+}
+declare const Badge: React.FC<BadgeProps>;
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    border?: GalvynBorderGradient;
+    padding?: GalvynSize;
+    hover?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const Kbd: React.FC<React.HTMLAttributes<HTMLElement>>;
+interface StatusDotProps {
+    status: 'online' | 'offline' | 'warning' | 'error';
+    label?: string;
+    className?: string;
+}
+declare const StatusDot: React.FC<StatusDotProps>;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, GradientBorder, type GradientBorderProps, Input, type InputProps, Kbd, StatusDot, type StatusDotProps };

package/dist/components/index.js

@@ -0,0 +1,126 @@
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/index.tsx
+
+// src/tokens/index.ts
+function galvynBorderClass(variant = "subtle") {
+  if (variant === "none") return "";
+  const base = "galvyn-border-gradient";
+  if (variant === "subtle") return base;
+  if (variant === "shimmer") return `${base} galvyn-border-shimmer`;
+  return `${base} galvyn-border-gradient-${variant}`;
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var GradientBorder = forwardRef(
+  ({ variant = "subtle", className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(galvynBorderClass(variant), className),
+      ...props,
+      children
+    }
+  )
+);
+GradientBorder.displayName = "GradientBorder";
+var BUTTON_VARIANT_CLASSES = {
+  default: "galvyn-btn-default",
+  secondary: "galvyn-btn-secondary",
+  ghost: "galvyn-btn-ghost",
+  accent: "galvyn-btn-accent",
+  danger: "galvyn-btn-danger"
+};
+var BUTTON_SIZE_CLASSES = {
+  sm: "galvyn-btn-sm",
+  md: "galvyn-btn-md",
+  lg: "galvyn-btn-lg"
+};
+var Button = forwardRef(
+  ({ variant = "default", size = "md", loading, icon, children, className, disabled, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      className: cn(
+        "galvyn-btn",
+        BUTTON_VARIANT_CLASSES[variant],
+        BUTTON_SIZE_CLASSES[size],
+        "galvyn-focus-ring galvyn-transition",
+        className
+      ),
+      disabled: loading || disabled,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx(Spinner, {}),
+        icon && !loading && /* @__PURE__ */ jsx("span", { className: "galvyn-btn-icon", children: icon }),
+        children
+      ]
+    }
+  )
+);
+Button.displayName = "Button";
+var Input = forwardRef(
+  ({ label, hint, error, icon, mono, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "galvyn-input-wrapper", children: [
+    label && /* @__PURE__ */ jsx("label", { className: "galvyn-input-label", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: cn("galvyn-input-container", error && "galvyn-input-error"), children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "galvyn-input-icon", children: icon }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          className: cn(
+            "galvyn-input galvyn-focus-ring",
+            mono && "galvyn-input-mono",
+            className
+          ),
+          "aria-invalid": !!error,
+          ...props
+        }
+      )
+    ] }),
+    (hint || error) && /* @__PURE__ */ jsx("span", { className: cn("galvyn-input-hint", error && "galvyn-input-hint-error"), children: error || hint })
+  ] })
+);
+Input.displayName = "Input";
+var Badge = ({
+  variant = "default",
+  size = "sm",
+  dot = false,
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs("span", { className: cn(`galvyn-badge galvyn-badge-${variant} galvyn-badge-${size}`, className), ...props, children: [
+  dot && /* @__PURE__ */ jsx("span", { className: "galvyn-badge-dot" }),
+  children
+] });
+var Card = forwardRef(
+  ({ border = "subtle", padding = "md", hover = false, className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "galvyn-card",
+        `galvyn-card-pad-${padding}`,
+        hover && "galvyn-card-hover",
+        galvynBorderClass(border),
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+Card.displayName = "Card";
+var Kbd = ({ children, className, ...props }) => /* @__PURE__ */ jsx("kbd", { className: cn("galvyn-kbd", className), ...props, children });
+var StatusDot = ({ status, label, className }) => /* @__PURE__ */ jsxs("span", { className: cn("galvyn-status", className), children: [
+  /* @__PURE__ */ jsx("span", { className: `galvyn-status-dot galvyn-status-dot-${status}` }),
+  label && /* @__PURE__ */ jsx("span", { className: "galvyn-status-label", children: label })
+] });
+var Spinner = () => /* @__PURE__ */ jsxs("svg", { className: "galvyn-spinner", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M12.5 7a5.5 5.5 0 00-5.5-5.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+] });
+
+export { Badge, Button, Card, GradientBorder, Input, Kbd, StatusDot };