@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.10.ff03a8d

package/package.json

@@ -1,65 +1,99 @@
 {
-	"name": "@spaethtech/svelte-ui",
-	"version": "0.1.10",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "playwright test",
-		"test:ui": "playwright test --ui",
-		"test:headed": "playwright test --headed",
-		"test:debug": "playwright test --debug"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"@fortawesome/fontawesome-svg-core": "^6.7.0",
-		"@fortawesome/free-solid-svg-icons": "^6.7.0",
-		"svelte": "^5.0.0",
-		"tailwindcss": "^4.0.0"
-	},
-	"devDependencies": {
-		"@fortawesome/fontawesome-svg-core": "^6.7.2",
-		"@fortawesome/free-solid-svg-icons": "^6.7.2",
-		"@playwright/test": "^1.54.2",
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/kit": "^2.22.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@tailwindcss/vite": "^4.1.11",
-		"@types/node": "^24.7.1",
-		"publint": "^0.3.2",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwindcss": "^4.1.11",
-		"typescript": "^5.0.0",
-		"vite": "^7.0.4",
-		"vite-plugin-devtools-json": "^1.0.0"
-	},
-	"keywords": [
-		"svelte"
-	],
-	"description": "Reusable Svelte 5 UI components with Tailwind CSS styling",
-	"author": "",
-	"license": "ISC"
+  "name": "@spaethtech/svelte-ui",
+  "version": "0.3.1-dev.10.ff03a8d",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/spaethtech/svelte-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/spaethtech/svelte-ui/issues"
+  },
+  "homepage": "https://github.com/spaethtech/svelte-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "package:watch": "svelte-package --watch",
+    "dev:linked": "svelte-kit sync && (npm run package:watch & npm run dev)",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "CLAUDE.md",
+    "docs",
+    ".claude/skills/themes",
+    ".claude/skills/svelte-ui"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./data": {
+      "types": "./dist/data/index.d.ts",
+      "svelte": "./dist/data/index.js",
+      "default": "./dist/data/index.js"
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "peerDependencies": {
+    "@iconify-json/mdi": "^1.2.3",
+    "svelte": "^5.0.0",
+    "tailwindcss": "^4.0.0",
+    "unplugin-icons": "^23.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@iconify-json/mdi": {
+      "optional": false
+    },
+    "unplugin-icons": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@iconify-json/mdi": "^1.2.3",
+    "@playwright/test": "^1.54.2",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.22.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "prettier": "^3.9.4",
+    "prettier-plugin-svelte": "^4.1.1",
+    "publint": "^0.3.2",
+    "svelte": "^5",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.0.0",
+    "unplugin-icons": "^23.0.1",
+    "vite": "^7.0.4",
+    "vite-plugin-devtools-json": "^1.0.0"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "description": "Reusable Svelte 5 UI components with Tailwind CSS styling",
+  "author": "",
+  "license": "ISC"
 }

package/dist/components/Button/Button.svelte

