{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "server-management", "title": "Server management", "description": "Server management is a production-ready tables component from BJORK UI, packaged for shadcn registries.", "dependencies": [ "framer-motion", "lucide-react", "next-themes" ], "files": [ { "path": "components/bjork-ui/tables/server-management-table.tsx", "content": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { useTheme } from \"next-themes\";\nimport { X, Power, Pause, Play, RotateCcw } from \"lucide-react\";\nimport {\n getBjorkSignalPalette,\n getBjorkTablePalette,\n} from \"./table-theme\";\n\nexport interface Server {\n id: string;\n number: string;\n serviceName: string;\n osType: \"windows\" | \"linux\" | \"ubuntu\";\n serviceLocation: string;\n countryCode: \"de\" | \"us\" | \"fr\" | \"jp\";\n ip: string;\n dueDate: string;\n cpuPercentage: number;\n status: \"active\" | \"paused\" | \"inactive\";\n}\n\ninterface ServerManagementTableProps {\n title?: string;\n servers?: Server[];\n onStatusChange?: (serverId: string, newStatus: Server[\"status\"]) => void;\n className?: string;\n}\n\nconst defaultServers: Server[] = [\n {\n id: \"1\",\n number: \"01\",\n serviceName: \"VPS-2 (Windows)\",\n osType: \"windows\",\n serviceLocation: \"Frankfurt, Germany\",\n countryCode: \"de\",\n ip: \"198.51.100.211\",\n dueDate: \"14 Oct 2027\",\n cpuPercentage: 80,\n status: \"active\"\n },\n {\n id: \"2\", \n number: \"02\",\n serviceName: \"VPS-1 (Windows)\",\n osType: \"windows\",\n serviceLocation: \"Frankfurt, Germany\", \n countryCode: \"de\",\n ip: \"203.0.113.158\",\n dueDate: \"14 Oct 2027\",\n cpuPercentage: 90,\n status: \"active\"\n },\n {\n id: \"3\",\n number: \"03\", \n serviceName: \"VPS-1 (Ubuntu)\",\n osType: \"ubuntu\",\n serviceLocation: \"Paris, France\",\n countryCode: \"fr\",\n ip: \"192.0.2.37\",\n dueDate: \"27 Jun 2027\",\n cpuPercentage: 50,\n status: \"paused\"\n },\n {\n id: \"4\",\n number: \"04\",\n serviceName: \"Cloud Server (Ubuntu)\",\n osType: \"ubuntu\",\n serviceLocation: \"California, US West\",\n countryCode: \"us\",\n ip: \"198.51.100.23\",\n dueDate: \"30 May 2030\",\n cpuPercentage: 95,\n status: \"active\"\n },\n {\n id: \"5\",\n number: \"05\",\n serviceName: \"Dedicated Server (Windows)\",\n osType: \"windows\",\n serviceLocation: \"Virginia, US East\",\n countryCode: \"us\",\n ip: \"203.0.113.45\",\n dueDate: \"15 Dec 2026\",\n cpuPercentage: 25,\n status: \"inactive\"\n }\n];\n\nexport function ServerManagementTable({\n title = \"Active Services\",\n servers: initialServers = defaultServers,\n onStatusChange,\n className = \"\"\n}: ServerManagementTableProps = {}) {\n const [servers, setServers] = useState(initialServers);\n const [selectedServer, setSelectedServer] = useState(null);\n const { resolvedTheme } = useTheme();\n const isDark = resolvedTheme !== \"light\";\n const palette = getBjorkTablePalette(isDark);\n\n const handleStatusChange = (serverId: string, newStatus: Server[\"status\"]) => {\n if (onStatusChange) {\n onStatusChange(serverId, newStatus);\n }\n\n setServers(prev => prev.map(server => \n server.id === serverId ? { ...server, status: newStatus } : server\n ));\n };\n\n const openServerModal = (server: Server) => {\n setSelectedServer(server);\n };\n\n const closeServerModal = () => {\n setSelectedServer(null);\n };\n\n // Update selected server when servers change (for real-time updates)\n useEffect(() => {\n if (selectedServer) {\n const updatedServer = servers.find(s => s.id === selectedServer.id);\n if (updatedServer) {\n setSelectedServer(updatedServer);\n }\n }\n }, [servers, selectedServer]);\n\n const getOSIcon = (osType: Server[\"osType\"]) => {\n switch (osType) {\n case \"windows\":\n return (\n
\n \n \n \n \n \n \n
\n );\n case \"ubuntu\":\n return (\n
\n \n \n \n
\n );\n case \"linux\":\n return (\n
\n
L
\n
\n );\n }\n };\n\n const getCountryFlag = (countryCode: Server[\"countryCode\"]) => {\n switch (countryCode) {\n case \"de\":\n return (\n \n \n \n \n \n );\n case \"us\":\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n case \"fr\":\n return (\n \n \n \n \n \n );\n case \"jp\":\n return (\n \n \n \n \n );\n }\n };\n\n const getCPUBars = (percentage: number, status: Server[\"status\"]) => {\n const filledBars = Math.round((percentage / 100) * 10);\n \n const getBarColor = (index: number) => {\n if (index >= filledBars) {\n return isDark ? \"border border-[#232323] bg-[#181818]\" : \"border border-[#d8d3c7] bg-[#ded7ca]\";\n }\n \n switch (status) {\n case \"active\":\n return \"bg-[#d86a2c]\";\n case \"paused\":\n return isDark ? \"bg-[#ededed]/38\" : \"bg-[#171717]/34\";\n case \"inactive\":\n return isDark ? \"bg-[#ededed]/20\" : \"bg-[#171717]/18\";\n default:\n return \"bg-foreground/60\";\n }\n };\n \n return (\n
\n
\n {Array.from({ length: 10 }).map((_, index) => (\n \n ))}\n
\n \n {percentage}%\n \n
\n );\n };\n\n const getStatusBadge = (status: Server[\"status\"]) => {\n const active = getBjorkSignalPalette(\"green\", isDark);\n const paused = getBjorkSignalPalette(\"orange\", isDark);\n const inactive = getBjorkSignalPalette(\"red\", isDark);\n\n switch (status) {\n case \"active\":\n return (\n
\n Active\n
\n );\n case \"paused\":\n return (\n
\n Paused\n
\n );\n case \"inactive\":\n return (\n
\n Inactive\n
\n );\n }\n };\n\n const getStatusGradient = (status: Server[\"status\"]) => {\n switch (status) {\n case \"active\":\n return \"from-[#77b58b]/10 to-transparent\";\n case \"paused\": \n return \"from-[#ec5c13]/12 to-transparent\";\n case \"inactive\":\n return \"from-[#cf7c72]/10 to-transparent\";\n }\n };\n\n return (\n
\n
\n {/* Header */}\n
\n
\n
\n
\n

{title}

\n
\n
\n {servers.filter(s => s.status === \"active\").length} active\n •\n {servers.filter(s => s.status === \"paused\").length} paused\n •\n {servers.filter(s => s.status === \"inactive\").length} inactive\n
\n
\n
\n\n {/* Table */}\n
\n \n {/* Headers */}\n
\n
No
\n
Service Name
\n
Service Location
\n
IP
\n
Due Date
\n
CPU
\n
Status
\n
\n\n {/* Server Rows */}\n {servers.map((server) => (\n openServerModal(server)}\n >\n \n {/* Status gradient overlay */}\n
\n \n {/* Grid Content */}\n
\n {/* Number */}\n
\n \n {server.number}\n \n
\n\n {/* Service Name */}\n
\n {getOSIcon(server.osType)}\n \n {server.serviceName}\n \n
\n\n {/* Service Location */}\n
\n
\n
\n {getCountryFlag(server.countryCode)}\n
\n
\n \n {server.serviceLocation}\n \n
\n\n {/* IP */}\n
\n \n {server.ip}\n \n
\n\n {/* Due Date */}\n
\n \n {server.dueDate}\n \n
\n\n {/* CPU */}\n
\n {getCPUBars(server.cpuPercentage, server.status)}\n
\n\n {/* Status */}\n
\n {getStatusBadge(server.status)}\n
\n
\n \n \n ))}\n \n
\n\n {/* Server Management Overlay - Inside Card */}\n \n {selectedServer && (\n \n {/* Header with Actions */}\n
\n
\n
\n {selectedServer.number}\n
\n {getOSIcon(selectedServer.osType)}\n
\n

\n {selectedServer.serviceName}\n

\n
\n
\n
\n {getCountryFlag(selectedServer.countryCode)}\n
\n
\n \n {selectedServer.serviceLocation}\n \n
\n
\n
\n\n {/* Action Buttons in Header */}\n
\n {/* Start/Stop */}\n {selectedServer.status === \"active\" ? (\n handleStatusChange(selectedServer.id, \"inactive\")}\n whileHover={{ scale: 1.02 }}\n whileTap={{ scale: 0.98 }}\n >\n \n Stop\n \n ) : (\n handleStatusChange(selectedServer.id, \"active\")}\n whileHover={{ scale: 1.02 }}\n whileTap={{ scale: 0.98 }}\n >\n \n Start\n \n )}\n\n {/* Pause/Resume */}\n {selectedServer.status === \"paused\" ? (\n handleStatusChange(selectedServer.id, \"active\")}\n whileHover={{ scale: 1.02 }}\n whileTap={{ scale: 0.98 }}\n >\n \n Resume\n \n ) : (\n handleStatusChange(selectedServer.id, \"paused\")}\n whileHover={{ scale: 1.02 }}\n whileTap={{ scale: 0.98 }}\n >\n \n Pause\n \n )}\n\n {/* Restart */}\n {\n handleStatusChange(selectedServer.id, \"inactive\");\n setTimeout(() => handleStatusChange(selectedServer.id, \"active\"), 1000);\n }}\n whileHover={{ scale: 1.02 }}\n whileTap={{ scale: 0.98 }}\n >\n \n Restart\n \n\n {/* Close Button */}\n \n \n \n
\n
\n\n {/* Content */}\n
\n {/* Server Stats Grid */}\n
\n {/* IP Address */}\n
\n \n
\n {selectedServer.ip}\n
\n
\n\n {/* Due Date */}\n
\n \n
\n {selectedServer.dueDate}\n
\n
\n\n {/* Status */}\n
\n \n
\n {getStatusBadge(selectedServer.status)}\n
\n
\n
\n\n {/* CPU Usage */}\n
\n \n {getCPUBars(selectedServer.cpuPercentage, selectedServer.status)}\n
\n\n {/* Server Logs Preview */}\n
\n \n
\n
[15:42:31] Server started successfully
\n
[15:42:25] System health check passed
\n
[15:41:18] CPU usage: {selectedServer.cpuPercentage}%
\n
[15:40:05] Connection from {selectedServer.ip}
\n
\n
\n
\n \n )}\n \n
\n
\n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/tables/server-management-table.tsx" }, { "path": "components/bjork-ui/tables/table-theme.ts", "content": "export function getBjorkTablePalette(isDark: boolean) {\n return {\n container: isDark\n ? \"border-[#232323] bg-[#111]\"\n : \"border-[#ded7ca] bg-[#eee9df]\",\n header: isDark\n ? \"border-[#232323] bg-[#181818] text-[#ededed]/42\"\n : \"border-[#ded7ca] bg-[#e5ded1] text-[#171717]/46\",\n row: isDark\n ? \"border-[#232323] hover:bg-[#181818]/70\"\n : \"border-[#ded7ca] hover:bg-[#e7e1d5]/70\",\n selectedRow: isDark\n ? \"border-[#2a2a2a] bg-[#181818]\"\n : \"border-[#d6cdbc] bg-[#e7e1d5]\",\n control: isDark\n ? \"border-[#232323] bg-[#181818] text-[#ededed]/70 hover:bg-[#202020]\"\n : \"border-[#d8d3c7] bg-[#eee9df] text-[#171717]/68 hover:bg-[#e4ded3]\",\n menu: isDark\n ? \"border-[#232323] bg-[#181818] text-[#ededed]/76 shadow-[0_18px_60px_rgba(0,0,0,0.42)]\"\n : \"border-[#d8d3c7] bg-[#eee9df] text-[#171717]/76 shadow-[0_18px_60px_rgba(62,52,38,0.14)]\",\n menuItem: isDark ? \"hover:bg-[#232323]\" : \"hover:bg-[#e4ded3]\",\n menuActive: isDark ? \"bg-[#232323]\" : \"bg-[#e4ded3]\",\n divider: isDark ? \"border-[#232323]\" : \"border-[#d8d3c7]\",\n primaryText: isDark ? \"text-[#ededed]/90\" : \"text-[#171717]/86\",\n secondaryText: isDark ? \"text-[#ededed]/38\" : \"text-[#171717]/46\",\n mutedSurface: isDark ? \"bg-[#181818]\" : \"bg-[#e7e1d5]\",\n popover: isDark ? \"bg-[#111] text-[#ededed]\" : \"bg-[#eee9df] text-[#171717]\",\n accent: isDark ? \"text-[#d86a2c]\" : \"text-[#bd4514]\",\n accentBg: isDark ? \"bg-[#ec5c13]/12\" : \"bg-[#ec5c13]/14\",\n accentBorder: isDark ? \"border-[#ec5c13]/24\" : \"border-[#bd4514]/22\",\n checkboxAccent: isDark ? \"#d86a2c\" : \"#bd4514\",\n };\n}\n\nexport function getBjorkSignalPalette(\n tone: \"green\" | \"red\" | \"orange\" | \"neutral\",\n isDark: boolean\n) {\n const palettes = {\n green: {\n bgColor: isDark ? \"bg-[#3e6f52]/18\" : \"bg-[#dce8dc]\",\n borderColor: isDark ? \"border-[#5f9f78]/28\" : \"border-[#bad0bd]\",\n textColor: isDark ? \"text-[#77b58b]\" : \"text-[#47785c]\",\n dotColor: isDark ? \"bg-[#77b58b]\" : \"bg-[#47785c]\",\n color: isDark ? \"#77b58b\" : \"#47785c\",\n },\n red: {\n bgColor: isDark ? \"bg-[#87463f]/18\" : \"bg-[#eadad5]\",\n borderColor: isDark ? \"border-[#c46a61]/28\" : \"border-[#d7bcb4]\",\n textColor: isDark ? \"text-[#cf7c72]\" : \"text-[#9d5149]\",\n dotColor: isDark ? \"bg-[#cf7c72]\" : \"bg-[#9d5149]\",\n color: isDark ? \"#cf7c72\" : \"#9d5149\",\n },\n orange: {\n bgColor: isDark ? \"bg-[#ec5c13]/14\" : \"bg-[#ead9cb]\",\n borderColor: isDark ? \"border-[#ec5c13]/28\" : \"border-[#d5b59f]\",\n textColor: isDark ? \"text-[#d86a2c]\" : \"text-[#9f4317]\",\n dotColor: isDark ? \"bg-[#d86a2c]\" : \"bg-[#9f4317]\",\n color: isDark ? \"#d86a2c\" : \"#9f4317\",\n },\n neutral: {\n bgColor: isDark ? \"bg-[#ededed]/8\" : \"bg-[#ded7ca]\",\n borderColor: isDark ? \"border-[#ededed]/14\" : \"border-[#cfc6b7]\",\n textColor: isDark ? \"text-[#ededed]/58\" : \"text-[#171717]/58\",\n dotColor: isDark ? \"bg-[#ededed]/45\" : \"bg-[#171717]/42\",\n color: isDark ? \"#a3a3a3\" : \"#706b62\",\n },\n } as const;\n\n return palettes[tone];\n}\n", "type": "registry:component", "target": "@components/bjork-ui/tables/table-theme.ts" } ], "cssVars": { "light": { "bjork-bg": "#f7f3ea", "bjork-surface": "#fffcf6", "bjork-surface-muted": "rgba(250, 246, 237, 0.94)", "bjork-surface-hover": "#f5efe3", "bjork-surface-active": "#efe7d8", "bjork-panel": "#f8f2e7", "bjork-menu": "rgba(255, 252, 246, 0.98)", "bjork-field": "rgba(255, 252, 246, 0.96)", "bjork-field-muted": "rgba(248, 242, 231, 0.82)", "bjork-field-inset": "rgba(239, 231, 216, 0.72)", "bjork-error-bg": "#fff0e8", "bjork-text": "#171717", "bjork-text-strong": "rgba(23, 23, 23, 0.9)", "bjork-text-medium": "rgba(23, 23, 23, 0.72)", "bjork-text-muted": "rgba(23, 23, 23, 0.52)", "bjork-text-soft": "rgba(23, 23, 23, 0.36)", "bjork-text-faint": "rgba(23, 23, 23, 0.22)", "bjork-inverted-text": "#fff8f0", "bjork-border": "#eee6db", "bjork-border-muted": "#f5ede2", "bjork-border-strong": "#e1d7c8", "bjork-thumb": "#a49b8e", "bjork-track": "#ded6ca", "bjork-accent": "#ec7d43", "bjork-accent-hover": "#f0935f", "bjork-accent-soft": "rgba(236, 125, 67, 0.1)", "bjork-accent-muted": "rgba(236, 125, 67, 0.2)", "bjork-accent-badge": "rgba(236, 125, 67, 0.16)", "bjork-accent-badge-foreground": "#8d421d", "bjork-accent-foreground": "#3f2112", "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)", "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)", "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)", "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)", "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)", "bjork-ring-offset": "#f7f3ea" }, "dark": { "bjork-bg": "#111111", "bjork-surface": "#121212", "bjork-surface-muted": "rgba(22, 22, 22, 0.92)", "bjork-surface-hover": "#161616", "bjork-surface-active": "#202020", "bjork-panel": "#0d0d0d", "bjork-menu": "rgba(18, 18, 18, 0.98)", "bjork-field": "rgba(18, 18, 18, 0.95)", "bjork-field-muted": "rgba(18, 18, 18, 0.55)", "bjork-field-inset": "rgba(9, 9, 9, 0.75)", "bjork-error-bg": "#130d0a", "bjork-text": "#ededed", "bjork-text-strong": "rgba(237, 237, 237, 0.9)", "bjork-text-medium": "rgba(237, 237, 237, 0.72)", "bjork-text-muted": "rgba(237, 237, 237, 0.52)", "bjork-text-soft": "rgba(237, 237, 237, 0.36)", "bjork-text-faint": "rgba(237, 237, 237, 0.22)", "bjork-inverted-text": "#080808", "bjork-border": "#232323", "bjork-border-muted": "#1c1c1c", "bjork-border-strong": "#343434", "bjork-thumb": "#626262", "bjork-track": "#090909", "bjork-accent": "#ec5c13", "bjork-accent-hover": "#f07832", "bjork-accent-soft": "rgba(236, 92, 19, 0.12)", "bjork-accent-muted": "rgba(236, 92, 19, 0.24)", "bjork-accent-badge": "#ec5c13", "bjork-accent-badge-foreground": "#fff2ea", "bjork-accent-foreground": "#fff2ea", "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)", "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)", "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)", "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)", "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)", "bjork-ring-offset": "#080808" } }, "css": { ".bjork-range": { "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)" }, ".bjork-range::-webkit-slider-thumb": { "appearance": "none", "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-range::-moz-range-thumb": { "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-layered-button-accent, .bjork-layered-button-raised": { "position": "relative", "isolation": "isolate", "appearance": "none", "overflow": "hidden", "border": "0", "border-radius": "13px", "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a", "transition": "filter 150ms ease-out, box-shadow 150ms ease-out" }, ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": { "position": "absolute", "inset": "0", "pointer-events": "none", "content": "\"\"", "border": "1.5px solid transparent", "border-radius": "inherit", "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box", "mix-blend-mode": "overlay", "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "-webkit-mask-clip": "padding-box, border-box", "mask-clip": "padding-box, border-box", "-webkit-mask-origin": "padding-box, border-box", "mask-origin": "padding-box, border-box", "-webkit-mask-composite": "xor", "mask-composite": "exclude" }, ".bjork-layered-button-accent": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000040", "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)" }, ".bjork-layered-button-raised": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))" }, ".dark .bjork-layered-button-raised": { "color": "oklch(0.2574 0.0056 265)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))" }, "@media (hover: hover)": { ".bjork-layered-button-accent:hover": { "filter": "brightness(1.08) saturate(1.04)" }, ".bjork-layered-button-raised:hover": { "filter": "brightness(1.08) contrast(0.9)" } } }, "meta": { "collection": "Tables", "registryUrl": "https://ui.isaiahbjork.com/server-management.json", "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/server-management.json" }, "type": "registry:component" }