@kya-os/consent 0.1.13 → 0.1.14

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

@@ -0,0 +1,287 @@
+"use strict";
+/**
+ * Consent Terms Web Component
+ *
+ * A specialized checkbox for terms acceptance with link support.
+ * Implements Form Associated Custom Elements for proper form participation.
+ *
+ * @module components/consent-terms
+ */
+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.ConsentTerms = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+/**
+ * ConsentTerms - Terms acceptance checkbox with link
+ *
+ * @example
+ * ```html
+ * <consent-terms
+ *   name="termsAccepted"
+ *   text="Terms and Conditions"
+ *   url="https://example.com/terms"
+ *   required
+ * ></consent-terms>
+ * ```
+ *
+ * @fires change - Fired when checkbox state changes
+ * @csspart checkbox - The checkbox input element
+ * @csspart label - The label wrapper
+ * @csspart link - The terms link
+ * @cssprop --consent-primary - Primary brand color for checked state
+ */
+let ConsentTerms = class ConsentTerms extends lit_1.LitElement {
+    constructor() {
+        super();
+        /**
+         * Form field name
+         */
+        this.name = 'termsAccepted';
+        /**
+         * Terms text to display
+         */
+        this.text = 'Terms and Conditions';
+        /**
+         * Prefix text before the links
+         */
+        this.labelPrefix = 'I agree to the';
+        /**
+         * Conjunction between terms and privacy links
+         */
+        this.conjunction = 'and';
+        /**
+         * Checked state
+         */
+        this.checked = false;
+        /**
+         * Required for form validation
+         */
+        this.required = true;
+        /**
+         * Disabled state
+         */
+        this.disabled = false;
+        /**
+         * Value when checked
+         */
+        this.value = 'accepted';
+        this.internals = this.attachInternals();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('checked') || changedProperties.has('value')) {
+            this.updateFormValue();
+        }
+    }
+    updateFormValue() {
+        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();
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    renderLink(text, url) {
+        if (url) {
+            return (0, lit_1.html) `<a
+        href=${url}
+        target="_blank"
+        rel="noopener noreferrer"
+        part="link"
+        @click=${(e) => e.stopPropagation()}
+        >${text}</a
+      >`;
+        }
+        return (0, lit_1.html) `<span>${text}</span>`;
+    }
+    render() {
+        const hasPrivacy = this.privacyText && this.privacyUrl;
+        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">
+          ${this.labelPrefix} ${this.renderLink(this.text, this.url)}
+          ${hasPrivacy
+            ? (0, lit_1.html) `
+                ${this.conjunction}
+                ${this.renderLink(this.privacyText, this.privacyUrl)}
+              `
+            : lit_1.nothing}
+          ${this.required ? (0, lit_1.html) `<span class="required">*</span>` : lit_1.nothing}
+        </span>
+      </label>
+    `;
+    }
+};
+exports.ConsentTerms = ConsentTerms;
+// Enable form association
+ConsentTerms.formAssociated = true;
+ConsentTerms.styles = (0, lit_1.css) `
+    :host {
+      display: block;
+      --_primary: var(--consent-primary, #2563eb);
+    }
+
+    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'] {
+      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;
+
+      /* 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(--_primary);
+    }
+
+    input[type='checkbox']:focus-visible {
+      outline: 2px solid var(--_primary);
+      outline-offset: 2px;
+    }
+
+    /* Checked state */
+    input[type='checkbox']:checked {
+      background-color: var(--_primary);
+      border-color: var(--_primary);
+    }
+
+    /* 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 */
+    a {
+      color: var(--_primary);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    a:hover {
+      text-decoration: none;
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--_primary);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+
+    /* Required indicator */
+    .required {
+      color: #ef4444;
+      margin-left: 0.125rem;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentTerms.prototype, "name", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentTerms.prototype, "text", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentTerms.prototype, "url", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'privacy-text' })
+], ConsentTerms.prototype, "privacyText", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'privacy-url' })
+], ConsentTerms.prototype, "privacyUrl", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'label-prefix' })
+], ConsentTerms.prototype, "labelPrefix", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentTerms.prototype, "conjunction", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ConsentTerms.prototype, "checked", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], ConsentTerms.prototype, "required", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ConsentTerms.prototype, "disabled", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentTerms.prototype, "value", void 0);
+exports.ConsentTerms = ConsentTerms = __decorate([
+    (0, decorators_js_1.customElement)('consent-terms')
+], ConsentTerms);
+//# sourceMappingURL=consent-terms.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"consent-terms.js","sourceRoot":"","sources":["../../../src/components/consent-terms.ts"],"names":[],"mappings":";AAAA;;;;;;;GAOG;;;;;;;;;AAEH,6BAAqD;AACrD,qDAA4D;AAE5D;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,gBAAU;IAM1C;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QAEH,SAAI,GAAG,eAAe,CAAC;QAEvB;;WAEG;QAEH,SAAI,GAAG,sBAAsB,CAAC;QAoB9B;;WAEG;QAEH,gBAAW,GAAG,gBAAgB,CAAC;QAE/B;;WAEG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAEpB;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QAEH,aAAQ,GAAG,IAAI,CAAC;QAEhB;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;WAEG;QAEH,UAAK,GAAG,UAAU,CAAC;QAnEjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAiLkB,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,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,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;IAEO,UAAU,CAAC,IAAY,EAAE,GAAY;QAC3C,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,IAAA,UAAI,EAAA;eACF,GAAG;;;;iBAID,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;WACvC,IAAI;QACP,CAAC;QACL,CAAC;QACD,OAAO,IAAA,UAAI,EAAA,SAAS,IAAI,SAAS,CAAC;IACpC,CAAC;IAEQ,MAAM;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,CAAC;QAEvD,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;;;YAGzB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC;YACxD,UAAU;YACV,CAAC,CAAC,IAAA,UAAI,EAAA;kBACA,IAAI,CAAC,WAAW;kBAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAY,EAAE,IAAI,CAAC,UAAU,CAAC;eACtD;YACH,CAAC,CAAC,aAAO;YACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAA,UAAI,EAAA,iCAAiC,CAAC,CAAC,CAAC,aAAO;;;KAGtE,CAAC;IACJ,CAAC;;AA/PU,oCAAY;AACvB,0BAA0B;AACnB,2BAAc,GAAG,IAAI,AAAP,CAAQ;AA2Eb,mBAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2G3B,AA3GqB,CA2GpB;AAzKF;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACJ;AAMvB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACG;AAM9B;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACd;AAMb;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;iDACjC;AAMrB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;gDACjC;AAMpB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;iDACvB;AAM/B;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACP;AAMpB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC3B;AAMhB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACZ;AAMhB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC1B;AAMjB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACR;uBA3ER,YAAY;IADxB,IAAA,6BAAa,EAAC,eAAe,CAAC;GAClB,YAAY,CAgQxB"}

