@qite/tide-booking-component 1.4.124 → 1.4.126

package/styles/tide-form-variables.scss

@@ -0,0 +1,275 @@
+:root {
+  // ─── Base colors ───────────────────────────────────────────────────────────
+  --tide-booking-color-primary: #333399;
+  --tide-booking-color-primary-gradient: linear-gradient(204.08deg, #333399 1.64%, #282878 84.55%);
+  --tide-booking-color-primary-fade: #ebebf8;
+  --tide-booking-color-primary-extra-fade: #f8f8fd;
+  --tide-booking-color-primary-light: #cdcdee;
+  --tide-booking-color-primary-dark: #282878;
+  --tide-booking-color-secondary: #1f9470;
+  --tide-booking-color-secondary-light: #11b684;
+
+  --tide-booking-invalid: #871d11;
+  --tide-booking-invalid-light: #fce8e6;
+  --tide-booking-invalid-dark: #871d11;
+
+  --tide-booking-white: #ffffff;
+  --tide-booking-gray-light: #f5f5f5;
+  --tide-booking-gray-xlight: #fbfbfb;
+  --tide-booking-gray--medium-light: #efefef;
+  --tide-booking-gray-background-light: #e2e2e2;
+  --tide-booking-gray-border-light: #f3f3f3;
+  --tide-booking-gray-checkbox-bg: #bdbdbd;
+  --tide-booking-gray-medium: #cbcbcb;
+  --tide-booking-gray-dark: #666666;
+  --tide-booking-black: #0a0a0a;
+  --tide-booking-transparent: transparent;
+
+  --tide-booking-bg: #fafafa;
+
+  // ─── Typography ────────────────────────────────────────────────────────────
+  --tide-booking-font-heading: 'Outfit', serif;
+  --tide-booking-font-body: 'Outfit', serif;
+  --tide-booking-font-handwritten: 'Outfit', serif;
+
+  --tide-booking-font-size-body: 16px;
+  --tide-booking-font-size-body-lg: 18px;
+  --tide-booking-line-height-body: 1;
+
+  // ─── Grid ──────────────────────────────────────────────────────────────────
+  --tide-booking-container-wide: 1690px;
+  --tide-booking-container-medium: 1200px;
+  --tide-booking-container-small: 900px;
+  --tide-booking-container-article: 650px;
+  --tide-booking-gutter: 15px;
+
+  // ─── Headings ──────────────────────────────────────────────────────────────
+  --tide-booking-heading-color: var(--tide-booking-black);
+
+  //h1
+  --tide-booking-h1: 32px;
+  --tide-booking-h1-sm: 40px;
+  --tide-booking-h1-xl: 40px;
+
+  //h2
+  --tide-booking-h2: 24px;
+  --tide-booking-h2-sm: 32px;
+  --tide-booking-h2-xl: 32px;
+
+  //h3
+  --tide-booking-h3: 18px;
+  --tide-booking-h3-sm: 24px;
+  --tide-booking-h3-xl: 24px;
+
+  //h4
+  --tide-booking-h4: 16px;
+  --tide-booking-h4-sm: 18px;
+  --tide-booking-h4-xl: 18px;
+
+  //h5
+  --tide-booking-h5: 16px;
+  --tide-booking-h5-xl: 18px;
+
+  //h6
+  --tide-booking-h6: 16px;
+  --tide-booking-h6-md: 18px;
+
+  // ─── Links ─────────────────────────────────────────────────────────────────
+  --tide-booking-a-color: var(--tide-booking-color-primary);
+  --tide-booking-a-text-decoration: underline;
+  --tide-booking-a-color-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-a-text-decoration-hover: underline;
+  --tide-booking-a-color-focus: var(--tide-booking-color-primary-dark);
+  --tide-booking-a-text-decoration-focus: underline;
+
+  // ─── Input ─────────────────────────────────────────────────────────────────
+  --tide-booking-input-background: var(--tide-booking-white);
+  --tide-booking-input-border: 1.5px solid var(--tide-booking-gray--medium-light);
+  --tide-booking-input-border-radius: 5px;
+  --tide-booking-input-border-hover: 1.5px solid var(--tide-booking-gray-medium);
+  --tide-booking-input-border-focus: 1.5px solid var(--tide-booking-color-primary);
+  --tide-booking-input-color: var(--tide-booking-black);
+  --tide-booking-input-height: 45px;
+  --tide-booking-input-height-lg: 45px;
+
+  --tide-booking-input-placeholder-color: var(--tide-booking-gray-dark);
+  --tide-booking-input-placeholder-font-style: normal;
+
+  --tide-booking-input-label-color: var(--tide-booking-black);
+  --tide-booking-input-label-font-size: 14px;
+  --tide-booking-input-label-font-weight: 400;
+  --tide-booking-input-label-font-style: normal;
+
+  // ─── CTA ───────────────────────────────────────────────────────────────────
+  --tide-booking-cta-height: 40px;
+  --tide-booking-cta-height-xs: 45px;
+  --tide-booking-cta-width: 100%;
+  --tide-booking-cta-width-xs: auto;
+  --tide-booking-cta-padding: 10px 20px;
+  --tide-booking-cta-color: var(--tide-booking-white);
+  --tide-booking-cta-background: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+  --tide-booking-cta-font-family: var(--tide-booking-font-body);
+  --tide-booking-cta-font-size: 16px;
+  --tide-booking-cta-font-size-xs: 18px;
+  --tide-booking-cta-font-weight: 400;
+  --tide-booking-cta-text-decoration: none;
+  --tide-booking-cta-border: none;
+  --tide-booking-cta-border-radius: 5px;
+  --tide-booking-cta-icon-color: var(--tide-booking-white);
+  --tide-booking-cta-icon-size: 16px;
+
+  --tide-booking-cta-background-hover: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+  --tide-booking-cta-color-hover: var(--tide-booking-white);
+  --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
+  --tide-booking-cta-border-hover: none;
+  --tide-booking-cta-text-decoration-hover: none;
+
+  --tide-booking-cta-background-focus: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+  --tide-booking-cta-color-focus: var(--tide-booking-white);
+  --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
+  --tide-booking-cta-border-focus: none;
+  --tide-booking-cta-text-decoration-focus: none;
+
+  --tide-booking-cta-height-secondary: 25px;
+  --tide-booking-cta-height-xs-secondary: 30px;
+  --tide-booking-cta-width-secondary: auto;
+  --tide-booking-cta-padding-secondary: 0px;
+  --tide-booking-cta-margin-secondary: 0px;
+  --tide-booking-cta-background-secondary: var(--tide-booking-transparent);
+  --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
+  --tide-booking-cta-border-secondary: none;
+  --tide-booking-cta-border-radius-secondary: 5px;
+  --tide-booking-cta-text-decoration-secondary: underline;
+  --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
+  --tide-booking-cta-font-size-secondary: 16px;
+  --tide-booking-cta-font-size-xs-secondary: 18px;
+  --tide-booking-cta-font-weight-secondary: 400;
+  --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
+  --tide-booking-cta-icon-size-secondary: 16px;
+
+  --tide-booking-cta-background-secondary-hover: var(--tide-booking-transparent);
+  --tide-booking-cta-color-secondary-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-icon-color-secondary-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-border-secondary-hover: none;
+  --tide-booking-cta-text-decoration-secondary-hover: underline;
+
+  --tide-booking-cta-background-secondary-focus: var(--tide-booking-transparent);
+  --tide-booking-cta-color-secondary-focus: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-icon-color-secondary-focus: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-border-secondary-focus: none;
+  --tide-booking-cta-text-decoration-secondary-focus: underline;
+
+  // ─── Dropdown ──────────────────────────────────────────────────────────────
+  --tide-booking-dropdown-background: var(--tide-booking-white);
+  --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-medium);
+  --tide-booking-dropdown-border-radius: 5px;
+  --tide-booking-dropdown-color: var(--tide-booking-black);
+  --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
+  --tide-booking-dropdown-border-hover: 1.5px solid var(--tide-booking-gray-medium);
+  --tide-booking-dropdown-color-hover: var(--tide-booking-black);
+  --tide-booking-dropdown-background-hover: var(--tide-booking-white);
+  --tide-booking-dropdown-border-focus: 1.5px solid var(--tide-booking-color-primary-light);
+  --tide-booking-dropdown-color-focus: var(--tide-booking-black);
+  --tide-booking-dropdown-background-focus: var(--tide-booking-white);
+  --tide-booking-dropdown-arrow-color: var(--tide-booking-gray-dark);
+  --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
+  --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
+
+  // ─── Toggle switch (checkbox) ──────────────────────────────────────────────
+  --tide-booking-toggle-switch-background: var(--tide-booking-gray-checkbox-bg);
+  --tide-booking-toggle-switch-background-toggled: var(--tide-booking-color-primary);
+  --tide-booking-toggle-switch-after-color: var(--tide-booking-white);
+
+  // ─── Loader / spinner ──────────────────────────────────────────────────────
+  --tide-booking-spinner-border: 5px solid rgba(255, 255, 255, 0.2);
+  --tide-booking-spinner-border-top-color: #dce1ff;
+  --tide-booking-spinner-animation-color: var(--tide-booking-color-primary);
+
+  // ─── Tide form — group card ────────────────────────────────────────────────
+  --tide-form-group-background: var(--tide-booking-white);
+  --tide-form-group-border: none;
+  --tide-form-group-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --tide-form-group-border-radius: 24px;
+  --tide-form-group-padding: 30px;
+  --tide-form-group-padding-sm: 40px 60px;
+  --tide-form-groups-gap: 20px;
+
+  // ─── Tide form — group title ───────────────────────────────────────────────
+  --tide-form-group-title-color: var(--tide-booking-heading-color);
+  --tide-form-group-title-font-size: var(--tide-booking-h2);
+
+  // ─── Tide form — fields layout ─────────────────────────────────────────────
+  --tide-form-fields-gap: 20px;
+  --tide-form-fields-row-gap: 25px;
+
+  // ─── Tide form — field error ───────────────────────────────────────────────
+  --tide-form-field-error-color: var(--tide-booking-invalid-dark);
+  --tide-form-field-error-font-size: 13px;
+
+  // ─── Tide form — required marker ───────────────────────────────────────────
+  --tide-form-field-required-color: var(--tide-booking-invalid-dark);
+
+  // ─── Datepicker ────────────────────────────────────────────────────────────
+  --tide-booking-datepicker-container-background: rgba(255, 255, 255, 0.97);
+  --tide-booking-datepicker-container-border: 1.5px solid var(--tide-booking-gray-border-light);
+
+  --tide-booking-datepicker-prev-next-color: var(--tide-booking-color-primary);
+  --tide-booking-datepicker-prev-next-background: var(--tide-booking-transparent);
+
+  --tide-booking-datepicker-day-labels-color: var(--tide-booking-black);
+
+  --tide-booking-datepicker-month-color: var(--tide-booking-black);
+  --tide-booking-datepicker-month-font: var(--tide-booking-font-heading);
+
+  --tide-booking-datepicker-day-color: var(--tide-booking-gray-dark);
+  --tide-booking-datepicker-day-background: var(--tide-booking-gray-xlight);
+  --tide-booking-datepicker-day-border: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-datepicker-day-border-radius: 5px;
+
+  --tide-booking-datepicker-day-border-hover: 1.5px solid var(--tide-booking-color-primary);
+  --tide-booking-datepicker-day-background-hover: var(--tide-booking-gray-xlight);
+  --tide-booking-datepicker-day-color-hover: var(--tide-booking-color-primary);
+
+  --tide-booking-datepicker-day-border-selected: 1.5px solid var(--tide-booking-color-primary);
+  --tide-booking-datepicker-day-background-selected: var(--tide-booking-color-primary);
+  --tide-booking-datepicker-day-color-selected: var(--tide-booking-white);
+
+  --tide-booking-datepicker-day-border-selected-hover: 1.5px solid var(--tide-booking-color-primary-light);
+  --tide-booking-datepicker-day-background-selected-hover: var(--tide-booking-color-primary-light);
+  --tide-booking-datepicker-day-color-selected-hover: var(--tide-booking-white);
+
+  --tide-booking-datepicker-day-color-disabled: var(--tide-booking-gray-medium);
+  --tide-booking-datepicker-day-background-disabled: var(--tide-booking-gray-xlight);
+  --tide-booking-datepicker-day-border-disabled: 1.5px solid var(--tide-booking-gray-border-light);
+
+  --tide-booking-datepicker-day-color-outside-month: var(--tide-booking-gray-medium);
+  --tide-booking-datepicker-day-background-outside-month: transparent;
+  --tide-booking-datepicker-day-border-outside-month: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-datepicker-day-opacity-outside-month: 0.6;
+
+  //STEP-INDICATORS
+  --tide-booking-step-indicators-line-trough: 2px dashed var(--tide-booking-gray-medium);
+
+  --tide-booking-step-indicators-icon-color: var(--tide-booking-black);
+  --tide-booking-step-indicators-icon-background: var(--tide-booking-white);
+  --tide-booking-step-indicators-icon-border: 1px solid var(--tide-booking-gray-border-light);
+  --tide-booking-step-indicators-icon-border-radius: 50%;
+  --tide-booking-step-indicators-icon-font-family: var(--tide-booking-font-heading);
+  --tide-booking-step-indicators-icon-font-size: 16px;
+  --tide-booking-step-indicators-icon-font-weight: 400;
+  --tide-booking-step-indicators-icon-color-text: var(--tide-booking-black);
+
+  //STEP-INDICATORS--ACTIVE
+  --tide-booking-step-indicators-icon-color-active: var(--tide-booking-white);
+  --tide-booking-step-indicators-icon-background-active: var(--tide-booking-color-primary);
+  --tide-booking-step-indicators-icon-border-active: 1px solid var(--tide-booking-color-primary);
+  --tide-booking-step-indicators-icon-check-color-active: var(--tide-booking-white);
+  --tide-booking-step-indicators-icon-color-text-active: var(--tide-booking-color-primary);
+
+  //STEP-INDICATORS--COMPLETED
+  --tide-booking-step-indicators-icon-color-completed: var(--tide-booking-white);
+  --tide-booking-step-indicators-icon-background-completed: var(--tide-booking-color-primary);
+  --tide-booking-step-indicators-icon-border-completed: 1px solid var(--tide-booking-color-primary);
+  --tide-booking-step-indicators-icon-check-color-completed: var(--tide-booking-white);
+  --tide-booking-step-indicators-icon-color-text-completed: var(--tide-booking-transparent);
+}

