bloko-ui 0.0.1

package/dist/components/Card.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverable?: boolean;
+    children: Snippet;
+  }
+
+  let { padding = 'md', hoverable = false, children }: Props = $props();
+</script>
+
+<div class="card padding-{padding}" class:hoverable>
+  {@render children()}
+</div>
+
+<style>
+  .card {
+    background: white;
+    border: 1px solid #e4e4e7;
+    border-radius: 8px;
+  }
+
+  .card.padding-none {
+    padding: 0;
+  }
+
+  .card.padding-sm {
+    padding: 12px;
+  }
+
+  .card.padding-md {
+    padding: 16px;
+  }
+
+  .card.padding-lg {
+    padding: 24px;
+  }
+
+  .card.hoverable {
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .card.hoverable:hover {
+    border-color: #d4d4d8;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverable?: boolean;
+    children: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/Checkbox.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  interface Props {
+    checked?: boolean;
+    label?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    onchange?: (checked: boolean) => void;
+  }
+
+  let {
+    checked = $bindable(false),
+    label,
+    disabled = false,
+    indeterminate = false,
+    onchange
+  }: Props = $props();
+
+  function handleChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    checked = target.checked;
+    onchange?.(checked);
+  }
+</script>
+
+<label class="checkbox" class:disabled>
+  <input
+    type="checkbox"
+    {checked}
+    {disabled}
+    indeterminate={indeterminate}
+    onchange={handleChange}
+  />
+  <span class="checkmark" class:indeterminate></span>
+  {#if label}
+    <span class="label">{label}</span>
+  {/if}
+</label>
+
+<style>
+  .checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    color: #333;
+  }
+
+  .checkbox.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .checkmark {
+    width: 14px;
+    height: 14px;
+    border: 1px solid #d4d4d8;
+    border-radius: 3px;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.1s;
+  }
+
+  input:checked + .checkmark {
+    background: #18181b;
+    border-color: #18181b;
+  }
+
+  input:checked + .checkmark::after {
+    content: '';
+    width: 4px;
+    height: 7px;
+    border: solid white;
+    border-width: 0 1.5px 1.5px 0;
+    transform: rotate(45deg) translateY(-1px);
+  }
+
+  .checkmark.indeterminate {
+    background: #18181b;
+    border-color: #18181b;
+  }
+
+  .checkmark.indeterminate::after {
+    content: '';
+    width: 8px;
+    height: 1.5px;
+    background: white;
+  }
+
+  input:focus-visible + .checkmark {
+    outline: 2px solid #6366f1;
+    outline-offset: 1px;
+  }
+
+  .label {
+    user-select: none;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    checked?: boolean;
+    label?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    onchange?: (checked: boolean) => void;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/ContextMenu.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface MenuItem {
+    label: string;
+    value?: string;
+    icon?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    separator?: boolean;
+  }
+
+  interface Props {
+    items: MenuItem[];
+    onselect?: (item: MenuItem) => void;
+    children: Snippet;
+  }
+
+  let { items, onselect, children }: Props = $props();
+
+  let open = $state(false);
+  let x = $state(0);
+  let y = $state(0);
+
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    x = event.clientX;
+    y = event.clientY;
+    open = true;
+  }
+
+  function handleClick() {
+    if (open) {
+      open = false;
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      open = false;
+    }
+  }
+
+  function select(item: MenuItem) {
+    if (item.disabled || item.separator) return;
+    onselect?.(item);
+    open = false;
+  }
+</script>
+
+<svelte:window onclick={handleClick} onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="context-menu-wrapper" oncontextmenu={handleContextMenu}>
+  {@render children()}
+</div>
+
+{#if open}
+  <div class="context-menu" style="left: {x}px; top: {y}px;" role="menu">
+    {#each items as item}
+      {#if item.separator}
+        <div class="separator"></div>
+      {:else}
+        <button
+          type="button"
+          role="menuitem"
+          class="item"
+          class:destructive={item.destructive}
+          class:disabled={item.disabled}
+          onclick={() => select(item)}
+          disabled={item.disabled}
+        >
+          {item.label}
+        </button>
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .context-menu-wrapper {
+    display: contents;
+  }
+
+  .context-menu {
+    position: fixed;
+    min-width: 160px;
+    padding: 4px;
+    background: white;
+    border: 1px solid #e4e4e7;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+  }
+
+  .item {
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 12px;
+    color: #3f3f46;
+    text-align: left;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+  }
+
+  .item:hover:not(.disabled) {
+    background: #f4f4f5;
+  }
+
+  .item.destructive {
+    color: #dc2626;
+  }
+
+  .item.destructive:hover:not(.disabled) {
+    background: #fef2f2;
+  }
+
+  .item.disabled {
+    color: #a1a1aa;
+    cursor: not-allowed;
+  }
+
+  .separator {
+    height: 1px;
+    margin: 4px 8px;
+    background: #e4e4e7;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface MenuItem {
+    label: string;
+    value?: string;
+    icon?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    separator?: boolean;
+}
+interface Props {
+    items: MenuItem[];
+    onselect?: (item: MenuItem) => void;
+    children: Snippet;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/Divider.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+  }
+
+  let { orientation = 'horizontal', spacing = 'md' }: Props = $props();
+</script>
+
+<div class="divider {orientation} spacing-{spacing}"></div>
+
+<style>
+  .divider {
+    background: #e4e4e7;
+    flex-shrink: 0;
+  }
+
+  .divider.horizontal {
+    height: 1px;
+    width: 100%;
+  }
+
+  .divider.vertical {
+    width: 1px;
+    align-self: stretch;
+  }
+
+  .divider.spacing-none {
+    margin: 0;
+  }
+
+  .divider.horizontal.spacing-sm {
+    margin: 8px 0;
+  }
+
+  .divider.horizontal.spacing-md {
+    margin: 16px 0;
+  }
+
+  .divider.horizontal.spacing-lg {
+    margin: 24px 0;
+  }
+
+  .divider.vertical.spacing-sm {
+    margin: 0 8px;
+  }
+
+  .divider.vertical.spacing-md {
+    margin: 0 16px;
+  }
+
+  .divider.vertical.spacing-lg {
+    margin: 0 24px;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/Dropdown.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface MenuItem {
+    label: string;
+    value?: string;
+    icon?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    items: MenuItem[];
+    trigger?: Snippet;
+    label?: string;
+    onselect?: (item: MenuItem) => void;
+  }
+
+  let { items, trigger, label = 'Menu', onselect }: Props = $props();
+
+  let open = $state(false);
+  let buttonEl: HTMLButtonElement;
+
+  function toggle() {
+    open = !open;
+  }
+
+  function select(item: MenuItem) {
+    if (item.disabled) return;
+    onselect?.(item);
+    open = false;
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      open = false;
+      buttonEl?.focus();
+    }
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (open && buttonEl && !buttonEl.contains(event.target as Node)) {
+      open = false;
+    }
+  }
+</script>
+
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<div class="dropdown">
+  <button
+    bind:this={buttonEl}
+    type="button"
+    class="trigger"
+    aria-haspopup="true"
+    aria-expanded={open}
+    onclick={toggle}
+  >
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      {label}
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M6 9l6 6 6-6" />
+      </svg>
+    {/if}
+  </button>
+
+  {#if open}
+    <div class="menu" role="menu">
+      {#each items as item}
+        <button
+          type="button"
+          role="menuitem"
+          class="item"
+          class:destructive={item.destructive}
+          class:disabled={item.disabled}
+          onclick={() => select(item)}
+          disabled={item.disabled}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 10px;
+    font-size: 12px;
+    color: #3f3f46;
+    background: white;
+    border: 1px solid #e4e4e7;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .trigger:hover {
+    background: #fafafa;
+    border-color: #d4d4d8;
+  }
+
+  .menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
+    min-width: 140px;
+    background: white;
+    border: 1px solid #e4e4e7;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 50;
+    overflow: hidden;
+  }
+
+  .item {
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 12px;
+    color: #3f3f46;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+  }
+
+  .item:hover:not(.disabled) {
+    background: #f4f4f5;
+  }
+
+  .item.destructive {
+    color: #dc2626;
+  }
+
+  .item.destructive:hover:not(.disabled) {
+    background: #fef2f2;
+  }
+
+  .item.disabled {
+    color: #a1a1aa;
+    cursor: not-allowed;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface MenuItem {
+    label: string;
+    value?: string;
+    icon?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+}
+interface Props {
+    items: MenuItem[];
+    trigger?: Snippet;
+    label?: string;
+    onselect?: (item: MenuItem) => void;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/EmptyState.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title?: string;
+    description?: string;
+    icon?: 'empty' | 'search' | 'error';
+    children?: Snippet;
+  }
+
+  let {
+    title = 'No data',
+    description,
+    icon = 'empty',
+    children
+  }: Props = $props();
+</script>
+
+<div class="empty-state">
+  <div class="icon">
+    {#if icon === 'empty'}
+      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+      </svg>
+    {:else if icon === 'search'}
+      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <circle cx="11" cy="11" r="8" />
+        <path d="M21 21l-4.35-4.35" />
+      </svg>
+    {:else if icon === 'error'}
+      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 8v4m0 4h.01" />
+      </svg>
+    {/if}
+  </div>
+  <h3 class="title">{title}</h3>
+  {#if description}
+    <p class="description">{description}</p>
+  {/if}
+  {#if children}
+    <div class="actions">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+    text-align: center;
+  }
+
+  .icon {
+    color: #a1a1aa;
+    margin-bottom: 12px;
+  }
+
+  .title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 500;
+    color: #3f3f46;
+  }
+
+  .description {
+    margin: 4px 0 0;
+    font-size: 12px;
+    color: #71717a;
+  }
+
+  .actions {
+    margin-top: 16px;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    description?: string;
+    icon?: 'empty' | 'search' | 'error';
+    children?: Snippet;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;