performa 1.0.0 → 1.0.2

package/README.md

@@ -8,7 +8,7 @@ A lightweight, framework-agnostic React form library with built-in server-side v
 - **Server-Side Validation**: Secure form validation with comprehensive validation rules
 - **TypeScript First**: Full type safety with excellent IDE autocomplete
 - **Accessible**: Built-in ARIA attributes and keyboard navigation
-- **Themeable**: Fully customizable with Tailwind CSS or custom styling
+- **Themeable**: Fully customisable with Tailwind CSS or custom styling
 - **Lightweight**: Core library is only 7.69 KB (brotli compressed)
 - **File Uploads**: Built-in support for file validation and previews
 - **Dark Mode**: Native dark mode support out of the box
@@ -36,12 +36,37 @@ For TanStack Start:
 npm install performa @tanstack/start
 ```
 
+### Tailwind CSS Setup
+
+performa uses Tailwind CSS for styling. To ensure the styles work correctly in your project, add the performa library path to your Tailwind configuration.
+
+Add the following to your `tailwind.config.js` or `tailwind.config.ts`:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}', // Your app files
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    // Add performa library path
+    './node_modules/performa/dist/**/*.{js,mjs}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+That's it! performa uses standard Tailwind colors and works out of the box. If you want to customize the styling, use the [FormThemeProvider](#theming) to override the default theme.
+
 ## Quick Start
 
 ### 1. Define Your Form Configuration
 
 ```typescript
