@serkonda7/solid-components 0.1.0 → 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

@@ -79,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;
@@ -522,6 +562,29 @@
 	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;
@@ -647,3 +710,88 @@
 		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.1.0",
+  "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.15",
     "@tabler/icons-solidjs": "~3.49.0",
-    "@types/bun": "1.4.2",
-    "@vitest/browser-playwright": "~5.0.4",
+    "@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.4",
     "vite-plugin-solid": "~2.11.14",
-    "vitest": "~5.0.4"
+    "vitest": "~5.0.5"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.9.0",
+    "vite": ">=8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
   }
 }