podo-ui 0.9.7 → 1.0.2

package/dist/svelte/molecule/DatePicker.svelte.d.ts

@@ -0,0 +1,71 @@
+export type DatePickerMode = 'instant' | 'period';
+export type DatePickerType = 'date' | 'time' | 'datetime';
+export interface TimeValue {
+    hour: number;
+    minute: number;
+}
+export interface DatePickerValue {
+    date?: Date;
+    time?: TimeValue;
+    endDate?: Date;
+    endTime?: TimeValue;
+}
+export interface DateRange {
+    from: Date;
+    to: Date;
+}
+export type DateCondition = Date | DateRange | ((date: Date) => boolean);
+export interface DateTimeLimit {
+    date: Date;
+    time?: TimeValue;
+}
+export type MinuteStep = 1 | 5 | 10 | 15 | 20 | 30;
+export interface YearRange {
+    min?: number;
+    max?: number;
+}
+export type CalendarInitial = 'now' | 'prevMonth' | 'nextMonth' | Date;
+export interface InitialCalendar {
+    start?: CalendarInitial;
+    end?: CalendarInitial;
+}
+interface Props {
+    /** Selection mode: instant | period */
+    mode?: DatePickerMode;
+    /** Value type: date | time | datetime */
+    type?: DatePickerType;
+    /** Selected value */
+    value?: DatePickerValue;
+    /** Value change handler */
+    onchange?: (value: DatePickerValue) => void;
+    /** Placeholder */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Show action buttons (default true for period mode) */
+    showActions?: boolean;
+    /** Dropdown alignment */
+    align?: 'left' | 'right';
+    /** Additional class name */
+    class?: string;
+    /** Disabled date conditions */
+    disable?: DateCondition[];
+    /** Enabled date conditions (only these dates are selectable) */
+    enable?: DateCondition[];
+    /** Minimum selectable date */
+    minDate?: Date | DateTimeLimit;
+    /** Maximum selectable date */
+    maxDate?: Date | DateTimeLimit;
+    /** Minute selection step */
+    minuteStep?: MinuteStep;
+    /** Date/time format pattern */
+    format?: string;
+    /** Initial calendar display month for period mode */
+    initialCalendar?: InitialCalendar;
+    /** Year selection range */
+    yearRange?: YearRange;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/svelte/molecule/Field.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { z } from 'zod';
+  import { ZodError } from 'zod';
+  import styles from './field.module.scss';
+
+  interface Props {
+    /** Label text */
+    label?: string;
+    /** Label additional class */
+    labelClass?: string;
+    /** Show required indicator (*) */
+    required?: boolean;
+    /** Helper text */
+    helper?: string;
+    /** Helper additional class */
+    helperClass?: string;
+    /** Field children (input, select, etc.) */
+    children?: Snippet;
+    /** Zod validator */
+    validator?: z.ZodType<unknown>;
+    /** Value to validate */
+    value?: string;
+    /** Additional class name */
+    class?: string;
+  }
+
+  let {
+    label,
+    labelClass = '',
+    required = false,
+    helper,
+    helperClass = '',
+    children,
+    validator,
+    value = '',
+    class: className = '',
+    ...rest
+  }: Props & Record<string, unknown> = $props();
+
+  let message = $state('');
+  let statusClass = $state('');
+
+  $effect(() => {
+    message = '';
+    statusClass = '';
+
+    if (validator && value && value.length > 0) {
+      try {
+        validator.parse(value);
+        statusClass = 'success';
+      } catch (e) {
+        if (e instanceof ZodError) {
+          message = e.errors[0].message;
+          statusClass = 'danger';
+        }
+      }
+    }
+  });
+</script>
+
+<div class="{styles.style} {className}" {...rest}>
+  {#if label}
+    <label class={labelClass}>
+      {label}
+      {#if required}
+        <span class="required">*</span>
+      {/if}
+    </label>
+  {/if}
+  <div class="child">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+  {#if helper || (validator && message !== '')}
+    <div class="helper {helperClass}">
+      {message || helper}
+    </div>
+  {/if}
+</div>

package/dist/svelte/molecule/Field.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { z } from 'zod';
+interface Props {
+    /** Label text */
+    label?: string;
+    /** Label additional class */
+    labelClass?: string;
+    /** Show required indicator (*) */
+    required?: boolean;
+    /** Helper text */
+    helper?: string;
+    /** Helper additional class */
+    helperClass?: string;
+    /** Field children (input, select, etc.) */
+    children?: Snippet;
+    /** Zod validator */
+    validator?: z.ZodType<unknown>;
+    /** Value to validate */
+    value?: string;
+    /** Additional class name */
+    class?: string;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Field: import("svelte").Component<$$ComponentProps, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/svelte/molecule/Pagination.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import styles from './pagination.module.scss';
+
+  interface Props {
+    /** Current page number */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Page change callback */
+    onpagechange: (page: number) => void;
+    /** Maximum visible page numbers */
+    maxVisiblePages?: number;
+  }
+
+  let {
+    currentPage = $bindable(1),
+    totalPages,
+    onpagechange,
+    maxVisiblePages = 5,
+    ...rest
+  }: Props & Record<string, unknown> = $props();
+
+  function getPageNumbers(): number[] {
+    const pages: number[] = [];
+    const startPage =
+      Math.floor((currentPage - 1) / maxVisiblePages) * maxVisiblePages + 1;
+    const endPage = Math.min(startPage + maxVisiblePages - 1, totalPages);
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    return pages;
+  }
+
+  let pageNumbers = $derived(getPageNumbers());
+
+  function handlePrevious() {
+    if (currentPage > 1) {
+      currentPage = currentPage - 1;
+      onpagechange(currentPage);
+    }
+  }
+
+  function handleNext() {
+    if (currentPage < totalPages) {
+      currentPage = currentPage + 1;
+      onpagechange(currentPage);
+    }
+  }
+
+  function handlePageClick(pageNum: number) {
+    currentPage = pageNum;
+    onpagechange(pageNum);
+  }
+</script>
+
+{#if totalPages > 0}
+  <div class={styles.pagination} {...rest}>
+    {#if currentPage > 1}
+      <button
+        onclick={handlePrevious}
+        class={styles.pageButton}
+        aria-label="이전 페이지"
+      >
+        <i class="icon-arrow-left"></i>
+      </button>
+    {:else}
+      <div class={styles.pageButtonPlaceholder}></div>
+    {/if}
+
+    {#each pageNumbers as pageNum (pageNum)}
+      <button
+        onclick={() => handlePageClick(pageNum)}
+        class="{styles.pageButton} {currentPage === pageNum ? styles.active : ''}"
+        aria-label="{pageNum}페이지"
+        aria-current={currentPage === pageNum ? 'page' : undefined}
+      >
+        {pageNum}
+      </button>
+    {/each}
+
+    {#if currentPage < totalPages}
+      <button
+        onclick={handleNext}
+        class={styles.pageButton}
+        aria-label="다음 페이지"
+      >
+        <i class="icon-arrow-right"></i>
+      </button>
+    {:else}
+      <div class={styles.pageButtonPlaceholder}></div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+interface Props {
+    /** Current page number */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Page change callback */
+    onpagechange: (page: number) => void;
+    /** Maximum visible page numbers */
+    maxVisiblePages?: number;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "currentPage">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/svelte/molecule/Tab.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  export interface TabItem {
+    /** Tab key */
+    key: string;
+    /** Tab label */
+    label: string;
+    /** Disabled state */
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  interface Props {
+    /** Tab items */
+    items: TabItem[];
+    /** Active tab key (controlled) */
+    activeKey?: string;
+    /** Default active tab key (uncontrolled) */
+    defaultActiveKey?: string;
+    /** Equal width tabs */
+    fill?: boolean;
+    /** Tab change callback */
+    onchange?: (key: string) => void;
+    /** Additional class name */
+    class?: string;
+  }
+
+  let {
+    items,
+    activeKey: controlledActiveKey,
+    defaultActiveKey,
+    fill = false,
+    onchange,
+    class: className = '',
+    ...rest
+  }: Props & Record<string, unknown> = $props();
+
+  let internalActiveKey = $state(defaultActiveKey || items[0]?.key);
+
+  let activeKey = $derived(controlledActiveKey ?? internalActiveKey);
+
+  function handleClick(key: string, disabled?: boolean) {
+    if (disabled) return;
+    internalActiveKey = key;
+    onchange?.(key);
+  }
+
+  let tabsClass = $derived(
+    ['tabs', fill && 'fill', className].filter(Boolean).join(' ')
+  );
+</script>
+
+<ul class={tabsClass} {...rest}>
+  {#each items as item (item.key)}
+    <li class={activeKey === item.key ? 'on' : undefined}>
+      <a
+        href="#{item.key}"
+        onclick={(e) => {
+          e.preventDefault();
+          handleClick(item.key, item.disabled);
+        }}
+        aria-disabled={item.disabled}
+        tabindex={item.disabled ? -1 : 0}
+      >
+        {item.label}
+      </a>
+    </li>
+  {/each}
+</ul>

package/dist/svelte/molecule/Tab.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface TabItem {
+    /** Tab key */
+    key: string;
+    /** Tab label */
+    label: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+interface Props {
+    /** Tab items */
+    items: TabItem[];
+    /** Active tab key (controlled) */
+    activeKey?: string;
+    /** Default active tab key (uncontrolled) */
+    defaultActiveKey?: string;
+    /** Equal width tabs */
+    fill?: boolean;
+    /** Tab change callback */
+    onchange?: (key: string) => void;
+    /** Additional class name */
+    class?: string;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Tab: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

package/dist/svelte/molecule/TabPanel.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Tab key (must match Tab item key) */
+    tabKey: string;
+    /** Current active key */
+    activeKey?: string;
+    /** Panel content */
+    children: Snippet;
+    /** Additional class name */
+    class?: string;
+  }
+
+  let { tabKey, activeKey, children, class: className }: Props = $props();
+
+  let isActive = $derived(tabKey === activeKey);
+</script>
+
+{#if isActive}
+  <div class={className}>
+    {@render children()}
+  </div>
+{/if}

package/dist/svelte/molecule/TabPanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Tab key (must match Tab item key) */
+    tabKey: string;
+    /** Current active key */
+    activeKey?: string;
+    /** Panel content */
+    children: Snippet;
+    /** Additional class name */
+    class?: string;
+}
+declare const TabPanel: import("svelte").Component<Props, {}, "">;
+type TabPanel = ReturnType<typeof TabPanel>;
+export default TabPanel;

package/dist/svelte/molecule/Table.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export interface TableColumn<T> {
+    /** Column key */
+    key: string;
+    /** Header text */
+    title: string;
+    /** Custom render function */
+    render?: (value: unknown, record: T, index: number) => Snippet;
+    /** Column width */
+    width?: string | number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+  }
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+  interface Props {
+    /** Column definitions */
+    columns: TableColumn<T>[];
+    /** Data source */
+    dataSource: T[];
+    /** Row key extractor */
+    rowKey: keyof T | ((record: T) => string);
+    /** Clickable rows (hover effect) */
+    list?: boolean;
+    /** Row border */
+    border?: boolean;
+    /** Filled background */
+    fill?: boolean;
+    /** Row click callback */
+    onrowclick?: (record: T, index: number) => void;
+    /** Additional class name */
+    class?: string;
+  }
+
+  let {
+    columns,
+    dataSource,
+    rowKey,
+    list = false,
+    border = false,
+    fill = false,
+    onrowclick,
+    class: className = '',
+    ...rest
+  }: Props & Record<string, unknown> = $props();
+
+  function getRowKey(record: T, index: number): string {
+    if (typeof rowKey === 'function') {
+      return rowKey(record);
+    }
+    return String(record[rowKey] ?? index);
+  }
+
+  function handleRowClick(record: T, index: number) {
+    onrowclick?.(record, index);
+  }
+
+  function handleKeyDown(e: KeyboardEvent, record: T, index: number) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onrowclick?.(record, index);
+    }
+  }
+
+  let tableClass = $derived(
+    [list && 'list', border && 'border', fill && 'fill', className]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<table class={tableClass || undefined} {...rest}>
+  <thead>
+    <tr>
+      {#each columns as col (col.key)}
+        <th
+          scope="col"
+          style="width: {col.width}; text-align: {col.align};"
+        >
+          {col.title}
+        </th>
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    {#each dataSource as record, index (getRowKey(record, index))}
+      <tr
+        onclick={() => handleRowClick(record, index)}
+        onkeydown={onrowclick ? (e) => handleKeyDown(e, record, index) : undefined}
+        style={onrowclick ? 'cursor: pointer;' : undefined}
+        role={onrowclick ? 'button' : undefined}
+        tabindex={onrowclick ? 0 : undefined}
+      >
+        {#each columns as col (col.key)}
+          <td style="text-align: {col.align};">
+            {#if col.render}
+              {@render col.render(record[col.key], record, index)}
+            {:else}
+              {record[col.key]}
+            {/if}
+          </td>
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>

package/dist/svelte/molecule/Table.svelte.d.ts

@@ -0,0 +1,54 @@
+import type { Snippet } from 'svelte';
+export interface TableColumn<T> {
+    /** Column key */
+    key: string;
+    /** Header text */
+    title: string;
+    /** Custom render function */
+    render?: (value: unknown, record: T, index: number) => Snippet;
+    /** Column width */
+    width?: string | number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        /** Column definitions */
+        columns: TableColumn<T>[];
+        /** Data source */
+        dataSource: T[];
+        /** Row key extractor */
+        rowKey: keyof T | ((record: T) => string);
+        /** Clickable rows (hover effect) */
+        list?: boolean;
+        /** Row border */
+        border?: boolean;
+        /** Filled background */
+        fill?: boolean;
+        /** Row click callback */
+        onrowclick?: (record: T, index: number) => void;
+        /** Additional class name */
+        class?: string;
+    } & Record<string, unknown>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<T extends Record<string, unknown>> = InstanceType<typeof Table<T>>;
+export default Table;