bloko-ui 0.0.1

package/dist/components/Pagination.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  interface Props {
+    page?: number;
+    total: number;
+    perPage?: number;
+    onchange?: (page: number) => void;
+  }
+
+  let {
+    page = $bindable(1),
+    total,
+    perPage = 10,
+    onchange
+  }: Props = $props();
+
+  let totalPages = $derived(Math.ceil(total / perPage));
+  let canPrev = $derived(page > 1);
+  let canNext = $derived(page < totalPages);
+
+  function goTo(newPage: number) {
+    if (newPage >= 1 && newPage <= totalPages) {
+      page = newPage;
+      onchange?.(page);
+    }
+  }
+</script>
+
+<div class="pagination">
+  <button class="btn" disabled={!canPrev} onclick={() => goTo(page - 1)}>
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M15 18l-6-6 6-6" />
+    </svg>
+  </button>
+
+  <span class="info">
+    {page} / {totalPages}
+  </span>
+
+  <button class="btn" disabled={!canNext} onclick={() => goTo(page + 1)}>
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M9 18l6-6-6-6" />
+    </svg>
+  </button>
+</div>
+
+<style>
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    background: white;
+    color: #333;
+    cursor: pointer;
+  }
+
+  .btn:hover:not(:disabled) {
+    background: #fafafa;
+    border-color: #d0d0d0;
+  }
+
+  .btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .info {
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    color: #71717a;
+    min-width: 50px;
+    text-align: center;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    page?: number;
+    total: number;
+    perPage?: number;
+    onchange?: (page: number) => void;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Popover.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    trigger: Snippet;
+    children: Snippet;
+  }
+
+  let { position = 'bottom', trigger, children }: Props = $props();
+
+  let open = $state(false);
+  let wrapperEl: HTMLDivElement;
+
+  function toggle() {
+    open = !open;
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (open && wrapperEl && !wrapperEl.contains(event.target as Node)) {
+      open = false;
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      open = false;
+    }
+  }
+</script>
+
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<div class="popover-wrapper" bind:this={wrapperEl}>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="trigger" onclick={toggle}>
+    {@render trigger()}
+  </div>
+  {#if open}
+    <div class="popover {position}">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .popover-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .trigger {
+    cursor: pointer;
+  }
+
+  .popover {
+    position: absolute;
+    min-width: 200px;
+    padding: 12px;
+    background: white;
+    border: 1px solid #e4e4e7;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 50;
+  }
+
+  .popover.top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 8px;
+  }
+
+  .popover.bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 8px;
+  }
+
+  .popover.left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+  }
+
+  .popover.right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 8px;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    trigger: Snippet;
+    children: Snippet;
+}
+declare const Popover: import("svelte").Component<Props, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/Progress.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  interface Props {
+    value?: number;
+    max?: number;
+    size?: 'sm' | 'md';
+    variant?: 'default' | 'success' | 'warning' | 'error';
+  }
+
+  let { value = 0, max = 100, size = 'md', variant = 'default' }: Props = $props();
+
+  let percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+</script>
+
+<div class="progress {size}" role="progressbar" aria-valuenow={value} aria-valuemin={0} aria-valuemax={max}>
+  <div class="bar {variant}" style="width: {percentage}%"></div>
+</div>
+
+<style>
+  .progress {
+    width: 100%;
+    background: #e4e4e7;
+    border-radius: 999px;
+    overflow: hidden;
+  }
+
+  .progress.sm {
+    height: 4px;
+  }
+
+  .progress.md {
+    height: 8px;
+  }
+
+  .bar {
+    height: 100%;
+    border-radius: 999px;
+    transition: width 0.3s ease;
+  }
+
+  .bar.default {
+    background: #6366f1;
+  }
+
+  .bar.success {
+    background: #22c55e;
+  }
+
+  .bar.warning {
+    background: #f59e0b;
+  }
+
+  .bar.error {
+    background: #ef4444;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    value?: number;
+    max?: number;
+    size?: 'sm' | 'md';
+    variant?: 'default' | 'success' | 'warning' | 'error';
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/RadioGroup.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  interface Option {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    options: Option[];
+    value?: string;
+    name?: string;
+    orientation?: 'horizontal' | 'vertical';
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    options,
+    value = $bindable(''),
+    name = 'radio-group',
+    orientation = 'vertical',
+    onchange
+  }: Props = $props();
+
+  function handleChange(optionValue: string) {
+    value = optionValue;
+    onchange?.(value);
+  }
+</script>
+
+<div class="radio-group {orientation}" role="radiogroup">
+  {#each options as option}
+    <label class="radio-option" class:disabled={option.disabled}>
+      <input
+        type="radio"
+        {name}
+        value={option.value}
+        checked={value === option.value}
+        disabled={option.disabled}
+        onchange={() => handleChange(option.value)}
+      />
+      <span class="radio-circle"></span>
+      <span class="radio-label">{option.label}</span>
+    </label>
+  {/each}
+</div>
+
+<style>
+  .radio-group {
+    display: flex;
+    gap: 12px;
+  }
+
+  .radio-group.vertical {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .radio-group.horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .radio-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    color: #3f3f46;
+  }
+
+  .radio-option.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .radio-option input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .radio-circle {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #d4d4d8;
+    border-radius: 50%;
+    transition: all 0.15s ease;
+    position: relative;
+  }
+
+  .radio-option input:checked + .radio-circle {
+    border-color: #6366f1;
+  }
+
+  .radio-option input:checked + .radio-circle::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 8px;
+    height: 8px;
+    background: #6366f1;
+    border-radius: 50%;
+  }
+
+  .radio-option input:focus-visible + .radio-circle {
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+  }
+</style>

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

@@ -0,0 +1,15 @@
+interface Option {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props {
+    options: Option[];
+    value?: string;
+    name?: string;
+    orientation?: 'horizontal' | 'vertical';
+    onchange?: (value: string) => void;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/SearchInput.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    size?: 'sm' | 'md';
+    onchange?: (value: string) => void;
+    onsearch?: (value: string) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = 'Search...',
+    size = 'md',
+    onchange,
+    onsearch
+  }: Props = $props();
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    value = target.value;
+    onchange?.(value);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      onsearch?.(value);
+    }
+  }
+
+  function clear() {
+    value = '';
+    onchange?.('');
+  }
+</script>
+
+<div class="search-input {size}">
+  <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <circle cx="11" cy="11" r="8" />
+    <path d="M21 21l-4.35-4.35" />
+  </svg>
+  <input
+    type="text"
+    {placeholder}
+    {value}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
+  />
+  {#if value}
+    <button class="clear-btn" onclick={clear} aria-label="Clear search">
+      <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}
+</div>
+
+<style>
+  .search-input {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .search-input.sm {
+    height: 28px;
+  }
+
+  .search-input.md {
+    height: 32px;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 10px;
+    color: #a1a1aa;
+    pointer-events: none;
+  }
+
+  input {
+    width: 100%;
+    height: 100%;
+    padding: 0 32px 0 32px;
+    font-size: 12px;
+    color: #18181b;
+    background: white;
+    border: 1px solid #e4e4e7;
+    border-radius: 4px;
+    outline: none;
+    transition: border-color 0.15s ease;
+  }
+
+  input::placeholder {
+    color: #a1a1aa;
+  }
+
+  input:focus {
+    border-color: #6366f1;
+  }
+
+  .clear-btn {
+    position: absolute;
+    right: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    color: #a1a1aa;
+    background: none;
+    border: none;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .clear-btn:hover {
+    color: #3f3f46;
+    background: #f4f4f5;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    value?: string;
+    placeholder?: string;
+    size?: 'sm' | 'md';
+    onchange?: (value: string) => void;
+    onsearch?: (value: string) => void;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/Select.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  interface Option {
+    value: string;
+    label: string;
+  }
+
+  interface Props {
+    options: Option[];
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    options,
+    value = $bindable(''),
+    placeholder = 'Select...',
+    disabled = false,
+    size = 'sm',
+    onchange
+  }: Props = $props();
+
+  function handleChange(e: Event) {
+    const target = e.target as HTMLSelectElement;
+    value = target.value;
+    onchange?.(value);
+  }
+</script>
+
+<select
+  class="select select-{size}"
+  {disabled}
+  {value}
+  onchange={handleChange}
+>
+  {#if placeholder}
+    <option value="" disabled>{placeholder}</option>
+  {/if}
+  {#each options as option}
+    <option value={option.value}>{option.label}</option>
+  {/each}
+</select>
+
+<style>
+  .select {
+    appearance: none;
+    background: white;
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    color: #333;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    padding-right: 28px;
+  }
+
+  .select:focus {
+    outline: none;
+    border-color: #18181b;
+  }
+
+  .select:disabled {
+    background-color: #fafafa;
+    color: #a1a1aa;
+    cursor: not-allowed;
+  }
+
+  .select-sm {
+    height: 24px;
+    padding: 0 8px;
+  }
+
+  .select-md {
+    height: 28px;
+    padding: 0 10px;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+interface Option {
+    value: string;
+    label: string;
+}
+interface Props {
+    options: Option[];
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (value: string) => void;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;