@kya-os/consent 0.1.13 → 0.1.14

package/dist/cjs/components/consent-button.js

@@ -0,0 +1,180 @@
+"use strict";
+/**
+ * Consent Button Web Component
+ *
+ * A styled button for consent pages that works in:
+ * - Browser (vanilla HTML)
+ * - React (via @lit/react wrapper)
+ * - SSR (Declarative Shadow DOM)
+ *
+ * @module components/consent-button
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentButton = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+/**
+ * ConsentButton - A themed button component
+ *
+ * @example
+ * ```html
+ * <consent-button variant="primary">Allow Access</consent-button>
+ * <consent-button variant="secondary">Cancel</consent-button>
+ * ```
+ *
+ * @csspart button - The native button element
+ * @cssprop --consent-primary - Primary brand color (default: #2563EB)
+ */
+let ConsentButton = class ConsentButton extends lit_1.LitElement {
+    constructor() {
+        super();
+        /**
+         * Button variant - 'primary' (filled) or 'secondary' (outlined)
+         */
+        this.variant = 'primary';
+        /**
+         * Button type attribute (button, submit, reset)
+         */
+        this.type = 'button';
+        /**
+         * Disabled state
+         */
+        this.disabled = false;
+        /**
+         * Full width mode
+         */
+        this.fullWidth = false;
+        /**
+         * Loading state - shows spinner and disables button
+         */
+        this.loading = false;
+        this.internals = this.attachInternals();
+    }
+    handleClick() {
+        if (this.disabled || this.loading)
+            return;
+        const form = this.internals.form;
+        if (!form)
+            return;
+        if (this.type === 'submit') {
+            // Trigger form submission
+            form.requestSubmit();
+        }
+        else if (this.type === 'reset') {
+            form.reset();
+        }
+    }
+    render() {
+        return (0, lit_1.html) `
+      <button
+        part="button"
+        type="button"
+        ?disabled=${this.disabled || this.loading}
+        aria-busy=${this.loading}
+        @click=${this.handleClick}
+      >
+        ${this.loading ? (0, lit_1.html) `<span class="spinner"></span>` : null}
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+exports.ConsentButton = ConsentButton;
+// Enable form association
+ConsentButton.formAssociated = true;
+ConsentButton.styles = (0, lit_1.css) `
+    :host {
+      display: inline-block;
+    }
+
+    :host([full-width]) {
+      display: block;
+      width: 100%;
+    }
+
+    button {
+      /* Base styles - matches AgentShield PreviewButton exactly */
+      padding: 0.75rem 1rem;
+      height: 2.75rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: opacity 0.15s ease, background-color 0.15s ease;
+      border: none;
+      width: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+
+    /* Primary variant */
+    :host([variant='primary']) button {
+      background-color: var(--consent-primary, #2563eb);
+      color: white;
+    }
+
+    :host([variant='primary']) button:hover:not(:disabled) {
+      opacity: 0.9;
+    }
+
+    /* Secondary variant */
+    :host([variant='secondary']) button {
+      background-color: transparent;
+      color: #374151;
+      border: 1px solid #d1d5db;
+    }
+
+    :host([variant='secondary']) button:hover:not(:disabled) {
+      background-color: #f9fafb;
+    }
+
+    /* Disabled state */
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Loading spinner */
+    .spinner {
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ type: String, reflect: true })
+], ConsentButton.prototype, "variant", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentButton.prototype, "type", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ConsentButton.prototype, "disabled", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'full-width' })
+], ConsentButton.prototype, "fullWidth", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ConsentButton.prototype, "loading", void 0);
+exports.ConsentButton = ConsentButton = __decorate([
+    (0, decorators_js_1.customElement)('consent-button')
+], ConsentButton);
+//# sourceMappingURL=consent-button.js.map

package/dist/cjs/components/consent-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-button.js","sourceRoot":"","sources":["../../../src/components/consent-button.ts"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;;;;;;;;;AAEH,6BAA4C;AAC5C,qDAA4D;AAO5D;;;;;;;;;;;GAWG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,gBAAU;IAM3C;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QAEH,YAAO,GAAkB,SAAS,CAAC;QAEnC;;WAEG;QAEH,SAAI,GAAkC,QAAQ,CAAC;QAE/C;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;WAEG;QAEH,cAAS,GAAG,KAAK,CAAC;QAElB;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QA/Bd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAwGO,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1C,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,0BAA0B;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACjC,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAA,UAAI,EAAA;;;;oBAIK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;oBAC7B,IAAI,CAAC,OAAO;iBACf,IAAI,CAAC,WAAW;;UAEvB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAA,UAAI,EAAA,+BAA+B,CAAC,CAAC,CAAC,IAAI;;;KAG9D,CAAC;IACJ,CAAC;;AA5IU,sCAAa;AACxB,0BAA0B;AACnB,4BAAc,GAAG,IAAI,AAAP,CAAQ;AAuCb,oBAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsE3B,AAtEqB,CAsEpB;AAhGF;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACP;AAMnC;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACoB;AAM/C;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAC1B;AAMjB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;gDACnC;AAMlB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC3B;wBAvCL,aAAa;IADzB,IAAA,6BAAa,EAAC,gBAAgB,CAAC;GACnB,aAAa,CA6IzB"}

package/dist/cjs/components/consent-checkbox.js

