@object-ui/components 16.1.0 → 17.1.0

package/README.md

@@ -150,6 +150,34 @@ function MyComponent() {
 - `link` - Link component
 - `breadcrumb` - Breadcrumb navigation
 
+## Notification Surfaces
+
+Direct-import React components (not schema blocks) that render the notifications
+raised through `NotificationProvider` from `@object-ui/react`. One per spec
+`displayType`, so a `banner` no longer presents as a toast:
+
+| Component | `displayType` | Where to mount it |
+| --- | --- | --- |
+| `<NotificationSnackbar />` | `snackbar` | anywhere inside the provider — it anchors itself bottom-center |
+| `<NotificationBanners />` | `banner` | top of the content area (it takes space in the flow) |
+| `<NotificationAlerts />` | `alert` | anywhere inside the provider — blocking dialog, FIFO queue |
+| `<NotificationInline scope="…" />` | `inline` | in the surface that raises them |
+
+`toast` stays with the host's `onToast` delegate (sonner in the console). All of
+them draw the notification's `severity` icon unless it declares an `icon`
+override naming a real Lucide icon. See the
+[notifications guide](https://objectui.org/docs/guide/notifications).
+
+```tsx
+import { NotificationBanners, NotificationAlerts } from '@object-ui/components';
+
+<main>
+  <NotificationBanners />
+  <Outlet />
+  <NotificationAlerts />
+</main>
+```
+
 ## Customization
 
 ### Override Styles

package/dist/custom/filter-builder.d.ts

@@ -38,6 +38,84 @@ export interface FilterBuilderProps {
     className?: string;
     showClearAll?: boolean;
 }
+declare const defaultOperators: readonly [{
+    readonly value: "equals";
+    readonly label: "Equals";
+}, {
+    readonly value: "notEquals";
+    readonly label: "Does not equal";
+}, {
+    readonly value: "contains";
+    readonly label: "Contains";
+}, {
+    readonly value: "notContains";
+    readonly label: "Does not contain";
+}, {
+    readonly value: "isEmpty";
+    readonly label: "Is empty";
+}, {
+    readonly value: "isNotEmpty";
+    readonly label: "Is not empty";
+}, {
+    readonly value: "greaterThan";
+    readonly label: "Greater than";
+}, {
+    readonly value: "lessThan";
+    readonly label: "Less than";
+}, {
+    readonly value: "greaterOrEqual";
+    readonly label: "Greater than or equal";
+}, {
+    readonly value: "lessOrEqual";
+    readonly label: "Less than or equal";
+}, {
+    readonly value: "before";
+    readonly label: "Before";
+}, {
+    readonly value: "after";
+    readonly label: "After";
+}, {
+    readonly value: "between";
+    readonly label: "Between";
+}, {
+    readonly value: "in";
+    readonly label: "In";
+}, {
+    readonly value: "notIn";
+    readonly label: "Not in";
+}, {
+    readonly value: "startsWith";
+    readonly label: "Starts with";
+}, {
+    readonly value: "endsWith";
+    readonly label: "Ends with";
+}, {
+    readonly value: "isNull";
+    readonly label: "Is null";
+}, {
+    readonly value: "isNotNull";
+    readonly label: "Is not null";
+}, {
+    readonly value: "exists";
+    readonly label: "Is set";
+}, {
+    readonly value: "notExists";
+    readonly label: "Is not set";
+}];
+/**
+ * The FilterBuilder's own operator vocabulary — every id its dropdown can
+ * hold, derived from the operators it actually renders.
+ *
+ * Exported because several translation tables map an external vocabulary
+ * (the spec's `VIEW_FILTER_OPERATORS`, Mongo `$`-tokens) *onto* this one, and
+ * a value that is not in this list produces a condition row whose operator
+ * select has nothing to select. Those tables assert against this export
+ * rather than restating it, so adding an operator here is the only edit
+ * needed to widen them.
+ */
+export declare const FILTER_BUILDER_OPERATORS: ("endsWith" | "startsWith" | "in" | "after" | "equals" | "notEquals" | "contains" | "notContains" | "isEmpty" | "isNotEmpty" | "greaterThan" | "lessThan" | "greaterOrEqual" | "lessOrEqual" | "before" | "between" | "notIn" | "isNull" | "isNotNull" | "exists" | "notExists")[];
+/** An operator id the FilterBuilder can render. */
+export type FilterBuilderOperator = (typeof defaultOperators)[number]['value'];
 declare function FilterBuilder({ fields, value, onChange, className, showClearAll, }: FilterBuilderProps): React.JSX.Element;
 declare namespace FilterBuilder {
     var displayName: string;

package/dist/custom/index.d.ts

@@ -12,6 +12,7 @@ export * from './item';
 export * from './kbd';
 export * from './native-select';
 export * from './navigation-overlay';
+export * from './resizable';
 export * from './section-header';
 export * from './spinner';
 export * from './sort-builder';

package/dist/custom/resizable.d.ts

@@ -0,0 +1,31 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable';
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * The public `Resizable*` export site.
+ *
+ * This module used to wrap `ResizableHandle` to re-key its stacked-group styles
+ * from the dead `data-[panel-group-direction=vertical]` onto the
+ * `aria-orientation` attribute react-resizable-panels v4 actually emits (#3024).
+ * That fix now lives in `../ui/resizable` itself, so there is nothing left to
+ * wrap and all three components pass straight through.
+ *
+ * Editing `ui/` is normally off-limits (AGENTS.md #7), but that file is no
+ * longer upstream-synced: it is hand-migrated to v4 and listed under
+ * `customComponents` in `shadcn-components.json`, because upstream still ships
+ * the v3 file and re-syncing would break the build. See its header.
+ *
+ * This module stays as the single public export site rather than folding into
+ * `ui/index.ts`: `src/index.ts` star-exports `./ui` and `./custom` side by side,
+ * so exporting `Resizable*` from both would collide (TS2308).
+ */
+import type * as React from 'react';
+/** Kept on the public surface (it is exported from the package root) even though
+ *  the wrapper it was introduced for is gone. */
+export type ResizableHandleProps = React.ComponentProps<typeof ResizableHandle>;
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/index.css

@@ -19,6 +19,7 @@
     --color-amber-200: oklch(92.4% 0.12 95.746);
     --color-amber-300: oklch(87.9% 0.169 91.605);
     --color-amber-400: oklch(82.8% 0.189 84.429);
+    --color-amber-600: oklch(66.6% 0.179 58.318);
     --color-amber-700: oklch(55.5% 0.163 48.998);
     --color-amber-800: oklch(47.3% 0.137 46.201);
     --color-amber-900: oklch(41.4% 0.112 45.904);
@@ -28,11 +29,15 @@
     --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-emerald-50: oklch(97.9% 0.021 166.113);
     --color-emerald-100: oklch(95% 0.052 163.051);
+    --color-emerald-200: oklch(90.5% 0.093 164.15);
+    --color-emerald-300: oklch(84.5% 0.143 164.978);
     --color-emerald-400: oklch(76.5% 0.177 163.223);
     --color-emerald-500: oklch(69.6% 0.17 162.48);
     --color-emerald-600: oklch(59.6% 0.145 163.225);
     --color-emerald-700: oklch(50.8% 0.118 165.612);
+    --color-emerald-900: oklch(37.8% 0.077 168.94);
     --color-emerald-950: oklch(26.2% 0.051 172.552);
     --color-cyan-200: oklch(91.7% 0.08 205.041);
     --color-cyan-300: oklch(86.5% 0.127 207.078);
@@ -292,6 +297,9 @@
   }
 }
 @layer utilities {
+  .\@container {
+    container-type: inline-size;
+  }
   .pointer-events-auto {
     pointer-events: auto;
   }
@@ -429,6 +437,9 @@
   .left-2\.5 {
     left: calc(var(--spacing) * 2.5);
   }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
   .left-\[50\%\] {
     left: 50%;
   }
@@ -453,6 +464,9 @@
   .z-\[9999\] {
     z-index: 9999;
   }
+  .order-last {
+    order: 9999;
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -558,6 +572,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .-mr-1 {
+    margin-right: calc(var(--spacing) * -1);
+  }
   .mr-1 {
     margin-right: var(--spacing);
   }
@@ -655,6 +672,10 @@
     width: var(--cell-size);
     height: var(--cell-size);
   }
+  .size-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+    height: calc(var(--spacing) * 1.5);
+  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -872,6 +893,9 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
+  .min-h-\[300px\] {
+    min-height: 300px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1004,6 +1028,12 @@
   .w-\[calc\(100vw-1rem\)\] {
     width: calc(100vw - 1rem);
   }
+  .w-\[min\(28rem\,calc\(100vw-2rem\)\)\] {
+    width: min(28rem, calc(100vw - 2rem));
+  }
+  .w-\[var\(--radix-popover-trigger-width\)\] {
+    width: var(--radix-popover-trigger-width);
+  }
   .w-auto {
     width: auto;
   }
@@ -1130,6 +1160,9 @@
   .min-w-\[160px\] {
     min-width: 160px;
   }
+  .min-w-\[200px\] {
+    min-width: 200px;
+  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
@@ -1142,9 +1175,15 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
@@ -1189,6 +1228,9 @@
   .origin-\[--radix-\.\.\.\] {
     transform-origin: --radix-...;
   }
+  .origin-\[--radix-…\] {
+    transform-origin: --radix-…;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1478,6 +1520,9 @@
     margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
     margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
   }
+  .gap-y-0\.5 {
+    row-gap: calc(var(--spacing) * 0.5);
+  }
   .gap-y-1\.5 {
     row-gap: calc(var(--spacing) * 1.5);
   }
@@ -1630,6 +1675,12 @@
   .border-amber-300 {
     border-color: var(--color-amber-300);
   }
+  .border-amber-300\/70 {
+    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-300) 70%, transparent);
+    }
+  }
   .border-amber-400\/40 {
     border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1678,6 +1729,12 @@
       border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
     }
   }
+  .border-emerald-300\/70 {
+    border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-emerald-300) 70%, transparent);
+    }
+  }
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
@@ -1795,6 +1852,9 @@
       background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
     }
   }
