@serkonda7/solid-components 0.3.1 → 0.4.0

package/dist/modal.d.ts

@@ -0,0 +1,39 @@
+import type { JSX } from 'solid-js';
+export interface ModalProps {
+    /** Whether the modal is shown. The content is mounted only while open. */
+    open: boolean;
+    /** Called on Escape, a backdrop click or the close button; set `open` to false here. */
+    onClose: () => void;
+    /**
+     * Called before Escape, a backdrop click or the close button call `onClose`;
+     * return `false` (or resolve to it) to keep the modal open. Further requests
+     * are ignored while a returned promise is pending.
+     */
+    onBeforeClose?: () => boolean | Promise<boolean>;
+    /** Heading in the modal header; also its accessible name. */
+    title?: JSX.Element;
+    /** Accessible name when there is no `title`. */
+    ariaLabel?: string;
+    /** Id of an element describing the modal, for `aria-describedby`. */
+    describedBy?: string;
+    /** Rendered below the body, e.g. action buttons. */
+    footer?: JSX.Element;
+    /** Accessible name of the close button. Defaults to `Close`. */
+    closeLabel?: string;
+    /** Hides the header close button. Escape and the backdrop still close. */
+    hideCloseButton?: boolean;
+    /** Defaults to `true`. */
+    closeOnEscape?: boolean;
+    /** Close on a click on the backdrop. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+    class?: string;
+    children?: JSX.Element;
+}
+/**
+ * Modal dialog on top of a native `<dialog>` opened with `showModal()`: it sits
+ * in the top layer and the rest of the page is inert, so focus stays inside.
+ * Opening focuses the first `autofocus` element, else the first focusable one;
+ * closing returns focus to the element that had it before. Controlled through
+ * `open`/`onClose`.
+ */
+export declare function Modal(props: ModalProps): JSX.Element;

package/dist/styles.css

@@ -91,9 +91,21 @@
 }
 
 .data-table-customizer-grip {
+	display: inline-flex;
 	flex: none;
 	opacity: 0.5;
 	cursor: grab;
+	touch-action: none;
+}
+
+.data-table-customizer-grip:focus-visible {
+	opacity: 1;
+}
+
+@media (pointer: coarse) {
+	.data-table-customizer-grip {
+		padding: 0.5rem;
+	}
 }
 
 .data-table-customizer-option {
@@ -121,6 +133,13 @@
 	border-collapse: collapse;
 }
 
