ui-svelte 0.1.0

package/dist/overlay/css/tooltip.css

@@ -0,0 +1,89 @@
+@layer components {
+	.tooltip {
+		@apply relative w-fit;
+	}
+
+	.tooltip-popover {
+		@apply flex items-center gap-2 px-3 py-2;
+		@apply rounded-ui text-sm;
+		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
+		@apply shadow shadow-muted;
+		@apply whitespace-nowrap;
+		position: fixed;
+		z-index: 9999;
+		pointer-events: none;
+	}
+
+	.tooltip-popover.is-active {
+		@apply visible opacity-100;
+	}
+
+	.tooltip-popover.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.tooltip-popover.is-solid.is-primary {
+		@apply bg-primary text-on-primary;
+	}
+
+	.tooltip-popover.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.tooltip-popover.is-solid.is-secondary {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.tooltip-popover.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.tooltip-popover.is-solid.is-muted {
+		@apply bg-on-muted text-muted;
+	}
+
+	.tooltip-arrow {
+		@apply absolute w-2 h-2 rotate-45;
+		position: absolute;
+	}
+
+	.tooltip-arrow.is-primary {
+		@apply bg-on-primary;
+	}
+
+	.tooltip-arrow.is-solid.is-primary {
+		@apply bg-primary;
+	}
+
+	.tooltip-arrow.is-secondary {
+		@apply bg-on-secondary;
+	}
+
+	.tooltip-arrow.is-solid.is-secondary {
+		@apply bg-secondary;
+	}
+
+	.tooltip-arrow.is-muted {
+		@apply bg-muted;
+	}
+
+	.tooltip-arrow.is-solid.is-muted {
+		@apply bg-on-muted;
+	}
+
+	.tooltip-popover.position-top .tooltip-arrow {
+		@apply -bottom-1 left-1/2 -translate-x-1/2;
+	}
+
+	.tooltip-popover.position-bottom .tooltip-arrow {
+		@apply -top-1 left-1/2 -translate-x-1/2;
+	}
+
+	.tooltip-popover.position-start .tooltip-arrow {
+		@apply -right-1 top-1/2 -translate-y-1/2;
+	}
+
+	.tooltip-popover.position-end .tooltip-arrow {
+		@apply -left-1 top-1/2 -translate-y-1/2;
+	}
+}

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

@@ -0,0 +1,16 @@
+export declare const initLanguage: (options?: {}) => Promise<void>;
+export declare const setLanguage: (lang: string) => Promise<void>;
+export declare const t: (key: string, params?: Record<string, any>) => string;
+export declare const plural: (key: string, count: number, params?: Record<string, any>) => string;
+export declare const formatDate: (date: Date | string | number, options?: Intl.DateTimeFormatOptions) => string;
+export declare const formatNumber: (number: number, options?: Intl.NumberFormatOptions) => string;
+export declare const formatCurrency: (amount: number, currency?: string, options?: Intl.NumberFormatOptions) => string;
+export declare const getWeekdays: (format?: "short" | "long" | "narrow") => string[];
+export declare const i18n: () => {
+    readonly language: string;
+    readonly translations: {};
+    readonly isLoading: boolean;
+    readonly availableLanguages: string[];
+    setLanguage: (lang: string) => Promise<void>;
+    t: (key: string, params?: Record<string, any>) => string;
+};

package/dist/stores/i18n.svelte.js

@@ -0,0 +1,137 @@
+import { browser } from '$app/environment';
+let config = {
+    defaultLanguage: 'en',
+    availableLanguages: ['en']
+};
+let currentLanguage = $state(config.defaultLanguage);
+let translations = $state({});
+let isLoading = $state(false);
+let isInitialized = $state(false);
+export const initLanguage = async (options = {}) => {
+    config = {
+        defaultLanguage: 'en',
+        availableLanguages: ['en', 'es', 'fr'],
+        ...options
+    };
+    if (isInitialized) {
+        return;
+    }
+    let targetLanguage = config.defaultLanguage;
+    if (browser) {
+        const storedLang = localStorage.getItem('language');
+        if (storedLang && config.availableLanguages.includes(storedLang)) {
+            targetLanguage = storedLang;
+        }
+        else {
+            const browserLang = navigator.language.split('-')[0];
+            if (config.availableLanguages.includes(browserLang)) {
+                targetLanguage = browserLang;
+            }
+        }
+    }
+    await setLanguage(targetLanguage);
+    isInitialized = true;
+};
+export const setLanguage = async (lang) => {
+    if (!config.availableLanguages.includes(lang)) {
+        console.warn(`Idioma '${lang}' no disponible. Usando: ${config.defaultLanguage}`);
+        lang = config.defaultLanguage;
+    }
+    if (currentLanguage === lang && Object.keys(translations).length > 0) {
+        return;
+    }
+    isLoading = true;
+    try {
+        const module = await import(`$lib/locales/${lang}.ts`);
+        translations = module.default;
+        currentLanguage = lang;
+        if (browser) {
+            localStorage.setItem('language', lang);
+            document.documentElement.lang = lang;
+        }
+    }
+    catch (error) {
+        console.error(`Error cargando idioma '${lang}':`, error);
+        if (lang !== config.defaultLanguage) {
+            await setLanguage(config.defaultLanguage);
+            return;
+        }
+    }
+    finally {
+        isLoading = false;
+    }
+};
+export const t = (key, params = {}) => {
+    if (!translations || Object.keys(translations).length === 0) {
+        return '';
+    }
+    const translation = getNestedTranslation(translations, key);
+    if (!translation) {
+        return key;
+    }
+    return interpolate(translation, params);
+};
+export const plural = (key, count, params = {}) => {
+    const pluralKey = count === 1 ? `${key}.singular` : `${key}.plural`;
+    return t(pluralKey, { ...params, count });
+};
+export const formatDate = (date, options = {}) => {
+    return new Intl.DateTimeFormat(currentLanguage, options).format(new Date(date));
+};
+export const formatNumber = (number, options = {}) => {
+    return new Intl.NumberFormat(currentLanguage, options).format(number);
+};
+export const formatCurrency = (amount, currency = 'USD', options = {}) => {
+    return new Intl.NumberFormat(currentLanguage, {
+        style: 'currency',
+        currency,
+        ...options
+    }).format(amount);
+};
+export const getWeekdays = (format = 'short') => {
+    const weekdays = [];
+    for (let i = 0; i < 7; i++) {
+        const date = new Date(2024, 0, i);
+        const weekday = new Intl.DateTimeFormat(currentLanguage, {
+            weekday: format
+        }).format(date);
+        weekdays.push(weekday);
+    }
+    return weekdays;
+};
+export const i18n = () => {
+    return {
+        get language() {
+            return currentLanguage;
+        },
+        get translations() {
+            return translations;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get availableLanguages() {
+            return config.availableLanguages;
+        },
+        setLanguage,
+        t
+    };
+};
+const getNestedTranslation = (obj, key) => {
+    const keys = key.split('.');
+    let current = obj;
+    for (const k of keys) {
+        if (current && typeof current === 'object') {
+            current = current[k];
+        }
+        else {
+            return undefined;
+        }
+    }
+    return typeof current === 'string' ? current : undefined;
+};
+const interpolate = (text, params) => {
+    return text.replace(/\{\{(\w+)\}\}/g, (match, param) => {
+        return params[param] !== undefined ? params[param] : match;
+    });
+};

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

@@ -0,0 +1,5 @@
+export declare const theme: {
+    readonly state: "dark" | "light";
+    readonly isDark: boolean;
+    toggleTheme: () => void;
+};

package/dist/stores/theme.svelte.js

@@ -0,0 +1,55 @@
+const THEME_STORAGE_KEY = 'theme-preference';
+const DARK_CLASS = 'dark';
+let themeState = $state('light');
+let isDark = $state(false);
+const getInitialTheme = () => {
+    if (typeof window === 'undefined') {
+        return 'light';
+    }
+    const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+    if (storedTheme === 'dark' || storedTheme === 'light') {
+        return storedTheme;
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+    }
+    return 'light';
+};
+const initializeTheme = () => {
+    const initialTheme = getInitialTheme();
+    themeState = initialTheme;
+    isDark = initialTheme === 'dark';
+    if (typeof window !== 'undefined') {
+        const htmlElement = document.documentElement;
+        if (isDark) {
+            htmlElement.classList.add(DARK_CLASS);
+        }
+        else {
+            htmlElement.classList.remove(DARK_CLASS);
+        }
+    }
+};
+initializeTheme();
+const toggleTheme = () => {
+    themeState = themeState === 'light' ? 'dark' : 'light';
+    isDark = themeState === 'dark';
+    const htmlElement = document.documentElement;
+    if (isDark) {
+        htmlElement.classList.add(DARK_CLASS);
+    }
+    else {
+        htmlElement.classList.remove(DARK_CLASS);
+    }
+    if (typeof window !== 'undefined') {
+        localStorage.setItem(THEME_STORAGE_KEY, themeState);
+    }
+};
+export const theme = {
+    get state() {
+        return themeState;
+    },
+    get isDark() {
+        return isDark;
+    },
+    toggleTheme
+};

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

@@ -0,0 +1,19 @@
+import type { IconName } from '../types.js';
+export interface ToastMessage {
+    id: string;
+    icon?: IconName;
+    title?: string;
+    description: string;
+    duration?: number;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    isSolid?: boolean;
+    status: 'success' | 'danger' | 'info' | 'warning';
+}
+export declare const toast: {
+    readonly messages: ToastMessage[];
+    show: (message: Omit<ToastMessage, "id"> & {
+        id?: string;
+    }) => string;
+    close: (id: string) => void;
+    closeAll: () => void;
+};

package/dist/stores/toast.svelte.js

@@ -0,0 +1,38 @@
+let toastMessages = $state([]);
+const generateId = () => {
+    return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+};
+const toastShow = (message) => {
+    const id = message.id || generateId();
+    const newMessage = {
+        id,
+        title: message.title,
+        description: message.description,
+        status: message.status || 'info',
+        duration: message.duration || 0,
+        icon: message.icon,
+        position: message.position,
+        isSolid: message.isSolid
+    };
+    toastMessages = [...toastMessages, newMessage];
+    if (newMessage.duration && newMessage.duration > 0) {
+        setTimeout(() => {
+            toastClose(id);
+        }, newMessage.duration);
+    }
+    return id;
+};
+const toastClose = (id) => {
+    toastMessages = toastMessages.filter((m) => m.id !== id);
+};
+const toastCloseAll = () => {
+    toastMessages = [];
+};
+export const toast = {
+    get messages() {
+        return toastMessages;
+    },
+    show: toastShow,
+    close: toastClose,
+    closeAll: toastCloseAll
+};

package/dist/types.d.ts

@@ -0,0 +1,75 @@
+export interface DatePosition {
+    top: number;
+    left: number;
+    width: string | number;
+    origin: string;
+}
+export interface DateFormatOptions {
+    year?: 'numeric' | '2-digit';
+    month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+    day?: 'numeric' | '2-digit';
+}
+export type Scale = (value: number) => number;
+export type BandScale = ((value: string) => number) & {
+    bandwidth: () => number;
+    step: () => number;
+};
+export interface ChartConfig {
+    [key: string]: {
+        label: string;
+        color: string;
+        icon?: string;
+    };
+}
+export interface ChartDataPoint {
+    [key: string]: string | number;
+}
+export interface ChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export type ChartData = ChartDataPoint[];
+export interface ChartProps {
+    data: ChartData;
+    config: ChartConfig;
+    className?: string;
+    width?: number;
+    height?: number;
+}
+export interface BarChartProps extends ChartProps {
+    xKey: string;
+    yKeys: string[];
+    showGrid?: boolean;
+    showAxis?: boolean;
+    barSpacing?: number;
+}
+export interface LineChartProps extends ChartProps {
+    xKey: string;
+    yKeys: string[];
+    showGrid?: boolean;
+    showAxis?: boolean;
+    smooth?: boolean;
+    showDots?: boolean;
+}
+export interface PieChartProps extends ChartProps {
+    valueKey: string;
+    labelKey: string;
+    showLabels?: boolean;
+    innerRadius?: number;
+}
+export interface AreaChartProps extends ChartProps {
+    xKey: string;
+    yKeys: string[];
+    showGrid?: boolean;
+    showAxis?: boolean;
+    smooth?: boolean;
+    stacked?: boolean;
+}
+export interface DoughnutChartProps extends ChartProps {
+    valueKey: string;
+    labelKey: string;
+    showLabels?: boolean;
+    innerRadius?: number;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/charts.d.ts

@@ -0,0 +1,27 @@
+import type { BandScale, ChartMargin, Scale } from '../types.js';
+export declare function calculateDomain(data: any[], key: string): [number, number];
+export declare function createLinearScale(domain: [number, number], range: [number, number]): Scale;
+export declare function createBandScale(domain: string[], range: [number, number], padding?: number): BandScale;
+export declare const DEFAULT_MARGIN: ChartMargin;
+export declare function getChartDimensions(width: number, height: number, margin: ChartMargin): {
+    width: number;
+    height: number;
+};
+export declare function generateGridLines(domain: [number, number], scale: Scale, count?: number): Array<{
+    value: number;
+    position: number;
+}>;
+export declare function polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number): {
+    x: number;
+    y: number;
+};
+export declare function createArcPath(centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number, innerRadius?: number): string;
+export declare function createSmoothPath(points: Array<{
+    x: number;
+    y: number;
+}>): string;
+export declare function createLinearPath(points: Array<{
+    x: number;
+    y: number;
+}>): string;
+export declare function generateColors(count: number): string[];

package/dist/utils/charts.js

@@ -0,0 +1,140 @@
+export function calculateDomain(data, key) {
+    const values = data.map((d) => Number(d[key])).filter((v) => !isNaN(v));
+    if (values.length === 0)
+        return [0, 1];
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const padding = (max - min) * 0.1;
+    return [Math.min(0, min - padding), max + padding];
+}
+export function createLinearScale(domain, range) {
+    const [domainMin, domainMax] = domain;
+    const [rangeMin, rangeMax] = range;
+    return (value) => {
+        if (domainMax === domainMin)
+            return rangeMin;
+        const ratio = (value - domainMin) / (domainMax - domainMin);
+        return rangeMin + ratio * (rangeMax - rangeMin);
+    };
+}
+export function createBandScale(domain, range, padding = 0.1) {
+    const [rangeMin, rangeMax] = range;
+    const rangeSize = rangeMax - rangeMin;
+    const step = rangeSize / domain.length;
+    const bandwidth = step * (1 - padding);
+    const paddingOuter = (step * padding) / 2;
+    const scale = (value) => {
+        const index = domain.indexOf(value);
+        return rangeMin + paddingOuter + index * step;
+    };
+    scale.bandwidth = () => bandwidth;
+    scale.step = () => step;
+    return scale;
+}
+export const DEFAULT_MARGIN = {
+    top: 20,
+    right: 30,
+    bottom: 40,
+    left: 40
+};
+export function getChartDimensions(width, height, margin) {
+    return {
+        width: width - margin.left - margin.right,
+        height: height - margin.top - margin.bottom
+    };
+}
+export function generateGridLines(domain, scale, count = 5) {
+    const [min, max] = domain;
+    return Array.from({ length: count + 1 }, (_, i) => {
+        const value = min + ((max - min) * i) / count;
+        return {
+            value,
+            position: scale(value)
+        };
+    });
+}
+export function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+    return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians)
+    };
+}
+export function createArcPath(centerX, centerY, radius, startAngle, endAngle, innerRadius = 0) {
+    const start = polarToCartesian(centerX, centerY, radius, endAngle);
+    const end = polarToCartesian(centerX, centerY, radius, startAngle);
+    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+    if (innerRadius > 0) {
+        // Donut/doughnut chart
+        const innerStart = polarToCartesian(centerX, centerY, innerRadius, endAngle);
+        const innerEnd = polarToCartesian(centerX, centerY, innerRadius, startAngle);
+        return [
+            'M',
+            start.x,
+            start.y,
+            'A',
+            radius,
+            radius,
+            0,
+            largeArcFlag,
+            0,
+            end.x,
+            end.y,
+            'L',
+            innerEnd.x,
+            innerEnd.y,
+            'A',
+            innerRadius,
+            innerRadius,
+            0,
+            largeArcFlag,
+            1,
+            innerStart.x,
+            innerStart.y,
+            'Z'
+        ].join(' ');
+    }
+    else {
+        return [
+            'M',
+            centerX,
+            centerY,
+            'L',
+            start.x,
+            start.y,
+            'A',
+            radius,
+            radius,
+            0,
+            largeArcFlag,
+            0,
+            end.x,
+            end.y,
+            'Z'
+        ].join(' ');
+    }
+}
+export function createSmoothPath(points) {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const controlPointX = (prev.x + curr.x) / 2;
+        path += ` Q ${controlPointX} ${prev.y} ${curr.x} ${curr.y}`;
+    }
+    return path;
+}
+export function createLinearPath(points) {
+    if (points.length === 0)
+        return '';
+    return points
+        .map((point, i) => (i === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`))
+        .join(' ');
+}
+export function generateColors(count) {
+    return Array.from({ length: count }, (_, i) => `hsl(${(i * 360) / count}, 70%, 50%)`);
+}

package/dist/utils/class-names.d.ts

@@ -0,0 +1 @@
+export declare const cn: (...classes: (string | boolean | undefined)[]) => string;

package/dist/utils/class-names.js

@@ -0,0 +1,3 @@
+export const cn = (...classes) => {
+    return classes.filter(Boolean).join(' ');
+};

package/dist/utils/click-outside.d.ts

@@ -0,0 +1,3 @@
+export declare const clickOutside: (node: HTMLElement, handler: () => void) => {
+    destroy: () => void;
+};

package/dist/utils/click-outside.js

@@ -0,0 +1,9 @@
+export const clickOutside = (node, handler) => {
+    const onClick = (event) => node && !node.contains(event.target) && handler();
+    document.addEventListener('click', onClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', onClick, true);
+        }
+    };
+};

package/dist/utils/popover.d.ts

@@ -0,0 +1,3 @@
+export declare const popover: (node: HTMLElement) => {
+    destroy: () => void;
+};

package/dist/utils/popover.js

@@ -0,0 +1,17 @@
+export const popover = (node) => {
+    const targetEl = document.body;
+    const hadScroll = document.documentElement.scrollHeight > window.innerHeight;
+    node.id = 'popover';
+    targetEl?.appendChild(node);
+    if (hadScroll) {
+        targetEl.classList.add('had-scroll');
+    }
+    return {
+        destroy() {
+            if (hadScroll) {
+                targetEl.classList.remove('had-scroll');
+            }
+            node.remove();
+        }
+    };
+};

package/dist/utils/ulid.d.ts

@@ -0,0 +1 @@
+export declare const generateULID: () => string;

package/dist/utils/ulid.js

@@ -0,0 +1,22 @@
+const CHARSET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+export const generateULID = () => {
+    const timestamp = Date.now();
+    const timestampPart = encodeTime(timestamp);
+    const randomPart = encodeRandom();
+    return timestampPart + randomPart;
+};
+function encodeTime(timestamp) {
+    const encoded = new Array(10);
+    for (let i = 9; i >= 0; i--) {
+        encoded[i] = CHARSET[timestamp & 31];
+        timestamp = Math.floor(timestamp / 32);
+    }
+    return encoded.join('');
+}
+function encodeRandom() {
+    const encoded = new Array(16);
+    for (let i = 0; i < 16; i++) {
+        encoded[i] = CHARSET[Math.floor(Math.random() * 32)];
+    }
+    return encoded.join('');
+}

package/dist/utils/validate-schema.d.ts

@@ -0,0 +1,2 @@
+import type { ValidationRules } from '../hooks/use-form.svelte.js';
+export declare const validateSchema: (body: Record<string, any>, rules: ValidationRules) => Record<string, string>;