@webority/ui-react 0.11.7 → 0.12.1

package/dist/types/components/AppConsentBanner.d.ts

@@ -0,0 +1,46 @@
+import "@webority/ui-elements";
+/**
+ * The cookie consent banner: accept all, reject all, or choose per category (analytics,
+ * functional, marketing; essential is always on).
+ *
+ * Wraps the shared `<wui-consent-banner>` element, which owns the buttons, the switches and the
+ * settings mode. This wrapper owns the wiring to `@webority/analytics`: it shows the banner when
+ * the visitor has not decided yet, and stores their choice with `saveConsent`, which also tells
+ * Google Consent Mode, PostHog and the marketing tags. Call `initConsent` from
+ * `@webority/analytics` before this renders; it throws otherwise, because a banner with no
+ * consent record behind it would ask a question nothing remembers.
+ *
+ * Any element carrying `data-consent-settings` reopens the banner with the switches showing, so
+ * a footer "Cookie settings" link needs no code: withdrawing consent must be as easy as giving it.
+ *
+ * ```jsx
+ * initConsent({ requiresOptIn, cookieDomain: ".example.com" }); // app bootstrap, once
+ *
+ * <AppConsentBanner policyHref="/cookie-policy" />
+ * <a href="#" data-consent-settings>Cookie settings</a>
+ * ```
+ *
+ * @param {object} props
+ * @param {string} [props.heading='Cookies on this site'] Heading, and the dialog's accessible name.
+ * @param {string} [props.description] The explanation above the buttons.
+ * @param {string} [props.policyHref] Link to the cookie policy; no link when omitted.
+ * @param {string} [props.policyLabel='Cookie policy'] The policy link's text.
+ * @param {string} [props.analyticsDescription] What the analytics category covers.
+ * @param {string} [props.functionalDescription] What the functional category covers.
+ * @param {string} [props.marketingDescription] What the marketing category covers.
+ * @param {"bottom-left"|"bottom-right"} [props.position='bottom-left'] Which corner it pins to.
+ * @param {string} [props.className] Extra classes on the element.
+ * @param {import('react').CSSProperties} [props.style] Inline style; lands on the element with `className`.
+ */
+export default function AppConsentBanner({ heading, description, policyHref, policyLabel, analyticsDescription, functionalDescription, marketingDescription, position, className, style, ...rest }: {
+    heading?: string;
+    description?: string;
+    policyHref?: string;
+    policyLabel?: string;
+    analyticsDescription?: string;
+    functionalDescription?: string;
+    marketingDescription?: string;
+    position?: "bottom-left" | "bottom-right";
+    className?: string;
+    style?: import('react').CSSProperties;
+}): import("react").JSX.Element;

package/dist/types/components/AppWizard.d.ts

@@ -5,8 +5,9 @@ import "@webority/ui-elements";
  * footer. Give it `steps` metadata and one panel per step as children (in order).
  *
  * Uncontrolled by default (it owns the current step); pass `active` + `onStepChange`
- * to drive it. `beforeNext` gates advancing — return `false` (or a rejecting promise)
- * to block Next, e.g. until a form validates. An `optional` step shows the Skip button.
+ * to drive it. `beforeNext` gates advancing and finishing: return `false` (or a rejecting
+ * promise) to block Next, or Finish on the last step, e.g. until a form validates. An
+ * `optional` step shows the Skip button.
  *
  * @param {object} props
  * @param {{ key?: string, label: string, description?: string, optional?: boolean, icon?: string, status?: 'done'|'active'|'pending'|'error' }[]} props.steps
@@ -16,7 +17,7 @@ import "@webority/ui-elements";
  * @param {(index: number, detail: { previous: number, reason: 'next'|'back'|'skip'|'step'|'set' }) => void} [props.onStepChange]
  * @param {(detail: { index: number }) => void} [props.onFinish] Fired when Finish is pressed on the last step.
  * @param {(index: number) => void} [props.onSkip] Fired when an optional step is skipped.
- * @param {(index: number) => boolean | Promise<boolean>} [props.beforeNext] Validation gate run before advancing on Next — return false (or a rejecting promise) to block; the blocked step turns red.
+ * @param {(index: number) => boolean | Promise<boolean>} [props.beforeNext] Validation gate run before advancing on Next and before Finish on the last step. Return false (or a rejecting promise) to block; the blocked step turns red.
  * @param {(index: number) => void} [props.onInvalid] Fired when advancing is blocked by beforeNext (the step is marked invalid).
  * @param {'steps'|'journey'|'icons'} [props.variant='steps'] Stepper header style — compact circles, the wide journey bar, or large connected icon badges with a "STEP n" eyebrow.
  * @param {'primary'|'success'|'warning'|'danger'|'info'} [props.tone] Recolour the whole stepper accent (active fill, done rail, ring, done tint) to a semantic ramp. Unset keeps the variant's default (primary for steps/journey, success/green for icons). For any other colour, override the `--wui-step-accent` / `--wui-step-soft` CSS variables via `style` or a `className` instead.

package/dist/types/index.d.ts

@@ -18,6 +18,7 @@ export { default as AppChoiceChip } from "./components/AppChoiceChip.jsx";
 export { default as AppColorField } from "./components/AppColorField.jsx";
 export { default as AppCompareTable } from "./components/AppCompareTable.jsx";
 export { default as AppConfirmDialog } from "./components/AppConfirmDialog.jsx";
+export { default as AppConsentBanner } from "./components/AppConsentBanner.jsx";
 export { default as AppCopyButton } from "./components/AppCopyButton.jsx";
 export { default as AppDataTable } from "./components/AppDataTable.jsx";
 export { default as AppDatePicker } from "./components/AppDatePicker.jsx";