+.data-table tbody tr:hover {
+	background: var(
+		--data-table-row-hover-bg,
+		var(--surface-hover, light-dark(#f5f5f5, #292d33))
+	);
+}
+
 .data-table-resized {
 	table-layout: fixed;
 	max-width: none;
@@ -174,6 +193,65 @@
 	outline: none;
 }
 
+/* Sticky cells need opaque backgrounds and their own edge: collapsed borders
+scroll away with the table. */
+.data-table-scroll:has(> .data-table-sticky-header) {
+	max-height: var(--data-table-max-height, 80dvh);
+}
+
+.data-table.data-table-sticky-header th {
+	position: sticky;
+	z-index: 2;
+	top: 0;
+	background: var(
+		--data-table-header-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	box-shadow: inset 0 -1px 0
+		var(--data-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+}
+
+/* A sticky header cell is painted over the part that overhangs its neighbour. */
+.data-table-sticky-header .data-table-resize-handle {
+	right: 0;
+}
+
+.data-table.data-table-sticky-actions .data-table-actions {
+	position: sticky;
+	z-index: 1;
+	right: 0;
+	background: var(
+		--data-table-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	box-shadow: inset 1px 0 0
+		var(--data-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+}
+
+.data-table.data-table-sticky-actions tbody tr:hover .data-table-actions {
+	background: var(
+		--data-table-row-hover-bg,
+		var(--surface-hover, light-dark(#f5f5f5, #292d33))
+	);
+}
+
+.data-table.data-table-sticky-actions th.data-table-actions {
+	z-index: 3;
+	background: var(
+		--data-table-header-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+}
+
+.data-table.data-table-sticky-header.data-table-sticky-actions
+	th.data-table-actions {
+	box-shadow:
+		inset 1px 0 0
+		var(--data-table-border, var(--border, light-dark(#d0d0d0, #3a3e45))),
+		inset 0 -1px 0
+		var(--data-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+}
+
 .data-table-sort {
 	padding: 0;
 	border: none;
@@ -199,10 +277,103 @@
 	text-align: center;
 }
 
+.data-table-sort-indicator:empty::before {
+	content: "↕";
+	opacity: 0.4;
+}
+
+.data-table-sort:hover .data-table-sort-indicator:empty::before {
+	opacity: 0.8;
+}
+
 .data-table-status {
 	color: var(--text-secondary, #616161);
 }
 
+.data-table-visually-hidden {
+	position: absolute;
+	overflow: hidden;
+	width: 1px;
+	height: 1px;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+.data-table-skeleton {
+	display: block;
+	width: 70%;
+	min-width: 2.5rem;
+	height: 1em;
+	border-radius: 0.25rem;
+	background: var(
+		--data-table-skeleton-bg,
+		var(--border, light-dark(#e4e4e4, #30343a))
+	);
+	animation: data-table-skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes data-table-skeleton-pulse {
+	50% {
+		opacity: 0.45;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.data-table-skeleton {
+		animation: none;
+	}
+}
+
+.data-table-pagination {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.5rem 0.75rem;
+	padding: 0.5rem 0;
+}
+
+.data-table-page-size {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+
+.data-table-pagination select,
+.data-table-pagination button {
+	border: 1px solid
+		var(--data-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.375rem;
+	background: var(
+		--data-table-customizer-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	color: inherit;
+	font: inherit;
+}
+
+.data-table-pagination select {
+	padding: 0.25rem;
+}
+
+.data-table-pagination button {
+	display: inline-flex;
+	padding: 0.25rem;
+	cursor: pointer;
+}
+
+.data-table-pagination button:hover:enabled {
+	background: var(
+		--data-table-customizer-hover-bg,
+		var(--surface-hover, light-dark(#f5f5f5, #292d33))
+	);
+}
+
+.data-table-pagination button:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
 /* Combobox: text input plus an absolutely positioned listbox below it. */
 .combobox {
 	position: relative;
@@ -300,6 +471,26 @@
 	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
 }
 
+/* Preview of the highlighted option, beside the list (outside its scroll box). */
+.combobox-preview {
+	position: absolute;
+	top: calc(100% + 0.2rem);
+	left: calc(100% + 0.4rem);
+	z-index: 20;
+	/* Positioned past the combobox's right edge, so it would shrink to min-content. */
+	width: max-content;
+	padding: 0.5rem;
+	border: 1px solid
+		var(--combobox-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.375rem;
+	background: var(
+		--combobox-panel-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+	pointer-events: none;
+}
+
 .combobox-option,
 .combobox-empty {
 	padding: 0.3rem 0.5rem;
@@ -622,6 +813,16 @@
 	min-width: 0;
 }
 
+.filter-table-range {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.filter-table-range .filter-table-input {
+	flex: 1;
+	min-width: 0;
+}
+
 .filter-table-form {
 	/* Label column width and gap; group headings are indented by both so they
 	line up with the inputs. */
@@ -729,6 +930,67 @@
 	}
 }
 
+/* ColorInput: hex input with a native color picker as its leading swatch. */
+.color-input {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 9rem;
+}
+
+.color-input-text {
+	box-sizing: border-box;
+	width: 100%;
+	padding: 0.375rem 0.5rem 0.375rem 2.25rem;
+	border: 1px solid
+		var(--color-input-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.375rem;
+	background: var(
+		--color-input-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	color: inherit;
+	font: inherit;
+}
+
+.color-input-text:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.color-input-picker {
+	position: absolute;
+	left: 0.5rem;
+	width: 1.25rem;
+	height: 1.25rem;
+	padding: 0;
+	border: none;
+	background: none;
+	cursor: pointer;
+	appearance: none;
+}
+
+.color-input-picker:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.color-input-picker::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+.color-input-picker::-webkit-color-swatch {
+	border: 1px solid
+		var(--color-input-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.25rem;
+}
+
+.color-input-picker::-moz-color-swatch {
+	border: 1px solid
+		var(--color-input-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.25rem;
+}
+
 /* SearchBar: input with a leading icon and trailing clear button / shortcut hint. */
 .search-bar {
 	position: relative;
@@ -813,3 +1075,89 @@
 		display: none;
 	}
 }
+
+/* Modal: native `<dialog>` in the top layer; the panel fills it so that only
+backdrop clicks target the dialog itself. */
+.modal {
+	box-sizing: border-box;
+	width: min(var(--modal-width, 32rem), calc(100vw - 2rem));
+	max-height: calc(100dvh - 2rem);
+	padding: 0;
+	border: 1px solid
+		var(--modal-border, var(--border, light-dark(#d0d0d0, #30343a)));
+	border-radius: 0.5rem;
+	background: var(--modal-bg, var(--surface, light-dark(#ffffff, #1d2024)));
+	color: inherit;
+	box-shadow: 0 16px 48px rgb(0 0 0 / 20%);
+}
+
+.modal::backdrop {
+	background: var(--modal-backdrop, rgb(0 0 0 / 45%));
+}
+
+/* Keep the page behind still while a modal is open. */
+:root:has(.modal[open]) {
+	overflow: hidden;
+}
+
+.modal-panel {
+	display: flex;
+	flex-direction: column;
+	max-height: inherit;
+}
+
+.modal-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.75rem 0.75rem 0 1rem;
+}
+
+.modal-title {
+	flex: 1;
+	margin: 0;
+	font-size: 1.125rem;
+	font-weight: 600;
+}
+
+.modal-close {
+	display: grid;
+	flex: none;
+	place-items: center;
+	width: 32px;
+	height: 32px;
+	margin-left: auto;
+	padding: 0;
+	border: 1px solid transparent;
+	border-radius: 50%;
+	background: transparent;
+	color: var(
+		--modal-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	cursor: pointer;
+}
+
+.modal-close:hover {
+	background: var(
+		--modal-hover-bg,
+		var(--surface-hover, light-dark(#f5f5f5, #292d33))
+	);
+	color: inherit;
+}
+
+.modal-body {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	padding: 0.75rem 1rem 1rem;
+}
+
+.modal-footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	padding: 0.75rem 1rem;
+	border-top: 1px solid
+		var(--modal-border, var(--border, light-dark(#d0d0d0, #30343a)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serkonda7/solid-components",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Reusable components for SolidJS",
   "license": "MIT",
   "author": "serkonda7",
@@ -31,27 +31,27 @@
   "scripts": {
     "lint": "biome check --write",
     "lint:ci": "biome ci",
-    "check": "bun check",
+    "typecheck": "bun check",
     "test": "vitest run",
     "examples": "vite --config examples/vite.config.ts",
     "build:dev": "bun run scripts/build.ts --dev",
-    "build": "bun run check && bun run scripts/build.ts --prod",
+    "build": "bun run typecheck && bun run scripts/build.ts --prod",
     "prepack": "bun run build"
   },
   "engines": {
     "node": ">=24"
   },
-  "packageManager": "bun@1.4.3",
+  "packageManager": "bun@1.4.4",
   "devDependencies": {
-    "@biomejs/biome": "2.5.15",
-    "@tabler/icons-solidjs": "~3.49.0",
-    "@types/bun": "1.4.3",
+    "@biomejs/biome": "2.6.4",
+    "@tabler/icons-solidjs": "~3.50.0",
+    "@types/bun": "1.4.4",
     "@vitest/browser-playwright": "~5.0.5",
-    "playwright": "~1.64.0",
-    "solid-js": "~1.9.17",
+    "playwright": "~1.64.1",
+    "solid-js": "~1.9.18",
     "typescript": "~7.0.2",
-    "vite": "~8.3.4",
-    "vite-plugin-solid": "~2.11.14",
+    "vite": "~8.3.5",
+    "vite-plugin-solid": "~2.11.15",
     "vitest": "~5.0.5"
   },
   "peerDependencies": {
@@ -62,5 +62,8 @@
     "vite": {
       "optional": true
     }
+  },
+  "dependencies": {
+    "@tanstack/solid-table": "~9.3.1"
   }
 }