@mhmo91/schmancy 0.3.1 → 0.3.3

package/ai/boat.md

@@ -31,25 +31,25 @@ The boat component is a bottom sheet that slides up from the bottom of the scree
     Boat Title
   </schmancy-typography>
   
-  <schmancy-flex direction="column" gap="md" class="p-4">
+  <div class="flex flex-col gap-4 p-4">
     <schmancy-typography>
       This is the main content of the boat component.
     </schmancy-typography>
-  </schmancy-flex>
+  </div>
 </schmancy-boat>
 ```
 
 ### With Icon in Header
 ```html
 <schmancy-boat state="minimized" @change="${(e) => console.log(e.detail)}">
-  <schmancy-flex slot="header" gap="sm" content="center">
+  <div slot="header" class="flex gap-2 justify-center">
     <schmancy-icon>info</schmancy-icon>
     <schmancy-typography variant="title">Settings</schmancy-typography>
-  </schmancy-flex>
+  </div>
   
-  <schmancy-flex direction="column" gap="md" class="p-4">
+  <div class="flex flex-col gap-4 p-4">
     <!-- Settings content -->
-  </schmancy-flex>
+  </div>
 </schmancy-boat>
 ```
 

package/ai/index.md

@@ -23,7 +23,7 @@ This directory contains concise reference documentation for the Schmancy compone
 - [Dialog](./dialog.md) - Modal dialog boxes for confirmations and custom content
 - [Divider](./divider.md) - Visual separators with animations
 - [Dropdown](./dropdown.md) - Floating dropdown menus
-- [Layout](./layout.md) - Flex and grid layout components
+- [Layout](./layout.md) - **⚠️ DEPRECATED** - Use Tailwind CSS utilities instead
 - [List](./list.md) - Interactive lists with selection support
 - [Menu](./menu.md) - Context and dropdown menus
 - [Nav Drawer](./nav-drawer.md) - Responsive navigation drawer system

package/ai/layout.md

@@ -1,166 +1,187 @@
 # Schmancy Layout - AI Reference
 
-```js
-// Grid Layout
-<schmancy-grid
-  columns="3"                    // Number of columns or template
-  rows="auto"                    // Number of rows or template
-  gap="16px"                     // Gap between items
-  column-gap="16px"              // Column-specific gap
-  row-gap="16px"                 // Row-specific gap
-  justify-items="start|center|end|stretch"
-  align-items="start|center|end|stretch"
-  justify-content="start|center|end|space-between|space-around|space-evenly"
-  align-content="start|center|end|space-between|space-around|space-evenly">
-  
+## ⚠️ DEPRECATION NOTICE
+
+The following layout components are **deprecated** and will be removed in a future version:
+- `<schmancy-grid>` - Use Tailwind CSS grid classes instead
+- `<schmancy-flex>` - Use Tailwind CSS flex classes instead  
+- `<sch-flex>` - Use Tailwind CSS flex classes instead
+- Layout base class - Use Tailwind utilities directly
+
+### Migration Guide
+
+```html
+<!-- OLD (deprecated) -->
+<schmancy-grid columns="3" gap="16px">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
 </schmancy-grid>
 
-// Advanced grid with template
-<schmancy-grid
-  columns="repeat(12, 1fr)"
-  rows="auto auto 1fr"
-  template-areas="
-    'header header header header'
-    'sidebar content content content'
-    'footer footer footer footer'
-  ">
-  <div style="grid-area: header">Header</div>
-  <div style="grid-area: sidebar">Sidebar</div>
-  <div style="grid-area: content">Content</div>
-  <div style="grid-area: footer">Footer</div>
-</schmancy-grid>
-
-// Flex Layout
-<schmancy-flex
-  direction="row|column|row-reverse|column-reverse"
-  wrap="nowrap|wrap|wrap-reverse"
-  justify-content="start|center|end|space-between|space-around|space-evenly"
-  align-items="start|center|end|stretch|baseline"
-  align-content="start|center|end|space-between|space-around|space-evenly"
-  gap="16px"                     // Gap between items
-  column-gap="16px"              // Column-specific gap
-  row-gap="16px">                // Row-specific gap
-  
+<!-- NEW (recommended) -->
+<div class="grid grid-cols-3 gap-4">
   <div>Item 1</div>
   <div>Item 2</div>
-  <div style="flex: 1">Flexible Item</div>
+  <div>Item 3</div>
+</div>
+
+<!-- OLD (deprecated) -->
+<schmancy-flex direction="row" gap="16px" justify-content="space-between">
+  <div>Left</div>
+  <div>Right</div>
 </schmancy-flex>
 
-// Responsive layouts (using attributes)
-<schmancy-grid
-  columns="1"
-  columns-md="2"
-  columns-lg="3"
-  columns-xl="4"
-  gap="8px"
-  gap-md="16px"
-  gap-lg="24px">
-  
-  <!-- Content -->
-</schmancy-grid>
+<!-- NEW (recommended) -->
+<div class="flex flex-row gap-4 justify-between">
+  <div>Left</div>
+  <div>Right</div>
+</div>
+```
 
-<schmancy-flex
-  direction="column"
-  direction-md="row"
-  align-items="center"
-  justify-content-md="space-between">
-  
-  <!-- Content -->
-</schmancy-flex>
+## Modern Layout Approach with Tailwind CSS
 
-// Scroll Container
-<schmancy-scroll
-  direction="vertical|horizontal|both"
-  scrollbar="auto|always|hover|none">
-  
-  <!-- Scrollable content -->
-</schmancy-scroll>
+Instead of using deprecated layout components, use Tailwind CSS utilities directly:
 
-// Layout v2 Components (enhanced versions)
-<schmancy-flex-v2
-  display="flex|inline-flex"
-  direction="row|column"
-  wrap="nowrap|wrap|wrap-reverse"
-  justify="flex-start|flex-end|center|space-between|space-around|space-evenly"
-  items="flex-start|flex-end|center|stretch|baseline"
-  content="flex-start|flex-end|center|space-between|space-around|space-evenly"
-  gap="none|xs|sm|md|lg|xl">
-  
-  <!-- Content -->
-</schmancy-flex-v2>
-
-<schmancy-grid-v2
-  display="grid|inline-grid"
-  template-columns="1fr 1fr|repeat(3, 1fr)"
-  template-rows="auto|1fr auto"
-  template-areas="'header header' 'sidebar content' 'footer footer'"
-  gap="none|xs|sm|md|lg|xl"
-  justify-content="start|end|center|stretch|space-around|space-between|space-evenly"
-  align-content="start|end|center|stretch|space-around|space-between|space-evenly"
-  justify-items="start|end|center|stretch"
-  align-items="start|end|center|stretch">
-  
-  <!-- Content -->
-</schmancy-grid-v2>
-
-// Examples
-// Responsive grid layout
-<schmancy-grid 
-  columns="1" 
-  columns-md="2" 
-  columns-lg="4" 
-  gap="16px">
+### Grid Layouts
+```html
+<!-- Basic grid -->
+<div class="grid grid-cols-3 gap-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</div>
+
+<!-- Responsive grid -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
   <div>Card 1</div>
   <div>Card 2</div>
   <div>Card 3</div>
   <div>Card 4</div>
-</schmancy-grid>
+</div>
+
+<!-- Grid with template areas -->
+<div class="grid grid-rows-[auto_1fr_auto] grid-cols-[250px_1fr] h-screen">
+  <header class="col-span-2">Header</header>
+  <aside>Sidebar</aside>
+  <main>Content</main>
+  <footer class="col-span-2">Footer</footer>
+</div>
+```
 
-// Flex layout for a form
-<schmancy-flex
-  direction="column"
-  gap="16px">
-  <h2>Contact Form</h2>
+### Flex Layouts
+```html
+<!-- Basic flex -->
+<div class="flex gap-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div class="flex-1">Flexible Item</div>
+</div>
+
+<!-- Column direction with alignment -->
+<div class="flex flex-col items-center gap-4">
+  <h2>Title</h2>
+  <p>Content</p>
+  <button>Action</button>
+</div>
+
+<!-- Responsive flex -->
+<div class="flex flex-col md:flex-row items-center md:justify-between gap-4">
+  <div>Logo</div>
+  <nav class="flex gap-2">
+    <a href="#">Link 1</a>
+    <a href="#">Link 2</a>
+  </nav>
+</div>
+```
+
+### Common Layout Patterns
+
+```html
+<!-- Form layout -->
+<form class="flex flex-col gap-4 max-w-md mx-auto">
+  <h2 class="text-2xl font-bold">Contact Form</h2>
   <schmancy-input label="Name"></schmancy-input>
   <schmancy-input label="Email"></schmancy-input>
   <schmancy-textarea label="Message"></schmancy-textarea>
   
-  <schmancy-flex
-    direction="row"
-    justify-content="end"
-    gap="8px">
-    <schmancy-button kind="secondary">Cancel</schmancy-button>
-    <schmancy-button kind="primary">Submit</schmancy-button>
-  </schmancy-flex>
-</schmancy-flex>
-
-// App layout with header, sidebar and content
-<schmancy-grid
-  style="height: 100vh"
-  template-areas="
-    'header header'
-    'sidebar content'
-  "
-  template-rows="64px 1fr"
-  template-columns="250px 1fr">
-  
-  <div style="grid-area: header">
-    <schmancy-appbar>App Title</schmancy-appbar>
+  <div class="flex gap-2 justify-end">
+    <schmancy-button variant="outlined">Cancel</schmancy-button>
+    <schmancy-button variant="filled">Submit</schmancy-button>
   </div>
-  
-  <div style="grid-area: sidebar">
-    <schmancy-list>
-      <schmancy-list-item>Dashboard</schmancy-list-item>
-      <schmancy-list-item>Settings</schmancy-list-item>
-      <schmancy-list-item>Profile</schmancy-list-item>
-    </schmancy-list>
+</form>
+
+<!-- App layout -->
+<div class="grid grid-rows-[auto_1fr] h-screen">
+  <header class="border-b">
+    <!-- Navigation -->
+  </header>
+  <div class="grid grid-cols-[250px_1fr]">
+    <aside class="border-r">
+      <!-- Sidebar -->
+    </aside>
+    <main class="overflow-auto p-4">
+      <!-- Content -->
+    </main>
   </div>
-  
-  <schmancy-scroll style="grid-area: content">
-    <!-- Main content -->
-  </schmancy-scroll>
-</schmancy-grid>
+</div>
+
+<!-- Card grid -->
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+  <schmancy-card>Card 1</schmancy-card>
+  <schmancy-card>Card 2</schmancy-card>
+  <schmancy-card>Card 3</schmancy-card>
+</div>
+```
+
+### Useful Tailwind Classes
+
+#### Grid
+- `grid` - Display grid
+- `grid-cols-{n}` - Number of columns
+- `grid-rows-{n}` - Number of rows
+- `gap-{size}` - Gap between items
+- `col-span-{n}` - Column span
+- `row-span-{n}` - Row span
+- `place-items-{align}` - Align items
+- `place-content-{align}` - Align content
+
+#### Flex
+- `flex` - Display flex
+- `flex-row` / `flex-col` - Direction
+- `flex-wrap` / `flex-nowrap` - Wrapping
+- `items-{align}` - Align items
+- `justify-{align}` - Justify content
+- `gap-{size}` - Gap between items
+- `flex-1` / `flex-none` - Flex grow/shrink
+
+#### Spacing
+- `p-{size}` - Padding
+- `m-{size}` - Margin
+- `space-x-{size}` - Horizontal spacing
+- `space-y-{size}` - Vertical spacing
+
+#### Sizing
+- `w-{size}` - Width
+- `h-{size}` - Height
+- `min-w-{size}` - Min width
+- `max-w-{size}` - Max width
+- `min-h-{size}` - Min height
+- `max-h-{size}` - Max height
+
+## Non-Deprecated Components
+
+### Scroll Container (if available)
+```html
+<schmancy-scroll
+  direction="vertical|horizontal|both"
+  scrollbar="auto|always|hover|none">
+  <!-- Scrollable content -->
+</schmancy-scroll>
+```
+
+For most cases, use Tailwind's overflow utilities instead:
+```html
+<div class="overflow-auto h-64">
+  <!-- Scrollable content -->
+</div>
 ```

package/dist/ai/boat.md

@@ -31,25 +31,25 @@ The boat component is a bottom sheet that slides up from the bottom of the scree
     Boat Title
   </schmancy-typography>
   
-  <schmancy-flex direction="column" gap="md" class="p-4">
+  <div class="flex flex-col gap-4 p-4">
     <schmancy-typography>
       This is the main content of the boat component.
     </schmancy-typography>
-  </schmancy-flex>
+  </div>
 </schmancy-boat>
 ```
 
 ### With Icon in Header
 ```html
 <schmancy-boat state="minimized" @change="${(e) => console.log(e.detail)}">
-  <schmancy-flex slot="header" gap="sm" content="center">
+  <div slot="header" class="flex gap-2 justify-center">
     <schmancy-icon>info</schmancy-icon>
     <schmancy-typography variant="title">Settings</schmancy-typography>
-  </schmancy-flex>
+  </div>
   
-  <schmancy-flex direction="column" gap="md" class="p-4">
+  <div class="flex flex-col gap-4 p-4">
     <!-- Settings content -->
-  </schmancy-flex>
+  </div>
 </schmancy-boat>
 ```
 

package/dist/ai/index.md

@@ -23,7 +23,7 @@ This directory contains concise reference documentation for the Schmancy compone
 - [Dialog](./dialog.md) - Modal dialog boxes for confirmations and custom content
 - [Divider](./divider.md) - Visual separators with animations
 - [Dropdown](./dropdown.md) - Floating dropdown menus
-- [Layout](./layout.md) - Flex and grid layout components
+- [Layout](./layout.md) - **⚠️ DEPRECATED** - Use Tailwind CSS utilities instead
 - [List](./list.md) - Interactive lists with selection support
 - [Menu](./menu.md) - Context and dropdown menus
 - [Nav Drawer](./nav-drawer.md) - Responsive navigation drawer system