@getmicdrop/svelte-components 5.3.10 → 5.3.13

package/dist/index.js

@@ -1,223 +1,237 @@
-// =============================================================================
-// PRIMITIVES - Pure visual components (Layer 1)
-// =============================================================================
-
-// Accordion
-export { default as Accordion } from './primitives/Accordion/Accordion.svelte';
-export { default as AccordionItem } from './primitives/Accordion/AccordionItem.svelte';
-
-// Alert
-export { default as Alert } from './primitives/Alert/Alert.svelte';
-
-// Avatar
-export { default as Avatar } from './primitives/Avatar/Avatar.svelte';
-
-// Badge
-export { default as Badge } from './primitives/Badges/Badge.svelte';
-
-// BottomSheet
-export { default as BottomSheet } from './primitives/BottomSheet/BottomSheet.svelte';
-
-// Breadcrumb
-export { default as Breadcrumb } from './primitives/Breadcrumb/Breadcrumb.svelte';
-
-// Button
-export { default as Button } from './primitives/Button/Button.svelte';
-export { default as ButtonSaveDemo } from './primitives/Button/ButtonSaveDemo.svelte';
-
-// Card
-export { default as Card } from './primitives/Card.svelte';
-
-// Checkbox
-export { default as Checkbox } from './primitives/Checkbox/Checkbox.svelte';
-
-// DarkModeToggle
-export { default as DarkModeToggle } from './primitives/DarkModeToggle.svelte';
-
-// Drawer
-export { default as Drawer } from './primitives/Drawer/Drawer.svelte';
-
-// Dropdown
-export { default as Dropdown } from './primitives/Dropdown/Dropdown.svelte';
-export { default as DropdownItem } from './primitives/Dropdown/DropdownItem.svelte';
-
-// Icons
-export { default as Icon } from './primitives/Icons/Icon.svelte';
-export { default as ArrowLeft } from './primitives/Icons/ArrowLeft.svelte';
-export { default as ArrowRight } from './primitives/Icons/ArrowRight.svelte';
-export { default as Availability } from './primitives/Icons/Availability.svelte';
-export { default as Back } from './primitives/Icons/Back.svelte';
-export { default as CheckCircle } from './primitives/Icons/CheckCircle.svelte';
-export { default as CheckCircleOutline } from './primitives/Icons/CheckCircleOutline.svelte';
-export { default as ChevronLeft } from './primitives/Icons/ChevronLeft.svelte';
-export { default as ChevronRight } from './primitives/Icons/ChevronRight.svelte';
-export { default as Copy } from './primitives/Icons/Copy.svelte';
-export { default as Cross } from './primitives/Icons/Cross.svelte';
-export { default as DownArrow } from './primitives/Icons/DownArrow.svelte';
-export { default as ErrorCircle } from './primitives/Icons/ErrorCircle.svelte';
-export { default as FacebookIcon } from './primitives/Icons/FacebookIcon.svelte';
-export { default as Home } from './primitives/Icons/Home.svelte';
-export { default as Info } from './primitives/Icons/Info.svelte';
-export { default as InstagramIcon } from './primitives/Icons/InstagramIcon.svelte';
-export { default as Message } from './primitives/Icons/Message.svelte';
-export { default as MoonIcon } from './primitives/Icons/MoonIcon.svelte';
-export { default as More } from './primitives/Icons/More.svelte';
-export { default as MoreHori } from './primitives/Icons/MoreHori.svelte';
-export { default as Notification } from './primitives/Icons/Notification.svelte';
-export { default as Payment } from './primitives/Icons/Payment.svelte';
-export { default as Profile } from './primitives/Icons/Profile.svelte';
-export { default as Reload } from './primitives/Icons/Reload.svelte';
-export { default as Shows } from './primitives/Icons/Shows.svelte';
-export { default as Signout } from './primitives/Icons/Signout.svelte';
-export { default as SunIcon } from './primitives/Icons/SunIcon.svelte';
-export { default as TiktokIcon } from './primitives/Icons/TiktokIcon.svelte';
-export { default as TwitterIcon } from './primitives/Icons/TwitterIcon.svelte';
-export { default as WarningIcon } from './primitives/Icons/WarningIcon.svelte';
-
-// Input (primitives only - Select, Textarea are here; recipes are in recipes/inputs)
-export { default as Input } from './primitives/Input/Input.svelte';
-export { default as Select } from './primitives/Input/Select.svelte';
-export { default as Textarea } from './primitives/Input/Textarea.svelte';
-
-// Label
-export { default as Label } from './primitives/Label/Label.svelte';
-
-// Modal (base only - composite modals are in recipes/modals)
-export { default as Modal } from './primitives/Modal/Modal.svelte';
-
-// Pagination
-export { default as Pagination } from './primitives/Pagination/Pagination.svelte';
-
-// Radio
-export { default as Radio } from './primitives/Radio/Radio.svelte';
-
-// Skeleton
-export { default as Skeleton } from './primitives/Skeleton/Skeleton.svelte';
-export { default as ImagePlaceholder } from './primitives/Skeleton/ImagePlaceholder.svelte';
-export { default as CardPlaceholder } from './primitives/Skeleton/CardPlaceholder.svelte';
-export { default as ListPlaceholder } from './primitives/Skeleton/ListPlaceholder.svelte';
-
-// Spinner
-export { default as Spinner } from './primitives/Spinner/Spinner.svelte';
-
-// Tabs
-export { default as Tabs } from './primitives/Tabs/Tabs.svelte';
-export { default as TabItem } from './primitives/Tabs/TabItem.svelte';
-
-// Toggle
-export { default as Toggle } from './primitives/Toggle.svelte';
-
-// Typography
-export { default as Typography } from './primitives/Typography/Typography.svelte';
-
-// ValidationError
-export { default as ValidationError } from './primitives/ValidationError.svelte';
-
-// =============================================================================
-// RECIPES - Domain-agnostic compositions (Layer 2)
-// =============================================================================
-
-// CropImage
-export { default as CropImage } from './recipes/CropImage/CropImage.svelte';
-
-// ImageUploader
-export { default as ImageUploader } from './recipes/ImageUploader/ImageUploader.svelte';
-
-// Feedback
-export { default as EmptyState } from './recipes/feedback/EmptyState/EmptyState.svelte';
-export { default as ErrorDisplay } from './recipes/feedback/ErrorDisplay.svelte';
-export { default as StatusIndicator } from './recipes/feedback/StatusIndicator/StatusIndicator.svelte';
-
-// Inputs (composite input components)
-export { default as MultiSelect } from './recipes/inputs/MultiSelect.svelte';
-export { default as OTPInput } from './recipes/inputs/OTPInput.svelte';
-export { default as PasswordInput } from './recipes/inputs/PasswordInput.svelte';
-export { default as PasswordStrengthIndicator } from './recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
-export { default as PlaceAutocomplete } from './recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte';
-export { default as Search } from './recipes/inputs/Search.svelte';
-export { default as SelectDropdown } from './recipes/inputs/SelectDropdown.svelte';
-
-// Modals (composite modal components)
-export { default as AlertModal } from './recipes/modals/AlertModal.svelte';
-export { default as ConfirmationModal } from './recipes/modals/ConfirmationModal.svelte';
-export { default as InputModal } from './recipes/modals/InputModal.svelte';
-export { default as ModalStateManager } from './recipes/modals/ModalStateManager.svelte';
-export { default as ModalTestWrapper } from './recipes/modals/ModalTestWrapper.svelte';
-export { default as StatusModal } from './recipes/modals/StatusModal.svelte';
-
-// SuperLogin
-export { default as SuperLogin } from './recipes/SuperLogin/SuperLogin.svelte';
-
-// Fields (form field compositions)
-export { default as CheckboxField } from './recipes/fields/CheckboxField.svelte';
-export { default as FormField } from './recipes/fields/FormField.svelte';
-export { default as RadioGroup } from './recipes/fields/RadioGroup.svelte';
-export { default as SelectField } from './recipes/fields/SelectField.svelte';
-export { default as TextareaField } from './recipes/fields/TextareaField.svelte';
-export { default as ToggleField } from './recipes/fields/ToggleField.svelte';
-
-// =============================================================================
-// PATTERNS - Layout & flow components (Layer 3)
-// =============================================================================
-
-// Forms
-export { default as FormActions } from './patterns/forms/FormActions.svelte';
-export { default as FormGrid } from './patterns/forms/FormGrid.svelte';
-export { default as FormSection } from './patterns/forms/FormSection.svelte';
-export { default as FormValidationSummary } from './patterns/forms/FormValidationSummary.svelte';
-
-// Navigation
-export { default as BottomNav } from './patterns/navigation/BottomNav.svelte';
-export { default as Header } from './patterns/navigation/Header.svelte';
-
-// Page
-export { default as PageHeader } from './patterns/page/PageHeader.svelte';
-export { default as PageLayout } from './patterns/page/PageLayout.svelte';
-export { default as PageLoader } from './patterns/page/PageLoader.svelte';
-export { default as SectionHeader } from './patterns/page/SectionHeader.svelte';
-
-// Data
-export { default as DataGrid } from './patterns/data/DataGrid.svelte';
-export { default as DataList } from './patterns/data/DataList.svelte';
-export { default as DataTable } from './patterns/data/DataTable.svelte';
-
-// Layout
-export { default as Grid } from './patterns/layout/Grid.svelte';
-export { default as Sidebar } from './patterns/layout/Sidebar.svelte';
-export { default as Stack } from './patterns/layout/Stack.svelte';
-
-// =============================================================================
-// CALENDAR - Domain components (deferred migration to apps)
-// =============================================================================
-
-export { default as MiniMonthCalendar } from './calendar/Calendar/MiniMonthCalendar.svelte';
-// Legacy alias for backward compatibility - will be removed in future version
-export { default as Calendar } from './calendar/Calendar/MiniMonthCalendar.svelte';
-
-export { default as PublicCard } from './calendar/PublicCard/PublicCard.svelte';
-export { default as MonthSwitcher } from './calendar/MonthSwitcher/MonthSwitcher.svelte';
-export { default as OrderSummary } from './calendar/OrderSummary/OrderSummary.svelte';
-export { default as ShowCard } from './calendar/ShowCard/ShowCard.svelte';
-export { default as AboutShow } from './calendar/AboutShow/AboutShow.svelte';
-export { default as FAQs } from './calendar/FAQs/FAQs.svelte';
-export { default as ShowTimeCard } from './calendar/ShowTimeCard/ShowTimeCard.svelte';
-
-// =============================================================================
-// NON-COMPONENT EXPORTS
-// =============================================================================
-
-// Note: config.js and telemetry.js removed - they use import.meta.env which
-// is Vite-specific. Apps should define their own config/telemetry locally.
-
-// Constants
-export * from './constants/formOptions.js';
-export * from './constants/validation.js';
-
-// Presets - Domain-to-color mappings for migration
-export * from './presets/index.js';
-
+// =============================================================================
+// PRIMITIVES - Pure visual components (Layer 1)
+// =============================================================================
+
+// Accordion
+export { default as Accordion } from './primitives/Accordion/Accordion.svelte';
+export { default as AccordionItem } from './primitives/Accordion/AccordionItem.svelte';
+
+// Alert
+export { default as Alert } from './primitives/Alert/Alert.svelte';
+
+// Avatar
+export { default as Avatar } from './primitives/Avatar/Avatar.svelte';
+
+// Badge
+export { default as Badge } from './primitives/Badges/Badge.svelte';
+
+// BottomSheet
+export { default as BottomSheet } from './primitives/BottomSheet/BottomSheet.svelte';
+
+// Breadcrumb
+export { default as Breadcrumb } from './primitives/Breadcrumb/Breadcrumb.svelte';
+
+// Button
+export { default as Button } from './primitives/Button/Button.svelte';
+export { default as ButtonSaveDemo } from './primitives/Button/ButtonSaveDemo.svelte';
+
+// Card
+export { default as Card } from './primitives/Card.svelte';
+
+// Checkbox
+export { default as Checkbox } from './primitives/Checkbox/Checkbox.svelte';
+
+// DarkModeToggle
+export { default as DarkModeToggle } from './primitives/DarkModeToggle.svelte';
+
+// Drawer
+export { default as Drawer } from './primitives/Drawer/Drawer.svelte';
+
+// Dropdown
+export { default as Dropdown } from './primitives/Dropdown/Dropdown.svelte';
+export { default as DropdownItem } from './primitives/Dropdown/DropdownItem.svelte';
+
+// Icons
+export { default as Icon } from './primitives/Icons/Icon.svelte';
+export { default as ArrowLeft } from './primitives/Icons/ArrowLeft.svelte';
+export { default as ArrowRight } from './primitives/Icons/ArrowRight.svelte';
+export { default as Availability } from './primitives/Icons/Availability.svelte';
+export { default as Back } from './primitives/Icons/Back.svelte';
+export { default as CheckCircle } from './primitives/Icons/CheckCircle.svelte';
+export { default as CheckCircleOutline } from './primitives/Icons/CheckCircleOutline.svelte';
+export { default as ChevronLeft } from './primitives/Icons/ChevronLeft.svelte';
+export { default as ChevronRight } from './primitives/Icons/ChevronRight.svelte';
+export { default as Copy } from './primitives/Icons/Copy.svelte';
+export { default as Cross } from './primitives/Icons/Cross.svelte';
+export { default as DownArrow } from './primitives/Icons/DownArrow.svelte';
+export { default as ErrorCircle } from './primitives/Icons/ErrorCircle.svelte';
+export { default as FacebookIcon } from './primitives/Icons/FacebookIcon.svelte';
+export { default as Home } from './primitives/Icons/Home.svelte';
+export { default as Info } from './primitives/Icons/Info.svelte';
+export { default as InstagramIcon } from './primitives/Icons/InstagramIcon.svelte';
+export { default as Message } from './primitives/Icons/Message.svelte';
+export { default as MoonIcon } from './primitives/Icons/MoonIcon.svelte';
+export { default as More } from './primitives/Icons/More.svelte';
+export { default as MoreHori } from './primitives/Icons/MoreHori.svelte';
+export { default as Notification } from './primitives/Icons/Notification.svelte';
+export { default as Payment } from './primitives/Icons/Payment.svelte';
+export { default as Profile } from './primitives/Icons/Profile.svelte';
+export { default as Reload } from './primitives/Icons/Reload.svelte';
+export { default as Shows } from './primitives/Icons/Shows.svelte';
+export { default as Signout } from './primitives/Icons/Signout.svelte';
+export { default as SunIcon } from './primitives/Icons/SunIcon.svelte';
+export { default as TiktokIcon } from './primitives/Icons/TiktokIcon.svelte';
+export { default as TwitterIcon } from './primitives/Icons/TwitterIcon.svelte';
+export { default as WarningIcon } from './primitives/Icons/WarningIcon.svelte';
+
+// Input (primitives only - Select, Textarea are here; recipes are in recipes/inputs)
+export { default as Input } from './primitives/Input/Input.svelte';
+export { default as Select } from './primitives/Input/Select.svelte';
+export { default as Textarea } from './primitives/Input/Textarea.svelte';
+
+// Label
+export { default as Label } from './primitives/Label/Label.svelte';
+
+// Modal (base only - composite modals are in recipes/modals)
+export { default as Modal } from './primitives/Modal/Modal.svelte';
+
+// Pagination
+export { default as Pagination } from './primitives/Pagination/Pagination.svelte';
+
+// Radio
+export { default as Radio } from './primitives/Radio/Radio.svelte';
+
+// Skeleton
+export { default as Skeleton } from './primitives/Skeleton/Skeleton.svelte';
+export { default as ImagePlaceholder } from './primitives/Skeleton/ImagePlaceholder.svelte';
+export { default as CardPlaceholder } from './primitives/Skeleton/CardPlaceholder.svelte';
+export { default as ListPlaceholder } from './primitives/Skeleton/ListPlaceholder.svelte';
+
+// Spinner
+export { default as Spinner } from './primitives/Spinner/Spinner.svelte';
+
+// Tabs
+export { default as Tabs } from './primitives/Tabs/Tabs.svelte';
+export { default as TabItem } from './primitives/Tabs/TabItem.svelte';
+
+// Toggle
+export { default as Toggle } from './primitives/Toggle.svelte';
+
+// Typography
+export { default as Typography } from './primitives/Typography/Typography.svelte';
+
+// ValidationError
+export { default as ValidationError } from './primitives/ValidationError.svelte';
+
+// =============================================================================
+// RECIPES - Domain-agnostic compositions (Layer 2)
+// =============================================================================
+
+// CropImage
+export { default as CropImage } from './recipes/CropImage/CropImage.svelte';
+
+// ImageUploader
+export { default as ImageUploader } from './recipes/ImageUploader/ImageUploader.svelte';
+
+// Feedback
+export { default as EmptyState } from './recipes/feedback/EmptyState/EmptyState.svelte';
+export { default as ErrorDisplay } from './recipes/feedback/ErrorDisplay.svelte';
+export { default as StatusIndicator } from './recipes/feedback/StatusIndicator/StatusIndicator.svelte';
+
+// Inputs (composite input components)
+export { default as MultiSelect } from './recipes/inputs/MultiSelect.svelte';
+export { default as OTPInput } from './recipes/inputs/OTPInput.svelte';
+export { default as PasswordInput } from './recipes/inputs/PasswordInput.svelte';
+export { default as PasswordStrengthIndicator } from './recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
+export { default as PlaceAutocomplete } from './recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte';
+export { default as Search } from './recipes/inputs/Search.svelte';
+export { default as SelectDropdown } from './recipes/inputs/SelectDropdown.svelte';
+
+// Modals (composite modal components)
+export { default as AlertModal } from './recipes/modals/AlertModal.svelte';
+export { default as ConfirmationModal } from './recipes/modals/ConfirmationModal.svelte';
+export { default as InputModal } from './recipes/modals/InputModal.svelte';
+export { default as ModalStateManager } from './recipes/modals/ModalStateManager.svelte';
+export { default as ModalTestWrapper } from './recipes/modals/ModalTestWrapper.svelte';
+export { default as StatusModal } from './recipes/modals/StatusModal.svelte';
+
+// SuperLogin
+export { default as SuperLogin } from './recipes/SuperLogin/SuperLogin.svelte';
+
+// Fields (form field compositions)
+export { default as CheckboxField } from './recipes/fields/CheckboxField.svelte';
+export { default as FormField } from './recipes/fields/FormField.svelte';
+export { default as RadioGroup } from './recipes/fields/RadioGroup.svelte';
+export { default as SelectField } from './recipes/fields/SelectField.svelte';
+export { default as TextareaField } from './recipes/fields/TextareaField.svelte';
+export { default as ToggleField } from './recipes/fields/ToggleField.svelte';
+
+// =============================================================================
+// PATTERNS - Layout & flow components (Layer 3)
+// =============================================================================
+
+// Forms
+export { default as FormActions } from './patterns/forms/FormActions.svelte';
+export { default as FormGrid } from './patterns/forms/FormGrid.svelte';
+export { default as FormSection } from './patterns/forms/FormSection.svelte';
+export { default as FormValidationSummary } from './patterns/forms/FormValidationSummary.svelte';
+
+// Navigation
+export { default as BottomNav } from './patterns/navigation/BottomNav.svelte';
+export { default as Header } from './patterns/navigation/Header.svelte';
+
+// Page
+export { default as PageHeader } from './patterns/page/PageHeader.svelte';
+export { default as PageLayout } from './patterns/page/PageLayout.svelte';
+export { default as PageLoader } from './patterns/page/PageLoader.svelte';
+export { default as SectionHeader } from './patterns/page/SectionHeader.svelte';
+
+// Data
+export { default as DataGrid } from './patterns/data/DataGrid.svelte';
+export { default as DataList } from './patterns/data/DataList.svelte';
+export { default as DataTable } from './patterns/data/DataTable.svelte';
+
+// Layout
+export { default as Grid } from './patterns/layout/Grid.svelte';
+export { default as Sidebar } from './patterns/layout/Sidebar.svelte';
+export { default as Stack } from './patterns/layout/Stack.svelte';
+
+// =============================================================================
+// CALENDAR - Domain components (deferred migration to apps)
+// =============================================================================
+
+export { default as MiniMonthCalendar } from './calendar/Calendar/MiniMonthCalendar.svelte';
+// Legacy alias for backward compatibility - will be removed in future version
+export { default as Calendar } from './calendar/Calendar/MiniMonthCalendar.svelte';
+
+export { default as PublicCard } from './calendar/PublicCard/PublicCard.svelte';
+export { default as MonthSwitcher } from './calendar/MonthSwitcher/MonthSwitcher.svelte';
+export { default as OrderSummary } from './calendar/OrderSummary/OrderSummary.svelte';
+export { default as ShowCard } from './calendar/ShowCard/ShowCard.svelte';
+export { default as AboutShow } from './calendar/AboutShow/AboutShow.svelte';
+export { default as FAQs } from './calendar/FAQs/FAQs.svelte';
+export { default as ShowTimeCard } from './calendar/ShowTimeCard/ShowTimeCard.svelte';
+
+// =============================================================================
+// NON-COMPONENT EXPORTS
+// =============================================================================
+
+// Note: config.js and telemetry.js removed - they use import.meta.env which
+// is Vite-specific. Apps should define their own config/telemetry locally.
+
+// Constants
+export * from './constants/formOptions.js';
+export * from './constants/validation.js';
+
+// Presets - Domain-to-color mappings for migration
+export * from './presets/index.js';
+
 // Utils / Actions
 export { portal } from './utils/portal.js';
