@colletdev/svelte 0.1.3

package/src/pagination.svelte

@@ -0,0 +1,40 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-pagination> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  showInfo?: boolean;
+  showPrevNext?: boolean;
+  prevLabel?: string;
+  nextLabel?: string;
+  pageSizeOptions?: string;
+  }
+
+  let { id, currentPage, pageSize, totalItems, label, size, showInfo, showPrevNext, prevLabel, nextLabel, pageSizeOptions }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-pagination
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  current-page={typeof currentPage === 'object' && currentPage != null ? JSON.stringify(currentPage) : currentPage}
+  page-size={typeof pageSize === 'object' && pageSize != null ? JSON.stringify(pageSize) : pageSize}
+  total-items={typeof totalItems === 'object' && totalItems != null ? JSON.stringify(totalItems) : totalItems}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  show-info={showInfo || undefined}
+  show-prev-next={showPrevNext || undefined}
+  prev-label={typeof prevLabel === 'object' && prevLabel != null ? JSON.stringify(prevLabel) : prevLabel}
+  next-label={typeof nextLabel === 'object' && nextLabel != null ? JSON.stringify(nextLabel) : nextLabel}
+  page-size-options={typeof pageSizeOptions === 'object' && pageSizeOptions != null ? JSON.stringify(pageSizeOptions) : pageSizeOptions}
+/>

package/src/pagination.svelte.d.ts

@@ -0,0 +1,19 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface PaginationProps {
+  id?: string;
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  showInfo?: boolean;
+  showPrevNext?: boolean;
+  prevLabel?: string;
+  nextLabel?: string;
+  pageSizeOptions?: string;
+}
+
+declare const Pagination: Component<PaginationProps, {}>;
+export default Pagination;

package/src/popover.svelte

@@ -0,0 +1,66 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-popover> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  triggerLabel: string;
+  title?: string;
+  description?: string;
+  width?: 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+  placement?: 'top' | 'bottom';
+  align?: 'start' | 'center' | 'end';
+  arrow?: boolean;
+  closeButton?: boolean;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  icon?: string;
+  disabled?: boolean;
+  children?: import('svelte').Snippet;
+  }
+
+  let { id, triggerLabel, title, description, width, placement, align, arrow, closeButton, variant, shape, size, icon, disabled, children }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (title != null) el.setAttribute('title', String(title));
+    else el.removeAttribute('title');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (width != null) el.setAttribute('width', String(width));
+    else el.removeAttribute('width');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (align != null) el.setAttribute('align', String(align));
+    else el.removeAttribute('align');
+  });
+  /** Opens the popover panel. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the popover panel. */
+  export function close() { (el as any)?.close(); }
+</script>
+
+<cx-popover
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  trigger-label={typeof triggerLabel === 'object' && triggerLabel != null ? JSON.stringify(triggerLabel) : triggerLabel}
+  description={typeof description === 'object' && description != null ? JSON.stringify(description) : description}
+  placement={typeof placement === 'object' && placement != null ? JSON.stringify(placement) : placement}
+  arrow={arrow || undefined}
+  close-button={closeButton || undefined}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  icon={typeof icon === 'object' && icon != null ? JSON.stringify(icon) : icon}
+  disabled={disabled || undefined}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</cx-popover>

package/src/popover.svelte.d.ts

@@ -0,0 +1,28 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface PopoverProps {
+  id?: string;
+  triggerLabel: string;
+  title?: string;
+  description?: string;
+  width?: 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+  placement?: 'top' | 'bottom';
+  align?: 'start' | 'center' | 'end';
+  arrow?: boolean;
+  closeButton?: boolean;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  icon?: string;
+  disabled?: boolean;
+  children?: import('svelte').Snippet;
+}
+
+declare const Popover: Component<PopoverProps, {
+  /** Opens the popover panel. */
+  open(): void;
+  /** Closes the popover panel. */
+  close(): void;
+}>;
+export default Popover;

package/src/profile-menu.svelte

@@ -0,0 +1,55 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-profile-menu> -->
+<script lang="ts">
+  import type { MenuActionDetail, MenuEntry } from './types.js';
+
+  interface Props {
+  id?: string;
+  label: string;
+  image?: string;
+  initials?: string;
+  shape?: 'circle' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  width?: 'auto' | 'sm' | 'md' | 'lg';
+  entries?: MenuEntry[] | string;
+  disabled?: boolean;
+  onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+  }
+
+  let { id, label, image, initials, shape, size, width, entries, disabled, onAction }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (width != null) el.setAttribute('width', String(width));
+    else el.removeAttribute('width');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (entries != null) el.setAttribute('entries', typeof entries === 'object' ? JSON.stringify(entries) : String(entries));
+    else el.removeAttribute('entries');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onAction?.(e as CustomEvent);
+    el.addEventListener('cx-action', handler);
+    return () => el.removeEventListener('cx-action', handler);
+  });
+  /** Opens the profile menu dropdown. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the profile menu dropdown. */
+  export function close() { (el as any)?.close(); }
+</script>
+
+<cx-profile-menu
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  image={typeof image === 'object' && image != null ? JSON.stringify(image) : image}
+  initials={typeof initials === 'object' && initials != null ? JSON.stringify(initials) : initials}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  disabled={disabled || undefined}
+/>

