@widgetic/design-system 0.3.68

package/dist/components/shad-editor/editor.css

@@ -0,0 +1,179 @@
+.tiptap :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+	margin-top: 0 !important;
+	margin-bottom: 0 !important;
+}
+
+.tiptap code:not(pre code) {
+	/* Remove the before and after pseudo elements */
+	@apply rounded border bg-muted/50 p-1 before:content-[''] after:content-[''];
+}
+
+.tiptap blockquote p {
+	@apply before:content-[''] after:content-[''];
+}
+
+.tiptap a {
+	@apply text-blue-600 underline;
+}
+
+ul[data-type='taskList'] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+ul[data-type='taskList'] li {
+	display: flex;
+	align-items: center;
+}
+
+ul li,
+ol li {
+	margin-top: 0 !important;
+	margin-bottom: 0 !important;
+}
+
+ul[data-type='taskList'] li label {
+	flex: 0 0 auto;
+	margin-right: 0.5rem;
+	user-select: none;
+}
+
+ul[data-type='taskList'] li div {
+	flex: 1 1 auto;
+}
+
+ul[data-type='taskList'] li label {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+ul[data-type='taskList'] li[data-checked='true'] div {
+	@apply text-muted-foreground line-through;
+}
+
+input[type='checkbox'] {
+	@apply size-4 cursor-pointer rounded !important;
+}
+
+ul[data-type='taskList'] ul[data-type='taskList'] {
+	margin: 0;
+}
+
+/* Color swatches */
+.color {
+	@apply whitespace-nowrap;
+}
+
+.color::before {
+	@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded border border-muted align-middle;
+	background-color: var(--color);
+	content: ' ';
+}
+
+/* Table-specific styling */
+.tiptap table {
+	border-collapse: collapse;
+	margin: 0;
+	overflow: hidden;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.tiptap table td,
+.tiptap table th {
+	@apply border border-muted;
+	box-sizing: border-box;
+	min-width: 1em;
+	padding: 6px 8px;
+	position: relative;
+	vertical-align: top;
+}
+
+.tiptap table td > *,
+.tiptap table th > * {
+	margin-bottom: 0;
+}
+
+.tiptap table th {
+	@apply bg-muted/50 text-left font-bold;
+}
+
+.tiptap table .selectedCell:after {
+	@apply pointer-events-none absolute bottom-0 left-0 right-0 top-0 border-[2px] border-muted-foreground;
+	content: '';
+	z-index: 2;
+}
+
+.tiptap table .column-resize-handle {
+	@apply pointer-events-none absolute -bottom-[2px] -right-[2px] top-0 w-1 bg-muted;
+}
+
+.tiptap .tableWrapper {
+	margin: 1.5rem 0;
+	overflow-x: auto;
+}
+
+.tiptap.resize-cursor {
+	cursor: ew-resize;
+	cursor: col-resize;
+}
+
+/* Tiptap code block */
+.tiptap pre {
+	@apply m-0 flex h-fit overflow-auto !rounded-none bg-transparent p-0;
+}
+
+.tiptap pre code {
+	@apply flex-1 !rounded-none bg-transparent p-0 text-inherit;
+}
+
+.tiptap .search-result {
+	background-color: yellow;
+}
+
+.tiptap .search-result-current {
+	background-color: orange;
+}
+
+/* Text styling and color preservation */
+.tiptap {
+	color: inherit;
+}
+
+.tiptap [data-text-style] {
+	color: inherit;
+}
+
+.tiptap [data-text-style][style*="color"] {
+	color: var(--color) !important;
+}
+
+.tiptap strong,
+.tiptap em,
+.tiptap u {
+	color: inherit;
+}
+
+.tiptap strong[style*="color"],
+.tiptap em[style*="color"],
+.tiptap u[style*="color"] {
+	color: var(--color) !important;
+}
+
+.tiptap p,
+.tiptap h1,
+.tiptap h2,
+.tiptap h3,
+.tiptap h4 {
+	color: inherit;
+}
+
+.tiptap p[style*="color"],
+.tiptap h1[style*="color"],
+.tiptap h2[style*="color"],
+.tiptap h3[style*="color"],
+.tiptap h4[style*="color"] {
+	color: var(--color) !important;
+}

package/dist/components/shad-editor/icons/block-quote.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Quote } 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('blockquote') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleBlockquote().run()}
+			>
+				<Quote />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Block Quote (⌘⇧B)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

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

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

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Bold } 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('bold') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleBold().run()}
+			>
+				<Bold />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Bold (⌘B)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

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

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

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { List } 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"
+				size="icon"
+				class={cn('size-8', editor.isActive('bulletList') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleBulletList().run()}
+			>
+				<List />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Bullet List (⌘⇧8)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

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

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

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Code } 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"
+				size="icon"
+				class={cn('size-8', editor.isActive('code') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleCode().run()}
+			>
+				<Code />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Code (⌘E)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

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

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

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Highlighter } from 'lucide-svelte';
+	import { X } from 'lucide-svelte';
+	import { ChevronDown } 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';
+	import * as Popover from '../../ui/popover/index.js';
+	import { mode } from 'mode-watcher';
+	import ColorPicker from 'svelte-awesome-color-picker';
+
+	interface Props {
+		editor: Editor;
+		color?: string;
+	}
+
+	let { editor, color = $bindable('') }: Props = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Popover.Root>
+				<Popover.Trigger>
+					<Button
+						variant="ghost"
+						size="sm"
+						class={cn('h-8', editor.isActive('highlight') && 'bg-muted')}
+						onclick={() => editor.chain().focus()}
+					>
+						<Highlighter />
+						<ChevronDown class="!size-3 text-muted-foreground" />
+					</Button>
+				</Popover.Trigger>
+				<Popover.Content class="bg-popover shadow-lg *:my-2">
+					<div class="flex items-center justify-between">
+						<h1 class="text-[1.2rem] font-bold">Pick a highlight color</h1>
+						<Popover.Close>
+							<X class="size-4 text-muted-foreground" />
+						</Popover.Close>
+					</div>
+					<div class:dark={$mode === 'dark'}>
+						<ColorPicker
+							bind:hex={color}
+							sliderDirection="vertical"
+							isTextInput={false}
+							isAlpha
+							on:input={(event) => {
+								if (event.detail.hex === undefined) return;
+								color = event.detail.hex;
+								editor.chain().focus().setHighlight({ color }).run();
+							}}
+							isDialog={false}
+							--picker-indicator-size="1rem"
+							--input-size="1rem"
+						/>
+					</div>
+					<div class="flex items-center justify-end gap-2">
+						<Button
+							variant="outline"
+							size="sm"
+							class="border-destructive text-destructive hover:bg-destructive hover:text-foreground"
+							onclick={() => editor.chain().focus().unsetHighlight().run()}
+							>Remove Highlight
+						</Button>
+					</div>
+				</Popover.Content>
+			</Popover.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Highlighter (⌘⇧H)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

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

