@rokkit/app 1.1.14 → 1.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/app",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "App-level controls for Rokkit applications - theme management and UI chrome",
   "repository": {
     "type": "git",
@@ -37,10 +37,10 @@
     "build": "echo 'No build step needed for source-only package'"
   },
   "dependencies": {
-    "@rokkit/actions": "1.1.14",
-    "@rokkit/core": "1.1.14",
-    "@rokkit/states": "1.1.14",
-    "@rokkit/ui": "1.1.14"
+    "@rokkit/actions": "1.1.16",
+    "@rokkit/core": "1.1.16",
+    "@rokkit/states": "1.1.16",
+    "@rokkit/ui": "1.1.16"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/src/components/SkinSwitcherToggle.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { vibe } from '@rokkit/states'
+	import { Toggle } from '@rokkit/ui'
+	import { buildSkinSwitcherOptions } from '../types/skin-switcher.js'
+
+	let {
+		skins = undefined,
+		labels = {},
+		showLabels = false,
+		size = 'sm',
+		disabled = false,
+		class: className = '',
+		onchange
+	}: {
+		skins?: Array<string | { name: string; label?: string; icon?: string }>
+		labels?: Record<string, string>
+		showLabels?: boolean
+		size?: 'sm' | 'md' | 'lg'
+		disabled?: boolean
+		class?: string
+		onchange?: (skin: string) => void
+	} = $props()
+
+	const options = $derived(buildSkinSwitcherOptions(skins ?? vibe.allowedSkins, labels))
+	let value = $derived(vibe.skin)
+
+	function handleChange(newValue: unknown) {
+		vibe.skin = newValue as string
+		onchange?.(newValue as string)
+	}
+</script>
+
+<Toggle
+	variant="group"
+	{options}
+	{value}
+	onchange={handleChange}
+	{showLabels}
+	{size}
+	{disabled}
+	class={className}
+/>

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as ThemeSwitcherToggle } from './ThemeSwitcherToggle.svelte'
 export { default as TableOfContents } from './TableOfContents.svelte'
+export { default as SkinSwitcherToggle } from './SkinSwitcherToggle.svelte'

package/src/index.ts

@@ -1,5 +1,5 @@
 // Components
-export { ThemeSwitcherToggle, TableOfContents } from './components/index.js'
+export { ThemeSwitcherToggle, SkinSwitcherToggle, TableOfContents } from './components/index.js'
 
 // Types
 export * from './types/index.js'

package/src/types/index.ts

@@ -1 +1,2 @@
 export * from './theme-switcher.js'
+export * from './skin-switcher.js'

package/src/types/skin-switcher.ts

@@ -0,0 +1,17 @@
+export interface SkinSwitcherOption {
+	value: string
+	label: string
+	icon?: string
+}
+
+export function buildSkinSwitcherOptions(
+	skins: Array<string | { name: string; label?: string; icon?: string }>,
+	labels: Record<string, string> = {}
+): SkinSwitcherOption[] {
+	return skins.map((s) => {
+		const name = typeof s === 'string' ? s : s.name
+		const label = typeof s === 'string' ? (labels[s] ?? s) : (s.label ?? labels[s.name] ?? s.name)
+		const icon = typeof s === 'string' ? undefined : s.icon
+		return { value: name, label, icon }
+	})
+}

package/src/types/theme-switcher.ts

@@ -31,7 +31,7 @@ export const defaultThemeSwitcherIcons: Required<ThemeSwitcherIcons> = {
 
 export interface ThemeSwitcherOption {
 	value: ColorMode
-	text: string
+	label: string
 	icon: string
 	[key: string]: unknown
 }
@@ -52,9 +52,9 @@ export function buildThemeSwitcherOptions(
 ): ThemeSwitcherOption[] {
 	const mergedLabels = { ...messages.mode, ...labels }
 	const all: ThemeSwitcherOption[] = [
-		{ value: 'system', text: mergedLabels.system, icon: icons.system },
-		{ value: 'light', text: mergedLabels.light, icon: icons.light },
-		{ value: 'dark', text: mergedLabels.dark, icon: icons.dark }
+		{ value: 'system', label: mergedLabels.system, icon: icons.system },
+		{ value: 'light', label: mergedLabels.light, icon: icons.light },
+		{ value: 'dark', label: mergedLabels.dark, icon: icons.dark }
 	]
 	return all.filter((o) => modes.includes(o.value))
 }