@conversokit/widgets 0.1.0

package/dist/KPIGrid.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { z } from 'zod';
+import { defaultWidgetConfig, kpiSchema } from '@conversokit/shared';
+function trendIcon(trend) {
+    if (trend === 'up')
+        return '▲';
+    if (trend === 'down')
+        return '▼';
+    return '●';
+}
+function trendColor(trend) {
+    if (trend === 'up')
+        return 'var(--ck-success)';
+    if (trend === 'down')
+        return 'var(--ck-danger)';
+    return 'var(--ck-muted)';
+}
+export const KPIGrid = ({ kpis }) => {
+    return (_jsx("div", { "data-testid": "kpi-grid", style: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+            gap: 'var(--ck-spacing-2)',
+            fontFamily: 'var(--ck-font-family)'
+        }, children: kpis.map((kpi) => (_jsxs("div", { style: {
+                border: '1px solid var(--ck-border)',
+                borderRadius: 'var(--ck-radius-md)',
+                backgroundColor: 'var(--ck-surface)',
+                color: 'var(--ck-text)',
+                padding: 'var(--ck-spacing-3)',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 4
+            }, children: [_jsx("span", { style: {
+                        fontSize: 'var(--ck-font-size-sm)',
+                        color: 'var(--ck-muted)',
+                        textTransform: 'uppercase',
+                        letterSpacing: 0.5
+                    }, children: kpi.label }), _jsx("strong", { style: { fontSize: 'var(--ck-font-size-xl)' }, children: kpi.value }), (kpi.delta !== undefined || kpi.trend) && (_jsxs("span", { style: {
+                        fontSize: 'var(--ck-font-size-sm)',
+                        color: trendColor(kpi.trend),
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 4
+                    }, children: [_jsx("span", { "aria-hidden": true, children: trendIcon(kpi.trend) }), kpi.delta !== undefined ? `${kpi.delta > 0 ? '+' : ''}${kpi.delta.toFixed(1)}%` : ''] }))] }, kpi.id))) }));
+};
+export const kpiGridSchema = z.object({ kpis: z.array(kpiSchema) });
+export const KPIGridMeta = {
+    name: 'KPIGrid',
+    category: 'dashboard',
+    version: '0.1.0',
+    config: { ...defaultWidgetConfig, permissions: {} },
+    schema: kpiGridSchema
+};

package/dist/LeadCaptureForm.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type FormStep, type WidgetMeta } from '@conversokit/shared';
+export type LeadFormValues = Record<string, string | number | boolean>;
+export interface LeadCaptureFormProps {
+    step: FormStep;
+    defaultValues?: LeadFormValues;
+    submitLabel?: string;
+    onSubmit: (values: LeadFormValues) => void | Promise<void>;
+    cancelLabel?: string;
+    onCancel?: () => void;
+}
+export declare const LeadCaptureForm: React.FC<LeadCaptureFormProps>;
+export declare const LeadCaptureFormMeta: WidgetMeta;
+//# sourceMappingURL=LeadCaptureForm.d.ts.map

package/dist/LeadCaptureForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeadCaptureForm.d.ts","sourceRoot":"","sources":["../src/LeadCaptureForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,KAAK,QAAQ,EAEb,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAEvE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,QAAQ,CAAC;IACf,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAoGD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsD1D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,UASjC,CAAC"}

