@syntrologie/adapt-faq 2.11.0 → 2.12.0

package/dist/faq-styles.js

@@ -0,0 +1,204 @@
+/**
+ * Adaptive FAQ - Styles
+ *
+ * BaseStyles object (font, layout, colors, animations) and theme integration
+ * for the FAQWidget component.
+ */
+import { purple, slateGrey } from '@syntro/design-system/tokens';
+// ============================================================================
+// Base Styles
+// ============================================================================
+export const baseStyles = {
+    container: {
+        fontFamily: 'var(--sc-font-family, system-ui, -apple-system, sans-serif)',
+        maxWidth: '800px',
+        margin: '0 auto',
+    },
+    searchWrapper: {
+        marginBottom: '8px',
+    },
+    searchInput: {
+        width: '100%',
+        padding: '12px 16px',
+        borderRadius: '8px',
+        fontSize: '14px',
+        outline: 'none',
+        transition: 'border-color 0.15s ease',
+        backgroundColor: 'var(--sc-content-search-background)',
+        color: 'var(--sc-content-search-color)',
+    },
+    accordion: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--sc-content-item-gap, 6px)',
+    },
+    item: {
+        borderRadius: 'var(--sc-content-border-radius, 8px)',
+        overflow: 'hidden',
+        transition: 'box-shadow 0.15s ease',
+    },
+    question: {
+        width: '100%',
+        padding: 'var(--sc-content-item-padding, 12px 16px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: 'var(--sc-content-item-font-size, 15px)',
+        fontWeight: 500,
+        textAlign: 'left',
+        transition: 'background-color 0.15s ease',
+    },
+    chevron: {
+        fontSize: '20px',
+        transition: 'transform 0.2s ease',
+        color: 'var(--sc-content-chevron-color, currentColor)',
+    },
+    answer: {
+        padding: 'var(--sc-content-body-padding, 0 16px 12px 16px)',
+        fontSize: 'var(--sc-content-body-font-size, 14px)',
+        lineHeight: 1.6,
+        overflow: 'hidden',
+        transition: 'max-height 0.2s ease, padding 0.2s ease',
+    },
+    category: {
+        display: 'inline-block',
+        fontSize: '11px',
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        marginBottom: '8px',
+    },
+    categoryHeader: {
+        fontSize: 'var(--sc-content-category-font-size, 12px)',
+        fontWeight: 700,
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        padding: 'var(--sc-content-category-padding, 8px 4px 4px 4px)',
+        marginTop: 'var(--sc-content-category-gap, 4px)',
+    },
+    feedback: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        marginTop: '12px',
+        paddingTop: '10px',
+        borderTop: '1px solid rgba(0, 0, 0, 0.08)',
+        fontSize: '13px',
+    },
+    feedbackButton: {
+        background: 'none',
+        border: '1px solid transparent',
+        cursor: 'pointer',
+        fontSize: '16px',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        transition: 'background-color 0.15s ease, border-color 0.15s ease',
+    },
+    feedbackButtonSelected: {
+        borderColor: 'rgba(0, 0, 0, 0.2)',
+        backgroundColor: 'rgba(0, 0, 0, 0.04)',
+    },
+    emptyState: {
+        textAlign: 'center',
+        padding: '48px 24px',
+        fontSize: '14px',
+    },
+    noResults: {
+        textAlign: 'center',
+        padding: '32px 16px',
+        fontSize: '14px',
+    },
+};
+// ============================================================================
+// Theme Styles
+// ============================================================================
+export const themeStyles = {
+    light: {
+        container: {
+            backgroundColor: 'transparent',
+            color: 'inherit',
+        },
+        searchInput: {
+            border: `1px solid ${slateGrey[11]}`,
+        },
+        item: {
+            backgroundColor: 'var(--sc-content-background)',
+            borderTop: 'var(--sc-content-border)',
+            borderRight: 'var(--sc-content-border)',
+            borderBottom: 'var(--sc-content-border)',
+            borderLeft: 'var(--sc-content-border)',
+        },
+        itemExpanded: {
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+        },
+        question: {
+            backgroundColor: 'transparent',
+            color: 'var(--sc-content-text-color)',
+        },
+        questionHover: {
+            backgroundColor: 'var(--sc-content-background-hover)',
+        },
+        answer: {
+            color: 'var(--sc-content-text-secondary-color)',
+        },
+        category: {
+            backgroundColor: purple[8],
+            color: purple[2],
+        },
+        categoryHeader: {
+            color: slateGrey[7],
+        },
+        emptyState: {
+            color: slateGrey[8],
+        },
+        feedbackPrompt: {
+            color: slateGrey[7],
+        },
+    },
+    dark: {
+        container: {
+            backgroundColor: 'transparent',
+            color: 'inherit',
+        },
+        searchInput: {
+            border: `1px solid ${slateGrey[5]}`,
+        },
+        item: {
+            backgroundColor: 'var(--sc-content-background)',
+            borderTop: 'var(--sc-content-border)',
+            borderRight: 'var(--sc-content-border)',
+            borderBottom: 'var(--sc-content-border)',
+            borderLeft: 'var(--sc-content-border)',
+        },
+        itemExpanded: {
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+        },
+        question: {
+            backgroundColor: 'transparent',
+            color: 'var(--sc-content-text-color)',
+        },
+        questionHover: {
+            backgroundColor: 'var(--sc-content-background-hover)',
+        },
+        answer: {
+            color: 'var(--sc-content-text-secondary-color)',
+        },
+        category: {
+            backgroundColor: purple[0],
+            color: purple[6],
+        },
+        categoryHeader: {
+            color: slateGrey[8],
+        },
+        emptyState: {
+            color: slateGrey[7],
+        },
+        feedbackPrompt: {
+            color: slateGrey[8],
+        },
+    },
+};

