daply-ui 0.0.0 → 1.0.0

package/README.md

@@ -1,73 +1,409 @@
-# React + TypeScript + Vite
+# @daply-ui
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A React component library for building beautiful, modern forms that integrate seamlessly with the Daply backend. Features professional styling inspired by Daply forms with automatic light/dark theme support.
 
-Currently, two official plugins are available:
+## ✨ Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- 🎨 **Modern Design** - Clean, professional styling matching Daply form aesthetics
+- 🌓 **Theme Support** - Automatic light/dark theme adaptation
+- ✅ **Built-in Validation** - Required fields, email, URL validation
+- 🔧 **Custom Validation** - Define your own validation rules
+- 🚀 **API Integration** - Automatic submission to Daply backend
+- 📱 **Responsive** - Mobile-first design that works everywhere
+- 💪 **TypeScript** - Full type safety and IntelliSense support
+- 🎯 **Customizable** - Override any styling with custom classes
 
-## React Compiler
+## Installation
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+```bash
+npm install daply-ui
+```
+
+**No additional dependencies required!** The library uses inline styles, so it works out of the box without needing Tailwind CSS or any other CSS framework.
+
+## Components
+
+### Form Component
+
+A fully-featured form component with built-in validation and Daply backend integration.
+
+## Basic Usage
+
+```tsx
+import { Form } from 'daply-ui';
+
+function App() {
+  return (
+    <Form
+      formId="contact-form"
+      siteId="my-website"
+      baseUrl="https://api.daply.com"
+      apiToken="your-api-token-here"
+      encryptedDbName="ff95d16da2340fe621ce03a61b9e6ee5b2c5dacbb12bd1914cb3dae6e5ad1bea73029edd7bf8bae1eefaa23cde52ea28"
+      theme="dark" // 'light', 'dark', or 'auto' (default)
+      fields={[
+        {
+          name: "name",
+          type: "text",
+          label: "Name",
+          required: true,
+          placeholder: "Enter your name"
+        },
+        {
+          name: "email",
+          type: "email",
+          label: "Email",
+          required: true,
+          placeholder: "your.email@example.com"
+        },
+        {
+          name: "subject",
+          type: "text",
+          label: "Subject",
+          required: true,
+          placeholder: "What's this about?"
+        },
+        {
+          name: "message",
+          type: "textarea",
+          label: "Message",
+          required: true,
+          rows: 6,
+          placeholder: "Your message here..."
+        }
+      ]}
+      onSuccess={(response) => {
+        console.log("Form submitted successfully!", response);
+        alert("Thank you for your submission!");
+      }}
+      onError={(error) => {
+        console.error("Form submission failed:", error);
+        alert("Something went wrong. Please try again.");
+      }}
+    />
+  );
+}
+```
 
