lapikit 0.0.0-insiders.fd1a829 → 0.0.0-insiders.fd9617d

package/dist/stores/themes.js

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+// presets
+const themeRef = 'light';
+export const theme = writable(themeRef);

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/styles/{normalize.css → reset.css}

@@ -3,16 +3,19 @@ html {
 	tab-size: 4;
 	line-height: 1.5;
 	box-sizing: border-box;
-	font-family: var(--font-sans, var(--kit-font-family-sans));
+	font-family: var(--kit-font-sans);
+	background-color: var(--kit-background-primary);
+	color: var(--kit-label-primary);
 }
 
 pre,
 code {
-	font-family: var(--font-mono, var(--kit-font-family-mono));
+	font-family: var(--kit-font-mono);
 }
 
 body {
 	margin: 0;
+	-webkit-font-smoothing: antialiased;
 }
 
 main {
@@ -44,7 +47,8 @@ button,
 	outline: none;
 }
 
-*,
+/* bug with tailwind */
+/* *,
 ::after,
 ::before,
 ::backdrop {
@@ -52,7 +56,7 @@ button,
 	margin: 0;
 	padding: 0;
 	border: 0 solid;
-}
+} */
 
 *,
 ::before,
@@ -77,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,
@@ -121,3 +125,9 @@ textarea {
 	background-color: transparent;
 	border-style: none;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		interpolate-size: allow-keywords;
+	}
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare module 'lapikit/styles' {
+	const styles: string;
+	export default styles;
+}

package/dist/themes.css.d.ts

@@ -0,0 +1,4 @@
+declare module 'lapikit/themes' {
+	const themes: string;
+	export default themes;
+}

package/package.json

@@ -1,76 +1,137 @@
 {
-	"name": "lapikit",
-	"version": "0.0.0-insiders.fd1a829",
-	"publishConfig": {
-		"access": "public"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/Nycolaide/lapikit",
-		"directory": "packages/lapikit"
-	},
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./vite": {
-			"default": "./dist/server/vite.js"
-		},
-		"./css": "./dist/styles.css"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.18.0",
-		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@testing-library/jest-dom": "^6.6.3",
-		"@testing-library/svelte": "^5.2.4",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
-		"jsdom": "^26.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.3.2",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^6.2.5",
-		"vitest": "^3.0.0"
-	},
-	"keywords": [
-		"svelte"
-	]
+  "name": "lapikit",
+  "version": "0.0.0-insiders.fd9617d",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://lapikit.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nycolaide/lapikit.git",
+    "directory": "packages/lapikit"
+  },
+  "author": {
+    "name": "Nycolaide",
+    "email": "contact@lapikit.dev"
+  },
+  "funding": "https://buymeacoffee.com/nycolaide",
+  "bugs": "https://github.com/Nycolaide/lapikit/issues",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "README.md",
+    "LICENSE",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "bin": {
+    "lapikit": "bin/index.js"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./components": {
+      "svelte": "./dist/components/index.js",
+      "default": "./dist/components/index.js"
+    },
+    "./vite": {
+      "default": "./dist/internal/plugins/vite.js"
+    },
+    "./stores": {
+      "default": "./dist/stores/index.js"
+    },
+    "./actions": {
+      "default": "./dist/actions/index.js"
+    },
+    "./core/colors": {
+      "default": "./dist/internal/core/standard-colors.js"
+    },
+    "./styles": {
+      "types": "./dist/styles.css.d.ts",
+      "default": "./dist/styles.css"
+    },
+    "./themes": {
+      "types": "./dist/themes.css.d.ts",
+      "default": "./dist/themes.css"
+    },
+    "./labs/preprocess": {
+      "default": "./dist/entry-bundler.js"
+    },
+    "./labs/components": {
+      "svelte": "./dist/labs/components/index.js",
+      "default": "./dist/labs/components/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.4",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "publint": "^0.3.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^7.2.2",
+    "vitest": "^3.0.0"
+  },
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "components",
+    "ui",
+    "library",
+    "ui-library",
+    "design system",
+    "lapikit",
+    "material components",
+    "component library",
+    "frontend",
+    "svelte library",
+    "tailwindcss",
+    "unocss",
+    "component",
+    "theme",
+    "css",
+    "typescript"
+  ],
+  "dependencies": {
+    "prompts": "^2.4.2"
+  }
 }

package/dist/app.d.ts

@@ -1,13 +0,0 @@
-// See https://svelte.dev/docs/kit/types#app.d.ts
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
-}
-
-export {};

package/dist/app.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div>%sveltekit.body%</div>
-	</body>
-</html>

package/dist/server/modules/colors.d.ts

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

package/dist/server/modules/css.d.ts

