@mirantes-micro/foundation-design-system 1.2.92 → 1.2.94

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mirantes-micro/foundation-design-system",
   "description": "A scalable and customizable design system package featuring a collection of reusable React components, utility functions, and context providers. Built to enforce visual and functional consistency across applications, this package offers accessible, themeable UI elements, shared logic through utility helpers, and context-based providers for managing global state such as themes, modals, and user sessions.",
-  "version": "1.2.92",
+  "version": "1.2.94",
   "license": "MIT",
   "author": {
     "name": "Mirantes Frontend team"
@@ -22,7 +22,30 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/*"
+    "dist/*",
+    "src/components/tiptap-node/blockquote-node/blockquote-node.css",
+    "src/components/tiptap-node/code-block-node/code-block-node.css",
+    "src/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.css",
+    "src/components/tiptap-node/image-node/image-node.css",
+    "src/components/tiptap-node/heading-node/heading-node.css",
+    "src/components/tiptap-node/image-upload-node/image-upload-node.css",
+    "src/components/tiptap-node/list-node/list-node.css",
+    "src/components/tiptap-node/paragraph-node/paragraph-node.css",
+    "src/components/tiptap-templates/simple/simple-editor.css",
+    "src/components/tiptap-ui/color-highlight-button/color-highlight-button.css",
+    "src/components/tiptap-ui-primitive/badge/badge-colors.css",
+    "src/components/tiptap-ui-primitive/badge/badge-group.css",
+    "src/components/tiptap-ui-primitive/badge/badge.css",
+    "src/components/tiptap-ui-primitive/button/button.css",
+    "src/components/tiptap-ui-primitive/button/button-group.css",
+    "src/components/tiptap-ui-primitive/button/button-colors.css",
+    "src/components/tiptap-ui-primitive/card/card.css",
+    "src/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.css",
+    "src/components/tiptap-ui-primitive/input/input.css",
+    "src/components/tiptap-ui-primitive/popover/popover.css",
+    "src/components/tiptap-ui-primitive/separator/separator.css",
+    "src/components/tiptap-ui-primitive/toolbar/toolbar.css",
+    "src/components/tiptap-ui-primitive/tooltip/tooltip.css"
   ],
   "scripts": {
     "dev": "webpack serve --mode development",

package/src/components/tiptap-node/blockquote-node/blockquote-node.css

@@ -0,0 +1,35 @@
+.tiptap.ProseMirror {
+  --blockquote-bg-color: var(--tt-gray-light-900);
+}
+
+.dark .tiptap.ProseMirror {
+  --blockquote-bg-color: var(--tt-gray-dark-900);
+}
+
+/* =====================
+     BLOCKQUOTE
+     ===================== */
+.tiptap.ProseMirror blockquote {
+  position: relative;
+  padding-left: 1em;
+  padding-top: 0.375em;
+  padding-bottom: 0.375em;
+  margin: 1.5rem 0;
+}
+
+.tiptap.ProseMirror blockquote p {
+  margin-top: 0;
+}
+
+.tiptap.ProseMirror blockquote::before,
+.tiptap.ProseMirror blockquote.is-empty::before {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 0.25em;
+  background-color: var(--blockquote-bg-color);
+  content: "";
+  border-radius: 0;
+}

package/src/components/tiptap-node/code-block-node/code-block-node.css

@@ -0,0 +1,51 @@
+.tiptap.ProseMirror {
+  --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
+  --tt-inline-code-text-color: var(--tt-gray-light-a-700);
+  --tt-inline-code-border-color: var(--tt-gray-light-a-200);
+  --tt-codeblock-bg: var(--tt-gray-light-a-50);
+  --tt-codeblock-text: var(--tt-gray-light-a-800);
+  --tt-codeblock-border: var(--tt-gray-light-a-200);
+}
+
+.dark .tiptap.ProseMirror {
+  --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
+  --tt-inline-code-text-color: var(--tt-gray-dark-a-700);
+  --tt-inline-code-border-color: var(--tt-gray-dark-a-200);
+  --tt-codeblock-bg: var(--tt-gray-dark-a-50);
+  --tt-codeblock-text: var(--tt-gray-dark-a-800);
+  --tt-codeblock-border: var(--tt-gray-dark-a-200);
+}
+
+/* =====================
+   CODE FORMATTING
+   ===================== */
+
+.tiptap.ProseMirror code {
+  background-color: var(--tt-inline-code-bg-color);
+  color: var(--tt-inline-code-text-color);
+  border: 1px solid var(--tt-inline-code-border-color);
+  font-family: "JetBrains Mono NL", monospace;
+  font-size: 0.875em;
+  line-height: 1.4;
+  border-radius: 6px/0.375rem;
+  padding: 0.1em 0.2em;
+}
+
+.tiptap.ProseMirror pre {
+  background-color: var(--tt-codeblock-bg);
+  color: var(--tt-codeblock-text);
+  border: 1px solid var(--tt-codeblock-border);
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  padding: 1em;
+  font-size: 1rem;
+  border-radius: 6px/0.375rem;
+}
+
+.tiptap.ProseMirror pre code {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  -webkit-text-fill-color: inherit;
+  color: inherit;
+}

package/src/components/tiptap-node/heading-node/heading-node.css

@@ -0,0 +1,43 @@
+.tiptap.ProseMirror h1,
+.tiptap.ProseMirror h2,
+.tiptap.ProseMirror h3,
+.tiptap.ProseMirror h4 {
+  position: relative;
+  color: inherit;
+  font-style: inherit;
+}
+
+.tiptap.ProseMirror h1:first-child,
+.tiptap.ProseMirror h1:first-of-type,
+.tiptap.ProseMirror h2:first-child,
+.tiptap.ProseMirror h2:first-of-type,
+.tiptap.ProseMirror h3:first-child,
+.tiptap.ProseMirror h3:first-of-type,
+.tiptap.ProseMirror h4:first-child,
+.tiptap.ProseMirror h4:first-of-type {
+  margin-top: 0;
+}
+
+.tiptap.ProseMirror h1 {
+  font-size: 1.5em;
+  font-weight: 700;
+  margin-top: 3em;
+}
+
+.tiptap.ProseMirror h2 {
+  font-size: 1.25em;
+  font-weight: 700;
+  margin-top: 2.5em;
+}
+
+.tiptap.ProseMirror h3 {
+  font-size: 1.125em;
+  font-weight: 600;
+  margin-top: 2em;
+}
+
+.tiptap.ProseMirror h4 {
+  font-size: 1em;
+  font-weight: 600;
+  margin-top: 2em;
+}

package/src/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.css

@@ -0,0 +1,25 @@
+.tiptap.ProseMirror {
+  --horizontal-rule-color: var(--tt-gray-light-a-200);
+
+  .dark & {
+    --horizontal-rule-color: var(--tt-gray-dark-a-200);
+  }
+}
+
+/* =====================
+     HORIZONTAL RULE
+     ===================== */
+.tiptap.ProseMirror {
+  hr {
+    border: none;
+    height: 1px;
+    background-color: var(--horizontal-rule-color);
+  }
+
+  [data-type="horizontalRule"] {
+    margin-top: 2.25em;
+    margin-bottom: 2.25em;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+}

package/src/components/tiptap-node/image-node/image-node.css

@@ -0,0 +1,29 @@
+.tiptap.ProseMirror img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.tiptap.ProseMirror>img:not([data-type="emoji"] img) {
+  margin: 2rem 0;
+  outline: 0.125rem solid transparent;
+  border-radius: var(--tt-radius-xs, 0.25rem);
+}
+
+.tiptap.ProseMirror img:not([data-type="emoji"] img).ProseMirror-selectednode {
+  outline-color: var(--tt-brand-color-500);
+}
+
+/* Thread image handling */
+.tiptap.ProseMirror .tiptap-thread:has(> img) {
+  margin: 2rem 0;
+}
+
+.tiptap.ProseMirror .tiptap-thread:has(> img) img {
+  outline: 0.125rem solid transparent;
+  border-radius: var(--tt-radius-xs, 0.25rem);
+}
+
+.tiptap.ProseMirror .tiptap-thread img {
+  margin: 0;
+}

package/src/components/tiptap-node/image-upload-node/image-upload-node.css

@@ -0,0 +1,239 @@
+:root {
+  --tiptap-image-upload-active: var(--tt-brand-color-500);
+  --tiptap-image-upload-progress-bg: var(--tt-brand-color-50);
+  --tiptap-image-upload-icon-bg: var(--tt-brand-color-500);
+
+  --tiptap-image-upload-text-color: var(--tt-gray-light-a-700);
+  --tiptap-image-upload-subtext-color: var(--tt-gray-light-a-400);
+  --tiptap-image-upload-border: var(--tt-gray-light-a-300);
+  --tiptap-image-upload-border-hover: var(--tt-gray-light-a-400);
+  --tiptap-image-upload-border-active: var(--tt-brand-color-500);
+
+  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-light-a-200);
+  --tiptap-image-upload-icon-doc-border: var(--tt-gray-light-300);
+  --tiptap-image-upload-icon-color: var(--white);
+}
+
+.dark {
+  --tiptap-image-upload-active: var(--tt-brand-color-400);
+  --tiptap-image-upload-progress-bg: var(--tt-brand-color-900);
+  --tiptap-image-upload-icon-bg: var(--tt-brand-color-400);
+
+  --tiptap-image-upload-text-color: var(--tt-gray-dark-a-700);
+  --tiptap-image-upload-subtext-color: var(--tt-gray-dark-a-400);
+  --tiptap-image-upload-border: var(--tt-gray-dark-a-300);
+  --tiptap-image-upload-border-hover: var(--tt-gray-dark-a-400);
+  --tiptap-image-upload-border-active: var(--tt-brand-color-400);
+
+  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-dark-a-200);
+  --tiptap-image-upload-icon-doc-border: var(--tt-gray-dark-300);
+  --tiptap-image-upload-icon-color: var(--black);
+}
+
+.tiptap-image-upload {
+  margin: 2rem 0;
+}
+
+.tiptap-image-upload input[type="file"] {
+  display: none;
+}
+
+.tiptap-image-upload .tiptap-image-upload-dropzone {
+  position: relative;
+  width: 3.125rem;
+  height: 3.75rem;
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: center;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.tiptap-image-upload .tiptap-image-upload-icon-container {
+  position: absolute;
+  width: 1.75rem;
+  height: 1.75rem;
+  bottom: 0;
+  right: 0;
+  background-color: var(--tiptap-image-upload-icon-bg);
+  border-radius: var(--tt-radius-lg, 0.75rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tiptap-image-upload .tiptap-image-upload-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--tiptap-image-upload-icon-color);
+}
+
+.tiptap-image-upload .tiptap-image-upload-dropzone-rect-primary {
+  color: var(--tiptap-image-upload-icon-doc-bg);
+  position: absolute;
+}
+
+.tiptap-image-upload .tiptap-image-upload-dropzone-rect-secondary {
+  position: absolute;
+  top: 0;
+  right: 0.25rem;
+  bottom: 0;
+  color: var(--tiptap-image-upload-icon-doc-border);
+}
+
+.tiptap-image-upload .tiptap-image-upload-text {
+  color: var(--tiptap-image-upload-text-color);
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: normal;
+}
+
+.tiptap-image-upload .tiptap-image-upload-text em {
+  font-style: normal;
+  text-decoration: underline;
+}
+
+.tiptap-image-upload .tiptap-image-upload-subtext {
+  color: var(--tiptap-image-upload-subtext-color);
+  font-weight: 600;
+  line-height: normal;
+  font-size: 0.75rem;
+}
+
+.tiptap-image-upload .tiptap-image-upload-drag-area {
+  padding: 2rem 1.5rem;
+  border: 1.5px dashed var(--tiptap-image-upload-border);
+  border-radius: var(--tt-radius-md, 0.5rem);
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+.tiptap-image-upload .tiptap-image-upload-drag-area:hover {
+  border-color: var(--tiptap-image-upload-border-hover);
+}
+
+.tiptap-image-upload .tiptap-image-upload-drag-area.drag-active {
+  border-color: var(--tiptap-image-upload-border-active);
+  background-color: rgba(var(--tiptap-image-upload-active-rgb, 0, 123, 255), 0.05);
+}
+
+.tiptap-image-upload .tiptap-image-upload-drag-area.drag-over {
+  border-color: var(--tiptap-image-upload-border-active);
+  background-color: rgba(var(--tiptap-image-upload-active-rgb, 0, 123, 255), 0.1);
+}
+
+.tiptap-image-upload .tiptap-image-upload-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.25rem;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.tiptap-image-upload .tiptap-image-upload-previews {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.tiptap-image-upload .tiptap-image-upload-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--tiptap-image-upload-border);
+  margin-bottom: 0.5rem;
+}
+
+.tiptap-image-upload .tiptap-image-upload-header span {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--tiptap-image-upload-text-color);
+}
+
+/* === Individual File Preview === */
+.tiptap-image-upload .tiptap-image-upload-preview {
+  position: relative;
+  border-radius: var(--tt-radius-md, 0.5rem);
+  overflow: hidden;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-progress {
+  position: absolute;
+  inset: 0;
+  background-color: var(--tiptap-image-upload-progress-bg);
+  transition: all 300ms ease-out;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-preview-content {
+  position: relative;
+  border: 1px solid var(--tiptap-image-upload-border);
+  border-radius: var(--tt-radius-md, 0.5rem);
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  height: 2rem;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-icon {
+  padding: 0.5rem;
+  background-color: var(--tiptap-image-upload-icon-bg);
+  border-radius: var(--tt-radius-lg, 0.75rem);
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-icon svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--tiptap-image-upload-icon-color);
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions .tiptap-image-upload-progress-text {
+  font-size: 0.75rem;
+  color: var(--tiptap-image-upload-border-active);
+  font-weight: 600;
+}
+
+.tiptap.ProseMirror.ProseMirror-focused .ProseMirror-selectednode .tiptap-image-upload-drag-area {
+  border-color: var(--tiptap-image-upload-active);
+}
+
+@media (max-width: 480px) {
+  .tiptap-image-upload .tiptap-image-upload-drag-area {
+    padding: 1.5rem 1rem;
+  }
+
+  .tiptap-image-upload .tiptap-image-upload-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .tiptap-image-upload .tiptap-image-upload-preview-content {
+    padding: 0.75rem;
+  }
+}

package/src/components/tiptap-node/list-node/list-node.css

@@ -0,0 +1,151 @@
+.tiptap.ProseMirror {
+  --tt-checklist-bg-color: var(--tt-gray-light-a-100);
+  --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-border-color: var(--tt-gray-light-a-200);
+  --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-check-icon-color: var(--white);
+  --tt-checklist-text-active: var(--tt-gray-light-a-500);
+}
+
+.dark .tiptap.ProseMirror {
+  --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
+  --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
+  --tt-checklist-border-color: var(--tt-gray-dark-a-200);
+  --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
+  --tt-checklist-check-icon-color: var(--black);
+  --tt-checklist-text-active: var(--tt-gray-dark-a-500);
+}
+
+/* LISTS */
+.tiptap.ProseMirror ol,
+.tiptap.ProseMirror ul {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  padding-left: 1.5em;
+}
+
+.tiptap.ProseMirror ol:first-child,
+.tiptap.ProseMirror ul:first-child {
+  margin-top: 0;
+}
+
+.tiptap.ProseMirror ol:last-child,
+.tiptap.ProseMirror ul:last-child {
+  margin-bottom: 0;
+}
+
+.tiptap.ProseMirror ol ol,
+.tiptap.ProseMirror ol ul,
+.tiptap.ProseMirror ul ol,
+.tiptap.ProseMirror ul ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tiptap.ProseMirror li p {
+  margin-top: 0;
+  line-height: 1.6;
+}
+
+/* Ordered lists */
+.tiptap.ProseMirror ol {
+  list-style: decimal;
+}
+
+.tiptap.ProseMirror ol ol {
+  list-style: lower-alpha;
+}
+
+.tiptap.ProseMirror ol ol ol {
+  list-style: lower-roman;
+}
+
+/* Unordered lists */
+.tiptap.ProseMirror ul:not([data-type="taskList"]) {
+  list-style: disc;
+}
+
+.tiptap.ProseMirror ul:not([data-type="taskList"]) ul {
+  list-style: circle;
+}
+
+.tiptap.ProseMirror ul:not([data-type="taskList"]) ul ul {
+  list-style: square;
+}
+
+/* Task lists */
+.tiptap.ProseMirror ul[data-type="taskList"] {
+  padding-left: 0.25em;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li:not(:has(> p:first-child)) {
+  list-style-type: none;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li[data-checked="true"]>div>p {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li[data-checked="true"]>div>p span {
+  text-decoration: line-through;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li label {
+  position: relative;
+  padding-top: 0.375rem;
+  padding-right: 0.5rem;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li label input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li label span {
+  display: block;
+  width: 1em;
+  height: 1em;
+  border: 1px solid var(--tt-checklist-border-color);
+  border-radius: var(--tt-radius-xs, 0.25rem);
+  position: relative;
+  cursor: pointer;
+  background-color: var(--tt-checklist-bg-color);
+  transition: background-color 80ms ease-out, border-color 80ms ease-out;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li label span::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.75em;
+  height: 0.75em;
+  background-color: var(--tt-checklist-check-icon-color);
+  opacity: 0;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A...") center/contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22...") center/contain no-repeat;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li label input[type="checkbox"]:checked+span {
+  background: var(--tt-checklist-bg-active-color);
+  border-color: var(--tt-checklist-border-active-color);
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li label input[type="checkbox"]:checked+span::before {
+  opacity: 1;
+}
+
+.tiptap.ProseMirror ul[data-type="taskList"] li div {
+  flex: 1 1 0%;
+  min-width: 0;
+}