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.