@serkonda7/solid-components 0.0.8 → 0.2.0

package/dist/search-bar.d.ts

@@ -0,0 +1,25 @@
+import type { JSX } from 'solid-js';
+export interface SearchBarProps {
+    value: string;
+    onInput: (value: string) => void;
+    /** Accessible name of the input. Defaults to `Search`. */
+    ariaLabel?: string;
+    /** Defaults to `Search…`. */
+    placeholder?: string;
+    /** Accessible name of the clear button. Defaults to `Clear search`. */
+    clearLabel?: string;
+    /**
+     * Key that focuses the input together with Ctrl/Cmd, from anywhere on the page.
+     * Defaults to `k`; `false` disables the shortcut and its hint.
+     */
+    shortcutKey?: string | false;
+    /** Text of the shortcut hint shown while empty. Defaults to `Ctrl <KEY>`. */
+    shortcutLabel?: string;
+    class?: string;
+}
+/**
+ * Search input with a leading icon, a clear button while filled, and a global
+ * Ctrl/Cmd+K shortcut that focuses and selects it. While the input is empty a
+ * `<kbd>` hint shows the shortcut (hidden on touch devices).
+ */
+export declare function SearchBar(props: SearchBarProps): JSX.Element;

package/dist/styles.css

@@ -9,10 +9,17 @@
 
 .data-table-toolbar {
 	display: flex;
+	align-items: flex-start;
 	justify-content: flex-end;
+	gap: 0.5rem;
 	margin-bottom: 0.5rem;
 }
 
+.data-table-toolbar-start {
+	flex: 1;
+	min-width: 0;
+}
+
 .data-table-customizer {
 	position: relative;
 }
@@ -72,13 +79,53 @@
 	gap: 0.375rem;
 }
 
+.data-table-customizer-item {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	border-radius: 0.25rem;
+}
+
+.data-table-customizer-item-dragging {
+	opacity: 0.5;
+}
+
+.data-table-customizer-grip {
+	flex: none;
+	opacity: 0.5;
+	cursor: grab;
+}
+
 .data-table-customizer-option {
 	display: flex;
+	flex: 1;
 	align-items: center;
 	gap: 0.5rem;
 	cursor: pointer;
 }
 
