@spaethtech/svelte-ui 0.1.10 → 0.3.0

package/dist/types/breakpoints.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Responsive breakpoint tiers — the single source of truth for any
+ * component that accepts per-tier configuration (modes, columns,
+ * visibility, etc.). Keys match the tier names defined in
+ * `theme.css`, with `base` for the unconditional "no min-width" case.
+ *
+ * Pixel widths are exposed alongside the type so JS-driven mode
+ * resolution (via matchMedia) can stay in sync with the CSS without
+ * a second source of truth.
+ *
+ *  - `base` → 0 px (no min-width — the unconditional fallback)
+ *  - `4xs`  → 320 px (iPhone SE class)
+ *  - `3xs`  → 360 px (narrow Android)
+ *  - `2xs`  → 420 px (standard phone)
+ *  - `xs`   → 480 px (large phone / small tablet portrait)
+ *  - `sm`   → 640 px (Tailwind default)
+ *  - `md`   → 768 px (Tailwind default)
+ *  - `lg`   → 1024 px (Tailwind default)
+ *  - `xl`   → 1280 px (Tailwind default)
+ *  - `2xl`  → 1536 px (Tailwind default)
+ *  - `3xl`  → 1920 px (FHD / 1080p ultrawide)
+ */
+export type Breakpoint = "base" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export declare const BREAKPOINT_PX: Record<Breakpoint, number>;

package/dist/types/breakpoints.js

@@ -0,0 +1,13 @@
+export const BREAKPOINT_PX = {
+    base: 0,
+    "4xs": 320,
+    "3xs": 360,
+    "2xs": 420,
+    xs: 480,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536,
+    "3xl": 1920,
+};

package/dist/types/responsive.d.ts

@@ -0,0 +1,32 @@
+import { type Breakpoint } from "./breakpoints.js";
+/**
+ * A value that is either a single `T` (applied at every width) OR a per-breakpoint map.
+ * Mobile-first: `base` (or a bare `T`) is the unconditional value; each larger tier present in the
+ * map overrides from its min-width upward. Mirrors the DataTable column `breakpoints` shape so the
+ * whole library speaks one responsive language.
+ *
+ *   size="lg"                          // always lg
+ *   size={{ base: 'lg', xs: 'md' }}    // lg on phones, md at >=480px
+ */
+export type Responsive<T extends string> = T | Partial<Record<Breakpoint, T>>;
+/**
+ * Resolve a `Responsive<T>` into a Tailwind class string, given a per-value class map.
+ *
+ * - Scalar `T` → the map entry verbatim (today's behaviour, zero overhead).
+ * - Map → the `base` entry unprefixed, then each higher tier's entry with its `bp:` prefix applied
+ *   to EVERY class token (`'h-8 px-4'` at `xs` → `'xs:h-8 xs:px-4'`). Emitted low→high min-width so
+ *   the CSS cascade lands on the active tier. Works for arbitrary/variant tokens too — the prefix
+ *   sits in front of the whole chain (`xs:[&_svg]:w-4`, `xs:[background-color:var(--x)]`).
+ *
+ * The generated `bp:`-prefixed classes are runtime strings Tailwind can't see by scanning source —
+ * they are safelisted via `@source inline` in `theme.css` (see the `-- responsive size/variant --`
+ * block there); consuming apps inherit it through `@import 'svelte-ui/theme.css'`.
+ */
+export declare function responsiveClasses<T extends string>(value: Responsive<T> | undefined, map: Record<T, string>): string;
+/**
+ * Collapse a `Responsive<T>` to a single scalar — for the rare bits driven by JS/inline-style rather
+ * than a class (e.g. a numeric line-height for autosize math, or a CSS-var set via `style=`). Scalar
+ * passes through; a map yields its `base` tier (or `fallback`). Those aspects therefore track the
+ * mobile-first tier only — the CLASS-driven visuals still respond at every breakpoint.
+ */
+export declare function resolveScalar<T extends string>(value: Responsive<T> | undefined, fallback: T): T;

package/dist/types/responsive.js

@@ -0,0 +1,54 @@
+import { BREAKPOINT_PX } from "./breakpoints.js";
+/** Breakpoints ascending by min-width — so prefixed rules emit in cascade order (larger wins). */
+const ASCENDING = Object.keys(BREAKPOINT_PX).sort((a, b) => BREAKPOINT_PX[a] - BREAKPOINT_PX[b]);
+/**
+ * Resolve a `Responsive<T>` into a Tailwind class string, given a per-value class map.
+ *
+ * - Scalar `T` → the map entry verbatim (today's behaviour, zero overhead).
+ * - Map → the `base` entry unprefixed, then each higher tier's entry with its `bp:` prefix applied
+ *   to EVERY class token (`'h-8 px-4'` at `xs` → `'xs:h-8 xs:px-4'`). Emitted low→high min-width so
+ *   the CSS cascade lands on the active tier. Works for arbitrary/variant tokens too — the prefix
+ *   sits in front of the whole chain (`xs:[&_svg]:w-4`, `xs:[background-color:var(--x)]`).
+ *
+ * The generated `bp:`-prefixed classes are runtime strings Tailwind can't see by scanning source —
+ * they are safelisted via `@source inline` in `theme.css` (see the `-- responsive size/variant --`
+ * block there); consuming apps inherit it through `@import 'svelte-ui/theme.css'`.
+ */
+export function responsiveClasses(value, map) {
+    if (value == null)
+        return "";
+    if (typeof value === "string")
+        return map[value] ?? "";
+    let out = "";
+    for (const bp of ASCENDING) {
+        const tier = value[bp];
+        if (tier == null)
+            continue;
+        const cls = map[tier];
+        if (!cls)
+            continue;
+        out += out ? " " : "";
+        out +=
+            bp === "base"
+                ? cls
+                : cls
+                    .trim()
+                    .split(/\s+/)
+                    .map((t) => `${bp}:${t}`)
+                    .join(" ");
+    }
+    return out;
+}
+/**
+ * Collapse a `Responsive<T>` to a single scalar — for the rare bits driven by JS/inline-style rather
+ * than a class (e.g. a numeric line-height for autosize math, or a CSS-var set via `style=`). Scalar
+ * passes through; a map yields its `base` tier (or `fallback`). Those aspects therefore track the
+ * mobile-first tier only — the CLASS-driven visuals still respond at every breakpoint.
+ */
+export function resolveScalar(value, fallback) {
+    if (value == null)
+        return fallback;
+    if (typeof value === "string")
+        return value;
+    return value.base ?? fallback;
+}

