Merge branch 'development' into 1.x

.cz.json

@@ -0,0 +1,10 @@
+{
+  "commitizen": {
+    "name": "cz_conventional_commits",
+    "tag_format": "$version",
+    "version_scheme": "semver",
+    "version_provider": "composer",
+    "update_changelog_on_bump": true,
+    "major_version_zero": true
+  }
+}

README.md

@@ -1,14 +1,10 @@
-![](https://opengraph.githubassets.com/master/electrikhq/slate)
-
 # Slate
 
 Slate UI Kit is a set of beautiful anonymous blade components built using [tailwindcss](https://tailwindcss.com/) for your next [Laravel](https://laravel.com) project.
 
-```
-This package is under active development. Use responsibly!
-```
+![Slate UI Auth Login Screen Screenshot](https://i.postimg.cc/nV27DBj2/Electrik-Slate-Laravel-Blade-UI-Kit-Demo-Electrik-Laravel-Saa-S-Starter-Kit-Login-Screen.png)
 
-![Slate UI Application Shell Screenshot](https://i.postimg.cc/DF8F9fFh/screenshot-rocks.png "Slate UI Application Shell Screenshot")
+[Demo](https://electrik.dev/demo/slate/forms) | [Documentation](https://electrik.dev/docs/slate/master)
 
 ## Requirements
 
@@ -23,7 +19,7 @@ Slate UI kit is entirely dependent on Tailwind CSS. If you are using another CSS
 **Start by installing the package using composer.**
 
 ```bash
-composer require neerajsohal/slate
+composer require electrik/slate
 ```
 
 Many of our components have (and will have) placeholders for icons. For these icons, we use blade [blade-carbon-icons](https://github.com/codeat3/blade-carbon-icons). You may use other icon sets available here - [blade-icons](https://github.com/blade-ui-kit/blade-icons).
@@ -81,7 +77,7 @@ const { fontFamily } = require('tailwindcss/defaultTheme')
 module.exports = {
     purge: [
         './resources/**/*.blade.php',
-        './vendor/neerajsohal/slate/resources/views/components/**/*.blade.php',
+        './vendor/electrik/slate/resources/views/components/**/*.blade.php',
     ],
     theme: {
         extend: {
@@ -116,5 +112,3 @@ For example, for badge using the following will generate badges
 <x-slate::badge color="success" size="sm">small badge</x-slate::badge> 
 <x-slate::badge color="success" size="lg">large badge</x-slate::badge> 
 ```
-
-![badges](https://i.postimg.cc/zXq4011d/Screenshot-2021-12-22-at-12-29-41.png)

composer.json

@@ -7,7 +7,7 @@
             "email": "hello@neerajkumar.name"
         }
     ],
-	"version": "0.1.0",
+	"version": "1.0.0",
     "require": {
         "php": "^7.4|^8.0|^8.1|^8.2|^8.3",
         "illuminate/support": "^7.0|^8.0|^9.0|^10.0|^11.0",

resources/views/components/alert.blade.php

@@ -8,38 +8,18 @@
 ])
 
 @php
-// Define size classes
-$sizes = [
-    'sm' => 'px-3 py-2 text-sm',
-    'md' => 'px-4 py-3 text-base', // Default size
-    'lg' => 'px-5 py-4 text-lg',
-];
-
-$sizeClass = $sizes[$size] ?? $sizes['md'];
-
-// Handle black and white colors explicitly
-if (in_array($color, ['black', 'white'])) {
-    $colorClasses = $outlined
-        ? ($color === 'black' 
-            ? 'border border-white text-black dark:border-black dark:text-white' 
-            : 'border border-black text-black dark:border-white dark:text-white')
-        : ($color === 'black' 
-            ? 'bg-black text-white dark:bg-white dark:text-black' 
-            : 'bg-white text-black dark:bg-black dark:text-white');
-} else {
-    // Handle other colors dynamically
-    $colorClasses = $outlined
-        ? "border border-{$color}-600 text-{$color}-600 dark:border-{$color}-400 dark:text-{$color}-200"
-        : "bg-{$color}-100 text-{$color}-800 dark:bg-{$color}-900 dark:text-{$color}-200";
-}
 
+use Electrik\Slate\SlateUiHelper;
+
+$alertClasses = SlateUIHelper::getAlertClasses($size, $color, $outlined, $fullWidth);
 $fullWidthClass = $fullWidth ? 'w-full mx-0 px-2' : 'rounded-md shadow-sm';
 
 // Dismissible button class
 $dismissButtonClass = 'text-current hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:hover:text-neutral-300';
 
 // Merge all classes
-$classes = implode(' ', [$sizeClass, $colorClasses, $fullWidthClass, 'flex items-center justify-between']);
+$classes = implode(' ', [$alertClasses, 'flex items-center justify-between']);
+
 @endphp
 
 <div x-data="{ alertDismissed: false }" x-show="!alertDismissed" {{ $attributes->merge(['class' => $classes]) }}>

resources/views/components/button.blade.php

@@ -9,12 +9,13 @@
     'icon' => null,
     'iconPosition' => 'before',
     'loading' => false,
+    'fullWidth' => false,
 ])
 
 @php
 use Electrik\Slate\SlateUiHelper;
 
-$classes = SlateUiHelper::getButtonClasses($size, $color, $outlined, $rounded, $disabled, $loading);
+$classes = SlateUiHelper::getButtonClasses($size, $color, $outlined, $rounded, $disabled, $loading, $fullWidth);
 $iconColor = (!$outlined) ? 'white' : $color;
 @endphp
 

resources/views/components/card.blade.php

@@ -6,60 +6,28 @@
     'footer' => null, // Optional footer content
     'icon' => null, // Optional icon in the header
     'iconPosition' => 'before',
+    'rounded' => true,
 ])
 
 @php
-// Define size classes with reduced padding
-$sizes = [
-    'sm' => 'p-2 text-sm',
-    'md' => 'p-2 text-base', // Reduced padding for default size
-    'lg' => 'p-2 text-lg',
-];
+use Electrik\Slate\SlateUiHelper;
 
-$sizeClass = $sizes[$size] ?? $sizes['md'];
+$cardClasses = SlateUiHelper::getCardClasses($size, $color, $outlined, $rounded);
+$borderClasses = SlateUiHelper::getBorderColor($color, $outlined);
 
-// Handle black and white colors explicitly
-if (in_array($color, ['black', 'white'])) {
-    $colorClass = $outlined
-        ? ($color === 'black'
-            ? 'border border-black text-black dark:border-white dark:text-white'  // Black outlined
-            : 'border border-black text-black dark:bg-black dark:text-white dark:border-white')  // White outlined
-        : ($color === 'black'
-            ? 'bg-black text-white dark:bg-white dark:text-black'  // Black filled
-            : 'bg-white text-black dark:bg-black dark:text-white'); // White filled
-    $iconColor = $color === 'black' ? 'white' : 'black'; // Icon color adjustment
-    $textColorClass = $color === 'black' 
-        ? 'text-white dark:text-black' 
-        : 'text-black dark:text-white';
-    $borderColorClass = $color === 'black' 
-        ? 'border-neutral-200 dark:border-neutral-700' 
-        : 'border-neutral-200 dark:border-neutral-700';
-} else {
-    // Handle other colors dynamically
-    $colorClass = $outlined
-        ? "border border-{$color}-600 text-{$color}-600 dark:border-{$color}-400 dark:text-{$color}-200"
-        : "bg-{$color}-500 text-white dark:bg-{$color}-700 dark:text-neutral-200";
-    $iconColor = $outlined ? "{$color}-600" : 'white'; // Default icon color
-    $textColorClass = $outlined 
-        ? "text-{$color}-600 dark:text-{$color}-200" 
-        : "text-white dark:text-neutral-200";
-    $borderColorClass = "border-{$color}-600 dark:border-{$color}-400"; // Border color based on the color prop
-}
-
-$roundedClass = 'rounded-lg'; // Consistent rounded corners for cards
 @endphp
 
-<div {{ $attributes->merge(['class' => "$sizeClass $colorClass $roundedClass $textColorClass"]) }}>
+<div {{ $attributes->merge(['class' => "$cardClasses"]) }}>
     @if ($header)
-        <div class="flex items-center {{ $borderColorClass }} border-b px-2 py-2">
+        <div class="flex items-center {{ $borderClasses }} border-b px-2 py-2">
             @if ($icon && $iconPosition == 'before')
-                <x-slate::icon :icon="$icon" size="sm" color="{{ $iconColor }}" darkColor="{{ $iconColor }}" class="mr-2" />
+                <x-slate::icon :icon="$icon" size="sm" class="mr-2" />
             @endif
             <div class="flex-1">
                 {{ $header }}
             </div>
             @if ($icon && $iconPosition == 'after')
-                <x-slate::icon :icon="$icon" size="sm" color="{{ $iconColor }}" darkColor="{{ $iconColor }}" class="ml-2" />
+                <x-slate::icon :icon="$icon" size="sm" class="ml-2" />
             @endif
         </div>
     @endif

resources/views/components/header.blade.php

@@ -0,0 +1,37 @@
+@props([
+    'color' => 'primary',
+    'shadow' => false,
+    'sticky' => false,
+    'fullWidth' => false,
+    'size' => 'md',
+])
+@php
+
+use Electrik\Slate\SlateUiHelper;
+
+$headerClass = SlateUIHelper::getHeaderClasses($size, $color, $shadow, $fullWidth);
+
+
+// Merge all classes
+$classes = implode(' ', [$headerClass, 'flex items-center justify-between']);
+
+@endphp
+<div 
+    {{ $attributes->merge(['class' => $classes]) }}
+>
+	<div class="flex-1 min-w-0">
+		@if(isset($title))
+			{{ $title }}
+		@endif
+		@if(isset($meta))
+		<div class="mt-2 flex flex-col">
+			{{ $meta }}
+		</div>
+		@endif
+	</div>
+	<div class="flex space-x-4">
+		@if(isset($actions))
+			{{ $actions }}
+		@endif
+	</div>
+</div>

resources/views/components/shell.blade.php

@@ -1,17 +1,36 @@
 <div x-data="{ sidebarOpen: true }" @toggle-sidebar.window="sidebarOpen = !sidebarOpen" class="flex min-h-full overflow-hidden">
     <!-- Primary Sidebar -->
     @if(isset($primarySidebar))
-    <div class="flex flex-col w-14 lg:w-16 items-center py-4 bg-neutral-200 dark:bg-black">
+    <div class="flex flex-col w-14 lg:w-16 items-center bg-neutral-200 dark:bg-black">
         {{ $primarySidebar ?? '' }}
     </div>
     @endif
 
     <!-- Secondary Sidebar -->
     @if(isset($sidebar))
     <div :class="sidebarOpen ? 'w-64' : 'w-0'" class="bg-neutral-100 dark:bg-black dark:border-l-[1px] dark:border-neutral-900/60 dark:border-r-[1px] transition-width duration-300 overflow-hidden">
-        <div class="py-4 space-y-2">
+        @if(isset($navbar))
             {{ $sidebar ?? '' }}
-        </div>
+        @else
+            @php
+                // Get the current route name
+                $currentRouteName = Route::currentRouteName();
+
+                // Get the root route name (everything before the first dot)
+                $rootRouteName = explode('.', $currentRouteName)[0];
+
+                // Set the path to the sidebar file based on the root route name
+                $sidebarFilePath = "includes.livewire.sidebar.{$rootRouteName}";
+            @endphp
+
+            {{-- Include the sidebar file if it exists --}}
+            @if(View::exists($sidebarFilePath))
+                @include($sidebarFilePath)
+            @else
+                {{-- Optional: Display a default sidebar or an error message --}}
+
+            @endif
+        @endif
     </div>
     @endif