@object-ui/components 17.7.0 → 18.0.0

package/dist/index.css

@@ -468,6 +468,9 @@
   .col-span-4 {
     grid-column: span 4 / span 4;
   }
+  .col-span-12 {
+    grid-column: span 12 / span 12;
+  }
   .col-span-full {
     grid-column: 1 / -1;
   }
@@ -624,6 +627,9 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+  .\!table {
+    display: table !important;
+  }
   .block {
     display: block;
   }
@@ -651,6 +657,21 @@
   .table {
     display: table;
   }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-footer-group {
+    display: table-footer-group;
+  }
+  .table-header-group {
+    display: table-header-group;
+  }
+  .table-row {
+    display: table-row;
+  }
+  .table-row-group {
+    display: table-row-group;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -1158,6 +1179,9 @@
   .caption-bottom {
     caption-side: bottom;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .border-separate {
     border-collapse: separate;
   }
@@ -1272,6 +1296,12 @@
   .scroll-m-20 {
     scroll-margin: calc(var(--spacing) * 20);
   }
+  .\[scrollbar-width\:thin\]\! {
+    scrollbar-width: thin !important;
+  }
+  .\[scrollbar-color\:transparent_transparent\]\! {
+    scrollbar-color: transparent transparent !important;
+  }
   .list-decimal {
     list-style-type: decimal;
   }
@@ -1878,16 +1908,30 @@
       background-color: color-mix(in oklab, var(--color-yellow-50) 50%, transparent);
     }
   }
