feat: Move everything out of $lib

5 files changed, 66 insertions, 65 deletions

diff --git a/code/app/src/routes/book/alerts/+page.svelte b/code/app/src/routes/book/alerts/+page.svelte
index d008d85..ed4c92b 100644
--- a/code/app/src/routes/book/alerts/+page.svelte
+++ b/code/app/src/routes/book/alerts/+page.svelte
@@ -1,31 +1,31 @@
 <script>
-    import Alert from "$lib/components/alert.svelte";
+    import Alert from "$components/alert.svelte";
 </script>
 
 <section>
     <h2>Info</h2>
-    <Alert type="info" message="This is message" title="This is title" />
+    <Alert type="info" message="This is message" title="This is title"/>
 </section>
 <section>
     <h2>Warning</h2>
-    <Alert type="warning" message="This is message" title="This is title" />
+    <Alert type="warning" message="This is message" title="This is title"/>
 </section>
 <section>
     <h2>Error</h2>
-    <Alert type="error" message="This is message" title="This is title" />
+    <Alert type="error" message="This is message" title="This is title"/>
 </section>
 <section>
     <h2>Success</h2>
-    <Alert type="success" message="This is message" title="This is title" />
+    <Alert type="success" message="This is message" title="This is title"/>
 </section>
 <section>
     <h2>Actions</h2>
     <Alert
