sheer-ui 0.0.0

package/src/lib/components/table/table-body.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} data-slot="table-body" class={join('[&_tr:last-child]:border-0', className)} {...restProps}>
+	{@render children?.()}
+</tbody>

package/src/lib/components/table/table-caption.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption bind:this={ref} data-slot="table-caption" class={join('text-muted-foreground mt-4 text-sm', className)} {...restProps}>
+	{@render children?.()}
+</caption>

package/src/lib/components/table/table-cell.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLTdAttributes } from 'svelte/elements';
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={join('bg-clip-padding p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pe-0', className)}
+	{...restProps}>
+	{@render children?.()}
+</td>

package/src/lib/components/table/table-footer.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={join('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+	{...restProps}>
+	{@render children?.()}
+</tfoot>

package/src/lib/components/table/table-head.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLThAttributes } from 'svelte/elements';
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	data-slot="table-head"
+	class={join(
+		'text-foreground h-10 bg-clip-padding px-2 text-start align-middle font-medium whitespace-nowrap has-[[role=checkbox]]:pe-0',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</th>

package/src/lib/components/table/table-header.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead bind:this={ref} data-slot="table-header" class={join('[&_tr]:border-b', className)} {...restProps}>
+	{@render children?.()}
+</thead>

package/src/lib/components/table/table-row.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={join('hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}
+	{...restProps}>
+	{@render children?.()}
+</tr>

package/src/lib/components/table/table.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table bind:this={ref} data-slot="table" class={join('w-full caption-bottom text-sm', className)} {...restProps}>
+		{@render children?.()}
+	</table>
+</div>

package/src/lib/components/tabs/components/tabs-content.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { TabsContentProps } from '../types.js';
+	import { TabsContentState } from '../tabs.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, id = createId(uid), ref = $bindable(null), value, ...restProps }: TabsContentProps = $props();
+
+	const contentState = TabsContentState.create({
+		value: boxWith(() => value),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps({ 'data-slot': 'tabs-content', class: 'flex-1 outline-none' }, restProps, contentState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/tabs/components/tabs-list.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { TabsListProps } from '../types.js';
+	import { TabsListState } from '../tabs.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { child, children, id = createId(uid), ref = $bindable(null), ...restProps }: TabsListProps = $props();
+
+	const listState = TabsListState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'tabs-list',
+				class: 'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-0.75',
+			},
+			restProps,
+			listState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/tabs/components/tabs-trigger.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { TabsTriggerProps } from '../types.js';
+	import { TabsTriggerState } from '../tabs.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		disabled = false,
+		id = createId(uid),
+		type = 'button',
+		value,
+		ref = $bindable(null),
+		...restProps
+	}: TabsTriggerProps = $props();
+
+	const triggerState = TabsTriggerState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		value: boxWith(() => value),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'tabs-trigger',
+				class:
+					"data-active:bg-background dark:data-active:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-active:border-border dark:data-active:bg-border/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-active:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			},
+			restProps,
+			triggerState.props,
+			{ type },
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/tabs/components/tabs.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { TabsRootProps } from '../types.js';
+	import { TabsRootState } from '../tabs.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(''),
+		onValueChange = () => {},
+		orientation = 'horizontal',
+		loop = true,
+		activationMode = 'automatic',
+		disabled = false,
+		children,
+		child,
+		...restProps
+	}: TabsRootProps = $props();
+
+	const rootState = TabsRootState.create({
+		id: boxWith(() => id),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			},
+		),
+		orientation: boxWith(() => orientation),
+		loop: boxWith(() => loop),
+		activationMode: boxWith(() => activationMode),
+		disabled: boxWith(() => disabled),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps({ 'data-slot': 'tabs', class: 'flex flex-col gap-2' }, restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/tabs/index.ts

@@ -0,0 +1,11 @@
+export { default as Root } from './components/tabs.svelte';
+export { default as Content } from './components/tabs-content.svelte';
+export { default as List } from './components/tabs-list.svelte';
+export { default as Trigger } from './components/tabs-trigger.svelte';
+
+export type {
+	TabsRootProps as RootProps,
+	TabsContentProps as ContentProps,
+	TabsTriggerProps as TriggerProps,
+	TabsListProps as ListProps,
+} from './types.js';

package/src/lib/components/tabs/tabs.svelte.ts

@@ -0,0 +1,253 @@
+import { createContext, untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import { attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import type { TabsActivationMode } from './types.js';
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
+import { kbd } from '../../internal/kbd.js';
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { Orientation } from '../../internal/index.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+
+const tabsAttrs = createBitsAttrs({
+	component: 'tabs',
+	parts: ['root', 'list', 'trigger', 'content'],
+});
+
+const [getTabsRoot, setTabsRoot] = createContext<TabsRootState>();
+
+interface TabsRootStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			orientation: Orientation;
+			loop: boolean;
+			activationMode: TabsActivationMode;
+			disabled: boolean;
+		}>,
+		WritableBoxedValues<{
+			value: string;
+		}> {}
+
+export class TabsRootState {
+	static create(opts: TabsRootStateOpts) {
+		return setTabsRoot(new TabsRootState(opts));
+	}
+	readonly opts: TabsRootStateOpts;
+	readonly attachment: RefAttachment;
+	readonly rovingFocusGroup: RovingFocusGroup;
+	triggerIds = $state<string[]>([]);
+	// holds the trigger ID for each value to associate it with the content
+	readonly valueToTriggerId = new SvelteMap<string, string>();
+	// holds the content ID for each value to associate it with the trigger
+	readonly valueToContentId = new SvelteMap<string, string>();
+
+	constructor(opts: TabsRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(opts.ref);
+		this.rovingFocusGroup = new RovingFocusGroup({
+			candidateAttr: tabsAttrs.trigger,
+			rootNode: this.opts.ref,
+			loop: this.opts.loop,
+			orientation: this.opts.orientation,
+		});
+	}
+
+	registerTrigger(id: string, value: string) {
+		this.triggerIds.push(id);
+		this.valueToTriggerId.set(value, id);
+
+		// returns the deregister function
+		return () => {
+			this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
+			this.valueToTriggerId.delete(value);
+		};
+	}
+
+	registerContent(id: string, value: string) {
+		this.valueToContentId.set(value, id);
+
+		// returns the deregister function
+		return () => {
+			this.valueToContentId.delete(value);
+		};
+	}
+
+	setValue(v: string) {
+		this.opts.value.current = v;
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'data-orientation': this.opts.orientation.current,
+				[tabsAttrs.root]: '',
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface TabsListStateOpts extends WithRefOpts {}
+
+export class TabsListState {
+	static create(opts: TabsListStateOpts) {
+		return new TabsListState(opts, getTabsRoot());
+	}
+	readonly opts: TabsListStateOpts;
+	readonly root: TabsRootState;
+	readonly attachment: RefAttachment;
+	readonly #isDisabled = $derived.by(() => this.root.opts.disabled.current);
+
+	constructor(opts: TabsListStateOpts, root: TabsRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(opts.ref);
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: 'tablist',
+				'aria-orientation': this.root.opts.orientation.current,
+				'data-orientation': this.root.opts.orientation.current,
+				[tabsAttrs.list]: '',
+				'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface TabsTriggerStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			value: string;
+			disabled: boolean;
+		}> {}
+
+export class TabsTriggerState {
+	static create(opts: TabsTriggerStateOpts) {
+		return new TabsTriggerState(opts, getTabsRoot());
+	}
+	readonly opts: TabsTriggerStateOpts;
+	readonly root: TabsRootState;
+	readonly attachment: RefAttachment;
+	readonly #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
+	readonly #tabIndex = $derived.by(() => (this.#isActive || !this.root.opts.value.current ? 0 : -1));
+	readonly #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+	readonly #ariaControls = $derived.by(() => this.root.valueToContentId.get(this.opts.value.current));
+
+	constructor(opts: TabsTriggerStateOpts, root: TabsRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(opts.ref);
+		$effect(() => {
+			const id = this.opts.id.current;
+			const value = this.opts.value.current;
+			return untrack(() => {
+				return this.root.registerTrigger(id, value);
+			});
+		});
+
+		this.onfocus = this.onfocus.bind(this);
+		this.onclick = this.onclick.bind(this);
+		this.onkeydown = this.onkeydown.bind(this);
+	}
+
+	#activate() {
+		if (this.root.opts.value.current === this.opts.value.current) return;
+		this.root.setValue(this.opts.value.current);
+	}
+
+	onfocus(_: BitsFocusEvent) {
+		if (this.root.opts.activationMode.current !== 'automatic' || this.#isDisabled) return;
+		this.#activate();
+	}
+
+	onclick(_: BitsMouseEvent) {
+		if (this.#isDisabled) return;
+		this.#activate();
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		if (this.#isDisabled) return;
+		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+			e.preventDefault();
+			this.#activate();
+			return;
+		}
+		this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: 'tab',
+				'data-state': getTabDataState(this.#isActive),
+				'data-value': this.opts.value.current,
+				'data-orientation': this.root.opts.orientation.current,
+				'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
+				'aria-selected': boolToStr(this.#isActive),
+				'aria-controls': this.#ariaControls,
+				[tabsAttrs.trigger]: '',
+				disabled: boolToTrueOrUndef(this.#isDisabled),
+				tabindex: this.#tabIndex,
+				//
+				onclick: this.onclick,
+				onfocus: this.onfocus,
+				onkeydown: this.onkeydown,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface TabsContentStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			value: string;
+		}> {}
+
+export class TabsContentState {
+	static create(opts: TabsContentStateOpts) {
+		return new TabsContentState(opts, getTabsRoot());
+	}
+	readonly opts: TabsContentStateOpts;
+	readonly root: TabsRootState;
+	readonly attachment: RefAttachment;
+	readonly #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
+	readonly #ariaLabelledBy = $derived.by(() => this.root.valueToTriggerId.get(this.opts.value.current));
+
+	constructor(opts: TabsContentStateOpts, root: TabsRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(opts.ref);
+		$effect(() => {
+			const id = this.opts.id.current;
+			const value = this.opts.value.current;
+			return untrack(() => {
+				return this.root.registerContent(id, value);
+			});
+		});
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: 'tabpanel',
+				hidden: boolToTrueOrUndef(!this.#isActive),
+				tabindex: 0,
+				'data-value': this.opts.value.current,
+				'data-state': getTabDataState(this.#isActive),
+				'aria-labelledby': this.#ariaLabelledBy,
+				'data-orientation': this.root.opts.orientation.current,
+				[tabsAttrs.content]: '',
+				...this.attachment,
+			}) as const,
+	);
+}
+
+const getTabDataState = (condition: boolean): 'active' | 'inactive' => condition ? 'active' : 'inactive';

package/src/lib/components/tabs/types.ts

@@ -0,0 +1,86 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { Orientation } from "../../internal/index.js";
+import type {
+	BitsPrimitiveButtonAttributes,
+	BitsPrimitiveDivAttributes,
+} from "../../internal/attribute-types.js";
+
+export type TabsActivationMode = "manual" | "automatic";
+
+export type TabsRootPropsWithoutHTML = WithChild<{
+	/**
+	 * The value of the selected tab.
+	 */
+	value?: string;
+
+	/**
+	 * A callback function called when the selected tab changes.
+	 */
+	onValueChange?: OnChangeFn<string>;
+
+	/**
+	 * The orientation of the tabs.
+	 *
+	 * @defaultValue "horizontal"
+	 */
+	orientation?: Orientation;
+
+	/**
+	 * Whether to loop through the tabs when reaching the end
+	 * when using the keyboard.
+	 *
+	 * @defaultValue false
+	 */
+	loop?: boolean;
+
+	/**
+	 * How the tabs should be activated. If set to `'automatic'`, the tabs
+	 * will be activated when the trigger is focused. If set to `'manual'`,
+	 * the tabs will be activated when the trigger is pressed.
+	 *
+	 * @defaultValue "automatic"
+	 */
+	activationMode?: TabsActivationMode;
+
+	/**
+	 * Whether the tabs are disabled or not.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean;
+}>;
+
+export type TabsRootProps = TabsRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, TabsRootPropsWithoutHTML>;
+
+export type TabsListPropsWithoutHTML = WithChild;
+
+export type TabsListProps = TabsListPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, TabsListPropsWithoutHTML>;
+
+export type TabsTriggerPropsWithoutHTML = WithChild<{
+	/**
+	 * The value of the tab associated with this trigger.
+	 */
+	value: string;
+
+	/**
+	 * Whether the trigger is disabled or not.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean | null | undefined;
+}>;
+
+export type TabsTriggerProps = TabsTriggerPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, TabsTriggerPropsWithoutHTML>;
+
+export type TabsContentPropsWithoutHTML = WithChild<{
+	/**
+	 * The value of the tab associated with this content.
+	 */
+	value: string;
+}>;
+
+export type TabsContentProps = TabsContentPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, TabsContentPropsWithoutHTML>;

package/src/lib/components/textarea/index.ts

@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+	Root,
+	//
+	Root as Textarea,
+};

package/src/lib/components/textarea/textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef, WithoutChildren } from '../../internal/utils.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'textarea',
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={join(
+		'border-border placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-border/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+		className,
+	)}
+	bind:value
+	{...restProps}></textarea>