@@ -1 +0,0 @@
-export declare const processCSS: (minified?: boolean, normalize?: boolean) => Promise<void>;

package/dist/server/modules/css.js

@@ -1,144 +0,0 @@
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import fs from 'fs';
-import fsPromises from 'fs/promises';
-import path from 'path';
-import { ansi, sendConsole } from './ansi.js';
-import { minify } from './minify.js';
-import { colors } from './themes.js';
-import { devices } from './devices.js';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const __components = path.resolve('src/components');
-// temps
-const breakpoints = {
-    _default: 0,
-    desktop: 1024,
-    tablet: '768vw',
-    mobile: 480
-};
-export const processCSS = async (minified, normalize) => {
-    console.log(ansi.bold.blue('Processing CSS...'));
-    const _normalize = fs.readFileSync(path.resolve(__dirname, '../../styles/normalize.css'), 'utf-8');
-    const _variables = fs.readFileSync(path.resolve(__dirname, '../../styles/variables.css'), 'utf-8');
-    let styles = `${_variables}\n`;
-    if (normalize)
-        styles += `${_normalize}\n`;
-    const colorScheme = colors();
-    const deviceDisplay = devices();
-    styles += `${colorScheme.root}\n`;
-    styles += `${colorScheme.className}\n`;
-    styles += `${deviceDisplay}\n`;
-    if (fs.existsSync(__components) && fs.statSync(__components).isDirectory()) {
-        const tresholds = {
-            _default: '',
-            static: '',
-            min: '',
-            max: '',
-            all: ''
-        };
-        function loadComponentCSS(directory) {
-            fs.readdirSync(directory).forEach((File) => {
-                const absolutePath = path.join(directory, File);
-                if (fs.statSync(absolutePath).isDirectory())
-                    return loadComponentCSS(absolutePath);
-                else if (absolutePath.endsWith('.css') && !absolutePath.includes('/_')) {
-                    const content = parser(fs.readFileSync(absolutePath, 'utf-8'));
-                    tresholds._default += content.allExtracted
-                        .replaceAll('[breakpoint|min]', '[breakpoint]')
-                        .replaceAll('[breakpoint|max]', '[breakpoint]')
-                        .replaceAll('[breakpoint|all]', '[breakpoint]');
-                    tresholds.static += content.defaultExtracted;
-                    tresholds.min += content.minExtracted.replaceAll('[breakpoint|min]', '[breakpoint]');
-                    tresholds.max += content.maxExtracted.replaceAll('[breakpoint|max]', '[breakpoint]');
-                    tresholds.all += content.allModifierExtracted.replaceAll('[breakpoint|all]', '[breakpoint]');
-                    return (styles += `${content.cleaned}\n`);
-                }
-            });
-        }
-        loadComponentCSS(path.resolve(__dirname, '../../components'));
-        for (const property in breakpoints) {
-            if (property !== '_default') {
-                const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
-                const value = typeof breakpoints[property] === 'number'
-                    ? `${breakpoints[property]}px`
-                    : breakpoints[property];
-                if (tresholds.static !== '' || tresholds.all !== '' || tresholds.min !== '') {
-                    styles += `@media screen and (min-width: ${value}) {\n`;
-                    if (tresholds.static !== '')
-                        styles += tresholds.static.replaceAll('[breakpoint]', name);
-                    if (tresholds.all !== '')
-                        styles += tresholds.all.replaceAll('[breakpoint]', name);
-                    if (tresholds.min !== '')
-                        styles += tresholds.min.replaceAll('[breakpoint]', name);
-                    styles += `}\n`;
-                }
-                if (tresholds.max !== '' || tresholds.all !== '') {
-                    styles += `@media screen and (max-width: ${value}) {\n`;
-                    if (tresholds.max !== '')
-                        styles += tresholds.max.replaceAll('[breakpoint]', name);
-                    if (tresholds.all !== '')
-                        styles += tresholds.all.replaceAll('[breakpoint]', name);
-                    styles += `}\n`;
-                }
-            }
-            else {
-                styles += tresholds._default.replaceAll('[breakpoint]', '.');
-            }
-        }
-    }
-    if (minified) {
-        styles = minify(styles);
-        sendConsole('success', 'css minified');
-    }
-    fsPromises.writeFile(path.resolve(__dirname, '../../styles.css'), styles);
-};
-const parser = (css) => {
-    const regex = /([^{]+)\{([^}]+)\}/g;
-    let match;
-    const matchesToRemove = [];
-    const extractedByType = {
-        allExtracted: [],
-        defaultExtracted: [],
-        minExtracted: [],
-        maxExtracted: [],
-        allModifierExtracted: []
-    };
-    while ((match = regex.exec(css)) !== null) {
-        const fullMatch = match[0];
-        const selectors = match[1].trim();
-        const body = match[2].trim();
-        const selectorsArray = selectors.split(',').map((sel) => sel.trim());
-        let matchedType = null;
-        if (selectorsArray.some((sel) => sel.includes('[breakpoint|min]'))) {
-            matchedType = 'minExtracted';
-        }
-        else if (selectorsArray.some((sel) => sel.includes('[breakpoint|max]'))) {
-            matchedType = 'maxExtracted';
-        }
-        else if (selectorsArray.some((sel) => sel.includes('[breakpoint|all]'))) {
-            matchedType = 'allModifierExtracted';
-        }
-        else if (selectorsArray.some((sel) => sel.includes('[breakpoint]'))) {
-            matchedType = 'defaultExtracted';
-        }
-        if (matchedType) {
-            const rule = `${selectors} {\n${body}\n}`;
-            extractedByType.allExtracted.push(rule);
-            extractedByType[matchedType].push(rule);
-            matchesToRemove.push(fullMatch);
-        }
-    }
-    let cleaned = css;
-    for (const rule of matchesToRemove) {
-        cleaned = cleaned.replace(rule, '').replace(/\n{2,}/g, '\n\n');
-    }
-    return {
-        allExtracted: extractedByType.allExtracted.join('\n\n').trim(),
-        defaultExtracted: extractedByType.defaultExtracted.join('\n\n').trim(),
-        minExtracted: extractedByType.minExtracted.join('\n\n').trim(),
-        maxExtracted: extractedByType.maxExtracted.join('\n\n').trim(),
-        allModifierExtracted: extractedByType.allModifierExtracted.join('\n\n').trim(),
-        cleaned: cleaned.trim()
-    };
-};

