@omnikit-js/ui 0.3.9 → 0.4.3

package/README.md

@@ -21,8 +21,7 @@ npm install @omnikit-js/ui
 
 ### Setup
 
-Since your app already uses Tailwind CSS, just add our component to your `tailwind.config.js`:
-
+1. Add our component to your `tailwind.config.js`:
 ```js
 module.exports = {
   content: [
@@ -36,7 +35,12 @@ module.exports = {
 }
 ```
 
-**That's it!** No CSS imports needed. The component will use your existing Tailwind configuration.
+2. Import the component-specific styles:
+```tsx
+import '@omnikit-js/ui/styles.css';
+```
+
+**That's it!** The component will use your existing Tailwind configuration plus essential component-specific styles.
 
 ## Prerequisites
 

package/dist/styles.css

@@ -0,0 +1,87 @@
+/* Essential component-specific styles only */
+
+/* Pricing text styles */
+.omnikit-price-text {
+  font-size: 2rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+.omnikit-price-units {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #6b7280;
+  font-weight: 400;
+  margin-left: 0.25rem;
+}
+
+/* Feature value styles */
+.omnikit-feature-value {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.omnikit-feature-units {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 400;
+}
+
+.omnikit-feature-name {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+  cursor: help;
+}
+
+/* Boolean feature icons */
+.omnikit-feature-value .omnikit-boolean-true {
+  color: #22c55e;
+}
+
+.omnikit-feature-value .omnikit-boolean-false {
+  color: #ef4444;
+}
+
+/* Progress bar specific styles */
+.omnikit-progress-fill-red { background-color: #ef4444; }
+.omnikit-progress-fill-orange { background-color: #f97316; }
+.omnikit-progress-fill-yellow { background-color: #eab308; }
+.omnikit-progress-fill-green { background-color: #22c55e; }
+
+/* Usage status colors that might not be in standard Tailwind */
+.omnikit-usage-red { color: #dc2626; }
+.omnikit-usage-orange { color: #ea580c; }
+.omnikit-usage-yellow { color: #d97706; }
+.omnikit-usage-green { color: #16a34a; }
+
+/* Background colors for usage indicators */
+.omnikit-bg-red-100 { background-color: #fee2e2; }
+.omnikit-bg-orange-100 { background-color: #ffedd5; }
+.omnikit-bg-yellow-100 { background-color: #fef3c7; }
+.omnikit-bg-green-100 { background-color: #dcfce7; }
+
+/* Dark mode variants */
+@media (prefers-color-scheme: dark) {
+  .omnikit-usage-red { color: #f87171; }
+  .omnikit-usage-orange { color: #fb923c; }
+  .omnikit-usage-yellow { color: #facc15; }
+  .omnikit-usage-green { color: #4ade80; }
+  
+  .omnikit-bg-red-100 { background-color: #450a0a; }
+  .omnikit-bg-orange-100 { background-color: #431407; }
+  .omnikit-bg-yellow-100 { background-color: #451a03; }
+  .omnikit-bg-green-100 { background-color: #14532d; }
+  
+  .omnikit-feature-value { color: #ffffff; }
+  .omnikit-feature-units { color: #9ca3af; }
+  .omnikit-feature-name { color: #9ca3af; }
+  .omnikit-price-units { color: #9ca3af; }
+  
+  .omnikit-feature-value .omnikit-boolean-true { color: #4ade80; }
+  .omnikit-feature-value .omnikit-boolean-false { color: #f87171; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnikit-js/ui",
-  "version": "0.3.9",
+  "version": "0.4.3",
   "description": "A SaaS billing component for Next.js with Stripe integration",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -10,13 +10,16 @@
       "types": "./src/index.ts",
       "import": "./src/index.ts",
       "require": "./src/index.ts"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
-    "src"
+    "src",
+    "dist/styles.css"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && npm run build:css",
+    "build:css": "postcss src/styles/globals.css -o dist/styles.css",
     "dev": "rollup -c -w",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepublishOnly": "npm run build"
@@ -76,6 +79,7 @@
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.17.2",

package/src/components/BillingClient.tsx

@@ -156,10 +156,10 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
   const formatFeatureValue = (value: any) => {
     // Handle string boolean values
     if (value === 'true' || value === true) {
-      return '✓'
+      return <span className="omnikit-boolean-true">✓</span>
     }
     if (value === 'false' || value === false) {
-      return '✗'
+      return <span className="omnikit-boolean-false">✗</span>
     }
     // Handle numeric values (both string and number)
     const numValue = typeof value === 'string' ? parseFloat(value) : value
@@ -440,15 +440,15 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
                 
                 const getStatusIcon = (percent: number, withinLimit: boolean) => {
                   if (!withinLimit || percent >= 90) {
-                    return <AlertCircle className="h-4 w-4 text-red-600 dark:text-red-400" />;
+                    return <AlertCircle className="h-4 w-4 omnikit-usage-red" />;
                   }
                   if (percent >= 75) {
-                    return <AlertTriangle className="h-4 w-4 text-orange-600 dark:text-orange-400" />;
+                    return <AlertTriangle className="h-4 w-4 omnikit-usage-orange" />;
                   }
                   if (percent >= 50) {
-                    return <Info className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />;
+                    return <Info className="h-4 w-4 omnikit-usage-yellow" />;
                   }
-                  return <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />;
+                  return <CheckCircle className="h-4 w-4 omnikit-usage-green" />;
                 };
                 
                 return (
@@ -532,11 +532,11 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
                   <CardContent className="text-center pb-4 flex-1">
                     <div className="mb-4">
                       <div className="flex items-baseline justify-center">
-                        <span className="text-3xl font-bold tracking-tight">
+                        <span className="omnikit-price-text">
                           {parseFloat(price?.unit_amount) === 0 ? 'Free' : `$${parseFloat(price?.unit_amount).toFixed(2).replace(/\.00$/, '')}`}
                         </span>
                         {parseFloat(price?.unit_amount) > 0 && (
-                          <span className="ml-1 text-sm text-muted-foreground">/month</span>
+                          <span className="omnikit-price-units">/month</span>
                         )}
                       </div>
                       {isCurrentPlan ? (
@@ -548,13 +548,13 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
                     <div className="space-y-3 flex-1 flex flex-col justify-between min-h-[300px]">
                       {features.map((feature: any) => (
                         <div key={feature.id} className="border-t pt-3 first:border-t-0 first:pt-0 flex-1 flex flex-col justify-center">
-                          <div className="text-lg font-semibold text-foreground">
-                            {formatFeatureValue(feature.value)} <span className="text-sm text-gray-500 font-normal">{feature.units}</span>
+                          <div className="omnikit-feature-value">
+                            {formatFeatureValue(feature.value)} <span className="omnikit-feature-units">{feature.units}</span>
                           </div>
                           <TooltipProvider>
                             <Tooltip>
                               <TooltipTrigger asChild>
-                                <div className="text-xs text-gray-500 mt-1 cursor-help">
+                                <div className="omnikit-feature-name">
                                   {feature.name || feature.description}
                                 </div>
                               </TooltipTrigger>

package/src/components/SubscriptionConfirmModal.tsx

@@ -49,10 +49,10 @@ export default function SubscriptionConfirmModal({
   const formatFeatureValue = (value: any) => {
     // Handle string boolean values
     if (value === 'true' || value === true) {
-      return '✓'
+      return <span className="omnikit-boolean-true">✓</span>
     }
     if (value === 'false' || value === false) {
-      return '✗'
+      return <span className="omnikit-boolean-false">✗</span>
     }
     // Handle numeric values (both string and number)
     const numValue = typeof value === 'string' ? parseFloat(value) : value

package/src/styles/globals.css

@@ -1,3 +1,87 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* Essential component-specific styles only */
+
+/* Pricing text styles */
+.omnikit-price-text {
+  font-size: 2rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+.omnikit-price-units {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #6b7280;
+  font-weight: 400;
+  margin-left: 0.25rem;
+}
+
+/* Feature value styles */
+.omnikit-feature-value {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.omnikit-feature-units {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 400;
+}
+
+.omnikit-feature-name {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+  cursor: help;
+}
+
+/* Boolean feature icons */
+.omnikit-feature-value .omnikit-boolean-true {
+  color: #22c55e;
+}
+
+.omnikit-feature-value .omnikit-boolean-false {
+  color: #ef4444;
+}
+
+/* Progress bar specific styles */
+.omnikit-progress-fill-red { background-color: #ef4444; }
+.omnikit-progress-fill-orange { background-color: #f97316; }
+.omnikit-progress-fill-yellow { background-color: #eab308; }
+.omnikit-progress-fill-green { background-color: #22c55e; }
+
+/* Usage status colors that might not be in standard Tailwind */
+.omnikit-usage-red { color: #dc2626; }
+.omnikit-usage-orange { color: #ea580c; }
+.omnikit-usage-yellow { color: #d97706; }
+.omnikit-usage-green { color: #16a34a; }
+
+/* Background colors for usage indicators */
+.omnikit-bg-red-100 { background-color: #fee2e2; }
+.omnikit-bg-orange-100 { background-color: #ffedd5; }
+.omnikit-bg-yellow-100 { background-color: #fef3c7; }
+.omnikit-bg-green-100 { background-color: #dcfce7; }
+
+/* Dark mode variants */
+@media (prefers-color-scheme: dark) {
+  .omnikit-usage-red { color: #f87171; }
+  .omnikit-usage-orange { color: #fb923c; }
+  .omnikit-usage-yellow { color: #facc15; }
+  .omnikit-usage-green { color: #4ade80; }
+  
+  .omnikit-bg-red-100 { background-color: #450a0a; }
+  .omnikit-bg-orange-100 { background-color: #431407; }
+  .omnikit-bg-yellow-100 { background-color: #451a03; }
+  .omnikit-bg-green-100 { background-color: #14532d; }
+  
+  .omnikit-feature-value { color: #ffffff; }
+  .omnikit-feature-units { color: #9ca3af; }
+  .omnikit-feature-name { color: #9ca3af; }
+  .omnikit-price-units { color: #9ca3af; }
+  
+  .omnikit-feature-value .omnikit-boolean-true { color: #4ade80; }
+  .omnikit-feature-value .omnikit-boolean-false { color: #f87171; }
+}