package/dist/faq-types.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Adaptive FAQ - Widget Runtime & Props Types
+ *
+ * Runtime interface, component props, and helper type definitions
+ * used by the FAQWidget component.
+ */
+import type { DecisionStrategy, FAQConfig } from './types';
+export interface FAQWidgetRuntime {
+    evaluateSync: <T>(strategy: DecisionStrategy<T>) => {
+        value: T;
+        isFallback: boolean;
+    };
+    context: {
+        subscribe: (callback: () => void) => () => void;
+    };
+    events: {
+        publish: (name: string, props?: Record<string, unknown>) => void;
+        subscribe?: (filterOrCallback: {
+            names?: string[];
+            patterns?: string[];
+            sources?: string[];
+        } | ((event: {
+            name: string;
+            props?: Record<string, unknown>;
+            ts: number;
+        }) => void), maybeCallback?: (event: {
+            name: string;
+            props?: Record<string, unknown>;
+            ts: number;
+        }) => void) => () => void;
+        getRecent?: (filter?: {
+            names?: string[];
+            patterns?: string[];
+        }, limit?: number) => Array<{
+            name: string;
+            props?: Record<string, unknown>;
+            ts: number;
+        }>;
+    };
+    state?: {
+        get: (key: string) => unknown;
+        set: (key: string, value: unknown) => void;
+    };
+    /** Event accumulator for reactive triggerWhen re-evaluation */
+    accumulator?: {
+        subscribe: (callback: () => void) => () => void;
+        register: (key: string, predicate: (event: any) => boolean) => void;
+    };
+}
+export interface FAQWidgetProps {
+    config: FAQConfig;
+    runtime: FAQWidgetRuntime;
+    instanceId: string;
+}
+//# sourceMappingURL=faq-types.d.ts.map

package/dist/faq-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"faq-types.d.ts","sourceRoot":"","sources":["../src/faq-types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAM3D,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC;IACtF,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;KAAE,CAAC;IAC7D,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QACjE,SAAS,CAAC,EAAE,CACV,gBAAgB,EACZ;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,GAC7D,CAAC,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC,EACpF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,KAC3F,MAAM,IAAI,CAAC;QAChB,SAAS,CAAC,EAAE,CACV,MAAM,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,EAClD,KAAK,CAAC,EAAE,MAAM,KACX,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAC3E,CAAC;IACF,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;QAAC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,CAAC;IACtF,+DAA+D;IAC/D,WAAW,CAAC,EAAE;QACZ,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;QAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,KAAK,IAAI,CAAC;KACrE,CAAC;CACH;AAMD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;CACpB"}

package/dist/faq-types.js

@@ -0,0 +1,7 @@
+/**
+ * Adaptive FAQ - Widget Runtime & Props Types
+ *
+ * Runtime interface, component props, and helper type definitions
+ * used by the FAQWidget component.
+ */
+export {};

package/dist/runtime.d.ts

@@ -36,9 +36,9 @@ export declare const runtime: {
         id: string;
         component: {
             mount(container: HTMLElement, config?: import("./types").FAQConfig & {
-                runtime?: import("./FAQWidget").FAQWidgetRuntime;
+                runtime?: import("./faq-types").FAQWidgetRuntime;
                 instanceId?: string;
-            }): () => void;
+            }): (() => void) | undefined;
         };
         metadata: {
             name: string;

package/dist/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;IAOlB;;OAEG;;;;;;;;;;;IAGH;;OAEG;;;;;uBAuC06sB,CAAC;0BAA8B,CAAC;;;;;;;;;;IAzB78sB;;;;OAIG;0BACmB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;;;;;;CAiB9C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;IAOlB;;OAEG;;;;;;;;;;;IAGH;;OAEG;;;;;uBAuCyqhB,CAAC;0BAA8B,CAAC;;;;;;;;;;IAzB5shB;;;;OAIG;0BACmB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;;;;;;CAiB9C,CAAC;AAEF,eAAe,OAAO,CAAC"}