@moveindustries/movement-design-system 1.0.0

package/dist/lib/border-styles.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Gradient Border Recipes
+ *
+ * CSS classes for gradient borders using mask technique.
+ * The styles are defined in recipes.css and automatically available when the design system is imported.
+ *
+ * Usage:
+ * import { gradientBorderClasses } from "@movementlabsxyz/movement-design-system";
+ *
+ * <div className={gradientBorderClasses.glow}>Content</div>
+ */
+export declare const gradientBorderClasses: {
+    readonly glow: "gradient-border-glow";
+    readonly error: "gradient-border-error";
+    readonly iridescent: "gradient-border-iridescent";
+    readonly diagonal: "gradient-border-diagonal";
+};
+/**
+ * Glass Background Recipes
+ *
+ * CSS classes for glass morphism backgrounds with backdrop blur.
+ * The styles are defined in recipes.css and automatically available when the design system is imported.
+ *
+ * Usage:
+ * import { glassBackgroundClasses } from "@movementlabsxyz/movement-design-system";
+ *
+ * <div className={glassBackgroundClasses.dark}>Content</div>
+ */
+export declare const glassBackgroundClasses: {
+    readonly dark: "glass-background-dark";
+    readonly light: "glass-background-light";
+};
+//# sourceMappingURL=border-styles.d.ts.map

package/dist/lib/border-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-styles.d.ts","sourceRoot":"","sources":["../../src/lib/border-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,qBAAqB;;;;;CAKxB,CAAC;AAEX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB;;;CAGzB,CAAC"}

