juxscript 1.1.166 → 1.1.168

package/lib/styles/shadcn.css

@@ -1103,4 +1103,358 @@ button.jux-button:active,
 
 .dark .jux-menu-chevron {
   color: #a1a1aa;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * DATAFRAME COMPONENT
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-dataframe {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.jux-dataframe-upload {
+  margin-bottom: 0.25rem;
+}
+
+.jux-dataframe-status {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  border: 1px solid #e4e4e7;
+  background: #fafafa;
+  color: #71717a;
+  transition: all 0.2s ease;
+}
+
+.jux-dataframe-status-success {
+  background: #f0fdf4;
+  border-color: #bbf7d0;
+  color: #15803d;
+}
+
+.jux-dataframe-status-loading {
+  background: #fefce8;
+  border-color: #fde68a;
+  color: #a16207;
+}
+
+.jux-dataframe-status-error {
+  background: #fef2f2;
+  border-color: #fecaca;
+  color: #dc2626;
+}
+
+.jux-dataframe-status-empty {
+  background: #fafafa;
+  border-color: #e4e4e7;
+  color: #a1a1aa;
+}
+
+/* DataFrame Filter */
+.jux-dataframe-filter {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.jux-dataframe-filter-icon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #a1a1aa;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+}
+
+.jux-dataframe-filter-input {
+  padding-left: 2.25rem !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * FILE UPLOAD (Shadcn styled)
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-fileupload {
+  gap: 0.5rem;
+}
+
+.jux-fileupload-button-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.jux-fileupload-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 2.5rem;
+  padding: 0 1rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid #e4e4e7;
+  background: #ffffff;
+  color: #09090b;
+}
+
+.jux-fileupload-button:hover {
+  background: #f4f4f5;
+  color: #18181b;
+}
+
+.jux-fileupload-button:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.jux-fileupload-icon {
+  display: flex;
+  align-items: center;
+  color: #71717a;
+}
+
+.jux-fileupload-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.jux-fileupload-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  background: #f4f4f5;
+  border: 1px solid #e4e4e7;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  color: #09090b;
+}
+
+.jux-fileupload-filename {
+  flex: 1;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jux-fileupload-filesize {
+  color: #a1a1aa;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.jux-fileupload-remove {
+  background: transparent;
+  border: none;
+  color: #a1a1aa;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0 0.25rem;
+  line-height: 1;
+  border-radius: 0.25rem;
+  transition: all 0.15s;
+}
+
+.jux-fileupload-remove:hover {
+  color: #ef4444;
+  background: #fef2f2;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * TABLE ENHANCEMENTS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.jux-table-filter {
+  display: flex;
+  height: 2.5rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  border: 1px solid #e4e4e7;
+  background: #ffffff;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: #09090b;
+  outline: none;
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+  margin-bottom: 0.75rem;
+}
+
+.jux-table-filter::placeholder {
+  color: #a1a1aa;
+}
+
+.jux-table-filter:focus {
+  border-color: #18181b;
+  box-shadow: 0 0 0 2px #18181b, 0 0 0 4px rgba(24, 24, 27, 0.1);
+}
+
+.jux-table-pagination {
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.375rem;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 0;
+}
+
+.jux-table-pagination button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 2.25rem;
+  padding: 0 0.875rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid #e4e4e7;
+  background: #ffffff;
+  color: #09090b;
+}
+
+.jux-table-pagination button:hover:not(:disabled) {
+  background: #f4f4f5;
+  color: #18181b;
+}
+
+.jux-table-pagination button:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.jux-table-pagination span {
+  font-size: 0.875rem;
+  color: #71717a;
+  padding: 0 0.75rem;
+}
+
+/* Table hoverable rows */
+.jux-table-hoverable tbody tr {
+  transition: background-color 0.1s ease;
+}
+
+.jux-table-hoverable tbody tr:hover {
+  background-color: #f4f4f5 !important;
+}
+
+/* Selection highlight override for shadcn */
+.jux-table-row-selected {
+  background-color: #eff6ff !important;
+}
+
+.jux-table-row-selected:hover {
+  background-color: #dbeafe !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * DARK MODE - DATAFRAME / FILEUPLOAD / TABLE
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.dark .jux-dataframe-status {
+  background: #18181b;
+  border-color: #27272a;
+  color: #a1a1aa;
+}
+
+.dark .jux-dataframe-status-success {
+  background: #052e16;
+  border-color: #166534;
+  color: #4ade80;
+}
+
+.dark .jux-dataframe-status-loading {
+  background: #422006;
+  border-color: #a16207;
+  color: #facc15;
+}
+
+.dark .jux-dataframe-status-error {
+  background: #450a0a;
+  border-color: #991b1b;
+  color: #f87171;
+}
+
+.dark .jux-fileupload-button {
+  border-color: #27272a;
+  background: #09090b;
+  color: #fafafa;
+}
+
+.dark .jux-fileupload-button:hover {
+  background: #27272a;
+}
+
+.dark .jux-fileupload-item {
+  background: #18181b;
+  border-color: #27272a;
+  color: #fafafa;
+}
+
+.dark .jux-fileupload-filesize {
+  color: #71717a;
+}
+
+.dark .jux-table-filter {
+  border-color: #27272a;
+  background: #09090b;
+  color: #fafafa;
+}
+
+.dark .jux-table-filter::placeholder {
+  color: #52525b;
+}
+
+.dark .jux-table-filter:focus {
+  border-color: #fafafa;
+  box-shadow: 0 0 0 2px #fafafa, 0 0 0 4px rgba(250, 250, 250, 0.1);
+}
+
+.dark .jux-table-pagination button {
+  border-color: #27272a;
+  background: #09090b;
+  color: #fafafa;
+}
+
+.dark .jux-table-pagination button:hover:not(:disabled) {
+  background: #27272a;
+}
+
+.dark .jux-table-pagination span {
+  color: #71717a;
+}
+
+.dark .jux-table-hoverable tbody tr:hover {
+  background-color: #27272a !important;
+}
+
+.dark .jux-table-row-selected {
+  background-color: #172554 !important;
+}
+
+.dark .jux-table-row-selected:hover {
+  background-color: #1e3a5f !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.166",
+  "version": "1.1.168",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",