package/dist/cjs/components/index.js

@@ -0,0 +1,37 @@
+"use strict";
+/**
+ * Consent Web Components
+ *
+ * Lit-based web components for consent pages.
+ * Works in browser, React (via @lit/react), and SSR.
+ *
+ * @module components
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.css = exports.html = exports.McpConsent = exports.ConsentOTPInput = exports.ConsentOAuthButton = exports.ConsentTerms = exports.ConsentPermissions = exports.ConsentShell = exports.ConsentInput = exports.ConsentCheckbox = exports.ConsentButton = void 0;
+// Core Components (use .js extension for ESM browser compatibility)
+var consent_button_js_1 = require("./consent-button.js");
+Object.defineProperty(exports, "ConsentButton", { enumerable: true, get: function () { return consent_button_js_1.ConsentButton; } });
+var consent_checkbox_js_1 = require("./consent-checkbox.js");
+Object.defineProperty(exports, "ConsentCheckbox", { enumerable: true, get: function () { return consent_checkbox_js_1.ConsentCheckbox; } });
+var consent_input_js_1 = require("./consent-input.js");
+Object.defineProperty(exports, "ConsentInput", { enumerable: true, get: function () { return consent_input_js_1.ConsentInput; } });
+var consent_shell_js_1 = require("./consent-shell.js");
+Object.defineProperty(exports, "ConsentShell", { enumerable: true, get: function () { return consent_shell_js_1.ConsentShell; } });
+// Extended Components
+var consent_permissions_js_1 = require("./consent-permissions.js");
+Object.defineProperty(exports, "ConsentPermissions", { enumerable: true, get: function () { return consent_permissions_js_1.ConsentPermissions; } });
+var consent_terms_js_1 = require("./consent-terms.js");
+Object.defineProperty(exports, "ConsentTerms", { enumerable: true, get: function () { return consent_terms_js_1.ConsentTerms; } });
+var consent_oauth_button_js_1 = require("./consent-oauth-button.js");
+Object.defineProperty(exports, "ConsentOAuthButton", { enumerable: true, get: function () { return consent_oauth_button_js_1.ConsentOAuthButton; } });
+var consent_otp_input_js_1 = require("./consent-otp-input.js");
+Object.defineProperty(exports, "ConsentOTPInput", { enumerable: true, get: function () { return consent_otp_input_js_1.ConsentOTPInput; } });
+// Composite Component (Full Consent Flow)
+var mcp_consent_js_1 = require("./mcp-consent.js");
+Object.defineProperty(exports, "McpConsent", { enumerable: true, get: function () { return mcp_consent_js_1.McpConsent; } });
+// Re-export Lit utilities that consumers might need
+var lit_1 = require("lit");
+Object.defineProperty(exports, "html", { enumerable: true, get: function () { return lit_1.html; } });
+Object.defineProperty(exports, "css", { enumerable: true, get: function () { return lit_1.css; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";AAAA;;;;;;;GAOG;;;AAEH,oEAAoE;AACpE,yDAAwE;AAA/D,kHAAA,aAAa,OAAA;AACtB,6DAAwD;AAA/C,sHAAA,eAAe,OAAA;AACxB,uDAAkE;AAAzD,gHAAA,YAAY,OAAA;AACrB,uDAAkD;AAAzC,gHAAA,YAAY,OAAA;AAErB,sBAAsB;AACtB,mEAGkC;AAFhC,4HAAA,kBAAkB,OAAA;AAGpB,uDAAkD;AAAzC,gHAAA,YAAY,OAAA;AACrB,qEAGmC;AAFjC,6HAAA,kBAAkB,OAAA;AAGpB,+DAAyD;AAAhD,uHAAA,eAAe,OAAA;AAExB,0CAA0C;AAC1C,mDAK0B;AAJxB,4GAAA,UAAU,OAAA;AAMZ,oDAAoD;AACpD,2BAAgC;AAAvB,2FAAA,IAAI,OAAA;AAAE,0FAAA,GAAG,OAAA"}