package/dist/LeadCaptureForm.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from 'react-hook-form';
+import { formStepSchema, defaultWidgetConfig } from '@conversokit/shared';
+const containerStyle = {
+    border: '1px solid var(--ck-border)',
+    borderRadius: 'var(--ck-radius-md)',
+    padding: 'var(--ck-spacing-4)',
+    backgroundColor: 'var(--ck-surface)',
+    color: 'var(--ck-text)',
+    fontFamily: 'var(--ck-font-family)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--ck-spacing-2)',
+    maxWidth: 480
+};
+const labelStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--ck-spacing-1)',
+    fontSize: 'var(--ck-font-size-sm)'
+};
+const inputStyle = {
+    padding: '8px 10px',
+    borderRadius: 'var(--ck-radius-sm)',
+    border: '1px solid var(--ck-border)',
+    backgroundColor: 'var(--ck-background)',
+    color: 'var(--ck-text)',
+    fontFamily: 'var(--ck-font-family)',
+    fontSize: 'var(--ck-font-size-base)'
+};
+const errorStyle = {
+    color: 'var(--ck-danger)',
+    fontSize: 'var(--ck-font-size-sm)'
+};
+const buttonRow = {
+    display: 'flex',
+    gap: 'var(--ck-spacing-2)',
+    marginTop: 'var(--ck-spacing-2)'
+};
+const primaryBtn = {
+    padding: '10px 14px',
+    borderRadius: 'var(--ck-radius-sm)',
+    border: 'none',
+    backgroundColor: 'var(--ck-primary)',
+    color: 'var(--ck-primary-foreground)',
+    cursor: 'pointer',
+    fontWeight: 'var(--ck-font-weight-bold)'
+};
+const secondaryBtn = {
+    padding: '10px 14px',
+    borderRadius: 'var(--ck-radius-sm)',
+    border: '1px solid var(--ck-border)',
+    backgroundColor: 'transparent',
+    color: 'var(--ck-text)',
+    cursor: 'pointer'
+};
+function renderField(field, register) {
+    const id = `field-${field.name}`;
+    const baseProps = register(field.name, { required: field.required });
+    if (field.type === 'textarea') {
+        return (_jsx("textarea", { id: id, rows: 4, placeholder: field.placeholder, style: inputStyle, ...baseProps }));
+    }
+    if (field.type === 'select') {
+        return (_jsxs("select", { id: id, style: inputStyle, ...baseProps, children: [_jsx("option", { value: "", children: "Select\u2026" }), field.options?.map((opt) => (_jsx("option", { value: opt, children: opt }, opt)))] }));
+    }
+    return (_jsx("input", { id: id, type: field.type, placeholder: field.placeholder, style: inputStyle, ...baseProps }));
+}
+export const LeadCaptureForm = ({ step, defaultValues, submitLabel = 'Continue', onSubmit, cancelLabel, onCancel }) => {
+    const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm({ defaultValues });
+    const submit = async (values) => {
+        await onSubmit(values);
+    };
+    return (_jsxs("form", { style: containerStyle, onSubmit: handleSubmit(submit), "data-testid": "lead-capture-form", children: [_jsx("h3", { style: { margin: 0 }, children: step.title }), step.description && (_jsx("p", { style: { margin: 0, color: 'var(--ck-muted)' }, children: step.description })), step.fields.map((field) => (_jsxs("label", { htmlFor: `field-${field.name}`, style: labelStyle, children: [_jsxs("span", { children: [field.label, field.required && (_jsx("span", { style: { color: 'var(--ck-danger)' }, children: " *" }))] }), renderField(field, register), errors[field.name] && (_jsx("span", { style: errorStyle, children: "This field is required" }))] }, field.name))), _jsxs("div", { style: buttonRow, children: [onCancel && (_jsx("button", { type: "button", style: secondaryBtn, onClick: onCancel, children: cancelLabel ?? 'Back' })), _jsx("button", { type: "submit", style: primaryBtn, disabled: isSubmitting, children: submitLabel })] })] }));
+};
+export const LeadCaptureFormMeta = {
+    name: 'LeadCaptureForm',
+    category: 'leadgen',
+    version: '0.1.0',
+    config: {
+        ...defaultWidgetConfig,
+        permissions: { collectPersonalData: true, requiresConsent: true }
+    },
+    schema: formStepSchema
+};

package/dist/MultiStepForm.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type LeadForm, type WidgetMeta } from '@conversokit/shared';
+import { type LeadFormValues } from './LeadCaptureForm.js';
+export interface MultiStepFormProps {
+    form: LeadForm;
+    initialValues?: LeadFormValues;
+    onComplete: (values: LeadFormValues) => void | Promise<void>;
+}
+export declare const MultiStepForm: React.FC<MultiStepFormProps>;
+export declare const MultiStepFormMeta: WidgetMeta;
+//# sourceMappingURL=MultiStepForm.d.ts.map

package/dist/MultiStepForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../src/MultiStepForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE5E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,UAAU,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D;AAiCD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4CtD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,UAS/B,CAAC"}