+  .bg-emerald-50 {
+    background-color: var(--color-emerald-50);
+  }
   .bg-emerald-100 {
     background-color: var(--color-emerald-100);
   }
@@ -2259,6 +2319,9 @@
   .text-accent-foreground {
     color: var(--color-accent-foreground);
   }
+  .text-amber-600 {
+    color: var(--color-amber-600);
+  }
   .text-amber-700 {
     color: var(--color-amber-700);
   }
@@ -2292,6 +2355,9 @@
   .text-emerald-700 {
     color: var(--color-emerald-700);
   }
+  .text-emerald-900 {
+    color: var(--color-emerald-900);
+  }
   .text-foreground {
     color: var(--color-foreground);
   }
@@ -2614,6 +2680,10 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -3357,6 +3427,34 @@
   .aria-selected\:text-muted-foreground[aria-selected="true"] {
     color: var(--color-muted-foreground);
   }
+  .aria-\[orientation\=horizontal\]\:h-px[aria-orientation="horizontal"] {
+    height: 1px;
+  }
+  .aria-\[orientation\=horizontal\]\:w-full[aria-orientation="horizontal"] {
+    width: 100%;
+  }
+  .aria-\[orientation\=horizontal\]\:after\:left-0[aria-orientation="horizontal"]::after {
+    content: var(--tw-content);
+    left: 0px;
+  }
+  .aria-\[orientation\=horizontal\]\:after\:h-1[aria-orientation="horizontal"]::after {
+    content: var(--tw-content);
+    height: var(--spacing);
+  }
+  .aria-\[orientation\=horizontal\]\:after\:w-full[aria-orientation="horizontal"]::after {
+    content: var(--tw-content);
+    width: 100%;
+  }
+  .aria-\[orientation\=horizontal\]\:after\:translate-x-0[aria-orientation="horizontal"]::after {
+    content: var(--tw-content);
+    --tw-translate-x: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .aria-\[orientation\=horizontal\]\:after\:-translate-y-1\/2[aria-orientation="horizontal"]::after {
+    content: var(--tw-content);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
     background-color: var(--color-sidebar-accent);
   }
@@ -3418,37 +3516,6 @@
   .data-\[orientation\=vertical\]\:h-auto[data-orientation="vertical"] {
     height: auto;
   }
-  .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
-    height: 1px;
-  }
-  .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
-    width: 100%;
-  }
-  .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
-    flex-direction: column;
-  }
-  .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
-    content: var(--tw-content);
-    left: 0px;
-  }
-  .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
-    content: var(--tw-content);
-    height: var(--spacing);
-  }
-  .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
-    content: var(--tw-content);
-    width: 100%;
-  }
-  .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
-    content: var(--tw-content);
-    --tw-translate-x: 0px;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
-    content: var(--tw-content);
-    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
     color: var(--color-muted-foreground);
   }