package/src/profile-menu.svelte.d.ts

@@ -0,0 +1,24 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { MenuActionDetail, MenuEntry } from './types.js';
+
+interface ProfileMenuProps {
+  id?: string;
+  label: string;
+  image?: string;
+  initials?: string;
+  shape?: 'circle' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  width?: 'auto' | 'sm' | 'md' | 'lg';
+  entries?: MenuEntry[] | string;
+  disabled?: boolean;
+  onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+}
+
+declare const ProfileMenu: Component<ProfileMenuProps, {
+  /** Opens the profile menu dropdown. */
+  open(): void;
+  /** Closes the profile menu dropdown. */
+  close(): void;
+}>;
+export default ProfileMenu;

package/src/progress.svelte

@@ -0,0 +1,33 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-progress> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  label?: string;
+  /** Percentage 0–100. No max prop — the component assumes max=100. */
+  value?: number;
+  valueText?: string;
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  shape?: 'rounded' | 'sharp' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  }
+
+  let { id, label, value, valueText, intent, shape, size }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-progress
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  value={typeof value === 'object' && value != null ? JSON.stringify(value) : value}
+  value-text={typeof valueText === 'object' && valueText != null ? JSON.stringify(valueText) : valueText}
+  intent={typeof intent === 'object' && intent != null ? JSON.stringify(intent) : intent}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+/>

package/src/progress.svelte.d.ts