package/dist/MultiStepForm.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { leadFormSchema, defaultWidgetConfig } from '@conversokit/shared';
+import { LeadCaptureForm } from './LeadCaptureForm.js';
+const containerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--ck-spacing-2)',
+    fontFamily: 'var(--ck-font-family)',
+    color: 'var(--ck-text)',
+    maxWidth: 520
+};
+const stepperRow = {
+    display: 'flex',
+    gap: 'var(--ck-spacing-2)',
+    fontSize: 'var(--ck-font-size-sm)',
+    color: 'var(--ck-muted)'
+};
+function dotStyle(active, done) {
+    return {
+        width: 10,
+        height: 10,
+        borderRadius: '50%',
+        backgroundColor: done
+            ? 'var(--ck-success)'
+            : active
+                ? 'var(--ck-primary)'
+                : 'var(--ck-border)',
+        display: 'inline-block',
+        marginRight: 6
+    };
+}
+export const MultiStepForm = ({ form, initialValues, onComplete }) => {
+    const [stepIndex, setStepIndex] = useState(0);
+    const [values, setValues] = useState(initialValues ?? {});
+    const step = form.steps[stepIndex];
+    const isLast = stepIndex === form.steps.length - 1;
+    const handleSubmit = async (stepValues) => {
+        const merged = { ...values, ...stepValues };
+        setValues(merged);
+        if (isLast) {
+            await onComplete(merged);
+        }
+        else {
+            setStepIndex((i) => i + 1);
+        }
+    };
+    const handleBack = () => setStepIndex((i) => Math.max(0, i - 1));
+    return (_jsxs("div", { style: containerStyle, "data-testid": "multi-step-form", children: [_jsx("h3", { style: { margin: 0 }, children: form.title }), _jsx("div", { style: stepperRow, children: form.steps.map((s, i) => (_jsxs("span", { children: [_jsx("span", { style: dotStyle(i === stepIndex, i < stepIndex) }), s.title] }, s.id))) }), _jsx(LeadCaptureForm, { step: step, defaultValues: values, submitLabel: isLast ? 'Submit' : 'Next', cancelLabel: "Back", onSubmit: handleSubmit, onCancel: stepIndex > 0 ? handleBack : undefined }, step.id)] }));
+};
+export const MultiStepFormMeta = {
+    name: 'MultiStepForm',
+    category: 'leadgen',
+    version: '0.1.0',
+    config: {
+        ...defaultWidgetConfig,
+        permissions: { collectPersonalData: true, requiresConsent: true }
+    },
+    schema: leadFormSchema
+};

package/dist/ProductCard.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type WidgetConfig, type WidgetMeta } from '@conversokit/shared';
+export interface ProductCardProps {
+    id: string;
+    title: string;
+    subtitle?: string;
+    imageUrl?: string;
+    price?: string;
+    badge?: string;
+    rating?: number;
+    ctaLabel?: string;
+    onAction?: () => void;
+    config?: WidgetConfig;
+}
+export declare const ProductCard: React.FC<ProductCardProps>;
+export declare const ProductCardMeta: WidgetMeta;
+//# sourceMappingURL=ProductCard.d.ts.map

package/dist/ProductCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../src/ProductCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAiED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyBlD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,UAS7B,CAAC"}