+  .bg-gradient-to-l {
+    --tw-gradient-position: to left in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .bg-\[image\:linear-gradient\(var\(--os-row-tint\,transparent\)\,var\(--os-row-tint\,transparent\)\)\] {
+    background-image: linear-gradient(var(--os-row-tint,transparent),var(--os-row-tint,transparent));
+  }
   .bg-\[linear-gradient\(to_right\,\#80808012_1px\,transparent_1px\)\,linear-gradient\(to_bottom\,\#80808012_1px\,transparent_1px\)\] {
     background-image: linear-gradient(to right,#80808012 1px,transparent 1px),linear-gradient(to bottom,#80808012 1px,transparent 1px);
   }
   .bg-\[url\(\'https\:\/\/grainy-gradients\.vercel\.app\/noise\.svg\'\)\] {
     background-image: url('https://grainy-gradients.vercel.app/noise.svg');
   }
+  .from-foreground\/10 {
+    --tw-gradient-from: color-mix(in srgb, hsl(var(--foreground)) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-transparent {
     --tw-gradient-from: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1964,6 +2008,9 @@
   .px-\(--cell-size\) {
     padding-inline: var(--cell-size);
   }
+  .px-0 {
+    padding-inline: 0px;
+  }
   .px-1 {
     padding-inline: var(--spacing);
   }
@@ -1994,6 +2041,9 @@
   .px-\[0\.3rem\] {
     padding-inline: 0.3rem;
   }
+  .py-0 {
+    padding-block: 0px;
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -2030,6 +2080,9 @@
   .pt-0 {
     padding-top: 0px;
   }
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2144,6 +2197,9 @@
   .text-\[0\.8rem\] {
     font-size: 0.8rem;
   }
+  .text-\[0\.85em\] {
+    font-size: 0.85em;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2371,6 +2427,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -2419,10 +2478,6 @@
     --tw-shadow: 2px 0 4px -2px var(--tw-shadow-color, rgba(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);
   }
-  .shadow-\[inset_-8px_0_8px_-8px_rgba\(0\,0\,0\,0\.08\)\] {
-    --tw-shadow: inset -8px 0 8px -8px var(--tw-shadow-color, rgba(0,0,0,0.08));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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);
@@ -2606,6 +2661,9 @@
   .\[--empty-padding\:--spacing\(6\)\] {
     --empty-padding: calc(var(--spacing) * 6);
   }
+  .\[--os-row-tint\:transparent\] {
+    --os-row-tint: transparent;
+  }
   .\[-webkit-overflow-scrolling\:touch\] {
     -webkit-overflow-scrolling: touch;
   }
@@ -2666,6 +2724,12 @@
   .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
     opacity: 100%;
   }
+  .group-focus-within\/row\:invisible:is(:where(.group\/row):focus-within *) {
+    visibility: hidden;
+  }
+  .group-focus-within\/row\:opacity-100:is(:where(.group\/row):focus-within *) {
+    opacity: 100%;
+  }
   @media (hover: hover) {
     .group-hover\:text-foreground:is(:where(.group):hover *) {
       color: var(--color-foreground);
@@ -2701,6 +2765,9 @@
     .group-hover\/row\:flex:is(:where(.group\/row):hover *) {
       display: flex;
     }
+    .group-hover\/row\:opacity-100:is(:where(.group\/row):hover *) {
+      opacity: 100%;
+    }
     .group-hover\/upload\:scale-110:is(:where(.group\/upload):hover *) {
       --tw-scale-x: 110%;
       --tw-scale-y: 110%;
@@ -2804,6 +2871,9 @@
   .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) {
     rotate: 180deg;
   }
+  .group-data-\[state\=selected\]\/row\:opacity-100:is(:where(.group\/row)[data-state="selected"] *) {
+    opacity: 100%;
+  }
   .group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant="floating"] *) {
     border-radius: var(--radius-lg);
   }
@@ -2887,6 +2957,52 @@
   .placeholder\:text-muted-foreground::placeholder {
     color: var(--color-muted-foreground);
   }
+  .before\:pointer-events-none::before {
+    content: var(--tw-content);
+    pointer-events: none;
+  }
+  .before\:absolute::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  .before\:inset-y-0::before {
+    content: var(--tw-content);
+    inset-block: 0px;
+  }
+  .before\:right-full::before {
+    content: var(--tw-content);
+    right: 100%;
+  }
+  .before\:w-6::before {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 6);
+  }
+  .before\:bg-gradient-to-l::before {
+    content: var(--tw-content);
+    --tw-gradient-position: to left in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .before\:from-foreground\/10::before {
+    content: var(--tw-content);
+    --tw-gradient-from: color-mix(in srgb, hsl(var(--foreground)) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .before\:to-transparent::before {
+    content: var(--tw-content);
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .before\:opacity-0::before {
+    content: var(--tw-content);
+    opacity: 0%;
+  }
+  .group-data-\[overflow-right\=true\]\/hscroll\:before\:opacity-100:is(:where(.group\/hscroll)[data-overflow-right="true"] *)::before {
+    content: var(--tw-content);
+    opacity: 100%;
+  }
   .after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
@@ -2945,6 +3061,9 @@
   .empty\:hidden:empty {
     display: none;
   }
+  .focus-within\:\[scrollbar-color\:var\(--color-muted-foreground\)_transparent\]\!:focus-within {
+    scrollbar-color: var(--color-muted-foreground) transparent !important;
+  }
   .focus-within\:ring-2:focus-within {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
@@ -2957,6 +3076,9 @@
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
   @media (hover: hover) {
+    .hover\:\[scrollbar-color\:var\(--color-muted-foreground\)_transparent\]\!:hover {
+      scrollbar-color: var(--color-muted-foreground) transparent !important;
+    }
     .hover\:border-cyan-500\/50:hover {
       border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 50%, transparent);
     }
@@ -3134,6 +3256,9 @@
         --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 10%, transparent) var(--tw-shadow-alpha), transparent);
       }
     }
+    .hover\:\[--os-row-tint\:transparent\]:hover {
+      --os-row-tint: transparent;
+    }
     .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:is(:where(.group)[data-state="collapsed"] *):is(:where(.group)[data-collapsible="offcanvas"] *):hover {
       background-color: var(--color-sidebar);
     }
@@ -3179,6 +3304,9 @@
   .focus-visible\:border-ring:focus-visible {
     border-color: var(--color-ring);
   }
+  .focus-visible\:opacity-100:focus-visible {
+    opacity: 100%;
+  }
   .focus-visible\:ring-0:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
@@ -3647,6 +3775,9 @@
       background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
     }
   }
+  .data-\[state\=selected\]\:\[--os-row-tint\:transparent\][data-state="selected"] {
+    --os-row-tint: transparent;
+  }
   @media (hover: hover) {
     .data-\[state\=selected\]\:hover\:bg-primary\/10[data-state="selected"]:hover {
       background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
@@ -3806,6 +3937,9 @@
     .sm\:w-\[400px\] {
       width: 400px;
     }
+    .sm\:w-\[calc\(100\%-2rem\)\] {
+      width: calc(100% - 2rem);
+    }
     .sm\:w-\[var\(--config-panel-width\,280px\)\] {
       width: var(--config-panel-width,280px);
     }
@@ -3815,9 +3949,18 @@
     .sm\:w-full {
       width: 100%;
     }
+    .sm\:max-w-2xl {
+      max-width: var(--container-2xl);
+    }
     .sm\:max-w-3xl {
       max-width: var(--container-3xl);
     }
+    .sm\:max-w-5xl {
+      max-width: var(--container-5xl);
+    }
+    .sm\:max-w-\[95vw\] {
+      max-width: 95vw;
+    }
     .sm\:max-w-\[200px\] {
       max-width: 200px;
     }
@@ -3995,6 +4138,9 @@
     .md\:col-span-4 {
       grid-column: span 4 / span 4;
     }
+    .md\:col-span-6 {
+      grid-column: span 6 / span 6;
+    }
     .md\:mx-0 {
       margin-inline: 0px;
     }
@@ -4233,6 +4379,9 @@
     .xl\:col-span-4 {
       grid-column: span 4 / span 4;
     }
+    .xl\:col-span-6 {
+      grid-column: span 6 / span 6;
+    }
     .xl\:grid-cols-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
@@ -4329,6 +4478,9 @@
     }
   }
   @container (width >= 28rem) {
+    .\@md\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
     .\@md\:col-span-2 {
       grid-column: span 2 / span 2;
     }
@@ -4338,9 +4490,30 @@
     .\@md\:col-span-4 {
       grid-column: span 4 / span 4;
     }
+    .\@md\:col-span-5 {
+      grid-column: span 5 / span 5;
+    }
+    .\@md\:col-span-6 {
+      grid-column: span 6 / span 6;
+    }
+    .\@md\:col-span-7 {
+      grid-column: span 7 / span 7;
+    }
+    .\@md\:col-span-10 {
+      grid-column: span 10 / span 10;
+    }
+    .\@md\:col-span-11 {
+      grid-column: span 11 / span 11;
+    }
+    .\@md\:col-span-12 {
+      grid-column: span 12 / span 12;
+    }
     .\@md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
+    .\@md\:grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
   }
   @container (width >= 32rem) {
     .\@lg\:col-span-2 {
@@ -4374,6 +4547,9 @@
     .\@2xl\:col-span-4 {
       grid-column: span 4 / span 4;
     }
+    .\@2xl\:col-span-8 {
+      grid-column: span 8 / span 8;
+    }
     .\@2xl\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
@@ -4399,6 +4575,12 @@
     .\@4xl\:col-span-4 {
       grid-column: span 4 / span 4;
     }
+    .\@4xl\:col-span-9 {
+      grid-column: span 9 / span 9;
+    }
+    .\@4xl\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
   }
   @container (width >= 64rem) {
     .\@5xl\:col-span-2 {
@@ -4505,6 +4687,14 @@
   .dark\:text-emerald-400:where(.dark, .dark *) {
     color: var(--color-emerald-400);
   }
+  @media (pointer: coarse) {
+    .pointer-coarse\:invisible {
+      visibility: hidden;
+    }
+    .pointer-coarse\:opacity-100 {
+      opacity: 100%;
+    }
+  }
   .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
     padding-inline: calc(var(--spacing) * 2);
   }

package/dist/index.d.ts

@@ -2,8 +2,16 @@ export { cn } from './lib/utils.js';
 export { renderChildren, renderNodeSlot, isEmptyNodeSlot } from './lib/utils.js';
 export { cva } from 'class-variance-authority';
 export { getLazyIcon, isLucideIconName, LazyIcon, toKebabIconName } from './lib/lazy-icon.js';
+export { renderInlineMarkdown, RAW_HTML_OPEN_TAG, RAW_HTML_CLOSING_TAG } from './lib/inline-markdown.js';
+export type { InlineMarkdownOptions } from './lib/inline-markdown.js';
 export { hasDeclaredVisibilityGate } from './renderers/action/visibility-gate.js';
 export { isCustomRowActionVisible } from './renderers/complex/data-table.js';
+export { pageBlockSpan, isPageRailRegion, PAGE_BLOCK_SPANS } from './renderers/layout/page-block-span.js';
+export type { PageBlockSpan } from './renderers/layout/page-block-span.js';
+export { usePageRegionPosture } from './renderers/layout/page-region-posture.js';
+export type { PageRegionPosture } from './renderers/layout/page-region-posture.js';
+export { PageHeaderActions } from './renderers/layout/containers.js';
+export type { PageHeaderActionsProps } from './renderers/layout/containers.js';
 export { resolveIcon } from './renderers/action/resolve-icon.js';
 export { registerPlaceholders } from './renderers/placeholders.js';
 export { GridFieldAuthoringProvider, useGridFieldAuthoring, type GridFieldAuthoring, } from './context/gridFieldAuthoring.js';