@flightlesslabs/dodo-ui 0.15.0 → 0.16.0

package/dist/index.d.ts

@@ -83,6 +83,13 @@ export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/M
 export type { MenuItemType, MenuItemProps, } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
 export { default as DynamicMenu } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
 export type { DynamicMenuItemOption, DynamicMenuProps, } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
+/** Layout: Grid */
+export { default as Grid } from './stories/components/Layout/Grid/Grid.svelte';
+export type { GridProps } from './stories/components/Layout/Grid/Grid.svelte';
+export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte';
+export type { GridRowProps } from './stories/components/Layout/Grid/Row/Row.svelte';
+export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
+export type { GridColumnSize, GridColumnProps, } from './stories/components/Layout/Grid/Column/Column.svelte';
 /** Info: Calendar */
 export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
 export type { CalendarProps, CalendarActiveSection, } from './stories/components/Info/Calendar/Calendar.svelte';

package/dist/index.js

@@ -52,6 +52,10 @@ export { default as Separator } from './stories/components/Layout/Separator/Sepa
 export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
 export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
 export { default as DynamicMenu } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
+/** Layout: Grid */
+export { default as Grid } from './stories/components/Layout/Grid/Grid.svelte';
+export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte';
+export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
 /** Info: Calendar */
 export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
 export { default as CalendarDatesChart } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';

package/dist/stories/components/Layout/Grid/Column/Column.stories.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Column, { GridColumnSizeArray } from './Column.svelte';
+export const storyGridColumnArgTypes = {
+    size: {
+        control: { type: 'select' },
+        options: GridColumnSizeArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Column,
+    tags: ['autodocs'],
+    argTypes: storyGridColumnArgTypes,
+});
+</script>
+
+<!-- Default Grid Column -->
+<Story name="Default">Hola!</Story>

package/dist/stories/components/Layout/Grid/Column/Column.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import Column from './Column.svelte';
+import type { StoryBookArgTypes } from '../../../../../storybook-types.js';
+export declare const storyGridColumnArgTypes: StoryBookArgTypes;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Column: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Column = InstanceType<typeof Column>;
+export default Column;

package/dist/stories/components/Layout/Grid/Column/Column.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>import {} from 'svelte';
+export const GridColumnSizeArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+</script>
+
+<script lang="ts">"use strict";
+let { children, class: className = '', ref = $bindable(), sm = 12, md, lg, xl, xl2, } = $props();
+const breakpoints = [
+    { name: 'sm', value: sm },
+    { name: 'md', value: md },
+    { name: 'lg', value: lg },
+    { name: 'xl', value: xl },
+    { name: 'xl2', value: xl2 },
+];
+function getBreakpointClasses() {
+    let classNameBreakpoints = [];
+    for (let index = 0; index < breakpoints.length; index++) {
+        const element = breakpoints[index];
+        if (!element.value) {
+            continue;
+        }
+        classNameBreakpoints.push(`breakpoint--${element.name}`);
+    }
+    return classNameBreakpoints;
+}
+function getBreakpointCssVariables() {
+    let cssVariablesBreakpoints = [];
+    for (let index = 0; index < breakpoints.length; index++) {
+        const element = breakpoints[index];
+        if (!element.value) {
+            continue;
+        }
+        cssVariablesBreakpoints.push(`--GridColumnBreakpoint-${element.name}: ${element.value}`);
+    }
+    return cssVariablesBreakpoints.join(';');
+}
+</script>
+
+<div
+  class={['dodo-ui-GridColumn', ...getBreakpointClasses(), className].join(' ')}
+  style={getBreakpointCssVariables()}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>.dodo-ui-GridColumn {
+  min-width: 0;
+}
+.dodo-ui-GridColumn.breakpoint--sm {
+  grid-column: span var(--GridColumnBreakpoint-sm);
+}
+@media (min-width: 48rem) {
+  .dodo-ui-GridColumn.breakpoint--md {
+    grid-column: span var(--GridColumnBreakpoint-md);
+  }
+}
+@media (min-width: 64rem) {
+  .dodo-ui-GridColumn.breakpoint--lg {
+    grid-column: span var(--GridColumnBreakpoint-lg);
+  }
+}
+@media (min-width: 80rem) {
+  .dodo-ui-GridColumn.breakpoint--xl {
+    grid-column: span var(--GridColumnBreakpoint-xl);
+  }
+}
+@media (min-width: 96rem) {
+  .dodo-ui-GridColumn.breakpoint--xl2 {
+    grid-column: span var(--GridColumnBreakpoint-xl2);
+  }
+}</style>

package/dist/stories/components/Layout/Grid/Column/Column.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type Snippet } from 'svelte';
+export type GridColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export declare const GridColumnSizeArray: GridColumnSize[];
+export interface GridColumnProps {
+    /** GridColumn contents goes here */
+    children?: Snippet;
+    /** GridColumn ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Breakpoint: sm */
+    sm?: GridColumnSize;
+    /** Breakpoint: md */
+    md?: GridColumnSize;
+    /** Breakpoint: lg */
+    lg?: GridColumnSize;
+    /** Breakpoint: xl */
+    xl?: GridColumnSize;
+    /** Breakpoint: 2 xl */
+    xl2?: GridColumnSize;
+}
+declare const Column: import("svelte").Component<GridColumnProps, {}, "ref">;
+type Column = ReturnType<typeof Column>;
+export default Column;

package/dist/stories/components/Layout/Grid/Grid.stories.svelte

@@ -0,0 +1,179 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Grid from './Grid.svelte';
+import Row from './Row/Row.svelte';
+import Column from './Column/Column.svelte';
+import Paper from '../Paper/Paper.svelte';
+export const storyGridArgTypes = {};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Grid,
+    tags: ['autodocs'],
+    argTypes: storyGridArgTypes,
+});
+</script>
+
+<!-- Default Grid -->
+<Story name="Default" asChild>
+  <Grid>
+    <Column>Hola!</Column>
+    <Column>Hola!</Column>
+    <Column>Hola!</Column>
+  </Grid>
+</Story>
+
+<Story name="Example Column" asChild>
+  <Grid>
+    <Column sm={10}>
+      <Paper color="primary"><p>10</p></Paper>
+    </Column>
+    <Column sm={2}><Paper color="primary"><p>2</p></Paper></Column>
+    <Column sm={4}><Paper color="primary"><p>4</p></Paper></Column>
+  </Grid>
+</Story>
+
+<!-- the Row helps to furher separate Columns -->
+<Story name="Example Row" asChild>
+  <Grid>
+    <Row>
+      <Column sm={10}>
+        <Paper color="primary"><p>10</p></Paper>
+      </Column>
+      <Column sm={2}><Paper color="primary"><p>2</p></Paper></Column>
+      <Column sm={4}><Paper color="primary"><p>4</p></Paper></Column>
+    </Row>
+    <Row>
+      <Column sm={10}>
+        <Paper color="primary"><p>10</p></Paper>
+      </Column>
+      <Column sm={2}><Paper color="primary"><p>2</p></Paper></Column>
+      <Column sm={4}><Paper color="primary"><p>4</p></Paper></Column>
+    </Row>
+  </Grid>
+</Story>
+
+<Story name="Nested" asChild>
+  <Grid>
+    <Column sm={6}>
+      <Paper color="primary"><p>6</p></Paper>
+    </Column>
+    <Column sm={6}>
+      <Grid>
+        <Column sm={8}>
+          <Paper color="safe"><p>8</p></Paper>
+        </Column>
+        <Column sm={4}>
+          <Paper color="safe"><p>4</p></Paper>
+        </Column>
+        <Column sm={12}>
+          <Paper color="safe"><p>12</p></Paper>
+        </Column>
+      </Grid>
+    </Column>
+  </Grid>
+</Story>
+
+<!-- Resize the screen to see the effect -->
+<Story name="Responsive" asChild>
+  <Grid spacing={2}>
+    <Row>
+      <Column md={8}>
+        <Paper color="primary"><p>md:8</p></Paper>
+      </Column>
+      <Column md={4}><Paper color="primary"><p>md:4</p></Paper></Column>
+    </Row>
+    <Row>
+      <Column sm={4}>
+        <Paper color="primary"><p>sm:4</p></Paper>
+      </Column>
+      <Column><Paper color="primary"><p>sm:12</p></Paper></Column>
+    </Row>
+    <Row>
+      <Column lg={2}>
+        <Paper color="primary"><p>lg:2</p></Paper>
+      </Column>
+      <Column lg={10}>
+        <Paper color="primary"><p>lg:10</p></Paper>
+      </Column>
+    </Row>
+    <Row>
+      <Column xl={2}>
+        <Paper color="primary"><p>xl:2</p></Paper>
+      </Column>
+      <Column xl={10}>
+        <Paper color="primary"><p>xl:10</p></Paper>
+      </Column>
+    </Row>
+    <Row>
+      <Column xl2={2}>
+        <Paper color="primary"><p>xl2:2</p></Paper>
+      </Column>
+      <Column xl2={10}>
+        <Paper color="primary"><p>xl2:10</p></Paper>
+      </Column>
+    </Row>
+  </Grid>
+</Story>
+
+<Story name="Spacing" asChild>
+  <Grid spacing={2}>
+    <Row>
+      <Column sm={4}>
+        <Paper color="primary"><p>4</p></Paper>
+      </Column>
+      <Column sm={4}><Paper color="primary"><p>4</p></Paper></Column>
+      <Column sm={4}><Paper color="primary"><p>4</p></Paper></Column>
+    </Row>
+    <Row>
+      <Column sm={4}>
+        <Paper color="primary"><p>4</p></Paper>
+      </Column>
+      <Column><Paper color="primary"><p>12</p></Paper></Column>
+    </Row>
+    <Row>
+      <Column sm={2}>
+        <Paper color="primary"><p>2</p></Paper>
+      </Column>
+      <Column sm={3}>
+        <Paper color="primary"><p>3</p></Paper>
+      </Column>
+      <Column sm={4}>
+        <Paper color="primary"><p>4</p></Paper>
+      </Column>
+      <Column>
+        <Paper color="primary"><p>12</p></Paper>
+      </Column>
+    </Row>
+  </Grid>
+</Story>
+
+<Story name="RowSpacing" asChild>
+  <Grid rowSpacing={4}>
+    <Row>
+      <Column sm={4}>
+        <Paper color="primary"><p>4</p></Paper>
+      </Column>
+      <Column sm={4}><Paper color="primary"><p>4</p></Paper></Column>
+      <Column sm={4}><Paper color="primary"><p>4</p></Paper></Column>
+    </Row>
+    <Row>
+      <Column sm={4}>
+        <Paper color="primary"><p>4</p></Paper>
+      </Column>
+      <Column><Paper color="primary"><p>12</p></Paper></Column>
+    </Row>
+    <Row>
+      <Column sm={2}>
+        <Paper color="primary"><p>2</p></Paper>
+      </Column>
+      <Column sm={3}>
+        <Paper color="primary"><p>3</p></Paper>
+      </Column>
+      <Column sm={4}>
+        <Paper color="primary"><p>4</p></Paper>
+      </Column>
+      <Column>
+        <Paper color="primary"><p>12</p></Paper>
+      </Column>
+    </Row>
+  </Grid>
+</Story>

package/dist/stories/components/Layout/Grid/Grid.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import Grid from './Grid.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyGridArgTypes: StoryBookArgTypes;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Grid: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Grid = InstanceType<typeof Grid>;
+export default Grid;

package/dist/stories/components/Layout/Grid/Grid.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>import {} from 'svelte';
+</script>
+
+<script lang="ts">"use strict";
+let { children, class: className = '', ref = $bindable(), spacing = 1, rowSpacing, } = $props();
+const rowSpacingModified = rowSpacing || rowSpacing === 0 ? rowSpacing : spacing;
+</script>
+
+<div
+  class={['dodo-ui-Grid', className].join(' ')}
+  bind:this={ref}
+  style={`--GridSpacing: ${spacing}; --GridRowSpacing: ${rowSpacingModified};`}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>.dodo-ui-Grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: calc(var(--GridRowSpacing) * var(--dodo-ui-space));
+  grid-auto-flow: row;
+}</style>

package/dist/stories/components/Layout/Grid/Grid.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Snippet } from 'svelte';
+export interface GridProps {
+    /** Grid contents goes here */
+    children?: Snippet;
+    /** Grid ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Grid spacing, affects Coulumns */
+    spacing?: number;
+    /** Optional Row spacing, default is 0 */
+    rowSpacing?: number;
+}
+declare const Grid: import("svelte").Component<GridProps, {}, "ref">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/stories/components/Layout/Grid/Row/Row.stories.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Row from './Row.svelte';
+import Column from '../Column/Column.svelte';
+export const storyGridRowArgTypes = {};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Row,
+    tags: ['autodocs'],
+    argTypes: storyGridRowArgTypes,
+});
+</script>
+
+<!-- Default Grid Row -->
+<Story name="Default" asChild>
+  <Row>
+    <Column>Hola!</Column>
+    <Column>Hola!</Column>
+  </Row>
+</Story>

package/dist/stories/components/Layout/Grid/Row/Row.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import Row from './Row.svelte';
+import type { StoryBookArgTypes } from '../../../../../storybook-types.js';
+export declare const storyGridRowArgTypes: StoryBookArgTypes;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Row: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Row = InstanceType<typeof Row>;
+export default Row;