@@ -3535,6 +3602,9 @@
   .data-\[state\=active\]\:bg-transparent[data-state="active"] {
     background-color: transparent;
   }
+  .data-\[state\=active\]\:text-destructive[data-state="active"] {
+    color: var(--color-destructive);
+  }
   .data-\[state\=active\]\:text-foreground[data-state="active"] {
     color: var(--color-foreground);
   }
@@ -3614,6 +3684,9 @@
   .data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
     --tw-exit-opacity: 0;
   }
+  .data-\[state\=inactive\]\:hidden[data-state="inactive"] {
+    display: none;
+  }
   .data-\[state\=on\]\:bg-accent[data-state="on"] {
     background-color: var(--color-accent);
   }
@@ -3818,9 +3891,18 @@
     .motion-safe\:duration-300 {
       animation-duration: 300ms;
     }
+    .motion-safe\:fade-in {
+      --tw-enter-opacity: 0;
+    }
     .motion-safe\:fade-in-0 {
       --tw-enter-opacity: 0;
     }
+    .motion-safe\:slide-in-from-bottom-4 {
+      --tw-enter-translate-y: 1rem;
+    }
+    .motion-safe\:slide-in-from-top-4 {
+      --tw-enter-translate-y: -1rem;
+    }
     .motion-safe\:zoom-in-95 {
       --tw-enter-scale: .95;
     }
