veloria-ui 0.1.2

package/src/index.ts

@@ -0,0 +1,396 @@
+/**
+ * veloria-ui
+ *
+ * Build anything. Ship faster.
+ * 102 production-ready components — accessible, composable, dark-mode ready.
+ *
+ * By JohnDev19 — https://github.com/JohnDev19/Veloria-UI
+ * Docs: https://veloria-ui.vercel.app/
+ * Issues: https://github.com/JohnDev19/Veloria-UI/issues
+ *
+ * @license MIT
+ */
+
+// ─── Basic ────────────────────────────────────────────────────────────────
+export { Button, buttonVariants } from "./components/basic/Button";
+export type { ButtonProps } from "./components/basic/Button";
+export { IconButton, iconButtonVariants } from "./components/basic/IconButton";
+export type { IconButtonProps } from "./components/basic/IconButton";
+export {
+  Link,
+  Badge, badgeVariants,
+  Avatar,
+  AvatarGroup,
+  Divider,
+  Tag,
+  Chip,
+  Tooltip,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  TooltipContent,
+} from "./components/basic";
+export type {
+  LinkProps,
+  BadgeProps,
+  AvatarProps,
+  AvatarGroupProps,
+  DividerProps,
+  TagProps,
+  ChipProps,
+  TooltipProps,
+} from "./components/basic";
+
+// ─── Layout ───────────────────────────────────────────────────────────────
+export {
+  Container,
+  Stack,
+  Grid,
+  Flex,
+  Section,
+  Spacer,
+  AspectRatio,
+  Center,
+  ScrollArea,
+  Masonry,
+} from "./components/layout";
+export type {
+  ContainerProps,
+  StackProps,
+  GridProps,
+  FlexProps,
+  SectionProps,
+  SpacerProps,
+  CenterProps,
+  MasonryProps,
+} from "./components/layout";
+
+// ─── Navigation ───────────────────────────────────────────────────────────
+export {
+  Navbar,
+  Sidebar,
+  Menu,
+  MenuItem,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuRadioGroup,
+  Breadcrumb,
+  Pagination,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Stepper,
+} from "./components/navigation";
+export type {
+  NavbarProps,
+  SidebarProps,
+  MenuItemProps,
+  BreadcrumbItem,
+  BreadcrumbProps,
+  PaginationProps,
+  StepperStep,
+  StepperProps,
+} from "./components/navigation";
+
+// ─── Forms ────────────────────────────────────────────────────────────────
+export {
+  Input, inputVariants,
+  TextArea,
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  Checkbox,
+  RadioGroup,
+  Switch,
+  Slider,
+  RangeSlider,
+  DatePicker,
+  TimePicker,
+} from "./components/forms";
+export type {
+  InputProps,
+  TextAreaProps,
+  CheckboxProps,
+  RadioGroupProps,
+  RadioOption,
+  SwitchProps,
+  DatePickerProps,
+  TimePickerProps,
+} from "./components/forms";
+
+// ─── Advanced Forms ───────────────────────────────────────────────────────
+export {
+  FileUpload,
+  OTPInput,
+  ColorPicker,
+  SearchInput,
+  PasswordInput,
+  Combobox,
+  MultiSelect,
+  FormField,
+  FormLabel,
+  FormError,
+} from "./components/advanced-forms";
+export type {
+  FileUploadProps,
+  OTPInputProps,
+  ColorPickerProps,
+  SearchInputProps,
+  PasswordInputProps,
+  ComboboxOption,
+  ComboboxProps,
+  MultiSelectProps,
+  FormFieldProps,
+  FormLabelProps,
+  FormErrorProps,
+} from "./components/advanced-forms";
+
+// ─── Data Display ─────────────────────────────────────────────────────────
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+  DataTable,
+  List,
+  ListItem,
+  Statistic,
+  Timeline,
+  Calendar,
+  CodeBlock,
+  Chart,
+} from "./components/data-display";
+export type {
+  CardProps,
+  DataTableColumn,
+  DataTableProps,
+  ListProps,
+  ListItemProps,
+  StatisticProps,
+  TimelineEvent,
+  TimelineProps,
+  CalendarProps,
+  CodeBlockProps,
+  ChartProps,
+} from "./components/data-display";
+
+// ─── Feedback ─────────────────────────────────────────────────────────────
+export {
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+  Snackbar,
+  Progress,
+  CircularProgress,
+  Skeleton,
+  LoadingSpinner,
+  EmptyState,
+  StatusIndicator,
+  Notification,
+} from "./components/feedback";
+export type {
+  AlertProps,
+  SnackbarProps,
+  ProgressProps,
+  CircularProgressProps,
+  SkeletonProps,
+  LoadingSpinnerProps,
+  EmptyStateProps,
+  StatusIndicatorProps,
+  NotificationProps,
+} from "./components/feedback";
+
+// ─── Overlay ──────────────────────────────────────────────────────────────
+export {
+  Modal,
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  Drawer,
+  Sheet,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuLabel,
+  ContextMenuGroup,
+  ContextMenuSub,
+  ContextMenuRadioGroup,
+  CommandDialog,
+  CommandItem,
+  CommandGroup,
+  CommandSeparator,
+  Lightbox,
+  ImageViewer,
+} from "./components/overlay";
+export type {
+  ModalProps,
+  DrawerProps,
+  CommandDialogProps,
+  LightboxProps,
+} from "./components/overlay";
+
+// ─── Media ────────────────────────────────────────────────────────────────
+export {
+  Image,
+  VideoPlayer,
+  AudioPlayer,
+  Carousel,
+  Gallery,
+} from "./components/media";
+export type {
+  ImageProps,
+  VideoPlayerProps,
+  AudioPlayerProps,
+  CarouselProps,
+  GalleryImage,
+  GalleryProps,
+} from "./components/media";
+
+// ─── Utility ──────────────────────────────────────────────────────────────
+export {
+  ThemeSwitcher,
+  CopyButton,
+  KeyboardShortcut,
+  ResizablePanel,
+  DragDropArea,
+} from "./components/utility";
+export type {
+  ThemeSwitcherProps,
+  CopyButtonProps,
+  KeyboardShortcutProps,
+  ResizablePanelProps,
+  DragDropAreaProps,
+} from "./components/utility";
+
+// ─── Hooks ────────────────────────────────────────────────────────────────
+export {
+  useDisclosure,
+  useMediaQuery,
+  useBreakpoint,
+  useClipboard,
+  useLocalStorage,
+  useTheme,
+  useDebounce,
+  useOnClickOutside,
+  useKeydown,
+  useMounted,
+  useId,
+} from "./hooks";
+export type { UseDisclosureOptions, UseClipboardOptions, AtlasTheme } from "./hooks";
+
+export {
+  useToast,
+  ToastContextProvider,
+} from "./hooks/use-toast";
+export type { ToastVariant, ToastData, ToastInput } from "./hooks/use-toast";
+
+// ─── Types ────────────────────────────────────────────────────────────────
+export type {
+  Size,
+  ResponsiveSize,
+  ColorScheme,
+  Variant,
+  Placement,
+  Side,
+  AtlasBaseProps,
+  AtlasAriaProps,
+  AsChildProps,
+  Orientation,
+  Status,
+  Theme,
+  VariantProps,
+} from "./types";
+
+// ─── Utils ────────────────────────────────────────────────────────────────
+export { cn, composeEventHandlers, generateId, isBrowser, isDefined, noop } from "./utils/cn";
+
+// ─── Tailwind plugin ──────────────────────────────────────────────────────
+export { atlasPlugin, atlasPreset } from "./tailwind";
+
+// ─── v0.1.2 — New Components ─────────────────────────────────────────────
+
+// Advanced Forms
+export { PhoneInput, TagInput, CurrencyInput, RatingInput } from "./components/advanced-forms";
+export type { PhoneInputProps, TagInputProps, CurrencyInputProps, RatingInputProps } from "./components/advanced-forms";
+
+// Data Display
+export { StatsCard, TreeView, JsonViewer, Heatmap, KanbanBoard } from "./components/data-display";
+export type {
+  StatsCardProps, TreeNode, TreeViewProps,
+  JsonViewerProps, JsonValue,
+  HeatmapCell, HeatmapProps,
+  KanbanCard, KanbanColumn, KanbanBoardProps,
+} from "./components/data-display";
+
+// Feedback & Overlay
+export { BannerAlert, ConfirmDialog, FloatingActionButton, RichTooltip, Tour } from "./components/feedback";
+export type {
+  BannerAlertProps, ConfirmDialogProps,
+  FABAction, FloatingActionButtonProps,
+  RichTooltipProps, TourStep, TourProps,
+} from "./components/feedback";
+
+// Utility
+export { InfiniteScroll, VirtualList } from "./components/utility";
+export type { InfiniteScrollProps, VirtualListProps } from "./components/utility";
+
+// ─── v0.1.2 — New Hooks ──────────────────────────────────────────────────
+export {
+  useForm,
+  usePagination,
+  useIntersection,
+  useWindowSize,
+  useStep,
+  useCountdown,
+} from "./hooks";
+export type {
+  UseFormOptions, UseFormReturn,
+  UsePaginationOptions, UsePaginationReturn,
+  UseIntersectionOptions, WindowSize,
+  UseStepOptions, UseStepReturn,
+  UseCountdownOptions, UseCountdownReturn,
+} from "./hooks";

