@omnikit-js/ui 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnikit-js/ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A SaaS billing component for Next.js with Stripe integration",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -35,9 +35,9 @@
     "access": "public"
   },
   "peerDependencies": {
+    "next": "^14.0.0 || ^15.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "next": "^14.0.0 || ^15.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.10",
@@ -52,6 +52,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@stripe/react-stripe-js": "^3.7.0",
     "@stripe/stripe-js": "^7.4.0",
     "class-variance-authority": "^0.7.1",
@@ -70,9 +71,9 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@types/node": "^20",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/node": "^20",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "react": "^18.3.1",

package/src/components/BillingClient.tsx

@@ -11,6 +11,7 @@ import { Progress } from "./ui/progress";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
 import { Check, CreditCard, FileText, AlertCircle, AlertTriangle, CheckCircle, Info, Loader2 } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import PaymentMethodForm from './PaymentMethodForm';
 import SubscriptionConfirmModal from './SubscriptionConfirmModal';
 import { CardBrandIcon } from './ui/card-brand-icon';
@@ -147,6 +148,16 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
   const [selectedPlan, setSelectedPlan] = useState<any>(null);
   const [activeTab, setActiveTab] = useState('overview');
   const router = useRouter();
+
+  const formatFeatureValue = (value: any) => {
+    if (typeof value === 'boolean') {
+      return value ? '✓' : '✗'
+    }
+    if (typeof value === 'number' && value >= 1000) {
+      return new Intl.NumberFormat('en-US').format(value)
+    }
+    return value
+  }
   
   const currentSubscription = customerData?.subscriptions?.[0];
   const currentPlanItem = currentSubscription?.items?.[0];
@@ -465,7 +476,7 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
         </TabsContent>
         
         <TabsContent value="plans" className="space-y-4">
-          <div className="grid gap-6 md:grid-cols-3">
+          <div className={`grid gap-4 ${pricingData?.products?.length === 3 ? 'md:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'}`}>
             {pricingData?.products?.map((product: any) => {
               const price = product.prices?.[0];
               const features = product.features || [];
@@ -499,38 +510,47 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
                       POPULAR
                     </div>
                   )}
-                  <CardHeader className="text-center pb-8 pt-6">
-                    <CardTitle className="text-xl font-semibold">{product.name}</CardTitle>
-                    <CardDescription className="mt-2">{product.description}</CardDescription>
+                  <CardHeader className="text-center pb-4 pt-4">
+                    <CardTitle className="text-lg font-semibold">{product.name}</CardTitle>
+                    <CardDescription className="mt-1 text-sm">{product.description}</CardDescription>
                   </CardHeader>
-                  <CardContent className="text-center pb-8">
-                    <div className="mb-8">
+                  <CardContent className="text-center pb-4">
+                    <div className="mb-4">
                       <div className="flex items-baseline justify-center">
-                        <span className="text-5xl font-bold tracking-tight">
+                        <span className="text-3xl font-bold tracking-tight">
                           {parseFloat(price?.unit_amount) === 0 ? 'Free' : `$${parseFloat(price?.unit_amount).toFixed(0)}`}
                         </span>
                         {parseFloat(price?.unit_amount) > 0 && (
-                          <span className="ml-1 text-lg text-muted-foreground">/month</span>
+                          <span className="ml-1 text-sm text-muted-foreground">/month</span>
                         )}
                       </div>
                       {isCurrentPlan && (
                         <Badge variant="secondary" className="mt-2">Current Plan</Badge>
                       )}
                     </div>
-                    <div className="space-y-4">
+                    <div className="space-y-2">
                       {features.map((feature: any) => (
-                        <div key={feature.id} className="border-t pt-4">
-                          <div className="text-2xl font-semibold text-foreground">
-                            {feature.value} {feature.units}
-                          </div>
-                          <div className="text-sm text-muted-foreground mt-1">
-                            {feature.description}
+                        <div key={feature.id} className="border-t pt-2">
+                          <div className="text-lg font-semibold text-foreground">
+                            {formatFeatureValue(feature.value)} {feature.units}
                           </div>
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <div className="text-xs text-muted-foreground mt-1 cursor-help">
+                                  {feature.name || feature.description}
+                                </div>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>{feature.description}</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
                         </div>
                       ))}
                     </div>
                   </CardContent>
-                  <CardFooter className="pt-4">
+                  <CardFooter className="pt-3">
                     <Button 
                       className="w-full" 
                       variant={isCurrentPlan ? "outline" : product.metadata?.popular === 'true' ? "default" : "secondary"}

package/src/components/SubscriptionConfirmModal.tsx

@@ -6,6 +6,7 @@ import { Button } from './ui/button';
 import { Card } from './ui/card';
 import { Check, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
 import { Alert, AlertDescription } from './ui/alert';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 import { RadioGroup, RadioGroupItem } from './ui/radio-group';
 import { Label } from './ui/label';
 import { CardBrandIcon } from './ui/card-brand-icon';
@@ -45,6 +46,16 @@ export default function SubscriptionConfirmModal({
     }).format(amount / 100);
   };
 
+  const formatFeatureValue = (value: any) => {
+    if (typeof value === 'boolean') {
+      return value ? '✓' : '✗'
+    }
+    if (typeof value === 'number' && value >= 1000) {
+      return new Intl.NumberFormat('en-US').format(value)
+    }
+    return value
+  };
+
   const handleConfirm = async () => {
     setIsSubscribing(true);
     setError(null);
@@ -120,7 +131,18 @@ export default function SubscriptionConfirmModal({
               {plan.features?.map((feature: any) => (
                 <li key={feature.id} className="flex items-start text-sm">
                   <Check className="h-4 w-4 mr-2 text-primary mt-0.5 flex-shrink-0" />
-                  <span>{feature.value} {feature.units} - {feature.description}</span>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="cursor-help">
+                          {formatFeatureValue(feature.value)} {feature.units} - {feature.name || feature.description}
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{feature.description}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 </li>
               ))}
             </ul>

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }