@tioelvis/next-template 2.3.7 → 2.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tioelvis/next-template",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "description": "CLI to scaffold a Next.js + Tailwind project using shadcn/ui components",
   "type": "module",
   "bin": {
@@ -50,6 +50,7 @@
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/postcss": "^4.1.11",
@@ -77,6 +78,7 @@
     "react-hook-form": "^7.61.1",
     "react-resizable-panels": "^3.0.3",
     "recharts": "^2.15.4",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11",
     "tw-animate-css": "^1.3.6",

package/src/app/components/ui/slider.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": ["@radix-ui/react-slider"],
+  "dev_dependence": [],
+  "hooks": [],
+  "supports": []
+}

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

@@ -0,0 +1,61 @@
+"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(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+        ? 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 cursor-pointer 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 cursor-pointer 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="cursor-pointer 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-hidden disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };

package/src/app/components/ui/sonner.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": ["sonner"],
+  "dev_dependence": [],
+  "hooks": [],
+  "supports": []
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/src/constants.js

@@ -75,6 +75,8 @@ const COMPONENTS = [
   "sheet",
   "sidebar",
   "skeleton",
+  "slider",
+  "sonner",
 ];
 
 export {

package/src/main.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import {
   copy_components,
@@ -116,7 +116,7 @@ process.on("SIGINT", () => on_cancel());
       );
 
       // Install dependencies
-      console.log(chalk.cyan("⬇️  Installing dependencies..."));
+      console.log(chalk.cyan("⬇️ Installing dependencies..."));
 
       if (package_manager === "npm") {
         run_command(`npm install ${DEPENDENCIES.join(" ")}`, DEST);
@@ -131,10 +131,18 @@ process.on("SIGINT", () => on_cancel());
       // Finish project
       console.log(
         chalk.yellow(
-          "📄 IMPORTANT: make sure to add your variable NEXT_PUBLIC_API in the .env file, e.g.: NEXT_PUBLIC_API=http://localhost:9000"
+          "⚠️ IMPORTANT: make sure to add your variable NEXT_PUBLIC_API in the .env file, e.g.: NEXT_PUBLIC_API=http://localhost:9000"
         )
       );
 
+      if (components.some((e) => e === "sonner") === true) {
+        console.log(
+          chalk.yellow(
+            "⚠️ IMPORTANT: you install the sonner component. Don't forget to add the Toaster in your layout"
+          )
+        );
+      }
+
       console.log(
         chalk.green(`\n✅ Project ${project_name} created successfully! 🚀`)
       );
@@ -206,6 +214,13 @@ process.on("SIGINT", () => on_cancel());
       }
 
       // Finish project
+      if (components.some((e) => e === "sonner") === true) {
+        console.log(
+          chalk.yellow(
+            "⚠️ IMPORTANT: you install the sonner component. Don't forget to add the Toaster in your layout"
+          )
+        );
+      }
       console.log(chalk.green("\n✅ Components add successfully!"));
     } catch (error) {
       console.error(chalk.red("❌ Internal error:"), error.message);