@memelabui/ui 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,5 @@
1
1
  'use strict';
2
2
 
3
- var plugin = require('tailwindcss/plugin');
4
-
5
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
6
-
7
- var plugin__default = /*#__PURE__*/_interopDefault(plugin);
8
-
9
3
  // src/preset/index.ts
10
4
  var memelabPreset = {
11
5
  darkMode: "class",
@@ -61,7 +55,8 @@ var memelabPreset = {
61
55
  "fade-up-delayed": "ml-fade-up 0.8s ease-out 0.2s forwards",
62
56
  "modal-backdrop": "ml-modal-backdrop 140ms ease-out both",
63
57
  "modal-pop": "ml-modal-pop 160ms cubic-bezier(0.22,1,0.36,1) both",
64
- shimmer: "ml-shimmer 2s ease-in-out infinite"
58
+ shimmer: "ml-shimmer 2s ease-in-out infinite",
59
+ spin: "ml-spin 1s linear infinite"
65
60
  },
66
61
  keyframes: {
67
62
  "ml-float": {
@@ -92,47 +87,20 @@ var memelabPreset = {
92
87
  "ml-shimmer": {
93
88
  "0%": { transform: "translateX(-200%)" },
94
89
  "100%": { transform: "translateX(200%)" }
90
+ },
91
+ "ml-spin": {
92
+ from: { transform: "rotate(0deg)" },
93
+ to: { transform: "rotate(360deg)" }
95
94
  }
96
95
  }
97
96
  }
98
- },
99
- plugins: [
100
- plugin__default.default(function({ addComponents }) {
101
- addComponents({
102
- ".glass": {
103
- borderRadius: "var(--ml-radius-md, 0.75rem)",
104
- background: "var(--ml-glass-bg, rgba(255, 255, 255, 0.05))",
105
- backdropFilter: "blur(var(--ml-glass-blur, 16px))",
106
- WebkitBackdropFilter: "blur(var(--ml-glass-blur, 16px))",
107
- boxShadow: "0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 1px var(--ml-glass-border, rgba(255,255,255,0.1))"
108
- },
109
- ".surface": {
110
- borderRadius: "var(--ml-radius-md, 0.75rem)",
111
- background: "rgba(255, 255, 255, 0.06)",
112
- backdropFilter: "blur(12px)",
113
- WebkitBackdropFilter: "blur(12px)",
114
- boxShadow: "var(--ml-shadow-surface, 0 1px 3px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.08))"
115
- },
116
- ".surface-hover": {
117
- transition: "box-shadow var(--ml-transition-fast, 150ms ease)",
118
- "&:hover": {
119
- boxShadow: "var(--ml-shadow-surface-hover, 0 10px 25px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.09))"
120
- }
121
- },
122
- ".text-gradient": {
123
- background: "linear-gradient(135deg, var(--ml-accent,#667eea) 0%, var(--ml-glow-purple,#764ba2) 50%, var(--ml-glow-pink,#f093fb) 100%)",
124
- WebkitBackgroundClip: "text",
125
- WebkitTextFillColor: "transparent",
126
- backgroundClip: "text"
127
- },
128
- ".animated-gradient": {
129
- background: "linear-gradient(270deg, var(--ml-accent,#667eea), var(--ml-glow-purple,#764ba2), var(--ml-glow-pink,#f093fb))",
130
- backgroundSize: "400% 400%",
131
- animation: "ml-gradient 15s ease infinite"
132
- }
133
- });
134
- })
135
- ]
97
+ }
98
+ /*
99
+ * Component classes (.glass, .surface, .text-gradient, etc.) are defined in
100
+ * src/styles/components.css and shipped via @memelabui/ui/styles.
101
+ * They are NOT duplicated here to avoid double-injection when consumers
102
+ * use both the preset and the CSS import (the recommended setup).
103
+ */
136
104
  };
137
105
  var preset_default = memelabPreset;
138
106
 
@@ -1,5 +1,3 @@
1
- import plugin from 'tailwindcss/plugin';
2
-
3
1
  // src/preset/index.ts
4
2
  var memelabPreset = {
5
3
  darkMode: "class",
@@ -55,7 +53,8 @@ var memelabPreset = {
55
53
  "fade-up-delayed": "ml-fade-up 0.8s ease-out 0.2s forwards",
56
54
  "modal-backdrop": "ml-modal-backdrop 140ms ease-out both",
57
55
  "modal-pop": "ml-modal-pop 160ms cubic-bezier(0.22,1,0.36,1) both",
58
- shimmer: "ml-shimmer 2s ease-in-out infinite"
56
+ shimmer: "ml-shimmer 2s ease-in-out infinite",
57
+ spin: "ml-spin 1s linear infinite"
59
58
  },
60
59
  keyframes: {
61
60
  "ml-float": {
@@ -86,47 +85,20 @@ var memelabPreset = {
86
85
  "ml-shimmer": {
87
86
  "0%": { transform: "translateX(-200%)" },
88
87
  "100%": { transform: "translateX(200%)" }
88
+ },
89
+ "ml-spin": {
90
+ from: { transform: "rotate(0deg)" },
91
+ to: { transform: "rotate(360deg)" }
89
92
  }
90
93
  }
91
94
  }
92
- },
93
- plugins: [
94
- plugin(function({ addComponents }) {
95
- addComponents({
96
- ".glass": {
97
- borderRadius: "var(--ml-radius-md, 0.75rem)",
98
- background: "var(--ml-glass-bg, rgba(255, 255, 255, 0.05))",
99
- backdropFilter: "blur(var(--ml-glass-blur, 16px))",
100
- WebkitBackdropFilter: "blur(var(--ml-glass-blur, 16px))",
101
- boxShadow: "0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 1px var(--ml-glass-border, rgba(255,255,255,0.1))"
102
- },
103
- ".surface": {
104
- borderRadius: "var(--ml-radius-md, 0.75rem)",
105
- background: "rgba(255, 255, 255, 0.06)",
106
- backdropFilter: "blur(12px)",
107
- WebkitBackdropFilter: "blur(12px)",
108
- boxShadow: "var(--ml-shadow-surface, 0 1px 3px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.08))"
109
- },
110
- ".surface-hover": {
111
- transition: "box-shadow var(--ml-transition-fast, 150ms ease)",
112
- "&:hover": {
113
- boxShadow: "var(--ml-shadow-surface-hover, 0 10px 25px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.09))"
114
- }
115
- },
116
- ".text-gradient": {
117
- background: "linear-gradient(135deg, var(--ml-accent,#667eea) 0%, var(--ml-glow-purple,#764ba2) 50%, var(--ml-glow-pink,#f093fb) 100%)",
118
- WebkitBackgroundClip: "text",
119
- WebkitTextFillColor: "transparent",
120
- backgroundClip: "text"
121
- },
122
- ".animated-gradient": {
123
- background: "linear-gradient(270deg, var(--ml-accent,#667eea), var(--ml-glow-purple,#764ba2), var(--ml-glow-pink,#f093fb))",
124
- backgroundSize: "400% 400%",
125
- animation: "ml-gradient 15s ease infinite"
126
- }
127
- });
128
- })
129
- ]
95
+ }
96
+ /*
97
+ * Component classes (.glass, .surface, .text-gradient, etc.) are defined in
98
+ * src/styles/components.css and shipped via @memelabui/ui/styles.
99
+ * They are NOT duplicated here to avoid double-injection when consumers
100
+ * use both the preset and the CSS import (the recommended setup).
101
+ */
130
102
  };
131
103
  var preset_default = memelabPreset;
132
104