@dynect/base 0.1.0 → 0.3.0

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+interface Props {
+	/** The label text to display */
+	as?: 'label' | 'div' | 'legend';
+	label?: string;
+	/** ID of the associated form control */
+	for?: string;
+	/** Show required asterisk */
+	required?: boolean;
+	/** Tooltip text to show in info icon */
+	tooltip?: string;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	as: 'label',
+});
+</script>
+
+<template>
+	<component :is="props.as" v-if="label" :for="props.for" :class="cn('text-text-heading mb-2.5 block max-w-fit text-sm leading-5 font-normal', props.class)">
+		<div class="flex items-center gap-1">
+			{{ label }}
+			<span v-if="required" class="text-text-fg-danger ml-0.5 text-sm font-medium">*</span>
+			<TooltipProvider v-if="tooltip">
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Icon name="lucide:circle-alert" class="text-text-body size-4" />
+					</TooltipTrigger>
+					<TooltipContent>
+						<p>{{ tooltip }}</p>
+					</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+	</component>
+</template>

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

@@ -0,0 +1,231 @@
+<template>
+	<LazyGantt :zoom="zoom" :range="range" :header-height="headerHeight" :column-width="columnWidth" :sidebar-width="sidebarWidth" :row-height="rowHeight" :on-add-item="onAddItem" class="h-full w-full">
+		<!-- Sidebar -->
+		<GanttSidebar :title="sidebarTitle" :class="cn('border-r', sidebarClass)">
+			<template v-if="enableGrouping">
+				<GanttSidebarGroup v-for="[groupKey, groupItems] in Object.entries(groupedFeatures)" :key="groupKey" :name="getGroupName(groupKey)">
+					<GanttSidebarItem v-for="feature in groupItems" :key="feature.id" :feature="feature" @select-item="handleSelectItem">
+						<slot name="sidebar-item" :feature="feature">
+							<div class="flex flex-col gap-1">
+								<p class="text-sm font-medium">{{ feature.name }}</p>
+								<div class="flex items-center gap-2">
+									<DynectBadge v-if="feature.status" :color="feature.status.color" size="sm">
+										{{ feature.status.name }}
+									</DynectBadge>
+									<DynectAvatar v-if="feature.owner && showOwners" :src="feature.owner.image" :name="feature.owner.name" size="xs" />
+								</div>
+							</div>
+						</slot>
+					</GanttSidebarItem>
+				</GanttSidebarGroup>
+			</template>
+			<template v-else>
+				<GanttSidebarItem v-for="feature in modelValue" :key="feature.id" :feature="feature" @select-item="handleSelectItem">
+					<slot name="sidebar-item" :feature="feature">
+						<div class="flex flex-col gap-1">
+							<p class="text-sm font-medium">{{ feature.name }}</p>
+							<div class="flex items-center gap-2">
+								<DynectBadge v-if="feature.status" :color="feature.status.color" size="sm">
+									{{ feature.status.name }}
+								</DynectBadge>
+								<DynectAvatar v-if="feature.owner && showOwners" :src="feature.owner.image" :name="feature.owner.name" size="xs" />
+							</div>
+						</div>
+					</slot>
+				</GanttSidebarItem>
+			</template>
+		</GanttSidebar>
+
+		<!-- Timeline -->
+		<GanttTimeline>
+			<!-- Header -->
+			<GanttHeader />
+
+			<!-- Feature List -->
+			<GanttFeatureList>
+				<template v-if="enableGrouping">
+					<GanttFeatureListGroup v-for="[groupKey, groupItems] in Object.entries(groupedFeatures)" :key="`timeline-${groupKey}`">
+						<div v-for="feature in groupItems" :key="feature.id" :class="cn('hover:bg-accent/50 relative border-b', featureRowClass)" :style="{ height: `${rowHeight}px` }">
+							<GanttFeatureItem :id="feature.id" :name="feature.name" :start-at="feature.startAt" :end-at="feature.endAt" :status="feature.status" :owner="feature.owner" :disabled="disabled" @move="handleFeatureMove">
+								<slot name="feature-bar" :feature="feature">
+									<div class="flex h-full items-center gap-2 px-2">
+										<p class="flex-1 truncate text-xs font-medium">{{ feature.name }}</p>
+										<DynectAvatar v-if="feature.owner && showOwners" :src="feature.owner.image" :name="feature.owner.name" size="xs" />
+									</div>
+								</slot>
+							</GanttFeatureItem>
+						</div>
+					</GanttFeatureListGroup>
+				</template>
+				<template v-else>
+					<div v-for="feature in modelValue" :key="feature.id" :class="cn('hover:bg-accent/50 relative border-b', featureRowClass)" :style="{ height: `${rowHeight}px` }">
+						<GanttFeatureItem :id="feature.id" :name="feature.name" :start-at="feature.startAt" :end-at="feature.endAt" :status="feature.status" :owner="feature.owner" :disabled="disabled" @move="handleFeatureMove">
+							<slot name="feature-bar" :feature="feature">
+								<div class="flex h-full items-center gap-2 px-2">
+									<p class="flex-1 truncate text-xs font-medium">{{ feature.name }}</p>
+									<DynectAvatar v-if="feature.owner && showOwners" :src="feature.owner.image" :name="feature.owner.name" size="xs" />
+								</div>
+							</slot>
+						</GanttFeatureItem>
+					</div>
+				</template>
+			</GanttFeatureList>
+
+			<!-- Markers -->
+			<template v-if="markers && markers.length > 0">
+				<GanttMarker v-for="marker in markers" :id="marker.id" :key="marker.id" :date="marker.date" :label="marker.label || ''" :class-name="marker.className" :disabled="disabled" @move="handleMarkerMove" />
+			</template>
+
+			<!-- Today Marker -->
+			<GanttToday v-if="showToday" />
+
+			<!-- Create Marker Trigger -->
+			<GanttCreateMarkerTrigger v-if="enableMarkerCreation" :on-create-marker="onCreateMarker" />
+		</GanttTimeline>
+
+		<!-- Zoom Controls -->
+		<GanttZoomControls v-if="showZoomControls" />
+	</LazyGantt>
+</template>
+
+<script setup lang="ts" generic="T extends DynectGanttFeature">
+import { cn } from '@/lib/utils';
+import type { GanttFeature, GanttRange } from '@/composables/useGantt';
+
+export interface DynectGanttFeature extends GanttFeature {
+	[key: string]: any;
+}
+
+export interface GanttMarker {
+	id: string;
+	date: Date;
+	label?: string;
+	color?: string;
+	className?: string;
+}
+
+export interface DynectGanttProps<T extends DynectGanttFeature = DynectGanttFeature> {
+	/** Array of gantt features/tasks */
+	modelValue: T[];
+	/** Markers to display on the timeline */
+	markers?: GanttMarker[];
+	/** Zoom level (25-300) */
+	zoom?: number;
+	/** Timeline range view */
+	range?: GanttRange;
+	/** Header height in pixels */
+	headerHeight?: number;
+	/** Column width in pixels */
+	columnWidth?: number;
+	/** Sidebar width in pixels */
+	sidebarWidth?: number;
+	/** Row height in pixels */
+	rowHeight?: number;
+	/** Sidebar title */
+	sidebarTitle?: string;
+	/** Enable grouping by group property */
+	enableGrouping?: boolean;
+	/** Group key to use for grouping (default: 'group') */
+	groupBy?: string;
+	/** Show owner avatars */
+	showOwners?: boolean;
+	/** Show today marker */
+	showToday?: boolean;
+	/** Show zoom controls */
+	showZoomControls?: boolean;
+	/** Enable marker creation */
+	enableMarkerCreation?: boolean;
+	/** Disable drag and drop */
+	disabled?: boolean;
+	/** Custom class for sidebar */
+	sidebarClass?: string;
+	/** Custom class for feature rows */
+	featureRowClass?: string;
+}
+
+const props = withDefaults(defineProps<DynectGanttProps<T>>(), {
+	zoom: 100,
+	range: 'monthly',
+	headerHeight: 60,
+	columnWidth: 120,
+	sidebarWidth: 320,
+	rowHeight: 48,
+	sidebarTitle: 'Tasks',
+	enableGrouping: false,
+	groupBy: 'group',
+	showOwners: true,
+	showToday: true,
+	showZoomControls: false,
+	enableMarkerCreation: false,
+	disabled: false,
+});
+
+const emit = defineEmits<{
+	'update:modelValue': [features: T[]];
+	'select-item': [feature: T];
+	'feature-moved': [feature: T, newStartDate: Date, newEndDate: Date];
+	'marker-moved': [marker: GanttMarker, newDate: Date];
+	'marker-created': [date: Date];
+	'add-item': [date: Date];
+}>();
+
+// Computed grouping
+const groupedFeatures = computed(() => {
+	if (!props.enableGrouping) return {};
+
+	const groups: Record<string, T[]> = {};
+
+	props.modelValue.forEach((feature) => {
+		const groupKey = feature[props.groupBy]?.id || feature[props.groupBy] || 'ungrouped';
+		if (!groups[groupKey]) {
+			groups[groupKey] = [];
+		}
+		groups[groupKey].push(feature);
+	});
+
+	return groups;
+});
+
+// Get group name
+const getGroupName = (groupKey: string) => {
+	if (groupKey === 'ungrouped') return 'Ungrouped';
+	const firstItem = Object.values(groupedFeatures.value[groupKey] || [])[0];
+	return firstItem?.[props.groupBy]?.name || groupKey;
+};
+
+// Event handlers
+const handleSelectItem = (id: string) => {
+	const feature = props.modelValue.find((f) => f.id === id);
+	if (feature) {
+		emit('select-item', feature);
+	}
+};
+
+const handleFeatureMove = (id: string, startAt: Date, endAt: Date | null) => {
+	const feature = props.modelValue.find((f) => f.id === id);
+	if (!feature || !endAt) return;
+
+	const updatedFeature = { ...feature, startAt, endAt };
+	const updatedFeatures = props.modelValue.map((f) => (f.id === id ? updatedFeature : f));
+
+	emit('update:modelValue', updatedFeatures as T[]);
+	emit('feature-moved', updatedFeature as T, startAt, endAt);
+};
+
+const handleMarkerMove = (id: string, newDate: Date) => {
+	if (!props.markers) return;
+
+	const marker = props.markers.find((m) => m.id === id);
+	if (!marker) return;
+
+	emit('marker-moved', marker, newDate);
+};
+
+const onAddItem = (date: Date) => {
+	emit('add-item', date);
+};
+
+const onCreateMarker = (date: Date) => {
+	emit('marker-created', date);
+};
+</script>

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

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva } from 'class-variance-authority';
+import { cn, inputSizeClasses } from '@/lib/utils';
+
+type InputSize = 'sm' | 'base' | 'lg' | 'xl';
+type InputState = 'default' | 'success' | 'danger';
+type InputType = 'default' | 'addon-icon' | 'addon-text' | 'inner-button' | 'stacked';
+type VariantState = 'default' | 'success' | 'danger' | 'disabled' | 'readonly';
+
+// ── Variants ─────────────────────────────────────────────────────────────────
+const inputWrapperVariants = cva('flex items-center w-full rounded-xl ring-1 ', {
+	variants: {
+		state: {
+			default: 'bg-bg-secondary-medium ring-border-base-medium focus-within:ring-border-brand',
+			success: 'bg-bg-success-soft ring-border-success-subtle focus-within:ring-border-success',
+			danger: 'bg-bg-danger-soft ring-border-danger-subtle focus-within:ring-border-danger',
+			disabled: 'bg-bg-disabled ring-border-base-medium cursor-not-allowed opacity-60',
+			readonly: 'bg-bg-secondary-medium ring-border-base-medium',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+const inputIconVariants = cva('', {
+	variants: {
+		state: {
+			default: 'text-text-body-subtle',
+			success: 'text-text-fg-success-strong border-border-success-subtle focus-within:border-border-success',
+			danger: 'text-text-fg-danger-strong border-border-danger-subtle focus-within:border-border-danger',
+			disabled: 'text-text-fg-disabled',
+			readonly: 'text-text-body',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+// Color only — padding applied separately via inputSizeClasses to avoid leaking into stacked
+const inputTextVariants = cva('w-full text-left min-w-0 bg-transparent outline-none disabled:cursor-not-allowed', {
+	variants: {
+		state: {
+			default: 'text-text-heading placeholder:text-text-body-subtle',
+			success: 'text-text-fg-success-strong placeholder:text-text-fg-success-strong',
+			danger: 'text-text-fg-danger-strong placeholder:text-text-fg-danger-strong',
+			disabled: 'text-text-fg-disabled placeholder:text-text-fg-disabled',
+			readonly: 'text-text-body placeholder:text-text-body-subtle',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+const props = withDefaults(
+	defineProps<{
+		id?: HTMLAttributes['id'];
+		class?: HTMLAttributes['class'];
+		size?: InputSize;
+		state?: InputState;
+		inputType?: InputType;
+		placeholder?: string;
+		disabled?: boolean;
+		readonly?: boolean;
+		tooltip?: string;
+		/** Addon text shown on the left (used with inputType="addon-text") */
+		addonText?: string;
+		/** Inner button label (used with inputType="inner-button") */
+		buttonText?: string;
+		/** Stacked sub-label below the value (used with inputType="stacked") */
+		stackedLabel?: string;
+		label?: string;
+		name?: string;
+		required?: boolean;
+		description?: string;
+		labelClass?: string;
+		descriptionClass?: string;
+		errorClass?: string;
+		inputClass?: string;
+		iconClass?: string;
+	}>(),
+	{}
+);
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `input-${fallbackId}`);
+
+const emits = defineEmits<(e: 'button-click') => void>();
+
+const modelValue = defineModel<string | number | null | Date>('modelValue', {
+	required: false,
+});
+
+const { errorMessage, handleBlur, value } = useField(() => resolvedId.value || props.name || 'input', undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+
+// Resolve priority: disabled > readonly > explicit state > vee-validate error
+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');
+
+// Precomputed class strings — Vue caches these, zero CVA calls during render
+const wrapperCls = computed(() => inputWrapperVariants({ state: variantState.value }));
+const iconCls = computed(() => inputIconVariants({ state: variantState.value }));
+const textColorCls = computed(() => inputTextVariants({ state: variantState.value }));
+const textCls = computed(() => cn(textColorCls.value, inputSizeClasses[sz.value], props.inputClass));
+const addonSzCls = computed(() => inputSizeClasses[sz.value]);
+const iconSize = computed(() => (sz.value === 'lg' || sz.value === 'xl' ? 'w-5 h-5' : 'w-4 h-4'));
+</script>
+
+<template>
+	<div :class="props.class">
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- ── Add-on text (prefix label, e.g. "https://") ── -->
+		<template v-if="inputType === 'addon-text'">
+			<div :class="cn(wrapperCls, 'ring-inset', props.class)">
+				<div :class="cn('border-border-base-medium flex shrink-0 items-center self-stretch rounded-l-xl border-r', addonSzCls, iconCls)">
+					<slot name="addon">
+						<span>{{ addonText }}</span>
+					</slot>
+				</div>
+				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="readonly" :class="textCls" @blur="handleBlur" >
+				<div v-if="!disabled && !readonly" :class="cn(iconCls, 'flex shrink-0 items-center pr-2.5', props.iconClass)">
+					<slot name="trailing">
+						<DynectButton v-if="modelValue" tabindex="-1" type="button" color="ghost" size="xs" icon-only :disabled="disabled || readonly" @click="modelValue = ''">
+							<Icon name="lucide:x" class="size-4" />
+						</DynectButton>
+					</slot>
+				</div>
+			</div>
+		</template>
+
+		<!-- ── Add-on icon (icon prefix left panel) ── -->
+		<template v-else-if="inputType === 'addon-icon'">
+			<div :class="cn(wrapperCls, 'ring-inset', props.class)">
+				<div :class="cn('border-border-base-medium flex shrink-0 items-center justify-center self-stretch rounded-l-xl border-r', addonSzCls, iconCls)">
+					<slot name="addon-icon"><Icon name="lucide:user" :class="iconSize" /></slot>
+				</div>
+				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="readonly" :class="textCls" @blur="handleBlur" >
+				<div v-if="!disabled && !readonly" :class="cn(iconCls, 'flex shrink-0 items-center pr-2.5', props.iconClass)">
+					<slot name="trailing">
+						<DynectButton v-if="modelValue" tabindex="-1" type="button" color="ghost" size="xs" icon-only :disabled="disabled || readonly" @click="modelValue = ''">
+							<Icon name="lucide:x" class="size-4" />
+						</DynectButton>
+					</slot>
+				</div>
+			</div>
+		</template>
+
+		<!-- ── Inner button (input with embedded action button on right) ── -->
+		<template v-else-if="inputType === 'inner-button'">
+			<div :class="cn(wrapperCls, props.class, 'ring-inset')">
+				<div :class="cn(iconCls, 'flex shrink-0 items-center pl-3')">
+					<slot name="leading"><Icon name="lucide:user" :class="iconSize" /></slot>
+				</div>
+				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="readonly" :class="textCls" @blur="handleBlur" >
+				<div class="shrink-0 pr-2">
+					<DynectButton type="button" color="secondary" size="xs" :disabled="disabled" @click="emits('button-click')">
+						<template #leftIcon>
+							<slot name="button-leading" />
+						</template>
+						{{ buttonText ?? 'Button text' }}
+						<template #rightIcon>
+							<slot name="button-trailing" />
+						</template>
+					</DynectButton>
+				</div>
+			</div>
+		</template>
+
+		<!-- ── Stacked placeholder (compact: value on top, label below) ── -->
+		<template v-else-if="inputType === 'stacked'">
+			<div :class="cn('relative flex h-10 w-full flex-col items-center justify-center gap-0.5 rounded-xl px-2.5', wrapperCls, props.class)">
+				<input
+					:id="resolvedId"
+					v-model="modelValue"
+					:value="value"
+					autocomplete="off"
+					:name="resolvedId"
+					:type="($attrs.type as any) ?? 'text'"
+					:placeholder="placeholder ?? '—'"
+					:disabled="disabled"
+					:readonly="readonly"
+					:class="cn(textColorCls, 'text-center text-sm font-normal')"
+					@blur="handleBlur"
+				>
+				<div :class="cn(iconCls, 'absolute top-1/2 right-2.5 flex shrink-0 -translate-y-1/2 items-center')">
+					<DynectButton v-if="modelValue" tabindex="-1" type="button" color="ghost" size="xs" icon-only :disabled="disabled || readonly" @click="modelValue = ''">
+						<Icon name="lucide:x" class="size-4" />
+					</DynectButton>
+				</div>
+				<div v-if="stackedLabel || $slots['stacked-label']" class="flex items-center gap-0.5">
+					<span v-if="$slots['stacked-icon']" :class="cn('h-3.5 w-3.5', iconCls)"><slot name="stacked-icon" /></span>
+					<span :class="cn('text-xs', iconCls)">
+						<slot name="stacked-label">{{ stackedLabel }}</slot>
+					</span>
+				</div>
+			</div>
+		</template>
+
+		<!-- ── Default (leading icon + input + trailing clear) ── -->
+		<template v-else>
+			<div :class="cn(wrapperCls, props.class, 'ring-inset')">
+				<div v-if="$slots.leading" :class="cn(iconCls, 'flex shrink-0 items-center pl-2.5', props.iconClass)">
+					<slot name="leading" />
+				</div>
+				<input :id="resolvedId" v-model="modelValue" :value="value" autocomplete="off" :name="resolvedId" :type="($attrs.type as any) ?? 'text'" :placeholder="placeholder ?? 'Placeholder text'" :disabled="disabled" :readonly="readonly" :class="textCls" @blur="handleBlur" >
+				<div v-if="!disabled && !readonly" :class="cn(iconCls, 'flex shrink-0 items-center pr-2.5', props.iconClass)">
+					<slot name="trailing">
+						<DynectButton v-if="modelValue" tabindex="-1" type="button" color="ghost" size="xs" icon-only :disabled="disabled || readonly" @click="modelValue = ''">
+							<Icon name="lucide:x" class="size-4" />
+						</DynectButton>
+					</slot>
+				</div>
+			</div>
+		</template>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass">
+			<template v-if="$slots.description" #description>
+				<slot name="description" />
+			</template>
+		</DynectFormDescription>
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+	</div>
+</template>

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

@@ -0,0 +1,128 @@
+<template>
+	<LazyKanban :columns="columns" :data="modelValue" class="w-full" @data-change="handleDataChange">
+		<template #default="{ column }">
+			<KanbanBoard :id="column.id" :class="cn('min-w-70', boardClass)">
+				<KanbanHeader :class="cn('flex items-center justify-between', headerClass)">
+					<slot name="header" :column="column">
+						<div class="flex items-center gap-2">
+							<div v-if="column.color" class="size-2 rounded-full" :style="{ backgroundColor: column.color as string }" />
+							<span class="font-semibold">{{ column.name }}</span>
+							<DynectBadge v-if="showCount" color="secondary" size="sm" class="ml-1">
+								{{ getColumnItemCount(column.id) }}
+							</DynectBadge>
+						</div>
+					</slot>
+					<slot name="header-actions" :column="column" />
+				</KanbanHeader>
+
+				<!-- Column Cards -->
+				<KanbanCards :id="column.id" :class="cn('scrollbar-thin', cardsClass)">
+					<template #default="{ item, index }">
+						<KanbanCard :id="item.id" :name="item.name" :column="item.column" :index="index" :disabled="disabled || !!item.disabled" :class="cn('transition-shadow hover:shadow-md', cardClass)">
+							<slot name="card" :item="item" :column="column" :index="index">
+								<div class="flex flex-col gap-2">
+									<p class="text-text-heading dark:text-text-heading m-0 text-sm font-medium">
+										{{ item.name }}
+									</p>
+									<p v-if="item.description" class="text-text-body dark:text-text-body m-0 line-clamp-2 text-xs">
+										{{ item.description }}
+									</p>
+								</div>
+							</slot>
+						</KanbanCard>
+					</template>
+
+					<!-- Empty State -->
+					<template v-if="getColumnItemCount(column.id) === 0 && !hideEmptyState" #footer>
+						<slot name="empty" :column="column">
+							<div class="text-text-body dark:text-text-body flex flex-col items-center justify-center py-8 text-center">
+								<Icon name="lucide:inbox" class="mb-2 size-8 opacity-30" />
+								<p class="text-xs">{{ emptyText }}</p>
+							</div>
+						</slot>
+					</template>
+				</KanbanCards>
+
+				<!-- Column Footer -->
+				<slot name="footer" :column="column" />
+			</KanbanBoard>
+		</template>
+	</LazyKanban>
+</template>
+
+<script setup lang="ts" generic="T extends KanbanItemProps, C extends KanbanColumnProps">
+import { cn } from '@/lib/utils';
+import type { KanbanItemProps, KanbanColumnProps } from '@/composables/useKanban';
+
+export interface DynectKanbanColumn extends KanbanColumnProps {
+	color?: string;
+}
+
+export interface DynectKanbanItem extends KanbanItemProps {
+	description?: string;
+	disabled?: boolean;
+}
+
+export interface DynectKanbanProps<T extends DynectKanbanItem = DynectKanbanItem, C extends DynectKanbanColumn = DynectKanbanColumn> {
+	/** Array of kanban columns */
+	columns: C[];
+	/** Array of kanban items/cards */
+	modelValue: T[];
+	/** Disable drag and drop functionality */
+	disabled?: boolean;
+	/** Show item count badge on column headers */
+	showCount?: boolean;
+	/** Hide empty state when column has no items */
+	hideEmptyState?: boolean;
+	/** Text to display in empty state */
+	emptyText?: string;
+	/** Custom class for kanban boards */
+	boardClass?: string;
+	/** Custom class for column headers */
+	headerClass?: string;
+	/** Custom class for cards container */
+	cardsClass?: string;
+	/** Custom class for individual cards */
+	cardClass?: string;
+}
+
+const props = withDefaults(defineProps<DynectKanbanProps<T, C>>(), {
+	disabled: false,
+	showCount: true,
+	hideEmptyState: false,
+	emptyText: 'No items',
+});
+
+const emit = defineEmits<{
+	'update:modelValue': [data: T[]];
+	'item-moved': [item: T, fromColumn: string, toColumn: string];
+}>();
+
+// Get items for a specific column
+const getColumnItems = (columnId: string) => {
+	return props.modelValue.filter((item: T) => item.column === columnId) as T[];
+};
+
+// Get count of items in a column
+const getColumnItemCount = (columnId: string) => {
+	return getColumnItems(columnId).length;
+};
+
+// Handle data change from kanban
+const handleDataChange = (newData: T[]) => {
+	// Find what changed to emit item-moved event
+	const changedItem = newData.find((newItem: T) => {
+		const oldItem = props.modelValue.find((item: T) => item.id === newItem.id);
+		return oldItem && oldItem.column !== newItem.column;
+	});
+
+	if (changedItem) {
+		const oldItem = props.modelValue.find((item: T) => item.id === changedItem.id);
+		if (oldItem) {
+			emit('item-moved', changedItem, oldItem.column, changedItem.column);
+		}
+	}
+
+	emit('update:modelValue', newData);
+};
+</script>