bloko-ui 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/components/Accordion.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Item {
+    id: string;
+    title: string;
+    content: string;
+  }
+
+  interface Props {
+    items?: Item[];
+    multiple?: boolean;
+    children?: Snippet;
+  }
+
+  let { items = [], multiple = false, children }: Props = $props();
+
+  let openItems: Set<string> = $state(new Set());
+
+  function toggle(id: string) {
+    if (openItems.has(id)) {
+      openItems.delete(id);
+      openItems = new Set(openItems);
+    } else {
+      if (!multiple) {
+        openItems = new Set([id]);
+      } else {
+        openItems.add(id);
+        openItems = new Set(openItems);
+      }
+    }
+  }
+</script>
+
+<div class="accordion">
+  {#if children}
+    {@render children()}
+  {:else}
+    {#each items as item}
+      <div class="accordion-item" class:open={openItems.has(item.id)}>
+        <button class="accordion-header" onclick={() => toggle(item.id)}>
+          <span>{item.title}</span>
+          <svg class="chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </button>
+        {#if openItems.has(item.id)}
+          <div class="accordion-content">
+            {item.content}
+          </div>
+        {/if}
+      </div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .accordion {
+    border: 1px solid #e4e4e7;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .accordion-item {
+    border-bottom: 1px solid #e4e4e7;
+  }
+
+  .accordion-item:last-child {
+    border-bottom: none;
+  }
+
+  .accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 12px 14px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #18181b;
+    text-align: left;
+    background: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .accordion-header:hover {
+    background: #fafafa;
+  }
+
+  .chevron {
+    color: #71717a;
+    transition: transform 0.2s ease;
+  }
+
+  .accordion-item.open .chevron {
+    transform: rotate(180deg);
+  }
+
+  .accordion-content {
+    padding: 0 14px 14px;
+    font-size: 12px;
+    color: #52525b;
+    line-height: 1.5;
+  }
+</style>

package/dist/components/Accordion.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Item {
+    id: string;
+    title: string;
+    content: string;
+}
+interface Props {
+    items?: Item[];
+    multiple?: boolean;
+    children?: Snippet;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Alert.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    dismissible?: boolean;
+    ondismiss?: () => void;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'info',
+    title,
+    dismissible = false,
+    ondismiss,
+    children
+  }: Props = $props();
+
+  let visible = $state(true);
+
+  function dismiss() {
+    visible = false;
+    ondismiss?.();
+  }
+</script>
+
+{#if visible}
+  <div class="alert {variant}" role="alert">
+    <div class="icon">
+      {#if variant === 'info'}
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 16v-4m0-4h.01" />
+        </svg>
+      {:else if variant === 'success'}
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+          <path d="M22 4L12 14.01l-3-3" />
+        </svg>
+      {:else if variant === 'warning'}
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+          <path d="M12 9v4m0 4h.01" />
+        </svg>
+      {:else if variant === 'error'}
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10" />
+          <path d="M15 9l-6 6m0-6l6 6" />
+        </svg>
+      {/if}
+    </div>
+    <div class="content">
+      {#if title}
+        <div class="title">{title}</div>
+      {/if}
+      {#if children}
+        <div class="message">{@render children()}</div>
+      {/if}
+    </div>
+    {#if dismissible}
+      <button class="dismiss" onclick={dismiss} aria-label="Dismiss">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .alert {
+    display: flex;
+    gap: 10px;
+    padding: 12px;
+    border-radius: 6px;
+    font-size: 12px;
+  }
+
+  .alert.info {
+    background: #eff6ff;
+    border: 1px solid #bfdbfe;
+    color: #1e40af;
+  }
+
+  .alert.success {
+    background: #f0fdf4;
+    border: 1px solid #bbf7d0;
+    color: #166534;
+  }
+
+  .alert.warning {
+    background: #fffbeb;
+    border: 1px solid #fde68a;
+    color: #92400e;
+  }
+
+  .alert.error {
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    color: #991b1b;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  .content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .title {
+    font-weight: 600;
+    margin-bottom: 2px;
+  }
+
+  .message {
+    opacity: 0.9;
+  }
+
+  .dismiss {
+    flex-shrink: 0;
+    padding: 2px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.15s;
+  }
+
+  .dismiss:hover {
+    opacity: 1;
+  }
+</style>

package/dist/components/Alert.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    dismissible?: boolean;
+    ondismiss?: () => void;
+    children?: Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/Avatar.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  interface Props {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg';
+  }
+
+  let { src, alt = '', name, size = 'md' }: Props = $props();
+
+  let initials = $derived(
+    name
+      ? name
+          .split(' ')
+          .map((n) => n[0])
+          .slice(0, 2)
+          .join('')
+          .toUpperCase()
+      : ''
+  );
+
+  let imageError = $state(false);
+</script>
+
+<div class="avatar {size}">
+  {#if src && !imageError}
+    <img {src} {alt} onerror={() => (imageError = true)} />
+  {:else if initials}
+    <span class="initials">{initials}</span>
+  {:else}
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  {/if}
+</div>
+
+<style>
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: #e4e4e7;
+    color: #71717a;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .avatar.sm {
+    width: 24px;
+    height: 24px;
+    font-size: 10px;
+  }
+
+  .avatar.md {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
+
+  .avatar.lg {
+    width: 40px;
+    height: 40px;
+    font-size: 14px;
+  }
+
+  .avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .initials {
+    font-weight: 500;
+  }
+
+  .avatar svg {
+    width: 60%;
+    height: 60%;
+  }
+</style>

package/dist/components/Avatar.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Badge.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'default' | 'muted' | 'success' | 'warning' | 'error';
+    label?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    variant = 'default',
+    label,
+    children
+  }: Props = $props();
+</script>
+
+<span class="badge badge-{variant}">
+  {#if children}
+    {@render children()}
+  {:else if label}
+    {label}
+  {/if}
+</span>
+
+<style>
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    height: 18px;
+    padding: 0 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 500;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+
+  .badge-default {
+    background: #f4f4f5;
+    color: #52525b;
+  }
+
+  .badge-muted {
+    background: #e4e4e7;
+    color: #71717a;
+  }
+
+  .badge-success {
+    background: #dcfce7;
+    color: #166534;
+  }
+
+  .badge-warning {
+    background: #fef9c3;
+    color: #854d0e;
+  }
+
+  .badge-error {
+    background: #fee2e2;
+    color: #991b1b;
+  }
+</style>

package/dist/components/Badge.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    variant?: 'default' | 'muted' | 'success' | 'warning' | 'error';
+    label?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/Breadcrumb.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  interface Crumb {
+    label: string;
+    href?: string;
+  }
+
+  interface Props {
+    items: Crumb[];
+  }
+
+  let { items }: Props = $props();
+</script>
+
+<nav class="breadcrumb" aria-label="Breadcrumb">
+  <ol>
+    {#each items as item, i}
+      <li>
+        {#if item.href && i < items.length - 1}
+          <a href={item.href}>{item.label}</a>
+        {:else}
+          <span class:current={i === items.length - 1}>{item.label}</span>
+        {/if}
+        {#if i < items.length - 1}
+          <span class="separator">/</span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .breadcrumb {
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  ol {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+  }
+
+  a {
+    color: #71717a;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #18181b;
+    text-decoration: underline;
+  }
+
+  span {
+    color: #71717a;
+  }
+
+  span.current {
+    color: #18181b;
+    font-weight: 500;
+  }
+
+  .separator {
+    margin: 0 6px;
+    color: #d4d4d8;
+  }
+</style>

package/dist/components/Breadcrumb.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Crumb {
+    label: string;
+    href?: string;
+}
+interface Props {
+    items: Crumb[];
+}
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/Button.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'default' | 'primary' | 'ghost' | 'destructive';
+    size?: 'sm' | 'md';
+    label?: string;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    onclick?: (e: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    variant = 'default',
+    size = 'sm',
+    label,
+    disabled = false,
+    type = 'button',
+    onclick,
+    children
+  }: Props = $props();
+</script>
+
+<button
+  class="btn btn-{variant} btn-{size}"
+  {disabled}
+  {type}
+  {onclick}
+>
+  {#if children}
+    {@render children()}
+  {:else if label}
+    {label}
+  {/if}
+</button>
+
+<style>
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    cursor: pointer;
+    transition: background 0.1s, border-color 0.1s;
+    white-space: nowrap;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn:focus-visible {
+    outline: 2px solid #6366f1;
+    outline-offset: 1px;
+  }
+
+  /* Sizes - compact */
+  .btn-sm {
+    height: 24px;
+    padding: 0 8px;
+  }
+
+  .btn-md {
+    height: 28px;
+    padding: 0 12px;
+  }
+
+  /* Variants */
+  .btn-default {
+    background: white;
+    border: 1px solid #e2e2e2;
+    color: #333;
+  }
+
+  .btn-default:hover:not(:disabled) {
+    background: #fafafa;
+    border-color: #d0d0d0;
+  }
+
+  .btn-primary {
+    background: #18181b;
+    border: 1px solid #18181b;
+    color: white;
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background: #27272a;
+  }
+
+  .btn-ghost {
+    background: transparent;
+    border: 1px solid transparent;
+    color: #666;
+  }
+
+  .btn-ghost:hover:not(:disabled) {
+    background: #f4f4f5;
+    color: #333;
+  }
+
+  .btn-destructive {
+    background: #ef4444;
+    border: 1px solid #ef4444;
+    color: white;
+  }
+
+  .btn-destructive:hover:not(:disabled) {
+    background: #dc2626;
+  }
+</style>

package/dist/components/Button.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    variant?: 'default' | 'primary' | 'ghost' | 'destructive';
+    size?: 'sm' | 'md';
+    label?: string;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    onclick?: (e: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;