tinacms 3.0.0 → 3.0.2

package/dist/toolkit/fields/components/color-picker/block-widget.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { WidgetProps } from './color-input';
+export declare const BlockWidget: React.FC<WidgetProps>;

package/dist/toolkit/fields/components/color-picker/color-input.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export interface WidgetProps {
+    presetColors: string[];
+    color: string;
+    onChange: (color: string | null) => void;
+    width: string;
+}
+export declare const useHexInput: (color: string, onChange: (color: string | null) => void) => {
+    inputValue: string;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleSwatchClick: (c: string) => void;
+};
+export declare const SwatchButton: React.FC<{
+    color: string;
+    isSelected: boolean;
+    onClick: () => void;
+}>;
+export declare const ColorPreview: React.FC<{
+    color: string;
+    size?: 'sm' | 'lg';
+}>;
+export declare const HexInput: React.FC<{
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    fullWidth?: boolean;
+}>;
+export declare const SwatchGrid: React.FC<{
+    colors: string[];
+    selectedColor: string;
+    onSelect: (color: string) => void;
+}>;

package/dist/toolkit/fields/components/color-picker/color-picker.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { ColorFormat } from './color-formatter';
-type WrappedFieldProps = any;
+interface FieldInput {
+    value: string | null;
+    onChange: (value: string | null) => void;
+}
 interface Props {
     colorFormat: ColorFormat;
     userColors: string[];
     widget?: 'sketch' | 'block';
-    input: WrappedFieldProps['input'];
+    width?: string;
+    input: FieldInput;
 }
 export declare const ColorPicker: React.FC<Props>;
 export {};

package/dist/toolkit/fields/components/color-picker/color-utils.d.ts

@@ -0,0 +1,37 @@
+export declare const TRANSPARENT = "transparent";
+export declare const isValidHex: (value: string) => boolean;
+export declare const expandHex: (hex: string) => string;
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Converts RGB color values to a hex color string (e.g., "#FF0000" for red).
+ *
+ * How it works:
+ * We need to convert three numbers (r, g, b) each ranging 0-255 into a 6-digit hex string.
+ * For example: rgb(255, 128, 0) should become "#FF8000"
+ *
+ * The bit-shifting approach combines all three values into one number:
+ * - (1 << 24) = 16777216 (0x1000000) - This adds a leading '1' to guarantee we always
+ *   get 7 hex digits, which we later remove. Without this, rgb(0, 0, 255) would give
+ *   us "FF" instead of "0000FF".
+ * - (r << 16) shifts red left by 16 bits, placing it in positions for the first two hex digits
+ * - (g << 8) shifts green left by 8 bits, placing it in positions for the middle two hex digits
+ * - b stays as-is, occupying the last two hex digits
+ *
+ * Example with rgb(255, 128, 0):
+ *   16777216 + (255 << 16) + (128 << 8) + 0
+ *   = 16777216 + 16711680 + 32768 + 0
+ *   = 33521664
+ *   = 0x1FF8000 (as hex string: "1FF8000")
+ *   After slice(1): "FF8000"
+ *   Final result: "#FF8000"
+ */
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+export declare const checkerboardStyle: (size?: number) => {
+    backgroundImage: string;
+    backgroundSize: string;
+    backgroundPosition: string;
+};

package/dist/toolkit/fields/components/color-picker/sketch-widget.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { WidgetProps } from './color-input';
+export declare const SketchWidget: React.FC<WidgetProps>;

package/dist/toolkit/fields/plugins/color-field-plugin.d.ts

