@object-ui/components 17.2.0 → 17.5.0

package/README.md

@@ -27,7 +27,7 @@ pnpm shadcn:check
 pnpm shadcn:update button --backup
 ```
 
-**📚 See [SHADCN_SYNC.md](../../docs/SHADCN_SYNC.md) for the complete guide.**
+**📚 See [README_SHADCN_SYNC.md](./README_SHADCN_SYNC.md) for the complete guide.**
 
 ## Installation
 
@@ -38,33 +38,36 @@ npm install @object-ui/components @object-ui/react @object-ui/core
 **Peer Dependencies:**
 - `react` ^18.0.0 || ^19.0.0
 - `react-dom` ^18.0.0 || ^19.0.0
-- `tailwindcss` ^3.0.0
+- `tailwindcss` ^4.2.1
 
 ## Setup
 
-### 1. Configure Tailwind
+There is no `tailwind.config.js` step. This package is Tailwind 4, which is
+configured in CSS: it has no such file of its own, and consuming it does not need
+one on your side either.
 
-Add to your `tailwind.config.js`:
+### 1. Import Styles
 
-```js
-module.exports = {
-  content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-    './node_modules/@object-ui/components/**/*.{js,ts,jsx,tsx}'
-  ],
-  // ... your config
-}
-```
-
-### 2. Import Styles
-
-Add to your main CSS file:
+Add to your main CSS file, after your own Tailwind entry:
 
 ```css
-@import '@object-ui/components/dist/style.css';
+@import 'tailwindcss';
+@import '@object-ui/components/style.css';
 ```
 
-### 3. Register Components
+`style.css` is the stylesheet this package compiles at build time from its own
+sources. It already carries every utility its components use **and** the theme
+tokens those utilities are built on — `bg-primary`, `border-input`, `ring-ring`
+and the rest of the Shadcn palette — so importing it is the whole of the styling
+setup.
+
+You do **not** add a `@source` line for `node_modules/@object-ui/components`.
+Pointing Tailwind at the published files generates the shape-only utilities a
+second time and still cannot produce the themed ones, because the `@theme` block
+they come from lives in this package's unpublished source. Your own Tailwind
+entry goes on generating the classes your own source uses, as it always did.
+
+### 2. Register Components
 
 ```tsx
 import { registerDefaultRenderers } from '@object-ui/components'
@@ -209,18 +212,7 @@ registerRenderer('custom-button', CustomButton)
 
 ## API Reference
 
-See [full documentation](https://objectui.org/api/components) for detailed API reference.
-
-<!-- release-metadata:v3.3.0 -->
-
-## Compatibility
-
-- **React:** 18.x or 19.x
-- **Node.js:** ≥ 18
-- **TypeScript:** ≥ 5.0 (strict mode)
-- **`@objectstack/spec`:** ^3.3.0
-- **`@objectstack/client`:** ^3.3.0
-- **Tailwind CSS:** ≥ 3.4 (for packages with UI)
+See [full documentation](https://objectui.org/docs/components) for detailed API reference.
 
 ## Links
 

package/dist/custom/combobox.d.ts

@@ -10,7 +10,17 @@ export interface ComboboxOption {
     value: string;
     label: string;
 }
-export interface ComboboxProps {
+/**
+ * Beyond its own named props, the combobox accepts standard button attributes
+ * (`id`, `aria-*`, `data-*`, handlers, …) and forwards them to the trigger —
+ * the focusable `role="combobox"` button a user and their screen reader
+ * actually interact with. Without this seam a field widget rendering a
+ * Combobox had no element to deliver `aria-invalid` / `aria-describedby` to
+ * after a validation failure (objectui#3318; the same reason #3306 routes the
+ * select's pass-through onto `SelectTrigger`). `value` / `onChange` are
+ * omitted: this component's own `value` / `onValueChange` contract owns them.
+ */
+export interface ComboboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onChange"> {
     options: ComboboxOption[];
     value?: string;
     onValueChange?: (value: string) => void;
@@ -20,4 +30,4 @@ export interface ComboboxProps {
     className?: string;
     disabled?: boolean;
 }
-export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, className, disabled, }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, className, disabled, ...triggerProps }: ComboboxProps): React.JSX.Element;

