[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Header } from "@/components/header" import { HeroSection } from "@/components/hero-section" import { KeyInsights } from "@/components/key-insights" import { MarketGrowthChart } from "@/components/market-growth-chart" import { RegionalBreakdown } from "@/components/regional-breakdown" import { MarketDynamics } from "@/components/market-dynamics" import { Segmentation } from "@/components/segmentation" import { KeyPlayers } from "@/components/key-players" import { CTA } from "@/components/cta" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" export function Header() { return (

FBI

Fortune Business Insights

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" export function HeroSection() { return (

Market Research Report 2025

Wellness Management Apps Market

Comprehensive market analysis and forecast for the global wellness management apps industry from 2025-2032. Discover growth opportunities, market dynamics, and key insights from{" "} Wellness Management Apps Market {" "} research.

Request a FREE Sample Copy

Market Size 2024

USD 22.86B

) } [V0_FILE]typescriptreact:file="components/key-insights.tsx" isMerged="true" export function KeyInsights() { const insights = [ { icon: "📊", title: "Market Valuation", value: "USD 22.86B", description: "Market size in 2024", }, { icon: "📈", title: "Growth Projection", value: "USD 54.00B", description: "Expected market size by 2032", }, { icon: "⚡", title: "CAGR", value: "11.5%", description: "Compound Annual Growth Rate (2025-2032)", }, { icon: "🌍", title: "Regional Leader", value: "31.1%", description: "North America market share in 2024", }, ] return (

Key Market Insights

Essential metrics from Fortune Business Insights research

{insights.map((insight, idx) => (

{insight.icon}

{insight.title}

{insight.value}

{insight.description}

))}

) } [V0_FILE]typescriptreact:file="components/market-growth-chart.tsx" isMerged="true" "use client" import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export function MarketGrowthChart() { const data = [ { year: 2024, value: 22.86 }, { year: 2025, value: 25.26 }, { year: 2026, value: 28.15 }, { year: 2027, value: 31.42 }, { year: 2028, value: 35.08 }, { year: 2029, value: 39.15 }, { year: 2030, value: 43.68 }, { year: 2031, value: 48.72 }, { year: 2032, value: 54.0 }, ] return (

Market Growth Projection

Wellness Management Apps Market Size (USD Billion) - 2024 to 2032

Market Size Trend Historical and projected market values `USD ${value}B`} /> Year-over-Year Growth Annual market values comparison `USD ${value}B`} />

Market Growth Summary

2024 Market Size

USD 22.86B

2032 Projected Size

USD 54.00B

Total Growth

136.2%

) } [V0_FILE]typescriptreact:file="components/regional-breakdown.tsx" isMerged="true" "use client" import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export function RegionalBreakdown() { const regionalData = [ { name: "North America", value: 31.1, color: "#0d9488" }, { name: "Europe", value: 28.5, color: "#06b6d4" }, { name: "Asia Pacific", value: 25.8, color: "#0891b2" }, { name: "Rest of World", value: 14.6, color: "#06d6a0" }, ] return (

Regional Market Share

2024 Market Distribution by Geography

Market Share by Region Percentage distribution of wellness apps market `${name}: ${value}%`} outerRadius={100} fill="#8884d8" dataKey="value" > {regionalData.map((entry, index) => ( ))} `${value}%`} />

North America

31.1%

Market leader with strong adoption of digital health solutions and wellness initiatives

Europe

28.5%

Second largest market with growing health consciousness and regulatory support

Asia Pacific

25.8%

Fastest growing region with increasing smartphone penetration and health awareness

Rest of World

14.6%

Emerging markets with growing digital health infrastructure

) } [V0_FILE]typescriptreact:file="components/market-dynamics.tsx" isMerged="true" export function MarketDynamics() { return (

Market Dynamics

{/* Drivers */}

🚀

Market Drivers

Sedentary Lifestyle Mitigation

Rising prevalence of chronic conditions like obesity, diabetes, and cardiovascular diseases drives demand for wellness tracking and monitoring apps.

Digital Health Adoption

Increasing penetration of smart devices and technological advancements in health monitoring boost market growth.

Corporate Wellness Programs

Companies investing in employee wellness initiatives through dedicated apps and platforms.

Example: Tata Steel launched WELLSPRING and The Wellness Corner apps in January 2024

AI-Powered Solutions

Advanced AI integration for personalized recommendations and behavioral health features.

Example: WeightWatchers 2.0 launched with AI-powered activity tracking and nutrition plans

{/* Restraints */}

⚠️

Market Restraints

Stringent Regulations

Regulatory authorities impose strict limitations on AI applications in health and wellness apps, particularly regarding data security and diagnostic capabilities.

Data Privacy Concerns

Growing concerns about personal health data security and privacy compliance create market friction.

Professional Replacement Limitations

Wellness apps cannot replace healthcare professionals, limiting their scope and regulatory approval.

Regulatory Restrictions

Recent regulations like Illinois WOPR Act restrict AI apps from offering therapy or diagnostic services.

Example: Illinois WOPR Act (August 2025) restricts AI therapy and diagnostic services

{/* Opportunities */}

💡

Market Opportunities

Increasing personalization and user engagement strategies present significant growth opportunities. Companies focusing on customized wellness experiences, integration with wearable devices, and community-driven features are well-positioned to capture market share.

) } [V0_FILE]typescriptreact:file="components/segmentation.tsx" isMerged="true" "use client" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export function Segmentation() { const applicationData = [ { name: "Fitness", value: 35 }, { name: "Lifestyle & Stress", value: 28 }, { name: "Diet & Nutrition", value: 25 }, { name: "Others", value: 12 }, ] const subscriptionData = [ { name: "Freemium", value: 45 }, { name: "Premium", value: 40 }, { name: "Others", value: 15 }, ] const deliveryData = [ { name: "Mobile", value: 70 }, { name: "Web", value: 20 }, { name: "Others", value: 10 }, ] return (

Market Segmentation

Breakdown by Application, Subscription Model, and Delivery Mode

By Application Market distribution by app type `${value}%`} /> By Subscription Model Revenue model distribution `${value}%`} /> By Delivery Mode Platform distribution `${value}%`} />

