@moontra/moonui 0.1.0

package/README.md

@@ -0,0 +1,215 @@
+# MoonUI
+
+MoonUI is a modern UI component library for React applications. It provides a comprehensive set of accessible, customizable, and reusable components that make building modern web applications faster and easier.
+
+## Features
+
+- 🌙 **Modern Design**: Beautiful, clean UI components with a consistent design language
+- 🎨 **Customizable**: Easily customize components with variants and Tailwind CSS
+- ♿ **Accessible**: Built on top of Radix UI primitives for robust accessibility
+- 🔍 **Type Safe**: Written in TypeScript with comprehensive type definitions
+- 🌗 **Dark Mode**: Built-in dark mode support for all components
+- 📱 **Responsive**: All components are designed to work on any device size
+
+## Installation
+
+```bash
+npm install moonui
+# or
+yarn add moonui
+# or
+pnpm add moonui
+```
+
+## Setup
+
+### 1. Install dependencies
+
+MoonUI requires the following peer dependencies:
+
+```bash
+npm install tailwindcss
+```
+
+### 2. Add Tailwind CSS configuration
+
+Add MoonUI's Tailwind CSS configuration to your `tailwind.config.js`:
+
+```js
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    // ...
+    "./node_modules/moonui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+}
+```
+
+### 3. Add CSS variables
+
+Add the following CSS variables to your global CSS file:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --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%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .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% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+## Usage
+
+```jsx
+import { Button } from 'moonui';
+
+export default function App() {
+  return (
+    <Button variant="default">
+      Click me
+    </Button>
+  );
+}
+```
+
+## Components
+
+MoonUI provides a wide range of components:
+
+- **Form Components**: Button, Input, Checkbox, Radio, Select, Switch, etc.
+- **Layout Components**: Card, Dialog, Accordion, Sheet, Popover, etc.
+- **Navigation Components**: Tabs, Breadcrumb, DropdownMenu, NavigationMenu, etc.
+- **Data Display Components**: Badge, Table, Avatar, Progress, Skeleton, etc.
+
+## Documentation
+
+For full documentation, visit [moonui.com/docs](https://moonui.com/docs).
+
+## CLI Tool
+
+MoonUI also provides a CLI tool for easy integration:
+
+```bash
+npm install -g @moonui/cli
+moonui init
+```
+
+## License
+
+MIT © MoonUI

package/dist/index.d.mts

@@ -0,0 +1,73 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as React$1 from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Utility function for merging Tailwind CSS classes with clsx/cva
+ * @param inputs - Class values to be merged
+ * @returns - Merged class string
+ */
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Format a monetary amount to a currency string
+ * @param amount - Amount in cents or smallest currency unit
+ * @param currency - Currency code (default: USD)
+ * @returns - Formatted currency string
+ */
+declare function formatCurrency(amount: number, currency?: string): string;
+/**
+ * Generate a unique ID (useful for components that need unique IDs)
+ * @param prefix - Optional prefix for the ID
+ * @returns - A unique string ID
+ */
+declare function generateId(prefix?: string): string;
+/**
+ * Safely access nested object properties
+ * @param obj - The object to query
+ * @param path - Path to the property as a dot-separated string
+ * @param fallback - Value to return if the path doesn't exist
+ * @returns - The value at the path or the fallback
+ */
+declare function get<T = any>(obj: any, path: string, fallback?: T | null): T | null;
+/**
+ * Debounce a function call
+ * @param fn - Function to debounce
+ * @param ms - Milliseconds to delay
+ * @returns - Debounced function
+ */
+declare function debounce<T extends (...args: any[]) => any>(fn: T, ms?: number): (...args: Parameters<T>) => void;
+/**
+ * Combine multiple React refs into one
+ * @param refs - Refs to combine
+ * @returns - Combined ref callback
+ */
+declare function combineRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;
+
+declare const buttonVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "primary" | "success";
+    size?: "default" | "sm" | "lg" | "icon";
+} & class_variance_authority_dist_types.ClassProp) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const badgeVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info";
+} & class_variance_authority_dist_types.ClassProp) => string;
+interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
+type CardProps = React$1.ComponentProps<typeof Card>;
+
+export { Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardProps, CardTitle, badgeVariants, buttonVariants, cn, combineRefs, debounce, formatCurrency, generateId, get };

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as React$1 from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Utility function for merging Tailwind CSS classes with clsx/cva
+ * @param inputs - Class values to be merged
+ * @returns - Merged class string
+ */
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Format a monetary amount to a currency string
+ * @param amount - Amount in cents or smallest currency unit
+ * @param currency - Currency code (default: USD)
+ * @returns - Formatted currency string
+ */
+declare function formatCurrency(amount: number, currency?: string): string;
+/**
+ * Generate a unique ID (useful for components that need unique IDs)
+ * @param prefix - Optional prefix for the ID
+ * @returns - A unique string ID
+ */
+declare function generateId(prefix?: string): string;
+/**
+ * Safely access nested object properties
+ * @param obj - The object to query
+ * @param path - Path to the property as a dot-separated string
+ * @param fallback - Value to return if the path doesn't exist
+ * @returns - The value at the path or the fallback
+ */
+declare function get<T = any>(obj: any, path: string, fallback?: T | null): T | null;
+/**
+ * Debounce a function call
+ * @param fn - Function to debounce
+ * @param ms - Milliseconds to delay
+ * @returns - Debounced function
+ */
+declare function debounce<T extends (...args: any[]) => any>(fn: T, ms?: number): (...args: Parameters<T>) => void;
+/**
+ * Combine multiple React refs into one
+ * @param refs - Refs to combine
+ * @returns - Combined ref callback
+ */
+declare function combineRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;
+
+declare const buttonVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "primary" | "success";
+    size?: "default" | "sm" | "lg" | "icon";
+} & class_variance_authority_dist_types.ClassProp) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const badgeVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info";
+} & class_variance_authority_dist_types.ClassProp) => string;
+interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
+type CardProps = React$1.ComponentProps<typeof Card>;
+
+export { Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardProps, CardTitle, badgeVariants, buttonVariants, cn, combineRefs, debounce, formatCurrency, generateId, get };

