@tecof/theme-editor 0.0.6 → 0.0.8

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default from 'react';
+import react__default, { ReactElement } from 'react';
 
 interface ThemeColors {
     primary: string;
@@ -81,6 +81,8 @@ interface TecofProviderProps {
     apiUrl: string;
     /** Merchant secret key */
     secretKey: string;
+    /** CDN base URL for media files (defaults to apiUrl if not provided) */
+    cdnUrl?: string;
     /** React children */
     children: React.ReactNode;
 }
@@ -136,6 +138,12 @@ interface UploadedFile {
         [key: string]: any;
     };
 }
+interface LinkFieldValue {
+    url: string;
+    label?: string;
+    target?: '_self' | '_blank';
+    type?: 'page' | 'custom';
+}
 
 /**
  * Tecof API Client — handles communication with the Tecof backend
@@ -176,6 +184,19 @@ declare class TecofApiClient {
      * Fetch previously uploaded files (for media library selector)
      */
     getUploads(page?: number, limit?: number): Promise<ApiResponse<any[]>>;
+    /**
+     * Fetch merchant pages list (for LinkField page selector)
+     * Returns pages with: _id, slug, title, status, metaTitle
+     */
+    getPages(): Promise<ApiResponse<any[]>>;
+    /**
+     * Translate text to multiple languages (for LanguageField)
+     * Returns [{code, value}] for each locale
+     */
+    translate(text: string, sourceLang: string, locales: string[], isHtml?: boolean): Promise<ApiResponse<{
+        code: string;
+        value: string;
+    }[]>>;
     /** CDN base URL (derived from apiUrl) */
     get cdnUrl(): string;
 }
