fix(Currency): cleaned up context

docs(currency): updated examples

src/lib/components/currency/Currency.svelte

@@ -1,12 +1,9 @@
-<script lang="ts" context="module">
-	export const CURRENCY_CONTEXT_ID = 'currency-context-id';
-</script>
-
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import { setContext } from 'svelte';
 	import Icon from '../icon';
 	import { error as errorIcon } from '../../icons';
+	import { writable, type Writable } from 'svelte/store';
 
 	export let name: string;
 	export let error: string | undefined = undefined;
@@ -17,6 +14,12 @@
 	export let disabled = false;
 	export let readonly = false;
 
+	let currentError: Writable<string | undefined> = writable(error);
+	$: currentError.set(error);
+
+	setContext('currency-name', name);
+	setContext('currency-error', currentError);
+
 	function onlyNumeric(e: KeyboardEvent) {
 		if (!e.key.match(/^[0-9]+$/)) e.preventDefault();
 	}
@@ -33,12 +36,6 @@
 			}
 		}
 	}
-
-	setContext(CURRENCY_CONTEXT_ID, {
-		currency: true,
-		name,
-		error
-	});
 </script>
 
 <div class={$$props.class} style={$$props.style}>

src/lib/components/currency/Label.svelte

@@ -1,21 +1,15 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
-	import { useContext } from '../../utils/useContext';
-	import { CURRENCY_CONTEXT_ID } from './Currency.svelte';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
 	import { exclude } from '../../utils/exclude';
+	import type { Writable } from 'svelte/store';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	useContext({
-		context_id: CURRENCY_CONTEXT_ID,
-		parent: 'Currency',
-		component: 'Currency.Label'
-	});
-
-	const { name, error }: { name: string; error: string } = getContext(CURRENCY_CONTEXT_ID);
+	const name: string = getContext('currency-name');
+	const error: Writable<string | undefined> = getContext('currency-error');
 
 	let defaultClass = 'block text-sm font-medium';
 	if (error) {

src/routes/currency/+page.svelte

@@ -4,6 +4,16 @@
 	import { PropsTable, SlotsTable, UpdatedComponent, CodeBlock } from '../../docs';
 	import { email, phone } from '../../docs/icons';
 	import { currency_usd } from '../../lib/icons';
+
+	let value: string | undefined;
+	let error: string | undefined = "You're doing it wrong!";
+	$: if (value && value.length > 0 && value !== '0.00') {
+		error = undefined;
+	} else {
+		error = "You're doing it wrong!";
+	}
+
+	$: console.log('value', value);
 </script>
 
 <Col class="col-24">
@@ -21,7 +31,7 @@
 				<Currency.Trailing slot="trailing" data={phone} />
 			</Currency>
 			<br />
-			<Currency name="currency-3" error="There has been an error">
+			<Currency name="currency-3" {error} bind:value>
 				<Currency.Label slot="label">Label</Currency.Label>
 				<Currency.Leading slot="leading" data={email} />
 			</Currency>