@happyvertical/smrt-ui 0.30.0

package/dist/components/layout/Container.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+  maxWidth?: MaxWidth;
+  children?: Snippet;
+}
+
+const { maxWidth = 'lg', children, ...rest }: Props = $props();
+</script>
+
+<div class="container max-w-{maxWidth}" {...rest}>
+  {@render children?.()}
+</div>
+
+<style>
+  .container {
+    width: 100%;
+    margin: 0 auto;
+    padding-left: var(--smrt-spacing-4);
+    padding-right: var(--smrt-spacing-4);
+  }
+
+  .max-w-sm {
+    max-width: 640px;
+  }
+
+  .max-w-md {
+    max-width: 768px;
+  }
+
+  .max-w-lg {
+    max-width: 1024px;
+  }
+
+  .max-w-xl {
+    max-width: 1280px;
+  }
+
+  .max-w-full {
+    max-width: 100%;
+  }
+
+  @media (min-width: 640px) {
+    .container {
+      padding-left: var(--smrt-spacing-6);
+      padding-right: var(--smrt-spacing-6);
+    }
+  }
+</style>

package/dist/components/layout/Container.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    maxWidth?: MaxWidth;
+    children?: Snippet;
+}
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;
+//# sourceMappingURL=Container.svelte.d.ts.map