+.data-table-customizer-move {
+	display: inline-flex;
+	padding: 0.125rem;
+	border: 0;
+	border-radius: 0.25rem;
+	background: none;
+	color: inherit;
+	cursor: pointer;
+}
+
+.data-table-customizer-move:hover:not(:disabled) {
+	background: var(
+		--data-table-customizer-hover-bg,
+		var(--surface-hover, light-dark(#f5f5f5, #292d33))
+	);
+}
+
+.data-table-customizer-move:disabled {
+	opacity: 0.3;
+	cursor: default;
+}
+
 .data-table-customizer-option:has(input:disabled) {
 	opacity: 0.6;
 	cursor: not-allowed;
@@ -355,3 +402,396 @@
 	display: flex;
 	align-items: center;
 }
+
+/* FilterTable: Results/Filters tabs around a DataTable. */
+.filter-table-tabs {
+	display: flex;
+	gap: 0.25rem;
+	margin-bottom: 0.75rem;
+	border-bottom: 1px solid
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+}
+
+.filter-table-tab {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	margin-bottom: -1px;
+	padding: 0.5rem 0.875rem;
+	border: 1px solid transparent;
+	border-radius: 0.375rem 0.375rem 0 0;
+	background: transparent;
+	color: var(
+		--filter-table-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	font: inherit;
+	cursor: pointer;
+}
+
+.filter-table-tab:hover {
+	background: transparent;
+	color: inherit;
+}
+
+.filter-table-tab[aria-selected="true"] {
+	border-color: var(
+			--filter-table-border,
+			var(--border, light-dark(#d0d0d0, #3a3e45))
+		)
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)))
+		transparent;
+	background: var(
+		--filter-table-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	color: inherit;
+	font-weight: 600;
+}
+
+.filter-table-badge {
+	min-width: 1.25rem;
+	padding: 0.05rem 0.4rem;
+	border-radius: 999px;
+	background: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+	color: light-dark(#ffffff, #10141a);
+	font-size: 0.75em;
+	font-weight: 600;
+	text-align: center;
+}
+
+.filter-table-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.filter-table-input {
+	box-sizing: border-box;
+	width: 100%;
+	padding: 0.375rem 0.5rem;
+	border: 1px solid
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.375rem;
+	background: var(
+		--filter-table-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	color: inherit;
+	font: inherit;
+}
+
+.filter-table-search {
+	position: relative;
+	flex: 0 1 16rem;
+	min-width: 10rem;
+}
+
+.filter-table-search .filter-table-input {
+	padding-left: 1.9rem;
+}
+
+.filter-table-search-icon {
+	position: absolute;
+	top: 50%;
+	left: 0.55rem;
+	transform: translateY(-50%);
+	color: var(
+		--filter-table-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	pointer-events: none;
+}
+
+.filter-table-pills,
+.filter-table-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.375rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.filter-table-pill,
+.filter-table-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.3rem;
+	padding: 0.2rem 0.55rem;
+	border: 1px solid transparent;
+	border-radius: 999px;
+	background: var(
+		--filter-table-pill-bg,
+		light-dark(rgb(26 102 214 / 12%), rgb(110 168 254 / 16%))
+	);
+	color: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+	font: inherit;
+	font-size: 0.8125rem;
+	line-height: 1.4;
+}
+
+.filter-table-pill {
+	cursor: pointer;
+}
+
+.filter-table-pill:hover {
+	border-color: currentColor;
+	background: var(
+		--filter-table-pill-bg,
+		light-dark(rgb(26 102 214 / 12%), rgb(110 168 254 / 16%))
+	);
+}
+
+.filter-table-pill-clear {
+	background: transparent;
+	color: var(
+		--filter-table-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+}
+
+.filter-table-pill-clear:hover {
+	background: transparent;
+}
+
+.filter-table-saved {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	flex: 0 1 14rem;
+	min-width: 9rem;
+}
+
+.filter-table-saved > :first-child {
+	flex: 1;
+	min-width: 0;
+}
+
+.filter-table-save {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+
+.filter-table-save .filter-table-input {
+	width: 12rem;
+}
+
+.filter-table-chip-remove {
+	display: inline-flex;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+}
+
+.filter-table-chip-remove:hover {
+	background: transparent;
+}
+
+.filter-table-multi {
+	display: grid;
+	gap: 0.375rem;
+	min-width: 0;
+}
+
+.filter-table-form {
+	/* Label column width and gap; group headings are indented by both so they
+	line up with the inputs. */
+	--filter-table-label-width: 9rem;
+	--filter-table-label-gap: 1rem;
+	display: grid;
+	gap: 1.25rem;
+	max-width: 40rem;
+}
+
+/* Groups are plain sections: a muted heading, separated by a thin rule. */
+.filter-table-fieldset {
+	display: grid;
+	gap: 0.5rem;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+
+.filter-table-fieldset + .filter-table-fieldset {
+	padding-top: 1.25rem;
+	border-top: 1px solid
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+}
+
+/* Floated so it lays out as a regular grid item instead of on the border. */
+.filter-table-legend {
+	float: left;
+	width: 100%;
+	margin-bottom: 0.25rem;
+	padding: 0 0 0
+		calc(var(--filter-table-label-width) + var(--filter-table-label-gap));
+	box-sizing: border-box;
+	color: var(
+		--filter-table-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	font-size: 0.75rem;
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+
+/* Labels right-aligned in a column next to their inputs. */
+.filter-table-field {
+	display: grid;
+	grid-template-columns: var(--filter-table-label-width) minmax(0, 1fr);
+	align-items: start;
+	gap: var(--filter-table-label-gap);
+}
+
+.filter-table-label {
+	padding-top: calc(0.375rem + 1px);
+}
+
+.filter-table-form-actions {
+	display: flex;
+	justify-content: flex-end;
+	padding-top: 1.25rem;
+	border-top: 1px solid
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	gap: 0.5rem;
+}
+
+.filter-table-button {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+
+.filter-table-button-primary {
+	border-color: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+	background: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+	color: light-dark(#ffffff, #10141a);
+	font-weight: 600;
+}
+
+.filter-table-button-primary:hover {
+	filter: brightness(1.1);
+	background: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+}
+
+@media (max-width: 640px) {
+	.filter-table-field {
+		grid-template-columns: 1fr;
+		gap: 0.25rem;
+	}
+
+	.filter-table-label {
+		padding-top: 0;
+	}
+
+	.filter-table-legend {
+		padding-left: 0;
+	}
+}
+
+/* SearchBar: input with a leading icon and trailing clear button / shortcut hint. */
+.search-bar {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.search-bar-input {
+	box-sizing: border-box;
+	width: 100%;
+	padding: 0.5rem 2.4rem;
+	border: 1px solid
+		var(--search-bar-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.375rem;
+	background: var(
+		--search-bar-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	color: inherit;
+	font: inherit;
+}
+
+.search-bar-icon {
+	position: absolute;
+	left: 0.8rem;
+	color: var(
+		--search-bar-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	pointer-events: none;
+}
+
+.search-bar-clear {
+	position: absolute;
+	right: 0.4rem;
+	display: grid;
+	place-items: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	border: 1px solid transparent;
+	border-radius: 50%;
+	background: transparent;
+	color: var(
+		--search-bar-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	cursor: pointer;
+}
+
+.search-bar-clear:hover {
+	background: var(
+		--search-bar-hover-bg,
+		var(--surface-hover, light-dark(#f5f5f5, #292d33))
+	);
+	color: inherit;
+}
+
+.search-bar-shortcut {
+	position: absolute;
+	right: 0.7rem;
+	padding: 0.15rem 0.4rem;
+	border: 1px solid
+		var(--search-bar-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 6px;
+	background: var(
+		--search-bar-hover-bg,
+		var(--surface-hover, light-dark(#f5f5f5, #292d33))
+	);
+	color: var(
+		--search-bar-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	font-family: inherit;
+	font-size: 0.75rem;
+	pointer-events: none;
+	user-select: none;
+}
+
+@media (pointer: coarse) {
+	.search-bar-shortcut {
+		display: none;
+	}
+}

package/dist/vite.d.ts

@@ -0,0 +1,16 @@
+import type { Plugin } from 'vite';
+/**
+ * Keeps `@tabler/icons-solidjs` from loading its barrel, which re-exports ~6000
+ * icon modules. `vite-plugin-solid` adds the `solid` export condition, so in dev
+ * the barrel is unbundled source and the browser fetches every one of them.
+ *
+ * - Rewrites `import { IconX, IconY as Y } from '@tabler/icons-solidjs'` to
+ *   per-icon default imports, in dev and build. `type` specifiers are dropped.
+ * - Fails the transform for anything it can't rewrite (namespace, default, or
+ *   dynamic imports, re-exports, unknown names) instead of falling back.
+ * - In dev, resolving the package root from any other module is an error that
+ *   names the importer, and the package is excluded from dependency pre-bundling.
+ *
+ * Add it before `solid()`: `plugins: [tablerIcons(), solid()]`.
+ */
+export declare function tablerIcons(): Plugin;

package/dist/vite.js

@@ -0,0 +1,2 @@
+import{existsSync as d}from"node:fs";import{join as b}from"node:path";var s="@tabler/icons-solidjs",m=`/${s}/`,I=/import\s+(type\s+)?\{([^}]*)\}\s*from\s*(['"])@tabler\/icons-solidjs\3;?/g,_=/(?:\bfrom\s*|\bimport\s*\(?\s*)(['"])@tabler\/icons-solidjs\1|\brequire\s*\(\s*(['"])@tabler\/icons-solidjs\2/,j=/^Icon[A-Za-z0-9]+$/,v=/\.[cm]?[jt]sx?$/;function M(){let p=!1,f=new Map;return{name:"solid-components:tabler-icons",enforce:"pre",config(e,t){return p=t.command==="serve",{optimizeDeps:{exclude:[s]}}},async resolveId(e,t,r){if(!p||e!==s||r.scan)return null;this.error(`${t??"unknown module"} imports the ${s} barrel, which loads every icon. Use plain named imports (import { IconX } from '${s}') in a file transformed by tablerIcons().`)},async transform(e,t){if(!e.includes(s)||t.startsWith("\x00")||t.includes(m))return;let r=t.split("?",1)[0]??t;if(!v.test(r))return;let l=await this.resolve(s,r,{skipSelf:!0});if(!l)this.error(`Cannot resolve ${s} from ${r}`);let c=l.id.slice(0,l.id.lastIndexOf(m)+m.length),o=f.get(c);if(!o){if(o=b(c,"dist/source/icons"),!d(o))this.error(`${s} has no per-icon modules at ${o}`);f.set(c,o)}let h=o,a=e.replace(I,(R,g,y)=>{if(g)return"";return y.split(",").map((n)=>n.trim()).filter((n)=>n!==""&&!n.startsWith("type ")).map((n)=>{let[i="",E=i]=n.split(/\s+as\s+/),u=b(h,`${i}.js`);if(!j.test(i)||!d(u))this.error(`${r}: '${i}' is not a ${s} icon`);return`import ${E} from ${JSON.stringify(u)};`}).join(`
+`)});if(_.test(a))this.error(`${r}: only plain named imports from ${s} are supported (no namespace, default, or dynamic imports, or re-exports)`);return a===e?void 0:{code:a,map:null}}}}export{M as tablerIcons};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serkonda7/solid-components",
-  "version": "0.0.8",
+  "version": "0.2.0",
   "description": "Reusable components for SolidJS",
   "license": "MIT",
   "author": "serkonda7",
@@ -19,6 +19,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "main": "./dist/index.js",
@@ -27,7 +31,7 @@
   "scripts": {
     "lint": "biome check --write",
     "lint:ci": "biome ci",
-    "check": "tsc --noEmit",
+    "check": "bun check",
     "test": "vitest run",
     "examples": "vite --config examples/vite.config.ts",
     "build:dev": "bun run scripts/build.ts --dev",
@@ -37,20 +41,26 @@
   "engines": {
     "node": ">=24"
   },
-  "packageManager": "bun@1.4.2",
-  "peerDependencies": {
-    "solid-js": ">=1.9.0"
-  },
+  "packageManager": "bun@1.4.3",
   "devDependencies": {
-    "@biomejs/biome": "2.5.14",
-    "@tabler/icons-solidjs": "~3.48.0",
-    "@types/bun": "1.4.2",
-    "@vitest/browser-playwright": "^5.0.2",
-    "playwright": "~1.63.0",
-    "solid-js": "~1.9.15",
+    "@biomejs/biome": "2.5.15",
+    "@tabler/icons-solidjs": "~3.49.0",
+    "@types/bun": "1.4.3",
+    "@vitest/browser-playwright": "~5.0.5",
+    "playwright": "~1.64.0",
+    "solid-js": "~1.9.17",
     "typescript": "~7.0.2",
-    "vite": "~8.3.0",
+    "vite": "~8.3.4",
     "vite-plugin-solid": "~2.11.14",
-    "vitest": "~5.0.2"
+    "vitest": "~5.0.5"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.9.0",
+    "vite": ">=8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
   }
 }