@djcali570/component-lib 0.1.4 → 0.1.6

package/README.md

@@ -1,240 +1,65 @@
-# DJCali570 Svelte 5 Component Library
+# Svelte library
 
-Components make use of Svelte's runes so will only work with Svelte 5
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
 
-## Input
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
 
-Use default or customize the input color scheme
+## Creating a project
 
-```bash
-import { Input5 } from '@djcali570/component-lib';
-import type { Input5ColorScheme } from '@djcali570/component-lib';
+If you're seeing this, you've probably already done this step. Congrats!
 
-let ics: Input5ColorScheme = {
-	mainTextColor: '#D6D6D6',
-	mainBgColor: '#121212',
-	titleColor: '#989A9A'
-}
-```
-
-#### Features
-- Counter
-- readonly / disabled options
-- onUpdate Callback
-- types: Text, Number or Password
-- Input formatting
-- Input or Textarea
-
-### Use of the Input component
-
-```
-<Input5 title="Input Title" colorScheme={ics} validator="phone" />
-```
-
-## Accordion
-
-Use default or customize the accordion color scheme
-
-```bash
-import { Accordion5 } from '@djcali570/component-lib';
-import type { Accordion5ColorScheme } from '@djcali570/component-lib';
-
-let acs: Accordion5ColorScheme = {
-		bgColor: '#121212',
-		textColor: '#D6D6D6',
-		triggerColor: '#D6D6D6'
-}
-```
-
-#### Props
-
-- title (Snippet) - Snippet for title content
-- panel (Snippet) - Snippet for accordion content
-- iconWidth (string) - Width of icon eg. "1rem"
-- iconHeight (string) - Height of icon eg. "1rem"
-
-### Use of the Accordion component
-
-```
-<Accordion5 colorScheme={acs}>
-	{#snippet title()}
-		<h1>My Title</h1>
-	{/snippet}
-    {#snippet panel()}
-        <p>Accordion Contents</p>
-    {/snippet}
-</Accordion5>
-```
-
-## Chart
-
-Use the default or customize the chart color scheme
-
-```bash
-import { Chart5 } from '@djcali570/component-lib';
-import type { Chart5ColorScheme } from '@djcali570/component-lib';
+```sh
+# create a new project in the current directory
+npx sv create
 
