@marianmeres/stuic 2.65.0 → 3.0.0

package/dist/components/ThemePreview/index.css

@@ -0,0 +1,493 @@
+/* ============================================================================
+   THEME PREVIEW COMPONENT
+
+   This component serves as a reference implementation for stuic theming.
+   It demonstrates:
+   - Consuming theme tokens (--stuic-color-*)
+   - Component-level customization tokens (--stuic-theme-preview-*)
+   - Internal variable pattern (--_*)
+   - Proper state handling (hover, active, focus)
+   - Dark mode compatibility
+   ============================================================================ */
+
+/* ============================================================================
+   COMPONENT TOKENS
+
+   Define component-level customization tokens in :root.
+   Users can override globally: :root { --stuic-theme-preview-radius: 0; }
+   Or locally: <ThemePreview style="--stuic-theme-preview-gap: 2rem;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	--stuic-theme-preview-radius:          var(--radius-md);
+	--stuic-theme-preview-gap:             1rem;
+	--stuic-theme-preview-transition:      150ms;
+
+	/* Section-specific tokens that consume theme colors */
+	--stuic-theme-preview-header-bg:       var(--stuic-color-surface);
+	--stuic-theme-preview-header-text:     var(--stuic-color-surface-foreground);
+	--stuic-theme-preview-sidebar-bg:      var(--stuic-color-muted);
+	--stuic-theme-preview-sidebar-text:    var(--stuic-color-muted-foreground);
+	--stuic-theme-preview-sidebar-width:   200px;
+	--stuic-theme-preview-main-bg:         var(--stuic-color-background);
+	--stuic-theme-preview-main-text:       var(--stuic-color-foreground);
+	--stuic-theme-preview-footer-bg:       var(--stuic-color-surface);
+	--stuic-theme-preview-footer-text:     var(--stuic-color-muted-foreground);
+}
+
+/* ============================================================================
+   BASE CONTAINER
+   ============================================================================ */
+
+.stuic-theme-preview {
+	display: flex;
+	flex-direction: column;
+	min-height: 400px;
+	border-radius: var(--stuic-theme-preview-radius);
+	border: 1px solid var(--stuic-color-border);
+	overflow: hidden;
+	background: var(--stuic-theme-preview-main-bg);
+	color: var(--stuic-theme-preview-main-text);
+}
+
+/* ============================================================================
+   HEADER
+
+   Demonstrates: surface, surface-foreground, muted-foreground tokens
+   ============================================================================ */
+
+.stuic-theme-preview-header {
+	background: var(--stuic-theme-preview-header-bg);
+	color: var(--stuic-theme-preview-header-text);
+	padding: 1rem 1.5rem;
+	border-bottom: 1px solid var(--stuic-color-border);
+}
+
+.stuic-theme-preview-header .header-content {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.stuic-theme-preview-header .header-title {
+	font-size: 1.25rem;
+	font-weight: 600;
+	margin: 0;
+	color: var(--stuic-color-surface-foreground);
+}
+
+.stuic-theme-preview-header .header-subtitle {
+	font-size: 0.875rem;
+	margin: 0;
+	color: var(--stuic-color-muted-foreground);
+}
+
+/* ============================================================================
+   BODY LAYOUT
+   ============================================================================ */
+
+.stuic-theme-preview-body {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+}
+
+/* ============================================================================
+   SIDEBAR
+
+   Demonstrates: muted, muted-foreground, hover states, active state with primary
+   ============================================================================ */
+
+.stuic-theme-preview-sidebar {
+	width: var(--stuic-theme-preview-sidebar-width);
+	background: var(--stuic-theme-preview-sidebar-bg);
+	color: var(--stuic-theme-preview-sidebar-text);
+	padding: 1rem;
+	border-right: 1px solid var(--stuic-color-border);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.stuic-theme-preview-sidebar .sidebar-nav {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.stuic-theme-preview-sidebar .nav-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.stuic-theme-preview-sidebar .nav-item {
+	padding: 0.5rem 0.75rem;
+	border-radius: calc(var(--stuic-theme-preview-radius) / 2);
+	cursor: pointer;
+	transition:
+		background var(--stuic-theme-preview-transition),
+		color var(--stuic-theme-preview-transition);
+	color: var(--stuic-color-foreground);
+}
+
+.stuic-theme-preview-sidebar .nav-item:hover {
+	background: var(--stuic-color-muted-hover);
+}
+
+/* Active state uses primary intent - demonstrates intent for emphasis */
+.stuic-theme-preview-sidebar .nav-item.active {
+	background: var(--stuic-color-primary);
+	color: var(--stuic-color-primary-foreground);
+}
+
+.stuic-theme-preview-sidebar .nav-item.muted {
+	color: var(--stuic-color-muted-foreground);
+}
+
+.stuic-theme-preview-sidebar .sidebar-footer {
+	padding-top: 1rem;
+	border-top: 1px solid var(--stuic-color-border);
+}
+
+/* ============================================================================
+   MAIN CONTENT
+
+   Demonstrates: background, foreground tokens
+   ============================================================================ */
+
+.stuic-theme-preview-main {
+	flex: 1;
+	padding: 1.5rem;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+	background: var(--stuic-theme-preview-main-bg);
+	color: var(--stuic-theme-preview-main-text);
+}
+
+/* ============================================================================
+   SECTIONS
+   ============================================================================ */
+
+.stuic-theme-preview .preview-section {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.stuic-theme-preview .section-label {
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--stuic-color-muted-foreground);
+}
+
+/* ============================================================================
+   BUTTON DEMONSTRATIONS
+
+   This section demonstrates the INTERNAL VARIABLE PATTERN used by the Button
+   component. This is the core theming technique in stuic:
+
+   1. Intent selectors set the color palette via --_color, --_fg variables
+   2. Variant selectors determine HOW colors are applied via --_bg, --_text, etc.
+   3. Base styles consume the internal variables
+
+   This separation allows any intent + variant combination to work automatically.
+   ============================================================================ */
+
+.stuic-theme-preview .button-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+	gap: 1rem;
+}
+
+.stuic-theme-preview .button-column {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.stuic-theme-preview .intent-label {
+	font-size: 0.75rem;
+	color: var(--stuic-color-muted-foreground);
+	text-align: center;
+}
+
+/* ============================================================================
+   ROLE COLOR SWATCHES
+
+   Demonstrates: background/surface/muted with their paired foregrounds
+   ============================================================================ */
+
+.stuic-theme-preview .role-colors-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+	gap: 1rem;
+}
+
+.stuic-theme-preview .color-swatch {
+	padding: 1rem;
+	border-radius: var(--stuic-theme-preview-radius);
+	border: 1px solid var(--stuic-color-border);
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.stuic-theme-preview .color-swatch .swatch-label {
+	font-size: 0.75rem;
+	font-weight: 600;
+	opacity: 0.7;
+}
+
+/* Each swatch uses its role color as background */
+.stuic-theme-preview .color-swatch.background {
+	background: var(--stuic-color-background);
+}
+
+.stuic-theme-preview .color-swatch.surface {
+	background: var(--stuic-color-surface);
+}
+
+.stuic-theme-preview .color-swatch.muted-bg {
+	background: var(--stuic-color-muted);
+}
+
+/* Text uses the paired foreground colors */
+.stuic-theme-preview .foreground-text {
+	color: var(--stuic-color-foreground);
+}
+
+.stuic-theme-preview .surface-foreground-text {
+	color: var(--stuic-color-surface-foreground);
+}
+
+.stuic-theme-preview .muted-foreground-text {
+	color: var(--stuic-color-muted-foreground);
+}
+
+.stuic-theme-preview .muted-text {
+	color: var(--stuic-color-muted-foreground);
+}
+
+/* ============================================================================
+   BORDER DEMONSTRATIONS
+
+   Demonstrates: border, border-hover, border-active tokens
+   ============================================================================ */
+
+.stuic-theme-preview .border-examples {
+	display: flex;
+	gap: 1rem;
+	flex-wrap: wrap;
+}
+
+.stuic-theme-preview .border-box {
+	padding: 1rem;
+	border-radius: var(--stuic-theme-preview-radius);
+	background: var(--stuic-color-surface);
+	transition: border-color var(--stuic-theme-preview-transition);
+}
+
+.stuic-theme-preview .border-box.default {
+	border: 2px solid var(--stuic-color-border);
+}
+
+.stuic-theme-preview .border-box.hover {
+	border: 2px solid var(--stuic-color-border);
+}
+
+.stuic-theme-preview .border-box.hover:hover {
+	border-color: var(--stuic-color-border-hover);
+}
+
+.stuic-theme-preview .border-box.active {
+	border: 2px solid var(--stuic-color-border-active);
+}
+
+/* ============================================================================
+   INPUT DEMONSTRATIONS
+
+   Demonstrates: input, ring tokens, focus states
+   ============================================================================ */
+
+.stuic-theme-preview .input-examples {
+	display: flex;
+	gap: 1rem;
+	flex-wrap: wrap;
+}
+
+.stuic-theme-preview .input-wrapper {
+	flex: 1;
+	min-width: 200px;
+}
+
+.stuic-theme-preview .preview-input {
+	width: 100%;
+	padding: 0.625rem 0.75rem;
+	font-size: 1rem;
+	border-radius: var(--stuic-theme-preview-radius);
+	border: 1px solid var(--stuic-color-border);
+	background: var(--stuic-color-input);
+	color: var(--stuic-color-foreground);
+	transition:
+		border-color var(--stuic-theme-preview-transition),
+		background var(--stuic-theme-preview-transition);
+}
+
+.stuic-theme-preview .preview-input::placeholder {
+	color: var(--stuic-color-muted-foreground);
+}
+
+.stuic-theme-preview .preview-input:hover {
+	background: var(--stuic-color-input-hover);
+	border-color: var(--stuic-color-border-hover);
+}
+
+/* Focus state uses ring token */
+.stuic-theme-preview .preview-input:focus,
+.stuic-theme-preview .preview-input.focus {
+	outline: 3px solid var(--stuic-color-ring);
+	outline-offset: 0;
+	border-color: var(--stuic-color-primary);
+}
+
+/* ============================================================================
+   HIGHLIGHT BOXES
+
+   Demonstrates: using intent colors for content areas (soft variant pattern)
+   ============================================================================ */
+
+.stuic-theme-preview .highlight-box {
+	padding: 1rem;
+	border-radius: var(--stuic-theme-preview-radius);
+	margin-bottom: 0.75rem;
+}
+
+.stuic-theme-preview .highlight-box:last-child {
+	margin-bottom: 0;
+}
+
+.stuic-theme-preview .highlight-box strong {
+	display: block;
+	margin-bottom: 0.25rem;
+}
+
+.stuic-theme-preview .highlight-box p {
+	margin: 0;
+	font-size: 0.875rem;
+	opacity: 0.9;
+}
+
+/* Using soft variant pattern for content boxes */
+.stuic-theme-preview .highlight-box.primary {
+	background: color-mix(in srgb, var(--stuic-color-primary) 15%, transparent);
+	color: var(--stuic-color-primary);
+	border: 1px solid color-mix(in srgb, var(--stuic-color-primary) 30%, transparent);
+}
+
+.stuic-theme-preview .highlight-box.accent {
+	background: color-mix(in srgb, var(--stuic-color-accent) 15%, transparent);
+	color: var(--stuic-color-accent);
+	border: 1px solid color-mix(in srgb, var(--stuic-color-accent) 30%, transparent);
+}
+
+/* ============================================================================
+   TYPOGRAPHY SECTION
+   ============================================================================ */
+
+.stuic-theme-preview .typography-demo {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.stuic-theme-preview .typography-demo p {
+	margin: 0;
+}
+
+.stuic-theme-preview .text-foreground {
+	color: var(--stuic-color-foreground);
+}
+
+.stuic-theme-preview .text-muted {
+	color: var(--stuic-color-muted-foreground);
+}
+
+.stuic-theme-preview .text-surface-foreground {
+	color: var(--stuic-color-surface-foreground);
+}
+
+/* ============================================================================
+   FOOTER
+   ============================================================================ */
+
+.stuic-theme-preview-footer {
+	background: var(--stuic-theme-preview-footer-bg);
+	color: var(--stuic-theme-preview-footer-text);
+	padding: 0.75rem 1.5rem;
+	border-top: 1px solid var(--stuic-color-border);
+}
+
+.stuic-theme-preview-footer .footer-content {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	font-size: 0.875rem;
+}
+
+.stuic-theme-preview-footer .footer-divider {
+	opacity: 0.3;
+}
+
+/* ============================================================================
+   DARK MODE COMPATIBILITY
+
+   The component inherits dark mode behavior from theme tokens automatically.
+   When using theme tokens properly (--stuic-color-*), no explicit .dark
+   overrides are needed - the theme handles it.
+   ============================================================================ */
+
+/* ============================================================================
+   RESPONSIVE ADJUSTMENTS
+   ============================================================================ */
+
+@media (max-width: 640px) {
+	.stuic-theme-preview-body {
+		flex-direction: column;
+	}
+
+	.stuic-theme-preview-sidebar {
+		width: 100%;
+		border-right: none;
+		border-bottom: 1px solid var(--stuic-color-border);
+	}
+
+	.stuic-theme-preview .button-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+/* ============================================================================
+   REDUCED MOTION
+
+   Respect user preferences for reduced motion.
+   ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+	.stuic-theme-preview,
+	.stuic-theme-preview-button,
+	.stuic-theme-preview .border-box,
+	.stuic-theme-preview .preview-input,
+	.stuic-theme-preview-sidebar .nav-item {
+		transition: none;
+	}
+}

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

@@ -0,0 +1 @@
+export { default as ThemePreview, type Props as ThemePreviewProps, INTENT_COLORS, BUTTON_VARIANTS, } from "./ThemePreview.svelte";

package/dist/components/ThemePreview/index.js

@@ -0,0 +1 @@
+export { default as ThemePreview, INTENT_COLORS, BUTTON_VARIANTS, } from "./ThemePreview.svelte";

package/dist/components/TwCheck/TwCheck.svelte

@@ -15,9 +15,9 @@
 	let { class: classProp, children, theme }: Props = $props();
 
 	const _default = `
-		stuic-twcheck bg-twcheck-bg 
-		inline-block px-2 
-		text-yellow-300 sm:text-white 
+		stuic-twcheck bg-(--stuic-twcheck-bg)
+		inline-block px-2
+		text-yellow-300 sm:text-white
 		text-base sm:text-2xl
 		sm:border-2 border-teal-400
 	`;
@@ -25,7 +25,7 @@
 	const _buildTheme = (theme?: string) => {
 		// simulating missing css var
 		return theme
-			? `--color-twcheck-bg: var(--color-foo-bar-baz, var(--color-${theme}-600));`
+			? `--stuic-twcheck-bg: var(--color-foo-bar-baz, var(--color-${theme}-600));`
 			: "";
 	};
 </script>

package/dist/components/TwCheck/index.css

@@ -1,3 +1,4 @@
-@theme inline {
-	--color-twcheck-bg: var(--color-twcheck-bg, var(--color-red-600));
+/* TwCheck component tokens */
+:root {
+	--stuic-twcheck-bg: var(--stuic-color-primary);
 }

package/dist/components/TypeaheadInput/TypeaheadInput.svelte

@@ -156,7 +156,7 @@
 	//
 	let _fixedInputClasses = $derived(
 		twMerge(
-			"form-input z-10 relative",
+			"z-10 relative",
 			classInput,
 			"text-black",
 			"border-0 p-0 bg-transparent block w-full",

package/dist/components/X/X.svelte

@@ -1,14 +1,24 @@
 <script lang="ts" module>
+	import { DevicePointer, twMerge } from "../../index.js";
 	export interface Props {
 		class?: string;
 		strokeWidth?: 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
+		linecapRound?: boolean;
 	}
 </script>
 
 <script lang="ts">
-	import { twMerge } from "../../index.js";
+	let { class: classProps, strokeWidth, linecapRound = true }: Props = $props();
 
-	let { class: classProps, strokeWidth = 3 }: Props = $props();
+	// motivation - make it thicker on mobile, especially for weary eyes
+	// (note: dp.isCoarse does not say nothing technically about mobile, but in 90% it will)
+	// const dp = new DevicePointer();
+	// const auto = $derived(dp.isCoarse ? 3 : 2);
+
+	// if sw not provided use thicker on mobile
+	const _strokeWidth = $derived(strokeWidth ?? 2);
+
+	const _strokeLinecap = $derived(linecapRound ? "round" : "square");
 
 	// size-6 = 1.5rem = 24px
 </script>
@@ -16,9 +26,11 @@
 <svg
 	fill="none"
 	viewBox="0 0 24 24"
-	stroke-width={strokeWidth}
+	stroke-width={_strokeWidth}
 	stroke="currentColor"
 	class={twMerge("inline size-6", classProps)}
 >
-	<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+	<!-- iconLucideX -->
+	<path stroke-linecap={_strokeLinecap} d="M18 6 6 18" />
+	<path stroke-linecap={_strokeLinecap} d="m6 6 12 12" />
 </svg>

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

@@ -1,6 +1,7 @@
 export interface Props {
     class?: string;
     strokeWidth?: 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
+    linecapRound?: boolean;
 }
 declare const X: import("svelte").Component<Props, {}, "">;
 type X = ReturnType<typeof X>;

package/dist/icons/index.d.ts

@@ -36,3 +36,4 @@ export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
 export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";
+export { iconLucideSettings as iconSettings } from "@marianmeres/icons-fns/lucide/iconLucideSettings.js";

package/dist/icons/index.js

@@ -40,3 +40,4 @@ export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
 export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";
+export { iconLucideSettings as iconSettings } from "@marianmeres/icons-fns/lucide/iconLucideSettings.js";

package/dist/index.css

@@ -6,27 +6,42 @@
 */
 /* @import "tailwindcss"; */
 
-@plugin '@tailwindcss/forms';
+/* @plugin '@tailwindcss/forms'; */
 
 @custom-variant dark (&:where(.dark, .dark *));
 
 @source "./";
 
-/* "components" looks like a better fit here, but forms plugin uses "utilities"
-so, since we need to override, sticking with that */
-@layer utilities {
-	@import "./actions/tooltip/index.css";
-	@import "./components/Button/index.css";
-	@import "./components/ButtonGroupRadio/index.css";
-	@import "./components/DismissibleMessage/index.css";
-	@import "./components/Input/index.css";
-	@import "./components/ListItemButton/index.css";
-	@import "./components/Notifications/index.css";
-	@import "./components/Progress/index.css";
-	@import "./components/Switch/index.css";
-	@import "./components/TabbedMenu/index.css";
-	@import "./components/TwCheck/index.css";
-}
+/* Import global design tokens before component styles */
+/* @import "./themes/neutral.css"; */
+/* @import "./themes/gray.css"; */
+@import "./themes/rainbow.css";
+/* @import "./themes/indigo-amber.css"; */
+/* @import "./themes/teal-rose.css"; */
+/* @import "./themes/violet-lime.css"; */
+/* @import "./themes/blue-orange.css"; */
+/* @import "./themes/emerald-pink.css"; */
+/* @import "./themes/sky-amber.css"; */
+/* @import "./themes/fuchsia-emerald.css"; */
+/* @import "./themes/slate-cyan.css"; */
+/* @import "./themes/purple-yellow.css"; */
+/* @import "./themes/cyan-red.css"; */
+/* @import "./themes/red-cyan.css"; */
+
+/* Component styles - each file has its own @layer components wrapper */
+@import "./components/Input/index.css";
+@import "./components/ModalDialog/index.css";
+/* @import "./actions/tooltip/index.css"; */
+/* @import "./components/Button/index.css"; */
+/* @import "./components/ButtonGroupRadio/index.css"; */
+/* @import "./components/Collapsible/index.css"; */
+/* @import "./components/DismissibleMessage/index.css"; */
+/* @import "./components/ListItemButton/index.css"; */
+/* @import "./components/Notifications/index.css"; */
+/* @import "./components/Progress/index.css"; */
+/* @import "./components/Switch/index.css"; */
+/* @import "./components/TabbedMenu/index.css"; */
+/* @import "./components/TwCheck/index.css"; */
 
 @layer base {
 	button:not(:disabled),

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";
 export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
+export * from "./components/ThemePreview/index.js";
 export * from "./components/TwCheck/index.js";
 export * from "./components/TypeaheadInput/index.js";
 export * from "./components/X/index.js";

package/dist/index.js

@@ -50,6 +50,7 @@ export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";
 export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
+export * from "./components/ThemePreview/index.js";
 export * from "./components/TwCheck/index.js";
 export * from "./components/TypeaheadInput/index.js";
 export * from "./components/X/index.js";