@djcali570/component-lib 0.0.6 → 0.0.8

package/dist/Accordion5.svelte

@@ -90,7 +90,7 @@
 
 	button {
 		width: 100%;
-		padding: 0.5rem;
+		padding-block: 0.5rem;
 		font-size: 1rem;
 		cursor: pointer;
 		border: none;
@@ -114,7 +114,7 @@
 
 	.panel-head-icon-container {
 		display: flex;
-		justify-content: center;
+		justify-content: flex-end;
 		align-items: center;
 		width: 1.5rem;
 		height: 1.5rem;
@@ -131,10 +131,6 @@
 		max-height: 0;
 		transition: max-height 400ms ease-in-out;
 	}
-
-	.accPanel-inner {
-		padding: 1rem;
-	}
 	.panel-head-icon.open {
 		transform: rotate(180deg);
 	}

package/dist/DatePicker5.svelte

@@ -1,31 +1,14 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { fly } from 'svelte/transition';
+	import type { DatePicker5ColorScheme } from './types.js';
 
 	/**
 	 * Date Picker 5 v0.0.1
 	 */
 
 	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'
-		},
+		colorScheme: partialColorScheme = {},
 		title = '',
 		name = '',
 		dateText = $bindable(),
@@ -38,6 +21,7 @@
 		disabled = false,
 		onDateUpdate = (date: string) => {}
 	}: {
+		colorScheme?: Partial<DatePicker5ColorScheme>;
 		title: string;
 		name: string;
 		dateText?: string;
@@ -48,10 +32,32 @@
 		radius?: 'right' | 'left' | 'full';
 		position?: 'left-0' | 'right-0';
 		disabled?: boolean;
-		colorScheme?: Record<string, string>;
 		onDateUpdate?: (date: string) => void;
 	} = $props();
 
+	const defaultColorScheme: DatePicker5ColorScheme = {
+		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'
+	};
+
+	// Merge partial colorScheme with defaults
+	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+
 	// Normalize minDate to start of day
 	minDate = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
 

package/dist/DatePicker5.svelte.d.ts