-## Expanding the ESLint configuration
+## Advanced Usage
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### Custom Styling
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+```tsx
+<Form
+  formId="styled-form"
+  siteId="my-website"
+  baseUrl="https://api.daply.com"
+  apiToken="your-api-token-here"
+  fields={[
+    {
+      name: "username",
+      type: "text",
+      label: "Username",
+      required: true,
+      className: "custom-input-class"
+    }
+  ]}
+  formClassName="my-custom-form"
+  submitButtonClassName="my-custom-button"
+  submitButtonText="Send Message"
+  loadingText="Sending..."
+/>
+```
+
+### With Metadata and Tracking
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+```tsx
+<Form
+  formId="contact-form"
+  siteId="my-website"
+  baseUrl="https://api.daply.com"
+  apiToken="your-api-token-here"
+  pageUrl={window.location.href}
+  pageId="contact-page"
+  sessionId="user-session-id"
+  metadata={{
+    source: "contact page",
+    campaign: "organic",
+    userAgent: navigator.userAgent
+  }}
+  fields={[
+    // ... your fields
+  ]}
+/>
+```
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+### Custom Validation
+
+```tsx
+<Form
+  formId="signup-form"
+  siteId="my-website"
+  baseUrl="https://api.daply.com"
+  apiToken="your-api-token-here"
+  fields={[
+    {
+      name: "password",
+      type: "text",
+      label: "Password",
+      required: true,
+      validation: (value) => {
+        if (value.length < 8) {
+          return "Password must be at least 8 characters";
+        }
+        if (!/[A-Z]/.test(value)) {
+          return "Password must contain at least one uppercase letter";
+        }
+        if (!/[0-9]/.test(value)) {
+          return "Password must contain at least one number";
+        }
+        return undefined; // No error
+      }
+    }
+  ]}
+/>
+```
+
+### All Available Field Types
+
+```tsx
+<Form
+  formId="all-fields-form"
+  siteId="my-website"
+  baseUrl="https://api.daply.com"
+  apiToken="your-api-token-here"
+  fields={[
+    {
+      name: "text_field",
+      type: "text",
+      label: "Text Input",
+      placeholder: "Enter text"
     },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+    {
+      name: "email_field",
+      type: "email",
+      label: "Email Input",
+      placeholder: "email@example.com"
+    },
+    {
+      name: "number_field",
+      type: "number",
+      label: "Number Input",
+      placeholder: "123"
     },
+    {
+      name: "tel_field",
+      type: "tel",
+      label: "Phone Number",
+      placeholder: "+1 (555) 123-4567"
+    },
+    {
+      name: "url_field",
+      type: "url",
+      label: "Website URL",
+      placeholder: "https://example.com"
+    },
+    {
+      name: "textarea_field",
+      type: "textarea",
+      label: "Textarea",
+      rows: 5,
+      placeholder: "Enter multiple lines..."
+    }
+  ]}
+/>
+```
+
+## API Reference
+
+### FormConfig Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `formId` | `string` | Yes | Unique identifier for the form |
+| `siteId` | `string` | Yes | Identifier for your site |
+| `baseUrl` | `string` | Yes | Daply API base URL |
+| `apiToken` | `string` | Yes | Bearer token for authentication |
+| `encryptedDbName` | `string` | Yes | Encrypted database name for x-encrypted-db-name header |
+| `fields` | `FormField[]` | Yes | Array of form fields (see below) |
+| `theme` | `'light' \| 'dark' \| 'auto'` | No | Theme mode (default: 'auto') |
+| `pageUrl` | `string` | No | Current page URL for tracking |
+| `pageId` | `string` | No | Page identifier for tracking |
+| `sessionId` | `string` | No | User session ID for tracking |
+| `metadata` | `object` | No | Additional metadata to send with form |
+| `onSuccess` | `(response: any) => void` | No | Callback when form submits successfully |
+| `onError` | `(error: Error) => void` | No | Callback when form submission fails |
+| `submitButtonText` | `string` | No | Submit button text (default: "Submit") |
+| `submitButtonClassName` | `string` | No | Custom CSS class for submit button |
+| `formClassName` | `string` | No | Custom CSS class for form wrapper |
+| `loadingText` | `string` | No | Loading text (default: "Submitting...") |
+
+### FormField Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `name` | `string` | Yes | Field name (must be unique) |
+| `type` | `FieldType` | Yes | Field type: `text`, `email`, `textarea`, `number`, `tel`, `url` |
+| `label` | `string` | No | Label text displayed above field |
+| `required` | `boolean` | No | Whether field is required (default: false) |
+| `placeholder` | `string` | No | Placeholder text |
+| `defaultValue` | `string` | No | Default value for the field |
+| `rows` | `number` | No | Number of rows (for textarea only) |
+| `className` | `string` | No | Custom CSS class for input element |
+| `validation` | `(value: string) => string \| undefined` | No | Custom validation function |
+
+## Styling
+
+The components use **inline styles** for maximum compatibility and zero dependencies. They work out of the box without requiring Tailwind CSS or any other CSS framework.
+
+### Theme Support
+
+The components automatically adapt to light and dark modes:
+
+```tsx
+// Light theme
+<Form theme="light" {...props} />
+
+// Dark theme (like Oasis Energy form)
+<Form theme="dark" {...props} />
+
+// Auto-detect user's system preference (default)
+<Form theme="auto" {...props} />
+```
+
+### Default Styles
+- **Form Container**: Clean white (light) / dark `#1a1a1a` (dark) with subtle shadows
+- **Input Fields**: Large padding (16px), rounded corners, smooth transitions
+- **Focus States**: Blue ring with smooth animations
+- **Error States**: Red border and background tint
+- **Submit Button**: Gradient blue with hover effects and uppercase text
+
+### Customization Options
+
+You can add custom classes for additional styling:
+
+```tsx
+<Form
+  formClassName="my-custom-form"
+  submitButtonClassName="my-custom-button"
+  fields={[
+    {
+      name: "email",
+      type: "email",
+      className: "my-custom-input"
+      // Add your own CSS classes
+    }
+  ]}
+/>
+```
+
+**Note:** Inline styles take precedence, but you can use `!important` in your custom CSS to override them if needed.
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```tsx
+import type {
+  FormConfig,
+  FormField,
+  FormSchema,
+  FormData,
+  FieldType,
+  FieldSchema,
+  DaplyFormSubmission
+} from 'daply-ui';
+```
+
+## API Endpoint
+
+The form submits to:
+```
+POST {{baseUrl}}/api/v1/form-submissions
+```
+
+With the following payload structure:
+
+```json
+{
+  "formId": "contact-form",
+  "siteId": "my-website",
+  "formData": {
+    "name": "John Doe",
+    "email": "john@example.com",
+    "subject": "Inquiry",
+    "message": "This is a test message."
   },
-])
+  "formSchema": {
+    "name": { "type": "text", "required": true },
+    "email": { "type": "email", "required": true },
+    "subject": { "type": "text", "required": true },
+    "message": { "type": "textarea", "required": true }
+  },
+  "pageUrl": "https://example.com/contact",
+  "pageId": "contact-page",
+  "sessionId": "sess_123456789",
+  "metadata": {
+    "source": "contact page",
+    "campaign": "organic"
+  }
+}
+```
+
+Headers:
+```
+Content-Type: application/json
+Authorization: Bearer {your-api-token}
+x-encrypted-db-name: {your-encrypted-db-name}
+```
+
+**Important:** Store your `apiToken` and `encryptedDbName` securely in environment variables:
+
+```tsx
+<Form
+  apiToken={process.env.REACT_APP_DAPLY_TOKEN}
+  encryptedDbName={process.env.REACT_APP_ENCRYPTED_DB_NAME}
+  // ... other props
+/>
 ```
