@omnikit-js/ui 0.3.3 → 0.3.4

package/README.md

@@ -29,21 +29,20 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-2. Import the component's CSS in your main CSS file or `layout.js`:
+2. Import the component's CSS file in your app:
+
+**In your `app/globals.css` or main CSS file:**
 ```css
 @import '@omnikit-js/ui/styles.css';
 ```
 
-Or in your `app/globals.css`:
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Import the component styles */
-@import '@omnikit-js/ui/styles.css';
+**Or in your layout file:**
+```tsx
+import '@omnikit-js/ui/styles.css';
 ```
 
+That's it! The component includes all necessary styles and works with or without Tailwind CSS.
+
 ## Prerequisites
 
 1. A Stripe account with API keys

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnikit-js/ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "A SaaS billing component for Next.js with Stripe integration",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/styles.css

@@ -1,3 +1,360 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* @omnikit-js/ui Component Styles */
+
+/* Base component styles */
+.omnikit-billing {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Card styles */
+.omnikit-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.omnikit-card-header {
+  padding: 1.5rem 1.5rem 0 1.5rem;
+}
+
+.omnikit-card-content {
+  padding: 1.5rem;
+}
+
+.omnikit-card-footer {
+  padding: 0 1.5rem 1.5rem 1.5rem;
+}
+
+/* Button styles */
+.omnikit-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.omnikit-button-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.omnikit-button-primary:hover {
+  background: #2563eb;
+}
+
+.omnikit-button-secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.omnikit-button-secondary:hover {
+  background: #e5e7eb;
+}
+
+.omnikit-button-outline {
+  background: transparent;
+  border-color: #d1d5db;
+  color: #374151;
+}
+
+.omnikit-button-outline:hover {
+  background: #f9fafb;
+}
+
+.omnikit-button-destructive {
+  background: #ef4444;
+  color: white;
+}
+
+.omnikit-button-destructive:hover {
+  background: #dc2626;
+}
+
+/* Pricing card styles */
+.omnikit-pricing-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .omnikit-pricing-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .omnikit-pricing-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1280px) {
+  .omnikit-pricing-grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.omnikit-pricing-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.omnikit-pricing-card.current {
+  border-color: #3b82f6;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.omnikit-pricing-card.popular {
+  border-color: rgba(59, 130, 246, 0.5);
+}
+
+/* Feature styles */
+.omnikit-feature-value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.omnikit-feature-units {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 400;
+}
+
+.omnikit-feature-name {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+  cursor: help;
+}
+
+/* Badge styles */
+.omnikit-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.omnikit-badge-secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+/* Progress bar styles */
+.omnikit-progress {
+  width: 100%;
+  height: 0.5rem;
+  background: #f3f4f6;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.omnikit-progress-fill {
+  height: 100%;
+  background: #3b82f6;
+  transition: width 0.3s ease;
+}
+
+/* Modal/Dialog styles */
+.omnikit-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+}
+
+.omnikit-dialog-content {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  max-width: 28rem;
+  width: 90vw;
+  z-index: 51;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+/* Tabs styles */
+.omnikit-tabs-list {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  background: #f3f4f6;
+  padding: 0.25rem;
+}
+
+.omnikit-tabs-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  color: #6b7280;
+  transition: all 0.2s;
+}
+
+.omnikit-tabs-trigger[data-state="active"] {
+  background: white;
+  color: #111827;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* Utility classes */
+.omnikit-text-muted {
+  color: #6b7280;
+}
+
+.omnikit-text-foreground {
+  color: #111827;
+}
+
+.omnikit-text-primary {
+  color: #3b82f6;
+}
+
+.omnikit-flex {
+  display: flex;
+}
+
+.omnikit-flex-col {
+  flex-direction: column;
+}
+
+.omnikit-flex-1 {
+  flex: 1 1 0%;
+}
+
+.omnikit-items-center {
+  align-items: center;
+}
+
+.omnikit-justify-center {
+  justify-content: center;
+}
+
+.omnikit-justify-between {
+  justify-content: space-between;
+}
+
+.omnikit-space-y-2 > * + * {
+  margin-top: 0.5rem;
+}
+
+.omnikit-space-y-3 > * + * {
+  margin-top: 0.75rem;
+}
+
+.omnikit-space-y-4 > * + * {
+  margin-top: 1rem;
+}
+
+.omnikit-mt-1 {
+  margin-top: 0.25rem;
+}
+
+.omnikit-mt-2 {
+  margin-top: 0.5rem;
+}
+
+.omnikit-mb-4 {
+  margin-bottom: 1rem;
+}
+
+.omnikit-p-4 {
+  padding: 1rem;
+}
+
+.omnikit-pt-2 {
+  padding-top: 0.5rem;
+}
+
+.omnikit-pt-3 {
+  padding-top: 0.75rem;
+}
+
+.omnikit-w-full {
+  width: 100%;
+}
+
+.omnikit-h-6 {
+  height: 1.5rem;
+}
+
+.omnikit-min-h-300 {
+  min-height: 300px;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .omnikit-card {
+    background: #1f2937;
+    border-color: #374151;
+    color: white;
+  }
+  
+  .omnikit-feature-value {
+    color: white;
+  }
+  
+  .omnikit-text-foreground {
+    color: white;
+  }
+  
+  .omnikit-button-secondary {
+    background: #374151;
+    color: #d1d5db;
+  }
+  
+  .omnikit-button-secondary:hover {
+    background: #4b5563;
+  }
+  
+  .omnikit-button-outline {
+    border-color: #4b5563;
+    color: #d1d5db;
+  }
+  
+  .omnikit-button-outline:hover {
+    background: #374151;
+  }
+  
+  .omnikit-dialog-content {
+    background: #1f2937;
+    color: white;
+  }
+  
+  .omnikit-tabs-list {
+    background: #374151;
+  }
+  
+  .omnikit-tabs-trigger {
+    color: #9ca3af;
+  }
+  
+  .omnikit-tabs-trigger[data-state="active"] {
+    background: #1f2937;
+    color: white;
+  }
+}