@harshshahcg/survey-render 1.4.0 → 1.5.0

package/dist/components/QuestionListCarousel.d.ts

@@ -0,0 +1,16 @@
+export type QuestionStatus = "completed" | "unanswered" | "required" | "error";
+export type CarouselVariant = "default" | "PLC";
+export interface QuestionListCarouselProps {
+    /** Ordered list of visible question IDs (e.g. Q1, Q2, Q6.1) */
+    questions: string[];
+    /** Currently active question ID (controlled by parent) */
+    activeQuestionId: string | undefined;
+    /** Called when user selects a question (click card or arrow) */
+    onQuestionSelect: (questionId: string) => void;
+    /** Optional map of questionId -> status for styling */
+    questionStatusMap?: Record<string, QuestionStatus>;
+    className?: string;
+    /** Visual variant. "PLC" matches the legacy training-app design. Default: "default" */
+    variant?: CarouselVariant;
+}
+export declare function QuestionListCarousel({ questions, activeQuestionId, onQuestionSelect, questionStatusMap, className, variant, }: QuestionListCarouselProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/QuestionMapper.d.ts

@@ -1,4 +1,5 @@
 import type { SurveyQuestion } from "../types/survey.types";
+import { type MCQVariant } from "./custom/MCQSelect";
 import type { EffectiveMediaConfig } from "../utils/fileUtils";
 export interface QuestionMapperProps {
     question: SurveyQuestion;
@@ -9,5 +10,6 @@ export interface QuestionMapperProps {
     disabled?: boolean;
     mediaConfig?: EffectiveMediaConfig | null;
     className?: string;
+    variant?: MCQVariant;
 }
-export default function QuestionMapper({ question, value, onChange, error, touched, disabled, mediaConfig, className, }: QuestionMapperProps): import("react/jsx-runtime").JSX.Element;
+export default function QuestionMapper({ question, value, onChange, error, touched, disabled, mediaConfig, className, variant, }: QuestionMapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/{QuestionOverviewPanel/QuestionOverviewPanel.d.ts → QuestionOverviewPanel.d.ts}

@@ -1,5 +1,4 @@
-import type { SurveyQuestion } from "../../types/survey.types";
-import "./QuestionOverviewPanel.css";
+import type { SurveyQuestion } from "../types/survey.types";
 export interface QuestionOverviewPanelProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/components/QuestionRenderer.d.ts

@@ -1,5 +1,6 @@
 import type { SurveyQuestion } from "../types/survey.types";
 import type { EffectiveMediaConfig } from "../utils/fileUtils";
+import type { MCQVariant } from "./custom/MCQSelect";
 export interface QuestionRendererProps {
     question: SurveyQuestion;
     value: unknown;
@@ -12,5 +13,6 @@ export interface QuestionRendererProps {
     }>;
     mediaConfig?: EffectiveMediaConfig | null;
     className?: string;
+    variant?: MCQVariant;
 }
-export declare function QuestionRenderer({ question, value, onChange, disabled, error, validationErrors, mediaConfig, className, }: QuestionRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuestionRenderer({ question, value, onChange, disabled, error, validationErrors, mediaConfig, className, variant, }: QuestionRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/{SubmissionLoadingOverlay/SubmissionLoadingOverlay.d.ts → SubmissionLoadingOverlay.d.ts}

@@ -1,4 +1,3 @@
-import "./SubmissionLoadingOverlay.css";
 export interface SubmissionLoadingOverlayProps {
     show: boolean;
 }

package/dist/components/{SurveyContainer/SurveyContainer.d.ts → SurveyContainer.d.ts}

@@ -1,5 +1,5 @@
-import type { SurveyConfig, SurveySubmitPayload } from "../../types/survey.types";
-import "./SurveyContainer.css";
+import type { SurveyConfig, SurveySubmitPayload } from "../types/survey.types";
+import type { MCQVariant } from "./custom/MCQSelect";
 export interface SurveyProgressBarConfig {
     /** "position" = progress by step index. "completion" = by answered mandatory (FMB logic). Default: "completion" */
     progressMode?: "position" | "completion";
@@ -28,5 +28,7 @@ export interface SurveyContainerProps {
     theme?: string;
     /** Progress bar configuration. Omit to use defaults. Pass false to hide. */
     progressBar?: SurveyProgressBarConfig | false;
+    /** Visual variant for MCQ + carousel. "PLC" uses the legacy training-app design. Default: "default" */
+    variant?: MCQVariant;
 }
-export declare function SurveyContainer({ data, onSubmit, onSave, onExit, isSubmitting, className, showHeader, theme, progressBar, }: SurveyContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SurveyContainer({ data, onSubmit, onSave, onExit, isSubmitting, className, showHeader, theme, progressBar, variant, }: SurveyContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SurveyProgressBar.d.ts

@@ -0,0 +1,25 @@
+export type ProgressMode = "position" | "completion";
+export type ProgressBarVariant = "default" | "gradient";
+export interface SurveyProgressBarProps {
+    /** Current step index (0-based). */
+    currentIndex: number;
+    /** Total number of steps. */
+    totalSteps: number;
+    /** "position" = progress by step index. "completion" = progress by answered mandatory (FMB logic). Default: "completion" */
+    progressMode?: ProgressMode;
+    /** Progress value 0-100. Used when progressMode is "completion". */
+    progressValue?: number;
+    /** Show "Question X of Y" label. Default: true */
+    showLabel?: boolean;
+    /** Show percentage. Default: true */
+    showPercentage?: boolean;
+    /** Custom label format. Use {current} and {total} placeholders. Default: "Question {current} of {total}" */
+    labelFormat?: string;
+    /** Max width of the progress bar + percentage (e.g. "240px"). Default: "240px" */
+    progressMaxWidth?: string;
+    /** "default" = Radix Progress. "gradient" = FMB-style gradient bar. Default: "default" */
+    variant?: ProgressBarVariant;
+    /** Additional class name for the container. */
+    className?: string;
+}
+export declare function SurveyProgressBar({ currentIndex, totalSteps, progressMode, progressValue, showLabel, showPercentage, labelFormat, progressMaxWidth, variant, className, }: SurveyProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SurveyRenderer.d.ts

@@ -1,6 +1,7 @@
 import type { SurveyConfig, SurveySubmitPayload } from "../types/survey.types";
 import type { PLCSurveyConfig } from "../converters/types";
 import type { SurveyProgressBarConfig } from "./SurveyContainer";
+import type { MCQVariant } from "./custom/MCQSelect";
 /** Survey input: FMB (internal format) or PLC (converted to FMB at runtime). */
 export type SurveyInputData = SurveyConfig | PLCSurveyConfig;
 /** Payload passed to onSubmit/onSave: FMB or PLC depending on input data type. */
@@ -20,6 +21,8 @@ export interface SurveyRendererProps {
     theme?: string;
     /** Progress bar config. Omit for defaults. Pass false to hide. */
     progressBar?: SurveyProgressBarConfig | false;
+    /** Visual variant for MCQ + carousel. "PLC" uses the legacy training-app design. Default: "default" */
+    variant?: MCQVariant;
 }
 /**
  * Main entry component. Renders a full survey from JSON config.

package/dist/components/custom/{DatePicker/DatePicker.d.ts → DatePicker.d.ts}

@@ -1,4 +1,3 @@
-import "./DatePicker.css";
 export interface DatePickerProps {
     selectedDate?: Date;
     onDateSelect: (date: Date | undefined) => void;

package/dist/components/custom/{Dropdown/Dropdown.d.ts → Dropdown.d.ts}

@@ -1,4 +1,3 @@
-import "./Dropdown.css";
 export interface DropdownOption {
     value: string;
     label: string;

package/dist/components/custom/{MCQSelect/MCQSelect.d.ts → MCQSelect.d.ts}

@@ -1,8 +1,8 @@
-import "./MCQSelect.css";
 export interface MCQOption {
     id: string;
     text: string;
 }
+export type MCQVariant = "default" | "PLC";
 export interface MCQSelectProps {
     options: MCQOption[];
     selectionMode: "single" | "multiple";
@@ -10,5 +10,6 @@ export interface MCQSelectProps {
     onOptionSelect: (optionId: string | string[]) => void;
     className?: string;
     disabled?: boolean;
+    variant?: MCQVariant;
 }
-export default function MCQSelect({ options, selectionMode, selectedOptions, onOptionSelect, className, disabled, }: MCQSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MCQSelect({ options, selectionMode, selectedOptions, onOptionSelect, className, disabled, variant, }: MCQSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/{TabularInput/TabularInput.d.ts → TabularInput.d.ts}

@@ -1,4 +1,3 @@
-import "./TabularInput.css";
 export interface TabularInputOption {
     id: string;
     text: string;

package/dist/components/custom/{TextResponse/TextResponse.d.ts → TextResponse.d.ts}

@@ -1,4 +1,3 @@
-import "./TextResponse.css";
 export interface TextResponseProps {
     value?: string;
     onChange: (value: string) => void;

package/dist/components/ui/{ErrorMessage/ErrorMessage.d.ts → ErrorMessage.d.ts}

@@ -1,4 +1,6 @@
-import "./ErrorMessage.css";
+/**
+ * Reusable inline error message for validation feedback.
+ */
 interface ErrorMessageProps {
     error?: string;
     className?: string;

package/dist/components/ui/{Alert/Alert.d.ts → alert.d.ts}

@@ -1,15 +1,9 @@
 import * as React from "react";
-import "./Alert.css";
-type AlertVariant = "default" | "destructive";
-declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & {
-    variant?: AlertVariant;
-}): import("react/jsx-runtime").JSX.Element;
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare namespace AlertTitle {
-    var displayName: string;
-}
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare namespace AlertDescription {
-    var displayName: string;
-}
 export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/ui/button-variants.d.ts

@@ -0,0 +1,4 @@
+export declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/ui/{Button/Button.d.ts → button.d.ts}

@@ -1,10 +1,7 @@
 import * as React from "react";
-import "./Button.css";
-type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-type ButtonSize = "default" | "sm" | "lg" | "icon";
-export interface ButtonProps extends React.ComponentProps<"button"> {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
+import { type VariantProps } from "class-variance-authority";
+import { buttonVariants } from "./button-variants";
+interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
     bgColor?: string;
     textColor?: string;

package/dist/components/ui/{Card/Card.d.ts → card.d.ts}

@@ -1,12 +1,9 @@
 import * as React from "react";
-import "./Card.css";
 declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function CardFooter({ className, ...props }: React.ComponentProps<"div"> & {
-    "data-border"?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, container, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    /** Mount portal inside this element so dialog inherits theme (data-theme) */
+    container?: HTMLElement | null;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/{Input/Input.d.ts → input.d.ts}

@@ -1,4 +1,3 @@
 import * as React from "react";
-import "./Input.css";
 declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
 export { Input };

package/dist/components/ui/{Label/Label.d.ts → label.d.ts}

@@ -1,5 +1,4 @@
-import * as React from "react";
-import "./Label.css";
+import React from "react";
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     className?: string;
 }

package/dist/components/ui/{Pagination/Pagination.d.ts → pagination.d.ts}

@@ -1,13 +1,12 @@
 import * as React from "react";
-import "./Pagination.css";
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
-declare function PaginationItem(props: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
 type PaginationLinkProps = {
     isActive?: boolean;
     size?: "default" | "sm" | "lg" | "icon";
 } & React.ComponentProps<"a">;
-declare function PaginationLink({ className, isActive, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
 declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
 declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/components/ui/progress.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Progress };

package/dist/components/ui/select.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/ui/tabs.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/components/ui/{Textarea/Textarea.d.ts → textarea.d.ts}

@@ -1,4 +1,3 @@
 import * as React from "react";
-import "./Textarea.css";
 declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
 export { Textarea };

package/dist/index.d.ts

@@ -16,7 +16,8 @@ export { SubmissionLoadingOverlay } from "./components/SubmissionLoadingOverlay"
 export type { SurveyRendererProps } from "./components/SurveyRenderer";
 export type { SurveyContainerProps, SurveyProgressBarConfig, } from "./components/SurveyContainer";
 export type { QuestionRendererProps } from "./components/QuestionRenderer";
-export type { QuestionListCarouselProps, QuestionStatus as CarouselQuestionStatus } from "./components/QuestionListCarousel";
+export type { QuestionListCarouselProps, QuestionStatus as CarouselQuestionStatus, CarouselVariant, } from "./components/QuestionListCarousel";
+export type { MCQVariant } from "./components/custom/MCQSelect";
 export type { QuestionOverviewPanelProps } from "./components/QuestionOverviewPanel";
 export type { ValidationDialogProps } from "./components/ValidationDialog";
 export type { ExitConfirmationDialogProps } from "./components/ExitConfirmationDialog";

package/dist/lib/utils.d.ts

@@ -1,5 +1,2 @@
-/**
- * Simple class name merger. Replaces clsx + tailwind-merge.
- * Accepts strings and undefined; duplicates are not deduped.
- */
-export declare function cn(...inputs: (string | undefined | null | false)[]): string;
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;