@nextworks/blocks-sections 0.1.0-alpha.0

package/dist/components/CTA.jsx

@@ -0,0 +1,88 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { Button } from "@nextworks/blocks-core";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Call-to-Action section with a heading, optional subheading/description,
+ * and up to two actions (primary and secondary).
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides (section, container,
+ *   contentWrapper, headingText, subheadingText, descriptionText, actionsWrapper,
+ *   ctaButtonStyle, secondaryButtonStyle). Consumer classes are merged after
+ *   defaults via cn().
+ * - Accessibility: rendered as a semantic <section> with aria-label. The role
+ *   defaults to "region" but can be customized with the role prop.
+ * - Motion: subtle hover lift effects on buttons are included by default.
+ *
+ * @example
+ * <CTA
+ *   headingText={{ text: "Join The Launch Today!" }}
+ *   descriptionText={{ text: "Start your free trial in minutes." }}
+ *   ctaButton={{ label: "Sign Up", href: "#contact" }}
+ *   secondaryButton={{ label: "Learn More", href: "#features" }}
+ * />
+ */
+export function CTA({ id = "cta", className, section = {
+    className: "bg-background text-foreground",
+}, container = {
+    className: "mx-auto flex min-h-[42vh] w-full max-w-6xl flex-col items-center justify-center overflow-hidden px-4 pb-7",
+}, contentWrapper = {
+    className: "flex w-full flex-col items-center text-center",
+}, headingText = {
+    text: "Join The Launch Today!",
+    className: "text-3xl font-bold leading-[1.1] text-primary sm:text-4xl md:text-5xl text-[var(--heading-fg)]",
+}, subheadingText = {
+    text: "",
+    className: "mt-2 text-lg font-medium text-muted-foreground sm:text-xl text-[var(--subheading-fg)]",
+}, descriptionText = {
+    text: "",
+    className: "mt-3 max-w-2xl text-base text-foreground/80 sm:text-lg text-[var(--description-fg)]",
+}, actionsWrapper = {
+    className: "mt-6 flex flex-col items-center gap-3 sm:flex-row",
+}, ctaButton = { label: "Sign Up Now", href: "#contact" }, ctaButtonStyle = {
+    variant: "default",
+    size: "default",
+    className: "shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+}, ctaButtonWrapper = { className: "" }, secondaryButton = null, secondaryButtonStyle = {
+    variant: "outline",
+    size: "default",
+    className: "transition-transform duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+}, secondaryButtonWrapper = { className: "" }, spacing = { topMargin: "mt-0 sm:mt-12" }, 
+// spacing = { topMargin: "mt-[17vh]" },
+ariaLabel = "Call to action section", role = "region", }) {
+    // default class for actions wrapper (keeps a gap and responsive row layout)
+    const actionsWrapperDefault = "mt-6 flex flex-col items-center gap-3 sm:flex-row";
+    return (<section id={id} role={role} aria-label={ariaLabel} className={cn("w-full", section.className, className)}>
+      <div className={cn(container.className)}>
+        <div className={cn(contentWrapper.className)}>
+          {(headingText === null || headingText === void 0 ? void 0 : headingText.text) ? (<h2 className={cn("text-center", spacing === null || spacing === void 0 ? void 0 : spacing.topMargin, headingText.className)}>
+              {headingText.text}
+            </h2>) : null}
+
+          {(subheadingText === null || subheadingText === void 0 ? void 0 : subheadingText.text) ? (<p className={cn(subheadingText.className)}>
+              {subheadingText.text}
+            </p>) : null}
+
+          {(descriptionText === null || descriptionText === void 0 ? void 0 : descriptionText.text) ? (<p className={cn(descriptionText.className)}>
+              {descriptionText.text}
+            </p>) : null}
+
+          <div className={cn(actionsWrapperDefault, actionsWrapper.className)}>
+            {ctaButton && (<Button asChild unstyled={ctaButtonStyle.unstyled} variant={ctaButtonStyle.variant} size={ctaButtonStyle.size} className={cn(ctaButtonWrapper.className, ctaButtonStyle.className)} style={ctaButtonStyle.style}>
+                <Link href={ctaButton.href} aria-label={ctaButton.label}>
+                  {ctaButton.label}
+                </Link>
+              </Button>)}
+
+            {secondaryButton && (<Button asChild unstyled={secondaryButtonStyle.unstyled} variant={secondaryButtonStyle.variant} size={secondaryButtonStyle.size} className={cn(secondaryButtonWrapper.className, secondaryButtonStyle.className)} style={secondaryButtonStyle.style}>
+                <Link href={secondaryButton.href} aria-label={secondaryButton.label}>
+                  {secondaryButton.label}
+                </Link>
+              </Button>)}
+          </div>
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/Contact.d.ts

@@ -0,0 +1,111 @@
+import React from "react";
+type FieldType = "text" | "email" | "tel" | "textarea";
+/**
+ * Configuration for a single form field in the Contact section.
+ * @public
+ */
+export interface ContactField {
+    /** Unique id/name for the field. Used for htmlFor and form submission. */
+    id: string;
+    /** Visible label text for the field */
+    label: string;
+    /** Placeholder text rendered inside the input */
+    placeholder?: string;
+    /** Whether the field is required for form submission */
+    required?: boolean;
+    /** Type of field to render (text, email, tel, textarea). */
+    type?: FieldType;
+}
+/**
+ * Props for the Contact section component.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides (section, container,
+ *   headerWrapper, headerText, subheaderText, form, fieldsWrapper, field,
+ *   label, input, textarea, submitButtonWrapper, submitButtonStyle). Consumer
+ *   classes are merged after defaults via cn().
+ * - Behavior: onSubmit is called with the form event after default
+ *   prevention. Provide your own handler to integrate with APIs.
+ * - Motion: controlled by enableMotion; when false, removes button hover lift.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ */
+export interface ContactProps {
+    /** Array of fields to render in the form. @defaultValue defaultFormData */
+    fields?: ContactField[];
+    /** Heading text above the form. @defaultValue "Ready to Grow Your Business?" */
+    contactHeaderText?: string;
+    /** Subheading under the header. @defaultValue "Schedule a free consultation with our experts." */
+    contactSubHeaderText?: string;
+    /** Optional id to attach to the root section element. @defaultValue "contact" */
+    id?: string;
+    /** Optional top-level class to override the section root */
+    className?: string;
+    /** Styling configuration objects (slots) */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    headerWrapper?: {
+        className?: string;
+    };
+    headerText?: {
+        className?: string;
+    };
+    subheaderText?: {
+        className?: string;
+    };
+    form?: {
+        className?: string;
+    };
+    fieldsWrapper?: {
+        className?: string;
+    };
+    field?: {
+        className?: string;
+    };
+    label?: {
+        className?: string;
+    };
+    input?: {
+        className?: string;
+    };
+    textarea?: {
+        className?: string;
+    };
+    submitButtonWrapper?: {
+        className?: string;
+    };
+    submitButtonStyle?: {
+        unstyled?: boolean;
+        style?: React.CSSProperties;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+    };
+    /** Text for the submit button. @defaultValue "Schedule Free Consultation" */
+    submitButtonText?: string;
+    /** Callback fired on submit; default prevented. */
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    /** ARIA label for the section. @defaultValue "Contact section" */
+    ariaLabel?: string;
+    /** When false, removes hover lift/transition on the submit button */
+    enableMotion?: boolean;
+}
+/**
+ * Contact section with a configurable form and submit action.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged via cn().
+ * - Behavior: onSubmit is invoked with the form event after calling
+ *   preventDefault().
+ * - Motion: enableMotion toggles the button hover lift/transition.
+ * - Accessibility: Uses a semantic <section> with aria-label.
+ *
+ * @example
+ * <Contact onSubmit={(e) => { // send to your API }} />
+ */
+export declare function Contact({ fields, contactHeaderText, contactSubHeaderText, id, className, section, container, headerWrapper, headerText, subheaderText, form, fieldsWrapper, field, label, input, textarea, submitButtonWrapper, submitButtonStyle, submitButtonText, onSubmit, ariaLabel, enableMotion, }: ContactProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Contact.d.ts.map

package/dist/components/Contact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Contact.d.ts","sourceRoot":"","sources":["../../src/components/Contact.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,0EAA0E;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,YAAY;IAC3B,2EAA2E;IAC3E,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kGAAkG;IAClG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,iFAAiF;IACjF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,aAAa,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,aAAa,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,aAAa,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,mBAAmB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,iBAAiB,CAAC,EAAE;QAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,OAAO,CAAC,EACJ,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;QACxC,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IAEF,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACzD,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAwCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAwB,EACxB,iBAAkD,EAClD,oBAAuE,EACvE,EAAc,EACd,SAAS,EACT,OAAgD,EAChD,SAA8C,EAC9C,aAAiD,EACjD,UAEC,EACD,aAEC,EACD,IAGC,EACD,aAA0C,EAC1C,KAAkC,EAClC,KAGC,EACD,KAGC,EACD,QAGC,EACD,mBAA2C,EAC3C,iBAKC,EACD,gBAA+C,EAC/C,QAAQ,EACR,SAA6B,EAC7B,YAAmB,GACpB,EAAE,YAAY,qBA8Ed"}

package/dist/components/Contact.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@nextworks/blocks-core";
+import { Button, Input, Textarea, Label } from "@nextworks/blocks-core";
+const defaultFormData = [
+    {
+        id: "name",
+        label: "Your Full Name",
+        placeholder: "John Doe",
+        required: true,
+        type: "text",
+    },
+    {
+        id: "email",
+        label: "Email Address",
+        placeholder: "you@example.com",
+        required: true,
+        type: "email",
+    },
+    {
+        id: "phone",
+        label: "Phone Number",
+        placeholder: "Enter your phone number",
+        required: false,
+        type: "tel",
+    },
+    {
+        id: "company",
+        label: "Company",
+        placeholder: "Enter your company name",
+        required: false,
+        type: "text",
+    },
+    {
+        id: "message",
+        label: "Message",
+        placeholder: "Tell us about your project...",
+        required: true,
+        type: "textarea",
+    },
+];
+/**
+ * Contact section with a configurable form and submit action.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged via cn().
+ * - Behavior: onSubmit is invoked with the form event after calling
+ *   preventDefault().
+ * - Motion: enableMotion toggles the button hover lift/transition.
+ * - Accessibility: Uses a semantic <section> with aria-label.
+ *
+ * @example
+ * <Contact onSubmit={(e) => { // send to your API }} />
+ */
+export function Contact({ fields = defaultFormData, contactHeaderText = "Ready to Grow Your Business?", contactSubHeaderText = "Schedule a free consultation with our experts.", id = "contact", className, section = { className: "py-16 px-4 bg-primary" }, container = { className: "mx-auto max-w-4xl" }, headerWrapper = { className: "mb-8 text-center" }, headerText = {
+    className: "text-2xl font-bold font-poppins text-primary-foreground",
+}, subheaderText = {
+    className: "mt-2 text-lg font-inter text-primary-foreground px-4 md:px-14",
+}, form = {
+    className: "bg-card p-8 rounded-lg shadow-md border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+}, fieldsWrapper = { className: "space-y-4" }, field = { className: "space-y-2" }, label = {
+    className: "text-card-foreground text-sm font-medium font-poppins block text-[var(--label-fg)]",
+}, input = {
+    className: "w-full p-3 border border-input rounded-md bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+}, textarea = {
+    className: "w-full p-3 border border-input rounded-md bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+}, submitButtonWrapper = { className: "pt-2" }, submitButtonStyle = {
+    variant: "default",
+    size: "lg",
+    className: "w-full shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+}, submitButtonText = "Schedule Free Consultation", onSubmit, ariaLabel = "Contact section", enableMotion = true, }) {
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
+    };
+    return (_jsx("section", { id: id, className: cn("w-full", section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(container.className), children: [_jsxs("div", { className: cn(headerWrapper.className), children: [contactHeaderText && (_jsx("h2", { className: cn(headerText.className), children: contactHeaderText })), contactSubHeaderText && (_jsx("p", { className: cn(subheaderText.className), children: contactSubHeaderText }))] }), _jsx("form", { onSubmit: handleSubmit, className: cn(form.className), children: _jsxs("div", { className: cn(fieldsWrapper.className), children: [fields.map((f) => {
+                                var _a;
+                                const isTextarea = f.type === "textarea";
+                                return (_jsxs("div", { className: cn(field.className), children: [_jsxs(Label, { htmlFor: f.id, className: cn(label.className), children: [f.label, f.required && (_jsx("span", { className: "text-destructive ml-1", children: "*" }))] }), isTextarea ? (_jsx(Textarea, { id: f.id, name: f.id, placeholder: f.placeholder, required: f.required, rows: 4, className: cn(textarea.className) })) : (_jsx(Input, { type: (_a = f.type) !== null && _a !== void 0 ? _a : "text", id: f.id, name: f.id, placeholder: f.placeholder, required: f.required, className: cn(input.className) }))] }, f.id));
+                            }), _jsx("div", { className: cn(submitButtonWrapper.className), children: _jsx(Button, { type: "submit", unstyled: submitButtonStyle.unstyled, variant: submitButtonStyle.variant, size: submitButtonStyle.size, className: cn(submitButtonStyle.className, !enableMotion &&
+                                        "transition-none hover:!translate-y-0 hover:shadow-none"), style: submitButtonStyle.style, children: submitButtonText }) })] }) })] }) }));
+}

package/dist/components/Contact.jsx

@@ -0,0 +1,107 @@
+"use client";
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+import { Button, Input, Textarea, Label } from "@nextworks/blocks-core";
+const defaultFormData = [
+    {
+        id: "name",
+        label: "Your Full Name",
+        placeholder: "John Doe",
+        required: true,
+        type: "text",
+    },
+    {
+        id: "email",
+        label: "Email Address",
+        placeholder: "you@example.com",
+        required: true,
+        type: "email",
+    },
+    {
+        id: "phone",
+        label: "Phone Number",
+        placeholder: "Enter your phone number",
+        required: false,
+        type: "tel",
+    },
+    {
+        id: "company",
+        label: "Company",
+        placeholder: "Enter your company name",
+        required: false,
+        type: "text",
+    },
+    {
+        id: "message",
+        label: "Message",
+        placeholder: "Tell us about your project...",
+        required: true,
+        type: "textarea",
+    },
+];
+/**
+ * Contact section with a configurable form and submit action.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged via cn().
+ * - Behavior: onSubmit is invoked with the form event after calling
+ *   preventDefault().
+ * - Motion: enableMotion toggles the button hover lift/transition.
+ * - Accessibility: Uses a semantic <section> with aria-label.
+ *
+ * @example
+ * <Contact onSubmit={(e) => { // send to your API }} />
+ */
+export function Contact({ fields = defaultFormData, contactHeaderText = "Ready to Grow Your Business?", contactSubHeaderText = "Schedule a free consultation with our experts.", id = "contact", className, section = { className: "py-16 px-4 bg-primary" }, container = { className: "mx-auto max-w-4xl" }, headerWrapper = { className: "mb-8 text-center" }, headerText = {
+    className: "text-2xl font-bold font-poppins text-primary-foreground",
+}, subheaderText = {
+    className: "mt-2 text-lg font-inter text-primary-foreground px-4 md:px-14",
+}, form = {
+    className: "bg-card p-8 rounded-lg shadow-md border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+}, fieldsWrapper = { className: "space-y-4" }, field = { className: "space-y-2" }, label = {
+    className: "text-card-foreground text-sm font-medium font-poppins block text-[var(--label-fg)]",
+}, input = {
+    className: "w-full p-3 border border-input rounded-md bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+}, textarea = {
+    className: "w-full p-3 border border-input rounded-md bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+}, submitButtonWrapper = { className: "pt-2" }, submitButtonStyle = {
+    variant: "default",
+    size: "lg",
+    className: "w-full shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+}, submitButtonText = "Schedule Free Consultation", onSubmit, ariaLabel = "Contact section", enableMotion = true, }) {
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
+    };
+    return (<section id={id} className={cn("w-full", section.className, className)} aria-label={ariaLabel}>
+      <div className={cn(container.className)}>
+        <div className={cn(headerWrapper.className)}>
+          {contactHeaderText && (<h2 className={cn(headerText.className)}>{contactHeaderText}</h2>)}
+          {contactSubHeaderText && (<p className={cn(subheaderText.className)}>
+              {contactSubHeaderText}
+            </p>)}
+        </div>
+        <form onSubmit={handleSubmit} className={cn(form.className)}>
+          <div className={cn(fieldsWrapper.className)}>
+            {fields.map((f) => {
+            var _a;
+            const isTextarea = f.type === "textarea";
+            return (<div key={f.id} className={cn(field.className)}>
+                  <Label htmlFor={f.id} className={cn(label.className)}>
+                    {f.label}
+                    {f.required && (<span className="text-destructive ml-1">*</span>)}
+                  </Label>
+                  {isTextarea ? (<Textarea id={f.id} name={f.id} placeholder={f.placeholder} required={f.required} rows={4} className={cn(textarea.className)}/>) : (<Input type={(_a = f.type) !== null && _a !== void 0 ? _a : "text"} id={f.id} name={f.id} placeholder={f.placeholder} required={f.required} className={cn(input.className)}/>)}
+                </div>);
+        })}
+            <div className={cn(submitButtonWrapper.className)}>
+              <Button type="submit" unstyled={submitButtonStyle.unstyled} variant={submitButtonStyle.variant} size={submitButtonStyle.size} className={cn(submitButtonStyle.className, !enableMotion &&
+            "transition-none hover:!translate-y-0 hover:shadow-none")} style={submitButtonStyle.style}>
+                {submitButtonText}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </section>);
+}

package/dist/components/FAQ.d.ts

@@ -0,0 +1,89 @@
+import React from "react";
+/**
+ * Represents a single FAQ item.
+ * @public
+ */
+export interface FAQS {
+    /** The question text */
+    question?: string;
+    /** The answer text */
+    answer?: string;
+}
+/**
+ * Props for the FAQ section component.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides; consumer classes are
+ *   merged after defaults via cn().
+ * - Behavior: supports single or multiple open items; default open indices
+ *   are respected. Controlled internally with a Set.
+ * - Motion: when enableMotion is false, collapse/expand transitions are
+ *   removed for a hard-cut.
+ * - Accessibility: each item uses button+region with aria-controls and
+ *   aria-expanded. Section uses aria-label.
+ */
+export interface FAQProps {
+    /** Header text displayed at the top of the FAQ section. @defaultValue "Frequently Asked Questions" */
+    faqSectionHeaderText?: string;
+    /** Array of question/answer items. @defaultValue defaultFaqData */
+    faqData?: FAQS[];
+    /** Optional id for the section root. @defaultValue "faq" */
+    sectionId?: string;
+    /** Optional top-level class override */
+    className?: string;
+    /** When false, only one item can be open at a time. @defaultValue true */
+    allowMultipleOpen?: boolean;
+    /** Indices of items that should be open by default. @defaultValue [] */
+    defaultOpenIndices?: number[];
+    /** Optional icons for open/closed states */
+    openIcon?: React.ReactNode;
+    closedIcon?: React.ReactNode;
+    /** ARIA label for the FAQ section. @defaultValue "Frequently asked questions section" */
+    ariaLabel?: string;
+    /** Slot-style overrides */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    heading?: {
+        className?: string;
+    };
+    grid?: {
+        className?: string;
+    };
+    item?: {
+        className?: string;
+    };
+    questionButton?: {
+        className?: string;
+    };
+    questionText?: {
+        className?: string;
+    };
+    chevronIcon?: {
+        className?: string;
+    };
+    answer?: {
+        className?: string;
+    };
+    answerText?: {
+        className?: string;
+    };
+    /** When false, removes transition on collapse/expand for a hard-cut */
+    enableMotion?: boolean;
+}
+/**
+ * Expandable FAQ section with accessible toggles and optional icons.
+ *
+ * @remarks
+ * - Supports multiple or single open item behavior via allowMultipleOpen.
+ * - Uses button with aria-expanded and a region with aria-labelledby.
+ * - Motion can be disabled via enableMotion for reduced animation.
+ *
+ * @example
+ * <FAQ faqData={[{ question: 'What is X?', answer: 'Y' }]} />
+ */
+export declare function FAQ({ faqSectionHeaderText, faqData, sectionId, className, allowMultipleOpen, defaultOpenIndices, openIcon, closedIcon, ariaLabel, section, container, heading, grid, item, questionButton, questionText, chevronIcon, answer, answerText, enableMotion, }: FAQProps): React.JSX.Element;
+//# sourceMappingURL=FAQ.d.ts.map

package/dist/components/FAQ.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../src/components/FAQ.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD;;;GAGG;AACH,MAAM,WAAW,IAAI;IACnB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,QAAQ;IACvB,sGAAsG;IACtG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mEAAmE;IACnE,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;IACjB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,cAAc,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,WAAW,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,uEAAuE;IACvE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAkCD;;;;;;;;;;GAUG;AACH,wBAAgB,GAAG,CAAC,EAClB,oBAAmD,EACnD,OAAwB,EACxB,SAAiB,EACjB,SAAS,EACT,iBAAwB,EACxB,kBAAuB,EACvB,QAAQ,EACR,UAAU,EACV,SAAgD,EAChD,OAA8D,EAC9D,SAA8C,EAC9C,OAEC,EACD,IAAsE,EACtE,IAA4B,EAC5B,cAGC,EACD,YAAgC,EAChC,WAAgE,EAChE,MAGC,EACD,UAA6C,EAC7C,YAAmB,GACpB,EAAE,QAAQ,qBAyFV"}

package/dist/components/FAQ.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { cn } from "@nextworks/blocks-core";
+import { ChevronDown, ChevronUp } from "lucide-react";
+// const defaultFaqData: FAQS[] = [
+//   {
+//     question: "What does IntelliOpAI do?",
+//     answer: "Automates ops with real-time insights.",
+//   },
+//   {
+//     question: "Do I need coding skills?",
+//     answer: "No, it's designed for ease of use.",
+//   },
+// ];
+const defaultFaqData = [
+    {
+        question: "What does IntelliOpAI do?",
+        answer: "Automates ops with real-time insights.",
+    },
+    {
+        question: "How secure is my data?",
+        answer: "We use industry-standard encryption and strict access controls.",
+    },
+    {
+        question: "Can I integrate with other tools?",
+        answer: "Yes — supports APIs and popular integrations like Slack, GitHub, and Jira.",
+    },
+    {
+        question: "How do I get support?",
+        answer: "Contact our support team via in-app chat or the help center for assistance.",
+    },
+];
+/**
+ * Expandable FAQ section with accessible toggles and optional icons.
+ *
+ * @remarks
+ * - Supports multiple or single open item behavior via allowMultipleOpen.
+ * - Uses button with aria-expanded and a region with aria-labelledby.
+ * - Motion can be disabled via enableMotion for reduced animation.
+ *
+ * @example
+ * <FAQ faqData={[{ question: 'What is X?', answer: 'Y' }]} />
+ */
+export function FAQ({ faqSectionHeaderText = "Frequently Asked Questions", faqData = defaultFaqData, sectionId = "faq", className, allowMultipleOpen = true, defaultOpenIndices = [], openIcon, closedIcon, ariaLabel = "Frequently asked questions section", section = { className: "py-10 px-5 bg-muted text-foreground" }, container = { className: "mx-auto max-w-7xl" }, heading = {
+    className: "mb-6 text-center text-2xl font-bold text-foreground",
+}, grid = { className: "grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6" }, item = { className: "mb-4" }, questionButton = {
+    className: "shadow-md hover:shadow-lg border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)] bg-[var(--faq-btn-bg,var(--btn-bg))] text-[var(--faq-btn-fg,var(--btn-fg))] hover:bg-[var(--faq-btn-hover-bg,var(--btn-hover-bg))] hover:text-[var(--faq-btn-hover-fg,var(--btn-hover-fg))]",
+}, questionText = { className: "" }, chevronIcon = { className: "transition-transform duration-200" }, answer = {
+    className: "bg-[var(--faq-answer-bg,var(--card-bg))] text-[var(--faq-answer-fg,var(--card-fg))] border-[var(--card-border)]",
+}, answerText = { className: "leading-relaxed" }, enableMotion = true, }) {
+    const [openSet, setOpenSet] = useState(() => new Set(defaultOpenIndices));
+    const idPrefix = useMemo(() => sectionId || "faq", [sectionId]);
+    const onToggle = (idx) => {
+        setOpenSet((prev) => {
+            const next = new Set(prev);
+            if (next.has(idx))
+                next.delete(idx);
+            else {
+                if (!allowMultipleOpen)
+                    next.clear();
+                next.add(idx);
+            }
+            return next;
+        });
+    };
+    return (_jsx("section", { id: sectionId, className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(container.className), children: [faqSectionHeaderText && (_jsx("h2", { className: cn(heading.className), children: faqSectionHeaderText })), _jsx("div", { className: cn(grid.className), children: faqData.map((faq, index) => {
+                        const transitionCls = enableMotion
+                            ? "transition-all duration-300 ease-in-out"
+                            : "transition-none";
+                        const isOpen = openSet.has(index);
+                        return (_jsxs("div", { className: cn("w-full", item.className), children: [_jsxs("button", { id: `${idPrefix}-trigger-${index}`, "aria-controls": `${idPrefix}-panel-${index}`, "aria-expanded": isOpen, onClick: () => onToggle(index), className: cn("flex w-full items-center justify-between rounded-md p-4 text-left focus:outline-none", 
+                                    // preset-first ring/border
+                                    "border-[var(--btn-border)] focus-visible:ring-2 focus-visible:ring-[var(--btn-ring)] focus-visible:ring-offset-2", questionButton.className), children: [_jsx("span", { className: cn("flex-1 font-medium select-none", questionText.className), children: faq.question }), _jsx("span", { className: cn("ml-3 flex-shrink-0", chevronIcon.className), children: isOpen
+                                                ? (openIcon !== null && openIcon !== void 0 ? openIcon : _jsx(ChevronUp, { className: "h-5 w-5" }))
+                                                : (closedIcon !== null && closedIcon !== void 0 ? closedIcon : _jsx(ChevronDown, { className: "h-5 w-5" })) })] }), _jsx("div", { id: `${idPrefix}-panel-${index}`, role: "region", "aria-labelledby": `${idPrefix}-trigger-${index}`, className: cn("border-border overflow-hidden rounded-md border", isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0", transitionCls, answer.className), children: _jsx("div", { className: cn("p-4", answerText.className), children: faq.answer }) })] }, `${idPrefix}-item-${index}`));
+                    }) })] }) }));
+}