create-appraise 0.1.0

package/templates/default/src/components/kokonutui/smooth-tab.tsx

@@ -0,0 +1,453 @@
+"use client";
+
+/**
+ * @author: @dorian_baffier
+ * @description: Smooth Tab
+ * @version: 1.0.0
+ * @date: 2025-06-26
+ * @license: MIT
+ * @website: https://kokonutui.com
+ * @github: https://github.com/kokonut-labs/kokonutui
+ */
+
+import * as React from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { cn } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+interface TabItem {
+    id: string;
+    title: string;
+    icon?: LucideIcon;
+    content?: React.ReactNode;
+    cardContent?: React.ReactNode;
+    color: string;
+}
+
+const WaveformPath = () => (
+    <motion.path
+        d="M0 50 
+           C 20 40, 40 30, 60 50
+           C 80 70, 100 60, 120 50
+           C 140 40, 160 30, 180 50
+           C 200 70, 220 60, 240 50
+           C 260 40, 280 30, 300 50
+           C 320 70, 340 60, 360 50
+           C 380 40, 400 30, 420 50
+           L 420 100 L 0 100 Z"
+        initial={false}
+        animate={{
+            x: [0, 10, 0],
+            transition: {
+                duration: 5,
+                ease: "linear",
+                repeat: Number.POSITIVE_INFINITY,
+            },
+        }}
+    />
+);
+
+const DEFAULT_TABS: TabItem[] = [
+    {
+        id: "Models",
+        title: "Models",
+        color: "bg-blue-500 hover:bg-blue-600",
+        cardContent: (
+            <div className="relative h-full">
+                <div className="absolute inset-0 overflow-hidden">
+                    <svg
+                        className="absolute bottom-0 w-full h-32"
+                        viewBox="0 0 420 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                        role="presentation"
+                    >
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.15 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-blue-500 stroke-blue-500"
+                            style={{ strokeWidth: 1 }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.1 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-blue-500 stroke-blue-500"
+                            style={{
+                                strokeWidth: 1,
+                                transform: "translateY(10px)",
+                            }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                    </svg>
+                </div>
+                <div className="p-6 h-full relative flex flex-col">
+                    <div className="space-y-2">
+                        <h3 className="text-2xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
+                            Models
+                        </h3>
+                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
+                            Choose the model you want to use
+                        </p>
+                    </div>
+                </div>
+            </div>
+        ),
+    },
+    {
+        id: "MCPs",
+        title: "MCPs",
+        color: "bg-purple-500 hover:bg-purple-600",
+        cardContent: (
+            <div className="relative h-full">
+                <div className="absolute inset-0 overflow-hidden">
+                    <svg
+                        className="absolute bottom-0 w-full h-32"
+                        viewBox="0 0 420 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                        role="presentation"
+                    >
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.15 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-purple-500 stroke-purple-500"
+                            style={{ strokeWidth: 1 }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.1 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-purple-500 stroke-purple-500"
+                            style={{
+                                strokeWidth: 1,
+                                transform: "translateY(10px)",
+                            }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                    </svg>
+                </div>
+                <div className="p-6 h-full relative flex flex-col">
+                    <div className="space-y-2">
+                        <h3 className="text-xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
+                            MCPs
+                        </h3>
+                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
+                            Choose the MCP you want to use
+                        </p>
+                    </div>
+                </div>
+            </div>
+        ),
+    },
+    {
+        id: "Agents",
+        title: "Agents",
+        color: "bg-emerald-500 hover:bg-emerald-600",
+        cardContent: (
+            <div className="relative h-full">
+                <div className="absolute inset-0 overflow-hidden">
+                    <svg
+                        className="absolute bottom-0 w-full h-32"
+                        viewBox="0 0 420 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                        role="presentation"
+                    >
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.15 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-emerald-500 stroke-emerald-500"
+                            style={{ strokeWidth: 1 }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.1 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-emerald-500 stroke-emerald-500"
+                            style={{
+                                strokeWidth: 1,
+                                transform: "translateY(10px)",
+                            }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                    </svg>
+                </div>
+                <div className="p-6 h-full relative flex flex-col">
+                    <div className="space-y-2">
+                        <h3 className="text-2xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
+                            Agents
+                        </h3>
+                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
+                            Choose the agent you want to use
+                        </p>
+                    </div>
+                </div>
+            </div>
+        ),
+    },
+    {
+        id: "Users",
+        title: "Users",
+        color: "bg-amber-500 hover:bg-amber-600",
+        cardContent: (
+            <div className="relative h-full">
+                <div className="absolute inset-0 overflow-hidden">
+                    <svg
+                        className="absolute bottom-0 w-full h-32"
+                        viewBox="0 0 420 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                        role="presentation"
+                    >
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.15 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-amber-500 stroke-amber-500"
+                            style={{ strokeWidth: 1 }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.1 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-amber-500 stroke-amber-500"
+                            style={{
+                                strokeWidth: 1,
+                                transform: "translateY(10px)",
+                            }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                    </svg>
+                </div>
+                <div className="p-6 h-full relative flex flex-col">
+                    <div className="space-y-2">
+                        <h3 className="text-2xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
+                            Users
+                        </h3>
+                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
+                            Choose the user you want to use
+                        </p>
+                    </div>
+                </div>
+            </div>
+        ),
+    },
+];
+
+interface SmoothTabProps {
+    items?: TabItem[];
+    defaultTabId?: string;
+    className?: string;
+    activeColor?: string;
+    onChange?: (tabId: string) => void;
+}
+
+const slideVariants = {
+    enter: (direction: number) => ({
+        x: direction > 0 ? "100%" : "-100%",
+        opacity: 0,
+        filter: "blur(8px)",
+        scale: 0.95,
+        position: "absolute" as const,
+    }),
+    center: {
+        x: 0,
+        opacity: 1,
+        filter: "blur(0px)",
+        scale: 1,
+        position: "absolute" as const,
+    },
+    exit: (direction: number) => ({
+        x: direction < 0 ? "100%" : "-100%",
+        opacity: 0,
+        filter: "blur(8px)",
+        scale: 0.95,
+        position: "absolute" as const,
+    }),
+};
+
+const transition = {
+    duration: 0.4,
+    ease: [0.32, 0.72, 0, 1],
+};
+
+export default function SmoothTab({
+    items = DEFAULT_TABS,
+    defaultTabId = DEFAULT_TABS[0].id,
+    className,
+    activeColor = "bg-[#1F9CFE]",
+    onChange,
+}: SmoothTabProps) {
+    const [selected, setSelected] = React.useState<string>(defaultTabId);
+    const [direction, setDirection] = React.useState(0);
+    const [dimensions, setDimensions] = React.useState({ width: 0, left: 0 });
+
+    // Reference for the selected button
+    const buttonRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    // Update dimensions whenever selected tab changes or on mount
+    React.useLayoutEffect(() => {
+        const updateDimensions = () => {
+            const selectedButton = buttonRefs.current.get(selected);
+            const container = containerRef.current;
+
+            if (selectedButton && container) {
+                const rect = selectedButton.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+
+                setDimensions({
+                    width: rect.width,
+                    left: rect.left - containerRect.left,
+                });
+            }
+        };
+
+        // Initial update
+        requestAnimationFrame(() => {
+            updateDimensions();
+        });
+
+        // Update on resize
+        window.addEventListener("resize", updateDimensions);
+        return () => window.removeEventListener("resize", updateDimensions);
+    }, [selected]);
+
+    const handleTabClick = (tabId: string) => {
+        const currentIndex = items.findIndex((item) => item.id === selected);
+        const newIndex = items.findIndex((item) => item.id === tabId);
+        setDirection(newIndex > currentIndex ? 1 : -1);
+        setSelected(tabId);
+        onChange?.(tabId);
+    };
+
+    const handleKeyDown = (
+        e: React.KeyboardEvent<HTMLButtonElement>,
+        tabId: string
+    ) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleTabClick(tabId);
+        }
+    };
+
+    const selectedItem = items.find((item) => item.id === selected);
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Card Content Area */}
+            <div className="flex-1 mb-4 relative">
+                <div className="bg-card border rounded-lg h-[200px] w-full relative">
+                    <div className="absolute inset-0 overflow-hidden rounded-lg">
+                        <AnimatePresence
+                            initial={false}
+                            mode="popLayout"
+                            custom={direction}
+                        >
+                            <motion.div
+                                key={`card-${selected}`}
+                                custom={direction}
+                                variants={slideVariants as React.ComponentProps<typeof motion.div>['variants']}
+                                initial="enter"
+                                animate="center"
+                                exit="exit"
+                                transition={transition as unknown as React.ComponentProps<typeof motion.div>['transition']}
+                                className="absolute inset-0 w-full h-full will-change-transform bg-card"
+                                style={{
+                                    backfaceVisibility: "hidden",
+                                    WebkitBackfaceVisibility: "hidden",
+                                }}
+                            >
+                                {selectedItem?.cardContent}
+                            </motion.div>
+                        </AnimatePresence>
+                    </div>
+                </div>
+            </div>
+
+            {/* Bottom Toolbar */}
+            <div
+                ref={containerRef}
+                role="tablist"
+                aria-label="Smooth tabs"
+                className={cn(
+                    "flex items-center justify-between gap-1 py-1 mt-auto relative",
+                    "bg-background w-[400px] mx-auto",
+                    "border rounded-xl",
+                    "transition-all duration-200",
+                    className
+                )}
+            >
+                {/* Sliding Background */}
+                <motion.div
+                    className={cn(
+                        "absolute rounded-lg z-[1]",
+                        selectedItem?.color || activeColor
+                    )}
+                    initial={false}
+                    animate={{
+                        width: dimensions.width - 8,
+                        x: dimensions.left + 4,
+                        opacity: 1,
+                    }}
+                    transition={{
+                        type: "spring",
+                        stiffness: 400,
+                        damping: 30,
+                    }}
+                    style={{ height: "calc(100% - 8px)", top: "4px" }}
+                />
+
+                <div className="grid grid-cols-4 w-full gap-1 relative z-[2]">
+                    {items.map((item) => {
+                        const isSelected = selected === item.id;
+                        return (
+                            <motion.button
+                                key={item.id}
+                                ref={(el) => {
+                                    if (el) buttonRefs.current.set(item.id, el);
+                                    else buttonRefs.current.delete(item.id);
+                                }}
+                                type="button"
+                                role="tab"
+                                aria-selected={isSelected}
+                                aria-controls={`panel-${item.id}`}
+                                id={`tab-${item.id}`}
+                                tabIndex={isSelected ? 0 : -1}
+                                onClick={() => handleTabClick(item.id)}
+                                onKeyDown={(e) => handleKeyDown(e, item.id)}
+                                className={cn(
+                                    "relative flex items-center justify-center gap-0.5 rounded-lg px-2 py-1.5",
+                                    "text-sm font-medium transition-all duration-300",
+                                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                    "truncate",
+                                    isSelected
+                                        ? "text-white"
+                                        : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                                )}
+                            >
+                                <span className="truncate">{item.title}</span>
+                            </motion.button>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}

package/templates/default/src/components/loading-skeleton/data-table/data-table-skeleton.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import IconButtonSkeleton from '../form/icon-button-skeleton'
+import TextInputSkeleton from '../form/text-input-skeleton'
+import ButtonSkeleton from '../form/button-skeleton'
+import { Search } from 'lucide-react'
+import TableSkeleton from '../visualization/table-skeleton'
+
+const DataTableSkeleton = () => {
+  return (
+    <>
+      <div className="flex justify-end">
+        <div className="flex gap-2">
+          <IconButtonSkeleton />
+          <IconButtonSkeleton />
+          <IconButtonSkeleton />
+        </div>
+      </div>
+      <div className="mb-6 mt-4 flex justify-between">
+        <div className="flex items-center gap-2">
+          <Search className="mr-2 h-5 w-5" />
+          <TextInputSkeleton />
+        </div>
+        <ButtonSkeleton />
+      </div>
+      <TableSkeleton />
+    </>
+  )
+}
+
+export default DataTableSkeleton

package/templates/default/src/components/loading-skeleton/form/button-skeleton.tsx

@@ -0,0 +1,8 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const ButtonSkeleton = () => {
+  return <Skeleton className="h-10 w-24" />
+}
+
+export default ButtonSkeleton

package/templates/default/src/components/loading-skeleton/form/icon-button-skeleton.tsx

@@ -0,0 +1,8 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const IconButtonSkeleton = () => {
+  return <Skeleton className="h-8 w-8 rounded-sm" />
+}
+
+export default IconButtonSkeleton

package/templates/default/src/components/loading-skeleton/form/text-input-skeleton.tsx

@@ -0,0 +1,8 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const TextInputSkeleton = () => {
+  return <Skeleton className="h-10 w-44" />
+}
+
+export default TextInputSkeleton

package/templates/default/src/components/loading-skeleton/visualization/table-skeleton.tsx

@@ -0,0 +1,14 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const TableSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  )
+}
+
+export default TableSkeleton

package/templates/default/src/components/logo.tsx

@@ -0,0 +1,15 @@
+import { FlaskConical } from 'lucide-react'
+
+const Logo = () => {
+  return (
+    <div className="m-2 flex items-center">
+      <FlaskConical size={25} className="mr-2 text-primary" />
+      <span className="rounded-l-lg bg-gray-800 bg-primary pb-1 pl-1 text-xl tracking-widest text-white underline dark:text-gray-700">
+        app
+      </span>
+      <span className="text-xl tracking-widest text-primary">raise</span>
+    </div>
+  )
+}
+
+export default Logo

package/templates/default/src/components/navigation/command-badge.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { Badge } from '../ui/badge'
+import { cn } from '@/lib/utils'
+
+export interface CommandBadgeProps {
+  label: string
+  onClose: () => void
+  className?: string
+}
+
+export function CommandBadge({ label, onClose, className }: CommandBadgeProps) {
+  return (
+    <Badge
+      variant="secondary"
+      className={cn('inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium', className)}
+    >
+      <span>{label}</span>
+      <button
+        type="button"
+        onClick={e => {
+          e.stopPropagation()
+          onClose()
+        }}
+        className="hover:bg-secondary-foreground/20 ml-0.5 rounded-sm focus:outline-none focus:ring-1 focus:ring-ring"
+        aria-label={`Clear ${label}`}
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </Badge>
+  )
+}

package/templates/default/src/components/navigation/command-chain-input.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+import { CommandBadge } from './command-badge'
+import { cn } from '@/lib/utils'
+
+export interface CommandChainInputProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {
+  badge?: {
+    label: string
+    onClose: () => void
+  }
+}
+
+export const CommandChainInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  CommandChainInputProps
+>(({ badge, className, onKeyDown, ...props }, ref) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // If backspace is pressed and input is empty, clear the badge
+    if (e.key === 'Backspace' && !(e.target as HTMLInputElement).value && badge) {
+      e.preventDefault()
+      badge.onClose()
+      return
+    }
+    onKeyDown?.(e)
+  }
+
+  return (
+    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+      <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+      {badge && (
+        <div className="mr-2 flex-shrink-0">
+          <CommandBadge label={badge.label} onClose={badge.onClose} />
+        </div>
+      )}
+      <CommandPrimitive.Input
+        ref={ref}
+        className={cn(
+          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        onKeyDown={handleKeyDown}
+        {...props}
+      />
+    </div>
+  )
+})
+
+CommandChainInput.displayName = 'CommandChainInput'