aii-form-renderer 0.1.0

package/README.md

@@ -0,0 +1,514 @@
+# form-preview
+
+React 表单渲染器库 - 专注于在业务中直接使用配置好的表单
+
+## 🎯 项目定位
+
+本库已精简为**纯业务表单渲染器**，移除了所有编辑器/设计器相关组件，专注于：
+- ✅ 在业务系统中渲染已配置好的表单
+- ✅ 提供稳定、高性能的表单展示和数据收集
+- ✅ 支持复杂的表单逻辑和验证
+- ❌ 不再提供可视化表单设计/编辑功能
+
+## ✨ 核心特性
+
+- 🖥️ **表单渲染器** - 高性能的表单运行时渲染引擎
+- 📱 **响应式设计** - 支持桌面和移动端展示模式
+- 🎨 **主题定制** - 灵活的样式和主题配置
+- 🌐 **国际化** - 内置中英文支持
+- 🔄 **条件逻辑** - 支持字段间的动态显示/隐藏逻辑
+- ✅ **表单验证** - 完整的表单验证支持
+- 🧩 **30+ 组件类型** - 丰富的表单元素支持
+
+## 📦 安装
+
+```bash
+npm install form-preview
+# 或
+pnpm add form-preview
+# 或
+yarn add form-preview
+```
+
+### 依赖要求
+
+确保项目中已安装以下依赖：
+
+```bash
+npm install react react-dom antd dayjs
+```
+
+### 字体资源
+
+在 HTML 中添加 Material Symbols 字体：
+
+```html
+<link
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@300&display=swap"
+  rel="stylesheet"
+/>
+```
+
+## 🚀 快速开始
+
+### 基础使用
+
+```tsx
+import { FormRenderer } from 'form-preview';
+import type { FormSchema } from 'form-preview';
+import 'form-preview/styles.css';
+
+function MyForm() {
+  // 从配置文件或 API 加载表单 Schema
+  const formSchema: FormSchema = {
+    elements: {
+      'name': {
+        id: 'name',
+        type: 'TEXT_INPUT',
+        label: '姓名',
+        fieldName: 'name',
+        placeholder: '请输入姓名',
+        props: { required: true },
+      },
+      'email': {
+        id: 'email',
+        type: 'EMAIL',
+        label: '邮箱',
+        fieldName: 'email',
+        placeholder: '请输入邮箱',
+        props: { required: true },
+      },
+    },
+    rootIds: ['name', 'email'],
+    conditions: [],
+    formSettings: {
+      density: 'normal',
+      maxWidth: '800px',
+      labelPlacement: 'top',
+      primaryColor: '#1890ff',
+      backgroundColor: '#ffffff',
+      backgroundOpacity: 100,
+      fontFamily: 'Inter',
+      borderRadius: 'md',
+    },
+  };
+
+  const handleSubmit = (values: Record<string, unknown>) => {
+    console.log('表单提交:', values);
+    // 处理表单提交逻辑
+  };
+
+  return (
+    <FormRenderer
+      schema={formSchema}
+      locale="zh"
+      onSubmit={handleSubmit}
+    />
+  );
+}
+```
+
+### FormRenderer Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| schema | FormSchema | - | 必需，表单配置 |
+| locale | 'en' \| 'zh' | 'en' | 语言设置 |
+| initialValues | Record<string, unknown> | {} | 表单初始值 |
+| onChange | (values) => void | - | 表单值变化回调 |
+| onSubmit | (values) => void | - | 表单提交回调 |
+| readOnly | boolean | false | 只读模式 |
+| mode | 'desktop' \| 'mobile' | 'desktop' | 显示模式 |
+| className | string | - | 自定义样式类名 |
+
+## 📖 使用指南
+
+### 从 JSON 文件加载表单
+
+```tsx
+import formSchema from './schemas/contact-form.json';
+
+<FormRenderer schema={formSchema} locale="zh" />
+```
+
+### 从 API 动态加载
+
+```tsx
+const [schema, setSchema] = useState<FormSchema | null>(null);
+
+useEffect(() => {
+  fetch('/api/forms/contact-form')
+    .then(res => res.json())
+    .then(setSchema);
+}, []);
+
+if (!schema) return <div>加载中...</div>;
+
+return <FormRenderer schema={schema} locale="zh" />;
+```
+
+### 带预览的模态框
+
+```tsx
+import { PreviewModal } from 'form-preview';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setVisible(true)}>
+        预览表单
+      </button>
+      
+      <PreviewModal
+        visible={visible}
+        onClose={() => setVisible(false)}
+        schema={formSchema}
+        locale="zh"
+      />
+    </>
+  );
+}
+```
+
+## 📚 文档
+
+- [完整使用指南](./USAGE.md) - 详细的 API 文档和使用示例
+- [示例代码](./example/) - 完整的示例项目
+
+## 🎨 支持的表单元素
+
+### 布局元素
+- Section Header - 章节标题
+- Grid (2/3/自定义列) - 网格布局
+- Tabs - 标签页
+- Accordion - 折叠面板
+- Wizard - 多步骤向导
+- Divider - 分隔线
+- Rich Text - HTML 内容
+
+### 输入元素  
+- Text Input - 文本输入
+- Number Input - 数字输入
+- Email - 邮箱输入
+- Password - 密码输入
+- Textarea - 多行文本
+- Select - 下拉选择
+- Multi-Select - 多选下拉
+- Radio Group - 单选组
+- Checkbox Group - 多选组
+- Switch - 开关
+- Slider - 滑块
+
+### 高级元素
+- Date Picker - 日期选择
+- Time Picker - 时间选择
+- DateTime Picker - 日期时间选择
+- File Upload - 文件上传
+- Rating - 星级评分
+- Signature - 签名板
+- Cascader - 级联选择
+
+## 🔧 FormSchema 结构
+
+```typescript
+interface FormSchema {
+  elements: Record<string, FormElement>;  // 表单元素定义
+  rootIds: string[];                      // 根级元素 ID
+  conditions: ConditionRule[];            // 条件规则
+  formSettings: FormSettings;             // 全局设置
+}
+```
+
+详细的类型定义请参考 [USAGE.md](./USAGE.md)
+
+## 💡 示例
+
+查看 [example](./example/) 目录获取完整的使用示例：
+- 联系表单示例
+- 动态数据加载
+- 表单验证
+- 条件逻辑
+
+## 🛠️ 技术栈
+
+- React 18+
+- TypeScript
+- Ant Design 5.x
+- Tailwind CSS
+- Day.js
+
+## 📄 License
+
+MIT
+
+## 🙋 常见问题
+
+### 1. 如何获取表单的 Schema 配置？
+
+表单 Schema 通常由表单设计器生成，或者手动编写 JSON 配置文件。本库专注于渲染已配置好的表单。
+
+### 2. 是否支持自定义表单元素？
+
+当前版本主要支持内置的 30+ 种元素类型。后续版本可能会支持自定义元素扩展。
+
+### 3. 如何处理文件上传？
+
+文件上传元素需要配置 uploadUrl 和相关参数。具体请参考 [USAGE.md](./USAGE.md)。
+
+### 4. 是否支持移动端？
+
+是的，通过设置 `mode="mobile"` 可以启用移动端优化的显示模式。
+
+### 5. 条件逻辑如何工作？
+
+通过配置 `conditions` 数组，可以实现基于字段值的动态显示/隐藏/启用/禁用逻辑。详见文档。
+
+function App() {
+  const handleChange = (schema: FormSchema) => {
+    console.log('Schema updated:', schema);
+  };
+
+  const handleSave = (schema: FormSchema) => {
+    // Save to backend
+    saveFormSchema(schema);
+  };
+
+  return (
+    <FormDesigner
+      locale="en" // or "zh"
+      onChange={handleChange}
+      onSave={handleSave}
+    />
+  );
+}
+```
+
+### Form Renderer
+
+```tsx
+import { FormRenderer, FormSchema } from 'form-preview';
+import 'form-preview/style.css';
+
+function FormPage({ schema }: { schema: FormSchema }) {
+  const handleSubmit = (data: Record<string, unknown>) => {
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <FormRenderer
+      schema={schema}
+      locale="en"
+      onSubmit={handleSubmit}
+    />
+  );
+}
+```
+
+### Preview Modal
+
+```tsx
+import { useState } from 'react';
+import { PreviewModal, FormSchema } from 'form-preview';
+import 'form-preview/style.css';
+
+function FormWithPreview({ schema }: { schema: FormSchema }) {
+  const [showPreview, setShowPreview] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setShowPreview(true)}>Preview</button>
+      <PreviewModal
+        open={showPreview}
+        onClose={() => setShowPreview(false)}
+        schema={schema}
+        locale="en"
+      />
+    </>
+  );
+}
+```
+
+## API Reference
+
+### FormDesigner
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `locale` | `'en' \| 'zh'` | `'en'` | UI language |
+| `initialSchema` | `FormSchema` | - | Initial form schema |
+| `onChange` | `(schema: FormSchema) => void` | - | Called when schema changes |
+| `onSave` | `(schema: FormSchema) => void` | - | Called when save button clicked |
+| `onPreview` | `() => void` | - | Called when preview button clicked |
+| `className` | `string` | - | Additional CSS classes |
+
+### FormRenderer
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `schema` | `FormSchema` | **required** | Form schema to render |
+| `locale` | `'en' \| 'zh'` | `'en'` | UI language |
+| `initialValues` | `Record<string, unknown>` | `{}` | Initial form values |
+| `onChange` | `(values) => void` | - | Called when any value changes |
+| `onSubmit` | `(values) => void` | - | Called on form submit |
+| `readOnly` | `boolean` | `false` | Disable all inputs |
+| `mode` | `'desktop' \| 'mobile'` | `'desktop'` | Responsive mode |
+| `className` | `string` | - | Additional CSS classes |
+
+### PreviewModal
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | **required** | Modal visibility |
+| `onClose` | `() => void` | **required** | Close handler |
+| `schema` | `FormSchema` | **required** | Form schema to preview |
+| `locale` | `'en' \| 'zh'` | `'en'` | UI language |
+
+## Supported Element Types
+
+### Layout Elements (9)
+- Section Header
+- 2-Column Grid
+- 3-Column Grid
+- Custom Grid
+- Tabs
+- Accordion
+- Wizard (Multi-step)
+- Divider
+- Rich Text
+
+### Input Elements (10)
+- Text Input
+- Number Input
+- Password
+- Email
+- Textarea
+- Select (Dropdown)
+- Multi-Select
+- Radio Group
+- Checkbox Group
+- Switch
+
+### Advanced Elements (8)
+- Slider
+- Date Picker
+- Time Picker
+- DateTime Picker
+- File Upload
+- Rating
+- Signature
+- Cascader
+
+## FormSchema Structure
+
+```typescript
+interface FormSchema {
+  rootIds: string[];
+  elements: Record<string, FormElement>;
+  conditions: ConditionRule[];
+  formSettings: FormSettings;
+}
+
+interface FormElement {
+  id: string;
+  type: ElementType;
+  label: string;
+  placeholder?: string;
+  fieldName?: string;
+  children?: string[];
+  props: FormElementProps;
+}
+
+interface FormSettings {
+  density: 'compact' | 'normal' | 'comfortable';
+  maxWidth: string;
+  borderRadius: 'none' | 'small' | 'medium' | 'large' | 'full';
+  primaryColor: string;
+  backgroundColor: string;
+  fontFamily: string;
+}
+```
+
+## Conditional Logic
+
+Define conditions to control element visibility and state:
+
+```typescript
+const schema: FormSchema = {
+  // ...elements
+  conditions: [
+    {
+      id: 'cond1',
+      sourceId: 'country-select',
+      operator: 'equals',
+      value: 'US',
+      action: 'show',
+      targetId: 'state-select'
+    }
+  ]
+};
+```
+
+### Operators
+- `equals`: Equals value
+- `not_equals`: Not equals value
+- `contains`: Contains substring
+- `greater_than`: Greater than number
+- `less_than`: Less than number
+
+### Actions
+- `show`: Show target element
+- `hide`: Hide target element
+- `enable`: Enable target element
+- `disable`: Disable target element
+
+## Customization
+
+### Custom Theme Colors
+
+```tsx
+<FormDesigner
+  initialSchema={{
+    formSettings: {
+      primaryColor: '#6366F1',
+      backgroundColor: '#F8FAFC',
+      // ...
+    },
+    // ...
+  }}
+/>
+```
+
+### Using Sub-Components
+
+For custom layouts, import individual components:
+
+```tsx
+import { Sidebar, Canvas, Inspector, EditorState } from 'form-preview';
+
+function CustomDesigner() {
+  const [state, setState] = useState<EditorState>({...});
+
+  return (
+    <div className="flex">
+      <Sidebar locale="en" onDragStart={...} />
+      <Canvas
+        rootIds={state.rootIds}
+        elements={state.elements}
+        selectedId={state.selectedId}
+        // ...
+      />
+      <Inspector
+        element={state.elements[state.selectedId]}
+        onChange={...}
+        // ...
+      />
+    </div>
+  );
+}
+```
+
+## License
+
+MIT © Your Name

package/dist/aii-form-renderer.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:JetBrains Mono,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.break-all{word-break:break-all}.border{border-width:1px}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-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)}.form-preview-root{--form-primary-color: #3b82f6;--form-primary-hover: #2563eb;--form-border-radius: .375rem;font-family:Inter,system-ui,sans-serif}.form-theme-scope{--theme-primary: var(--form-primary-color)}.form-theme-scope .text-primary{color:var(--theme-primary)!important}.form-theme-scope .bg-primary{background-color:var(--theme-primary)!important}.form-theme-scope .border-primary{border-color:var(--theme-primary)!important}.form-theme-scope .ring-primary{--tw-ring-color: var(--theme-primary) !important}.form-theme-scope .accent-primary{accent-color:var(--theme-primary)!important}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.canvas-bg{background-color:#f8fafc;background-image:radial-gradient(circle,#e2e8f0 1px,transparent 1px);background-size:20px 20px}.form-preview-root ::-webkit-scrollbar{width:6px;height:6px}.form-preview-root ::-webkit-scrollbar-track{background:transparent}.form-preview-root ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.form-preview-root ::-webkit-scrollbar-thumb:hover{background:#94a3b8}.element-selected{outline:2px solid var(--theme-primary, #3b82f6);outline-offset:2px}.drop-indicator{height:3px;background:var(--theme-primary, #3b82f6);border-radius:2px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.dragging{opacity:.5}.form-field:focus-within{border-color:var(--theme-primary, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 2px}.btn-primary{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn-primary:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.btn-primary:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))}.btn-secondary{border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.btn-secondary:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.btn-secondary:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1))}.btn-ghost{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.btn-ghost:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.btn-ghost:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1))}.input{width:100%;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem}.input::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity, 1))}.input::placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity, 1))}.input:focus{border-color:transparent;outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))}.input-error{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.input-error:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1))}.signature-canvas{touch-action:none}.rating-star{cursor:pointer;transition:transform .1s ease}.rating-star:hover{transform:scale(1.1)}.mobile-frame{width:375px;border-radius:40px;border:8px solid #1f2937;position:relative;overflow:hidden}.mobile-frame:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:120px;height:24px;background:#1f2937;border-radius:0 0 16px 16px;z-index:10}