@m5kdev/web-ui 0.1.4 → 0.1.5

package/src/components/mode-toggle.tsx

@@ -1,31 +0,0 @@
-import { Moon, Sun } from "lucide-react";
-
-import { useTheme } from "#components/theme-provider";
-import { Button } from "#components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "#components/ui/dropdown-menu";
-
-export function ModeToggle() {
-  const { setTheme } = useTheme();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/nav-main.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import { ChevronRight, type LucideIcon } from "lucide-react";
-import { Link } from "react-router";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#components/ui/collapsible";
-import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from "#components/ui/sidebar";
-
-export function NavMain({
-  items,
-}: {
-  items: {
-    title: string;
-    url: string;
-    icon?: LucideIcon;
-    isActive?: boolean;
-    items?: {
-      title: string;
-      url: string;
-    }[];
-  }[];
-}) {
-  return (
-    <SidebarGroup>
-      <SidebarGroupLabel>Platform</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible
-            key={item.title}
-            asChild
-            defaultOpen={item.isActive}
-            className="group/collapsible"
-          >
-            <SidebarMenuItem>
-              <CollapsibleTrigger asChild>
-                <SidebarMenuButton tooltip={item.title}>
-                  {item.icon && <item.icon />}
-                  <span>{item.title}</span>
-                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                </SidebarMenuButton>
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <SidebarMenuSub>
-                  {item.items?.map((subItem) => (
-                    <SidebarMenuSubItem key={subItem.title}>
-                      <SidebarMenuSubButton asChild>
-                        <Link to={subItem.url}>
-                          <span>{subItem.title}</span>
-                        </Link>
-                      </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                  ))}
-                </SidebarMenuSub>
-              </CollapsibleContent>
-            </SidebarMenuItem>
-          </Collapsible>
-        ))}
-      </SidebarMenu>
-    </SidebarGroup>
-  );
-}

package/src/components/pricing-cards.tsx

