urpanels-ui-pack 0.0.2

package/dist/PageLayout/PageContent.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.svelte';
+
+  interface Props {
+    children: Snippet;
+    isLoading?: boolean;
+  }
+
+  let { children, isLoading = false }: Props = $props();
+</script>
+
+<div class="px-4 sm:px-6 pb-6">
+  {#if isLoading}
+    <LoadingSpinner />
+  {:else}
+    {@render children()}
+  {/if}
+</div>

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

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

package/dist/PageLayout/PageHeader.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    actions?: Snippet;
+    search?: Snippet;
+  }
+
+  let { title, actions, search }: Props = $props();
+</script>
+
+<div class="sticky top-0 z-20 bg-white px-4 sm:px-6 py-3 mb-4">
+  <div class="flex items-center justify-between">
+    <h1 class="text-2xl font-bold">{title}</h1>
+    
+    {#if actions}
+      <div class="flex items-center gap-4">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+
+  {#if search}
+    <div class="mt-3">
+      {@render search()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    actions?: Snippet;
+    search?: Snippet;
+}
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/PageLayout/SearchBar.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    placeholder?: string;
+    value?: string;
+    oninput?: (e: Event) => void;
+  }
+
+  let { placeholder = "Ara...", value = $bindable(""), oninput }: Props = $props();
+</script>
+
+<label class="relative block">
+  <span class="sr-only">Ara</span>
+  <input
+    type="search"
+    {placeholder}
+    class="w-full rounded-full border border-gray-200 bg-gray-50 px-4 py-2 pr-10 text-sm placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:ring-1 focus:ring-blue-200"
+    bind:value
+    {oninput}
+  />
+  <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M12.9 14.32a8 8 0 111.414-1.414l3.386 3.386a1 1 0 01-1.414 1.414l-3.386-3.386zM8 14a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd" />
+    </svg>
+  </div>
+</label>

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

@@ -0,0 +1,8 @@
+interface Props {
+    placeholder?: string;
+    value?: string;
+    oninput?: (e: Event) => void;
+}
+declare const SearchBar: import("svelte").Component<Props, {}, "value">;
+type SearchBar = ReturnType<typeof SearchBar>;
+export default SearchBar;

package/dist/PageLayout/ViewToggle.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { t } from '../utils/translations.svelte';
+
+  interface Props {
+    mode?: 'card-table' | 'daily-weekly';
+    isSecondOption?: boolean;
+    onToggle?: (isSecondOption: boolean) => void;
+  }
+
+  let { mode = 'card-table', isSecondOption = $bindable(false), onToggle }: Props = $props();
+
+  const labels = $derived({
+    'card-table': { first: t('common.cardView'), second: t('common.tableView') },
+    'daily-weekly': { first: t('common.dailyView'), second: t('common.weeklyView') }
+  });
+
+  const icons = {
+    'card-table': {
+      first: 'M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z',
+      second: 'M4 6h16M4 10h16M4 14h16M4 18h16'
+    },
+    'daily-weekly': {
+      first: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
+      second: 'M4 6h16M4 10h16M4 14h16M4 18h16'
+    }
+  } as const;
+
+  function handleToggle(value: boolean) {
+    isSecondOption = value;
+    onToggle?.(value);
+  }
+</script>
+
+<div class="inline-flex items-center bg-gray-100 rounded-xl p-1.5">
+  <button
+    onclick={() => handleToggle(false)}
+    class="flex items-center gap-2 px-4 md:px-3 py-2.5 md:py-1.5 rounded-lg text-base md:text-sm font-medium transition-all {!isSecondOption ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900'}"
+  >
+    <svg class="w-6 h-6 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[mode].first} />
+    </svg>
+    <span class="hidden md:inline">{labels[mode].first}</span>
+  </button>
+  <button
+    onclick={() => handleToggle(true)}
+    class="flex items-center gap-2 px-4 md:px-3 py-2.5 md:py-1.5 rounded-lg text-base md:text-sm font-medium transition-all {isSecondOption ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900'}"
+  >
+    <svg class="w-6 h-6 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[mode].second} />
+    </svg>
+    <span class="hidden md:inline">{labels[mode].second}</span>
+  </button>
+</div>

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

@@ -0,0 +1,8 @@
+interface Props {
+    mode?: 'card-table' | 'daily-weekly';
+    isSecondOption?: boolean;
+    onToggle?: (isSecondOption: boolean) => void;
+}
+declare const ViewToggle: import("svelte").Component<Props, {}, "isSecondOption">;
+type ViewToggle = ReturnType<typeof ViewToggle>;
+export default ViewToggle;

package/dist/PageLayout/index.d.ts

@@ -0,0 +1,5 @@
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as PageContent } from './PageContent.svelte';
+export { default as SearchBar } from './SearchBar.svelte';
+export { default as ViewToggle } from './ViewToggle.svelte';
+export { default as ActionButton } from './ActionButton.svelte';