package/dist/components/layout/Container.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Container.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGtD,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEnD,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACnE,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkBD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/layout/EmptyState.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+/**
+ * EmptyState - Placeholder for empty lists/content
+ * refactored for Material 3
+ *
+ * Provides a consistent empty state display with optional icon,
+ * description, and call-to-action button.
+ */
+import type { Snippet } from 'svelte';
+import { ripple } from '../../actions/ripple.js';
+
+export interface Props {
+  /** Main title text */
+  title: string;
+  /** Optional description */
+  description?: string;
+  /** Icon slot or default icon name */
+  icon?: 'document' | 'folder' | 'users' | 'search' | 'inbox' | Snippet;
+  /** Action button label */
+  actionLabel?: string;
+  /** Action button href */
+  actionHref?: string;
+  /** Action button click handler */
+  onaction?: () => void;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const {
+  title,
+  description,
+  icon = 'inbox',
+  actionLabel,
+  actionHref,
+  onaction,
+  size = 'md',
+}: Props = $props();
+
+// Default SVG icons
+const icons = {
+  document: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/>
+    <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
+  </svg>`,
+  folder: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
+  </svg>`,
+  users: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
+    <circle cx="9" cy="7" r="4"/>
+    <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
+  </svg>`,
+  search: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <circle cx="11" cy="11" r="8"/>
+    <path d="M21 21l-4.35-4.35"/>
+  </svg>`,
+  inbox: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path d="M22 12h-6l-2 3h-4l-2-3H2"/>
+    <path d="M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"/>
+  </svg>`,
+};
+</script>
+
+<div class="empty-state" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+  <div class="icon-container">
+    {#if typeof icon === 'string'}
+      {@html icons[icon] ?? icons.inbox}
+    {:else}
+      {@render icon()}
+    {/if}
+  </div>
+
+  <h3 class="empty-title">{title}</h3>
+
+  {#if description}
+    <p class="empty-description">{description}</p>
+  {/if}
+
+  {#if actionLabel}
+    {#if actionHref}
+      <a href={actionHref} class="action-button" use:ripple>
+        {actionLabel}
+      </a>
+    {:else if onaction}
+      <button type="button" class="action-button" onclick={onaction} use:ripple>
+        {actionLabel}
+      </button>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 2rem;
+    text-align: center;
+  }
+
+  .empty-state.sm {
+    padding: 2rem 1.5rem;
+  }
+
+  .empty-state.lg {
+    padding: 6rem 3rem;
+  }
+
+  .icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 96px;
+    height: 96px;
+    margin-bottom: 2rem;
+    background-color: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
+    border-radius: var(--smrt-radius-3xl, 32px); /* M3 extra large shape */
+    padding: var(--smrt-spacing-6, 24px);
+  }
+
+  .sm .icon-container {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1.5rem;
+    border-radius: var(--smrt-radius-xl, 16px);
+    padding: var(--smrt-spacing-4, 16px);
+  }
+
+  .lg .icon-container {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 2.5rem;
+    border-radius: var(--smrt-radius-3xl, 32px);
+    padding: var(--smrt-spacing-8, 32px);
+  }
+
+  .empty-title {
+    font: var(--smrt-typography-title-large-font);
+    color: var(--smrt-color-on-surface);
+    margin: 0 0 0.75rem;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .sm .empty-title {
+    font: var(--smrt-typography-title-medium-font);
+  }
+
+  .lg .empty-title {
+    font: var(--smrt-typography-headline-small-font);
+  }
+
+  .empty-description {
+    font: var(--smrt-typography-body-medium-font);
+    color: var(--smrt-color-on-surface-variant);
+    margin: 0 0 2rem;
+    max-width: 440px;
+    line-height: var(--smrt-typography-body-medium-line-height, 1.5);
+  }
+
+  .action-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--smrt-spacing-2, 8px);
+    padding: 0 var(--smrt-spacing-6, 24px);
+    height: 40px;
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-primary);
+    background-color: var(--smrt-color-primary);
+    border: none;
+    border-radius: var(--smrt-radius-2xl, 24px);
+    text-decoration: none;
+    cursor: pointer;
+    transition: box-shadow 200ms, background-color 200ms;
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .action-button:hover {
+    background-color: var(--smrt-color-primary);
+    box-shadow: var(--smrt-elevation-2);
+  }
+</style>

package/dist/components/layout/EmptyState.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * EmptyState - Placeholder for empty lists/content
+ * refactored for Material 3
+ *
+ * Provides a consistent empty state display with optional icon,
+ * description, and call-to-action button.
+ */
+import type { Snippet } from 'svelte';
+export interface Props {
+    /** Main title text */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** Icon slot or default icon name */
+    icon?: 'document' | 'folder' | 'users' | 'search' | 'inbox' | Snippet;
+    /** Action button label */
+    actionLabel?: string;
+    /** Action button href */
+    actionHref?: string;
+    /** Action button click handler */
+    onaction?: () => void;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;
+//# sourceMappingURL=EmptyState.svelte.d.ts.map

package/dist/components/layout/EmptyState.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/EmptyState.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,MAAM,WAAW,KAAK;IACpB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IACtE,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAyED,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/layout/Footer.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+import Container from './Container.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  children?: Snippet;
+}
+
+const { children }: Props = $props();
+
+const currentYear = new Date().getFullYear();
+</script>
+
+<footer class="site-footer">
+  <Container>
+    <div class="footer-content">
+      <p class="copyright">&copy; {currentYear} {t(M['ui.footer.all_rights_reserved'])}</p>
+
+      {#if children}
+        <div class="footer-links">
+          {@render children()}
+        </div>
+      {/if}
+    </div>
+  </Container>
+</footer>
+
+<style>
+  .site-footer {
+    background: var(--smrt-color-surface-container-low);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+    padding: var(--smrt-spacing-8) 0;
+    margin-top: var(--smrt-spacing-12);
+    text-align: center;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-4);
+    align-items: center;
+  }
+
+  .copyright {
+    margin: 0;
+    font-size: var(--smrt-typography-body-medium-size);
+  }
+
+  .footer-links :global(a) {
+    color: var(--smrt-color-primary);
+    text-decoration: none;
+    margin: 0 var(--smrt-spacing-2);
+  }
+
+  .footer-links :global(a:hover) {
+    text-decoration: underline;
+  }
+</style>

package/dist/components/layout/Footer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    children?: Snippet;
+}
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;
+//# sourceMappingURL=Footer.svelte.d.ts.map

package/dist/components/layout/Footer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Footer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiCD,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/Grid.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+type GapSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Responsive columns configuration
+ * Allows different column counts at different breakpoints.
+ *
+ * Uses mobile-first cascading: each breakpoint inherits from smaller ones.
+ * Unspecified breakpoints use sensible defaults (sm: 1, md: 2, lg: 3, xl: 4).
+ *
+ * Example: `{ md: 2, xl: 4 }` means:
+ * - sm: 1 (default)
+ * - md: 2 (specified)
+ * - lg: 2 (inherits from md)
+ * - xl: 4 (specified)
+ */
+interface ResponsiveColumns {
+  /** Columns for small screens (< 640px). Default: 1 */
+  sm?: number;
+  /** Columns for medium screens (>= 640px). Default: 2 or inherits from sm */
+  md?: number;
+  /** Columns for large screens (>= 1024px). Default: 3 or inherits from md */
+  lg?: number;
+  /** Columns for extra large screens (>= 1280px). Default: 4 or inherits from lg */
+  xl?: number;
+}
+
+/**
+ * Gap configuration - can be a simple size or separate row/column gaps
+ */
+type GapConfig = GapSize | { row?: GapSize; column?: GapSize };
+
+type AlignItems = 'start' | 'center' | 'end' | 'stretch';
+type JustifyItems = 'start' | 'center' | 'end' | 'stretch';
+type AutoFlow = 'row' | 'column' | 'row dense' | 'column dense';
+
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+  /** Number of columns, 'auto' for auto-fill, or responsive object */
+  columns?: number | 'auto' | ResponsiveColumns;
+  /** Gap between items - size or { row, column } */
+  gap?: GapConfig;
+  /** Header snippet rendered above the grid */
+  header?: Snippet;
+  /** Main grid content */
+  children?: Snippet;
+  /** Vertical alignment of grid items */
+  alignItems?: AlignItems;
+  /** Horizontal alignment of grid items */
+  justifyItems?: JustifyItems;
+  /** Grid auto-flow direction */
+  autoFlow?: AutoFlow;
+}
+
+const {
+  columns = 'auto',
+  gap = 'md',
+  header,
+  children,
+  alignItems,
+  justifyItems,
+  autoFlow,
+  ...rest
+}: Props = $props();
+
+// Determine if we're using responsive columns
+const isResponsive = $derived(
+  typeof columns === 'object' && columns !== null && !Array.isArray(columns),
+);
+
+// Build grid-template-columns for non-responsive case
+const _gridColumns = $derived.by(() => {
+  if (isResponsive) return undefined;
+  if (columns === 'auto') {
+    return 'repeat(auto-fill, minmax(300px, 1fr))';
+  }
+  return `repeat(${columns}, 1fr)`;
+});
+
+// Build CSS custom properties for responsive columns
+const responsiveStyles = $derived.by(() => {
+  if (!isResponsive) return '';
+  const cols = columns as ResponsiveColumns;
+  const vars: string[] = [];
+  if (cols.sm !== undefined) vars.push(`--grid-columns-sm: ${cols.sm}`);
+  if (cols.md !== undefined) vars.push(`--grid-columns-md: ${cols.md}`);
+  if (cols.lg !== undefined) vars.push(`--grid-columns-lg: ${cols.lg}`);
+  if (cols.xl !== undefined) vars.push(`--grid-columns-xl: ${cols.xl}`);
+  return vars.join('; ');
+});
+
+// Parse gap configuration - default to 'md' if not specified in object
+const rowGap = $derived(typeof gap === 'object' ? (gap.row ?? 'md') : gap);
+const columnGap = $derived(
+  typeof gap === 'object' ? (gap.column ?? 'md') : gap,
+);
+
+// Build inline styles
+const inlineStyles = $derived.by(() => {
+  const styles: string[] = [];
+
+  // Grid template columns (non-responsive only)
+  if (_gridColumns) {
+    styles.push(`grid-template-columns: ${_gridColumns}`);
+  }
+
+  // Responsive CSS variables
+  if (responsiveStyles) {
+    styles.push(responsiveStyles);
+  }
+
+  // Alignment
+  if (alignItems) styles.push(`align-items: ${alignItems}`);
+  if (justifyItems) styles.push(`justify-items: ${justifyItems}`);
+
+  // Auto flow
+  if (autoFlow) styles.push(`grid-auto-flow: ${autoFlow}`);
+
+  return styles.join('; ');
+});
+
+// Build class names
+const gridClasses = $derived.by(() => {
+  const classes = ['grid'];
+
+  // Responsive modifier
+  if (isResponsive) {
+    classes.push('grid-responsive');
+  }
+
+  // Gap classes (row and column may differ)
+  if (rowGap && columnGap && rowGap === columnGap) {
+    classes.push(`gap-${rowGap}`);
+  } else {
+    if (rowGap) classes.push(`row-gap-${rowGap}`);
+    if (columnGap) classes.push(`col-gap-${columnGap}`);
+  }
+
+  return classes.join(' ');
+});
+</script>
+
+{#if header}
+  <div class="grid-header">
+    {@render header()}
+  </div>
+{/if}
+<div
+  class={gridClasses}
+  style={inlineStyles}
+  {...rest}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .grid {
+    display: grid;
+  }
+
+  .grid-header {
+    width: 100%;
+    margin-bottom: var(--smrt-spacing-4);
+  }
+
+  /* Responsive grid - uses CSS variables set via inline styles */
+  .grid-responsive {
+    grid-template-columns: repeat(var(--grid-columns-sm, 1), 1fr);
+  }
+
+  @media (min-width: 640px) {
+    .grid-responsive {
+      grid-template-columns: repeat(var(--grid-columns-md, var(--grid-columns-sm, 2)), 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .grid-responsive {
+      grid-template-columns: repeat(var(--grid-columns-lg, var(--grid-columns-md, var(--grid-columns-sm, 3))), 1fr);
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .grid-responsive {
+      grid-template-columns: repeat(var(--grid-columns-xl, var(--grid-columns-lg, var(--grid-columns-md, var(--grid-columns-sm, 4)))), 1fr);
+    }
+  }
+
+  /* Uniform gap */
+  .gap-sm {
+    gap: var(--smrt-spacing-4);
+  }
+
+  .gap-md {
+    gap: var(--smrt-spacing-6);
+  }
+
+  .gap-lg {
+    gap: var(--smrt-spacing-8);
+  }
+
+  .gap-xl {
+    gap: var(--smrt-spacing-12);
+  }
+
+  /* Row gap */
+  .row-gap-sm {
+    row-gap: var(--smrt-spacing-4);
+  }
+
+  .row-gap-md {
+    row-gap: var(--smrt-spacing-6);
+  }
+
+  .row-gap-lg {
+    row-gap: var(--smrt-spacing-8);
+  }
+
+  .row-gap-xl {
+    row-gap: var(--smrt-spacing-12);
+  }
+
+  /* Column gap */
+  .col-gap-sm {
+    column-gap: var(--smrt-spacing-4);
+  }
+
+  .col-gap-md {
+    column-gap: var(--smrt-spacing-6);
+  }
+
+  .col-gap-lg {
+    column-gap: var(--smrt-spacing-8);
+  }
+
+  .col-gap-xl {
+    column-gap: var(--smrt-spacing-12);
+  }
+</style>

package/dist/components/layout/Grid.svelte.d.ts

@@ -0,0 +1,56 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type GapSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Responsive columns configuration
+ * Allows different column counts at different breakpoints.
+ *
+ * Uses mobile-first cascading: each breakpoint inherits from smaller ones.
+ * Unspecified breakpoints use sensible defaults (sm: 1, md: 2, lg: 3, xl: 4).
+ *
+ * Example: `{ md: 2, xl: 4 }` means:
+ * - sm: 1 (default)
+ * - md: 2 (specified)
+ * - lg: 2 (inherits from md)
+ * - xl: 4 (specified)
+ */
+interface ResponsiveColumns {
+    /** Columns for small screens (< 640px). Default: 1 */
+    sm?: number;
+    /** Columns for medium screens (>= 640px). Default: 2 or inherits from sm */
+    md?: number;
+    /** Columns for large screens (>= 1024px). Default: 3 or inherits from md */
+    lg?: number;
+    /** Columns for extra large screens (>= 1280px). Default: 4 or inherits from lg */
+    xl?: number;
+}
+/**
+ * Gap configuration - can be a simple size or separate row/column gaps
+ */
+type GapConfig = GapSize | {
+    row?: GapSize;
+    column?: GapSize;
+};
+type AlignItems = 'start' | 'center' | 'end' | 'stretch';
+type JustifyItems = 'start' | 'center' | 'end' | 'stretch';
+type AutoFlow = 'row' | 'column' | 'row dense' | 'column dense';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    /** Number of columns, 'auto' for auto-fill, or responsive object */
+    columns?: number | 'auto' | ResponsiveColumns;
+    /** Gap between items - size or { row, column } */
+    gap?: GapConfig;
+    /** Header snippet rendered above the grid */
+    header?: Snippet;
+    /** Main grid content */
+    children?: Snippet;
+    /** Vertical alignment of grid items */
+    alignItems?: AlignItems;
+    /** Horizontal alignment of grid items */
+    justifyItems?: JustifyItems;
+    /** Grid auto-flow direction */
+    autoFlow?: AutoFlow;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;
+//# sourceMappingURL=Grid.svelte.d.ts.map

package/dist/components/layout/Grid.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Grid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGtD,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC;;;;;;;;;;;;GAYG;AACH,UAAU,iBAAiB;IACzB,sDAAsD;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kFAAkF;IAClF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,KAAK,SAAS,GAAG,OAAO,GAAG;IAAE,GAAG,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE/D,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AACzD,KAAK,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAC3D,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAC;AAEhE,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACnE,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAC;IAC9C,kDAAkD;IAClD,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,yCAAyC;IACzC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAiHD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}