@@ -1,133 +0,0 @@
-import { Check, type LucideIcon, MoveRight, PhoneCall } from "lucide-react";
-import { Badge } from "#components/ui/badge";
-import { Button } from "#components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "#components/ui/card";
-
-interface Feature {
-  title: string;
-  description: string;
-}
-
-interface PricingCardProps {
-  title: string;
-  description: string;
-  price: number;
-  features: Feature[];
-  highlighted?: boolean;
-  ctaText: string;
-  ctaIcon: LucideIcon;
-  variant?: "default" | "outline";
-}
-
-function PricingCard({
-  title,
-  description,
-  price,
-  features,
-  highlighted = false,
-  ctaText,
-  ctaIcon: CtaIcon,
-  variant = "outline",
-}: PricingCardProps) {
-  const Icon = CtaIcon;
-  return (
-    <Card className={`w-full rounded-md ${highlighted ? "shadow-2xl" : ""}`}>
-      <CardHeader>
-        <CardTitle>
-          <span className="flex flex-row gap-4 items-center font-normal">{title}</span>
-        </CardTitle>
-        <CardDescription>{description}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="flex flex-col gap-8 justify-start">
-          <p className="flex flex-row items-center gap-2 text-xl">
-            <span className="text-4xl">${price}</span>
-            <span className="text-sm text-muted-foreground"> / month</span>
-          </p>
-          <div className="flex flex-col gap-4 justify-start">
-            {features.map((feature, index) => (
-              <div key={index} className="flex flex-row gap-4">
-                <Check className="w-4 h-4 mt-2 text-primary" />
-                <div className="flex flex-col">
-                  <p>{feature.title}</p>
-                  <p className="text-muted-foreground text-sm">{feature.description}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-          <Button variant={variant} className="gap-4">
-            {ctaText} <Icon className="w-4 h-4" />
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-export function PricingCards() {
-  const commonDescription =
-    "Our goal is to streamline SMB trade, making it easier and faster than ever for everyone and everywhere.";
-
-  const commonFeatures = [
-    {
-      title: "Fast and reliable",
-      description: "We've made it fast and reliable.",
-    },
-    {
-      title: "Fast and reliable",
-      description: "We've made it fast and reliable.",
-    },
-    {
-      title: "Fast and reliable",
-      description: "We've made it fast and reliable.",
-    },
-  ];
-
-  return (
-    <div className="w-full py-20 lg:py-40">
-      <div className="container mx-auto">
-        <div className="flex text-center justify-center items-center gap-4 flex-col">
-          <Badge>Pricing</Badge>
-          <div className="flex gap-2 flex-col">
-            <h2 className="text-3xl md:text-5xl tracking-tighter max-w-xl text-center font-regular">
-              Prices that make sense!
-            </h2>
-            <p className="text-lg leading-relaxed tracking-tight text-muted-foreground max-w-xl text-center">
-              Managing a small business today is already tough.
-            </p>
-          </div>
-          <div className="grid pt-20 text-left grid-cols-1 lg:grid-cols-3 w-full gap-8">
-            <PricingCard
-              title="Startup"
-              description={commonDescription}
-              price={40}
-              features={commonFeatures}
-              ctaText="Sign up today"
-              ctaIcon={MoveRight}
-              variant="outline"
-            />
-            <PricingCard
-              title="Growth"
-              description={commonDescription}
-              price={40}
-              features={commonFeatures}
-              highlighted={true}
-              ctaText="Sign up today"
-              ctaIcon={MoveRight}
-              variant="default"
-            />
-            <PricingCard
-              title="Enterprise"
-              description={commonDescription}
-              price={40}
-              features={commonFeatures}
-              ctaText="Book a meeting"
-              ctaIcon={PhoneCall}
-              variant="outline"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/shared/ButtonCopy.tsx

@@ -1,50 +0,0 @@
-import { CheckCircle, Copy } from "lucide-react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import { Button, type ButtonProps } from "#components/ui/button";
-import { cn } from "#utils";
-
-export function ButtonCopy({
-  text,
-  notificationTimeout = 1000,
-  iconOnly = false,
-  ...props
-}: ButtonProps & { text: string; notificationTimeout?: number; iconOnly?: boolean }) {
-  const { t } = useTranslation();
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleCopy = async (text: string) => {
-    try {
-      await window.navigator.clipboard.writeText(text);
-      setIsCopied(true);
-      toast.success(t("web-ui:common.copySuccess"));
-      setTimeout(() => setIsCopied(false), notificationTimeout);
-    } catch (error) {
-      toast.error(t("web-ui:common.copyError"));
-      console.error(error);
-    }
-  };
-
-  return (
-    <Button
-      variant="outline"
-      size="sm"
-      onClick={() => handleCopy(text)}
-      className={cn(isCopied ? "bg-green-200 hover:bg-green-300" : "", iconOnly ? "" : "gap-1")}
-      {...props}
-    >
-      {isCopied ? (
-        <>
-          <CheckCircle className="h-4 w-4" />
-          {!iconOnly && t("web-ui:common.copied")}
-        </>
-      ) : (
-        <>
-          <Copy className="h-4 w-4" />
-          {!iconOnly && t("web-ui:common.copy")}
-        </>
-      )}
-    </Button>
-  );
-}

package/src/components/team-switcher.tsx

@@ -1,83 +0,0 @@
-import { ChevronsUpDown, Plus } from "lucide-react";
-import * as React from "react";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "#components/ui/dropdown-menu";
-import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "#components/ui/sidebar";
-
-export function TeamSwitcher({
-  teams,
-}: {
-  teams: {
-    name: string;
-    logo: React.ElementType;
-    plan: string;
-  }[];
-}) {
-  const { isMobile } = useSidebar();
-  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                <activeTeam.logo className="size-4" />
-              </div>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">{activeTeam.name}</span>
-                <span className="truncate text-xs">{activeTeam.plan}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-            align="start"
-            side={isMobile ? "bottom" : "right"}
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="text-xs text-muted-foreground">Teams</DropdownMenuLabel>
-            {teams.map((team, index) => (
-              <DropdownMenuItem
-                key={team.name}
-                onClick={() => setActiveTeam(team)}
-                className="gap-2 p-2"
-              >
-                <div className="flex size-6 items-center justify-center rounded-sm border">
-                  <team.logo className="size-4 shrink-0" />
-                </div>
-                {team.name}
-                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
-              </DropdownMenuItem>
-            ))}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem className="gap-2 p-2">
-              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
-                <Plus className="size-4" />
-              </div>
-              <div className="font-medium text-muted-foreground">Add team</div>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  );
-}

package/src/components/theme-provider.tsx

@@ -1,74 +0,0 @@
-import { createContext, useContext, useEffect, useState } from "react";
-
-type Theme = "dark" | "light" | "system";
-
-type ThemeProviderProps = {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-};
-
-type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
-  theme: "dark",
-  setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
-
-export function ThemeProvider({
-  children,
-  defaultTheme = "system",
-  storageKey = "vite-ui-theme",
-  ...props
-}: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(defaultTheme);
-
-  useEffect(() => {
-    const savedTheme = localStorage.getItem(storageKey);
-    if (savedTheme) setTheme(savedTheme as Theme);
-  }, []);
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    root.classList.remove("light", "dark");
-
-    if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light";
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  );
-}
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
-
-  if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
-
-  return context;
-};

package/src/components/typewriter.tsx

@@ -1,90 +0,0 @@
-import { useEffect, useState } from "react";
-import { TypewriterEffect } from "./ui/typewriter-effect";
-
-interface TypewriterProps extends Omit<React.ComponentProps<typeof TypewriterEffect>, "words"> {
-  words: string[];
-  wordClass?: string;
-  highlightClass?: string;
-  highlightIndex?: number;
-}
-
-export function Typewriter({
-  words,
-  wordClass = "dark:text-neutral-300",
-  highlightClass = "text-green-500 dark:text-green-500",
-  cursorClassName = "bg-green-500 dark:bg-green-500",
-  highlightIndex,
-  ...props
-}: TypewriterProps) {
-  const position = highlightIndex ?? words.length - 1;
-  return (
-    <TypewriterEffect
-      {...props}
-      words={words.map((text, index) => ({
-        text,
-        className: index === position ? highlightClass : wordClass,
-      }))}
-      cursorClassName={cursorClassName}
-    />
-  );
-}
-
-interface CyclingTypewriterProps
-  extends Omit<React.ComponentProps<typeof TypewriterEffect>, "words"> {
-  wordSets: string[][];
-  wordClass?: string;
-  highlightClass?: string;
-  highlightIndex?: number;
-  displayDuration?: number;
-  cycleDelay?: number;
-}
-
-export function CyclingTypewriter({
-  wordSets,
-  wordClass = "dark:text-neutral-300",
-  highlightClass = "text-green-500 dark:text-green-500",
-  cursorClassName = "bg-green-500 dark:bg-green-500",
-  highlightIndex,
-  displayDuration = 3000,
-  cycleDelay = 500,
-  ...props
-}: CyclingTypewriterProps) {
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  useEffect(() => {
-    if (wordSets.length === 0 || wordSets.length === 1) return;
-
-    const currentWords = wordSets[currentIndex];
-    // Calculate typing animation duration
-    // TypewriterEffect uses: duration 0.3s per char, stagger 0.1s
-    // Total time ≈ (charCount * 0.3) + (charCount * 0.1) = charCount * 0.4
-    const charCount = currentWords.join(" ").length;
-    const typingDuration = charCount * 400; // milliseconds
-
-    // Total cycle time: typing duration + display duration + cycle delay
-    const totalCycleTime = typingDuration + displayDuration + cycleDelay;
-
-    const timer = setTimeout(() => {
-      setCurrentIndex((prev) => (prev + 1) % wordSets.length);
-    }, totalCycleTime);
-
-    return () => clearTimeout(timer);
-  }, [currentIndex, wordSets, displayDuration, cycleDelay]);
-
-  if (wordSets.length === 0) return null;
-
-  const currentWords = wordSets[currentIndex];
-  const position = highlightIndex ?? currentWords.length - 1;
-
-  return (
-    <TypewriterEffect
-      {...props}
-      key={currentIndex}
-      words={currentWords.map((text, index) => ({
-        text,
-        className: index === position ? highlightClass : wordClass,
-      }))}
-      cursorClassName={cursorClassName}
-    />
-  );
-}

package/src/components/ui/alert-dialog.tsx

@@ -1,133 +0,0 @@
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import type * as React from "react";
-
-import { buttonVariants } from "#components/ui/button";
-import { cn } from "#utils";
-
-function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
-}
-
-function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};