package/dist/index.js

@@ -0,0 +1,244 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  badgeVariants: () => badgeVariants,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn,
+  combineRefs: () => combineRefs,
+  debounce: () => debounce,
+  formatCurrency: () => formatCurrency,
+  generateId: () => generateId,
+  get: () => get
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+function formatCurrency(amount, currency = "USD") {
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency
+  });
+  return formatter.format(amount / 100);
+}
+function generateId(prefix) {
+  const randomPart = Math.random().toString(36).substring(2, 9);
+  return prefix ? `${prefix}-${randomPart}` : randomPart;
+}
+function get(obj, path, fallback = null) {
+  const keys = path.split(".");
+  let result = obj;
+  for (const key of keys) {
+    if (result === void 0 || result === null) {
+      return fallback;
+    }
+    result = result[key];
+  }
+  return result === void 0 ? fallback : result;
+}
+function debounce(fn, ms = 300) {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), ms);
+  };
+}
+function combineRefs(...refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
+// src/components/ui/button.tsx
+var React = __toESM(require("react"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+  {
+    variants: {
+      variant: {
+        default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+        destructive: "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+        outline: "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        secondary: "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
+        ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+        primary: "bg-primary text-white hover:bg-primary/90",
+        success: "bg-green-500 text-white hover:bg-green-600"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? React.Fragment : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/badge.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        success: "border-transparent bg-green-500 text-white hover:bg-green-600",
+        warning: "border-transparent bg-yellow-500 text-white hover:bg-yellow-600",
+        info: "border-transparent bg-blue-500 text-white hover:bg-blue-600"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/components/ui/card.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-slate-500 dark:text-slate-400", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  badgeVariants,
+  buttonVariants,
+  cn,
+  combineRefs,
+  debounce,
+  formatCurrency,
+  generateId,
+  get
+});

package/dist/index.mjs

@@ -0,0 +1,193 @@
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function formatCurrency(amount, currency = "USD") {
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency
+  });
+  return formatter.format(amount / 100);
+}
+function generateId(prefix) {
+  const randomPart = Math.random().toString(36).substring(2, 9);
+  return prefix ? `${prefix}-${randomPart}` : randomPart;
+}
+function get(obj, path, fallback = null) {
+  const keys = path.split(".");
+  let result = obj;
+  for (const key of keys) {
+    if (result === void 0 || result === null) {
+      return fallback;
+    }
+    result = result[key];
+  }
+  return result === void 0 ? fallback : result;
+}
+function debounce(fn, ms = 300) {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), ms);
+  };
+}
+function combineRefs(...refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
+// src/components/ui/button.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+  {
+    variants: {
+      variant: {
+        default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+        destructive: "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+        outline: "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        secondary: "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
+        ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+        primary: "bg-primary text-white hover:bg-primary/90",
+        success: "bg-green-500 text-white hover:bg-green-600"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? React.Fragment : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        success: "border-transparent bg-green-500 text-white hover:bg-green-600",
+        warning: "border-transparent bg-yellow-500 text-white hover:bg-yellow-600",
+        info: "border-transparent bg-blue-500 text-white hover:bg-blue-600"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/components/ui/card.tsx
+import * as React2 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-slate-500 dark:text-slate-400", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+export {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  badgeVariants,
+  buttonVariants,
+  cn,
+  combineRefs,
+  debounce,
+  formatCurrency,
+  generateId,
+  get
+};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@moontra/moonui",
+  "version": "0.1.0",
+  "description": "Modern UI component library for React applications with premium dark mode support",
+  "author": "MoonUI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oguzhanayyildiz/moonui"
+  },
+  "homepage": "https://github.com/oguzhanayyildiz/moonui",
+  "bugs": {
+    "url": "https://github.com/oguzhanayyildiz/moonui/issues"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist/**",
+    "styles/**"
+  ],
+  "keywords": [
+    "ui",
+    "components",
+    "design-system",
+    "react",
+    "nextjs",
+    "tailwindcss",
+    "radix-ui"
+  ],
+  "scripts": {
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --watch",
+    "build": "tsup src/index.tsx --format esm,cjs --dts",
+    "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.284.0",
+    "tailwind-merge": "^1.14.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.16.0",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.39.0",
+    "eslint-config-next": "^13.4.9",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-tailwindcss": "^3.13.0",
+    "postcss": "^8.4.25",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.3.2",
+    "tsup": "^7.1.0",
+    "typescript": "^5.1.6"
+  }
+}