package/dist/ProductCard.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { productSchema, defaultWidgetConfig } from '@conversokit/shared';
+const cardStyle = {
+    border: '1px solid var(--ck-border)',
+    borderRadius: 'var(--ck-radius-md)',
+    padding: 'var(--ck-spacing-4)',
+    width: 220,
+    boxSizing: 'border-box',
+    backgroundColor: 'var(--ck-surface)',
+    color: 'var(--ck-text)',
+    fontFamily: 'var(--ck-font-family)'
+};
+const imgStyle = {
+    width: '100%',
+    borderRadius: 'var(--ck-radius-sm)',
+    marginBottom: 'var(--ck-spacing-2)',
+    display: 'block'
+};
+const titleStyle = {
+    margin: 0,
+    fontSize: 'var(--ck-font-size-base)',
+    fontWeight: 'var(--ck-font-weight-bold)'
+};
+const subtitleStyle = {
+    margin: 0,
+    fontSize: 'var(--ck-font-size-sm)',
+    color: 'var(--ck-muted)'
+};
+const badgeStyle = {
+    fontSize: 'var(--ck-font-size-sm)',
+    backgroundColor: 'var(--ck-background)',
+    border: '1px solid var(--ck-border)',
+    color: 'var(--ck-muted)',
+    borderRadius: 'var(--ck-radius-sm)',
+    padding: '2px 6px',
+    marginTop: 'var(--ck-spacing-1)',
+    display: 'inline-block'
+};
+const priceStyle = {
+    margin: 'var(--ck-spacing-2) 0 0 0',
+    fontWeight: 'var(--ck-font-weight-bold)'
+};
+const ratingStyle = {
+    margin: 'var(--ck-spacing-1) 0 0 0',
+    fontSize: 'var(--ck-font-size-sm)',
+    color: 'var(--ck-muted)'
+};
+const buttonStyle = {
+    marginTop: 'var(--ck-spacing-2)',
+    padding: '6px 12px',
+    borderRadius: 'var(--ck-radius-sm)',
+    border: 'none',
+    backgroundColor: 'var(--ck-primary)',
+    color: 'var(--ck-primary-foreground)',
+    cursor: 'pointer',
+    fontSize: 'var(--ck-font-size-sm)'
+};
+export const ProductCard = ({ title, subtitle, imageUrl, price, badge, rating, ctaLabel = 'View', onAction }) => {
+    return (_jsxs("div", { style: cardStyle, children: [imageUrl && _jsx("img", { src: imageUrl, alt: title, style: imgStyle }), _jsx("h3", { style: titleStyle, children: title }), subtitle && _jsx("p", { style: subtitleStyle, children: subtitle }), badge && _jsx("span", { style: badgeStyle, children: badge }), price && _jsx("p", { style: priceStyle, children: price }), rating !== undefined && _jsxs("p", { style: ratingStyle, children: ["\u2B50 ", rating.toFixed(1)] }), onAction && (_jsx("button", { onClick: onAction, style: buttonStyle, children: ctaLabel }))] }));
+};
+export const ProductCardMeta = {
+    name: 'ProductCard',
+    category: 'commerce',
+    version: '0.1.0',
+    config: {
+        ...defaultWidgetConfig,
+        permissions: { allowsExternalLinks: true }
+    },
+    schema: productSchema
+};

package/dist/ProductCarousel.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { z } from 'zod';
+import { type WidgetMeta } from '@conversokit/shared';
+import { type ProductCardProps } from './ProductCard.js';
+export interface ProductCarouselProps {
+    items: ProductCardProps[];
+    onItemAction?: (item: ProductCardProps) => void;
+}
+export declare const ProductCarousel: React.FC<ProductCarouselProps>;
+export declare const productCarouselSchema: z.ZodObject<{
+    items: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        title: z.ZodString;
+        subtitle: z.ZodOptional<z.ZodString>;
+        imageUrl: z.ZodOptional<z.ZodString>;
+        price: z.ZodOptional<z.ZodString>;
+        badge: z.ZodOptional<z.ZodString>;
+        rating: z.ZodOptional<z.ZodNumber>;
+    }, "strip", z.ZodTypeAny, {
+        id: string;
+        title: string;
+        subtitle?: string | undefined;
+        imageUrl?: string | undefined;
+        price?: string | undefined;
+        badge?: string | undefined;
+        rating?: number | undefined;
+    }, {
+        id: string;
+        title: string;
+        subtitle?: string | undefined;
+        imageUrl?: string | undefined;
+        price?: string | undefined;
+        badge?: string | undefined;
+        rating?: number | undefined;
+    }>, "many">;
+}, "strip", z.ZodTypeAny, {
+    items: {
+        id: string;
+        title: string;
+        subtitle?: string | undefined;
+        imageUrl?: string | undefined;
+        price?: string | undefined;
+        badge?: string | undefined;
+        rating?: number | undefined;
+    }[];
+}, {
+    items: {
+        id: string;
+        title: string;
+        subtitle?: string | undefined;
+        imageUrl?: string | undefined;
+        price?: string | undefined;
+        badge?: string | undefined;
+        rating?: number | undefined;
+    }[];
+}>;
+export declare const ProductCarouselMeta: WidgetMeta;
+//# sourceMappingURL=ProductCarousel.d.ts.map

package/dist/ProductCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCarousel.d.ts","sourceRoot":"","sources":["../src/ProductCarousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACjD;AAeD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgB1D,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEhC,CAAC;AAEH,eAAO,MAAM,mBAAmB,EAAE,UASjC,CAAC"}

