bloko-ui 0.0.1

package/dist/components/Sidebar.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  interface SidebarItem {
+    label: string;
+    href?: string;
+    count?: number;
+    active?: boolean;
+  }
+
+  interface Props {
+    title?: string;
+    items?: SidebarItem[];
+  }
+
+  let {
+    title = '',
+    items = []
+  }: Props = $props();
+</script>
+
+<aside class="sidebar">
+  {#if title}
+    <div class="sidebar-title">{title}</div>
+  {/if}
+  <ul class="sidebar-list">
+    {#each items as item}
+      <li>
+        <a href={item.href || '#'} class:active={item.active}>
+          <span class="label">{item.label}</span>
+          {#if item.count !== undefined}
+            <span class="count">{item.count}</span>
+          {/if}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</aside>
+
+<style>
+  .sidebar {
+    width: 180px;
+    min-width: 180px;
+    background: #fafafa;
+    border-right: 1px solid #e2e2e2;
+    overflow-y: auto;
+  }
+
+  .sidebar-title {
+    padding: 8px 12px;
+    font-size: 10px;
+    font-weight: 600;
+    color: #a1a1aa;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  .sidebar-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sidebar-list a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 28px;
+    padding: 0 12px;
+    font-size: 12px;
+    color: #52525b;
+    text-decoration: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    transition: background 0.1s;
+  }
+
+  .sidebar-list a:hover {
+    background: #f4f4f5;
+  }
+
+  .sidebar-list a.active {
+    background: #e4e4e7;
+    color: #18181b;
+    font-weight: 500;
+  }
+
+  .label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .count {
+    font-size: 10px;
+    color: #a1a1aa;
+    font-family: 'SF Mono', 'Fira Code', monospace;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+interface SidebarItem {
+    label: string;
+    href?: string;
+    count?: number;
+    active?: boolean;
+}
+interface Props {
+    title?: string;
+    items?: SidebarItem[];
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/Skeleton.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  interface Props {
+    width?: string;
+    height?: string;
+    rounded?: boolean;
+    circle?: boolean;
+  }
+
+  let {
+    width = '100%',
+    height = '16px',
+    rounded = true,
+    circle = false
+  }: Props = $props();
+</script>
+
+<div
+  class="skeleton"
+  class:rounded
+  class:circle
+  style="width: {width}; height: {height};"
+></div>
+
+<style>
+  .skeleton {
+    background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+  }
+
+  .skeleton.rounded {
+    border-radius: 4px;
+  }
+
+  .skeleton.circle {
+    border-radius: 50%;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    width?: string;
+    height?: string;
+    rounded?: boolean;
+    circle?: boolean;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Spinner.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+  }
+
+  let { size = 'sm', label }: Props = $props();
+</script>
+
+<div class="spinner-container">
+  <div class="spinner spinner-{size}"></div>
+  {#if label}
+    <span class="label">{label}</span>
+  {/if}
+</div>
+
+<style>
+  .spinner-container {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .spinner {
+    border: 2px solid #e2e2e2;
+    border-top-color: #18181b;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+  }
+
+  .spinner-sm {
+    width: 14px;
+    height: 14px;
+  }
+
+  .spinner-md {
+    width: 20px;
+    height: 20px;
+  }
+
+  .spinner-lg {
+    width: 28px;
+    height: 28px;
+    border-width: 3px;
+  }
+
+  .label {
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    color: #71717a;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

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

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

package/dist/components/Switch.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (checked: boolean) => void;
+  }
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    onchange
+  }: Props = $props();
+
+  function toggle() {
+    if (disabled) return;
+    checked = !checked;
+    onchange?.(checked);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      toggle();
+    }
+  }
+</script>
+
+<button
+  type="button"
+  role="switch"
+  aria-checked={checked}
+  class="switch {size}"
+  class:checked
+  class:disabled
+  onclick={toggle}
+  onkeydown={handleKeydown}
+  {disabled}
+>
+  <span class="thumb"></span>
+</button>
+
+<style>
+  .switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    border: none;
+    border-radius: 999px;
+    background: #d4d4d8;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .switch.md {
+    width: 36px;
+    height: 20px;
+  }
+
+  .switch.sm {
+    width: 28px;
+    height: 16px;
+  }
+
+  .switch.checked {
+    background: #6366f1;
+  }
+
+  .switch.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .thumb {
+    position: absolute;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.15s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  .switch.md .thumb {
+    width: 16px;
+    height: 16px;
+    left: 2px;
+  }
+
+  .switch.sm .thumb {
+    width: 12px;
+    height: 12px;
+    left: 2px;
+  }
+
+  .switch.md.checked .thumb {
+    transform: translateX(16px);
+  }
+
+  .switch.sm.checked .thumb {
+    transform: translateX(12px);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (checked: boolean) => void;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/Table.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<div class="table-wrapper">
+  <table class="table">
+    {#if children}
+      {@render children()}
+    {/if}
+  </table>
+</div>
+
+<style>
+  .table-wrapper {
+    overflow: auto;
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    background: white;
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  :global(.table th) {
+    height: 28px;
+    padding: 0 12px;
+    text-align: left;
+    font-weight: 500;
+    color: #71717a;
+    background: #fafafa;
+    border-bottom: 1px solid #e2e2e2;
+    white-space: nowrap;
+  }
+
+  :global(.table td) {
+    height: 32px;
+    padding: 0 12px;
+    color: #333;
+    border-bottom: 1px solid #f4f4f5;
+    white-space: nowrap;
+  }
+
+  :global(.table tr:last-child td) {
+    border-bottom: none;
+  }
+
+  :global(.table tr:hover td) {
+    background: #fafafa;
+  }
+
+  :global(.table .mono) {
+    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+    font-size: 11px;
+    color: #71717a;
+  }
+
+  :global(.table .truncate) {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :global(.table .editable) {
+    cursor: pointer;
+  }
+
+  :global(.table .editable:hover) {
+    background: #f0f4ff;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+interface Props {
+    children?: import('svelte').Snippet;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Tabs.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  interface Tab {
+    id: string;
+    label: string;
+  }
+
+  interface Props {
+    tabs: Tab[];
+    active?: string;
+    onchange?: (id: string) => void;
+  }
+
+  let {
+    tabs,
+    active = $bindable(tabs[0]?.id ?? ''),
+    onchange
+  }: Props = $props();
+
+  function handleClick(id: string) {
+    active = id;
+    onchange?.(id);
+  }
+</script>
+
+<div class="tabs">
+  {#each tabs as tab}
+    <button
+      class="tab"
+      class:active={active === tab.id}
+      onclick={() => handleClick(tab.id)}
+    >
+      {tab.label}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .tabs {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid #e2e2e2;
+  }
+
+  .tab {
+    padding: 8px 16px;
+    border: none;
+    background: none;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    color: #71717a;
+    cursor: pointer;
+    position: relative;
+    transition: color 0.1s;
+  }
+
+  .tab:hover {
+    color: #18181b;
+  }
+
+  .tab.active {
+    color: #18181b;
+  }
+
+  .tab.active::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: #18181b;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+interface Tab {
+    id: string;
+    label: string;
+}
+interface Props {
+    tabs: Tab[];
+    active?: string;
+    onchange?: (id: string) => void;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "active">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/Tag.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  interface Props {
+    label: string;
+    removable?: boolean;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+    onremove?: () => void;
+  }
+
+  let { label, removable = false, variant = 'default', onremove }: Props = $props();
+</script>
+
+<span class="tag {variant}">
+  {label}
+  {#if removable}
+    <button class="remove" onclick={onremove} aria-label="Remove {label}">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12" />
+      </svg>
+    </button>
+  {/if}
+</span>
+
+<style>
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    font-size: 11px;
+    font-weight: 500;
+    border-radius: 4px;
+  }
+
+  .tag.default {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+
+  .tag.primary {
+    background: #eef2ff;
+    color: #4f46e5;
+  }
+
+  .tag.success {
+    background: #f0fdf4;
+    color: #16a34a;
+  }
+
+  .tag.warning {
+    background: #fffbeb;
+    color: #d97706;
+  }
+
+  .tag.error {
+    background: #fef2f2;
+    color: #dc2626;
+  }
+
+  .remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: 2px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.15s;
+  }
+
+  .remove:hover {
+    opacity: 1;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    label: string;
+    removable?: boolean;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+    onremove?: () => void;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/Textarea.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = '',
+    rows = 3,
+    disabled = false,
+    resize = 'vertical',
+    onchange
+  }: Props = $props();
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLTextAreaElement;
+    value = target.value;
+    onchange?.(value);
+  }
+</script>
+
+<textarea
+  class="textarea"
+  {placeholder}
+  {rows}
+  {disabled}
+  style="resize: {resize}"
+  oninput={handleInput}
+>{value}</textarea>
+
+<style>
+  .textarea {
+    width: 100%;
+    padding: 8px 10px;
+    font-size: 12px;
+    font-family: inherit;
+    color: #18181b;
+    background: white;
+    border: 1px solid #e4e4e7;
+    border-radius: 4px;
+    outline: none;
+    transition: border-color 0.15s ease;
+  }
+
+  .textarea::placeholder {
+    color: #a1a1aa;
+  }
+
+  .textarea:focus {
+    border-color: #6366f1;
+  }
+
+  .textarea:disabled {
+    background: #fafafa;
+    color: #a1a1aa;
+    cursor: not-allowed;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    onchange?: (value: string) => void;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;