urpanels-ui-pack 0.0.2

package/README.md

@@ -0,0 +1,37 @@
+# urpanels-ui-pack
+
+Svelte 5 tabanlı urPanels projeleri için tekrar kullanılabilir UI bileşenleri. İçerik şu an PageLayout parçaları, Pagination, LoadingSpinner, InfoCard ve çeviri helper içeriyor.
+
+## Kurulum
+
+```bash
+npm install urpanels-ui-pack
+```
+
+Peer dependency olarak Svelte 5 gerekir.
+
+## Kullanım
+
+```svelte
+<script lang="ts">
+  import { PageHeader, PageContent, SearchBar, ViewToggle, ActionButton, Pagination, LoadingSpinner, InfoCard } from 'urpanels-ui-pack';
+</script>
+```
+
+## Geliştirme
+
+- Tip kontrolü: `npm run check`
+- Paketleme: `npm run build` (svelte-package ile `dist` altına paketler ve tipleri üretir)
+
+## İçerik
+
+- PageLayout: PageHeader, PageContent, SearchBar, ViewToggle, ActionButton
+- Pagination
+- LoadingSpinner
+- InfoCard (+ tipleri)
+- utils/translations.svelte.ts (global window üstünden çeviri helper)
+
+## Notlar
+
+- Yayın öncesi `npm run build` `dist` altında bundle ve `.d.ts` üretir.
+- `package.json` `exports` alanı Svelte + ESM + CJS girişlerini ve tipleri işaret eder.