package/styles/tide-form.scss

@@ -0,0 +1,56 @@
+@import './tide-form-variables';
+@import './font';
+
+#tide-form {
+  @import './components/mixins';
+  @import './components/placeholders';
+  @import './components/base';
+  @import './components/form';
+  @import './components/button';
+  @import './components/cta';
+
+  @import './components/step-indicators';
+  @import './components/tree';
+  @import './components/booking';
+  @import './components/checkbox';
+  @import './components/radiobutton';
+  @import './components/dropdown';
+  @import './components/loader';
+  @import './components/date-range-picker';
+  @import './components/tide-form';
+  @import './components/contact';
+
+  @extend %reset;
+  @include body;
+
+  %scrollbar-none {
+    &::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+    }
+
+    &::-webkit-scrollbar-track {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  %scrollbar-thin {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      padding: 2px;
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: #cbcbcb;
+    }
+  }
+
+  @extend %scrollbar-thin;
+}

package/.claude/settings.local.json

@@ -1,11 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm run *)",
-      "Bash(npm ci *)",
-      "Bash(git log *)",
-      "Bash(npx tsc *)",
-      "Bash(echo \"=== tsc exit: $? ===\")"
-    ]
-  }
-}

package/.husky/pre-commit

@@ -1,22 +0,0 @@
-# ──────────────────────────────────────────────────────────────────────────────
-# EVALUATION: introduced as part of TIDESUPP-75 follow-up work.
-#
-# Goal of this hook: only run prettier on the files the developer actually
-# touched, instead of `prettier --write .` over the whole repo. The old hook
-# silently rewrote unrelated files on every commit and left the working tree
-# dirty afterwards — see the long file list in the TortoiseGit commit dialog
-# that triggered this change.
-#
-# lint-staged is the standard tool for this. It also handles edge cases the
-# previous hand-rolled shell script didn't (filenames with spaces, partial
-# staging via `git add -p`, etc.). Config lives in package.json under the
-# "lint-staged" key.
-#
-# Status: needs a few real-world commits to confirm it behaves well across
-# everyone's git UI (TortoiseGit, command line, VS Code, IntelliJ). If issues
-# come up, revert this file from git history and we'll fall back to a more
-# conservative formatter pipeline.
-#
-# Requires: `npm install --save-dev lint-staged` at the repo root.
-# ──────────────────────────────────────────────────────────────────────────────
-npx lint-staged

package/.nvmrc

@@ -1 +0,0 @@
-v20.10.0

package/.prettierignore

@@ -1,32 +0,0 @@
-# Generated / vendored
-node_modules/
-dist/
-build/
-coverage/
-
-# Lockfiles — auto-generated, will be rewritten by npm
-package-lock.json
-yarn.lock
-pnpm-lock.yaml
-
-# Editor / OS / tool local data
-.idea/
-.vscode/
-.claude/
-.husky/_/
-
-# Binaries that prettier shouldn't touch
-*.svg
-*.ico
-*.png
-*.jpg
-*.jpeg
-*.gif
-*.webp
-*.woff
-*.woff2
-*.ttf
-*.eot
-
-# Logs
-*.log

package/.prettierrc

@@ -1,9 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "printWidth": 160,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "bracketSameLine": true
-}

package/.vs/ProjectSettings.json

@@ -1,3 +0,0 @@
-{
-  "CurrentProjectSetting": null
-}

package/.vs/VSWorkspaceState.json

@@ -1,5 +0,0 @@
-{
-  "ExpandedNodes": [""],
-  "SelectedNode": "\\D:\\2.0. Qite\\Tide-Booking-Component\\tide-booking-component",
-  "PreviewInSolutionExplorer": false
-}