+
+## Features
+
+- ✅ Built-in validation (required fields, email, URL)
+- ✅ Custom validation functions
+- ✅ Automatic form submission to Daply backend
+- ✅ Loading states with smooth animations
+- ✅ Error handling with user-friendly messages
+- ✅ Success/error callbacks
+- ✅ Full TypeScript support
+- ✅ Modern, clean design inspired by Daply forms
+- ✅ Light & Dark theme support (automatic)
+- ✅ Customizable styling with Tailwind CSS
+- ✅ Multiple field types (text, email, textarea, number, tel, url)
+- ✅ Metadata and tracking support
+- ✅ Smooth transitions and hover effects
+- ✅ Mobile-responsive design
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build library
+npm run build
+
+# Publish to npm
+npm run publish
+```
+
+## License
+
+MIT
+
+## Support
+
+For issues and questions, please visit our [GitHub repository](https://github.com/yourusername/daply-ui).

package/dist/daply-ui.js

@@ -1,5 +1,268 @@
-import { jsx as o } from "react/jsx-runtime";
-const n = ({ children: t }) => /* @__PURE__ */ o("button", { children: t });
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
+import { useState as I } from "react";
+const J = ({ children: i }) => /* @__PURE__ */ s("button", { children: i }), W = ({ name: i, value: x, onChange: S, error: a, schema: w, theme: v = "auto" }) => {
+  const {
+    type: k = "text",
+    required: d = !1,
+    placeholder: m = "",
+    label: u,
+    className: b = ""
+  } = w, o = v === "dark" || v === "auto" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, l = {
+    width: "100%",
+    boxSizing: "border-box",
+    // 👈 CRITICAL
+    padding: "16px",
+    borderRadius: "8px",
+    outline: "none",
+    transition: "all 0.2s ease",
+    fontSize: "16px",
+    fontFamily: "inherit",
+    border: a ? `2px solid ${o ? "#f87171" : "#ef4444"}` : `1px solid ${o ? "#374151" : "#d1d5db"}`,
+    backgroundColor: a ? o ? "rgba(153, 27, 27, 0.1)" : "rgba(254, 226, 226, 1)" : o ? "#2a2a2a" : "#ffffff",
+    color: o ? "#ffffff" : "#111827"
+  }, F = {
+    ...l,
+    borderColor: a ? o ? "#f87171" : "#ef4444" : "#3b82f6",
+    boxShadow: a ? `0 0 0 3px ${o ? "rgba(248, 113, 113, 0.2)" : "rgba(239, 68, 68, 0.2)"}` : "0 0 0 3px rgba(59, 130, 246, 0.2)"
+  }, $ = {
+    display: "block",
+    fontWeight: "500",
+    marginBottom: "8px",
+    color: o ? "#ffffff" : "#111827",
+    fontSize: "14px"
+  }, j = {
+    marginTop: "4px",
+    fontSize: "14px",
+    color: o ? "#f87171" : "#dc2626"
+  }, D = {
+    color: o ? "#f87171" : "#ef4444",
+    marginLeft: "4px"
+  }, p = {
+    marginBottom: "24px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    width: "100%"
+  }, g = o ? "#6b7280" : "#9ca3af";
+  return k === "textarea" ? /* @__PURE__ */ y("div", { style: p, children: [
+    u ? /* @__PURE__ */ y("label", { htmlFor: i, style: $, children: [
+      u,
+      d ? /* @__PURE__ */ s("span", { style: D, children: "*" }) : null
+    ] }) : null,
+    /* @__PURE__ */ s(
+      "textarea",
+      {
+        id: i,
+        name: i,
+        value: x,
+        onChange: S,
+        required: d,
+        placeholder: m,
+        rows: w.rows || 4,
+        style: l,
+        onFocus: (n) => {
+          Object.assign(n.target.style, F);
+        },
+        onBlur: (n) => {
+          Object.assign(n.target.style, l);
+        },
+        className: b
+      }
+    ),
+    a ? /* @__PURE__ */ s("p", { style: j, children: a }) : null,
+    /* @__PURE__ */ s("style", { children: `
+          textarea::placeholder { color: ${g}; }
+        ` })
+  ] }) : /* @__PURE__ */ y("div", { style: p, children: [
+    u ? /* @__PURE__ */ y("label", { htmlFor: i, style: $, children: [
+      u,
+      d ? /* @__PURE__ */ s("span", { style: D, children: "*" }) : null
+    ] }) : null,
+    /* @__PURE__ */ s(
+      "input",
+      {
+        id: i,
+        name: i,
+        type: k,
+        value: x,
+        onChange: S,
+        required: d,
+        placeholder: m,
+        style: l,
+        onFocus: (n) => {
+          Object.assign(n.target.style, F);
+        },
+        onBlur: (n) => {
+          Object.assign(n.target.style, l);
+        },
+        className: b
+      }
+    ),
+    a ? /* @__PURE__ */ s("p", { style: j, children: a }) : null,
+    /* @__PURE__ */ s("style", { children: `
+        input::placeholder { color: ${g}; }
+      ` })
+  ] });
+}, G = (i) => {
+  const {
+    formId: x,
+    siteId: S,
+    fields: a,
+    baseUrl: w,
+    apiToken: v,
+    encryptedDbName: k,
+    pageUrl: d,
+    pageId: m,
+    sessionId: u,
+    metadata: b,
+    onSuccess: o,
+    onError: l,
+    submitButtonText: F = "Submit",
+    submitButtonClassName: $ = "",
+    formClassName: j = "",
+    loadingText: D = "Submitting...",
+    theme: p = "auto"
+  } = i, g = a.reduce((t, e) => (t[e.name] = e.defaultValue || "", t), {}), [n, N] = I(g), [O, T] = I({}), [f, R] = I(!1), [z, q] = I(!1), C = p === "dark" || p === "auto" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, L = (t) => {
+    const { name: e, value: h } = t.target;
+    N((r) => ({
+      ...r,
+      [e]: h
+    })), O[e] && T((r) => {
+      const c = { ...r };
+      return delete c[e], c;
+    });
+  }, M = () => {
+    const t = {};
+    return a.forEach((e) => {
+      const h = n[e.name], r = String(h || "");
+      if (e.required && !r.trim()) {
+        t[e.name] = `${e.label || e.name} is required`;
+        return;
+      }
+      if (e.type === "email" && r && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r)) {
+        t[e.name] = "Please enter a valid email address";
+        return;
+      }
+      if (e.type === "url" && r)
+        try {
+          new URL(r);
+        } catch {
+          t[e.name] = "Please enter a valid URL";
+          return;
+        }
+      if (e.validation && r) {
+        const c = e.validation(r);
+        if (c) {
+          t[e.name] = c;
+          return;
+        }
+      }
+    }), T(t), Object.keys(t).length === 0;
+  }, P = async (t) => {
+    if (t.preventDefault(), !!M()) {
+      R(!0);
+      try {
+        const e = a.reduce((B, E) => (B[E.name] = {
+          type: E.type,
+          required: E.required
+        }, B), {}), h = {
+          formId: x,
+          siteId: S,
+          formData: n,
+          formSchema: e,
+          ...d && { pageUrl: d },
+          ...m && { pageId: m },
+          ...u && { sessionId: u },
+          ...b && { metadata: b }
+        }, r = await fetch(`${w}/api/v1/form-submissions`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${v}`,
+            "x-encrypted-db-name": k
+          },
+          body: JSON.stringify(h)
+        });
+        if (!r.ok) {
+          const B = await r.json().catch(() => ({}));
+          throw new Error(B.message || `HTTP error! status: ${r.status}`);
+        }
+        const c = await r.json();
+        N(g), T({}), o && o(c);
+      } catch (e) {
+        console.error("Form submission error:", e), l && l(e);
+      } finally {
+        R(!1);
+      }
+    }
+  }, U = {
+    maxWidth: "612px",
+    margin: "0 auto",
+    padding: "32px",
+    backgroundColor: C ? "#1a1a1a" : "#ffffff",
+    borderRadius: "12px",
+    boxShadow: C ? "0 25px 50px -12px rgba(0, 0, 0, 0.5)" : "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+    border: `1px solid ${C ? "#1f2937" : "#e5e7eb"}`
+  }, H = {
+    width: "100%",
+    padding: "16px 24px",
+    background: f ? "linear-gradient(to right, #4b5563, #4b5563)" : z ? "linear-gradient(to right, #1d4ed8, #1e40af)" : "linear-gradient(to right, #2563eb, #1d4ed8)",
+    color: "#ffffff",
+    fontWeight: "bold",
+    fontSize: "18px",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    borderRadius: "8px",
+    border: "none",
+    cursor: f ? "not-allowed" : "pointer",
+    opacity: f ? 0.5 : 1,
+    transition: "all 0.2s ease",
+    outline: "none",
+    fontFamily: "inherit"
+  };
+  return /* @__PURE__ */ y(
+    "form",
+    {
+      onSubmit: P,
+      style: U,
+      className: j,
+      children: [
+        a.map((t) => /* @__PURE__ */ s(
+          W,
+          {
+            name: t.name,
+            value: String(n[t.name] || ""),
+            onChange: L,
+            error: O[t.name],
+            schema: t,
+            theme: p
+          },
+          t.name
+        )),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "submit",
+            disabled: f,
+            style: H,
+            onMouseEnter: () => !f && q(!0),
+            onMouseLeave: () => q(!1),
+            onFocus: (t) => {
+              f || (t.target.style.boxShadow = "0 0 0 3px rgba(59, 130, 246, 0.3)");
+            },
+            onBlur: (t) => {
+              t.target.style.boxShadow = "none";
+            },
+            className: $,
+            children: f ? D : F
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  n as Button
+  J as Button,
+  G as Form,
+  W as InputField
 };

package/dist/daply-ui.umd.cjs

@@ -1 +1,5 @@
-(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e["daply-ui"]={},e["react/jsx-runtime"]))})(this,(function(e,t){"use strict";const n=({children:i})=>t.jsx("button",{children:i});e.Button=n,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+(function(i,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],r):(i=typeof globalThis<"u"?globalThis:i||self,r(i["daply-ui"]={},i["react/jsx-runtime"],i.React))})(this,(function(i,r,x){"use strict";const P=({children:l})=>r.jsx("button",{children:l}),E=({name:l,value:S,onChange:w,error:n,schema:v,theme:F="auto"})=>{const{type:j="text",required:u=!1,placeholder:m="",label:f,className:y=""}=v,a=F==="dark"||F==="auto"&&typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches,d={width:"100%",boxSizing:"border-box",padding:"16px",borderRadius:"8px",outline:"none",transition:"all 0.2s ease",fontSize:"16px",fontFamily:"inherit",border:n?`2px solid ${a?"#f87171":"#ef4444"}`:`1px solid ${a?"#374151":"#d1d5db"}`,backgroundColor:n?a?"rgba(153, 27, 27, 0.1)":"rgba(254, 226, 226, 1)":a?"#2a2a2a":"#ffffff",color:a?"#ffffff":"#111827"},k={...d,borderColor:n?a?"#f87171":"#ef4444":"#3b82f6",boxShadow:n?`0 0 0 3px ${a?"rgba(248, 113, 113, 0.2)":"rgba(239, 68, 68, 0.2)"}`:"0 0 0 3px rgba(59, 130, 246, 0.2)"},T={display:"block",fontWeight:"500",marginBottom:"8px",color:a?"#ffffff":"#111827",fontSize:"14px"},$={marginTop:"4px",fontSize:"14px",color:a?"#f87171":"#dc2626"},B={color:a?"#f87171":"#ef4444",marginLeft:"4px"},b={marginBottom:"24px",display:"flex",flexDirection:"column",alignItems:"flex-start",width:"100%"},g=a?"#6b7280":"#9ca3af";return j==="textarea"?r.jsxs("div",{style:b,children:[f?r.jsxs("label",{htmlFor:l,style:T,children:[f,u?r.jsx("span",{style:B,children:"*"}):null]}):null,r.jsx("textarea",{id:l,name:l,value:S,onChange:w,required:u,placeholder:m,rows:v.rows||4,style:d,onFocus:s=>{Object.assign(s.target.style,k)},onBlur:s=>{Object.assign(s.target.style,d)},className:y}),n?r.jsx("p",{style:$,children:n}):null,r.jsx("style",{children:`
+          textarea::placeholder { color: ${g}; }
+        `})]}):r.jsxs("div",{style:b,children:[f?r.jsxs("label",{htmlFor:l,style:T,children:[f,u?r.jsx("span",{style:B,children:"*"}):null]}):null,r.jsx("input",{id:l,name:l,type:j,value:S,onChange:w,required:u,placeholder:m,style:d,onFocus:s=>{Object.assign(s.target.style,k)},onBlur:s=>{Object.assign(s.target.style,d)},className:y}),n?r.jsx("p",{style:$,children:n}):null,r.jsx("style",{children:`
+        input::placeholder { color: ${g}; }
+      `})]})},L=l=>{const{formId:S,siteId:w,fields:n,baseUrl:v,apiToken:F,encryptedDbName:j,pageUrl:u,pageId:m,sessionId:f,metadata:y,onSuccess:a,onError:d,submitButtonText:k="Submit",submitButtonClassName:T="",formClassName:$="",loadingText:B="Submitting...",theme:b="auto"}=l,g=n.reduce((t,e)=>(t[e.name]=e.defaultValue||"",t),{}),[s,O]=x.useState(g),[N,I]=x.useState({}),[p,z]=x.useState(!1),[U,M]=x.useState(!1),q=b==="dark"||b==="auto"&&typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches,H=t=>{const{name:e,value:h}=t.target;O(o=>({...o,[e]:h})),N[e]&&I(o=>{const c={...o};return delete c[e],c})},W=()=>{const t={};return n.forEach(e=>{const h=s[e.name],o=String(h||"");if(e.required&&!o.trim()){t[e.name]=`${e.label||e.name} is required`;return}if(e.type==="email"&&o&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o)){t[e.name]="Please enter a valid email address";return}if(e.type==="url"&&o)try{new URL(o)}catch{t[e.name]="Please enter a valid URL";return}if(e.validation&&o){const c=e.validation(o);if(c){t[e.name]=c;return}}}),I(t),Object.keys(t).length===0},V=async t=>{if(t.preventDefault(),!!W()){z(!0);try{const e=n.reduce((D,C)=>(D[C.name]={type:C.type,required:C.required},D),{}),h={formId:S,siteId:w,formData:s,formSchema:e,...u&&{pageUrl:u},...m&&{pageId:m},...f&&{sessionId:f},...y&&{metadata:y}},o=await fetch(`${v}/api/v1/form-submissions`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${F}`,"x-encrypted-db-name":j},body:JSON.stringify(h)});if(!o.ok){const D=await o.json().catch(()=>({}));throw new Error(D.message||`HTTP error! status: ${o.status}`)}const c=await o.json();O(g),I({}),a&&a(c)}catch(e){console.error("Form submission error:",e),d&&d(e)}finally{z(!1)}}},A={maxWidth:"612px",margin:"0 auto",padding:"32px",backgroundColor:q?"#1a1a1a":"#ffffff",borderRadius:"12px",boxShadow:q?"0 25px 50px -12px rgba(0, 0, 0, 0.5)":"0 10px 15px -3px rgba(0, 0, 0, 0.1)",border:`1px solid ${q?"#1f2937":"#e5e7eb"}`},J={width:"100%",padding:"16px 24px",background:p?"linear-gradient(to right, #4b5563, #4b5563)":U?"linear-gradient(to right, #1d4ed8, #1e40af)":"linear-gradient(to right, #2563eb, #1d4ed8)",color:"#ffffff",fontWeight:"bold",fontSize:"18px",textTransform:"uppercase",letterSpacing:"0.05em",borderRadius:"8px",border:"none",cursor:p?"not-allowed":"pointer",opacity:p?.5:1,transition:"all 0.2s ease",outline:"none",fontFamily:"inherit"};return r.jsxs("form",{onSubmit:V,style:A,className:$,children:[n.map(t=>r.jsx(E,{name:t.name,value:String(s[t.name]||""),onChange:H,error:N[t.name],schema:t,theme:b},t.name)),r.jsx("button",{type:"submit",disabled:p,style:J,onMouseEnter:()=>!p&&M(!0),onMouseLeave:()=>M(!1),onFocus:t=>{p||(t.target.style.boxShadow="0 0 0 3px rgba(59, 130, 246, 0.3)")},onBlur:t=>{t.target.style.boxShadow="none"},className:T,children:p?B:k})]})};i.Button=P,i.Form=L,i.InputField=E,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daply-ui",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "files": [
     "dist"
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "prebuild": "rm -rf dist",
+    "prebuild": "rimraf dist",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
@@ -36,6 +36,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "rimraf": "^6.1.2",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"