lapikit 0.0.0-insiders.bf30361 → 0.0.0-insiders.c8d4fe2

package/bin/presets.js

@@ -2,8 +2,8 @@ function presets({ adapterCSS }) {
 	let content = '';
 
 	content += `/**\n`;
-	content += `\t* Lapikit\n`;
-	content += `\t* Library documentation: https://lapikit.dev\n`;
+	content += ` * Lapikit\n`;
+	content += ` * Library documentation: https://lapikit.dev\n`;
 	content += ` */\n\n`;
 
 	if (adapterCSS === 'css') {

package/dist/components/chip/chip.css

@@ -20,7 +20,7 @@
 	text-decoration: none;
 }
 
-.kit-chip:not(div):not(span) {
+.kit-chip:not(div):not(span):not(.kit-chip--readonly) {
 	cursor: pointer;
 }
 
@@ -49,13 +49,13 @@
 	pointer-events: none;
 	border-radius: inherit;
 }
-.kit-chip:not(div):not(span):hover::after {
+.kit-chip:not(div):not(span):not(.kit-chip--readonly):hover::after {
 	opacity: 0.08;
 }
-.kit-chip:not(div):not(span):active::after {
+.kit-chip:not(div):not(span):not(.kit-chip--readonly):active::after {
 	opacity: 0.12;
 }
-.kit-chip:not(div):not(span):focus-visible::after {
+.kit-chip:not(div):not(span):not(.kit-chip--readonly):focus-visible::after {
 	opacity: 0.12;
 }
 

package/dist/components/chip/chip.svelte

@@ -37,6 +37,7 @@
 		rounded,
 		closable,
 		noRipple,
+		readonly = false,
 		...rest
 	}: ChipProps = $props();
 
@@ -44,7 +45,7 @@
 
 	$effect(() => {
 		const refProps = { ...rest };
-		if (refProps?.onclick) is = 'button';
+		if (refProps?.onclick && !readonly) is = 'button';
 	});
 </script>
 
@@ -68,6 +69,7 @@
 			disabled && 'kit-chip--disabled',
 			active && 'kit-chip--active',
 			loading && 'kit-chip--loading',
+			readonly && 'kit-chip--readonly',
 			rest.class
 		]}
 		tabindex={href && disabled ? -1 : 0}
@@ -77,7 +79,7 @@
 		type={href ? undefined : type}
 		use:ripple={{
 			component: 'chip',
-			disabled: noRipple || disabled || is === 'div' || is === 'span'
+			disabled: noRipple || readonly || disabled || is === 'div' || is === 'span'
 		}}
 		style:--base={assets.color(background)}
 		style:--on={assets.color(color)}
@@ -109,7 +111,7 @@
 			</div>
 		{/if}
 
-		{#if closable}
+		{#if closable && !readonly}
 			<button
 				class="kit-chip--close"
 				type="button"

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

@@ -28,4 +28,5 @@ export interface ChipProps extends Component {
     label?: string;
     closable?: boolean;
     noRipple?: boolean;
+    readonly?: boolean;
 }

package/dist/components/dialog/dialog.css

@@ -60,7 +60,9 @@
 }
 
 .kit-dialog[breakpoint]kit-dialog--position-center {
-	margin: auto;
+	/* margin: auto; */
+	margin-top: auto;
+	margin-bottom: auto;
 }
 
 .kit-dialog[breakpoint]kit-dialog--size-xs {

package/dist/components/modal/modal.css

@@ -49,7 +49,6 @@
 	max-height: calc(100% - 3rem);
 	height: fit-content;
 	margin: 0 auto;
-	top: 50%;
 	left: 50%;
 	bottom: initial;
 	translate: var(--modal-translate-x) var(--modal-translate-y);
@@ -60,7 +59,6 @@
 	max-height: calc(100% - 3rem);
 	height: fit-content;
 	margin: 0 auto;
-	top: 50%;
 	left: 50%;
 	bottom: initial;
 	translate: var(--modal-translate-x) var(--modal-translate-y);
@@ -71,7 +69,6 @@
 	max-height: calc(100% - 3rem);
 	height: fit-content;
 	margin: 0 auto;
-	top: 50%;
 	left: 50%;
 	bottom: initial;
 	translate: var(--modal-translate-x) var(--modal-translate-y);
@@ -82,7 +79,6 @@
 	max-height: calc(100% - 3rem);
 	height: fit-content;
 	margin: 0 auto;
-	top: 50%;
 	left: 50%;
 	bottom: initial;
 	translate: var(--modal-translate-x) var(--modal-translate-y);
@@ -93,7 +89,6 @@
 	max-height: calc(100% - 3rem);
 	height: fit-content;
 	margin: 0 auto;
-	top: 50%;
 	left: 50%;
 	bottom: initial;
 	translate: var(--modal-translate-x) var(--modal-translate-y);
@@ -130,15 +125,21 @@
 /* position */
 .kit-modal [breakpoint]kit-modal-container--position-bottom {
 	--modal-translate-y: 0;
-	bottom: 0;
+	margin: auto;
 	top: initial;
+	bottom: 0;
 }
 
 .kit-modal [breakpoint]kit-modal-container--position-top {
 	--modal-translate-y: 0;
+	margin: auto;
 	top: 0;
+	bottom: initial;
 }
 
 .kit-modal [breakpoint]kit-modal-container--position-center {
+	--modal-translate-y: -50%;
 	margin: auto;
+	top: 50%;
+	bottom: initial;
 }

package/dist/index.d.ts

@@ -1,5 +1,10 @@
 interface Lapikit {
     adapterCSS: string;
+    breakpoints: {
+        thresholds: {
+            [key: string]: number | string;
+        };
+    };
 }
 declare function createLapikit(lapikit: Lapikit): void;
 export default createLapikit;

package/dist/index.js

@@ -1,5 +1,14 @@
+import { deepMerge } from './internal/deepMerge.js';
+import { breakpoints } from './stores/breakpoints.js';
+import { get } from 'svelte/store';
 function createLapikit(lapikit) {
     console.log('Creating a new Lapikit instance...');
     console.log('Options loaded:', lapikit);
+    if (lapikit?.breakpoints?.thresholds) {
+        const currentBreakpoints = get(breakpoints);
+        const breakpointMerged = deepMerge(currentBreakpoints, lapikit.breakpoints.thresholds);
+        breakpoints.set(breakpointMerged);
+        console.log('Breakpoints found:', breakpointMerged);
+    }
 }
 export default createLapikit;

package/dist/internal/deepMerge.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Recursively merges two objects together.
+ * Properties from the source object override those from the target object.
+ * Nested objects are merged recursively.
+ *
+ * @param target - The base object
+ * @param source - The source object to merge (can be null or undefined)
+ * @returns A new object containing the merge of both objects
+ *
+ * @example
+ * ```typescript
+ * const obj1 = { primary: { light: 'pink', medium: 'purple' } };
+ * const obj2 = { primary: { dark: 'red' } };
+ * const result = deepMerge(obj1, obj2);
+ * // Result: { primary: { light: 'pink', medium: 'purple', dark: 'red' } }
+ *
+ * // Works with null/undefined source
+ * const result2 = deepMerge(obj1, null);
+ * // Result: { primary: { light: 'pink', medium: 'purple' } }
+ * ```
+ */
+export declare function deepMerge<T extends Record<string, unknown>, U extends Record<string, unknown>>(target: T, source: U | null | undefined): T & U;
+/**
+ * Merges multiple objects together recursively.
+ *
+ * @param objects - The objects to merge (null and undefined values are ignored)
+ * @returns A new object containing the merge of all objects
+ *
+ * @example
+ * ```typescript
+ * const result = deepMergeMultiple(
+ *   { primary: { light: 'pink' } },
+ *   null,
+ *   { primary: { dark: 'red' } },
+ *   undefined,
+ *   { secondary: { light: 'blue' } }
+ * );
+ * // Result: {
+ * //   primary: { light: 'pink', dark: 'red' },
+ * //   secondary: { light: 'blue' }
+ * // }
+ * ```
+ */
+export declare function deepMergeMultiple(...objects: (Record<string, unknown> | null | undefined)[]): Record<string, unknown>;

package/dist/internal/deepMerge.js

@@ -0,0 +1,80 @@
+/**
+ * Checks if a value is a plain object (object literal)
+ */
+function isPlainObject(value) {
+    return (value !== null &&
+        typeof value === 'object' &&
+        Object.prototype.toString.call(value) === '[object Object]');
+}
+/**
+ * Recursively merges two objects together.
+ * Properties from the source object override those from the target object.
+ * Nested objects are merged recursively.
+ *
+ * @param target - The base object
+ * @param source - The source object to merge (can be null or undefined)
+ * @returns A new object containing the merge of both objects
+ *
+ * @example
+ * ```typescript
+ * const obj1 = { primary: { light: 'pink', medium: 'purple' } };
+ * const obj2 = { primary: { dark: 'red' } };
+ * const result = deepMerge(obj1, obj2);
+ * // Result: { primary: { light: 'pink', medium: 'purple', dark: 'red' } }
+ *
+ * // Works with null/undefined source
+ * const result2 = deepMerge(obj1, null);
+ * // Result: { primary: { light: 'pink', medium: 'purple' } }
+ * ```
+ */
+export function deepMerge(target, source) {
+    // If source is null or undefined, return a copy of target
+    if (source == null) {
+        return { ...target };
+    }
+    // Create a copy of the target object to avoid mutations
+    const result = { ...target };
+    for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+            const sourceValue = source[key];
+            const targetValue = result[key];
+            // If both values are plain objects, merge them recursively
+            if (isPlainObject(targetValue) && isPlainObject(sourceValue)) {
+                result[key] = deepMerge(targetValue, sourceValue);
+            }
+            else {
+                // Otherwise, the source value overrides the target value
+                result[key] = sourceValue;
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Merges multiple objects together recursively.
+ *
+ * @param objects - The objects to merge (null and undefined values are ignored)
+ * @returns A new object containing the merge of all objects
+ *
+ * @example
+ * ```typescript
+ * const result = deepMergeMultiple(
+ *   { primary: { light: 'pink' } },
+ *   null,
+ *   { primary: { dark: 'red' } },
+ *   undefined,
+ *   { secondary: { light: 'blue' } }
+ * );
+ * // Result: {
+ * //   primary: { light: 'pink', dark: 'red' },
+ * //   secondary: { light: 'blue' }
+ * // }
+ * ```
+ */
+export function deepMergeMultiple(...objects) {
+    return objects
+        .filter((obj) => obj != null)
+        .reduce((acc, obj) => {
+        return deepMerge(acc, obj);
+    }, {});
+}

package/dist/stores/breakpoints.d.ts

@@ -0,0 +1,6 @@
+import { type Writable } from 'svelte/store';
+type Breakpoints = {
+    [key: string]: number | string;
+};
+export declare const breakpoints: Writable<Breakpoints>;
+export {};

package/dist/stores/breakpoints.js

@@ -0,0 +1,23 @@
+// store breakpoints and thresholds
+import { writable } from 'svelte/store';
+// presets
+const ref = {
+    base: 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 breakpoints = writable(ref);
+// export function setBreakpoints(newBreakpoints: Breakpoints) {
+// 	breakpoints.set(newBreakpoints);
+// }
+// export function updateBreakpoint(key: string, value: number) {
+// 	breakpoints.update((bp) => ({
+// 		...bp,
+// 		[key]: value
+// 	}));
+// }

package/dist/stores/index.d.ts

@@ -8,3 +8,4 @@ export declare function setColorScheme(scheme: 'system' | 'dark' | 'light'): voi
 export declare function setOpenModal(state: boolean | 'persistent'): void;
 export declare const pushModal: (id: string) => void;
 export declare const popModal: (id: string) => void;
+export * from './breakpoints.js';

package/dist/stores/index.js

@@ -45,3 +45,4 @@ export const popModal = (id) => {
         return newStack.length === 0 ? [] : newStack;
     });
 };
+export * from './breakpoints.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0-insiders.bf30361",
+	"version": "0.0.0-insiders.c8d4fe2",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"