package/dist/PageLayout/index.js

@@ -0,0 +1,5 @@
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as PageContent } from './PageContent.svelte';
+export { default as SearchBar } from './SearchBar.svelte';
+export { default as ViewToggle } from './ViewToggle.svelte';
+export { default as ActionButton } from './ActionButton.svelte';

package/dist/Pagination/Pagination.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { PaginationProps } from './Pagination.types';
+  import { t } from '../utils/translations.svelte';
+
+  let {
+    currentPage,
+    totalPages,
+    pageSize,
+    totalItems,
+    itemName = '',
+    searchTerm = '',
+    onPageChange,
+    showInfo = true,
+    showPageNumbers = true
+  }: PaginationProps = $props();
+
+  const startItem = $derived((currentPage - 1) * pageSize + 1);
+  const endItem = $derived(Math.min(currentPage * pageSize, totalItems));
+
+  function handlePageChange(page: number) {
+    if (page >= 1 && page <= totalPages) {
+      onPageChange(page);
+    }
+  }
+
+  function shouldShowPageNumber(pageNum: number): boolean {
+    return (
+      totalPages <= 7 ||
+      pageNum === 1 ||
+      pageNum === totalPages ||
+      (pageNum >= currentPage - 1 && pageNum <= currentPage + 1)
+    );
+  }
+
+  function shouldShowEllipsis(pageNum: number): boolean {
+    return pageNum === currentPage - 2 || pageNum === currentPage + 2;
+  }
+</script>
+
+{#if totalPages > 1}
+  <div class="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4 border-t pt-4">
+    {#if showInfo}
+      <div class="text-sm text-gray-600">
+        {t('table.showing')}: <span class="font-semibold">{startItem}</span> - 
+        <span class="font-semibold">{endItem}</span> / 
+        <span class="font-semibold">{totalItems}</span> {itemName}
+        {#if searchTerm && searchTerm.trim()}
+          <span class="text-blue-600 ml-2">({t('common.search')}: "{searchTerm}")</span>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="flex items-center gap-2">
+      <button
+        onclick={() => handlePageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        class="px-3 py-1 rounded border {currentPage === 1 
+          ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200' 
+          : 'bg-white text-blue-600 border-blue-300 hover:bg-blue-50 cursor-pointer'}"
+      >
+        ‹ {t('common.previous')}
+      </button>
+
+      {#if showPageNumbers}
+        {#each Array.from({ length: totalPages }, (_, i) => i + 1) as pageNum}
+          {#if shouldShowPageNumber(pageNum)}
+            <button
+              onclick={() => handlePageChange(pageNum)}
+              class="px-3 py-1 rounded border {currentPage === pageNum 
+                ? 'bg-blue-600 text-white border-blue-600 font-semibold' 
+                : 'bg-white text-blue-600 border-blue-300 hover:bg-blue-50 cursor-pointer'}"
+            >
+              {pageNum}
+            </button>
+          {:else if shouldShowEllipsis(pageNum)}
+            <span class="text-gray-500">...</span>
+          {/if}
+        {/each}
+      {:else}
+        <span class="px-3 py-1 text-sm text-gray-700">
+          {t('common.page')} {currentPage} / {totalPages}
+        </span>
+      {/if}
+
+      <button
+        onclick={() => handlePageChange(currentPage + 1)}
+        disabled={currentPage >= totalPages}
+        class="px-3 py-1 rounded border {currentPage >= totalPages 
+          ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200' 
+          : 'bg-white text-blue-600 border-blue-300 hover:bg-blue-50 cursor-pointer'}"
+      >
+        {t('common.next')} ›
+      </button>
+    </div>
+  </div>
+{/if}

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

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

package/dist/Pagination/Pagination.types.d.ts

@@ -0,0 +1,11 @@
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    pageSize: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+    itemName?: string;
+    searchTerm?: string;
+    showInfo?: boolean;
+    showPageNumbers?: boolean;
+}

package/dist/Pagination/Pagination.types.js

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

package/dist/Pagination/index.d.ts

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

package/dist/Pagination/index.js

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