lapikit 0.2.3 → 0.2.5

package/dist/internal/core/standard-colors.d.ts

@@ -0,0 +1,75 @@
+export declare const standardColors: {
+    red: {
+        light: string;
+        dark: string;
+    };
+    orange: {
+        light: string;
+        dark: string;
+    };
+    yellow: {
+        light: string;
+        dark: string;
+    };
+    green: {
+        light: string;
+        dark: string;
+    };
+    mint: {
+        light: string;
+        dark: string;
+    };
+    teal: {
+        light: string;
+        dark: string;
+    };
+    cyan: {
+        light: string;
+        dark: string;
+    };
+    blue: {
+        light: string;
+        dark: string;
+    };
+    indigo: {
+        light: string;
+        dark: string;
+    };
+    purple: {
+        light: string;
+        dark: string;
+    };
+    pink: {
+        light: string;
+        dark: string;
+    };
+    brown: {
+        light: string;
+        dark: string;
+    };
+    gray: {
+        light: string;
+        dark: string;
+    };
+    gray2: {
+        light: string;
+        dark: string;
+    };
+    gray3: {
+        light: string;
+        dark: string;
+    };
+    gray4: {
+        light: string;
+        dark: string;
+    };
+    gray5: {
+        light: string;
+        dark: string;
+    };
+    gray6: {
+        light: string;
+        dark: string;
+    };
+};
+export default standardColors;

package/dist/internal/core/standard-colors.js

@@ -0,0 +1,75 @@
+export const standardColors = {
+    red: {
+        light: '#FF3B30',
+        dark: '#FF453A'
+    },
+    orange: {
+        light: '#FF9500',
+        dark: '#FF9F0A'
+    },
+    yellow: {
+        light: '#FFCC00',
+        dark: '#FFD60A'
+    },
+    green: {
+        light: '#34C759',
+        dark: '#30D158'
+    },
+    mint: {
+        light: '#00C7BE',
+        dark: '#66D4CF'
+    },
+    teal: {
+        light: '#30B0C7',
+        dark: '#40CBE0'
+    },
+    cyan: {
+        light: '#32ADE6',
+        dark: '#64D2FF'
+    },
+    blue: {
+        light: '#007AFF',
+        dark: '#0A84FF'
+    },
+    indigo: {
+        light: '#5856D6',
+        dark: '#5E5CE6'
+    },
+    purple: {
+        light: '#AF52DE',
+        dark: '#BF5AF2'
+    },
+    pink: {
+        light: '#FF2D55',
+        dark: '#FF375F'
+    },
+    brown: {
+        light: '#A2845E',
+        dark: '#AC8E68'
+    },
+    gray: {
+        light: '#8E8E93',
+        dark: '#8E8E93'
+    },
+    gray2: {
+        light: '#AEAEB2',
+        dark: '#636366'
+    },
+    gray3: {
+        light: '#C7C7CC',
+        dark: '#48484A'
+    },
+    gray4: {
+        light: '#D1D1D6',
+        dark: '#3A3A3C'
+    },
+    gray5: {
+        light: '#E5E5EA',
+        dark: '#2C2C2E'
+    },
+    gray6: {
+        light: '#F2F2F7',
+        dark: '#1C1C1E'
+    }
+};
+export default standardColors;

package/dist/internal/helpers/colors.d.ts

@@ -0,0 +1 @@
+export declare const formatColor: (input: string) => string;

package/dist/internal/{colors.js → helpers/colors.js}

