rune-lab 0.1.2 → 0.2.1

package/dist/showcase/tabs/Actions.svelte

@@ -1,150 +0,0 @@
-<script lang="ts">
-  import { COLORS, SIZES, BTN_STYLES, BADGE_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">
-  <!-- BUTTONS -->
-  <ShowcaseCard title="Buttons" icon="🖱️">
-    {@render section("Colors")}
-    <div class="flex flex-wrap gap-2">
-      {#each COLORS as c (c)}
-        <button class="btn btn-{c}">{c}</button>
-      {/each}
-    </div>
-
-    {@render section("Styles")}
-    <div class="space-y-4">
-      {#each BTN_STYLES as style (style)}
-        {#if style}
-          <div class="flex flex-wrap gap-2">
-            {#each COLORS as c (c)}
-              <button class="btn {style} btn-{c}">{c}</button>
-            {/each}
-          </div>
-        {/if}
-      {/each}
-    </div>
-
-    {@render section("Sizes")}
-    <div class="flex flex-wrap gap-2 items-end">
-      {#each SIZES as s (s)}
-        <button class="btn btn-primary btn-{s}">{s}</button>
-      {/each}
-    </div>
-  </ShowcaseCard>
-
-  <!-- BADGES -->
-  <ShowcaseCard title="Badges" icon="🏷️">
-    {@render section("Colors")}
-    <div class="flex flex-wrap gap-2">
-      {#each COLORS as c (c)}
-        <div class="badge badge-{c}">{c}</div>
-      {/each}
-    </div>
-
-    {@render section("Styles")}
-    <div class="space-y-4">
-      {#each BADGE_STYLES as style (style)}
-        {#if style}
-          <div class="flex flex-wrap gap-2">
-            {#each COLORS as c (c)}
-              <div class="badge {style} badge-{c}">{c}</div>
-            {/each}
-          </div>
-        {/if}
-      {/each}
-    </div>
-
-    {@render section("In Elements")}
-    <div class="flex flex-wrap gap-4">
-      <button class="btn">
-        Inbox
-        <div class="badge badge-secondary">+99</div>
-      </button>
-      <div class="flex items-center gap-2 text-xl font-bold">
-        Notifications
-        <div class="badge badge-primary badge-outline">NEW</div>
-      </div>
-    </div>
-  </ShowcaseCard>
-
-  <!-- AVATAR & STATUS -->
-  <ShowcaseCard title="Avatar & Status" icon="👤">
-    {@render section("Shapes & Status")}
-    <div class="flex flex-wrap gap-6 items-center">
-      <div class="avatar online">
-        <div class="w-16 rounded-full">
-          <img src="https://picsum.photos/160" alt="Avatar" />
-        </div>
-      </div>
-      <div class="avatar offline">
-        <div class="w-16 rounded-xl">
-          <img src="https://picsum.photos/161" alt="Avatar" />
-        </div>
-      </div>
-      <div class="avatar online">
-        <div class="w-16 mask mask-squircle">
-          <img src="https://picsum.photos/162" alt="Avatar" />
-        </div>
-      </div>
-    </div>
-
-    {@render section("Status Indicators")}
-    <div class="flex flex-wrap gap-4 items-center">
-      {#each COLORS as c (c)}
-        <span class="status status-{c}"></span>
-      {/each}
-      <span class="status status-success animate-ping"></span>
-    </div>
-  </ShowcaseCard>
-
-  <!-- INDICATORS & FAB -->
-  <ShowcaseCard title="Indicators & FAB" icon="📍">
-    {@render section("Indicators")}
-    <div class="flex flex-wrap gap-8">
-      <div class="indicator">
-        <span class="indicator-item badge badge-secondary">99+</span>
-        <div class="grid w-20 h-20 bg-base-300 place-items-center rounded-lg">
-          Inbox
-        </div>
-      </div>
-
-      <div class="indicator">
-        <span
-          class="indicator-item indicator-bottom indicator-center badge badge-primary"
-          >new</span
-        >
-        <div class="grid w-20 h-20 bg-base-300 place-items-center rounded-lg">
-          Items
-        </div>
-      </div>
-    </div>
-
-    {@render section("FAB / Speed Dial")}
-    <div
-      class="relative h-40 w-full bg-base-200 rounded-lg overflow-hidden p-4"
-    >
-      <div class="absolute bottom-4 right-4">
-        <div class="fab">
-          <div
-            tabindex="0"
-            role="button"
-            class="btn btn-primary btn-circle btn-lg"
-          >
-            ＋
-          </div>
-          <button class="btn btn-circle btn-secondary">A</button>
-          <button class="btn btn-circle btn-secondary">B</button>
-          <button class="btn btn-circle btn-secondary">C</button>
-        </div>
-      </div>
-    </div>
-  </ShowcaseCard>
-</div>

package/dist/showcase/tabs/Actions.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 ActionsProps = typeof __propDef.props;
-export type ActionsEvents = typeof __propDef.events;
-export type ActionsSlots = typeof __propDef.slots;
-export default class Actions extends SvelteComponentTyped<ActionsProps, ActionsEvents, ActionsSlots> {
-}
-export {};

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 {};