@omnikit-js/ui 0.4.0 → 0.4.3

package/README.md

@@ -37,7 +37,7 @@ module.exports = {
 
 2. Import the component-specific styles:
 ```tsx
-import '@omnikit-js/ui/component.css';
+import '@omnikit-js/ui/styles.css';
 ```
 
 **That's it!** The component will use your existing Tailwind configuration plus essential component-specific styles.

package/{component.css → dist/styles.css}

@@ -2,8 +2,8 @@
 
 /* Pricing text styles */
 .omnikit-price-text {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
+  font-size: 2rem;
+  line-height: 1;
   font-weight: 700;
   letter-spacing: -0.025em;
 }
@@ -38,6 +38,15 @@
   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; }
@@ -72,4 +81,7 @@
   .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.4.0",
+  "version": "0.4.3",
   "description": "A SaaS billing component for Next.js with Stripe integration",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -11,14 +11,15 @@
       "import": "./src/index.ts",
       "require": "./src/index.ts"
     },
-    "./component.css": "./component.css"
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "src",
-    "component.css"
+    "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"
@@ -78,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

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; }
+}