-        type="info"
-        message="This is message"
-        title="This is title"
-        closeable
-        actions={[
+            type="info"
+            message="This is message"
+            title="This is title"
+            closeable
+            actions={[
             {
                 id: "confirm",
                 text: "Yes!",
@@ -41,30 +41,30 @@
 <section>
     <h2>Right link</h2>
     <Alert
-        on:rightLinkCliked={() => alert("Right link clicked")}
-        rightLinkText="Link or action"
-        title="Go here"
-        message="Hehe"
-        type="error"
+            on:rightLinkCliked={() => alert("Right link clicked")}
+            rightLinkText="Link or action"
+            title="Go here"
+            message="Hehe"
+            type="error"
     />
 </section>
 <section>
     <h2>List</h2>
     <Alert
-        title="This is title"
-        listItems={["Message 1", "Message 2"]}
-        type="error"
-        message="This is bad dude"
-        closeable
-        closeableCooldown="60"
-        id="alert-1"
-        on:actrepeat={() => {
+            title="This is title"
+            listItems={["Message 1", "Message 2"]}
+            type="error"
+            message="This is bad dude"
+            closeable
+            closeableCooldown="60"
+            id="alert-1"
+            on:actrepeat={() => {
             alert("Repeat requested");
         }}
-        actions={[{ id: "repeat", text: "Try again" }]}
+            actions={[{ id: "repeat", text: "Try again" }]}
     />
 </section>
 <section>
     <h2>Closeable</h2>
-    <Alert message="This is message" closeable type="info" />
+    <Alert message="This is message" closeable type="info"/>
 </section>
diff --git a/code/app/src/routes/book/badges/+page.svelte b/code/app/src/routes/book/badges/+page.svelte
index cd5120a..50ae61e 100644
--- a/code/app/src/routes/book/badges/+page.svelte
+++ b/code/app/src/routes/book/badges/+page.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
-    import Badge from "$lib/components/badge.svelte";
+    import Badge from "$components/badge.svelte";
 </script>
 
 <section>
     <h2>Variants</h2>
-    <Badge text="default" />
-    <Badge type="blue" text="blue" />
-    <Badge type="green" text="green" />
-    <Badge type="red" text="red" />
-    <Badge type="tame" text="tame" />
-    <Badge type="yellow" text="yellow" />
-    <Badge size="large" text="large" />
-    <Badge text="with dot" withDot type="blue" />
-    <Badge text="removable" removable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)} />
-    <Badge text="with dot" size="large" withDot type="blue" />
-    <Badge text="removable" removable size="large" id="badge-2" uppercase on:remove={(e) => alert("removed " + e.detail.id)} />
+    <Badge text="default"/>
+    <Badge type="blue" text="blue"/>
+    <Badge type="green" text="green"/>
+    <Badge type="red" text="red"/>
+    <Badge type="tame" text="tame"/>
+    <Badge type="yellow" text="yellow"/>
+    <Badge size="large" text="large"/>
+    <Badge text="with dot" withDot type="blue"/>
+    <Badge text="removable" removable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)}/>
+    <Badge text="with dot" size="large" withDot type="blue"/>
+    <Badge text="removable" removable size="large" id="badge-2" uppercase
+           on:remove={(e) => alert("removed " + e.detail.id)}/>
 </section>
diff --git a/code/app/src/routes/book/buttons/+page.svelte b/code/app/src/routes/book/buttons/+page.svelte
index 19ba163..6668a64 100644
--- a/code/app/src/routes/book/buttons/+page.svelte
+++ b/code/app/src/routes/book/buttons/+page.svelte
@@ -1,23 +1,23 @@
 <script>
-    import Button from "$lib/components/button.svelte";
+    import Button from "$components/button.svelte";
 </script>
 
 <section>
     <h2>Primary</h2>
-    <Button kind="primary" text="Small" size="sm" />
-    <Button kind="primary" text="Medium/Default" />
-    <Button kind="primary" text="Large" size="lg" />
-    <Button kind="primary" text="Extra large" size="xl" />
+    <Button kind="primary" text="Small" size="sm"/>
+    <Button kind="primary" text="Medium/Default"/>
+    <Button kind="primary" text="Large" size="lg"/>
+    <Button kind="primary" text="Extra large" size="xl"/>
 </section>
 <section>
     <h2>Secondary</h2>
-    <Button kind="secondary" text="Click me!" />
+    <Button kind="secondary" text="Click me!"/>
 </section>
 <section>
     <h2>White</h2>
-    <Button kind="white" text="Click me!" />
+    <Button kind="white" text="Click me!"/>
 </section>
 <section>
     <h2>Loading</h2>
-    <Button kind="primary" loading={true} text="Wait" />
+    <Button kind="primary" loading={true} text="Wait"/>
 </section>
diff --git a/code/app/src/routes/book/inputs/+page.svelte b/code/app/src/routes/book/inputs/+page.svelte
index 7ca0d31..d5566ed 100644
--- a/code/app/src/routes/book/inputs/+page.svelte
+++ b/code/app/src/routes/book/inputs/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { TextArea, Input, Combobox } from "$lib/components";
-    import { DatabaseIcon } from "$lib/components/icons";
-    import LL from "$lib/i18n/i18n-svelte";
+    import {TextArea, Input, Combobox} from "$components";
+    import {DatabaseIcon} from "$components/icons";
 
     let value;
     let i = 0;
@@ -16,7 +15,7 @@
         i++;
     }
 
-    async function add({ name }) {
+    async function add({name}) {
         const copy = options;
         copy.push({
             id: crypto.randomUUID(),
@@ -28,48 +27,49 @@
 
 <section>
     <h2>Combobox</h2>
-    <Combobox {options} label="Wiii" multiple createable on_create_async={add} />
+    <Combobox {options} label="Wiii" multiple createable on_create_async={add}/>
 </section>
 
 <section>
     <h2>Default</h2>
-    <Input label="Input me" placeholder="Hello" bind:value />
+    <Input label="Input me" placeholder="Hello" bind:value/>
 </section>
 
 <section>
     <h2>With icon</h2>
-    <Input label="Input me" placeholder="Hello" icon={DatabaseIcon} bind:value />
+    <Input label="Input me" placeholder="Hello" icon={DatabaseIcon} bind:value/>
 </section>
 
 <section>
     <h2>With corner hint</h2>
-    <Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" bind:value />
+    <Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" bind:value/>
 </section>
 
 <section>
     <h2>Disabled</h2>
-    <Input label="No" placeholder="Sorry" disabled bind:value />
+    <Input label="No" placeholder="Sorry" disabled bind:value/>
 </section>
 
 <section>
     <h2>Errored</h2>
-    <Input label="No" placeholder="Sorry" errorText="That's not right" bind:value icon={DatabaseIcon} />
+    <Input label="No" placeholder="Sorry" errorText="That's not right" bind:value icon={DatabaseIcon}/>
 </section>
 
 <section>
     <h2>Many errors</h2>
-    <Input label="No" placeholder="Sorry" errors={["That's not right", "Call help!", "Get it together"]} bind:value icon={DatabaseIcon} />
+    <Input label="No" placeholder="Sorry" errors={["That's not right", "Call help!", "Get it together"]} bind:value
+           icon={DatabaseIcon}/>
 </section>
 
 <section>
     <h2>Help</h2>
-    <Input label="Go ahead" placeholder="Write here" helpText="Write above" bind:value />
+    <Input label="Go ahead" placeholder="Write here" helpText="Write above" bind:value/>
 </section>
 <section>
     <h2>Addon</h2>
-    <Input label="Go ahead" placeholder="Write here" bind:value helpText="Write above" addon="To the right" />
+    <Input label="Go ahead" placeholder="Write here" bind:value helpText="Write above" addon="To the right"/>
 </section>
 <section>
     <h2>Textarea</h2>
-    <TextArea bind:value errorText="oh no" label="Hi" />
+    <TextArea bind:value errorText="oh no" label="Hi"/>
 </section>
diff --git a/code/app/src/routes/book/toggles/+page.svelte b/code/app/src/routes/book/toggles/+page.svelte
index 730e6f2..71c9298 100644
--- a/code/app/src/routes/book/toggles/+page.svelte
+++ b/code/app/src/routes/book/toggles/+page.svelte
@@ -1,27 +1,27 @@
 <script>
-    import Switch from "$lib/components/switch.svelte";
+    import Switch from "$components/switch.svelte";
 </script>
 
 <section>
     <h2>Default</h2>
-    <Switch />
+    <Switch/>
 </section>
 <section>
     <h2>Short</h2>
-    <Switch type="short" />
+    <Switch type="short"/>
 </section>
 <section>
     <h2>Icon</h2>
-    <Switch type="icon" />
+    <Switch type="icon"/>
 </section>
 <section>
     <h2>Label / Description</h2>
     <div class="max-w-md">
-        <Switch label="Label" description="Some text" />
+        <Switch label="Label" description="Some text"/>
     </div>
 </section>
 
 <section>
     <h2>Label / Description (right aligned)</h2>
-    <Switch label="Label" description="Some text" rightAlignedLabelDescription />
+    <Switch label="Label" description="Some text" rightAlignedLabelDescription/>
 </section>