@nice2dev/ui-forms 1.0.10

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DaXUT-OK.cjs");exports.NiceFormBuilder=e.NiceFormBuilder;exports.NiceFormBuilderAI=e.NiceFormBuilderAI;exports.NiceFormDesigner=e.NiceFormDesigner;exports.schemaToFormItems=e.schemaToFormItems;exports.useFormDesigner=e.useFormDesigner;exports.validateFormSchema=e.validateFormSchema;

package/dist/index.d.ts

@@ -0,0 +1,468 @@
+import { default as default_2 } from 'react';
+import { NiceBaseProps } from '@nice2dev/ui';
+
+declare interface AIGeneratedField {
+    label: string;
+    field: string;
+    type: string;
+    required?: boolean;
+    options?: string[];
+    placeholder?: string;
+    helpText?: string;
+}
+
+declare interface BarcodeConfig {
+    formats: ('ean13' | 'ean8' | 'code128' | 'code39' | 'qr' | 'datamatrix' | 'pdf417')[];
+    autoFill?: {
+        field: string;
+        property: string;
+    }[];
+    enableCamera?: boolean;
+    enableManualEntry?: boolean;
+}
+
+declare interface CalculationConfig {
+    expression: string;
+    dependencies: string[];
+    format?: 'number' | 'currency' | 'percentage' | 'date';
+    precision?: number;
+    currencyCode?: string;
+}
+
+declare interface DataBindingConfig {
+    entityType: string;
+    fieldPath: string;
+    direction: 'read' | 'write' | 'both';
+    transform?: string;
+    defaultFromEntity?: boolean;
+}
+
+declare interface FieldI18n {
+    label?: Record<string, string>;
+    placeholder?: Record<string, string>;
+    helpText?: Record<string, string>;
+    options?: Record<string, {
+        value: string;
+        label: string;
+    }[]>;
+}
+
+declare interface FormDesignerContextValue {
+    schema: FormDesignerSchema;
+    selectedFieldId: string | null;
+    selectedTabId: string | null;
+    locale: string;
+    setSchema: (schema: FormDesignerSchema) => void;
+    selectField: (fieldId: string | null) => void;
+    selectTab: (tabId: string | null) => void;
+    addField: (containerId: string, field: FormDesignerField, index?: number) => void;
+    updateField: (fieldId: string, updates: Partial<FormDesignerField>) => void;
+    removeField: (fieldId: string) => void;
+    moveField: (fieldId: string, toContainerId: string, toIndex: number) => void;
+    duplicateField: (fieldId: string) => void;
+    addTab: (tab: FormDesignerTab, index?: number) => void;
+    updateTab: (tabId: string, updates: Partial<FormDesignerTab>) => void;
+    removeTab: (tabId: string) => void;
+    setLocale: (locale: string) => void;
+    loadTemplate: (template: FormTemplate) => void;
+    saveAsTemplate: (name: string, category: string) => FormTemplate;
+}
+
+declare interface FormDesignerField {
+    id: string;
+    type: FormDesignerFieldType;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    helpText?: string;
+    defaultValue?: unknown;
+    options?: FormFieldOption_2[];
+    validations?: FormFieldValidation_2[];
+    conditions?: FormFieldCondition_2[];
+    colSpan?: number;
+    rowSpan?: number;
+    className?: string;
+    style?: default_2.CSSProperties;
+    disabled?: boolean;
+    readonly?: boolean;
+    hidden?: boolean;
+    lookup?: LookupConfig;
+    calculation?: CalculationConfig;
+    barcode?: BarcodeConfig;
+    dataBinding?: DataBindingConfig;
+    i18n?: FieldI18n;
+    children?: FormDesignerField[];
+    props?: Record<string, unknown>;
+}
+
+declare type FormDesignerFieldType = 'text' | 'textarea' | 'number' | 'email' | 'password' | 'phone' | 'url' | 'date' | 'datetime' | 'time' | 'dateRange' | 'select' | 'multiselect' | 'checkbox' | 'toggle' | 'radio' | 'slider' | 'rating' | 'richtext' | 'markdown' | 'code' | 'file' | 'image' | 'signature' | 'lookup' | 'calculated' | 'barcode' | 'qrcode' | 'currency' | 'percentage' | 'section' | 'tab' | 'divider' | 'spacer' | 'heading' | 'paragraph' | 'repeater' | 'table' | 'address' | 'geolocation';
+
+declare interface FormDesignerSchema {
+    version: string;
+    id: string;
+    title?: string;
+    description?: string;
+    entityType?: string;
+    layout: {
+        type: 'flat' | 'tabs' | 'wizard' | 'accordion';
+        columns: 1 | 2 | 3 | 4;
+        labelPosition: 'top' | 'left' | 'floating';
+        size: 'sm' | 'md' | 'lg';
+        gap: 'sm' | 'md' | 'lg';
+    };
+    sections?: FormDesignerSection[];
+    tabs?: FormDesignerTab[];
+    submit?: {
+        label: string;
+        labelKey?: string;
+        style?: 'primary' | 'secondary' | 'success';
+        position?: 'left' | 'center' | 'right';
+        showCancel?: boolean;
+        cancelLabel?: string;
+        cancelLabelKey?: string;
+    };
+    computedFields?: {
+        name: string;
+        expression: string;
+        dependencies: string[];
+    }[];
+    validations?: {
+        type: 'crossField';
+        expression: string;
+        message: string;
+        messageKey?: string;
+    }[];
+    defaultLocale?: string;
+    supportedLocales?: string[];
+    i18n?: {
+        title?: Record<string, string>;
+        description?: Record<string, string>;
+    };
+    meta?: {
+        createdAt?: string;
+        updatedAt?: string;
+        author?: string;
+        tags?: string[];
+    };
+}
+
+declare interface FormDesignerSection {
+    id: string;
+    title?: string;
+    description?: string;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    columns?: 1 | 2 | 3 | 4;
+    fields: FormDesignerField[];
+    i18n?: {
+        title?: Record<string, string>;
+        description?: Record<string, string>;
+    };
+}
+
+declare interface FormDesignerTab {
+    id: string;
+    title: string;
+    icon?: string;
+    disabled?: boolean;
+    badge?: string | number;
+    fields: FormDesignerField[];
+    i18n?: {
+        title?: Record<string, string>;
+    };
+}
+
+/**
+ * Conditional visibility rule
+ */
+declare interface FormFieldCondition {
+    field: string;
+    operator: 'equals' | 'notEquals' | 'contains' | 'greaterThan' | 'lessThan' | 'isEmpty' | 'isNotEmpty';
+    value?: any;
+}
+
+declare interface FormFieldCondition_2 {
+    field: string;
+    operator: 'equals' | 'notEquals' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'isEmpty' | 'isNotEmpty' | 'in' | 'notIn';
+    value?: unknown;
+    logicalOperator?: 'and' | 'or';
+}
+
+/**
+ * Form field definition
+ */
+export declare interface FormFieldDefinition {
+    /** Unique field ID */
+    id: string;
+    /** Field type */
+    type: FormFieldType;
+    /** Field name (for form data) */
+    name: string;
+    /** Display label */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Help text */
+    helpText?: string;
+    /** Default value */
+    defaultValue?: any;
+    /** Options for select/radio fields. Plain strings are treated as `{ value: s, label: s }`. */
+    options?: Array<FormFieldOption | string>;
+    /** Validation rules */
+    validations?: FormFieldValidation[];
+    /** Convenience flag — expanded into a `required` validation rule when serialised. */
+    required?: boolean;
+    /** Conditional visibility */
+    conditions?: FormFieldCondition[];
+    /** Is field disabled */
+    disabled?: boolean;
+    /** Is field readonly */
+    readonly?: boolean;
+    /** Column span (1-12) */
+    colSpan?: number;
+    /** Custom CSS class */
+    className?: string;
+    /** Custom styles */
+    style?: default_2.CSSProperties;
+    /** Additional field-specific props */
+    props?: Record<string, any>;
+    /** Nested fields (for section type) */
+    children?: FormFieldDefinition[];
+}
+
+/**
+ * Option for select/radio fields
+ */
+declare interface FormFieldOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    /** Optional stable identifier for keyed rendering. */
+    id?: string;
+}
+
+declare interface FormFieldOption_2 {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+}
+
+/**
+ * Available field types
+ */
+export declare type FormFieldType = 'text' | 'textarea' | 'number' | 'email' | 'password' | 'phone' | 'url' | 'date' | 'datetime' | 'time' | 'select' | 'multiselect' | 'checkbox' | 'toggle' | 'radio' | 'slider' | 'rating' | 'color' | 'file' | 'signature' | 'richtext' | 'markdown' | 'code' | 'heading' | 'paragraph' | 'divider' | 'spacer' | 'image' | 'section';
+
+/**
+ * Validation rule
+ */
+declare interface FormFieldValidation {
+    type: 'required' | 'minLength' | 'maxLength' | 'min' | 'max' | 'pattern' | 'email' | 'url' | 'custom';
+    value?: string | number | boolean;
+    message?: string;
+}
+
+declare interface FormFieldValidation_2 {
+    type: 'required' | 'minLength' | 'maxLength' | 'min' | 'max' | 'pattern' | 'email' | 'url' | 'custom' | 'unique';
+    value?: string | number | boolean;
+    message?: string;
+    errorMessageKey?: string;
+}
+
+/**
+ * Complete form schema
+ */
+export declare interface FormSchema {
+    /** Schema version */
+    version: string;
+    /** Form ID */
+    id: string;
+    /** Form title */
+    title?: string;
+    /** Form description */
+    description?: string;
+    /** Layout settings */
+    layout: {
+        columns: 1 | 2 | 3 | 4;
+        labelPosition: 'top' | 'left' | 'floating';
+        size: 'sm' | 'md' | 'lg';
+        gap: 'sm' | 'md' | 'lg';
+    };
+    /** Form sections */
+    sections: FormSectionDefinition[];
+    /** Submit button settings */
+    submit?: {
+        label: string;
+        style?: 'primary' | 'secondary' | 'success';
+        position?: 'left' | 'center' | 'right';
+    };
+    /** Meta information */
+    meta?: {
+        createdAt?: string;
+        updatedAt?: string;
+        author?: string;
+    };
+}
+
+/**
+ * Form section definition
+ */
+export declare interface FormSectionDefinition {
+    id: string;
+    title?: string;
+    description?: string;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    columns?: 1 | 2 | 3 | 4;
+    fields: FormFieldDefinition[];
+}
+
+declare interface FormTemplate {
+    id: string;
+    name: string;
+    description?: string;
+    category: string;
+    schema: FormDesignerSchema;
+    thumbnail?: string;
+    createdAt?: string;
+    updatedAt?: string;
+}
+
+declare interface LookupConfig {
+    entityType: string;
+    displayField: string;
+    valueField: string;
+    searchFields?: string[];
+    filterExpression?: string;
+    sortField?: string;
+    sortDirection?: 'asc' | 'desc';
+    pageSize?: number;
+    fetchUrl?: string;
+    dependsOn?: string[];
+    cascadeFields?: {
+        source: string;
+        target: string;
+    }[];
+}
+
+export declare function NiceFormBuilder({ initialSchema, fields, onChange, onExport, onPreview, className, style, }: NiceFormBuilderProps): JSX.Element;
+
+export declare const NiceFormBuilderAI: default_2.ForwardRefExoticComponent<NiceFormBuilderAIProps & default_2.RefAttributes<NiceFormBuilderAIRef>>;
+
+export declare interface NiceFormBuilderAIProps extends Omit<NiceFormBuilderProps, 'ref' | 'onChange' | 'initialSchema'> {
+    /** Enable AI features (requires NiceAIProvider) */
+    enableAI?: boolean;
+    /** AI model to use */
+    aiModel?: string;
+    /** Enable form generation from description */
+    enableGenerate?: boolean;
+    /** Enable field suggestions */
+    enableSuggestions?: boolean;
+    /** Callback when AI generates form */
+    onGenerate?: (description: string, fields: AIGeneratedField[]) => void;
+    /** Show AI toolbar */
+    showAIToolbar?: boolean;
+    /** Preset form templates */
+    templates?: {
+        name: string;
+        description: string;
+    }[];
+    /** Initial form fields */
+    fields?: FormFieldDefinition[];
+    /** Callback when form fields change */
+    onChange?: (fields: FormFieldDefinition[]) => void;
+    /** Test ID */
+    'data-testid'?: string;
+}
+
+declare interface NiceFormBuilderAIRef {
+    /** Generate form from natural language description */
+    generateForm: (description: string) => Promise<AIGeneratedField[]>;
+    /** Get current form fields */
+    getFields: () => FormFieldDefinition[];
+    /** Apply generated fields to the form */
+    applyFields: (fields: AIGeneratedField[]) => void;
+    /** Clear all fields */
+    clearFields: () => void;
+}
+
+export declare interface NiceFormBuilderProps {
+    /** Initial form schema */
+    initialSchema?: FormSchema;
+    /** Convenience flat list of fields — wrapped into a default schema if `initialSchema` is omitted. */
+    fields?: Array<Partial<FormFieldDefinition> & {
+        id: string;
+        type: string;
+        label?: string;
+    }>;
+    /** Called when schema changes */
+    onChange?: (schema: FormSchema) => void;
+    /** Called when export is requested */
+    onExport?: (schema: FormSchema) => void;
+    /** Called when preview is requested */
+    onPreview?: (schema: FormSchema) => void;
+    /** Custom class */
+    className?: string;
+    /** Style */
+    style?: default_2.CSSProperties;
+}
+
+export declare const NiceFormDesigner: default_2.FC<NiceFormDesignerProps>;
+
+export declare interface NiceFormDesignerProps extends NiceBaseProps {
+    /** Initial form schema */
+    schema?: FormDesignerSchema;
+    /** Called when schema changes */
+    onChange?: (schema: FormDesignerSchema) => void;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Current locale for preview */
+    locale?: string;
+    /** Available locales */
+    locales?: {
+        code: string;
+        name: string;
+    }[];
+    /** Show palette */
+    showPalette?: boolean;
+    /** Show properties panel */
+    showProperties?: boolean;
+    /** Show preview toggle */
+    showPreview?: boolean;
+    /** Show toolbar */
+    showToolbar?: boolean;
+    /** Available entity types for data binding */
+    entityTypes?: {
+        name: string;
+        fields: {
+            name: string;
+            type: string;
+            label: string;
+        }[];
+    }[];
+    /** Form templates */
+    templates?: FormTemplate[];
+    /** Called to save as template */
+    onSaveTemplate?: (template: FormTemplate) => void;
+    /** Called to load template */
+    onLoadTemplate?: (templateId: string) => FormTemplate | null;
+    /** Enable validation */
+    enableValidation?: boolean;
+}
+
+/**
+ * Convert form schema to NiceForm items
+ */
+export declare function schemaToFormItems(schema: FormSchema): any[];
+
+export declare function useFormDesigner(): FormDesignerContextValue;
+
+/**
+ * Validate form schema
+ */
+export declare function validateFormSchema(schema: FormSchema): {
+    valid: boolean;
+    errors: string[];
+};
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import { U as r, V as s, X as m, _ as o, a0 as i, a1 as F } from "./index-B3TLwoy5.js";
+export {
+  r as NiceFormBuilder,
+  s as NiceFormBuilderAI,
+  m as NiceFormDesigner,
+  o as schemaToFormItems,
+  i as useFormDesigner,
+  F as validateFormSchema
+};

