@lumen-design/alert 0.0.2

package/dist/Alert.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { IconNode } from 'lucide'
+    import { CheckCircle, AlertTriangle, AlertCircle, Info, X } from 'lucide'
+    import Icon from '@lumen-design/icon'
+
+    interface AlertProps {
+        type?: 'info' | 'success' | 'warning' | 'danger'
+        title?: string
+        closable?: boolean
+        showIcon?: boolean
+        center?: boolean
+        closeText?: string
+        duration?: number
+        children?: Snippet
+        onclose?: () => void
+        class?: string
+    }
+
+    const ICON_MAP: Record<string, IconNode> = {
+        success: CheckCircle,
+        warning: AlertTriangle,
+        danger: AlertCircle,
+        info: Info,
+    }
+
+    let { type = 'info', title, closable = false, showIcon = true, center = false, closeText, duration = 0, children, onclose, class: cls = '', ...attrs }: AlertProps = $props()
+
+    let visible = $state(true)
+
+    let timer: ReturnType<typeof setTimeout> | null = null
+
+    const classes = $derived(`lm-alert lm-alert--${type}${!visible ? ' is-hidden' : ''}${center ? ' is-center' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleClose = (): void => {
+        visible = false
+        onclose?.()
+    }
+
+    $effect(() => {
+        if (!visible || !duration || duration <= 0) return
+        if (timer) clearTimeout(timer)
+        timer = setTimeout(handleClose, duration)
+        return () => {
+            if (timer) clearTimeout(timer)
+        }
+    })
+</script>
+
+{#if visible}
+    <div {...attrs} class={classes} role="alert">
+        {#if showIcon}
+            <div class="lm-alert__icon">
+                <Icon icon={ICON_MAP[type]} size={20} />
+            </div>
+        {/if}
+        <div class="lm-alert__content">
+            {#if title}
+                <div class="lm-alert__title">{title}</div>
+            {/if}
+            {#if children}
+                <div class="lm-alert__description">
+                    {@render children()}
+                </div>
+            {/if}
+        </div>
+        {#if closable}
+            <button type="button" class="lm-alert__close" onclick={handleClose} aria-label="Close">
+                {#if closeText}
+                    {closeText}
+                {:else}
+                    <Icon icon={X} size={16} />
+                {/if}
+            </button>
+        {/if}
+    </div>
+{/if}

package/dist/Alert.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface AlertProps {
+    type?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    center?: boolean;
+    closeText?: string;
+    duration?: number;
+    children?: Snippet;
+    onclose?: () => void;
+    class?: string;
+}
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Alert from './Alert.svelte';
+export { Alert };
+export type { AlertProps, AlertType } from './types';
+export default Alert;

package/dist/index.js

@@ -0,0 +1,3 @@
+import Alert from './Alert.svelte';
+export { Alert };
+export default Alert;

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+export type AlertType = 'info' | 'success' | 'warning' | 'danger';
+export interface AlertProps {
+    type?: AlertType;
+    title?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    center?: boolean;
+    closeText?: string;
+    duration?: number;
+    children?: Snippet;
+    onclose?: () => void;
+    class?: string;
+}
+export interface AlertEmits {
+    close: void;
+}
+export interface AlertSlots {
+    icon?: any;
+    title?: any;
+    default?: any;
+    actions?: any;
+}

package/dist/types.js

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

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lumen-design/alert",
+  "version": "0.0.2",
+  "description": "Alert component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "@lumen-design/icon": "0.0.2",
+    "lucide": "^0.563.0"
+  }
+}