@moduix/react 2.0.0 → 2.1.0

package/dist/components/tour/Tour.css

@@ -59,7 +59,7 @@
 
   ._5wc7ja_content {
     --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
-    --arrow-size: var(--tour-arrow-size, .625rem);
+    --arrow-size: var(--tour-arrow-size, var(--spacing-2-5));
     box-sizing: border-box;
     z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--layer-index, 0));
     gap: var(--tour-gap, var(--spacing-1));
@@ -108,7 +108,7 @@
 
   ._5wc7ja_arrow {
     --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
-    --arrow-size: var(--tour-arrow-size, .625rem);
+    --arrow-size: var(--tour-arrow-size, var(--spacing-2-5));
   }
 
   ._5wc7ja_arrowTip {
@@ -144,8 +144,8 @@
 
   ._5wc7ja_closeTrigger {
     box-sizing: border-box;
-    width: var(--tour-close-trigger-size, 1.75rem);
-    height: var(--tour-close-trigger-size, 1.75rem);
+    width: var(--tour-close-trigger-size, var(--spacing-7));
+    height: var(--tour-close-trigger-size, var(--spacing-7));
     border-radius: var(--tour-close-trigger-radius, var(--radius-md));
     background: var(--tour-close-trigger-bg, transparent);
     color: var(--tour-close-trigger-color, var(--color-muted-foreground));
@@ -162,8 +162,8 @@
     inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-4));
 
     & :where(svg) {
-      width: var(--tour-close-trigger-icon-size, .75rem);
-      height: var(--tour-close-trigger-icon-size, .75rem);
+      width: var(--tour-close-trigger-icon-size, var(--spacing-3));
+      height: var(--tour-close-trigger-icon-size, var(--spacing-3));
     }
 
     @media (hover: hover) {
@@ -174,16 +174,16 @@
     }
 
     &:focus-visible {
-      outline: var(--tour-focus-ring-width, var(--border-width-sm)) solid
-        var(--tour-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
+      outline: var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--tour-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     }
   }
 
   ._5wc7ja_closeIcon {
-    --close-button-size: var(--tour-close-trigger-size, 1.75rem);
+    --close-button-size: var(--tour-close-trigger-size, var(--spacing-7));
     --close-button-radius: var(--tour-close-trigger-radius, var(--radius-md));
-    --close-button-icon-size: var(--tour-close-trigger-icon-size, .75rem);
+    --close-button-icon-size: var(--tour-close-trigger-icon-size, var(--spacing-3));
     --close-button-bg: var(--tour-close-trigger-bg, transparent);
     --close-button-bg-hover: var(--tour-close-trigger-bg-hover, var(--color-accent));
     --close-button-color: var(--tour-close-trigger-color, var(--color-muted-foreground));
@@ -205,12 +205,12 @@
 
   ._5wc7ja_actionTrigger {
     box-sizing: border-box;
-    min-height: var(--tour-action-height, 2rem);
+    min-height: var(--tour-action-height, var(--size-sm));
     justify-content: center;
     align-items: center;
     gap: var(--tour-action-gap, var(--spacing-2));
-    padding-block: var(--tour-action-padding-y, .375rem);
-    padding-inline: var(--tour-action-padding-x, .75rem);
+    padding-block: var(--tour-action-padding-y, var(--spacing-1-5));
+    padding-inline: var(--tour-action-padding-x, var(--spacing-3));
     border: var(--tour-action-border-width, var(--border-width-sm)) solid
       var(--tour-action-border-color, var(--color-border));
     border-radius: var(--tour-action-radius, var(--radius-md));
@@ -246,9 +246,9 @@
     }
 
     &:focus-visible {
-      outline: var(--tour-focus-ring-width, var(--border-width-sm)) solid
-        var(--tour-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
+      outline: var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--tour-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     }
 
     &[data-disabled], &:disabled {

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

@@ -40,7 +40,7 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: var(--tree-view-item-min-height, 2rem);
+    min-height: var(--tree-view-item-min-height, var(--size-sm));
     align-items: center;
     gap: var(--tree-view-item-gap, var(--spacing-2));
     border: var(--tree-view-item-border-width, 0) solid
@@ -51,8 +51,9 @@
     color: var(--tree-view-item-color, var(--tree-view-color, var(--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(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--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)),
@@ -87,17 +88,17 @@
   }
 
   .-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);
+    width: var(--tree-view-indicator-size, var(--spacing-4));
+    height: var(--tree-view-indicator-size, var(--spacing-4));
+    flex: 0 0 var(--tree-view-indicator-size, var(--spacing-4));
     color: var(--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(--tree-view-indicator-icon-size, var(--spacing-3-5));
+      height: var(--tree-view-indicator-icon-size, var(--spacing-3-5));
     }
   }
 
@@ -120,9 +121,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(--tree-view-node-icon-size, var(--spacing-4));
+      height: var(--tree-view-node-icon-size, var(--spacing-4));
+      flex: 0 0 var(--tree-view-node-icon-size, var(--spacing-4));
     }
   }
 
