{"id":30046723,"url":"https://github.com/glatztp/gltz","last_synced_at":"2025-08-07T08:53:41.760Z","repository":{"id":305606451,"uuid":"1023328554","full_name":"glatztp/gltz","owner":"glatztp","description":"Biblioteca de componentes React moderna, acessível e customizável","archived":false,"fork":false,"pushed_at":"2025-07-31T03:04:27.000Z","size":1916,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-31T05:28:35.804Z","etag":null,"topics":["component-library","dark-theme","framer-motion","library","nodejs","npm-package","react","shadcn-ui","styled-components","tailwindcss","typescript","ui-components"],"latest_commit_sha":null,"homepage":"https://gltz.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glatztp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-21T02:07:47.000Z","updated_at":"2025-07-31T03:04:03.000Z","dependencies_parsed_at":"2025-07-21T04:27:05.230Z","dependency_job_id":"de4d98ca-d33d-4efe-8762-aabb156bf6e3","html_url":"https://github.com/glatztp/gltz","commit_stats":null,"previous_names":["glatztp/gltz"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/glatztp/gltz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glatztp%2Fgltz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glatztp%2Fgltz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glatztp%2Fgltz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glatztp%2Fgltz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glatztp","download_url":"https://codeload.github.com/glatztp/gltz/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glatztp%2Fgltz/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269227924,"owners_count":24381839,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","dark-theme","framer-motion","library","nodejs","npm-package","react","shadcn-ui","styled-components","tailwindcss","typescript","ui-components"],"created_at":"2025-08-07T08:53:41.024Z","updated_at":"2025-08-07T08:53:41.731Z","avatar_url":"https://github.com/glatztp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# @gltz-packages/ui\n\n**Enterprise-Grade React Component Library for Modern Applications**\n\nA comprehensive, accessible, and highly customizable React component library built with modern web standards, TypeScript, and industry best practices.\n\n[![npm version](https://img.shields.io/npm/v/@gltz-packages/ui?style=flat-square\u0026logo=npm\u0026logoColor=white)](https://www.npmjs.com/package/@gltz-packages/ui)\n[![Downloads](https://img.shields.io/npm/dm/@gltz-packages/ui?style=flat-square\u0026logo=npm\u0026logoColor=white)](https://www.npmjs.com/package/@gltz-packages/ui)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@gltz-packages/ui?style=flat-square)](https://bundlephobia.com/package/@gltz-packages/ui)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=flat-square)](https://opensource.org/licenses/MIT)\n\n[📖 **Documentation**](https://gltz.vercel.app/docs) • [🚀 **Live Demo**](https://gltz.vercel.app) • [📦 **NPM Package**](https://www.npmjs.com/package/@gltz-packages/ui) • [🐛 **Report Issues**](https://github.com/glatztp/gltz/issues) • [💬 **Discussions**](https://github.com/glatztp/gltz/discussions)\n\n\u003c/div\u003e\n\n---\n\n## Overview\n\n@gltz-packages/ui is a production-ready React component library designed for enterprise applications. Built on modern web standards with accessibility, performance, and developer experience as core principles.\n\n### Key Features\n\n- **50+ Professional Components** - Comprehensive set of UI components for enterprise applications\n- **Full TypeScript Support** - Complete type safety with excellent IntelliSense support\n- **Accessibility First** - WCAG 2.1 AA compliant components with full keyboard navigation\n- **Theme System** - Advanced theming with CSS custom properties and dark mode support\n- **Framework Agnostic** - Compatible with Next.js, Vite, Create React App, Remix, and Gatsby\n- **Tree Shakeable** - Optimized bundle size with selective imports\n- **Production Ready** - Battle-tested in enterprise environments\n- **Developer Experience** - Comprehensive documentation, examples, and TypeScript definitions\n\n### Architecture\n\nBuilt on a foundation of industry-leading technologies:\n\n- **React** 18+ - Latest React features with concurrent rendering\n- **TypeScript** 5+ - Full type safety and excellent developer experience\n- **Radix UI** - Unstyled, accessible component primitives\n- **Tailwind CSS** - Utility-first styling with design tokens\n- **Framer Motion** - Smooth, performant animations\n- **Class Variance Authority** - Type-safe component variants\n\n---\n\n## Installation \u0026 Quick Start\n\n### NPM Installation\n\n```bash\n# Install the library\nnpm install @gltz-packages/ui lucide-react\n\n# Or with Yarn\nyarn add @gltz-packages/ui lucide-react\n\n# Or with PNPM\npnpm add @gltz-packages/ui lucide-react\n```\n\n### Framework Setup\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eNext.js (App Router)\u003c/strong\u003e\u003c/summary\u003e\n\n**1. Create a new Next.js project:**\n```bash\nnpx create-next-app@latest my-app --typescript --tailwind --app\ncd my-app\nnpm install @gltz-packages/ui lucide-react\n```\n\n**2. Configure Tailwind CSS** (`tailwind.config.js`):\n```javascript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  darkMode: [\"class\"],\n  content: [\n    './pages/**/*.{ts,tsx}',\n    './components/**/*.{ts,tsx}',\n    './app/**/*.{ts,tsx}',\n    './src/**/*.{ts,tsx}',\n    './node_modules/@gltz-packages/ui/dist/**/*.{js,ts,jsx,tsx}',\n  ],\n  prefix: \"\",\n  theme: {\n    container: {\n      center: true,\n      padding: \"2rem\",\n      screens: {\n        \"2xl\": \"1400px\",\n      },\n    },\n    extend: {\n      colors: {\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n      },\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\")],\n}\n```\n\n**3. Add global styles** (`app/globals.css`):\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96%;\n    --secondary-foreground: 222.2 84% 4.9%;\n    --muted: 210 40% 96%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96%;\n    --accent-foreground: 222.2 84% 4.9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eVite + React\u003c/strong\u003e\u003c/summary\u003e\n\n**1. Create a new Vite project:**\n```bash\nnpm create vite@latest my-app -- --template react-ts\ncd my-app\nnpm install @gltz-packages/ui lucide-react tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n**2. Configure Tailwind CSS** (`tailwind.config.js`):\n```javascript\n/** @type {import('tailwindcss').Config} */\nexport default {\n  darkMode: [\"class\"],\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n    \"./node_modules/@gltz-packages/ui/dist/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {\n      // ... same configuration as Next.js\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\")],\n}\n```\n\n**3. Add styles** (`src/index.css`):\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n/* ... same CSS variables as Next.js */\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCreate React App\u003c/strong\u003e\u003c/summary\u003e\n\n**1. Create a new CRA project:**\n```bash\nnpx create-react-app my-app --template typescript\ncd my-app\nnpm install @gltz-packages/ui lucide-react\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n**2. Configure Tailwind CSS** (`tailwind.config.js`):\n```javascript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  darkMode: [\"class\"],\n  content: [\n    \"./src/**/*.{js,jsx,ts,tsx}\",\n    \"./public/index.html\",\n    \"./node_modules/@gltz-packages/ui/dist/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {\n      // ... same configuration as Next.js\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\")],\n}\n```\n\n**3. Add styles** (`src/index.css`):\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n/* ... same CSS variables as Next.js */\n```\n\n\u003c/details\u003e\n\n### Basic Usage Example\n\n```tsx\nimport React from 'react';\nimport { \n  Button, \n  Card, \n  CardContent, \n  CardDescription, \n  CardHeader, \n  CardTitle,\n  Input,\n  Label,\n  Separator\n} from \"@gltz-packages/ui\";\n\nexport default function App() {\n  return (\n    \u003cdiv className=\"container mx-auto p-8 max-w-md\"\u003e\n      \u003cCard\u003e\n        \u003cCardHeader\u003e\n          \u003cCardTitle\u003eWelcome to GLTZ UI\u003c/CardTitle\u003e\n          \u003cCardDescription\u003e\n            A comprehensive React component library for modern applications.\n          \u003c/CardDescription\u003e\n        \u003c/CardHeader\u003e\n        \u003cCardContent className=\"space-y-4\"\u003e\n          \u003cdiv className=\"space-y-2\"\u003e\n            \u003cLabel htmlFor=\"email\"\u003eEmail\u003c/Label\u003e\n            \u003cInput \n              id=\"email\"\n              type=\"email\" \n              placeholder=\"Enter your email\" \n            /\u003e\n          \u003c/div\u003e\n          \u003cSeparator /\u003e\n          \u003cButton className=\"w-full\" size=\"lg\"\u003e\n            Get Started\n          \u003c/Button\u003e\n        \u003c/CardContent\u003e\n      \u003c/Card\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## Component Library\n\n@gltz-packages/ui provides a comprehensive collection of 50+ components organized into logical categories for enterprise application development.\n\n### Form Components (12 Components)\n\nProfessional form controls with built-in validation and accessibility features.\n\n| Component | Description | Features |\n|-----------|-------------|----------|\n| **Button** | Versatile button component with multiple variants | 6 variants, 4 sizes, loading states, icon support |\n| **Input** | Text input with validation support | Type variants, validation states, icons, controlled/uncontrolled |\n| **Textarea** | Multi-line text input with auto-resize | Character counting, auto-resize, validation |\n| **Checkbox** | Accessible checkbox with custom styling | Indeterminate state, custom icons, form integration |\n| **Radio Group** | Radio button group component | Horizontal/vertical layout, validation |\n| **Switch** | Toggle switch component | Sizes, disabled state, controlled |\n| **Label** | Accessible form label | Auto-association, required indicators |\n| **Slider** | Range slider component | Single/double handles, custom marks, validation |\n| **Select** | Dropdown selection component | Multi-select, searchable, custom options |\n| **Date Picker** | Modern date selection | Range selection, presets, time picker |\n| **Calendar** | Full calendar component | Multi-date selection, custom day rendering |\n| **Input OTP** | One-time password input | Auto-focus, paste support, customizable length |\n\n### Navigation Components (6 Components)\n\nComprehensive navigation solutions for complex applications.\n\n| Component | Description | Features |\n|-----------|-------------|----------|\n| **Navigation Menu** | Hierarchical navigation menu | Nested menus, responsive, keyboard navigation |\n| **Menubar** | Application menu bar | Context menus, keyboard shortcuts |\n| **Breadcrumb** | Navigation breadcrumb | Custom separators, collapsible |\n| **Tabs** | Tabbed interface component | Vertical/horizontal, lazy loading |\n| **Pagination** | Data pagination controls | Customizable ranges, jump to page |\n| **Command** | Command palette interface | Keyboard shortcuts, search, grouping |\n\n### Overlay Components (10 Components)\n\nModal and overlay components for enhanced user interactions.\n\n| Component | Description | Features |\n|-----------|-------------|----------|\n| **Dialog** | Modal dialog component | Nested modals, scroll locking, focus management |\n| **Alert Dialog** | Confirmation dialog | Custom actions, accessibility |\n| **Popover** | Positioned popover content | Auto-positioning, arrow, trigger options |\n| **Tooltip** | Contextual tooltip | Delay configuration, rich content, positioning |\n| **Sheet** | Slide-out panel | Multiple sides, sizes, backdrop |\n| **Drawer** | Mobile-friendly drawer | Swipe gestures, snap points |\n| **Hover Card** | Hover-triggered card | Delay, rich content, positioning |\n| **Context Menu** | Right-click context menu | Nested menus, keyboard navigation |\n| **Dropdown Menu** | Dropdown menu component | Checkable items, separators, icons |\n| **Combobox** | Searchable select component | Async search, custom filtering |\n\n### Feedback Components (6 Components)\n\nUser feedback and status indication components.\n\n| Component | Description | Features |\n|-----------|-------------|----------|\n| **Alert** | Contextual alert messages | 4 variants, dismissible, custom icons |\n| **Toast** | Notification toast system | Queue management, positioning, actions |\n| **Sonner** | Modern toast notifications | Rich content, promise handling |\n| **Progress** | Progress indication | Determinate/indeterminate, circular variant |\n| **Skeleton** | Loading state placeholders | Custom shapes, animation controls |\n| **Badge** | Status and labeling badges | Multiple variants, sizes, removable |\n\n### Layout Components (8 Components)\n\nStructural components for organizing application layout.\n\n| Component | Description | Features |\n|-----------|-------------|----------|\n| **Card** | Content container card | Header, content, footer sections |\n| **Separator** | Visual content separator | Horizontal/vertical, custom styling |\n| **Scroll Area** | Custom scrollable area | Custom scrollbars, horizontal/vertical |\n| **Accordion** | Collapsible content sections | Multiple/single expansion, custom triggers |\n| **Collapsible** | Simple collapsible content | Smooth animations, trigger customization |\n| **Resizable** | Resizable panel layout | Horizontal/vertical, constraints, persistence |\n| **Aspect Ratio** | Responsive aspect ratio container | Common ratios, custom values |\n| **Container** | Responsive container component | Breakpoint-based max-widths |\n\n### Data Display Components (5 Components)\n\nComponents for displaying and organizing data.\n\n| Component | Description | Features |\n|-----------|-------------|----------|\n| **Data Table** | Feature-rich data table | Sorting, filtering, pagination, selection |\n| **Avatar** | User avatar component | Image, fallback, status indicator, sizes |\n| **Table** | Basic table components | Responsive, striped, hover states |\n| **List** | Structured list component | Ordered/unordered, custom styling |\n| **Timeline** | Event timeline component | Vertical/horizontal, custom markers |\n\n---\n\n## Theming \u0026 Customization\n\n### Design System\n\n@gltz-packages/ui implements a comprehensive design system with consistent spacing, typography, and color scales.\n\n#### Color Palette\n\nThe library uses HSL color space for maximum flexibility and includes semantic color tokens:\n\n```css\n:root {\n  /* Primary Colors */\n  --primary: 222.2 47.4% 11.2%;\n  --primary-foreground: 210 40% 98%;\n  \n  /* Secondary Colors */\n  --secondary: 210 40% 96%;\n  --secondary-foreground: 222.2 84% 4.9%;\n  \n  /* Semantic Colors */\n  --destructive: 0 84.2% 60.2%;\n  --warning: 38 92% 50%;\n  --success: 142 71% 45%;\n  \n  /* UI Colors */\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n  --border: 214.3 31.8% 91.4%;\n  --input: 214.3 31.8% 91.4%;\n  --ring: 222.2 84% 4.9%;\n}\n```\n\n#### Dark Mode Support\n\nAutomatic dark mode support with system preference detection:\n\n```tsx\nimport { ThemeProvider } from \"@gltz-packages/ui\";\n\nfunction App() {\n  return (\n    \u003cThemeProvider\n      defaultTheme=\"system\"\n      enableSystem\n      attribute=\"class\"\n    \u003e\n      \u003cYourApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n#### Custom Themes\n\nCreate custom themes by overriding CSS custom properties:\n\n```css\n[data-theme=\"corporate\"] {\n  --primary: 210 100% 40%;\n  --primary-foreground: 0 0% 100%;\n  --secondary: 210 40% 94%;\n  --secondary-foreground: 210 100% 15%;\n  --accent: 210 100% 95%;\n  --accent-foreground: 210 100% 20%;\n}\n```\n\n#### Typography Scale\n\nConsistent typography scale with responsive sizing:\n\n```css\n:root {\n  --font-sans: 'Inter', system-ui, sans-serif;\n  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;\n  \n  /* Type Scale */\n  --text-xs: 0.75rem;    /* 12px */\n  --text-sm: 0.875rem;   /* 14px */\n  --text-base: 1rem;     /* 16px */\n  --text-lg: 1.125rem;   /* 18px */\n  --text-xl: 1.25rem;    /* 20px */\n  --text-2xl: 1.5rem;    /* 24px */\n  --text-3xl: 1.875rem;  /* 30px */\n  --text-4xl: 2.25rem;   /* 36px */\n}\n```\n\n#### Spacing System\n\nConsistent spacing scale based on 4px units:\n\n```css\n:root {\n  --spacing-0: 0;\n  --spacing-1: 0.25rem;  /* 4px */\n  --spacing-2: 0.5rem;   /* 8px */\n  --spacing-3: 0.75rem;  /* 12px */\n  --spacing-4: 1rem;     /* 16px */\n  --spacing-5: 1.25rem;  /* 20px */\n  --spacing-6: 1.5rem;   /* 24px */\n  --spacing-8: 2rem;     /* 32px */\n  --spacing-10: 2.5rem;  /* 40px */\n  --spacing-12: 3rem;    /* 48px */\n  --spacing-16: 4rem;    /* 64px */\n  --spacing-20: 5rem;    /* 80px */\n  --spacing-24: 6rem;    /* 96px */\n}\n```\n\n---\n\n## Accessibility\n\n@gltz-packages/ui is built with accessibility as a first-class citizen, ensuring all components meet WCAG 2.1 AA standards.\n\n### Accessibility Features\n\n- **Keyboard Navigation** - Full keyboard support with logical tab order\n- **Screen Reader Support** - ARIA labels, descriptions, and live regions\n- **Focus Management** - Visible focus indicators and focus trapping\n- **High Contrast Mode** - Support for Windows High Contrast Mode\n- **Reduced Motion** - Respects `prefers-reduced-motion` setting\n- **Color Contrast** - All color combinations meet AA contrast ratios\n\n### ARIA Implementation\n\nComponents include comprehensive ARIA support:\n\n```tsx\n// Button with accessible loading state\n\u003cButton disabled aria-describedby=\"loading-text\"\u003e\n  {loading \u0026\u0026 \u003cspan id=\"loading-text\" className=\"sr-only\"\u003eLoading\u003c/span\u003e}\n  {loading ? \u003cLoader2 className=\"animate-spin\" /\u003e : \"Submit\"}\n\u003c/Button\u003e\n\n// Form with proper labeling\n\u003cdiv\u003e\n  \u003cLabel htmlFor=\"email\" className=\"required\"\u003eEmail\u003c/Label\u003e\n  \u003cInput \n    id=\"email\"\n    type=\"email\"\n    required\n    aria-describedby=\"email-error\"\n    aria-invalid={hasError}\n  /\u003e\n  {hasError \u0026\u0026 (\n    \u003cdiv id=\"email-error\" role=\"alert\"\u003e\n      Please enter a valid email address\n    \u003c/div\u003e\n  )}\n\u003c/div\u003e\n```\n\n### Testing Accessibility\n\nWe recommend using these tools to test accessibility:\n\n```bash\n# Install axe-core for automated testing\nnpm install -D @axe-core/react\n\n# Install testing utilities\nnpm install -D @testing-library/jest-dom @testing-library/user-event\n```\n\n```tsx\nimport { axe, toHaveNoViolations } from '@axe-core/jest-axe';\nimport { render } from '@testing-library/react';\n\nexpect.extend(toHaveNoViolations);\n\ntest('Button is accessible', async () =\u003e {\n  const { container } = render(\u003cButton\u003eClick me\u003c/Button\u003e);\n  const results = await axe(container);\n  expect(results).toHaveNoViolations();\n});\n```\n\n---\n\n## Performance\n\n@gltz-packages/ui is optimized for production environments with several performance considerations.\n\n### Bundle Size Optimization\n\n- **Tree Shaking** - Import only the components you use\n- **Code Splitting** - Lazy load heavy components\n- **Bundle Analysis** - Monitor bundle impact\n\n```tsx\n// ✅ Good - Tree shaking friendly\nimport { Button, Card } from \"@gltz-packages/ui\";\n\n// ❌ Avoid - Imports entire library\nimport * as UI from \"@gltz-packages/ui\";\n```\n\n### Performance Monitoring\n\nMonitor your bundle size impact:\n\n```bash\n# Analyze bundle size\nnpm install -D webpack-bundle-analyzer\nnpx webpack-bundle-analyzer build/static/js/*.js\n\n# Check individual component sizes\nnpm install -D bundlephobia-cli\nnpx bundlephobia @gltz-packages/ui\n```\n\n### Component Performance\n\nComponents are optimized with:\n\n- **React.memo** - Prevent unnecessary re-renders\n- **useCallback/useMemo** - Memoize expensive operations  \n- **Virtualization** - Large lists use virtual scrolling\n- **Lazy Loading** - Heavy components load on demand\n\n### Animation Performance\n\nAnimations use GPU acceleration:\n\n```css\n/* Hardware accelerated animations */\n.animate-fade-in {\n  animation: fadeIn 0.2s ease-out;\n  transform: translateZ(0); /* GPU acceleration */\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .animate-fade-in {\n    animation: none;\n    transition: none;\n  }\n}\n```\n\n---\n\n## Testing\n\n@gltz-packages/ui provides comprehensive testing utilities and examples.\n\n### Testing Setup\n\nInstall testing dependencies:\n\n```bash\nnpm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event\n```\n\nConfigure Jest:\n\n```javascript\n// jest.config.js\nmodule.exports = {\n  setupFilesAfterEnv: ['\u003crootDir\u003e/src/setupTests.js'],\n  testEnvironment: 'jsdom',\n  moduleNameMapping: {\n    '^@/(.*)$': '\u003crootDir\u003e/src/$1',\n  },\n};\n```\n\n```javascript\n// src/setupTests.js\nimport '@testing-library/jest-dom';\n```\n\n### Component Testing Examples\n\n```tsx\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { Button } from '@gltz-packages/ui';\n\ndescribe('Button Component', () =\u003e {\n  test('renders with text', () =\u003e {\n    render(\u003cButton\u003eClick me\u003c/Button\u003e);\n    expect(screen.getByRole('button')).toHaveTextContent('Click me');\n  });\n\n  test('handles click events', async () =\u003e {\n    const handleClick = jest.fn();\n    const user = userEvent.setup();\n    \n    render(\u003cButton onClick={handleClick}\u003eClick me\u003c/Button\u003e);\n    await user.click(screen.getByRole('button'));\n    \n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n\n  test('shows loading state', () =\u003e {\n    render(\u003cButton loading\u003eLoading...\u003c/Button\u003e);\n    expect(screen.getByRole('button')).toBeDisabled();\n    expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');\n  });\n});\n```\n\n### Visual Testing\n\nUse Storybook for visual regression testing:\n\n```bash\n# Install Storybook\nnpx storybook@latest init\n\n# Install visual testing addon\nnpm install -D @storybook/addon-visual-tests\n```\n\n### Accessibility Testing\n\n```tsx\nimport { axe, toHaveNoViolations } from '@axe-core/jest-axe';\n\nexpect.extend(toHaveNoViolations);\n\ntest('Form is accessible', async () =\u003e {\n  const { container } = render(\n    \u003cform\u003e\n      \u003cLabel htmlFor=\"name\"\u003eName\u003c/Label\u003e\n      \u003cInput id=\"name\" required /\u003e\n      \u003cButton type=\"submit\"\u003eSubmit\u003c/Button\u003e\n    \u003c/form\u003e\n  );\n  \n  const results = await axe(container);\n  expect(results).toHaveNoViolations();\n});\n```\n\n---\n\n## Migration \u0026 Upgrade Guide\n\n### From Version 1.x to 2.x\n\nMajor changes in version 2.0:\n\n1. **Breaking Changes:**\n   - Renamed `variant` prop values for consistency\n   - Updated CSS custom property names\n   - Removed deprecated components\n\n2. **New Features:**\n   - Enhanced TypeScript definitions\n   - New component variants\n   - Improved accessibility support\n\n3. **Migration Steps:**\n\n```bash\n# Update package\nnpm install @gltz-packages/ui@^2.0.0\n\n# Update CSS custom properties\n# Old\n--primary-500: 59 130 246;\n# New  \n--primary: 217.2 91.2% 59.8%;\n```\n\n```tsx\n// Update component props\n// Old\n\u003cButton color=\"primary\" size=\"md\"\u003eClick me\u003c/Button\u003e\n// New\n\u003cButton variant=\"default\" size=\"default\"\u003eClick me\u003c/Button\u003e\n```\n\n### Codemods\n\nUse automated migration tools:\n\n```bash\nnpx @gltz-packages/codemods v1-to-v2 src/\n```\n\n---\n\n## Contributing\n\nWe welcome contributions from the community! Please read our [Contributing Guidelines](CONTRIBUTING.md) for detailed information.\n\n### Development Setup\n\n1. **Clone the repository:**\n```bash\ngit clone https://github.com/glatztp/gltz.git\ncd gltz\n```\n\n2. **Install dependencies:**\n```bash\nnpm install\n```\n\n3. **Start development server:**\n```bash\nnpm run dev\n```\n\n4. **Run tests:**\n```bash\nnpm test\n```\n\n5. **Build the library:**\n```bash\nnpm run build\n```\n\n### Project Structure\n\n```\ngltz/\n├── src/\n│   ├── components/          # React components\n│   │   ├── ui/             # Core UI components\n│   │   ├── layout/         # Layout components\n│   │   └── providers/      # Context providers\n│   ├── hooks/              # Custom React hooks\n│   ├── lib/                # Utility functions\n│   ├── styles/             # CSS and styling\n│   └── types/              # TypeScript definitions\n├── docs/                   # Documentation\n├── tests/                  # Test suites\n├── .storybook/            # Storybook configuration\n└── build/                 # Build output\n```\n\n### Code Standards\n\n- **TypeScript** - All code must be written in TypeScript\n- **ESLint** - Follow the configured ESLint rules\n- **Prettier** - Code formatting is handled by Prettier\n- **Testing** - All components must have comprehensive tests\n- **Documentation** - Include JSDoc comments and Storybook stories\n\n### Commit Convention\n\nWe follow [Conventional Commits](https://www.conventionalcommits.org/):\n\n```bash\ngit commit -m \"feat: add new DatePicker component\"\ngit commit -m \"fix: resolve button focus issue\"\ngit commit -m \"docs: update installation guide\"\n```\n\n---\n\n## Community \u0026 Support\n\n### Getting Help\n\n- **Documentation**: [https://gltz.vercel.app/docs](https://gltz.vercel.app/docs)\n- **GitHub Issues**: [Report bugs or request features](https://github.com/glatztp/gltz/issues)\n- **GitHub Discussions**: [Community discussions](https://github.com/glatztp/gltz/discussions)\n- **Stack Overflow**: Tag your questions with `gltz-ui`\n\n### Community Guidelines\n\n- Be respectful and inclusive\n- Provide clear, reproducible examples\n- Search existing issues before creating new ones\n- Follow our [Code of Conduct](CODE_OF_CONDUCT.md)\n\n### Enterprise Support\n\nFor enterprise customers, we offer:\n\n- **Priority Support** - Dedicated support channel\n- **Custom Components** - Bespoke component development\n- **Training \u0026 Consulting** - Team training and architecture consulting\n- **SLA Agreements** - Service level agreements\n\nContact us at: enterprise@gltz.dev\n\n---\n\n## Roadmap\n\n### Version 2.3 (Q3 2025)\n\n- **New Components**: Calendar improvements, Rich Text Editor, File Upload\n- **Accessibility**: Enhanced screen reader support, keyboard navigation\n- **Performance**: Bundle size optimization, lazy loading improvements\n- **Developer Experience**: Better TypeScript definitions, improved docs\n\n### Version 2.4 (Q4 2025)\n\n- **Advanced Data Table**: Virtual scrolling, advanced filtering\n- **Chart Components**: Integration with popular charting libraries\n- **Mobile Optimization**: Touch gestures, responsive improvements\n- **Testing**: Visual regression testing, accessibility testing tools\n\n### Long-term Goals\n\n- **React 19 Support** - Full compatibility with React 19\n- **Server Components** - React Server Components support\n- **Figma Integration** - Design tokens sync with Figma\n- **CLI Tools** - Component generation and project setup tools\n\n---\n\n## Changelog\n\n### Version 2.2.1 (Current)\n\n#### Added\n- New `MultiCombobox` component for multi-selection\n- Enhanced `DatePicker` with range selection\n- Dark mode improvements across all components\n- Bundle size optimizations\n\n#### Fixed\n- Accessibility issues in `Dialog` component\n- TypeScript definitions for theme provider\n- Focus management in `Popover` component\n\n#### Changed\n- Updated dependencies to latest versions\n- Improved documentation with more examples\n- Enhanced Storybook stories\n\n[View full changelog](CHANGELOG.md)\n\n---\n\n## License\n\nMIT License © 2025 [glatztp](https://github.com/glatztp)\n\n```\nMIT License\n\nCopyright (c) 2025 glatztp\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n\n---\n\n## Acknowledgments\n\nSpecial thanks to the open-source community and these amazing projects:\n\n- **[Radix UI](https://radix-ui.com)** - Accessible component primitives\n- **[Tailwind CSS](https://tailwindcss.com)** - Utility-first CSS framework  \n- **[shadcn/ui](https://ui.shadcn.com)** - Design inspiration and patterns\n- **[Framer Motion](https://framer.com/motion)** - Animation library\n- **[Lucide](https://lucide.dev)** - Beautiful icon set\n- **[React](https://react.dev)** - The foundation of our library\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Built with ❤️ by [glatztp](https://github.com/glatztp)**\n\n⭐ **If you find this project useful, please consider giving it a star on GitHub!** ⭐\n\n[![GitHub stars](https://img.shields.io/github/stars/glatztp/gltz?style=social)](https://github.com/glatztp/gltz/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/glatztp/gltz?style=social)](https://github.com/glatztp/gltz/network)\n[![GitHub watchers](https://img.shields.io/github/watchers/glatztp/gltz?style=social)](https://github.com/glatztp/gltz/watchers)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglatztp%2Fgltz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglatztp%2Fgltz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglatztp%2Fgltz/lists"}