@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/ThemePreview/index.css

@@ -0,0 +1,509 @@
+/* ============================================================================
+   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.surface-1 {
+	background: var(--stuic-color-surface-1);
+}
+
+.stuic-theme-preview .color-swatch.surface-2 {
+	background: var(--stuic-color-surface-2);
+}
+
+.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 .surface-1-foreground-text {
+	color: var(--stuic-color-surface-1-foreground);
+}
+
+.stuic-theme-preview .surface-2-foreground-text {
+	color: var(--stuic-color-surface-2-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/README.md

@@ -1,43 +1,62 @@
 # TwCheck
 
-A development utility component to verify that Tailwind CSS is properly loaded and working. Displays differently styled content at different breakpoints.
+A development utility component to verify that Tailwind CSS is properly loaded and working. Displays different styles at different breakpoints.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `theme` | `string` | - | Tailwind color theme for background |
+| `theme` | `string` | - | Tailwind color palette name (e.g., "blue", "amber") |
 | `class` | `string` | - | Additional CSS classes |
 
+## Component Tokens
+
+Override to customize appearance:
+
+```css
+:root {
+    --stuic-twcheck-bg: var(--stuic-color-primary);
+    --stuic-twcheck-text: var(--stuic-color-primary-foreground);
+    --stuic-twcheck-border-color: var(--stuic-color-accent);
+    --stuic-twcheck-padding-x: calc(var(--spacing) * 2);
+}
+```
+
 ## Usage
 
 ### Basic Check
 
 ```svelte
 <script lang="ts">
-  import { TwCheck } from 'stuic';
+  import { TwCheck } from '@marianmeres/stuic';
 </script>
 
-<TwCheck>
-  TW Check
-</TwCheck>
+<TwCheck>TW Check</TwCheck>
 ```
 
-### With Theme
+### Customization Strategies
 
 ```svelte
-<TwCheck theme="blue">
-  Tailwind is working!
-</TwCheck>
+<!-- 1. Default styles (uses theme tokens) -->
+<TwCheck>default</TwCheck>
+
+<!-- 2. Tailwind class override -->
+<TwCheck class="bg-green-600 text-white">green</TwCheck>
+
+<!-- 3. CSS variable override -->
+<TwCheck --stuic-twcheck-bg="var(--color-blue-600)">blue</TwCheck>
+
+<!-- 4. Theme prop shorthand -->
+<TwCheck theme="amber">amber</TwCheck>
 ```
 
 ## Visual Indicators
 
 When Tailwind CSS is properly loaded:
-- **Mobile**: Yellow text, no border
-- **Desktop (sm+)**: White text, teal border, larger font
+- **Mobile**: Smaller text (text-base), no border
+- **Desktop (sm+)**: Larger text (text-2xl), visible border
 
-If the component appears unstyled (plain text), Tailwind CSS is not loading correctly.
+If the component appears unstyled (no size change, no border at wider viewports), Tailwind CSS is not loading correctly.
 
 ## Development Use
 

package/dist/components/TwCheck/TwCheck.svelte

@@ -9,24 +9,26 @@
 </script>
 
 <script lang="ts">
-	import "./index.css";
-	import { twMerge } from "tailwind-merge";
+	import { twMerge } from "../../utils/index.js";
 
 	let { class: classProp, children, theme }: Props = $props();
 
+	// Responsive classes demonstrate Tailwind is working:
+	// - Font size changes: text-base -> sm:text-2xl
+	// Note: border styles are in component CSS to avoid Vite HMR timing issues
 	const _default = `
-		stuic-twcheck bg-twcheck-bg 
-		inline-block px-2 
-		text-yellow-300 sm:text-white 
+		stuic-twcheck
+		inline-block
 		text-base sm:text-2xl
 		sm:border-2 border-teal-400
 	`;
 
 	const _buildTheme = (theme?: string) => {
-		// simulating missing css var
-		return theme
-			? `--color-twcheck-bg: var(--color-foo-bar-baz, var(--color-${theme}-600));`
-			: "";
+		if (!theme) return "";
+		return [
+			`--stuic-twcheck-bg: var(--color-${theme}-600)`,
+			`--stuic-twcheck-text: var(--color-${theme}-100, var(--color-white))`,
+		].join(";");
 	};
 </script>
 

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

@@ -4,7 +4,6 @@ export interface Props {
     children?: Snippet;
     theme?: string;
 }
-import "./index.css";
 declare const TwCheck: import("svelte").Component<Props, {}, "">;
 type TwCheck = ReturnType<typeof TwCheck>;
 export default TwCheck;

package/dist/components/TwCheck/index.css

@@ -1,3 +1,18 @@
-@theme inline {
-	--color-twcheck-bg: var(--color-twcheck-bg, var(--color-red-600));
+/* TwCheck component tokens */
+:root {
+	--stuic-twcheck-bg: var(--stuic-color-primary);
+	--stuic-twcheck-text: var(--stuic-color-primary-foreground);
+	--stuic-twcheck-border-color: var(--stuic-color-accent);
+	--stuic-twcheck-padding-x: calc(var(--spacing) * 2);
+}
+
+/* @layer components ensures Tailwind utilities (@layer utilities) win in the cascade */
+@layer components {
+	.stuic-twcheck {
+		background: var(--stuic-twcheck-bg);
+		color: var(--stuic-twcheck-text);
+		border-color: var(--stuic-twcheck-border-color);
+		padding-left: var(--stuic-twcheck-padding-x);
+		padding-right: var(--stuic-twcheck-padding-x);
+	}
 }