podo-ui 0.9.7 → 1.0.2

package/dist/svelte/atom/Editor.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { z } from 'zod';
+export type ToolbarItem = 'undo-redo' | 'paragraph' | 'text-style' | 'color' | 'align' | 'list' | 'table' | 'link' | 'image' | 'youtube' | 'hr' | 'format' | 'code';
+interface Props {
+    /** HTML content */
+    value?: string;
+    /** Editor width */
+    width?: string;
+    /** Editor height */
+    height?: string | 'contents';
+    /** Minimum height */
+    minHeight?: string;
+    /** Maximum height */
+    maxHeight?: string;
+    /** Allow resizing */
+    resizable?: boolean;
+    /** Change handler */
+    onchange?: (content: string) => void;
+    /** Zod validator */
+    validator?: z.ZodType<unknown>;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Toolbar items to show */
+    toolbar?: ToolbarItem[];
+    /** Additional class name */
+    class?: string;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Editor: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/svelte/atom/EditorView.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import styles from './editor-view.module.scss';
+
+  interface Props {
+    /** HTML content to render */
+    value: string;
+    /** Additional class name */
+    class?: string;
+  }
+
+  let { value, class: className = '' }: Props = $props();
+</script>
+
+<div class="{styles.editorView} {className}">
+  {@html value}
+</div>

package/dist/svelte/atom/EditorView.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** HTML content to render */
+    value: string;
+    /** Additional class name */
+    class?: string;
+}
+declare const EditorView: import("svelte").Component<Props, {}, "">;
+type EditorView = ReturnType<typeof EditorView>;
+export default EditorView;

package/dist/svelte/atom/File.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends Omit<HTMLInputAttributes, 'type'> {
+    /** Accepted file types (e.g., "image/*", ".pdf") */
+    accept?: string;
+    /** Allow multiple file selection */
+    multiple?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+  }
+
+  let {
+    accept,
+    multiple = false,
+    disabled = false,
+    class: className,
+    element = $bindable(),
+    ...rest
+  }: Props = $props();
+</script>
+
+<input
+  bind:this={element}
+  type="file"
+  {accept}
+  {multiple}
+  {disabled}
+  class={className}
+  {...rest}
+/>

package/dist/svelte/atom/File.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'type'> {
+    /** Accepted file types (e.g., "image/*", ".pdf") */
+    accept?: string;
+    /** Allow multiple file selection */
+    multiple?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+}
+declare const File: import("svelte").Component<Props, {}, "element">;
+type File = ReturnType<typeof File>;
+export default File;

