Utils updates

docs/src/content/components/Text.md

@@ -34,3 +34,11 @@ Note you can change the rendering layer with the toggle at the top of the page.
 The text will smartly orientate based on the direction (clockwise / counter-clockwise) and location (top, bottom, left, right) of the arc
 
 :example{ component="Arc" name="label-direction" }
+
+:::note
+Only supported in `Svg` layers.
+:::
+
+<!-- ### Word wrap with explicit `\n`
+
+:example{ name="word-wrap-with-explicit-n" } -->

docs/src/content/utils/cls.md

@@ -11,15 +11,26 @@ related:
   ]
 ---
 
+## Usage
+
+### [clsx()](https://github.com/lukeed/clsx)
+
+```svelte live
 <script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-  import { cls } from '@layerstack/tailwind';
+	import { cls } from '@layerstack/tailwind';
 </script>
 
-## Usage
+<div class={cls('text-center p-2 bg-error-500', true && 'bg-success-500')}>
+	{`class={cls('bg-error-500', true && 'bg-success-500')}`}<br />becomes<br />class="bg-success-500"
+</div>
+```
 
-### cls()
+### [twMerge()](https://github.com/dcastil/tailwind-merge)
+
+```svelte live
+<script lang="ts">
+	import { cls } from '@layerstack/tailwind';
+</script>
 
-<div class={cls('grid place-items-center rounded p-2 bg-error-500', true && 'bg-success-500')}>clsx allows for conditional class additions<br />tailwind-merge dedups overlapping classes</div>
-<br />
-<Example name="cls" resize={false} showcode />
+<div class={cls('text-center p-2 bg-red-500 bg-info-500')}>last class wins with tailwind-merge</div>
+```

docs/src/content/utils/format.md

@@ -9,14 +9,26 @@ related:
   ]
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script>
-
 ## Usage
 
 ### format()
 
-> <a href="https://www.layerstack.dev/docs/utils/format" target="_blank">Full API</a>
+:::note
+[Full Layerstack API](https://www.layerstack.dev/docs/utils/format)
+:::
+
+```svelte live
+<script lang="ts">
+	import { format } from '@layerstack/utils';
+</script>
 
-<Example name="format" resize={false} showcode />
+{format(1234.56, 'integer')}<br />
+{format(1234.56, 'decimal')}<br />
+{format(1234.56, 'currency')}<br />
+{format(1234.56, 'currency', { currency: 'EUR' })}<br />
+{format(0.5678, 'percent')}<br />
+{format(0.5678, 'percentRound')}<br />
+{format(1_234_567, 'metric')}<br />
+{format(new Date(), 'day', { variant: 'short' })}<br />
+{format(new Date(), 'custom', { custom: 'eee, MMMM do' })}<br />
+```

docs/src/content/utils/pivot.md

@@ -5,16 +5,12 @@ layers: []
 related: []
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script>
-
 ## Usage
 
 ### pivotLonger (columns to rows)
 
-<Example name="pivot-longer" noResize />
+:example{name="pivot-longer" noResize }
 
 ### pivotWider (rows to columns)
 
-<Example name="pivot-wider" noResize />
+:example{name="pivot-wider" noResize }

docs/src/content/utils/string.md

@@ -12,23 +12,35 @@ related:
   ]
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
- 	import { truncate, toTitleCase } from '@layerstack/utils';
-</script>
-
 ## Usage
 
+:::note
+See [LayerStack](https://www.layerstack.dev/docs/utils/string) for full API documentation.
+:::
+
 ### truncate()
 
-> <a href="https://www.layerstack.dev/docs/utils/string" target="_blank">Full API</a>
+```svelte live
+<script lang="ts">
+	import { truncate } from '@layerstack/utils';
+
+	const str = 'This is a really long string of text.';
+</script>
+
+{truncate(str, 21)}
+```
 
-{truncate("This is a really long string of text.", 21)}
+:::note
+Truncation is also built into the [Text](/docs/components/Text) component via the `truncate` prop.
 
-<Example component="string" name="truncate" resize={false} showcode />
+:::
 
 ### toTitleCase()
 
-{toTitleCase("string of text")}
+```svelte live
+<script lang="ts">
+	import { toTitleCase } from '@layerstack/utils';
+</script>
 
-<Example component="string" name="toTitleCase" resize={false} showcode />
+{toTitleCase('string of text')}
+```