@rokkit/ui 1.0.0-next.125 → 1.0.0-next.128

package/src/utils/upload.js

@@ -0,0 +1,128 @@
+/**
+ * Upload utility functions — shared helpers for UploadTarget and UploadProgress.
+ * Pure functions with no Svelte dependency.
+ */
+
+const ARCHIVE_TYPES = new Set(['application/zip', 'application/gzip', 'application/x-tar'])
+
+/**
+ * Check if a file matches an accept string (comma-separated MIME types and extensions).
+ * @param {{ type: string, name: string }} file
+ * @param {string | null | undefined} accept - e.g. 'image/*,.pdf,application/json'
+ * @returns {boolean}
+ */
+export function matchesAccept(file, accept) {
+	if (!accept) return true
+
+	const tokens = accept.split(',').map((t) => t.trim()).filter(Boolean)
+	if (tokens.length === 0) return true
+
+	return tokens.some((token) => {
+		if (token.startsWith('.')) {
+			// Extension match (case-insensitive)
+			return file.name.toLowerCase().endsWith(token.toLowerCase())
+		}
+		if (token.endsWith('/*')) {
+			// Wildcard MIME type match (e.g. image/*)
+			const prefix = token.slice(0, -1) // 'image/'
+			return file.type.startsWith(prefix)
+		}
+		// Exact MIME type match
+		return file.type === token
+	})
+}
+
+/**
+ * Validate a file against accept and maxSize constraints.
+ * @param {{ type: string, name: string, size: number }} file
+ * @param {{ accept?: string, maxSize?: number }} constraints
+ * @returns {true | { reason: 'type' | 'size' }}
+ */
+export function validateFile(file, { accept, maxSize } = {}) {
+	if (accept && !matchesAccept(file, accept)) {
+		return { reason: 'type' }
+	}
+	if (maxSize !== undefined && file.size > maxSize) {
+		return { reason: 'size' }
+	}
+	return true
+}
+
+/**
+ * Map a MIME type to an icon class string.
+ * @param {string | null | undefined} mimeType
+ * @returns {string}
+ */
+export function inferIcon(mimeType) {
+	if (!mimeType) return 'i-lucide:file'
+
+	if (mimeType.startsWith('image/')) return 'i-lucide:image'
+	if (mimeType.startsWith('video/')) return 'i-lucide:video'
+	if (mimeType.startsWith('audio/')) return 'i-lucide:music'
+	if (mimeType === 'application/pdf') return 'i-lucide:file-text'
+	if (mimeType.startsWith('text/')) return 'i-lucide:file-text'
+	if (ARCHIVE_TYPES.has(mimeType)) return 'i-lucide:archive'
+
+	return 'i-lucide:file'
+}
+
+/**
+ * Format a byte count as a human-readable size string.
+ * @param {number} bytes
+ * @returns {string}
+ */
+export function formatSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`
+	if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`
+	if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`
+	return `${(bytes / 1024 ** 3).toFixed(1)} GB`
+}
+
+/**
+ * Group a flat file array by path field into a nested tree structure.
+ * Root-level items (empty path) stay ungrouped.
+ * Group nodes use `text` as the label field (ProxyItem compatibility).
+ *
+ * @param {Array<Record<string, any>>} items
+ * @param {string} pathField - field name containing the path (e.g. 'path')
+ * @param {string} childrenField - field name for children arrays (e.g. 'children')
+ * @returns {Array<Record<string, any>>}
+ */
+export function groupByPath(items, pathField, childrenField) {
+	if (!items || items.length === 0) return []
+
+	const root = []
+	/** @type {Map<string, Record<string, any>>} */
+	const folderMap = new Map()
+
+	for (const item of items) {
+		const rawPath = item[pathField] || ''
+		if (!rawPath) {
+			root.push(item)
+			continue
+		}
+
+		// Split path into segments, filtering empty strings from trailing slashes
+		const segments = rawPath.split('/').filter(Boolean)
+		let parent = root
+		let fullPath = ''
+
+		for (let i = 0; i < segments.length; i++) {
+			const segment = segments[i]
+			fullPath = fullPath ? `${fullPath}/${segment}` : segment
+
+			let folder = folderMap.get(fullPath)
+			if (!folder) {
+				folder = { text: segment, [childrenField]: [] }
+				folderMap.set(fullPath, folder)
+				parent.push(folder)
+			}
+
+			parent = folder[childrenField]
+		}
+
+		parent.push(item)
+	}
+
+	return root
+}

package/dist/constants.d.ts

@@ -1,2 +0,0 @@
-export const defaultMapping: FieldMapper;
-import { FieldMapper } from '@rokkit/core';

package/dist/index.d.ts

@@ -1,41 +0,0 @@
-export * from "./types.js";
-export { default as Button } from "./Button.svelte";
-export { default as Icon } from "./Icon.svelte";
-export { default as Item } from "./Item.svelte";
-export { default as Pill } from "./Pill.svelte";
-export { default as ProgressBar } from "./ProgressBar.svelte";
-export { default as Separator } from "./Separator.svelte";
-export { default as Connector } from "./Connector.svelte";
-export { default as RangeTick } from "./RangeTick.svelte";
-export { default as RangeSlider } from "./RangeSlider.svelte";
-export { default as Node } from "./Node.svelte";
-export { default as Summary } from "./Summary.svelte";
-export { default as BreadCrumbs } from "./BreadCrumbs.svelte";
-export { default as Rating } from "./Rating.svelte";
-export { default as RangeMinMax } from "./RangeMinMax.svelte";
-export { default as Range } from "./Range.svelte";
-export { default as RadioGroup } from "./RadioGroup.svelte";
-export { default as CheckBox } from "./CheckBox.svelte";
-export { default as Calendar } from "./Calendar.svelte";
-export { default as ValidationReport } from "./ValidationReport.svelte";
-export { default as ResponsiveGrid } from "./ResponsiveGrid.svelte";
-export { default as Toggle } from "./Toggle.svelte";
-export { default as Switch } from "./Switch.svelte";
-export { default as List } from "./List.svelte";
-export { default as Accordion } from "./Accordion.svelte";
-export { default as Tree } from "./Tree.svelte";
-export { default as Tabs } from "./Tabs.svelte";
-export { default as Select } from "./Select.svelte";
-export { default as MultiSelect } from "./MultiSelect.svelte";
-export { default as DropDown } from "./DropDown.svelte";
-export { default as Table } from "./TreeTable.svelte";
-export { default as ToggleThemeMode } from "./ToggleThemeMode.svelte";
-export { default as Overlay } from "./Overlay.svelte";
-export { default as Message } from "./Message.svelte";
-export { default as SlidingColumns } from "./SlidingColumns.svelte";
-export { default as Stepper } from "./Stepper.svelte";
-export { default as ProgressDots } from "./ProgressDots.svelte";
-export { default as Card } from "./Card.svelte";
-export { default as Shine } from "./Shine.svelte";
-export { default as Tilt } from "./Tilt.svelte";
-export { default as GraphPaper } from "./GraphPaper.svelte";

package/dist/lib/fields.d.ts

@@ -1,16 +0,0 @@
-/**
- * Find an attribute in a schema by path
- * @param {string} scope
- * @param {import('../types').DataSchema} schema
- * @returns {import('../types').LayoutSchema}
- * @throws {Error} Invalid path
- */
-export function findAttributeByPath(scope: string, schema: import("../types").DataSchema): import("../types").LayoutSchema;
-/**
- * Get combined schema and layout
- * @param {*} data
- * @param {import('../types').DataSchema} schema
- * @param {import('../types').LayoutSchema} layout
- * @returns {import('../types').LayoutSchema}
- */
-export function getSchemaWithLayout(schema: import("../types").DataSchema, layout: import("../types").LayoutSchema): import("../types").LayoutSchema;

package/dist/lib/form.d.ts

@@ -1,95 +0,0 @@
-export namespace messages {
-    let required: string;
-    let email: string;
-    let url: string;
-    let color: string;
-    let number: string;
-    let min: string;
-    let max: string;
-    let pattern: string;
-    let exclusiveMin: string;
-    let exclusiveMax: string;
-    let minLength: string;
-    let maxLength: string;
-    let minItems: string;
-    let maxItems: string;
-    let uniqueItems: string;
-    let contains: string;
-    let exclude: string;
-    let integer: string;
-}
-export namespace dataTypes {
-    export namespace integer_1 {
-        let editor: string;
-        namespace props {
-            let type: string;
-            let step: number;
-        }
-        let availableProps: string[];
-    }
-    export { integer_1 as integer };
-    export namespace number_1 {
-        let editor_1: string;
-        export { editor_1 as editor };
-        export namespace props_1 {
-            let type_1: string;
-            export { type_1 as type };
-            let step_1: number;
-            export { step_1 as step };
-        }
-        export { props_1 as props };
-        let availableProps_1: string[];
-        export { availableProps_1 as availableProps };
-    }
-    export { number_1 as number };
-    export namespace range {
-        let editor_2: string;
-        export { editor_2 as editor };
-        export namespace props_2 {
-            let type_2: string;
-            export { type_2 as type };
-        }
-        export { props_2 as props };
-    }
-    export let string: {
-        default: string;
-        text: string;
-        password: string;
-        email: string;
-        url: string;
-        tel: string;
-        date: string;
-        'datetime-local': string;
-        time: string;
-        week: string;
-        month: string;
-        file: string;
-        hidden: string;
-        color: string;
-        colorpicker: string;
-    };
-    export namespace _enum {
-        let _default: string;
-        export { _default as default };
-        export let select: string;
-        export let radio: string;
-    }
-    export { _enum as enum };
-    export namespace boolean {
-        let _default_1: string;
-        export { _default_1 as default };
-        export let checkbox: string;
-        let _switch: string;
-        export { _switch as switch };
-        let radio_1: string;
-        export { radio_1 as radio };
-    }
-    export namespace array {
-        let _default_2: string;
-        export { _default_2 as default };
-    }
-    export namespace object {
-        let _default_3: string;
-        export { _default_3 as default };
-    }
-}

package/dist/lib/index.d.ts

@@ -1,6 +0,0 @@
-export { addRootNode } from "./tree";
-export { deriveSchemaFromValue } from "./schema";
-export { deriveLayoutFromValue } from "./layout";
-export { messages, dataTypes } from "./form";
-export { getSchemaWithLayout, findAttributeByPath } from "./fields";
-export { deriveNestedSchema, flattenAttributes, flattenObject, flattenElement, generateIndex, generateTreeTable } from "./nested";

package/dist/lib/layout.d.ts

@@ -1,7 +0,0 @@
-/**
- * Derives a layout from a given value.
- * @param {any} value
- * @param {string} scope
- * @returns {import('../types').DataLayout}
- */
-export function deriveLayoutFromValue(value: any, scope?: string): import("../types").DataLayout;

package/dist/lib/nested.d.ts

@@ -1,48 +0,0 @@
-/**
- * Flattens an object into a flat object
- *
- * @param {Object} input - The object to flatten
- * @param {String} scope - The scope of the object
- */
-export function flattenObject(input: Object, scope?: string): any;
-/**
- * Flattens an object into an array of key-value pairs
- *
- * @param {Object} input - The object to flatten
- * @param {String} scope - The scope of the object
- */
-export function flattenAttributes(input: Object, scope?: string): {
-    key: string;
-    value: any;
-    type: string;
-    scope: string;
-}[];
-/**
- * Derives a nested schema from an object
- *
- * @param {Object} input - The object to derive the schema from
- * @param {String} scope - The scope of the object
- * @returns {Object} The derived schema
- */
-export function deriveNestedSchema(input: Object, scope?: string): Object;
-/**
- * Flattens an element into a flat object
- *
- * @param {Object} element - The element to flatten
- */
-export function flattenElement(element: Object): any;
-/**
- * Generates an index array referencing the input data
- *
- * @param {Object} data - The flat object to index
- * @param {String} key - The key to use as index
- */
-export function generateIndex(data: Object, key?: string): any;
-/**
- * Generates a tree table from the input data
- *
- * @param {Object} data - The data to generate the tree table from
- * @param {String} key - The key to use as index
- * @param {Boolean} ellipsis - Whether to truncate the value
- */
-export function generateTreeTable(data: Object, key?: string, ellipsis?: boolean): any;

package/dist/lib/schema.d.ts

@@ -1,7 +0,0 @@
-/**
- * Derives a schema from a given value.
- *
- * @param {any} data
- * @returns {import('../types').DataSchema}
- */
-export function deriveSchemaFromValue(data: any): import("../types").DataSchema;

package/dist/lib/select.d.ts

@@ -1,8 +0,0 @@
-/**
- * Get the optimal position for the list based on anchor and viewport dimensions.
- *
- * @param {HTMLElement} anchor - The anchor element to position the list relative to.
- * @param {HTMLElement} viewport - The viewport element that determines the position.
- * @returns {string} - A string with CSS position properties and values.
- */
-export function getListPosition(anchor: HTMLElement, viewport: HTMLElement): string;

package/dist/lib/tree.d.ts

@@ -1,9 +0,0 @@
-/**
- * Adds a root node to the items array converting it into a nested tree with one root node
- *
- * @param {Array<Object>} items
- * @param {string} root
- * @param {import('@rokkit/core').FieldMapping} fields
- * @returns
- */
-export function addRootNode(items: Array<Object>, root?: string, mapping?: import("@rokkit/core").FieldMapper): Object[];

package/dist/tree/List.spec.svelte.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/tree/Node.spec.svelte.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/tree/Root.spec.svelte.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types.d.ts

@@ -1,5 +0,0 @@
-export type NodeStateIcons = {
-    opened: string;
-    closed: string;
-};
-export type ConnectionType = "empty" | "last" | "child" | "sibling";

package/dist/wrappers/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Wrapper } from "./Wrapper.svelte";
-export { default as Section } from "./Section.svelte";
-export { default as Category } from "./Category.svelte";

package/src/Accordion.svelte

@@ -1,118 +0,0 @@
-<script>
-	import { equals } from 'ramda'
-	import {
-		createEmitter,
-		noop,
-		getKeyFromPath,
-		getSnippet,
-		defaultFields,
-		hasChildren
-	} from '@rokkit/core'
-	import { NestedController } from '@rokkit/states'
-	import { navigator } from '@rokkit/actions'
-	import Summary from './Summary.svelte'
-	import Item from './Item.svelte'
-	import ListBody from './ListBody.svelte'
-
-	const eventNames = ['collapse', 'change', 'expand', 'click', 'select', 'move']
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} [items]
-	 * @property {import('@rokkit/core').FieldMapper} [mapping]
-	 * @property {boolean} [autoCloseSiblings]
-	 * @property {boolean} [multiselect]
-	 * @property {any} [value]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: classes = '',
-		items = $bindable([]),
-		value = $bindable(null),
-		fields,
-		autoCloseSiblings = false,
-		multiselect = false,
-		header = null,
-		footer = null,
-		empty = null,
-		oncollapse,
-		onexpand,
-		onchange,
-		onselect,
-		onmove,
-		...snippets
-	} = $props()
-
-	let emitter = $derived(
-		createEmitter({ oncollapse, onexpand, onchange, onselect, onmove }, eventNames)
-	)
-	function handleAction(event) {
-		const { name, data } = event.detail
-
-		if (has(name, emitter)) {
-			value = data.value
-			selected = data.selected
-			emitter[name](data)
-		}
-	}
-
-	let wrapper = new NestedController(items, value, fields, {
-		multiselect,
-		autoCloseSiblings
-	})
-	let derivedFields = $derived({ ...defaultFields, ...fields })
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<rk-accordion
-	class={classes}
-	tabindex="0"
-	use:navigator={{ wrapper, nested: true }}
-	onactivate={() => (value = wrapper.value)}
->
-	{#if header}
-		<rk-header>{@render header()}</rk-header>
-	{/if}
-	{#if items.length === 0}
-		<rk-list-item role="presentation">
-			{#if empty}
-				{@render empty()}
-			{:else}
-				No items found.
-			{/if}
-		</rk-list-item>
-	{/if}
-	{#each items as item, index (index)}
-		{@const key = `${index}`}
-		{@const expanded = item[derivedFields.expanded]}
-		<div
-			class="flex flex-col"
-			class:is-expanded={expanded}
-			class:is-selected={wrapper.selectedKeys.has(key)}
-			data-path={index}
-		>
-			<Summary
-				bind:value={items[index]}
-				{fields}
-				{expanded}
-				hasChildren={hasChildren(item, derivedFields)}
-			/>
-			{#if expanded}
-				<rk-list role="listbox" tabindex="-1">
-					<ListBody
-						bind:items={items[fields.children]}
-						bind:value
-						fields={fields.fields ?? fields}
-						{selected}
-						onchange={emitter.change}
-						{snippets}
-					/>
-				</rk-list>
-			{/if}
-		</div>
-	{/each}
-	{#if footer}
-		<rk-footer>{@render footer()}</rk-footer>
-	{/if}
-</rk-accordion>

package/src/BreadCrumbs.svelte

@@ -1,32 +0,0 @@
-<script>
-	import Item from './Item.svelte'
-	import Icon from './Icon.svelte'
-	import { Proxy } from '@rokkit/states'
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} [items]
-	 * @property {string} [separator]
-	 * @property {any} [fields]
-	 * @property {any} [crumb]
-	 */
-
-	/** @type {Props} */
-	let { class: classes = '', items = [], separator = '/', fields, child } = $props()
-	let childSnippet = $derived(child ? child : defaultChild)
-</script>
-
-{#snippet defaultChild(proxy)}
-	<Item {proxy} />
-{/snippet}
-<div data-crumb-root class={classes}>
-	{#each items as item, index (index)}
-		{@const proxy = new Proxy(item, fields)}
-		{#if index > 0}
-			<Icon name={separator} data-crumb-separator></Icon>
-		{/if}
-		<div data-crumb-item class:is-selected={index === items.length - 1}>
-			{@render childSnippet?.(proxy)}
-		</div>
-	{/each}
-</div>

package/src/Button.svelte

@@ -1,57 +0,0 @@
-<script>
-	import Icon from './Icon.svelte'
-	/**
-	 * @typedef {Object} ButtonProps
-	 * @property {'default' | 'primary' | 'secondary' | 'tertiary'} variant - The variant of the button.
-	 * @property {'button' | 'submit' | 'reset'} type - The type of the button.
-	 * @property {string} [label] - The label of the button.
-	 * @property {string|import('svelte').Snippet} [leftIcon] - The left icon of the button.
-	 * @property {string|import('svelte').Snippet} [rightIcon] - The right icon of the button.
-	 * @property {import('svelte').Snippet} [children]
-	 * @property {Function} onclick - The onclick event of the button.
-	 * @property {Function} onsubmit - The onsubmit event of the button.
-	 * @property {Function} onreset - The onreset event of the button.
-	 */
-	/** @type {ButtonProps} */
-	let {
-		class: classes = '',
-		variant = 'default',
-		type = 'button',
-		leftIcon = null,
-		rightIcon = null,
-		label = null,
-		children = null,
-		description = null,
-		disabled = false,
-		onclick
-	} = $props()
-</script>
-
-<button
-	data-button-root
-	data-variant={variant}
-	data-disabled={disabled}
-	class={classes}
-	{disabled}
-	{type}
-	{onclick}
-	aria-label={description ?? label}
->
-	{#if typeof leftIcon === 'string'}
-		<Icon name={leftIcon} />
-	{:else}
-		{@render leftIcon?.()}
-	{/if}
-
-	{#if children}
-		{@render children()}
-	{:else if label}
-		{label}
-	{/if}
-
-	{#if typeof rightIcon === 'string'}
-		<Icon name={rightIcon} />
-	{:else}
-		{@render rightIcon?.()}
-	{/if}
-</button>