@spaethtech/svelte-ui 0.1.10

package/README.md

@@ -0,0 +1,81 @@
+# Svelte UI Component Library
+
+A collection of reusable Svelte 5 UI components with Tailwind CSS styling and FontAwesome icon support.
+
+See JUNIE.md for how Junie (our autonomous programmer) handles repository rules files like CLAUDE.md and .cursorrules.
+
+## Components
+
+- **Button** - Flexible button/anchor with variants and icon support
+- **Dialog** - Modal dialog with backdrop handling
+- **Input** - Enhanced text input with icons and validation
+- **Select** - Custom dropdown with keyboard navigation
+- **Rating** - Interactive star rating component
+- **NotesEditor** - Auto-sizing textarea component
+
+## Installation
+
+```bash
+# For local development
+npm install ../path/to/svelte-ui/dist
+
+# Or build from source
+cd svelte-ui
+npm install
+npm run package
+```
+
+## Prerequisites
+
+Your project must have these peer dependencies installed:
+
+```bash
+npm install svelte@^5.0.0 tailwindcss@^4.0.0
+npm install @fortawesome/fontawesome-svg-core@^6.7.0
+npm install @fortawesome/free-solid-svg-icons@^6.7.0
+```
+
+## Setup
+
+### 1. Tailwind Configuration
+
+Add the component paths to your `tailwind.config.js`:
+
+```js
+export default {
+  content: [
+    './src/**/*.{html,js,svelte,ts}',
+    './node_modules/svelte-ui/**/*.{html,js,svelte,ts}'
+  ],
+  // ... rest of config
+}
+```
+
+### 2. Import Components
+
+```svelte
+<script>
+  import { Button, Dialog, Input, Select, Rating } from 'svelte-ui';
+  import { faSearch, faSave } from '@fortawesome/free-solid-svg-icons';
+</script>
+
+<Button text="Click me" variant="primary" />
+<Input bind:value={searchQuery} icon={faSearch} placeholder="Search..." />
+<Select options={myOptions} bind:value={selected} />
+```
+
+## Development
+
+```bash
+npm run dev     # Start demo server
+npm run package # Build library
+npm run check   # TypeScript validation
+```
+
+## Demo
+
+Run `npm run dev` to see all components in action at http://localhost:5173
+
+## License
+
+ISC

package/dist/components/Badge/Badge.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import Icon from "../Icon/Icon.svelte";
+    import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+    import type { Variant } from "../../types/variants.js";
+    import type { Size } from "../../types/sizes.js";
+    import {
+        getVariantClasses,
+        getVariantStyles,
+    } from "../../styles/variants.js";
+    import {
+        badgeSizeClasses,
+        componentHeights,
+        textSizes,
+    } from "../../styles/sizes.js";
+    interface Props {
+        icon?: IconDefinition;
+        text?: string;
+        variant?: Variant;
+        size?: Size;
+        iconPosition?: "left" | "right";
+        rounded?: boolean;
+    }
+
+    let {
+        icon,
+        text = "",
+        variant = "primary",
+        size = "md",
+        iconPosition = "left",
+        rounded = true,
+    }: Props = $props();
+
+    // Get text and icon adjustments from variant styles
+    const textAdjustment = $derived(getVariantStyles(variant).textAdjustment);
+    const iconAdjustment = $derived(getVariantStyles(variant).iconAdjustment);
+
+    // Icon-only badges should be square (w=h)
+    const isIconOnly = $derived(icon && !text);
+
+    // Map sizes to explicit widths (matching heights)
+    const squareWidths = {
+        sm: "w-7", // matches h-7
+        md: "w-8", // matches h-8
+        lg: "w-9", // matches h-9
+    } as const;
+
+    const sizeClasses = $derived(
+        isIconOnly
+            ? `${componentHeights[size]} ${textSizes[size]} ${squareWidths[size]}`
+            : badgeSizeClasses[size],
+    );
+
+    // Ghost variant uses outline (doesn't affect layout) instead of border
+    // Other variants don't need borders since they have solid backgrounds
+</script>
+
+{#if text || icon}
+    <span
+        class="inline-flex items-center justify-center gap-2 select-none {sizeClasses} {getVariantClasses(
+            variant,
+            {
+                includeBorder: true,
+                includeIcon: false,
+                includeHover: false,
+            },
+        )} {rounded ? 'rounded-full' : 'rounded'}"
+    >
+        <span class="flex items-center justify-center gap-2">
+            {#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}
+        </span>
+    </span>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+interface Props {
+    icon?: IconDefinition;
+    text?: string;
+    variant?: Variant;
+    size?: Size;
+    iconPosition?: "left" | "right";
+    rounded?: boolean;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

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

package/dist/components/Badge/index.js

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

package/dist/components/Button/Button.svelte

@@ -0,0 +1,172 @@
+<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

@@ -0,0 +1,32 @@
+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

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

package/dist/components/Button/index.js

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

package/dist/components/Dialog/Dialog.svelte

@@ -0,0 +1,101 @@
+<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

@@ -0,0 +1,18 @@
+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

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

package/dist/components/Dialog/index.js

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