rune-lab 0.1.2 → 0.2.0

package/dist/showcase/tabs/DataInput.svelte

@@ -1,164 +0,0 @@
-<script lang="ts">
-  import { COLORS, SIZES } from "../shared";
-  import ShowcaseCard from "../ShowcaseCard.svelte";
-
-  let rangeVal = $state(40);
-  let toggleChecked = $state(true);
-  let checkboxChecked = $state(false);
-  let ratingVal = $state(3);
-</script>
-
-{#snippet section(label: string)}
-  <div class="divider text-xs font-bold opacity-40 mt-6 mb-2">
-    {label.toUpperCase()}
-  </div>
-{/snippet}
-
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
-  <!-- TEXT INPUTS -->
-  <ShowcaseCard title="Text Inputs" icon="⌨️">
-    {@render section("Colors")}
-    <div class="grid grid-cols-2 gap-2">
-      {#each COLORS as c (c)}
-        <input type="text" placeholder={c} class="input input-{c} w-full" />
-      {/each}
-    </div>
-
-    {@render section("Sizes")}
-    <div class="flex flex-col gap-2">
-      {#each SIZES as s (s)}
-        <input
-          type="text"
-          placeholder="Size {s}"
-          class="input input-{s} w-full"
-        />
-      {/each}
-    </div>
-
-    {@render section("Floating Labels")}
-    <label class="floating-label">
-      <input type="text" placeholder="Floating label" class="input w-full" />
-      <span>Username</span>
-    </label>
-  </ShowcaseCard>
-
-  <!-- SELECTION -->
-  <ShowcaseCard title="Selection" icon="📋">
-    {@render section("Select & File")}
-    <div class="flex flex-col gap-4">
-      <select class="select select-primary w-full">
-        <option disabled selected>Pick your favorite Svelte version</option>
-        <option>Svelte 3</option>
-        <option>Svelte 4</option>
-        <option>Svelte 5 (Runes!)</option>
-      </select>
-
-      <input type="file" class="file-input file-input-bordered w-full" />
-    </div>
-
-    {@render section("Textarea")}
-    <textarea
-      class="textarea textarea-bordered w-full h-24"
-      placeholder="Tell us more..."
-    ></textarea>
-  </ShowcaseCard>
-
-  <!-- CHECK & TOGGLE -->
-  <ShowcaseCard title="Check, Radio & Toggle" icon="🔘">
-    {@render section("Checkboxes")}
-    <div class="flex flex-wrap gap-4">
-      {#each COLORS as c (c)}
-        <input type="checkbox" checked class="checkbox checkbox-{c}" />
-      {/each}
-    </div>
-
-    {@render section("Toggles")}
-    <div class="flex flex-wrap gap-4 mt-4">
-      {#each COLORS as c (c)}
-        <input
-          type="checkbox"
-          bind:checked={toggleChecked}
-          class="toggle toggle-{c}"
-        />
-      {/each}
-    </div>
-
-    {@render section("Radios")}
-    <div class="flex flex-wrap gap-4 mt-4">
-      {#each COLORS as c (c)}
-        <input type="radio" name="radio-demo" class="radio radio-{c}" />
-      {/each}
-    </div>
-  </ShowcaseCard>
-
-  <!-- RANGE & RATING -->
-  <ShowcaseCard title="Range & Rating" icon="📊">
-    {@render section("Range")}
-    <div class="space-y-4">
-      <input
-        type="range"
-        min="0"
-        max="100"
-        bind:value={rangeVal}
-        class="range range-primary"
-      />
-      <div class="flex justify-between text-xs px-2">
-        <span>|</span><span>|</span><span>|</span><span>|</span><span>|</span>
-      </div>
-      <p class="text-center font-bold">Value: {rangeVal}</p>
-    </div>
-
-    {@render section("Rating")}
-    <div class="rating rating-lg gap-1">
-      <input
-        type="radio"
-        name="rating-demo"
-        class="mask mask-star-2 bg-orange-400"
-      />
-      <input
-        type="radio"
-        name="rating-demo"
-        class="mask mask-star-2 bg-orange-400"
-        checked
-      />
-      <input
-        type="radio"
-        name="rating-demo"
-        class="mask mask-star-2 bg-orange-400"
-      />
-      <input
-        type="radio"
-        name="rating-demo"
-        class="mask mask-star-2 bg-orange-400"
-      />
-      <input
-        type="radio"
-        name="rating-demo"
-        class="mask mask-star-2 bg-orange-400"
-      />
-    </div>
-
-    {@render section("Fieldset & Validator")}
-    <fieldset class="fieldset w-full bg-base-200 p-4 rounded-box">
-      <legend class="fieldset-legend">Shipping Address</legend>
-      <input
-        type="text"
-        class="input validator w-full"
-        required
-        placeholder="Street"
-      />
-      <p class="validator-hint">This field is required</p>
-
-      <div class="flex gap-2 mt-2">
-        <input
-          type="text"
-          class="input validator w-1/2"
-          required
-          pattern="[0-9]*"
-          placeholder="Zip"
-        />
-        <input type="text" class="input w-1/2" placeholder="City" />
-      </div>
-    </fieldset>
-  </ShowcaseCard>
-</div>

package/dist/showcase/tabs/DataInput.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DataInputProps = typeof __propDef.props;
-export type DataInputEvents = typeof __propDef.events;
-export type DataInputSlots = typeof __propDef.slots;
-export default class DataInput extends SvelteComponentTyped<DataInputProps, DataInputEvents, DataInputSlots> {
-}
-export {};

package/dist/showcase/tabs/Display.svelte

@@ -1,159 +0,0 @@
-<script lang="ts">
-  import { COLORS, CARD_STYLES } from "../shared";
-  import ShowcaseCard from "../ShowcaseCard.svelte";
-</script>
-
-{#snippet section(label: string)}
-  <div class="divider text-xs font-bold opacity-40 mt-6 mb-2">
-    {label.toUpperCase()}
-  </div>
-{/snippet}
-
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
-  <!-- CARDS -->
-  <ShowcaseCard title="Cards" icon="🃏">
-    {@render section("Styles")}
-    <div class="grid grid-cols-2 gap-4">
-      {#each CARD_STYLES as style (style)}
-        <div class="card bg-base-200 {style} w-full">
-          <div class="card-body p-4">
-            <h2 class="card-title text-sm">{style || "default"}</h2>
-            <p class="text-xs">Card content</p>
-          </div>
-        </div>
-      {/each}
-      <div class="card image-full w-full">
-        <figure><img src="https://picsum.photos/400/200" alt="Shoes" /></figure>
-        <div class="card-body p-4">
-          <h2 class="card-title text-sm">Image Full</h2>
-        </div>
-      </div>
-    </div>
-  </ShowcaseCard>
-
-  <!-- LISTS & TABLES -->
-  <ShowcaseCard title="Lists & Tables" icon="📜">
-    {@render section("Lists")}
-    <ul class="list bg-base-200 rounded-box shadow-sm">
-      <li class="list-row">
-        <div>
-          <img
-            class="size-10 rounded-box"
-            src="https://picsum.photos/40"
-            alt="Avatar"
-          />
-        </div>
-        <div>
-          <div>Svelte 5</div>
-          <div class="text-xs uppercase font-semibold opacity-60">
-            Runes are here
-          </div>
-        </div>
-        <button class="btn btn-square btn-ghost" aria-label="Add item">
-          <svg
-            class="size-5"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            ><path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-            /></svg
-          >
-        </button>
-      </li>
-      <li class="list-row">
-        <div>
-          <img
-            class="size-10 rounded-box"
-            src="https://picsum.photos/41"
-            alt="Avatar"
-          />
-        </div>
-        <div class="list-col-grow">
-          <div>DaisyUI v5</div>
-          <div class="text-xs opacity-60">Better than ever</div>
-        </div>
-        <div class="badge badge-soft badge-success">Active</div>
-      </li>
-    </ul>
-
-    {@render section("Table")}
-    <div class="overflow-x-auto bg-base-200 rounded-box mt-2">
-      <table class="table table-zebra table-sm">
-        <thead>
-          <tr><th>Name</th><th>Role</th></tr>
-        </thead>
-        <tbody>
-          <tr><td>Yusepe</td><td>Dev</td></tr>
-          <tr><td>Gemini</td><td>AI</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </ShowcaseCard>
-
-  <!-- CHAT & STATS -->
-  <ShowcaseCard title="Chat & Stats" icon="💬">
-    {@render section("Chat bubbles")}
-    <div class="space-y-2">
-      <div class="chat chat-start">
-        <div class="chat-bubble chat-bubble-primary">Hello Svelte 5!</div>
-      </div>
-      <div class="chat chat-end">
-        <div class="chat-bubble chat-bubble-secondary">Hi there!</div>
-      </div>
-    </div>
-
-    {@render section("Stats")}
-    <div
-      class="stats stats-vertical lg:stats-horizontal shadow-sm bg-base-200 w-full mt-2"
-    >
-      <div class="stat p-4">
-        <div class="stat-title text-xs">Downloads</div>
-        <div class="stat-value text-2xl">31K</div>
-      </div>
-      <div class="stat p-4 border-l border-base-content/10">
-        <div class="stat-title text-xs">Users</div>
-        <div class="stat-value text-2xl">4.2K</div>
-      </div>
-    </div>
-  </ShowcaseCard>
-
-  <!-- MOCKUPS & VISUAL -->
-  <ShowcaseCard title="Mockups & More" icon="💻">
-    {@render section("Mockup Browser")}
-    <div class="mockup-browser bg-base-300 border border-base-300">
-      <div class="mockup-browser-toolbar">
-        <div class="input">https://rune-lab.dev</div>
-      </div>
-      <div class="bg-base-200 flex justify-center px-4 py-8">Hello!</div>
-    </div>
-
-    {@render section("Text Rotate")}
-    <div class="text-center font-bold text-2xl py-4">
-      Modern UI is
-      <span class="text-rotate text-primary">
-        <span>
-          <span>FAST</span>
-          <span>EASY</span>
-          <span>ROBUST</span>
-          <span>SMART</span>
-        </span>
-      </span>
-    </div>
-
-    {@render section("Diff")}
-    <figure class="diff aspect-16/9 rounded-lg">
-      <div class="diff-item-1">
-        <img alt="Svelte" src="https://picsum.photos/400/225?grayscale" />
-      </div>
-      <div class="diff-item-2">
-        <img alt="Svelte" src="https://picsum.photos/400/225" />
-      </div>
-      <div class="diff-resizer"></div>
-    </figure>
-  </ShowcaseCard>
-</div>

package/dist/showcase/tabs/Display.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DisplayProps = typeof __propDef.props;
-export type DisplayEvents = typeof __propDef.events;
-export type DisplaySlots = typeof __propDef.slots;
-export default class Display extends SvelteComponentTyped<DisplayProps, DisplayEvents, DisplaySlots> {
-}
-export {};

package/dist/showcase/tabs/Feedback.svelte

@@ -1,180 +0,0 @@
-<script lang="ts">
-  import { COLORS } from "../shared";
-  import ShowcaseCard from "../ShowcaseCard.svelte";
-
-  let progressVal = $state(70);
-  let modalOpen = $state(false);
-</script>
-
-{#snippet section(label: string)}
-  <div class="divider text-xs font-bold opacity-40 mt-6 mb-2">
-    {label.toUpperCase()}
-  </div>
-{/snippet}
-
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
-  <!-- ALERTS -->
-  <ShowcaseCard title="Alerts" icon="🚨">
-    {@render section("Colors")}
-    <div class="space-y-2">
-      <div role="alert" class="alert alert-info py-2 px-4 text-sm">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          class="h-6 w-6 shrink-0 stroke-current"
-          ><path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-          ></path></svg
-        >
-        <span>New software update available.</span>
-      </div>
-      <div role="alert" class="alert alert-success py-2 px-4 text-sm">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 shrink-0 stroke-current"
-          fill="none"
-          viewBox="0 0 24 24"
-          ><path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          /></svg
-        >
-        <span>Your purchase was successful!</span>
-      </div>
-      <div role="alert" class="alert alert-warning py-2 px-4 text-sm">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 shrink-0 stroke-current"
-          fill="none"
-          viewBox="0 0 24 24"
-          ><path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          /></svg
-        >
-        <span>Warning: Invalid email address!</span>
-      </div>
-    </div>
-
-    {@render section("Styles")}
-    <div class="alert alert-dash alert-error mt-2 py-2 px-4 text-sm">
-      <span>Dash style alert</span>
-    </div>
-  </ShowcaseCard>
-
-  <!-- MODAL & TOOLTIP -->
-  <ShowcaseCard title="Modal & Tooltip" icon="🪟">
-    {@render section("Dialog Modal")}
-    <button
-      class="btn btn-primary"
-      onclick={() =>
-        (
-          document.getElementById("demo_modal") as HTMLDialogElement
-        ).showModal()}
-    >
-      Open Modal
-    </button>
-    <dialog id="demo_modal" class="modal">
-      <div class="modal-box">
-        <h3 class="font-bold text-lg">Hello!</h3>
-        <p class="py-4">Press ESC key or click the button below to close</p>
-        <div class="modal-action">
-          <form method="dialog">
-            <button class="btn">Close</button>
-          </form>
-        </div>
-      </div>
-    </dialog>
-
-    {@render section("Tooltips")}
-    <div class="flex flex-wrap gap-4 pt-4">
-      <div class="tooltip" data-tip="hello">
-        <button class="btn">Top</button>
-      </div>
-      <div class="tooltip tooltip-bottom" data-tip="world">
-        <button class="btn">Bottom</button>
-      </div>
-    </div>
-  </ShowcaseCard>
-
-  <!-- LOADING & PROGRESS -->
-  <ShowcaseCard title="Loading & Progress" icon="⏳">
-    {@render section("Loading Spinners")}
-    <div class="flex flex-wrap gap-4 items-center">
-      <span class="loading loading-spinner loading-md"></span>
-      <span class="loading loading-dots loading-md text-primary"></span>
-      <span class="loading loading-ring loading-md text-secondary"></span>
-      <span class="loading loading-ball loading-md text-accent"></span>
-      <span class="loading loading-bars loading-md"></span>
-      <span class="loading loading-infinity loading-lg"></span>
-    </div>
-
-    {@render section("Progress Bars")}
-    <div class="space-y-4">
-      <progress
-        class="progress progress-primary w-full"
-        value={progressVal}
-        max="100"
-      ></progress>
-      <div class="flex flex-wrap gap-4 justify-center">
-        <div
-          class="radial-progress text-primary"
-          style="--value:{progressVal};"
-          role="progressbar"
-        >
-          {progressVal}%
-        </div>
-      </div>
-      <input
-        type="range"
-        min="0"
-        max="100"
-        bind:value={progressVal}
-        class="range range-xs"
-      />
-    </div>
-  </ShowcaseCard>
-
-  <!-- SKELETON & COLLAPSE -->
-  <ShowcaseCard title="Skeleton & Collapse" icon="🦴">
-    {@render section("Skeleton")}
-    <div class="flex flex-col gap-4 w-full">
-      <div class="flex items-center gap-4">
-        <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
-        <div class="flex flex-col gap-4">
-          <div class="skeleton h-4 w-20"></div>
-          <div class="skeleton h-4 w-28"></div>
-        </div>
-      </div>
-      <div class="skeleton h-32 w-full"></div>
-    </div>
-
-    {@render section("Collapse / Accordion")}
-    <div class="collapse collapse-arrow bg-base-200 mt-4">
-      <input type="radio" name="my-accordion-1" checked />
-      <div class="collapse-title text-xl font-medium">
-        Click to open this one and close others
-      </div>
-      <div class="collapse-content">
-        <p>hello</p>
-      </div>
-    </div>
-    <div class="collapse collapse-arrow bg-base-200 mt-2">
-      <input type="radio" name="my-accordion-1" />
-      <div class="collapse-title text-xl font-medium">
-        Click to open this one and close others
-      </div>
-      <div class="collapse-content">
-        <p>hello</p>
-      </div>
-    </div>
-  </ShowcaseCard>
-</div>

package/dist/showcase/tabs/Feedback.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FeedbackProps = typeof __propDef.props;
-export type FeedbackEvents = typeof __propDef.events;
-export type FeedbackSlots = typeof __propDef.slots;
-export default class Feedback extends SvelteComponentTyped<FeedbackProps, FeedbackEvents, FeedbackSlots> {
-}
-export {};