@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/dynect/Select.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva } from 'class-variance-authority';
+import { cn, inputSizeClasses } from '@/lib/utils';
+
+export interface SelectOption {
+	label: string;
+	value: string | number;
+	disabled?: boolean;
+	[key: string]: any;
+}
+
+type SelectSize = 'sm' | 'base' | 'lg' | 'xl';
+type SelectState = 'default' | 'success' | 'danger';
+type VariantState = 'default' | 'success' | 'danger' | 'disabled';
+
+const triggerVariants = cva('flex w-full items-center rounded-xl ring-1 ring-inset shadow-none', {
+	variants: {
+		state: {
+			default: 'bg-bg-secondary-medium ring-border-base-medium data-[state=open]:ring-border-brand focus:ring-border-brand',
+			success: 'bg-bg-success-soft ring-border-success-subtle data-[state=open]:ring-border-success focus:ring-border-success',
+			danger: 'bg-bg-danger-soft ring-border-danger-subtle data-[state=open]:ring-border-danger focus:ring-border-danger',
+			disabled: 'bg-bg-disabled ring-border-base-medium cursor-not-allowed opacity-60',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+const textVariants = cva('text-sm leading-5', {
+	variants: {
+		state: {
+			default: 'text-text-heading data-placeholder:text-text-body-subtle [&>svg]:text-text-heading',
+			success: 'text-text-fg-success-strong data-placeholder:text-text-fg-success-strong [&>svg]:text-text-fg-success-strong',
+			danger: 'text-text-fg-danger-strong data-placeholder:text-text-fg-danger-strong [&>svg]:text-text-fg-danger-strong',
+			disabled: 'text-text-fg-disabled data-placeholder:text-text-fg-disabled [&>svg]:text-text-fg-disabled',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+const props = withDefaults(
+	defineProps<{
+		// Core
+		options?: SelectOption[] | string[] | number[] | any[];
+		placeholder?: string;
+		label?: string;
+		name?: string;
+		id?: HTMLAttributes['id'];
+		class?: HTMLAttributes['class'];
+		triggerClass?: HTMLAttributes['class'];
+		value?: string | number | null;
+		isHideDropdown?: boolean;
+		tooltip?: string;
+
+		// Validation
+		required?: boolean;
+		disabled?: boolean;
+		description?: string;
+
+		// Appearance
+		size?: SelectSize;
+		state?: SelectState;
+		labelClass?: string;
+		descriptionClass?: string;
+		errorClass?: string;
+		contentClass?: string;
+		itemClass?: string;
+		emptyStateClass?: string;
+
+		// Group
+		groupLabel?: string;
+		groupLabelClass?: string;
+
+		// Search
+		searchable?: boolean;
+		searchPlaceholder?: string;
+		emptyText?: string;
+
+		// Position
+		position?: 'item-aligned' | 'popper';
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		align?: 'start' | 'center' | 'end';
+
+		// Keys
+		valueKey?: string;
+		labelKey?: string;
+	}>(),
+	{
+		placeholder: 'Select an option',
+		size: 'base',
+		isHideDropdown: false,
+		searchPlaceholder: 'Search...',
+		emptyText: 'No options found',
+		position: 'popper',
+		side: 'bottom',
+		align: 'start',
+		valueKey: 'value',
+		labelKey: 'label',
+		options: () => [],
+	}
+);
+
+// ── Model & Field ─────────────────────────────────────────────────────────────
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `select-${fallbackId}`);
+
+const modelValue = defineModel<any>('modelValue', { required: false });
+
+const { errorMessage, handleChange } = useField(() => resolvedId.value || props.name || 'select', undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+
+// ── State resolution ──────────────────────────────────────────────────────────
+const variantState = computed<VariantState>(() => {
+	if (props.disabled) return 'disabled';
+	if (props.state && props.state !== 'default') return props.state;
+	return errorMessage.value ? 'danger' : 'default';
+});
+
+const sz = computed(() => props.size ?? 'base');
+
+const triggerCls = computed(() => cn(triggerVariants({ state: variantState.value }), inputSizeClasses[sz.value], errorMessage.value ? '' : props.triggerClass));
+const valueCls = computed(() => textVariants({ state: variantState.value }));
+
+// ── Options ───────────────────────────────────────────────────────────────────
+const searchQuery = ref('');
+
+const normalizedOptions = computed<SelectOption[]>(() => {
+	if (!props.options?.length) return [];
+	return props.options.map((o) => {
+		if (typeof o === 'string' || typeof o === 'number') return { label: String(o), value: o };
+		return o as SelectOption;
+	});
+});
+
+const filteredOptions = computed<SelectOption[]>(() => {
+	if (!props.searchable || !searchQuery.value) return normalizedOptions.value;
+	const q = searchQuery.value.toLowerCase();
+	return normalizedOptions.value.filter((o) => getOptionLabel(o).toLowerCase().includes(q));
+});
+
+const getOptionValue = (o: SelectOption): string | number => (props.valueKey && o[props.valueKey] !== undefined ? o[props.valueKey] : o.value);
+
+const getOptionLabel = (o: SelectOption): string => (props.labelKey && o[props.labelKey] !== undefined ? String(o[props.labelKey]) : o.label);
+</script>
+
+<template>
+	<div :class="props.class">
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Select -->
+		<Select v-model="modelValue" :default-value="value" :disabled="disabled" :required="required" :name="resolvedId" @update:model-value="handleChange">
+			<SelectTrigger :id="resolvedId" :class="cn(triggerCls, valueCls, isHideDropdown && '[&>svg]:hidden', '[&>span]:truncate')" :aria-invalid="!!errorMessage" :aria-describedby="errorMessage ? `${resolvedId}-error` : description ? `${resolvedId}-description` : undefined">
+				<SelectValue :placeholder="placeholder" />
+			</SelectTrigger>
+
+			<SelectContent :class="contentClass" :position="position" :side="side" :align="align">
+				<!-- Search -->
+				<div v-if="searchable" class="relative border-b px-2">
+					<DynectInput :id="`${resolvedId}-search`" v-model="searchQuery" icon-class="pl-0 pr-0" input-class="bg-transparent" :placeholder="searchPlaceholder" class="h-10 bg-transparent ring-0" @keydown.stop @keydown.enter.prevent>
+						<template #leading>
+							<Icon name="lucide:search" />
+						</template>
+					</DynectInput>
+				</div>
+
+				<SelectGroup v-if="filteredOptions.length > 0">
+					<SelectLabel v-if="groupLabel" :class="groupLabelClass">{{ groupLabel }}</SelectLabel>
+					<SelectItem v-for="option in filteredOptions" :key="getOptionValue(option)" :value="getOptionValue(option)" :disabled="option.disabled" :class="itemClass">
+						<slot name="option" :option="option">{{ getOptionLabel(option) }}</slot>
+					</SelectItem>
+				</SelectGroup>
+
+				<!-- Empty -->
+				<div v-else :class="cn('text-text-body-subtle py-6 text-center text-sm', emptyStateClass)">
+					<slot name="empty">{{ emptyText }}</slot>
+				</div>
+			</SelectContent>
+		</Select>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+	</div>
+</template>

package/src/runtime/components/dynect/SelectMultiple.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva } from 'class-variance-authority';
+import { cn, inputSizeClasses } from '@/lib/utils';
+import type { SelectOption } from './Select.vue';
+
+type SelectSize = 'sm' | 'base' | 'lg' | 'xl';
+type SelectState = 'default' | 'success' | 'danger';
+type VariantState = 'default' | 'success' | 'danger' | 'disabled';
+
+const triggerVariants = cva('flex w-full items-center rounded-xl ring-1 ring-inset shadow-none', {
+	variants: {
+		state: {
+			default: 'bg-bg-secondary-medium ring-border-base-medium data-[state=open]:ring-border-brand focus:ring-border-brand',
+			success: 'bg-bg-success-soft ring-border-success-subtle data-[state=open]:ring-border-success focus:ring-border-success',
+			danger: 'bg-bg-danger-soft ring-border-danger-subtle data-[state=open]:ring-border-danger focus:ring-border-danger',
+			disabled: 'bg-bg-disabled ring-border-base-medium cursor-not-allowed opacity-60',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+const props = withDefaults(
+	defineProps<{
+		options?: SelectOption[] | string[] | number[] | any[];
+		placeholder?: string;
+		label?: string;
+		name?: string;
+		id?: HTMLAttributes['id'];
+		class?: HTMLAttributes['class'];
+		triggerClass?: HTMLAttributes['class'];
+		tooltip?: string;
+		required?: boolean;
+		disabled?: boolean;
+		description?: string;
+		size?: SelectSize;
+		state?: SelectState;
+		labelClass?: string;
+		descriptionClass?: string;
+		errorClass?: string;
+		contentClass?: string;
+		itemClass?: string;
+		emptyStateClass?: string;
+		searchable?: boolean;
+		searchPlaceholder?: string;
+		emptyText?: string;
+		valueKey?: string;
+		labelKey?: string;
+		maxTags?: number;
+		maxVisibleTags?: number;
+	}>(),
+	{
+		placeholder: 'Select options',
+		size: 'base',
+		searchPlaceholder: 'Search...',
+		emptyText: 'No options found',
+		valueKey: 'value',
+		labelKey: 'label',
+		options: () => [],
+		searchable: false,
+		maxVisibleTags: 3,
+	}
+);
+
+// ── Model & Field ─────────────────────────────────────────────────────────────
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `select-multiple-${fallbackId}`);
+
+const modelValue = defineModel<(string | number)[]>('modelValue', { required: false, default: () => [] });
+
+const { errorMessage, handleChange } = useField(() => resolvedId.value || props.name || 'select-multiple', undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+
+// ── State ─────────────────────────────────────────────────────────────────────
+const isOpen = ref(false);
+const searchQuery = ref('');
+
+// ── Variant resolution ────────────────────────────────────────────────────────
+const variantState = computed<VariantState>(() => {
+	if (props.disabled) return 'disabled';
+	if (props.state && props.state !== 'default') return props.state;
+	return errorMessage.value ? 'danger' : 'default';
+});
+
+const triggerCls = computed(() => cn(triggerVariants({ state: variantState.value }), inputSizeClasses[props.size ?? 'base'], props.triggerClass));
+
+// ── Options ───────────────────────────────────────────────────────────────────
+const normalizedOptions = computed<SelectOption[]>(() => {
+	if (!props.options?.length) return [];
+	return props.options.map((o) => {
+		if (typeof o === 'string' || typeof o === 'number') return { label: String(o), value: o };
+		return o as SelectOption;
+	});
+});
+
+const filteredOptions = computed<SelectOption[]>(() => {
+	if (!props.searchable || !searchQuery.value) return normalizedOptions.value;
+	const q = searchQuery.value.toLowerCase();
+	return normalizedOptions.value.filter((o) => getOptionLabel(o).toLowerCase().includes(q));
+});
+
+const getOptionValue = (o: SelectOption): string | number => (props.valueKey && o[props.valueKey] !== undefined ? o[props.valueKey] : o.value);
+const getOptionLabel = (o: SelectOption): string => (props.labelKey && o[props.labelKey] !== undefined ? String(o[props.labelKey]) : o.label);
+
+// ── Selection helpers ─────────────────────────────────────────────────────────
+const selected = computed(() => modelValue.value ?? []);
+
+const isSelected = (o: SelectOption) => selected.value.includes(getOptionValue(o));
+
+const selectedLabels = computed(() =>
+	selected.value.map((v) => {
+		const match = normalizedOptions.value.find((o) => getOptionValue(o) === v);
+		return { value: v, label: match ? getOptionLabel(match) : String(v) };
+	})
+);
+
+const visibleLabels = computed(() => selectedLabels.value.slice(0, props.maxVisibleTags));
+const overflowCount = computed(() => Math.max(0, selectedLabels.value.length - props.maxVisibleTags));
+
+function toggle(o: SelectOption) {
+	if (props.disabled) return;
+	const val = getOptionValue(o);
+	let next: (string | number)[];
+	if (isSelected(o)) {
+		next = selected.value.filter((v) => v !== val);
+	} else if (props.maxTags && selected.value.length >= props.maxTags) {
+		next = selected.value;
+	} else {
+		next = [...selected.value, val];
+	}
+	modelValue.value = next;
+	handleChange(next);
+}
+
+function removeTag(val: string | number) {
+	if (props.disabled) return;
+	const next = selected.value.filter((v) => v !== val);
+	modelValue.value = next;
+	handleChange(next);
+}
+
+function clearAll(e: MouseEvent) {
+	e.stopPropagation();
+	if (props.disabled) return;
+	modelValue.value = [];
+	handleChange([]);
+}
+
+// Close dropdown when clicking outside
+function onOpenChange(open: boolean) {
+	isOpen.value = open;
+	if (!open) searchQuery.value = '';
+}
+</script>
+
+<template>
+	<div :class="props.class">
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Trigger -->
+		<Popover :open="isOpen" @update:open="onOpenChange">
+			<PopoverTrigger as-child :disabled="disabled">
+				<button
+					:id="resolvedId"
+					type="button"
+					:disabled="disabled"
+					:aria-invalid="!!errorMessage"
+					:aria-describedby="errorMessage ? `${resolvedId}-error` : description ? `${resolvedId}-description` : undefined"
+					:data-state="isOpen ? 'open' : 'closed'"
+					:class="cn(triggerCls, 'min-h-10 flex-wrap gap-1.5 text-left')"
+				>
+					<!-- Selected tags -->
+					<template v-if="visibleLabels.length">
+						<DynectBadge v-for="tag in visibleLabels" :key="tag.value" variant="info" size="sm">
+							{{ tag.label }}
+							<button type="button" class="hover:text-text-brand-strong ml-0.5 shrink-0" @click.stop="removeTag(tag.value)">
+								<Icon name="lucide:x" class="size-3" />
+							</button>
+						</DynectBadge>
+						<TooltipProvider v-if="overflowCount > 0">
+							<Tooltip>
+								<TooltipTrigger as-child>
+									<DynectBadge variant="info" size="sm">+{{ overflowCount }} selections</DynectBadge>
+								</TooltipTrigger>
+								<TooltipContent>
+									<p v-for="tag in selectedLabels.slice(props.maxVisibleTags)" :key="tag.value">{{ tag.label }}</p>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					</template>
+
+					<!-- Placeholder -->
+					<span v-else class="text-text-body-subtle flex-1 truncate text-sm">{{ placeholder }}</span>
+
+					<!-- Right icons -->
+					<span class="ml-auto flex shrink-0 items-center gap-1 pl-1">
+						<button v-if="selected.length" type="button" class="text-text-body hover:text-text-heading" @click="clearAll">
+							<Icon name="lucide:x" class="size-3.5" />
+						</button>
+						<Icon v-else name="lucide:chevron-down" class="text-text-body size-4 transition-transform duration-200" :class="isOpen ? 'rotate-180' : ''" />
+					</span>
+				</button>
+			</PopoverTrigger>
+
+			<PopoverContent :class="cn('w-[--reka-popover-trigger-width] p-0', contentClass)" align="start" side="bottom" :side-offset="4">
+				<!-- Search -->
+				<div v-if="searchable" class="border-border-base-subtle border-b px-2">
+					<DynectInput :id="`${resolvedId}-search`" v-model="searchQuery" icon-class="pl-0 pr-0" input-class="bg-transparent" :placeholder="searchPlaceholder" class="h-10 bg-transparent ring-0" @keydown.stop @keydown.enter.prevent>
+						<template #leading>
+							<Icon name="lucide:search" />
+						</template>
+					</DynectInput>
+				</div>
+
+				<!-- Options list -->
+				<div class="max-h-60 overflow-y-auto p-1">
+					<template v-if="filteredOptions.length">
+						<button
+							v-for="option in filteredOptions"
+							:key="getOptionValue(option)"
+							type="button"
+							:disabled="option.disabled || (!isSelected(option) && !!maxTags && selected.length >= maxTags)"
+							:class="cn('hover:bg-bg-tertiary-medium flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50', itemClass)"
+							@click="toggle(option)"
+						>
+							<!-- Checkbox indicator -->
+							<span :class="cn('border-border-base-medium flex size-4 shrink-0 items-center justify-center rounded border', isSelected(option) && 'bg-bg-brand border-border-brand text-text-white')">
+								<Icon v-if="isSelected(option)" name="lucide:check" class="size-3" />
+							</span>
+							<span class="text-text-heading flex-1 truncate text-left">
+								<slot name="option" :option="option">{{ getOptionLabel(option) }}</slot>
+							</span>
+						</button>
+					</template>
+
+					<!-- Empty -->
+					<div v-else :class="cn('text-text-body-subtle py-6 text-center text-sm', emptyStateClass)">
+						<slot name="empty">{{ emptyText }}</slot>
+					</div>
+				</div>
+
+				<!-- Footer: selected count -->
+				<div v-if="selected.length" class="border-border-base-subtle border-t px-3 py-2">
+					<span class="text-text-body-subtle text-xs">{{ selected.length }} selected{{ maxTags ? ` / ${maxTags}` : '' }}</span>
+				</div>
+			</PopoverContent>
+		</Popover>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+	</div>
+</template>

package/src/runtime/components/dynect/Sheet.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+interface SheetProps {
+	open?: boolean;
+	title?: string;
+	description?: string;
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full';
+	closable?: boolean;
+	modal?: boolean;
+	class?: string;
+}
+
+const props = withDefaults(defineProps<SheetProps>(), {
+	open: false,
+	side: 'right',
+	size: 'md',
+	closable: true,
+	modal: true,
+});
+
+const emit = defineEmits<{
+	'update:open': [value: boolean];
+}>();
+
+const isOpen = computed({
+	get: () => props.open,
+	set: (value) => emit('update:open', value),
+});
+
+const SHEET_SIZE_CLASSES = {
+	sm: 'sm:max-w-sm',
+	md: 'sm:max-w-md',
+	lg: 'sm:max-w-lg',
+	xl: 'sm:max-w-xl',
+	'2xl': 'sm:max-w-2xl',
+	'3xl': 'sm:max-w-3xl',
+	'4xl': 'sm:max-w-4xl',
+	'5xl': 'sm:max-w-5xl',
+	'6xl': 'sm:max-w-6xl',
+	'7xl': 'sm:max-w-7xl',
+	full: 'sm:max-w-full sm:m-4',
+} as const;
+
+const sizeClasses = computed(() => SHEET_SIZE_CLASSES[props.size] ?? SHEET_SIZE_CLASSES.md);
+</script>
+
+<template>
+	<Sheet v-model:open="isOpen" :modal="modal">
+		<SheetTrigger v-if="$slots.trigger" as-child>
+			<slot name="trigger" />
+		</SheetTrigger>
+		<SheetContent :side="side" :class="cn(sizeClasses, props.class)">
+			<SheetHeader v-if="title || description || $slots.header">
+				<slot name="header">
+					<SheetTitle v-if="title">
+						{{ title }}
+						<SheetClose v-if="closable" @click="isOpen = false">
+							<span class="sr-only">Close</span>
+						</SheetClose>
+					</SheetTitle>
+					<SheetTitle v-else class="sr-only">Dialog</SheetTitle>
+					<SheetDescription v-if="description">
+						{{ description }}
+					</SheetDescription>
+					<SheetDescription v-else class="sr-only">Dialog</SheetDescription>
+				</slot>
+			</SheetHeader>
+
+			<div class="flex-1 overflow-y-auto">
+				<slot />
+			</div>
+
+			<SheetFooter v-if="$slots.footer">
+				<slot name="footer" />
+			</SheetFooter>
+		</SheetContent>
+	</Sheet>
+</template>

package/src/runtime/components/dynect/Signature.vue

@@ -0,0 +1,135 @@
+<template>
+	<div class="flex size-full flex-col gap-2">
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<BaseSignature ref="signature" :sig-option="options" @after-update-stroke="save()" />
+
+		<div v-if="isShowButton" class="mt-2 flex flex-row gap-2">
+			<DynectButton size="xs" variant="outline" @click="clear">Clear</DynectButton>
+			<DynectButton size="xs" variant="outline" @click="undo">Undo</DynectButton>
+			<DynectButton size="xs" variant="outline" @click="downloadImage()">Save</DynectButton>
+		</div>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+	</div>
+</template>
+
+<script setup lang="ts">
+interface BaseSignatureInstance {
+	save: (format?: string) => string;
+	clear: () => void;
+	undo: () => void;
+}
+
+const props = withDefaults(
+	defineProps<{
+		formatImage?: string;
+		isShowButton?: boolean;
+		isDownload?: boolean;
+		id?: string;
+		label?: string;
+		description?: string;
+		required?: boolean;
+		tooltip?: string;
+		labelClass?: string;
+		descriptionClass?: string;
+		errorClass?: string;
+	}>(),
+	{
+		formatImage: 'image/png',
+		isShowButton: true,
+		isDownload: false,
+		required: false,
+	}
+);
+
+const signature = ref<BaseSignatureInstance | null>(null);
+
+const options = reactive({
+	penColor: 'rgb(0, 0, 0)',
+	backgroundColor: 'rgb(255, 255, 255)',
+	minWidth: 1,
+	maxWidth: 1,
+});
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `signature-${fallbackId}`);
+
+const model = defineModel<File | null>('modelValue', {
+	required: false,
+});
+
+const { errorMessage } = useField(() => resolvedId.value, undefined, {
+	initialValue: model.value,
+	syncVModel: true,
+});
+
+const getExtensionFromMimeType = (mimeType: string): string => mimeType.split('/')[1] ?? 'png';
+
+const base64ToFile = (base64String: string, fileName: string): File | null => {
+	try {
+		if (!base64String || typeof base64String !== 'string') {
+			console.error('Invalid base64 string provided');
+			return null;
+		}
+
+		const arr = base64String.split(',');
+		if (arr.length !== 2) {
+			console.error('Invalid base64 format. Expected data URI format.');
+			return null;
+		}
+
+		const mime = arr[0]?.match(/:[^:;]+;/)?.[0]?.slice(1, -1) ?? 'image/png';
+		const base64Data = arr[1];
+
+		if (!base64Data) {
+			console.error('No base64 data found');
+			return null;
+		}
+
+		const bstr = atob(base64Data);
+		let n = bstr.length;
+		const uint8Array = new Uint8Array(n);
+		while (n--) {
+			uint8Array[n] = bstr.codePointAt(n) ?? 0;
+		}
+
+		return new File([uint8Array], fileName, { type: mime });
+	} catch (error) {
+		console.error('Error converting base64 to file:', error);
+		return null;
+	}
+};
+
+const save = (): void => {
+	if (!signature.value) return;
+	const format = props.formatImage ?? 'image/png';
+	const dataUrl = signature.value.save(format);
+	const file = base64ToFile(dataUrl, `signature.${getExtensionFromMimeType(format)}`);
+	if (file) model.value = file;
+	if (props.isDownload) downloadImage();
+};
+
+const clear = (): void => {
+	signature.value?.clear();
+};
+
+const undo = (): void => {
+	signature.value?.undo();
+};
+
+const downloadImage = (): void => {
+	if (!signature.value) return;
+	const format = props.formatImage ?? 'image/png';
+	const dataUrl = signature.value.save(format);
+	const link = document.createElement('a');
+	link.href = dataUrl;
+	link.download = `signature.${getExtensionFromMimeType(format)}`;
+	link.click();
+};
+</script>

package/src/runtime/components/dynect/SwitchColor.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const colorMode: any = useColorMode();
+const isDark = computed(() => colorMode.value === 'dark');
+const toggleTheme = () => {
+	colorMode.preference = isDark.value ? 'light' : 'dark';
+};
+</script>
+
+<template>
+	<DynectButton icon-only size="sm" color="ghost" class="relative [&_svg]:size-5" @click="toggleTheme">
+		<Icon v-if="isDark" name="lucide:sun" />
+		<Icon v-else name="lucide:moon" />
+	</DynectButton>
+</template>