Kalogkit

A sleek, premium, and highly-customizable Flutter UI design system inspired by the modern MUI (Material UI) and Minimals design language.

Kalogkit provides a complete set of visually stunning, flexible, and robust components designed to speed up development while offering custom theme structures (typography, shadow depths, and curated HSL palettes).

---

🚀 Key Features

• Beautiful Foundations: Comprehensive brand colors (Primary, Secondary, Success, Warning, Info, Error, and Grey shades), modern typography scale (using Google Sans), and smooth elevation shadows.
• Segmented & Contained Controls: Premium iOS/macOS styled contained tabs tray, capsule pill tabs, and classic line indicators with zero horizontal layout overflows.
• Google-Style Progress Loaders: Indeterminate progress bars that cycle smoothly through a list of custom brand colors.
• Robust Feedback & Modals: Overlay-based tooltip bubble notes with 4 direction support, rating star bars (half stars & tap gestures), timeline step guides, drag sliders, sheet drawers, dialogs, and snackbars.
• Responsive & Adaptive: Zero hardcoded overflows, flexible layout constraints, and cross-platform layout compatibility.

---

📦 Installed Components

Category	Components
Foundation	KalogkitColors, KalogkitTypography, KalogkitShadows
Buttons	KalogkitButton, KalogkitIconButton, KalogkitFab (Outlined, Soft, Contained)
Inputs	KalogkitTextField (Text & Selection), KalogkitCheckbox, KalogkitRadio, KalogkitSwitch, KalogkitUpload (Box & Avatar Upload zones)
Data Display	KalogkitCard (with compartment zones & hover lift animations), KalogkitAccordion, KalogkitAvatar, KalogkitAvatarGroup, KalogkitBadge, KalogkitChip (Tag style), KalogkitLabel (Status chips), KalogkitTimeline (Solid & dashed step paths)
Feedback & Modal	KalogkitAlert, KalogkitSnackbar (Toasts), KalogkitDialog, KalogkitBottomSheet (Scrollable / Draggable layout)
Overlays & Controls	KalogkitTooltip (4-direction overlays), KalogkitRating (half/full stars), KalogkitSlider, KalogkitTabs (Line, Pill, Contained)
Loading & Placeholders	KalogkitSkeleton (pulsing shimmers), KalogkitEmptyState (clean placeholder layout screens)

---

🏁 Getting Started

1. Add dependency

Add kalogkit to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  kalogkit:
    path: ./kalogkit # or use pub version once published

2. Import package

Import the library in your Dart code:

import 'package:kalogkit/kalogkit.dart';

---

💡 Usage Examples

1. Primary Button

KalogkitButton(
  label: 'Get Started',
  variant: KalogkitButtonVariant.contained,
  onPressed: () {
    print('Button Pressed!');
  },
)

2. Contained Segmented Tabs (iOS/macOS Control Style)

KalogkitTabs(
  selectedIndex: _activeIndex,
  variant: KalogkitTabsVariant.contained,
  tabs: const [
    KalogkitTab(label: 'Daily'),
    KalogkitTab(label: 'Weekly'),
    KalogkitTab(label: 'Monthly'),
  ],
  onTabChanged: (index) {
    setState(() => _activeIndex = index);
  },
)

3. Google-Style Multi-Color Progress Spinner

KalogkitCircularProgress(
  size: 40.0,
  strokeWidth: 4.0,
  colors: [
    KalogkitColors.infoMain,
    KalogkitColors.errorMain,
    KalogkitColors.warningMain,
    KalogkitColors.successMain,
  ],
)

4. Interactive Rating Star Bar

KalogkitRating(
  rating: 3.5,
  allowHalfRating: true,
  onRatingChanged: (newRating) {
    print('New rating: $newRating');
  },
)

5. Premium Empty State Screen

KalogkitEmptyState(
  title: 'No Mail Found',
  description: 'Your inbox is clear! Check back later for incoming messages.',
  iconData: Icons.folder_off_outlined,
  action: KalogkitButton(
    label: 'Refresh Inbox',
    onPressed: () => refresh(),
  ),
)

---

🛠️ Running the Showcase Application

To see all components in action and inspect their design parameters, run the included example app:

cd example
flutter run

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.