package/dist/stories/components/Layout/Grid/Row/Row.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>import {} from 'svelte';
+</script>
+
+<script lang="ts">"use strict";
+let { children, class: className = '', ref = $bindable(), } = $props();
+</script>
+
+<div class={['dodo-ui-GridRow', className].join(' ')} bind:this={ref}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>.dodo-ui-GridRow {
+  grid-column: span 12;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: calc(var(--GridSpacing) * var(--dodo-ui-space));
+  grid-auto-flow: row;
+}</style>

package/dist/stories/components/Layout/Grid/Row/Row.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type Snippet } from 'svelte';
+export interface GridRowProps {
+    /** GridRow contents goes here */
+    children?: Snippet;
+    /** GridRow ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+}
+declare const Row: import("svelte").Component<GridRowProps, {}, "ref">;
+type Row = ReturnType<typeof Row>;
+export default Row;

package/dist/styles/global.css

@@ -3,6 +3,5 @@
 @import '_colors.css';
 @import '_space.css';
 @import '_z-index.css';
-@import '_breakpoint.css';
 @import '_shadow.css';
 @import '_components.css';

package/dist/styles/scss/_breakpoints.scss

@@ -0,0 +1,5 @@
+$breakpoints-sm: 40rem;
+$breakpoints-md: 48rem;
+$breakpoints-lg: 64rem;
+$breakpoints-xl: 80rem;
+$breakpoints-xl2: 96rem;

package/dist/styles/scss/index.scss

@@ -0,0 +1 @@
+@forward 'breakpoints';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
@@ -42,7 +42,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+      "svelte": "./dist/index.js",
+      "scss": "./dist/styles/scss/index.scss"
     }
   },
   "peerDependencies": {

package/src/lib/index.ts

@@ -163,6 +163,17 @@ export type {
   DynamicMenuProps,
 } from '$lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
 
+/** Layout: Grid */
+export { default as Grid } from '$lib/stories/components/Layout/Grid/Grid.svelte';
+export type { GridProps } from '$lib/stories/components/Layout/Grid/Grid.svelte';
+export { default as Row } from '$lib/stories/components/Layout/Grid/Row/Row.svelte';
+export type { GridRowProps } from '$lib/stories/components/Layout/Grid/Row/Row.svelte';
+export { default as Column } from '$lib/stories/components/Layout/Grid/Column/Column.svelte';
+export type {
+  GridColumnSize,
+  GridColumnProps,
+} from '$lib/stories/components/Layout/Grid/Column/Column.svelte';
+
 /** Info: Calendar */
 export { default as Calendar } from '$lib/stories/components/Info/Calendar/Calendar.svelte';
 export type {

package/src/lib/stories/components/Layout/Grid/Column/Column.svelte

@@ -0,0 +1,127 @@
+<script lang="ts" module>
+  import { type Snippet } from 'svelte';
+
+  export type GridColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+  export const GridColumnSizeArray: GridColumnSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+
+  export interface GridColumnProps {
+    /** GridColumn contents goes here */
+    children?: Snippet;
+    /** GridColumn ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Breakpoint: sm */
+    sm?: GridColumnSize;
+    /** Breakpoint: md */
+    md?: GridColumnSize;
+    /** Breakpoint: lg */
+    lg?: GridColumnSize;
+    /** Breakpoint: xl */
+    xl?: GridColumnSize;
+    /** Breakpoint: 2 xl */
+    xl2?: GridColumnSize;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    sm = 12,
+    md,
+    lg,
+    xl,
+    xl2,
+  }: GridColumnProps = $props();
+
+  const breakpoints = [
+    { name: 'sm', value: sm },
+    { name: 'md', value: md },
+    { name: 'lg', value: lg },
+    { name: 'xl', value: xl },
+    { name: 'xl2', value: xl2 },
+  ];
+
+  function getBreakpointClasses() {
+    let classNameBreakpoints = [];
+
+    for (let index = 0; index < breakpoints.length; index++) {
+      const element = breakpoints[index];
+
+      if (!element.value) {
+        continue;
+      }
+
+      classNameBreakpoints.push(`breakpoint--${element.name}`);
+    }
+
+    return classNameBreakpoints;
+  }
+
+  function getBreakpointCssVariables() {
+    let cssVariablesBreakpoints = [];
+
+    for (let index = 0; index < breakpoints.length; index++) {
+      const element = breakpoints[index];
+
+      if (!element.value) {
+        continue;
+      }
+
+      cssVariablesBreakpoints.push(`--GridColumnBreakpoint-${element.name}: ${element.value}`);
+    }
+
+    return cssVariablesBreakpoints.join(';');
+  }
+</script>
+
+<div
+  class={['dodo-ui-GridColumn', ...getBreakpointClasses(), className].join(' ')}
+  style={getBreakpointCssVariables()}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style lang="scss">
+  @use '../../../../../styles/scss' as *;
+
+  .dodo-ui-GridColumn {
+    min-width: 0;
+
+    &.breakpoint {
+      &--sm {
+        grid-column: span var(--GridColumnBreakpoint-sm);
+      }
+
+      &--md {
+        @media (min-width: $breakpoints-md) {
+          grid-column: span var(--GridColumnBreakpoint-md);
+        }
+      }
+
+      &--lg {
+        @media (min-width: $breakpoints-lg) {
+          grid-column: span var(--GridColumnBreakpoint-lg);
+        }
+      }
+
+      &--xl {
+        @media (min-width: $breakpoints-xl) {
+          grid-column: span var(--GridColumnBreakpoint-xl);
+        }
+      }
+
+      &--xl2 {
+        @media (min-width: $breakpoints-xl2) {
+          grid-column: span var(--GridColumnBreakpoint-xl2);
+        }
+      }
+    }
+  }
+</style>

package/src/lib/stories/components/Layout/Grid/Grid.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+  import { type Snippet } from 'svelte';
+
+  export interface GridProps {
+    /** Grid contents goes here */
+    children?: Snippet;
+    /** Grid ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Grid spacing, affects Coulumns */
+    spacing?: number;
+    /** Optional Row spacing, default is 0 */
+    rowSpacing?: number;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    spacing = 1,
+    rowSpacing,
+  }: GridProps = $props();
+
+  const rowSpacingModified = rowSpacing || rowSpacing === 0 ? rowSpacing : spacing;
+</script>
+
+<div
+  class={['dodo-ui-Grid', className].join(' ')}
+  bind:this={ref}
+  style={`--GridSpacing: ${spacing}; --GridRowSpacing: ${rowSpacingModified};`}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style lang="scss">
+  .dodo-ui-Grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: calc(var(--GridRowSpacing) * var(--dodo-ui-space));
+    grid-auto-flow: row;
+  }
+</style>

package/src/lib/stories/components/Layout/Grid/Row/Row.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import { type Snippet } from 'svelte';
+
+  export interface GridRowProps {
+    /** GridRow contents goes here */
+    children?: Snippet;
+    /** GridRow ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+  }: GridRowProps = $props();
+</script>
+
+<div class={['dodo-ui-GridRow', className].join(' ')} bind:this={ref}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style lang="scss">
+  .dodo-ui-GridRow {
+    grid-column: span 12;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: calc(var(--GridSpacing) * var(--dodo-ui-space));
+    grid-auto-flow: row;
+  }
+</style>

package/src/lib/styles/global.css

@@ -3,6 +3,5 @@
 @import '_colors.css';
 @import '_space.css';
 @import '_z-index.css';
-@import '_breakpoint.css';
 @import '_shadow.css';
 @import '_components.css';

package/src/lib/styles/scss/_breakpoints.scss

@@ -0,0 +1,5 @@
+$breakpoints-sm: 40rem;
+$breakpoints-md: 48rem;
+$breakpoints-lg: 64rem;
+$breakpoints-xl: 80rem;
+$breakpoints-xl2: 96rem;

package/src/lib/styles/scss/index.scss

@@ -0,0 +1 @@
+@forward 'breakpoints';

package/dist/styles/_breakpoint.css

@@ -1,10 +0,0 @@
-:root {
-  /* Tailwind CSS */
-  /* https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css */
-
-  --dodo-breakpoint-sm: 40rem;
-  --dodo-breakpoint-md: 48rem;
-  --dodo-breakpoint-lg: 64rem;
-  --dodo-breakpoint-xl: 80rem;
-  --dodo-breakpoint-2xl: 96rem;
-}

package/src/lib/styles/_breakpoint.css

@@ -1,10 +0,0 @@
-:root {
-  /* Tailwind CSS */
-  /* https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css */
-
-  --dodo-breakpoint-sm: 40rem;
-  --dodo-breakpoint-md: 48rem;
-  --dodo-breakpoint-lg: 64rem;
-  --dodo-breakpoint-xl: 80rem;
-  --dodo-breakpoint-2xl: 96rem;
-}