@qds.dev/tools 0.9.7 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -26,13 +26,11 @@ npm install @qds.dev/tools
26
26
 
27
27
  ```typescript
28
28
  // vite.config.ts
29
- import { icons } from '@qds.dev/tools/vite';
30
- import { defineConfig } from 'vite';
29
+ import { icons } from "@qds.dev/tools/vite";
30
+ import { defineConfig } from "vite";
31
31
 
32
32
  export default defineConfig({
33
- plugins: [
34
- icons()
35
- ]
33
+ plugins: [icons()]
36
34
  });
37
35
  ```
38
36
 
@@ -40,14 +38,11 @@ export default defineConfig({
40
38
 
41
39
  ```typescript
42
40
  // rolldown.config.ts
43
- import { icons, asChild } from '@qds.dev/tools/vite';
44
- import { defineConfig } from 'rolldown';
41
+ import { icons, asChild } from "@qds.dev/tools/vite";
42
+ import { defineConfig } from "rolldown";
45
43
 
46
44
  export default defineConfig({
47
- plugins: [
48
- icons(),
49
- asChild(),
50
- ]
45
+ plugins: [icons(), asChild()]
51
46
  });
52
47
  ```
53
48
 
@@ -59,11 +54,11 @@ When you edit a QDS component, several build plugins transform your code before
59
54
 
60
55
  ### Quick Reference
61
56
 
62
- | Pattern You See | Plugin | What Happens |
63
- |-----------------|--------|--------------|
64
- | `<Lucide.Check />`, `<Heroicons.Star />` | Icons | Becomes inline `<svg>` at build time |
65
- | `<Button asChild><a href="...">` | AsChild | Child props hoisted to parent |
66
- | `component$()` | Qwik Optimizer | Not in @qds.dev/tools (built into Qwik) |
57
+ | Pattern You See | Plugin | What Happens |
58
+ | ---------------------------------------- | -------------- | --------------------------------------- |
59
+ | `<Lucide.Check />`, `<Heroicons.Star />` | Icons | Becomes inline `<svg>` at build time |
60
+ | `<Button asChild><a href="...">` | AsChild | Child props hoisted to parent |
61
+ | `component$()` | Qwik Optimizer | Not in @qds.dev/tools (built into Qwik) |
67
62
 
68
63
  ### When to Read More
69
64
 
@@ -89,12 +84,17 @@ File changed: libs/components/checkbox/checkbox-indicator.tsx
89
84
  ```tsx
90
85
  // Your code:
91
86
  import { Lucide } from "@qds.dev/ui";
92
- <Lucide.Check width={20} class="text-green-500" />
87
+ <Lucide.Check width={20} class="text-green-500" />;
93
88
 
94
89
  // After icons plugin:
95
- import __qds_i_lucide_check from 'virtual:icons/lucide/check';
96
- <svg width={20} class="text-green-500" height="1em" viewBox="0 0 24 24"
97
- dangerouslySetInnerHTML={__qds_i_lucide_check} />
90
+ import __qds_i_lucide_check from "virtual:icons/lucide/check";
91
+ <svg
92
+ width={20}
93
+ class="text-green-500"
94
+ height="1em"
95
+ viewBox="0 0 24 24"
96
+ dangerouslySetInnerHTML={__qds_i_lucide_check}
97
+ />;
98
98
  ```
99
99
 
100
100
  **Why this matters:** The icon component you write doesn't exist at runtime. It's replaced with an actual `<svg>` element. If you're debugging icon issues, check the transformed output in browser devtools.
@@ -127,13 +127,13 @@ What you wrote is NOT what runs in the browser. The transformations above happen
127
127
 
128
128
  ### Common Debugging Scenarios
129
129
 
130
- | Issue | Likely Cause | Solution |
131
- |-------|--------------|----------|
132
- | Icon doesn't render | Icon name not in collection | Check [Iconify](https://icon-sets.iconify.design/) for valid names |
133
- | Icon has wrong viewBox | Icon collection uses different dimensions | Specify explicit `viewBox` prop |
134
- | asChild throws error | More than one child element | Ensure exactly one JSX child (whitespace is ignored) |
135
- | asChild props missing | Props not on direct child | Move props to the immediate child element |
136
- | Build error: "asChild elements must have exactly one child" | Multiple children or JSX expression | Use single element child, not `{condition && <el>}` patterns |
130
+ | Issue | Likely Cause | Solution |
131
+ | ----------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------ |
132
+ | Icon doesn't render | Icon name not in collection | Check [Iconify](https://icon-sets.iconify.design/) for valid names |
133
+ | Icon has wrong viewBox | Icon collection uses different dimensions | Specify explicit `viewBox` prop |
134
+ | asChild throws error | More than one child element | Ensure exactly one JSX child (whitespace is ignored) |
135
+ | asChild props missing | Props not on direct child | Move props to the immediate child element |
136
+ | Build error: "asChild elements must have exactly one child" | Multiple children or JSX expression | Use single element child, not `{condition && <el>}` patterns |
137
137
 
138
138
  ## How Plugins Transform Your Code
139
139
 
@@ -144,6 +144,7 @@ All transformations happen at build time. Your source code uses clean JSX patter
144
144
  Transforms icon JSX elements (`<Lucide.Check />`) into inline SVG at build time with virtual imports.
145
145
 
146
146
  **Before transformation (your code):**
147
+
147
148
  ```typescript
148
149
  import { Lucide } from "@qds.dev/ui";
149
150
 
@@ -153,6 +154,7 @@ export default component$(() => {
153
154
  ```
154
155
 
155
156
  **After transformation (build output):**
157
+
156
158
  ```typescript
157
159
  import __qds_i_lucide_check from 'virtual:icons/lucide/check';
158
160
 
@@ -162,6 +164,7 @@ export default component$(() => {
162
164
  ```
163
165
 
164
166
  **What this does:**
167
+
165
168
  - Transforms icon JSX into inline SVG elements
166
169
  - Generates virtual imports for icon data
167
170
  - Adds default dimensions (1em) if not specified
@@ -173,9 +176,10 @@ export default component$(() => {
173
176
  Hoists child element props to parent component when using asChild pattern for polymorphic rendering.
174
177
 
175
178
  **Before transformation (your code):**
179
+
176
180
  ```typescript
177
181
  export const Link = component$(() => {
178
- // Gives styles of button, but renders as the link child.
182
+ // Gives styles of button, but renders as the link child.
179
183
  // Useful when sharing styles OR existing logic inside of button that needs to be shared.
180
184
  return (
181
185
  <Button asChild>
@@ -186,6 +190,7 @@ export const Link = component$(() => {
186
190
  ```
187
191
 
188
192
  **After transformation (build output):**
193
+
189
194
  ```typescript
190
195
  export const Link = component$(() => {
191
196
  return (
@@ -197,6 +202,7 @@ export const Link = component$(() => {
197
202
  ```
198
203
 
199
204
  **What this does:**
205
+
200
206
  - Removes child element wrapper
201
207
  - Hoists child props to `movedProps` object
202
208
  - Adds `jsxType` to identify element type
@@ -205,20 +211,22 @@ export const Link = component$(() => {
205
211
 
206
212
  ## API
207
213
 
208
- | Export | Description |
209
- |--------|-------------|
210
- | Main export (`@qds.dev/tools`) | Core type utilities (AsChildTypes) |
211
- | `/vite` | Mostly re-exported from rolldown to stay modular: `icons`, `asChild`, `inlineAsset`, `minifyContentPlugin` |
212
- | `/rolldown` | Rolldown plugins: `icons`, `asChild`, `inlineAsset`, `inlineCssPlugin`, `qwikRolldown` |
213
- | `/playground` | Prop extraction and scenario injection plugins for component playgrounds |
214
- | `/utils` | General utility functions for code transformation |
214
+ | Export | Description |
215
+ | ------------------------------ | ---------------------------------------------------------------------------------------------------------- |
216
+ | Main export (`@qds.dev/tools`) | Core type utilities (AsChildTypes) |
217
+ | `/vite` | Mostly re-exported from rolldown to stay modular: `icons`, `asChild`, `inlineAsset`, `minifyContentPlugin` |
218
+ | `/rolldown` | Rolldown plugins: `icons`, `asChild`, `inlineAsset`, `inlineCssPlugin`, `qwikRolldown` |
219
+ | `/playground` | Prop extraction and scenario injection plugins for component playgrounds |
220
+ | `/utils` | General utility functions for code transformation |
215
221
 
216
222
  **Key plugins:**
217
223
 
218
224
  ### `icons(options?)`
225
+
219
226
  Transforms icon JSX elements into inline SVG with virtual imports.
220
227
 
221
228
  **Options:**
229
+
222
230
  - `packs?: Record<string, { iconifyPrefix: string }>` - Custom icon pack configuration
223
231
  - `importSources?: string[]` - Additional import sources to scan (default: `["@qds.dev/ui"]`)
224
232
  - `debug?: boolean` - Enable debug logging
@@ -226,24 +234,29 @@ Transforms icon JSX elements into inline SVG with virtual imports.
226
234
  **Default icon packs:** Lucide, Heroicons, Tabler, Hugeicons, MaterialSymbols, AkarIcons
227
235
 
228
236
  ### `asChild(options?)`
237
+
229
238
  Hoists child element props to parent component for polymorphic rendering.
230
239
 
231
240
  **Options:**
241
+
232
242
  - `debug?: boolean` - Enable debug logging
233
243
 
234
244
  **Use case:** Implement polymorphic "as" pattern where components can render as different elements while preserving parent component logic.
235
245
 
236
246
  ### `playground(options)`
247
+
237
248
  Factory function returning two plugins for interactive component playgrounds.
238
249
 
239
250
  **Returns:** `[propExtraction(options), scenarioInjection()]`
240
251
 
241
252
  **Options:**
253
+
242
254
  - `componentsDir: string` - Directory containing component files
243
255
  - `outputDir: string` - Directory for generated metadata JSON
244
256
  - `debug?: boolean` - Enable debug logging
245
257
 
246
258
  **What it does:**
259
+
247
260
  - Extracts TypeScript prop types from component files → JSON metadata
248
261
  - Injects scenario imports into MDX playground files
249
262
  - Enables interactive component demos with prop controls
@@ -256,14 +269,14 @@ The `/playground` export provides specialized plugins for building interactive c
256
269
 
257
270
  ```typescript
258
271
  // vite.config.ts
259
- import { playground } from '@qds.dev/tools/playground';
260
- import { defineConfig } from 'vite';
272
+ import { playground } from "@qds.dev/tools/playground";
273
+ import { defineConfig } from "vite";
261
274
 
262
275
  export default defineConfig({
263
276
  plugins: [
264
277
  playground({
265
- componentsDir: 'libs/components/src',
266
- outputDir: '.playground-metadata'
278
+ componentsDir: "libs/components/src",
279
+ outputDir: ".playground-metadata"
267
280
  })
268
281
  ]
269
282
  });
@@ -274,12 +287,14 @@ export default defineConfig({
274
287
  Extracts TypeScript prop types from component files and generates JSON metadata.
275
288
 
276
289
  **Process:**
290
+
277
291
  1. Reads component `.tsx` files from `componentsDir`
278
292
  2. Parses TypeScript prop interfaces and types
279
293
  3. Extracts JSDoc comments for prop descriptions
280
294
  4. Generates JSON files in `outputDir`
281
295
 
282
296
  **Output type:**
297
+
283
298
  ```typescript
284
299
  interface ComponentMetadata {
285
300
  componentName: string;
@@ -305,6 +320,7 @@ interface PropType {
305
320
  Transforms MDX files containing `<Playground />` components by auto-injecting scenario imports.
306
321
 
307
322
  **Process:**
323
+
308
324
  1. Scans for `<Playground />` in MDX files
309
325
  2. Looks for adjacent `scenarios/` directory
310
326
  3. Auto-imports scenario components and source code
@@ -313,6 +329,7 @@ Transforms MDX files containing `<Playground />` components by auto-injecting sc
313
329
  **Example MDX transformation:**
314
330
 
315
331
  Before:
332
+
316
333
  ```mdx
317
334
  # Button Component
318
335
 
@@ -320,15 +337,14 @@ Before:
320
337
  ```
321
338
 
322
339
  After (build time):
340
+
323
341
  ```mdx
324
- import * as Scenario1 from './scenarios/basic.tsx';
325
- import Scenario1Code from './scenarios/basic.tsx?raw';
342
+ import * as Scenario1 from "./scenarios/basic.tsx";
343
+ import Scenario1Code from "./scenarios/basic.tsx?raw";
326
344
 
327
345
  <Playground
328
346
  component={Button}
329
- scenarios={[
330
- { component: Scenario1, code: Scenario1Code }
331
- ]}
347
+ scenarios={[{ component: Scenario1, code: Scenario1Code }]}
332
348
  />
333
349
  ```
334
350
 
@@ -347,14 +363,17 @@ For package internals, dependency relationships, and design decisions, see [ARCH
347
363
  ## Related Packages
348
364
 
349
365
  **Used by:**
366
+
350
367
  - [`create-qds`](https://www.npmjs.com/package/create-qds) - CLI that scaffolds projects with these tools preconfigured
351
368
  - All QDS packages - Internal build tooling for @qds.dev/ui, @qds.dev/motion, @qds.dev/code
352
369
 
353
370
  **Complements:**
371
+
354
372
  - [@qds.dev/ui](https://www.npmjs.com/package/@qds.dev/ui) - Uses these build tools for icon transformations
355
373
  - [@qds.dev/base](https://www.npmjs.com/package/@qds.dev/base) - Uses these build tools for component patterns
356
374
 
357
375
  **Build dependencies:**
376
+
358
377
  - `vite` - Vite plugin compatibility
359
378
  - `rolldown` - Rolldown plugin compatibility
360
379
  - `oxc-*` - Fast JavaScript/TypeScript parsing and transformation
@@ -36,9 +36,9 @@ const scenarioInjection = () => {
36
36
  if ((mdxNode.type === "mdxJsxFlowElement" || mdxNode.type === "mdxJsxTextElement") && mdxNode.name === "Playground") {
37
37
  if (mdxNode.position?.start?.offset !== void 0 && mdxNode.position?.end?.offset !== void 0) {
38
38
  if (!mdxNode.attributes.some((attr) => attr.name === "scenarios")) {
39
- const scenariosArrayString = `[${scenarioFiles.map((s$1) => `{name: "${s$1.name}", component: ${s$1.componentVar}, source: ${s$1.sourceVar}}`).join(", ")}]`;
40
- const insertPos$1 = mdxNode.position.start.offset + 11;
41
- s.appendLeft(insertPos$1, ` scenarios={${scenariosArrayString}}`);
39
+ const scenariosArrayString = `[${scenarioFiles.map((s) => `{name: "${s.name}", component: ${s.componentVar}, source: ${s.sourceVar}}`).join(", ")}]`;
40
+ const insertPos = mdxNode.position.start.offset + 11;
41
+ s.appendLeft(insertPos, ` scenarios={${scenariosArrayString}}`);
42
42
  hasPlayground = true;
43
43
  }
44
44
  }
@@ -56,7 +56,7 @@ import { walk } from "oxc-walker";
56
56
  * @param s - MagicString instance for code transformation
57
57
  * @param source - Original source code
58
58
  */ function processAsChild(elem, s, source) {
59
- const children = elem.children.filter((child$1) => !isJSXText(child$1) || child$1.value.trim() !== "");
59
+ const children = elem.children.filter((child) => !isJSXText(child) || child.value.trim() !== "");
60
60
  if (children.length === 0) return;
61
61
  if (children.length > 1) throw new Error(`asChild elements must have exactly one child at ${elem.start}`);
62
62
  const child = children[0];
@@ -91,7 +91,7 @@ import { parseSync } from "oxc-parser";
91
91
  return null;
92
92
  }
93
93
  try {
94
- const iconData = await collectionLoader.loadIconDataLazy(prefix, name);
94
+ const iconData = name.includes("-") ? await collectionLoader.loadIconDataLazy(prefix, name) : await collectionLoader.loadIconDataByLowercase(prefix, name);
95
95
  if (!iconData) {
96
96
  debug(`Failed to load icon data for ${prefix}:${name}`);
97
97
  return { code: `export default '<path d="M12 2L2 7l10 5 10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>';\n` };
@@ -42,7 +42,7 @@ const nodeRequire = createRequire(import.meta.url);
42
42
  resolveId: {
43
43
  order: "pre",
44
44
  filter: { id: combinedQuery },
45
- async handler(id, importer, options$1) {
45
+ async handler(id, importer, options) {
46
46
  const isInlineAsset = inlineAssetQuery.test(id);
47
47
  const isNoTransform = noTransformQuery.test(id);
48
48
  if (!isInlineAsset && !isNoTransform) return;
@@ -57,7 +57,7 @@ const nodeRequire = createRequire(import.meta.url);
57
57
  let resolvedPath = null;
58
58
  try {
59
59
  const resolved = await this.resolve(basePath, importer, {
60
- ...options$1,
60
+ ...options,
61
61
  skipSelf: true
62
62
  });
63
63
  if (resolved) resolvedPath = resolved.id.split("?")[0];
@@ -75,8 +75,8 @@ const nodeRequire = createRequire(import.meta.url);
75
75
  }
76
76
  const subpath = parts.slice(subpathStartIndex).join("/");
77
77
  try {
78
- const basePath$1 = importer ? dirname(importer) : process.cwd();
79
- resolvedPath = join(dirname(nodeRequire.resolve(`${packageName}/package.json`, { paths: [basePath$1] })), subpath);
78
+ const basePath = importer ? dirname(importer) : process.cwd();
79
+ resolvedPath = join(dirname(nodeRequire.resolve(`${packageName}/package.json`, { paths: [basePath] })), subpath);
80
80
  debugInlineAsset("Manually resolved package import:", resolvedPath);
81
81
  } catch (err) {
82
82
  debugInlineAsset("Failed to manually resolve:", err);
@@ -1,6 +1,7 @@
1
1
  import { getAvailableCollections } from "../naming.qwik.mjs";
2
- import { readFileSync } from "node:fs";
2
+ import { existsSync, readFileSync, readdirSync } from "node:fs";
3
3
  import { createRequire } from "node:module";
4
+ import { dirname, join } from "node:path";
4
5
  import { getIconData, iconToSVG } from "@iconify/utils";
5
6
 
6
7
  //#region utils/icons/collections/loader.ts
@@ -12,12 +13,14 @@ import { getIconData, iconToSVG } from "@iconify/utils";
12
13
  lazyIconCache;
13
14
  availableCollections;
14
15
  require;
16
+ lowerToKebabMaps;
15
17
  constructor(debug) {
16
18
  this.debug = debug;
17
19
  this.lazyCollections = /* @__PURE__ */ new Map();
18
20
  this.lazyIconCache = /* @__PURE__ */ new Map();
19
21
  this.availableCollections = /* @__PURE__ */ new Set();
20
22
  this.require = createRequire(import.meta.url);
23
+ this.lowerToKebabMaps = /* @__PURE__ */ new Map();
21
24
  }
22
25
  /**
23
26
  * Discover all available collections
@@ -38,12 +41,48 @@ import { getIconData, iconToSVG } from "@iconify/utils";
38
41
  return this.availableCollections.has(name);
39
42
  }
40
43
  /**
44
+ * Find @iconify/json package path
45
+ */ findIconifyJsonPath() {
46
+ try {
47
+ return this.require.resolve("@iconify/json/package.json");
48
+ } catch {
49
+ const currentDir = dirname(new URL(import.meta.url).pathname);
50
+ const possiblePaths = [
51
+ join(currentDir, "../../../../node_modules/@iconify/json/package.json"),
52
+ join(currentDir, "../../../../../node_modules/.pnpm/@iconify+json@*/node_modules/@iconify/json/package.json"),
53
+ join(currentDir, "../../../node_modules/@iconify/json/package.json")
54
+ ];
55
+ for (const path of possiblePaths) if (path.includes("*")) {
56
+ const dir = dirname(path);
57
+ try {
58
+ if (existsSync(dirname(dir))) {
59
+ const entries = readdirSync(dirname(dir));
60
+ for (const entry of entries) if (entry.startsWith("@iconify+json@")) {
61
+ const fullPath = join(dirname(dir), entry, "node_modules/@iconify/json/package.json");
62
+ if (existsSync(fullPath)) return fullPath;
63
+ }
64
+ }
65
+ } catch {}
66
+ } else if (existsSync(path)) return path;
67
+ return null;
68
+ }
69
+ }
70
+ /**
41
71
  * Lazy load a collection
42
72
  */ async loadCollectionLazy(prefix) {
43
73
  if (this.lazyCollections.has(prefix)) return await this.lazyCollections.get(prefix);
44
74
  const loadPromise = (async () => {
45
75
  try {
46
- const collectionData = readFileSync(this.require.resolve(`@iconify/json/json/${prefix}.json`), "utf-8");
76
+ let collectionPath;
77
+ try {
78
+ collectionPath = this.require.resolve(`@iconify/json/json/${prefix}.json`);
79
+ } catch {
80
+ const iconifyPackageJson = this.findIconifyJsonPath();
81
+ if (!iconifyPackageJson) throw new Error(`Cannot find @iconify/json package for ${prefix}`);
82
+ collectionPath = join(dirname(iconifyPackageJson), "json", `${prefix}.json`);
83
+ }
84
+ if (!existsSync(collectionPath)) throw new Error(`Collection file not found: ${collectionPath}`);
85
+ const collectionData = readFileSync(collectionPath, "utf-8");
47
86
  const collection = JSON.parse(collectionData);
48
87
  this.debug(`Lazy-loaded ${prefix} collection with ${Object.keys(collection.icons || {}).length} icons`);
49
88
  return Promise.resolve(collection);
@@ -56,7 +95,50 @@ import { getIconData, iconToSVG } from "@iconify/utils";
56
95
  return loadPromise;
57
96
  }
58
97
  /**
59
- * Lazy load icon data
98
+ * Build lowercase-to-kebab mapping for a collection
99
+ */ buildLowerToKebabMap(prefix, collection) {
100
+ if (this.lowerToKebabMaps.has(prefix)) return this.lowerToKebabMaps.get(prefix);
101
+ const map = /* @__PURE__ */ new Map();
102
+ for (const iconName of Object.keys(collection.icons || {})) {
103
+ const lowerName = iconName.replace(/-/g, "").toLowerCase();
104
+ map.set(lowerName, iconName);
105
+ }
106
+ this.lowerToKebabMaps.set(prefix, map);
107
+ this.debug(`Built lowercase mapping for ${prefix}: ${map.size} icons`);
108
+ return map;
109
+ }
110
+ /**
111
+ * Lazy load icon data by lowercase name (no dashes)
112
+ */ async loadIconDataByLowercase(prefix, lowerName) {
113
+ const cacheKey = `${prefix}:${lowerName}`;
114
+ if (this.lazyIconCache.has(cacheKey)) return await this.lazyIconCache.get(cacheKey);
115
+ const loadPromise = (async () => {
116
+ try {
117
+ const collection = await this.loadCollectionLazy(prefix);
118
+ const kebabName = this.buildLowerToKebabMap(prefix, collection).get(lowerName);
119
+ if (!kebabName) {
120
+ this.debug(`Icon "${lowerName}" not found in ${prefix} collection (tried lowercase lookup)`);
121
+ return null;
122
+ }
123
+ const iconDataRaw = getIconData(collection, kebabName);
124
+ if (!iconDataRaw) {
125
+ this.debug(`Icon "${kebabName}" (from "${lowerName}") not found in ${prefix} collection`);
126
+ return null;
127
+ }
128
+ return {
129
+ body: iconToSVG(iconDataRaw).body,
130
+ viewBox: `${iconDataRaw.left || 0} ${iconDataRaw.top || 0} ${iconDataRaw.width} ${iconDataRaw.height}`
131
+ };
132
+ } catch (error) {
133
+ this.debug(`Error loading icon "${lowerName}" from ${prefix}: ${String(error)}`);
134
+ return null;
135
+ }
136
+ })();
137
+ this.lazyIconCache.set(cacheKey, loadPromise);
138
+ return loadPromise;
139
+ }
140
+ /**
141
+ * Lazy load icon data (original method - for kebab-case names)
60
142
  */ async loadIconDataLazy(prefix, name) {
61
143
  const cacheKey = `${prefix}:${name}`;
62
144
  if (this.lazyIconCache.has(cacheKey)) return await this.lazyIconCache.get(cacheKey);
@@ -35,7 +35,16 @@ import { walk } from "oxc-walker";
35
35
  aliasToPack.set(localAlias, importedName);
36
36
  collectionNames.set(localAlias, kebabName);
37
37
  debug(`${prefix}Mapped alias ${localAlias} -> ${importedName} (collection: ${kebabName})`);
38
- } else if (packs?.[importedName]) {
38
+ return;
39
+ }
40
+ const lowerName = importedName.toLowerCase().replace(/[^a-z0-9]/g, "");
41
+ for (const collection of availableCollections) if (collection.toLowerCase().replace(/[^a-z0-9]/g, "") === lowerName) {
42
+ aliasToPack.set(localAlias, importedName);
43
+ collectionNames.set(localAlias, collection);
44
+ debug(`${prefix}Mapped alias ${localAlias} -> ${importedName} (collection: ${collection})`);
45
+ return;
46
+ }
47
+ if (packs?.[importedName]) {
39
48
  aliasToPack.set(localAlias, importedName);
40
49
  debug(`${prefix}Mapped alias ${localAlias} -> ${importedName} (custom pack)`);
41
50
  }
@@ -28,11 +28,21 @@ import { dirname } from "node:path";
28
28
  return /^\d/.test(name) ? `Icon${name}` : name;
29
29
  }
30
30
  /**
31
+ * Convert camelCase/lowercase to kebab-case by inserting hyphens before word boundaries
32
+ * @param str - Input string (e.g., "arrowright" or "arrowRight")
33
+ * @returns kebab-case string (e.g., "arrow-right")
34
+ */ function lowerToKebab(str) {
35
+ return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
36
+ }
37
+ /**
31
38
  * Resolve icon names to possible variants (kebab-case and lowercase)
32
- * @param pascalName - Icon name in PascalCase
33
- * @returns Array of possible icon name variants
34
- */ function resolveIconNames(pascalName) {
35
- return [toKebabCase(pascalName), pascalName.toLowerCase()];
39
+ * Handles both PascalCase (ArrowRight) and lowercase (arrowright) inputs
40
+ * @param name - Icon name (PascalCase from old JSX, or lowercase from new JSX)
41
+ * @returns Array of possible icon name variants to try
42
+ */ function resolveIconNames(name) {
43
+ const lower = name.toLowerCase();
44
+ if (/[A-Z]/.test(name)) return [toKebabCase(name), lower];
45
+ return [lower, lowerToKebab(name)];
36
46
  }
37
47
  /**
38
48
  * Generate stable import variable name for an icon
@@ -63,6 +73,7 @@ import { dirname } from "node:path";
63
73
  }
64
74
  /**
65
75
  * Discover all available iconify collections from node_modules
76
+ * Generates lowercase collection names (e.g., "lucide" not "Lucide")
66
77
  * @returns Record of collection names to their configurations
67
78
  */ function discoverAllIconifyCollections() {
68
79
  try {
@@ -73,8 +84,8 @@ import { dirname } from "node:path";
73
84
  console.log(`[icons] Found ${files.length} .json files in iconify directory`);
74
85
  for (const file of files) {
75
86
  const prefix = file.replace(".json", "");
76
- const collectionName = toPascalCase(prefix);
77
- if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(collectionName)) {
87
+ const collectionName = prefix.toLowerCase().replace(/[^a-z0-9]/g, "");
88
+ if (!/^[a-z][a-z0-9]*$/.test(collectionName)) {
78
89
  console.log(`[icons] Skipping invalid collection name: ${collectionName} (from ${prefix})`);
79
90
  continue;
80
91
  }
@@ -1,4 +1,4 @@
1
- import { generateImportVar, sanitizeIconName, toKebabCase } from "../naming.qwik.mjs";
1
+ import { generateImportVar, sanitizeIconName } from "../naming.qwik.mjs";
2
2
 
3
3
  //#region utils/icons/transform/shared.ts
4
4
  /**
@@ -13,11 +13,11 @@ import { generateImportVar, sanitizeIconName, toKebabCase } from "../naming.qwik
13
13
  */ function generateIconImport(alias, iconName, packName, packs, collectionNames, ctx) {
14
14
  const packConfig = packs?.[packName] || { iconifyPrefix: packName.toLowerCase() };
15
15
  const prefix = packConfig.iconifyPrefix;
16
- const kebab = toKebabCase(sanitizeIconName(iconName, packName, packConfig.sanitizeIcon));
17
- const virtualId = `virtual:icons/${collectionNames.get(alias) || prefix}/${kebab}`;
16
+ const lowerName = sanitizeIconName(iconName, packName, packConfig.sanitizeIcon).replace(/-/g, "").toLowerCase();
17
+ const virtualId = `virtual:icons/${collectionNames.get(alias) || prefix}/${lowerName}`;
18
18
  let varName = ctx.virtualToVar.get(virtualId);
19
19
  if (!varName) {
20
- varName = generateImportVar(prefix, kebab, ctx.importVars);
20
+ varName = generateImportVar(prefix, lowerName, ctx.importVars);
21
21
  ctx.virtualToVar.set(virtualId, varName);
22
22
  ctx.usedImports.add(virtualId);
23
23
  }
@@ -15,9 +15,9 @@ import { transform } from "oxc-transform";
15
15
  const partString = `.${options?.part || "script"}.`;
16
16
  const scriptExtension = createRegExp(exactly(partString).and(oneOrMore(char)).at.lineEnd());
17
17
  const processMap = async (id, code) => {
18
- const basename$1 = id.split(sep).join("/").split("/").pop() || "";
19
- if (!scriptExtension.test(basename$1)) return false;
20
- const [name] = basename$1.split(partString);
18
+ const basename = id.split(sep).join("/").split("/").pop() || "";
19
+ if (!scriptExtension.test(basename)) return false;
20
+ const [name] = basename.split(partString);
21
21
  if (!name) return false;
22
22
  try {
23
23
  scriptsMap[name] = minifySync(id, (await transform(id, code, { typescript: { onlyRemoveTypeImports: false } })).code, {
@@ -1,223 +1,223 @@
1
1
  import type * as GeneratedTypes from "../virtual-qds-icons";
2
- export declare const Academicons: typeof GeneratedTypes.Academicons;
3
- export declare const AkarIcons: typeof GeneratedTypes.AkarIcons;
4
- export declare const AntDesign: typeof GeneratedTypes.AntDesign;
5
- export declare const Arcticons: typeof GeneratedTypes.Arcticons;
6
- export declare const Basil: typeof GeneratedTypes.Basil;
7
- export declare const Bi: typeof GeneratedTypes.Bi;
8
- export declare const BitcoinIcons: typeof GeneratedTypes.BitcoinIcons;
9
- export declare const Bpmn: typeof GeneratedTypes.Bpmn;
10
- export declare const Brandico: typeof GeneratedTypes.Brandico;
11
- export declare const Bubbles: typeof GeneratedTypes.Bubbles;
12
- export declare const Bx: typeof GeneratedTypes.Bx;
13
- export declare const Bxl: typeof GeneratedTypes.Bxl;
14
- export declare const Bxs: typeof GeneratedTypes.Bxs;
15
- export declare const Bytesize: typeof GeneratedTypes.Bytesize;
16
- export declare const Carbon: typeof GeneratedTypes.Carbon;
17
- export declare const Catppuccin: typeof GeneratedTypes.Catppuccin;
18
- export declare const Cbi: typeof GeneratedTypes.Cbi;
19
- export declare const Charm: typeof GeneratedTypes.Charm;
20
- export declare const Ci: typeof GeneratedTypes.Ci;
21
- export declare const Cib: typeof GeneratedTypes.Cib;
22
- export declare const Cif: typeof GeneratedTypes.Cif;
23
- export declare const Cil: typeof GeneratedTypes.Cil;
24
- export declare const CircleFlags: typeof GeneratedTypes.CircleFlags;
25
- export declare const Circum: typeof GeneratedTypes.Circum;
26
- export declare const Clarity: typeof GeneratedTypes.Clarity;
27
- export declare const Codex: typeof GeneratedTypes.Codex;
28
- export declare const Codicon: typeof GeneratedTypes.Codicon;
29
- export declare const Covid: typeof GeneratedTypes.Covid;
30
- export declare const Cryptocurrency: typeof GeneratedTypes.Cryptocurrency;
31
- export declare const CryptocurrencyColor: typeof GeneratedTypes.CryptocurrencyColor;
32
- export declare const Cuida: typeof GeneratedTypes.Cuida;
33
- export declare const Dashicons: typeof GeneratedTypes.Dashicons;
34
- export declare const Devicon: typeof GeneratedTypes.Devicon;
35
- export declare const DeviconLine: typeof GeneratedTypes.DeviconLine;
36
- export declare const DeviconOriginal: typeof GeneratedTypes.DeviconOriginal;
37
- export declare const DeviconPlain: typeof GeneratedTypes.DeviconPlain;
38
- export declare const DinkieIcons: typeof GeneratedTypes.DinkieIcons;
39
- export declare const DuoIcons: typeof GeneratedTypes.DuoIcons;
40
- export declare const Ei: typeof GeneratedTypes.Ei;
41
- export declare const El: typeof GeneratedTypes.El;
42
- export declare const Emojione: typeof GeneratedTypes.Emojione;
43
- export declare const EmojioneMonotone: typeof GeneratedTypes.EmojioneMonotone;
44
- export declare const EmojioneV1: typeof GeneratedTypes.EmojioneV1;
45
- export declare const Entypo: typeof GeneratedTypes.Entypo;
46
- export declare const EntypoSocial: typeof GeneratedTypes.EntypoSocial;
47
- export declare const EosIcons: typeof GeneratedTypes.EosIcons;
48
- export declare const Ep: typeof GeneratedTypes.Ep;
49
- export declare const Et: typeof GeneratedTypes.Et;
50
- export declare const Eva: typeof GeneratedTypes.Eva;
51
- export declare const F7: typeof GeneratedTypes.F7;
52
- export declare const Fa: typeof GeneratedTypes.Fa;
53
- export declare const Fa6Brands: typeof GeneratedTypes.Fa6Brands;
54
- export declare const Fa6Regular: typeof GeneratedTypes.Fa6Regular;
55
- export declare const Fa6Solid: typeof GeneratedTypes.Fa6Solid;
56
- export declare const Fa7Brands: typeof GeneratedTypes.Fa7Brands;
57
- export declare const Fa7Regular: typeof GeneratedTypes.Fa7Regular;
58
- export declare const Fa7Solid: typeof GeneratedTypes.Fa7Solid;
59
- export declare const FaBrands: typeof GeneratedTypes.FaBrands;
60
- export declare const FaRegular: typeof GeneratedTypes.FaRegular;
61
- export declare const FaSolid: typeof GeneratedTypes.FaSolid;
62
- export declare const Fad: typeof GeneratedTypes.Fad;
63
- export declare const Famicons: typeof GeneratedTypes.Famicons;
64
- export declare const Fe: typeof GeneratedTypes.Fe;
65
- export declare const Feather: typeof GeneratedTypes.Feather;
66
- export declare const FileIcons: typeof GeneratedTypes.FileIcons;
67
- export declare const Flag: typeof GeneratedTypes.Flag;
68
- export declare const Flagpack: typeof GeneratedTypes.Flagpack;
69
- export declare const FlatColorIcons: typeof GeneratedTypes.FlatColorIcons;
70
- export declare const FlatUi: typeof GeneratedTypes.FlatUi;
71
- export declare const Flowbite: typeof GeneratedTypes.Flowbite;
72
- export declare const Fluent: typeof GeneratedTypes.Fluent;
73
- export declare const FluentColor: typeof GeneratedTypes.FluentColor;
74
- export declare const FluentEmoji: typeof GeneratedTypes.FluentEmoji;
75
- export declare const FluentEmojiFlat: typeof GeneratedTypes.FluentEmojiFlat;
76
- export declare const FluentEmojiHighContrast: typeof GeneratedTypes.FluentEmojiHighContrast;
77
- export declare const FluentMdl2: typeof GeneratedTypes.FluentMdl2;
78
- export declare const Fontelico: typeof GeneratedTypes.Fontelico;
79
- export declare const Fontisto: typeof GeneratedTypes.Fontisto;
80
- export declare const Formkit: typeof GeneratedTypes.Formkit;
81
- export declare const Foundation: typeof GeneratedTypes.Foundation;
82
- export declare const Fxemoji: typeof GeneratedTypes.Fxemoji;
83
- export declare const Gala: typeof GeneratedTypes.Gala;
84
- export declare const GameIcons: typeof GeneratedTypes.GameIcons;
85
- export declare const Garden: typeof GeneratedTypes.Garden;
86
- export declare const Geo: typeof GeneratedTypes.Geo;
87
- export declare const Gg: typeof GeneratedTypes.Gg;
88
- export declare const Gis: typeof GeneratedTypes.Gis;
89
- export declare const GravityUi: typeof GeneratedTypes.GravityUi;
90
- export declare const Gridicons: typeof GeneratedTypes.Gridicons;
91
- export declare const GrommetIcons: typeof GeneratedTypes.GrommetIcons;
92
- export declare const Guidance: typeof GeneratedTypes.Guidance;
93
- export declare const Healthicons: typeof GeneratedTypes.Healthicons;
94
- export declare const Heroicons: typeof GeneratedTypes.Heroicons;
95
- export declare const HeroiconsOutline: typeof GeneratedTypes.HeroiconsOutline;
96
- export declare const HeroiconsSolid: typeof GeneratedTypes.HeroiconsSolid;
97
- export declare const Hugeicons: typeof GeneratedTypes.Hugeicons;
98
- export declare const Humbleicons: typeof GeneratedTypes.Humbleicons;
99
- export declare const Ic: typeof GeneratedTypes.Ic;
100
- export declare const IcomoonFree: typeof GeneratedTypes.IcomoonFree;
101
- export declare const IconPark: typeof GeneratedTypes.IconPark;
102
- export declare const IconParkOutline: typeof GeneratedTypes.IconParkOutline;
103
- export declare const IconParkSolid: typeof GeneratedTypes.IconParkSolid;
104
- export declare const IconParkTwotone: typeof GeneratedTypes.IconParkTwotone;
105
- export declare const Iconamoon: typeof GeneratedTypes.Iconamoon;
106
- export declare const Iconoir: typeof GeneratedTypes.Iconoir;
107
- export declare const Icons8: typeof GeneratedTypes.Icons8;
108
- export declare const Il: typeof GeneratedTypes.Il;
109
- export declare const Ion: typeof GeneratedTypes.Ion;
110
- export declare const Iwwa: typeof GeneratedTypes.Iwwa;
111
- export declare const Ix: typeof GeneratedTypes.Ix;
112
- export declare const Jam: typeof GeneratedTypes.Jam;
113
- export declare const La: typeof GeneratedTypes.La;
114
- export declare const LetsIcons: typeof GeneratedTypes.LetsIcons;
115
- export declare const LineMd: typeof GeneratedTypes.LineMd;
116
- export declare const Lineicons: typeof GeneratedTypes.Lineicons;
117
- export declare const Logos: typeof GeneratedTypes.Logos;
118
- export declare const Ls: typeof GeneratedTypes.Ls;
119
- export declare const Lsicon: typeof GeneratedTypes.Lsicon;
120
- export declare const Lucide: typeof GeneratedTypes.Lucide;
121
- export declare const LucideLab: typeof GeneratedTypes.LucideLab;
122
- export declare const Mage: typeof GeneratedTypes.Mage;
123
- export declare const Majesticons: typeof GeneratedTypes.Majesticons;
124
- export declare const Maki: typeof GeneratedTypes.Maki;
125
- export declare const Map: typeof GeneratedTypes.Map;
126
- export declare const Marketeq: typeof GeneratedTypes.Marketeq;
127
- export declare const MaterialIconTheme: typeof GeneratedTypes.MaterialIconTheme;
128
- export declare const MaterialSymbols: typeof GeneratedTypes.MaterialSymbols;
129
- export declare const MaterialSymbolsLight: typeof GeneratedTypes.MaterialSymbolsLight;
130
- export declare const Mdi: typeof GeneratedTypes.Mdi;
131
- export declare const MdiLight: typeof GeneratedTypes.MdiLight;
132
- export declare const MedicalIcon: typeof GeneratedTypes.MedicalIcon;
133
- export declare const Memory: typeof GeneratedTypes.Memory;
134
- export declare const Meteocons: typeof GeneratedTypes.Meteocons;
135
- export declare const MeteorIcons: typeof GeneratedTypes.MeteorIcons;
136
- export declare const Mi: typeof GeneratedTypes.Mi;
137
- export declare const Mingcute: typeof GeneratedTypes.Mingcute;
138
- export declare const MonoIcons: typeof GeneratedTypes.MonoIcons;
139
- export declare const Mynaui: typeof GeneratedTypes.Mynaui;
140
- export declare const Nimbus: typeof GeneratedTypes.Nimbus;
141
- export declare const Nonicons: typeof GeneratedTypes.Nonicons;
142
- export declare const Noto: typeof GeneratedTypes.Noto;
143
- export declare const NotoV1: typeof GeneratedTypes.NotoV1;
144
- export declare const Nrk: typeof GeneratedTypes.Nrk;
145
- export declare const Octicon: typeof GeneratedTypes.Octicon;
146
- export declare const Oi: typeof GeneratedTypes.Oi;
147
- export declare const Ooui: typeof GeneratedTypes.Ooui;
148
- export declare const Openmoji: typeof GeneratedTypes.Openmoji;
149
- export declare const Oui: typeof GeneratedTypes.Oui;
150
- export declare const Pajamas: typeof GeneratedTypes.Pajamas;
151
- export declare const Pepicons: typeof GeneratedTypes.Pepicons;
152
- export declare const PepiconsPencil: typeof GeneratedTypes.PepiconsPencil;
153
- export declare const PepiconsPop: typeof GeneratedTypes.PepiconsPop;
154
- export declare const PepiconsPrint: typeof GeneratedTypes.PepiconsPrint;
155
- export declare const Ph: typeof GeneratedTypes.Ph;
156
- export declare const Picon: typeof GeneratedTypes.Picon;
157
- export declare const Pixel: typeof GeneratedTypes.Pixel;
158
- export declare const Pixelarticons: typeof GeneratedTypes.Pixelarticons;
159
- export declare const Prime: typeof GeneratedTypes.Prime;
160
- export declare const Proicons: typeof GeneratedTypes.Proicons;
161
- export declare const Ps: typeof GeneratedTypes.Ps;
162
- export declare const QlementineIcons: typeof GeneratedTypes.QlementineIcons;
163
- export declare const Quill: typeof GeneratedTypes.Quill;
164
- export declare const RadixIcons: typeof GeneratedTypes.RadixIcons;
165
- export declare const Raphael: typeof GeneratedTypes.Raphael;
166
- export declare const Ri: typeof GeneratedTypes.Ri;
167
- export declare const RivetIcons: typeof GeneratedTypes.RivetIcons;
168
- export declare const Si: typeof GeneratedTypes.Si;
169
- export declare const SiGlyph: typeof GeneratedTypes.SiGlyph;
170
- export declare const Sidekickicons: typeof GeneratedTypes.Sidekickicons;
171
- export declare const SimpleIcons: typeof GeneratedTypes.SimpleIcons;
172
- export declare const SimpleLineIcons: typeof GeneratedTypes.SimpleLineIcons;
173
- export declare const SkillIcons: typeof GeneratedTypes.SkillIcons;
174
- export declare const Solar: typeof GeneratedTypes.Solar;
175
- export declare const Stash: typeof GeneratedTypes.Stash;
176
- export declare const Streamline: typeof GeneratedTypes.Streamline;
177
- export declare const StreamlineBlock: typeof GeneratedTypes.StreamlineBlock;
178
- export declare const StreamlineColor: typeof GeneratedTypes.StreamlineColor;
179
- export declare const StreamlineCyber: typeof GeneratedTypes.StreamlineCyber;
180
- export declare const StreamlineCyberColor: typeof GeneratedTypes.StreamlineCyberColor;
181
- export declare const StreamlineEmojis: typeof GeneratedTypes.StreamlineEmojis;
182
- export declare const StreamlineFlex: typeof GeneratedTypes.StreamlineFlex;
183
- export declare const StreamlineFlexColor: typeof GeneratedTypes.StreamlineFlexColor;
184
- export declare const StreamlineFreehand: typeof GeneratedTypes.StreamlineFreehand;
185
- export declare const StreamlineFreehandColor: typeof GeneratedTypes.StreamlineFreehandColor;
186
- export declare const StreamlineGuidance: typeof GeneratedTypes.StreamlineGuidance;
187
- export declare const StreamlineKameleonColor: typeof GeneratedTypes.StreamlineKameleonColor;
188
- export declare const StreamlineLogos: typeof GeneratedTypes.StreamlineLogos;
189
- export declare const StreamlinePixel: typeof GeneratedTypes.StreamlinePixel;
190
- export declare const StreamlinePlump: typeof GeneratedTypes.StreamlinePlump;
191
- export declare const StreamlinePlumpColor: typeof GeneratedTypes.StreamlinePlumpColor;
192
- export declare const StreamlineSharp: typeof GeneratedTypes.StreamlineSharp;
193
- export declare const StreamlineSharpColor: typeof GeneratedTypes.StreamlineSharpColor;
194
- export declare const StreamlineStickiesColor: typeof GeneratedTypes.StreamlineStickiesColor;
195
- export declare const StreamlineUltimate: typeof GeneratedTypes.StreamlineUltimate;
196
- export declare const StreamlineUltimateColor: typeof GeneratedTypes.StreamlineUltimateColor;
197
- export declare const Subway: typeof GeneratedTypes.Subway;
198
- export declare const SvgSpinners: typeof GeneratedTypes.SvgSpinners;
199
- export declare const SystemUicons: typeof GeneratedTypes.SystemUicons;
200
- export declare const Tabler: typeof GeneratedTypes.Tabler;
201
- export declare const Tdesign: typeof GeneratedTypes.Tdesign;
202
- export declare const Teenyicons: typeof GeneratedTypes.Teenyicons;
203
- export declare const Token: typeof GeneratedTypes.Token;
204
- export declare const TokenBranded: typeof GeneratedTypes.TokenBranded;
205
- export declare const Topcoat: typeof GeneratedTypes.Topcoat;
206
- export declare const Twemoji: typeof GeneratedTypes.Twemoji;
207
- export declare const Typcn: typeof GeneratedTypes.Typcn;
208
- export declare const Uil: typeof GeneratedTypes.Uil;
209
- export declare const Uim: typeof GeneratedTypes.Uim;
210
- export declare const Uis: typeof GeneratedTypes.Uis;
211
- export declare const Uit: typeof GeneratedTypes.Uit;
212
- export declare const Uiw: typeof GeneratedTypes.Uiw;
213
- export declare const Unjs: typeof GeneratedTypes.Unjs;
214
- export declare const Vaadin: typeof GeneratedTypes.Vaadin;
215
- export declare const Vs: typeof GeneratedTypes.Vs;
216
- export declare const VscodeIcons: typeof GeneratedTypes.VscodeIcons;
217
- export declare const Websymbol: typeof GeneratedTypes.Websymbol;
218
- export declare const Weui: typeof GeneratedTypes.Weui;
219
- export declare const Whh: typeof GeneratedTypes.Whh;
220
- export declare const Wi: typeof GeneratedTypes.Wi;
221
- export declare const Wpf: typeof GeneratedTypes.Wpf;
222
- export declare const Zmdi: typeof GeneratedTypes.Zmdi;
223
- export declare const Zondicons: typeof GeneratedTypes.Zondicons;
2
+ export declare const academicons: typeof GeneratedTypes.academicons;
3
+ export declare const akaricons: typeof GeneratedTypes.akaricons;
4
+ export declare const antdesign: typeof GeneratedTypes.antdesign;
5
+ export declare const arcticons: typeof GeneratedTypes.arcticons;
6
+ export declare const basil: typeof GeneratedTypes.basil;
7
+ export declare const bi: typeof GeneratedTypes.bi;
8
+ export declare const bitcoinicons: typeof GeneratedTypes.bitcoinicons;
9
+ export declare const bpmn: typeof GeneratedTypes.bpmn;
10
+ export declare const brandico: typeof GeneratedTypes.brandico;
11
+ export declare const bubbles: typeof GeneratedTypes.bubbles;
12
+ export declare const bx: typeof GeneratedTypes.bx;
13
+ export declare const bxl: typeof GeneratedTypes.bxl;
14
+ export declare const bxs: typeof GeneratedTypes.bxs;
15
+ export declare const bytesize: typeof GeneratedTypes.bytesize;
16
+ export declare const carbon: typeof GeneratedTypes.carbon;
17
+ export declare const catppuccin: typeof GeneratedTypes.catppuccin;
18
+ export declare const cbi: typeof GeneratedTypes.cbi;
19
+ export declare const charm: typeof GeneratedTypes.charm;
20
+ export declare const ci: typeof GeneratedTypes.ci;
21
+ export declare const cib: typeof GeneratedTypes.cib;
22
+ export declare const cif: typeof GeneratedTypes.cif;
23
+ export declare const cil: typeof GeneratedTypes.cil;
24
+ export declare const circleflags: typeof GeneratedTypes.circleflags;
25
+ export declare const circum: typeof GeneratedTypes.circum;
26
+ export declare const clarity: typeof GeneratedTypes.clarity;
27
+ export declare const codex: typeof GeneratedTypes.codex;
28
+ export declare const codicon: typeof GeneratedTypes.codicon;
29
+ export declare const covid: typeof GeneratedTypes.covid;
30
+ export declare const cryptocurrency: typeof GeneratedTypes.cryptocurrency;
31
+ export declare const cryptocurrencycolor: typeof GeneratedTypes.cryptocurrencycolor;
32
+ export declare const cuida: typeof GeneratedTypes.cuida;
33
+ export declare const dashicons: typeof GeneratedTypes.dashicons;
34
+ export declare const devicon: typeof GeneratedTypes.devicon;
35
+ export declare const deviconline: typeof GeneratedTypes.deviconline;
36
+ export declare const deviconoriginal: typeof GeneratedTypes.deviconoriginal;
37
+ export declare const deviconplain: typeof GeneratedTypes.deviconplain;
38
+ export declare const dinkieicons: typeof GeneratedTypes.dinkieicons;
39
+ export declare const duoicons: typeof GeneratedTypes.duoicons;
40
+ export declare const ei: typeof GeneratedTypes.ei;
41
+ export declare const el: typeof GeneratedTypes.el;
42
+ export declare const emojione: typeof GeneratedTypes.emojione;
43
+ export declare const emojionemonotone: typeof GeneratedTypes.emojionemonotone;
44
+ export declare const emojionev1: typeof GeneratedTypes.emojionev1;
45
+ export declare const entypo: typeof GeneratedTypes.entypo;
46
+ export declare const entyposocial: typeof GeneratedTypes.entyposocial;
47
+ export declare const eosicons: typeof GeneratedTypes.eosicons;
48
+ export declare const ep: typeof GeneratedTypes.ep;
49
+ export declare const et: typeof GeneratedTypes.et;
50
+ export declare const eva: typeof GeneratedTypes.eva;
51
+ export declare const f7: typeof GeneratedTypes.f7;
52
+ export declare const fa: typeof GeneratedTypes.fa;
53
+ export declare const fa6brands: typeof GeneratedTypes.fa6brands;
54
+ export declare const fa6regular: typeof GeneratedTypes.fa6regular;
55
+ export declare const fa6solid: typeof GeneratedTypes.fa6solid;
56
+ export declare const fa7brands: typeof GeneratedTypes.fa7brands;
57
+ export declare const fa7regular: typeof GeneratedTypes.fa7regular;
58
+ export declare const fa7solid: typeof GeneratedTypes.fa7solid;
59
+ export declare const fabrands: typeof GeneratedTypes.fabrands;
60
+ export declare const fad: typeof GeneratedTypes.fad;
61
+ export declare const famicons: typeof GeneratedTypes.famicons;
62
+ export declare const faregular: typeof GeneratedTypes.faregular;
63
+ export declare const fasolid: typeof GeneratedTypes.fasolid;
64
+ export declare const fe: typeof GeneratedTypes.fe;
65
+ export declare const feather: typeof GeneratedTypes.feather;
66
+ export declare const fileicons: typeof GeneratedTypes.fileicons;
67
+ export declare const flag: typeof GeneratedTypes.flag;
68
+ export declare const flagpack: typeof GeneratedTypes.flagpack;
69
+ export declare const flatcoloricons: typeof GeneratedTypes.flatcoloricons;
70
+ export declare const flatui: typeof GeneratedTypes.flatui;
71
+ export declare const flowbite: typeof GeneratedTypes.flowbite;
72
+ export declare const fluent: typeof GeneratedTypes.fluent;
73
+ export declare const fluentcolor: typeof GeneratedTypes.fluentcolor;
74
+ export declare const fluentemoji: typeof GeneratedTypes.fluentemoji;
75
+ export declare const fluentemojiflat: typeof GeneratedTypes.fluentemojiflat;
76
+ export declare const fluentemojihighcontrast: typeof GeneratedTypes.fluentemojihighcontrast;
77
+ export declare const fluentmdl2: typeof GeneratedTypes.fluentmdl2;
78
+ export declare const fontelico: typeof GeneratedTypes.fontelico;
79
+ export declare const fontisto: typeof GeneratedTypes.fontisto;
80
+ export declare const formkit: typeof GeneratedTypes.formkit;
81
+ export declare const foundation: typeof GeneratedTypes.foundation;
82
+ export declare const fxemoji: typeof GeneratedTypes.fxemoji;
83
+ export declare const gala: typeof GeneratedTypes.gala;
84
+ export declare const gameicons: typeof GeneratedTypes.gameicons;
85
+ export declare const garden: typeof GeneratedTypes.garden;
86
+ export declare const geo: typeof GeneratedTypes.geo;
87
+ export declare const gg: typeof GeneratedTypes.gg;
88
+ export declare const gis: typeof GeneratedTypes.gis;
89
+ export declare const gravityui: typeof GeneratedTypes.gravityui;
90
+ export declare const gridicons: typeof GeneratedTypes.gridicons;
91
+ export declare const grommeticons: typeof GeneratedTypes.grommeticons;
92
+ export declare const guidance: typeof GeneratedTypes.guidance;
93
+ export declare const healthicons: typeof GeneratedTypes.healthicons;
94
+ export declare const heroicons: typeof GeneratedTypes.heroicons;
95
+ export declare const heroiconsoutline: typeof GeneratedTypes.heroiconsoutline;
96
+ export declare const heroiconssolid: typeof GeneratedTypes.heroiconssolid;
97
+ export declare const hugeicons: typeof GeneratedTypes.hugeicons;
98
+ export declare const humbleicons: typeof GeneratedTypes.humbleicons;
99
+ export declare const ic: typeof GeneratedTypes.ic;
100
+ export declare const icomoonfree: typeof GeneratedTypes.icomoonfree;
101
+ export declare const iconamoon: typeof GeneratedTypes.iconamoon;
102
+ export declare const iconoir: typeof GeneratedTypes.iconoir;
103
+ export declare const iconpark: typeof GeneratedTypes.iconpark;
104
+ export declare const iconparkoutline: typeof GeneratedTypes.iconparkoutline;
105
+ export declare const iconparksolid: typeof GeneratedTypes.iconparksolid;
106
+ export declare const iconparktwotone: typeof GeneratedTypes.iconparktwotone;
107
+ export declare const icons8: typeof GeneratedTypes.icons8;
108
+ export declare const il: typeof GeneratedTypes.il;
109
+ export declare const ion: typeof GeneratedTypes.ion;
110
+ export declare const iwwa: typeof GeneratedTypes.iwwa;
111
+ export declare const ix: typeof GeneratedTypes.ix;
112
+ export declare const jam: typeof GeneratedTypes.jam;
113
+ export declare const la: typeof GeneratedTypes.la;
114
+ export declare const letsicons: typeof GeneratedTypes.letsicons;
115
+ export declare const lineicons: typeof GeneratedTypes.lineicons;
116
+ export declare const linemd: typeof GeneratedTypes.linemd;
117
+ export declare const logos: typeof GeneratedTypes.logos;
118
+ export declare const ls: typeof GeneratedTypes.ls;
119
+ export declare const lsicon: typeof GeneratedTypes.lsicon;
120
+ export declare const lucide: typeof GeneratedTypes.lucide;
121
+ export declare const lucidelab: typeof GeneratedTypes.lucidelab;
122
+ export declare const mage: typeof GeneratedTypes.mage;
123
+ export declare const majesticons: typeof GeneratedTypes.majesticons;
124
+ export declare const maki: typeof GeneratedTypes.maki;
125
+ export declare const map: typeof GeneratedTypes.map;
126
+ export declare const marketeq: typeof GeneratedTypes.marketeq;
127
+ export declare const materialicontheme: typeof GeneratedTypes.materialicontheme;
128
+ export declare const materialsymbols: typeof GeneratedTypes.materialsymbols;
129
+ export declare const materialsymbolslight: typeof GeneratedTypes.materialsymbolslight;
130
+ export declare const mdi: typeof GeneratedTypes.mdi;
131
+ export declare const mdilight: typeof GeneratedTypes.mdilight;
132
+ export declare const medicalicon: typeof GeneratedTypes.medicalicon;
133
+ export declare const memory: typeof GeneratedTypes.memory;
134
+ export declare const meteocons: typeof GeneratedTypes.meteocons;
135
+ export declare const meteoricons: typeof GeneratedTypes.meteoricons;
136
+ export declare const mi: typeof GeneratedTypes.mi;
137
+ export declare const mingcute: typeof GeneratedTypes.mingcute;
138
+ export declare const monoicons: typeof GeneratedTypes.monoicons;
139
+ export declare const mynaui: typeof GeneratedTypes.mynaui;
140
+ export declare const nimbus: typeof GeneratedTypes.nimbus;
141
+ export declare const nonicons: typeof GeneratedTypes.nonicons;
142
+ export declare const noto: typeof GeneratedTypes.noto;
143
+ export declare const notov1: typeof GeneratedTypes.notov1;
144
+ export declare const nrk: typeof GeneratedTypes.nrk;
145
+ export declare const octicon: typeof GeneratedTypes.octicon;
146
+ export declare const oi: typeof GeneratedTypes.oi;
147
+ export declare const ooui: typeof GeneratedTypes.ooui;
148
+ export declare const openmoji: typeof GeneratedTypes.openmoji;
149
+ export declare const oui: typeof GeneratedTypes.oui;
150
+ export declare const pajamas: typeof GeneratedTypes.pajamas;
151
+ export declare const pepicons: typeof GeneratedTypes.pepicons;
152
+ export declare const pepiconspencil: typeof GeneratedTypes.pepiconspencil;
153
+ export declare const pepiconspop: typeof GeneratedTypes.pepiconspop;
154
+ export declare const pepiconsprint: typeof GeneratedTypes.pepiconsprint;
155
+ export declare const ph: typeof GeneratedTypes.ph;
156
+ export declare const picon: typeof GeneratedTypes.picon;
157
+ export declare const pixel: typeof GeneratedTypes.pixel;
158
+ export declare const pixelarticons: typeof GeneratedTypes.pixelarticons;
159
+ export declare const prime: typeof GeneratedTypes.prime;
160
+ export declare const proicons: typeof GeneratedTypes.proicons;
161
+ export declare const ps: typeof GeneratedTypes.ps;
162
+ export declare const qlementineicons: typeof GeneratedTypes.qlementineicons;
163
+ export declare const quill: typeof GeneratedTypes.quill;
164
+ export declare const radixicons: typeof GeneratedTypes.radixicons;
165
+ export declare const raphael: typeof GeneratedTypes.raphael;
166
+ export declare const ri: typeof GeneratedTypes.ri;
167
+ export declare const riveticons: typeof GeneratedTypes.riveticons;
168
+ export declare const si: typeof GeneratedTypes.si;
169
+ export declare const sidekickicons: typeof GeneratedTypes.sidekickicons;
170
+ export declare const siglyph: typeof GeneratedTypes.siglyph;
171
+ export declare const simpleicons: typeof GeneratedTypes.simpleicons;
172
+ export declare const simplelineicons: typeof GeneratedTypes.simplelineicons;
173
+ export declare const skillicons: typeof GeneratedTypes.skillicons;
174
+ export declare const solar: typeof GeneratedTypes.solar;
175
+ export declare const stash: typeof GeneratedTypes.stash;
176
+ export declare const streamline: typeof GeneratedTypes.streamline;
177
+ export declare const streamlineblock: typeof GeneratedTypes.streamlineblock;
178
+ export declare const streamlinecolor: typeof GeneratedTypes.streamlinecolor;
179
+ export declare const streamlinecyber: typeof GeneratedTypes.streamlinecyber;
180
+ export declare const streamlinecybercolor: typeof GeneratedTypes.streamlinecybercolor;
181
+ export declare const streamlineemojis: typeof GeneratedTypes.streamlineemojis;
182
+ export declare const streamlineflex: typeof GeneratedTypes.streamlineflex;
183
+ export declare const streamlineflexcolor: typeof GeneratedTypes.streamlineflexcolor;
184
+ export declare const streamlinefreehand: typeof GeneratedTypes.streamlinefreehand;
185
+ export declare const streamlinefreehandcolor: typeof GeneratedTypes.streamlinefreehandcolor;
186
+ export declare const streamlineguidance: typeof GeneratedTypes.streamlineguidance;
187
+ export declare const streamlinekameleoncolor: typeof GeneratedTypes.streamlinekameleoncolor;
188
+ export declare const streamlinelogos: typeof GeneratedTypes.streamlinelogos;
189
+ export declare const streamlinepixel: typeof GeneratedTypes.streamlinepixel;
190
+ export declare const streamlineplump: typeof GeneratedTypes.streamlineplump;
191
+ export declare const streamlineplumpcolor: typeof GeneratedTypes.streamlineplumpcolor;
192
+ export declare const streamlinesharp: typeof GeneratedTypes.streamlinesharp;
193
+ export declare const streamlinesharpcolor: typeof GeneratedTypes.streamlinesharpcolor;
194
+ export declare const streamlinestickiescolor: typeof GeneratedTypes.streamlinestickiescolor;
195
+ export declare const streamlineultimate: typeof GeneratedTypes.streamlineultimate;
196
+ export declare const streamlineultimatecolor: typeof GeneratedTypes.streamlineultimatecolor;
197
+ export declare const subway: typeof GeneratedTypes.subway;
198
+ export declare const svgspinners: typeof GeneratedTypes.svgspinners;
199
+ export declare const systemuicons: typeof GeneratedTypes.systemuicons;
200
+ export declare const tabler: typeof GeneratedTypes.tabler;
201
+ export declare const tdesign: typeof GeneratedTypes.tdesign;
202
+ export declare const teenyicons: typeof GeneratedTypes.teenyicons;
203
+ export declare const token: typeof GeneratedTypes.token;
204
+ export declare const tokenbranded: typeof GeneratedTypes.tokenbranded;
205
+ export declare const topcoat: typeof GeneratedTypes.topcoat;
206
+ export declare const twemoji: typeof GeneratedTypes.twemoji;
207
+ export declare const typcn: typeof GeneratedTypes.typcn;
208
+ export declare const uil: typeof GeneratedTypes.uil;
209
+ export declare const uim: typeof GeneratedTypes.uim;
210
+ export declare const uis: typeof GeneratedTypes.uis;
211
+ export declare const uit: typeof GeneratedTypes.uit;
212
+ export declare const uiw: typeof GeneratedTypes.uiw;
213
+ export declare const unjs: typeof GeneratedTypes.unjs;
214
+ export declare const vaadin: typeof GeneratedTypes.vaadin;
215
+ export declare const vs: typeof GeneratedTypes.vs;
216
+ export declare const vscodeicons: typeof GeneratedTypes.vscodeicons;
217
+ export declare const websymbol: typeof GeneratedTypes.websymbol;
218
+ export declare const weui: typeof GeneratedTypes.weui;
219
+ export declare const whh: typeof GeneratedTypes.whh;
220
+ export declare const wi: typeof GeneratedTypes.wi;
221
+ export declare const wpf: typeof GeneratedTypes.wpf;
222
+ export declare const zmdi: typeof GeneratedTypes.zmdi;
223
+ export declare const zondicons: typeof GeneratedTypes.zondicons;
@@ -1,11 +1,11 @@
1
1
  #!/usr/bin/env node
2
2
  export { sanitizeIconName, generateIconTypes, generateRuntimeProxies };
3
- import { discoverAllIconifyCollections, toPascalCase } from "../../utils/icons/naming.ts";
4
- export { discoverAllIconifyCollections, toPascalCase };
3
+ import { discoverAllIconifyCollections } from "../../utils/icons/naming.ts";
4
+ export { discoverAllIconifyCollections };
5
5
  /**
6
- * Sanitize icon name (handle leading digits, etc.)
6
+ * Sanitize icon name for use as object property
7
7
  * @param name - Icon name in kebab-case
8
- * @returns Sanitized PascalCase name
8
+ * @returns Sanitized lowercase name suitable for bracket notation
9
9
  */
10
10
  declare function sanitizeIconName(name: string): string;
11
11
  /**
@@ -14,6 +14,7 @@ export declare class CollectionLoader {
14
14
  private lazyIconCache;
15
15
  private availableCollections;
16
16
  private require;
17
+ private lowerToKebabMaps;
17
18
  constructor(debug: (message: string, ...data: unknown[]) => void);
18
19
  /**
19
20
  * Discover all available collections
@@ -27,12 +28,24 @@ export declare class CollectionLoader {
27
28
  * Check if a collection is available
28
29
  */
29
30
  hasCollection(name: string): boolean;
31
+ /**
32
+ * Find @iconify/json package path
33
+ */
34
+ private findIconifyJsonPath;
30
35
  /**
31
36
  * Lazy load a collection
32
37
  */
33
38
  loadCollectionLazy(prefix: string): Promise<IconifyJSON>;
34
39
  /**
35
- * Lazy load icon data
40
+ * Build lowercase-to-kebab mapping for a collection
41
+ */
42
+ private buildLowerToKebabMap;
43
+ /**
44
+ * Lazy load icon data by lowercase name (no dashes)
45
+ */
46
+ loadIconDataByLowercase(prefix: string, lowerName: string): Promise<IconData | null>;
47
+ /**
48
+ * Lazy load icon data (original method - for kebab-case names)
36
49
  */
37
50
  loadIconDataLazy(prefix: string, name: string): Promise<IconData | null>;
38
51
  }
@@ -20,10 +20,11 @@ export declare function toPascalCase(str: string): string;
20
20
  export declare function sanitizeIconName(name: string, packName: string, customSanitizer?: (pascal: string) => string): string;
21
21
  /**
22
22
  * Resolve icon names to possible variants (kebab-case and lowercase)
23
- * @param pascalName - Icon name in PascalCase
24
- * @returns Array of possible icon name variants
23
+ * Handles both PascalCase (ArrowRight) and lowercase (arrowright) inputs
24
+ * @param name - Icon name (PascalCase from old JSX, or lowercase from new JSX)
25
+ * @returns Array of possible icon name variants to try
25
26
  */
26
- export declare function resolveIconNames(pascalName: string): string[];
27
+ export declare function resolveIconNames(name: string): string[];
27
28
  /**
28
29
  * Generate stable import variable name for an icon
29
30
  * @param prefix - Iconify prefix
@@ -39,6 +40,7 @@ export declare function generateImportVar(prefix: string, name: string, existing
39
40
  export declare function getAvailableCollections(): string[];
40
41
  /**
41
42
  * Discover all available iconify collections from node_modules
43
+ * Generates lowercase collection names (e.g., "lucide" not "Lucide")
42
44
  * @returns Record of collection names to their configurations
43
45
  */
44
46
  export declare function discoverAllIconifyCollections(): Record<string, {
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,37 +1,41 @@
1
1
  {
2
2
  "name": "@qds.dev/tools",
3
- "version": "0.9.7",
3
+ "version": "0.11.0",
4
4
  "private": false,
5
5
  "description": "Tools and utilities for Qwik Design System",
6
- "type": "module",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/kunai-consulting/qwik-design-system"
9
+ },
7
10
  "files": [
8
11
  "lib",
9
12
  "lib-types"
10
13
  ],
14
+ "type": "module",
15
+ "sideEffects": false,
11
16
  "main": "./lib/src/index.qwik.mjs",
12
- "qwik": "./lib/src/index.qwik.mjs",
13
17
  "types": "./lib-types/tools/src/index.d.ts",
14
18
  "exports": {
15
19
  ".": {
16
- "import": "./lib/src/index.qwik.mjs",
17
- "types": "./lib-types/tools/src/index.d.ts"
20
+ "types": "./lib-types/tools/src/index.d.ts",
21
+ "import": "./lib/src/index.qwik.mjs"
18
22
  },
19
23
  "./package.json": "./package.json",
20
24
  "./vite": {
21
- "import": "./lib/vite/index.qwik.mjs",
22
- "types": "./lib-types/tools/vite/index.d.ts"
25
+ "types": "./lib-types/tools/vite/index.d.ts",
26
+ "import": "./lib/vite/index.qwik.mjs"
23
27
  },
24
28
  "./utils": {
25
- "import": "./lib/utils/index.qwik.mjs",
26
- "types": "./lib-types/tools/utils/index.d.ts"
29
+ "types": "./lib-types/tools/utils/index.d.ts",
30
+ "import": "./lib/utils/index.qwik.mjs"
27
31
  },
28
32
  "./rolldown": {
29
- "import": "./lib/rolldown/index.qwik.mjs",
30
- "types": "./lib-types/tools/rolldown/index.d.ts"
33
+ "types": "./lib-types/tools/rolldown/index.d.ts",
34
+ "import": "./lib/rolldown/index.qwik.mjs"
31
35
  },
32
36
  "./playground": {
33
- "import": "./lib/playground/index.qwik.mjs",
34
- "types": "./lib-types/tools/playground/index.d.ts"
37
+ "types": "./lib-types/tools/playground/index.d.ts",
38
+ "import": "./lib/playground/index.qwik.mjs"
35
39
  }
36
40
  },
37
41
  "scripts": {
@@ -40,28 +44,24 @@
40
44
  "build.types": "tsc --emitDeclarationOnly --outDir ./lib-types",
41
45
  "generate.icon.types": "node src/generate/icon-types.ts"
42
46
  },
43
- "devDependencies": {
44
- "@iconify/types": "^2",
45
- "magic-string": "^0.30.17",
46
- "rolldown": "1.0.0-beta.45",
47
- "typescript": "5.4.5",
48
- "vite": "^7.3.1"
49
- },
50
47
  "dependencies": {
51
48
  "@iconify/json": "^2.2.382",
52
49
  "@iconify/utils": "^3.0.1",
53
- "@oxc-project/types": "^0.102.0",
50
+ "@oxc-project/types": "^0.111.0",
54
51
  "magic-regexp": "^0.10.0",
55
- "oxc-minify": "^0.102.0",
56
- "oxc-parser": "^0.102.0",
57
- "oxc-transform": "^0.102.0",
52
+ "oxc-minify": "^0.111.0",
53
+ "oxc-parser": "^0.111.0",
54
+ "oxc-transform": "^0.111.0",
58
55
  "oxc-walker": "^0.5.2",
59
56
  "remark": "^15.0.1",
60
57
  "remark-mdx": "^3.1.1"
61
58
  },
62
- "sideEffects": false,
63
- "repository": {
64
- "type": "git",
65
- "url": "https://github.com/kunai-consulting/qwik-design-system"
66
- }
59
+ "devDependencies": {
60
+ "@iconify/types": "^2",
61
+ "magic-string": "^0.30.17",
62
+ "rolldown": "1.0.0-rc.4",
63
+ "typescript": "5.4.5",
64
+ "vite": "^7.3.1"
65
+ },
66
+ "qwik": "./lib/src/index.qwik.mjs"
67
67
  }