sv5ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ndlabdev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+# SV5UI
+
+A modern, fully-typed Svelte 5 UI component library built with Tailwind CSS 4.
+
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![npm version](https://img.shields.io/npm/v/sv5ui.svg)](https://www.npmjs.com/package/sv5ui)
+
+## Features
+
+- **Svelte 5** - Built with runes, snippets, and the latest Svelte 5 features
+- **Tailwind CSS 4** - Utility-first styling with [Tailwind Variants](https://www.tailwind-variants.org/) for type-safe composable variants
+- **OKLCH Colors** - Semantic color tokens with light/dark mode support
+- **Fully Typed** - Complete TypeScript support with strict mode
+- **Accessible** - Built on [Bits UI](https://bits-ui.com) headless primitives
+- **Customizable** - Global config system to override default variants and slot styles
+
+## Installation
+
+```bash
+npm install sv5ui
+```
+
+Peer dependencies: `svelte >= 5.0.0`, `tailwindcss >= 4.0.0`
+
+## Quick Start
+
+```css
+/* layout.css */
+@import 'sv5ui/theme.css';
+@source "../../node_modules/sv5ui/dist";
+```
+
+```svelte
+<script>
+  import { Button, Alert, Avatar, Badge } from 'sv5ui'
+</script>
+
+<Button variant="solid" color="primary">Click me</Button>
+<Alert title="Heads up!" description="Something happened." color="info" variant="soft" />
+<Avatar src="/photo.jpg" alt="John Doe" size="lg" />
+<Badge label="New" color="success" />
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| **Alert** | Notification banners with actions and close support |
+| **Avatar** | User avatar with image fallback and auto-generated initials |
+| **AvatarGroup** | Grouped avatars with overflow count |
+| **Badge** | Status indicators and tags |
+| **Button** | Interactive button with loading, icon, and block modes |
+| **Card** | Content container with header/body/footer slots |
+| **Chip** | Compact notification indicators with positioning |
+| **Container** | Responsive layout wrapper with max-width constraints |
+| **Icon** | Iconify wrapper with 200,000+ icons |
+| **Kbd** | Keyboard key display with automatic symbol mapping |
+| **Link** | Smart navigation with active state detection |
+| **Progress** | Determinate/indeterminate progress bars with step mode |
+| **Separator** | Dividers with optional label, icon, or avatar content |
+| **Timeline** | Sequence/step visualization with states |
+
+> Browse the interactive docs by running `pnpm dev` and opening [localhost:5173](http://localhost:5173).
+
+## Theming
+
+SV5UI uses OKLCH color space with semantic tokens. Light and dark modes work automatically.
+
+**Available color tokens:** `primary`, `secondary`, `tertiary`, `success`, `warning`, `error`, `info`, `surface`
+
+**Dark mode** via `.dark` class or `prefers-color-scheme`, managed through [mode-watcher](https://github.com/svecosystem/mode-watcher).
+
+**Custom colors** by overriding CSS variables:
+
+```css
+:root {
+  --color-primary: oklch(0.55 0.25 270);
+  --color-secondary: oklch(0.45 0.15 240);
+}
+```
+
+## Customization
+
+### Per-instance overrides
+
+Override slot styles on any component via the `ui` prop:
+
+```svelte
+<Button ui={{ base: 'rounded-full', label: 'font-bold uppercase' }}>
+  Custom
+</Button>
+```
+
+### Global defaults
+
+Use `defineConfig` to set library-wide defaults:
+
+```typescript
+import { defineConfig } from 'sv5ui'
+
+defineConfig({
+  button: {
+    defaultVariants: { variant: 'outline', size: 'lg' },
+    slots: { base: 'shadow-md' }
+  },
+  icons: { loading: 'svg-spinners:ring-resize' }
+})
+```
+
+## Development
+
+```bash
+pnpm install      # Install dependencies
+pnpm dev          # Start dev server
+pnpm test         # Run tests
+pnpm check        # Type check
+pnpm prepack      # Build library
+pnpm lint         # Lint
+pnpm format       # Format
+```
+
+## License
+
+[MIT](LICENSE)

package/dist/Alert/Alert.svelte

@@ -0,0 +1,120 @@
+<script lang="ts" module>
+    import type { AlertProps } from './alert.types.js'
+
+    export type Props = AlertProps
+</script>
+
+<script lang="ts">
+    import { alertVariants, alertDefaults } from './alert.variants.js'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import Button from '../Button/Button.svelte'
+
+    const config = getComponentConfig('alert', alertDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        as = 'div',
+        ui,
+        title,
+        description,
+        icon,
+        avatar,
+        color = config.defaultVariants.color,
+        variant = config.defaultVariants.variant,
+        orientation = config.defaultVariants.orientation,
+        open = true,
+        close = false,
+        closeIcon,
+        actions,
+        class: className,
+        leading,
+        titleSlot,
+        descriptionSlot,
+        actionsSlot,
+        closeSlot,
+        onClose,
+        ...restProps
+    }: Props = $props()
+
+    const resolvedCloseIcon = $derived(closeIcon ?? icons.close)
+
+    const classes = $derived.by(() => {
+        const slots = alertVariants({ variant, color, orientation })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+            title: slots.title({ class: [config.slots.title, ui?.title] }),
+            description: slots.description({ class: [config.slots.description, ui?.description] }),
+            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
+            actions: slots.actions({ class: [config.slots.actions, ui?.actions] }),
+            close: slots.close({ class: [config.slots.close, ui?.close] })
+        }
+    })
+
+    const closeButtonProps = $derived.by(() => {
+        if (!close) return null
+        if (close === true) return {}
+        return close
+    })
+
+    function handleClose() {
+        onClose?.()
+    }
+</script>
+
+{#if open}
+    <svelte:element this={as} class={classes.root} role="alert" {...restProps}>
+        {#if leading}
+            {@render leading()}
+        {:else if icon}
+            <Icon name={icon} class={classes.icon} />
+        {:else if avatar}
+            <Avatar {...avatar} class={classes.avatar} />
+        {/if}
+
+        {#if title || description || titleSlot || descriptionSlot}
+            <div class={classes.wrapper}>
+                {#if titleSlot}
+                    {@render titleSlot()}
+                {:else if title}
+                    <div class={classes.title}>{title}</div>
+                {/if}
+
+                {#if descriptionSlot}
+                    {@render descriptionSlot()}
+                {:else if description}
+                    <div class={classes.description}>{description}</div>
+                {/if}
+            </div>
+        {/if}
+
+        {#if actionsSlot}
+            {@render actionsSlot()}
+        {:else if actions && actions.length > 0}
+            <div class={classes.actions}>
+                {#each actions as action, index (index)}
+                    <Button size="xs" {...action} />
+                {/each}
+            </div>
+        {/if}
+
+        {#if closeSlot}
+            <div class={classes.close}>
+                {@render closeSlot()}
+            </div>
+        {:else if closeButtonProps}
+            <Button
+                icon={resolvedCloseIcon}
+                variant="link"
+                color="surface"
+                class={classes.close}
+                onclick={handleClose}
+                aria-label="Close alert"
+                {...closeButtonProps}
+            />
+        {/if}
+    </svelte:element>
+{/if}

package/dist/Alert/Alert.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { AlertProps } from './alert.types.js';
+export type Props = AlertProps;
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/Alert/alert.types.d.ts

@@ -0,0 +1,99 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AlertVariantProps, AlertSlots } from './alert.variants.js';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+import type { ButtonProps } from '../Button/button.types.js';
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'> & {
+    /**
+     * The HTML element to render as.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific alert slots.
+     */
+    ui?: Partial<Record<AlertSlots, ClassNameValue>>;
+    /**
+     * Alert title text.
+     */
+    title?: string;
+    /**
+     * Alert description text.
+     */
+    description?: string;
+    /**
+     * Icon name to display (Iconify format).
+     * Takes precedence over avatar.
+     */
+    icon?: string;
+    /**
+     * Avatar props to display on the left side.
+     * Only rendered if icon is not provided.
+     */
+    avatar?: AvatarProps;
+    /**
+     * The color theme of the alert.
+     * @default 'primary'
+     */
+    color?: NonNullable<AlertVariantProps['color']>;
+    /**
+     * The visual style variant.
+     * @default 'soft'
+     */
+    variant?: NonNullable<AlertVariantProps['variant']>;
+    /**
+     * Layout orientation.
+     * @default 'horizontal'
+     */
+    orientation?: NonNullable<AlertVariantProps['orientation']>;
+    /**
+     * Whether the alert is visible.
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Show close button.
+     * Pass ButtonProps to customize.
+     * @default false
+     */
+    close?: boolean | ButtonProps;
+    /**
+     * Close button icon name.
+     * @default 'lucide:x'
+     */
+    closeIcon?: string;
+    /**
+     * Action buttons configuration.
+     */
+    actions?: ButtonProps[];
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom leading content slot.
+     * Replaces icon/avatar when provided.
+     */
+    leading?: Snippet;
+    /**
+     * Custom title content slot.
+     */
+    titleSlot?: Snippet;
+    /**
+     * Custom description content slot.
+     */
+    descriptionSlot?: Snippet;
+    /**
+     * Custom actions content slot.
+     */
+    actionsSlot?: Snippet;
+    /**
+     * Custom close button content slot.
+     */
+    closeSlot?: Snippet;
+    /**
+     * Callback when close button is clicked.
+     */
+    onClose?: () => void;
+};

package/dist/Alert/alert.types.js

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

package/dist/Alert/alert.variants.d.ts

@@ -0,0 +1,213 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    actions: string;
+    close: string;
+}, undefined, {
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    actions: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    actions: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AlertVariantProps = VariantProps<typeof alertVariants>;
+export type AlertSlots = keyof ReturnType<typeof alertVariants>;
+export declare const alertDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                actions: string;
+            };
+            vertical: {
+                root: string;
+                actions: string;
+            };
+        };
+        title: {
+            true: {
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        icon: string;
+        avatar: string;
+        actions: string;
+        close: string;
+    }, {
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                actions: string;
+            };
+            vertical: {
+                root: string;
+                actions: string;
+            };
+        };
+        title: {
+            true: {
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        icon: string;
+        avatar: string;
+        actions: string;
+        close: string;
+    }>;
+    slots: Partial<Record<AlertSlots, string>>;
+};