@colletdev/svelte 0.1.3

package/src/date-picker.svelte

@@ -0,0 +1,110 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-date-picker> -->
+<script lang="ts">
+  import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  label: string;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  selected?: string;
+  min?: string;
+  max?: string;
+  disabledDates?: string[] | string;
+  format?: 'iso' | 'us-short' | 'eu-short' | 'eu-dot';
+  firstDay?: 'monday' | 'sunday';
+  placeholder?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  name?: string;
+  onInput?: (event: CustomEvent<InputDetail>) => void;
+  onChange?: (event: CustomEvent<InputDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, label, variant, shape, size, selected, min, max, disabledDates, format, firstDay, placeholder, helperText, error, disabled, required, readonly, name, onInput, onChange, onFocus, onBlur, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (name != null) el.setAttribute('name', String(name));
+    else el.removeAttribute('name');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (disabledDates != null) el.setAttribute('disabled-dates', typeof disabledDates === 'object' ? JSON.stringify(disabledDates) : String(disabledDates));
+    else el.removeAttribute('disabled-dates');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onInput?.(e as CustomEvent);
+    el.addEventListener('cx-input', handler);
+    return () => el.removeEventListener('cx-input', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onFocus?.(e as CustomEvent);
+    el.addEventListener('cx-focus', handler);
+    return () => el.removeEventListener('cx-focus', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onBlur?.(e as CustomEvent);
+    el.addEventListener('cx-blur', handler);
+    return () => el.removeEventListener('cx-blur', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeydown?.(e as CustomEvent);
+    el.addEventListener('cx-keydown', handler);
+    return () => el.removeEventListener('cx-keydown', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeyup?.(e as CustomEvent);
+    el.addEventListener('cx-keyup', handler);
+    return () => el.removeEventListener('cx-keyup', handler);
+  });
+  /** Opens the calendar panel. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the calendar panel. */
+  export function close() { (el as any)?.close(); }
+  /** Focuses the trigger button. */
+  export function focus() { (el as any)?.focus(); }
+</script>
+
+<cx-date-picker
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  selected={typeof selected === 'object' && selected != null ? JSON.stringify(selected) : selected}
+  min={typeof min === 'object' && min != null ? JSON.stringify(min) : min}
+  max={typeof max === 'object' && max != null ? JSON.stringify(max) : max}
+  format={typeof format === 'object' && format != null ? JSON.stringify(format) : format}
+  first-day={typeof firstDay === 'object' && firstDay != null ? JSON.stringify(firstDay) : firstDay}
+  placeholder={typeof placeholder === 'object' && placeholder != null ? JSON.stringify(placeholder) : placeholder}
+  helper-text={typeof helperText === 'object' && helperText != null ? JSON.stringify(helperText) : helperText}
+  error={typeof error === 'object' && error != null ? JSON.stringify(error) : error}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  readonly={readonly || undefined}
+/>

package/src/date-picker.svelte.d.ts

@@ -0,0 +1,40 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
+
+interface DatePickerProps {
+  id?: string;
+  label: string;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  selected?: string;
+  min?: string;
+  max?: string;
+  disabledDates?: string[] | string;
+  format?: 'iso' | 'us-short' | 'eu-short' | 'eu-dot';
+  firstDay?: 'monday' | 'sunday';
+  placeholder?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  name?: string;
+  onInput?: (event: CustomEvent<InputDetail>) => void;
+  onChange?: (event: CustomEvent<InputDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const DatePicker: Component<DatePickerProps, {
+  /** Opens the calendar panel. */
+  open(): void;
+  /** Closes the calendar panel. */
+  close(): void;
+  /** Focuses the trigger button. */
+  focus(): void;
+}>;
+export default DatePicker;

package/src/dialog.svelte

@@ -0,0 +1,56 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-dialog> -->
+<script lang="ts">
+  import type { CloseDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  title?: string;
+  variant?: 'standard' | 'alert';
+  description?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  closeButton?: string;
+  drawer?: string;
+  onClose?: (event: CustomEvent<CloseDetail>) => void;
+  children?: import('svelte').Snippet;
+  footer?: import('svelte').Snippet;
+  }
+
+  let { id, title, variant, description, size, closeButton, drawer, onClose, children, footer }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (title != null) el.setAttribute('title', String(title));
+    else el.removeAttribute('title');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onClose?.(e as CustomEvent);
+    el.addEventListener('cx-close', handler);
+    return () => el.removeEventListener('cx-close', handler);
+  });
+  /** Opens the dialog modal with entrance animation. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the dialog modal with exit animation. */
+  export function close() { (el as any)?.close(); }
+</script>
+
+<cx-dialog
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  description={typeof description === 'object' && description != null ? JSON.stringify(description) : description}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  close-button={typeof closeButton === 'object' && closeButton != null ? JSON.stringify(closeButton) : closeButton}
+  drawer={typeof drawer === 'object' && drawer != null ? JSON.stringify(drawer) : drawer}
+>
+  {#if footer}
+    <div slot="footer" style="display:contents">{@render footer()}</div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+</cx-dialog>

package/src/dialog.svelte.d.ts

@@ -0,0 +1,24 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { CloseDetail } from './types.js';
+
+interface DialogProps {
+  id?: string;
+  title?: string;
+  variant?: 'standard' | 'alert';
+  description?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  closeButton?: string;
+  drawer?: string;
+  onClose?: (event: CustomEvent<CloseDetail>) => void;
+  children?: import('svelte').Snippet;
+  footer?: import('svelte').Snippet;
+}
+
+declare const Dialog: Component<DialogProps, {
+  /** Opens the dialog modal with entrance animation. */
+  open(): void;
+  /** Closes the dialog modal with exit animation. */
+  close(): void;
+}>;
+export default Dialog;

package/src/drawer.svelte

@@ -0,0 +1,56 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-drawer> -->
+<script lang="ts">
+  import type { CloseDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  title?: string;
+  description?: string;
+  side?: 'left' | 'right' | 'top' | 'bottom';
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  closeButton?: string;
+  onClose?: (event: CustomEvent<CloseDetail>) => void;
+  children?: import('svelte').Snippet;
+  footer?: import('svelte').Snippet;
+  }
+
+  let { id, title, description, side, size, shape, closeButton, onClose, children, footer }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (title != null) el.setAttribute('title', String(title));
+    else el.removeAttribute('title');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onClose?.(e as CustomEvent);
+    el.addEventListener('cx-close', handler);
+    return () => el.removeEventListener('cx-close', handler);
+  });
+  /** Opens the drawer panel with slide-in animation. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the drawer panel with slide-out animation. */
+  export function close() { (el as any)?.close(); }
+</script>
+
+<cx-drawer
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  description={typeof description === 'object' && description != null ? JSON.stringify(description) : description}
+  side={typeof side === 'object' && side != null ? JSON.stringify(side) : side}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  close-button={typeof closeButton === 'object' && closeButton != null ? JSON.stringify(closeButton) : closeButton}
+>
+  {#if footer}
+    <div slot="footer" style="display:contents">{@render footer()}</div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+</cx-drawer>

package/src/drawer.svelte.d.ts

@@ -0,0 +1,24 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { CloseDetail } from './types.js';
+
+interface DrawerProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  side?: 'left' | 'right' | 'top' | 'bottom';
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  closeButton?: string;
+  onClose?: (event: CustomEvent<CloseDetail>) => void;
+  children?: import('svelte').Snippet;
+  footer?: import('svelte').Snippet;
+}
+
+declare const Drawer: Component<DrawerProps, {
+  /** Opens the drawer panel with slide-in animation. */
+  open(): void;
+  /** Closes the drawer panel with slide-out animation. */
+  close(): void;
+}>;
+export default Drawer;