@djcali570/component-lib 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/DatePicker5.svelte

@@ -0,0 +1,625 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { fly } from 'svelte/transition';
+
+	// Props with runes
+	let {
+		colorScheme = {
+			labelTextColor: '#989A9A',
+			inputTextColor: '#D6D6D6',
+			inputBgColor: '#121212',
+			inputBorderColor: '#262626',
+			inputFocusedBorderColor: '#4787ac',
+			inputClearColor: '#989A9A',
+			inputClearHoverColor: '#1F2023',
+			placeholderColor: '#46464A',
+			pickerBgColor: '#121212',
+			pickerMonthBgColor: '#121212',
+			pickerTextColor: '#D6D6D6',
+			pickerInactiveDayColor: '#46464A',
+			pickerTodayColor: '#BF3131',
+			pickerSelectedDayBgColor: '#4787ac',
+			pickerSelectedDayTextColor: '#121212',
+			pickerChevronHoverColor: '#1F2023',
+			pickerMaxHeight: '340px'
+		},
+		title = '',
+		name = '',
+		dateText = $bindable(),
+		placeholder = '',
+		minDate = new Date(),
+		maxDate = null,
+		blockedDates = [],
+		radius = 'full',
+		position = 'left-0',
+		disabled = false,
+		onDateUpdate = (date: string) => {}
+	}: {
+		title: string;
+		name: string;
+		dateText?: string;
+		placeholder?: string;
+		minDate?: Date;
+		maxDate?: Date | null;
+		blockedDates?: Date[];
+		radius?: 'right' | 'left' | 'full';
+		position?: 'left-0' | 'right-0';
+		disabled?: boolean;
+		colorScheme?: Record<string, string>;
+		onDateUpdate?: (date: string) => void;
+	} = $props();
+
+	// Normalize minDate to start of day
+	minDate = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
+
+	// State with runes
+	let showDropdown = $state(false);
+	let viewDate = $state(dateText ? new Date(dateText) : new Date());
+	let today = $state(new Date());
+	let selectedDate = $state(dateText ? new Date(dateText) : null);
+	let calendarDays = $state<(Date | null)[]>([]);
+	let dropdownRef = $state<HTMLElement | null>(null); // Reference to the dropdown
+	let inputRef = $state<HTMLElement | null>(null); // Reference to the input container
+	let showPrevMonthButton = $state(true);
+	let showNextMonthButton = $state(true);
+
+	// Static data
+	const weekAbv = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+	const monthNames = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	];
+	const calendarGridCount = 42;
+	const id = generateRandomString();
+
+	// Default maxDate
+	if (!maxDate && minDate) {
+		maxDate = new Date(minDate);
+		maxDate.setFullYear(minDate.getFullYear() + 1);
+	}
+
+	// Initial call to populate calendarDays
+	getDays();
+
+	// Reactive updates for dateText
+	$effect(() => {
+		if (dateText) {
+			const newDate = new Date(dateText);
+			if (
+				!isNaN(newDate.getTime()) &&
+				dateText !==
+					selectedDate?.toLocaleDateString('en-US', {
+						year: 'numeric',
+						month: '2-digit',
+						day: '2-digit'
+					})
+			) {
+				selectedDate = newDate;
+				viewDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+			}
+		} else if (selectedDate !== null) {
+			selectedDate = null;
+		}
+	});
+
+	// Close dropdown when clicking outside
+	$effect(() => {
+		if (!browser || !showDropdown) return;
+
+		const handleClickOutside = (event: MouseEvent) => {
+			const target = event.target as Node;
+			if (dropdownRef && inputRef && !dropdownRef.contains(target) && !inputRef.contains(target)) {
+				showDropdown = false;
+			}
+		};
+
+		document.addEventListener('click', handleClickOutside);
+
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	});
+
+	// Refresh calendar when minDate or maxDate changes
+	$effect(() => {
+		minDate;
+		maxDate;
+		getDays();
+	});
+
+	// Auto-scroll to make dropdown fully visible
+
+	$effect(() => {
+		if (!browser || !showDropdown || !dropdownRef) return;
+		setTimeout(() => {
+			if (!dropdownRef) return;
+			const dropdownRect = dropdownRef.getBoundingClientRect();
+			const viewportHeight = window.innerHeight;
+			if (dropdownRect.bottom > viewportHeight) {
+				const scrollY = window.scrollY + (dropdownRect.bottom - viewportHeight) + 10;
+				window.scrollTo({ top: scrollY, behavior: 'smooth' });
+			}
+		}, 0);
+	});
+
+	function getDays() {
+		const year = viewDate.getFullYear();
+		const month = viewDate.getMonth();
+
+		// Current month days
+		const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
+		let daysOfMonth: Date[] = [];
+		for (let day = 1; day <= lastDayOfMonth; day++) {
+			daysOfMonth.push(new Date(year, month, day));
+		}
+
+		// Initialize calendarDays
+		let calendarDaysTemp = Array(calendarGridCount).fill(null);
+
+		// First day's weekday
+		const firstDayOfMonth = new Date(year, month, 1);
+		const firstDayOfWeekValue = firstDayOfMonth.getDay();
+
+		// Previous month padding
+		const prevMonthLastDay = new Date(year, month, 0).getDate();
+		const prevMonthStart = prevMonthLastDay - firstDayOfWeekValue + 1;
+		for (let i = 0; i < firstDayOfWeekValue; i++) {
+			calendarDaysTemp[i] = new Date(year, month - 1, prevMonthStart + i);
+		}
+
+		// Current month days
+		calendarDaysTemp = replaceCellsWithDays(calendarDaysTemp, daysOfMonth, firstDayOfWeekValue);
+
+		// Next month padding
+		const filledCells = firstDayOfWeekValue + daysOfMonth.length;
+		for (let i = filledCells, day = 1; i < calendarGridCount; i++, day++) {
+			calendarDaysTemp[i] = new Date(year, month + 1, day);
+		}
+
+		// Update month button states
+		showPrevMonthButton =
+			year < minDate.getFullYear() ||
+			(year === minDate.getFullYear() && month <= minDate.getMonth());
+		showNextMonthButton = maxDate
+			? year > maxDate.getFullYear() ||
+				(year === maxDate.getFullYear() && month >= maxDate.getMonth())
+			: false;
+
+		calendarDays = calendarDaysTemp;
+	}
+
+	/**
+	 * Fill the calendarDays array
+	 */
+	function replaceCellsWithDays(cells: (Date | null)[], days: Date[], startPoint: number) {
+		const newCells = [...cells];
+
+		// Place days starting at startPoint
+		for (let i = 0; i < days.length; i++) {
+			if (startPoint + i < newCells.length) {
+				newCells[startPoint + i] = days[i];
+			} else {
+				break;
+			}
+		}
+
+		return newCells;
+	}
+
+	function clearDate() {
+		dateText = '';
+		selectedDate = null;
+		showDropdown = false;
+		getDays();
+		onDateUpdate('');
+	}
+
+	function prevMonth() {
+		viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+		getDays();
+	}
+	function nextMonth() {
+		viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+		getDays();
+	}
+
+	function selectDate(date: Date) {
+		selectedDate = date;
+		viewDate = new Date(date.getFullYear(), date.getMonth(), 1);
+		const newDateText = date.toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		});
+		dateText = newDateText;
+		getDays();
+		showDropdown = false;
+		onDateUpdate(newDateText);
+	}
+
+	/**
+	 * Generate a random string so that each
+	 * input will have a unique id in the dom
+	 */
+	function generateRandomString() {
+		const length = 6;
+		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+		let result = '';
+		for (let i = 0; i < length; i++) {
+			const randomIndex = Math.floor(Math.random() * characters.length);
+			result += characters.charAt(randomIndex);
+		}
+
+		return result;
+	}
+
+	// blockedDates = [
+	// 	new Date(2025, 3, 15), // April 15, 2025
+	// 	new Date(2025, 3, 20), // April 20, 2025
+	// 	new Date(2025, 4, 5) // May 5, 2025
+	// ];
+</script>
+
+<div
+	class="picker"
+	style="
+--dpicker-inputBgColor: {colorScheme.inputBgColor};
+--dpicker-borderColor: {colorScheme.inputBorderColor};
+--dpicker-textColor: {colorScheme.inputTextColor};
+--dpicker-labelTextColor: {colorScheme.labelTextColor};
+--dpicker-clearColor: {colorScheme.inputClearColor};
+--dpicker-clearHoverColor: {colorScheme.inputClearHoverColor};
+--dpicker-maxHeight: {colorScheme.pickerMaxHeight};
+--dpicker-bgColor: {colorScheme.pickerBgColor};
+--dpicker-inputFocusedBorderColor: {colorScheme.inputFocusedBorderColor};
+--dpicker-monthBgColor: {colorScheme.pickerMonthBgColor};
+--dpicker-selectedDayBgColor: {colorScheme.pickerSelectedDayBgColor};
+--dpicker-selectedDayTextColor: {colorScheme.pickerSelectedDayTextColor};
+--dpicker-inactiveDayColor: {colorScheme.pickerInactiveDayColor};
+"
+>
+	<div
+		class="outer"
+		bind:this={inputRef}
+		role="button"
+		tabindex={disabled ? -1 : 0}
+		class:disabled-input={disabled}
+		class:radius--l--only={radius === 'left'}
+		class:radius--r--only={radius === 'right'}
+		class:radius--full={radius === 'full'}
+		onclick={() => !disabled && (showDropdown = true)}
+		onkeydown={(e) =>
+			!disabled && (e.key === 'Enter' || e.key === 'Space') && (showDropdown = true)}
+	>
+		<label for="dpicker-{id}">
+			<div class="dpicker-title">
+				<div>{title}</div>
+			</div>
+			<div>
+				<div class="dpicker-input">
+					<input
+						type="text"
+						aria-label={name}
+						aria-describedby={name}
+						id="dpicker-input-{id}"
+						autocomplete="off"
+						{placeholder}
+						{name}
+						readonly
+						bind:value={dateText}
+					/>
+					<div class="flex justify-center items-center p-3">
+						{#if dateText && !disabled}
+							<button
+								aria-label="Close Date Picker"
+								id="dpicker-CloseBtn-{id}"
+								class="dpicker-closeBtn w-6 h-6 flex justify-center items-center rounded-full"
+								onclick={(e) => {
+									e.stopPropagation();
+									clearDate();
+								}}
+							>
+								<div class="h-[14px] w-[14px] close-btn">
+									<svg
+										version="1.1"
+										id="Layer_1"
+										xmlns="http://www.w3.org/2000/svg"
+										xmlns:xlink="http://www.w3.org/1999/xlink"
+										x="0px"
+										y="0px"
+										viewBox="0 0 100 100"
+										style="enable-background:new 0 0 100 100;"
+										xml:space="preserve"
+									>
+										<path
+											fill="currentColor"
+											d="M87.8,87.4c-0.7,0.7-1.6,1.1-2.6,1.1c-0.9,0-1.8-0.4-2.5-1.1L50,55.1L17.8,87.8c-0.7,0.7-1.6,1.1-2.6,1.1
+                                    c-0.9,0-1.8-0.3-2.5-1.1c-1.4-1.4-1.4-3.7,0-5.1L44.9,50L12.2,17.8c-1.4-1.4-1.4-3.7,0-5.1c1.4-1.4,3.7-1.4,5.1,0L50,44.9l32.3-32.6
+                                    c1.4-1.4,3.7-1.4,5.1,0c1.4,1.4,1.4,3.7,0,5.1L55.1,50l32.6,32.3C89.2,83.7,89.2,86,87.8,87.4z"
+										/>
+									</svg>
+								</div>
+							</button>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</label>
+	</div>
+	{#if showDropdown && !disabled}
+		<div
+			bind:this={dropdownRef}
+			class="dpicker-dropdown {position}"
+			style="box-shadow: 0px 1px 16px 0px rgba(0,0,0,0.12);"
+			transition:fly={{ y: 10 }}
+		>
+			<div class="h-full">
+				<div class="grid grid-cols-7 month-block">
+					<button
+						id="chev-prev-{id}"
+						type="button"
+						aria-label="Previous Month"
+						class="w-full flex col-span-1 items-center justify-center cursor-pointer"
+						disabled={showPrevMonthButton}
+						onclick={prevMonth}
+					>
+						<div
+							class="size-8 flex justify-center items-center rounded-full chev"
+							class:disabled={showPrevMonthButton}
+						>
+							<div class="size-5">
+								<svg
+									version="1.1"
+									id="Layer_1"
+									xmlns="http://www.w3.org/2000/svg"
+									xmlns:xlink="http://www.w3.org/1999/xlink"
+									x="0px"
+									y="0px"
+									viewBox="0 0 200 200"
+									style="enable-background:new 0 0 200 200;"
+									xml:space="preserve"
+								>
+									<path
+										fill="currentColor"
+										d="M63.6,103.4c-1.9-1.9-1.9-5.1,0-7.1L129,30.9c1-1,2.2-1.5,3.5-1.5c1.3,0,2.6,0.5,3.5,1.5c1.9,1.9,1.9,5.1,0,7.1L74.3,99.8
+  l62.1,62.1c1.9,1.9,1.9,5.1,0,7.1l-0.1,0.1c-1.1,0.9-2.3,1.4-3.6,1.4c-1.3,0-2.6-0.5-3.5-1.5L63.6,103.4z"
+									/>
+								</svg>
+							</div>
+						</div>
+					</button>
+					<div class="col-span-5 flex justify-center items-center">
+						{monthNames[viewDate.getMonth()]}
+						{viewDate.getFullYear()}
+					</div>
+					<button
+						id="chev-next-{id}"
+						type="button"
+						aria-label="Next Month"
+						class="w-full flex col-span-1 items-center justify-center cursor-pointer"
+						disabled={showNextMonthButton}
+						onclick={nextMonth}
+					>
+						<div
+							class="size-8 flex justify-center items-center rounded-full chev"
+							class:disabled={showNextMonthButton}
+						>
+							<div class="size-5">
+								<svg
+									version="1.1"
+									id="Layer_1"
+									xmlns="http://www.w3.org/2000/svg"
+									xmlns:xlink="http://www.w3.org/1999/xlink"
+									x="0px"
+									y="0px"
+									viewBox="0 0 200 200"
+									style="enable-background:new 0 0 200 200;"
+									xml:space="preserve"
+								>
+									<path
+										fill="currentColor"
+										d="M136.4,96.6c1.9,1.9,1.9,5.1,0,7.1L71,169.1c-1,1-2.2,1.5-3.5,1.5c-1.3,0-2.6-0.5-3.5-1.5c-1.9-1.9-1.9-5.1,0-7.1l61.8-61.8
+  L63.6,38c-1.9-1.9-1.9-5.1,0-7.1l0.1-0.1c1.1-0.9,2.3-1.4,3.6-1.4c1.3,0,2.6,0.5,3.5,1.5L136.4,96.6z"
+									/>
+								</svg>
+							</div>
+						</div>
+					</button>
+				</div>
+				<div class="grid grid-cols-7">
+					{#each weekAbv as weekday}
+						<div class="flex justify-center items-center text-[var(--text-light)] text-sm">
+							{weekday}
+						</div>
+					{/each}
+				</div>
+				<div class="grid grid-cols-7 grid-rows-6">
+					{#each calendarDays as date, index (index)}
+						<div id="day-{index}" class="flex justify-center items-center">
+							{#if date}
+								<button
+									id="day-btn-{index}"
+									type="button"
+									class="h-10 w-10 flex justify-center items-center calendar-day"
+									class:highlighted={(selectedDate &&
+										date.toDateString() === selectedDate.toDateString()) ||
+										(!selectedDate && date.toDateString() === today.toDateString())}
+									class:other-month={date.getMonth() !== viewDate.getMonth()}
+									class:blocked={blockedDates.some((d) => d.toDateString() === date.toDateString())}
+									data-index={index}
+									aria-label={`Select ${date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}`}
+									disabled={date < minDate ||
+										(maxDate && date > maxDate) ||
+										blockedDates.some((d) => d.toDateString() === date.toDateString())}
+									onclick={() => selectDate(date)}
+								>
+									{date.getDate()}
+								</button>
+							{:else}
+								<div class="h-10 w-10 flex justify-center items-center"></div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.picker {
+		position: relative;
+		display: inline-block;
+		width: 100%;
+		color: var(--dpicker-textColor);
+	}
+	.outer {
+		background-color: var(--dpicker-inputBgColor);
+		border: none;
+		line-height: 20px;
+		font-size: 16px;
+		margin: 0;
+		box-shadow: inset 0 0 0 1px var(--dpicker-borderColor);
+		width: 100%;
+		display: flex;
+		position: relative;
+		min-height: 62px;
+		text-size-adjust: 100%;
+	}
+	label {
+		line-height: 20px;
+		color: var(--dpicker-textColor);
+		flex-grow: 1;
+		flex-basis: 0%;
+		flex-shrink: 1;
+		position: relative;
+		box-sizing: border-box;
+	}
+	.dpicker-title {
+		line-height: 20px;
+		color: var(--dpicker-labelTextColor);
+		display: block;
+		left: 12px;
+		right: 12px;
+		position: absolute;
+		top: 18px;
+		transform: matrix(0.75, 0, 0, 0.75, 0, -8);
+		transform-origin: 0px 0px;
+		transition: transform 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+	}
+	input {
+		background-color: transparent;
+		border: none;
+		font-family: inherit;
+		padding: 0;
+		line-height: inherit;
+		margin: 26px 12px 10px;
+		height: 20px;
+		width: 100%;
+		outline: none;
+		color: inherit;
+		appearance: none;
+		-webkit-appearance: none;
+	}
+	.dpicker-input {
+		display: flex;
+		opacity: 1;
+	}
+	.radius--full {
+		border-radius: 0.5rem /* 8px */;
+	}
+	.radius--l--only {
+		border-top-left-radius: 0.5rem /* 8px */;
+		border-bottom-left-radius: 0.5rem /* 8px */;
+	}
+	.radius--r--only {
+		border-top-right-radius: 0.5rem /* 8px */;
+		border-bottom-right-radius: 0.5rem /* 8px */;
+	}
+	.dpicker-closeBtn {
+		display: none;
+		color: var(--dpicker-clearColor);
+	}
+
+	.dpicker-closeBtn:hover {
+		background-color: var(--dpicker-clearHoverColor);
+	}
+	.outer:focus-within .dpicker-closeBtn {
+		display: flex;
+	}
+	.outer:not(.disabled-input):focus-within {
+		box-shadow: inset 0 0 0 2px var(--dpicker-inputFocusedBorderColor);
+	}
+
+	.dpicker-dropdown {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		top: 110%;
+		z-index: 20;
+		overflow-y: auto;
+		border-radius: 0.5rem /* 8px */;
+		max-height: var(--dpicker-maxHeight);
+		width: 100%;
+		min-width: 300px;
+		background-color: var(--dpicker-bgColor);
+	}
+	.month-block {
+		width: 100%;
+		background-color: var(--picker-monthBgColor);
+	}
+	.chev:hover {
+		background-color: var(--dpicker-clearHoverColor);
+	}
+
+	.chev.disabled {
+		color: var(--dpicker-inactiveDayColor);
+	}
+	.calendar-day {
+		color: var(--dpicker-textColor);
+		border-radius: 50%;
+	}
+	.calendar-day:hover:not(:disabled) {
+		border: 1px solid var(--dpicker-textColor);
+	}
+	.highlighted {
+		background-color: var(--dpicker-selectedDayBgColor);
+		color: var(--dpicker-selectedDayTextColor);
+		opacity: 1 !important; /* Ensure full opacity for highlighted dates */
+	}
+
+	.other-month:not(.highlighted) {
+		color: var(--dpicker-textColor);
+		opacity: 0.65;
+	}
+	.calendar-day.blocked {
+		text-decoration: line-through;
+		color: var(--dpicker-inactiveDayColor);
+		cursor: not-allowed;
+	}
+
+	.calendar-day.blocked:hover:not(:disabled) {
+		border: none;
+	}
+
+	.calendar-day:disabled {
+		color: var(--dpicker-inactiveDayColor);
+		opacity: 0.7;
+		cursor: not-allowed;
+	}
+	.disabled-input {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

package/dist/DatePicker5.svelte.d.ts

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    title: string;
+    name: string;
+    dateText?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date | null;
+    blockedDates?: Date[];
+    radius?: 'right' | 'left' | 'full';
+    position?: 'left-0' | 'right-0';
+    disabled?: boolean;
+    colorScheme?: Record<string, string>;
+    onDateUpdate?: (date: string) => void;
+};
+declare const DatePicker5: import("svelte").Component<$$ComponentProps, {}, "dateText">;
+type DatePicker5 = ReturnType<typeof DatePicker5>;
+export default DatePicker5;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import DatePicker5 from "./DatePicker5.svelte";
+export { DatePicker5 };

package/dist/index.js

@@ -0,0 +1,3 @@
+// Reexport your entry components here
+import DatePicker5 from "./DatePicker5.svelte";
+export { DatePicker5 };

package/package.json

@@ -0,0 +1,68 @@
+{
+	"name": "@djcali570/component-lib",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"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 ."
+	},
+	"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"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"@sveltejs/kit": "^2.16.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.2.6"
+	},
+	"keywords": [
+		"svelte",
+		"SvelteKit",
+		"components"
+	],
+	"author": {
+		"name": "Jay Cali"
+	}
+}