-import { FormConfig } from 'performa';
+import type { FormConfig } from 'performa';
 
 const loginForm = {
   key: 'login',
@@ -140,7 +165,7 @@ export default function LoginRoute() {
 }
 
 // Action handler
-import { validateForm } from 'formbase/server';
+import { validateForm } from 'performa/server';
 
 export async function action({ request }: ActionFunctionArgs) {
   const result = await validateForm(request, loginForm);
@@ -159,7 +184,7 @@ export async function action({ request }: ActionFunctionArgs) {
 ```typescript
 import { TanStackStartForm } from 'performa/tanstack-start';
 import { createServerFn } from '@tanstack/start';
-import { validateForm } from 'formbase/server';
+import { validateForm } from 'performa/server';
 
 const submitLogin = createServerFn({ method: 'POST' }).handler(
   async ({ data }: { data: FormData }) => {
@@ -185,7 +210,7 @@ export default function LoginPage() {
 
 ### Field Types
 
-formbase supports the following field types:
+performa supports the following field types:
 
 #### Text Inputs
 - `text` - Standard text input
@@ -284,7 +309,7 @@ All validation rules are applied server-side for security:
 The `validateForm` function performs server-side validation and returns typed results:
 
 ```typescript
-import { validateForm } from 'formbase/server';
+import { validateForm } from 'performa/server';
 
 const result = await validateForm(request, formConfig);
 
@@ -299,12 +324,12 @@ const { email, password } = result.values;
 
 ### Custom Error Messages
 
-You can customize validation error messages:
+You can customise validation error messages:
 
 ```typescript
 import { defaultErrorMessages } from 'performa/server';
 
-// Customize individual messages
+// customise individual messages
 defaultErrorMessages.required = (label) => `${label} is mandatory`;
 defaultErrorMessages.minLength = (label, min) =>
   `${label} needs at least ${min} characters`;
@@ -394,7 +419,7 @@ export async function submitForm(prevState: any, formData: FormData) {
 
 ### Default Theme
 
-formbase comes with a default theme optimized for Tailwind CSS with dark mode support:
+performa comes with a default theme optimized for Tailwind CSS with dark mode support:
 
 ```typescript
 import { FormThemeProvider } from 'performa';
@@ -413,7 +438,7 @@ function App() {
 Override the default theme with your own styles:
 
 ```typescript
-import { FormThemeProvider } from 'formbase';
+import { FormThemeProvider } from 'performa';
 
 const customTheme = {
   formGroup: 'mb-6',
@@ -521,10 +546,10 @@ The complete theme object structure:
 
 ### Custom Labels
 
-Customize form labels and messages:
+customise form labels and messages:
 
 ```typescript
-import { FormThemeProvider } from 'formbase';
+import { FormThemeProvider } from 'performa';
 
 const customLabels = {
   fileUpload: {
@@ -621,7 +646,7 @@ function CustomForm() {
 ### Conditional Fields
 
 ```typescript
-const formConfig: FormConfig = {
+const formConfig = {
   key: 'signup',
   fields: {
     accountType: {
@@ -642,29 +667,29 @@ const formConfig: FormConfig = {
       },
     }),
   },
-};
+} satisfies FormConfig
 ```
 
 ### Multi-Step Forms
 
 ```typescript
-const step1Config: FormConfig = {
+const step1Config = {
   key: 'registration-step1',
   fields: {
     email: { type: 'email', label: 'Email', rules: { required: true } },
     password: { type: 'password', label: 'Password', rules: { required: true } },
     submit: { type: 'submit', label: 'Continue' },
   },
-};
+} satisfies FormConfig;
 
-const step2Config: FormConfig = {
+const step2Config = {
   key: 'registration-step2',
   fields: {
     firstName: { type: 'text', label: 'First Name', rules: { required: true } },
     lastName: { type: 'text', label: 'Last Name', rules: { required: true } },
     submit: { type: 'submit', label: 'Complete Registration' },
   },
-};
+} satisfies FormConfig;
 
 function MultiStepForm() {
   const [step, setStep] = useState(1);
@@ -701,7 +726,7 @@ function DynamicForm() {
       .then(data => setCategories(data));
   }, []);
 
-  const formConfig: FormConfig = {
+  const formConfig = {
     key: 'product',
     fields: {
       category: {
@@ -714,7 +739,7 @@ function DynamicForm() {
         rules: { required: true },
       },
     },
-  };
+  } satisfies FormConfig
 
   return <NextForm config={formConfig} action={submitProduct} />;
 }
@@ -722,7 +747,7 @@ function DynamicForm() {
 
 ## TypeScript
 
-formbase is built with TypeScript and provides full type safety:
+performa is built with TypeScript and provides full type safety:
 
 ```typescript
 import { FormConfig } from 'performa';
@@ -819,7 +844,7 @@ All components are memoized with `React.memo` for optimal performance. The libra
 
 ## Accessibility
 
-formbase is built with accessibility in mind:
+performa is built with accessibility in mind:
 
 - Proper ARIA attributes on all form elements
 - Keyboard navigation support

package/dist/index.cjs

@@ -107,48 +107,48 @@ var defaultTheme = {
     required: "text-red-500 ml-1"
   },
   input: {
-    base: "block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-primary focus:border-primary",
+    base: "block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500",
     error: "border-red-500 dark:border-red-400",
     disabled: "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
-    focus: "focus:outline-none focus:ring focus:ring-primary focus:border-primary"
+    focus: "focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
   },
   select: {
-    base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
+    base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
     error: "border-red-500 dark:border-red-400",
     disabled: "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
     option: "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
   },
   textarea: {
-    base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
+    base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
     error: "border-red-500 dark:border-red-400",
     disabled: "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
   },
   checkbox: {
-    base: "h-4 w-4 text-primary focus:ring-primary border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded disabled:cursor-not-allowed",
+    base: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded disabled:cursor-not-allowed",
     error: "border-red-500 dark:border-red-400",
     label: "ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
   },
   toggle: {
-    track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 dark:bg-gray-600 peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-2 dark:peer-focus:ring-offset-gray-800",
-    trackActive: "peer-checked:bg-primary peer-checked:dark:bg-primary-light",
+    track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 dark:bg-gray-600 peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2 dark:peer-focus:ring-offset-gray-800",
+    trackActive: "peer-checked:bg-blue-600 peer-checked:dark:bg-blue-500",
     thumb: "absolute left-1 top-1 w-4 h-4 bg-white dark:bg-gray-200 rounded-full transition-transform duration-200 peer-checked:translate-x-5",
     label: "block text-sm font-medium text-gray-700 dark:text-gray-300"
   },
   radio: {
-    base: "h-4 w-4 text-primary focus:ring-primary border-gray-300 dark:border-gray-600 dark:bg-gray-800 disabled:cursor-not-allowed",
+    base: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 disabled:cursor-not-allowed",
     label: "ml-2 text-sm text-gray-700 dark:text-gray-300",
     group: "mt-1"
   },
   file: {
-    dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 dark:border-gray-600 hover:border-primary dark:hover:border-primary transition-colors duration-200",
-    dropzoneActive: "border-primary bg-primary-50 dark:bg-primary-900/20",
+    dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 transition-colors duration-200",
+    dropzoneActive: "border-blue-500 bg-blue-50 dark:bg-blue-900/20",
     dropzoneError: "border-red-500 dark:border-red-400 hover:border-red-500 dark:hover:border-red-400",
     icon: "w-8 h-8 text-gray-400 dark:text-gray-500",
     text: "mt-2 text-sm text-gray-500 dark:text-gray-400",
     hint: "mt-1 text-xs text-gray-500 dark:text-gray-400"
   },
   submit: {
-    base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark dark:bg-primary-light dark:hover:bg-primary focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-primary transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+    base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
     loading: "opacity-75",
     spinner: "mr-3 -ml-1 size-5 animate-spin text-white"
   },
@@ -161,18 +161,18 @@ var defaultTheme = {
     info: "bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-800"
   },
   datetime: {
-    input: "block w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed cursor-pointer",
+    input: "block w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed cursor-pointer",
     dropdown: "absolute z-50 mt-2 p-4 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg w-80",
     picker: "absolute z-50 mt-2 p-4 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg w-80",
     calendar: "grid grid-cols-7 gap-1 mb-4",
-    day: "p-2 text-sm rounded hover:bg-primary hover:text-white transition-colors text-gray-700 dark:text-gray-300",
-    daySelected: "bg-primary text-white",
-    dayButton: "p-2 text-sm rounded hover:bg-primary hover:text-white transition-colors text-gray-700 dark:text-gray-300",
-    dayButtonSelected: "bg-primary text-white",
+    day: "p-2 text-sm rounded hover:bg-blue-600 hover:text-white transition-colors text-gray-700 dark:text-gray-300",
+    daySelected: "bg-blue-600 text-white",
+    dayButton: "p-2 text-sm rounded hover:bg-blue-600 hover:text-white transition-colors text-gray-700 dark:text-gray-300",
+    dayButtonSelected: "bg-blue-600 text-white",
     timeInput: "w-14 px-2 py-1 text-center border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100",
     timeLabel: "text-xs font-medium text-gray-700 dark:text-gray-300",
     periodButton: "px-3 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300",
-    periodButtonActive: "bg-primary text-white",
+    periodButtonActive: "bg-blue-600 text-white",
     iconButton: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
     navButton: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-white",
     monthYear: "text-sm font-medium text-gray-900 dark:text-gray-100",
@@ -180,7 +180,7 @@ var defaultTheme = {
     formatButton: "px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600"
   },
   button: {
-    primary: "flex-1 px-3 py-2 text-sm bg-primary text-white rounded hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+    primary: "flex-1 px-3 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
     secondary: "flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
   },
   readonly: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100",
@@ -200,48 +200,48 @@ var lightOnlyTheme = {
     required: "text-red-500 ml-1"
   },
   input: {
-    base: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-primary focus:border-primary",
+    base: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500",
     error: "border-red-500",
     disabled: "disabled:bg-gray-100 disabled:cursor-not-allowed",
-    focus: "focus:outline-none focus:ring focus:ring-primary focus:border-primary"
+    focus: "focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
   },
   select: {
-    base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 disabled:cursor-not-allowed",
+    base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed",
     error: "border-red-500",
     disabled: "disabled:bg-gray-100 disabled:cursor-not-allowed",
     option: "bg-white text-gray-900"
   },
   textarea: {
-    base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 disabled:cursor-not-allowed",
+    base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed",
     error: "border-red-500",
     disabled: "disabled:bg-gray-100 disabled:cursor-not-allowed"
   },
   checkbox: {
-    base: "h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded disabled:cursor-not-allowed",
+    base: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded disabled:cursor-not-allowed",
     error: "border-red-500",
     label: "ml-2 block text-sm font-medium text-gray-700"
   },
   toggle: {
-    track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-2",
-    trackActive: "peer-checked:bg-primary",
+    track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2",
+    trackActive: "peer-checked:bg-blue-600",
     thumb: "absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 peer-checked:translate-x-5",
     label: "block text-sm font-medium text-gray-700"
   },
   radio: {
-    base: "h-4 w-4 text-primary focus:ring-primary border-gray-300 disabled:cursor-not-allowed",
+    base: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 disabled:cursor-not-allowed",
     label: "ml-2 text-sm text-gray-700",
     group: "mt-1"
   },
   file: {
-    dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 hover:border-primary transition-colors duration-200",
-    dropzoneActive: "border-primary bg-primary-50",
+    dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 hover:border-blue-500 transition-colors duration-200",
+    dropzoneActive: "border-blue-500 bg-blue-50",
     dropzoneError: "border-red-500 hover:border-red-500",
     icon: "w-8 h-8 text-gray-400",
     text: "mt-2 text-sm text-gray-500",
     hint: "mt-1 text-xs text-gray-500"
   },
   submit: {
-    base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+    base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
     loading: "opacity-75",
     spinner: "mr-3 -ml-1 size-5 animate-spin text-white"
   },
@@ -254,18 +254,18 @@ var lightOnlyTheme = {
     info: "bg-blue-50 text-blue-800 border-blue-200"
   },
   datetime: {
-    input: "block w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 disabled:cursor-not-allowed cursor-pointer",
+    input: "block w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed cursor-pointer",
     dropdown: "absolute z-50 mt-2 p-4 bg-white border border-gray-300 rounded-lg shadow-lg w-80",
     picker: "absolute z-50 mt-2 p-4 bg-white border border-gray-300 rounded-lg shadow-lg w-80",
     calendar: "grid grid-cols-7 gap-1 mb-4",
-    day: "p-2 text-sm rounded hover:bg-primary hover:text-white transition-colors text-gray-700",
-    daySelected: "bg-primary text-white",
-    dayButton: "p-2 text-sm rounded hover:bg-primary hover:text-white transition-colors text-gray-700",
-    dayButtonSelected: "bg-primary text-white",
+    day: "p-2 text-sm rounded hover:bg-blue-600 hover:text-white transition-colors text-gray-700",
+    daySelected: "bg-blue-600 text-white",
+    dayButton: "p-2 text-sm rounded hover:bg-blue-600 hover:text-white transition-colors text-gray-700",
+    dayButtonSelected: "bg-blue-600 text-white",
     timeInput: "w-14 px-2 py-1 text-center border border-gray-300 rounded bg-white text-gray-900",
     timeLabel: "text-xs font-medium text-gray-700",
     periodButton: "px-3 py-1 text-xs rounded bg-gray-100 text-gray-700",
-    periodButtonActive: "bg-primary text-white",
+    periodButtonActive: "bg-blue-600 text-white",
     iconButton: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500",
     navButton: "p-1 hover:bg-gray-100 rounded text-gray-700",
     monthYear: "text-sm font-medium text-gray-900",
@@ -273,7 +273,7 @@ var lightOnlyTheme = {
     formatButton: "px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
   },
   button: {
-    primary: "flex-1 px-3 py-2 text-sm bg-primary text-white rounded hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+    primary: "flex-1 px-3 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
     secondary: "flex-1 px-3 py-2 text-sm border border-gray-300 rounded hover:bg-gray-50 text-gray-700"
   },
   readonly: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-100 text-gray-900",
@@ -1173,7 +1173,7 @@ function FileInput({
                 )
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: theme.file?.text, children: fileName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-primary", children: fileName }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: theme.file?.text, children: fileName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-blue-600 dark:text-blue-400", children: fileName }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: labels.fileUpload?.clickToUpload }),
               " ",
               labels.fileUpload?.dragAndDrop
@@ -1210,7 +1210,7 @@ function FileInput({
             href: fileUrl,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "mt-2 inline-flex items-center text-xs text-primary hover:underline dark:text-gray-50",
+            className: "mt-2 inline-flex items-center text-xs text-blue-600 hover:underline dark:text-blue-400",
             children: [
               "View Current ",
               label,