urpanels-ui-pack 0.0.11 → 0.0.12

package/dist/InfoCard/InfoCard.svelte

@@ -45,7 +45,7 @@
 </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"
+  class="bg-white rounded-lg shadow {isCompact ? 'p-3' : 'p-4'} h-full flex flex-col gap-2 {hover ? 'hover:shadow-md transition-shadow' : ''} {className} relative"
   data-component-name="InfoCard"
   data-card-id={id}
 >
@@ -230,13 +230,13 @@
   {/if}
 
   {#if footerActions}
-    <div class="mt-2 flex flex-wrap gap-2">
+    <div class="mt-auto w-full pt-2 flex flex-wrap gap-2">
       {@render footerActions()}
     </div>
   {/if}
   
   {#if actionLayout === 'buttons' && hasActions}
-    <div class="mt-3 flex justify-end gap-2 pt-2 border-t border-gray-100">
+    <div class="mt-auto flex justify-end gap-2 pt-2 border-t border-gray-100">
       {#if onEdit}
         <button
           onclick={onEdit}

package/dist/Pagination/Pagination.svelte

@@ -5,21 +5,53 @@
   let {
     currentPage,
     totalPages,
-    pageSize,
-    totalItems,
+    pageSize = 20,
+    totalItems = 0,
     itemName = '',
     searchTerm = '',
     onPageChange,
     showInfo = true,
-    showPageNumbers = true
+    showPageNumbers = true,
+    isLoading = false,
+    loadingPage = null,
+    loadingDirection = null,
+    disableDuringLoading = true
   }: PaginationProps = $props();
 
-  const startItem = $derived((currentPage - 1) * pageSize + 1);
-  const endItem = $derived(Math.min(currentPage * pageSize, totalItems));
+  let internalLoading = $state(false);
+  let internalLoadingPage: number | null = $state(null);
+  let internalLoadingDirection: 'prev' | 'next' | null = $state(null);
 
-  function handlePageChange(page: number) {
-    if (page >= 1 && page <= totalPages) {
-      onPageChange(page);
+  const isBusy = $derived(isLoading || internalLoading);
+  const effectiveLoadingPage = $derived(loadingPage ?? internalLoadingPage);
+  const effectiveLoadingDirection = $derived(loadingDirection ?? internalLoadingDirection);
+
+  const startItem = $derived(totalItems > 0 ? (currentPage - 1) * pageSize + 1 : 0);
+  const endItem = $derived(totalItems > 0 ? Math.min(currentPage * pageSize, totalItems) : 0);
+
+  async function handlePageChange(page: number, direction: 'prev' | 'next' | null = null) {
+    if (page < 1 || page > totalPages || page === currentPage) {
+      return;
+    }
+
+    if (disableDuringLoading && isBusy) {
+      return;
+    }
+
+    if (!isLoading) {
+      internalLoading = true;
+      internalLoadingPage = page;
+      internalLoadingDirection = direction;
+    }
+
+    try {
+      await Promise.resolve(onPageChange(page));
+    } finally {
+      if (!isLoading) {
+        internalLoading = false;
+        internalLoadingPage = null;
+        internalLoadingDirection = null;
+      }
     }
   }
 
@@ -52,13 +84,16 @@
 
     <div class="flex items-center gap-2">
       <button
-        onclick={() => handlePageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-        class="px-3 py-1 rounded border {currentPage === 1 
+        onclick={() => handlePageChange(currentPage - 1, 'prev')}
+        disabled={currentPage === 1 || (disableDuringLoading && isBusy)}
+        class="px-3 py-1 rounded border flex items-center gap-2 {currentPage === 1 || (disableDuringLoading && isBusy)
           ? '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')}
+        {#if isBusy && (effectiveLoadingDirection === 'prev' || effectiveLoadingPage === currentPage - 1)}
+          <span class="h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
+        {/if}
+        <span>‹ {t('common.previous')}</span>
       </button>
 
       {#if showPageNumbers}
@@ -66,11 +101,16 @@
           {#if shouldShowPageNumber(pageNum)}
             <button
               onclick={() => handlePageChange(pageNum)}
-              class="px-3 py-1 rounded border {currentPage === pageNum 
+              disabled={disableDuringLoading && isBusy}
+              class="px-3 py-1 rounded border min-w-[2.25rem] flex items-center justify-center {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}
+              {#if isBusy && effectiveLoadingPage === pageNum}
+                <span class="h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
+              {:else}
+                {pageNum}
+              {/if}
             </button>
           {:else if shouldShowEllipsis(pageNum)}
             <span class="text-gray-500">...</span>
@@ -83,13 +123,16 @@
       {/if}
 
       <button
-        onclick={() => handlePageChange(currentPage + 1)}
-        disabled={currentPage >= totalPages}
-        class="px-3 py-1 rounded border {currentPage >= totalPages 
+        onclick={() => handlePageChange(currentPage + 1, 'next')}
+        disabled={currentPage >= totalPages || (disableDuringLoading && isBusy)}
+        class="px-3 py-1 rounded border flex items-center gap-2 {currentPage >= totalPages || (disableDuringLoading && isBusy)
           ? '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')} ›
+        <span>{t('common.next')} ›</span>
+        {#if isBusy && (effectiveLoadingDirection === 'next' || effectiveLoadingPage === currentPage + 1)}
+          <span class="h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
+        {/if}
       </button>
     </div>
   </div>

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

@@ -1,11 +1,15 @@
 export interface PaginationProps {
     currentPage: number;
     totalPages: number;
-    pageSize: number;
-    totalItems: number;
-    onPageChange: (page: number) => void;
+    pageSize?: number;
+    totalItems?: number;
+    onPageChange: (page: number) => void | Promise<void>;
     itemName?: string;
     searchTerm?: string;
     showInfo?: boolean;
     showPageNumbers?: boolean;
+    isLoading?: boolean;
+    loadingPage?: number | null;
+    loadingDirection?: 'prev' | 'next' | null;
+    disableDuringLoading?: boolean;
 }

package/dist/inputs/InputNumber/InputNumber.svelte

@@ -23,6 +23,14 @@
 		onChange?: (value: string) => void;
 		onBlur?: () => void;
 		onFocus?: () => void;
+		rootClassName?: string;
+		labelClassName?: string;
+		inputWrapperClassName?: string;
+		inputClassName?: string;
+		errorClassName?: string;
+		helpClassName?: string;
+		prefixClassName?: string;
+		suffixClassName?: string;
 	}
 
 	let {
@@ -46,7 +54,15 @@
 		onInput,
 		onChange,
 		onBlur,
-		onFocus
+		onFocus,
+		rootClassName = '',
+		labelClassName = '',
+		inputWrapperClassName = '',
+		inputClassName = '',
+		errorClassName = '',
+		helpClassName = '',
+		prefixClassName = '',
+		suffixClassName = ''
 	}: Props = $props();
 
 	const hasError = $derived(
@@ -63,6 +79,10 @@
 			: 'border-gray-300 focus-within:border-blue-500'
 	);
 
+	const resolvedWrapperStateClass = $derived(
+		inputWrapperClassName.trim() ? inputWrapperClassName : inputWrapperClass
+	);
+
 	function handleInput(e: Event) {
 		const target = e.target as HTMLInputElement;
 		value = target.value;
@@ -76,9 +96,9 @@
 </script>
 
 {#if isActive}
-	<div class="w-full">
+	<div class="w-full {rootClassName}">
 		{#if label}
-			<label class="mb-1.5 block text-sm font-medium text-gray-700" for={id}>
+			<label class="mb-1.5 block text-sm font-medium text-gray-700 {labelClassName}" for={id}>
 				{label}
 				{#if required}
 					<span class="text-red-500 ml-0.5">*</span>
@@ -88,10 +108,10 @@
 
 		<div class="relative">
 			<div
-				class="flex items-center border rounded-lg bg-white transition-all duration-200 {inputWrapperClass} {disabled ? 'bg-gray-50 cursor-not-allowed' : ''}"
+				class="flex items-center border rounded-lg bg-white transition-all duration-200 {resolvedWrapperStateClass} {disabled ? 'bg-gray-50 cursor-not-allowed' : ''}"
 			>
 				{#if prefix}
-					<div class="pl-3 flex items-center text-gray-500">
+					<div class="pl-3 flex items-center text-gray-500 {prefixClassName}">
 						{@render prefix()}
 					</div>
 				{/if}
@@ -111,11 +131,11 @@
 					onchange={handleChange}
 					onblur={onBlur}
 					onfocus={onFocus}
-					class="flex-1 w-full px-3 py-2 bg-transparent border-none outline-none rounded-lg focus:outline-none focus:ring-0 focus-visible:outline-none text-gray-900 placeholder-gray-400 disabled:cursor-not-allowed disabled:text-gray-500"
+					class="flex-1 w-full px-3 py-2 bg-transparent border-none outline-none rounded-lg focus:outline-none focus:ring-0 focus-visible:outline-none text-gray-900 placeholder-gray-400 disabled:cursor-not-allowed disabled:text-gray-500 {inputClassName}"
 				/>
 
 				{#if suffix}
-					<div class="pr-3 flex items-center text-gray-500">
+					<div class="pr-3 flex items-center text-gray-500 {suffixClassName}">
 						{@render suffix()}
 					</div>
 				{/if}
@@ -123,7 +143,7 @@
 		</div>
 
 		{#if error}
-			<p class="mt-1.5 text-sm text-red-600 flex items-center gap-1">
+			<p class="mt-1.5 text-sm text-red-600 flex items-center gap-1 {errorClassName}">
 				<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
 					<path
 						fill-rule="evenodd"
@@ -134,7 +154,7 @@
 				{error}
 			</p>
 		{:else if helpText}
-			<p class="mt-1.5 text-sm text-gray-500">{helpText}</p>
+			<p class="mt-1.5 text-sm text-gray-500 {helpClassName}">{helpText}</p>
 		{/if}
 	</div>
 {/if}

package/dist/inputs/InputNumber/InputNumber.svelte.d.ts

@@ -21,6 +21,14 @@ interface Props {
     onChange?: (value: string) => void;
     onBlur?: () => void;
     onFocus?: () => void;
+    rootClassName?: string;
+    labelClassName?: string;
+    inputWrapperClassName?: string;
+    inputClassName?: string;
+    errorClassName?: string;
+    helpClassName?: string;
+    prefixClassName?: string;
+    suffixClassName?: string;
 }
 declare const InputNumber: import("svelte").Component<Props, {}, "value">;
 type InputNumber = ReturnType<typeof InputNumber>;

package/dist/inputs/InputSelect/InputSelect.svelte

@@ -10,10 +10,18 @@
     value?: string | null;
     options: OptionItem[] | string[];
     required?: boolean;
+    disabled?: boolean;
     isActive?: boolean;
     validationError?: string;
+    error?: string;
     isNewRecord?: boolean;
     srOnly?: boolean;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    rootClassName?: string;
+    labelClassName?: string;
+    selectClassName?: string;
+    errorClassName?: string;
   };
 
   let {
@@ -22,16 +30,26 @@
     value = $bindable(''),
     options = [],
     required = false,
+    disabled = false,
     isActive = true,
     validationError = '',
+    error = '',
     isNewRecord = false,
-    srOnly = false
+    srOnly = false,
+    onInput,
+    onChange,
+    rootClassName = '',
+    labelClassName = '',
+    selectClassName = '',
+    errorClassName = ''
   }: Props = $props();
 
   const hasError = $derived(
-    isNewRecord && required && validationError && !value
+    !!error || (isNewRecord && required && validationError && !value)
   );
 
+  const resolvedErrorText = $derived(error || validationError);
+
   const normalizedOptions = $derived(() => {
     if (options.length === 0) return [];
 
@@ -44,12 +62,23 @@
 
     return options as OptionItem[];
   });
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLSelectElement;
+    value = target.value;
+    onInput?.(target.value);
+  }
+
+  function handleChange(e: Event) {
+    const target = e.target as HTMLSelectElement;
+    onChange?.(target.value);
+  }
 </script>
 
 {#if isActive}
-  <div>
+  <div class={rootClassName}>
     <label
-      class="block text-sm font-medium mb-1 {srOnly ? 'sr-only' : ''}"
+      class="block text-sm font-medium mb-1 {srOnly ? 'sr-only' : ''} {labelClassName}"
       for={id}
     >
       {label}
@@ -59,15 +88,18 @@
     </label>
     <select
       {id}
-      class="w-full rounded-lg border px-3 py-2.5 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition {hasError ? 'border-red-500' : 'border-gray-300'}"
+      {disabled}
+      class="w-full rounded-lg border px-3 py-2.5 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition {hasError ? 'border-red-500' : 'border-gray-300'} {selectClassName}"
       bind:value
+      oninput={handleInput}
+      onchange={handleChange}
     >
       {#each normalizedOptions() as option}
         <option value={option.value}>{option.label}</option>
       {/each}
     </select>
     {#if hasError}
-      <div class="mt-1 text-xs text-red-500">{validationError}</div>
+      <div class="mt-1 text-xs text-red-500 {errorClassName}">{resolvedErrorText}</div>
     {/if}
   </div>
 {/if}

package/dist/inputs/InputSelect/InputSelect.svelte.d.ts

@@ -8,10 +8,18 @@ type Props = {
     value?: string | null;
     options: OptionItem[] | string[];
     required?: boolean;
+    disabled?: boolean;
     isActive?: boolean;
     validationError?: string;
+    error?: string;
     isNewRecord?: boolean;
     srOnly?: boolean;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    rootClassName?: string;
+    labelClassName?: string;
+    selectClassName?: string;
+    errorClassName?: string;
 };
 declare const InputSelect: import("svelte").Component<Props, {}, "value">;
 type InputSelect = ReturnType<typeof InputSelect>;

package/dist/inputs/InputText/InputText.svelte

@@ -21,6 +21,12 @@
 		onChange?: (value: string) => void;
 		onBlur?: () => void;
 		onFocus?: () => void;
+		rootClassName?: string;
+		labelClassName?: string;
+		inputWrapperClassName?: string;
+		inputClassName?: string;
+		prefixClassName?: string;
+		suffixClassName?: string;
 	}
 
 	let {
@@ -42,7 +48,13 @@
 		onInput,
 		onChange,
 		onBlur,
-		onFocus
+		onFocus,
+		rootClassName = '',
+		labelClassName = '',
+		inputWrapperClassName = '',
+		inputClassName = '',
+		prefixClassName = '',
+		suffixClassName = ''
 	}: Props = $props();
 
 	// Input wrapper class based on state
@@ -52,6 +64,10 @@
 			: 'border-gray-300 focus-within:border-blue-500'
 	);
 
+	const resolvedWrapperStateClass = $derived(
+		inputWrapperClassName.trim() ? inputWrapperClassName : inputWrapperClass
+	);
+
 	function handleInput(e: Event) {
 		const target = e.target as HTMLInputElement;
 		value = target.value;
@@ -64,10 +80,10 @@
 	}
 </script>
 
-<div class="w-full">
+<div class="w-full {rootClassName}">
 	{#if label}
 		<label 
-			class="mb-1.5 block text-sm font-medium text-gray-700" 
+			class="mb-1.5 block text-sm font-medium text-gray-700 {labelClassName}" 
 			for={id}
 		>
 			{label}
@@ -79,10 +95,10 @@
 	
 	<div class="relative">
 		<div 
-			class="flex items-center border rounded-lg bg-white transition-all duration-200 {inputWrapperClass} {disabled ? 'bg-gray-50 cursor-not-allowed' : ''}"
+			class="flex items-center border rounded-lg bg-white transition-all duration-200 {resolvedWrapperStateClass} {disabled ? 'bg-gray-50 cursor-not-allowed' : ''}"
 		>
 			{#if prefix}
-				<div class="pl-3 flex items-center text-gray-500">
+				<div class="pl-3 flex items-center text-gray-500 {prefixClassName}">
 					{@render prefix()}
 				</div>
 			{/if}
@@ -102,11 +118,11 @@
 				onchange={handleChange}
 				onblur={onBlur}
 				onfocus={onFocus}
-				class="flex-1 w-full px-3 py-2 bg-transparent border-none outline-none rounded-lg focus:outline-none focus:ring-0 focus-visible:outline-none text-gray-900 placeholder-gray-400 disabled:cursor-not-allowed disabled:text-gray-500"
+				class="flex-1 w-full px-3 py-2 bg-transparent border-none outline-none rounded-lg focus:outline-none focus:ring-0 focus-visible:outline-none text-gray-900 placeholder-gray-400 disabled:cursor-not-allowed disabled:text-gray-500 {inputClassName}"
 			/>
 			
 			{#if suffix}
-				<div class="pr-3 flex items-center text-gray-500">
+				<div class="pr-3 flex items-center text-gray-500 {suffixClassName}">
 					{@render suffix()}
 				</div>
 			{/if}

package/dist/inputs/InputText/InputText.svelte.d.ts

@@ -20,6 +20,12 @@ interface Props {
     onChange?: (value: string) => void;
     onBlur?: () => void;
     onFocus?: () => void;
+    rootClassName?: string;
+    labelClassName?: string;
+    inputWrapperClassName?: string;
+    inputClassName?: string;
+    prefixClassName?: string;
+    suffixClassName?: 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> {

package/dist/sections/SectionContainer/SectionContainer.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SectionContainerProps } from './SectionContainer.types';
+
+  interface Props extends SectionContainerProps {
+    children?: Snippet;
+    icon?: Snippet;
+    headerActions?: Snippet;
+  }
+
+  let {
+    title,
+    subtitle,
+    type = 'type1',
+    required = false,
+    className = '',
+    headerClassName = '',
+    contentClassName = '',
+    children,
+    icon,
+    headerActions,
+  }: Props = $props();
+
+  const containerClass = $derived(
+    type === 'type1'
+      ? 'bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl border-2 border-orange-200 overflow-hidden'
+      : 'bg-white rounded-xl border border-gray-200 overflow-hidden'
+  );
+
+  const headerClass = $derived(
+    type === 'type1'
+      ? 'bg-white/80 backdrop-blur-sm px-4 py-3 border-b border-orange-200'
+      : 'bg-white px-4 py-3 border-b border-gray-200'
+  );
+
+  const titleClass = $derived(
+    type === 'type1' ? 'text-sm font-semibold text-gray-800' : 'text-sm font-semibold text-gray-800'
+  );
+
+  const contentClass = $derived(type === 'type1' ? 'p-4' : 'p-4');
+</script>
+
+<div
+  class="{containerClass} {className}"
+  data-component-name="SectionContainer"
+  data-section-type={type}
+>
+  <div class="{headerClass} {headerClassName}">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex items-center gap-2 min-w-0">
+        {#if icon}
+          {@render icon()}
+        {/if}
+        <div class="min-w-0">
+          <h3 class="{titleClass}">
+            {title}
+            {#if required}
+              <span class="text-red-500 ml-0.5">*</span>
+            {/if}
+          </h3>
+          {#if subtitle}
+            <p class="text-xs text-gray-600 mt-0.5">{subtitle}</p>
+          {/if}
+        </div>
+      </div>
+
+      {#if headerActions}
+        <div class="flex items-center gap-2 shrink-0">
+          {@render headerActions()}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <div class="{contentClass} {contentClassName}">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>

package/dist/sections/SectionContainer/SectionContainer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { SectionContainerProps } from './SectionContainer.types';
+interface Props extends SectionContainerProps {
+    children?: Snippet;
+    icon?: Snippet;
+    headerActions?: Snippet;
+}
+declare const SectionContainer: import("svelte").Component<Props, {}, "">;
+type SectionContainer = ReturnType<typeof SectionContainer>;
+export default SectionContainer;

package/dist/sections/SectionContainer/SectionContainer.types.d.ts

@@ -0,0 +1,10 @@
+export type SectionContainerType = 'type1';
+export interface SectionContainerProps {
+    title: string;
+    subtitle?: string;
+    type?: SectionContainerType;
+    required?: boolean;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+}

package/dist/sections/SectionContainer/SectionContainer.types.js

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

package/dist/sections/SectionContainer/index.d.ts

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

package/dist/sections/SectionContainer/index.js

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

package/dist/sections/index.d.ts

@@ -1,2 +1,5 @@
+export { HeroCarousel } from './HeroCarousel';
 export { PreviewSelector } from './PreviewSelector';
 export type { PreviewItem } from './PreviewSelector';
+export { SectionContainer } from './SectionContainer';
+export type { SectionContainerProps, SectionContainerType } from './SectionContainer';

package/dist/sections/index.js

@@ -1,6 +1,7 @@
-// export { HeroCarousel } from './HeroCarousel';
+export { HeroCarousel } from './HeroCarousel';
 // export { ArticlesGrid } from './ArticlesGrid';
 // export type { Article } from './ArticlesGrid';
 // export { FeaturedGalleryGrid } from './FeaturedGalleryGrid';
 // export type { GalleryItem } from './FeaturedGalleryGrid';
 export { PreviewSelector } from './PreviewSelector';
+export { SectionContainer } from './SectionContainer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "urpanels-ui-pack",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Reusable Svelte 5 UI components for urPanels templates",
   "type": "module",
   "license": "MIT",