@dynect/base 0.1.0 → 0.3.0

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

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+interface DialogProps {
+	open?: boolean;
+	title?: string;
+	description?: string;
+	cancelText?: string;
+	actionText?: string;
+	size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full';
+	variant?: 'default' | 'danger' | 'warning' | 'success';
+	showCancel?: boolean;
+	showAction?: boolean;
+	closable?: boolean;
+	loading?: boolean;
+	disabled?: boolean;
+	class?: string;
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+	open: false,
+	cancelText: 'Cancel',
+	actionText: 'Continue',
+	size: 'md',
+	variant: 'default',
+	showCancel: true,
+	showAction: true,
+	closable: true,
+	loading: false,
+	disabled: false,
+});
+
+const emit = defineEmits<{
+	'update:open': [value: boolean];
+	cancel: [];
+	action: [value: Event];
+}>();
+
+const isOpen = computed({
+	get: () => props.open,
+	set: (value) => emit('update:open', value),
+});
+
+const DIALOG_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(() => DIALOG_SIZE_CLASSES[props.size] ?? DIALOG_SIZE_CLASSES.md);
+
+const actionColor = computed(() => {
+	if (props.variant === 'danger') return 'danger' as const;
+	if (props.variant === 'warning') return 'warning' as const;
+	if (props.variant === 'success') return 'success' as const;
+	return 'brand' as const;
+});
+
+const handleCancel = () => {
+	emit('cancel');
+	isOpen.value = false;
+};
+
+const handleAction = (e: Event) => {
+	emit('action', e);
+};
+</script>
+
+<template>
+	<Dialog v-model:open="isOpen">
+		<DialogTrigger v-if="$slots.trigger" as-child>
+			<slot name="trigger" />
+		</DialogTrigger>
+		<DialogScrollContent :class="cn(sizeClasses, props.class)">
+			<slot name="content">
+				<DialogHeader>
+					<slot name="header">
+						<DialogTitle v-if="title">
+							{{ title }}
+
+							<DialogClose v-if="closable" @click="isOpen = false">
+								<span class="sr-only">Close</span>
+							</DialogClose>
+						</DialogTitle>
+						<DialogTitle v-else class="sr-only">Dialog</DialogTitle>
+						<DialogDescription v-if="description">
+							{{ description }}
+						</DialogDescription>
+						<DialogDescription v-else class="sr-only">Dialog</DialogDescription>
+					</slot>
+				</DialogHeader>
+
+				<div class="text-text-body max-h-[60vh] space-y-4 overflow-x-hidden overflow-y-auto text-base font-normal sm:space-y-6">
+					<slot />
+				</div>
+
+				<DialogFooter v-if="$slots.footer || showCancel || showAction">
+					<slot name="footer">
+						<DynectButton v-if="showCancel" :disabled="disabled" color="ghost" size="base" @click="handleCancel">
+							{{ cancelText }}
+						</DynectButton>
+						<DynectButton v-if="showAction" :loading="loading" :disabled="disabled" :color="actionColor" size="base" @click="handleAction($event)">
+							{{ actionText }}
+						</DynectButton>
+					</slot>
+				</DialogFooter>
+			</slot>
+		</DialogScrollContent>
+	</Dialog>
+</template>

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

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { OTPInputEmits, OTPInputProps } from 'vue-input-otp';
+import { useForwardPropsEmits } from 'reka-ui';
+import { reactiveOmit } from '@vueuse/core';
+import { cn } from '@/lib/utils';
+
+/**
+ * OTP Input variant types (matching the Dynect design)
+ *
+ * - default          → joined pill (shared border, first/last rounded)
+ * - spaced           → individually rounded & spaced slots
+ * - separator        → grouped joined pills separated by a dash
+ * - separator-spaced → individually rounded & spaced groups separated by a dash
+ */
+type OtpType = 'default' | 'spaced' | 'separator' | 'separator-spaced';
+
+const props = withDefaults(
+	defineProps<
+		OTPInputProps & {
+			id?: HTMLAttributes['id'];
+			class?: HTMLAttributes['class'];
+			errorClass?: HTMLAttributes['class'];
+			/** Visual style variant */
+			type?: OtpType;
+			/** Total digit count */
+			length?: number;
+			/** Digits per group (used in separator variants) */
+			groupSize?: number;
+			/** Field label */
+			label?: string;
+			/** Mark as required */
+			required?: boolean;
+			/** Helper / description text shown below inputs */
+			description?: string;
+			/** Tooltip shown on label */
+			tooltip?: string;
+			labelClass?: HTMLAttributes['class'];
+			descriptionClass?: HTMLAttributes['class'];
+		}
+	>(),
+	{
+		type: 'default',
+		length: 6,
+		groupSize: 3,
+	}
+);
+
+const emits = defineEmits<OTPInputEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'type', 'length', 'groupSize', 'label', 'required', 'description', 'tooltip', 'labelClass', 'errorClass', 'descriptionClass');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/** Split [0..length-1] into chunks of groupSize */
+const groups = computed<number[][]>(() => {
+	const total = props.length;
+	const size = props.groupSize;
+	const result: number[][] = [];
+	let idx = 0;
+	while (idx < total) {
+		result.push(Array.from({ length: Math.min(size, total - idx) }, (_, i) => idx + i));
+		idx += size;
+	}
+	return result;
+});
+
+const isSpaced = computed(() => props.type === 'spaced' || props.type === 'separator-spaced');
+const hasSeparator = computed(() => props.type === 'separator' || props.type === 'separator-spaced');
+
+// ── Slot class builders ───────────────────────────────────────────────────────
+
+/** Active-state ring classes shared across all variants */
+const activeRing = 'data-[active=true]:z-10';
+
+/** Spaced variant: every slot stands alone, fully rounded */
+const spacedSlotClass = cn('relative flex h-9 w-9 items-center justify-center', 'rounded-xl border border-border-base', 'bg-bg-secondary-medium text-sm font-semibold text-text-heading', 'shadow-xs  outline-none', activeRing);
+
+/** Default / joined variant: slots share borders, first/last get radius */
+const defaultSlotClass = cn('relative flex h-9 w-9 items-center justify-center', 'border-y border-r border-border-base first:rounded-l-xl first:border-l last:rounded-r-xl', 'bg-bg-secondary-medium text-sm font-semibold text-text-heading', 'shadow-xs  outline-none', activeRing);
+
+/**
+ * For separator grouped slots: first slot in a group gets left-radius,
+ * last gets right-radius, middle slots get none.
+ */
+function groupedSlotClass(slotIndexInGroup: number, groupLength: number): string {
+	const base = cn('relative flex h-9 w-9 items-center justify-center', 'border-y border-r border-border-base', 'bg-bg-secondary-medium text-sm font-semibold text-text-heading', 'shadow-xs  outline-none', activeRing);
+	if (slotIndexInGroup === 0) return cn(base, 'rounded-l-xl border-l');
+	if (slotIndexInGroup === groupLength - 1) return cn(base, 'rounded-r-xl');
+	return base;
+}
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `otpinput-${fallbackId}`);
+
+const modelValue = defineModel<string | number | null>('modelValue', {
+	required: true,
+});
+
+const { errorMessage, handleBlur } = useField(() => resolvedId.value || props.name || 'input', undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+</script>
+
+<template>
+	<div class="flex w-full flex-col gap-2">
+		<!-- Label -->
+		<DynectFormLabel v-if="label" :for="resolvedId" :label="label" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- ── OTP Input ─────────────────────────────────────────────────── -->
+		<InputOTP v-bind="forwarded" :id="resolvedId" v-model="modelValue" :max-length="length" :class="cn('flex items-center has-disabled:opacity-50', isSpaced ? 'gap-2' : 'gap-0', props.class)">
+			<!-- Spaced: all slots individually rounded, evenly spaced -->
+			<template v-if="type === 'spaced'">
+				<InputOTPGroup class="flex items-center gap-2">
+					<InputOTPSlot v-for="i in length" :key="i - 1" :index="i - 1" :class="spacedSlotClass" />
+				</InputOTPGroup>
+			</template>
+
+			<!-- Separator variants: groups of joined slots with a dash between -->
+			<template v-else-if="hasSeparator">
+				<template v-for="(group, gIdx) in groups" :key="gIdx">
+					<InputOTPGroup :class="cn('flex items-center', isSpaced ? 'gap-2' : '')">
+						<InputOTPSlot v-for="(slotIdx, sIdx) in group" :key="slotIdx" :index="slotIdx" :class="isSpaced ? spacedSlotClass : groupedSlotClass(sIdx, group.length)" />
+					</InputOTPGroup>
+					<InputOTPSeparator v-if="gIdx < groups.length - 1">
+						<span class="bg-text-heading mx-1 block h-0.5 w-3 rounded-full" />
+					</InputOTPSeparator>
+				</template>
+			</template>
+
+			<!-- Default: single joined pill group -->
+			<template v-else>
+				<InputOTPGroup class="flex items-center">
+					<InputOTPSlot v-for="i in length" :key="i - 1" :index="i - 1" :class="defaultSlotClass" />
+				</InputOTPGroup>
+			</template>
+		</InputOTP>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="description" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+	</div>
+</template>

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		bordered?: boolean;
+		pagination?: Pagination;
+		rowsPerPageOptions?: number[];
+	}>(),
+	{
+		bordered: false,
+		pagination: () => ({
+			total: 0,
+			perPage: 10,
+			currentPage: 1,
+			totalPages: 0,
+		}),
+		rowsPerPageOptions: () => [5, 10, 50, 100],
+	}
+);
+
+const emit = defineEmits<{
+	'page-click': [page: number];
+}>();
+
+const handlePageClick = (page: number) => {
+	if (page >= 1 && page <= Math.ceil(props.pagination.total / props.pagination.perPage)) {
+		emit('page-click', page);
+	}
+};
+
+const limitModel = defineModel<number>('limit', {
+	required: false,
+	default: () => 10,
+});
+</script>
+
+<template>
+	<div v-if="props.pagination.totalPages >= 2" :class="['flex flex-col items-center justify-between gap-2 border-t md:flex-row', !props.bordered ? 'p-5' : 'py-5']">
+		<div class="flex shrink-0 items-center gap-2 sm:gap-3">
+			<span class="text-text-body text-xs sm:text-sm">Rows per page</span>
+			<DynectSelect v-model="limitModel" :options="props.rowsPerPageOptions" />
+			<span class="text-text-body text-xs sm:text-sm">{{ (props.pagination.currentPage - 1) * props.pagination.perPage + 1 }}-{{ Math.min(props.pagination.currentPage * props.pagination.perPage, props.pagination.total) }} of {{ props.pagination.total }}</span>
+		</div>
+		<Pagination v-slot="{ page }" :items-per-page="props.pagination.perPage" :total="props.pagination.total" :default-page="props.pagination.currentPage">
+			<PaginationContent v-slot="{ items }">
+				<PaginationPrevious class="rounded-l-xl rounded-r-none" @click="handlePageClick(page - 1)" />
+
+				<template v-for="(item, index) in items" :key="index">
+					<PaginationItem v-if="item.type === 'page'" :value="item.value" :is-active="item.value === page" class="rounded-none" @click="handlePageClick(item.value)">
+						{{ item.value }}
+					</PaginationItem>
+				</template>
+
+				<PaginationNext class="rounded-l-none rounded-r-xl" @click="handlePageClick(page + 1)" />
+			</PaginationContent>
+		</Pagination>
+	</div>
+</template>

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