package/dist/style.css

@@ -0,0 +1 @@
+.nice-form-builder-ai{--ai-primary: #6366f1;--ai-primary-light: #818cf8;--ai-bg: #f8fafc;--ai-border: #e2e8f0;--ai-text: #334155;--ai-text-muted: #64748b;--ai-success: #22c55e;--ai-panel-bg: #ffffff;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid var(--ai-border);background:var(--ai-panel-bg)}[data-theme=dark] .nice-form-builder-ai,.nice-form-builder-ai.dark{--ai-primary: #818cf8;--ai-primary-light: #a5b4fc;--ai-bg: #1e293b;--ai-border: #334155;--ai-text: #e2e8f0;--ai-text-muted: #94a3b8;--ai-success: #4ade80;--ai-panel-bg: #0f172a}.nice-form-builder-ai__toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:linear-gradient(135deg,#6366f1,#8b5cf6);gap:12px}.nice-form-builder-ai__toolbar-left{display:flex;align-items:center;gap:12px}.nice-form-builder-ai__badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ai-primary);background:#fff;border-radius:4px}.nice-form-builder-ai__loading{font-size:12px;color:#fff;opacity:.9;animation:pulse-opacity 1.5s ease-in-out infinite}@keyframes pulse-opacity{0%,to{opacity:.5}50%{opacity:1}}.nice-form-builder-ai__toolbar-right{display:flex;align-items:center;gap:8px}.nice-form-builder-ai__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;color:#fff;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:6px;cursor:pointer;transition:all .15s ease}.nice-form-builder-ai__btn:hover:not(:disabled){background:#ffffff4d}.nice-form-builder-ai__btn:disabled{opacity:.5;cursor:not-allowed}.nice-form-builder-ai__btn--secondary{background:transparent;border-color:#fff6}.nice-form-builder-ai__templates-dropdown{position:relative}.nice-form-builder-ai__templates-menu{position:absolute;top:100%;right:0;min-width:280px;margin-top:6px;background:var(--ai-panel-bg);border:1px solid var(--ai-border);border-radius:8px;box-shadow:0 10px 30px #00000026;z-index:100;animation:dropIn .15s ease-out}@keyframes dropIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.nice-form-builder-ai__template-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:12px 16px;text-align:left;background:transparent;border:none;border-bottom:1px solid var(--ai-border);cursor:pointer;transition:background .1s ease}.nice-form-builder-ai__template-item:last-child{border-bottom:none;border-radius:0 0 8px 8px}.nice-form-builder-ai__template-item:first-child{border-radius:8px 8px 0 0}.nice-form-builder-ai__template-item:hover{background:var(--ai-bg)}.nice-form-builder-ai__template-name{font-size:14px;font-weight:500;color:var(--ai-text)}.nice-form-builder-ai__template-desc{font-size:12px;color:var(--ai-text-muted)}.nice-form-builder-ai__builder-wrapper{flex:1;min-height:400px}.nice-form-builder-ai__panel{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1000}.nice-form-builder-ai__panel-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0006}.nice-form-builder-ai__panel-content{position:relative;width:90%;max-width:600px;max-height:80vh;background:var(--ai-panel-bg);border-radius:12px;box-shadow:0 25px 50px #00000040;display:flex;flex-direction:column;animation:modalIn .2s ease-out}@keyframes modalIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.nice-form-builder-ai__panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--ai-bg);border-bottom:1px solid var(--ai-border);border-radius:12px 12px 0 0}.nice-form-builder-ai__panel-header h4{margin:0;font-size:16px;font-weight:600;color:var(--ai-text)}.nice-form-builder-ai__panel-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;font-size:16px;color:var(--ai-text-muted);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .15s ease}.nice-form-builder-ai__panel-close:hover{color:var(--ai-text);background:var(--ai-border)}.nice-form-builder-ai__panel-body{flex:1;overflow-y:auto;padding:20px}.nice-form-builder-ai__panel-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid var(--ai-border)}.nice-form-builder-ai__prompt-section{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.nice-form-builder-ai__label{font-size:14px;font-weight:500;color:var(--ai-text)}.nice-form-builder-ai__textarea{width:100%;padding:12px;font-size:14px;font-family:inherit;line-height:1.5;color:var(--ai-text);background:var(--ai-bg);border:1px solid var(--ai-border);border-radius:6px;resize:vertical;outline:none;transition:border-color .15s ease}.nice-form-builder-ai__textarea:focus{border-color:var(--ai-primary)}.nice-form-builder-ai__textarea::placeholder{color:var(--ai-text-muted)}.nice-form-builder-ai__generate-btn{align-self:flex-end;padding:10px 24px;font-size:14px;font-weight:500;color:#fff;background:var(--ai-primary);border:none;border-radius:6px;cursor:pointer;transition:all .15s ease}.nice-form-builder-ai__generate-btn:hover:not(:disabled){background:var(--ai-primary-light)}.nice-form-builder-ai__generate-btn:disabled{opacity:.6;cursor:not-allowed}.nice-form-builder-ai__preview-section{border-top:1px solid var(--ai-border);padding-top:16px}.nice-form-builder-ai__preview-section h5{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--ai-text-muted);text-transform:uppercase;letter-spacing:.5px}.nice-form-builder-ai__fields-preview{display:flex;flex-direction:column;gap:8px;max-height:250px;overflow-y:auto}.nice-form-builder-ai__field-preview{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--ai-bg);border:1px solid var(--ai-border);border-radius:6px}.nice-form-builder-ai__field-icon{font-size:16px}.nice-form-builder-ai__field-info{flex:1;display:flex;flex-direction:column;gap:2px}.nice-form-builder-ai__field-label{font-size:14px;font-weight:500;color:var(--ai-text)}.nice-form-builder-ai__required{color:#ef4444;margin-left:2px}.nice-form-builder-ai__field-type{font-size:12px;color:var(--ai-text-muted);text-transform:capitalize}.nice-form-builder-ai__field-options{font-size:11px;color:var(--ai-primary);padding:2px 6px;background:#6366f11a;border-radius:3px}.nice-form-builder-ai__apply-btn{padding:10px 24px;font-size:14px;font-weight:500;color:#fff;background:var(--ai-success);border:none;border-radius:6px;cursor:pointer;transition:all .15s ease}.nice-form-builder-ai__apply-btn:hover:not(:disabled){background:#16a34a}.nice-form-builder-ai__apply-btn:disabled{opacity:.6;cursor:not-allowed}.nice-form-builder-ai__cancel-btn{padding:10px 24px;font-size:14px;font-weight:500;color:var(--ai-text-muted);background:transparent;border:1px solid var(--ai-border);border-radius:6px;cursor:pointer;transition:all .15s ease}.nice-form-builder-ai__cancel-btn:hover{color:var(--ai-text);background:var(--ai-bg)}@media (max-width: 640px){.nice-form-builder-ai__toolbar{flex-wrap:wrap}.nice-form-builder-ai__toolbar-right{width:100%;justify-content:center;margin-top:8px}.nice-form-builder-ai__panel-content{width:95%;max-height:90vh}.nice-form-builder-ai__templates-menu{right:auto;left:0}}.nice-form-designer{display:flex;flex-direction:column;height:100%;background:var(--nice-bg-secondary, #f8f9fa);font-family:var(--nice-font-family, system-ui, -apple-system, sans-serif)}.nice-form-designer__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 1rem;background:var(--nice-bg-primary, #fff);border-bottom:1px solid var(--nice-border-color, #ddd)}.nice-form-designer__toolbar-group{display:flex;align-items:center;gap:.5rem}.nice-form-designer__toolbar select,.nice-form-designer__toolbar button{padding:.4rem .8rem;border:1px solid var(--nice-border-color, #ddd);border-radius:4px;background:var(--nice-bg-primary, #fff);cursor:pointer;font-size:.875rem}.nice-form-designer__toolbar button:hover,.nice-form-designer__toolbar button.active{background:var(--nice-primary, #0066cc);color:#fff;border-color:var(--nice-primary, #0066cc)}.nice-form-designer__body{display:flex;flex:1;overflow:hidden}.nice-form-designer__palette{width:200px;background:var(--nice-bg-primary, #fff);border-right:1px solid var(--nice-border-color, #ddd);display:flex;flex-direction:column;overflow:hidden}.nice-form-designer__palette-tabs{display:flex;padding:.5rem;gap:.25rem;border-bottom:1px solid var(--nice-border-color, #ddd);flex-wrap:wrap}.nice-form-designer__palette-tabs button{padding:.3rem .5rem;border:none;background:transparent;border-radius:4px;cursor:pointer;font-size:1rem;opacity:.6}.nice-form-designer__palette-tabs button:hover{background:var(--nice-bg-hover, #f0f0f0);opacity:1}.nice-form-designer__palette-tabs button.active{background:var(--nice-primary, #0066cc);opacity:1}.nice-form-designer__palette-items{flex:1;overflow-y:auto;padding:.5rem}.nice-form-designer__palette-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;margin-bottom:.25rem;border:1px solid var(--nice-border-color, #ddd);border-radius:4px;background:var(--nice-bg-primary, #fff);cursor:grab;transition:all .2s;-webkit-user-select:none;user-select:none}.nice-form-designer__palette-item:hover{border-color:var(--nice-primary, #0066cc);box-shadow:0 2px 4px #0000001a}.nice-form-designer__palette-item:active{cursor:grabbing}.nice-form-designer__palette-icon{font-size:1.25rem}.nice-form-designer__palette-label{font-size:.8rem;color:var(--nice-text-primary, #333)}.nice-form-designer__canvas{flex:1;overflow:auto;padding:1rem}.nice-form-designer__section{background:var(--nice-bg-primary, #fff);border:1px solid var(--nice-border-color, #ddd);border-radius:8px;padding:1rem;margin-bottom:1rem;min-height:100px}.nice-form-designer__section-title{margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--nice-border-color, #ddd);font-size:1rem;font-weight:600;color:var(--nice-text-primary, #333)}.nice-form-designer__fields-grid{display:grid;gap:.75rem;min-height:60px}.nice-form-designer__drop-hint{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--nice-border-color, #ddd);border-radius:4px;color:var(--nice-text-muted, #999);font-size:.875rem}.nice-form-designer__field{position:relative;padding:.75rem;border:1px solid var(--nice-border-color, #ddd);border-radius:6px;background:var(--nice-bg-primary, #fff);cursor:pointer;transition:all .2s}.nice-form-designer__field:hover{border-color:var(--nice-primary, #0066cc)}.nice-form-designer__field--selected{border-color:var(--nice-primary, #0066cc);box-shadow:0 0 0 2px #06c3}.nice-form-designer__field-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.nice-form-designer__field-icon{font-size:1rem}.nice-form-designer__field-label{font-size:.875rem;font-weight:500;color:var(--nice-text-primary, #333)}.nice-form-designer__field-required{color:var(--nice-error, #dc3545);margin-left:auto}.nice-form-designer__field-type{font-size:.7rem;color:var(--nice-text-muted, #999);text-transform:uppercase}.nice-form-designer__field-actions{position:absolute;top:.25rem;right:.25rem;display:flex;gap:.25rem;opacity:0;transition:opacity .2s}.nice-form-designer__field--selected .nice-form-designer__field-actions{opacity:1}.nice-form-designer__field-actions button{padding:.25rem .4rem;border:none;background:var(--nice-bg-secondary, #f0f0f0);border-radius:3px;cursor:pointer;font-size:.75rem}.nice-form-designer__field-actions button:hover{background:var(--nice-primary, #0066cc)}.nice-form-designer__preview-input,.nice-form-designer__preview-textarea,.nice-form-designer__preview-select{width:100%;padding:.4rem .6rem;border:1px solid var(--nice-border-color, #ddd);border-radius:4px;background:var(--nice-bg-secondary, #f8f9fa);font-size:.8rem;margin-top:.25rem}.nice-form-designer__preview-textarea{min-height:60px;resize:none}.nice-form-designer__preview-calculated,.nice-form-designer__preview-barcode,.nice-form-designer__preview-placeholder{padding:.4rem .6rem;font-size:.75rem;color:var(--nice-text-muted, #999);background:var(--nice-bg-secondary, #f8f9fa);border-radius:4px;margin-top:.25rem}.nice-form-designer__tabs{background:var(--nice-bg-primary, #fff);border-radius:8px;overflow:hidden}.nice-form-designer__tab-list{display:flex;border-bottom:1px solid var(--nice-border-color, #ddd);padding:0 1rem;background:var(--nice-bg-secondary, #f8f9fa)}.nice-form-designer__tab-btn{padding:.75rem 1rem;border:none;background:transparent;cursor:pointer;font-size:.875rem;color:var(--nice-text-secondary, #666);border-bottom:2px solid transparent;margin-bottom:-1px}.nice-form-designer__tab-btn:hover{color:var(--nice-text-primary, #333)}.nice-form-designer__tab-btn.active{color:var(--nice-primary, #0066cc);border-bottom-color:var(--nice-primary, #0066cc);background:var(--nice-bg-primary, #fff)}.nice-form-designer__tab-badge{margin-left:.5rem;padding:.1rem .4rem;font-size:.7rem;background:var(--nice-primary, #0066cc);color:#fff;border-radius:10px}.nice-form-designer__tab-add{padding:.75rem 1rem;border:none;background:transparent;cursor:pointer;font-size:1.25rem;color:var(--nice-text-muted, #999)}.nice-form-designer__tab-add:hover{color:var(--nice-primary, #0066cc)}.nice-form-designer__tab-content{padding:1rem;min-height:200px}.nice-form-designer__properties{width:280px;background:var(--nice-bg-primary, #fff);border-left:1px solid var(--nice-border-color, #ddd);overflow-y:auto;padding:1rem}.nice-form-designer__properties h3{margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--nice-border-color, #ddd);font-size:.9rem;font-weight:600;color:var(--nice-text-primary, #333)}.nice-form-designer__properties h4{margin:1rem 0 .5rem;font-size:.8rem;font-weight:600;color:var(--nice-text-secondary, #666);text-transform:uppercase}.nice-form-designer__prop-group{margin-bottom:.75rem}.nice-form-designer__prop-group>label{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;font-size:.8rem;color:var(--nice-text-secondary, #666)}.nice-form-designer__prop-group input[type=text],.nice-form-designer__prop-group input[type=number],.nice-form-designer__prop-group select,.nice-form-designer__prop-group textarea{width:100%;padding:.4rem .6rem;border:1px solid var(--nice-border-color, #ddd);border-radius:4px;font-size:.8rem}.nice-form-designer__prop-group input[type=checkbox]{margin-right:.5rem}.nice-form-designer__prop-section{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--nice-border-color, #ddd)}@media (max-width: 1024px){.nice-form-designer__palette{width:160px}.nice-form-designer__properties{width:240px}}@media (max-width: 768px){.nice-form-designer__body{flex-direction:column}.nice-form-designer__palette{width:100%;max-height:200px;border-right:none;border-bottom:1px solid var(--nice-border-color, #ddd)}.nice-form-designer__properties{width:100%;border-left:none;border-top:1px solid var(--nice-border-color, #ddd)}}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@nice2dev/ui-forms",
+  "version": "1.0.10",
+  "description": "Nice2Dev UI Forms - Form builders & designers: NiceFormBuilder, NiceFormBuilderAI, NiceFormDesigner",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:types": "tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@nice2dev/ui": "^1.0.10",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.1.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.0"
+  },
+  "keywords": [
+    "forms",
+    "form-builder",
+    "form-designer",
+    "schema",
+    "validation",
+    "ai",
+    "nice2dev",
+    "react"
+  ],
+  "author": "Nice2Dev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nicetoDev/nicetoDev-ui.git",
+    "directory": "packages/ui-forms"
+  }
+}