@@ -4456,12 +4538,24 @@
       grid-column: span 4 / span 4;
     }
   }
+  .dark\:border-amber-700\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-700) 60%, transparent);
+    }
+  }
   .dark\:border-amber-900:where(.dark, .dark *) {
     border-color: var(--color-amber-900);
   }
   .dark\:border-destructive:where(.dark, .dark *) {
     border-color: var(--color-destructive);
   }
+  .dark\:border-emerald-700\/60:where(.dark, .dark *) {
+    border-color: color-mix(in srgb, oklch(50.8% 0.118 165.612) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-emerald-700) 60%, transparent);
+    }
+  }
   .dark\:bg-amber-950\/20:where(.dark, .dark *) {
     background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4474,6 +4568,12 @@
       background-color: color-mix(in oklab, var(--color-amber-950) 30%, transparent);
     }
   }
+  .dark\:bg-amber-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-950) 40%, transparent);
+    }
+  }
   .dark\:bg-background\/95:where(.dark, .dark *) {
     background-color: color-mix(in srgb, hsl(var(--background)) 95%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4486,6 +4586,12 @@
       background-color: color-mix(in oklab, var(--color-destructive) 15%, transparent);
     }
   }
+  .dark\:bg-emerald-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-emerald-950) 40%, transparent);
+    }
+  }
   .dark\:bg-emerald-950\/50:where(.dark, .dark *) {
     background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4501,6 +4607,12 @@
   .dark\:text-amber-400:where(.dark, .dark *) {
     color: var(--color-amber-400);
   }
+  .dark\:text-destructive-foreground:where(.dark, .dark *) {
+    color: var(--color-destructive-foreground);
+  }
+  .dark\:text-emerald-200:where(.dark, .dark *) {
+    color: var(--color-emerald-200);
+  }
   .dark\:text-emerald-400:where(.dark, .dark *) {
     color: var(--color-emerald-400);
   }
@@ -4832,7 +4944,7 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
   }
-  .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical] > div {
+  .\[\&\[aria-orientation\=horizontal\]\>div\]\:rotate-90[aria-orientation=horizontal] > div {
     rotate: 90deg;
   }
   .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open] > svg {

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 export { cn } from './lib/utils';
 export { renderChildren } from './lib/utils';
 export { cva } from 'class-variance-authority';
-export { getLazyIcon, LazyIcon, toKebabIconName } from './lib/lazy-icon';
+export { getLazyIcon, isLucideIconName, LazyIcon, toKebabIconName } from './lib/lazy-icon';
 export { registerPlaceholders } from './renderers/placeholders';
 export { GridFieldAuthoringProvider, useGridFieldAuthoring, type GridFieldAuthoring, } from './context/gridFieldAuthoring';
 export * from './ui';
 export * from './custom';
+export * from './notifications';
+export { TOASTER_POSITIONS } from './renderers/feedback/toaster';
 export { useConfigDraft } from './hooks/use-config-draft';
 export type { UseConfigDraftOptions, UseConfigDraftReturn } from './hooks/use-config-draft';
 export { useIsMobile } from './hooks/use-mobile';