@create-lft-app/nextjs 3.1.0 → 3.2.0

package/template/src/components/ui/page-transition.tsx

@@ -1,166 +1,166 @@
-'use client'
-
-import { motion, type HTMLMotionProps } from 'framer-motion'
-import { cn } from '@/lib/utils'
-
-const pageVariants = {
-  initial: {
-    opacity: 0,
-    y: 20,
-  },
-  enter: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      duration: 0.4,
-      ease: [0.25, 0.1, 0.25, 1],
-      when: 'beforeChildren',
-      staggerChildren: 0.1,
-    },
-  },
-  exit: {
-    opacity: 0,
-    y: -20,
-    transition: {
-      duration: 0.3,
-    },
-  },
-}
-
-const childVariants = {
-  initial: {
-    opacity: 0,
-    y: 20,
-  },
-  enter: {
-    opacity: 1,
-    y: 0,
-  },
-  exit: {
-    opacity: 0,
-    y: -20,
-  },
-}
-
-interface PageTransitionProps extends HTMLMotionProps<'div'> {
-  children: React.ReactNode
-}
-
-export function PageTransition({
-  children,
-  className,
-  ...props
-}: PageTransitionProps) {
-  return (
-    <motion.div
-      initial="initial"
-      animate="enter"
-      exit="exit"
-      variants={pageVariants}
-      className={cn('w-full', className)}
-      {...props}
-    >
-      {children}
-    </motion.div>
-  )
-}
-
-interface PageSectionProps extends HTMLMotionProps<'section'> {
-  children: React.ReactNode
-  delay?: number
-}
-
-export function PageSection({
-  children,
-  className,
-  delay = 0,
-  ...props
-}: PageSectionProps) {
-  return (
-    <motion.section
-      variants={childVariants}
-      transition={{
-        duration: 0.4,
-        delay,
-        ease: [0.25, 0.1, 0.25, 1],
-      }}
-      className={className}
-      {...props}
-    >
-      {children}
-    </motion.section>
-  )
-}
-
-interface PageHeaderProps extends HTMLMotionProps<'header'> {
-  children: React.ReactNode
-}
-
-export function PageHeader({
-  children,
-  className,
-  ...props
-}: PageHeaderProps) {
-  return (
-    <motion.header
-      initial={{ opacity: 0, y: -20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{
-        duration: 0.4,
-        ease: [0.25, 0.1, 0.25, 1],
-      }}
-      className={cn('mb-6', className)}
-      {...props}
-    >
-      {children}
-    </motion.header>
-  )
-}
-
-interface PageTitleProps extends HTMLMotionProps<'h1'> {
-  children: React.ReactNode
-}
-
-export function PageTitle({ children, className, ...props }: PageTitleProps) {
-  return (
-    <motion.h1
-      initial={{ opacity: 0, x: -20 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{
-        duration: 0.4,
-        delay: 0.1,
-        ease: [0.25, 0.1, 0.25, 1],
-      }}
-      className={cn('text-2xl font-bold tracking-tight', className)}
-      {...props}
-    >
-      {children}
-    </motion.h1>
-  )
-}
-
-interface PageDescriptionProps extends HTMLMotionProps<'p'> {
-  children: React.ReactNode
-}
-
-export function PageDescription({
-  children,
-  className,
-  ...props
-}: PageDescriptionProps) {
-  return (
-    <motion.p
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{
-        duration: 0.4,
-        delay: 0.2,
-        ease: [0.25, 0.1, 0.25, 1],
-      }}
-      className={cn('text-muted-foreground', className)}
-      {...props}
-    >
-      {children}
-    </motion.p>
-  )
-}
+'use client'
+
+import { motion, type HTMLMotionProps } from 'framer-motion'
+import { cn } from '@/lib/utils'
+
+const pageVariants = {
+  initial: {
+    opacity: 0,
+    y: 20,
+  },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.4,
+      ease: [0.25, 0.1, 0.25, 1],
+      when: 'beforeChildren',
+      staggerChildren: 0.1,
+    },
+  },
+  exit: {
+    opacity: 0,
+    y: -20,
+    transition: {
+      duration: 0.3,
+    },
+  },
+}
+
+const childVariants = {
+  initial: {
+    opacity: 0,
+    y: 20,
+  },
+  enter: {
+    opacity: 1,
+    y: 0,
+  },
+  exit: {
+    opacity: 0,
+    y: -20,
+  },
+}
+
+interface PageTransitionProps extends HTMLMotionProps<'div'> {
+  children: React.ReactNode
+}
+
+export function PageTransition({
+  children,
+  className,
+  ...props
+}: PageTransitionProps) {
+  return (
+    <motion.div
+      initial="initial"
+      animate="enter"
+      exit="exit"
+      variants={pageVariants}
+      className={cn('w-full', className)}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+interface PageSectionProps extends HTMLMotionProps<'section'> {
+  children: React.ReactNode
+  delay?: number
+}
+
+export function PageSection({
+  children,
+  className,
+  delay = 0,
+  ...props
+}: PageSectionProps) {
+  return (
+    <motion.section
+      variants={childVariants}
+      transition={{
+        duration: 0.4,
+        delay,
+        ease: [0.25, 0.1, 0.25, 1],
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </motion.section>
+  )
+}
+
+interface PageHeaderProps extends HTMLMotionProps<'header'> {
+  children: React.ReactNode
+}
+
+export function PageHeader({
+  children,
+  className,
+  ...props
+}: PageHeaderProps) {
+  return (
+    <motion.header
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        duration: 0.4,
+        ease: [0.25, 0.1, 0.25, 1],
+      }}
+      className={cn('mb-6', className)}
+      {...props}
+    >
+      {children}
+    </motion.header>
+  )
+}
+
+interface PageTitleProps extends HTMLMotionProps<'h1'> {
+  children: React.ReactNode
+}
+
+export function PageTitle({ children, className, ...props }: PageTitleProps) {
+  return (
+    <motion.h1
+      initial={{ opacity: 0, x: -20 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{
+        duration: 0.4,
+        delay: 0.1,
+        ease: [0.25, 0.1, 0.25, 1],
+      }}
+      className={cn('text-2xl font-bold tracking-tight', className)}
+      {...props}
+    >
+      {children}
+    </motion.h1>
+  )
+}
+
+interface PageDescriptionProps extends HTMLMotionProps<'p'> {
+  children: React.ReactNode
+}
+
+export function PageDescription({
+  children,
+  className,
+  ...props
+}: PageDescriptionProps) {
+  return (
+    <motion.p
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{
+        duration: 0.4,
+        delay: 0.2,
+        ease: [0.25, 0.1, 0.25, 1],
+      }}
+      className={cn('text-muted-foreground', className)}
+      {...props}
+    >
+      {children}
+    </motion.p>
+  )
+}

package/template/src/components/ui/popover.tsx

@@ -1,59 +1,59 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 w-72 rounded-md p-4",
-          "border border-border",
-          "bg-background dark:bg-[#1c1c1c]",
-          "text-popover-foreground",
-          "outline-none",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 rounded-md p-4",
+          "border border-border",
+          "bg-popover",
+          "text-popover-foreground",
+          "outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/template/src/components/ui/progress.tsx

@@ -1,32 +1,32 @@
-"use client"
-
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-
-import { cn } from "@/lib/utils"
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "relative h-1.5 w-full overflow-hidden rounded-full",
-        "bg-[#e6e6e6] dark:bg-[#2c2c2c]",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="h-full w-full flex-1 bg-primary transition-all duration-300 ease-out"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
-}
-
-export { Progress }
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative h-1.5 w-full overflow-hidden rounded-full",
+        "bg-muted",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="h-full w-full flex-1 bg-primary transition-all duration-300 ease-out"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

package/template/src/components/ui/radio-group.tsx

@@ -1,45 +1,45 @@
-"use client"
-
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function RadioGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      data-slot="radio-group"
-      className={cn("grid gap-3", className)}
-      {...props}
-    />
-  )
-}
-
-function RadioGroupItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  return (
-    <RadioGroupPrimitive.Item
-      data-slot="radio-group-item"
-      className={cn(
-        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center"
-      >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-}
-
-export { RadioGroup, RadioGroupItem }
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }