@r2digisolutions/components 0.3.0 → 0.3.2

package/README.md

@@ -75,6 +75,16 @@ Mismo flujo que usan muchas libs con `bumpp` / `release-it` (tag → CI → npm
 pnpm add @r2digisolutions/components
 ```
 
+Los componentes usan clases de Tailwind 4. En la app consumidora basta con importar el CSS del design system (incluye `@theme`, variables y el `@source` del paquete):
+
+```css
+/* app.css / layout.css del consumidor */
+@import 'tailwindcss';
+@import '@r2digisolutions/components/styles.css';
+```
+
+Ese import registra tokens (`border-border`, `bg-surface`, …) y hace que Tailwind escanee los `.svelte` del paquete. Sin él, las utilidades pueden faltar o `--border` no estar definido.
+
 ## Licencia
 
 MIT

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/dist/styles.css

@@ -0,0 +1,237 @@
+/* Scan this package so consumers only need to @import this file (no extra @source) */
+@source './components/**/*.{svelte,js}';
+@source './utils/**/*.{svelte,js}';
+
+/* Match theme tokens (:root.dark) — not prefers-color-scheme alone */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   R2DigiSolutions Design System — Tailwind 4 @theme
+   ─────────────────────────────────────────────────────────────────────────── */
+
+@theme {
+  /* Brand colors */
+  --color-brand-50: oklch(97% 0.02 265);
+  --color-brand-100: oklch(93% 0.05 265);
+  --color-brand-200: oklch(86% 0.1 265);
+  --color-brand-300: oklch(76% 0.15 265);
+  --color-brand-400: oklch(65% 0.2 265);
+  --color-brand-500: oklch(55% 0.25 265);
+  --color-brand-600: oklch(47% 0.26 265);
+  --color-brand-700: oklch(39% 0.24 265);
+  --color-brand-800: oklch(31% 0.2 265);
+  --color-brand-900: oklch(22% 0.14 265);
+  --color-brand-950: oklch(15% 0.08 265);
+
+  /* Semantic surface tokens */
+  --color-surface: var(--surface);
+  --color-surface-elevated: var(--surface-elevated);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-muted: var(--text-muted);
+  --color-text-inverse: var(--text-inverse);
+
+  /* Typography */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  /* Radii */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.08), 0 1px 2px -1px oklch(0% 0 0 / 0.06);
+  --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.08);
+  --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.12), 0 4px 6px -4px oklch(0% 0 0 / 0.08);
+  --shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.14), 0 8px 10px -6px oklch(0% 0 0 / 0.08);
+
+  /* Transitions */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Light mode (default)
+   ─────────────────────────────────────────────────────────────────────────── */
+
+:root {
+  color-scheme: light;
+
+  --surface: oklch(99% 0.005 265);
+  --surface-elevated: oklch(100% 0 0);
+  --surface-overlay: oklch(97% 0.01 265);
+  --border: oklch(88% 0.02 265);
+  --border-strong: oklch(75% 0.04 265);
+  --text-primary: oklch(15% 0.02 265);
+  --text-secondary: oklch(35% 0.03 265);
+  --text-muted: oklch(45% 0.02 265);
+  --text-inverse: oklch(99% 0 0);
+
+  /* Alert tones */
+  --alert-info-bg: oklch(96% 0.03 240);
+  --alert-info-border: oklch(82% 0.06 240);
+  --alert-info-fg: oklch(28% 0.08 240);
+  --alert-info-muted: oklch(40% 0.06 240);
+  --alert-info-icon: oklch(52% 0.14 240);
+  --alert-info-accent: oklch(55% 0.16 240);
+
+  --alert-success-bg: oklch(96% 0.04 150);
+  --alert-success-border: oklch(82% 0.07 150);
+  --alert-success-fg: oklch(28% 0.08 150);
+  --alert-success-muted: oklch(38% 0.06 150);
+  --alert-success-icon: oklch(50% 0.14 150);
+  --alert-success-accent: oklch(55% 0.16 150);
+
+  --alert-warning-bg: oklch(96% 0.05 85);
+  --alert-warning-border: oklch(84% 0.1 85);
+  --alert-warning-fg: oklch(30% 0.08 75);
+  --alert-warning-muted: oklch(42% 0.07 75);
+  --alert-warning-icon: oklch(58% 0.15 75);
+  --alert-warning-accent: oklch(68% 0.16 75);
+
+  --alert-error-bg: oklch(96% 0.03 25);
+  --alert-error-border: oklch(84% 0.08 25);
+  --alert-error-fg: oklch(30% 0.1 25);
+  --alert-error-muted: oklch(42% 0.08 25);
+  --alert-error-icon: oklch(55% 0.18 25);
+  --alert-error-accent: oklch(58% 0.2 25);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Dark mode
+   ─────────────────────────────────────────────────────────────────────────── */
+
+:root.dark {
+  color-scheme: dark;
+
+  --surface: oklch(14% 0.02 265);
+  --surface-elevated: oklch(18% 0.025 265);
+  --surface-overlay: oklch(20% 0.03 265);
+  --border: oklch(28% 0.03 265);
+  --border-strong: oklch(40% 0.04 265);
+  --text-primary: oklch(96% 0.01 265);
+  --text-secondary: oklch(75% 0.03 265);
+  --text-muted: oklch(55% 0.03 265);
+  --text-inverse: oklch(15% 0.02 265);
+
+  /* Alert tones */
+  --alert-info-bg: oklch(24% 0.04 240);
+  --alert-info-border: oklch(38% 0.06 240);
+  --alert-info-fg: oklch(92% 0.03 240);
+  --alert-info-muted: oklch(78% 0.04 240);
+  --alert-info-icon: oklch(72% 0.12 240);
+  --alert-info-accent: oklch(65% 0.14 240);
+
+  --alert-success-bg: oklch(24% 0.04 150);
+  --alert-success-border: oklch(38% 0.06 150);
+  --alert-success-fg: oklch(92% 0.03 150);
+  --alert-success-muted: oklch(78% 0.04 150);
+  --alert-success-icon: oklch(72% 0.12 150);
+  --alert-success-accent: oklch(65% 0.14 150);
+
+  --alert-warning-bg: oklch(25% 0.04 85);
+  --alert-warning-border: oklch(40% 0.07 85);
+  --alert-warning-fg: oklch(93% 0.03 85);
+  --alert-warning-muted: oklch(80% 0.04 85);
+  --alert-warning-icon: oklch(78% 0.12 85);
+  --alert-warning-accent: oklch(72% 0.14 85);
+
+  --alert-error-bg: oklch(24% 0.05 25);
+  --alert-error-border: oklch(40% 0.08 25);
+  --alert-error-fg: oklch(93% 0.03 25);
+  --alert-error-muted: oklch(80% 0.04 25);
+  --alert-error-icon: oklch(72% 0.14 25);
+  --alert-error-accent: oklch(65% 0.18 25);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Base styles
+   ─────────────────────────────────────────────────────────────────────────── */
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    margin: 0;
+    background-color: var(--surface);
+    color: var(--text-primary);
+    font-family: var(--font-sans);
+    line-height: 1.6;
+    transition:
+      background-color 0.2s var(--ease-smooth),
+      color 0.2s var(--ease-smooth);
+  }
+
+  /* Focus visible styles */
+  :focus-visible {
+    outline: 2px solid oklch(55% 0.25 265);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  /* Selection */
+  ::selection {
+    background-color: oklch(55% 0.25 265 / 0.25);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Utility layer
+   ─────────────────────────────────────────────────────────────────────────── */
+
+@layer utilities {
+  /* Touch-friendly minimum tap target */
+  .touch-target {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  /* Smooth transitions */
+  .transition-smooth {
+    transition: all 0.2s var(--ease-smooth);
+  }
+
+  .transition-spring {
+    transition: all 0.3s var(--ease-spring);
+  }
+
+  /* Glass morphism */
+  .glass {
+    backdrop-filter: blur(12px) saturate(180%);
+    background-color: oklch(100% 0 0 / 0.08);
+    border: 1px solid oklch(100% 0 0 / 0.12);
+  }
+
+  .dark .glass {
+    background-color: oklch(0% 0 0 / 0.2);
+    border-color: oklch(100% 0 0 / 0.08);
+  }
+
+  /* Surface utilities */
+  .bg-surface { background-color: var(--surface); }
+  .bg-surface-elevated { background-color: var(--surface-elevated); }
+  .bg-surface-overlay { background-color: var(--surface-overlay); }
+  .border-border { border-color: var(--border); }
+  .border-border-strong { border-color: var(--border-strong); }
+  .text-primary { color: var(--text-primary); }
+  .text-secondary { color: var(--text-secondary); }
+  .text-muted { color: var(--text-muted); }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",
@@ -43,11 +43,13 @@
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
+	"style": "./dist/styles.css",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		}
+		},
+		"./styles.css": "./dist/styles.css"
 	},
 	"peerDependencies": {
 		"@lucide/svelte": ">=0.400.0",