package/src/provider.tsx

@@ -0,0 +1,54 @@
+/**
+ * AtlasProvider — wrap your app with this once.
+ *
+ * Covers Toast (needed for useToast) and TooltipProvider (so you don't
+ * have to wrap every single Tooltip yourself).
+ *
+ * Usage in app/layout.tsx:
+ *
+ *   import { AtlasProvider } from "veloria-ui/provider";
+ *
+ *   export default function RootLayout({ children }) {
+ *     return (
+ *       <html lang="en">
+ *         <body>
+ *           <AtlasProvider>{children}</AtlasProvider>
+ *         </body>
+ *       </html>
+ *     );
+ *   }
+ *
+ * — JohnDev19, Veloria UI
+ */
+
+"use client";
+
+import * as React from "react";
+import { ToastProvider, ToastViewport } from "./components/feedback";
+import { TooltipProvider } from "./components/basic";
+
+export interface AtlasProviderProps {
+  children: React.ReactNode;
+  /** How long toasts stay on screen in ms. Default: 5000 */
+  toastDuration?: number;
+  /** Swipe direction to dismiss toasts. Default: "right" */
+  toastSwipeDirection?: "up" | "down" | "left" | "right";
+  /** Delay before tooltips open in ms. Default: 300 */
+  tooltipDelay?: number;
+}
+
+export function AtlasProvider({
+  children,
+  toastDuration = 5000,
+  toastSwipeDirection = "right",
+  tooltipDelay = 300,
+}: AtlasProviderProps) {
+  return (
+    <ToastProvider duration={toastDuration} swipeDirection={toastSwipeDirection}>
+      <TooltipProvider delayDuration={tooltipDelay}>
+        {children}
+        <ToastViewport />
+      </TooltipProvider>
+    </ToastProvider>
+  );
+}