@@ -151,20 +152,21 @@
     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));
+        (var(--tree-view-indicator-size, var(--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);
+    width: var(--tree-view-checkbox-size, var(--spacing-4));
+    height: var(--tree-view-checkbox-size, var(--spacing-4));
+    flex: 0 0 var(--tree-view-checkbox-size, var(--spacing-4));
     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: var(--tree-view-focus-ring-width, var(--focus-ring-inset-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)),
@@ -188,8 +190,8 @@
     }
 
     & svg {
-      width: var(--tree-view-checkbox-icon-size, .75rem);
-      height: var(--tree-view-checkbox-icon-size, .75rem);
+      width: var(--tree-view-checkbox-icon-size, var(--spacing-3));
+      height: var(--tree-view-checkbox-icon-size, var(--spacing-3));
     }
   }
 
@@ -210,8 +212,9 @@
     background-color: var(--tree-view-rename-input-bg, var(--color-background));
     color: var(--tree-view-rename-input-color, var(--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(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     flex: 1;
 
     &:focus-visible {

package/dist/components/typeset/Typeset.css

@@ -0,0 +1,317 @@
+@layer ui.components {
+  ._3-ErqG_root {
+    box-sizing: border-box;
+    color: var(--color-foreground);
+    font-family: var(--typeset-font-body, inherit);
+    font-size: calc(var(--typeset-size, 1em) * 1.125);
+    line-height: var(--typeset-leading, 1.75);
+    overflow-wrap: break-word;
+  }
+
+  @media (width >= 48rem), print {
+    ._3-ErqG_root {
+      font-size: var(--typeset-size, 1em);
+    }
+  }
+
+  ._3-ErqG_root {
+    & :not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)) {
+      &:where(p) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+      }
+
+      &:where(h1, h2, h3, h4, h5, h6) {
+        color: var(--color-foreground);
+        font-family: var(--typeset-font-heading, var(--font-sans));
+        font-weight: var(--weight-semibold);
+        letter-spacing: -.02em;
+        margin-block-end: 0;
+      }
+
+      &:where(h1) {
+        margin-block-start: var(--typeset-flow, 1.25em);
+        font-size: 1.75em;
+        line-height: 1.3;
+      }
+
+      &:where(h2) {
+        margin-block-start: calc(var(--typeset-flow, 1.25em) * 1.4);
+        font-size: 1.25em;
+        line-height: 1.4;
+      }
+
+      &:where(h3) {
+        margin-block-start: var(--typeset-flow, 1.25em);
+        font-size: 1.125em;
+        line-height: 1.45;
+      }
+
+      &:where(h4) {
+        margin-block-start: var(--typeset-flow, 1.25em);
+        font-size: 1em;
+        line-height: 1.5;
+      }
+
+      &:where(h5) {
+        color: var(--color-muted-foreground);
+        font-size: .875em;
+        font-weight: var(--weight-medium);
+        margin-block-start: calc(var(--typeset-flow, 1.25em) / .875);
+        line-height: 1.5;
+      }
+
+      &:where(h6) {
+        color: var(--color-muted-foreground);
+        font-size: .8125em;
+        font-weight: var(--weight-medium);
+        letter-spacing: .08em;
+        text-transform: uppercase;
+        margin-block-start: calc(var(--typeset-flow, 1.25em) / .8125);
+        line-height: 1.5;
+      }
+
+      &:where([id]) {
+        scroll-margin-block-start: var(--typeset-flow, 1.25em);
+      }
+
+      &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+        margin-block-start: 1em;
+      }
+
+      &:where(a) {
+        color: var(--color-primary);
+        text-underline-offset: .15em;
+        text-decoration: underline .08em;
+      }
+
+      &:where(ul, ol) {
+        margin-block: var(--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(--color-muted-foreground);
+        font-weight: var(--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(--color-primary);
+        margin-inline-end: .5em;
+      }
+
+      &:where(blockquote) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        border-inline-start: var(--border-width-md) solid var(--color-border);
+        color: var(--color-muted-foreground);
+        margin-inline: 0;
+        padding-inline-start: 1em;
+      }
+
+      &:where(:not(pre) > code) {
+        border-radius: var(--radius-sm);
+        background: var(--color-muted);
+        color: var(--color-foreground);
+        font-family: var(--typeset-font-mono, var(--font-mono));
+        padding: .1em .3em;
+        font-size: .875em;
+      }
+
+      &:where(pre) {
+        max-width: 100%;
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        border: var(--border-width-sm) solid var(--color-border);
+        border-radius: var(--radius-md);
+        background: var(--color-muted);
+        color: var(--color-foreground);
+        font-family: var(--typeset-font-mono, var(--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(--typeset-flow, 1.25em) 0;
+        border: 0;
+        border-block-start: var(--border-width-sm) solid var(--color-border);
+      }
+
+      &:where(table) {
+        width: 100%;
+        max-width: 100%;
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        border-collapse: separate;
+        border-spacing: 0;
+        border-block-end: var(--border-width-sm) solid var(--color-border);
+        font-variant-numeric: tabular-nums;
+        font-size: 1em;
+        line-height: 1.5;
+      }
+
+      &:where(thead th) {
+        font-weight: var(--weight-medium);
+        text-align: start;
+        white-space: nowrap;
+        padding: .65em 1em;
+      }
+
+      &:where(:is(tbody, tfoot) :is(td, th)) {
+        border-block-start: var(--border-width-sm) solid var(--color-border);
+        text-align: start;
+        vertical-align: top;
+        padding: .75em 1em;
+      }
+
+      &:where(tbody th, tfoot th) {
+        font-weight: var(--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(--typeset-flow, 1.25em) 0;
+        border-radius: var(--radius-md);
+        display: block;
+      }
+
+      &:where(p img) {
+        margin-block-start: 0;
+      }
+
+      &:where(figure) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+        margin-inline: 0;
+      }
+
+      &:where(figcaption, caption) {
+        color: var(--color-muted-foreground);
+        text-align: center;
+        margin-block-start: .75em;
+        font-size: .875em;
+      }
+
+      &:where(caption) {
+        caption-side: bottom;
+      }
+
+      &:where(details) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+      }
+
+      &:where(summary) {
+        cursor: pointer;
+        font-weight: var(--weight-medium);
+      }
+
+      &:where(summary)::marker {
+        color: var(--color-muted-foreground);
+      }
+
+      &:where(dl) {
+        margin-block: var(--typeset-flow, 1.25em) 0;
+      }
+
+      &:where(dt) {
+        font-weight: var(--weight-medium);
+        margin-block-start: 1em;
+      }
+
+      &:where(dt + dt) {
+        margin-block-start: .25em;
+      }
+
+      &:where(dd) {
+        color: var(--color-muted-foreground);
+        margin-block-start: .25em;
+        margin-inline-start: 0;
+        padding-inline-start: 1em;
+      }
+
+      &:where(.footnotes, [data-footnotes]) {
+        margin-block: calc(var(--typeset-flow, 1.25em) * 2) 0;
+        border-block-start: var(--border-width-sm) solid var(--color-border);
+        color: var(--color-muted-foreground);
+        padding-block-start: var(--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(--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 };

package/dist/index.d.ts

@@ -75,10 +75,12 @@ import { Tabs, useTabs } from "./components/tabs/Tabs.js";
 import { Text } from "./components/text/Text.js";
 import { Textarea } from "./components/textarea/Textarea.js";
 import { Timer, useTimer, useTimerContext } from "./components/timer/Timer.js";
+import { Typeset } from "./components/typeset/Typeset.js";
 import { Toast, Toaster, createToaster } from "./components/toast/Toast.js";
 import { Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "./components/tour/Tour.js";
 import { TreeView, TreeViewLoadChildrenDetails, TreeViewNodeProviderProps, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext } from "./components/tree-view/TreeView.js";
 import { Toggle, useToggleContext } from "./components/toggle/Toggle.js";
 import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "./components/toggle-group/ToggleGroup.js";
 import { Portal } from "@ark-ui/react/portal";
-export { Accordion, Alert, AngleSlider, AspectRatio, Avatar, Badge, Bleed, Breadcrumbs, Button, Card, Carousel, Checkbox, Clipboard, CloseButton, Collapsible, ColorPicker, Combobox, CommandPalette, Container, DateInput, type DateInputDateValue, DatePicker, type DatePickerDayTableProps, type DatePickerFieldProps, type DatePickerRangeFieldProps, type DatePickerRootProps, type DatePickerRootProviderProps, Dialog, type DialogRootProps, type DialogRootProviderProps, Drawer, Editable, Empty, Field, Fieldset, FileUpload, FloatingPanel, Heading, Highlight, HoverCard, Image, ImageCropper, Input, InputGroup, Kbd, Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, List, Listbox, Marquee, Menu, type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, NativeSelect, NumberInput, Pagination, PasswordInput, PinInput, Popover, Portal, ProgressCircular, ProgressLinear, QrCode, RadioGroup, type RadioGroupItemControlProps, type RadioGroupItemControlSize, type RadioGroupOptionProps, RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize, ScrollArea, SegmentGroup, Select, Separator, Sidebar, SignaturePad, SimpleGrid, Skeleton, Slider, Spinner, SplitButton, Splitter, type SplitterPanelData, Stack, Steps, Swap, Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, Table, Tabs, Tag, TagsInput, Text, Textarea, Timer, Toast, Toaster, Toggle, ToggleGroup, Tooltip, Tour, TreeView, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, createFileTreeCollection, createSplitterRegistry, createToaster, createTreeCollection, parseColor, resizeTriggerAxes, useAccordion, useAngleSlider, useAvatar, useAvatarContext, useCheckbox, useCheckboxGroup, useCollapsible, useColorPicker, useColorPickerContext, useCombobox, useComboboxContext, useDateInput, useDateInputContext, useDatePicker, useDatePickerContext, useDialog, useDialogContext, useDrawer, useEditable, useEditableContext, useField, useFieldContext, useFieldset, useFileUpload, useFileUploadContext, useHoverCard, useHoverCardContext, useImageCropper, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext, useListbox, useListboxContext, useListboxItemContext, useMarquee, useMenu, useNumberInput, useNumberInputContext, usePasswordInput, usePinInput, usePopover, useQrCode, useRadioGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroup, useSidebar, useSignaturePad, useSignaturePadContext, useSlider, useSliderContext, useSplitter, useSplitterContext, useSwapContext, useSwitch, useSwitchContext, useTabs, useTagsInput, useTagsInputContext, useTagsInputItemContext, useTimer, useTimerContext, useToggleContext, useToggleGroup, useToggleGroupContext, useTooltip, useTooltipContext, useTour, useTreeView, useTreeViewNodeContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise };
+import { LocaleProvider, useLocaleContext } from "@ark-ui/react/locale";
+export { Accordion, Alert, AngleSlider, AspectRatio, Avatar, Badge, Bleed, Breadcrumbs, Button, Card, Carousel, Checkbox, Clipboard, CloseButton, Collapsible, ColorPicker, Combobox, CommandPalette, Container, DateInput, type DateInputDateValue, DatePicker, type DatePickerDayTableProps, type DatePickerFieldProps, type DatePickerRangeFieldProps, type DatePickerRootProps, type DatePickerRootProviderProps, Dialog, type DialogRootProps, type DialogRootProviderProps, Drawer, Editable, Empty, Field, Fieldset, FileUpload, FloatingPanel, Heading, Highlight, HoverCard, Image, ImageCropper, Input, InputGroup, Kbd, Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, List, Listbox, LocaleProvider, Marquee, Menu, type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, NativeSelect, NumberInput, Pagination, PasswordInput, PinInput, Popover, Portal, ProgressCircular, ProgressLinear, QrCode, RadioGroup, type RadioGroupItemControlProps, type RadioGroupItemControlSize, type RadioGroupOptionProps, RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize, ScrollArea, SegmentGroup, Select, Separator, Sidebar, SignaturePad, SimpleGrid, Skeleton, Slider, Spinner, SplitButton, Splitter, type SplitterPanelData, Stack, Steps, Swap, Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, Table, Tabs, Tag, TagsInput, Text, Textarea, Timer, Toast, Toaster, Toggle, ToggleGroup, Tooltip, Tour, TreeView, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, Typeset, createFileTreeCollection, createSplitterRegistry, createToaster, createTreeCollection, parseColor, resizeTriggerAxes, useAccordion, useAngleSlider, useAvatar, useAvatarContext, useCheckbox, useCheckboxGroup, useCollapsible, useColorPicker, useColorPickerContext, useCombobox, useComboboxContext, useDateInput, useDateInputContext, useDatePicker, useDatePickerContext, useDialog, useDialogContext, useDrawer, useEditable, useEditableContext, useField, useFieldContext, useFieldset, useFileUpload, useFileUploadContext, useHoverCard, useHoverCardContext, useImageCropper, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext, useListbox, useListboxContext, useListboxItemContext, useLocaleContext, useMarquee, useMenu, useNumberInput, useNumberInputContext, usePasswordInput, usePinInput, usePopover, useQrCode, useRadioGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroup, useSidebar, useSignaturePad, useSignaturePadContext, useSlider, useSliderContext, useSplitter, useSplitterContext, useSwapContext, useSwitch, useSwitchContext, useTabs, useTagsInput, useTagsInputContext, useTagsInputItemContext, useTimer, useTimerContext, useToggleContext, useToggleGroup, useToggleGroupContext, useTooltip, useTooltipContext, useTour, useTreeView, useTreeViewNodeContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise };

package/dist/index.js

@@ -75,10 +75,12 @@ import { Tabs, useTabs } from "./components/tabs/Tabs.js";
 import { Text } from "./components/text/Text.js";
 import { Textarea } from "./components/textarea/Textarea.js";
 import { Timer, useTimer, useTimerContext } from "./components/timer/Timer.js";
+import { Typeset } from "./components/typeset/Typeset.js";
 import { Toast, Toaster, createToaster } from "./components/toast/Toast.js";
 import { Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "./components/tour/Tour.js";
 import { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext } from "./components/tree-view/TreeView.js";
 import { Toggle, useToggleContext } from "./components/toggle/Toggle.js";
 import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "./components/toggle-group/ToggleGroup.js";
 import { Portal } from "@ark-ui/react/portal";
-export { Accordion, Alert, AngleSlider, AspectRatio, Avatar, Badge, Bleed, Breadcrumbs, Button, Card, Carousel, Checkbox, Clipboard, CloseButton, Collapsible, ColorPicker, Combobox, CommandPalette, Container, DateInput, DatePicker, Dialog, Drawer, Editable, Empty, Field, Fieldset, FileUpload, FloatingPanel, Heading, Highlight, HoverCard, Image, ImageCropper, Input, InputGroup, Kbd, Lightbox, LightboxBind, LightboxGallery, LightboxImage, List, Listbox, Marquee, Menu, NativeSelect, NumberInput, Pagination, PasswordInput, PinInput, Popover, Portal, ProgressCircular, ProgressLinear, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, Sidebar, SignaturePad, SimpleGrid, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Steps, Swap, Switch, Table, Tabs, Tag, TagsInput, Text, Textarea, Timer, Toast, Toaster, Toggle, ToggleGroup, Tooltip, Tour, TreeView, createFileTreeCollection, createSplitterRegistry, createToaster, createTreeCollection, parseColor, resizeTriggerAxes, useAccordion, useAngleSlider, useAvatar, useAvatarContext, useCheckbox, useCheckboxGroup, useCollapsible, useColorPicker, useColorPickerContext, useCombobox, useComboboxContext, useDateInput, useDateInputContext, useDatePicker, useDatePickerContext, useDialog, useDialogContext, useDrawer, useEditable, useEditableContext, useField, useFieldContext, useFieldset, useFileUpload, useFileUploadContext, useHoverCard, useHoverCardContext, useImageCropper, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext, useListbox, useListboxContext, useListboxItemContext, useMarquee, useMenu, useNumberInput, useNumberInputContext, usePasswordInput, usePinInput, usePopover, useQrCode, useRadioGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroup, useSidebar, useSignaturePad, useSignaturePadContext, useSlider, useSliderContext, useSplitter, useSplitterContext, useSwapContext, useSwitch, useSwitchContext, useTabs, useTagsInput, useTagsInputContext, useTagsInputItemContext, useTimer, useTimerContext, useToggleContext, useToggleGroup, useToggleGroupContext, useTooltip, useTooltipContext, useTour, useTreeView, useTreeViewNodeContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise };
+import { LocaleProvider, useLocaleContext } from "@ark-ui/react/locale";
+export { Accordion, Alert, AngleSlider, AspectRatio, Avatar, Badge, Bleed, Breadcrumbs, Button, Card, Carousel, Checkbox, Clipboard, CloseButton, Collapsible, ColorPicker, Combobox, CommandPalette, Container, DateInput, DatePicker, Dialog, Drawer, Editable, Empty, Field, Fieldset, FileUpload, FloatingPanel, Heading, Highlight, HoverCard, Image, ImageCropper, Input, InputGroup, Kbd, Lightbox, LightboxBind, LightboxGallery, LightboxImage, List, Listbox, LocaleProvider, Marquee, Menu, NativeSelect, NumberInput, Pagination, PasswordInput, PinInput, Popover, Portal, ProgressCircular, ProgressLinear, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, Sidebar, SignaturePad, SimpleGrid, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Steps, Swap, Switch, Table, Tabs, Tag, TagsInput, Text, Textarea, Timer, Toast, Toaster, Toggle, ToggleGroup, Tooltip, Tour, TreeView, Typeset, createFileTreeCollection, createSplitterRegistry, createToaster, createTreeCollection, parseColor, resizeTriggerAxes, useAccordion, useAngleSlider, useAvatar, useAvatarContext, useCheckbox, useCheckboxGroup, useCollapsible, useColorPicker, useColorPickerContext, useCombobox, useComboboxContext, useDateInput, useDateInputContext, useDatePicker, useDatePickerContext, useDialog, useDialogContext, useDrawer, useEditable, useEditableContext, useField, useFieldContext, useFieldset, useFileUpload, useFileUploadContext, useHoverCard, useHoverCardContext, useImageCropper, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext, useListbox, useListboxContext, useListboxItemContext, useLocaleContext, useMarquee, useMenu, useNumberInput, useNumberInputContext, usePasswordInput, usePinInput, usePopover, useQrCode, useRadioGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroup, useSidebar, useSignaturePad, useSignaturePadContext, useSlider, useSliderContext, useSplitter, useSplitterContext, useSwapContext, useSwitch, useSwitchContext, useTabs, useTagsInput, useTagsInputContext, useTagsInputItemContext, useTimer, useTimerContext, useToggleContext, useToggleGroup, useToggleGroupContext, useTooltip, useTooltipContext, useTour, useTreeView, useTreeViewNodeContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise };

package/dist/lib/moduix/presets/contrast.css

@@ -0,0 +1,65 @@
+[data-moduix-theme="contrast"] {
+  color-scheme: light;
+  --background: oklch(99.5% .001 250);
+  --foreground: oklch(14.5% .018 250);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(14.5% .018 250);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(14.5% .018 250);
+  --primary: oklch(46% .2 255);
+  --primary-foreground: oklch(100% 0 0);
+  --secondary: oklch(94% .012 250);
+  --secondary-foreground: oklch(18% .025 250);
+  --muted: oklch(93% .01 250);
+  --muted-foreground: oklch(39% .026 250);
+  --accent: oklch(90% .04 245);
+  --accent-foreground: oklch(16% .04 250);
+  --border: oklch(72% .025 250);
+  --input: oklch(62% .035 250);
+  --ring: oklch(50% .19 255);
+  --overlay: oklch(9% .018 250 / .38);
+  --overlay-foreground: oklch(9% .018 250 / .12);
+  --sidebar: oklch(96.5% .005 250);
+  --sidebar-foreground: oklch(14.5% .018 250);
+  --sidebar-primary: oklch(46% .2 255);
+  --sidebar-primary-foreground: oklch(100% 0 0);
+  --sidebar-accent: oklch(90% .04 245);
+  --sidebar-accent-foreground: oklch(16% .04 250);
+  --sidebar-border: oklch(72% .025 250);
+  --sidebar-ring: oklch(50% .19 255);
+  --radius: .375rem;
+  --shadow-sm: 0 1px 2px #0f172a1a;
+  --shadow-md: 0 4px 10px #0f172a24;
+  --shadow-lg: 0 16px 30px #0f172a2e;
+
+  & .dark, &.dark {
+    color-scheme: dark;
+    --background: oklch(11% .018 250);
+    --foreground: oklch(98.5% .004 250);
+    --card: oklch(15.5% .022 250);
+    --card-foreground: oklch(98.5% .004 250);
+    --popover: oklch(15.5% .022 250);
+    --popover-foreground: oklch(98.5% .004 250);
+    --primary: oklch(76% .13 255);
+    --primary-foreground: oklch(12% .02 250);
+    --secondary: oklch(24% .026 250);
+    --secondary-foreground: oklch(98.5% .004 250);
+    --muted: oklch(22.5% .024 250);
+    --muted-foreground: oklch(76% .018 250);
+    --accent: oklch(30% .06 250);
+    --accent-foreground: oklch(98.5% .004 250);
+    --border: oklch(80% .025 250 / .34);
+    --input: oklch(82% .025 250 / .42);
+    --ring: oklch(74% .13 255);
+    --overlay: oklch(4% .014 250 / .84);
+    --overlay-foreground: oklch(98.5% .004 250 / .12);
+    --sidebar: oklch(13% .02 250);
+    --sidebar-foreground: oklch(98.5% .004 250);
+    --sidebar-primary: oklch(76% .13 255);
+    --sidebar-primary-foreground: oklch(12% .02 250);
+    --sidebar-accent: oklch(30% .06 250);
+    --sidebar-accent-foreground: oklch(98.5% .004 250);
+    --sidebar-border: oklch(80% .025 250 / .34);
+    --sidebar-ring: oklch(74% .13 255);
+  }
+}