-let ccs: Chart5ColorScheme = {
-	bgColor: '#121212',
-	gridLineColor: '#303030',
-	xAxisTextColor: '#5ac1dd',
-	yAxisTextColor: '#5ac1dd'
-}
+# create a new project in my-app
+npx sv create my-app
 ```
 
-#### Props
-- title (Snippet) - Use for title of chart
-- maxWidth (string) - Sets the max width of chart eg. "400px"
-- height (string) - Sets the height of the chart eg. "400px"
-- labels (string[]) - Array of strings for the labels
-- values (number[]) - Array of numbers for the values
+To recreate this project with the same configuration:
 
-### Use of the Chart component
-
-```
-let labels: string[] = ['Label1', 'label2'];
-let values: number[] = [35, 20];
-
-<Chart5 {labels} {values} colorScheme={ccs} height="300px">
-	{#snippet title()}
-		<p>My Title</p>
-	{/snippet}
-</Chart5>
+```sh
+# recreate this project
+pnpm dlx sv create --template library --types ts --add prettier eslint sveltekit-adapter="adapter:node" devtools-json --install pnpm component-lib-restored
 ```
 
-## Admin Panel
-
-Use the default or customize the color scheme
-
-```bash
-import { AdminPanel5 } from '@djcali570/component-lib';
-import type { AdminPanel5ColorScheme } from '@djcali570/component-lib';
+## Developing
 
-let apcs: AdminPanel5ColorScheme = {
-	panelMenuBgColor: '#181818',
-	panelBgColor: '#151515',
-	drawerBgColor: '#121212',
-	drawerTitleBgColor: '#151515',
-	iconColor: '#D6D6D6'
-}
-```
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-### Use of the Admin Panel component
+```sh
+npm run dev
 
-```
-<AdminPanel5>
-	{#snippet navigation()}
-		<div>This is Navigation</div>
-	{/snippet}
-	{#snippet title()}
-		<div style="display: flex; align-items:center; height:100%; width:100%;">
-			<p style="color: #fff;">Title</p>
-		</div>
-	{/snippet}
-	{#snippet panel()}
-		<div style="display: flex; align-items:center; width:100%; padding:1em;">
-			<p style="color: #fff;">This is the content</p>
-		</div>
-	{/snippet}
-	{#snippet drawerTitle()}
-		<div
-			style="display:flex; justify-content:flex-start; align-items:center; width: 100%; height:100%;"
-		>
-			<div style="color: white;">This is a drawer title</div>
-		</div>
-	{/snippet}
-</AdminPanel5>
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
 ```
 
-## Bottom Sheet
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
 
-Use the default or customize the color scheme
+## Building
 
-```bash
-import { BottomSheet5 } from '@djcali570/component-lib';
-import type { BottomSheet5ColorScheme } from '@djcali570/component-lib';
+To build your library:
 
-let bscs: BottomSheet5ColorScheme = {
-	bgColor: '#121212',
-}
+```sh
+npm pack
 ```
-#### Props
-- modalStatus (boolean) - bindable to close/open modal outside component
-- content (Snippet) - Snippet for sheet content
-- rounded (boolean) - Set rounded corners to top
-- top (string) - Set height of bottom sheet. eg. "50%", "1rem"
 
-### Use of the component
-
-```
-let modalStatus = $state(false);
+To create a production version of your showcase app:
 
-<BottomSheet5 bind:modalStatus top="50%">
-	{#snippet content()}
-		<div>Place bottom sheet content here</div>
-	{/snippet}
-</BottomSheet5>
+```sh
+npm run build
 ```
 
-## Dialog
+You can preview the production build with `npm run preview`.
 
-Use the default or customize the color scheme
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
 
-```bash
-import { Dialog5 } from '@djcali570/component-lib';
-import type { Dialog5ColorScheme } from '@djcali570/component-lib';
+## Publishing
 
-let d5cs: Dialog5ColorScheme = {
-		bgColor: '#121212',
-        titleBgColor: '#181818',
-		textColor: '#fcfcfc',
-        confirmTextColor: '#fb2c36',
-		borderColor: '#262626',
-		okButtonBgColor: '#181818',
-		confirmButtonBgColor: '#181818'
-}
-```
-#### Props
-- modalStatus (boolean) - bindable to close/open modal outside component
-- minWidth / minHeight (string) - set height or width of the dialog. eg '320px'
-- dialogType ('confirm-cancel' | 'ok') - use ok for a simple message or use confirm/cancel to use the onUpdate callback.
-- title (Snippet) - use for title section of the dialog
-- content (Snippet) - use for the content or message of the dialog
-- confirmButtonText / cancelButtonText / okButtonText (string) - Change default button text
-- onUpdate ((value: boolean) => void)) - Callback for the cancel/confirm button.
+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/)).
 
-### Use of the component
+To publish your library to [npm](https://www.npmjs.com):
 
+```sh
+npm publish
 ```
-let modalStatus = $state(false);
-
-function dialogUpdated(v: boolean) {
-	console.log(v);
-}
-
-<Dialog5
-bind:modalStatus
-dialogType="confirm-cancel"
-onUpdate={(v) => dialogUpdated(v)}
->
-{#snippet title()}
-	<div style="width: 100%; display: flex; justify-content: center; padding: 1rem;">
-		Dialog Title
-	</div>
-{/snippet}
-{#snippet content()}
-	<div>Place dialog content here</div>
-{/snippet}
-</Dialog5>
-```
-
-
-# Updates
-#### 0.1.4	- Updated Accordion component to add innerPadding prop.
-#### 0.1.3	- Updated Time Picker to allow binding to timeText.
-#### 0.1.2	- Fixed some minor styling issues with Dialog component.
-#### 0.1.1	- Added Bottom Sheet component & Dialog component.
-#### 0.1.0	- Updated Accordion component to use snippets for title.
-#### 0.0.14	- Fixed Input5 textarea height was not being applied. Removed Tailwind dependencies.
-#### 0.0.13	- Added Admin Panel 5 Component.
-#### 0.0.12	- Made all components colorScheme properties optional.

package/dist/Accordion5.svelte

@@ -6,17 +6,17 @@
 	let {
 		colorScheme: partialColorScheme = {},
 		title,
-		panel,		
+		panel,
 		iconWidth = '1.2rem',
 		iconHeight = '1.2rem',
-		innerPadding = '0.5rem'		
+		innerPadding = '0.5rem'
 	}: {
 		colorScheme?: Partial<Accordion5ColorScheme>;
 		title?: Snippet;
-		panel: Snippet;		
+		panel: Snippet;
 		iconWidth?: string;
 		iconHeight?: string;
-		innerPadding?: string;		
+		innerPadding?: string;
 	} = $props();
 
 	// Default colorScheme
@@ -34,22 +34,53 @@
 	let panelHeight = $state('0px'); // Store dynamic height
 	let panelRef: HTMLDivElement | undefined = $state(); // Reference to inner panel
 
-	// Toggle panel and update height
-	function showPanel() {
-		status = !status;
+	// Debounce utility to limit frequent updates
+	function debounce<T extends (...args: any[]) => void>(fn: T, delay: number) {
+		let timeout: ReturnType<typeof setTimeout>;
+		return (...args: Parameters<T>) => {
+			clearTimeout(timeout);
+			timeout = setTimeout(() => fn(...args), delay);
+		};
+	}
+
+	// Update panel height
+	const updateHeight = () => {
 		if (status && panelRef) {
-			// Set max-height to content height when opening
 			panelHeight = `${panelRef.scrollHeight}px`;
 		} else {
-			// Reset to 0 when closing
 			panelHeight = '0px';
 		}
+	};
+
+	// Debounced height update
+	const debouncedUpdateHeight = debounce(updateHeight, 100);
+
+	// Toggle panel and update height
+	function showPanel() {
+		status = !status;
+		requestAnimationFrame(updateHeight); // Update height after status change
 	}
 
-	// Update height on content change (if panel content is dynamic)
+	// Observe panel content size changes
+	$effect(() => {
+		if (!panelRef) return;
+
+		const observer = new ResizeObserver(() => {
+			debouncedUpdateHeight();
+		});
+
+		observer.observe(panelRef);
+
+		// Cleanup observer on component destroy
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	// Update height when status changes
 	$effect(() => {
 		if (status && panelRef) {
-			panelHeight = `${panelRef.scrollHeight}px`;
+			debouncedUpdateHeight();
 		}
 	});
 </script>
@@ -60,10 +91,10 @@
       --acc5-bgColor: {colorScheme.bgColor};
       --acc5-textColor: {colorScheme.textColor};
       --acc5-triggerColor: {colorScheme.triggerColor};
-	  --acc5-panelBgColor: {colorScheme.panelBgColor};	  
-	  --acc5-IconWidth: {iconWidth};
-	  --acc5-IconHeight: {iconHeight};
-	  --acc5-InnerPadding: {innerPadding}
+      --acc5-panelBgColor: {colorScheme.panelBgColor};
+      --acc5-IconWidth: {iconWidth};
+      --acc5-IconHeight: {iconHeight};
+      --acc5-InnerPadding: {innerPadding}
     "
 >
 	<button onclick={showPanel}>
@@ -97,14 +128,14 @@
 
 <style>
 	.accordion5 {
-		width: 100%;		
+		width: 100%;
 		margin: 0 auto;
 		border-radius: 0.5rem;
 		overflow: hidden;
 	}
 
 	button {
-		width: 100%;		
+		width: 100%;
 		padding: var(--acc5-InnerPadding);
 		font-size: 1rem;
 		cursor: pointer;
@@ -148,11 +179,12 @@
 		background-color: var(--acc5-panelBgColor);
 		transition: max-height 400ms ease-in-out;
 	}
+
 	.panel-head-icon.open {
 		transform: rotate(180deg);
 	}
 
 	.accPanel-inner {
-		padding-block: 0.5rem; /* Add padding to ensure content is visible */
+		padding-block: 0.5rem;
 	}
 </style>

package/dist/Checkbox5.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	let {
+		colorScheme: partialColorScheme = {},
+		name = 'checkbox',
+		title = 'Title',
+		checked = $bindable(false),
+		disabled = false,
+		hideText = false,
+		onChange = (checked: boolean) => {}
+	}: {
+		colorScheme?: Partial<{
+			mainTextColor: string;
+			mainBgColor: string;
+			borderColor: string;
+			focusedColor: string;
+			checkmarkColor: string;
+		}>;
+		name?: string;
+		title?: string;
+		checked?: boolean;
+		disabled?: boolean;
+		hideText?: boolean;
+		onChange?: (checked: boolean) => void;
+	} = $props();
+
+	const defaultColorScheme = {
+		mainTextColor: '#D6D6D6',
+		mainBgColor: '#121212',
+		borderColor: '#262626',
+		focusedColor: '#5ac1dd',
+		checkmarkColor: '#5ac1dd'
+	};
+
+	// svelte-ignore state_referenced_locally
+	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+	const id = `checkbox-${Math.random().toString(36).slice(2, 8)}`;
+
+	$effect(() => {
+		onChange(checked);
+	});
+</script>
+
+<div
+	class="air5__checkbox__container"
+	style="
+    --air5__mainTextColor: {colorScheme.mainTextColor};
+    --air5__mainBgColor: {colorScheme.mainBgColor};
+    --air5__borderColor: {colorScheme.borderColor};
+    --air5__focusedColor: {colorScheme.focusedColor};
+    --air5__checkmarkColor: {colorScheme.checkmarkColor};
+  "
+>
+	<label for={id}>
+		<input type="checkbox" {id} {name} bind:checked {disabled} />
+		<span class="air5__checkbox__custom">
+			{#if checked}
+				<svg viewBox="0 0 24 24">
+					<path
+						fill="currentColor"
+						d="M18 6 L6 18 M6 6 L18 18"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					/>
+				</svg>
+			{/if}
+		</span>
+		{#if !hideText}
+			<span class="air5__checkbox__title">{title}</span>
+		{/if}
+	</label>
+</div>
+
+<style>
+	.air5__checkbox__container {
+		display: flex;
+		flex-direction: column;
+		font-family: inherit;
+		color: var(--air5__mainTextColor);
+	}
+
+	input[type='checkbox'] {
+		display: none;
+	}
+
+	label {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	.air5__checkbox__custom {
+		width: 32px;
+		height: 32px;
+		border: 1px solid var(--air5__borderColor);
+		border-radius: 0.25rem;
+		background-color: var(--air5__mainBgColor);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 0.5rem;
+		transition: box-shadow 0.2s ease;
+	}
+
+	label:focus-within .air5__checkbox__custom,
+	label:hover .air5__checkbox__custom {
+		box-shadow: 0 0 0 2px var(--air5__focusedColor);
+	}
+
+	.air5__checkbox__custom svg {
+		width: 24px;
+		height: 24px;
+		color: var(--air5__checkmarkColor);
+	}
+
+	.air5__checkbox__title {
+		font-size: 0.875rem;
+	}
+</style>

package/dist/Checkbox5.svelte.d.ts

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    colorScheme?: Partial<{
+        mainTextColor: string;
+        mainBgColor: string;
+        borderColor: string;
+        focusedColor: string;
+        checkmarkColor: string;
+    }>;
+    name?: string;
+    title?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    hideText?: boolean;
+    onChange?: (checked: boolean) => void;
+};
+declare const Checkbox5: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Checkbox5 = ReturnType<typeof Checkbox5>;
+export default Checkbox5;

package/package.json

@@ -1,64 +1,64 @@
 {
-  "name": "@djcali570/component-lib",
-  "version": "0.1.4",
-  "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": {
-    "@sveltejs/kit": "^2.16.0",
-    "svelte": "^5.0.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",
-    "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.6"
-  },
-  "keywords": [
-    "svelte",
-    "SvelteKit",
-    "components"
-  ],
-  "author": {
-    "name": "Jay Cali"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run prepack",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "preview": "vite preview",
-    "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 ."
-  }
+	"name": "@djcali570/component-lib",
+	"version": "0.1.6",
+	"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"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^2.0.2",
+		"@eslint/js": "^9.39.2",
+		"@sveltejs/adapter-node": "^5.5.2",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@types/node": "^22",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.14.0",
+		"globals": "^17.3.0",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"publint": "^0.3.17",
+		"svelte": "^5.49.2",
+		"svelte-check": "^4.3.6",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.54.0",
+		"vite": "^7.3.1",
+		"vite-plugin-devtools-json": "^1.0.0"
+	},
+	"keywords": [
+		"svelte",
+		"SvelteKit",
+		"components"
+	],
+	"author": {
+		"name": "Jay Cali"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"preview": "vite preview",
+		"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 ."
+	}
 }