package/dist/lib/global-toast.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Global toast utilities for application-wide notifications.
+ *
+ * Usage:
+ * 1. Import and place <GlobalToaster /> once at your app root
+ * 2. Import toast functions anywhere in your app to trigger notifications
+ *
+ * @example
+ * ```tsx
+ * // At app root (App.tsx, _app.tsx, etc.)
+ * import { GlobalToaster } from '@movement-ds/ui';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <GlobalToaster />
+ *       <YourApp />
+ *     </>
+ *   );
+ * }
+ *
+ * // Anywhere in your app
+ * import { toast } from '@movement-ds/ui';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <button onClick={() => toast.success('Action completed!')}>
+ *       Click me
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export { Toaster as GlobalToaster, toast } from '../components/shadcn/sonner';
+//# sourceMappingURL=global-toast.d.ts.map

package/dist/lib/global-toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-toast.d.ts","sourceRoot":"","sources":["../../src/lib/global-toast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/lib/gradient-styles.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Gradient Background Recipes
+ *
+ * CSS classes for gradient backgrounds.
+ * The styles are defined in recipes.css and automatically available when the design system is imported.
+ *
+ * Usage:
+ * import { gradientBackgroundClasses } from "@movementlabsxyz/movement-design-system";
+ *
+ * <div className={gradientBackgroundClasses.mintCyan}>Content</div>
+ */
+export declare const gradientBackgroundClasses: {
+    readonly mintCyan: "gradient-mint-cyan";
+    readonly glassOverlay: "gradient-glass-overlay";
+};
+/**
+ * Utility function to get gradient background class names
+ *
+ * @param variant - The gradient variant to use
+ * @returns The CSS class name for the gradient
+ */
+export declare const getGradientClass: (variant: keyof typeof gradientBackgroundClasses) => "gradient-mint-cyan" | "gradient-glass-overlay";
+//# sourceMappingURL=gradient-styles.d.ts.map

package/dist/lib/gradient-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-styles.d.ts","sourceRoot":"","sources":["../../src/lib/gradient-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,yBAAyB;;;CAG5B,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,OAAO,yBAAyB,oDAE/E,CAAC"}

package/dist/lib/scales.d.ts

@@ -0,0 +1,335 @@
+/**
+ * Theme Scale Tokens
+ * These match the CSS custom properties defined in src/theme.css
+ */
+export declare const spacing: {
+    readonly 0: {
+        readonly value: "0px";
+    };
+    readonly 1: {
+        readonly value: "4px";
+    };
+    readonly 2: {
+        readonly value: "8px";
+    };
+    readonly 3: {
+        readonly value: "12px";
+    };
+    readonly 4: {
+        readonly value: "16px";
+    };
+    readonly 5: {
+        readonly value: "20px";
+    };
+    readonly 6: {
+        readonly value: "24px";
+    };
+    readonly 7: {
+        readonly value: "28px";
+    };
+    readonly 8: {
+        readonly value: "32px";
+    };
+    readonly 9: {
+        readonly value: "36px";
+    };
+    readonly 10: {
+        readonly value: "40px";
+    };
+    readonly 12: {
+        readonly value: "48px";
+    };
+    readonly 14: {
+        readonly value: "56px";
+    };
+    readonly 16: {
+        readonly value: "64px";
+    };
+    readonly 20: {
+        readonly value: "80px";
+    };
+    readonly 24: {
+        readonly value: "96px";
+    };
+    readonly 28: {
+        readonly value: "112px";
+    };
+    readonly 32: {
+        readonly value: "128px";
+    };
+    readonly 36: {
+        readonly value: "144px";
+    };
+    readonly 40: {
+        readonly value: "160px";
+    };
+    readonly 44: {
+        readonly value: "176px";
+    };
+    readonly 48: {
+        readonly value: "192px";
+    };
+    readonly 52: {
+        readonly value: "208px";
+    };
+    readonly 56: {
+        readonly value: "224px";
+    };
+    readonly 60: {
+        readonly value: "240px";
+    };
+    readonly 64: {
+        readonly value: "256px";
+    };
+    readonly 72: {
+        readonly value: "288px";
+    };
+    readonly 80: {
+        readonly value: "320px";
+    };
+    readonly 96: {
+        readonly value: "384px";
+    };
+    readonly 100: {
+        readonly value: "400px";
+    };
+    readonly px: {
+        readonly value: "1px";
+    };
+};
+export declare const sizes: {
+    readonly prose: {
+        readonly value: "65ch";
+    };
+    readonly full: {
+        readonly value: "100%";
+    };
+    readonly min: {
+        readonly value: "min-content";
+    };
+    readonly max: {
+        readonly value: "max-content";
+    };
+    readonly fit: {
+        readonly value: "fit-content";
+    };
+    readonly 0: {
+        readonly value: "0px";
+    };
+    readonly 1: {
+        readonly value: "4px";
+    };
+    readonly 2: {
+        readonly value: "8px";
+    };
+    readonly 3: {
+        readonly value: "12px";
+    };
+    readonly 4: {
+        readonly value: "16px";
+    };
+    readonly 5: {
+        readonly value: "20px";
+    };
+    readonly 6: {
+        readonly value: "24px";
+    };
+    readonly 7: {
+        readonly value: "28px";
+    };
+    readonly 8: {
+        readonly value: "32px";
+    };
+    readonly 9: {
+        readonly value: "36px";
+    };
+    readonly 10: {
+        readonly value: "40px";
+    };
+    readonly 12: {
+        readonly value: "48px";
+    };
+    readonly 14: {
+        readonly value: "56px";
+    };
+    readonly 16: {
+        readonly value: "64px";
+    };
+    readonly 20: {
+        readonly value: "80px";
+    };
+    readonly 24: {
+        readonly value: "96px";
+    };
+    readonly 28: {
+        readonly value: "112px";
+    };
+    readonly 32: {
+        readonly value: "128px";
+    };
+    readonly 36: {
+        readonly value: "144px";
+    };
+    readonly 40: {
+        readonly value: "160px";
+    };
+    readonly 44: {
+        readonly value: "176px";
+    };
+    readonly 48: {
+        readonly value: "192px";
+    };
+    readonly 52: {
+        readonly value: "208px";
+    };
+    readonly 56: {
+        readonly value: "224px";
+    };
+    readonly 60: {
+        readonly value: "240px";
+    };
+    readonly 64: {
+        readonly value: "256px";
+    };
+    readonly 72: {
+        readonly value: "288px";
+    };
+    readonly 80: {
+        readonly value: "320px";
+    };
+    readonly 96: {
+        readonly value: "384px";
+    };
+    readonly 100: {
+        readonly value: "400px";
+    };
+    readonly px: {
+        readonly value: "1px";
+    };
+};
+export declare const radii: {
+    readonly sm: {
+        readonly value: "2px";
+    };
+    readonly base: {
+        readonly value: "4px";
+    };
+    readonly md: {
+        readonly value: "6px";
+    };
+    readonly lg: {
+        readonly value: "8px";
+    };
+    readonly xl: {
+        readonly value: "12px";
+    };
+    readonly "2xl": {
+        readonly value: "16px";
+    };
+    readonly "3xl": {
+        readonly value: "24px";
+    };
+    readonly full: {
+        readonly value: "9999px";
+    };
+};
+export declare const borderWidths: {
+    readonly 0: {
+        readonly value: "0px";
+    };
+    readonly 1: {
+        readonly value: "1px";
+    };
+    readonly 2: {
+        readonly value: "2px";
+    };
+    readonly 3: {
+        readonly value: "3px";
+    };
+    readonly 4: {
+        readonly value: "4px";
+    };
+    readonly 5: {
+        readonly value: "5px";
+    };
+    readonly 6: {
+        readonly value: "6px";
+    };
+    readonly 7: {
+        readonly value: "7px";
+    };
+    readonly 8: {
+        readonly value: "8px";
+    };
+};
+export declare const shadows: {
+    readonly xs: {
+        readonly value: "0 0 0 1px #0000000d";
+    };
+    readonly sm: {
+        readonly value: "0 1px 2px 0 #0000000d";
+    };
+    readonly base: {
+        readonly value: "0 1px 2px 0 #0000000d, 0 1px 3px 0 #0000000d";
+    };
+    readonly md: {
+        readonly value: "0 2px 4px -1px #00000005, 0 4px 6px -1px #00000014";
+    };
+    readonly lg: {
+        readonly value: "0 4px 6px -2px #00000005, 0 10px 15px -3px #0000000d";
+    };
+    readonly xl: {
+        readonly value: "0 10px 10px -5px #00000005, 0 20px 25px -5px #0000000d";
+    };
+    readonly "2xl": {
+        readonly value: "0 25px 50px -12px #00000040";
+    };
+    readonly inner: {
+        readonly value: "inset 0 2px 4px 0 #00000006";
+    };
+    readonly none: {
+        readonly value: "none";
+    };
+};
+export declare const zIndex: {
+    readonly hide: {
+        readonly value: -1;
+    };
+    readonly auto: {
+        readonly value: "auto";
+    };
+    readonly base: {
+        readonly value: 0;
+    };
+    readonly docked: {
+        readonly value: 10;
+    };
+    readonly dropdown: {
+        readonly value: 1000;
+    };
+    readonly sticky: {
+        readonly value: 1100;
+    };
+    readonly banner: {
+        readonly value: 1200;
+    };
+    readonly overlay: {
+        readonly value: 1300;
+    };
+    readonly modal: {
+        readonly value: 1400;
+    };
+    readonly popover: {
+        readonly value: 1500;
+    };
+    readonly skipLink: {
+        readonly value: 1600;
+    };
+    readonly toast: {
+        readonly value: 1700;
+    };
+    readonly tooltip: {
+        readonly value: 1800;
+    };
+};
+//# sourceMappingURL=scales.d.ts.map

package/dist/lib/scales.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../src/lib/scales.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCV,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOR,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;CASR,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUf,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUV,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcT,CAAC"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/recipes.css

@@ -0,0 +1,108 @@
+/**
+ * Styling Recipes
+ * Reusable CSS classes for common UI patterns
+ * These recipes can be applied via the exported class name objects in border-styles.ts and gradient-styles.ts
+ */
+
+/* ============================================================================
+ * GRADIENT BORDER RECIPES
+ * ============================================================================
+ * Create gradient borders using CSS mask technique
+ * These create a 1px border with gradient or solid colors
+ */
+
+.gradient-border-glow::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background: radial-gradient(59.92% 76.24% at 50% 50%, #81FFBA 0%, rgba(129, 255, 186, 0.00) 100%), 
+              radial-gradient(59.97% 79.12% at 50% 50%, #81FFBA 18.75%, rgba(129, 255, 186, 0.00) 100%), 
+              radial-gradient(76.68% 94.29% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+
+.gradient-border-iridescent::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background: linear-gradient(136deg, #81ffba, #00fff9);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.gradient-border-error {
+  position: relative;
+}
+
+.gradient-border-error::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background: #D82C2D;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.gradient-border-diagonal::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background: linear-gradient(160deg, rgba(129, 255, 186, 0.5), rgba(255, 255, 255, 0), rgba(129, 255, 186, 0.5));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+/* ============================================================================
+ * GLASS BACKGROUND RECIPES
+ * ============================================================================
+ * Glass morphism backgrounds with backdrop blur
+ */
+
+.glass-background-dark {
+  background: linear-gradient(153deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 100%);
+  backdrop-filter: blur(21px);
+  border: 1px solid rgba(255, 255, 255, 0.24);
+}
+
+.glass-background-light {
+  background: linear-gradient(153deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 100%);
+  backdrop-filter: blur(21px);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+/* ============================================================================
+ * GRADIENT BACKGROUND RECIPES
+ * ============================================================================
+ * Reusable gradient recipes for backgrounds
+ */
+
+.gradient-mint-cyan {
+  background: linear-gradient(130deg, #81FFBA 33.64%, #00FFF9 79.2%);
+}
+
+.gradient-glass-overlay {
+  background: linear-gradient(0deg, rgba(4, 5, 27, 0.20) 0%, rgba(4, 5, 27, 0.20) 100%), 
+              linear-gradient(153deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%), 
+              radial-gradient(100% 100% at 120.34% 112.85%, rgba(129, 255, 186, 0.40) 0%, rgba(0, 27, 133, 0.40) 100%);
+}
+