@reacteditor/field-tailwind 0.0.1

package/README.md

@@ -0,0 +1,38 @@
+# @reacteditor/field-tailwind
+
+A custom React Editor field that edits a `className` string as searchable,
+multi-add **Tailwind class tags** instead of a plain text input. Built on the
+[`@base-ui/react`](https://base-ui.com) Combobox — type to filter a curated
+catalog of common utilities, select to add chips, and add arbitrary classes
+(e.g. `gap-[7px]`) via the "Add …" entry.
+
+## Usage
+
+```tsx
+import { createFieldTailwind } from "@reacteditor/field-tailwind";
+
+export const myEditor = {
+  // …
+  fields: {
+    className: createFieldTailwind({ label: "Class name" }),
+  },
+};
+```
+
+The field value is a single space-separated string, so it drops straight onto a
+component's `className` prop.
+
+## Options
+
+| Option         | Type       | Description                                                        |
+| -------------- | ---------- | ------------------------------------------------------------------ |
+| `classes`      | `string[]` | Replace the built-in catalog entirely with your own list.          |
+| `extraClasses` | `string[]` | Append extra classes to the built-in catalog (ignored if `classes`).|
+| `placeholder`  | `string`   | Input placeholder. Defaults to `"Add classes…"`.                   |
+| `label`        | `string`   | Field label shown in the sidebar.                                  |
+
+## Exports
+
+- `createFieldTailwind(options?)` — the field factory.
+- `TAILWIND_CLASSES` — the built-in class catalog (`string[]`).
+- `TailwindCombobox` — the underlying combobox component, if you want to reuse it.

package/dist/index.d.mts

@@ -0,0 +1,131 @@
+import { ReactElement, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ItemSelector = {
+    index: number;
+    zone?: string;
+};
+
+interface BaseField {
+    label?: string;
+    labelIcon?: ReactElement;
+    metadata?: FieldMetadata;
+    visible?: boolean;
+}
+type CustomFieldRender<Value extends any> = (props: {
+    field: CustomField<Value>;
+    name: string;
+    id: string;
+    value: Value;
+    onChange: (value: Value, uiState?: Partial<UiState>) => void;
+    readOnly?: boolean;
+}) => ReactElement;
+interface CustomField<Value extends any> extends BaseField {
+    type: "custom";
+    render: CustomFieldRender<Value>;
+    contentEditable?: boolean;
+    key?: string;
+}
+
+type Metadata = {
+    [key: string]: any;
+};
+interface FieldMetadata extends Metadata {
+}
+
+type ItemWithId = {
+    _arrayId: string;
+    _originalIndex: number;
+    _currentIndex: number;
+};
+type ArrayState = {
+    items: ItemWithId[];
+    openId: string;
+};
+type UiState = {
+    leftSideBarVisible: boolean;
+    rightSideBarVisible: boolean;
+    leftSideBarWidth?: number | null;
+    rightSideBarWidth?: number | null;
+    /** Runtime: when true, the canvas overlays the entire editor area
+     *  (sidebars stay mounted underneath). Toggled by the BrowserBar fullscreen
+     *  button. Distinct from the static `fullScreenCanvas` Editor prop, which
+     *  removes canvas padding for a chromeless render. */
+    canvasFullScreen?: boolean;
+    mobilePanelExpanded?: boolean;
+    itemSelector: ItemSelector | null;
+    arrayState: Record<string, ArrayState | undefined>;
+    previewMode: "interactive" | "edit";
+    componentList: Record<string, {
+        components?: string[];
+        title?: string;
+        visible?: boolean;
+        expanded?: boolean;
+    }>;
+    isDragging: boolean;
+    viewports: {
+        current: {
+            width: number | "100%";
+            height: number | "auto";
+        };
+        controlsVisible: boolean;
+        options: Viewport[];
+    };
+    field: {
+        focus?: string | null;
+        metadata?: Record<string, any>;
+    };
+    plugin: {
+        current: string | null;
+    };
+};
+
+type iconTypes = "Smartphone" | "Monitor" | "Tablet";
+type Viewport = {
+    width: number | "100%";
+    height?: number | "auto";
+    label?: string;
+    icon?: iconTypes | ReactNode;
+};
+
+declare const TAILWIND_CLASSES: string[];
+
+type TailwindComboboxProps = {
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    items: string[];
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+};
+declare function TailwindCombobox({ value, onValueChange, items, placeholder, disabled, id, }: TailwindComboboxProps): react_jsx_runtime.JSX.Element;
+
+type Options = {
+    /**
+     * Replace the built-in catalog entirely with your own class list.
+     */
+    classes?: string[];
+    /**
+     * Append extra classes (e.g. project-specific utilities) to the built-in
+     * catalog. Ignored when `classes` is provided.
+     */
+    extraClasses?: string[];
+    /** Input placeholder. Defaults to "Add classes…". */
+    placeholder?: string;
+    /** Field label shown in the sidebar. */
+    label?: string;
+};
+/**
+ * Creates a `custom` field that edits a `className` string as searchable,
+ * multi-add Tailwind class tags. Use it in place of a `{ type: "text" }`
+ * className field:
+ *
+ * ```ts
+ * fields: {
+ *   className: createFieldTailwind(),
+ * }
+ * ```
+ */
+declare function createFieldTailwind(options?: Options): CustomField<string | undefined>;
+
+export { TAILWIND_CLASSES, TailwindCombobox, createFieldTailwind };

package/dist/index.d.ts

@@ -0,0 +1,131 @@
+import { ReactElement, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ItemSelector = {
+    index: number;
+    zone?: string;
+};
+
+interface BaseField {
+    label?: string;
+    labelIcon?: ReactElement;
+    metadata?: FieldMetadata;
+    visible?: boolean;
+}
+type CustomFieldRender<Value extends any> = (props: {
+    field: CustomField<Value>;
+    name: string;
+    id: string;
+    value: Value;
+    onChange: (value: Value, uiState?: Partial<UiState>) => void;
+    readOnly?: boolean;
+}) => ReactElement;
+interface CustomField<Value extends any> extends BaseField {
+    type: "custom";
+    render: CustomFieldRender<Value>;
+    contentEditable?: boolean;
+    key?: string;
+}
+
+type Metadata = {
+    [key: string]: any;
+};
+interface FieldMetadata extends Metadata {
+}
+
+type ItemWithId = {
+    _arrayId: string;
+    _originalIndex: number;
+    _currentIndex: number;
+};
+type ArrayState = {
+    items: ItemWithId[];
+    openId: string;
+};
+type UiState = {
+    leftSideBarVisible: boolean;
+    rightSideBarVisible: boolean;
+    leftSideBarWidth?: number | null;
+    rightSideBarWidth?: number | null;
+    /** Runtime: when true, the canvas overlays the entire editor area
+     *  (sidebars stay mounted underneath). Toggled by the BrowserBar fullscreen
+     *  button. Distinct from the static `fullScreenCanvas` Editor prop, which
+     *  removes canvas padding for a chromeless render. */
+    canvasFullScreen?: boolean;
+    mobilePanelExpanded?: boolean;
+    itemSelector: ItemSelector | null;
+    arrayState: Record<string, ArrayState | undefined>;
+    previewMode: "interactive" | "edit";
+    componentList: Record<string, {
+        components?: string[];
+        title?: string;
+        visible?: boolean;
+        expanded?: boolean;
+    }>;
+    isDragging: boolean;
+    viewports: {
+        current: {
+            width: number | "100%";
+            height: number | "auto";
+        };
+        controlsVisible: boolean;
+        options: Viewport[];
+    };
+    field: {
+        focus?: string | null;
+        metadata?: Record<string, any>;
+    };
+    plugin: {
+        current: string | null;
+    };
+};
+
+type iconTypes = "Smartphone" | "Monitor" | "Tablet";
+type Viewport = {
+    width: number | "100%";
+    height?: number | "auto";
+    label?: string;
+    icon?: iconTypes | ReactNode;
+};
+
+declare const TAILWIND_CLASSES: string[];
+
+type TailwindComboboxProps = {
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    items: string[];
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+};
+declare function TailwindCombobox({ value, onValueChange, items, placeholder, disabled, id, }: TailwindComboboxProps): react_jsx_runtime.JSX.Element;
+
+type Options = {
+    /**
+     * Replace the built-in catalog entirely with your own class list.
+     */
+    classes?: string[];
+    /**
+     * Append extra classes (e.g. project-specific utilities) to the built-in
+     * catalog. Ignored when `classes` is provided.
+     */
+    extraClasses?: string[];
+    /** Input placeholder. Defaults to "Add classes…". */
+    placeholder?: string;
+    /** Field label shown in the sidebar. */
+    label?: string;
+};
+/**
+ * Creates a `custom` field that edits a `className` string as searchable,
+ * multi-add Tailwind class tags. Use it in place of a `{ type: "text" }`
+ * className field:
+ *
+ * ```ts
+ * fields: {
+ *   className: createFieldTailwind(),
+ * }
+ * ```
+ */
+declare function createFieldTailwind(options?: Options): CustomField<string | undefined>;
+
+export { TAILWIND_CLASSES, TailwindCombobox, createFieldTailwind };