package/dist/types/sizes.d.ts

@@ -1,5 +1,12 @@
 /**
- * Standard size variants used across UI components.
- * Ensures consistent heights and spacing throughout the library.
+ * Shared sizing axis — the cross-cutting counterpart to {@link ./variants.ts | Variant}.
+ * Every sizeable component (Button, Input, Select, …) accepts `size` and maps it to a consistent
+ * control height / text / padding / icon scale. Default is always `md` (today's look).
+ *
+ *  - `sm` → 24px (`--ui-height-sm`) · dense: table chrome, inline controls
+ *  - `md` → 32px (`--ui-height`)    · default
+ *  - `lg` → 40px (`--ui-height-lg`) · prominent  (0.75× / 1.0× / 1.25× around md)
+ *
+ * `--ui-height-touch` (44px) is a separate token for explicit touch targets — not `lg`.
  */
-export type Size = 'sm' | 'md' | 'lg';
+export type Size = "sm" | "md" | "lg";

package/dist/types/time.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Step interval for the time spinner columns. A bare number is shorthand for the MINUTE step (the
+ * common case); an object sets any column independently. Unspecified columns default to 1.
+ *
+ *   step={15}                          // minutes step by 15 (hours/seconds by 1)
+ *   step={{ minute: 15, second: 30 }}  // minutes by 15, seconds by 30
+ *   step={{ hour: 2 }}                 // hours by 2
+ */
+export type StepSpec = number | {
+    hour?: number;
+    minute?: number;
+    second?: number;
+};
+/** Resolve a {@link StepSpec} to a per-column `{ hour, minute, second }` (each ≥ 1). */
+export declare function resolveStep(step: StepSpec | undefined): {
+    hour: number;
+    minute: number;
+    second: number;
+};

package/dist/types/time.js

@@ -0,0 +1,10 @@
+/** Resolve a {@link StepSpec} to a per-column `{ hour, minute, second }` (each ≥ 1). */
+export function resolveStep(step) {
+    if (typeof step === "number")
+        return { hour: 1, minute: Math.max(1, step), second: 1 };
+    return {
+        hour: Math.max(1, step?.hour ?? 1),
+        minute: Math.max(1, step?.minute ?? 1),
+        second: Math.max(1, step?.second ?? 1),
+    };
+}

package/dist/types/variants.d.ts

@@ -1 +1,8 @@
-export type Variant = 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning' | 'ghost';
+export type Variant = "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
+/** Variant → semantic colour token, used where a variant needs an ACCENT colour (Toggle track,
+ *  Checkbox, Card border, DataTable accent…). `danger` maps to `--ui-color-error`. The two non-accent
+ *  variants — `ghost` (transparent, hover-tint only) and `neutral` (text-mix surface tint, = the
+ *  default DataTable look) — resolve to `--ui-color-text`, so those controls read grey/uncoloured
+ *  rather than borrowing an accent. The interactive tints (hover/surface/active) are text-mixes by
+ *  default and re-mix off whichever colour this points at. */
+export declare const variantToken: Record<Variant, string>;

package/dist/types/variants.js

@@ -1 +1,16 @@
-export {};
+/** Variant → semantic colour token, used where a variant needs an ACCENT colour (Toggle track,
+ *  Checkbox, Card border, DataTable accent…). `danger` maps to `--ui-color-error`. The two non-accent
+ *  variants — `ghost` (transparent, hover-tint only) and `neutral` (text-mix surface tint, = the
+ *  default DataTable look) — resolve to `--ui-color-text`, so those controls read grey/uncoloured
+ *  rather than borrowing an accent. The interactive tints (hover/surface/active) are text-mixes by
+ *  default and re-mix off whichever colour this points at. */
+export const variantToken = {
+    neutral: "--ui-color-text",
+    primary: "--ui-color-primary",
+    secondary: "--ui-color-secondary",
+    success: "--ui-color-success",
+    info: "--ui-color-info",
+    warning: "--ui-color-warning",
+    danger: "--ui-color-error",
+    ghost: "--ui-color-text",
+};

package/package.json

@@ -1,65 +1,95 @@
 {
-	"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.0",
+  "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.*"
+  ],
+  "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';