angel-table 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,35 @@
-# Temporary Holding Version
+# React + TypeScript + Vite
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+
+Note: This will impact Vite dev & build performances.
+You can also try [the experimental native React Compiler support in plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#rust-react-compiler) by using `compiler: true` in the plugin options instead of using the Babel plugin.
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+
+```json
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "options": {
+    "typeAware": true
+  },
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
+```
+
+See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.

package/dist/angel-table.css

@@ -0,0 +1,2 @@
+.angel-table-container{--at-bg:#fff;--at-bg-secondary:#f9fafb;--at-bg-hover:#f3f4f6;--at-bg-selected:#eff6ff;--at-bg-disabled:#f9fafb;--at-bg-overlay:#ffffffbf;--at-border:#e5e7eb;--at-border-light:#f1f5f9;--at-border-hover:#d1d5db;--at-border-focus:#3b82f6;--at-border-selected:#bfdbfe;--at-text:#374151;--at-text-primary:#111827;--at-text-secondary:#6b7280;--at-text-muted:#9ca3af;--at-text-disabled:#cbd5e1;--at-text-inverse:#fff;--at-primary:#2563eb;--at-primary-hover:#1d4ed8;--at-primary-light:#eff6ff;--at-primary-border:#bfdbfe;--at-primary-shadow:#2563eb1f;--at-danger:#dc2626;--at-success:#16a34a;--at-success-bg:#f0fdf4;--at-success-border:#bbf7d0;--at-white:#fff;--at-shadow:0 1px 3px #0000000d;--at-radius:8px;--at-radius-sm:6px;--at-transition:.2s ease;width:100%;min-width:0;color:var(--at-text);background:var(--at-bg);font-family:inherit;font-size:14px}.angel-table-container[data-theme=dark]{--at-bg:#111827;--at-bg-secondary:#1f2937;--at-bg-hover:#283548;--at-bg-selected:#1e3a5f;--at-bg-disabled:#111827;--at-bg-overlay:#111827bf;--at-border:#374151;--at-border-light:#2d3748;--at-border-hover:#4b5563;--at-border-focus:#60a5fa;--at-border-selected:#1d4ed8;--at-text:#d1d5db;--at-text-primary:#f9fafb;--at-text-secondary:#9ca3af;--at-text-muted:#6b7280;--at-text-disabled:#4b5563;--at-text-inverse:#fff;--at-primary:#60a5fa;--at-primary-hover:#93c5fd;--at-primary-light:#1e3a5f;--at-primary-border:#1d4ed8;--at-primary-shadow:#60a5fa26;--at-danger:#f87171;--at-success:#4ade80;--at-success-bg:#14532d;--at-success-border:#166534;--at-white:#1f2937;--at-shadow:0 1px 3px #0003}.angel-table-container *,.angel-table-container :before,.angel-table-container :after{box-sizing:border-box}.angel-table-body{width:100%;min-width:0;position:relative}.angel-table{border:1px solid var(--at-border);border-radius:var(--at-radius);background:var(--at-bg);width:100%;box-shadow:var(--at-shadow);overflow:auto}.angel-table table{border-collapse:separate;border-spacing:0;text-align:left;width:100%}.angel-table thead{z-index:10;background:var(--at-bg-secondary);position:sticky;top:0}.angel-table th{border-bottom:1px solid var(--at-border);background:var(--at-bg-secondary);color:var(--at-text-secondary);letter-spacing:.055em;text-align:left;text-transform:uppercase;white-space:nowrap;padding:14px 16px;font-size:11px;font-weight:700;line-height:1.4}.angel-table td{border-bottom:1px solid var(--at-border-light);background:var(--at-bg);color:var(--at-text);vertical-align:middle;padding:14px 16px;font-size:13px;line-height:1.6}.angel-table tbody tr{background:var(--at-bg);transition:background-color var(--at-transition)}.angel-table tbody tr:hover td{background:var(--at-bg-hover)}.angel-table tbody tr.is-selected td{background:var(--at-bg-selected)}.angel-table tbody tr:last-child td{border-bottom:none}.angel-table__check-cell{width:44px;min-width:44px;text-align:center!important}.angel-table__index-cell{width:60px;min-width:60px;color:var(--at-text-muted)!important;text-align:center!important}.angel-table input[type=checkbox]{width:16px;height:16px;accent-color:var(--at-primary);vertical-align:middle;cursor:pointer;margin:0}.angel-table a{color:var(--at-primary);font-weight:500;text-decoration:none}.angel-table a:hover{color:var(--at-primary-hover);text-decoration:underline}.angel-table td button{cursor:pointer}.angel-table__toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.angel-table__toolbar-left{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.angel-table__label{color:var(--at-text-secondary);white-space:nowrap;align-items:center;gap:8px;font-size:13px;display:inline-flex}.angel-table__select{border:1px solid var(--at-border);border-radius:var(--at-radius);background:var(--at-bg);max-width:220px;min-height:38px;color:var(--at-text);cursor:pointer;transition:border-color var(--at-transition), box-shadow var(--at-transition);outline:none;padding:8px 12px;font-family:inherit;font-size:13px}.angel-table__select:hover{border-color:var(--at-border-hover)}.angel-table__select:focus{border-color:var(--at-border-focus);box-shadow:0 0 0 3px var(--at-primary-shadow)}.angel-table__button{border-radius:var(--at-radius);white-space:nowrap;cursor:pointer;min-height:38px;transition:background-color var(--at-transition), border-color var(--at-transition), color var(--at-transition), transform .15s ease;border:1px solid #0000;justify-content:center;align-items:center;gap:7px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.4;display:inline-flex}.angel-table__button svg{flex-shrink:0;width:16px;height:16px}.angel-table__button:active:not(:disabled){transform:scale(.97)}.angel-table__button:disabled{opacity:.45;cursor:not-allowed}.angel-table__button--primary{background:var(--at-primary);color:var(--at-text-inverse)}.angel-table__button--primary:hover:not(:disabled){background:var(--at-primary-hover)}.angel-table__button--secondary{border-color:var(--at-border);background:var(--at-bg-secondary);color:var(--at-text)}.angel-table__button--secondary:hover:not(:disabled){border-color:var(--at-border-hover);background:var(--at-bg-hover);color:var(--at-text-primary)}.angel-table__selection{border:1px solid var(--at-primary-border);border-radius:var(--at-radius);background:var(--at-primary-light);color:var(--at-primary);flex-wrap:wrap;align-items:center;gap:5px;padding:5px;font-size:13px;display:flex}.angel-table__selection strong{font-weight:700}.angel-table__selection button{color:var(--at-primary);font:inherit;cursor:pointer;background:0 0;border:none;margin-left:auto;padding:3px 6px;font-weight:600}.angel-table__selection button:hover{text-decoration:underline}.angel-table__search-box{border:1px solid var(--at-border);border-radius:var(--at-radius-sm);background:var(--at-bg);max-width:300px;transition:border-color var(--at-transition);align-items:center;gap:2px;padding:2px 8px;display:flex}.angel-table__search-box:focus-within{border-color:var(--at-border-focus)}.angel-table__search-box input{min-width:0;color:var(--at-text);background:0 0;border:none;outline:none;flex:1;padding:5px 12px;font-family:inherit;font-size:14px}.angel-table__search-box input::placeholder{color:var(--at-text-muted)}.angel-table__search-box button{border-radius:var(--at-radius-sm);background:var(--at-primary);color:var(--at-text-inverse);cursor:pointer;border:none;padding:5px 14px}.angel-table__search-box button:hover{background:var(--at-primary-hover)}.angel-table__sort{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:inline-flex}.angel-table__sort-icon{color:var(--at-text-muted);font-size:14px}.angel-table th:hover .angel-table__sort-icon{color:var(--at-text)}.angel-table__empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:260px;padding:32px 20px;display:flex}.angel-table__empty-icon{border:1px solid var(--at-border);background:var(--at-bg-secondary);width:58px;height:58px;color:var(--at-text-muted);border-radius:50%;justify-content:center;align-items:center;margin-bottom:16px;display:flex}.angel-table__empty-icon svg{width:28px;height:28px}.angel-table__empty-title{color:var(--at-text-primary);margin:0;font-size:15px;font-weight:700}.angel-table__empty-description{max-width:360px;color:var(--at-text-muted);margin:6px 0 18px;font-size:13px;line-height:1.6}.angel-table__loading,.angel-table__mobile-message{min-height:120px;color:var(--at-text-secondary);justify-content:center;align-items:center;gap:10px;padding:24px;font-size:13px;display:flex}.angel-table__spinner{border:2px solid var(--at-primary-light);border-top-color:var(--at-primary);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite angel-table-spin}@keyframes angel-table-spin{to{transform:rotate(360deg)}}.angel-table__loading-overlay{z-index:600;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:30px;left:0}.angel-table__loading-text{z-index:601;color:var(--at-text-primary);position:relative}.angel-table__loading-backdrop{background:var(--at-bg-overlay);border:1px solid var(--at-border);position:absolute;inset:0}.angel-table__error{color:var(--at-danger);text-align:center;padding:28px 16px}.angel-table__error p{margin:0 0 12px}.angel-table__footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;display:flex}.angel-table__footer-info{color:var(--at-text-secondary);font-size:13px}.angel-table__footer-info strong{color:var(--at-text-primary);font-weight:700}.angel-table__pagination{align-items:center;gap:6px;display:flex}.angel-table__page-button{border:1px solid var(--at-border);background:var(--at-bg);min-height:36px;color:var(--at-text);cursor:pointer;transition:background-color var(--at-transition), border-color var(--at-transition), color var(--at-transition);border-radius:7px;justify-content:center;align-items:center;gap:5px;padding:7px 11px;font-family:inherit;font-size:12px;font-weight:600;display:inline-flex}.angel-table__page-button svg{width:15px;height:15px}.angel-table__page-button:hover:not(:disabled){border-color:var(--at-primary-border);background:var(--at-primary-light);color:var(--at-primary)}.angel-table__page-button:disabled{background:var(--at-bg-disabled);color:var(--at-text-disabled);cursor:not-allowed}.angel-table__page-number{border:1px solid var(--at-primary);background:var(--at-primary);width:36px;height:36px;color:var(--at-text-inverse);border-radius:7px;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:inline-flex}.angel-table__desktop{width:100%;min-width:0;display:block}.angel-table__mobile{width:100%;display:none}.angel-table__cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.angel-table__card{border:1px solid var(--at-border);border-radius:var(--at-radius);background:var(--at-bg-secondary);width:100%;color:var(--at-text);cursor:pointer;transition:border-color var(--at-transition), background-color var(--at-transition), box-shadow var(--at-transition);padding:12px;position:relative}.angel-table__card:hover{border-color:var(--at-primary);box-shadow:var(--at-shadow)}.angel-table__card .is-selected{border:1px solid var(--at-success-border);background:var(--at-success-bg);color:var(--at-success);border-radius:4px;padding:2px 6px;font-size:11px;font-weight:600;position:absolute;top:10px;right:8px;transform:rotate(-5deg)}.angel-table__card_row{padding:4px 0;display:flex}.angel-table__card_column_left{width:40%;color:var(--at-text-secondary);word-break:break-word;overflow-wrap:anywhere;white-space:normal;padding:2px}.angel-table__card_column_right{width:60%;color:var(--at-text);word-break:break-word;overflow-wrap:anywhere;white-space:normal;padding:2px}@media (width<=1023px){.angel-table__desktop{display:none}.angel-table__mobile{display:block}}@media (width<=600px){.angel-table__toolbar{align-items:stretch}.angel-table__toolbar-left{width:100%}.angel-table__toolbar-left>.angel-table__select{flex:130px;min-width:0;max-width:100%}.angel-table__label{flex:100%;justify-content:flex-start}.angel-table__label .angel-table__select{flex:1;max-width:150px}.angel-table__toolbar>.angel-table__button{width:100%}.angel-table__footer{align-items:flex-start}.angel-table__pagination{justify-content:space-between;width:100%}.angel-table__page-button{flex:1}.angel-table__selection{align-items:flex-start}.angel-table__search-box{width:100%;max-width:100%}.angel-table__cards{grid-template-columns:1fr}}.angel-table-container :focus-visible{outline:2px solid var(--at-border-focus);outline-offset:2px}@media (prefers-reduced-motion:reduce){.angel-table-container *,.angel-table-container :before,.angel-table-container :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.angel-table__dropdown{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.angel-table__dropdown-trigger{justify-content:space-between;align-items:center;gap:10px;min-width:100px;display:inline-flex}.angel-table__dropdown-arrow{flex-shrink:0;transition:transform .2s}.angel-table__dropdown.is-open .angel-table__dropdown-arrow{transform:rotate(180deg)}.angel-table__dropdown-menu{z-index:1000;background:#fff;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;align-items:stretch;min-width:100px;max-height:300px;padding:4px;animation:.15s angel-dropdown-show;display:flex;position:absolute;overflow-x:auto;box-shadow:0 4px 6px -1px #00000014,0 2px 4px -2px #00000014}.angel-table__dropdown[data-direction=bottom] .angel-table__dropdown-menu,.angel-table__dropdown:not([data-direction]) .angel-table__dropdown-menu{top:calc(100% + 4px);left:0}.angel-table__dropdown[data-direction=top] .angel-table__dropdown-menu{bottom:calc(100% + 4px);left:0}.angel-table__dropdown[data-direction=left] .angel-table__dropdown-menu{top:0;right:calc(100% + 4px)}.angel-table__dropdown[data-direction=right] .angel-table__dropdown-menu{top:0;left:calc(100% + 4px)}.angel-table__dropdown-item{color:#374151;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:5px;align-items:center;width:100%;padding:8px 12px;font-size:13px;font-weight:400;transition:background .15s,color .15s;display:inline-flex}.angel-table__dropdown-item.active{color:#d1d5db;background:#00f}.angel-table__dropdown-item .not-selected{opacity:.5}.angel-table__dropdown-item p{flex:1;font-weight:600}.angel-table__dropdown-item:hover{color:#111827;background:#f3f4f6}.angel-table__dropdown-item:active{background:#e5e7eb}@keyframes angel-dropdown-show{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.angel-table-container[data-theme=dark] .angel-table__dropdown-menu{background:#1f2937;border-color:#374151;box-shadow:0 4px 12px #00000040}.angel-table-container[data-theme=dark] .angel-table__dropdown-item{color:#d1d5db}.angel-table-container[data-theme=dark] .angel-table__dropdown-item.selected{color:#e7eaee;background:#1b1c1c}.angel-table-container[data-theme=dark] .angel-table__dropdown-item .not-selected{opacity:.5}.angel-table-container[data-theme=dark] .angel-table__dropdown-item:hover{color:#fff;background:#374151}.angel-table-container[data-theme=dark] .angel-table__dropdown-item:active{background:#4b5563}
+/*$vite$:1*/