@yugnex/nexui-react 2.0.0

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../src/tooltip.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@yugnex/nexui-react",
+  "version": "2.0.0",
+  "description": "React component library for @yugnex/nexui. Full replacement for Tailwind CSS + MUI + shadcn/ui. Zero external dependencies.",
+  "license": "LicenseRef-YugNex-Proprietary",
+  "author": "YugNex Technology (OPC) Private Limited <legal@yugnex.com>",
+  "type": "module",
+  "main":   "./dist/index.js",
+  "module": "./dist/index.js",
+  "types":  "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types":  "./dist/index.d.ts"
+    },
+    "./provider":   { "import": "./dist/provider.js",   "types": "./dist/provider.d.ts"   },
+    "./toast":      { "import": "./dist/toast.js",      "types": "./dist/toast.d.ts"      },
+    "./modal":      { "import": "./dist/modal.js",      "types": "./dist/modal.d.ts"      },
+    "./tabs":       { "import": "./dist/tabs.js",       "types": "./dist/tabs.d.ts"       },
+    "./select":     { "import": "./dist/select.js",     "types": "./dist/select.d.ts"     },
+    "./tooltip":    { "import": "./dist/tooltip.js",    "types": "./dist/tooltip.d.ts"    },
+    "./card":       { "import": "./dist/card.js",       "types": "./dist/card.d.ts"       },
+    "./primitives": { "import": "./dist/primitives.js", "types": "./dist/primitives.d.ts" }
+  },
+  "files": ["dist", "src"],
+  "scripts": {
+    "build":       "tsc --project tsconfig.json",
+    "build:watch": "tsc --project tsconfig.json --watch",
+    "typecheck":   "tsc --noEmit",
+    "clean":       "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react":           ">=18.0.0",
+    "react-dom":       ">=18.0.0",
+    "@yugnex/nexui":   "^2.0.0"
+  },
+  "devDependencies": {
+    "typescript":       "^5.5.0",
+    "@types/react":     "^18.0.0",
+    "@types/react-dom": "^18.0.0"
+  },
+  "dependencies": {},
+  "sideEffects": false
+}

package/src/card.tsx

