@moduix/react 2.0.0 → 2.2.0

package/dist/components/tree-view/TreeView.css

@@ -1,32 +1,32 @@
-@layer ui.components {
+@layer moduix.components {
   .-ZBX5W_root {
     box-sizing: border-box;
-    width: var(--tree-view-width, 20rem);
-    max-width: var(--tree-view-max-width, 100%);
-    gap: var(--tree-view-root-gap, var(--spacing-2));
+    width: var(--moduix-tree-view-width, 20rem);
+    max-width: var(--moduix-tree-view-max-width, 100%);
+    gap: var(--moduix-tree-view-root-gap, var(--moduix-spacing-2));
     min-width: 0;
-    color: var(--tree-view-color, var(--color-foreground));
+    color: var(--moduix-tree-view-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--tree-view-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .-ZBX5W_label {
-    color: var(--tree-view-label-color, var(--tree-view-color, var(--color-foreground)));
-    font-size: var(--tree-view-label-font-size, var(--text-sm));
-    font-weight: var(--tree-view-label-font-weight, var(--weight-medium));
-    line-height: var(--tree-view-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-tree-view-label-color, var(--moduix-tree-view-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-tree-view-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-tree-view-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tree-view-label-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
   }
 
   .-ZBX5W_tree {
     min-width: 0;
-    color: var(--tree-view-color, var(--color-foreground));
-    font-size: var(--tree-view-item-font-size, var(--text-sm));
-    line-height: var(--tree-view-item-line-height, var(--line-height-text-sm));
+    color: var(--moduix-tree-view-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-tree-view-item-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-tree-view-item-line-height, var(--moduix-line-height-text-sm));
     flex-direction: column;
     display: flex;
   }
@@ -40,69 +40,71 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: var(--tree-view-item-min-height, 2rem);
+    min-height: var(--moduix-tree-view-item-min-height, var(--moduix-size-sm));
     align-items: center;
-    gap: var(--tree-view-item-gap, var(--spacing-2));
-    border: var(--tree-view-item-border-width, 0) solid
-      var(--tree-view-item-border-color, transparent);
-    border-radius: var(--tree-view-item-radius, var(--radius-sm));
-    padding-block: var(--tree-view-item-padding-y, var(--spacing-1));
-    background-color: var(--tree-view-item-bg, transparent);
-    color: var(--tree-view-item-color, var(--tree-view-color, var(--color-foreground)));
+    gap: var(--moduix-tree-view-item-gap, var(--moduix-spacing-2));
+    border: var(--moduix-tree-view-item-border-width, 0) solid
+      var(--moduix-tree-view-item-border-color, transparent);
+    border-radius: var(--moduix-tree-view-item-radius, var(--moduix-radius-sm));
+    padding-block: var(--moduix-tree-view-item-padding-y, var(--moduix-spacing-1));
+    background-color: var(--moduix-tree-view-item-bg, transparent);
+    color: var(--moduix-tree-view-item-color, var(--moduix-tree-view-color, var(--moduix-color-foreground)));
     cursor: pointer;
     font: inherit;
-    outline: var(--tree-view-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--tree-view-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
     text-align: start;
-    transition: background-color var(--tree-view-transition, var(--transition-default)),
-      color var(--tree-view-transition, var(--transition-default)),
-      outline-color var(--tree-view-transition, var(--transition-default)),
-      opacity var(--tree-view-transition, var(--transition-default));
+    transition: background-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-tree-view-transition, var(--moduix-transition-default));
     user-select: none;
-    padding-inline-start: calc(var(--tree-view-item-padding-x, var(--spacing-2)) +
-        ((var(--depth, 1) - 1) * var(--tree-view-indent, 1rem)));
-    padding-inline-end: var(--tree-view-item-padding-x, var(--spacing-2));
+    padding-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) +
+        ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
+    padding-inline-end: var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2));
     text-decoration: none;
     display: flex;
 
     &:hover {
-      background-color: var(--tree-view-item-hover-bg, var(--color-accent));
-      color: var(--tree-view-item-hover-color, var(--color-accent-foreground));
+      background-color: var(--moduix-tree-view-item-hover-bg, var(--moduix-color-accent));
+      color: var(--moduix-tree-view-item-hover-color, var(--moduix-color-accent-foreground));
     }
 
     &:focus-visible, &[data-focus] {
-      outline-color: var(--tree-view-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-selected] {
-      background-color: var(--tree-view-item-selected-bg, var(--color-accent));
-      color: var(--tree-view-item-selected-color, var(--color-accent-foreground));
+      background-color: var(--moduix-tree-view-item-selected-bg, var(--moduix-color-accent));
+      color: var(--moduix-tree-view-item-selected-color, var(--moduix-color-accent-foreground));
     }
 
     &[data-disabled] {
-      color: var(--tree-view-item-disabled-color, var(--color-muted-foreground));
+      color: var(--moduix-tree-view-item-disabled-color, var(--moduix-color-muted-foreground));
       cursor: default;
-      opacity: var(--tree-view-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .-ZBX5W_branchTrigger, .-ZBX5W_branchIndicator, .-ZBX5W_itemIndicator {
-    width: var(--tree-view-indicator-size, 1rem);
-    height: var(--tree-view-indicator-size, 1rem);
-    flex: 0 0 var(--tree-view-indicator-size, 1rem);
-    color: var(--tree-view-indicator-color, currentColor);
+    width: var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
+    height: var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
+    flex: 0 0 var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
+    color: var(--moduix-tree-view-indicator-color, currentColor);
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     & svg {
-      width: var(--tree-view-indicator-icon-size, .875rem);
-      height: var(--tree-view-indicator-icon-size, .875rem);
+      width: var(--moduix-tree-view-indicator-icon-size, var(--moduix-spacing-3-5));
+      height: var(--moduix-tree-view-indicator-icon-size, var(--moduix-spacing-3-5));
     }
   }
 
   .-ZBX5W_branchTrigger, .-ZBX5W_branchIndicator {
-    transition: transform var(--tree-view-transition, var(--transition-default));
+    transition: transform var(--moduix-tree-view-transition, var(--moduix-transition-default));
 
     &[data-state="open"] {
       transform: rotate(90deg);
@@ -111,7 +113,7 @@
 
   .-ZBX5W_branchText, .-ZBX5W_itemText {
     align-items: center;
-    gap: var(--tree-view-item-text-gap, var(--spacing-2));
+    gap: var(--moduix-tree-view-item-text-gap, var(--moduix-spacing-2));
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
@@ -120,9 +122,9 @@
     overflow: hidden;
 
     & svg {
-      width: var(--tree-view-node-icon-size, 1rem);
-      height: var(--tree-view-node-icon-size, 1rem);
-      flex: 0 0 var(--tree-view-node-icon-size, 1rem);
+      width: var(--moduix-tree-view-node-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-tree-view-node-icon-size, var(--moduix-spacing-4));
+      flex: 0 0 var(--moduix-tree-view-node-icon-size, var(--moduix-spacing-4));
     }
   }
 
@@ -132,64 +134,65 @@
     overflow: hidden;
 
     &[data-state="open"] {
-      animation: -ZBX5W_tree-view-slide-down var(--tree-view-content-transition-duration, .15s) ease-out,
-        -ZBX5W_tree-view-fade-in var(--tree-view-content-transition-duration, .15s) ease-out;
+      animation: -ZBX5W_tree-view-slide-down var(--moduix-tree-view-content-transition-duration, .15s) ease-out,
+        -ZBX5W_tree-view-fade-in var(--moduix-tree-view-content-transition-duration, .15s) ease-out;
     }
 
     &[data-state="closed"] {
-      animation: -ZBX5W_tree-view-slide-up var(--tree-view-content-transition-duration, .15s) ease-out,
-        -ZBX5W_tree-view-fade-out var(--tree-view-content-transition-duration, .15s) ease-out;
+      animation: -ZBX5W_tree-view-slide-up var(--moduix-tree-view-content-transition-duration, .15s) ease-out,
+        -ZBX5W_tree-view-fade-out var(--moduix-tree-view-content-transition-duration, .15s) ease-out;
     }
   }
 
   .-ZBX5W_branchIndentGuide {
     z-index: 1;
-    width: var(--tree-view-indent-guide-width, var(--border-width-sm));
-    background-color: var(--tree-view-indent-guide-color, var(--color-border));
+    width: var(--moduix-tree-view-indent-guide-width, var(--moduix-border-width-sm));
+    background-color: var(--moduix-tree-view-indent-guide-color, var(--moduix-color-border));
     top: 0;
     bottom: 0;
     position: absolute;
-    inset-inline-start: calc(var(--tree-view-item-padding-x, var(--spacing-2)) +
-        ((var(--depth, 1) - 1) * var(--tree-view-indent, 1rem)) +
-        (var(--tree-view-indicator-size, 1rem) / 2));
+    inset-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) +
+        ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)) +
+        (var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4)) / 2));
   }
 
   .-ZBX5W_nodeCheckbox {
     box-sizing: border-box;
-    width: var(--tree-view-checkbox-size, 1rem);
-    height: var(--tree-view-checkbox-size, 1rem);
-    flex: 0 0 var(--tree-view-checkbox-size, 1rem);
-    border: var(--tree-view-checkbox-border-width, var(--border-width-sm)) solid
-      var(--tree-view-checkbox-border-color, var(--color-border));
-    border-radius: var(--tree-view-checkbox-radius, var(--radius-xs));
-    background-color: var(--tree-view-checkbox-bg, var(--color-background));
-    color: var(--tree-view-checkbox-color, var(--color-primary-foreground));
-    outline: var(--tree-view-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: var(--tree-view-checkbox-focus-ring-offset, var(--border-width-sm));
-    transition: background-color var(--tree-view-transition, var(--transition-default)),
-      border-color var(--tree-view-transition, var(--transition-default)),
-      outline-color var(--tree-view-transition, var(--transition-default));
+    width: var(--moduix-tree-view-checkbox-size, var(--moduix-spacing-4));
+    height: var(--moduix-tree-view-checkbox-size, var(--moduix-spacing-4));
+    flex: 0 0 var(--moduix-tree-view-checkbox-size, var(--moduix-spacing-4));
+    border: var(--moduix-tree-view-checkbox-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tree-view-checkbox-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tree-view-checkbox-radius, var(--moduix-radius-xs));
+    background-color: var(--moduix-tree-view-checkbox-bg, var(--moduix-color-background));
+    color: var(--moduix-tree-view-checkbox-color, var(--moduix-color-primary-foreground));
+    outline: var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: var(--moduix-tree-view-checkbox-focus-ring-offset, var(--moduix-border-width-sm));
+    transition: background-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-tree-view-transition, var(--moduix-transition-default));
     justify-content: center;
     align-items: center;
     display: inline-flex;
 
     &[data-state="checked"], &[data-state="indeterminate"] {
-      border-color: var(--tree-view-checkbox-checked-bg, var(--color-primary));
-      background-color: var(--tree-view-checkbox-checked-bg, var(--color-primary));
+      border-color: var(--moduix-tree-view-checkbox-checked-bg, var(--moduix-color-primary));
+      background-color: var(--moduix-tree-view-checkbox-checked-bg, var(--moduix-color-primary));
     }
 
     &:focus-visible {
-      outline-color: var(--tree-view-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-disabled] {
       cursor: default;
-      opacity: var(--tree-view-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     & svg {
-      width: var(--tree-view-checkbox-icon-size, .75rem);
-      height: var(--tree-view-checkbox-icon-size, .75rem);
+      width: var(--moduix-tree-view-checkbox-icon-size, var(--moduix-spacing-3));
+      height: var(--moduix-tree-view-checkbox-icon-size, var(--moduix-spacing-3));
     }
   }
 
@@ -201,21 +204,23 @@
 
   .-ZBX5W_nodeRenameInput {
     box-sizing: border-box;
-    border: var(--tree-view-rename-input-border-width, var(--border-width-sm)) solid
-      var(--tree-view-rename-input-border-color, var(--color-ring));
-    border-radius: var(--tree-view-rename-input-radius, var(--radius-xs));
+    border: var(--moduix-tree-view-rename-input-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tree-view-rename-input-border-color, var(--moduix-color-ring));
+    border-radius: var(--moduix-tree-view-rename-input-radius, var(--moduix-radius-xs));
     min-width: 0;
-    padding-block: var(--tree-view-rename-input-padding-y, 0);
-    padding-inline: var(--tree-view-rename-input-padding-x, var(--spacing-1));
-    background-color: var(--tree-view-rename-input-bg, var(--color-background));
-    color: var(--tree-view-rename-input-color, var(--color-foreground));
+    padding-block: var(--moduix-tree-view-rename-input-padding-y, 0);
+    padding-inline: var(--moduix-tree-view-rename-input-padding-x, var(--moduix-spacing-1));
+    background-color: var(--moduix-tree-view-rename-input-bg, var(--moduix-color-background));
+    color: var(--moduix-tree-view-rename-input-color, var(--moduix-color-foreground));
     font: inherit;
-    outline: var(--tree-view-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--tree-view-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
     flex: 1;
 
     &:focus-visible {
-      outline-color: var(--tree-view-focus-ring-color, var(--color-ring));
+      outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
     }
   }
 

package/dist/components/typeset/Typeset.css

@@ -0,0 +1,317 @@
+@layer moduix.components {
+  ._3-ErqG_root {
+    box-sizing: border-box;
+    color: var(--moduix-color-foreground);
+    font-family: var(--moduix-typeset-font-body, inherit);
+    font-size: calc(var(--moduix-typeset-size, 1em) * 1.125);
+    line-height: var(--moduix-typeset-leading, 1.75);
+    overflow-wrap: break-word;
+  }
+
+  @media (width >= 48rem), print {
+    ._3-ErqG_root {
+      font-size: var(--moduix-typeset-size, 1em);
+    }
+  }
+
+  ._3-ErqG_root {
+    & :not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)) {
+      &:where(p) {
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+      }
+
+      &:where(h1, h2, h3, h4, h5, h6) {
+        color: var(--moduix-color-foreground);
+        font-family: var(--moduix-typeset-font-heading, var(--moduix-font-sans));
+        font-weight: var(--moduix-weight-semibold);
+        letter-spacing: -.02em;
+        margin-block-end: 0;
+      }
+
+      &:where(h1) {
+        margin-block-start: var(--moduix-typeset-flow, 1.25em);
+        font-size: 1.75em;
+        line-height: 1.3;
+      }
+
+      &:where(h2) {
+        margin-block-start: calc(var(--moduix-typeset-flow, 1.25em) * 1.4);
+        font-size: 1.25em;
+        line-height: 1.4;
+      }
+
+      &:where(h3) {
+        margin-block-start: var(--moduix-typeset-flow, 1.25em);
+        font-size: 1.125em;
+        line-height: 1.45;
+      }
+
+      &:where(h4) {
+        margin-block-start: var(--moduix-typeset-flow, 1.25em);
+        font-size: 1em;
+        line-height: 1.5;
+      }
+
+      &:where(h5) {
+        color: var(--moduix-color-muted-foreground);
+        font-size: .875em;
+        font-weight: var(--moduix-weight-medium);
+        margin-block-start: calc(var(--moduix-typeset-flow, 1.25em) / .875);
+        line-height: 1.5;
+      }
+
+      &:where(h6) {
+        color: var(--moduix-color-muted-foreground);
+        font-size: .8125em;
+        font-weight: var(--moduix-weight-medium);
+        letter-spacing: .08em;
+        text-transform: uppercase;
+        margin-block-start: calc(var(--moduix-typeset-flow, 1.25em) / .8125);
+        line-height: 1.5;
+      }
+
+      &:where([id]) {
+        scroll-margin-block-start: var(--moduix-typeset-flow, 1.25em);
+      }
+
+      &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+        margin-block-start: 1em;
+      }
+
+      &:where(a) {
+        color: var(--moduix-color-primary);
+        text-underline-offset: .15em;
+        text-decoration: underline .08em;
+      }
+
+      &:where(ul, ol) {
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+        padding-inline-start: 1.5em;
+      }
+
+      &:where(ul) {
+        list-style: outside;
+      }
+
+      &:where(ol) {
+        list-style: decimal;
+      }
+
+      &:where(ul ul) {
+        list-style: circle;
+      }
+
+      &:where(ul ul ul) {
+        list-style: square;
+      }
+
+      &:where(ol ol) {
+        list-style: lower-alpha;
+      }
+
+      &:where(ol ol ol) {
+        list-style: lower-roman;
+      }
+
+      &:where(li)::marker {
+        color: var(--moduix-color-muted-foreground);
+        font-weight: var(--moduix-weight-semibold);
+      }
+
+      &:where(li + li) {
+        margin-block-start: .25em;
+      }
+
+      &:where(li > ul, li > ol) {
+        margin-block-start: .5em;
+      }
+
+      &:where(ul.contains-task-list) {
+        padding-inline-start: .25em;
+        list-style: none;
+      }
+
+      &:where(li.task-list-item > input[type="checkbox"]) {
+        vertical-align: -.1em;
+        accent-color: var(--moduix-color-primary);
+        margin-inline-end: .5em;
+      }
+
+      &:where(blockquote) {
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+        border-inline-start: var(--moduix-border-width-md) solid var(--moduix-color-border);
+        color: var(--moduix-color-muted-foreground);
+        margin-inline: 0;
+        padding-inline-start: 1em;
+      }
+
+      &:where(:not(pre) > code) {
+        border-radius: var(--moduix-radius-sm);
+        background: var(--moduix-color-muted);
+        color: var(--moduix-color-foreground);
+        font-family: var(--moduix-typeset-font-mono, var(--moduix-font-mono));
+        padding: .1em .3em;
+        font-size: .875em;
+      }
+
+      &:where(pre) {
+        max-width: 100%;
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+        border: var(--moduix-border-width-sm) solid var(--moduix-color-border);
+        border-radius: var(--moduix-radius-md);
+        background: var(--moduix-color-muted);
+        color: var(--moduix-color-foreground);
+        font-family: var(--moduix-typeset-font-mono, var(--moduix-font-mono));
+        padding: 1em;
+        font-size: .875em;
+        line-height: 1.6;
+        overflow-x: auto;
+      }
+
+      &:where(pre > code) {
+        color: inherit;
+        font: inherit;
+        background: none;
+        border-radius: 0;
+        padding: 0;
+      }
+
+      &:where(hr) {
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+        border: 0;
+        border-block-start: var(--moduix-border-width-sm) solid var(--moduix-color-border);
+      }
+
+      &:where(table) {
+        width: 100%;
+        max-width: 100%;
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+        border-collapse: separate;
+        border-spacing: 0;
+        border-block-end: var(--moduix-border-width-sm) solid var(--moduix-color-border);
+        font-variant-numeric: tabular-nums;
+        font-size: 1em;
+        line-height: 1.5;
+      }
+
+      &:where(thead th) {
+        font-weight: var(--moduix-weight-medium);
+        text-align: start;
+        white-space: nowrap;
+        padding: .65em 1em;
+      }
+
+      &:where(:is(tbody, tfoot) :is(td, th)) {
+        border-block-start: var(--moduix-border-width-sm) solid var(--moduix-color-border);
+        text-align: start;
+        vertical-align: top;
+        padding: .75em 1em;
+      }
+
+      &:where(tbody th, tfoot th) {
+        font-weight: var(--moduix-weight-medium);
+      }
+
+      &:where(th:first-child, td:first-child) {
+        padding-inline-start: 0;
+      }
+
+      &:where(th[align="center"], td[align="center"]) {
+        text-align: center;
+      }
+
+      &:where(th[align="right"], td[align="right"]) {
+        text-align: end;
+      }
+
+      &:where(img, video) {
+        max-width: 100%;
+        height: auto;
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+        border-radius: var(--moduix-radius-md);
+        display: block;
+      }
+
+      &:where(p img) {
+        margin-block-start: 0;
+      }
+
+      &:where(figure) {
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+        margin-inline: 0;
+      }
+
+      &:where(figcaption, caption) {
+        color: var(--moduix-color-muted-foreground);
+        text-align: center;
+        margin-block-start: .75em;
+        font-size: .875em;
+      }
+
+      &:where(caption) {
+        caption-side: bottom;
+      }
+
+      &:where(details) {
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+      }
+
+      &:where(summary) {
+        cursor: pointer;
+        font-weight: var(--moduix-weight-medium);
+      }
+
+      &:where(summary)::marker {
+        color: var(--moduix-color-muted-foreground);
+      }
+
+      &:where(dl) {
+        margin-block: var(--moduix-typeset-flow, 1.25em) 0;
+      }
+
+      &:where(dt) {
+        font-weight: var(--moduix-weight-medium);
+        margin-block-start: 1em;
+      }
+
+      &:where(dt + dt) {
+        margin-block-start: .25em;
+      }
+
+      &:where(dd) {
+        color: var(--moduix-color-muted-foreground);
+        margin-block-start: .25em;
+        margin-inline-start: 0;
+        padding-inline-start: 1em;
+      }
+
+      &:where(.footnotes, [data-footnotes]) {
+        margin-block: calc(var(--moduix-typeset-flow, 1.25em) * 2) 0;
+        border-block-start: var(--moduix-border-width-sm) solid var(--moduix-color-border);
+        color: var(--moduix-color-muted-foreground);
+        padding-block-start: var(--moduix-typeset-flow, 1.25em);
+        font-size: .875em;
+      }
+    }
+  }
+
+  ._3-ErqG_root > :where(:first-child):not(:where(.not-typeset, [data-not-typeset])), ._3-ErqG_root :where(li > :first-child, blockquote > :first-child, td > :first-child, th > :first-child, dd > :first-child, figure > :first-child, figure > picture > img):not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)) {
+    margin-block-start: 0;
+  }
+
+  ._3-ErqG_scroll {
+    max-width: 100%;
+    overscroll-behavior-inline: contain;
+    margin-block-start: var(--moduix-typeset-flow, 1.25em);
+    overflow-x: auto;
+  }
+
+  ._3-ErqG_root > ._3-ErqG_scroll:first-child, ._3-ErqG_root ._3-ErqG_scroll > * {
+    margin-block-start: 0;
+  }
+
+  ._3-ErqG_root ._3-ErqG_scroll table {
+    width: max-content;
+    max-width: none;
+  }
+}

