@vaneui/md 0.0.3-alpha.20250804165801.513897c → 0.0.3-alpha.20250807150626.4231a8a

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Col, Title, Text, Code, Link, List, ListItem, Card, Divider } from '@vaneui/ui';
+import { Col, Title, Text, Code, Link, Img, List, ListItem, Card, Divider } from '@vaneui/ui';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -8600,7 +8600,7 @@ const MdLink = (props) => {
 
 const MdImage = (props) => {
     const { src, alt, title, ...rest } = props;
-    return (jsx("img", { ...rest, title: title, src: src, alt: alt || "", style: { display: 'block', maxWidth: '100%', height: 'auto', borderRadius: '0.5rem' } }));
+    return (jsx(Img, { ...rest, title: title, src: src, alt: alt || "" }));
 };
 
 const MdList = (props) => {

package/dist/index.js

@@ -8602,7 +8602,7 @@ const MdLink = (props) => {
 
 const MdImage = (props) => {
     const { src, alt, title, ...rest } = props;
-    return (jsxRuntime.jsx("img", { ...rest, title: title, src: src, alt: alt || "", style: { display: 'block', maxWidth: '100%', height: 'auto', borderRadius: '0.5rem' } }));
+    return (jsxRuntime.jsx(ui.Img, { ...rest, title: title, src: src, alt: alt || "" }));
 };
 
 const MdList = (props) => {

package/dist/styles/index.css

@@ -124,6 +124,20 @@
     --filled-border-color-warning: var(--color-amber-600, #d97706);
     --filled-border-color-info: var(--color-cyan-600, #0891b2);
     --filled-border-color-link: var(--color-blue-600, #2563eb);
+
+    /* UI Component Border Radius Sizes */
+    --ui-border-radius-xs: 0.125rem;
+    --ui-border-radius-sm: 0.25rem;
+    --ui-border-radius-md: 0.375rem;
+    --ui-border-radius-lg: 0.5rem;
+    --ui-border-radius-xl: 0.625rem;
+
+    /* Layout Component Border Radius Sizes */
+    --layout-border-radius-xs: 0.375rem;
+    --layout-border-radius-sm: 0.5rem;
+    --layout-border-radius-md: 0.625rem;
+    --layout-border-radius-lg: 0.75rem;
+    --layout-border-radius-xl: 0.875rem;
 }
 /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
 @layer theme {
@@ -230,13 +244,6 @@
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
     --leading-relaxed: 1.625;
-    --radius-xs: 0.125rem;
-    --radius-sm: 0.25rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
-    --radius-2xl: 1rem;
-    --radius-3xl: 1.5rem;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
     --default-transition-duration: 150ms;
@@ -343,6 +350,16 @@
     --filled-border-color-warning: var(--color-amber-600, #d97706);
     --filled-border-color-info: var(--color-cyan-600, #0891b2);
     --filled-border-color-link: var(--color-blue-600, #2563eb);
+    --ui-border-radius-xs: 0.125rem;
+    --ui-border-radius-sm: 0.25rem;
+    --ui-border-radius-md: 0.375rem;
+    --ui-border-radius-lg: 0.5rem;
+    --ui-border-radius-xl: 0.625rem;
+    --layout-border-radius-xs: 0.375rem;
+    --layout-border-radius-sm: 0.5rem;
+    --layout-border-radius-md: 0.625rem;
+    --layout-border-radius-lg: 0.75rem;
+    --layout-border-radius-xl: 0.875rem;
   }
 }
 @layer base {
@@ -491,6 +508,9 @@
   }
 }
 @layer utilities {
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -512,6 +532,12 @@
   .isolate {
     isolation: isolate;
   }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
+  .row-start-1 {
+    grid-row-start: 1;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -569,12 +595,48 @@
   .table-cell {
     display: table-cell;
   }
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+  .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .h-4\.5 {
+    height: calc(var(--spacing) * 4.5);
+  }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
   .h-fit {
     height: fit-content;
   }
   .h-px {
     height: 1px;
   }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+  .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
   .w-fit {
     width: fit-content;
   }
@@ -620,6 +682,9 @@
   .list-disc {
     list-style-type: disc;
   }
+  .appearance-none {
+    appearance: none;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -787,32 +852,41 @@
   .rounded {
     border-radius: 0.25rem;
   }
-  .rounded-2xl {
-    border-radius: var(--radius-2xl);
+  .rounded-\(--layout-border-radius-lg\) {
+    border-radius: var(--layout-border-radius-lg);
   }
-  .rounded-3xl {
-    border-radius: var(--radius-3xl);
+  .rounded-\(--layout-border-radius-md\) {
+    border-radius: var(--layout-border-radius-md);
   }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
+  .rounded-\(--layout-border-radius-sm\) {
+    border-radius: var(--layout-border-radius-sm);
   }
-  .rounded-lg {
-    border-radius: var(--radius-lg);
+  .rounded-\(--layout-border-radius-xl\) {
+    border-radius: var(--layout-border-radius-xl);
   }
-  .rounded-md {
-    border-radius: var(--radius-md);
+  .rounded-\(--layout-border-radius-xs\) {
+    border-radius: var(--layout-border-radius-xs);
   }
-  .rounded-none {
-    border-radius: 0;
+  .rounded-\(--ui-border-radius-lg\) {
+    border-radius: var(--ui-border-radius-lg);
+  }
+  .rounded-\(--ui-border-radius-md\) {
+    border-radius: var(--ui-border-radius-md);
+  }
+  .rounded-\(--ui-border-radius-sm\) {
+    border-radius: var(--ui-border-radius-sm);
   }
-  .rounded-sm {
-    border-radius: var(--radius-sm);
+  .rounded-\(--ui-border-radius-xl\) {
+    border-radius: var(--ui-border-radius-xl);
   }
-  .rounded-xl {
-    border-radius: var(--radius-xl);
+  .rounded-\(--ui-border-radius-xs\) {
+    border-radius: var(--ui-border-radius-xs);
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
   }
-  .rounded-xs {
-    border-radius: var(--radius-xs);
+  .rounded-none {
+    border-radius: 0;
   }
   .border {
     border-style: var(--tw-border-style);
@@ -826,10 +900,6 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
-  }
   .border-\(--border-color-accent\) {
     border-color: var(--border-color-accent);
   }
@@ -1037,6 +1107,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1339,6 +1412,69 @@
   .underline {
     text-decoration-line: underline;
   }
+  .accent-\(--background-color-accent\) {
+    accent-color: var(--background-color-accent);
+  }
+  .accent-\(--background-color-danger\) {
+    accent-color: var(--background-color-danger);
+  }
+  .accent-\(--background-color-default\) {
+    accent-color: var(--background-color-default);
+  }
+  .accent-\(--background-color-info\) {
+    accent-color: var(--background-color-info);
+  }
+  .accent-\(--background-color-link\) {
+    accent-color: var(--background-color-link);
+  }
+  .accent-\(--background-color-primary\) {
+    accent-color: var(--background-color-primary);
+  }
+  .accent-\(--background-color-secondary\) {
+    accent-color: var(--background-color-secondary);
+  }
+  .accent-\(--background-color-success\) {
+    accent-color: var(--background-color-success);
+  }
+  .accent-\(--background-color-tertiary\) {
+    accent-color: var(--background-color-tertiary);
+  }
+  .accent-\(--background-color-warning\) {
+    accent-color: var(--background-color-warning);
+  }
+  .accent-\(--filled-background-color-accent\) {
+    accent-color: var(--filled-background-color-accent);
+  }
+  .accent-\(--filled-background-color-danger\) {
+    accent-color: var(--filled-background-color-danger);
+  }
+  .accent-\(--filled-background-color-default\) {
+    accent-color: var(--filled-background-color-default);
+  }
+  .accent-\(--filled-background-color-info\) {
+    accent-color: var(--filled-background-color-info);
+  }
+  .accent-\(--filled-background-color-link\) {
+    accent-color: var(--filled-background-color-link);
+  }
+  .accent-\(--filled-background-color-primary\) {
+    accent-color: var(--filled-background-color-primary);
+  }
+  .accent-\(--filled-background-color-secondary\) {
+    accent-color: var(--filled-background-color-secondary);
+  }
+  .accent-\(--filled-background-color-success\) {
+    accent-color: var(--filled-background-color-success);
+  }
+  .accent-\(--filled-background-color-tertiary\) {
+    accent-color: var(--filled-background-color-tertiary);
+  }
+  .accent-\(--filled-background-color-warning\) {
+    accent-color: var(--filled-background-color-warning);
+  }
+  .accent-transparent {
+    accent-color: transparent;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -1366,10 +1502,6 @@
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow\/ring {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1470,6 +1602,116 @@
   .ring-inset {
     --tw-ring-inset: inset;
   }
+  .peer-checked\:visible {
+    &:is(:where(.peer):checked ~ *) {
+      visibility: visible;
+    }
+  }
+  .checked\:bg-\(--background-color-accent\) {
+    &:checked {
+      background-color: var(--background-color-accent);
+    }
+  }
+  .checked\:bg-\(--background-color-danger\) {
+    &:checked {
+      background-color: var(--background-color-danger);
+    }
+  }
+  .checked\:bg-\(--background-color-default\) {
+    &:checked {
+      background-color: var(--background-color-default);
+    }
+  }
+  .checked\:bg-\(--background-color-info\) {
+    &:checked {
+      background-color: var(--background-color-info);
+    }
+  }
+  .checked\:bg-\(--background-color-link\) {
+    &:checked {
+      background-color: var(--background-color-link);
+    }
+  }
+  .checked\:bg-\(--background-color-primary\) {
+    &:checked {
+      background-color: var(--background-color-primary);
+    }
+  }
+  .checked\:bg-\(--background-color-secondary\) {
+    &:checked {
+      background-color: var(--background-color-secondary);
+    }
+  }
+  .checked\:bg-\(--background-color-success\) {
+    &:checked {
+      background-color: var(--background-color-success);
+    }
+  }
+  .checked\:bg-\(--background-color-tertiary\) {
+    &:checked {
+      background-color: var(--background-color-tertiary);
+    }
+  }
+  .checked\:bg-\(--background-color-warning\) {
+    &:checked {
+      background-color: var(--background-color-warning);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-accent\) {
+    &:checked {
+      background-color: var(--filled-background-color-accent);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-danger\) {
+    &:checked {
+      background-color: var(--filled-background-color-danger);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-default\) {
+    &:checked {
+      background-color: var(--filled-background-color-default);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-info\) {
+    &:checked {
+      background-color: var(--filled-background-color-info);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-link\) {
+    &:checked {
+      background-color: var(--filled-background-color-link);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-primary\) {
+    &:checked {
+      background-color: var(--filled-background-color-primary);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-secondary\) {
+    &:checked {
+      background-color: var(--filled-background-color-secondary);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-success\) {
+    &:checked {
+      background-color: var(--filled-background-color-success);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-tertiary\) {
+    &:checked {
+      background-color: var(--filled-background-color-tertiary);
+    }
+  }
+  .checked\:bg-\(--filled-background-color-warning\) {
+    &:checked {
+      background-color: var(--filled-background-color-warning);
+    }
+  }
+  .checked\:bg-transparent {
+    &:checked {
+      background-color: transparent;
+    }
+  }
   .hover\:scale-105 {
     &:hover {
       @media (hover: hover) {
@@ -1488,14 +1730,6 @@
       }
     }
   }
-  .hover\:border-none {
-    &:hover {
-      @media (hover: hover) {
-        --tw-border-style: none;
-        border-style: none;
-      }
-    }
-  }
   .hover\:bg-\(--background-color-hover-accent\) {
     &:hover {
       @media (hover: hover) {
@@ -1726,12 +1960,6 @@
       border-width: 1px;
     }
   }
-  .active\:border-none {
-    &:active {
-      --tw-border-style: none;
-      border-style: none;
-    }
-  }
   .active\:bg-\(--background-color-active-accent\) {
     &:active {
       background-color: var(--background-color-active-accent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaneui/md",
-  "version": "0.0.3-alpha.20250804165801.513897c",
+  "version": "0.0.3-alpha.20250807150626.4231a8a",
   "description": "Markdown component for VaneUI - A React component that renders markdown using @vaneui/ui components",
   "author": "",
   "license": "ISC",
@@ -48,7 +48,7 @@
     "playground": "npm run playground:install && npm run playground:dev"
   },
   "peerDependencies": {
-    "@vaneui/ui": "^0.2.1-alpha.20250804164337.82f08ed",
+    "@vaneui/ui": "^0.2.1-alpha.20250807132007.03644e5",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -63,7 +63,7 @@
     "@types/jest": "^29.5.14",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
-    "@vaneui/ui": "^0.2.1-alpha.20250804164337.82f08ed",
+    "@vaneui/ui": "^0.2.1-alpha.20250807132007.03644e5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.4",
     "jsdom": "^26.1.0",