@widgetic/design-system 0.3.68

package/dist/components/shad-editor/icons/ordered-list.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { ListOrdered } from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				variant="ghost"
+				class={cn('size-8', editor.isActive('orderedList') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleOrderedList().run()}
+			>
+				<ListOrdered />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Ordered List</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/ordered-list.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const OrderedList: import("svelte").Component<$$ComponentProps, {}, "">;
+type OrderedList = ReturnType<typeof OrderedList>;
+export default OrderedList;

package/dist/components/shad-editor/icons/quickcolor.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Button } from '../../ui/button/index.js';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { type Editor } from '@tiptap/core';
+	import { Check, ChevronDown } from 'lucide-svelte';
+
+	let { editor }: { editor: Editor } = $props();
+
+	const colors = [
+		{ label: 'Default', value: '' },
+		{ label: 'Blue', value: '#0000FF' },
+		{ label: 'Brown', value: '#A52A2A' },
+		{ label: 'Green', value: '#008000' },
+		{ label: 'Grey', value: '#808080' },
+		{ label: 'Orange', value: '#FFA500' },
+		{ label: 'Pink', value: '#FFC0CB' },
+		{ label: 'Purple', value: '#800080' },
+		{ label: 'Red', value: '#FF0000' },
+		{ label: 'Yellow', value: '#FFFF00' }
+	];
+
+	const currentColor = $derived(editor.getAttributes('textStyle').color);
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					<Button variant="ghost" size="sm" class="h-8" style={`color: ${currentColor}`}>
+						A
+						<ChevronDown class="!size-3" />
+					</Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
+					<DropdownMenu.Group>
+						<span class="text-[0.75rem] font-medium text-muted-foreground">Text Color</span>
+						{#each colors as color}
+							<DropdownMenu.Item
+								class="flex items-center"
+								onclick={() => {
+									if (color.value === '' || color.label === 'Default')
+										editor.chain().focus().unsetColor().run();
+									else
+										editor
+											.chain()
+											.focus()
+											.setColor(currentColor === color.value ? '' : color.value)
+											.run();
+								}}
+								closeOnSelect={false}
+							>
+								<span class="rounded border px-1 py-px font-medium" style={`color: ${color.value}`}
+									>A</span
+								>
+								<span>{color.label}</span>
+								{#if editor.isActive('textStyle', { color: color.value })}
+									<Check class="absolute right-2 !size-3 text-muted-foreground" />
+								{/if}
+							</DropdownMenu.Item>
+						{/each}
+					</DropdownMenu.Group>
+					<DropdownMenu.Separator />
+					<DropdownMenu.Group>
+						<span class="text-[0.75rem] font-medium text-muted-foreground">Background Colors</span>
+						{#each colors as color}
+							<DropdownMenu.Item
+								class="flex items-center"
+								onclick={() => {
+									if (color.value === '' || color.label === 'Default')
+										editor.chain().focus().unsetHighlight().run();
+									else editor.chain().focus().toggleHighlight({ color: color.value }).run();
+								}}
+								closeOnSelect={false}
+							>
+								<span
+									class="rounded px-1 py-px font-medium"
+									style={`background-color: ${color.value};`}>A</span
+								>
+								<span>{color.label}</span>
+								{#if editor.isActive('highlight', { color: color.value })}
+									<Check class="absolute right-2 !size-3 text-muted-foreground" />
+								{/if}
+							</DropdownMenu.Item>
+						{/each}
+					</DropdownMenu.Group>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Quick Colors</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/quickcolor.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Quickcolor: import("svelte").Component<$$ComponentProps, {}, "">;
+type Quickcolor = ReturnType<typeof Quickcolor>;
+export default Quickcolor;

package/dist/components/shad-editor/icons/redo.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Redo } from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				variant="ghost"
+				class="size-8"
+				onclick={() => editor.chain().focus().redo().run()}
+				disabled={!editor.can().chain().focus().redo().run()}
+			>
+				<Redo />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Undo (⌘R)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/redo.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Redo } from 'lucide-svelte';
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Redo: import("svelte").Component<$$ComponentProps, {}, "">;
+type Redo = ReturnType<typeof Redo>;
+export default Redo;

package/dist/components/shad-editor/icons/search-replace.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import { Button } from '../../ui/button/index.js';
+	import { Input } from '../../ui/input/index.js';
+	import * as Popover from '../../ui/popover/index.js';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { type Editor } from '@tiptap/core';
+	import {
+		ArrowLeft,
+		ArrowRight,
+		TextSearch,
+		X,
+		Replace,
+		ReplaceAll,
+		ChevronDown
+	} from 'lucide-svelte';
+
+	let { editor }: { editor: Editor } = $props();
+
+	let searchText = $state('');
+	let replaceText = $state('');
+	let caseSensitive = $state(false);
+
+	let searchIndex = $derived(editor.storage?.searchAndReplace?.resultIndex);
+	let searchCount = $derived(editor.storage?.searchAndReplace?.results.length);
+
+	function updateSearchTerm(clearIndex: boolean = false) {
+		if (clearIndex) editor.commands.resetIndex();
+
+		editor.commands.setSearchTerm(searchText);
+		editor.commands.setReplaceTerm(replaceText);
+		editor.commands.setCaseSensitive(caseSensitive);
+	}
+
+	function goToSelection() {
+		const { results, resultIndex } = editor.storage.searchAndReplace;
+		const position: Range = results[resultIndex];
+		if (!position) return;
+		//@ts-ignore
+		editor.commands.setTextSelection(position);
+		const { node } = editor.view.domAtPos(editor.state.selection.anchor);
+		node instanceof HTMLElement && node.scrollIntoView({ behavior: 'smooth', block: 'center' });
+	}
+
+	function replace() {
+		editor.commands.replace();
+		goToSelection();
+	}
+
+	const next = () => {
+		editor.commands.nextSearchResult();
+		goToSelection();
+	};
+
+	const previous = () => {
+		editor.commands.previousSearchResult();
+		goToSelection();
+	};
+
+	const clear = () => {
+		searchText = '';
+		replaceText = '';
+		editor.commands.resetIndex();
+	};
+
+	const replaceAll = () => editor.commands.replaceAll();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Popover.Root
+				onOpenChange={(open) => {
+					if (open) updateSearchTerm();
+					else {
+						clear();
+						updateSearchTerm(true);
+					}
+				}}
+			>
+				<Popover.Trigger>
+					<Button variant="ghost" size="sm" class="h-8">
+						<TextSearch />
+						<ChevronDown class="size-3 text-muted-foreground" />
+					</Button>
+				</Popover.Trigger>
+				<Popover.Content class="bg-popover shadow-lg *:my-2">
+					<Popover.Close
+						class="absolute right-2 top-0 text-muted-foreground"
+						onclick={() => {
+							clear();
+							updateSearchTerm(true);
+						}}
+					>
+						<X class="size-4" />
+					</Popover.Close>
+					<div class="flex items-center justify-between">
+						<Input
+							placeholder="Enter Text to search.."
+							bind:value={searchText}
+							oninput={() => updateSearchTerm()}
+							class="mr-1 "
+						/>
+						<Button variant="ghost" class="ml-1 size-8" onclick={previous}>
+							<ArrowLeft />
+						</Button>
+						<Button variant="ghost" class="ml-1 size-8" onclick={next}>
+							<ArrowRight />
+						</Button>
+					</div>
+					<div class="flex items-center justify-between">
+						<Input
+							placeholder="Enter Text to Replace.."
+							bind:value={replaceText}
+							oninput={() => updateSearchTerm()}
+							class="mr-1 "
+						/>
+						<Button variant="ghost" class="ml-1 size-8" onclick={replace}>
+							<Replace />
+						</Button>
+						<Button variant="ghost" class="ml-1 size-8" onclick={replaceAll}>
+							<ReplaceAll />
+						</Button>
+					</div>
+
+					<div class="flex items-center justify-between">
+						<div class="flex items-center gap-2">
+							<input
+								type="checkbox"
+								class="checkbox"
+								bind:checked={caseSensitive}
+								onchange={() => updateSearchTerm()}
+							/>
+							<p>Case Sensitive</p>
+						</div>
+						<div class="flex items-center gap-2">
+							{searchCount > 0 ? searchIndex + 1 : 0} / {searchCount}
+						</div>
+					</div>
+				</Popover.Content>
+			</Popover.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Search And Replace Text</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/search-replace.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const SearchReplace: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchReplace = ReturnType<typeof SearchReplace>;
+export default SearchReplace;

package/dist/components/shad-editor/icons/strikethrough.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Strikethrough } from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				variant="ghost"
+				class={cn('size-8', editor.isActive('strike') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleStrike().run()}
+			>
+				<Strikethrough />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Strike (⌘⇧S)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/strikethrough.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Strikethrough } from 'lucide-svelte';
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Strikethrough: import("svelte").Component<$$ComponentProps, {}, "">;
+type Strikethrough = ReturnType<typeof Strikethrough>;
+export default Strikethrough;

package/dist/components/shad-editor/icons/subscript.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Subscript } from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				variant="ghost"
+				class={cn('size-8', editor.isActive('subscript') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleSubscript().run()}
+			>
+				<Subscript />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Subscript (⌘,)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/subscript.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Subscript } from 'lucide-svelte';
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Subscript: import("svelte").Component<$$ComponentProps, {}, "">;
+type Subscript = ReturnType<typeof Subscript>;
+export default Subscript;

