@viliha/vui-ui 1.1.8 → 1.3.0

package/template/components/ui/tabs.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/template/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/template/components/ui/toggle-group.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/template/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/template/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/template/lib/auth-demo.ts

@@ -0,0 +1,94 @@
+/**
+ * Mock constants + helpers for the sign-in / sign-up / onboarding demo.
+ * No network, no real auth — everything is in-memory to showcase the flow.
+ */
+
+/** Personal/consumer email providers that are blocked at sign-up (business only). */
+export const PUBLIC_EMAIL_DOMAINS = [
+  "gmail.com",
+  "googlemail.com",
+  "yahoo.com",
+  "ymail.com",
+  "outlook.com",
+  "hotmail.com",
+  "live.com",
+  "msn.com",
+  "icloud.com",
+  "me.com",
+  "aol.com",
+  "proton.me",
+  "protonmail.com",
+  "gmx.com",
+  "mail.com",
+  "zoho.com",
+];
+
+const EMAIL_RE = /^[^\s@]+@([^\s@]+\.[^\s@]+)$/;
+
+export type EmailCheck =
+  | { ok: true; domain: string }
+  | { ok: false; reason: "format" | "public" };
+
+/** Validate an email and reject personal/public domains (business email only). */
+export function checkBusinessEmail(email: string): EmailCheck {
+  const match = email.trim().toLowerCase().match(EMAIL_RE);
+  const domain = match?.[1];
+  if (!domain) return { ok: false, reason: "format" };
+  if (PUBLIC_EMAIL_DOMAINS.includes(domain)) {
+    return { ok: false, reason: "public" };
+  }
+  return { ok: true, domain };
+}
+
+export const TIMEZONES = [
+  "UTC",
+  "America/Los_Angeles",
+  "America/New_York",
+  "Europe/London",
+  "Europe/Paris",
+  "Asia/Singapore",
+  "Asia/Ho_Chi_Minh",
+  "Asia/Tokyo",
+  "Australia/Sydney",
+];
+
+export type Plan = {
+  id: string;
+  name: string;
+  price: string;
+  cadence: string;
+  tagline: string;
+  features: string[];
+  popular?: boolean;
+};
+
+export const PLANS: Plan[] = [
+  {
+    id: "free",
+    name: "Free",
+    price: "$0",
+    cadence: "forever",
+    tagline: "Get started, no credit card required.",
+    features: ["10k API calls / mo", "1 project", "Community support"],
+  },
+  {
+    id: "growth",
+    name: "Growth",
+    price: "$0",
+    cadence: "during beta",
+    tagline: "Most teams start here.",
+    features: ["1M API calls / mo", "Unlimited projects", "Email support", "Webhooks"],
+    popular: true,
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    price: "Custom",
+    cadence: "contact us",
+    tagline: "SAML SSO, SLAs, and audit logs.",
+    features: ["Unlimited calls", "SAML / SSO", "Audit log export", "Dedicated support"],
+  },
+];
+
+export const TEAM_ROLES = ["Admin", "Member", "Billing", "Read-only"] as const;
+export type TeamRole = (typeof TEAM_ROLES)[number];

package/template/lib/crm-data.ts