package/dist/Button/Button.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  /**
+   * Button Component - UI'dan bağımsız, loading ve disabled state yöneten buton
+   * 
+   * @example
+   * <Button 
+   *   loading={isLoading} 
+   *   disabled={isDisabled}
+   *   onclick={handleClick}
+   *   class="bg-blue-500 text-white px-4 py-2 rounded"
+   * >
+   *   Kaydet
+   * </Button>
+   */
+  
+  let {
+    onclick = undefined,
+    disabled = false,
+    loading = false,
+    type = 'button',
+    class: className = '',
+    loadingText = undefined,
+    children,
+    ...rest
+  }: {
+    onclick?: (e: MouseEvent) => void | Promise<void>;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    class?: string;
+    loadingText?: string;
+    children?: any;
+    [key: string]: any;
+  } = $props();
+
+  // Loading durumunda otomatik disable
+  const isDisabled = $derived(disabled || loading);
+</script>
+
+<button
+  {type}
+  disabled={isDisabled}
+  onclick={onclick}
+  class={className}
+  {...rest}
+>
+  {#if loading}
+    <span class="flex items-center justify-center gap-2">
+      <!-- Spinner SVG -->
+      <svg 
+        class="animate-spin h-4 w-4" 
+        xmlns="http://www.w3.org/2000/svg" 
+        fill="none" 
+        viewBox="0 0 24 24"
+      >
+        <circle 
+          class="opacity-25" 
+          cx="12" 
+          cy="12" 
+          r="10" 
+          stroke="currentColor" 
+          stroke-width="4"
+        ></circle>
+        <path 
+          class="opacity-75" 
+          fill="currentColor" 
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+      <!-- Loading metni veya normal children -->
+      <span>{loadingText || ''}{#if !loadingText}{@render children()}{/if}</span>
+    </span>
+  {:else}
+    {@render children()}
+  {/if}
+</button>

package/dist/Button/Button.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    onclick?: (e: MouseEvent) => void | Promise<void>;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    class?: string;
+    loadingText?: string;
+    children?: any;
+    [key: string]: any;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Button/index.d.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

package/dist/Button/index.js

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

package/dist/InfoCard/InfoCard.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+  import type { InfoCardProps } from './InfoCard.types';
+  import { t } from '../utils/translations.svelte';
+  
+  let {
+    title,
+    id,
+    variant = 'compact',
+    actionLayout = 'icons',
+    hover = false,
+    className = '',
+    subtitle,
+    subtitleIcon,
+    linkedStatus,
+    fields = [],
+    badges = [],
+    relatedItems,
+    note,
+    onView,
+    onEdit,
+    onDelete
+  }: InfoCardProps = $props();
+  
+  const isCompact = $derived(variant === 'compact');
+  const hasActions = $derived(onView || onEdit || onDelete);
+  
+  function truncateText(text: string, maxLength: number): string {
+    if (!text) return '';
+    return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+  }
+  
+  function getBadgeColorClasses(color: string): string {
+    const colorMap: Record<string, string> = {
+      blue: 'bg-blue-100 text-blue-800 border-blue-200',
+      purple: 'bg-purple-100 text-purple-800 border-purple-200',
+      orange: 'bg-orange-100 text-orange-800 border-orange-200',
+      red: 'bg-red-100 text-red-800 border-red-200',
+      green: 'bg-green-100 text-green-800 border-green-200',
+      gray: 'bg-gray-100 text-gray-800 border-gray-200'
+    } as const;
+    return colorMap[color] || colorMap.gray;
+  }
+</script>
+
+<div 
+  class="bg-white rounded-lg shadow {isCompact ? 'p-3' : 'p-4'} flex flex-col gap-2 {hover ? 'hover:shadow-md transition-shadow' : ''} {className} relative"
+>
+  {#if linkedStatus?.isLinked}
+    <div class="absolute -top-1 -right-1 bg-indigo-500 text-white rounded-full w-5 h-5 flex items-center justify-center shadow-sm ring-2 ring-white" title="Kullanıcı hesabına bağlı">
+      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+      </svg>
+    </div>
+  {/if}
+  
+  <div class="flex items-start justify-between gap-2">
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2">
+        <h3 class="font-bold {isCompact ? 'text-sm' : 'text-lg'} truncate">
+          {title}
+        </h3>
+        {#if linkedStatus}
+          {#if !linkedStatus.isLinked && linkedStatus.hasEmail && linkedStatus.onLink}
+            <button
+              onclick={linkedStatus.onLink}
+              class="text-orange-600 {isCompact ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-1'} bg-orange-50 hover:bg-orange-100 rounded border border-orange-200 transition-colors"
+            >
+              {linkedStatus.linkText || t('common.link')}
+            </button>
+          {/if}
+        {/if}
+      </div>
+      
+      {#if subtitle}
+        <div class="{isCompact ? 'text-[10px]' : 'text-xs'} text-gray-600 mt-0.5 truncate">
+          {#if subtitleIcon}<span class="mr-1">{subtitleIcon}</span>{/if}
+          {subtitle}
+        </div>
+      {/if}
+    </div>
+    
+    {#if actionLayout === 'icons' && hasActions}
+      <div class="flex items-center gap-1 flex-shrink-0">
+        {#if onView}
+          <button
+            onclick={onView}
+            class="p-1.5 rounded hover:bg-green-50 text-green-600 transition-colors"
+            aria-label={t('common.view')}
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+            </svg>
+          </button>
+        {/if}
+        {#if onEdit}
+          <button
+            onclick={onEdit}
+            class="p-1.5 rounded hover:bg-blue-50 text-blue-600 transition-colors"
+            aria-label={t('common.edit')}
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+          </button>
+        {/if}
+        {#if onDelete}
+          <button
+            onclick={onDelete}
+            class="p-1.5 rounded hover:bg-red-50 text-red-600 transition-colors"
+            aria-label={t('common.delete')}
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        {/if}
+      </div>
+    {/if}
+  </div>
+  
+  {#if fields && fields.length > 0}
+    <div class="grid grid-cols-2 gap-2 {isCompact ? 'text-xs' : 'text-sm'}">
+      {#each fields as field}
+        {#if field.condition !== false}
+          <div class="{field.span === 2 ? 'col-span-2' : ''} truncate">
+            <span class="font-semibold text-gray-700">{field.label}:</span>
+            {#if field.icon}<span class="mx-1">{field.icon}</span>{/if}
+            <span class="text-gray-900">{field.value || '-'}</span>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+  
+  {#if badges && badges.length > 0}
+    {#each badges as badgeGroup}
+      {#if badgeGroup.items && badgeGroup.items.length > 0}
+        {#snippet badgeSection()}
+          {@const displayItems = badgeGroup.maxDisplay ? badgeGroup.items.slice(0, badgeGroup.maxDisplay) : badgeGroup.items}
+          {@const remaining = badgeGroup.maxDisplay && badgeGroup.items.length > badgeGroup.maxDisplay ? badgeGroup.items.length - badgeGroup.maxDisplay : 0}
+          
+          <div class="mt-1">
+            {#if badgeGroup.label}
+              <div class="{isCompact ? 'text-[10px]' : 'text-xs'} font-semibold text-gray-600 mb-1">
+                {#if badgeGroup.icon}<span class="mr-1">{badgeGroup.icon}</span>{/if}
+                {badgeGroup.label}
+              </div>
+            {/if}
+            <div class="flex flex-wrap gap-1">
+              {#each displayItems as item}
+                <span class="{isCompact ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-1'} rounded border {getBadgeColorClasses(badgeGroup.color)}">
+                  {item}
+                </span>
+              {/each}
+              
+              {#if remaining > 0}
+                <span class="{isCompact ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-1'} rounded border {getBadgeColorClasses(badgeGroup.color)}">
+                  +{remaining}
+                </span>
+              {/if}
+            </div>
+          </div>
+        {/snippet}
+        
+        {@render badgeSection()}
+      {/if}
+    {/each}
+  {/if}
+  
+  {#if relatedItems && relatedItems.items && relatedItems.items.length > 0}
+    <div class="mt-2 border border-gray-200 rounded p-2 bg-gray-50">
+      <div class="{isCompact ? 'text-xs' : 'text-sm'} font-semibold text-gray-700 mb-1.5">
+        {relatedItems.title}
+      </div>
+      <div class="space-y-1">
+        {#each relatedItems.items as item}
+          <div class="{isCompact ? 'text-[10px]' : 'text-xs'} flex items-center justify-between">
+            <span class="text-gray-900">{item.primary}</span>
+            <div class="flex items-center gap-1">
+              {#if item.secondary}
+                <span class="text-gray-600">{item.secondary}</span>
+              {/if}
+              {#if item.badge}
+                <span class="px-1.5 py-0.5 bg-blue-100 text-blue-800 rounded text-[10px]">
+                  {item.badge}
+                </span>
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {:else if relatedItems && relatedItems.emptyText}
+    <div class="mt-2 {isCompact ? 'text-xs' : 'text-sm'} text-gray-500 italic">
+      {relatedItems.emptyText}
+    </div>
+  {/if}
+  
+  {#if note && note.text}
+    <div class="mt-1 {isCompact ? 'text-[10px]' : 'text-xs'} text-gray-600">
+      {#if note.icon}<span class="mr-1">{note.icon}</span>{/if}
+      {note.maxLength ? truncateText(note.text, note.maxLength) : note.text}
+    </div>
+  {/if}
+  
+  {#if actionLayout === 'buttons' && hasActions}
+    <div class="mt-3 flex justify-end gap-2 pt-2 border-t border-gray-100">
+      {#if onEdit}
+        <button
+          onclick={onEdit}
+          class="{isCompact ? 'px-2 py-1 text-xs' : 'px-3 py-1.5 text-sm'} bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors font-medium"
+        >
+          {t('common.edit')}
+        </button>
+      {/if}
+      {#if onDelete}
+        <button
+          onclick={onDelete}
+          class="{isCompact ? 'px-2 py-1 text-xs' : 'px-3 py-1.5 text-sm'} bg-red-500 text-white rounded hover:bg-red-600 transition-colors font-medium"
+        >
+          {t('common.delete')}
+        </button>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/InfoCard/InfoCard.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InfoCardProps } from './InfoCard.types';
+declare const InfoCard: import("svelte").Component<InfoCardProps, {}, "">;
+type InfoCard = ReturnType<typeof InfoCard>;
+export default InfoCard;

package/dist/InfoCard/InfoCard.types.d.ts

@@ -0,0 +1,56 @@
+export type InfoCardVariant = 'default' | 'compact';
+export type ActionLayout = 'icons' | 'buttons';
+export type BadgeColor = 'blue' | 'purple' | 'orange' | 'red' | 'green' | 'gray';
+export interface InfoCardField {
+    label: string;
+    value: string | number;
+    icon?: string;
+    condition?: boolean;
+    span?: 1 | 2;
+}
+export interface InfoCardBadge {
+    items: string[];
+    color: BadgeColor;
+    icon?: string;
+    maxDisplay?: number;
+    label?: string;
+}
+export interface InfoCardRelatedItem {
+    primary: string;
+    secondary?: string;
+    badge?: string;
+}
+export interface InfoCardRelatedSection {
+    title: string;
+    items: InfoCardRelatedItem[];
+    emptyText?: string;
+}
+export interface InfoCardLinkedStatus {
+    isLinked: boolean;
+    hasEmail: boolean;
+    onLink?: () => void;
+    linkText?: string;
+}
+export interface InfoCardNote {
+    text: string;
+    icon?: string;
+    maxLength?: number;
+}
+export interface InfoCardProps {
+    title: string;
+    id: string;
+    variant?: InfoCardVariant;
+    actionLayout?: ActionLayout;
+    hover?: boolean;
+    className?: string;
+    subtitle?: string;
+    subtitleIcon?: string;
+    linkedStatus?: InfoCardLinkedStatus;
+    fields?: InfoCardField[];
+    badges?: InfoCardBadge[];
+    relatedItems?: InfoCardRelatedSection;
+    note?: InfoCardNote;
+    onView?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+}

package/dist/InfoCard/InfoCard.types.js

@@ -0,0 +1 @@
+export {};

package/dist/InfoCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InfoCard } from './InfoCard.svelte';
+export type * from './InfoCard.types';

package/dist/InfoCard/index.js

@@ -0,0 +1 @@
+export { default as InfoCard } from './InfoCard.svelte';

package/dist/LoadingSpinner/LoadingSpinner.svelte

@@ -0,0 +1,3 @@
+<div class="flex items-center justify-center py-12">
+  <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+</div>

package/dist/LoadingSpinner/LoadingSpinner.svelte.d.ts

@@ -0,0 +1,26 @@
+export default LoadingSpinner;
+type LoadingSpinner = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const LoadingSpinner: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/LoadingSpinner/index.d.ts

@@ -0,0 +1 @@
+export { default as LoadingSpinner } from './LoadingSpinner.svelte';

package/dist/LoadingSpinner/index.js

@@ -0,0 +1 @@
+export { default as LoadingSpinner } from './LoadingSpinner.svelte';

package/dist/Modal/Modal.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open: boolean;
+    title: string;
+    description?: string;
+    icon?: string;
+    color?: 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'gray' | 'emerald' | 'teal';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    showClose?: boolean;
+    onClose?: () => void;
+    children?: Snippet;
+    actions?: Snippet;
+  }
+
+  let {
+    open,
+    title,
+    description = '',
+    icon = '',
+    color = 'blue',
+    size = 'md',
+    showClose = true,
+    onClose,
+    children,
+    actions
+  }: Props = $props();
+
+  // Modal açıkken body scroll'u kapat
+  $effect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    
+    // Cleanup - modal unmount olduğunda
+    return () => {
+      document.body.style.overflow = '';
+    };
+  });
+
+  const panelSizes = {
+    sm: 'max-w-md',
+    md: 'max-w-2xl',
+    lg: 'max-w-3xl',
+    xl: 'max-w-4xl',
+    '2xl': 'max-w-5xl',
+    '3xl': 'max-w-6xl',
+    full: 'max-w-[95vw]'
+  } as const;
+
+  // Gradient header renkleri (kurs template gibi)
+  const gradientColors: Record<string, string> = {
+    blue: 'from-blue-600 to-indigo-600',
+    green: 'from-green-600 to-emerald-600',
+    emerald: 'from-emerald-600 to-teal-600',
+    teal: 'from-teal-600 to-cyan-600',
+    amber: 'from-amber-500 to-orange-500',
+    red: 'from-red-600 to-rose-600',
+    purple: 'from-purple-600 to-indigo-600',
+    gray: 'from-gray-600 to-slate-600'
+  };
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_interactive_supports_focus -->
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+    role="dialog"
+    aria-modal="true"
+    onclick={(e) => e.target === e.currentTarget && onClose?.()}
+  >
+    <div
+      class={`w-full ${panelSizes[size]} mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]`}
+    >
+      <!-- Gradient Header (kurs template gibi) -->
+      <div class={`bg-gradient-to-r ${gradientColors[color]} px-6 py-5 flex items-center justify-between shrink-0`}>
+        <div class="flex items-center gap-3">
+          {#if icon}
+            <div class="bg-white/20 backdrop-blur-sm p-2.5 rounded-xl">
+              <span class="text-xl text-white">{icon}</span>
+            </div>
+          {/if}
+          <div>
+            <h2 class="text-xl font-bold text-white">{title}</h2>
+            {#if description}
+              <p class="text-sm text-white/80 mt-0.5">{description}</p>
+            {/if}
+          </div>
+        </div>
+        {#if showClose}
+          <button
+            class="text-white/80 hover:text-white hover:bg-white/20 p-2 rounded-lg transition-all"
+            aria-label="Kapat"
+            onclick={() => onClose?.()}
+          >
+            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+          </button>
+        {/if}
+      </div>
+
+      <!-- Scrollable Content -->
+      <div class="flex-1 overflow-y-auto p-6">
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+
+      <!-- Footer Actions -->
+      {#if actions}
+        <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 shrink-0">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/Modal/Modal.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open: boolean;
+    title: string;
+    description?: string;
+    icon?: string;
+    color?: 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'gray';
+    size?: 'sm' | 'md' | 'lg';
+    showClose?: boolean;
+    onClose?: () => void;
+    actions?: Snippet;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Modal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Modal = InstanceType<typeof Modal>;
+export default Modal;

package/dist/Modal/index.d.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.svelte';

package/dist/Modal/index.js

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.svelte';

package/dist/PageLayout/ActionButton.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  interface Props {
+    label: string;
+    onclick: () => void;
+    color?: 'green' | 'blue' | 'red' | 'gray';
+  }
+
+  let { label, onclick, color = 'green' }: Props = $props();
+
+  const colorClasses = {
+    green: 'bg-green-500 hover:bg-green-600',
+    blue: 'bg-blue-500 hover:bg-blue-600',
+    red: 'bg-red-500 hover:bg-red-600',
+    gray: 'bg-gray-500 hover:bg-gray-600'
+  } as const;
+</script>
+
+<button 
+  class="p-2 md:px-4 md:py-2 {colorClasses[color]} text-white rounded-lg transition-colors flex items-center justify-center gap-2"
+  {onclick}
+>
+  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+  </svg>
+  <span class="hidden md:inline text-sm font-semibold">{label}</span>
+</button>

package/dist/PageLayout/ActionButton.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    label: string;
+    onclick: () => void;
+    color?: 'green' | 'blue' | 'red' | 'gray';
+}
+declare const ActionButton: import("svelte").Component<Props, {}, "">;
+type ActionButton = ReturnType<typeof ActionButton>;
+export default ActionButton;