package/dist/components/shad-editor/icons/superscript.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Superscript } from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				variant="ghost"
+				class={cn('size-8', editor.isActive('superscript') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleSuperscript().run()}
+			>
+				<Superscript />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Superscript (⌘.)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/superscript.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Superscript } from 'lucide-svelte';
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Superscript: import("svelte").Component<$$ComponentProps, {}, "">;
+type Superscript = ReturnType<typeof Superscript>;
+export default Superscript;

package/dist/components/shad-editor/icons/table.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { Button } from '../../ui/button/index.js';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { type Editor } from '@tiptap/core';
+	import { Table, ChevronDown } from 'lucide-svelte';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					<Button variant="ghost" size="sm" class="h-8">
+						<Table />
+						<ChevronDown class="!size-3" />
+					</Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
+					<DropdownMenu.Item
+						onclick={() =>
+							editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
+					>
+						<span>Insert Table</span>
+					</DropdownMenu.Item>
+					<DropdownMenu.Sub>
+						<DropdownMenu.SubTrigger>
+							<span>Header</span>
+						</DropdownMenu.SubTrigger>
+						<DropdownMenu.SubContent>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().toggleHeaderColumn().run()}>
+								<span>Toggle Column</span>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().toggleHeaderRow().run()}>
+								<span>Toggle Row</span>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().toggleHeaderCell().run()}>
+								<span>Toggle Cell</span>
+							</DropdownMenu.Item>
+						</DropdownMenu.SubContent>
+					</DropdownMenu.Sub>
+					<DropdownMenu.Sub>
+						<DropdownMenu.SubTrigger>
+							<span>Cells</span>
+						</DropdownMenu.SubTrigger>
+						<DropdownMenu.SubContent>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().mergeCells().run()}>
+								<span>Merge</span>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().splitCell().run()}>
+								<span>Split</span>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().mergeOrSplit().run()}>
+								<span>Merge or Split</span>
+							</DropdownMenu.Item>
+						</DropdownMenu.SubContent>
+					</DropdownMenu.Sub>
+					<DropdownMenu.Sub>
+						<DropdownMenu.SubTrigger>
+							<span>Row</span>
+						</DropdownMenu.SubTrigger>
+						<DropdownMenu.SubContent>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().addRowBefore().run()}>
+								<span>Insert Above</span>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().addRowAfter().run()}>
+								<span>Insert Below</span>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item
+								onclick={() => editor.chain().focus().deleteRow().run()}
+								class="text-destructive hover:text-foreground data-[highlighted]:bg-destructive"
+							>
+								<span>Delete Row</span>
+							</DropdownMenu.Item>
+						</DropdownMenu.SubContent>
+					</DropdownMenu.Sub>
+					<DropdownMenu.Sub>
+						<DropdownMenu.SubTrigger>
+							<span>Column</span>
+						</DropdownMenu.SubTrigger>
+						<DropdownMenu.SubContent>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().addColumnBefore().run()}>
+								<span>Insert Before</span>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item onclick={() => editor.chain().focus().addColumnAfter().run()}>
+								<span>Insert After</span>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item
+								onclick={() => editor.chain().focus().deleteColumn().run()}
+								class="text-destructive hover:text-foreground data-[highlighted]:bg-destructive"
+							>
+								<span>Delete</span>
+							</DropdownMenu.Item>
+						</DropdownMenu.SubContent>
+					</DropdownMenu.Sub>
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().deleteTable().run()}
+						class="text-destructive hover:text-foreground data-[highlighted]:bg-destructive"
+					>
+						<span>Delete</span>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Table</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/table.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Editor } from '@tiptap/core';
+import { Table } from 'lucide-svelte';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/shad-editor/icons/task-list.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { CheckSquare } from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				variant="ghost"
+				class={cn('size-8', editor.isActive('taskList') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleTaskList().run()}
+			>
+				<CheckSquare />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Tasks List (⌘⇧9)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/task-list.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const TaskList: import("svelte").Component<$$ComponentProps, {}, "">;
+type TaskList = ReturnType<typeof TaskList>;
+export default TaskList;