@darksnow-ui/node-tree-react
Version:
Ready-to-use React component for node-tree-headless
1 lines • 13.6 kB
Source Map (JSON)
{"version":3,"sources":["../src/styles/node-tree.css"],"sourcesContent":["/* Shadcn CSS Variables */\n:root {\n --background: 30 30 30;\n --foreground: 204 204 204;\n \n --popover: 37 37 38;\n --popover-foreground: 204 204 204;\n \n --primary: 77 156 238;\n --primary-foreground: 255 255 255;\n \n --secondary: 70 70 70;\n --secondary-foreground: 204 204 204;\n \n --muted: 70 70 70;\n --muted-foreground: 153 153 153;\n \n --accent: 9 71 113;\n --accent-foreground: 255 255 255;\n \n --destructive: 244 135 113;\n --destructive-foreground: 255 255 255;\n \n --border: 70 70 71;\n --input: 70 70 71;\n --ring: 77 156 238;\n \n --radius: 0.25rem;\n}\n\n/* VSCode-like minimal tree styles */\n.node-tree-container {\n height: 100%;\n overflow: auto;\n background-color: #1e1e1e;\n color: #cccccc;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-size: 13px;\n border: 1px solid #464647;\n /* border-radius: 4px; removido para área root ocupar 100% */\n}\n\n/* VSCode colors */\n.text-vscode-accent {\n color: #4d9cee;\n}\n\n.text-vscode-text {\n color: #cccccc;\n}\n\n.hover\\:bg-vscode-border\\/50:hover {\n background-color: rgba(70, 70, 70, 0.5);\n}\n\n/* Tailwind utilities used in TreeNode */\n.w-3 { width: 0.75rem; }\n.h-3 { height: 0.75rem; }\n.w-4 { width: 1rem; }\n.h-4 { height: 1rem; }\n.w-5 { width: 1.25rem; }\n.h-5 { height: 1.25rem; }\n.mr-2 { margin-right: 0.5rem; }\n.flex { display: flex; }\n.flex-1 { flex: 1 1 0%; }\n.flex-shrink-0 { flex-shrink: 0; }\n.items-center { align-items: center; }\n.justify-center { justify-content: center; }\n.truncate { \n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.rounded { border-radius: 0.25rem; }\n.transition-colors { \n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n.text-white { color: #ffffff; }\n.group { }\n.cursor-pointer { cursor: pointer; }\n.relative { position: relative; }\n.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }\n\n.node-tree-container:focus {\n outline: none;\n}\n\n/* Tree container focus state - VSCode style */\n.node-tree-container.has-focus {\n outline: 1px solid #007acc;\n outline-offset: -1px;\n}\n\n/* Alternative: More visible focus with glow */\n.node-tree-container.has-focus:focus-visible {\n outline: 2px solid #007acc;\n outline-offset: -2px;\n box-shadow: inset 0 0 0 1px #007acc;\n}\n\n.node-tree-content {\n padding: 0;\n}\n\n/* Node wrapper styles */\n.node-wrapper {\n height: 22px;\n font-size: 13px;\n transition: background-color 0.1s ease;\n user-select: none;\n}\n\n/* Hover state - very subtle */\n.node-wrapper:hover {\n background-color: rgba(255, 255, 255, 0.04);\n}\n\n/* Selected state */\n.node-wrapper.selected {\n background-color: rgba(70, 79, 105, 0.44);\n}\n\n/* Selected + cursor state - mantém o background de selected com outline de cursor */\n.node-wrapper.selected.cursor {\n background-color: rgba(70, 79, 105, 0.44); /* Mesmo tom do selected normal */\n outline: 1px solid rgba(71, 141, 255, 0.72);\n outline-offset: -1px;\n}\n\n/* Enhanced selected state when tree has focus */\n.node-tree-container.has-focus .node-wrapper.selected {\n background-color: #094771;\n}\n\n/* Enhanced selected + cursor when tree has focus */\n.node-tree-container.has-focus .node-wrapper.selected.cursor {\n background-color: #094771; /* Mantém o mesmo background do selected com focus */\n outline-color: #007acc;\n}\n\n/* Cursor/focus state - apenas borda com fundo muito sutil */\n.node-wrapper.cursor {\n outline: 1px solid rgba(71, 141, 255, 0.72);\n outline-offset: -1px;\n background-color: rgba(255, 255, 255, 0.02); /* Fundo bem sutil, quase transparente */\n}\n\n/* Enhanced cursor state when tree has focus */\n.node-tree-container.has-focus .node-wrapper.cursor {\n outline-color: #007acc;\n background-color: rgba(255, 255, 255, 0.03); /* Mantém fundo sutil mesmo com focus */\n}\n\n/* Drag over state - subtle blue */\n.node-wrapper.drag-over {\n background-color: rgba(31, 112, 204, 0.29);\n}\n\n/* Dragging state */\n.node-wrapper.dragging {\n opacity: 0.5;\n}\n\n/* Opacity utilities */\n.opacity-50 {\n opacity: 0.5;\n}\n\n/* Expander rotation animation */\n.node-wrapper .expander-icon {\n transition: transform 0.08s ease;\n}\n\n/* Context Menu Styles */\n.context-menu {\n position: fixed;\n background-color: #252526;\n border: 1px solid #464647;\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n padding: 4px 0;\n min-width: 200px;\n z-index: 1000;\n font-size: 13px;\n}\n\n/* Context menu items */\n.context-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 4px 20px;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n color: #cccccc;\n transition: background-color 0.1s ease;\n}\n\n.context-menu-item:hover {\n background-color: #094771;\n}\n\n.context-menu-item.danger {\n color: #f48771;\n}\n\n.context-menu-item.danger:hover {\n background-color: rgba(244, 135, 113, 0.1);\n}\n\n/* Context menu divider */\n.context-menu-divider {\n height: 1px;\n background-color: #464647;\n margin: 4px 0;\n}\n\n/* Scrollbar styles - VSCode like */\n.node-tree-container::-webkit-scrollbar {\n width: 14px;\n height: 14px;\n}\n\n.node-tree-container::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.node-tree-container::-webkit-scrollbar-thumb {\n background-color: rgba(121, 121, 121, 0.4);\n border: 3px solid transparent;\n border-radius: 7px;\n background-clip: content-box;\n}\n\n.node-tree-container::-webkit-scrollbar-thumb:hover {\n background-color: rgba(100, 100, 100, 0.7);\n}\n\n.node-tree-container::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n/* Root Drop Area Styles */\n.node-tree-root-drop-area {\n /* Estilos removidos - usando apenas inline styles do componente */\n}\n\n/* Shadcn utility classes */\n.bg-popover {\n background-color: rgb(var(--popover));\n}\n\n.text-popover-foreground {\n color: rgb(var(--popover-foreground));\n}\n\n.border {\n border-width: 1px;\n border-color: rgb(var(--border));\n}\n\n.bg-accent {\n background-color: rgb(var(--accent));\n}\n\n.text-accent-foreground {\n color: rgb(var(--accent-foreground));\n}\n\n.text-destructive {\n color: rgb(var(--destructive));\n}\n\n.bg-destructive {\n background-color: rgb(var(--destructive));\n}\n\n.text-destructive-foreground {\n color: rgb(var(--destructive-foreground));\n}\n\n.text-muted-foreground {\n color: rgb(var(--muted-foreground));\n}\n\n.bg-border {\n background-color: rgb(var(--border));\n}\n\n/* Hover states */\n.hover\\:bg-accent:hover {\n background-color: rgb(var(--accent));\n}\n\n.hover\\:text-accent-foreground:hover {\n color: rgb(var(--accent-foreground));\n}\n\n.hover\\:bg-destructive:hover {\n background-color: rgb(var(--destructive));\n}\n\n.hover\\:text-destructive-foreground:hover {\n color: rgb(var(--destructive-foreground));\n}\n\n/* Focus states */\n.focus\\:bg-accent:focus {\n background-color: rgb(var(--accent));\n}\n\n.focus\\:text-accent-foreground:focus {\n color: rgb(var(--accent-foreground));\n}\n\n.focus\\:bg-destructive:focus {\n background-color: rgb(var(--destructive));\n}\n\n.focus\\:text-destructive-foreground:focus {\n color: rgb(var(--destructive-foreground));\n}\n\n/* Padding utilities */\n.p-1 {\n padding: 0.25rem;\n}\n\n.pl-8 {\n padding-left: 2rem;\n}\n\n.pr-2 {\n padding-right: 0.5rem;\n}\n\n.py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n\n/* Position utilities */\n.absolute {\n position: absolute;\n}\n\n.left-2 {\n left: 0.5rem;\n}\n\n/* Size utilities */\n.h-3\\.5 {\n height: 0.875rem;\n}\n\n.w-3\\.5 {\n width: 0.875rem;\n}\n\n/* Fill utilities */\n.fill-current {\n fill: currentColor;\n}\n\n/* Text size utilities */\n.text-\\[13px\\] {\n font-size: 13px;\n}\n\n.text-\\[11px\\] {\n font-size: 11px;\n}\n\n/* Font weight utilities */\n.font-normal {\n font-weight: 400;\n}\n\n/* Text color for labels */\n.text-vscode-textDim {\n color: #999999;\n}\n\n/* Height utilities */\n.h-\\[22px\\] {\n height: 22px;\n}\n\n.h-\\[26px\\] {\n height: 26px;\n}\n\n/* Border radius utilities */\n.rounded-sm {\n border-radius: 0.125rem;\n}\n\n/* Shadow utilities */\n.shadow-lg {\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n}\n\n/* Min width utilities */\n.min-w-\\[220px\\] {\n min-width: 220px;\n}\n\n/* Outline utilities */\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}"],"mappings":"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","names":[]}