@jorgequevedoc/react-gridforms 1.1.0

package/README.md

@@ -0,0 +1,278 @@
+# React GridForms
+
+A modern React TypeScript implementation of GridForms - a compact and beautiful grid-based form system with built-in theming support.
+
+## Features
+
+- 🎨 **Modern Design**: Clean, responsive grid-based form layout
+- 🌙 **Theme Support**: Built-in light and dark themes with easy customization
+- 📱 **Responsive**: Works seamlessly across all device sizes
+- 🎯 **TypeScript**: Full TypeScript support with comprehensive type definitions
+- ⚡ **Performance**: Optimized for performance with minimal bundle size
+- 🎨 **Styled Components**: Built with styled-components for flexible styling
+
+## Installation
+
+### Option 1: Publish to npm (Recommended)
+
+1. **Build the library:**
+
+   ```bash
+   yarn build:lib
+   ```
+
+2. **Publish to npm:**
+
+   ```bash
+   npm publish
+   ```
+
+3. **Install in your project:**
+   ```bash
+   yarn add react-gridforms
+   ```
+
+### Option 2: Use as a Git dependency
+
+Add this repository as a dependency in your `package.json`:
+
+```json
+{
+  "dependencies": {
+    "react-gridforms": "github:yourusername/react-gridforms#main"
+  }
+}
+```
+
+### Option 3: Use with yarn link (Development)
+
+1. **Link the library:**
+
+   ```bash
+   cd /path/to/react-gridforms
+   yarn link
+   ```
+
+2. **Link in your project:**
+   ```bash
+   cd /path/to/your-project
+   yarn link react-gridforms
+   ```
+
+### Option 4: Use as a local dependency
+
+1. **Build the library:**
+
+   ```bash
+   cd /path/to/react-gridforms
+   yarn build:lib
+   ```
+
+2. **Add to your project's package.json:**
+
+   ```json
+   {
+     "dependencies": {
+       "react-gridforms": "file:/path/to/react-gridforms"
+     }
+   }
+   ```
+
+3. **Install:**
+   ```bash
+   yarn install
+   ```
+
+## Usage
+
+### Basic Setup
+
+```tsx
+import React from 'react';
+import {
+  GridForm,
+  FormSection,
+  FormRow,
+  FormField,
+  TextInput,
+  ThemeProvider,
+  lightTheme,
+} from 'react-gridforms';
+
+function App() {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <GridForm onSubmit={(data) => console.log(data)}>
+        <FormSection title="Personal Information">
+          <FormRow>
+            <FormField label="First Name">
+              <TextInput name="firstName" placeholder="Enter your first name" />
+            </FormField>
+            <FormField label="Last Name">
+              <TextInput name="lastName" placeholder="Enter your last name" />
+            </FormField>
+          </FormRow>
+        </FormSection>
+      </GridForm>
+    </ThemeProvider>
+  );
+}
+```
+
+### Available Components
+
+#### Core Components
+
+- `GridForm` - Main form container
+- `FormSection` - Group form fields into sections
+- `FormRow` - Arrange fields in a row
+- `FormField` - Individual form field wrapper
+
+#### Input Components
+
+- `TextInput` - Text input field
+- `SelectInput` - Dropdown select field
+- `RadioGroup` - Radio button group
+
+#### Theme Components
+
+- `ThemeProvider` - Theme context provider
+- `ThemeToggle` - Toggle between light and dark themes
+
+### Theming
+
+```tsx
+import { ThemeProvider, lightTheme, darkTheme, useTheme } from 'react-gridforms';
+
+// Use light theme
+<ThemeProvider theme={lightTheme}>
+  {/* Your form */}
+</ThemeProvider>
+
+// Use dark theme
+<ThemeProvider theme={darkTheme}>
+  {/* Your form */}
+</ThemeProvider>
+
+// Custom theme
+const customTheme = {
+  ...lightTheme,
+  colors: {
+    ...lightTheme.colors,
+    primary: '#ff6b6b',
+    secondary: '#4ecdc4',
+  }
+};
+
+<ThemeProvider theme={customTheme}>
+  {/* Your form */}
+</ThemeProvider>
+```
+
+### Form Submission
+
+```tsx
+<GridForm
+  onSubmit={(data) => {
+    console.log('Form data:', data);
+    // Handle form submission
+  }}
+>
+  {/* Form fields */}
+</GridForm>
+```
+
+## API Reference
+
+### GridForm Props
+
+- `onSubmit: (data: Record<string, any>) => void` - Form submission handler
+- `children: ReactNode` - Form content
+
+### FormSection Props
+
+- `title: string` - Section title
+- `children: ReactNode` - Section content
+
+### FormRow Props
+
+- `children: ReactNode` - Row content
+
+### FormField Props
+
+- `label: string` - Field label
+- `children: ReactNode` - Input component
+
+### TextInput Props
+
+- `name: string` - Field name
+- `placeholder?: string` - Placeholder text
+- `type?: string` - Input type (default: "text")
+- `required?: boolean` - Required field
+- `disabled?: boolean` - Disabled state
+
+### SelectInput Props
+
+- `name: string` - Field name
+- `options: SelectOption[]` - Select options
+- `placeholder?: string` - Placeholder text
+- `required?: boolean` - Required field
+- `disabled?: boolean` - Disabled state
+
+### RadioGroup Props
+
+- `name: string` - Field name
+- `options: RadioOption[]` - Radio options
+- `required?: boolean` - Required field
+- `disabled?: boolean` - Disabled state
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- Yarn
+
+### Setup
+
+```bash
+git clone https://github.com/yourusername/react-gridforms.git
+cd react-gridforms
+yarn install
+```
+
+### Available Scripts
+
+- `yarn dev` - Start development server
+- `yarn build` - Build for production
+- `yarn build:lib` - Build library for distribution
+- `yarn lint` - Run ESLint
+- `yarn preview` - Preview production build
+
+### Project Structure
+
+```
+src/
+├── components/          # React components
+│   ├── inputs/         # Input components
+│   └── index.ts        # Component exports
+├── theme/              # Theme configuration
+├── index.ts            # Main library exports
+└── lib.ts              # Library build entry point
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
+
+## License
+
+MIT License - see LICENSE file for details.
+
+## Support
+
+For support, please open an issue on GitHub or contact the maintainers.

package/dist/components/FormField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface FormFieldProps {
+    children: React.ReactNode;
+    span: number;
+    label?: string;
+    className?: string;
+    rowspan?: number;
+}
+export declare const FormField: React.FC<FormFieldProps>;
+export {};
+//# sourceMappingURL=FormField.d.ts.map

package/dist/components/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAkFD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4D9C,CAAC"}

package/dist/components/FormField.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+const StyledFormField = styled.div `
+  padding: ${(props) => props.theme.spacing.sm};
+  position: relative;
+  flex: ${({ span = 1, rowspan = 12 }) => `0 0 ${(100 / rowspan) * span}%`};
+  max-width: ${({ span = 1, rowspan = 12 }) => `${(100 / rowspan) * span}%`};
+  background-color: ${(props) => props.isFocused ? props.theme.colors.focusBackground : 'transparent'};
+  transition: background-color 0.2s ease;
+  border-right: 1px solid ${(props) => props.theme.colors.border};
+
+  label {
+    display: block;
+    font-size: ${(props) => props.theme.typography.fontSizeSmall};
+    color: ${(props) => props.theme.colors.textPrimary};
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: ${(props) => props.theme.spacing.xs};
+  }
+
+  /* Field styles */
+  input[type='text'],
+  input[type='email'],
+  input[type='number'],
+  input[type='password'],
+  input[type='search'],
+  input[type='tel'],
+  input[type='url'],
+  input[type='color'],
+  input[type='date'],
+  input[type='datetime'],
+  input[type='datetime-local'],
+  input[type='month'],
+  input[type='time'],
+  input[type='week'],
+  textarea,
+  select {
+    font-size: ${(props) => props.theme.typography.fontSizeLarge};
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    border: 0;
+    background: ${(props) => props.theme.colors.inputBackground};
+
+    &::placeholder {
+      font-weight: ${(props) => props.theme.typography.fontWeightLight};
+      color: ${(props) => props.theme.colors.inputPlaceholder};
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  /* Radio and checkbox styles */
+  input[type='radio'],
+  input[type='checkbox'] {
+    margin-right: ${(props) => props.theme.spacing.sm};
+  }
+
+  /* Radio and checkbox labels */
+  input[type='radio'] + label,
+  input[type='checkbox'] + label {
+    display: inline;
+    text-transform: none;
+    letter-spacing: normal;
+    margin-bottom: 0;
+    margin-left: ${(props) => props.theme.spacing.xs};
+  }
+
+  @media only screen and (max-width: 768px) {
+    flex: 1 1 100%;
+    max-width: 100%;
+    border-bottom: 1px solid ${(props) => props.theme.colors.border};
+  }
+`;
+export const FormField = ({ children, span, label, className, rowspan = 12, }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const fieldRef = useRef(null);
+    useEffect(() => {
+        const handleClick = (e) => {
+            if (fieldRef.current && !fieldRef.current.contains(e.target)) {
+                setIsFocused(false);
+            }
+        };
+        const handleFocus = () => setIsFocused(true);
+        const handleBlur = () => setIsFocused(false);
+        const field = fieldRef.current;
+        if (field) {
+            const focusableElements = field.querySelectorAll('input, textarea, select');
+            focusableElements.forEach((el) => {
+                el.addEventListener('focus', handleFocus);
+                el.addEventListener('blur', handleBlur);
+            });
+        }
+        document.addEventListener('click', handleClick);
+        return () => {
+            document.removeEventListener('click', handleClick);
+            if (field) {
+                const focusableElements = field.querySelectorAll('input, textarea, select');
+                focusableElements.forEach((el) => {
+                    el.removeEventListener('focus', handleFocus);
+                    el.removeEventListener('blur', handleBlur);
+                });
+            }
+        };
+    }, []);
+    return (_jsxs(StyledFormField, { ref: fieldRef, "data-field-span": span, span: span, isFocused: isFocused, className: className, rowspan: rowspan, children: [label && _jsx("label", { children: label }), children] }));
+};
+//# sourceMappingURL=FormField.js.map

package/dist/components/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":"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"}

package/dist/components/FormRow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FormRowProps {
+    children: React.ReactNode;
+    span: number;
+    className?: string;
+}
+export declare const FormRow: React.FC<FormRowProps>;
+export {};
+//# sourceMappingURL=FormRow.d.ts.map

package/dist/components/FormRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRow.d.ts","sourceRoot":"","sources":["../../src/components/FormRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkB1C,CAAC"}

package/dist/components/FormRow.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled from 'styled-components';
+const StyledFormRow = styled.div `
+  border-bottom: 1px solid ${(props) => props.theme.colors.border};
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap
+
+  > div[data-field-span]:first-child {
+    border-left: none;
+  }
+
+  > div[data-field-span]:last-child {
+    border-right: none;
+  }
+
+  @media only screen and (max-width: 768px) {
+    border-bottom: none;
+    flex-direction: column;
+
+    > div[data-field-span] {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+`;
+export const FormRow = ({ children, span, className, }) => {
+    // Clone children and inject rowspan prop
+    const childrenWithRowspan = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { rowspan: span });
+        }
+        return child;
+    });
+    return (_jsx(StyledFormRow, { "data-row-span": span, span: span, className: className, children: childrenWithRowspan }));
+};
+//# sourceMappingURL=FormRow.js.map

package/dist/components/FormRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRow.js","sourceRoot":"","sources":["../../src/components/FormRow.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAkB;6BACrB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;CAsBhE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,QAAQ,EACR,IAAI,EACJ,SAAS,GACV,EAAE,EAAE;IACH,yCAAyC;IACzC,MAAM,mBAAmB,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACjE,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAS,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,aAAa,qBAAgB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,YACjE,mBAAmB,GACN,CACjB,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/FormSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FormSectionProps {
+    children: React.ReactNode;
+    title: string;
+    className?: string;
+}
+export declare const FormSection: React.FC<FormSectionProps>;
+export {};
+//# sourceMappingURL=FormSection.d.ts.map

package/dist/components/FormSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.d.ts","sourceRoot":"","sources":["../../src/components/FormSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,gBAAgB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiCD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAWlD,CAAC"}

package/dist/components/FormSection.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+const StyledFieldset = styled.fieldset `
+  border: none;
+  padding: 0;
+  margin: 0;
+  margin-top: ${(props) => props.theme.spacing.xl};
+
+  legend {
+    border: none;
+    border-bottom: 4px solid ${(props) => props.theme.colors.legend};
+    color: ${(props) => props.theme.colors.legend};
+    font-size: ${(props) => props.theme.typography.fontSizeLarge};
+    font-weight: ${(props) => props.theme.typography.fontWeightBold};
+    padding-bottom: 5px;
+    position: static;
+    width: 100%;
+    margin-bottom: ${(props) => props.theme.spacing.xs};
+  }
+
+  /* Nested fieldset styles */
+  fieldset legend {
+    border-bottom: 2px solid ${(props) => props.theme.colors.legend};
+    font-weight: ${(props) => props.theme.typography.fontWeightNormal};
+  }
+
+  fieldset fieldset legend {
+    border-bottom: 1px solid ${(props) => props.theme.colors.legend};
+    font-weight: ${(props) => props.theme.typography.fontWeightNormal};
+    font-size: ${(props) => props.theme.typography.fontSizeBase};
+  }
+`;
+export const FormSection = ({ children, title, className, }) => {
+    return (_jsxs(StyledFieldset, { className: className, children: [_jsx("legend", { children: title }), children] }));
+};
+//# sourceMappingURL=FormSection.js.map

package/dist/components/FormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.js","sourceRoot":"","sources":["../../src/components/FormSection.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAA;;;;gBAItB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;;;+BAIlB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;aACtD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;iBAChC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa;mBAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc;;;;qBAI9C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;;;;+BAKvB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;mBAChD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,gBAAgB;;;;+BAItC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;mBAChD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,gBAAgB;iBACpD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY;;CAE9D,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,EAAE;IACH,OAAO,CACL,MAAC,cAAc,IAAC,SAAS,EAAE,SAAS,aAClC,2BAAS,KAAK,GAAU,EACvB,QAAQ,IACM,CAClB,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/GridForm.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface GridFormProps {
+    children: React.ReactNode;
+    onSubmit?: (e: React.FormEvent) => void;
+    className?: string;
+}
+export declare const GridForm: React.FC<GridFormProps>;
+export {};
+//# sourceMappingURL=GridForm.d.ts.map

package/dist/components/GridForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridForm.d.ts","sourceRoot":"","sources":["../../src/components/GridForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,aAAa;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqFD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAa5C,CAAC"}

package/dist/components/GridForm.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+const StyledGridForm = styled.form `
+  width: 100%;
+  max-width: 100%;
+
+  /* Grid form base styles */
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  /* Remove backgrounds and borders from fields */
+  input[type='text'],
+  input[type='email'],
+  input[type='number'],
+  input[type='password'],
+  input[type='search'],
+  input[type='tel'],
+  input[type='url'],
+  input[type='color'],
+  input[type='date'],
+  input[type='datetime'],
+  input[type='datetime-local'],
+  input[type='month'],
+  input[type='time'],
+  input[type='week'],
+  textarea {
+    border: 0;
+    background: ${(props) => props.theme.colors.inputBackground};
+
+    &::placeholder {
+      font-weight: ${(props) => props.theme.typography.fontWeightLight};
+      color: ${(props) => props.theme.colors.inputPlaceholder};
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  /* Row styles */
+  [data-row-span] {
+    border-bottom: 1px solid ${(props) => props.theme.colors.border};
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+
+    @media only screen and (max-width: 768px) {
+      border-bottom: none;
+    }
+  }
+
+  /* Field container styles */
+  [data-field-span] {
+    padding: ${(props) => props.theme.spacing.sm};
+    position: relative;
+
+    label {
+      display: block;
+      font-size: ${(props) => props.theme.typography.fontSizeSmall};
+      color: ${(props) => props.theme.colors.textPrimary};
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: ${(props) => props.theme.spacing.xs};
+    }
+
+    &.focus {
+      background-color: ${(props) => props.theme.colors.focusBackground};
+    }
+  }
+
+  /* Responsive behavior */
+  @media only screen and (max-width: 768px) {
+    [data-row-span] {
+      flex-direction: column;
+    }
+
+    [data-field-span] {
+      border-bottom: 1px solid ${(props) => props.theme.colors.border};
+    }
+  }
+`;
+export const GridForm = ({ children, onSubmit, className, }) => {
+    return (_jsx(StyledGridForm, { className: `grid-form ${className || ''}`, onSubmit: onSubmit, children: children }));
+};
+//# sourceMappingURL=GridForm.js.map

package/dist/components/GridForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridForm.js","sourceRoot":"","sources":["../../src/components/GridForm.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA4BhB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe;;;qBAG1C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe;eACvD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB;;;;;;;;;;+BAU9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;eAYpD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;;;;mBAK7B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa;eACnD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW;;;uBAGjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;;;0BAI9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe;;;;;;;;;;;iCAWtC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;CAGpE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;IACH,OAAO,CACL,KAAC,cAAc,IACb,SAAS,EAAE,aAAa,SAAS,IAAI,EAAE,EAAE,EACzC,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACM,CAClB,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/ThemeToggle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ThemeToggleProps {
+    className?: string;
+}
+export declare const ThemeToggle: React.FC<ThemeToggleProps>;
+export {};
+//# sourceMappingURL=ThemeToggle.d.ts.map

package/dist/components/ThemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CASlD,CAAC"}

package/dist/components/ThemeToggle.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useTheme } from '../theme/ThemeContext';
+const ToggleButton = styled.button `
+  background: ${(props) => props.theme.colors.surface};
+  border: 1px solid ${(props) => props.theme.colors.border};
+  color: ${(props) => props.theme.colors.textPrimary};
+  padding: ${(props) => props.theme.spacing.sm}
+    ${(props) => props.theme.spacing.md};
+  border-radius: ${(props) => props.theme.borderRadius.md};
+  cursor: pointer;
+  font-size: ${(props) => props.theme.typography.fontSizeBase};
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: ${(props) => props.theme.colors.hover};
+  }
+
+  &:active {
+    background: ${(props) => props.theme.colors.active};
+  }
+`;
+const ToggleIcon = styled.span `
+  margin-right: ${(props) => props.theme.spacing.xs};
+`;
+export const ThemeToggle = ({ className }) => {
+    const { themeMode, toggleTheme } = useTheme();
+    return (_jsxs(ToggleButton, { onClick: toggleTheme, className: className, children: [_jsx(ToggleIcon, { children: themeMode === 'light' ? '🌙' : '☀️' }), themeMode === 'light' ? 'Dark Mode' : 'Light Mode'] }));
+};
+//# sourceMappingURL=ThemeToggle.js.map

package/dist/components/ThemeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.js","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMjD,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAA;gBAClB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;sBAC/B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;WAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW;aACvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;MACxC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;mBACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;;eAE1C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY;;;;kBAI3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;kBAInC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;CAErD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;kBACZ,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACvE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE9C,OAAO,CACL,MAAC,YAAY,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,aACtD,KAAC,UAAU,cAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GAAc,EAC7D,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,IACtC,CAChB,CAAC;AACJ,CAAC,CAAC"}