feat: Add new Material 3 components including app bar, badge, bottom sheet, chip, list, menu, navigation drawer, progress, tabs, and tooltip.

Author: rinturaj

src/components/app-bar/index.ts

@@ -0,0 +1,72 @@
+/**
+ * Material Design 3 App Bar Component - Tailwind Plugin
+ */
+
+import plugin from 'tailwindcss/plugin';
+
+export const appBarPlugin: ReturnType<typeof plugin> = plugin(function ({ addComponents }) {
+    const appBars = {
+        // Top App Bar Container
+        '.md-top-app-bar': {
+            '@apply sticky top-0 left-0 right-0 z-40 flex items-center gap-4 px-4 h-16 bg-md-surface': {},
+            '@apply transition-all duration-200': {},
+
+            // Scrolled state (optional, adds elevation/color change)
+            '&.scrolled': {
+                '@apply bg-md-surface-container shadow-md-2': {},
+            },
+
+            // Small App Bar
+            '&.md-top-app-bar-small': {
+                '@apply h-16': {},
+            },
+            // Medium App Bar (expands)
+            '&.md-top-app-bar-medium': {
+                '@apply h-[112px] flex-col items-start justify-end pb-6': {},
+                '.md-top-app-bar-title': {
+                    '@apply text-md-headline-small': {},
+                }
+            },
+            // Large App Bar
+            '&.md-top-app-bar-large': {
+                '@apply h-[152px] flex-col items-start justify-end pb-7': {},
+                '.md-top-app-bar-title': {
+                    '@apply text-md-headline-medium': {},
+                }
+            },
+
+            // Leading Icon (Menu/Back)
+            '.md-top-app-bar-leading': {
+                '@apply p-3 -ml-3 rounded-md-full text-md-on-surface hover:bg-md-on-surface/10 cursor-pointer': {},
+            },
+
+            // Title
+            '.md-top-app-bar-title': {
+                '@apply flex-1 text-md-title-large text-md-on-surface truncate': {},
+            },
+
+            // Trailing Actions Container
+            '.md-top-app-bar-actions': {
+                '@apply flex items-center gap-2 -mr-2': {},
+            },
+
+            // Action Icon
+            '.md-top-app-bar-action': {
+                '@apply p-3 rounded-md-full text-md-on-surface-variant hover:bg-md-on-surface/10 cursor-pointer': {},
+            }
+        },
+
+        // Bottom App Bar
+        '.md-bottom-app-bar': {
+            '@apply fixed bottom-0 left-0 right-0 z-40 flex items-center justify-between gap-4 px-4 h-20 bg-md-surface-container': {},
+            // FAB usually lives here or floats above
+            '.md-fab': {
+                '@apply absolute right-4 bottom-4 shadow-md-3': {}, // Or inline if wanted
+            }
+        }
+    };
+
+    addComponents(appBars);
+});
+
+export default appBarPlugin;

src/components/app-bar/types.ts

@@ -0,0 +1,9 @@
+export interface TopAppBarOptions {
+    title: string;
+    variant?: 'small' | 'medium' | 'large' | 'center-aligned';
+    scrollBehavior?: 'pinned' | 'hide' | 'shrink';
+}
+
+export interface BottomAppBarOptions {
+    fab?: boolean;
+}

src/components/badge/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Material Design 3 Badge Component - Tailwind Plugin
+ */
+
+import plugin from 'tailwindcss/plugin';
+
+export const badgePlugin: ReturnType<typeof plugin> = plugin(function ({ addComponents }) {
+    const badges = {
+        '.md-badge': {
+            '@apply inline-flex items-center justify-center min-w-[16px] h-4 px-1 rounded-md-full bg-md-error text-md-on-error text-[11px] font-medium leading-none': {},
+
+            // Small dot variant
+            '&.md-badge-dot': {
+                '@apply min-w-[6px] w-[6px] h-[6px] p-0': {},
+            },
+
+            // Large variant (for more than 3 digits, though max 999+ usually)
+            '&.md-badge-large': {
+                '@apply h-6 min-w-[24px] px-2 text-md-label-small': {},
+            },
+
+            // Positioned contextual usage (e.g. on icon)
+            // Parent needs relative
+            '.relative > &': {
+                '@apply absolute top-0 right-0 -mr-1 -mt-1': {}, // Simple corner positioning
+            }
+        }
+    };
+
+    addComponents(badges);
+});
+
+export default badgePlugin;