@@ -1,5 +1,5 @@
-import { x11Colors } from '../utils/x11.js';
-export const parseColor = (input) => {
+import { x11Colors } from '../core/x11-colors.js';
+export const formatColor = (input) => {
     input = input.trim();
     if (input.startsWith('#')) {
         const rgb = hexToRgb(input);

package/dist/internal/helpers/parser.d.ts

@@ -7,3 +7,4 @@ export declare const parserCSSBreakpoints: (css: string) => {
     minmax: string;
     cleaned: string;
 };
+export declare const parserConfigLapikit: (app: string, filePath: string) => Promise<{}>;

package/dist/internal/helpers/parser.js

@@ -1,3 +1,6 @@
+import path from 'path';
+import fs from 'fs';
+import { terminal } from '../core/bin/terminal.js';
 export const parserValues = (value) => {
     if (typeof value === 'number')
         return `${value}px`;
@@ -6,6 +9,7 @@ export const parserValues = (value) => {
     return value;
 };
 export const parserCSSBreakpoints = (css) => {
+    css = css.replace(/\/\*[\s\S]*?\*\//g, ''); // clean comments
     const regex = /([^{]+)\{([^}]+)\}/g;
     let match;
     const matchesToRemove = [];
@@ -36,7 +40,7 @@ export const parserCSSBreakpoints = (css) => {
         }
         if (matchedType) {
             const rule = `${selectors} {\n${body}\n}`;
-            extractedByType.allExtracted.push(rule);
+            extractedByType.all.push(rule);
             extractedByType[matchedType].push(rule);
             matchesToRemove.push(fullMatch);
         }
@@ -46,25 +50,44 @@ export const parserCSSBreakpoints = (css) => {
         cleaned = cleaned.replace(rule, '').replace(/\n{2,}/g, '\n\n');
     }
     return {
-        all: extractedByType.allExtracted
-            .join('\n\n')
-            .replaceAll('[breakpoint|min]', '[breakpoint]')
-            .replaceAll('[breakpoint|max]', '[breakpoint]')
-            .replaceAll('[breakpoint|all]', '[breakpoint]')
-            .trim(),
-        base: extractedByType.defaultExtracted.join('\n\n').trim(),
-        min: extractedByType.minExtracted
-            .join('\n\n')
-            .replaceAll('[breakpoint|min]', '[breakpoint]')
-            .trim(),
-        max: extractedByType.maxExtracted
-            .join('\n\n')
-            .replaceAll('[breakpoint|max]', '[breakpoint]')
-            .trim(),
-        minmax: extractedByType.allModifierExtracted
-            .join('\n\n')
-            .replaceAll('[breakpoint|all]', '[breakpoint]')
-            .trim(),
+        all: extractedByType.all
+            ? extractedByType.all
+                .join('\n\n')
+                .replaceAll('[breakpoint|min]', '[breakpoint]')
+                .replaceAll('[breakpoint|max]', '[breakpoint]')
+                .replaceAll('[breakpoint|all]', '[breakpoint]')
+                .trim()
+            : '',
+        base: extractedByType.base ? extractedByType.base.join('\n\n').trim() : '',
+        min: extractedByType.min
+            ? extractedByType.min.join('\n\n').replaceAll('[breakpoint|min]', '[breakpoint]').trim()
+            : '',
+        max: extractedByType.max
+            ? extractedByType.max.join('\n\n').replaceAll('[breakpoint|max]', '[breakpoint]').trim()
+            : '',
+        minmax: extractedByType.minmax
+            ? extractedByType.minmax.join('\n\n').replaceAll('[breakpoint|all]', '[breakpoint]').trim()
+            : '',
         cleaned: cleaned.trim()
     };
 };
+export const parserConfigLapikit = async (app, filePath) => {
+    const pathConfig = path.resolve(app, filePath);
+    if (!fs.existsSync(pathConfig))
+        process.exit(1);
+    const code = fs.readFileSync(pathConfig, 'utf-8');
+    const match = code.match(/createLapikit\s*\(\s*({[\s\S]*?})\s*\)/);
+    let options = {};
+    if (match && match[1]) {
+        try {
+            options = new Function('return ' + match[1])();
+        }
+        catch (e) {
+            terminal('error', `Error parsing lapikit config: ${e}`);
+        }
+    }
+    else {
+        terminal('error', 'lapikit configuration not found please refer to the documentation https://lapikit.dev/docs/getting-started');
+    }
+    return options;
+};

package/dist/{plugin/vitejs.d.ts → internal/plugins/vite.d.ts}

@@ -1,10 +1,8 @@
-import type { ViteDevServer } from 'vite';
 type Lapikit = {
     config?: string;
 };
 export declare function lapikit({ config }?: Lapikit): Promise<{
     name: string;
-    configResolved(): Promise<void>;
-    configureServer(server: ViteDevServer): Promise<void>;
+    config(): Promise<void>;
 }>;
 export {};

package/dist/internal/plugins/vite.js

@@ -0,0 +1,33 @@
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { terminal } from '../core/bin/terminal.js';
+import { liliRabbit } from '../core/formatter/index.js';
+import { parserConfigLapikit } from '../helpers/parser.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+import fsPromises from 'fs/promises';
+import path from 'path';
+import { processImportStyles } from '../core/css.js';
+const app = process.cwd();
+export async function lapikit({ config } = {}) {
+    return {
+        name: 'lapikit/vite',
+        async config() {
+            if (config) {
+                const configuration = await parserConfigLapikit(app, config);
+                // generate styles
+                const basicStyles = await processImportStyles();
+                fsPromises.writeFile(path.resolve(__dirname, '../../styles.css'), basicStyles || '');
+                const styles = await liliRabbit(configuration);
+                fsPromises.writeFile(path.resolve(__dirname, '../../themes.css'), styles?.devices +
+                    '\n\n' +
+                    styles?.typography +
+                    '\n\n' +
+                    styles?.styles +
+                    '\n\n' +
+                    styles?.themes || '');
+            }
+            terminal('info', 'lapikit is up!');
+        }
+    };
+}

package/dist/internal/types/components.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type IdElementType = string | undefined;
+type ClassNameType = string | string[] | undefined;
+type StylePropertiesType = string | undefined;
+export interface Base {
+    id?: IdElementType;
+    class?: ClassNameType;
+    style?: StylePropertiesType;
+    [key: string]: any;
+}
+export interface Component extends Base {
+    children?: Snippet;
+}
+export {};

package/dist/internal/types/configuration.d.ts

@@ -1,3 +1,23 @@
+export interface LapikitConfiguration {
+    breakpoints?: {
+        devices?: {
+            [key: string]: number | string;
+        };
+        thresholds?: {
+            [key: string]: number | string;
+        };
+    };
+    theme?: {
+        defaultTheme?: string;
+        colorScheme?: boolean;
+        themes?: FragThemes;
+    };
+    typography?: {
+        defaultTypography?: string;
+        fonts?: FragTypography;
+    };
+    styles?: FragStyles;
+}
 export interface DevConfiguration {
     breakpoints?: {
         devices?: {
@@ -9,6 +29,7 @@ export interface DevConfiguration {
     };
     theme?: {
         defaultTheme?: string;
+        colorScheme?: boolean;
         themes?: FragThemes;
     };
     typography?: {
@@ -21,7 +42,9 @@ export interface FragThemes {
     [key: string]: {
         dark?: boolean;
         colors?: {
-            [key: string]: string;
+            [key: string]: {
+                [key: string]: string;
+            } | string;
         };
         variables?: {
             [key: string]: string | number;

package/dist/internal/types/index.d.ts

@@ -1 +1,2 @@
 export * from './configuration.js';
+export * from './components.js';

package/dist/internal/types/index.js

@@ -1 +1,2 @@
 export * from './configuration.js';
+export * from './components.js';

package/dist/stores/components.js

@@ -1,4 +1,4 @@
-import { disabledScroll } from '../internal/scroll.js';
+import { disabledScroll } from '../internal/helpers/scroll.js';
 import { writable } from 'svelte/store';
 // presets
 const refModal = false;

package/dist/stores/index.d.ts

@@ -2,3 +2,4 @@ export * from './breakpoints.js';
 export * from './devices.js';
 export * from './themes.js';
 export * from './components.js';
+export * from './viewport.js';

package/dist/stores/index.js

@@ -2,3 +2,4 @@ export * from './breakpoints.js';
 export * from './devices.js';
 export * from './themes.js';
 export * from './components.js';
+export * from './viewport.js';

package/dist/stores/themes.d.ts

@@ -1,8 +1,2 @@
 import { type Writable } from 'svelte/store';
-type PreferColorScheme = 'system' | 'dark' | 'light';
-export declare const colorScheme: Writable<PreferColorScheme>;
-export declare const colorSchemeSystem: Writable<'dark' | 'light'>;
 export declare const theme: Writable<string>;
-export declare function useColorScheme(scheme: PreferColorScheme, key?: string): void;
-export declare function useTheme(name: string, key?: string): void;
-export {};

package/dist/stores/themes.js

@@ -1,34 +1,4 @@
 import { writable } from 'svelte/store';
 // presets
-const colorSchemeRef = 'system';
-const themeRef = 'lapikit';
-// states
-const isBrowser = typeof window !== 'undefined';
-export const colorScheme = writable(colorSchemeRef);
-export const colorSchemeSystem = writable('light');
+const themeRef = 'light';
 export const theme = writable(themeRef);
-export function useColorScheme(scheme, key = '@lapikit/color-scheme') {
-    colorScheme.update(() => {
-        if (isBrowser) {
-            const ref = document.documentElement.classList;
-            if (scheme === 'system')
-                ref.remove('light', 'dark');
-            else {
-                ref.remove(scheme === 'dark' ? 'light' : 'dark');
-                ref.add(scheme === 'dark' ? 'dark' : 'light');
-            }
-            localStorage.setItem(key, scheme);
-        }
-        return scheme;
-    });
-}
-export function useTheme(name, key = '@lapikit/theme') {
-    theme.update(() => {
-        if (isBrowser) {
-            const html = document.documentElement;
-            html.setAttribute('data-theme', name);
-            localStorage.setItem(key, name);
-        }
-        return name;
-    });
-}

package/dist/stores/viewport.d.ts

@@ -0,0 +1,7 @@
+export type Viewport = {
+    innerWidth: number;
+    outerWidth: number;
+    innerHeight: number;
+    outerHeight: number;
+};
+export declare const viewport: import("svelte/store").Writable<Viewport>;

package/dist/stores/viewport.js

@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+export const viewport = writable({
+    innerWidth: 0,
+    outerWidth: 0,
+    innerHeight: 0,
+    outerHeight: 0
+});

package/dist/styles/animation.css

@@ -0,0 +1,33 @@
+.kit-ripple {
+	background-color: currentColor;
+	opacity: 0.1;
+	position: absolute;
+	border-radius: 50%;
+	pointer-events: none;
+	-webkit-transition: 0.6s;
+	transition: 0.6s;
+	-webkit-animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
+		cubic-bezier(0.4, 0, 0.2, 1);
+	animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
+		cubic-bezier(0.4, 0, 0.2, 1);
+	border-radius: var(--system-ripple-radius);
+}
+
+.kit-ripple--center {
+	top: 50% !important;
+	left: 50% !important;
+	translate: -50% -50% !important;
+}
+
+.kit-ripple--effect {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	overflow: hidden;
+	background: none;
+	pointer-events: none;
+	z-index: 999;
+	border-radius: var(--system-ripple-radius);
+}

package/dist/styles/keyframes.css

@@ -0,0 +1,30 @@
+@keyframes button-click {
+	0% {
+		transform: scale(0.98);
+	}
+	40% {
+		transform: scale(1.02);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes icon-rotate {
+	0% {
+		transform: rotate(10deg);
+	}
+	100% {
+		transform: rotate(380deg);
+	}
+}
+
+@keyframes animation-l-ripple {
+	from {
+		scale: 0;
+	}
+
+	to {
+		scale: 1;
+	}
+}

package/dist/{style/normalize.css → styles/reset.css}

@@ -3,18 +3,19 @@ html {
 	tab-size: 4;
 	line-height: 1.5;
 	box-sizing: border-box;
-	font-family: var(--kit-font-family-sans);
-	background-color: var(--kit-base);
-	color: var(--kit-on-base);
+	font-family: var(--kit-font-sans);
+	background-color: var(--kit-background-primary);
+	color: var(--kit-label-primary);
 }
 
 pre,
 code {
-	font-family: var(--kit-font-family-mono);
+	font-family: var(--kit-font-mono);
 }
 
 body {
 	margin: 0;
+	-webkit-font-smoothing: antialiased;
 }
 
 main {
@@ -46,7 +47,8 @@ button,
 	outline: none;
 }
 
-*,
+/* bug with tailwind */
+/* *,
 ::after,
 ::before,
 ::backdrop {
@@ -54,7 +56,7 @@ button,
 	margin: 0;
 	padding: 0;
 	border: 0 solid;
-}
+} */
 
 *,
 ::before,
@@ -79,7 +81,7 @@ ol,
 ul,
 menu {
 	list-style: initial;
-	margin-left: calc(var(--kit-spacing) * 5);
+	margin-left: calc(var(--system-spacing) * 5);
 }
 
 ol ul,
@@ -123,3 +125,9 @@ textarea {
 	background-color: transparent;
 	border-style: none;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		interpolate-size: allow-keywords;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.2.3",
+	"version": "0.2.5",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -50,12 +50,8 @@
 			"svelte": "./dist/components/index.js",
 			"default": "./dist/components/index.js"
 		},
-		"./labs": {
-			"svelte": "./dist/labs/index.js",
-			"default": "./dist/labs/index.js"
-		},
 		"./vite": {
-			"default": "./dist/plugin/vitejs.js"
+			"default": "./dist/internal/plugins/vite.js"
 		},
 		"./stores": {
 			"default": "./dist/stores/index.js"
@@ -63,8 +59,11 @@
 		"./actions": {
 			"default": "./dist/actions/index.js"
 		},
-		"./css": "./dist/styles.css",
-		"./styles": "./dist/labs.css"
+		"./core/colors": {
+			"default": "./dist/internal/core/standard-colors.js"
+		},
+		"./styles": "./dist/styles.css",
+		"./themes": "./dist/themes.css"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"