@dynect/base 0.1.0 → 0.2.0

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// ── Variants ────────────────────────────────────────────────────────────────
+const badgeVariants = cva('inline-flex max-w-fit items-center justify-center gap-1 font-medium whitespace-nowrap border', {
+	variants: {
+		// ── Color / Theme ──────────────────────────────────────────────
+		variant: {
+			danger: 'bg-bg-danger-soft border-border-danger-subtle text-text-fg-danger-strong',
+			warning: 'bg-bg-warning-soft border-border-warning-subtle text-text-fg-warning',
+			success: 'bg-bg-success-soft border-border-success-subtle text-text-fg-success-strong',
+			info: 'bg-bg-info-softer border-border-info-subtle text-text-fg-info',
+			brand: 'bg-bg-brand-softer border-border-brand-subtle text-text-fg-brand',
+			gray: 'bg-bg-secondary border-border-base text-text-body',
+			white: 'bg-bg-white border-border-base text-text-body',
+			dynect: 'bg-bg-dynect-soft border-border-dynect-strong text-text-fg-dynect-strong',
+		},
+		// ── Size ───────────────────────────────────────────────────────
+		size: {
+			sm: 'h-5 rounded-md px-1.5 text-xs [&_svg]:size-3',
+			lg: 'h-6 rounded-lg px-2 text-sm [&_svg]:size-3.5',
+		},
+	},
+	defaultVariants: {
+		variant: 'gray',
+		size: 'sm',
+	},
+});
+
+type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+// ── Props ────────────────────────────────────────────────────────────────────
+interface Props {
+	variant?: BadgeVariants['variant'];
+	size?: BadgeVariants['size'];
+	/** Left icon (lucide icon name, e.g. "lucide:clock") */
+	icon?: string;
+	/** Show a dot indicator instead of an icon */
+	dot?: boolean;
+	/** Show loading spinner */
+	loading?: boolean;
+	/** Show the close/dismiss button */
+	dismissible?: boolean;
+	/** Secondary text displayed after the main label */
+	secondaryText?: string;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	variant: 'gray',
+	size: 'sm',
+	dot: false,
+	loading: false,
+	dismissible: false,
+});
+
+const emit = defineEmits<(e: 'dismiss') => void>();
+
+// Dot color mapped to variant
+const dotColorMap: Record<NonNullable<BadgeVariants['variant']>, string> = {
+	danger: 'bg-text-fg-danger',
+	warning: 'bg-text-fg-warning-subtle',
+	success: 'bg-text-fg-success',
+	info: 'bg-text-fg-info',
+	brand: 'bg-text-fg-brand',
+	gray: 'bg-text-body-subtle',
+	white: 'bg-text-body-subtle',
+	dynect: 'bg-text-fg-dynect-strong',
+};
+
+const dotSize = computed(() => (props.size === 'sm' ? 'size-1.5' : 'size-2'));
+const dotColor = computed(() => dotColorMap[props.variant ?? 'gray']);
+</script>
+
+<template>
+	<span data-slot="badge" :class="cn(badgeVariants({ variant, size }), props.class)">
+		<!-- Dot indicator -->
+		<span v-if="dot && !loading && !icon" :class="cn('shrink-0 rounded-full', dotSize, dotColor)" />
+
+		<!-- Loading spinner -->
+		<Icon v-if="loading" name="lucide:loader-circle" class="shrink-0 animate-spin" />
+
+		<!-- Left icon slot (or icon prop) -->
+		<slot name="icon">
+			<Icon v-if="icon && !loading" :name="icon" class="shrink-0" />
+		</slot>
+
+		<!-- Main label -->
+		<slot />
+
+		<!-- Secondary text -->
+		<span v-if="secondaryText" class="font-normal opacity-60">{{ secondaryText }}</span>
+
+		<!-- Dismiss / close button -->
+		<button v-if="dismissible" type="button" class="shrink-0 cursor-pointer opacity-60 transition-opacity hover:opacity-100" @click.stop="emit('dismiss')">
+			<Icon name="lucide:x" />
+		</button>
+	</span>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { Primitive, type PrimitiveProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants, type ButtonVariants } from '@/components/ui/button';
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+interface Props extends PrimitiveProps {
+	color?: ButtonVariants['color'];
+	size?: ButtonVariants['size'];
+	iconOnly?: boolean;
+	loading?: boolean;
+	leftIcon?: string;
+	rightIcon?: string;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	as: 'button',
+	color: 'brand',
+	size: 'base',
+	iconOnly: false,
+	loading: false,
+});
+</script>
+
+<template>
+	<Primitive data-slot="button" :data-color="color" :data-size="size" :as="as" :as-child="asChild" :class="cn(buttonVariants({ color, size, iconOnly }), props.class)" :disabled="loading || undefined">
+		<Icon v-if="loading" name="lucide:loader-circle" class="animate-spin" />
+		<template v-else>
+			<Icon v-if="leftIcon" :name="leftIcon" />
+			<slot />
+			<Icon v-if="rightIcon" :name="rightIcon" />
+		</template>
+	</Primitive>
+</template>

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