src/components/badge/types.ts

@@ -0,0 +1,4 @@
+export interface BadgeOptions {
+    label?: string | number;
+    variant?: 'small' | 'large' | 'dot';
+}

src/components/bottom-sheet/index.ts

@@ -0,0 +1,46 @@
+/**
+ * Material Design 3 Bottom Sheet Component - Tailwind Plugin
+ */
+
+import plugin from 'tailwindcss/plugin';
+
+export const bottomSheetPlugin: ReturnType<typeof plugin> = plugin(function ({ addComponents }) {
+    const sheets = {
+        // Bottom Sheet Container/Modal
+        '.md-bottom-sheet': {
+            '@apply fixed bottom-0 left-0 right-0 z-50 bg-md-surface-container-low text-md-on-surface rounded-t-md-xl shadow-md-4 transition-transform duration-300 translate-y-full max-h-[90vh] flex flex-col': {},
+
+            // Standard/Persistent variant (not fixed, usually inline or absolute in container)
+            '&.md-bottom-sheet-standard': {
+                '@apply relative z-0 translate-y-0 shadow-none border-t border-md-outline-variant w-full': {},
+            },
+
+            // Open state
+            '&.open': {
+                '@apply translate-y-0': {},
+            },
+
+            // Drag Handle
+            '.md-bottom-sheet-handle': {
+                '@apply w-8 h-1 bg-md-on-surface-variant/40 rounded-full mx-auto my-4 shrink-0': {},
+            },
+
+            // Content area
+            '.md-bottom-sheet-content': {
+                '@apply px-4 pb-4 overflow-y-auto': {},
+            },
+
+            // Modal Scrim
+            '+ .md-bottom-sheet-scrim': {
+                '@apply fixed inset-0 z-40 bg-black/32 transition-opacity duration-300 opacity-0 pointer-events-none': {},
+                '&.open': {
+                    '@apply opacity-100 pointer-events-auto': {},
+                }
+            }
+        }
+    };
+
+    addComponents(sheets);
+});
+
+export default bottomSheetPlugin;

src/components/bottom-sheet/types.ts

@@ -0,0 +1,4 @@
+export interface BottomSheetOptions {
+    open?: boolean;
+    variant?: 'standard' | 'modal';
+}

src/components/chip/index.ts

@@ -0,0 +1,73 @@
+/**
+ * Material Design 3 Chip Component - Tailwind Plugin
+ */
+
+import plugin from 'tailwindcss/plugin';
+
+export const chipPlugin: ReturnType<typeof plugin> = plugin(function ({ addComponents }) {
+    const chips = {
+        // Base Chip
+        '.md-chip': {
+            '@apply inline-flex items-center gap-2 px-3 h-8 border border-md-outline rounded-md-lg cursor-pointer transition-all duration-200': {},
+            '@apply text-md-label-large text-md-on-surface bg-transparent': {}, // Assist/Suggestion default
+
+            // Hover state
+            '@apply hover:bg-md-on-surface/10 hover:shadow-md-1': {},
+
+            // Focus state
+            '&:focus-visible': {
+                '@apply outline-none ring-2 ring-md-primary ring-offset-2': {},
+            },
+
+            // Disabled
+            '&:disabled, &.disabled': {
+                '@apply opacity-38 cursor-not-allowed shadow-none border-md-on-surface/12 pointer-events-none': {},
+            },
+
+            // Icons
+            '> svg': {
+                '@apply w-4.5 h-4.5': {}, // 18px
+                '&.md-chip-icon-leading': {
+                    '@apply text-md-primary': {},
+                },
+                '&.md-chip-icon-trailing': {
+                    '@apply text-md-on-surface-variant hover:text-md-on-surface': {},
+                }
+            },
+
+            // Avatar/Image
+            '.md-avatar': {
+                '@apply w-6 h-6 rounded-md-full -ml-1': {},
+            },
+
+            // Variants
+
+            // Elevated Chip
+            '&.md-chip-elevated': {
+                '@apply bg-md-surface-container-low border-none shadow-md-1': {},
+                '@apply hover:bg-md-surface-container hover:shadow-md-2': {},
+            },
+
+            // Filter Chip (Selected)
+            '&.active': {
+                '@apply bg-md-secondary-container border-transparent text-md-on-secondary-container': {},
+                '@apply hover:bg-md-secondary-container hover:shadow-md-1 hover:brightness-95': {},
+
+                // Using pseudo for checkmark in pure CSS is tricky without structure, 
+                // expecting SVG icon for checked state usually.
+                '.md-chip-icon-leading': {
+                    '@apply text-md-on-secondary-container': {},
+                }
+            },
+
+            // Input Chip (has close button often)
+            '&.md-chip-input': {
+                '@apply pr-2': {}, // Less padding on right for remove icon
+            }
+        }
+    };
+
+    addComponents(chips);
+});
+
+export default chipPlugin;

