@base-framework/ui 1.2.6 → 1.2.7

package/copilot.md

@@ -267,7 +267,19 @@ const ChildAtom = Atom((props) => (
 ## Working with Icons (READ THIS - Most Common Mistake Area)
 
 ### Icon Basics
-Icons come from [src/components/icons/icons.js](../src/components/icons/icons.js) (Heroicons library). They're SVG strings organized hierarchically. See [base.wiki/02-Icons.md](../base.wiki/02-Icons.md) for complete guide.
+Icons come from [src/components/icons/icons.js](../src/components/icons/icons.js) (Heroicons library). They're SVG strings organized hierarchically. See [ui.wiki/02-Icons.md](../ui.wiki/02-Icons.md) for complete guide.
+
+### Universal Icon Support
+**ALL** icon-accepting components (Button, Alert, Modal, Dialog, etc.) now support BOTH icon systems automatically via `UniversalIcon`. You can pass either Heroicons (SVG) or Material Symbols - the system detects and renders accordingly.
+
+```javascript
+// Both work in any component
+Button({ variant: 'withIcon', icon: Icons.plus }, 'Add')
+Button({ variant: 'withIcon', icon: MaterialSymbols.add }, 'Add')
+
+Alert({ icon: Icons.check, title: 'Success' })
+Alert({ icon: 'check_circle', title: 'Success' })
+```
 
 ### Three Ways to Use Icons
 
@@ -313,6 +325,82 @@ Button({ variant: 'withIcon', icon: Icons.arrows.right, position: 'right' }, 'Ne
 ✅ `I({ html: Icons.home })`
 ✅ `Button({ icon: Icons.plus }, 'Text')`
 
+## Working with Material Symbols (NEW)
+
+### Material Symbols Basics
+Material Symbols are font-based icons from Google (11,000+ icons). They complement Heroicons. See [ui.wiki/09-Material-Symbols.md](../ui.wiki/09-Material-Symbols.md) for complete guide.
+
+### Using Material Symbols
+
+**Basic usage:**
+```javascript
+import { MaterialIcon } from '@base-framework/ui/atoms';
+import { MaterialSymbols } from '@base-framework/ui/icons';
+
+// Using MaterialSymbols object
+MaterialIcon({ name: MaterialSymbols.home, size: 'md' })
+
+// Using icon name directly
+MaterialIcon({ name: 'home', size: 'sm' })
+
+// With variant
+MaterialIcon({ name: MaterialSymbols.favorite, variant: 'filled', size: 'lg' })
+
+// With styling
+MaterialIcon({
+  name: MaterialSymbols.star,
+  variant: 'filled',
+  class: 'text-yellow-500'
+})
+```
+
+### MaterialIcon Props
+- **name** (required): Icon ligature name (string)
+- **size** (optional): xs | sm | md | lg | xl | 2xl | 3xl (default: 'sm')
+- **variant** (optional): outlined | filled | rounded | sharp (default: 'outlined')
+- **class** (optional): Additional CSS classes
+
+### Common Material Symbols
+```javascript
+// Simple access
+MaterialSymbols.home
+MaterialSymbols.search
+MaterialSymbols.settings
+MaterialSymbols.favorite
+
+// Nested categories
+MaterialSymbols.actions.add
+MaterialSymbols.actions.edit
+MaterialSymbols.arrows.left
+MaterialSymbols.status.success
+MaterialSymbols.social.favorite
+```
+
+### Material Symbols in Buttons
+```javascript
+Button({ class: 'flex items-center gap-2' }, [
+  MaterialIcon({ name: MaterialSymbols.add, size: 'sm' }),
+  'Add Item'
+])
+
+Button({ class: 'flex items-center gap-2 bg-primary text-white px-4 py-2 rounded' }, [
+  MaterialIcon({ name: 'save', size: 'sm' }),
+  'Save'
+])
+```
+
+### When to Use Which Icon System
+
+**Use Heroicons (Icon) when:**
+- Need SVG precision
+- Prefer curated, smaller set
+- Already using Heroicons
+
+**Use Material Symbols (MaterialIcon) when:**
+- Need vast icon library (11,000+)
+- Want filled/outlined/rounded/sharp variants
+- Building Material Design interface
+
 ## Patterns by example
 
 ### Alert Component (Functional Atom)
@@ -412,10 +500,14 @@ import { router, NavLink } from '@base-framework/base';
 
 ### From This Library
 ```javascript
-// Icons (ALWAYS import both)
+// Icons - Heroicons (ALWAYS import both)
 import { Icons } from '@base-framework/ui/icons';
 import { Icon } from '@base-framework/ui/atoms';
 
+// Icons - Material Symbols (ALWAYS import both)
+import { MaterialSymbols } from '@base-framework/ui/icons';
+import { MaterialIcon } from '@base-framework/ui/atoms';
+
 // Atoms
 import { Button, Badge, Alert } from '@base-framework/ui/atoms';
 

package/dist/types/components/atoms/form/inputs/range-slider.d.ts

@@ -5,5 +5,5 @@
  *
  * @returns {Component}
  */
-export const RangeSlider: import("@base-framework/base").Component;
+export const RangeSlider: new (...args: any[]) => import("@base-framework/base").Component;
 export default RangeSlider;

package/dist/types/components/atoms/progress/progress-bar.d.ts

@@ -5,4 +5,4 @@
  *
  * @returns {Component}
  */
-export const ProgressBar: import("@base-framework/base").Component;
+export const ProgressBar: new (...args: any[]) => import("@base-framework/base").Component;

package/dist/types/components/atoms/veil.d.ts

@@ -17,5 +17,7 @@ export class Veil extends Component {
      */
     setContext(context: object | null): object | null;
 }
-export function VeilJot(props: any): Component;
+export function VeilJot(props: any): {
+    new (...args: any[]): Component;
+};
 import { Component } from "@base-framework/base";

package/dist/types/components/molecules/counters/counter.d.ts

@@ -5,5 +5,5 @@
  *
  * @returns {Component}
  */
-export const Counter: import("@base-framework/base").Component;
+export const Counter: new (...args: any[]) => import("@base-framework/base").Component;
 export default Counter;

package/dist/types/components/molecules/date-time/date-picker.d.ts

@@ -5,5 +5,5 @@
  *
  * @returns {Component}
  */
-export const DatePicker: import("@base-framework/base").Component;
+export const DatePicker: new (...args: any[]) => import("@base-framework/base").Component;
 export default DatePicker;

package/dist/types/components/molecules/date-time/date-range-picker.d.ts

@@ -5,5 +5,5 @@
  *
  * @returns {Component}
  */
-export const DateRangePicker: import("@base-framework/base").Component;
+export const DateRangePicker: new (...args: any[]) => import("@base-framework/base").Component;
 export default DateRangePicker;

package/dist/types/components/molecules/date-time/time-picker.d.ts

@@ -5,5 +5,5 @@
  *
  * @returns {Component}
  */
-export const TimePicker: import("@base-framework/base").Component;
+export const TimePicker: new (...args: any[]) => import("@base-framework/base").Component;
 export default TimePicker;

package/dist/types/components/molecules/form/form-field.d.ts

@@ -3,4 +3,4 @@
  *
  * Handles controlled form fields with accessibility.
  */
-export const FormField: import("@base-framework/base").Component;
+export const FormField: new (...args: any[]) => import("@base-framework/base").Component;

package/dist/types/components/molecules/toggle/toggle.d.ts

@@ -3,5 +3,5 @@
  *
  * This will create a toggle switch component.
  */
-export const Toggle: import("@base-framework/base").Component;
+export const Toggle: new (...args: any[]) => import("@base-framework/base").Component;
 export default Toggle;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.2.6",
+	"version": "1.2.7",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {