@rhavenside/custom-ui-library 1.0.1 → 1.0.3

package/README.md

@@ -1,6 +1,6 @@
 # @rhavenside/custom-ui-library
 
-Eine wiederverwendbare React UI-Komponenten-Bibliothek mit CSS-Variablen für vollständige Anpassbarkeit.
+A reusable React UI component library with CSS variables for complete customization.
 
 ## Installation
 
@@ -8,7 +8,7 @@ Eine wiederverwendbare React UI-Komponenten-Bibliothek mit CSS-Variablen für vo
 npm install @rhavenside/custom-ui-library
 ```
 
-## Verwendung
+## Usage
 
 ### JavaScript Import
 
@@ -19,56 +19,467 @@ import { Button, Input, Modal, Progress } from '@rhavenside/custom-ui-library';
 ### CSS Import
 
 ```javascript
+// Option 1: Direct path (recommended for Vite projects)
 import '@rhavenside/custom-ui-library/dist/style.css';
+
+// Option 2: Using the exports field (may require package reinstall)
+import '@rhavenside/custom-ui-library/style.css';
 ```
 
-### Beispiel
+**Note:** If the CSS import doesn't resolve:
+1. Make sure you've installed the latest version: `npm install @rhavenside/custom-ui-library@latest`
+2. Try using the direct path: `import '@rhavenside/custom-ui-library/dist/style.css'`
+3. If using Vite, you may need to restart the dev server after installing the package
+
+### Example
 
 ```jsx
 import React from 'react';
 import { Button, Input, Modal } from '@rhavenside/custom-ui-library';