+export * from './utils/utils.js';
+export * from './utils/utils/utils.js';
+export * from './utils/greetings.js';
+export * from './utils/imageValidation.js';
+export * from './utils/apiConfig.js';
+
+// Stores
+export * from './stores/toaster.js';
+export * from './stores/navigation.js';
+export * from './stores/auth.js';
+
+// Config & Telemetry
+export * from './config.js';
+export * from './telemetry.js';
 
 // Design Tokens
 export { typography } from './tokens/typography.js';

package/dist/patterns/data/DataGrid.svelte

@@ -1,45 +1,45 @@
-<script>
-  let {
-    items = [],
-    cols = 3,
-    gap = 4,
-    minWidth = null,
-    class: className = '',
-    children,
-  } = $props();
-
-  const colsClasses = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 sm:grid-cols-2',
-    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-    5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
-    6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
-  };
-
-  const gapClasses = {
-    2: 'gap-2',
-    3: 'gap-3',
-    4: 'gap-4',
-    5: 'gap-5',
-    6: 'gap-6',
-    8: 'gap-8'
-  };
-
-  let gridCols = $derived(colsClasses[cols] || colsClasses[3]);
-  let gridGap = $derived(gapClasses[gap] || gapClasses[4]);
-  let gridStyle = $derived(minWidth ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr))` : '');
-</script>
-
-<div
-  class="grid {minWidth ? '' : gridCols} {gridGap} {className}"
-  style={gridStyle}
->
-  {#if items.length > 0}
-    {#each items as item, index}
-      {@render children?.(item, index)}
-    {/each}
-  {:else}
-    {@render children?.()}
-  {/if}
-</div>
+<script>
+  let {
+    items = [],
+    cols = 3,
+    gap = 4,
+    minWidth = null,
+    class: className = '',
+    children,
+  } = $props();
+
+  const colsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
+    6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
+  };
+
+  const gapClasses = {
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    5: 'gap-5',
+    6: 'gap-6',
+    8: 'gap-8'
+  };
+
+  let gridCols = $derived(colsClasses[cols] || colsClasses[3]);
+  let gridGap = $derived(gapClasses[gap] || gapClasses[4]);
+  let gridStyle = $derived(minWidth ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr))` : '');
+</script>
+
+<div
+  class="grid {minWidth ? '' : gridCols} {gridGap} {className}"
+  style={gridStyle}
+>
+  {#if items.length > 0}
+    {#each items as item, index}
+      {@render children?.(item, index)}
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>

package/dist/patterns/data/DataList.svelte

@@ -1,24 +1,24 @@
-<script>
-  let {
-    items = [],
-    dividers = true,
-    gap = 0,
-    class: className = '',
-    children,
-  } = $props();
-
-  let gapClass = $derived(gap > 0 ? `space-y-${gap}` : '');
-  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-gray-200 dark:divide-gray-700' : '');
-</script>
-
-<ul class="{dividerClass} {gapClass} {className}" role="list">
-  {#if items.length > 0}
-    {#each items as item, index}
-      <li class="py-3 first:pt-0 last:pb-0">
-        {@render children?.(item, index)}
-      </li>
-    {/each}
-  {:else}
-    {@render children?.()}
-  {/if}
-</ul>
+<script>
+  let {
+    items = [],
+    dividers = true,
+    gap = 0,
+    class: className = '',
+    children,
+  } = $props();
+
+  let gapClass = $derived(gap > 0 ? `space-y-${gap}` : '');
+  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-gray-200 dark:divide-gray-700' : '');
+</script>
+
+<ul class="{dividerClass} {gapClass} {className}" role="list">
+  {#if items.length > 0}
+    {#each items as item, index}
+      <li class="py-3 first:pt-0 last:pb-0">
+        {@render children?.(item, index)}
+      </li>
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</ul>