@@ -0,0 +1,9 @@
+import { Highlighter } from 'lucide-svelte';
+import { type Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+    color?: string;
+}
+declare const Highlighter: import("svelte").Component<Props, {}, "color">;
+type Highlighter = ReturnType<typeof Highlighter>;
+export default Highlighter;

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { Image } from 'lucide-svelte';
+	import { ChevronDown } from 'lucide-svelte';
+	import { X } 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 * as Popover from '../../ui/popover/index.js';
+	import { Input } from '../../ui/input/index.js';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Popover.Root>
+				<Popover.Trigger>
+					<Button variant="ghost" size="sm" class="h-8">
+						<Image />
+						<ChevronDown class="!size-3 text-muted-foreground" />
+					</Button>
+				</Popover.Trigger>
+				<Popover.Content class="bg-popover shadow-lg *:my-2">
+					<div class="flex items-center justify-between">
+						<h1 class="text-xl font-bold">Image</h1>
+						<Popover.Close>
+							<X class="size-4 text-muted-foreground" />
+						</Popover.Close>
+					</div>
+					<p>Insert image url</p>
+					<Input
+						placeholder="Enter image url..."
+						type="url"
+						onchange={(e) => {
+							if (e !== null && e.target !== null) {
+								//@ts-ignore
+								editor.chain().focus().setImage({ src: e.target.value }).run();
+							}
+						}}
+						class="w-full"
+					/>
+					<p>OR Pick an Image</p>
+					<Input
+						id="picture"
+						type="file"
+						accept="image/*"
+						multiple={false}
+						onchange={(e: Event) => {
+							//@ts-ignore
+							if (e.target && e.target.files) {
+								//@ts-ignore
+								const files = Array.from(e.target.files || []);
+								files.map((file) => {
+									const reader = new FileReader();
+									reader.onload = () => {
+										const src = reader.result as string;
+										editor.chain().focus().setImage({ src }).run();
+									};
+									//@ts-ignore
+									reader.readAsDataURL(file);
+								});
+							}
+						}}
+					/>
+				</Popover.Content>
+			</Popover.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Add Image</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

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

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

package/dist/components/shad-editor/icons/index.d.ts

