@kawaiininja/ui 1.0.7 → 1.0.8

package/dist/components/card/GlassyStatusRow.d.ts

@@ -1,14 +1,10 @@
 import React from "react";
 export interface GlassyStatusRowProps {
-    data: {
-        payload: {
-            role: string;
-            category: string;
-        };
-        status: string;
-        createdAt: {
-            $date: string;
-        };
-    };
+    icon?: React.ElementType;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
 }
 export declare const GlassyStatusRow: React.FC<GlassyStatusRowProps>;

package/dist/components/card/GlassyStatusRow.js

@@ -1,3 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight, GitBranch, Link2 } from "lucide-react";
-export const GlassyStatusRow = ({ data }) => (_jsxs("div", { className: "flex items-center gap-4 p-4 bg-gradient-to-r from-white/[0.03] to-transparent rounded-2xl border-l-4 border-blue-500 hover:from-white/[0.05] transition-all mb-3 group", children: [_jsx("div", { className: "shrink-0 w-10 h-10 rounded-xl bg-black border border-white/5 flex items-center justify-center text-[#FF8A1F] group-hover:scale-110 transition-transform", children: _jsx(GitBranch, { size: 18 }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 mb-0.5", children: [_jsx("h4", { className: "text-xs font-bold text-white uppercase", children: data.payload.role }), _jsx("span", { className: "text-[8px] text-emerald-500 font-black uppercase tracking-widest", children: data.status })] }), _jsxs("div", { className: "flex items-center gap-3 text-[9px] text-gray-600 font-medium", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Link2, { size: 10 }), " ", data.payload.category] }), _jsx("span", { className: "w-1 h-1 bg-gray-800 rounded-full" }), _jsx("span", { children: new Date(data.createdAt.$date).toLocaleDateString() })] })] }), _jsx(ChevronRight, { size: 16, className: "text-gray-800 group-hover:text-white transition-colors" })] }));
+import { GitBranch } from "lucide-react";
+export const GlassyStatusRow = ({ icon: Icon = GitBranch, label, description, children, onClick, className = "", }) => {
+    return (_jsxs("div", { onClick: onClick, className: `flex items-center gap-4 p-4 bg-gradient-to-r from-white/[0.03] to-transparent rounded-2xl border-l-4 border-blue-500 hover:from-white/[0.05] transition-all mb-3 group ${onClick ? "cursor-pointer" : ""} ${className}`, children: [_jsx("div", { className: "shrink-0 w-10 h-10 rounded-xl bg-black border border-white/5 flex items-center justify-center text-[#FF8A1F] group-hover:scale-110 transition-transform", children: _jsx(Icon, { size: 18 }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "flex items-center mb-0.5", children: _jsx("div", { className: "text-xs font-bold text-white uppercase", children: label }) }), _jsx("div", { className: "text-[9px] text-gray-600 font-medium", children: description })] }), children] }));
+};

package/dist/components/card/VantaCard.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface VantaCardProps {
+    icon?: React.ElementType;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const VantaCard: React.FC<VantaCardProps>;

package/dist/components/card/VantaCard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GitBranch } from "lucide-react";
+export const VantaCard = ({ icon: Icon = GitBranch, label, description, children, onClick, className = "", }) => {
+    return (_jsxs("div", { onClick: onClick, className: `flex items-center gap-4 p-4 bg-gradient-to-r from-white/[0.03] to-transparent rounded-2xl border-l-4 border-blue-500 hover:from-white/[0.05] transition-all mb-3 group ${onClick ? "cursor-pointer" : ""} ${className}`, children: [_jsx("div", { className: "shrink-0 w-10 h-10 rounded-xl bg-black border border-white/5 flex items-center justify-center text-[#FF8A1F] group-hover:scale-110 transition-transform", children: _jsx(Icon, { size: 18 }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "flex items-center mb-0.5", children: _jsx("div", { className: "text-xs font-bold text-white uppercase", children: label }) }), _jsx("div", { className: "text-[9px] text-gray-600 font-medium", children: description })] }), children] }));
+};

package/dist/components/card/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./AccentStrip";
 export * from "./Card";
 export * from "./GlassyRow";
-export * from "./GlassyStatusRow";
+export * from "./VantaCard";

package/dist/components/card/index.js

@@ -1,4 +1,4 @@
 export * from "./AccentStrip";
 export * from "./Card";
 export * from "./GlassyRow";
-export * from "./GlassyStatusRow";
+export * from "./VantaCard";

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./card";
 export * from "./label";
 export * from "./page";
+export * from "./searchbar";
 export * from "./section";
 export * from "./settings";
 export * from "./toggle";

package/dist/components/index.js

@@ -1,6 +1,7 @@
 export * from "./card";
 export * from "./label";
 export * from "./page";
+export * from "./searchbar";
 export * from "./section";
 export * from "./settings";
 export * from "./toggle";

package/dist/components/label/StatusBadge.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
+    variant?: "success" | "warning" | "error" | "default";
+}
+export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/components/label/StatusBadge.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export const StatusBadge = ({ children, variant = "success", className, ...props }) => {
+    const variants = {
+        success: "text-emerald-500",
+        warning: "text-amber-500",
+        error: "text-red-500",
+        default: "text-zinc-500",
+    };
+    return (_jsx("span", { className: cn("text-[8px] font-black uppercase tracking-widest ml-2", variants[variant], className), ...props, children: children }));
+};

package/dist/components/label/index.d.ts

@@ -1 +1,2 @@
 export * from "./Label";
+export * from "./StatusBadge";

package/dist/components/label/index.js

@@ -1 +1,2 @@
 export * from "./Label";
+export * from "./StatusBadge";

package/dist/components/searchbar/NexusSearch.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface FilterOption {
+    id: string;
+    label: string;
+    icon: React.ElementType;
+}
+export interface SortOption {
+    id: string;
+    label: string;
+    icon: React.ElementType;
+}
+export interface NexusSearchProps {
+    onSearch?: (query: string) => void;
+    onFilterChange?: (filters: string[]) => void;
+    onSortChange?: (sort: string) => void;
+    className?: string;
+    filters?: FilterOption[];
+    sortOptions?: SortOption[];
+}
+export declare const NexusSearch: React.FC<NexusSearchProps>;

package/dist/components/searchbar/NexusSearch.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpDown, Calendar, Check, ChevronRight, Clock, Filter, Hash, Search, Settings2, Shield, SortAsc, X, } from "lucide-react";
+import { useState } from "react";
+export const NexusSearch = ({ onSearch, onFilterChange, onSortChange, className = "", filters = [
+    { id: "dev", label: "Development", icon: Hash },
+    { id: "adm", label: "Admin", icon: Shield },
+    { id: "new", label: "Latest", icon: Calendar },
+], sortOptions = [
+    { id: "newest", label: "Newest First", icon: Clock },
+    { id: "alpha", label: "Alphabetical", icon: SortAsc },
+], }) => {
+    const [view, setView] = useState("search");
+    const [activeFilters, setActiveFilters] = useState([]);
+    const [activeSort, setActiveSort] = useState("newest");
+    const toggleFilter = (id) => {
+        const newFilters = activeFilters.includes(id)
+            ? activeFilters.filter((f) => f !== id)
+            : [...activeFilters, id];
+        setActiveFilters(newFilters);
+        onFilterChange?.(newFilters);
+    };
+    const handleSortChange = (id) => {
+        setActiveSort(id);
+        onSortChange?.(id);
+    };
+    return (_jsxs("div", { className: `relative w-full max-w-md ${className}`, children: [_jsx("div", { className: `transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] ${view === "search"
+                    ? "opacity-100 scale-100 translate-y-0"
+                    : "opacity-0 scale-95 -translate-y-4 pointer-events-none absolute inset-0"}`, children: _jsxs("div", { className: "bg-[#050505] border border-white/5 rounded-2xl p-2 flex items-center gap-2 shadow-2xl", children: [_jsxs("div", { className: "flex-1 flex items-center bg-black border border-white/5 rounded-xl px-4 py-3 group", children: [_jsx(Search, { size: 18, className: "text-blue-500 transition-transform group-focus-within:scale-110" }), _jsx("input", { type: "text", placeholder: "Scan archives...", onChange: (e) => onSearch?.(e.target.value), className: "bg-transparent border-none outline-none text-sm text-white px-4 w-full placeholder:text-gray-700 font-medium" })] }), _jsx("button", { onClick: () => setView("filter"), className: "w-12 h-12 bg-white/5 hover:bg-white/10 rounded-xl flex items-center justify-center text-gray-400 hover:text-[#FF8A1F] transition-all", children: _jsx(Settings2, { size: 20 }) })] }) }), _jsx("div", { className: `transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] ${view === "filter"
+                    ? "opacity-100 scale-100 translate-y-0"
+                    : "opacity-0 scale-95 translate-y-4 pointer-events-none absolute inset-0"}`, children: _jsxs("div", { className: "bg-[#080808] border border-blue-500/20 rounded-[2rem] p-5 shadow-[0_0_50px_rgba(59,130,246,0.1)]", children: [_jsxs("div", { className: "flex items-center justify-between mb-6 px-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]" }), _jsx("span", { className: "text-[10px] font-black text-white uppercase tracking-[0.3em]", children: "System Parameters" })] }), _jsx("button", { onClick: () => setView("search"), className: "w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-gray-500 hover:text-white transition-colors", children: _jsx(X, { size: 14 }) })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3 px-1 text-gray-500", children: [_jsx(ArrowUpDown, { size: 12 }), _jsx("span", { className: "text-[9px] font-bold uppercase tracking-widest", children: "Sort Sequence" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: sortOptions.map((s) => {
+                                                const Icon = s.icon;
+                                                const active = activeSort === s.id;
+                                                return (_jsxs("button", { onClick: () => handleSortChange(s.id), className: `flex items-center gap-3 p-3 rounded-xl border transition-all ${active
+                                                        ? "bg-blue-500/10 border-blue-500/40 text-white"
+                                                        : "bg-black border-white/5 text-gray-500 hover:border-white/10"}`, children: [_jsx(Icon, { size: 14, className: active ? "text-blue-500" : "text-gray-600" }), _jsx("span", { className: "text-[10px] font-bold uppercase tracking-tight", children: s.label })] }, s.id));
+                                            }) })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3 px-1 text-gray-500", children: [_jsx(Filter, { size: 12 }), _jsx("span", { className: "text-[9px] font-bold uppercase tracking-widest", children: "Filter Domain" })] }), _jsx("div", { className: "grid grid-cols-1 gap-2", children: filters.map((f) => {
+                                                const Icon = f.icon;
+                                                const active = activeFilters.includes(f.id);
+                                                return (_jsxs("button", { onClick: () => toggleFilter(f.id), className: `flex items-center justify-between p-3 rounded-xl border transition-all ${active
+                                                        ? "bg-white/[0.03] border-blue-500/40 text-white shadow-[inset_0_0_10px_rgba(59,130,246,0.05)]"
+                                                        : "bg-black border-white/5 text-gray-500 hover:border-white/10"}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center ${active ? "bg-blue-500 text-black" : "bg-white/5"}`, children: _jsx(Icon, { size: 14 }) }), _jsx("span", { className: "text-xs font-bold uppercase tracking-tight", children: f.label })] }), active && _jsx(Check, { size: 14, className: "text-blue-500" })] }, f.id));
+                                            }) })] })] }), _jsxs("button", { onClick: () => setView("search"), className: "w-full mt-8 bg-[#FF8A1F] hover:bg-[#e67a1a] text-black font-black py-4 rounded-2xl uppercase text-[10px] tracking-[0.2em] transition-all active:scale-95 flex items-center justify-center gap-2 shadow-[0_10px_20px_rgba(255,138,31,0.2)]", children: ["Apply Changes ", _jsx(ChevronRight, { size: 14 })] })] }) }), _jsx("footer", { className: "mt-12 opacity-20 flex flex-col items-center gap-2", children: _jsxs("div", { className: "flex items-center gap-4 uppercase text-[9px] font-black tracking-[0.4em]", children: [_jsx("span", { className: view === "search" ? "text-white" : "text-gray-500", children: "Search" }), _jsx("div", { className: "w-12 h-[2px] bg-white/10 relative overflow-hidden rounded-full", children: _jsx("div", { className: `absolute inset-0 bg-blue-500 transition-all duration-500 ${view === "search" ? "-translate-x-full" : "translate-x-0"}` }) }), _jsx("span", { className: view === "filter" ? "text-white" : "text-gray-500", children: "Settings" })] }) })] }));
+};

package/dist/components/searchbar/index.d.ts

@@ -0,0 +1 @@
+export * from "./NexusSearch";

package/dist/components/searchbar/index.js

@@ -0,0 +1 @@
+export * from "./NexusSearch";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kawaiininja/ui",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "description": "A modern React component library with 45+ premium components for building beautiful web applications",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",