@@ -0,0 +1,223 @@
+"use strict";
+/**
+ * Consent Checkbox Web Component
+ *
+ * A styled checkbox for consent pages with label support.
+ * Works in browser, React, and SSR environments.
+ * Implements Form Associated Custom Elements for proper form participation.
+ *
+ * @module components/consent-checkbox
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentCheckbox = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+/**
+ * ConsentCheckbox - A themed checkbox component with label
+ *
+ * @example
+ * ```html
+ * <consent-checkbox name="terms" required>
+ *   I agree to the <a href="/terms">Terms</a>
+ * </consent-checkbox>
+ * ```
+ *
+ * @fires change - Fired when checkbox state changes
+ * @csspart checkbox - The checkbox input element
+ * @csspart label - The label text wrapper
+ * @cssprop --consent-primary - Primary brand color for checked state
+ */
+let ConsentCheckbox = class ConsentCheckbox extends lit_1.LitElement {
+    constructor() {
+        super();
+        /**
+         * Form field name
+         */
+        this.name = '';
+        /**
+         * Checked state
+         */
+        this.checked = false;
+        /**
+         * Required for form validation
+         */
+        this.required = false;
+        /**
+         * Disabled state
+         */
+        this.disabled = false;
+        /**
+         * Value when checked
+         */
+        this.value = 'on';
+        this.internals = this.attachInternals();
+    }
+    // Update form value when properties change
+    updated(changedProperties) {
+        if (changedProperties.has('checked') || changedProperties.has('value')) {
+            this.updateFormValue();
+        }
+    }
+    updateFormValue() {
+        // Update the form value based on checked state
+        if (this.checked) {
+            this.internals.setFormValue(this.value);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    handleChange(e) {
+        const input = e.target;
+        this.checked = input.checked;
+        this.updateFormValue();
+        // Dispatch a change event that bubbles
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return (0, lit_1.html) `
+      <label part="label">
+        <input
+          part="checkbox"
+          type="checkbox"
+          name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <span class="text">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+    }
+};
+exports.ConsentCheckbox = ConsentCheckbox;
+// Enable form association
+ConsentCheckbox.formAssociated = true;
+ConsentCheckbox.styles = (0, lit_1.css) `
+    :host {
+      display: block;
+    }
+
+    label {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      cursor: pointer;
+      font-size: 0.875rem;
+      color: #374151;
+      line-height: 1.5;
+    }
+
+    :host([disabled]) label {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    /* Custom checkbox styling - matches AgentShield exactly */
+    input[type='checkbox'] {
+      /* Reset */
+      appearance: none;
+      -webkit-appearance: none;
+      margin: 0;
+
+      /* Size - matches AgentShield w-4 h-4 */
+      width: 1rem;
+      height: 1rem;
+      min-width: 1rem;
+      margin-top: 0.125rem; /* Align with text baseline */
+
+      /* Border */
+      border: 1px solid #d1d5db;
+      border-radius: 0.25rem;
+
+      /* Background */
+      background-color: white;
+
+      /* Interaction */
+      cursor: pointer;
+      position: relative;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    input[type='checkbox']:hover:not(:disabled) {
+      border-color: var(--consent-primary, #2563eb);
+    }
+
+    input[type='checkbox']:focus-visible {
+      outline: 2px solid var(--consent-primary, #2563eb);
+      outline-offset: 2px;
+    }
+
+    /* Checked state */
+    input[type='checkbox']:checked {
+      background-color: var(--consent-primary, #2563eb);
+      border-color: var(--consent-primary, #2563eb);
+    }
+
+    /* Checkmark */
+    input[type='checkbox']:checked::after {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    /* Disabled */
+    input[type='checkbox']:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    /* Text wrapper */
+    .text {
+      flex: 1;
+    }
+
+    /* Links in label */
+    ::slotted(a) {
+      color: var(--consent-primary, #2563eb);
+      text-decoration: underline;
+    }
+
+    ::slotted(a:hover) {
+      text-decoration: none;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentCheckbox.prototype, "name", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ConsentCheckbox.prototype, "checked", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], ConsentCheckbox.prototype, "required", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ConsentCheckbox.prototype, "disabled", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentCheckbox.prototype, "value", void 0);
+exports.ConsentCheckbox = ConsentCheckbox = __decorate([
+    (0, decorators_js_1.customElement)('consent-checkbox')
+], ConsentCheckbox);
+//# sourceMappingURL=consent-checkbox.js.map

package/dist/cjs/components/consent-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-checkbox.js","sourceRoot":"","sources":["../../../src/components/consent-checkbox.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;;;;;;;AAEH,6BAA4C;AAC5C,qDAA4D;AAE5D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,gBAAU;IAM7C;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QAEH,SAAI,GAAG,EAAE,CAAC;QAEV;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;WAEG;QAEH,UAAK,GAAG,IAAI,CAAC;QA/BX,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAgID,2CAA2C;IACxB,OAAO,CAAC,iBAAuC;QAChE,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACvE,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,+CAA+C;QAC/C,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,uCAAuC;QACvC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YACpD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAA,UAAI,EAAA;;;;;iBAKE,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,KAAK;qBACR,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,YAAY;;;;;;KAMhC,CAAC;IACJ,CAAC;;AA1LU,0CAAe;AAC1B,0BAA0B;AACnB,8BAAc,GAAG,IAAI,AAAP,CAAQ;AAuCb,sBAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8F3B,AA9FqB,CA8FpB;AAxHF;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACjB;AAMV;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC3B;AAMhB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACX;AAMjB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC1B;AAMjB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACd;0BAvCF,eAAe;IAD3B,IAAA,6BAAa,EAAC,kBAAkB,CAAC;GACrB,eAAe,CA2L3B"}