@@ -0,0 +1,80 @@
+/**
+ * In-memory CRM mock data (companies, people, opportunities) with light
+ * relations (people belong to a company; opportunities link a company).
+ * Swap this for a real data/API layer when you wire up a backend.
+ */
+
+export interface Company {
+  id: number;
+  name: string;
+  domain: string;
+  industry: string;
+  employees: number;
+  city: string;
+  country: string;
+}
+
+export const companies: Company[] = [
+  { id: 1, name: "Northwind Retail", domain: "northwind.example.com", industry: "Retail", employees: 340, city: "Seattle", country: "United States" },
+  { id: 2, name: "Sakura Foods", domain: "sakura.example.jp", industry: "Food & Beverage", employees: 210, city: "Osaka", country: "Japan" },
+  { id: 3, name: "Alpine Logistics", domain: "alpine.example.ch", industry: "Logistics", employees: 96, city: "Zürich", country: "Switzerland" },
+  { id: 4, name: "Lagos Digital", domain: "lagosdigital.example.ng", industry: "Technology", employees: 54, city: "Lagos", country: "Nigeria" },
+  { id: 5, name: "Meridian Media", domain: "meridian.example.uk", industry: "Media", employees: 178, city: "London", country: "United Kingdom" },
+  { id: 6, name: "Nordic Wear", domain: "nordicwear.example.se", industry: "Retail", employees: 133, city: "Stockholm", country: "Sweden" },
+  { id: 7, name: "Coral Bay Resorts", domain: "coralbay.example.au", industry: "Hospitality", employees: 264, city: "Cairns", country: "Australia" },
+  { id: 8, name: "Pampas Commerce", domain: "pampas.example.ar", industry: "Retail", employees: 71, city: "Buenos Aires", country: "Argentina" },
+];
+
+export interface Person {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  jobTitle: string;
+  company: string;
+  city: string;
+}
+
+export const people: Person[] = [
+  { id: 1, firstName: "Ava", lastName: "Bennett", email: "ava.bennett@northwind.example.com", phone: "+1 206 555 0110", jobTitle: "Head of Ops", company: "Northwind Retail", city: "Seattle" },
+  { id: 2, firstName: "Haruto", lastName: "Tanaka", email: "haruto.tanaka@sakura.example.jp", phone: "+81 6 6555 0177", jobTitle: "Supply Lead", company: "Sakura Foods", city: "Osaka" },
+  { id: 3, firstName: "Lena", lastName: "Fischer", email: "lena.fischer@alpine.example.ch", phone: "+41 44 555 0143", jobTitle: "Fleet Manager", company: "Alpine Logistics", city: "Zürich" },
+  { id: 4, firstName: "Chidi", lastName: "Okafor", email: "chidi.okafor@lagosdigital.example.ng", phone: "+234 1 555 0122", jobTitle: "CTO", company: "Lagos Digital", city: "Lagos" },
+  { id: 5, firstName: "Mia", lastName: "Nguyen", email: "mia.nguyen@coralbay.example.au", phone: "+61 7 5555 0166", jobTitle: "Guest Director", company: "Coral Bay Resorts", city: "Cairns" },
+  { id: 6, firstName: "Erik", lastName: "Lindqvist", email: "erik.lindqvist@nordicwear.example.se", phone: "+46 8 555 0199", jobTitle: "Retail Lead", company: "Nordic Wear", city: "Stockholm" },
+  { id: 7, firstName: "Sofia", lastName: "Rossi", email: "sofia.rossi@meridian.example.uk", phone: "+44 20 5555 0188", jobTitle: "Editor", company: "Meridian Media", city: "London" },
+  { id: 8, firstName: "Diego", lastName: "Alvarez", email: "diego.alvarez@pampas.example.ar", phone: "+54 11 5555 0133", jobTitle: "Sales Manager", company: "Pampas Commerce", city: "Buenos Aires" },
+];
+
+export const OPPORTUNITY_STAGES = [
+  "Lead",
+  "Qualified",
+  "Proposal",
+  "Negotiation",
+  "Won",
+] as const;
+
+export type OpportunityStage = (typeof OPPORTUNITY_STAGES)[number];
+
+export interface Opportunity {
+  id: number;
+  name: string;
+  company: string;
+  amount: number;
+  stage: OpportunityStage;
+  owner: string;
+  closeDate: string;
+}
+
+export const opportunities: Opportunity[] = [
+  { id: 1, name: "Enterprise plan", company: "Northwind Retail", amount: 48000, stage: "Negotiation", owner: "Ava Bennett", closeDate: "2026-08-15" },
+  { id: 2, name: "Signals add-on", company: "Sakura Foods", amount: 12000, stage: "Proposal", owner: "Haruto Tanaka", closeDate: "2026-07-30" },
+  { id: 3, name: "Pilot expansion", company: "Alpine Logistics", amount: 8000, stage: "Qualified", owner: "Lena Fischer", closeDate: "2026-09-01" },
+  { id: 4, name: "Platform migration", company: "Lagos Digital", amount: 26000, stage: "Lead", owner: "Chidi Okafor", closeDate: "2026-09-20" },
+  { id: 5, name: "Seasonal campaign", company: "Coral Bay Resorts", amount: 15500, stage: "Won", owner: "Mia Nguyen", closeDate: "2026-06-28" },
+  { id: 6, name: "Retail rollout", company: "Nordic Wear", amount: 21000, stage: "Proposal", owner: "Erik Lindqvist", closeDate: "2026-08-05" },
+  { id: 7, name: "Content personalization", company: "Meridian Media", amount: 33000, stage: "Qualified", owner: "Sofia Rossi", closeDate: "2026-08-22" },
+  { id: 8, name: "Growth tier", company: "Pampas Commerce", amount: 9500, stage: "Lead", owner: "Diego Alvarez", closeDate: "2026-09-10" },
+  { id: 9, name: "Renewal + upsell", company: "Northwind Retail", amount: 18000, stage: "Won", owner: "Ava Bennett", closeDate: "2026-06-15" },
+];