package/dist/svelte/atom/Input.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { z } from 'zod';
+  import { createValidation } from '../stores/validation';
+  import styles from './input.module.scss';
+
+  interface Props extends HTMLInputAttributes {
+    /** Input value */
+    value?: string | number;
+    /** Zod validator */
+    validator?: z.ZodType<unknown>;
+    /** Left icon class name */
+    withIcon?: string;
+    /** Right icon class name */
+    withRightIcon?: string;
+    /** Unit text (e.g., "원", "kg") */
+    unit?: string;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+  }
+
+  let {
+    validator,
+    value = $bindable(''),
+    class: className = '',
+    withIcon,
+    withRightIcon,
+    unit,
+    type = 'text',
+    id,
+    element = $bindable(),
+    ...rest
+  }: Props = $props();
+
+  const { message, statusClass, validate } = createValidation(validator);
+
+  let inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;
+  let errorId = `${inputId}-error`;
+
+  $effect(() => {
+    validate(value);
+  });
+
+  let wrapperClass = $derived(
+    [className, withIcon && 'with-icon', withRightIcon && 'with-right-icon']
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let inputClass = $derived([$statusClass, className].filter(Boolean).join(' '));
+</script>
+
+<div class="{styles.style} {className}">
+  <div class={wrapperClass}>
+    {#if withIcon}
+      <i class={withIcon}></i>
+    {/if}
+    <input
+      bind:this={element}
+      id={inputId}
+      {type}
+      bind:value
+      class={inputClass}
+      aria-invalid={$statusClass === 'danger' ? true : undefined}
+      aria-describedby={$message ? errorId : rest['aria-describedby']}
+      {...rest}
+    />
+    {#if withRightIcon}
+      <i class={withRightIcon}></i>
+    {/if}
+    {#if unit}
+      <span class="unit">{unit}</span>
+    {/if}
+  </div>
+  {#if validator && $message !== ''}
+    <div id={errorId} class="validator" role="alert">
+      {$message}
+    </div>
+  {/if}
+</div>

package/dist/svelte/atom/Input.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { z } from 'zod';
+interface Props extends HTMLInputAttributes {
+    /** Input value */
+    value?: string | number;
+    /** Zod validator */
+    validator?: z.ZodType<unknown>;
+    /** Left icon class name */
+    withIcon?: string;
+    /** Right icon class name */
+    withRightIcon?: string;
+    /** Unit text (e.g., "원", "kg") */
+    unit?: string;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+}
+declare const Input: import("svelte").Component<Props, {}, "value" | "element">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/svelte/atom/Label.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLLabelAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLLabelAttributes {
+    /** Label text content */
+    children: Snippet;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Semibold font weight */
+    semibold?: boolean;
+    /** Show required indicator (*) */
+    required?: boolean;
+    /** Disabled style */
+    disabled?: boolean;
+    /** Associated input id */
+    for?: string;
+  }
+
+  let {
+    children,
+    size = 'md',
+    semibold = false,
+    required = false,
+    disabled = false,
+    for: htmlFor,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let labelClass = $derived(
+    [size !== 'md' && size, semibold && 'semibold', disabled && 'disabled', className]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<label for={htmlFor} class={labelClass || undefined} {...rest}>
+  {@render children()}
+  {#if required}
+    <span class="required">*</span>
+  {/if}
+</label>

package/dist/svelte/atom/Label.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+interface Props extends HTMLLabelAttributes {
+    /** Label text content */
+    children: Snippet;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Semibold font weight */
+    semibold?: boolean;
+    /** Show required indicator (*) */
+    required?: boolean;
+    /** Disabled style */
+    disabled?: boolean;
+    /** Associated input id */
+    for?: string;
+}
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/svelte/atom/Radio.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  export interface RadioGroupOption {
+    /** Option value */
+    value: string;
+    /** Option label */
+    label: string;
+    /** Disabled state */
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends Omit<HTMLInputAttributes, 'type' | 'name' | 'value'> {
+    /** Checked state */
+    checked?: boolean;
+    /** Group name (required for grouping) */
+    name: string;
+    /** Radio value */
+    value: string;
+    /** Label text */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+  }
+
+  let {
+    checked = $bindable(false),
+    name,
+    value,
+    label,
+    disabled = false,
+    class: className,
+    element = $bindable(),
+    ...rest
+  }: Props = $props();
+</script>
+
+{#if label}
+  <label>
+    <input
+      bind:this={element}
+      type="radio"
+      {name}
+      {value}
+      {checked}
+      onchange={(e) => checked = e.currentTarget.checked}
+      {disabled}
+      class={className}
+      {...rest}
+    />
+    <span>{label}</span>
+  </label>
+{:else}
+  <input
+    bind:this={element}
+    type="radio"
+    {name}
+    {value}
+    {checked}
+    onchange={(e) => checked = e.currentTarget.checked}
+    {disabled}
+    class={className}
+    {...rest}
+  />
+{/if}

package/dist/svelte/atom/Radio.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface RadioGroupOption {
+    /** Option value */
+    value: string;
+    /** Option label */
+    label: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'name' | 'value'> {
+    /** Checked state */
+    checked?: boolean;
+    /** Group name (required for grouping) */
+    name: string;
+    /** Radio value */
+    value: string;
+    /** Label text */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+}
+declare const Radio: import("svelte").Component<Props, {}, "element" | "checked">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/svelte/atom/RadioGroup.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { RadioGroupOption } from './Radio.svelte';
+  import Radio from './Radio.svelte';
+
+  interface Props {
+    /** Group name */
+    name: string;
+    /** Current selected value */
+    value?: string;
+    /** Option list */
+    options: RadioGroupOption[];
+    /** Vertical layout */
+    vertical?: boolean;
+    /** Additional class name */
+    class?: string;
+  }
+
+  let {
+    name,
+    value = $bindable(''),
+    options,
+    vertical = false,
+    class: className = '',
+  }: Props = $props();
+
+  let groupClass = $derived(
+    ['radio-group', vertical && 'vertical', className].filter(Boolean).join(' ')
+  );
+
+  function handleChange(optionValue: string) {
+    value = optionValue;
+  }
+</script>
+
+<div class={groupClass || undefined}>
+  {#each options as option (option.value)}
+    <Radio
+      {name}
+      value={option.value}
+      label={option.label}
+      checked={value === option.value}
+      disabled={option.disabled}
+      onchange={() => handleChange(option.value)}
+    />
+  {/each}
+</div>

package/dist/svelte/atom/RadioGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { RadioGroupOption } from './Radio.svelte';
+interface Props {
+    /** Group name */
+    name: string;
+    /** Current selected value */
+    value?: string;
+    /** Option list */
+    options: RadioGroupOption[];
+    /** Vertical layout */
+    vertical?: boolean;
+    /** Additional class name */
+    class?: string;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/svelte/atom/Select.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { HTMLSelectAttributes } from 'svelte/elements';
+
+  export interface SelectOption {
+    /** Option value */
+    value: string;
+    /** Option label */
+    label: string;
+    /** Disabled state */
+    disabled?: boolean;
+  }
+
+  interface Props extends Omit<HTMLSelectAttributes, 'children'> {
+    /** Current value */
+    value?: string;
+    /** Option list */
+    options: SelectOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Left icon class name */
+    withIcon?: string;
+    /** Element reference for bind:this */
+    element?: HTMLSelectElement;
+  }
+
+  let {
+    value = $bindable(''),
+    options,
+    placeholder,
+    disabled = false,
+    withIcon,
+    class: className,
+    element = $bindable(),
+    ...rest
+  }: Props = $props();
+</script>
+
+{#if withIcon}
+  <div class="with-icon">
+    <i class={withIcon}></i>
+    <select bind:this={element} bind:value {disabled} class={className} {...rest}>
+      {#if placeholder}
+        <option value="" disabled>{placeholder}</option>
+      {/if}
+      {#each options as option (option.value)}
+        <option value={option.value} disabled={option.disabled}>
+          {option.label}
+        </option>
+      {/each}
+    </select>
+  </div>
+{:else}
+  <select bind:this={element} bind:value {disabled} class={className} {...rest}>
+    {#if placeholder}
+      <option value="" disabled>{placeholder}</option>
+    {/if}
+    {#each options as option (option.value)}
+      <option value={option.value} disabled={option.disabled}>
+        {option.label}
+      </option>
+    {/each}
+  </select>
+{/if}

package/dist/svelte/atom/Select.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+export interface SelectOption {
+    /** Option value */
+    value: string;
+    /** Option label */
+    label: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+interface Props extends Omit<HTMLSelectAttributes, 'children'> {
+    /** Current value */
+    value?: string;
+    /** Option list */
+    options: SelectOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Left icon class name */
+    withIcon?: string;
+    /** Element reference for bind:this */
+    element?: HTMLSelectElement;
+}
+declare const Select: import("svelte").Component<Props, {}, "value" | "element">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/svelte/atom/Textarea.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+  import type { z } from 'zod';
+  import { createValidation } from '../stores/validation';
+  import styles from './textarea.module.scss';
+
+  interface Props extends HTMLTextareaAttributes {
+    /** Textarea value */
+    value?: string;
+    /** Zod validator */
+    validator?: z.ZodType<unknown>;
+    /** Element reference for bind:this */
+    element?: HTMLTextAreaElement;
+  }
+
+  let {
+    validator,
+    value = $bindable(''),
+    class: className = '',
+    id,
+    element = $bindable(),
+    ...rest
+  }: Props = $props();
+
+  const { message, statusClass, validate } = createValidation(validator);
+
+  let textareaId = id || `textarea-${Math.random().toString(36).slice(2, 9)}`;
+  let errorId = `${textareaId}-error`;
+
+  function handleKeyup() {
+    validate(value);
+  }
+
+  let textareaClass = $derived([$statusClass, className].filter(Boolean).join(' '));
+</script>
+
+<div class="{styles.style} {className}">
+  <textarea
+    bind:this={element}
+    id={textareaId}
+    bind:value
+    class={textareaClass}
+    onkeyup={handleKeyup}
+    aria-invalid={$statusClass === 'danger' ? true : undefined}
+    aria-describedby={$message ? errorId : rest['aria-describedby']}
+    {...rest}
+  ></textarea>
+  {#if validator && $message !== ''}
+    <div id={errorId} class="validator" role="alert">
+      {$message}
+    </div>
+  {/if}
+</div>

package/dist/svelte/atom/Textarea.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { z } from 'zod';
+interface Props extends HTMLTextareaAttributes {
+    /** Textarea value */
+    value?: string;
+    /** Zod validator */
+    validator?: z.ZodType<unknown>;
+    /** Element reference for bind:this */
+    element?: HTMLTextAreaElement;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value" | "element">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/svelte/atom/Toggle.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends Omit<HTMLInputAttributes, 'type'> {
+    /** Checked state */
+    checked?: boolean;
+    /** Label text */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+  }
+
+  let {
+    checked = $bindable(false),
+    label,
+    disabled = false,
+    class: className = '',
+    element = $bindable(),
+    ...rest
+  }: Props = $props();
+
+  let toggleClass = $derived(['toggle', className].filter(Boolean).join(' '));
+</script>
+
+{#if label}
+  <label>
+    <input
+      bind:this={element}
+      type="checkbox"
+      class={toggleClass}
+      bind:checked
+      {disabled}
+      {...rest}
+    />
+    <span>{label}</span>
+  </label>
+{:else}
+  <input
+    bind:this={element}
+    type="checkbox"
+    class={toggleClass}
+    bind:checked
+    {disabled}
+    {...rest}
+  />
+{/if}

package/dist/svelte/atom/Toggle.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'type'> {
+    /** Checked state */
+    checked?: boolean;
+    /** Label text */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+}
+declare const Toggle: import("svelte").Component<Props, {}, "element" | "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;