@@ -4,6 +4,7 @@ export interface ColorFieldProps {
     colorFormat: string;
     colors: string[];
     widget?: 'sketch' | 'block';
+    width?: string;
 }
 export declare const ColorField: (props: import("./wrap-field-with-meta").InputFieldType<InputProps, ColorFieldProps>) => React.JSX.Element;
 export declare const ColorFieldPlugin: {

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/editor.d.ts

@@ -11,7 +11,7 @@ export declare const EditorContainer: {
 declare const editorVariants: (props?: {
     disabled?: boolean;
     focused?: boolean;
-    variant?: "default" | "select" | "none" | "comment" | "demo" | "ai" | "aiChat" | "fullWidth";
+    variant?: "default" | "select" | "none" | "fullWidth" | "comment" | "demo" | "ai" | "aiChat";
 } & import("class-variance-authority/types").ClassProp) => string;
 export type EditorProps = PlateContentProps & VariantProps<typeof editorVariants>;
 export declare const Editor: React.ForwardRefExoticComponent<Omit<import("@udecode/plate").EditableProps, "decorate"> & {
@@ -22,6 +22,6 @@ export declare const Editor: React.ForwardRefExoticComponent<Omit<import("@udeco
 } & VariantProps<(props?: {
     disabled?: boolean;
     focused?: boolean;
-    variant?: "default" | "select" | "none" | "comment" | "demo" | "ai" | "aiChat" | "fullWidth";
+    variant?: "default" | "select" | "none" | "fullWidth" | "comment" | "demo" | "ai" | "aiChat";
 } & import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/button.d.ts

@@ -3,12 +3,12 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: {
     isMenu?: boolean;
     size?: "default" | "none" | "icon" | "sm" | "lg" | "sms" | "xs";
-    variant?: "default" | "link" | "secondary" | "ghost" | "destructive" | "outline" | "inlineLink";
+    variant?: "default" | "link" | "secondary" | "ghost" | "destructive" | "outline" | "inlineLink" | "tinaPrimary";
 } & import("class-variance-authority/types").ClassProp) => string;
 export declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean;
 } & VariantProps<(props?: {
     isMenu?: boolean;
     size?: "default" | "none" | "icon" | "sm" | "lg" | "sms" | "xs";
-    variant?: "default" | "link" | "secondary" | "ghost" | "destructive" | "outline" | "inlineLink";
+    variant?: "default" | "link" | "secondary" | "ghost" | "destructive" | "outline" | "inlineLink" | "tinaPrimary";
 } & import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/command.d.ts

@@ -6,7 +6,7 @@ export declare const Command: React.ForwardRefExoticComponent<Omit<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -22,7 +22,7 @@ export declare const Command: React.ForwardRefExoticComponent<Omit<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -68,7 +68,7 @@ export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -77,14 +77,14 @@ export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -93,7 +93,7 @@ export declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -102,7 +102,7 @@ export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "onSelect"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "disabled" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/toolkit/index.d.ts

@@ -19,7 +19,7 @@ export type { TinaState } from './tina-state';
 export * from './forms';
 export * from './icons';
 export * from './react-dismissible';
-export { Nav, LocalWarning, BillingWarning, SyncStatusButton, } from './react-sidebar';
+export { Nav, NavCloudLink, NavProvider, NavMenuTrigger, useNav, LocalWarning, BillingWarning, SyncStatusButton, } from './react-sidebar';
 export { useCMS } from './react-core';
 /**
  * Custom `tinacms` things

package/dist/toolkit/react-sidebar/components/NavMenuTrigger.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface NavMenuTriggerProps {
+    className?: string;
+    label?: string;
+}
+/**
+ * A button component that triggers the navigation menu
+ * Can be used anywhere within the NavProvider hierarchy
+ */
+export declare const NavMenuTrigger: React.FC<NavMenuTriggerProps>;
+export {};

package/dist/toolkit/react-sidebar/components/nav-components.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CloudConfigPlugin } from '../../react-cloud-config';
+interface NavCloudLinkProps {
+    config: CloudConfigPlugin;
+}
+/**
+ * Shared component for rendering cloud configuration links
+ * Used across both admin and sidebar navigation
+ */
+export declare const NavCloudLink: React.FC<NavCloudLinkProps>;
+export {};

package/dist/toolkit/react-sidebar/components/nav-context.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export interface NavContextValue {
+    menuIsOpen: boolean;
+    toggleMenu: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+}
+export declare const NavContext: React.Context<NavContextValue>;
+export declare const useNav: () => NavContextValue;
+interface NavProviderProps {
+    children: ReactNode;
+    defaultOpen?: boolean;
+}
+export declare const NavProvider: React.FC<NavProviderProps>;
+export {};

package/dist/toolkit/react-sidebar/components/nav.d.ts

@@ -9,8 +9,8 @@ interface NavCollection {
 interface NavProps {
     isLocalMode: boolean;
     showHamburger?: boolean;
-    menuIsOpen: boolean;
-    toggleMenu: () => void;
+    menuIsOpen?: boolean;
+    toggleMenu?: () => void;
     children?: any;
     className?: string;
     userName?: string;
@@ -41,5 +41,5 @@ interface NavProps {
         };
     }>;
 }
-export declare const Nav: ({ isLocalMode, showHamburger, menuIsOpen, toggleMenu, className, children, showCollections, collectionsInfo, screens, cloudConfigs, contentCreators, sidebarWidth, RenderNavSite, RenderNavCloud, RenderNavCollection, AuthRenderNavCollection, ...props }: NavProps) => React.JSX.Element;
+export declare const Nav: ({ isLocalMode, showHamburger, menuIsOpen: menuIsOpenProp, toggleMenu: toggleMenuProp, className, children, showCollections, collectionsInfo, screens, cloudConfigs, contentCreators, sidebarWidth, RenderNavSite, RenderNavCloud, RenderNavCollection, AuthRenderNavCollection, ...props }: NavProps) => React.JSX.Element;
 export {};

package/dist/toolkit/react-sidebar/index.d.ts

@@ -3,3 +3,6 @@ export { SidebarProvider } from './components/sidebar';
 export { Nav } from './components/nav';
 export { LocalWarning, BillingWarning } from './components/local-warning';
 export { SyncStatusButton } from './components/sync-status';
+export { NavCloudLink } from './components/nav-components';
+export { NavProvider, useNav } from './components/nav-context';
+export { NavMenuTrigger } from './components/NavMenuTrigger';

package/package.json

@@ -2,7 +2,7 @@
   "name": "tinacms",
   "type": "module",
   "typings": "dist/index.d.ts",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "main": "dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -105,7 +105,7 @@
     "monaco-editor": "0.31.0",
     "prism-react-renderer": "^2.4.1",
     "prop-types": "15.7.2",
-    "react-color": "^2.19.3",
+    "react-colorful": "^5.6.1",
     "react-datetime": "^3.3.1",
     "react-day-picker": "^9.11.1",
     "react-dropzone": "14.2.3",
@@ -119,7 +119,7 @@
     "zod": "^3.24.2",
     "@tinacms/mdx": "2.0.0",
     "@tinacms/schema-tools": "2.0.0",
-    "@tinacms/search": "1.1.4"
+    "@tinacms/search": "1.1.5"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.8.1",
@@ -133,11 +133,9 @@
     "@types/node": "^22.13.1",
     "@types/prop-types": "^15.7.14",
     "@types/react": "^18.3.18",
-    "@types/react-color": "^3.0.13",
     "@types/react-dom": "^18.3.5",
     "happy-dom": "15.10.2",
     "identity-obj-proxy": "^3.0.0",
-    "isomorphic-fetch": "^3.0.0",
     "jest-file-snapshot": "^0.7.0",
     "lowlight": "^3.3.0",
     "next": "14.2.10",
@@ -149,7 +147,7 @@
     "typescript": "^5.7.3",
     "vite": "^5.4.14",
     "vitest": "^2.1.9",
-    "@tinacms/scripts": "1.4.1"
+    "@tinacms/scripts": "1.4.2"
   },
   "peerDependencies": {
     "react": ">=16.14.0",