@create-lft-app/nextjs 3.1.0 → 3.2.0

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

@@ -1,15 +1,15 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("relative overflow-hidden rounded-md bg-muted", className)}
-      {...props}
-    >
-      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-foreground/5 to-transparent" />
-    </div>
-  )
-}
-
-export { Skeleton }
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("relative overflow-hidden rounded-md bg-muted", className)}
+      {...props}
+    >
+      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-foreground/5 to-transparent" />
+    </div>
+  )
+}
+
+export { Skeleton }

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

@@ -1,58 +1,58 @@
-'use client'
-
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
-
-import { cn } from '@/lib/utils'
-
-function Slider({
-	className,
-	defaultValue,
-	value,
-	min = 0,
-	max = 100,
-	...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-	const _values = React.useMemo(
-		() => (value ?? defaultValue ?? [min, max]),
-		[value, defaultValue, min, max]
-	)
-
-	return (
-		<SliderPrimitive.Root
-			data-slot="slider"
-			defaultValue={defaultValue}
-			value={value}
-			min={min}
-			max={max}
-			className={cn(
-				'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-				className
-			)}
-			{...props}
-		>
-			<SliderPrimitive.Track
-				data-slot="slider-track"
-				className={cn(
-					'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
-				)}
-			>
-				<SliderPrimitive.Range
-					data-slot="slider-range"
-					className={cn(
-						'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
-					)}
-				/>
-			</SliderPrimitive.Track>
-			{Array.from({ length: _values.length }, (_, index) => (
-				<SliderPrimitive.Thumb
-					data-slot="slider-thumb"
-					key={index}
-					className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-				/>
-			))}
-		</SliderPrimitive.Root>
-	)
-}
-
-export { Slider }
+'use client'
+
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '@/lib/utils'
+
+function Slider({
+	className,
+	defaultValue,
+	value,
+	min = 0,
+	max = 100,
+	...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+	const _values = React.useMemo(
+		() => (value ?? defaultValue ?? [min, max]),
+		[value, defaultValue, min, max]
+	)
+
+	return (
+		<SliderPrimitive.Root
+			data-slot="slider"
+			defaultValue={defaultValue}
+			value={value}
+			min={min}
+			max={max}
+			className={cn(
+				'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+				className
+			)}
+			{...props}
+		>
+			<SliderPrimitive.Track
+				data-slot="slider-track"
+				className={cn(
+					'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
+				)}
+			>
+				<SliderPrimitive.Range
+					data-slot="slider-range"
+					className={cn(
+						'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+					)}
+				/>
+			</SliderPrimitive.Track>
+			{Array.from({ length: _values.length }, (_, index) => (
+				<SliderPrimitive.Thumb
+					data-slot="slider-thumb"
+					key={index}
+					className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+				/>
+			))}
+		</SliderPrimitive.Root>
+	)
+}
+
+export { Slider }

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

@@ -1,47 +1,47 @@
-"use client"
-
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react"
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-          error:
-            "group-[.toaster]:bg-destructive group-[.toaster]:text-destructive-foreground group-[.toaster]:border-destructive",
-          success:
-            "group-[.toaster]:bg-[#d3f4e5] dark:group-[.toaster]:bg-[#1a3d2e] group-[.toaster]:text-[#1a3d2e] dark:group-[.toaster]:text-[#d3f4e5] group-[.toaster]:border-[#b0e5cc] dark:group-[.toaster]:border-[#2d5a45]",
-        },
-      }}
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          error:
+            "group-[.toaster]:bg-destructive group-[.toaster]:text-destructive-foreground group-[.toaster]:border-destructive",
+          success:
+            "group-[.toaster]:bg-green-100 dark:group-[.toaster]:bg-green-950 group-[.toaster]:text-green-900 dark:group-[.toaster]:text-green-100 group-[.toaster]:border-green-200 dark:group-[.toaster]:border-green-800",
+        },
+      }}
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

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