@@ -1,4 +1,6 @@
+import type { DatePicker5ColorScheme } from './types.js';
 type $$ComponentProps = {
+    colorScheme?: Partial<DatePicker5ColorScheme>;
     title: string;
     name: string;
     dateText?: string;
@@ -9,7 +11,6 @@ type $$ComponentProps = {
     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">;

package/dist/DropDown5.svelte

@@ -1,34 +1,11 @@
-<script module lang="ts">
-	/**
-	 * Dropdown5 v0.0.1
-	 */
-	export interface DropDownItem<TProps extends Record<string, any> = {}> {
-		id?: string;
-		value: string;
-		extraValue?: string;
-		component?: Component<TProps>;
-		componentStyles?: string;
-		props?: TProps;
-	}
-</script>
-
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { onDestroy, onMount, type Component } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
+	import type { DropDown5ColorScheme, DropDownItem } from './types.js';
 
 	let {
-		colorScheme = {
-			textColor: '#D6D6D6',
-			bgColor: '#121212',
-			borderColor: '#262626',
-			titleColor: '#989A9A',
-			dropdownBgColor: '#141414',
-			focusedColor: '#4787ac',
-			itemTextColor: '#D6D6D6',
-			itemHoverBgColor: '#4787ac',
-			itemHoverTextColor: '#121212'
-		},
+		colorScheme: partialColorScheme = {},
 		name = 'dropdown',
 		title = 'Title',
 		value = $bindable(),
@@ -38,7 +15,7 @@
 		disabled = false,
 		dropdownItems = [] as DropDownItem[]
 	}: {
-		colorScheme?: any;
+		colorScheme?: Partial<DropDown5ColorScheme>;
 		name?: string;
 		title?: string;
 		value: any;
@@ -49,6 +26,21 @@
 		dropdownItems?: DropDownItem[];
 	} = $props();
 
+	const defaultColorScheme: DropDown5ColorScheme = {
+		textColor: '#D6D6D6',
+		bgColor: '#121212',
+		borderColor: '#262626',
+		titleColor: '#989A9A',
+		dropdownBgColor: '#141414',
+		focusedColor: '#4787ac',
+		itemTextColor: '#D6D6D6',
+		itemHoverBgColor: '#4787ac',
+		itemHoverTextColor: '#121212'
+	};
+
+	// Merge partial colorScheme with defaults
+	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+
 	const id = generateRandomString();
 	let showDropdown = $state(false);
 	let dropdownRef: HTMLDivElement | null = $state(null);
@@ -271,7 +263,7 @@
 		padding-top: 0.5rem;
 	}
 	.dropdown5__input {
-		display: flex;		
+		display: flex;
 		padding-inline: 0.75rem;
 		color: var(--dropdown5__textColor);
 	}

package/dist/DropDown5.svelte.d.ts

@@ -1,17 +1,6 @@
-/**
- * Dropdown5 v0.0.1
- */
-export interface DropDownItem<TProps extends Record<string, any> = {}> {
-    id?: string;
-    value: string;
-    extraValue?: string;
-    component?: Component<TProps>;
-    componentStyles?: string;
-    props?: TProps;
-}
-import { type Component } from 'svelte';
+import type { DropDown5ColorScheme, DropDownItem } from './types.js';
 type $$ComponentProps = {
-    colorScheme?: any;
+    colorScheme?: Partial<DropDown5ColorScheme>;
     name?: string;
     title?: string;
     value: any;
@@ -21,6 +10,6 @@ type $$ComponentProps = {
     disabled?: boolean;
     dropdownItems?: DropDownItem[];
 };
-declare const DropDown5: Component<$$ComponentProps, {}, "value" | "valueKey" | "extraValue">;
+declare const DropDown5: import("svelte").Component<$$ComponentProps, {}, "value" | "valueKey" | "extraValue">;
 type DropDown5 = ReturnType<typeof DropDown5>;
 export default DropDown5;

package/dist/Input5.svelte

@@ -1,25 +1,17 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import type { Input5ColorScheme } from './types.js';
 
 	/**
-	 * Input5 v0.0.1
+	 * Input5 v0.0.2
 	 *
+	 * Added color scheme partials
 	 * Added read only option
 	 * Allow 4 digits after decimal for floats
 	 */
 
 	let {
-		colorScheme = {
-			mainTextColor: '#D6D6D6',
-			mainBgColor: '#121212',
-			titleColor: '#989A9A',
-			borderColor: '#262626',
-			focusedColor: '#4787ac',
-			clearColor: '#989A9A',
-			clearHoverColor: '#1F2023',
-			counterTextColor: '#4787ac',
-			counterBgColor: '#1F2023'
-		},
+		colorScheme: partialColorScheme = {},
 		name = 'input',
 		title = 'Title',
 		value = $bindable(),
@@ -35,7 +27,7 @@
 		readonly = false,
 		onUpdate = (value) => {}
 	}: {
-		colorScheme?: any;
+		colorScheme?: Partial<Input5ColorScheme>;
 		name?: string;
 		title?: string;
 		value?: any;
@@ -52,6 +44,21 @@
 		onUpdate?: (value: string) => void;
 	} = $props();
 
+	const defaultColorScheme: Input5ColorScheme = {
+		mainTextColor: '#D6D6D6',
+		mainBgColor: '#121212',
+		titleColor: '#989A9A',
+		borderColor: '#262626',
+		focusedColor: '#4787ac',
+		clearColor: '#989A9A',
+		clearHoverColor: '#1F2023',
+		counterTextColor: '#4787ac',
+		counterBgColor: '#1F2023'
+	};
+
+	// Merge partial colorScheme with defaults
+	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+
 	const id = generateRandomString();
 	let count = $state(0);
 	let inputOldValue: string = $state('');

package/dist/Input5.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { Input5ColorScheme } from './types.js';
 type $$ComponentProps = {
-    colorScheme?: any;
+    colorScheme?: Partial<Input5ColorScheme>;
     name?: string;
     title?: string;
     value?: any;

package/dist/TimePicker5.svelte

@@ -1,22 +1,14 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
+	import type { TimePicker5ColorScheme } from './types.js';
 
 	/**
 	 * Time Picker 5 v.0.0.1
 	 */
 
 	let {
-		colorScheme = {
-			textColor: '#D6D6D6',
-			bgColor: '#121212',
-			borderColor: '#262626',
-			focusedColor: '#4787ac',
-			titleColor: '#989A9A',
-			clearColor: '#989A9A',
-			clearHoverColor: '#1F2023',
-			dropdownBgColor: '#141414'
-		},
+		colorScheme: partialColorScheme = {},
 		timeText = '',
 		name = 'timePicker',
 		title = 'Title',
@@ -26,7 +18,7 @@
 		radius = 'full',
 		onTimePicked = (value) => {}
 	}: {
-		colorScheme?: any;
+		colorScheme?: Partial<TimePicker5ColorScheme>;
 		timeText?: string;
 		name?: string;
 		title?: string;
@@ -37,6 +29,20 @@
 		onTimePicked?: (value: string) => void;
 	} = $props();
 
+	const defaultColorScheme: TimePicker5ColorScheme = {
+		textColor: '#D6D6D6',
+		bgColor: '#121212',
+		borderColor: '#262626',
+		focusedColor: '#4787ac',
+		titleColor: '#989A9A',
+		clearColor: '#989A9A',
+		clearHoverColor: '#1F2023',
+		dropdownBgColor: '#141414'
+	};
+
+	// Merge partial colorScheme with defaults
+	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+
 	/**
 	 * Variables, arrays
 	 */

package/dist/TimePicker5.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { TimePicker5ColorScheme } from './types.js';
 type $$ComponentProps = {
-    colorScheme?: any;
+    colorScheme?: Partial<TimePicker5ColorScheme>;
     timeText?: string;
     name?: string;
     title?: string;

package/dist/index.d.ts

@@ -3,6 +3,6 @@ import DropDown5 from "./DropDown5.svelte";
 import Input5 from "./Input5.svelte";
 import TimePicker5 from "./TimePicker5.svelte";
 import Accordion5 from "./Accordion5.svelte";
-import type { Accordion5ColorScheme } from "./types.js";
+import type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, DropDownItem, DropDown5ColorScheme, Accordion5ColorScheme } from "./types.js";
 export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5 };
-export type { Accordion5ColorScheme };
+export type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, Accordion5ColorScheme, DropDown5ColorScheme, DropDownItem };

package/dist/types.d.ts

@@ -1,5 +1,65 @@
-export interface Accordion5ColorScheme {
-    bgColor: string;
+import type { Component } from "svelte";
+export interface Input5ColorScheme {
+    mainTextColor: string;
+    mainBgColor: string;
+    titleColor: string;
+    borderColor: string;
+    focusedColor: string;
+    clearColor: string;
+    clearHoverColor: string;
+    counterTextColor: string;
+    counterBgColor: string;
+}
+export interface DatePicker5ColorScheme {
+    labelTextColor: string;
+    inputTextColor: string;
+    inputBgColor: string;
+    inputBorderColor: string;
+    inputFocusedBorderColor: string;
+    inputClearColor: string;
+    inputClearHoverColor: string;
+    placeholderColor: string;
+    pickerBgColor: string;
+    pickerMonthBgColor: string;
+    pickerTextColor: string;
+    pickerInactiveDayColor: string;
+    pickerTodayColor: string;
+    pickerSelectedDayBgColor: string;
+    pickerSelectedDayTextColor: string;
+    pickerChevronHoverColor: string;
+    pickerMaxHeight: string;
+}
+export interface TimePicker5ColorScheme {
     textColor: string;
-    triggerColor: string;
+    bgColor: string;
+    borderColor: string;
+    focusedColor: string;
+    titleColor: string;
+    clearColor: string;
+    clearHoverColor: string;
+    dropdownBgColor: string;
+}
+export interface Accordion5ColorScheme {
+    bgColor?: string;
+    textColor?: string;
+    triggerColor?: string;
+}
+export interface DropDown5ColorScheme {
+    bgColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    titleColor: string;
+    dropdownBgColor: string;
+    focusedColor: string;
+    itemTextColor: string;
+    itemHoverBgColor: string;
+    itemHoverTextColor: string;
+}
+export interface DropDownItem<TProps extends Record<string, any> = {}> {
+    id?: string;
+    value: string;
+    extraValue?: string;
+    component?: Component<TProps>;
+    componentStyles?: string;
+    props?: TProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djcali570/component-lib",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "files": [
     "dist",
     "!dist/**/*.test.*",