@@ -0,0 +1,16 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface ProgressProps {
+  id?: string;
+  label?: string;
+  /** Percentage 0–100. No max prop — the component assumes max=100. */
+  value?: number;
+  valueText?: string;
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  shape?: 'rounded' | 'sharp' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+declare const Progress: Component<ProgressProps, {}>;
+export default Progress;

package/src/radio-group.svelte

@@ -0,0 +1,91 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-radio-group> -->
+<script lang="ts">
+  import type { FocusDetail, KeyboardDetail, RadioOption, SelectDetail } from './types.js';
+
+  interface Props {
+  name?: string;
+  legend: string;
+  options?: RadioOption[] | string;
+  shape?: 'round' | 'rounded';
+  orientation?: 'vertical' | 'horizontal';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  selected?: string;
+  disabled?: boolean;
+  required?: boolean;
+  helperText?: string;
+  error?: string;
+  onInput?: (event: CustomEvent) => void;
+  onChange?: (event: CustomEvent<SelectDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { name, legend, options, shape, orientation, size, selected, disabled, required, helperText, error, onInput, onChange, onFocus, onBlur, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (name != null) el.setAttribute('name', String(name));
+    else el.removeAttribute('name');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (options != null) el.setAttribute('options', typeof options === 'object' ? JSON.stringify(options) : String(options));
+    else el.removeAttribute('options');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onInput?.(e as CustomEvent);
+    el.addEventListener('cx-input', handler);
+    return () => el.removeEventListener('cx-input', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onFocus?.(e as CustomEvent);
+    el.addEventListener('cx-focus', handler);
+    return () => el.removeEventListener('cx-focus', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onBlur?.(e as CustomEvent);
+    el.addEventListener('cx-blur', handler);
+    return () => el.removeEventListener('cx-blur', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeydown?.(e as CustomEvent);
+    el.addEventListener('cx-keydown', handler);
+    return () => el.removeEventListener('cx-keydown', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeyup?.(e as CustomEvent);
+    el.addEventListener('cx-keyup', handler);
+    return () => el.removeEventListener('cx-keyup', handler);
+  });
+
+</script>
+
+<cx-radio-group
+  bind:this={el}
+  legend={typeof legend === 'object' && legend != null ? JSON.stringify(legend) : legend}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  orientation={typeof orientation === 'object' && orientation != null ? JSON.stringify(orientation) : orientation}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  selected={typeof selected === 'object' && selected != null ? JSON.stringify(selected) : selected}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  helper-text={typeof helperText === 'object' && helperText != null ? JSON.stringify(helperText) : helperText}
+  error={typeof error === 'object' && error != null ? JSON.stringify(error) : error}
+/>

package/src/radio-group.svelte.d.ts

@@ -0,0 +1,26 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { FocusDetail, KeyboardDetail, RadioOption, SelectDetail } from './types.js';
+
+interface RadioGroupProps {
+  name?: string;
+  legend: string;
+  options?: RadioOption[] | string;
+  shape?: 'round' | 'rounded';
+  orientation?: 'vertical' | 'horizontal';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  selected?: string;
+  disabled?: boolean;
+  required?: boolean;
+  helperText?: string;
+  error?: string;
+  onInput?: (event: CustomEvent) => void;
+  onChange?: (event: CustomEvent<SelectDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const RadioGroup: Component<RadioGroupProps, {}>;
+export default RadioGroup;

package/src/scrollbar.svelte

@@ -0,0 +1,41 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-scrollbar> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  shape?: 'sharp' | 'rounded' | 'pill';
+  track?: 'with-track' | 'floating';
+  axis?: 'vertical' | 'horizontal' | 'both';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  height?: string;
+  label?: string;
+  children?: import('svelte').Snippet;
+  }
+
+  let { id, shape, track, axis, size, height, label, children }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (height != null) el.setAttribute('height', String(height));
+    else el.removeAttribute('height');
+  });
+
+</script>
+
+<cx-scrollbar
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  track={typeof track === 'object' && track != null ? JSON.stringify(track) : track}
+  axis={typeof axis === 'object' && axis != null ? JSON.stringify(axis) : axis}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</cx-scrollbar>

package/src/scrollbar.svelte.d.ts

@@ -0,0 +1,16 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface ScrollbarProps {
+  id?: string;
+  shape?: 'sharp' | 'rounded' | 'pill';
+  track?: 'with-track' | 'floating';
+  axis?: 'vertical' | 'horizontal' | 'both';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  height?: string;
+  label?: string;
+  children?: import('svelte').Snippet;
+}
+
+declare const Scrollbar: Component<ScrollbarProps, {}>;
+export default Scrollbar;

package/src/search-bar.svelte

@@ -0,0 +1,94 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-search-bar> -->
+<script lang="ts">
+  import type { FocusDetail, KeyboardDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  placeholder?: string;
+  label?: string;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  name?: string;
+  value?: string;
+  debounceMs?: number;
+  loading?: boolean;
+  shortcut?: string;
+  expandable?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  controls?: string;
+  shimmer?: boolean;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, placeholder, label, variant, shape, size, name, value, debounceMs, loading, shortcut, expandable, disabled, readonly, controls, shimmer, onFocus, onBlur, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (name != null) el.setAttribute('name', String(name));
+    else el.removeAttribute('name');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (value != null) el.setAttribute('value', String(value));
+    else el.removeAttribute('value');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (loading != null) el.setAttribute('loading', String(loading));
+    else el.removeAttribute('loading');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onFocus?.(e as CustomEvent);
+    el.addEventListener('cx-focus', handler);
+    return () => el.removeEventListener('cx-focus', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onBlur?.(e as CustomEvent);
+    el.addEventListener('cx-blur', handler);
+    return () => el.removeEventListener('cx-blur', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeydown?.(e as CustomEvent);
+    el.addEventListener('cx-keydown', handler);
+    return () => el.removeEventListener('cx-keydown', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeyup?.(e as CustomEvent);
+    el.addEventListener('cx-keyup', handler);
+    return () => el.removeEventListener('cx-keyup', handler);
+  });
+  /** Focuses the search input. */
+  export function focus() { (el as any)?.focus(); }
+  /** Clears the search input value. */
+  export function clear() { (el as any)?.clear(); }
+</script>
+
+<cx-search-bar
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  placeholder={typeof placeholder === 'object' && placeholder != null ? JSON.stringify(placeholder) : placeholder}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  debounce-ms={typeof debounceMs === 'object' && debounceMs != null ? JSON.stringify(debounceMs) : debounceMs}
+  shortcut={typeof shortcut === 'object' && shortcut != null ? JSON.stringify(shortcut) : shortcut}
+  expandable={expandable || undefined}
+  disabled={disabled || undefined}
+  readonly={readonly || undefined}
+  controls={typeof controls === 'object' && controls != null ? JSON.stringify(controls) : controls}
+  shimmer={shimmer || undefined}
+/>

package/src/search-bar.svelte.d.ts

@@ -0,0 +1,34 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { FocusDetail, KeyboardDetail } from './types.js';
+
+interface SearchBarProps {
+  id?: string;
+  placeholder?: string;
+  label?: string;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  name?: string;
+  value?: string;
+  debounceMs?: number;
+  loading?: boolean;
+  shortcut?: string;
+  expandable?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  controls?: string;
+  shimmer?: boolean;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const SearchBar: Component<SearchBarProps, {
+  /** Focuses the search input. */
+  focus(): void;
+  /** Clears the search input value. */
+  clear(): void;
+}>;
+export default SearchBar;