@r2digisolutions/components 0.3.1 → 0.3.2

package/dist/components/atoms/Grid/Grid.stories.d.ts

@@ -2,7 +2,14 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        cols?: 1 | 2 | 3 | 4;
+        cols?: (1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12) | {
+            base?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            sm?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            md?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            lg?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            xl?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            '2xl'?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+        };
     }, {}, "">;
     tags: string[];
     argTypes: {
@@ -19,3 +26,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const TwoColumns: Story;
+export declare const Responsive: Story;

package/dist/components/atoms/Grid/Grid.stories.js

@@ -11,3 +11,6 @@ const meta = {
 export default meta;
 export const Default = {};
 export const TwoColumns = { args: { cols: 2 } };
+export const Responsive = {
+    args: { cols: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6 } }
+};

package/dist/components/atoms/Grid/Grid.svelte

@@ -4,8 +4,19 @@
 	type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 	type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
+	type GridColsConfig =
+		| GridCols
+		| {
+				base?: GridCols;
+				sm?: GridCols;
+				md?: GridCols;
+				lg?: GridCols;
+				xl?: GridCols;
+				'2xl'?: GridCols;
+		  };
+
 	interface GridProps {
-		cols?: GridCols;
+		cols?: GridColsConfig;
 		gap?: GridGap;
 		class?: string;
 		children?: Snippet;
@@ -36,8 +47,98 @@
 		11: 'grid-cols-11',
 		12: 'grid-cols-12'
 	};
+
+	const smColClasses: Record<GridCols, string> = {
+		1: 'sm:grid-cols-1',
+		2: 'sm:grid-cols-2',
+		3: 'sm:grid-cols-3',
+		4: 'sm:grid-cols-4',
+		5: 'sm:grid-cols-5',
+		6: 'sm:grid-cols-6',
+		7: 'sm:grid-cols-7',
+		8: 'sm:grid-cols-8',
+		9: 'sm:grid-cols-9',
+		10: 'sm:grid-cols-10',
+		11: 'sm:grid-cols-11',
+		12: 'sm:grid-cols-12'
+	};
+
+	const mdColClasses: Record<GridCols, string> = {
+		1: 'md:grid-cols-1',
+		2: 'md:grid-cols-2',
+		3: 'md:grid-cols-3',
+		4: 'md:grid-cols-4',
+		5: 'md:grid-cols-5',
+		6: 'md:grid-cols-6',
+		7: 'md:grid-cols-7',
+		8: 'md:grid-cols-8',
+		9: 'md:grid-cols-9',
+		10: 'md:grid-cols-10',
+		11: 'md:grid-cols-11',
+		12: 'md:grid-cols-12'
+	};
+
+	const lgColClasses: Record<GridCols, string> = {
+		1: 'lg:grid-cols-1',
+		2: 'lg:grid-cols-2',
+		3: 'lg:grid-cols-3',
+		4: 'lg:grid-cols-4',
+		5: 'lg:grid-cols-5',
+		6: 'lg:grid-cols-6',
+		7: 'lg:grid-cols-7',
+		8: 'lg:grid-cols-8',
+		9: 'lg:grid-cols-9',
+		10: 'lg:grid-cols-10',
+		11: 'lg:grid-cols-11',
+		12: 'lg:grid-cols-12'
+	};
+
+	const xlColClasses: Record<GridCols, string> = {
+		1: 'xl:grid-cols-1',
+		2: 'xl:grid-cols-2',
+		3: 'xl:grid-cols-3',
+		4: 'xl:grid-cols-4',
+		5: 'xl:grid-cols-5',
+		6: 'xl:grid-cols-6',
+		7: 'xl:grid-cols-7',
+		8: 'xl:grid-cols-8',
+		9: 'xl:grid-cols-9',
+		10: 'xl:grid-cols-10',
+		11: 'xl:grid-cols-11',
+		12: 'xl:grid-cols-12'
+	};
+
+	const twoxlColClasses: Record<GridCols, string> = {
+		1: '2xl:grid-cols-1',
+		2: '2xl:grid-cols-2',
+		3: '2xl:grid-cols-3',
+		4: '2xl:grid-cols-4',
+		5: '2xl:grid-cols-5',
+		6: '2xl:grid-cols-6',
+		7: '2xl:grid-cols-7',
+		8: '2xl:grid-cols-8',
+		9: '2xl:grid-cols-9',
+		10: '2xl:grid-cols-10',
+		11: '2xl:grid-cols-11',
+		12: '2xl:grid-cols-12'
+	};
+
+	const resolved = $derived(typeof cols === 'number' ? { base: cols } : cols);
+	const baseCols = $derived(resolved.base ?? 3);
 </script>
 
-<div class={['grid', colClasses[cols], gaps[gap], className]}>
+<div
+	class={[
+		'grid',
+		colClasses[baseCols],
+		resolved.sm != null && smColClasses[resolved.sm],
+		resolved.md != null && mdColClasses[resolved.md],
+		resolved.lg != null && lgColClasses[resolved.lg],
+		resolved.xl != null && xlColClasses[resolved.xl],
+		resolved['2xl'] != null && twoxlColClasses[resolved['2xl']],
+		gaps[gap],
+		className
+	]}
+>
 	{#if children}{@render children()}{/if}
 </div>

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

@@ -1,8 +1,16 @@
 import type { Snippet } from 'svelte';
 type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridColsConfig = GridCols | {
+    base?: GridCols;
+    sm?: GridCols;
+    md?: GridCols;
+    lg?: GridCols;
+    xl?: GridCols;
+    '2xl'?: GridCols;
+};
 interface GridProps {
-    cols?: GridCols;
+    cols?: GridColsConfig;
     gap?: GridGap;
     class?: string;
     children?: Snippet;

package/dist/components/atoms/Grid/GridStory.svelte

@@ -1,12 +1,26 @@
 <script lang="ts">
 	import Grid from './Grid.svelte';
 
-	let props = $props<{ cols?: 1 | 2 | 3 | 4 }>();
+	type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+	type GridColsConfig =
+		| GridCols
+		| {
+				base?: GridCols;
+				sm?: GridCols;
+				md?: GridCols;
+				lg?: GridCols;
+				xl?: GridCols;
+				'2xl'?: GridCols;
+		  };
+
+	let props = $props<{ cols?: GridColsConfig }>();
 </script>
 
-<Grid cols={props.cols ?? 3} gap="md" class="w-full max-w-lg">
+<Grid cols={props.cols ?? 3} gap="md" class="w-full max-w-3xl">
 	{#each [1, 2, 3, 4, 5, 6] as n}
-		<div class="rounded-lg border border-border bg-surface-elevated px-3 py-6 text-center text-sm text-secondary">
+		<div
+			class="rounded-lg border border-border bg-surface-elevated px-3 py-6 text-center text-sm text-secondary"
+		>
 			{n}
 		</div>
 	{/each}

package/dist/components/atoms/Grid/GridStory.svelte.d.ts

@@ -1,5 +1,14 @@
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridColsConfig = GridCols | {
+    base?: GridCols;
+    sm?: GridCols;
+    md?: GridCols;
+    lg?: GridCols;
+    xl?: GridCols;
+    '2xl'?: GridCols;
+};
 type $$ComponentProps = {
-    cols?: 1 | 2 | 3 | 4;
+    cols?: GridColsConfig;
 };
 declare const GridStory: import("svelte").Component<$$ComponentProps, {}, "">;
 type GridStory = ReturnType<typeof GridStory>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",