@@ -1,27 +1,27 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface SpinnerProps extends Omit<React.SVGProps<SVGSVGElement>, "width" | "height"> {
-  size?: number
-}
-
-function Spinner({ className, size = 20, style, ...props }: SpinnerProps) {
-  return (
-    <svg
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      viewBox="0 0 24 24"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cn("animate-spin stroke-[#878787]", className)}
-      style={{ width: size, height: size, ...style }}
-      {...props}
-    >
-      <path d="M12 3v3m6.366-.366-2.12 2.12M21 12h-3m.366 6.366-2.12-2.12M12 21v-3m-6.366.366 2.12-2.12M3 12h3m-.366-6.366 2.12 2.12" />
-    </svg>
-  )
-}
-
-export { Spinner }
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface SpinnerProps extends Omit<React.SVGProps<SVGSVGElement>, "width" | "height"> {
+  size?: number
+}
+
+function Spinner({ className, size = 20, style, ...props }: SpinnerProps) {
+  return (
+    <svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("animate-spin text-muted-foreground", className)}
+      style={{ width: size, height: size, ...style }}
+      {...props}
+    >
+      <path d="M12 3v3m6.366-.366-2.12 2.12M21 12h-3m.366 6.366-2.12-2.12M12 21v-3m-6.366.366 2.12-2.12M3 12h3m-.366-6.366 2.12 2.12" />
+    </svg>
+  )
+}
+
+export { Spinner }

package/template/src/components/ui/submit-button.tsx

@@ -1,47 +1,47 @@
-'use client'
-
-import * as React from 'react'
-import { useFormStatus } from 'react-dom'
-import { cn } from '@/lib/utils'
-import { Button, type buttonVariants } from './button'
-import { Spinner } from './spinner'
-import type { VariantProps } from 'class-variance-authority'
-
-interface SubmitButtonProps
-  extends React.ComponentProps<'button'>,
-    VariantProps<typeof buttonVariants> {
-  isSubmitting?: boolean
-}
-
-function SubmitButton({
-  children,
-  className,
-  disabled,
-  isSubmitting: isSubmittingProp,
-  variant = 'default',
-  size = 'default',
-  ...props
-}: SubmitButtonProps) {
-  const { pending } = useFormStatus()
-  const isSubmitting = isSubmittingProp ?? pending
-
-  return (
-    <Button
-      type="submit"
-      variant={variant}
-      size={size}
-      disabled={disabled || isSubmitting}
-      className={cn('relative', className)}
-      {...props}
-    >
-      {isSubmitting && (
-        <span className="absolute inset-0 flex items-center justify-center">
-          <Spinner size={16} />
-        </span>
-      )}
-      <span className={cn(isSubmitting && 'invisible')}>{children}</span>
-    </Button>
-  )
-}
-
-export { SubmitButton }
+'use client'
+
+import * as React from 'react'
+import { useFormStatus } from 'react-dom'
+import { cn } from '@/lib/utils'
+import { Button, type buttonVariants } from './button'
+import { Spinner } from './spinner'
+import type { VariantProps } from 'class-variance-authority'
+
+interface SubmitButtonProps
+  extends React.ComponentProps<'button'>,
+    VariantProps<typeof buttonVariants> {
+  isSubmitting?: boolean
+}
+
+function SubmitButton({
+  children,
+  className,
+  disabled,
+  isSubmitting: isSubmittingProp,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: SubmitButtonProps) {
+  const { pending } = useFormStatus()
+  const isSubmitting = isSubmittingProp ?? pending
+
+  return (
+    <Button
+      type="submit"
+      variant={variant}
+      size={size}
+      disabled={disabled || isSubmitting}
+      className={cn('relative', className)}
+      {...props}
+    >
+      {isSubmitting && (
+        <span className="absolute inset-0 flex items-center justify-center">
+          <Spinner size={16} />
+        </span>
+      )}
+      <span className={cn(isSubmitting && 'invisible')}>{children}</span>
+    </Button>
+  )
+}
+
+export { SubmitButton }

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

@@ -1,31 +1,31 @@
-"use client"
-
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
-
-import { cn } from "@/lib/utils"
-
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }