@widgetic/design-system 0.3.78 → 0.3.79

package/README.md

@@ -160,243 +160,4 @@ The global styles load the necessary `@font-face` rules. You can apply typograph
 <h1 class="h1">Main Title</h1>
 <p class="body-medium">This is body text.</p>
 <span class="subtext">Some smaller text.</span>
-```
-
-## Grid System
-
-The design system implements three distinct responsive grid layouts:
-
-1. Site Grid
-2. Dashboard Grid
-3. App Grid
-
-### Grid Breakpoints
-- Desktop: > 744px
-- Tablet: 393px - 744px
-- Mobile: ≤ 393px
-
-### 1. Site Grid
-
-**Desktop (>744px)**
-- 12 columns
-- 144px margins
-- 24px gutters
-- Stretching columns with auto width
-
-**Tablet (≤744px)**
-- 8 columns
-- 32px margins
-- 16px gutters
-- Stretching columns with auto width
-
-**Mobile (≤393px)**
-- 4 columns
-- 16px margins
-- 16px gutters
-- Stretching columns with auto width
-
-### 2. Dashboard Grid
-
-**Desktop (>744px)**
-- Header: 12 columns, 24px margins, 20px gutters
-- Sidebar: 240px fixed width
-- Main Content: 12 columns, 24px margins, 20px gutters
-- 56px header height
-
-**Tablet (≤744px)**
-- Header: 8 columns
-- Sidebar: 200px fixed width
-- Main Content: 8 columns
-- 16px margins and gutters
-
-**Mobile (≤393px)**
-- Header: 4 columns
-- Sidebar replaced with menu component
-- Main Content: 4 columns
-- 16px margins and gutters
-
-### 3. App Grid
-
-**Desktop (>744px)**
-- Header: 12 columns, 24px margins, 20px gutters
-- Main Content: 12 columns, 144px margins, 20px gutters
-- 56px header height
-
-**Tablet (≤744px)**
-- Header: 8 columns
-- Main Content: 8 columns, 32px margins
-- 16px gutters
-
-**Mobile (≤393px)**
-- Header: 4 columns
-- Menu component added below header
-- Main Content: 4 columns
-- 16px margins and gutters
-
-### Usage Example
-
-```svelte
-<!-- Site Grid -->
-<div class="site-grid">
-  <div class="grid-margin-left"></div>
-  <header class="grid-header">Header Content</header>
-  <main class="grid-main">Main Content</main>
-  <footer class="grid-footer">Footer Content</footer>
-  <div class="grid-margin-right"></div>
-</div>
-
-<!-- Dashboard Grid -->
-<div class="dashboard-grid">
-  <div class="grid-margin-left"></div>
-  <header class="dashboard-header-grid">
-    <!-- Header content with 12/8/4 columns based on viewport -->
-  </header>
-  <nav class="grid-sidebar">
-    <!-- Sidebar content (hidden on mobile) -->
-  </nav>
-  <main class="dashboard-main-grid">
-    <!-- Main content with 12/8/4 columns based on viewport -->
-  </main>
-  <div class="grid-margin-right"></div>
-  <!-- Mobile menu appears automatically on small screens -->
-  <div class="grid-menu">
-    <!-- Mobile menu content -->
-  </div>
-</div>
-
-<!-- App Grid -->
-<div class="app-grid">
-  <div class="grid-margin-left"></div>
-  <header class="app-header-grid">
-    <!-- Header content with 12/8/4 columns based on viewport -->
-  </header>
-  <main class="app-main-grid">
-    <!-- Main content with 12/8/4 columns based on viewport -->
-  </main>
-  <div class="grid-margin-right"></div>
-  <!-- Mobile menu appears automatically on small screens -->
-  <div class="grid-menu">
-    <!-- Mobile menu content -->
-  </div>
-</div>
-```
-
-### Grid Area Classes
-The following classes are available to position elements within the grid:
-```css
-.grid-header      /* Header area */
-.grid-main        /* Main content area */
-.grid-sidebar     /* Sidebar area (dashboard only) */
-.grid-footer      /* Footer area (site only) */
-.grid-toolbar     /* Toolbar area (app only) */
-.grid-margin-left /* Left margin area */
-.grid-margin-right/* Right margin area */
-.grid-menu        /* Mobile menu area */
-.grid-gap         /* Gap area (dashboard only) */
-```
-
-The grid system is designed to maintain consistent spacing and layout across different viewport sizes while adapting to the specific needs of each layout type (site, dashboard, and app).
-
-## DeleteConfirmation Component
-
-The `DeleteConfirmation` component is a reusable confirmation dialog that can be used across different parts of the project for confirming deletion actions.
-
-### Features
-
-- Independent of any specific store or state management system
-- Customizable title, message, and button labels
-- Works with any type of items to be deleted
-- Dispatches events for both confirmation and cancellation
-
-### Usage
-
-```svelte
-<script>
-  import { DeleteConfirmation } from '@widgetic/design-system/components';
-  
-  let showDeleteConfirmation = false;
-  let itemsToDelete = [
-    { id: '1', name: 'Document.pdf', type: 'file' },
-    { id: '2', name: 'Images', type: 'folder' }
-  ];
-  
-  function handleDelete(event) {
-    const deletedItems = event.detail.items;
-    console.log('Items to delete:', deletedItems);
-    // Perform deletion logic here
-  }
-  
-  function handleCancel() {
-    showDeleteConfirmation = false;
-    console.log('Deletion cancelled');
-  }
-</script>
-
-<button on:click={() => showDeleteConfirmation = true}>
-  Delete Items
-</button>
-
-<DeleteConfirmation
-  bind:isOpen={showDeleteConfirmation}
-  items={itemsToDelete}
-  modalId="my-delete-confirmation"
-  on:delete={handleDelete}
-  on:cancel={handleCancel}
-/>
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | boolean | `false` | Controls the visibility of the modal |
-| `items` | array | `[]` | Array of items to be deleted |
-| `title` | string | `''` | Custom title for the modal (autogenerated if empty) |
-| `message` | string | `''` | Custom message for the modal (autogenerated if empty) |
-| `confirmLabel` | string | `'Confirm'` | Label for the confirm button |
-| `cancelLabel` | string | `'Cancel'` | Label for the cancel button |
-| `width` | string | `'410px'` | Width of the modal |
-| `height` | string | `'168px'` | Height of the modal |
-| `modalId` | string | `'delete-confirmation-modal'` | ID for targeting the modal |
-
-### Events
-
-- `delete` - Dispatched when the user confirms deletion, with `items` in the event detail
-- `cancel` - Dispatched when the user cancels deletion
-
-### Custom Title and Message Example
-
-You can provide custom title and message for specific contexts:
-
-```svelte
-<script>
-  import { DeleteConfirmation } from '@widgetic/design-system/components';
-  
-  let showDeleteConfirmation = false;
-  let selectedItems = [
-    { id: '1', name: 'Document.pdf', type: 'file' },
-    { id: '2', name: 'Images', type: 'folder' }
-  ];
-  
-  function handleDelete(event) {
-    const deletedItems = event.detail.items;
-    console.log('Items to delete:', deletedItems);
-    // Perform deletion logic here
-  }
-  
-  function handleCancel() {
-    showDeleteConfirmation = false;
-    console.log('Deletion cancelled');
-  }
-</script>
-
-<DeleteConfirmation 
-  bind:isOpen={showDeleteConfirmation}
-  items={selectedItems}
-  title="Delete Assets"
-  message="These assets will be permanently deleted. This action cannot be undone."
-  confirmLabel="Delete Permanently"
-  on:delete={handleDelete}
-  on:cancel={handleCancel}
-/>
-```
+```

package/dist/styles/global.css

@@ -571,6 +571,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   /* Modal Button Styles */
   .modal-btn-primary {
     @apply !h6 !inline-flex !items-center !justify-center;
+    cursor: pointer;
     padding: 0 16px !important;
     min-height: 34px !important;
     border-radius: var(--radius-pill) !important;
@@ -587,6 +588,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 
   .modal-btn-secondary {
     @apply !h6 !inline-flex !items-center !justify-center;
+    cursor: pointer;
     padding: 0 16px !important;
     min-height: 34px !important;
     border-radius: var(--radius-pill) !important;
@@ -624,6 +626,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   /* Primary Button - Base styfles */
   .btn-primary {
     @apply !inline-flex !items-center !justify-center !gap-2;
+    cursor: pointer;
     padding: 8px 16px !important;
     height: 34px !important;
     border-radius: var(--radius-small) !important;
@@ -672,6 +675,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   /* Secondary Button */
   .btn-secondary {
     @apply !h6 !inline-flex !items-center !justify-center !gap-2;
+    cursor: pointer;
     padding: 0 16px !important;
     height: 34px !important;
     border-radius: var(--radius-small) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.3.78",
+	"version": "0.3.79",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",