@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-chat-widget/xplor-chat-widget.js

@@ -0,0 +1,139 @@
+import { Host, h } from "@stencil/core";
+export class XplorChatWidget {
+    constructor() {
+        this.languageOptions = ['English', 'Spanish', 'French', 'German', 'Italian'];
+        this.textId = 'text';
+        this.selectedLanguage = 'English';
+        this.handleClick = () => {
+            // const ai = document.getElementsByClassName('ai-translate');
+            // Array loop throught ai html items and remap it and update
+            // each class should be seperated
+            debugger;
+            fetch('https://nnvy1fqqcb.execute-api.ap-southeast-2.amazonaws.com/ai_dev/ai/prompt-generation', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-api-key': this.apiKey, // Replace with your actual API key
+                },
+                body: JSON.stringify({
+                    service: null,
+                    action: 'translate',
+                    language: this.selectedLanguage,
+                    content: this.textValue || '',
+                }),
+            })
+                .then((response) => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            })
+                .then((data) => {
+                console.log('Success:', data);
+                this.textValue = data.response;
+            })
+                .catch((error) => {
+                console.error('Error:', error);
+            });
+        };
+        this.handleChange = (event) => {
+            const selectElement = event.target;
+            this.selectedLanguage = selectElement.value;
+            console.log('Selected language:', this.selectedLanguage);
+        };
+    }
+    componentDidLoad() {
+        var _a;
+        const element = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('text');
+        // we need to change this to a class so we can maniplulate multipule different spots with text.
+        if (element) {
+            this.textValue = element.textContent || '';
+            console.log('textValue:', this.textValue);
+        }
+    }
+    render() {
+        return (h(Host, { key: '19fe2c1cbe9c2f82779a3e9e6966db8e22988002' }, h("div", { key: 'b2d611ff824b3e4c9eff2c7eac45716219de2b96', id: "ai-text" }, this.textValue), h("div", { key: '96ca4702ebd751d3b6ab95a23ca1b762ef1be270', class: "container" }, h("xplor-dropdown", { key: '74a7468be12b73d97cf473cd7bb9bae99e62fa1b', options: this.languageOptions, selected: this.selectedLanguage, handleChange: this.handleChange }), h("xplor-button", { key: '4177a337e0295507422bee77f90a26ea6ed3b12b', text: "translate", mode: "pg", type: "primary", onClick: this.handleClick }))));
+    }
+    static get is() { return "xplor-chat-widget"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-chat-widget.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-chat-widget.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "languageOptions": {
+                "type": "unknown",
+                "attribute": "language-options",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['English', 'Spanish', 'French', 'German', 'Italian']"
+            },
+            "textId": {
+                "type": "string",
+                "attribute": "text-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "apiKey": {
+                "type": "string",
+                "attribute": "api-key",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedLanguage": {},
+            "textValue": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=xplor-chat-widget.js.map

package/dist/collection/components/xplor-chat-widget/xplor-chat-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-chat-widget.js","sourceRoot":"","sources":["../../../src/components/xplor-chat-widget/xplor-chat-widget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-chat-widget',\n  styleUrl: 'xplor-chat-widget.scss',\n  shadow: true,\n})\nexport class XplorChatWidget {\n  @Prop() languageOptions: string[] = ['English', 'Spanish', 'French', 'German', 'Italian'];\n  @Prop() textId: string = 'text';\n  @Prop() apiKey: string; // TODO: add api key to the component\n  @Element() host: HTMLElement;\n  @State() selectedLanguage: string = 'English';\n  @State() textValue: string;\n  'Hoy, nos divertimos mucho explorando el mundo de la arcilla. Estaban totalmente absortos en el proceso, formando cuidadosamente la arcilla en diseños y patrones únicos. Desde animales coloridos hasta formas extravagantes, la imaginación de tu hijo no tuvo límites durante este día lleno de diversión.';\n\n  componentDidLoad() {\n    const element = this.host.shadowRoot?.getElementById('text');\n    // we need to change this to a class so we can maniplulate multipule different spots with text.\n    if (element) {\n      this.textValue = element.textContent || '';\n      console.log('textValue:', this.textValue);\n    }\n  }\n\n  handleClick = () => {\n    // const ai = document.getElementsByClassName('ai-translate');\n    // Array loop throught ai html items and remap it and update\n    // each class should be seperated\n    debugger;\n    fetch('https://nnvy1fqqcb.execute-api.ap-southeast-2.amazonaws.com/ai_dev/ai/prompt-generation', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        'x-api-key': this.apiKey, // Replace with your actual API key\n      },\n      body: JSON.stringify({\n        service: null,\n        action: 'translate',\n        language: this.selectedLanguage,\n        content: this.textValue || '',\n      }),\n    })\n      .then((response) => {\n        if (!response.ok) {\n          throw new Error(`HTTP error! status: ${response.status}`);\n        }\n        return response.json();\n      })\n      .then((data) => {\n        console.log('Success:', data);\n        this.textValue = data.response;\n      })\n      .catch((error) => {\n        console.error('Error:', error);\n      });\n  };\n\n  handleChange = (event: Event) => {\n    const selectElement = event.target as HTMLSelectElement;\n    this.selectedLanguage = selectElement.value;\n    console.log('Selected language:', this.selectedLanguage);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div id=\"ai-text\">{this.textValue}</div>\n        <div class=\"container\">\n          <xplor-dropdown\n            options={this.languageOptions}\n            selected={this.selectedLanguage}\n            handleChange={this.handleChange}\n          />\n          <xplor-button text=\"translate\" mode=\"pg\" type=\"primary\" onClick={this.handleClick}></xplor-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-chat-widget/xplor-chat.stories.js

@@ -0,0 +1,31 @@
+export default {
+    // this creates a ‘Components’ folder and a ‘MyComponent’ subfolder
+    title: 'Components/Translate',
+    tags: ['autodocs'],
+    // this is an example of how to add actions to the story
+    parameters: {
+        actions: {
+            argTypesRegex: '^on.*',
+            handles: ['click'], // you can add custom events to this array to trigger actions
+        },
+    },
+    argTypes: {
+        text: { control: 'text' },
+        styles: { control: 'text' },
+        mode: { control: 'text' },
+        apiKey: { control: 'text' },
+        type: {
+            control: { type: 'select' },
+            options: ['primary', 'ghost', 'minimal'],
+        },
+    },
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+};
+const Template = (args) => `<xplor-chat-widget apiKey="${args.apiKey}" languageOptions="${args.type}"></xplor-chat-widget>`;
+export const Primary = Template.bind({});
+Primary.args = {
+    languageOptions: ['English', 'Spanish', 'French', 'German', 'Italian'],
+    type: 'primary',
+    apiKey: 'YOUR_API_KEY_HERE',
+};
+//# sourceMappingURL=xplor-chat.stories.js.map

package/dist/collection/components/xplor-chat-widget/xplor-chat.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-chat.stories.js","sourceRoot":"","sources":["../../../src/components/xplor-chat-widget/xplor-chat.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,mEAAmE;IACnE,KAAK,EAAE,sBAAsB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,wDAAwD;IACxD,UAAU,EAAE;QACV,OAAO,EAAE;YACP,aAAa,EAAE,OAAO;YACtB,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,6DAA6D;SAClF;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC;SACzC;KACF;IACD,wJAAwJ;CACzJ,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CACxB,8BAA8B,IAAI,CAAC,MAAM,sBAAsB,IAAI,CAAC,IAAI,wBAAwB,CAAC;AAEnG,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;IACb,eAAe,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACtE,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,mBAAmB;CAC5B,CAAC","sourcesContent":["export default {\n  // this creates a ‘Components’ folder and a ‘MyComponent’ subfolder\n  title: 'Components/Translate',\n  tags: ['autodocs'],\n  // this is an example of how to add actions to the story\n  parameters: {\n    actions: {\n      argTypesRegex: '^on.*',\n      handles: ['click'], // you can add custom events to this array to trigger actions\n    },\n  },\n  argTypes: {\n    text: { control: 'text' },\n    styles: { control: 'text' },\n    mode: { control: 'text' },\n    apiKey: { control: 'text' },\n    type: {\n      control: { type: 'select' },\n      options: ['primary', 'ghost', 'minimal'],\n    },\n  },\n  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n};\n\nconst Template = (args) =>\n  `<xplor-chat-widget apiKey=\"${args.apiKey}\" languageOptions=\"${args.type}\"></xplor-chat-widget>`;\n\nexport const Primary = Template.bind({});\n\nPrimary.args = {\n  languageOptions: ['English', 'Spanish', 'French', 'German', 'Italian'],\n  type: 'primary',\n  apiKey: 'YOUR_API_KEY_HERE',\n};\n"]}

package/dist/collection/components/xplor-checkbox/xplor-checkbox.css

@@ -0,0 +1,453 @@
+/* on mobile browsers, I set a width of 100% */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  /* html[data-theme='office'] {
+    --color-primary: rgb(219, 59, 3);
+    --color-secondary: rgb(0, 119, 107);
+    --color-buttons: #89da59;
+    --color-typography: #ff320e;
+  }
+
+  html {
+    --color-primary: #db3b03;
+    --color-primary-50: #db3b03;
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgb(0, 119, 107);
+    --color-tertiary: rgb(128, 104, 186);
+  } */
+  :root {
+    --color-primary: #db3b03;
+    --color-primary-50: rgba(255, 152, 0, 1);
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgba(1, 163, 157, 1);
+    --color-tertiary: rgb(128, 104, 186);
+    --color-tertiary: rgb(223, 242, 241);
+    --color-white: white;
+    --color-emphasis: rgb(8, 8, 9);
+    --color-supergiant: rgb(213, 66, 99);
+    --color-orange: rgb(250, 200, 127);
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --background: 20 66% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 20 25% 86%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 20 66% 98%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 20 48% 72%;
+    --primary-foreground: 20 48% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 12% 32%;
+    --accent: 20 12% 92%;
+    --accent-foreground: 20 12% 32%;
+    --destructive: 11 80% 22%;
+    --destructive-foreground: 11 80% 82%;
+    --ring: 20 48% 72%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 253 43% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 13% 63%;
+    --popover: 253 43% 3%;
+    --popover-foreground: 253 31% 98%;
+    --card: 253 43% 4%;
+    --card-foreground: 253 31% 99%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 253 91% 58%;
+    --primary-foreground: 253 91% 98%;
+    --secondary: 253 7% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 253 13% 14%;
+    --accent-foreground: 253 13% 74%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 253 91% 58%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh;
+    /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh;
+    /* Fallback */
+    height: 100dvh;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer components {
+  .glass {
+    border: none;
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: transparent;
+    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);
+    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);
+    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));
+  }
+}
+.tox.tox-tinymce {
+  width: 50% !important;
+  height: 400px !important;
+  display: inline-flex;
+}
+
+/* on large screens, I use a different layout, so 600px are sufficient */
+@media only screen and (min-width: 600px) {
+  .tox.tox-tinymce {
+    width: 600px !important;
+  }
+}
+h1 {
+  color: var(--color-primary);
+  /* Header/H1 */
+  font-family: Inter;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56px; /* 116.667% */
+}
+
+h2 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H2 Bold */
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 118.75% */
+  letter-spacing: 0.25px;
+}
+
+h3 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H3 */
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 133.333% */
+}
+
+.overline {
+  color: var(--grey-1100252525, #252525);
+  /* Overline/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 1rem;
+  padding: 0;
+}
+ol li,
+ul li {
+  margin: 1rem;
+  padding: 0;
+}
+ol.mdc-list,
+ul.mdc-list {
+  list-style-type: none;
+  list-style: none;
+}
+ol.mdc-list li.mdc-list-item,
+ul.mdc-list li.mdc-list-item {
+  list-style-type: none;
+  list-style: none !important;
+}
+
+.orange-label {
+  color: var(--Orange-900-Primary, #db3b03);
+  /* Caption 1/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 0.4px;
+  margin: 0px 0 -9px 16px;
+  z-index: 1 !important;
+  position: relative;
+  width: fit-content;
+}
+.orange-label.grey-bg {
+  background-color: #fefcfb;
+}
+
+#spinnerLoader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+#textfield-Title-label {
+  background-color: white;
+}
+
+.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 1px solid #db3b03 !important;
+  padding: 0;
+  height: 0;
+}
+
+.mdc-text-field--focused .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 2px solid #db3b03 !important;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
+  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
+  border-top: transparent;
+}
+
+.generate-btn {
+  display: flex;
+  height: 48px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+}
+.generate-btn.link:hover {
+  background-color: var(--Cyan-700-Secondary, #e27046);
+  color: var(--Cyan-700-Secondary-Text, #fff);
+}
+
+.bg-green {
+  background: var(--Cyan-700-Secondary, #00776b);
+}
+
+/* custom-checkbox.scss */
+:host {
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.checkbox {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 2px solid #6b7280;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  outline: none;
+  position: relative;
+}
+.checkbox.hover {
+  background: #d1fae5;
+  border-color: #059669;
+}
+.checkbox.focus {
+  background: #a7f3d0;
+  border-color: #059669;
+  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+}
+.checkbox.pressed {
+  background: #6ee7b7;
+  border-color: #059669;
+}
+.checkbox.checked {
+  background: #059669;
+  border-color: #059669;
+}
+.checkbox.checked.hover {
+  background: #d1fae5;
+  border-color: #059669;
+}
+.checkbox.checked.hover .check-icon {
+  color: #059669;
+}
+.checkbox.checked.focus {
+  background: #a7f3d0;
+  border-color: #059669;
+  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+}
+.checkbox.checked.focus .check-icon {
+  color: #059669;
+}
+.checkbox.checked.pressed {
+  background: #6ee7b7;
+  border-color: #059669;
+}
+.checkbox.checked.pressed .check-icon {
+  color: #059669;
+}
+.checkbox.indeterminate {
+  background: #059669;
+  border-color: #059669;
+}
+.checkbox.indeterminate.hover {
+  background: #d1fae5;
+  border-color: #059669;
+}
+.checkbox.indeterminate.hover .indeterminate-icon {
+  color: #059669;
+}
+.checkbox.indeterminate.focus {
+  background: #a7f3d0;
+  border-color: #059669;
+  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+}
+.checkbox.indeterminate.focus .indeterminate-icon {
+  color: #059669;
+}
+.checkbox.indeterminate.pressed {
+  background: #6ee7b7;
+  border-color: #059669;
+}
+.checkbox.indeterminate.pressed .indeterminate-icon {
+  color: #059669;
+}
+.checkbox.error {
+  border-color: #ef4444;
+}
+.checkbox.error.hover {
+  background: #fee2e2;
+  border-color: #ef4444;
+}
+.checkbox.error.focus {
+  background: #fecaca;
+  border-color: #ef4444;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+.checkbox.error.pressed {
+  background: #fca5a5;
+  border-color: #ef4444;
+}
+.checkbox.error.checked {
+  background: #ef4444;
+  border-color: #ef4444;
+}
+.checkbox.error.checked.hover {
+  background: #fee2e2;
+  border-color: #ef4444;
+}
+.checkbox.error.checked.hover .check-icon {
+  color: #ef4444;
+}
+.checkbox.error.checked.focus {
+  background: #fecaca;
+  border-color: #ef4444;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+.checkbox.error.checked.focus .check-icon {
+  color: #ef4444;
+}
+.checkbox.error.checked.pressed {
+  background: #fca5a5;
+  border-color: #ef4444;
+}
+.checkbox.error.checked.pressed .check-icon {
+  color: #ef4444;
+}
+.checkbox.error.indeterminate {
+  background: #ef4444;
+  border-color: #ef4444;
+}
+.checkbox.error.indeterminate.hover {
+  background: #fee2e2;
+  border-color: #ef4444;
+}
+.checkbox.error.indeterminate.hover .indeterminate-icon {
+  color: #ef4444;
+}
+.checkbox.error.indeterminate.focus {
+  background: #fecaca;
+  border-color: #ef4444;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+.checkbox.error.indeterminate.focus .indeterminate-icon {
+  color: #ef4444;
+}
+.checkbox.error.indeterminate.pressed {
+  background: #fca5a5;
+  border-color: #ef4444;
+}
+.checkbox.error.indeterminate.pressed .indeterminate-icon {
+  color: #ef4444;
+}
+.checkbox.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  border-color: #d1d5db;
+  background: white;
+}
+.checkbox.disabled.checked, .checkbox.disabled.indeterminate {
+  background: #d1d5db;
+  border-color: #d1d5db;
+}
+
+.check-icon,
+.indeterminate-icon {
+  width: 16px;
+  height: 16px;
+  color: white;
+}
+
+.label {
+  font-size: 14px;
+  color: #374151;
+  user-select: none;
+}
+.checkbox.disabled ~ .label {
+  opacity: 0.4;
+}