@@ -0,0 +1,50 @@
+<template>
+	<div v-if="props.showError && !props.isPermission" class="bg-bg-secondary flex min-h-screen items-center justify-center px-4">
+		<div class="flex w-full flex-col items-center gap-16">
+			<!-- SVG Illustration -->
+			<div class="w-full max-w-lg">
+				<SvgImagesError404 filled :font-controlled="false" class="h-auto w-full" />
+			</div>
+
+			<!-- Text block -->
+			<div class="flex w-full max-w-xl flex-col items-center">
+				<h1 class="text-text-heading w-full text-center text-3xl font-semibold">Access Restricted</h1>
+				<p class="text-text-body font-inter w-full text-center text-lg leading-7">{{ props.message }}</p>
+			</div>
+		</div>
+	</div>
+	<slot v-if="props.isPermission" />
+</template>
+
+<script setup lang="ts">
+/**
+ * PermissionGuard Component
+ *
+ * Wrapper component that handles permission loading states
+ * Shows loading spinner while permissions are being fetched
+ * Shows error state if permissions fail to load (with retry option)
+ * Renders children only when permissions are ready
+ *
+ * Usage:
+ * <PermissionGuard>
+ *   <YourComponent />
+ * </PermissionGuard>
+ *
+ * Or with error suppression:
+ * <PermissionGuard :show-error="false">
+ *   <YourComponent />
+ * </PermissionGuard>
+ */
+
+interface Props {
+	showError?: boolean;
+	isPermission?: boolean;
+	message?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	showError: true,
+	isPermission: false,
+	message: 'No access to this content',
+});
+</script>

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// ── Variants ────────────────────────────────────────────────────────────────
+const trackVariants = cva('w-full overflow-hidden rounded-full bg-bg-quaternary', {
+	variants: {
+		size: {
+			base: 'h-1.5',
+			lg: 'h-2.5',
+		},
+	},
+	defaultVariants: {
+		size: 'base',
+	},
+});
+
+const indicatorVariants = cva('h-full rounded-full transition-all duration-300', {
+	variants: {
+		color: {
+			primary: 'bg-bg-brand',
+			gray: 'bg-brand-300',
+			dark: 'bg-bg-brand-strong',
+			success: 'bg-bg-success',
+			danger: 'bg-bg-danger',
+			warning: 'bg-bg-warning',
+		},
+	},
+	defaultVariants: {
+		color: 'primary',
+	},
+});
+
+type TrackVariants = VariantProps<typeof trackVariants>;
+type IndicatorVariants = VariantProps<typeof indicatorVariants>;
+
+// ── Props ────────────────────────────────────────────────────────────────────
+interface Props {
+	/** Progress value between 0 and 100 */
+	modelValue?: number;
+	/** Color variant of the progress indicator */
+	color?: IndicatorVariants['color'];
+	/** Size of the progress bar track */
+	size?: TrackVariants['size'];
+	/** Label position relative to the progress bar */
+	labelPosition?: 'none' | 'top' | 'side' | 'bottom';
+	/** Left label text */
+	leftLabel?: string;
+	/** Right label text */
+	rightLabel?: string;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: 0,
+	color: 'primary',
+	size: 'base',
+	labelPosition: 'none',
+});
+
+const clampedValue = computed(() => Math.max(0, Math.min(100, props.modelValue)));
+</script>
+
+<template>
+	<div data-slot="progress" :class="cn('flex w-full', labelPosition === 'side' ? 'flex-row items-center gap-1.5' : 'flex-col gap-1.5', props.class)">
+		<!-- Top Label -->
+		<div v-if="labelPosition === 'top'" class="flex w-full items-center">
+			<span class="text-text-body flex-1 text-xs font-medium">
+				<slot name="left-label">{{ leftLabel }}</slot>
+			</span>
+			<span class="text-text-body dark:text-text-body flex-1 text-right text-xs font-medium">
+				<slot name="right-label">{{ rightLabel }}</slot>
+			</span>
+		</div>
+
+		<!-- Side Left Label -->
+		<span v-if="labelPosition === 'side'" class="text-text-body shrink-0 text-xs font-medium">
+			<slot name="left-label">{{ leftLabel }}</slot>
+		</span>
+
+		<!-- Progress Track -->
+		<div :class="trackVariants({ size })">
+			<div :class="indicatorVariants({ color })" :style="{ width: `${clampedValue}%`, opacity: clampedValue === 0 ? 0 : undefined }" />
+		</div>
+
+		<!-- Side Right Label -->
+		<span v-if="labelPosition === 'side'" class="text-text-body shrink-0 text-xs font-medium">
+			<slot name="right-label">{{ rightLabel }}</slot>
+		</span>
+
+		<!-- Bottom Label -->
+		<div v-if="labelPosition === 'bottom'" class="flex w-full items-center">
+			<span class="text-text-body flex-1 text-xs font-medium">
+				<slot name="left-label">{{ leftLabel }}</slot>
+			</span>
+			<span class="text-text-body dark:text-text-body flex-1 text-right text-xs font-medium">
+				<slot name="right-label">{{ rightLabel }}</slot>
+			</span>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,90 @@
+<template>
+	<fieldset class="space-y-4">
+		<!-- Label -->
+		<DynectFormLabel as="legend" :label="label" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Radio Group Component -->
+		<RadioGroup
+			:id="resolvedId"
+			v-model="modelValue"
+			:name="name"
+			:default-value="options[0]?.value"
+			:disabled="disabled"
+			:required="required"
+			:class="cn(radioGroupClass)"
+			:aria-invalid="!!errorMessage"
+			:aria-describedby="errorMessage ? `${resolvedId}-error` : description ? `${resolvedId}-description` : undefined"
+			v-bind="$attrs"
+			@blur="handleBlur"
+		>
+			<div v-for="option in options" :key="option.value" class="flex items-center gap-2.5">
+				<RadioGroupItem v-if="!hideInput" :id="`${resolvedId}-${option.value}`" :value="option.value" :disabled="option.disabled || disabled" :class="radioItemClass" />
+				<RadioGroupItem v-else :id="`${resolvedId}-${option.value}`" :value="option.value" :disabled="option.disabled || disabled" class="sr-only" />
+				<label :for="`${resolvedId}-${option.value}`" :class="cn(!hideInput && 'text-text-heading dark:text-text-heading block text-sm leading-5 font-medium', labelClass)">
+					<slot :name="`${option.value}`" :option="option">
+						{{ option.label }}
+					</slot>
+				</label>
+			</div>
+		</RadioGroup>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" />
+	</fieldset>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+export interface RadioOption {
+	label: string;
+	value: string | number;
+	disabled?: boolean;
+}
+
+export interface AppRadioProps {
+	// Core Props
+	label?: string;
+	name?: string;
+	id?: string;
+	options?: RadioOption[];
+	tooltip?: string;
+
+	// Validation Props
+	required?: boolean;
+	disabled?: boolean;
+	description?: string;
+
+	// Appearance Props
+	hideInput?: boolean;
+	radioGroupClass?: string;
+	radioItemClass?: string;
+	radioLabelClass?: string;
+	labelClass?: string;
+	errorClass?: string;
+	descriptionClass?: string;
+}
+
+const props = withDefaults(defineProps<AppRadioProps>(), {
+	options: () => [],
+});
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `radio-${fallbackId}`);
+
+const modelValue = defineModel<any>('modelValue', {
+	required: false,
+});
+
+const { errorMessage, handleBlur } = useField(() => resolvedId.value, undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+</script>