@qtalo/qt-ui-library 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qtalo/qt-ui-library",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -28,11 +28,17 @@
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.1.18"
   },
+  "dependencies": {
+    "dompurify": "^3.3.1",
+    "emojilib": "^4.0.2",
+    "marked": "^17.0.1"
+  },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@ladle/react": "^5.1.1",
     "@tailwindcss/vite": "^4.1.18",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",

package/src/styles/styles.css

@@ -75,7 +75,7 @@
   --color-neutral-900-variant-2: #1f1f1f;
 
   --color-brand-primary: #6558fd;
-  
+
   --color-primary-400: #abaaff;
   --color-primary-400-variant-1: #abaaff;
   --color-primary-500: #6558fd;
@@ -374,3 +374,133 @@ body {
   }
 }
 
+/* Skeleton theme */
+
+:root {
+  --skeleton-base: var(--color-neutral-300-variant-3);
+  --skeleton-highlight: var(--color-neutral-500-variant-4);
+  --skeleton-duration: 4s;
+}
+
+/* Shimmer animation */
+
+@keyframes skeleton-shimmer {
+  from {
+    background-position-x: 200%;
+  }
+  to {
+    background-position-x: -200%;
+  }
+}
+
+/* Skeleton block */
+
+.skeleton {
+  position: relative;
+  overflow: hidden;
+
+  /* Base surface */
+  background-color: var(--skeleton-base);
+
+  /* Shimmer layer */
+  background-image: linear-gradient(
+    110deg,
+    transparent 15%,
+    var(--skeleton-highlight) 50%,
+    transparent 85%
+  );
+
+  background-size: 200% 100%;
+  background-attachment: fixed;
+
+  animation: skeleton-shimmer var(--skeleton-duration) linear infinite;
+}
+
+/* Reduced motion support */
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+    background-image: none;
+  }
+}
+
+/* Normalized content */
+.normalized-content,
+.normalized-content * {
+  font-family: Inter, sans-serif;
+}
+
+.normalized-content pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.normalized-content pre br + br + br {
+  display: none;
+}
+
+.normalized-content p {
+  font-size: 12px;
+  line-height: 150%;
+  margin: 0.5rem 0;
+}
+
+.normalized-content a {
+  text-decoration: underline;
+  color: var(--color-qtneutral-900);
+}
+
+.normalized-content ul,
+.normalized-content ol {
+  padding-left: 1.25rem;
+  margin: 0.5rem 0;
+}
+
+.normalized-content li {
+  margin: 0.5rem 0;
+}
+
+.normalized-content li p {
+  margin: 0;
+}
+
+.normalized-content ul {
+  list-style-type: disc;
+}
+
+.normalized-content ol {
+  list-style-type: decimal;
+}
+
+.normalized-content h1 {
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 140%;
+  margin: 0.5rem 0;
+}
+
+.normalized-content h2 {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 140%;
+  margin: 0.5rem 0;
+}
+
+.normalized-content h3 {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 140%;
+  margin: 0.5rem 0;
+}
+
+.normalized-content h4,
+.marnormalized-contentkdown h5,
+.normalized-content h6 {
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 140%;
+  margin: 0.5rem 0;
+}