@yugnex/nexui-react 2.0.0

package/src/select.tsx

@@ -0,0 +1,296 @@
+"use client";
+// @yugnex/nexui-react — Select
+// Fully custom, keyboard-navigable, ARIA-compliant dropdown select.
+// No native <select>. Works with keyboard (arrows, Enter, Escape, Home/End).
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ReactNode,
+  type CSSProperties,
+  type KeyboardEvent,
+} from "react";
+
+interface SelectContextValue {
+  value:     string;
+  open:      boolean;
+  onChange:  (v: string, label: string) => void;
+  close:     () => void;
+  labelFor:  (v: string) => string;
+  registerOption: (v: string, label: string) => void;
+  focusedIdx: number;
+  options:   Array<{ value: string; label: string; disabled?: boolean }>;
+  setFocusedIdx: (i: number) => void;
+}
+const SelectContext = createContext<SelectContextValue>({} as SelectContextValue);
+
+interface SelectProps {
+  value?:       string;
+  defaultValue?: string;
+  onChange?:    (value: string) => void;
+  placeholder?: string;
+  disabled?:    boolean;
+  size?:        "sm" | "md" | "lg";
+  error?:       string;
+  label?:       string;
+  children?:    ReactNode;
+  className?:   string;
+  style?:       CSSProperties;
+}
+
+export function Select({
+  value: controlledValue,
+  defaultValue = "",
+  onChange,
+  placeholder = "Select...",
+  disabled,
+  size = "md",
+  error,
+  label,
+  children,
+  className,
+  style,
+}: SelectProps) {
+  const [internal, setInternal] = useState(defaultValue);
+  const [open, setOpen]         = useState(false);
+  const [focusedIdx, setFocusedIdx] = useState(-1);
+  const [options, setOptions]   = useState<Array<{ value: string; label: string; disabled?: boolean }>>([]);
+  const [labelMap, setLabelMap] = useState<Record<string, string>>({});
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const listRef    = useRef<HTMLUListElement>(null);
+  const id         = useId();
+
+  const value = controlledValue !== undefined ? controlledValue : internal;
+
+  const registerOption = useCallback((v: string, lbl: string) => {
+    setLabelMap(m => ({ ...m, [v]: lbl }));
+    setOptions(prev => {
+      if (prev.find(o => o.value === v)) return prev;
+      return [...prev, { value: v, label: lbl }];
+    });
+  }, []);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setFocusedIdx(-1);
+    triggerRef.current?.focus();
+  }, []);
+
+  const handleChange = useCallback((v: string, lbl: string) => {
+    setInternal(v);
+    onChange?.(v);
+    close();
+  }, [onChange, close]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      const trigger = triggerRef.current;
+      const list    = listRef.current;
+      if (!trigger?.contains(e.target as Node) && !list?.contains(e.target as Node)) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, close]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    const enabled = options.filter(o => !o.disabled);
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!open) { setOpen(true); setFocusedIdx(0); }
+        else if (focusedIdx >= 0) handleChange(enabled[focusedIdx]?.value ?? "", enabled[focusedIdx]?.label ?? "");
+        break;
+      case "Escape":
+        e.preventDefault();
+        close();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) { setOpen(true); setFocusedIdx(0); }
+        else setFocusedIdx(i => Math.min(i + 1, enabled.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setFocusedIdx(i => Math.max(i - 1, 0));
+        break;
+      case "Home":
+        e.preventDefault();
+        setFocusedIdx(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setFocusedIdx(enabled.length - 1);
+        break;
+    }
+  };
+
+  const sizeH: Record<string, string> = { sm: "28px", md: "34px", lg: "40px" };
+  const sizeFS: Record<string, string> = { sm: "11px", md: "13px", lg: "14px" };
+  const h  = sizeH[size]  ?? sizeH.md;
+  const fs = sizeFS[size] ?? sizeFS.md;
+
+  const displayLabel = value ? (labelMap[value] ?? value) : "";
+
+  return (
+    <SelectContext.Provider value={{
+      value, open, onChange: handleChange, close,
+      labelFor: (v) => labelMap[v] ?? v,
+      registerOption, focusedIdx, options, setFocusedIdx,
+    }}>
+      <div className={className} style={{ position: "relative", display: "inline-block", width: "100%", ...style }}>
+        {label && (
+          <label
+            htmlFor={`${id}-btn`}
+            style={{ display: "block", fontSize: "12px", fontWeight: 500, color: "var(--nx-text-2, #8B949E)", marginBottom: 5, fontFamily: "var(--nx-font-sans, system-ui, sans-serif)" }}
+          >
+            {label}
+          </label>
+        )}
+        <button
+          id={`${id}-btn`}
+          ref={triggerRef}
+          type="button"
+          disabled={disabled}
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          aria-controls={`${id}-list`}
+          onClick={() => !disabled && setOpen(o => !o)}
+          onKeyDown={handleKeyDown}
+          style={{
+            width: "100%",
+            height: h,
+            padding: "0 10px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+            background: "var(--nx-bg-elevated, #1C2128)",
+            border: `1px solid ${error ? "var(--nx-error, #EF4444)" : open ? "var(--nx-border-focus, rgba(232,144,16,0.60))" : "var(--nx-border, rgba(255,255,255,0.08))"}`,
+            borderRadius: "6px",
+            color: displayLabel ? "var(--nx-text, #E6EDF3)" : "var(--nx-text-4, #484F58)",
+            fontFamily: "var(--nx-font-sans, system-ui, sans-serif)",
+            fontSize: fs,
+            fontWeight: 400,
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? 0.45 : 1,
+            outline: "none",
+            boxShadow: open ? `0 0 0 3px rgba(232,144,16,0.12)` : "none",
+            transition: "border-color 150ms ease, box-shadow 150ms ease",
+          }}
+        >
+          <span style={{ flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+            {displayLabel || placeholder}
+          </span>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 150ms ease", flexShrink: 0, opacity: 0.6 }}>
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
+        </button>
+        {error && <span style={{ fontSize: "11px", color: "var(--nx-error, #EF4444)", marginTop: 4, display: "block", fontFamily: "var(--nx-font-sans, system-ui, sans-serif)" }}>{error}</span>}
+        {open && (
+          <ul
+            id={`${id}-list`}
+            ref={listRef}
+            role="listbox"
+            style={{
+              position: "absolute",
+              top: "100%",
+              left: 0,
+              right: 0,
+              marginTop: 4,
+              background: "var(--nx-bg-elevated, #1C2128)",
+              border: "1px solid var(--nx-border-strong, rgba(255,255,255,0.16))",
+              borderRadius: 8,
+              boxShadow: "0 10px 15px rgba(0,0,0,0.50), 0 4px 6px rgba(0,0,0,0.30)",
+              padding: "4px 0",
+              zIndex: 50,
+              maxHeight: 240,
+              overflowY: "auto",
+              listStyle: "none",
+              margin: 0,
+              animation: "nx-slide-up 150ms ease forwards",
+            }}
+          >
+            {children}
+          </ul>
+        )}
+      </div>
+    </SelectContext.Provider>
+  );
+}
+
+interface SelectItemProps {
+  value:      string;
+  children:   ReactNode;
+  disabled?:  boolean;
+}
+
+export function SelectItem({ value, children, disabled }: SelectItemProps) {
+  const ctx = useContext(SelectContext);
+  const label = typeof children === "string" ? children : value;
+
+  useEffect(() => { ctx.registerOption(value, label); }, [value, label]);
+
+  const enabledOptions = ctx.options.filter(o => !o.disabled);
+  const myIdx = enabledOptions.findIndex(o => o.value === value);
+  const isFocused = ctx.focusedIdx === myIdx;
+  const isSelected = ctx.value === value;
+
+  return (
+    <li
+      role="option"
+      aria-selected={isSelected}
+      aria-disabled={disabled}
+      onClick={() => !disabled && ctx.onChange(value, label)}
+      onMouseEnter={() => !disabled && ctx.setFocusedIdx(myIdx)}
+      style={{
+        padding: "7px 12px",
+        fontSize: "var(--nx-fs-sm, 12px)",
+        fontFamily: "var(--nx-font-sans, system-ui, sans-serif)",
+        color: disabled ? "var(--nx-text-4, #484F58)" : isSelected ? "var(--nx-accent-text, #F5B342)" : "var(--nx-text, #E6EDF3)",
+        background: isFocused ? "var(--nx-bg-overlay, #21262D)" : "transparent",
+        cursor: disabled ? "not-allowed" : "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 8,
+        transition: "background 100ms ease",
+      }}
+    >
+      <span>{children}</span>
+      {isSelected && (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M20 6L9 17l-5-5"/>
+        </svg>
+      )}
+    </li>
+  );
+}
+
+export function SelectGroup({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div>
+      <div style={{
+        padding: "6px 12px 2px",
+        fontSize: "10px",
+        fontWeight: 600,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+        color: "var(--nx-text-4, #484F58)",
+        fontFamily: "var(--nx-font-sans, system-ui, sans-serif)",
+      }}>
+        {label}
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/tabs.tsx

@@ -0,0 +1,150 @@
+"use client";
+// @yugnex/nexui-react — Tabs
+// Controlled and uncontrolled usage.
+// Usage:
+//   <Tabs defaultValue="code">
+//     <TabsList>
+//       <TabsTrigger value="code">Code</TabsTrigger>
+//       <TabsTrigger value="preview">Preview</TabsTrigger>
+//     </TabsList>
+//     <TabsContent value="code"><CodeView /></TabsContent>
+//     <TabsContent value="preview"><Preview /></TabsContent>
+//   </Tabs>
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+  type CSSProperties,
+  type KeyboardEvent,
+} from "react";
+
+interface TabsContextValue {
+  active:   string;
+  setActive: (v: string) => void;
+}
+const TabsContext = createContext<TabsContextValue>({ active: "", setActive: () => {} });
+
+interface TabsProps {
+  defaultValue?: string;
+  value?:        string;
+  onChange?:     (v: string) => void;
+  children?:     ReactNode;
+  className?:    string;
+  style?:        CSSProperties;
+}
+
+export function Tabs({ defaultValue = "", value, onChange, children, className, style }: TabsProps) {
+  const [internal, setInternal] = useState(defaultValue);
+  const active   = value !== undefined ? value : internal;
+  const setActive = useCallback((v: string) => {
+    setInternal(v);
+    onChange?.(v);
+  }, [onChange]);
+
+  return (
+    <TabsContext.Provider value={{ active, setActive }}>
+      <div className={className} style={{ display: "flex", flexDirection: "column", ...style }}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+interface TabsListProps {
+  children?:  ReactNode;
+  className?: string;
+  style?:     CSSProperties;
+}
+
+export function TabsList({ children, className, style }: TabsListProps) {
+  return (
+    <div
+      role="tablist"
+      className={className}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        borderBottom: "1px solid var(--nx-border, rgba(255,255,255,0.08))",
+        padding: "0 4px",
+        overflowX: "auto",
+        scrollbarWidth: "none",
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface TabsTriggerProps {
+  value:      string;
+  children?:  ReactNode;
+  disabled?:  boolean;
+  className?: string;
+  style?:     CSSProperties;
+}
+
+export function TabsTrigger({ value, children, disabled, className, style }: TabsTriggerProps) {
+  const { active, setActive } = useContext(TabsContext);
+  const isActive = active === value;
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setActive(value); }
+  };
+
+  return (
+    <button
+      role="tab"
+      aria-selected={isActive}
+      tabIndex={isActive ? 0 : -1}
+      disabled={disabled}
+      className={className}
+      onClick={() => !disabled && setActive(value)}
+      onKeyDown={handleKeyDown}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "8px 12px",
+        fontSize: "var(--nx-fs-sm, 12px)",
+        fontWeight: 500,
+        fontFamily: "var(--nx-font-sans, system-ui, sans-serif)",
+        color: isActive ? "var(--nx-text, #E6EDF3)" : "var(--nx-text-3, #6E7681)",
+        background: "transparent",
+        border: "none",
+        borderBottom: `2px solid ${isActive ? "var(--nx-accent, #E89010)" : "transparent"}`,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.4 : 1,
+        transition: "color 150ms ease, border-color 150ms ease",
+        whiteSpace: "nowrap",
+        marginBottom: -1,
+        outline: "none",
+        borderRadius: "4px 4px 0 0",
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface TabsContentProps {
+  value:      string;
+  children?:  ReactNode;
+  className?: string;
+  style?:     CSSProperties;
+}
+
+export function TabsContent({ value, children, className, style }: TabsContentProps) {
+  const { active } = useContext(TabsContext);
+  if (active !== value) return null;
+  return (
+    <div role="tabpanel" className={className} style={{ flex: 1, ...style }}>
+      {children}
+    </div>
+  );
+}

package/src/toast.tsx

@@ -0,0 +1,178 @@
+"use client";
+// @yugnex/nexui-react — Toast / Toaster
+// Zero external deps. React context-based queue.
+//
+// Setup (app/layout.tsx):
+//   <NexuiProvider><Toaster />{children}</NexuiProvider>
+//
+// Usage anywhere:
+//   const { toast } = useToast();
+//   toast.success("Saved!");
+//   toast.error("Something went wrong");
+//   toast("Custom message", { variant: "accent", duration: 5000 });
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ReactNode,
+  type CSSProperties,
+} from "react";
+
+export type ToastVariant = "default" | "success" | "error" | "warning" | "accent" | "live";
+
+export interface ToastItem {
+  id:        string;
+  message:   ReactNode;
+  variant:   ToastVariant;
+  duration:  number;
+  createdAt: number;
+}
+
+interface ToastContextValue {
+  toasts:   ToastItem[];
+  add:      (message: ReactNode, opts?: Partial<Pick<ToastItem, "variant" | "duration">>) => string;
+  remove:   (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue>({
+  toasts: [],
+  add:    () => "",
+  remove: () => {},
+});
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const counter = useRef(0);
+
+  const remove = useCallback((id: string) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  const add = useCallback((message: ReactNode, opts?: Partial<Pick<ToastItem, "variant" | "duration">>): string => {
+    const id = `nx-toast-${++counter.current}`;
+    const item: ToastItem = {
+      id,
+      message,
+      variant:  opts?.variant  ?? "default",
+      duration: opts?.duration ?? 4000,
+      createdAt: Date.now(),
+    };
+    setToasts(prev => [item, ...prev].slice(0, 5));
+    if (item.duration > 0) {
+      setTimeout(() => remove(id), item.duration);
+    }
+    return id;
+  }, [remove]);
+
+  return (
+    <ToastContext.Provider value={{ toasts, add, remove }}>
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const { add, remove } = useContext(ToastContext);
+  return {
+    toast: Object.assign(
+      (msg: ReactNode, opts?: Partial<Pick<ToastItem, "variant" | "duration">>) => add(msg, opts),
+      {
+        success: (msg: ReactNode, opts?: Partial<Pick<ToastItem, "duration">>) => add(msg, { ...opts, variant: "success" }),
+        error:   (msg: ReactNode, opts?: Partial<Pick<ToastItem, "duration">>) => add(msg, { ...opts, variant: "error" }),
+        warning: (msg: ReactNode, opts?: Partial<Pick<ToastItem, "duration">>) => add(msg, { ...opts, variant: "warning" }),
+        accent:  (msg: ReactNode, opts?: Partial<Pick<ToastItem, "duration">>) => add(msg, { ...opts, variant: "accent" }),
+        live:    (msg: ReactNode, opts?: Partial<Pick<ToastItem, "duration">>) => add(msg, { ...opts, variant: "live" }),
+        dismiss: remove,
+      }
+    ),
+  };
+}
+
+const VARIANT_STYLES: Record<ToastVariant, CSSProperties> = {
+  default: { borderColor: "var(--nx-border-strong, rgba(255,255,255,0.16))" },
+  success: { borderColor: "rgba(34,197,94,0.35)",   color: "var(--nx-success, #22C55E)" },
+  error:   { borderColor: "rgba(239,68,68,0.35)",   color: "var(--nx-error,   #EF4444)" },
+  warning: { borderColor: "rgba(234,179,8,0.35)",   color: "var(--nx-warning, #EAB308)" },
+  accent:  { borderColor: "var(--nx-accent-border, rgba(232,144,16,0.22))", color: "var(--nx-accent-text, #F5B342)" },
+  live:    { borderColor: "var(--nx-live-border, rgba(15,212,198,0.22))",   color: "var(--nx-live,    #0FD4C6)" },
+};
+
+function ToastItem({ item, onClose }: { item: ToastItem; onClose: () => void }) {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => { requestAnimationFrame(() => setVisible(true)); }, []);
+
+  return (
+    <div
+      role="alert"
+      aria-live="polite"
+      style={{
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "12px 16px",
+        background: "var(--nx-bg-elevated, #1C2128)",
+        border: "1px solid",
+        borderRadius: 8,
+        boxShadow: "0 10px 15px rgba(0,0,0,0.50), 0 4px 6px rgba(0,0,0,0.30)",
+        fontFamily: "var(--nx-font-sans, system-ui, sans-serif)",
+        fontSize: "var(--nx-fs-sm, 12px)",
+        color: "var(--nx-text, #E6EDF3)",
+        maxWidth: 380,
+        width: "100%",
+        transform: visible ? "translateY(0)" : "translateY(8px)",
+        opacity: visible ? 1 : 0,
+        transition: "transform 200ms ease, opacity 200ms ease",
+        ...VARIANT_STYLES[item.variant],
+      }}
+    >
+      <span style={{ flex: 1, lineHeight: 1.5 }}>{item.message}</span>
+      <button
+        onClick={onClose}
+        aria-label="Dismiss"
+        style={{
+          background: "none",
+          border: "none",
+          color: "var(--nx-text-4, #484F58)",
+          cursor: "pointer",
+          fontSize: 14,
+          lineHeight: 1,
+          padding: 0,
+          flexShrink: 0,
+          marginTop: 1,
+        }}
+      >✕</button>
+    </div>
+  );
+}
+
+export function Toaster() {
+  const { toasts, remove } = useContext(ToastContext);
+
+  return (
+    <div
+      aria-label="Notifications"
+      style={{
+        position: "fixed",
+        bottom: 24,
+        right: 24,
+        zIndex: 300,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        pointerEvents: "none",
+      }}
+    >
+      {toasts.map(t => (
+        <div key={t.id} style={{ pointerEvents: "auto" }}>
+          <ToastItem item={t} onClose={() => remove(t.id)} />
+        </div>
+      ))}
+    </div>
+  );
+}