-import '@rhavenside/custom-ui-library/dist/style.css';
+import '@rhavenside/custom-ui-library/style.css';
 
 function App() {
   return (
     <div>
-      <Button variant="primary">Klick mich</Button>
-      <Input label="Name" placeholder="Dein Name" />
+      <Button variant="primary">Click me</Button>
+      <Input label="Name" placeholder="Your name" />
       <Modal isOpen={true} onClose={() => {}}>
-        <h2>Modal Titel</h2>
-        <p>Modal Inhalt</p>
+        <h2>Modal Title</h2>
+        <p>Modal Content</p>
       </Modal>
     </div>
   );
 }
 ```
 
-## Komponenten
+## Components
+
+- **Button** - Customizable buttons with various variants
+- **Input** - Text input fields with labels and error states
+- **Modal** - Modals with various sizes and positions
+- **Card** - Card components for content display
+- **Badge** - Badges with various variants
+- **Dropdown** - Dropdown menus with options
+- **Toggle** - Toggle/Switch components
+- **Textarea** - Multi-line text input fields
+- **Select** - Select dropdowns with custom dropdown
+- **Checkbox** - Checkbox components
+- **Radio** - Radio button components
+- **Progress** - Horizontal progress bars
+- **ProgressRadio** - Progress bars with radio button control
+- **ProgressCircle** - Circular progress bars (HSL-based)
+- **ProgressBubble** - Progress bars with water effect
+
+## Component API (Props)
+
+### Button
+
+```jsx
+<Button
+  variant="primary"        // 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'outline' | 'ghost' | 'link'
+  size="medium"            // 'small' | 'medium' | 'large'
+  disabled={false}         // boolean
+  loading={false}          // boolean - shows spinner
+  icon={null}              // ReactNode - Icon-Element
+  iconPosition="left"      // 'left' | 'right'
+  fullWidth={false}        // boolean
+  type="button"            // 'button' | 'submit' | 'reset'
+  onClick={handler}        // function
+  className=""             // string
+  style={{}}               // object - inline styles
+>
+  Button Text
+</Button>
+```
+
+### Input
+
+```jsx
+<Input
+  type="text"              // string - HTML input type
+  variant="default"        // 'default' | 'filled' | 'outlined'
+  label="Label"            // string
+  placeholder="Placeholder" // string
+  value={value}            // string (controlled)
+  defaultValue=""          // string (uncontrolled)
+  error="Error message"    // string
+  helperText="Helper text" // string
+  icon={null}              // ReactNode
+  iconPosition="left"      // 'left' | 'right'
+  disabled={false}         // boolean
+  required={false}         // boolean
+  fullWidth={false}        // boolean
+  floatingLabel={false}    // boolean
+  onChange={handler}        // function
+  onFocus={handler}        // function
+  onBlur={handler}         // function
+  className=""             // string
+  style={{}}               // object
+  wrapperStyle={{}}        // object
+  inputStyle={{}}          // object
+/>
+```
+
+### Modal
+
+```jsx
+<Modal
+  isOpen={false}           // boolean
+  onClose={handler}        // function
+  title="Modal Title"      // string
+  size="medium"            // 'small' | 'medium' | 'large' | 'xlarge'
+  variant="center"         // 'center' | 'top' | 'bottom' | 'left' | 'right'
+  closeOnOverlayClick={true} // boolean
+  showCloseButton={true}   // boolean
+  footer={null}            // ReactNode
+  className=""             // string
+  style={{}}               // object
+  overlayStyle={{}}        // object
+>
+  Modal Content
+</Modal>
+```
+
+### Card
+
+```jsx
+<Card
+  variant="default"        // 'default' | 'outlined' | 'elevated'
+  hover={false}            // boolean - hover effect
+  padding="medium"         // 'none' | 'small' | 'medium' | 'large'
+  title="Card Title"       // string
+  subtitle="Subtitle"      // string
+  image="url"              // string
+  imageAlt="Alt text"      // string
+  actions={null}           // ReactNode - Footer-Actions
+  onClick={handler}        // function
+  className=""             // string
+  style={{}}               // object
+>
+  Card Content
+</Card>
+```
+
+### Badge
+
+```jsx
+<Badge
+  text="Badge"             // string - or use children
+  variant="default"        // 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'
+  size="medium"            // 'small' | 'medium' | 'large'
+  className=""             // string
+  style={{}}               // object
+>
+  Badge Text
+</Badge>
+```
+
+### Dropdown
+
+```jsx
+<Dropdown
+  options={[]}             // Array<{value: any, label: string, disabled?: boolean}>
+  value={value}            // any (controlled)
+  defaultValue={null}      // any (uncontrolled)
+  onChange={handler}       // function
+  placeholder="Select..."  // string
+  disabled={false}         // boolean
+  searchable={false}       // boolean
+  multiSelect={false}      // boolean
+  error={false}            // boolean
+  className=""             // string
+  style={{}}               // object
+  triggerStyle={{}}        // object
+  menuStyle={{}}           // object
+/>
+```
+
+### Select
+
+```jsx
+<Select
+  options={[]}             // Array<{value: any, label: string, disabled?: boolean}>
+  value={value}            // any (controlled)
+  defaultValue={null}      // any (uncontrolled)
+  onChange={handler}       // function - receives synthetic event
+  placeholder="Select..."  // string
+  label="Label"            // string
+  error="Error message"    // string
+  helperText="Helper text" // string
+  disabled={false}         // boolean
+  required={false}         // boolean
+  fullWidth={false}        // boolean
+  searchable={false}       // boolean
+  name="select"           // string
+  className=""             // string
+  style={{}}               // object
+/>
+```
+
+### Toggle
+
+```jsx
+<Toggle
+  checked={false}          // boolean
+  onChange={handler}       // function(checked: boolean)
+  disabled={false}         // boolean
+  size="medium"            // 'small' | 'medium' | 'large'
+  variant="default"        // 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'
+  label="Toggle Label"     // string
+  labelPosition="right"    // 'left' | 'right'
+  className=""             // string
+  style={{}}               // object
+  switchStyle={{}}         // object
+/>
+```
+
+### Textarea
+
+```jsx
+<Textarea
+  variant="default"        // 'default' | 'filled' | 'outlined'
+  label="Label"            // string
+  placeholder="Placeholder" // string
+  value={value}            // string (controlled)
+  defaultValue=""          // string (uncontrolled)
+  error="Error message"    // string
+  helperText="Helper text" // string
+  disabled={false}         // boolean
+  required={false}         // boolean
+  fullWidth={false}        // boolean
+  rows={4}                 // number
+  resize="vertical"        // 'none' | 'both' | 'horizontal' | 'vertical'
+  onChange={handler}       // function
+  onFocus={handler}        // function
+  onBlur={handler}         // function
+  className=""             // string
+  style={{}}               // object
+  wrapperStyle={{}}        // object
+  textareaStyle={{}}       // object
+/>
+```
+
+### Checkbox
+
+```jsx
+<Checkbox
+  checked={false}          // boolean
+  onChange={handler}       // function(checked: boolean)
+  disabled={false}         // boolean
+  label="Checkbox Label"   // string
+  labelPosition="right"    // 'left' | 'right'
+  size="medium"            // 'small' | 'medium' | 'large'
+  variant="default"       // 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'
+  indeterminate={false}   // boolean
+  className=""             // string
+  style={{}}               // object
+  boxStyle={{}}            // object
+/>
+```
+
+### Radio
+
+```jsx
+<Radio
+  checked={false}          // boolean
+  onChange={handler}       // function(value: any)
+  disabled={false}         // boolean
+  label="Radio Label"      // string
+  labelPosition="right"    // 'left' | 'right'
+  size="medium"            // 'small' | 'medium' | 'large'
+  variant="default"        // 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'
+  name="radio-group"       // string - for radio groups
+  value="radio-value"      // any
+  className=""             // string
+  style={{}}               // object
+  circleStyle={{}}         // object
+/>
+```
+
+### Progress
+
+```jsx
+<Progress
+  value={50}               // number - current value
+  max={100}                // number - maximum value
+  variant="default"        // 'default' | 'success' | 'danger' | 'warning' | 'info'
+  size="medium"            // 'small' | 'medium' | 'large'
+  showLabel={false}        // boolean - shows percentage
+  label="50%"              // string - custom label
+  animated={false}         // boolean - enable animation
+  striped={false}          // boolean - striped pattern
+  pulse={false}           // boolean - pulse animation
+  shimmer={false}          // boolean - shimmer animation
+  animationSpeed="normal"  // 'slow' | 'normal' | 'fast' | number (seconds)
+  vertical={false}         // boolean - vertical orientation
+  className=""             // string
+  style={{}}               // object
+  barStyle={{}}            // object
+/>
+```
+
+### ProgressRadio
+
+```jsx
+<ProgressRadio
+  options={[               // Array<{value: number, label: string, color: string}>
+    { value: 5, label: '5%', color: '#f63a0f' },
+    { value: 25, label: '25%', color: '#f27011' },
+    { value: 50, label: '50%', color: '#f2b01e' },
+    { value: 75, label: '75%', color: '#f2d31b' },
+    { value: 100, label: '100%', color: '#86e01e' }
+  ]}
+  defaultValue={25}       // number
+  name="progress"          // string
+  className=""             // string
+  style={{}}               // object
+  barStyle={{}}            // object
+/>
+```
+
+### ProgressCircle
 
-- **Button** - Anpassbare Buttons mit verschiedenen Varianten
-- **Input** - Text-Eingabefelder mit Label und Error-States
-- **Modal** - Modals mit verschiedenen Größen und Positionen
-- **Card** - Karten-Komponenten für Content-Darstellung
-- **Badge** - Badges mit verschiedenen Varianten
-- **Dropdown** - Dropdown-Menüs mit Optionen
-- **Toggle** - Toggle/Switch-Komponenten
-- **Textarea** - Mehrzeilige Text-Eingabefelder
-- **Select** - Select-Dropdowns mit Custom Dropdown
-- **Checkbox** - Checkbox-Komponenten
-- **Radio** - Radio-Button-Komponenten
-- **Progress** - Horizontale Progress Bars
-- **ProgressRadio** - Progress Bars mit Radio-Button-Steuerung
-- **ProgressCircle** - Kreisförmige Progress Bars (HSL-basiert)
-- **ProgressBubble** - Progress Bars mit Wasser-Effekt
+```jsx
+<ProgressCircle
+  value={50}               // number - current value
+  max={100}                // number - maximum value
+  size="medium"            // 'small' | 'medium' | 'large'
+  showLabel={false}        // boolean - shows percentage
+  label="50%"              // string - custom label
+  textFormat={(value) => `${value}%`} // function - custom text formatting
+  animationDuration={400}  // number - animation duration in ms
+  className=""             // string
+  style={{}}               // object
+/>
+```
 
-## CSS-Variablen Überschreibung
+### ProgressBubble
 
-Alle Komponenten verwenden CSS Custom Properties, die überschrieben werden können.
+```jsx
+<ProgressBubble
+  value={50}               // number - current value
+  max={100}                // number - maximum value
+  size="medium"            // 'small' | 'medium' | 'large'
+  showLabel={false}        // boolean - shows percentage
+  label="50%"              // string - custom label
+  animationSpeed="normal"  // 'slow' | 'normal' | 'fast' | number (seconds)
+  animateCounter={false}   // boolean - animates counter with jQuery
+  counterDuration={5000}   // number - counter animation duration in ms
+  className=""             // string
+  style={{}}               // object
+/>
+```
+
+**Note:** All components additionally support:
+- `className` - for additional CSS classes
+- `style` - for inline styles
+- Additional HTML attributes are passed through via `{...props}`
+
+### Practical Examples
 
-### Globale Überschreibung
+#### Button with Icon and Loading State
+
+```jsx
+import { Button } from '@rhavenside/custom-ui-library';
+
+<Button
+  variant="primary"
+  size="large"
+  icon={<Icon />}
+  iconPosition="left"
+  loading={isLoading}
+  onClick={handleSubmit}
+>
+  Save
+</Button>
+```
+
+#### Input with Floating Label and Validation
+
+```jsx
+import { Input } from '@rhavenside/custom-ui-library';
+
+<Input
+  type="email"
+  label="Email"
+  floatingLabel={true}
+  required={true}
+  error={errors.email}
+  helperText="Please enter a valid email address"
+  icon={<MailIcon />}
+  iconPosition="left"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+/>
+```
+
+#### Modal with Footer Actions
+
+```jsx
+import { Modal, Button } from '@rhavenside/custom-ui-library';
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Confirmation"
+  size="medium"
+  footer={
+    <>
+      <Button variant="outline" onClick={() => setIsOpen(false)}>
+        Cancel
+      </Button>
+      <Button variant="primary" onClick={handleConfirm}>
+        Confirm
+      </Button>
+    </>
+  }
+>
+  Are you sure you want to continue?
+</Modal>
+```
+
+#### Progress with Animations
+
+```jsx
+import { Progress } from '@rhavenside/custom-ui-library';
+
+<Progress
+  value={75}
+  variant="success"
+  animated={true}
+  striped={true}
+  pulse={true}
+  showLabel={true}
+  animationSpeed="fast"
+/>
+```
+
+#### Dropdown with Search and Multi-Select
+
+```jsx
+import { Dropdown } from '@rhavenside/custom-ui-library';
+
+<Dropdown
+  options={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]}
+  searchable={true}
+  multiSelect={true}
+  placeholder="Select multiple..."
+  onChange={(values) => console.log(values)}
+/>
+```
+
+## CSS Variables Override
+
+All components use CSS Custom Properties that can be overridden.
+
+### Global Override
 
 ```css