package/src/styles/atlas.css

@@ -0,0 +1,252 @@
+/* ========================================================================
+   Veloria UI Design Tokens
+   Veloria UI Design System — https://veloria-ui.vercel.app/
+   By JohnDev19 — https://github.com/JohnDev19/Veloria-UI
+   ======================================================================== */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ─── Base Layer ─────────────────────────────────────────────────────────── */
+
+@layer base {
+  :root {
+    /* ── Core Palette ── */
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    /* ── Surface ── */
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    /* ── Brand ── */
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    /* ── Secondary / Neutral ── */
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    /* ── Semantic ── */
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 355.7 100% 97.3%;
+    --warning: 32 95% 44%;
+    --warning-foreground: 26 83.3% 14.1%;
+    --info: 221.2 83.2% 53.3%;
+    --info-foreground: 210 40% 98%;
+
+    /* ── Forms & Borders ── */
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    /* ── Radius ── */
+    --radius: 0.5rem;
+
+    /* ── Typography ── */
+    --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 50.6%;
+    --destructive-foreground: 210 40% 98%;
+    --success: 142.1 70.6% 45.3%;
+    --success-foreground: 144.9 80.4% 10%;
+    --warning: 32 95% 60%;
+    --warning-foreground: 26 83.3% 14.1%;
+    --info: 213.1 93.9% 67.8%;
+    --info-foreground: 222.2 47.4% 11.2%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+/* ─── Global Reset + Base Styles ─────────────────────────────────────────── */
+
+@layer base {
+  * {
+    @apply border-border;
+    box-sizing: border-box;
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply tracking-tight;
+  }
+
+  :focus-visible {
+    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
+  }
+}
+
+/* ─── Component Animations ───────────────────────────────────────────────── */
+
+@layer utilities {
+  @keyframes atlas-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes atlas-ping {
+    75%, 100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+
+  @keyframes atlas-pulse {
+    50% { opacity: 0.5; }
+  }
+
+  @keyframes atlas-bounce {
+    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+    50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+  }
+
+  @keyframes atlas-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes atlas-fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  @keyframes atlas-slide-in-from-top {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+
+  @keyframes atlas-slide-in-from-bottom {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  @keyframes atlas-slide-in-from-left {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes atlas-slide-in-from-right {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes atlas-zoom-in {
+    from { opacity: 0; transform: scale(0.96); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes atlas-zoom-out {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.96); }
+  }
+
+  .animate-in {
+    animation: atlas-fade-in 150ms ease;
+  }
+
+  .fade-in-0 {
+    animation: atlas-fade-in 150ms ease;
+  }
+
+  .fade-out-0 {
+    animation: atlas-fade-out 150ms ease;
+  }
+
+  .zoom-in-95 {
+    animation: atlas-zoom-in 150ms ease;
+  }
+
+  .zoom-out-95 {
+    animation: atlas-zoom-out 150ms ease;
+  }
+
+  .slide-in-from-top {
+    animation: atlas-slide-in-from-top 150ms ease;
+  }
+
+  .slide-in-from-bottom {
+    animation: atlas-slide-in-from-bottom 150ms ease;
+  }
+
+  .slide-in-from-left {
+    animation: atlas-slide-in-from-left 200ms ease;
+  }
+
+  .slide-in-from-right {
+    animation: atlas-slide-in-from-right 200ms ease;
+  }
+
+  /* Composable data-state-based animations */
+  [data-state="open"] { animation: atlas-fade-in 150ms ease; }
+  [data-state="closed"] { animation: atlas-fade-out 150ms ease; }
+}
+
+/* ─── Custom Scrollbars ──────────────────────────────────────────────────── */
+
+@layer utilities {
+  .atlas-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
+  }
+
+  .atlas-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .atlas-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .atlas-scrollbar::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--border));
+    border-radius: 9999px;
+  }
+
+  .atlas-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--muted-foreground) / 0.4);
+  }
+}