@@ -0,0 +1,22 @@
+export { default as BlockQuoteIcon } from './block-quote.svelte';
+export { default as BoldIcon } from './bold.svelte';
+export { default as ButtleListIcon } from './buttle-list.svelte';
+export { default as CodeIcon } from './code.svelte';
+export { default as HighlighterIcon } from './highlighter.svelte';
+export { default as ImageIcon } from './image.svelte';
+export { default as ItalicIcon } from './italic.svelte';
+export { default as LinkIcon } from './link.svelte';
+export { default as OrderedListIcon } from './ordered-list.svelte';
+export { default as QuickcolorIcon } from './quickcolor.svelte';
+export { default as RedoIcon } from './redo.svelte';
+export { default as SearchReplaceIcon } from './search-replace.svelte';
+export { default as StrikethroughIcon } from './strikethrough.svelte';
+export { default as SubscriptIcon } from './subscript.svelte';
+export { default as SuperscriptIcon } from './superscript.svelte';
+export { default as TableIcon } from './table.svelte';
+export { default as TaskListIcon } from './task-list.svelte';
+export { default as TextIcon } from './text.svelte';
+export { default as TextalignIcon } from './textalign.svelte';
+export { default as TextcolorIcon } from './textcolor.svelte';
+export { default as UnderlineIcon } from './underline.svelte';
+export { default as UndoIcon } from './undo.svelte';

package/dist/components/shad-editor/icons/index.js

@@ -0,0 +1,24 @@
+// shad editor icons
+// export icons with the name + 'Icon' to avoid conflicts with other components
+export { default as BlockQuoteIcon } from './block-quote.svelte';
+export { default as BoldIcon } from './bold.svelte';
+export { default as ButtleListIcon } from './buttle-list.svelte';
+export { default as CodeIcon } from './code.svelte';
+export { default as HighlighterIcon } from './highlighter.svelte';
+export { default as ImageIcon } from './image.svelte';
+export { default as ItalicIcon } from './italic.svelte';
+export { default as LinkIcon } from './link.svelte';
+export { default as OrderedListIcon } from './ordered-list.svelte';
+export { default as QuickcolorIcon } from './quickcolor.svelte';
+export { default as RedoIcon } from './redo.svelte';
+export { default as SearchReplaceIcon } from './search-replace.svelte';
+export { default as StrikethroughIcon } from './strikethrough.svelte';
+export { default as SubscriptIcon } from './subscript.svelte';
+export { default as SuperscriptIcon } from './superscript.svelte';
+export { default as TableIcon } from './table.svelte';
+export { default as TaskListIcon } from './task-list.svelte';
+export { default as TextIcon } from './text.svelte';
+export { default as TextalignIcon } from './textalign.svelte';
+export { default as TextcolorIcon } from './textcolor.svelte';
+export { default as UnderlineIcon } from './underline.svelte';
+export { default as UndoIcon } from './undo.svelte';

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Italic } 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('italic') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleItalic().run()}
+			>
+				<Italic />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Italic (⌘I)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

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

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

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { Link } from 'lucide-svelte';
+	import { ChevronDown } from 'lucide-svelte';
+	import { X } 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';
+	import * as Popover from '../../ui/popover/index.js';
+	import { Input } from '../../ui/input/index.js';
+
+	let { editor }: { editor: Editor } = $props();
+
+	function setLink(url: string) {
+		if (url.trim() === '') {
+			editor.chain().focus().extendMarkRange('link').unsetLink().run();
+			return;
+		}
+		editor?.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+	}
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Popover.Root>
+				<Popover.Trigger>
+					<Button
+						variant="ghost"
+						size="sm"
+						class={cn('h-8', editor.isActive('link') && 'bg-muted')}
+					>
+						<Link />
+						<ChevronDown class="!size-3 text-muted-foreground" />
+					</Button>
+				</Popover.Trigger>
+				<Popover.Content class="bg-popover shadow-lg *:my-2">
+					<div class="flex items-center justify-between">
+						<h1 class="text-xl font-bold">Link</h1>
+						<Popover.Close>
+							<X class="size-4 text-muted-foreground" />
+						</Popover.Close>
+					</div>
+					<p>Insert or remove link from selected text.</p>
+					<Input
+						placeholder="Enter link to attach.."
+						value={editor?.getAttributes('link').href}
+						onchange={(e) => {
+							//@ts-ignore
+							if (e !== null && e.target !== null) setLink(e.target.value);
+						}}
+						class="w-full"
+					/>
+					<div class="flex items-center justify-end gap-2">
+						<Button size="sm" onclick={() => {}}>
+							<Popover.Close>Insert</Popover.Close>
+						</Button>
+						<Button
+							variant="destructive"
+							onclick={() => {
+								editor.chain().focus().extendMarkRange('link').unsetLink().run();
+							}}>Remove</Button
+						>
+					</div>
+				</Popover.Content>
+			</Popover.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Add Or Remove Link</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

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

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