@beeblock/svelar 0.4.0

package/src/ui/CardDescription.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<p class="text-sm text-gray-500 {className}" {...rest}>
+  {#if children}{@render children()}{/if}
+</p>

package/src/ui/CardFooter.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<div class="flex items-center p-6 pt-0 {className}" {...rest}>
+  {#if children}{@render children()}{/if}
+</div>

package/src/ui/CardHeader.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<div class="flex flex-col space-y-1.5 p-6 {className}" {...rest}>
+  {#if children}{@render children()}{/if}
+</div>

package/src/ui/CardTitle.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<h2 class="text-2xl font-semibold leading-none tracking-tight {className}" {...rest}>
+  {#if children}{@render children()}{/if}
+</h2>

package/src/ui/Icon.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Snippet, Component } from 'svelte';
+
+  interface Props {
+    // A Svelte icon component (from lucide-svelte or @tabler/icons-svelte)
+    icon?: Component<any>;
+    // Raw SVG path data (d attribute) for inline icons
+    path?: string;
+    size?: number;
+    strokeWidth?: number;
+    color?: string;
+    class?: string;
+    'aria-label'?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    icon,
+    path,
+    size = 24,
+    strokeWidth = 2,
+    color = 'currentColor',
+    class: className = '',
+    'aria-label': ariaLabel,
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+{#if icon}
+  {@const IconComponent = icon}
+  <IconComponent
+    {size}
+    {strokeWidth}
+    stroke-width={strokeWidth}
+    {color}
+    class={className}
+    aria-label={ariaLabel}
+    aria-hidden={!ariaLabel}
+    {...rest}
+  />
+{:else if path}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={className}
+    role={ariaLabel ? 'img' : 'presentation'}
+    aria-label={ariaLabel}
+    aria-hidden={!ariaLabel}
+    {...rest}
+  >
+    <path d={path} />
+  </svg>
+{:else if children}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={className}
+    role={ariaLabel ? 'img' : 'presentation'}
+    aria-label={ariaLabel}
+    aria-hidden={!ariaLabel}
+    {...rest}
+  >
+    {@render children()}
+  </svg>
+{/if}

package/src/ui/Input.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  interface Props {
+    type?: string;
+    value?: string;
+    placeholder?: string;
+    class?: string;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    oninput?: (e: Event) => void;
+    [key: string]: any;
+  }
+
+  let {
+    type = 'text',
+    value = $bindable(''),
+    placeholder = '',
+    class: className = '',
+    disabled = false,
+    required = false,
+    name,
+    id,
+    oninput,
+    ...rest
+  }: Props = $props();
+</script>
+
+<input
+  {type}
+  bind:value
+  {placeholder}
+  {disabled}
+  {required}
+  {name}
+  {id}
+  {oninput}
+  class="flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {className}"
+  {...rest}
+/>

package/src/ui/Label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    for?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let { for: htmlFor = '', class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<label
+  {htmlFor}
+  class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {className}"
+  {...rest}
+>
+  {#if children}{@render children()}{/if}
+</label>

package/src/ui/Separator.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    [key: string]: any;
+  }
+
+  let { class: className = '', ...rest }: Props = $props();
+</script>
+
+<div class="shrink-0 bg-gray-200 h-px w-full {className}" {...rest} />

package/src/ui/Tabs.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+
+  interface Props {
+    value?: string;
+    onchange?: (value: string) => void;
+    class?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let { value = '', onchange, class: className = '', children, ...rest }: Props = $props();
+
+  setContext('tabs', {
+    get value() { return value; },
+    onchange,
+  });
+</script>
+
+<div class="w-full {className}" {...rest}>
+  {#if children}{@render children()}{/if}
+</div>

package/src/ui/TabsContent.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext } from 'svelte';
+
+  interface Props {
+    value: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let { value, class: className = '', children, ...rest }: Props = $props();
+
+  const tabs = getContext<{ value: string }>('tabs');
+
+  const isActive = $derived(tabs.value === value);
+</script>
+
+{#if isActive}
+  <div
+    role="tabpanel"
+    class="ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 {className}"
+    {...rest}
+  >
+    {#if children}{@render children()}{/if}
+  </div>
+{/if}

package/src/ui/TabsList.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<div
+  class="inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500 {className}"
+  role="tablist"
+  {...rest}
+>
+  {#if children}{@render children()}{/if}
+</div>

package/src/ui/TabsTrigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext } from 'svelte';
+
+  interface Props {
+    value: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let { value, class: className = '', children, ...rest }: Props = $props();
+
+  const tabs = getContext<{ value: string; onchange?: (v: string) => void }>('tabs');
+
+  const isActive = $derived(tabs.value === value);
+</script>
+
+<button
+  type="button"
+  role="tab"
+  aria-selected={isActive}
+  class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 {isActive ? 'bg-white text-gray-900 shadow-sm' : ''} {className}"
+  onclick={() => tabs.onchange?.(value)}
+  {...rest}
+>
+  {#if children}{@render children()}{/if}
+</button>

package/src/ui/Toaster.svelte

@@ -0,0 +1,279 @@
+<script lang="ts">
+  import { getToasts, subscribe, dismiss, pauseToast, resumeToast, type ToastVariant, type ToastState } from './toast.ts';
+  import { onMount } from 'svelte';
+  import type { Component } from 'svelte';
+
+  interface VariantStyle {
+    icon?: Component<any>;
+    iconClass?: string;
+    borderClass?: string;
+    progressClass?: string;
+    containerClass?: string;
+  }
+
+  interface Props {
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    maxVisible?: number;
+    class?: string;
+    // Per-variant customization
+    variants?: Partial<Record<ToastVariant, VariantStyle>>;
+    // Global overrides
+    toastClass?: string;
+    titleClass?: string;
+    descriptionClass?: string;
+    actionClass?: string;
+    closeClass?: string;
+    progressBarClass?: string;
+  }
+
+  let {
+    position = 'bottom-right',
+    maxVisible = 5,
+    class: className = '',
+    variants = {},
+    toastClass = '',
+    titleClass = '',
+    descriptionClass = '',
+    actionClass = '',
+    closeClass = '',
+    progressBarClass = '',
+  }: Props = $props();
+
+  let allToasts = $state(getToasts());
+  const toasts = $derived(allToasts.slice(-maxVisible));
+
+  const isBottom = $derived(position.startsWith('bottom'));
+
+  onMount(() => {
+    return subscribe(() => {
+      allToasts = getToasts();
+    });
+  });
+
+  const positionClasses: Record<string, string> = {
+    'top-right': 'top-0 right-0 pt-4 pr-4',
+    'top-left': 'top-0 left-0 pt-4 pl-4',
+    'bottom-right': 'bottom-0 right-0 pb-4 pr-4',
+    'bottom-left': 'bottom-0 left-0 pb-4 pl-4',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2 pt-4',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 pb-4',
+  };
+
+  // Default icon SVGs (proper Lucide-inspired icons)
+  const defaultIcons: Record<ToastVariant, { svg: string; colors: string }> = {
+    default: { svg: '', colors: '' },
+    success: {
+      // CircleCheck
+      svg: '<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+      colors: 'text-emerald-600 bg-emerald-50 ring-emerald-200',
+    },
+    error: {
+      // CircleX
+      svg: '<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>',
+      colors: 'text-red-600 bg-red-50 ring-red-200',
+    },
+    warning: {
+      // TriangleAlert
+      svg: '<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M12 9v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="17" r="1" fill="currentColor"/>',
+      colors: 'text-amber-600 bg-amber-50 ring-amber-200',
+    },
+    info: {
+      // CircleInfo
+      svg: '<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M12 16v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/>',
+      colors: 'text-blue-600 bg-blue-50 ring-blue-200',
+    },
+  };
+
+  const defaultBorder: Record<ToastVariant, string> = {
+    default: 'border-l-gray-300',
+    success: 'border-l-emerald-500',
+    error: 'border-l-red-500',
+    warning: 'border-l-amber-500',
+    info: 'border-l-blue-500',
+  };
+
+  const defaultProgress: Record<ToastVariant, string> = {
+    default: 'bg-gray-400',
+    success: 'bg-emerald-400',
+    error: 'bg-red-400',
+    warning: 'bg-amber-400',
+    info: 'bg-blue-400',
+  };
+
+  function getIconColors(variant: ToastVariant): string {
+    return variants[variant]?.iconClass ?? defaultIcons[variant].colors;
+  }
+
+  function getBorderClass(variant: ToastVariant): string {
+    return variants[variant]?.borderClass ?? defaultBorder[variant];
+  }
+
+  function getProgressClass(variant: ToastVariant): string {
+    return variants[variant]?.progressClass ?? defaultProgress[variant];
+  }
+
+  function getContainerClass(variant: ToastVariant): string {
+    return variants[variant]?.containerClass ?? '';
+  }
+
+  function hasCustomIcon(variant: ToastVariant): boolean {
+    return !!variants[variant]?.icon;
+  }
+
+  function hasDefaultIcon(variant: ToastVariant): boolean {
+    return !!defaultIcons[variant].svg;
+  }
+
+  function animClass(state: ToastState): string {
+    if (state === 'entering') {
+      return isBottom ? 'toast-enter-bottom' : 'toast-enter-top';
+    }
+    if (state === 'exiting') return 'toast-exit';
+    return 'toast-visible';
+  }
+</script>
+
+{#if toasts.length > 0}
+  <div
+    class="fixed z-[9999] flex w-[400px] max-w-[calc(100vw-2rem)] pointer-events-none {isBottom ? 'flex-col-reverse' : 'flex-col'} gap-2 {positionClasses[position]} {className}"
+    role="region"
+    aria-label="Notifications"
+    aria-live="polite"
+  >
+    {#each toasts as item (item.id)}
+      {@const icon = defaultIcons[item.variant]}
+      {@const CustomIcon = variants[item.variant]?.icon}
+      <div
+        class="pointer-events-auto bg-white border border-gray-200 border-l-4 {getBorderClass(item.variant)} rounded-lg shadow-lg {animClass(item.state)} group {toastClass} {getContainerClass(item.variant)}"
+        role="alert"
+        onmouseenter={() => pauseToast(item.id)}
+        onmouseleave={() => resumeToast(item.id)}
+      >
+        <div class="flex items-start gap-3 p-4">
+          <!-- Icon: custom component or default SVG -->
+          {#if hasCustomIcon(item.variant) && CustomIcon}
+            <div class="flex-shrink-0 w-7 h-7 rounded-full ring-1 flex items-center justify-center {getIconColors(item.variant)}">
+              <CustomIcon size={16} />
+            </div>
+          {:else if hasDefaultIcon(item.variant)}
+            <div class="flex-shrink-0 w-7 h-7 rounded-full ring-1 flex items-center justify-center {getIconColors(item.variant)}">
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none">
+                {@html icon.svg}
+              </svg>
+            </div>
+          {/if}
+
+          <!-- Content -->
+          <div class="flex-1 min-w-0 pt-0.5">
+            <p class="text-sm font-semibold text-gray-900 leading-snug {titleClass}">{item.title}</p>
+            {#if item.description}
+              <p class="text-[13px] text-gray-500 mt-1 leading-relaxed {descriptionClass}">{item.description}</p>
+            {/if}
+            {#if item.action}
+              <button
+                class="text-[13px] font-semibold mt-2 text-brand hover:underline focus:outline-none {actionClass}"
+                onclick={() => { item.action?.onClick(); dismiss(item.id); }}
+              >
+                {item.action.label}
+              </button>
+            {/if}
+          </div>
+
+          <!-- Close button -->
+          {#if item.dismissible}
+            <button
+              class="flex-shrink-0 p-1 -m-1 rounded-md text-gray-300 opacity-0 group-hover:opacity-100 hover:text-gray-500 hover:bg-gray-100 transition-all duration-150 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-300 {closeClass}"
+              onclick={() => dismiss(item.id)}
+              aria-label="Dismiss notification"
+            >
+              <svg class="w-4 h-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <path d="M4 4l8 8M12 4l-8 8" />
+              </svg>
+            </button>
+          {/if}
+        </div>
+
+        <!-- Progress bar for timed toasts -->
+        {#if item.duration > 0 && item.state !== 'exiting'}
+          <div class="h-0.5 bg-gray-100 rounded-b-lg overflow-hidden">
+            <div
+              class="h-full rounded-b-lg {getProgressClass(item.variant)} {progressBarClass} toast-progress"
+              style="animation-duration: {item.duration}ms; {item.pausedAt ? 'animation-play-state: paused;' : ''}"
+            ></div>
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  /* ── Enter from bottom ─────────────────────────────── */
+  .toast-enter-bottom {
+    animation: slideInBottom 300ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+  }
+
+  @keyframes slideInBottom {
+    from {
+      opacity: 0;
+      transform: translateY(100%) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  /* ── Enter from top ────────────────────────────────── */
+  .toast-enter-top {
+    animation: slideInTop 300ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+  }
+
+  @keyframes slideInTop {
+    from {
+      opacity: 0;
+      transform: translateY(-100%) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  /* ── Visible (idle) ────────────────────────────────── */
+  .toast-visible {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  /* ── Exit ──────────────────────────────────────────── */
+  .toast-exit {
+    animation: slideOut 200ms cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
+  }
+
+  @keyframes slideOut {
+    from {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(100%) scale(0.95);
+    }
+  }
+
+  /* ── Progress bar countdown ────────────────────────── */
+  .toast-progress {
+    animation: progressShrink linear forwards;
+    transform-origin: left;
+  }
+
+  @keyframes progressShrink {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
+  }
+</style>

package/src/ui/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Svelar UI Components
+ *
+ * A minimal, composable component library built on Svelte 5 runes.
+ * Uses CSS custom properties (--color-brand, --color-brand-dark) for theming.
+ *
+ * @module svelar/ui
+ */
+
+export { default as Button } from './Button.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Label } from './Label.svelte';
+export { default as Card } from './Card.svelte';
+export { default as CardHeader } from './CardHeader.svelte';
+export { default as CardTitle } from './CardTitle.svelte';
+export { default as CardDescription } from './CardDescription.svelte';
+export { default as CardContent } from './CardContent.svelte';
+export { default as CardFooter } from './CardFooter.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Separator } from './Separator.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as AvatarImage } from './AvatarImage.svelte';
+export { default as AvatarFallback } from './AvatarFallback.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabsList } from './TabsList.svelte';
+export { default as TabsTrigger } from './TabsTrigger.svelte';
+export { default as TabsContent } from './TabsContent.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export { toast, subscribe as toastSubscribe, getToasts, dismiss, pauseToast, resumeToast, type ToastItem, type ToastVariant, type ToastOptions, type ToastState } from './toast.ts';