package/dist/ProductCarousel.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { z } from 'zod';
+import { productSchema, defaultWidgetConfig } from '@conversokit/shared';
+import { ProductCard } from './ProductCard.js';
+const wrapperStyle = {
+    display: 'flex',
+    overflowX: 'auto',
+    gap: 'var(--ck-spacing-4)',
+    padding: 'var(--ck-spacing-2)',
+    scrollSnapType: 'x mandatory'
+};
+const itemStyle = {
+    flex: '0 0 auto',
+    scrollSnapAlign: 'start'
+};
+export const ProductCarousel = ({ items, onItemAction }) => {
+    return (_jsx("div", { style: wrapperStyle, children: items.map((item) => (_jsx("div", { style: itemStyle, children: _jsx(ProductCard, { ...item, onAction: onItemAction ? () => onItemAction(item) : item.onAction }) }, item.id))) }));
+};
+export const productCarouselSchema = z.object({
+    items: z.array(productSchema)
+});
+export const ProductCarouselMeta = {
+    name: 'ProductCarousel',
+    category: 'commerce',
+    version: '0.1.0',
+    config: {
+        ...defaultWidgetConfig,
+        permissions: { allowsExternalLinks: true }
+    },
+    schema: productCarouselSchema
+};

package/dist/TimeSlotSelector.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type TimeSlot, type WidgetMeta } from '@conversokit/shared';
+export interface TimeSlotSelectorProps {
+    slots: TimeSlot[];
+    selectedSlotId?: string;
+    onSelect?: (slot: TimeSlot) => void;
+}
+export declare const TimeSlotSelector: React.FC<TimeSlotSelectorProps>;
+export declare const TimeSlotSelectorMeta: WidgetMeta;
+//# sourceMappingURL=TimeSlotSelector.d.ts.map

package/dist/TimeSlotSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSlotSelector.d.ts","sourceRoot":"","sources":["../src/TimeSlotSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC;AA6BD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwC5D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,UASlC,CAAC"}

package/dist/TimeSlotSelector.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
+import { availabilitySchema, defaultWidgetConfig } from '@conversokit/shared';
+const containerStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+    gap: 'var(--ck-spacing-2)',
+    padding: 'var(--ck-spacing-2)',
+    fontFamily: 'var(--ck-font-family)'
+};
+function slotStyle(opts) {
+    return {
+        padding: '10px 12px',
+        borderRadius: 'var(--ck-radius-sm)',
+        border: '1px solid var(--ck-border)',
+        backgroundColor: opts.isSelected
+            ? 'var(--ck-primary)'
+            : 'var(--ck-surface)',
+        color: opts.isSelected ? 'var(--ck-primary-foreground)' : 'var(--ck-text)',
+        cursor: opts.isAvailable ? 'pointer' : 'not-allowed',
+        opacity: opts.isAvailable ? 1 : 0.5,
+        fontSize: 'var(--ck-font-size-sm)',
+        textAlign: 'left'
+    };
+}
+export const TimeSlotSelector = ({ slots, selectedSlotId, onSelect }) => {
+    if (slots.length === 0) {
+        return (_jsx("p", { style: { color: 'var(--ck-muted)', padding: 'var(--ck-spacing-2)' }, children: "No times available." }));
+    }
+    return (_jsx("div", { style: containerStyle, "data-testid": "time-slot-selector", children: slots.map((slot) => {
+            const isSelected = selectedSlotId === slot.id;
+            const start = format(new Date(slot.startsAt), 'HH:mm');
+            const end = format(new Date(slot.endsAt), 'HH:mm');
+            return (_jsxs("button", { type: "button", disabled: !slot.available, onClick: () => slot.available && onSelect?.(slot), style: slotStyle({ isSelected, isAvailable: slot.available }), "aria-pressed": isSelected, children: [_jsx("div", { style: { fontWeight: 'var(--ck-font-weight-bold)' }, children: start }), _jsxs("div", { style: { fontSize: 'var(--ck-font-size-sm)', opacity: 0.85 }, children: ["until ", end, slot.price ? ` · ${slot.price}` : ''] })] }, slot.id));
+        }) }));
+};
+export const TimeSlotSelectorMeta = {
+    name: 'TimeSlotSelector',
+    category: 'booking',
+    version: '0.1.0',
+    config: {
+        ...defaultWidgetConfig,
+        permissions: { collectPersonalData: false }
+    },
+    schema: availabilitySchema
+};