@@ -1,172 +0,0 @@
-<script lang="ts">
-    import Icon from "../Icon/Icon.svelte";
-    import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
-    import type { Snippet } from "svelte";
-    import type { Variant } from "../../types/variants.js";
-    import type { Size } from "../../types/sizes.js";
-    import {
-        getVariantClasses,
-        getVariantStyles,
-    } from "../../styles/variants.js";
-    import {
-        buttonSizeClasses,
-        getComponentHeight,
-    } from "../../styles/sizes.js";
-    import { DEV } from "esm-env";
-
-    interface BaseProps {
-        icon?: IconDefinition;
-        text?: string;
-        variant?: Variant;
-        size?: Size;
-        iconPosition?: "left" | "right";
-        children?: Snippet;
-        class?: string;
-        title?: string;
-        onclick?: (event: MouseEvent) => void;
-        onmouseenter?: (event: MouseEvent) => void;
-        onmouseleave?: (event: MouseEvent) => void;
-        element?: HTMLButtonElement | HTMLAnchorElement;
-    }
-
-    interface ButtonProps extends BaseProps {
-        href?: never;
-        type?: "button" | "submit" | "reset";
-        disabled?: boolean;
-    }
-
-    interface AnchorProps extends BaseProps {
-        href: string;
-        type?: never;
-        disabled?: never;
-    }
-
-    export type Props = ButtonProps | AnchorProps;
-
-    let {
-        icon,
-        text,
-        variant = "secondary",
-        size = "md",
-        iconPosition = "left",
-        children,
-        disabled = false,
-        type = "button",
-        href,
-        class: additionalClass = "",
-        title,
-        onclick,
-        onmouseenter,
-        onmouseleave,
-        element = $bindable(),
-        ...restProps
-    }: Props = $props();
-
-    // Development warnings for prop conflicts and empty content
-    if (DEV) {
-        if ((text || icon) && children) {
-            console.warn(
-                "Button: Props (text/icon) and children provided. Using props, ignoring children.",
-            );
-        }
-        if (!text && !icon && !children) {
-            console.warn(
-                "Button: No content provided (text, icon, or children). Button will be empty.",
-            );
-        }
-    }
-
-    // Determine content mode and styling
-    const hasProps = !!(text || icon);
-    const isIconOnly = icon && !text;
-
-    // Base classes - height is always h-8 (32px), width is h-8 for icon-only
-    const baseClasses =
-        "inline-flex items-center justify-center h-8 rounded-md text-sm font-medium transition-colors no-underline cursor-pointer focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--color-text)_70%,transparent)] focus-visible:[outline-offset:0px]";
-
-    // Additional classes for disabled state (only applies to buttons)
-    const disabledClasses = href
-        ? ""
-        : "disabled:opacity-50 disabled:cursor-not-allowed";
-
-    // Size classes - width and padding depend on content
-    const sizeClasses = isIconOnly ? "w-8" : "px-4 py-2";
-
-    // Ghost variant uses outline (doesn't affect layout) instead of border
-    // Other variants don't need borders since they have solid backgrounds
-
-    // Build final classes - reactive to variant changes
-    const buttonClasses = $derived(
-        [
-            baseClasses,
-            sizeClasses,
-            getVariantClasses(variant, { includeBorder: true }),
-            disabledClasses,
-            additionalClass,
-        ]
-            .filter(Boolean)
-            .join(" "),
-    );
-
-    // Get text and icon adjustments from variant styles
-    const textAdjustment = $derived(getVariantStyles(variant).textAdjustment);
-    const iconAdjustment = $derived(getVariantStyles(variant).iconAdjustment);
-</script>
-
-{#if href}
-    <a
-        bind:this={element}
-        {href}
-        {title}
-        {onclick}
-        {onmouseenter}
-        {onmouseleave}
-        class={buttonClasses}
-        {...restProps}
-    >
-        <div class="flex items-center justify-center gap-2 select-none">
-            {#if hasProps}
-                {#if iconPosition === "left" && icon}
-                    <span class={iconAdjustment}><Icon {icon} /></span>
-                {/if}
-                {#if text}
-                    <span class={textAdjustment}>{text}</span>
-                {/if}
-                {#if iconPosition === "right" && icon}
-                    <span class={iconAdjustment}><Icon {icon} /></span>
-                {/if}
-            {:else if children}
-                {@render children()}
-            {/if}
-        </div>
-    </a>
-{:else}
-    <button
-        bind:this={element}
-        {type}
-        {disabled}
-        aria-disabled={disabled}
-        {title}
-        {onclick}
-        {onmouseenter}
-        {onmouseleave}
-        class={buttonClasses}
-        {...restProps}
-    >
-        <div class="flex items-center justify-center gap-2 select-none">
-            {#if hasProps}
-                {#if iconPosition === "left" && icon}
-                    <span class={iconAdjustment}><Icon {icon} /></span>
-                {/if}
-                {#if text}
-                    <span class={textAdjustment}>{text}</span>
-                {/if}
-                {#if iconPosition === "right" && icon}
-                    <span class={iconAdjustment}><Icon {icon} /></span>
-                {/if}
-            {:else if children}
-                {@render children()}
-            {/if}
-        </div>
-    </button>
-{/if}

package/dist/components/Button/Button.svelte.d.ts

@@ -1,32 +0,0 @@
-import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
-import type { Snippet } from "svelte";
-import type { Variant } from "../../types/variants.js";
-import type { Size } from "../../types/sizes.js";
-interface BaseProps {
-    icon?: IconDefinition;
-    text?: string;
-    variant?: Variant;
-    size?: Size;
-    iconPosition?: "left" | "right";
-    children?: Snippet;
-    class?: string;
-    title?: string;
-    onclick?: (event: MouseEvent) => void;
-    onmouseenter?: (event: MouseEvent) => void;
-    onmouseleave?: (event: MouseEvent) => void;
-    element?: HTMLButtonElement | HTMLAnchorElement;
-}
-interface ButtonProps extends BaseProps {
-    href?: never;
-    type?: "button" | "submit" | "reset";
-    disabled?: boolean;
-}
-interface AnchorProps extends BaseProps {
-    href: string;
-    type?: never;
-    disabled?: never;
-}
-export type Props = ButtonProps | AnchorProps;
-declare const Button: import("svelte").Component<Props, {}, "element">;
-type Button = ReturnType<typeof Button>;
-export default Button;

package/dist/components/Button/index.d.ts

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

package/dist/components/Button/index.js

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

package/dist/components/Dialog/Dialog.svelte

@@ -1,101 +0,0 @@
-<script lang="ts">
-  import Button from '../Button/Button.svelte';
-  import type { Snippet } from 'svelte';
-  import type { Variant } from '../../types/variants.js';
-
-  interface Props {
-    isOpen: boolean;
-    title?: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    variant?: Variant;
-    showConfirm?: boolean;
-    showCancel?: boolean;
-    children?: Snippet;
-  }
-
-  let {
-    isOpen = $bindable(),
-    title = "Dialog",
-    message,
-    confirmText = "Confirm",
-    cancelText = "Cancel",
-    onConfirm,
-    onCancel,
-    variant = "primary",
-    showConfirm = true,
-    showCancel = true,
-    children
-  }: Props = $props();
-
-  function handleConfirm() {
-    if (onConfirm) onConfirm();
-    isOpen = false;
-  }
-
-  function handleCancel() {
-    if (onCancel) onCancel();
-    isOpen = false;
-  }
-
-  function handleBackdropClick(event: MouseEvent) {
-    if (event.target === event.currentTarget) {
-      handleCancel();
-    }
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      handleCancel();
-    }
-  }
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-
-{#if isOpen}
-  <div 
-    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999]"
-    onclick={handleBackdropClick}
-    onkeydown={handleKeydown}
-    role="dialog"
-    aria-modal="true"
-    tabindex="-1"
-  >
-    <div class="[background-color:var(--color-background)] rounded-lg shadow-xl max-w-md w-full mx-4 z-[10000]" style="padding: calc(var(--ui-padding) * 2);">
-        <h3 class="text-lg font-medium [color:var(--color-text)]" style="margin-bottom: calc(var(--ui-padding) * 1.5);">
-          {title}
-        </h3>
-        
-        {#if children}
-          {@render children()}
-        {:else if message}
-          <p class="text-sm [color:var(--color-secondary)]">
-            {message}
-          </p>
-        {/if}
-        
-        {#if showConfirm || showCancel}
-          <div class="flex gap-3 justify-end" style="margin-top: calc(var(--ui-padding) * 1.5);">
-            {#if showCancel}
-              <Button
-                text={cancelText}
-                onclick={handleCancel}
-                variant="secondary"
-              />
-            {/if}
-            {#if showConfirm}
-              <Button
-                text={confirmText}
-                onclick={handleConfirm}
-                variant={variant}
-              />
-            {/if}
-          </div>
-        {/if}
-    </div>
-  </div>
-{/if}

package/dist/components/Dialog/Dialog.svelte.d.ts

@@ -1,18 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { Variant } from '../../types/variants.js';
-interface Props {
-    isOpen: boolean;
-    title?: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    variant?: Variant;
-    showConfirm?: boolean;
-    showCancel?: boolean;
-    children?: Snippet;
-}
-declare const Dialog: import("svelte").Component<Props, {}, "isOpen">;
-type Dialog = ReturnType<typeof Dialog>;
-export default Dialog;

package/dist/components/Dialog/index.d.ts

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

package/dist/components/Dialog/index.js

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