pure-react-ui 1.5.1 → 1.5.3

package/README.md

@@ -245,6 +245,215 @@ import { Text } from 'pure-react-ui';
 - `truncate`: boolean (default: false) - Truncate text with ellipsis
 - `className`: string (optional) - Additional CSS classes
 
+### Form Components
+
+A comprehensive form component system with all form elements.
+
+#### Form
+
+The main form container component.
+
+```tsx
+import { Form } from 'pure-react-ui';
+
+<Form layout="vertical" onSubmit={handleSubmit}>
+  {/* Form fields */}
+</Form>
+```
+
+**Props:**
+- `layout`: 'vertical' | 'horizontal' | 'inline' (default: 'vertical')
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- `onSubmit`: (e: React.FormEvent) => void (optional)
+- All standard form HTML attributes
+
+#### Input
+
+Text input field with validation and icons.
+
+```tsx
+import { Input } from 'pure-react-ui';
+
+<Input
+  label="Email"
+  type="email"
+  placeholder="Enter email"
+  error={errors.email}
+  helpText="We'll never share your email"
+  leftIcon={<Icon name="Mail" />}
+  fullWidth
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional) - Error message
+- `helpText`: string (optional) - Help text
+- `leftIcon`: React.ReactNode (optional)
+- `rightIcon`: React.ReactNode (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- All standard input HTML attributes
+
+#### Textarea
+
+Multi-line text input.
+
+```tsx
+import { Textarea } from 'pure-react-ui';
+
+<Textarea
+  label="Message"
+  placeholder="Enter your message"
+  rows={4}
+  resize="vertical"
+  fullWidth
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- `rows`: number (default: 4)
+- `resize`: 'none' | 'both' | 'horizontal' | 'vertical' (default: 'vertical')
+- All standard textarea HTML attributes
+
+#### Select
+
+Dropdown select component.
+
+```tsx
+import { Select } from 'pure-react-ui';
+
+<Select
+  label="Country"
+  options={[
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' }
+  ]}
+  placeholder="Choose a country"
+  fullWidth
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `options`: SelectOption[] (required)
+- `placeholder`: string (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- All standard select HTML attributes
+
+#### Checkbox
+
+Checkbox input with custom styling.
+
+```tsx
+import { Checkbox } from 'pure-react-ui';
+
+<Checkbox
+  label="I agree to terms"
+  checked={checked}
+  onChange={(e) => setChecked(e.target.checked)}
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- All standard checkbox HTML attributes
+
+#### Radio
+
+Radio button input.
+
+```tsx
+import { Radio } from 'pure-react-ui';
+
+<Radio
+  label="Option 1"
+  name="option"
+  value="1"
+  checked={selected === '1'}
+  onChange={(e) => setSelected(e.target.value)}
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- All standard radio HTML attributes
+
+#### Switch
+
+Toggle switch component.
+
+```tsx
+import { Switch } from 'pure-react-ui';
+
+<Switch
+  label="Enable notifications"
+  checked={enabled}
+  onChange={(e) => setEnabled(e.target.checked)}
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- All standard checkbox HTML attributes (used as switch)
+
+#### FormGroup
+
+Container for grouping form fields.
+
+```tsx
+import { FormGroup } from 'pure-react-ui';
+
+<FormGroup label="Personal Information" required>
+  <Input label="Name" />
+  <Input label="Email" />
+</FormGroup>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `required`: boolean (default: false)
+- `className`: string (optional)
+
+#### FormRow
+
+Horizontal row for form fields.
+
+```tsx
+import { FormRow } from 'pure-react-ui';
+
+<FormRow gap="medium">
+  <Input label="First Name" fullWidth />
+  <Input label="Last Name" fullWidth />
+</FormRow>
+```
+
+**Props:**
+- `gap`: 'small' | 'medium' | 'large' | number (default: 'medium')
+- `className`: string (optional)
+
 ## Styling
 
 All components include their own CSS files and use CSS classes with the `pure-` prefix. The CSS files are automatically imported with each component. You can also style them by targeting these classes:
@@ -256,6 +465,13 @@ All components include their own CSS files and use CSS classes with the `pure-`
 - **Space**: `pure-space`, `pure-space--horizontal`, `pure-space--vertical`, etc.
 - **Flex**: `pure-flex`, `pure-flex--row`, `pure-flex--column`, etc.
 - **Text**: `pure-text`, `pure-text--lg`, `pure-text--bold`, etc.
+- **Form**: `pure-form`, `pure-form--vertical`, `pure-form--horizontal`, etc.
+- **Input**: `pure-input`, `pure-input--error`, `pure-input--small`, etc.
+- **Textarea**: `pure-textarea`, `pure-textarea--error`, etc.
+- **Select**: `pure-select`, `pure-select--error`, etc.
+- **Checkbox**: `pure-checkbox`, `pure-checkbox--error`, etc.
+- **Radio**: `pure-radio`, `pure-radio--error`, etc.
+- **Switch**: `pure-switch`, `pure-switch--error`, etc.
 
 Each component has its own CSS file located in:
 - `lib/components/Button/Button.css`
@@ -265,6 +481,7 @@ Each component has its own CSS file located in:
 - `lib/components/Space/Space.css`
 - `lib/components/Flex/Flex.css`
 - `lib/components/Text/Text.css`
+- `lib/components/Form/Form.css`
 
 ## Examples
 

package/lib/components/Form/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Form.css';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: string;
+    error?: string;
+    helpText?: string;
+    fullWidth?: boolean;
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/components/Form/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,QAAQ,wFA6CnB,CAAC"}

package/lib/components/Form/Checkbox.js

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+import './Form.css';
+export const Checkbox = forwardRef(({ label, error, helpText, fullWidth = false, size = 'medium', className = '', id, ...props }, ref) => {
+    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    const baseClass = 'pure-checkbox';
+    const sizeClass = `pure-checkbox--${size}`;
+    const errorClass = error ? 'pure-checkbox--error' : '';
+    const fullWidthClass = fullWidth ? 'pure-checkbox--full-width' : '';
+    const combinedClassName = [
+        baseClass,
+        sizeClass,
+        errorClass,
+        fullWidthClass,
+        className
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: `pure-checkbox-wrapper ${fullWidth ? 'pure-checkbox-wrapper--full-width' : ''}` },
+        React.createElement("label", { htmlFor: checkboxId, className: "pure-checkbox-label" },
+            React.createElement("input", { ref: ref, type: "checkbox", id: checkboxId, className: combinedClassName, ...props }),
+            React.createElement("span", { className: "pure-checkbox-custom" }),
+            label && React.createElement("span", { className: "pure-checkbox-text" }, label)),
+        error && (React.createElement("span", { className: "pure-checkbox-error" }, error)),
+        helpText && !error && (React.createElement("span", { className: "pure-checkbox-help" }, helpText))));
+});
+Checkbox.displayName = 'Checkbox';
+//# sourceMappingURL=Checkbox.js.map

package/lib/components/Form/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,YAAY,CAAC;AAUpB,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAkC,CAAC,EACnE,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,UAAU,GAAG,EAAE,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAC/E,MAAM,SAAS,GAAG,eAAe,CAAC;IAClC,MAAM,SAAS,GAAG,kBAAkB,IAAI,EAAE,CAAC;IAC3C,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IACvD,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,MAAM,iBAAiB,GAAG;QACxB,SAAS;QACT,SAAS;QACT,UAAU;QACV,cAAc;QACd,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,6BAAK,SAAS,EAAE,yBAAyB,SAAS,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,EAAE,EAAE;QAC7F,+BAAO,OAAO,EAAE,UAAU,EAAE,SAAS,EAAC,qBAAqB;YACzD,+BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,iBAAiB,KACxB,KAAK,GACT;YACF,8BAAM,SAAS,EAAC,sBAAsB,GAAG;YACxC,KAAK,IAAI,8BAAM,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAQ,CACvD;QACP,KAAK,IAAI,CACR,8BAAM,SAAS,EAAC,qBAAqB,IAAE,KAAK,CAAQ,CACrD;QACA,QAAQ,IAAI,CAAC,KAAK,IAAI,CACrB,8BAAM,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAQ,CACvD,CACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}