@rokkit/ui 1.1.19 → 1.3.0

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

@@ -0,0 +1,4 @@
+import type { LockModeProps } from '../types/lock-mode.js';
+declare const LockMode: import("svelte").Component<LockModeProps, {}, "">;
+type LockMode = ReturnType<typeof LockMode>;
+export default LockMode;

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export { default as Tabs } from './Tabs.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export { default as Swatch } from './Swatch.svelte';
 export { default as List } from './List.svelte';
+export { default as LockMode } from './LockMode.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as LazyTree } from './LazyTree.svelte';
 export { default as Connector } from './Connector.svelte';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, ButtonGroup, Code, CodeBlock, CodeGroup, Frame, Menu, Dropdown, Select, MultiSelect, Toolbar, ToolbarGroup, Tabs, Toggle, Swatch, List, Tree, LazyTree, FloatingAction, FloatingNavigation, PaletteManager, Tilt, Shine, BreadCrumbs, Card, ProgressBar, Carousel, Pill, Rating, Connector, ItemContent, Stepper, Switch, Table, TreeTable, SearchFilter, Range, Timeline, Reveal, Grid, UploadTarget, UploadFileStatus, UploadProgress, StatusList, Message, AlertList, Divider, Stack, Badge, Avatar, Tooltip, NavContent, ResponsiveGrid, CommandPalette } from './components/index.js';
+export { Button, ButtonGroup, Code, CodeBlock, CodeGroup, Frame, Menu, Dropdown, Select, MultiSelect, Toolbar, ToolbarGroup, Tabs, Toggle, Swatch, List, Tree, LazyTree, LockMode, FloatingAction, FloatingNavigation, PaletteManager, Tilt, Shine, BreadCrumbs, Card, ProgressBar, Carousel, Pill, Rating, Connector, ItemContent, Stepper, Switch, Table, TreeTable, SearchFilter, Range, Timeline, Reveal, Grid, UploadTarget, UploadFileStatus, UploadProgress, StatusList, Message, AlertList, Divider, Stack, Badge, Avatar, Tooltip, NavContent, ResponsiveGrid, CommandPalette } from './components/index.js';
 export { default as MarkdownRenderer } from './MarkdownRenderer.svelte';
 export type { MarkdownPlugin } from './markdown-plugin.js';
 export { highlightCode, preloadHighlighter, getSupportedLanguages } from './utils/shiki.js';

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './tabs.js';
 export * from './toggle.js';
 export * from './switch.js';
 export * from './list.js';
+export * from './lock-mode.js';
 export * from './tree.js';
 export * from './floating-action.js';
 export * from './palette.js';

package/dist/types/lock-mode.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+/** The color mode a region can be locked to. */
+export type LockedMode = 'dark' | 'light';
+/** Props for the LockMode component. */
+export interface LockModeProps {
+    /** Color mode to pin this subtree to, regardless of the document mode. */
+    mode: LockedMode;
+    /** Content rendered inside the locked region. */
+    children: Snippet;
+    /** Additional CSS class. */
+    class?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.1.19",
+  "version": "1.3.0",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",
@@ -45,10 +45,10 @@
     "dropdown"
   ],
   "dependencies": {
-    "@rokkit/core": "1.1.19",
-    "@rokkit/data": "1.1.19",
-    "@rokkit/states": "1.1.19",
-    "@rokkit/actions": "1.1.19",
+    "@rokkit/core": "1.3.0",
+    "@rokkit/data": "1.3.0",
+    "@rokkit/states": "1.3.0",
+    "@rokkit/actions": "1.3.0",
     "marked": "^15.0.0",
     "dompurify": "^3.0.0"
   },

package/src/components/LockMode.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { lockMode } from '@rokkit/actions'
+	import type { LockModeProps } from '../types/lock-mode.js'
+
+	const { mode, children, class: className = '' }: LockModeProps = $props()
+</script>
+
+<!--
+	`data-mode` is rendered statically so token vars + in-component `dark:`
+	utilities are correct on first (SSR) paint. `lockMode` then mirrors the
+	root's style/skin/density on hydration so @rokkit/themes component CSS
+	(which keys off [data-mode][data-style]) engages too.
+-->
+<div data-mode={mode} use:lockMode={mode} class={className || undefined}>
+	{@render children()}
+</div>

package/src/components/index.ts

@@ -15,6 +15,7 @@ export { default as Tabs } from './Tabs.svelte'
 export { default as Toggle } from './Toggle.svelte'
 export { default as Swatch } from './Swatch.svelte'
 export { default as List } from './List.svelte'
+export { default as LockMode } from './LockMode.svelte'
 export { default as Tree } from './Tree.svelte'
 export { default as LazyTree } from './LazyTree.svelte'
 export { default as Connector } from './Connector.svelte'

package/src/index.ts

@@ -18,6 +18,7 @@ export {
 	List,
 	Tree,
 	LazyTree,
+	LockMode,
 	FloatingAction,
 	FloatingNavigation,
 	PaletteManager,

package/src/types/index.ts

@@ -25,6 +25,9 @@ export * from './switch.js'
 // List Types
 export * from './list.js'
 
+// LockMode Types
+export * from './lock-mode.js'
+
 // Tree Types
 export * from './tree.js'
 

package/src/types/lock-mode.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte'
+
+/** The color mode a region can be locked to. */
+export type LockedMode = 'dark' | 'light'
+
+/** Props for the LockMode component. */
+export interface LockModeProps {
+	/** Color mode to pin this subtree to, regardless of the document mode. */
+	mode: LockedMode
+
+	/** Content rendered inside the locked region. */
+	children: Snippet
+
+	/** Additional CSS class. */
+	class?: string
+}