@upsoftware_tech/svarium 1.0.7 → 1.0.8

package/src/lib/block.ts

@@ -0,0 +1,51 @@
+export const GRID_COLS = {
+    default: { 1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4', 5: 'grid-cols-5', 6: 'grid-cols-6', 7: 'grid-cols-7', 8: 'grid-cols-8', 9: 'grid-cols-9', 10: 'grid-cols-10', 11: 'grid-cols-11', 12: 'grid-cols-12' },
+    sm: { 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' },
+    md: { 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' },
+    lg: { 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' },
+    xl: { 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' },
+    xxl: { 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' }
+} as const;
+
+const GAPS = { 0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 8: '8', 10: '10', 12: '12' } as const;
+
+const generateGapMap = (prefix: string = 'gap') => ({
+    default: { 0: `${prefix}-0`, 1: `${prefix}-1`, 2: `${prefix}-2`, 3: `${prefix}-3`, 4: `${prefix}-4`, 5: `${prefix}-5`, 6: `${prefix}-6`, 8: `${prefix}-8`, 10: `${prefix}-10`, 12: `${prefix}-12` },
+    sm: { 0: `sm:${prefix}-0`, 1: `sm:${prefix}-1`, 2: `sm:${prefix}-2`, 3: `sm:${prefix}-3`, 4: `sm:${prefix}-4`, 5: `sm:${prefix}-5`, 6: `sm:${prefix}-6`, 8: `sm:${prefix}-8`, 10: `sm:${prefix}-10`, 12: `sm:${prefix}-12` },
+    md: { 0: `md:${prefix}-0`, 1: `md:${prefix}-1`, 2: `md:${prefix}-2`, 3: `md:${prefix}-3`, 4: `md:${prefix}-4`, 5: `md:${prefix}-5`, 6: `md:${prefix}-6`, 8: `md:${prefix}-8`, 10: `md:${prefix}-10`, 12: `md:${prefix}-12` },
+    lg: { 0: `lg:${prefix}-0`, 1: `lg:${prefix}-1`, 2: `lg:${prefix}-2`, 3: `lg:${prefix}-3`, 4: `lg:${prefix}-4`, 5: `lg:${prefix}-5`, 6: `lg:${prefix}-6`, 8: `lg:${prefix}-8`, 10: `lg:${prefix}-10`, 12: `lg:${prefix}-12` },
+    xl: { 0: `xl:${prefix}-0`, 1: `xl:${prefix}-1`, 2: `xl:${prefix}-2`, 3: `xl:${prefix}-3`, 4: `xl:${prefix}-4`, 5: `xl:${prefix}-5`, 6: `xl:${prefix}-6`, 8: `xl:${prefix}-8`, 10: `xl:${prefix}-10`, 12: `xl:${prefix}-12` },
+    xxl: { 0: `2xl:${prefix}-0`, 1: `2xl:${prefix}-1`, 2: `2xl:${prefix}-2`, 3: `2xl:${prefix}-3`, 4: `2xl:${prefix}-4`, 5: `2xl:${prefix}-5`, 6: `2xl:${prefix}-6`, 8: `2xl:${prefix}-8`, 10: `2xl:${prefix}-10`, 12: `2xl:${prefix}-12` }
+});
+
+export const GRID_GAPS = generateGapMap('gap');
+export const GRID_GAPS_X = generateGapMap('gap-x');
+export const GRID_GAPS_Y = generateGapMap('gap-y');
+
+
+export type BreakpointValues = { default?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number; };
+
+
+function resolveClasses(map: any, values?: BreakpointValues): string[] {
+    if (!values) return [];
+    const classes: string[] = [];
+
+    (Object.keys(map) as Array<keyof BreakpointValues>).forEach(bp => {
+        const val = values[bp];
+        if (val !== undefined && map[bp]?.[val as any]) {
+            classes.push(map[bp][val as any]);
+        }
+    });
+
+    return classes;
+}
+
+export function getGridStyles(props: { cols?: BreakpointValues, gap?: BreakpointValues, gapX?: BreakpointValues, gapY?: BreakpointValues }): string {
+    return [
+        ...resolveClasses(GRID_COLS, props.cols),
+        ...resolveClasses(GRID_GAPS, props.gap),
+        ...resolveClasses(GRID_GAPS_X, props.gapX),
+        ...resolveClasses(GRID_GAPS_Y, props.gapY),
+        !props.cols?.default ? 'grid-cols-1' : ''
+    ].filter(Boolean).join(' ');
+}

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}