@rokkit/ui 1.0.0-next.124 → 1.0.0-next.127

package/src/Switch.svelte

@@ -1,106 +0,0 @@
-<script>
-	import { equals } from 'ramda'
-	import { keyboard } from '@rokkit/actions'
-	import { Proxy } from '@rokkit/states'
-	import Item from './Item.svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string}                              [class]
-	 * @property {any}                                 value
-	 * @property {import('@rokkit/core').FieldMapping} fields
-	 * @property {Array<any>}                          [options]
-	 * @property {boolean}                             [compact]
-	 * @property {boolean}                             [disabled]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: classes = '',
-		value = $bindable(),
-		description = 'Toggle Switch',
-		options = [false, true],
-		fields,
-		compact = false,
-		disabled = false,
-		onchange,
-		child,
-		...extra
-	} = $props()
-
-	/**
-	 * Toggles the value of the switch
-	 * @param {number}  direction - The direction to toggle the switch
-	 */
-	function toggle(direction = 1) {
-		let nextIndex
-		const index = options.indexOf(value)
-		if (index === -1) {
-			nextIndex = direction === -1 ? options.length - 1 : 0
-		} else {
-			nextIndex = (index + direction + options.length) % options.length
-		}
-
-		value = options[nextIndex]
-		onchange(value)
-	}
-
-	/**
-	 *
-	 * @param event
-	 */
-	function handleClick(event) {
-		const index = event.target.closest('[data-path]').dataset.path
-		value = options[index]
-		onchange(value)
-	}
-	const keyMapping = {
-		next: ['ArrowRight', 'ArrowDown', ' ', 'Enter'],
-		prev: ['ArrowLeft', 'ArrowUp']
-	}
-
-	let childSnippet = $derived(child ? child : defaultChild)
-</script>
-
-{#snippet defaultChild(proxy)}
-	<Item {proxy} />
-{/snippet}
-
-{#if !Array.isArray(options) || options.length < 2}
-	<div data-error>Items should be an array with at least two items.</div>
-{:else}
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<div
-		class={classes}
-		data-switch-root
-		data-switch-off={options.length === 2 && equals(value, options[0])}
-		data-switch-on={options.length === 2 && equals(value, options[1])}
-		data-switch-compact={compact}
-		aria-label={description}
-		aria-orientation="horizontal"
-		aria-disabled={disabled}
-		tabindex="0"
-		role="listbox"
-		use:keyboard={keyMapping}
-		onnext={() => toggle()}
-		onprev={() => toggle(-1)}
-		onclick={handleClick}
-	>
-		{#each options as item, index (index)}
-			{@const proxy = new Proxy(item, fields)}
-			<div
-				data-switch-item
-				class="relative"
-				role="option"
-				aria-selected={equals(item, value)}
-				data-path={index}
-			>
-				{#if equals(item, value)}
-					<div data-switch-mark class="absolute bottom-0 left-0 right-0 top-0"></div>
-				{/if}
-
-				{@render childSnippet?.(proxy)}
-			</div>
-		{/each}
-	</div>
-{/if}

package/src/TableCell.svelte

@@ -1,51 +0,0 @@
-<script>
-	import { identity } from 'ramda'
-	import { defaultMapping } from './constants'
-	import Connector from './Connector.svelte'
-	import Icon from './Icon.svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} value
-	 * @property {any} [fields]
-	 * @property {any} [formatter]
-	 * @property {any} [using]
-	 * @property {any} [levels]
-	 * @property {boolean} [isParent]
-	 * @property {boolean} [isExpanded]
-	 * @property {number} [depth]
-	 * @property {any} [path]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: classes = '',
-		value = $bindable(),
-		mapping = defaultMapping,
-		formatter = identity,
-		levels = [],
-		isParent = false,
-		isExpanded = false,
-		depth = 0,
-		path = null
-	} = $props()
-
-	const Template = $derived(mapping.get('component', value))
-</script>
-
-<td class={classes}>
-	<rk-cell>
-		{#if path}
-			{#each levels.slice(0, -1) as level (level)}
-				<Connector type="empty" />
-			{/each}
-			{#if isParent}
-				<Icon name={isExpanded ? 'node-opened' : 'node-closed'} class="small cursor-pointer" />
-			{:else if depth > 0}
-				<Connector type="empty" />
-			{/if}
-		{/if}
-		<Template bind:value {mapping} {formatter} />
-	</rk-cell>
-</td>

package/src/TableHeaderCell.svelte

@@ -1,54 +0,0 @@
-<script>
-	import { noop } from '@rokkit/core'
-	import Icon from './Icon.svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {string} name
-	 * @property {string|null} label
-	 * @property {boolean} [sortable]
-	 * @property {boolean} [hidden]
-	 * @property {string} [order]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: className = '',
-		name,
-		label,
-		sortable = false,
-		hidden = false,
-		order = $bindable('none'),
-		onsort = noop
-	} = $props()
-
-	const handleSort = (event) => {
-		if (!sortable) return
-		event.stopPropagation()
-		order = order === 'none' ? 'ascending' : order === 'ascending' ? 'descending' : 'none'
-		const extend = event.getModifierState('Shift') || event.getModifierState('Control')
-		onsort({ name, extend, order })
-	}
-
-	let title = $derived(label ?? name)
-	let description = $derived(sortable ? `sort by ${title}` : title)
-	let icon = $derived(`sort-${order}`)
-</script>
-
-{#if !hidden}
-	<th
-		scope="col"
-		onclick={handleSort}
-		data-sortable={sortable}
-		aria-label={description}
-		class={className}
-	>
-		<rk-cell>
-			{title}
-			{#if sortable}
-				<Icon name={icon} class="small" label="change the sort order" />
-			{/if}
-		</rk-cell>
-	</th>
-{/if}

package/src/Tabs.svelte

@@ -1,176 +0,0 @@
-<script>
-	import { createEmitter, getKeyFromPath, defaultStateIcons } from '@rokkit/core'
-	import { navigator } from '@rokkit/actions'
-	import { ListController } from '@rokkit/states'
-	import { Proxy } from '@rokkit/states'
-	import { has, equals, pick } from 'ramda'
-	import Icon from './Icon.svelte'
-
-	/**
-	 * @typedef {Object} FieldMapping
-	 * @property {string} [id] - Field to use for item ID
-	 * @property {string} [label] - Field to use for item label/text
-	 * @property {string} [value] - Field to use for item value
-	 * @property {string} [content] - Field to use for tab content
-	 */
-
-	/**
-	 * @typedef {Object} TabProps
-	 * @property {string}                   [class]       - Additional CSS class names
-	 * @property {string}                   [name]        - Name for accessibility
-	 * @property {any[]}                    [options]       - Array of tab options to display
-	 * @property {FieldMapping}             [fields]      - Field mappings for extracting data
-	 * @property {'horizontal'|'vertical'}  [orientation] - Orientation of the tab bar
-	 * @property {'before' | 'after' }      [position]    - Position of the tab bar
-	 * @property {'start'|'center'|'end'}   [align]       - Alignment of the tab bar
-	 * @property {any}                      [value]       - Selected tab value (bindable)
-	 * @property {number}                   [tabindex]    - Tab index for keyboard navigation
-	 * @property {boolean}                  [editable]    - Whether tabs can be added/removed
-	 * @property {string}                   [placeholder] - Placeholder text for input field
-	 * @property {import('svelte').Snippet} [tabItem]       - Snippet for rendering tab headers
-	 * @property {import('svelte').Snippet} [tabPanel]    - Snippet for rendering tab content
-	 * @property {import('svelte').Snippet} [empty]       - Snippet for rendering empty state
-	 * @property {Function}                 [onselect]    - Callback when tab is selected
-	 * @property {Function}                 [onchange]    - Callback when tab changes
-	 * @property {Function}                 [onmove]      - Callback when focus moves
-	 * @property {Function}                 [onadd]       - Callback when tab is added
-	 * @property {Function}                 [onremove]    - Callback when tab is removed
-	 */
-
-	/** @type {TabProps} */
-	let {
-		class: classes = '',
-		name = 'tabs',
-		options = $bindable([]),
-		fields = {},
-		value = $bindable(),
-		orientation = 'horizontal',
-		align = 'start',
-		position = 'before',
-		tabindex = 0,
-		editable = false,
-		tabItem,
-		tabPanel,
-		empty,
-		placeholder = 'Select a tab to view its content.',
-		icons,
-		onselect,
-		onchange,
-		onmove,
-		onadd,
-		onremove,
-		...restProps
-	} = $props()
-
-	/** @type {Proxy[]} */
-	let proxyItems = $derived(options.map((item) => new Proxy(item, fields)))
-	let tabItemSnippet = $derived(tabItem ?? defaultItem)
-	let tabPanelSnippet = $derived(tabPanel ?? defaultPanel)
-	let emptyMessage = $derived(empty ?? defaultEmpty)
-
-	function handleAction(event) {
-		const { name, data } = event.detail
-
-		if (has(name, emitter)) {
-			value = data.value
-			emitter[name](data)
-		}
-	}
-
-	function handleAdd() {
-		onadd?.()
-	}
-
-	function handleRemove(item) {
-		onremove?.(item)
-	}
-	let tabIcons = $derived({ ...pick(['add', 'close'], defaultStateIcons.action), ...icons })
-	let emitter = createEmitter({ onchange, onmove, onselect }, ['select', 'change', 'move'])
-	let wrapper = new ListController(options, value, fields)
-
-	$effect(() => wrapper.update(options))
-</script>
-
-{#snippet defaultItem(item)}
-	{item.get('text') || item.get('label') || item.get('name')}
-{/snippet}
-
-{#snippet defaultPanel(item)}
-	<div data-tabs-content>
-		{item.get('content')}
-	</div>
-{/snippet}
-
-{#snippet defaultEmpty()}
-	No tabs available.
-{/snippet}
-
-<div
-	{...restProps}
-	data-tabs-root
-	data-orientation={orientation}
-	data-position={position}
-	data-align={align}
-	class={classes}
-	role="tablist"
-	aria-label={name}
-	use:navigator={{ wrapper, orientation }}
-	{tabindex}
-	onaction={handleAction}
->
-	{#if proxyItems.length === 0}
-		<div data-tabs-empty>
-			{@render emptyMessage()}
-		</div>
-	{:else if wrapper.focusedKey === null && value === null}
-		<div data-tabs-placeholder>
-			{placeholder}
-		</div>
-	{/if}
-	<div data-tabs-list>
-		{#each proxyItems as item, index (index)}
-			{@const key = getKeyFromPath([index])}
-			{@const isSelected = equals(item.value, value)}
-			{@const isFocused = wrapper.focusedKey === key}
-			<button
-				data-tabs-trigger
-				data-path={getKeyFromPath([index])}
-				role="tab"
-				aria-selected={isSelected}
-				aria-controls="tab-panel-{index}"
-				class:selected={isSelected}
-				class:focused={isFocused}
-				tabindex="0"
-				id={`tab-${index}`}
-			>
-				{@render tabItemSnippet(item)}
-				{#if editable}
-					<Icon
-						data-icon-remove
-						name={tabIcons.close}
-						role="button"
-						onclick={() => handleRemove(item.value)}
-					/>
-				{/if}
-			</button>
-		{/each}
-		{#if editable}
-			<Icon data-icon-add name={tabIcons.add} role="button" onclick={handleAdd} />
-		{/if}
-	</div>
-
-	<!-- Tab Panels -->
-	{#each proxyItems as item, index (index)}
-		{@const isVisible = equals(item.value, value)}
-
-		<div
-			data-tabs-panel
-			role="tabpanel"
-			id="tab-panel-{index}"
-			aria-labelledby="tab-{index}"
-			data-panel-active={isVisible}
-		>
-			{@render tabPanelSnippet(item)}
-		</div>
-	{/each}
-</div>

package/src/Tilt.svelte

@@ -1,66 +0,0 @@
-<script>
-	import { scaleLinear } from 'd3-scale'
-	import { clsx } from 'clsx'
-
-	let {
-		maxRotation = 10,
-		setBrightness = false,
-		perspective = 600,
-		class: classNames = undefined,
-		children
-	} = $props()
-
-	let width = $state(0)
-	let height = $state(0)
-
-	let rotateX = $state(0)
-	let rotateY = $state(0)
-	let brightness = $state(1)
-
-	let scaleX = $derived(scaleLinear().domain([0, height]).range([-maxRotation, maxRotation]))
-	let scaleY = $derived(scaleLinear().domain([0, width]).range([maxRotation, -maxRotation]))
-	let scaleBrightness = $derived(scaleLinear().domain([0, height]).range([2.0, 1.0]))
-
-	/**
-	 *
-	 * @param {MouseEvent} e
-	 */
-	function onMouseMove(e) {
-		rotateY = scaleY(e.offsetX)
-		rotateX = scaleX(e.offsetY)
-
-		if (setBrightness) {
-			brightness = scaleBrightness(e.offsetY)
-		}
-	}
-
-	/**
-	 *
-	 */
-	function onMouseLeave() {
-		rotateX = 0
-		rotateY = 0
-		brightness = 1
-	}
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	data-tilt-root
-	style:--perspective="{perspective}px"
-	style:--rotateX="{rotateX}deg"
-	style:--rotateY="{rotateY}deg"
-	style:--brightness={brightness}
-	class={clsx(
-		'[perspective:var(--perspective)]',
-		'[&>*]:[transform:rotateX(var(--rotateX))_rotateY(var(--rotateY))]',
-		'[&>*]:brightness-[var(--brightness)]',
-		classNames
-	)}
-	bind:clientWidth={width}
-	bind:clientHeight={height}
-	onmousemove={onMouseMove}
-	onmouseleave={onMouseLeave}
->
-	{@render children?.()}
-</div>

package/src/Toggle.svelte

@@ -1,58 +0,0 @@
-<script>
-	import { keyboard } from '@rokkit/actions'
-	import Item from './Item.svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {any}         value
-	 * @property {string}      [class]
-	 * @property {boolean}     [disabled] = false
-	 * @property {Array<any>}  [options]
-	 * @property {FieldMapper} [mapping]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: classes = '',
-		value = $bindable(null),
-		options = [false, true],
-		fields,
-		disabled = false,
-		square = false,
-		label = 'toggle',
-		onchange
-	} = $props()
-
-	const keyMappings = {
-		next: ['ArrowRight', 'ArrowDown'], // button handles space an denter by emitting click event
-		prev: ['ArrowLeft', 'ArrowUp']
-	}
-
-	function toggle(direction = 1) {
-		if (disabled) return
-
-		let nextIndex
-		const index = options.indexOf(value)
-
-		if (index == -1) {
-			nextIndex = direction == -1 ? options.length - 1 : 0
-		} else {
-			nextIndex = (index + direction + options.length) % options.length
-		}
-
-		value = options[nextIndex]
-		onchange?.(value)
-	}
-</script>
-
-<div data-toggle-root data-disabled={disabled} data-square={square} class={classes}>
-	<button
-		use:keyboard={keyMappings}
-		onnext={() => toggle()}
-		onprev={() => toggle(-1)}
-		onclick={() => toggle()}
-		aria-label={label}
-	>
-		<Item {value} {fields} />
-	</button>
-</div>

package/src/ToggleThemeMode.svelte

@@ -1,23 +0,0 @@
-<script>
-	import { defaultStateIcons } from '@rokkit/core'
-	import { vibe } from '@rokkit/states'
-	import Toggle from './Toggle.svelte'
-
-	let {
-		icons = defaultStateIcons.mode,
-		labels = ['Light Mode', 'Dark Mode'],
-		square = false
-	} = $props()
-
-	const options = $state([
-		{ label: labels[0], value: 'light', icon: icons.light },
-		{ label: labels[1], value: 'dark', icon: icons.dark }
-	])
-	let value = $derived(options.find((x) => x.value === vibe.mode))
-
-	function update(e) {
-		vibe.mode = e.value
-	}
-</script>
-
-<Toggle {value} {options} onchange={update} {square} />

package/src/Tree.svelte

@@ -1,80 +0,0 @@
-<script>
-	import { createEmitter, defaultFields } from '@rokkit/core'
-	import { navigator } from '@rokkit/actions'
-	import NestedList from './NestedList.svelte'
-	import { NestedController } from '@rokkit/states'
-	import { omit, has } from 'ramda'
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {Array<any>} [items]
-	 * @property {any} [value]
-	 * @property {import('@rokkit/core').FieldMapping} [mapping]
-	 * @property {import('./types').NodeStateIcons|Object} [icons]
-	 * @property {boolean} [autoCloseSiblings=false]
-	 * @property {boolean} [multiselect=false]
-	 * @property {Function} [header]
-	 * @property {Function} [footer]
-	 * @property {Function} [empty]
-	 * @property {Function} [stub]
-	 */
-
-	/** @type {Props & { [key: string]: any }} */
-	let {
-		class: classes = 'h-full overflow-scroll flex flex-col',
-		items = $bindable([]),
-		value = $bindable(null),
-		fields,
-		icons = {},
-		autoCloseSiblings = false,
-		multiselect = false,
-		header,
-		footer,
-		empty,
-		stub,
-		...events
-	} = $props()
-
-	let emitter = createEmitter(events, ['select', 'move', 'toggle'])
-	let wrapper = new NestedController(items, value, fields, { autoCloseSiblings, multiselect })
-	let snippets = omit(['onselect', 'onmove', 'ontoggle'], events)
-	let derivedFields = $derived({ ...defaultFields, ...fields })
-
-	function handleAction(event) {
-		const { name, data } = event.detail
-		if (name === 'select') value = data.value
-		if (has([name], emitter)) emitter[name](data)
-	}
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<rk-tree
-	tabindex="0"
-	class={classes}
-	use:navigator={{ wrapper, nested: true }}
-	onaction={handleAction}
->
-	{#if header}
-		<rk-header>{@render header()}</rk-header>
-	{/if}
-	{#if items.length === 0}
-		{#if empty}
-			{@render empty()}
-		{:else}
-			<div class="m-auto p-4 text-center text-gray-500">No data available</div>
-		{/if}
-	{/if}
-	<NestedList
-		{items}
-		fields={derivedFields}
-		{value}
-		{icons}
-		focusedKey={wrapper.currentKey}
-		selectedKeys={wrapper.selectedKeys}
-		{stub}
-		{snippets}
-	/>
-	{#if footer}
-		<rk-footer>{@render footer()}</rk-footer>
-	{/if}
-</rk-tree>