src/components/chip/types.ts

@@ -0,0 +1,7 @@
+export interface ChipOptions {
+    label: string;
+    variant?: 'assist' | 'filter' | 'input' | 'suggestion';
+    elevated?: boolean;
+    active?: boolean; // For filter chips
+    icon?: string;
+}

src/components/index.ts

@@ -10,3 +10,13 @@ export { snackbarPlugin } from './snackbar';
 export { checkboxPlugin } from './checkbox';
 export { radioPlugin } from './radio';
 export { switchPlugin } from './switch';
+export { tabsPlugin } from './tabs';
+export { navigationDrawerPlugin } from './navigation-drawer';
+export { appBarPlugin } from './app-bar';
+export { listPlugin } from './list';
+export { chipPlugin } from './chip';
+export { badgePlugin } from './badge';
+export { progressPlugin } from './progress';
+export { tooltipPlugin } from './tooltip';
+export { bottomSheetPlugin } from './bottom-sheet';
+export { menuPlugin } from './menu';

src/components/list/index.ts

@@ -0,0 +1,72 @@
+/**
+ * Material Design 3 List Component - Tailwind Plugin
+ */
+
+import plugin from 'tailwindcss/plugin';
+
+export const listPlugin: ReturnType<typeof plugin> = plugin(function ({ addComponents }) {
+    const lists = {
+        // List Container
+        '.md-list': {
+            '@apply py-2 bg-md-surface text-md-on-surface rounded-md-xs overflow-hidden': {},
+        },
+
+        // List Item
+        '.md-list-item': {
+            '@apply relative flex items-center gap-4 px-4 min-h-[56px] cursor-pointer transition-colors': {},
+            '@apply text-md-body-large text-md-on-surface': {},
+            '@apply hover:bg-md-on-surface/10': {}, // State layer
+
+            // Active state
+            '&.active': {
+                '@apply bg-md-secondary-container text-md-on-secondary-container': {},
+            },
+
+            // Disabled state
+            '&:disabled, &.disabled': {
+                '@apply opacity-38 cursor-not-allowed pointer-events-none': {},
+            },
+
+            // Leading content (Icon/Avatar)
+            '.md-list-item-leading': {
+                '@apply flex items-center justify-center text-md-on-surface-variant': {},
+                '> svg': {
+                    '@apply w-6 h-6': {},
+                },
+                // Avatar support
+                '.md-avatar': {
+                    '@apply w-10 h-10 rounded-md-full bg-md-primary-container text-md-on-primary-container flex items-center justify-center text-md-title-medium font-medium': {},
+                    '> img': {
+                        '@apply w-full h-full object-cover rounded-md-full': {},
+                    }
+                }
+            },
+
+            // Headline/Scanning text content
+            '.md-list-item-content': {
+                '@apply flex-1 flex flex-col justify-center': {},
+            },
+            '.md-list-item-headline': {
+                '@apply text-md-body-large text-md-on-surface': {},
+            },
+            '.md-list-item-supporting-text': {
+                '@apply text-md-body-medium text-md-on-surface-variant': {},
+            },
+            '.md-list-item-trailing-supporting-text': {
+                '@apply text-md-label-small text-md-on-surface-variant': {},
+            },
+
+            // Trailing content (Icon/Checkbox/Switch)
+            '.md-list-item-trailing': {
+                '@apply flex items-center justify-center text-md-on-surface-variant': {},
+                '> svg': {
+                    '@apply w-6 h-6': {},
+                }
+            }
+        }
+    };
+
+    addComponents(lists);
+});
+
+export default listPlugin;