Application Categories

•

Fitness (35%)

Activity tracking, workout planning, and exercise monitoring
•

Lifestyle & Stress (28%)

Mental health, meditation, and stress management
•

Diet & Nutrition (25%)

Meal planning, calorie tracking, and nutritional guidance

Key Insights

✓

Mobile Dominance

70% of wellness apps are delivered via mobile platforms
✓

Freemium Model

45% of apps use freemium subscription model for user acquisition
✓

Diverse Applications

Fitness apps lead with 35% market share, followed by lifestyle apps

) } [V0_FILE]typescriptreact:file="components/key-players.tsx" isMerged="true" export function KeyPlayers() { const players = [ { name: "Koninklijke Philips N.V.", description: "Leading healthcare technology company offering comprehensive wellness solutions", }, { name: "Withings", description: "Specializes in connected health devices and wellness tracking applications", }, { name: "ResMed", description: "Digital health and cloud-connected medical devices provider", }, { name: "Oracle", description: "Enterprise wellness platform and health management solutions", }, { name: "Garmin Ltd.", description: "Wearable technology and fitness tracking ecosystem", }, ] return (

Key Market Players

Leading companies in the wellness management apps market

{players.map((player, idx) => (

{idx + 1}

{player.name}

{player.description}

))}

Recent Market Developments

January 2024: Tata Steel Wellness Initiative

Launched WELLSPRING and The Wellness Corner apps to prioritize employee well-being

January 2024: WeightWatchers 2.0 Launch

WW International introduced AI-powered app with advanced activity tracking and personalized nutrition plans

August 2025: Illinois WOPR Act

New regulation restricts AI apps from offering therapy or diagnostic services resembling mental health treatment

) } [V0_FILE]typescriptreact:file="components/cta.tsx" isMerged="true" export function CTA() { return (

Get the Complete Market Report

Access comprehensive market analysis, detailed segmentation, regional insights, and competitive landscape from Fortune Business Insights

Request a FREE Sample Copy View Full Report

2025-2032

Forecast Period

11.5%

CAGR Growth Rate

USD 54B

2032 Market Size

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" export function Footer() { return ( ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } @theme inline { --font-sans: "Inter", "Inter Fallback"; --color-background: #ffffff; --color-foreground: #1f2937; --color-primary: #0d9488; --color-primary-light: #ccfbf1; --color-secondary: #06b6d4; --color-accent: #0891b2; --color-neutral-50: #f9fafb; --color-neutral-100: #f3f4f6; --color-neutral-200: #e5e7eb; --color-neutral-600: #4b5563; --color-neutral-900: #111827; --radius: 0.5rem; --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary-foreground: var(--primary-foreground); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-neutral-200; /* removed invalid outline-ring/50 class */ } body { @apply bg-background text-foreground; } } h1, h2, h3, h4, h5, h6 { @apply font-sans; } a { @apply text-primary hover:text-primary/80 transition-colors; } [V0_FILE]jpg:file="public/wellness-apps-market-cover-image-healthcare-digita.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wellness-apps-market-cover-image-healthcare-digita-RCc2KnQeVjGAgIyDqQbHPXBQahYST4.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="styles/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border; /* removed invalid outline-ring/50 class */ } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import type * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" function Tabs({ className, ...props }: React.ComponentProps) { return } function TabsList({ className, ...props }: React.ComponentProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return } export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isQuickEdit="true" "use client" import type * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDownIcon } from "lucide-react" import { cn } from "@/lib/utils" function Accordion({ ...props }: React.ComponentProps) { return } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( svg]:rotate-180", className, )} {...props} > {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isQuickEdit="true" import type * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", }, }, defaultVariants: { variant: "default", }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "span" return } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isQuickEdit="true" import type * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", "icon-sm": "size-8", "icon-lg": "size-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "button" return } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isQuickEdit="true" "use client" import * as React from "react" import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react" import { type DayButton, DayPicker, getDefaultClassNames } from "react-day-picker" import { cn } from "@/lib/utils" import { Button, buttonVariants } from "@/components/ui/button" function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps["variant"] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className, )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }), ...formatters, }} classNames={{ root: cn("w-fit", defaultClassNames.root), months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months), month: cn("flex flex-col w-full gap-4", defaultClassNames.month), nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav), button_previous: cn( buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next, ), month_caption: cn( "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption, ), dropdowns: cn( "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns, ), dropdown_root: cn( "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-2 has-focus:ring-ring has-focus:ring-[3px] rounded-md", defaultClassNames.dropdown_root, ), dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown), caption_label: cn( "select-none font-medium", captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label, ), table: "w-full border-collapse", weekdays: cn("flex", defaultClassNames.weekdays), weekday: cn( "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday, ), week: cn("flex w-full mt-2", defaultClassNames.week), week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header), week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number), day: cn( "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", defaultClassNames.day, ), range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start), range_middle: cn("rounded-none", defaultClassNames.range_middle), range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end), today: cn( "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today, ), outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside), disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled), hidden: cn("invisible", defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return

}, Chevron: ({ className, orientation, ...props }) => { if (orientation === "left") { return } if (orientation === "right") { return } return }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (

{children}

) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return (