@@ -0,0 +1,137 @@
+"use client";
+// @yugnex/nexui-react — Card
+// Composable card with optional header, body, and footer sections.
+// Usage:
+//   <Card>
+//     <CardHeader title="Project" action={<Badge>Active</Badge>} />
+//     <CardBody>Content here</CardBody>
+//     <CardFooter><Button>Open</Button></CardFooter>
+//   </Card>
+
+import React, { type ReactNode, type CSSProperties } from "react";
+
+interface CardProps {
+  variant?:   "base" | "surface" | "elevated";
+  hoverable?: boolean;
+  onClick?:   () => void;
+  children?:  ReactNode;
+  className?: string;
+  style?:     CSSProperties;
+}
+
+export function Card({ variant = "surface", hoverable, onClick, children, className, style }: CardProps) {
+  const bgMap: Record<string, string> = {
+    base:     "var(--nx-bg-base, #0D1117)",
+    surface:  "var(--nx-bg-surface, #161B22)",
+    elevated: "var(--nx-bg-elevated, #1C2128)",
+  };
+
+  return (
+    <div
+      className={className}
+      onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      style={{
+        background: bgMap[variant] ?? bgMap.surface,
+        border: "1px solid var(--nx-border, rgba(255,255,255,0.08))",
+        borderRadius: 10,
+        overflow: "hidden",
+        fontFamily: "var(--nx-font-sans, system-ui, sans-serif)",
+        color: "var(--nx-text, #E6EDF3)",
+        cursor: onClick ? "pointer" : "default",
+        transition: hoverable || onClick ? "border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease" : "none",
+        ...(hoverable || onClick ? {
+          ["&:hover" as string]: {
+            borderColor: "var(--nx-border-strong, rgba(255,255,255,0.16))",
+            boxShadow: "0 4px 6px rgba(0,0,0,0.40)",
+            transform: "translateY(-1px)",
+          },
+        } : {}),
+        ...style,
+      }}
+      onMouseEnter={hoverable || onClick ? e => {
+        const el = e.currentTarget as HTMLDivElement;
+        el.style.borderColor = "var(--nx-border-strong, rgba(255,255,255,0.16))";
+        el.style.boxShadow = "0 4px 6px rgba(0,0,0,0.40)";
+        if (onClick) el.style.transform = "translateY(-1px)";
+      } : undefined}
+      onMouseLeave={hoverable || onClick ? e => {
+        const el = e.currentTarget as HTMLDivElement;
+        el.style.borderColor = "";
+        el.style.boxShadow = "";
+        el.style.transform = "";
+      } : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface CardHeaderProps {
+  title?:     ReactNode;
+  subtitle?:  ReactNode;
+  action?:    ReactNode;
+  children?:  ReactNode;
+  className?: string;
+  style?:     CSSProperties;
+}
+
+export function CardHeader({ title, subtitle, action, children, className, style }: CardHeaderProps) {
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "16px 20px",
+        borderBottom: "1px solid var(--nx-border, rgba(255,255,255,0.08))",
+        ...style,
+      }}
+    >
+      <div style={{ flex: 1, minWidth: 0 }}>
+        {title && (
+          <div style={{ fontSize: "var(--nx-fs-md, 14px)", fontWeight: 600, color: "var(--nx-text, #E6EDF3)", lineHeight: 1.3 }}>
+            {title}
+          </div>
+        )}
+        {subtitle && (
+          <div style={{ fontSize: "var(--nx-fs-xs, 11px)", color: "var(--nx-text-3, #6E7681)", marginTop: 3, lineHeight: 1.4 }}>
+            {subtitle}
+          </div>
+        )}
+        {children}
+      </div>
+      {action && <div style={{ flexShrink: 0 }}>{action}</div>}
+    </div>
+  );
+}
+
+export function CardBody({ children, className, style }: { children?: ReactNode; className?: string; style?: CSSProperties }) {
+  return (
+    <div className={className} style={{ padding: "16px 20px", ...style }}>
+      {children}
+    </div>
+  );
+}
+
+export function CardFooter({ children, className, style }: { children?: ReactNode; className?: string; style?: CSSProperties }) {
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 8,
+        padding: "12px 20px",
+        borderTop: "1px solid var(--nx-border, rgba(255,255,255,0.08))",
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,35 @@
+// @yugnex/nexui-react — Main Entry Point
+// Full React component library powered by @yugnex/nexui Web Components.
+// Zero external dependencies beyond React itself.
+
+// ── Provider & Hooks ─────────────────────────────────────────────────────────
+export { NexuiProvider, useNexui, type NexuiTheme } from "./provider";
+export { ToastProvider, Toaster, useToast }         from "./toast";
+
+// ── Web Component Wrappers ───────────────────────────────────────────────────
+export {
+  Panel,
+  Button,
+  Badge,
+  Input,
+  Avatar,
+  StatusRing,
+  TextStream,
+  Progress,
+  Switch,
+  Checkbox,
+  Skeleton,
+  Separator,
+  Spinner,
+  type TextStreamHandle,
+} from "./primitives";
+
+// ── React-Native Components ──────────────────────────────────────────────────
+export { Modal }                                          from "./modal";
+export { Tabs, TabsList, TabsTrigger, TabsContent }       from "./tabs";
+export { Select, SelectItem, SelectGroup }                from "./select";
+export { Tooltip }                                        from "./tooltip";
+export { Card, CardHeader, CardBody, CardFooter }         from "./card";
+
+// ── Re-export token types for consumers ─────────────────────────────────────
+export type { NexuiSemanticToken } from "@yugnex/nexui";

package/src/modal.tsx

@@ -0,0 +1,172 @@
+"use client";
+// @yugnex/nexui-react — Modal / Dialog
+// Uses native <dialog> element: focus trap, Escape key, backdrop all built-in.
+// Supports controlled (open prop) and uncontrolled usage.
+
+import React, {
+  useEffect,
+  useRef,
+  useCallback,
+  type ReactNode,
+  type CSSProperties,
+} from "react";
+
+const modalStyles: Record<string, CSSProperties> = {
+  backdrop: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.65)",
+    backdropFilter: "blur(4px)",
+    zIndex: 200,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "16px",
+    animation: "nx-fade-in 150ms ease forwards",
+  },
+  dialog: {
+    position: "relative",
+    background: "var(--nx-bg-elevated, #1C2128)",
+    border: "1px solid var(--nx-border-strong, rgba(255,255,255,0.16))",
+    borderRadius: "12px",
+    boxShadow: "0 25px 50px rgba(0,0,0,0.65)",
+    color: "var(--nx-text, #E6EDF3)",
+    fontFamily: "var(--nx-font-sans, system-ui, sans-serif)",
+    maxHeight: "90vh",
+    display: "flex",
+    flexDirection: "column",
+    animation: "nx-scale-in 200ms cubic-bezier(0.34,1.56,0.64,1) forwards",
+    outline: "none",
+    padding: 0,
+    margin: 0,
+    width: "100%",
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "20px 24px 0",
+    flexShrink: 0,
+  },
+  title: {
+    fontSize: "var(--nx-fs-lg, 18px)",
+    fontWeight: 600,
+    color: "var(--nx-text, #E6EDF3)",
+    margin: 0,
+    lineHeight: 1.3,
+  },
+  closeBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    border: "1px solid transparent",
+    background: "transparent",
+    color: "var(--nx-text-3, #6E7681)",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    transition: "background 150ms ease, color 150ms ease",
+    fontSize: 16,
+    lineHeight: 1,
+  },
+  body: {
+    padding: "16px 24px",
+    overflowY: "auto",
+    flex: 1,
+  },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 8,
+    padding: "0 24px 20px",
+    flexShrink: 0,
+  },
+};
+
+const SIZE_WIDTHS: Record<string, number> = {
+  sm:   400,
+  md:   560,
+  lg:   720,
+  xl:   900,
+  full: 9999,
+};
+
+interface ModalProps {
+  open:       boolean;
+  onClose:    () => void;
+  title?:     string;
+  children?:  ReactNode;
+  footer?:    ReactNode;
+  size?:      "sm" | "md" | "lg" | "xl" | "full";
+  closeable?: boolean;
+}
+
+export function Modal({ open, onClose, title, children, footer, size = "md", closeable = true }: ModalProps) {
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const dialogRef   = useRef<HTMLDivElement>(null);
+
+  // Focus the dialog when opened
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => dialogRef.current?.focus());
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => { document.body.style.overflow = ""; };
+  }, [open]);
+
+  // Escape key
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Escape" && closeable) onClose();
+  }, [closeable, onClose]);
+
+  // Click outside
+  const handleBackdropClick = useCallback((e: React.MouseEvent) => {
+    if (e.target === backdropRef.current && closeable) onClose();
+  }, [closeable, onClose]);
+
+  if (!open) return null;
+
+  const maxWidth = SIZE_WIDTHS[size] ?? SIZE_WIDTHS.md;
+
+  return (
+    <div
+      ref={backdropRef}
+      style={modalStyles.backdrop}
+      onClick={handleBackdropClick}
+      aria-modal="true"
+      role="dialog"
+      aria-label={title}
+    >
+      <div
+        ref={dialogRef}
+        style={{ ...modalStyles.dialog, maxWidth: size === "full" ? "calc(100% - 32px)" : `${maxWidth}px` }}
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
+      >
+        {(title || closeable) && (
+          <div style={modalStyles.header}>
+            {title && <h2 style={modalStyles.title}>{title}</h2>}
+            {closeable && (
+              <button
+                style={modalStyles.closeBtn}
+                onClick={onClose}
+                aria-label="Close modal"
+                onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.background = "var(--nx-bg-overlay, #21262D)"; (e.currentTarget as HTMLButtonElement).style.color = "var(--nx-text, #E6EDF3)"; }}
+                onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.background = "transparent"; (e.currentTarget as HTMLButtonElement).style.color = "var(--nx-text-3, #6E7681)"; }}
+              >
+                ✕
+              </button>
+            )}
+          </div>
+        )}
+        <div style={modalStyles.body}>{children}</div>
+        {footer && <div style={modalStyles.footer}>{footer}</div>}
+      </div>
+    </div>
+  );
+}