@zomako/elearning-components 1.0.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/FlashcardDeck/README.md +5 -5
  2. package/dist/elearning-components.css +1 -0
  3. package/dist/elearning-components.es.js +5576 -503
  4. package/dist/elearning-components.umd.js +16 -24
  5. package/package.json +4 -3
  6. package/rollup.config.js +1 -1
  7. package/src/App.jsx +29 -0
  8. package/src/components/Accordion/README.md +4 -4
  9. package/src/components/Accordion/index.tsx +1 -1
  10. package/src/components/FlashcardDeck/FlashcardDeck.tsx +1 -1
  11. package/src/index.css +8 -0
  12. package/src/index.ts +3 -3
  13. package/src/main.jsx +10 -0
  14. package/vite.config.js +2 -2
  15. package/dist/style.css +0 -1
package/FlashcardDeck/README.md CHANGED
@@ -11,11 +11,11 @@ The `FlashcardDeck` component provides an engaging way to display educational co
11
11
  - Navigate through the deck using Previous and Next buttons
12
12
  - Track their progress with a card counter
13
13
 
14
- The component is built with React and uses Framer Motion for smooth, performant animations. It's fully self-contained, responsive, and accessible.
14
+ The component is built with React and uses Motion for smooth, performant animations. It's fully self-contained, responsive, and accessible.
15
15
 
16
16
  ## Features
17
17
 
18
- - **3D Flip Animation**: Smooth, spring-based 3D rotation animation powered by Framer Motion
18
+ - **3D Flip Animation**: Smooth, spring-based 3D rotation animation powered by Motion
19
19
  - **Card Navigation**: Previous and Next buttons to move through the deck
20
20
  - **Progress Tracking**: Displays current card position (e.g., "Card 1 of 10")
21
21
  - **Responsive Design**: Optimized for both desktop and mobile devices
@@ -34,19 +34,19 @@ The component is built with React and uses Framer Motion for smooth, performant
34
34
  ### Install Dependencies
35
35
 
36
36
  ```bash
37
- npm install react react-dom framer-motion
37
+ npm install react react-dom motion
38
38
  ```
39
39
 
40
40
  Or with yarn:
41
41
 
42
42
  ```bash
43
- yarn add react react-dom framer-motion
43
+ yarn add react react-dom motion
44
44
  ```
45
45
 
46
46
  Or with pnpm:
47
47
 
48
48
  ```bash
49
- pnpm add react react-dom framer-motion
49
+ pnpm add react react-dom motion
50
50
  ```
51
51
 
52
52
  ## Props
package/dist/elearning-components.css ADDED
@@ -0,0 +1 @@
1
+ .flashcard-deck-container{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;max-width:600px;margin:0 auto}.flashcard-deck-header{width:100%;text-align:center}.flashcard-counter{font-size:1rem;color:#666;font-weight:500}.flashcard-wrapper{perspective:1000px;width:100%;min-height:300px}.flashcard{position:relative;width:100%;height:300px;cursor:pointer;transform-style:preserve-3d}.flashcard-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:12px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;display:flex;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box}.flashcard-front{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:rotateY(0)}.flashcard-back{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;transform:rotateY(180deg)}.flashcard-content{font-size:1.25rem;text-align:center;word-wrap:break-word;overflow-wrap:break-word;line-height:1.6;font-weight:500}.flashcard-controls{display:flex;gap:1rem;width:100%;justify-content:center}.flashcard-button{padding:.75rem 2rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;background-color:#667eea;color:#fff;min-width:120px}.flashcard-button:hover:not(:disabled){background-color:#5568d3;transform:translateY(-2px);box-shadow:0 4px 8px #667eea4d}.flashcard-button:active:not(:disabled){transform:translateY(0)}.flashcard-button:disabled{background-color:#e0e0e0;color:#9e9e9e;cursor:not-allowed;opacity:.6}.flashcard-empty-message{text-align:center;color:#666;font-size:1.1rem;padding:2rem}@media(max-width:768px){.flashcard-deck-container{padding:1rem}.flashcard{height:250px}.flashcard-content{font-size:1.1rem}.flashcard-button{padding:.625rem 1.5rem;font-size:.9rem;min-width:100px}}._accordion_1gkiv_1{width:100%;max-width:640px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1a1a1a}._empty_1gkiv_17{padding:1rem 0;margin:0;color:#64748b;font-size:.9375rem}._item_1gkiv_31{border:1px solid #e2e8f0;border-bottom:none}._item_1gkiv_31:last-of-type{border-bottom:1px solid #e2e8f0}._item_1gkiv_31:first-of-type{border-radius:8px 8px 0 0}._item_1gkiv_31:last-of-type{border-radius:0 0 8px 8px}._item_1gkiv_31:only-of-type{border-radius:8px}._heading_1gkiv_73{margin:0;font-size:1rem;font-weight:600}._trigger_1gkiv_85{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.25rem;background:#f8fafc;border:none;cursor:pointer;text-align:left;font-size:inherit;font-weight:inherit;color:inherit;transition:background-color .2s ease}._trigger_1gkiv_85:hover{background:#f1f5f9}._trigger_1gkiv_85:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}._item_1gkiv_31[data-open=true] ._trigger_1gkiv_85{background:#fff;border-bottom:1px solid #e2e8f0}._title_1gkiv_145{flex:1;padding-right:.75rem}._icon_1gkiv_155{flex-shrink:0;font-size:.65rem;color:#64748b;transition:color .2s ease}._trigger_1gkiv_85:hover ._icon_1gkiv_155,._item_1gkiv_31[data-open=true] ._icon_1gkiv_155{color:#3b82f6}._panelWrapper_1gkiv_179,._panel_1gkiv_179{overflow:hidden}._content_1gkiv_195{padding:1rem 1.25rem 1.25rem;background:#fff;font-size:.9375rem;line-height:1.6;color:#334155}._content_1gkiv_195 :first-child{margin-top:0}._content_1gkiv_195 :last-child{margin-bottom:0}