-/* In deinem Projekt */
+/* In your project */
 :root {
   --btn-bg: #ff6b6b;
   --btn-color: #ffffff;
@@ -82,10 +493,10 @@ Alle Komponenten verwenden CSS Custom Properties, die überschrieben werden kön
 }
 ```
 
-### Kontextuelle Überschreibung
+### Contextual Override
 
 ```css
-/* Nur für bestimmte Bereiche */
+/* Only for specific areas */
 .dark-theme {
   --btn-bg: #1e40af;
   --btn-color: #f3f4f6;
@@ -94,128 +505,128 @@ Alle Komponenten verwenden CSS Custom Properties, die überschrieben werden kön
 }
 ```
 
-## Verfügbare CSS-Variablen
+## Available CSS Variables
 
 ### Button
-- `--btn-bg` - Hintergrundfarbe
-- `--btn-bg-hover` - Hover-Hintergrundfarbe
-- `--btn-bg-active` - Active-Hintergrundfarbe
-- `--btn-color` - Textfarbe
-- `--btn-radius` - Border-Radius
-- `--btn-padding-x` - Horizontal Padding
-- `--btn-padding-y` - Vertikales Padding
-- `--btn-font-size` - Schriftgröße
-- `--btn-font-weight` - Schriftgewicht
-- `--btn-shadow` - Box-Shadow
-- `--btn-shadow-hover` - Hover Box-Shadow
-- `--btn-transition` - Transition
+- `--btn-bg` - background color
+- `--btn-bg-hover` - hover background color
+- `--btn-bg-active` - active background color
+- `--btn-color` - text color
+- `--btn-radius` - border radius
+- `--btn-padding-x` - horizontal padding
+- `--btn-padding-y` - vertical padding
+- `--btn-font-size` - font size
+- `--btn-font-weight` - font weight
+- `--btn-shadow` - box shadow
+- `--btn-shadow-hover` - hover box shadow
+- `--btn-transition` - transition
 
 ### Input
-- `--input-bg` - Hintergrundfarbe
-- `--input-border` - Border
-- `--input-border-focus` - Focus Border
-- `--input-color` - Textfarbe
-- `--input-placeholder-color` - Placeholder-Farbe
-- `--input-radius` - Border-Radius
-- `--input-padding-x` - Horizontal Padding
-- `--input-padding-y` - Vertikales Padding
-- `--input-font-size` - Schriftgröße
-- `--input-shadow-focus` - Focus Box-Shadow
+- `--input-bg` - background color
+- `--input-border` - border
+- `--input-border-focus` - focus border
+- `--input-color` - text color
+- `--input-placeholder-color` - placeholder color
+- `--input-radius` - border radius
+- `--input-padding-x` - horizontal padding
+- `--input-padding-y` - vertical padding
+- `--input-font-size` - font size
+- `--input-shadow-focus` - focus box shadow
 
 ### Modal
-- `--modal-bg` - Hintergrundfarbe
-- `--modal-overlay-bg` - Overlay-Hintergrundfarbe
-- `--modal-radius` - Border-Radius
-- `--modal-shadow` - Box-Shadow
-- `--modal-padding` - Padding
-- `--modal-max-width-small` - Max-Breite (small)
-- `--modal-max-width-medium` - Max-Breite (medium)
-- `--modal-max-width-large` - Max-Breite (large)
-- `--modal-max-width-xlarge` - Max-Breite (xlarge)
+- `--modal-bg` - background color
+- `--modal-overlay-bg` - overlay background color
+- `--modal-radius` - border radius
+- `--modal-shadow` - box shadow
+- `--modal-padding` - padding
+- `--modal-max-width-small` - max width (small)
+- `--modal-max-width-medium` - max width (medium)
+- `--modal-max-width-large` - max width (large)
+- `--modal-max-width-xlarge` - max width (xlarge)
 
 ### Progress
-- `--progress-bg` - Hintergrundfarbe
-- `--progress-color` - Progress-Farbe
-- `--progress-height` - Höhe
-- `--progress-radius` - Border-Radius
-- `--progress-shadow` - Box-Shadow
-- `--progress-success-color` - Success-Variante Farbe
-- `--progress-danger-color` - Danger-Variante Farbe
-- `--progress-warning-color` - Warning-Variante Farbe
-- `--progress-info-color` - Info-Variante Farbe
+- `--progress-bg` - background color
+- `--progress-color` - progress color
+- `--progress-height` - height
+- `--progress-radius` - border radius
+- `--progress-shadow` - box shadow
+- `--progress-success-color` - success variant color
+- `--progress-danger-color` - danger variant color
+- `--progress-warning-color` - warning variant color
+- `--progress-info-color` - info variant color
 
 ### Card
-- `--card-bg` - Hintergrundfarbe
-- `--card-border` - Border
-- `--card-radius` - Border-Radius
-- `--card-shadow` - Box-Shadow
-- `--card-shadow-hover` - Hover Box-Shadow
-- `--card-padding` - Padding
+- `--card-bg` - background color
+- `--card-border` - border
+- `--card-radius` - border radius
+- `--card-shadow` - box shadow
+- `--card-shadow-hover` - hover box shadow
+- `--card-padding` - padding
 
 ### Badge
-- `--badge-bg` - Hintergrundfarbe
-- `--badge-color` - Textfarbe
-- `--badge-radius` - Border-Radius
-- `--badge-font-size` - Schriftgröße
-- `--badge-padding-x` - Horizontal Padding
-- `--badge-padding-y` - Vertikales Padding
-- `--badge-primary-bg` - Primary-Variante Hintergrund
-- `--badge-primary-color` - Primary-Variante Textfarbe
-- (Ähnlich für success, danger, warning, info)
+- `--badge-bg` - background color
+- `--badge-color` - text color
+- `--badge-radius` - border radius
+- `--badge-font-size` - font size
+- `--badge-padding-x` - horizontal padding
+- `--badge-padding-y` - vertical padding
+- `--badge-primary-bg` - primary variant background
+- `--badge-primary-color` - primary variant text color
+- (Similar for success, danger, warning, info)
 
 ### Dropdown
-- `--dropdown-bg` - Hintergrundfarbe
-- `--dropdown-border` - Border
-- `--dropdown-radius` - Border-Radius
-- `--dropdown-shadow` - Box-Shadow
-- `--dropdown-item-hover-bg` - Item Hover-Hintergrund
-- `--dropdown-item-padding` - Item Padding
+- `--dropdown-bg` - background color
+- `--dropdown-border` - border
+- `--dropdown-radius` - border radius
+- `--dropdown-shadow` - box shadow
+- `--dropdown-item-hover-bg` - item hover background
+- `--dropdown-item-padding` - item padding
 
 ### Toggle
-- `--toggle-bg` - Hintergrundfarbe
-- `--toggle-bg-checked` - Checked Hintergrundfarbe
-- `--toggle-thumb-bg` - Thumb Hintergrundfarbe
-- `--toggle-radius` - Border-Radius
-- `--toggle-shadow` - Box-Shadow
+- `--toggle-bg` - background color
+- `--toggle-bg-checked` - checked background color
+- `--toggle-thumb-bg` - thumb background color
+- `--toggle-radius` - border radius
+- `--toggle-shadow` - box shadow
 
 ### Textarea
-- `--textarea-bg` - Hintergrundfarbe
-- `--textarea-border` - Border
-- `--textarea-border-focus` - Focus Border
-- `--textarea-color` - Textfarbe
-- `--textarea-radius` - Border-Radius
-- `--textarea-padding` - Padding
+- `--textarea-bg` - background color
+- `--textarea-border` - border
+- `--textarea-border-focus` - focus border
+- `--textarea-color` - text color
+- `--textarea-radius` - border radius
+- `--textarea-padding` - padding
 
 ### Checkbox/Radio
-- `--checkbox-bg` - Hintergrundfarbe
-- `--checkbox-border` - Border
-- `--checkbox-border-checked` - Checked Border
-- `--checkbox-check-bg` - Check-Mark Hintergrundfarbe
-- `--checkbox-check-color` - Check-Mark Farbe
-- `--checkbox-radius` - Border-Radius
+- `--checkbox-bg` - background color
+- `--checkbox-border` - border
+- `--checkbox-border-checked` - checked border
+- `--checkbox-check-bg` - check mark background color
+- `--checkbox-check-color` - check mark color
+- `--checkbox-radius` - border radius
 
 ### Select
-- `--select-bg` - Hintergrundfarbe
-- `--select-border` - Border
-- `--select-border-focus` - Focus Border
-- `--select-color` - Textfarbe
-- `--select-radius` - Border-Radius
+- `--select-bg` - background color
+- `--select-border` - border
+- `--select-border-focus` - focus border
+- `--select-color` - text color
+- `--select-radius` - border radius
 
 ### ProgressCircle
-- `--circle-progress-bg` - Hintergrund-Kreis Farbe
-- `--circle-progress-color` - Progress-Farbe (HSL-basiert)
-- `--circle-progress-stroke-width` - Hintergrund-Kreis Stroke-Breite
-- `--circle-progress-value-stroke-width` - Progress-Pfad Stroke-Breite
+- `--circle-progress-bg` - background circle color
+- `--circle-progress-color` - progress color (HSL-based)
+- `--circle-progress-stroke-width` - background circle stroke width
+- `--circle-progress-value-stroke-width` - progress path stroke width
 
 ### ProgressBubble
-- `--bubble-progress-bg` - Hintergrundfarbe
-- `--bubble-progress-border-color` - Border-Farbe
-- `--bubble-progress-water-alpha` - Wasser-Transparenz
-- `--bubble-progress-glare-bg` - Glare-Hintergrundfarbe
+- `--bubble-progress-bg` - background color
+- `--bubble-progress-border-color` - border color
+- `--bubble-progress-water-alpha` - water transparency
+- `--bubble-progress-glare-bg` - glare background color
 
-## Theme-Überschreibung
+## Theme Override
 
-### Globales Theme
+### Global Theme
 
 ```css
 /* theme.css */
@@ -227,11 +638,11 @@ Alle Komponenten verwenden CSS Custom Properties, die überschrieben werden kön
 ```
 
 ```javascript
-import '@rhavenside/custom-ui-library/dist/style.css';
-import './theme.css'; // Nach custom-ui-library importieren
+import '@rhavenside/custom-ui-library/style.css';
+import './theme.css'; // Import after custom-ui-library
 ```
 
-### Kontextuelles Theme
+### Contextual Theme
 
 ```css
 /* dark-theme.css */
@@ -250,19 +661,7 @@ import './theme.css'; // Nach custom-ui-library importieren
 </div>
 ```
 
-## Entwicklung
-
-```bash
-# Lokale Entwicklung
-npm run dev
-
-# Library bauen
-npm run build
-
-# Watch-Mode
-npm run build:watch
-```
 
-## Lizenz
+## License
 
 MIT

package/package.json

@@ -1,11 +1,21 @@
 {
   "name": "@rhavenside/custom-ui-library",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "A customizable React UI component library with CSS variables",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist",
     "README.md"