package/dist/TrendChart.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type TrendSeries, type WidgetMeta } from '@conversokit/shared';
+export interface TrendChartProps {
+    series: TrendSeries;
+    width?: number;
+    height?: number;
+}
+export declare const TrendChart: React.FC<TrendChartProps>;
+export declare const TrendChartMeta: WidgetMeta;
+//# sourceMappingURL=TrendChart.d.ts.map

package/dist/TrendChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendChart.d.ts","sourceRoot":"","sources":["../src/TrendChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0FhD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,UAM5B,CAAC"}

package/dist/TrendChart.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultWidgetConfig, trendSeriesSchema } from '@conversokit/shared';
+export const TrendChart = ({ series, width = 480, height = 160 }) => {
+    if (series.points.length < 2) {
+        return (_jsx("p", { style: { color: 'var(--ck-muted)', padding: 'var(--ck-spacing-2)' }, children: "Not enough data to render a trend." }));
+    }
+    const padding = 16;
+    const innerW = width - padding * 2;
+    const innerH = height - padding * 2;
+    const values = series.points.map((p) => p.v);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min || 1;
+    const stepX = innerW / (series.points.length - 1);
+    const path = series.points
+        .map((p, i) => {
+        const x = padding + i * stepX;
+        const y = padding + innerH - ((p.v - min) / range) * innerH;
+        return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
+    })
+        .join(' ');
+    const last = series.points[series.points.length - 1];
+    const lastX = padding + (series.points.length - 1) * stepX;
+    const lastY = padding + innerH - ((last.v - min) / range) * innerH;
+    return (_jsxs("div", { "data-testid": "trend-chart", style: {
+            border: '1px solid var(--ck-border)',
+            borderRadius: 'var(--ck-radius-md)',
+            backgroundColor: 'var(--ck-surface)',
+            color: 'var(--ck-text)',
+            fontFamily: 'var(--ck-font-family)',
+            padding: 'var(--ck-spacing-3)',
+            maxWidth: width
+        }, children: [_jsx("div", { style: {
+                    fontSize: 'var(--ck-font-size-sm)',
+                    color: 'var(--ck-muted)',
+                    marginBottom: 'var(--ck-spacing-1)'
+                }, children: series.label }), _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, width: "100%", height: height, role: "img", "aria-label": `${series.label} trend, latest ${last.v}`, children: [_jsx("path", { d: path, fill: "none", stroke: "var(--ck-primary)", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("circle", { cx: lastX, cy: lastY, r: 4, fill: "var(--ck-primary)", stroke: "var(--ck-surface)", strokeWidth: 2 })] }), _jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    fontSize: 'var(--ck-font-size-sm)',
+                    color: 'var(--ck-muted)'
+                }, children: [_jsx("span", { children: series.points[0].t }), _jsx("span", { children: last.t })] })] }));
+};
+export const TrendChartMeta = {
+    name: 'TrendChart',
+    category: 'dashboard',
+    version: '0.1.0',
+    config: { ...defaultWidgetConfig, permissions: {} },
+    schema: trendSeriesSchema
+};

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+export { ProductCard, ProductCardMeta } from './ProductCard.js';
+export type { ProductCardProps } from './ProductCard.js';
+export { ProductCarousel, ProductCarouselMeta, productCarouselSchema } from './ProductCarousel.js';
+export type { ProductCarouselProps } from './ProductCarousel.js';
+export { ConsentBanner, ConsentBannerMeta, consentBannerSchema } from './ConsentBanner.js';
+export type { ConsentBannerProps } from './ConsentBanner.js';
+export { CheckoutSummary, CheckoutSummaryMeta } from './CheckoutSummary.js';
+export type { CheckoutSummaryProps } from './CheckoutSummary.js';
+export { AddToCartPanel, AddToCartPanelMeta } from './AddToCartPanel.js';
+export type { AddToCartPanelProps } from './AddToCartPanel.js';
+export { AvailabilityCalendar, AvailabilityCalendarMeta, availabilityCalendarSchema } from './AvailabilityCalendar.js';
+export type { AvailabilityCalendarProps } from './AvailabilityCalendar.js';
+export { TimeSlotSelector, TimeSlotSelectorMeta } from './TimeSlotSelector.js';
+export type { TimeSlotSelectorProps } from './TimeSlotSelector.js';
+export { BookingCard, BookingCardMeta } from './BookingCard.js';
+export type { BookingCardProps } from './BookingCard.js';
+export { LeadCaptureForm, LeadCaptureFormMeta } from './LeadCaptureForm.js';
+export type { LeadCaptureFormProps, LeadFormValues } from './LeadCaptureForm.js';
+export { MultiStepForm, MultiStepFormMeta } from './MultiStepForm.js';
+export type { MultiStepFormProps } from './MultiStepForm.js';
+export { CTABanner, CTABannerMeta, ctaBannerSchema } from './CTABanner.js';
+export type { CTABannerProps, CTABannerVariant } from './CTABanner.js';
+export { HotelCard, HotelCardMeta } from './HotelCard.js';
+export type { HotelCardProps } from './HotelCard.js';
+export { FlightSummary, FlightSummaryMeta } from './FlightSummary.js';
+export type { FlightSummaryProps } from './FlightSummary.js';
+export { ItineraryTimeline, ItineraryTimelineMeta } from './ItineraryTimeline.js';
+export type { ItineraryTimelineProps } from './ItineraryTimeline.js';
+export { DestinationRecommendations, DestinationRecommendationsMeta, destinationRecommendationsSchema } from './DestinationRecommendations.js';
+export type { DestinationRecommendationsProps } from './DestinationRecommendations.js';
+export { KPIGrid, KPIGridMeta, kpiGridSchema } from './KPIGrid.js';
+export type { KPIGridProps } from './KPIGrid.js';
+export { TrendChart, TrendChartMeta } from './TrendChart.js';
+export type { TrendChartProps } from './TrendChart.js';
+export { AnalyticsPanel, AnalyticsPanelMeta } from './AnalyticsPanel.js';
+export type { AnalyticsPanelProps } from './AnalyticsPanel.js';
+export { AlertFeed, AlertFeedMeta } from './AlertFeed.js';
+export type { AlertFeedProps } from './AlertFeed.js';
+export { widgetRegistry, registerWidget, getWidget, listWidgets } from './registry.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,20 @@
+export { ProductCard, ProductCardMeta } from './ProductCard.js';
+export { ProductCarousel, ProductCarouselMeta, productCarouselSchema } from './ProductCarousel.js';
+export { ConsentBanner, ConsentBannerMeta, consentBannerSchema } from './ConsentBanner.js';
+export { CheckoutSummary, CheckoutSummaryMeta } from './CheckoutSummary.js';
+export { AddToCartPanel, AddToCartPanelMeta } from './AddToCartPanel.js';
+export { AvailabilityCalendar, AvailabilityCalendarMeta, availabilityCalendarSchema } from './AvailabilityCalendar.js';
+export { TimeSlotSelector, TimeSlotSelectorMeta } from './TimeSlotSelector.js';
+export { BookingCard, BookingCardMeta } from './BookingCard.js';
+export { LeadCaptureForm, LeadCaptureFormMeta } from './LeadCaptureForm.js';
+export { MultiStepForm, MultiStepFormMeta } from './MultiStepForm.js';
+export { CTABanner, CTABannerMeta, ctaBannerSchema } from './CTABanner.js';
+export { HotelCard, HotelCardMeta } from './HotelCard.js';
+export { FlightSummary, FlightSummaryMeta } from './FlightSummary.js';
+export { ItineraryTimeline, ItineraryTimelineMeta } from './ItineraryTimeline.js';
+export { DestinationRecommendations, DestinationRecommendationsMeta, destinationRecommendationsSchema } from './DestinationRecommendations.js';
+export { KPIGrid, KPIGridMeta, kpiGridSchema } from './KPIGrid.js';
+export { TrendChart, TrendChartMeta } from './TrendChart.js';
+export { AnalyticsPanel, AnalyticsPanelMeta } from './AnalyticsPanel.js';
+export { AlertFeed, AlertFeedMeta } from './AlertFeed.js';
+export { widgetRegistry, registerWidget, getWidget, listWidgets } from './registry.js';

package/dist/registry.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetMeta } from '@conversokit/shared';
+export declare const widgetRegistry: Record<string, WidgetMeta>;
+export declare function registerWidget(meta: WidgetMeta): void;
+export declare function getWidget(name: string): WidgetMeta | undefined;
+export declare function listWidgets(): WidgetMeta[];
+//# sourceMappingURL=registry.d.ts.map

package/dist/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AA2CtD,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAErD,CAAC;AAEF,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAErD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAE9D;AAED,wBAAgB,WAAW,IAAI,UAAU,EAAE,CAE1C"}