package/dist/custom/fullscreen-editor.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+export interface FullscreenEditorProps {
+    /**
+     * The committed value. Seeds the draft each time the dialog opens — read at
+     * open time, not held, so a value that changes underneath while the dialog is
+     * closed is picked up on the next open.
+     */
+    value: string;
+    /** Called once with the draft when the user confirms. Gated — see above. */
+    onCommit: (next: string) => void;
+    /** Field label — the dialog title and part of the toggle's accessible name. */
+    label?: string;
+    /**
+     * Namespace for this surface's fullscreen test ids:
+     * `<prefix>-fullscreen-toggle` / `-dialog` / `-save`. One form can contain a
+     * textarea AND a markdown field, so a single shared id would leave a test
+     * unable to say which surface it had found. The injected editor's own test id
+     * belongs to `children` for the same reason.
+     */
+    testIdPrefix: string;
+    /**
+     * The host field is shown plainly and is not editable. Renders NO affordance
+     * at all — see the `readOnly` / `disabled` section above for why this is not
+     * a disabled toggle.
+     *
+     * **Producers**: the form renderer's built-in `textarea` branch, which
+     * resolves it from the field's static `readonly` and from a `readonlyWhen`
+     * CEL rule. The registered widgets early-return a read-only display before
+     * they render this component, so they never pass it.
+     */
+    readOnly?: boolean;
+    /**
+     * The host field is not interactive. Disables the toggle, the "Done" button
+     * and the write-back, and is handed to `children` so the host's own editor
+     * renders inert too.
+     *
+     * **Producer**: the form renderer computes `disabled || fieldDisabled ||
+     * isSubmitting || optionGroupGated` and both forwards it to registered
+     * widgets and applies it on the built-in branch.
+     */
+    disabled?: boolean;
+    /**
+     * The editor itself, rendered inside the dialog body against the draft. The
+     * host passes the SAME editor it renders inline.
+     *
+     * The third argument is this component's `disabled`, and the host is expected
+     * to put it on the control it renders: only the host knows which element its
+     * editor's disabled state belongs on. Ignoring it is not a write-back hole —
+     * `onCommit` is gated here regardless — but it does leave a control that looks
+     * editable while the field is not, so every in-repo host applies it.
+     */
+    children: (draft: string, setDraft: (next: string) => void, disabled: boolean) => React.ReactNode;
+    /** Optional footer status for the draft (e.g. a character counter). */
+    footer?: (draft: string) => React.ReactNode;
+}
+export declare function FullscreenEditor({ value, onCommit, label, testIdPrefix, readOnly, disabled, children, footer, }: FullscreenEditorProps): React.JSX.Element | null;

package/dist/custom/index.d.ts

@@ -7,6 +7,7 @@ export * from './date-picker';
 export * from './empty';
 export * from './field';
 export * from './filter-builder';
+export * from './fullscreen-editor';
 export * from './input-group';
 export * from './item';
 export * from './kbd';

package/dist/custom/navigation-overlay.d.ts

@@ -53,7 +53,13 @@ export interface NavigationOverlayProps {
      * When omitted, the expand button is not rendered.
      */
     onExpand?: () => void;
-    /** Optional label for the expand button (accessible name & tooltip). */
+    /**
+     * Optional label for the expand button (accessible name & tooltip).
+     *
+     * When omitted the overlay resolves `detail.openAsFullPage` from the session
+     * locale (English when no `I18nProvider` is mounted) — it is no longer a
+     * hardcoded English literal (objectstack#5506).
+     */
     expandLabel?: string;
     /**
      * Optional storage key for persisting the user's manually-resized drawer

package/dist/index.css

@@ -443,6 +443,9 @@
   .left-\[50\%\] {
     left: 50%;
   }
+  .isolate {
+    isolation: isolate;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -1259,6 +1262,12 @@
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-0 {
+    --tw-scale-x: 0%;
+    --tw-scale-y: 0%;
+    --tw-scale-z: 0%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .scale-75 {
     --tw-scale-x: 75%;
     --tw-scale-y: 75%;
@@ -2445,6 +2454,10 @@
   .italic {
     font-style: italic;
   }
+  .ordinal {
+    --tw-ordinal: ordinal;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -2573,6 +2586,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { cn } from './lib/utils';
 export { renderChildren } from './lib/utils';
 export { cva } from 'class-variance-authority';
 export { getLazyIcon, isLucideIconName, LazyIcon, toKebabIconName } from './lib/lazy-icon';
+export { hasDeclaredVisibilityGate } from './renderers/action/visibility-gate';
 export { registerPlaceholders } from './renderers/placeholders';
 export { GridFieldAuthoringProvider, useGridFieldAuthoring, type GridFieldAuthoring, } from './context/gridFieldAuthoring';
 export * from './ui';