package/dist/components/typeset/Typeset.d.ts

@@ -0,0 +1,7 @@
+//#region src/components/typeset/Typeset.d.ts
+declare const Typeset: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Scroll: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Typeset };

package/dist/components/typeset/Typeset.js

@@ -0,0 +1,33 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Typeset_module_default from "./Typeset.module.js";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typeset/Typeset.tsx
+const TypesetRoot = forwardRef(function TypesetRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "typeset",
+		"data-part": "root",
+		"data-slot": "typeset",
+		className: clsx(Typeset_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TypesetScroll = forwardRef(function TypesetScroll({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "typeset",
+		"data-part": "scroll",
+		"data-slot": "typeset-scroll",
+		className: clsx(Typeset_module_default.scroll, normalizeClassName(className)),
+		...props
+	});
+});
+const Typeset = Object.assign(TypesetRoot, {
+	Root: TypesetRoot,
+	Scroll: TypesetScroll
+});
+//#endregion
+export { Typeset };

package/dist/components/typeset/Typeset.module.js

@@ -0,0 +1,8 @@
+import './Typeset.css';
+//#region src/components/typeset/Typeset.module.css
+var Typeset_module_default = {
+	"root": "_3-ErqG_root",
+	"scroll": "_3-ErqG_scroll"
+};
+//#endregion
+export { Typeset_module_default as default };