@omnikit-js/ui 0.4.5 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnikit-js/ui",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "A SaaS billing component for Next.js with Stripe integration",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -10,16 +10,13 @@
       "types": "./src/index.ts",
       "import": "./src/index.ts",
       "require": "./src/index.ts"
-    },
-    "./styles.css": "./dist/styles.css"
+    }
   },
   "files": [
-    "src",
-    "dist/styles.css"
+    "src"
   ],
   "scripts": {
-    "build": "rollup -c && npm run build:css",
-    "build:css": "postcss src/styles/globals.css -o dist/styles.css",
+    "build": "rollup -c",
     "dev": "rollup -c -w",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepublishOnly": "npm run build"

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 <span className="omnikit-boolean-true">✓</span>
+      return <span className="text-green-500 font-semibold">✓</span>
     }
     if (value === 'false' || value === false) {
-      return <span className="omnikit-boolean-false">✗</span>
+      return <span className="text-red-500 font-semibold">✗</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 omnikit-usage-red" />;
+                    return <AlertCircle className="h-4 w-4 text-red-500" />;
                   }
                   if (percent >= 75) {
-                    return <AlertTriangle className="h-4 w-4 omnikit-usage-orange" />;
+                    return <AlertTriangle className="h-4 w-4 text-orange-500" />;
                   }
                   if (percent >= 50) {
-                    return <Info className="h-4 w-4 omnikit-usage-yellow" />;
+                    return <Info className="h-4 w-4 text-yellow-500" />;
                   }
-                  return <CheckCircle className="h-4 w-4 omnikit-usage-green" />;
+                  return <CheckCircle className="h-4 w-4 text-green-500" />;
                 };
                 
                 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="omnikit-price-text">
+                        <span className="text-3xl font-bold">
                           {parseFloat(price?.unit_amount) === 0 ? 'Free' : `$${parseFloat(price?.unit_amount).toFixed(2).replace(/\.00$/, '')}`}
                         </span>
                         {parseFloat(price?.unit_amount) > 0 && (
-                          <span className="omnikit-price-units">/month</span>
+                          <span className="text-sm text-muted-foreground font-normal ml-1">/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="omnikit-feature-value">
-                            {formatFeatureValue(feature.value)} <span className="omnikit-feature-units">{feature.units}</span>
+                          <div className="text-lg font-semibold text-foreground">
+                            {formatFeatureValue(feature.value)} <span className="text-sm text-muted-foreground font-normal">{feature.units}</span>
                           </div>
                           <TooltipProvider>
                             <Tooltip>
                               <TooltipTrigger asChild>
-                                <div className="omnikit-feature-name">
+                                <div className="text-xs text-muted-foreground mt-1 cursor-help">
                                   {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 <span className="omnikit-boolean-true">✓</span>
+      return <span className="text-green-500 font-semibold">✓</span>
     }
     if (value === 'false' || value === false) {
-      return <span className="omnikit-boolean-false">✗</span>
+      return <span className="text-red-500 font-semibold">✗</span>
     }
     // Handle numeric values (both string and number)
     const numValue = typeof value === 'string' ? parseFloat(value) : value
@@ -129,9 +129,9 @@ export default function SubscriptionConfirmModal({
         <div className="space-y-4">
           <Card className="p-4">
             <h4 className="font-medium mb-2">{plan.name}</h4>
-            <p className="text-2xl font-bold mb-2">
+            <p className="text-3xl font-bold mb-2">
               {isFree ? 'Free' : formatCurrency(parseFloat(price.unit_amount) * 100)}
-              {!isFree && <span className="text-sm font-normal text-muted-foreground">/month</span>}
+              {!isFree && <span className="text-sm font-normal text-muted-foreground ml-1">/month</span>}
             </p>
             <ul className="space-y-1">
               {plan.features?.map((feature: any) => (
@@ -140,8 +140,8 @@ export default function SubscriptionConfirmModal({
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <span className="cursor-help">
-                          {formatFeatureValue(feature.value)} <span className="text-sm text-muted-foreground font-normal">{feature.units}</span> - {feature.name || feature.description}
+                        <span className="cursor-help text-foreground">
+                          <span className="font-semibold">{formatFeatureValue(feature.value)}</span> <span className="text-sm text-muted-foreground font-normal">{feature.units}</span> - {feature.name || feature.description}
                         </span>
                       </TooltipTrigger>
                       <TooltipContent>

package/src/styles/globals.css

@@ -19,8 +19,8 @@ span.omnikit-price-text {
 
 /* Feature value styles */
 div.omnikit-feature-value {
-  font-size: 1.125rem !important;
-  line-height: 1.75rem !important;
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
   font-weight: 600 !important;
   color: #111827 !important;
   display: block !important;
@@ -43,12 +43,12 @@ div.omnikit-feature-value {
 /* Boolean feature icons */
 div.omnikit-feature-value span.omnikit-boolean-true {
   color: #22c55e !important;
-  font-size: 1.125rem !important;
+  font-size: 1rem !important;
 }
 
 div.omnikit-feature-value span.omnikit-boolean-false {
   color: #ef4444 !important;
-  font-size: 1.125rem !important;
+  font-size: 1rem !important;
 }
 
 /* Progress bar specific styles */

package/dist/styles.css

@@ -1,91 +0,0 @@
-/* Essential component-specific styles only */
-
-/* Pricing text styles */
-span.omnikit-price-text {
-  font-size: 2rem !important;
-  line-height: 1 !important;
-  font-weight: 700 !important;
-  letter-spacing: -0.025em !important;
-  display: inline-block !important;
-}
-
-.omnikit-price-units {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: #6b7280;
-  font-weight: 400;
-  margin-left: 0.25rem;
-}
-
-/* Feature value styles */
-div.omnikit-feature-value {
-  font-size: 1.125rem !important;
-  line-height: 1.75rem !important;
-  font-weight: 600 !important;
-  color: #111827 !important;
-  display: block !important;
-}
-
-.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 */
-div.omnikit-feature-value span.omnikit-boolean-true {
-  color: #22c55e !important;
-  font-size: 1.125rem !important;
-}
-
-div.omnikit-feature-value span.omnikit-boolean-false {
-  color: #ef4444 !important;
-  font-size: 1.125rem !important;
-}
-
-/* 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; }
-}