@@ -215,6 +236,45 @@ declare const TecofEditor: ({ pageId, config, accessToken, onSave, onChange, ove
  */
 declare const TecofRender: ({ data, config, className }: TecofRenderProps) => react_jsx_runtime.JSX.Element | null;
 
+type PictureSize = 'thumbnail' | 'medium' | 'large' | 'full';
+interface TecofPictureProps {
+    /** The uploaded file data from UploadField */
+    data: UploadedFile | null | undefined;
+    /** Alt text for accessibility */
+    alt?: string | null;
+    /** Image size variant */
+    size?: PictureSize;
+    /** Loading strategy */
+    loading?: 'lazy' | 'eager';
+    /** Fill the parent container (position: absolute, 100%) */
+    fill?: boolean;
+    /** Container style overrides */
+    style?: React.CSSProperties;
+    /** Image style overrides */
+    imgStyle?: React.CSSProperties;
+    /** Container className */
+    className?: string;
+    /** Image className */
+    imgClassName?: string;
+    /** Image width (auto-detected from meta if available) */
+    width?: number;
+    /** Image height (auto-detected from meta if available) */
+    height?: number;
+    /** Whether to use a blur placeholder while loading */
+    usePlaceholder?: boolean;
+    /** Custom blur data URL */
+    blurDataURL?: string;
+    /** Fancybox lightbox support */
+    fancybox?: boolean;
+    /** Fancybox group name */
+    fancyboxName?: string;
+    /** Custom Image component (e.g. Next.js Image). If not provided, uses standard <img> */
+    ImageComponent?: React.ComponentType<any>;
+    /** Extra props to pass to the Image component (e.g. quality, priority, placeholder) */
+    imageProps?: Record<string, any>;
+}
+declare const TecofPicture: react.MemoExoticComponent<({ data, alt, size, loading, fill, style, imgStyle, className, imgClassName, width, height, usePlaceholder, blurDataURL, fancybox, fancyboxName, ImageComponent, imageProps, }: TecofPictureProps) => react_jsx_runtime.JSX.Element | null>;
+
 interface LanguageFieldProps {
     field: any;
     name: string;
@@ -224,19 +284,27 @@ interface LanguageFieldProps {
     readOnly?: boolean;
 }
 interface LanguageFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
     /** Whether to render as textarea instead of input */
     isTextarea?: boolean;
     /** Number of rows for textarea mode */
     textareaRows?: number;
     /** Placeholder text */
     placeholder?: string;
+    /** Whether the content is HTML (for translation) */
+    isHtml?: boolean;
 }
-declare const LanguageField: ({ value, onChange, readOnly, isTextarea, textareaRows, placeholder, }: LanguageFieldProps & LanguageFieldOptions) => react_jsx_runtime.JSX.Element | null;
-declare const createLanguageField: (options?: LanguageFieldOptions & {
-    label?: string;
-}) => {
+declare const LanguageField: ({ value, onChange, readOnly, isTextarea, textareaRows, placeholder, isHtml, }: LanguageFieldProps & LanguageFieldOptions) => react_jsx_runtime.JSX.Element | null;
+declare const createLanguageField: (options?: LanguageFieldOptions) => {
     type: "custom";
     label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
     render: ({ value, onChange, readOnly, field, name, id }: LanguageFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
@@ -249,6 +317,12 @@ interface EditorFieldProps {
     readOnly?: boolean;
 }
 interface EditorFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
     /** Placeholder text for empty editor */
     placeholder?: string;
 }
@@ -282,11 +356,11 @@ declare const EditorField: ({ value, onChange, readOnly, }: EditorFieldProps & E
  * };
  * ```
  */
-declare const createEditorField: (options?: EditorFieldOptions & {
-    label?: string;
-}) => {
+declare const createEditorField: (options?: EditorFieldOptions) => {
     type: "custom";
     label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
     render: ({ value, onChange, readOnly, field, name, id }: EditorFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
@@ -299,17 +373,43 @@ interface UploadFieldProps {
     readOnly?: boolean;
 }
 interface UploadFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
     allowMultiple?: boolean;
     maxFiles?: number;
     acceptedTypes?: string[];
     maxFileSize?: string;
+    maxTotalFileSize?: string;
     folder?: string;
-    label?: string;
+    /** Show uploaded files list with view/download buttons */
+    showUploadedFiles?: boolean;
+    /** Preview height for images in FilePond */
+    imagePreviewHeight?: number;
+    /** Allow reorder in FilePond */
+    allowReorder?: boolean;
+    /** Enable image compression before upload */
+    imageCompressionEnabled?: boolean;
+    /** Image compression options */
+    imageCompressionOptions?: {
+        maxSizeMB?: number;
+        maxWidthOrHeight?: number;
+        useWebWorker?: boolean;
+        fileType?: string;
+    };
 }
-declare const UploadField: react.ForwardRefExoticComponent<UploadFieldProps & UploadFieldOptions & react.RefAttributes<any>>;
+declare const UploadField: {
+    ({ value: rawValue, onChange, allowMultiple, maxFiles, acceptedTypes, maxFileSize, maxTotalFileSize, folder, readOnly, showUploadedFiles, imagePreviewHeight, allowReorder, imageCompressionEnabled, imageCompressionOptions, }: UploadFieldProps & UploadFieldOptions): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 declare const createUploadField: (options?: UploadFieldOptions) => {
     type: "custom";
     label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
     render: ({ value, onChange, readOnly, field, name, id }: UploadFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
@@ -322,7 +422,12 @@ interface CodeEditorFieldProps {
     readOnly?: boolean;
 }
 interface CodeEditorFieldOptions {
+    /** Field label displayed in the Puck sidebar */
     label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
     defaultLanguage?: string;
     height?: string;
     theme?: string;
@@ -359,9 +464,100 @@ declare const CodeEditorField: react__default.ForwardRefExoticComponent<CodeEdit
 declare const createCodeEditorField: (options?: CodeEditorFieldOptions) => {
     type: "custom";
     label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react__default.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
     render: ({ value, onChange, readOnly, field, name, id }: CodeEditorFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
+interface LinkFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: LinkFieldValue | null;
+    onChange: (value: LinkFieldValue | null) => void;
+    readOnly?: boolean;
+}
+interface LinkFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
+    /** Show target selector (_self / _blank) */
+    showTarget?: boolean;
+    /** Placeholder for URL input */
+    placeholder?: string;
+}
+declare const LinkField: {
+    ({ value, onChange, readOnly, showTarget, placeholder, }: LinkFieldProps & LinkFieldOptions): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const createLinkField: (options?: LinkFieldOptions) => {
+    type: "custom";
+    label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: LinkFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface ColorFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}
+interface ColorFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
+    /** Show opacity/alpha slider */
+    showOpacity?: boolean;
+    /** Show preset color palette */
+    showPresets?: boolean;
+    /** Custom preset colors (array of hex strings) */
+    presetColors?: string[];
+    /** Default/fallback color */
+    defaultColor?: string;
+    /** Placeholder text for hex input */
+    placeholder?: string;
+    /** Show reset button */
+    showReset?: boolean;
+}
+declare const ColorField: {
+    ({ value, onChange, readOnly, showOpacity, showPresets, presetColors, defaultColor, placeholder, showReset, }: ColorFieldProps & ColorFieldOptions): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Creates a Puck custom field definition for color picking.
+ *
+ * @example
+ * ```ts
+ * import { createColorField } from '@tecof/theme-editor';
+ *
+ * fields: {
+ *   bgColor: createColorField({ label: 'Arka Plan Rengi' }),
+ *   textColor: createColorField({
+ *     label: 'Metin Rengi',
+ *     showOpacity: true,
+ *     defaultColor: '#18181b',
+ *   }),
+ * }
+ * ```
+ */
+declare const createColorField: (options?: ColorFieldOptions) => {
+    type: "custom";
+    label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: ColorFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
 declare function hexToHsl(hex: string): HSL;
 declare function hslToHex(h: number, s: number, l: number): string;
 declare function lighten(hex: string, amount: number): string;
@@ -370,4 +566,4 @@ declare function generateCSSVariables(theme: ThemeConfig): string;
 declare function getDefaultTheme(): ThemeConfig;
 declare function mergeTheme(base: ThemeConfig, overrides: Partial<ThemeConfig>): ThemeConfig;
 
-export { type ApiResponse, CodeEditorField, EditorField, type HSL, LanguageField, type LanguageFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createEditorField, createLanguageField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };
+export { type ApiResponse, CodeEditorField, ColorField, EditorField, type HSL, LanguageField, type LanguageFieldValue, LinkField, type LinkFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofPicture, type TecofPictureProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createColorField, createEditorField, createLanguageField, createLinkField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default from 'react';
+import react__default, { ReactElement } from 'react';
 
 interface ThemeColors {
     primary: string;
@@ -81,6 +81,8 @@ interface TecofProviderProps {
     apiUrl: string;
     /** Merchant secret key */
     secretKey: string;
+    /** CDN base URL for media files (defaults to apiUrl if not provided) */
+    cdnUrl?: string;
     /** React children */
     children: React.ReactNode;
 }
@@ -136,6 +138,12 @@ interface UploadedFile {
         [key: string]: any;
     };
 }
+interface LinkFieldValue {
+    url: string;
+    label?: string;
+    target?: '_self' | '_blank';
+    type?: 'page' | 'custom';
+}
 
 /**
  * Tecof API Client — handles communication with the Tecof backend
@@ -176,6 +184,19 @@ declare class TecofApiClient {
      * Fetch previously uploaded files (for media library selector)
      */
     getUploads(page?: number, limit?: number): Promise<ApiResponse<any[]>>;
+    /**
+     * Fetch merchant pages list (for LinkField page selector)
+     * Returns pages with: _id, slug, title, status, metaTitle
+     */
+    getPages(): Promise<ApiResponse<any[]>>;
+    /**
+     * Translate text to multiple languages (for LanguageField)
+     * Returns [{code, value}] for each locale
+     */
+    translate(text: string, sourceLang: string, locales: string[], isHtml?: boolean): Promise<ApiResponse<{
+        code: string;
+        value: string;
+    }[]>>;
     /** CDN base URL (derived from apiUrl) */
     get cdnUrl(): string;
 }
@@ -215,6 +236,45 @@ declare const TecofEditor: ({ pageId, config, accessToken, onSave, onChange, ove
  */
 declare const TecofRender: ({ data, config, className }: TecofRenderProps) => react_jsx_runtime.JSX.Element | null;
 
+type PictureSize = 'thumbnail' | 'medium' | 'large' | 'full';
+interface TecofPictureProps {
+    /** The uploaded file data from UploadField */
+    data: UploadedFile | null | undefined;
+    /** Alt text for accessibility */
+    alt?: string | null;
+    /** Image size variant */
+    size?: PictureSize;
+    /** Loading strategy */
+    loading?: 'lazy' | 'eager';
+    /** Fill the parent container (position: absolute, 100%) */
+    fill?: boolean;
+    /** Container style overrides */
+    style?: React.CSSProperties;
+    /** Image style overrides */
+    imgStyle?: React.CSSProperties;
+    /** Container className */
+    className?: string;
+    /** Image className */
+    imgClassName?: string;
+    /** Image width (auto-detected from meta if available) */
+    width?: number;
+    /** Image height (auto-detected from meta if available) */
+    height?: number;
+    /** Whether to use a blur placeholder while loading */
+    usePlaceholder?: boolean;
+    /** Custom blur data URL */
+    blurDataURL?: string;
+    /** Fancybox lightbox support */
+    fancybox?: boolean;
+    /** Fancybox group name */
+    fancyboxName?: string;
+    /** Custom Image component (e.g. Next.js Image). If not provided, uses standard <img> */
+    ImageComponent?: React.ComponentType<any>;
+    /** Extra props to pass to the Image component (e.g. quality, priority, placeholder) */
+    imageProps?: Record<string, any>;
+}
+declare const TecofPicture: react.MemoExoticComponent<({ data, alt, size, loading, fill, style, imgStyle, className, imgClassName, width, height, usePlaceholder, blurDataURL, fancybox, fancyboxName, ImageComponent, imageProps, }: TecofPictureProps) => react_jsx_runtime.JSX.Element | null>;
+
 interface LanguageFieldProps {
     field: any;
     name: string;
@@ -224,19 +284,27 @@ interface LanguageFieldProps {
     readOnly?: boolean;
 }
 interface LanguageFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
     /** Whether to render as textarea instead of input */
     isTextarea?: boolean;
     /** Number of rows for textarea mode */
     textareaRows?: number;
     /** Placeholder text */
     placeholder?: string;
+    /** Whether the content is HTML (for translation) */
+    isHtml?: boolean;
 }
-declare const LanguageField: ({ value, onChange, readOnly, isTextarea, textareaRows, placeholder, }: LanguageFieldProps & LanguageFieldOptions) => react_jsx_runtime.JSX.Element | null;
-declare const createLanguageField: (options?: LanguageFieldOptions & {
-    label?: string;
-}) => {
+declare const LanguageField: ({ value, onChange, readOnly, isTextarea, textareaRows, placeholder, isHtml, }: LanguageFieldProps & LanguageFieldOptions) => react_jsx_runtime.JSX.Element | null;
+declare const createLanguageField: (options?: LanguageFieldOptions) => {
     type: "custom";
     label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
     render: ({ value, onChange, readOnly, field, name, id }: LanguageFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
@@ -249,6 +317,12 @@ interface EditorFieldProps {
     readOnly?: boolean;
 }
 interface EditorFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
     /** Placeholder text for empty editor */
     placeholder?: string;
 }
@@ -282,11 +356,11 @@ declare const EditorField: ({ value, onChange, readOnly, }: EditorFieldProps & E
  * };
  * ```
  */
-declare const createEditorField: (options?: EditorFieldOptions & {
-    label?: string;
-}) => {
+declare const createEditorField: (options?: EditorFieldOptions) => {
     type: "custom";
     label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
     render: ({ value, onChange, readOnly, field, name, id }: EditorFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
@@ -299,17 +373,43 @@ interface UploadFieldProps {
     readOnly?: boolean;
 }
 interface UploadFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
     allowMultiple?: boolean;
     maxFiles?: number;
     acceptedTypes?: string[];
     maxFileSize?: string;
+    maxTotalFileSize?: string;
     folder?: string;
-    label?: string;
+    /** Show uploaded files list with view/download buttons */
+    showUploadedFiles?: boolean;
+    /** Preview height for images in FilePond */
+    imagePreviewHeight?: number;
+    /** Allow reorder in FilePond */
+    allowReorder?: boolean;
+    /** Enable image compression before upload */
+    imageCompressionEnabled?: boolean;
+    /** Image compression options */
+    imageCompressionOptions?: {
+        maxSizeMB?: number;
+        maxWidthOrHeight?: number;
+        useWebWorker?: boolean;
+        fileType?: string;
+    };
 }
-declare const UploadField: react.ForwardRefExoticComponent<UploadFieldProps & UploadFieldOptions & react.RefAttributes<any>>;
+declare const UploadField: {
+    ({ value: rawValue, onChange, allowMultiple, maxFiles, acceptedTypes, maxFileSize, maxTotalFileSize, folder, readOnly, showUploadedFiles, imagePreviewHeight, allowReorder, imageCompressionEnabled, imageCompressionOptions, }: UploadFieldProps & UploadFieldOptions): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 declare const createUploadField: (options?: UploadFieldOptions) => {
     type: "custom";
     label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
     render: ({ value, onChange, readOnly, field, name, id }: UploadFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
@@ -322,7 +422,12 @@ interface CodeEditorFieldProps {
     readOnly?: boolean;
 }
 interface CodeEditorFieldOptions {
+    /** Field label displayed in the Puck sidebar */
     label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
     defaultLanguage?: string;
     height?: string;
     theme?: string;
@@ -359,9 +464,100 @@ declare const CodeEditorField: react__default.ForwardRefExoticComponent<CodeEdit
 declare const createCodeEditorField: (options?: CodeEditorFieldOptions) => {
     type: "custom";
     label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react__default.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
     render: ({ value, onChange, readOnly, field, name, id }: CodeEditorFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
+interface LinkFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: LinkFieldValue | null;
+    onChange: (value: LinkFieldValue | null) => void;
+    readOnly?: boolean;
+}
+interface LinkFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
+    /** Show target selector (_self / _blank) */
+    showTarget?: boolean;
+    /** Placeholder for URL input */
+    placeholder?: string;
+}
+declare const LinkField: {
+    ({ value, onChange, readOnly, showTarget, placeholder, }: LinkFieldProps & LinkFieldOptions): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const createLinkField: (options?: LinkFieldOptions) => {
+    type: "custom";
+    label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: LinkFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface ColorFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}
+interface ColorFieldOptions {
+    /** Field label displayed in the Puck sidebar */
+    label?: string;
+    /** Icon displayed next to the label (React element, e.g. Lucide icon) */
+    labelIcon?: ReactElement;
+    /** Whether this field is visible in the sidebar */
+    visible?: boolean;
+    /** Show opacity/alpha slider */
+    showOpacity?: boolean;
+    /** Show preset color palette */
+    showPresets?: boolean;
+    /** Custom preset colors (array of hex strings) */
+    presetColors?: string[];
+    /** Default/fallback color */
+    defaultColor?: string;
+    /** Placeholder text for hex input */
+    placeholder?: string;
+    /** Show reset button */
+    showReset?: boolean;
+}
+declare const ColorField: {
+    ({ value, onChange, readOnly, showOpacity, showPresets, presetColors, defaultColor, placeholder, showReset, }: ColorFieldProps & ColorFieldOptions): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Creates a Puck custom field definition for color picking.
+ *
+ * @example
+ * ```ts
+ * import { createColorField } from '@tecof/theme-editor';
+ *
+ * fields: {
+ *   bgColor: createColorField({ label: 'Arka Plan Rengi' }),
+ *   textColor: createColorField({
+ *     label: 'Metin Rengi',
+ *     showOpacity: true,
+ *     defaultColor: '#18181b',
+ *   }),
+ * }
+ * ```
+ */
+declare const createColorField: (options?: ColorFieldOptions) => {
+    type: "custom";
+    label: string | undefined;
+    labelIcon: ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+    visible: boolean | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: ColorFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
 declare function hexToHsl(hex: string): HSL;
 declare function hslToHex(h: number, s: number, l: number): string;
 declare function lighten(hex: string, amount: number): string;
@@ -370,4 +566,4 @@ declare function generateCSSVariables(theme: ThemeConfig): string;
 declare function getDefaultTheme(): ThemeConfig;
 declare function mergeTheme(base: ThemeConfig, overrides: Partial<ThemeConfig>): ThemeConfig;
 
-export { type ApiResponse, CodeEditorField, EditorField, type HSL, LanguageField, type LanguageFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createEditorField, createLanguageField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };
+export { type ApiResponse, CodeEditorField, ColorField, EditorField, type HSL, LanguageField, type LanguageFieldValue, LinkField, type LinkFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofPicture, type TecofPictureProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createColorField, createEditorField, createLanguageField, createLinkField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };