urpanels-ui-pack 0.0.4 → 0.0.10

package/dist/inputs/TextArea/TextArea.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		id?: string;
+		label?: string;
+		value?: string | null;
+		required?: boolean;
+		disabled?: boolean;
+		placeholder?: string;
+		error?: string;
+		helpText?: string;
+		rows?: number;
+		maxlength?: number;
+		minlength?: number;
+		resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+		onInput?: (value: string) => void;
+		onChange?: (value: string) => void;
+		onBlur?: () => void;
+		onFocus?: () => void;
+	}
+
+	let {
+		id = '',
+		label = '',
+		value = $bindable(''),
+		required = false,
+		disabled = false,
+		placeholder = '',
+		error = '',
+		helpText = '',
+		rows = 4,
+		maxlength,
+		minlength,
+		resize = 'vertical',
+		onInput,
+		onChange,
+		onBlur,
+		onFocus
+	}: Props = $props();
+
+	// Textarea wrapper class based on state
+	const wrapperClass = $derived(
+		error
+			? 'border-red-300 focus-within:border-red-500'
+			: 'border-gray-300 focus-within:border-blue-500'
+	);
+
+	const resizeClass = {
+		none: 'resize-none',
+		vertical: 'resize-y',
+		horizontal: 'resize-x',
+		both: 'resize'
+	};
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLTextAreaElement;
+		value = target.value;
+		onInput?.(target.value);
+	}
+
+	function handleChange(e: Event) {
+		const target = e.target as HTMLTextAreaElement;
+		onChange?.(target.value);
+	}
+</script>
+
+<div class="w-full">
+	{#if label}
+		<label 
+			class="mb-1.5 block text-sm font-medium text-gray-700" 
+			for={id}
+		>
+			{label}
+			{#if required}
+				<span class="text-red-500 ml-0.5">*</span>
+			{/if}
+		</label>
+	{/if}
+	
+	<div class="relative">
+		<div 
+			class="border rounded-lg bg-white transition-all duration-200 {wrapperClass} {disabled ? 'bg-gray-50 cursor-not-allowed' : ''}"
+		>
+			<textarea
+				{id}
+				{placeholder}
+				{required}
+				{disabled}
+				{maxlength}
+				{minlength}
+				{rows}
+				bind:value
+				oninput={handleInput}
+				onchange={handleChange}
+				onblur={onBlur}
+				onfocus={onFocus}
+				class="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 {resizeClass[resize]}"
+			></textarea>
+		</div>
+	</div>
+
+	{#if error}
+		<p class="mt-1.5 text-sm text-red-600 flex items-center gap-1">
+			<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+				<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+			</svg>
+			{error}
+		</p>
+	{:else if helpText}
+		<p class="mt-1.5 text-sm text-gray-500">{helpText}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+interface Props {
+    id?: string;
+    label?: string;
+    value?: string | null;
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    error?: string;
+    helpText?: string;
+    rows?: number;
+    maxlength?: number;
+    minlength?: number;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+declare const TextArea: import("svelte").Component<Props, {}, "value">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;

package/dist/inputs/TextArea/index.d.ts

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

package/dist/inputs/TextArea/index.js

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

package/dist/inputs/index.d.ts

@@ -0,0 +1,3 @@
+export { default as InputText } from './InputText/index.js';
+export { default as InputSelect } from './InputSelect/index.js';
+export { default as InputNumber } from './InputNumber/index.js';

package/dist/inputs/index.js

@@ -0,0 +1,4 @@
+export { default as InputText } from './InputText/index.js';
+export { default as TextArea } from './TextArea/index.js';
+export { default as InputSelect } from './InputSelect/index.js';
+export { default as InputNumber } from './InputNumber/index.js';

package/dist/sections/PreviewSelector/PreviewSelector.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  export interface PreviewItem {
+    id: string;
+    title: string;
+    summary?: string;
+    image?: string;
+    date?: string;
+    href: string;
+  }
+
+  interface Props {
+    items: PreviewItem[];
+    title: string;
+    description?: string;
+    viewAllHref?: string;
+    viewAllText?: string;
+    selectedIndex?: number;
+    onSelectionChange?: (index: number) => void;
+    onItemClick?: (item: PreviewItem) => void;
+    onViewAllClick?: () => void;
+    dateLocale?: string;
+    placeholderImage?: string;
+    className?: string;
+  }
+
+  let {
+    items = [],
+    title,
+    description,
+    viewAllHref,
+    viewAllText = "See All",
+    selectedIndex = 0,
+    onSelectionChange,
+    onItemClick,
+    onViewAllClick,
+    dateLocale = 'tr-TR',
+    placeholderImage = 'https://placehold.co/800x450',
+    className = ''
+  }: Props = $props();
+
+  let currentSelected = $state(selectedIndex);
+
+  $effect(() => {
+    currentSelected = selectedIndex;
+  });
+
+  let selectedItem = $derived(items[currentSelected]);
+
+  function handleThumbnailClick(index: number) {
+    currentSelected = index;
+    onSelectionChange?.(index);
+  }
+
+  function handleMainItemClick() {
+    if (selectedItem) {
+      onItemClick?.(selectedItem);
+    }
+  }
+
+  function handleViewAllClick() {
+    if (onViewAllClick) {
+      onViewAllClick();
+    }
+  }
+
+  function formatDate(dateString: string): string {
+    return new Date(dateString).toLocaleDateString(dateLocale);
+  }
+
+  function getImageSrc(image?: string, isLarge: boolean = false): string {
+    if (image && image.trim()) return image;
+    return isLarge ? placeholderImage : 'https://placehold.co/256';
+  }
+</script>
+
+{#if items.length}
+  <div class="my-16 {className}">
+    <!-- Header -->
+    <h2 class="mb-2 text-center text-4xl font-bold text-gray-800">{title}</h2>
+    {#if description}
+      <p class="mb-12 text-center text-gray-500">{description}</p>
+    {/if}
+
+    <!-- Main Content -->
+    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-3">
+      
+      <!-- Left: Preview Area (2/3 width) -->
+      <div class="md:col-span-2">
+        {#if selectedItem}
+          <button 
+            type="button"
+            class="group block w-full overflow-hidden rounded-xl bg-white shadow text-left"
+            onclick={handleMainItemClick}
+          >
+            <div class="aspect-[16/9] overflow-hidden">
+              <img 
+                class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.01]" 
+                src={getImageSrc(selectedItem.image, true)}
+                alt={selectedItem.title} 
+              />
+            </div>
+            <div class="p-5">
+              {#if selectedItem.date}
+                <p class="mb-1 text-sm text-gray-500">{formatDate(selectedItem.date)}</p>
+              {/if}
+              <h3 class="text-2xl font-bold">{selectedItem.title}</h3>
+              {#if selectedItem.summary}
+                <p class="mt-2 text-gray-700">{selectedItem.summary}</p>
+              {/if}
+            </div>
+          </button>
+        {/if}
+      </div>
+
+      <!-- Right: Selector Thumbnails (1/3 width) -->
+      <div class="flex flex-col gap-3">
+        {#each items as item, index}
+          <button 
+            type="button" 
+            class={`group flex items-center gap-3 rounded-lg border p-2 text-left transition-shadow hover:shadow ${index === currentSelected ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-200'}`}
+            onclick={() => handleThumbnailClick(index)} 
+            aria-pressed={index === currentSelected}
+          >
+            <div class="aspect-square w-20 shrink-0 overflow-hidden rounded-md bg-gray-100">
+              <img 
+                class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" 
+                src={getImageSrc(item.image)}
+                alt={item.title} 
+              />
+            </div>
+            <div class="min-w-0">
+              <h4 class="truncate font-medium text-gray-900">{item.title}</h4>
+              {#if item.date}
+                <p class="text-xs text-gray-500">{formatDate(item.date)}</p>
+              {/if}
+            </div>
+          </button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- View All Link -->
+    {#if viewAllHref || onViewAllClick}
+      <div class="mt-6 text-right">
+        {#if viewAllHref}
+          <a 
+            href={viewAllHref} 
+            class="inline-flex items-center gap-1 font-medium text-blue-600 hover:text-blue-800"
+          >
+            {viewAllText} <span aria-hidden="true">→</span>
+          </a>
+        {:else if onViewAllClick}
+          <button 
+            type="button"
+            onclick={handleViewAllClick}
+            class="inline-flex items-center gap-1 font-medium text-blue-600 hover:text-blue-800"
+          >
+            {viewAllText} <span aria-hidden="true">→</span>
+          </button>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,25 @@
+export interface PreviewItem {
+    id: string;
+    title: string;
+    summary?: string;
+    image?: string;
+    date?: string;
+    href: string;
+}
+interface Props {
+    items: PreviewItem[];
+    title: string;
+    description?: string;
+    viewAllHref?: string;
+    viewAllText?: string;
+    selectedIndex?: number;
+    onSelectionChange?: (index: number) => void;
+    onItemClick?: (item: PreviewItem) => void;
+    onViewAllClick?: () => void;
+    dateLocale?: string;
+    placeholderImage?: string;
+    className?: string;
+}
+declare const PreviewSelector: import("svelte").Component<Props, {}, "">;
+type PreviewSelector = ReturnType<typeof PreviewSelector>;
+export default PreviewSelector;

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

@@ -0,0 +1,2 @@
+export { default as PreviewSelector } from './PreviewSelector.svelte';
+export type { PreviewItem } from './PreviewSelector.svelte';

package/dist/sections/PreviewSelector/index.js

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

package/dist/sections/index.d.ts

@@ -3,3 +3,5 @@ export { ArticlesGrid } from './ArticlesGrid';
 export type { Article } from './ArticlesGrid';
 export { FeaturedGalleryGrid } from './FeaturedGalleryGrid';
 export type { GalleryItem } from './FeaturedGalleryGrid';
+export { PreviewSelector } from './PreviewSelector';
+export type { PreviewItem } from './PreviewSelector';

package/dist/sections/index.js

@@ -1,3 +1,4 @@
 export { HeroCarousel } from './HeroCarousel';
 export { ArticlesGrid } from './ArticlesGrid';
 export { FeaturedGalleryGrid } from './FeaturedGalleryGrid';
+export { PreviewSelector } from './PreviewSelector';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "urpanels-ui-pack",
-  "version": "0.0.4",
+  "version": "0.0.10",
   "description": "Reusable Svelte 5 UI components for urPanels templates",
   "type": "module",
   "license": "MIT",
@@ -16,6 +16,18 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./sections": {
+      "types": "./dist/sections/index.d.ts",
+      "svelte": "./dist/sections/index.js",
+      "import": "./dist/sections/index.js",
+      "default": "./dist/sections/index.js"
+    },
+    "./sections/*": {
+      "types": "./dist/sections/*/index.d.ts",
+      "svelte": "./dist/sections/*/index.js",
+      "import": "./dist/sections/*/index.js",
+      "default": "./dist/sections/*/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -43,6 +55,7 @@
     "@tiptap/extension-table-row": "^3.15.3",
     "@tiptap/pm": "^3.15.3",
     "@tiptap/starter-kit": "^3.15.3",
+    "@urga-panel/ur-panels-core": "^1.0.28",
     "embla-carousel-svelte": "^8.5.0"
   }
 }