@djcali570/component-lib 0.0.5 → 0.0.7

package/README.md

@@ -2,8 +2,26 @@
 
 Components:
 
-### Date Picker
-### Time Picker
-### Input
-### Dropdown
-### Accordion
+## Accordion
+
+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'
+}
+```
+
+Use of the Accordion component
+```
+<Accordion5 colorScheme={acs} title='My Title'>
+    {#snippet panel()}
+        <p>Accordion Contents</p>
+    {/Snippet}
+</Accordion5>
+```

package/dist/Accordion5.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-
-	// Define colorScheme type
-	interface Accordion5ColorScheme {
-		bgColor: string;
-		textColor: string;
-		triggerColor: string;
-	}
+	import type { Accordion5ColorScheme } from './types.js';
 
 	// Props with typed colorScheme
 	let {
@@ -96,7 +90,7 @@
 
 	button {
 		width: 100%;
-		padding: 0.5rem;
+		padding-block: 0.5rem;
 		font-size: 1rem;
 		cursor: pointer;
 		border: none;
@@ -120,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;
@@ -137,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/Accordion5.svelte.d.ts

@@ -1,9 +1,5 @@
 import type { Snippet } from 'svelte';
-interface Accordion5ColorScheme {
-    bgColor: string;
-    textColor: string;
-    triggerColor: string;
-}
+import type { Accordion5ColorScheme } from './types.js';
 type $$ComponentProps = {
     colorScheme?: Partial<Accordion5ColorScheme>;
     title?: string;

package/dist/DropDown5.svelte

@@ -1,21 +1,8 @@
-<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 { DropDownItem } from './types.js';
 
 	let {
 		colorScheme = {
@@ -271,7 +258,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,15 +1,4 @@
-/**
- * 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 { DropDownItem } from './types.js';
 type $$ComponentProps = {
     colorScheme?: any;
     name?: string;
@@ -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/index.d.ts

@@ -3,4 +3,7 @@ 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 { DropDownItem } from "./types.js";
 export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5 };
+export type { Accordion5ColorScheme, DropDownItem };

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from "svelte";
+export interface Accordion5ColorScheme {
+    bgColor?: string;
+    textColor?: string;
+    triggerColor?: string;
+}
+export interface DropDownItem<TProps extends Record<string, any> = {}> {
+    id?: string;
+    value: string;
+    extraValue?: string;
+    component?: Component<TProps>;
+    componentStyles?: string;
+    props?: TProps;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

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