podo-ui 0.9.7 → 1.0.2

package/dist/svelte/molecule/Toast.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import styles from './toast.module.scss';
+
+  type ToastTheme = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+
+  interface Props {
+    /** Toast ID */
+    id: string;
+    /** Toast header */
+    header?: string;
+    /** Toast message */
+    message: string;
+    /** Toast theme */
+    theme?: ToastTheme;
+    /** Show border */
+    border?: boolean;
+    /** Long style (no header) */
+    long?: boolean;
+    /** Auto close duration in ms (0 = no auto close) */
+    duration?: number;
+    /** Toast width */
+    width?: string | number;
+    /** Close callback */
+    onclose: (id: string) => void;
+  }
+
+  let {
+    id,
+    header,
+    message,
+    theme = 'default',
+    border = false,
+    long = false,
+    duration = 3000,
+    width,
+    onclose,
+    ...rest
+  }: Props & Record<string, unknown> = $props();
+
+  let isVisible = $state(false);
+  let isClosing = $state(false);
+
+  onMount(() => {
+    // Fade in
+    requestAnimationFrame(() => {
+      isVisible = true;
+    });
+
+    // Auto close
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, duration);
+
+      return () => clearTimeout(timer);
+    }
+  });
+
+  function handleClose() {
+    isClosing = true;
+    setTimeout(() => {
+      onclose(id);
+    }, 200); // 0.2s fade out
+  }
+
+  let toastClasses = $derived(
+    [
+      'toast',
+      theme,
+      border ? 'border' : '',
+      long ? 'long' : '',
+      styles.toastAnimation,
+      isVisible && !isClosing ? styles.fadeIn : '',
+      isClosing ? styles.fadeOut : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let toastStyle = $derived(
+    width ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''
+  );
+
+  function getIcon(): string {
+    switch (theme) {
+      case 'success':
+        return 'icon-check';
+      case 'warning':
+        return 'icon-warning';
+      case 'danger':
+        return 'icon-danger';
+      case 'primary':
+      case 'info':
+      case 'default':
+      default:
+        return 'icon-info';
+    }
+  }
+</script>
+
+<div class={toastClasses} style={toastStyle} {...rest}>
+  <i class={getIcon()}></i>
+  <div class="toast-content">
+    {#if header && !long}
+      <div class="toast-header">{header}</div>
+    {/if}
+    <div class="toast-body">{message}</div>
+  </div>
+  <button onclick={handleClose} aria-label="닫기"></button>
+</div>

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

@@ -0,0 +1,25 @@
+type ToastTheme = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+interface Props {
+    /** Toast ID */
+    id: string;
+    /** Toast header */
+    header?: string;
+    /** Toast message */
+    message: string;
+    /** Toast theme */
+    theme?: ToastTheme;
+    /** Show border */
+    border?: boolean;
+    /** Long style (no header) */
+    long?: boolean;
+    /** Auto close duration in ms (0 = no auto close) */
+    duration?: number;
+    /** Toast width */
+    width?: string | number;
+    /** Close callback */
+    onclose: (id: string) => void;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Toast: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/svelte/molecule/ToastProvider.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+  import {
+    createToastContext,
+    type ToastPosition,
+  } from '../stores/toast';
+  import Toast from './Toast.svelte';
+  import { portal } from '../actions/portal';
+  import styles from './toast-container.module.scss';
+
+  interface Props {
+    /** Children content */
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+
+  const { toasts, hideToast } = createToastContext();
+
+  const positions: ToastPosition[] = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'center-left',
+    'center',
+    'center-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+  ];
+
+  let isMounted = $state(false);
+
+  onMount(() => {
+    isMounted = true;
+    return () => {
+      isMounted = false;
+    };
+  });
+
+  function getToastsByPosition(position: ToastPosition) {
+    return $toasts.filter((t) => t.position === position);
+  }
+</script>
+
+{#if children}
+  {@render children()}
+{/if}
+
+{#if isMounted}
+  <div class={styles.toastPortal} use:portal={'body'}>
+    {#each positions as position (position)}
+      {@const positionToasts = getToastsByPosition(position)}
+      {#if positionToasts.length > 0}
+        <div class="{styles.toastContainer} {styles[position]}">
+          {#each positionToasts as toast (toast.id)}
+            <Toast
+              id={toast.id}
+              header={toast.header}
+              message={toast.message}
+              theme={toast.theme}
+              border={toast.border}
+              long={toast.long}
+              duration={toast.duration}
+              width={toast.width}
+              onclose={() => hideToast(toast.id)}
+            />
+          {/each}
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}

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

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

package/dist/svelte/molecule/field.module.scss

@@ -0,0 +1,22 @@
+@use '../../../mixin.scss' as *;
+.style {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: s(3);
+  &:global {
+    > div.child {
+      width: 100%;
+      > :not(:last-child) {
+        display: inline-block;
+        margin-right: s(5);
+      }
+    }
+    > div.helper {
+      @include p4;
+      & {
+        color: color('text-sub');
+      }
+    }
+  }
+}

package/dist/svelte/molecule/pagination.module.scss

@@ -0,0 +1,61 @@
+@use '../../../mixin.scss' as *;
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: s(1);
+}
+
+.pageButton {
+  @include p3;
+  min-width: 32px;
+  height: 32px;
+  padding: s(1) s(2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  color: color(text-action);
+  border: 1px solid transparent;
+  border-radius: r(2);
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+
+  &:hover:not(.active) {
+    background-color: color(default-fill);
+    color: color(text-action-hover);
+  }
+
+  &:active:not(.active) {
+    background-color: color(default-hover);
+  }
+
+  &.active {
+    background-color: color(primary);
+    color: color(primary-reverse);
+    border-color: color(primary);
+    font-weight: 600;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 4px solid color(primary-outline);
+  }
+
+  &:disabled {
+    color: color(text-action-disabled);
+    cursor: not-allowed;
+    background-color: transparent;
+  }
+
+  i {
+    font-size: 16px;
+  }
+}
+
+.pageButtonPlaceholder {
+  min-width: 32px;
+  height: 32px;
+}

package/dist/svelte/molecule/toast-container.module.scss

@@ -0,0 +1,70 @@
+@use '../../../mixin' as *;
+
+.toastPortal {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.toastContainer {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: s(3);
+  padding: s(5);
+  pointer-events: auto;
+
+  // Top positions
+  &.top-left {
+    top: 0;
+    left: 0;
+  }
+
+  &.top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.top-right {
+    top: 0;
+    right: 0;
+  }
+
+  // Center positions
+  &.center-left {
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+  }
+
+  &.center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.center-right {
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+
+  // Bottom positions
+  &.bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+
+  &.bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+}

package/dist/svelte/molecule/toast.module.scss

@@ -0,0 +1,12 @@
+.toastAnimation {
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+
+  &.fadeIn {
+    opacity: 1;
+  }
+
+  &.fadeOut {
+    opacity: 0;
+  }
+}

package/dist/svelte/stores/toast.d.ts

@@ -0,0 +1,45 @@
+import { type Writable } from 'svelte/store';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ToastTheme = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export interface ToastData {
+    id: string;
+    position: ToastPosition;
+    header?: string;
+    message: string;
+    theme?: ToastTheme;
+    border?: boolean;
+    long?: boolean;
+    duration?: number;
+    width?: string | number;
+}
+export interface ToastOptions {
+    header?: string;
+    message: string;
+    theme?: ToastTheme;
+    border?: boolean;
+    long?: boolean;
+    duration?: number;
+    width?: string | number;
+    position?: ToastPosition;
+}
+export interface ToastContext {
+    toasts: Writable<ToastData[]>;
+    showToast: (options: ToastOptions) => string;
+    hideToast: (id: string) => void;
+}
+/**
+ * Create toast context for ToastProvider
+ * @returns Toast context with toasts store and methods
+ */
+export declare function createToastContext(): ToastContext;
+/**
+ * Get toast context from parent ToastProvider
+ * @returns Toast context
+ * @throws Error if used outside ToastProvider
+ */
+export declare function useToast(): ToastContext;
+declare const _default: {
+    createToastContext: typeof createToastContext;
+    useToast: typeof useToast;
+};
+export default _default;

package/dist/svelte/stores/toast.js

@@ -0,0 +1,55 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { getContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+var TOAST_KEY = Symbol('toast');
+/**
+ * Create toast context for ToastProvider
+ * @returns Toast context with toasts store and methods
+ */
+export function createToastContext() {
+    var toasts = writable([]);
+    var showToast = function (options) {
+        var id = "toast-".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2, 9));
+        var position = options.position || 'top-right';
+        toasts.update(function (items) { return __spreadArray(__spreadArray([], items, true), [__assign({ id: id, position: position }, options)], false); });
+        return id;
+    };
+    var hideToast = function (id) {
+        toasts.update(function (items) { return items.filter(function (t) { return t.id !== id; }); });
+    };
+    var context = { toasts: toasts, showToast: showToast, hideToast: hideToast };
+    setContext(TOAST_KEY, context);
+    return context;
+}
+/**
+ * Get toast context from parent ToastProvider
+ * @returns Toast context
+ * @throws Error if used outside ToastProvider
+ */
+export function useToast() {
+    var context = getContext(TOAST_KEY);
+    if (!context) {
+        throw new Error('useToast must be used within ToastProvider');
+    }
+    return context;
+}
+export default { createToastContext: createToastContext, useToast: useToast };

package/dist/svelte/stores/validation.d.ts

@@ -0,0 +1,15 @@
+import { type Readable } from 'svelte/store';
+import { z } from 'zod';
+export interface ValidationStore {
+    message: Readable<string>;
+    statusClass: Readable<string>;
+    validate: (value: string | number | undefined) => void;
+    reset: () => void;
+}
+/**
+ * Create a validation store for Zod schema validation
+ * @param validator - Zod schema for validation
+ * @returns Validation store with message, statusClass, validate, and reset
+ */
+export declare function createValidation(validator?: z.ZodType<unknown>): ValidationStore;
+export default createValidation;

package/dist/svelte/stores/validation.js

@@ -0,0 +1,38 @@
+import { writable } from 'svelte/store';
+import { z } from 'zod';
+/**
+ * Create a validation store for Zod schema validation
+ * @param validator - Zod schema for validation
+ * @returns Validation store with message, statusClass, validate, and reset
+ */
+export function createValidation(validator) {
+    var message = writable('');
+    var statusClass = writable('');
+    var reset = function () {
+        message.set('');
+        statusClass.set('');
+    };
+    var validate = function (value) {
+        reset();
+        if (!validator || !value) {
+            return;
+        }
+        try {
+            validator.parse(value);
+            statusClass.set('success');
+        }
+        catch (e) {
+            if (e instanceof z.ZodError) {
+                message.set(e.errors[0].message);
+                statusClass.set('danger');
+            }
+        }
+    };
+    return {
+        message: { subscribe: message.subscribe },
+        statusClass: { subscribe: statusClass.subscribe },
+        validate: validate,
+        reset: reset,
+    };
+}
+export default createValidation;

package/global.scss

@@ -32,6 +32,7 @@
 */
 @forward './scss/icon/icon';
 @forward './scss/icon/function';
+@use './scss/icon/icon';
 
 /*
   Button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.9.7",
+  "version": "1.0.2",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -44,6 +44,24 @@
       "import": "./dist/react/molecule/*.js",
       "default": "./dist/react/molecule/*.js"
     },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "svelte": "./dist/svelte/index.js",
+      "import": "./dist/svelte/index.js",
+      "default": "./dist/svelte/index.js"
+    },
+    "./svelte/atom/*": {
+      "types": "./dist/svelte/atom/*.d.ts",
+      "svelte": "./dist/svelte/atom/*.svelte",
+      "import": "./dist/svelte/atom/*.js",
+      "default": "./dist/svelte/atom/*.js"
+    },
+    "./svelte/molecule/*": {
+      "types": "./dist/svelte/molecule/*.d.ts",
+      "svelte": "./dist/svelte/molecule/*.svelte",
+      "import": "./dist/svelte/molecule/*.js",
+      "default": "./dist/svelte/molecule/*.js"
+    },
     "./global.scss": {
       "types": "./global.d.ts",
       "default": "./global.scss"
@@ -78,7 +96,8 @@
     "build:lib": "node ./cli/build-lib.js",
     "build:cdn": "node ./cli/build-cdn.js",
     "build:cdn-js": "node ./cli/build-cdn-js.js",
-    "build:all": "npm run build:lib && npm run build:cdn && npm run build:cdn-js",
+    "build:svelte": "node ./cli/build-svelte.js",
+    "build:all": "npm run build:lib && npm run build:svelte && npm run build:cdn && npm run build:cdn-js",
     "prepublishOnly": "npm run build:all",
     "lint": "eslint .",
     "icon": "node ./cli/icon-scss.js",
@@ -90,17 +109,21 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "sass": "^1.0.0"
+    "sass": "^1.0.0",
+    "svelte": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
-      "optional": false
+      "optional": true
     },
     "react-dom": {
-      "optional": false
+      "optional": true
     },
     "sass": {
       "optional": true
+    },
+    "svelte": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -109,6 +132,10 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "@eslint/js": "^9.8.0",
     "@playwright/test": "^1.56.1",
     "@testing-library/jest-dom": "^6.6.3",

package/vite-fonts.scss

@@ -4,6 +4,6 @@
 // 아이콘 폰트
 @font-face {
   font-family: 'podo-ui-icon';
-  src: url(podo-ui/scss/icon/font/icon.woff) format('woff');
+  src: url('./scss/icon/font/icon.woff') format('woff');
   font-display: swap;
 }