package/dist/server/modules/devices.d.ts

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

package/dist/server/modules/devices.js

@@ -1,43 +0,0 @@
-const breakpoints = {
-    mobileBreakpoint: 'sm',
-    tabletBreakpoint: 'md',
-    laptopBreakpoint: 'xl',
-    thresholds: {
-        none: 0, // 0px
-        xs: '28rem', //448px
-        sm: '40rem', //640px
-        md: '48rem', //768px
-        lg: '64rem', //1024px
-        xl: '80rem', //1280px
-        '2xl': '96rem', //1536px
-        '3xl': '112rem' //1792px
-    }
-};
-export const devices = () => {
-    let css = ``;
-    const list = {
-        mobile: breakpoints.mobileBreakpoint,
-        tablet: breakpoints.tabletBreakpoint,
-        laptop: breakpoints.laptopBreakpoint
-    };
-    for (const [key, value] of Object.entries(list)) {
-        const breakpointValue = breakpoints.thresholds[value];
-        const breakpointValueMax = key !== 'laptop'
-            ? breakpoints.thresholds[key === 'mobile' ? list.tablet : key == 'tablet' ? list.laptop : '']
-            : undefined;
-        css += `.device-${key}, .only-on-${key} {\n`;
-        css += `display: none;\n`;
-        css += `}\n`;
-        css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) {\n`;
-        css += `.device-${key} {\n`;
-        css += `display: inherit !important;\n`;
-        css += `}\n`;
-        css += `}\n`;
-        css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) ${breakpointValueMax ? ('and (max-width:' + typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue + ')') : ''} {\n`;
-        css += `.only-on-${key} {\n`;
-        css += `display: inherit !important;\n`;
-        css += `}\n`;
-        css += `}\n`;
-    }
-    return css;
-};

package/dist/server/modules/importer.d.ts

@@ -1 +0,0 @@
-export declare const importer: () => Promise<any>;

package/dist/server/modules/importer.js

@@ -1,13 +0,0 @@
-import path from 'path';
-import fs from 'fs';
-import { ansi } from './ansi.js';
-const app = process.cwd();
-const pathConfig = path.resolve(app, 'lapikit.config.js');
-export const importer = async () => {
-    if (!fs.existsSync(pathConfig)) {
-        console.error(ansi.color.cyan('lapikit'), ansi.bold.red('[error]'), 'config file not found\n', ansi.color.yellow('Could not find lapikit.config.js. See https://localhost/docs/kit/vite to learn more about the configuration file.'), '\n\n', ansi.color.blue('for initializing a new lapikit config, run:\n'), '     ' + ansi.variant.bold('npx lapikit init') + '  ' + ansi.bold.yellow('(preview)'), '\n\n');
-        process.exit(1);
-    }
-    const content = await import(pathConfig);
-    return content.default;
-};

package/dist/server/modules/themes.d.ts

@@ -1,4 +0,0 @@
-export declare const colors: () => {
-    root: string;
-    className: string;
-};