@@ -0,0 +1,80 @@
+<template>
+	<div>
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Checkbox Component -->
+		<div class="relative flex items-center space-x-2">
+			<Checkbox
+				:id="resolvedId"
+				v-model="value"
+				:name="name"
+				:disabled="disabled"
+				:required="required"
+				:class="cn(checkboxClass)"
+				:aria-invalid="!!errorMessage"
+				:aria-describedby="errorMessage ? `${resolvedId}-error` : description ? `${resolvedId}-description` : undefined"
+				v-bind="$attrs"
+				@blur="handleBlur"
+			/>
+			<label v-if="inlineLabel" :for="resolvedId" :class="cn('text-text-heading flex shrink-0 items-center gap-1 text-sm leading-5', inlineLabelClass)">
+				<slot>{{ inlineLabel }}</slot>
+				<TooltipProvider v-if="props.tooltip">
+					<Tooltip>
+						<TooltipTrigger as-child>
+							<Icon name="lucide:circle-alert" class="text-text-body dark:text-text-body size-4 shrink-0" />
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>{{ props.tooltip }}</p>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			</label>
+		</div>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface AppCheckboxProps {
+	// Core Props
+	label?: string;
+	inlineLabel?: string; // Label that appears next to the checkbox
+	name?: string;
+	id?: string;
+	tooltip?: string;
+
+	// Validation Props
+	required?: boolean;
+	disabled?: boolean;
+	description?: string;
+
+	// Appearance Props
+	checkboxClass?: string;
+	labelClass?: string;
+	inlineLabelClass?: string;
+	errorClass?: string;
+	descriptionClass?: string;
+}
+
+const props = defineProps<AppCheckboxProps>();
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `checkbox-${fallbackId}`);
+
+const modelValue = defineModel<boolean>('modelValue', {
+	required: false,
+});
+
+const { errorMessage, handleBlur, value } = useField(() => resolvedId.value, undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+</script>

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

@@ -0,0 +1,180 @@
+<template>
+	<div>
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="`${resolvedId}`" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Date Picker Trigger -->
+		<Popover v-model:open="isPopoverOpen">
+			<PopoverTrigger as-child>
+				<DynectInput
+					:id="`${resolvedId}-view`"
+					:model-value="displayValue"
+					type="text"
+					:placeholder="placeholder"
+					input-type="default"
+					:disabled="disabled"
+					:state="errorMessage ? 'danger' : 'default'"
+					:aria-invalid="!!errorMessage"
+					:aria-describedby="errorMessage ? `${resolvedId}-error` : description ? `${resolvedId}-description` : undefined"
+					:readonly="true"
+					:class="cn('cursor-pointer appearance-none ring-inset', buttonClass)"
+					@blur="handleBlur"
+				>
+					<template #leading>
+						<Icon name="lucide:calendar-days" />
+					</template>
+				</DynectInput>
+				<input :id="`${resolvedId}`" v-model="modelValue" type="hidden" >
+			</PopoverTrigger>
+
+			<PopoverContent class="w-auto rounded-xl bg-white p-0 dark:bg-gray-900" :align="align">
+				<!-- Calendar -->
+				<div class="p-5">
+					<Calendar :model-value="pendingValue" :default-placeholder="defaultPlaceholder" :layout="layout" :min-value="minValue" :max-value="maxValue" :disabled="isDateDisabled" :locale="locale" initial-focus @update:model-value="handleDateSelect" />
+				</div>
+
+				<!-- Footer Buttons -->
+				<div class="border-border-base flex gap-3 border-t px-5 py-3 dark:border-gray-700">
+					<DynectButton size="base" color="secondary" class="w-full" @click="handleClear"> Clear </DynectButton>
+					<DynectButton size="base" color="brand" class="w-full" @click="handleApply">Apply</DynectButton>
+				</div>
+			</PopoverContent>
+		</Popover>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date';
+import { DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date';
+import { cn } from '@/lib/utils';
+import type { LayoutTypes } from '../ui/calendar';
+
+export interface DatePickerProps {
+	// Core Props
+	label?: string;
+	placeholder?: string;
+	name?: string;
+	id?: string;
+
+	// Validation Props
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	description?: string;
+
+	// Date Props
+	minValue?: DateValue;
+	maxValue?: DateValue;
+	isDateDisabled?: boolean;
+	locale?: string;
+	layout?: LayoutTypes;
+	tooltip?: string;
+
+	// Appearance Props
+	buttonClass?: string;
+	labelClass?: string;
+	descriptionClass?: string;
+	align?: 'start' | 'center' | 'end';
+	dateFormat?: Intl.DateTimeFormatOptions;
+}
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+	placeholder: 'Pick a date eg. yyyy-mm-dd',
+	locale: 'en-US',
+	layout: 'month-and-year',
+	align: 'start',
+	dateFormat: () => ({ dateStyle: 'long' }),
+});
+
+// Model value is always yyyy-mm-dd string (or empty)
+const modelValue = defineModel<string | Date>('modelValue', { required: false, default: '' });
+
+// Internal state for popover
+const isPopoverOpen = ref(false);
+
+// Pending selection before Apply is clicked
+const pendingValue = ref<DateValue | undefined>();
+
+// Date formatter for display only
+const df = computed(() => new DateFormatter(props.locale, props.dateFormat));
+
+// Resolve the ISO string from the current model value
+function toIso(val: string | Date | undefined | null): string {
+	if (!val) return '';
+	if (val instanceof Date) {
+		return val.toISOString().slice(0, 10);
+	}
+	return val.slice(0, 10);
+}
+
+// Display value: formatted for the user (e.g. "April 22, 2026")
+const displayValue = computed(() => {
+	const iso = toIso(modelValue.value);
+	if (!iso) return '';
+	try {
+		return df.value.format(parseDate(iso).toDate(getLocalTimeZone()));
+	} catch {
+		return iso;
+	}
+});
+
+// Sync pendingValue with modelValue when popover opens
+watch(isPopoverOpen, (open) => {
+	if (!open) return;
+	const iso = toIso(modelValue.value);
+	try {
+		pendingValue.value = iso ? parseDate(iso) : undefined;
+	} catch {
+		pendingValue.value = undefined;
+	}
+});
+
+// Default placeholder (today's date)
+const defaultPlaceholder = computed(() => today(getLocalTimeZone()));
+
+// Stage the picked date as pending (don't commit yet)
+const handleDateSelect = (value: DateValue | undefined) => {
+	pendingValue.value = value;
+};
+
+// VeeValidate integration
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `date-picker-${fallbackId}`);
+
+const { errorMessage, handleBlur, setValue } = useField<string | Date>(() => props.name ?? resolvedId.value, undefined, { initialValue: toIso(modelValue.value), syncVModel: false });
+
+// Keep vee-validate in sync when modelValue is set externally
+watch(
+	() => modelValue.value,
+	(val) => setValue(toIso(val), false)
+);
+
+watch(
+	() => displayValue.value,
+	(val) => {
+		console.log('displayValue changed:', val);
+	}
+);
+// Apply: commit pending value as yyyy-mm-dd, notify vee-validate, close
+const handleApply = () => {
+	const iso = pendingValue.value ? pendingValue.value.toString() : '';
+	modelValue.value = iso;
+	setValue(iso);
+	pendingValue.value = undefined;
+	isPopoverOpen.value = false;
+};
+
+// Clear: reset value, notify vee-validate, close
+const handleClear = () => {
+	modelValue.value = '';
+	setValue('');
+	pendingValue.value = undefined;
+	isPopoverOpen.value = false;
+};
+</script>

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

