feat(utils): add case-insensitive option to filterVariables

src/utils/filterVariables.ts

@@ -1,10 +1,31 @@
 import type { FigmaVariable, ResolvedType } from 'types'
 
+/**
+ * Criteria for filtering Figma variables.
+ *
+ * @public
+ */
+export interface FilterVariablesCriteria {
+  /**
+   * Filter by resolved variable type (e.g., 'COLOR', 'FLOAT', 'STRING', 'BOOLEAN').
+   */
+  resolvedType?: ResolvedType
+  /**
+   * Substring to match against variable names.
+   */
+  name?: string
+  /**
+   * When true, name matching is case-insensitive.
+   * @defaultValue false
+   */
+  caseInsensitive?: boolean
+}
+
 /**
  * Utility function to filter Figma variables by type and/or substring name match.
  *
  * @remarks
- * Returns a new array of variables matching the provided criteria. Use for building type pickers, variable search, dashboard views, or bulk edit tools. Filtering is case-sensitive for `name`. Pass no criteria to return all variables unfiltered.
+ * Returns a new array of variables matching the provided criteria. Use for building type pickers, variable search, dashboard views, or bulk edit tools. By default, filtering is case-sensitive for `name`. Set `caseInsensitive: true` for case-insensitive matching. Pass no criteria to return all variables unfiltered.
  *
  * @param variables - The array of FigmaVariable objects to filter.
  * @param criteria - Object specifying filter fields. Provide a `resolvedType` (e.g., 'COLOR', 'FLOAT') and/or a `name` substring to match variable names.
@@ -22,19 +43,30 @@ import type { FigmaVariable, ResolvedType } from 'types'
  *
  * // Example 3: Filter variables that are COLOR and include 'brand' in name
  * const filtered = filterVariables(allVars, { resolvedType: 'COLOR', name: 'brand' });
+ *
+ * // Example 4: Case-insensitive name search
+ * const matches = filterVariables(allVars, { name: 'BRAND', caseInsensitive: true });
  * ```
  *
  * @public
  */
 export function filterVariables(
   variables: FigmaVariable[],
-  criteria: { resolvedType?: ResolvedType; name?: string }
+  criteria: FilterVariablesCriteria
 ): FigmaVariable[] {
   return variables.filter(v => {
     let match = true
-    if (criteria.resolvedType)
+    if (criteria.resolvedType) {
       match = match && v.resolvedType === criteria.resolvedType
-    if (criteria.name) match = match && v.name.includes(criteria.name)
+    }
+    if (criteria.name) {
+      if (criteria.caseInsensitive) {
+        match =
+          match && v.name.toLowerCase().includes(criteria.name.toLowerCase())
+      } else {
+        match = match && v.name.includes(criteria.name)
+      }
+    }
     return match
   })
 }

src/utils/index.ts

@@ -19,6 +19,7 @@
  * @public
  */
 export { filterVariables } from 'utils/filterVariables'
+export type { FilterVariablesCriteria } from 'utils/filterVariables'
 export {
   isFigmaApiError,
   getErrorStatus,

tests/utils/filterVariables.test.ts

@@ -74,4 +74,57 @@ describe('filterVariables', () => {
     const result = filterVariables(mockVariables, { name: 'NonExistent' })
     expect(result).toHaveLength(0)
   })
+
+  describe('caseInsensitive option', () => {
+    it('should match case-insensitively when caseInsensitive is true', () => {
+      const result = filterVariables(mockVariables, {
+        name: 'color',
+        caseInsensitive: true,
+      })
+      expect(result).toHaveLength(2)
+      expect(result.map(v => v.name)).toEqual([
+        'Primary Color',
+        'Secondary Color',
+      ])
+    })
+
+    it('should match uppercase search against lowercase names', () => {
+      const result = filterVariables(mockVariables, {
+        name: 'COLOR',
+        caseInsensitive: true,
+      })
+      expect(result).toHaveLength(2)
+    })
+
+    it('should match mixed case search', () => {
+      const result = filterVariables(mockVariables, {
+        name: 'CoLoR',
+        caseInsensitive: true,
+      })
+      expect(result).toHaveLength(2)
+    })
+
+    it('should be case-sensitive by default', () => {
+      const result = filterVariables(mockVariables, { name: 'color' })
+      expect(result).toHaveLength(0) // No match because 'Color' !== 'color'
+    })
+
+    it('should be case-sensitive when caseInsensitive is false', () => {
+      const result = filterVariables(mockVariables, {
+        name: 'color',
+        caseInsensitive: false,
+      })
+      expect(result).toHaveLength(0)
+    })
+
+    it('should combine caseInsensitive with resolvedType filter', () => {
+      const result = filterVariables(mockVariables, {
+        resolvedType: 'COLOR',
+        name: 'primary',
+        caseInsensitive: true,
+      })
+      expect(result).toHaveLength(1)
+      expect(result[0]!.name).toBe('Primary Color')
+    })
+  })
 })