@@ -0,0 +1,217 @@
+<template>
+	<div>
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Date Range Picker Trigger -->
+		<Popover v-model:open="isPopoverOpen">
+			<PopoverTrigger as-child>
+				<DynectInput
+					:model-value="displayValue"
+					:placeholder="placeholder"
+					input-type="default"
+					:disabled="disabled"
+					:state="errorMessage ? 'danger' : 'default'"
+					:aria-invalid="!!errorMessage"
+					:aria-describedby="errorMessage ? `${resolvedId}-error` : description ? `${resolvedId}-description` : undefined"
+					:readonly="readonly"
+					:class="cn('cursor-pointer ring-inset', buttonClass)"
+				>
+					<template #leading>
+						<Icon name="lucide:calendar-days" />
+					</template>
+				</DynectInput>
+			</PopoverTrigger>
+
+			<PopoverContent class="border-border-base w-auto rounded-xl border bg-white p-0 shadow-lg dark:border-gray-700 dark:bg-gray-900" :align="align">
+				<!-- Range Calendar -->
+				<div class="p-5">
+					<RangeCalendar :id="resolvedId" :model-value="pendingRange" :default-placeholder="defaultPlaceholder" :min-value="minValue" :max-value="maxValue" :locale="locale" :number-of-months="numberOfMonths" initial-focus @update:model-value="handleRangeSelect">
+						<template #prev-icon>
+							<Icon name="lucide:chevron-left" class="size-4" />
+						</template>
+						<template #next-icon>
+							<Icon name="lucide:chevron-right" class="size-4" />
+						</template>
+					</RangeCalendar>
+				</div>
+
+				<!-- Footer Buttons -->
+				<div class="border-border-base flex gap-3 border-t px-5 py-3 dark:border-gray-700">
+					<DynectButton size="base" color="secondary" class="w-full" @click="handleClear"> Clear </DynectButton>
+					<DynectButton size="base" color="brand" class="w-full" @click="handleApply">Apply</DynectButton>
+				</div>
+			</PopoverContent>
+		</Popover>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date';
+import { DateFormatter, getLocalTimeZone, today, parseDate } from '@internationalized/date';
+import { cn } from '@/lib/utils';
+
+export interface DateRangeValue {
+	start: Date | string | undefined | any;
+	end: Date | string | undefined | any;
+}
+
+export interface DateRangeProps {
+	// Core Props
+	label?: string;
+	placeholder?: string;
+	name?: string;
+	id?: string;
+	tooltip?: string;
+
+	// Validation Props
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	description?: string;
+
+	// Date Props
+	minValue?: DateValue;
+	maxValue?: DateValue;
+	locale?: string;
+	dateFormat?: Intl.DateTimeFormatOptions;
+	numberOfMonths?: number;
+	separator?: string;
+
+	// Appearance Props
+	buttonClass?: string;
+	labelClass?: string;
+	descriptionClass?: string;
+	align?: 'start' | 'center' | 'end';
+}
+
+const props = withDefaults(defineProps<DateRangeProps>(), {
+	placeholder: 'Pick a date range',
+	locale: 'en-US',
+	align: 'start',
+	numberOfMonths: 2,
+	separator: ' – ',
+	dateFormat: () => ({ dateStyle: 'medium' }),
+});
+
+// Model value as { start, end }
+const modelValue = defineModel<DateRangeValue | null>('modelValue', {
+	required: false,
+});
+
+// Internal state for popover
+const isPopoverOpen = ref(false);
+
+// Pending selection before Apply is clicked
+const pendingRange = ref<{ start: DateValue | undefined; end: DateValue | undefined } | undefined | null>();
+const hasPending = ref(false);
+
+// Date formatter
+const df = computed(() => new DateFormatter(props.locale, props.dateFormat));
+
+// Default placeholder (today's date)
+const defaultPlaceholder = computed(() => today(getLocalTimeZone()));
+
+const displayValue = ref(''); // Used to trigger input display without directly binding modelValue
+
+// Helper function to parse string date to DateValue
+const parseDateValue = (dateStr: string | DateValue | Date | null | undefined): DateValue | undefined => {
+	if (!dateStr) return undefined;
+	if (typeof dateStr === 'string') {
+		try {
+			return parseDate(dateStr);
+		} catch {
+			return undefined;
+		}
+	}
+	if (dateStr instanceof Date) {
+		const year = dateStr.getFullYear();
+		const month = String(dateStr.getMonth() + 1).padStart(2, '0');
+		const day = String(dateStr.getDate()).padStart(2, '0');
+		return parseDate(`${year}-${month}-${day}`);
+	}
+	return dateStr as DateValue;
+};
+
+// Helper function to format display value from modelValue
+const formatDisplayValue = (value: any): string => {
+	if (!value || !value.start || !value.end) return '';
+
+	const startDate = parseDateValue(value.start);
+	const endDate = parseDateValue(value.end);
+
+	if (!startDate || !endDate) return '';
+
+	const startFormatted = df.value.format(startDate.toDate(getLocalTimeZone()));
+	const endFormatted = df.value.format(endDate.toDate(getLocalTimeZone()));
+
+	return `${startFormatted}${props.separator}${endFormatted}`;
+};
+
+// Watch modelValue and update displayValue
+watch(
+	() => modelValue.value,
+	(newValue) => {
+		displayValue.value = formatDisplayValue(newValue);
+	},
+	{ immediate: true }
+);
+
+// Initialize pendingRange when popover opens
+watch(isPopoverOpen, (open) => {
+	if (open && modelValue.value) {
+		// Initialize pending range with current model value
+		pendingRange.value = {
+			start: parseDateValue(modelValue.value.start),
+			end: parseDateValue(modelValue.value.end),
+		};
+	} else if (!open && !hasPending.value) {
+		// Reset pending when popover closes without applying
+		pendingRange.value = { start: undefined, end: undefined };
+	}
+});
+
+// Stage the picked range as pending (don't commit yet)
+const handleRangeSelect = (value: { start: DateValue | undefined; end: DateValue | undefined } | undefined) => {
+	hasPending.value = true;
+	pendingRange.value = {
+		start: value?.start,
+		end: value?.end,
+	};
+};
+
+// Apply: commit pending range and close
+const handleApply = () => {
+	if (pendingRange.value?.start && pendingRange.value?.end) {
+		modelValue.value = {
+			start: pendingRange.value.start.toString(),
+			end: pendingRange.value.end.toString(),
+		};
+	}
+	hasPending.value = false;
+	isPopoverOpen.value = false;
+};
+
+// Clear: reset value and close
+const handleClear = () => {
+	hasPending.value = false;
+	pendingRange.value = { start: undefined, end: undefined };
+	modelValue.value = undefined;
+	displayValue.value = '';
+	isPopoverOpen.value = false;
+};
+
+// VeeValidate integration
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `date-range-${fallbackId}`);
+
+const { errorMessage, value } = useField(() => resolvedId.value || props.name || 'date-range', undefined, {
+	initialValue: modelValue.value,
+});
+</script>