@zomako/elearning-components 1.0.0

package/dist/elearning-components.umd.js

@@ -0,0 +1,30 @@
+(function(R,T){typeof exports=="object"&&typeof module<"u"?T(exports,require("react"),require("framer-motion")):typeof define=="function"&&define.amd?define(["exports","react","framer-motion"],T):(R=typeof globalThis<"u"?globalThis:R||self,T(R.ElearningComponents={},R.React,R.FramerMotion))})(this,function(R,T,Se){"use strict";var J={exports:{}},I={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ee;function Pe(){if(ee)return I;ee=1;var y=T,m=Symbol.for("react.element"),F=Symbol.for("react.fragment"),E=Object.prototype.hasOwnProperty,x=y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,S={key:!0,ref:!0,__self:!0,__source:!0};function j(g,c,C){var f,_={},P=null,L=null;C!==void 0&&(P=""+C),c.key!==void 0&&(P=""+c.key),c.ref!==void 0&&(L=c.ref);for(f in c)E.call(c,f)&&!S.hasOwnProperty(f)&&(_[f]=c[f]);if(g&&g.defaultProps)for(f in c=g.defaultProps,c)_[f]===void 0&&(_[f]=c[f]);return{$$typeof:m,type:g,key:P,ref:L,props:_,_owner:x.current}}return I.Fragment=F,I.jsx=j,I.jsxs=j,I}var Y={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var re;function we(){return re||(re=1,process.env.NODE_ENV!=="production"&&function(){var y=T,m=Symbol.for("react.element"),F=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),S=Symbol.for("react.profiler"),j=Symbol.for("react.provider"),g=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),C=Symbol.for("react.suspense"),f=Symbol.for("react.suspense_list"),_=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),L=Symbol.for("react.offscreen"),te=Symbol.iterator,Fe="@@iterator";function De(e){if(e===null||typeof e!="object")return null;var r=te&&e[te]||e[Fe];return typeof r=="function"?r:null}var D=y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function d(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];Ae("error",e,t)}}function Ae(e,r,t){{var n=D.ReactDebugCurrentFrame,o=n.getStackAddendum();o!==""&&(r+="%s",t=t.concat([o]));var s=t.map(function(i){return String(i)});s.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,s)}}var Ne=!1,Ie=!1,Ye=!1,We=!1,Me=!1,ne;ne=Symbol.for("react.module.reference");function Le(e){return!!(typeof e=="string"||typeof e=="function"||e===E||e===S||Me||e===x||e===C||e===f||We||e===L||Ne||Ie||Ye||typeof e=="object"&&e!==null&&(e.$$typeof===P||e.$$typeof===_||e.$$typeof===j||e.$$typeof===g||e.$$typeof===c||e.$$typeof===ne||e.getModuleId!==void 0))}function Ve(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return o!==""?t+"("+o+")":t}function ae(e){return e.displayName||"Context"}function O(e){if(e==null)return null;if(typeof e.tag=="number"&&d("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case F:return"Portal";case S:return"Profiler";case x:return"StrictMode";case C:return"Suspense";case f:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case g:var r=e;return ae(r)+".Consumer";case j:var t=e;return ae(t._context)+".Provider";case c:return Ve(e,e.render,"ForwardRef");case _:var n=e.displayName||null;return n!==null?n:O(e.type)||"Memo";case P:{var o=e,s=o._payload,i=o._init;try{return O(i(s))}catch{return null}}}return null}var w=Object.assign,W=0,ie,oe,se,ue,le,ce,fe;function de(){}de.__reactDisabledLog=!0;function $e(){{if(W===0){ie=console.log,oe=console.info,se=console.warn,ue=console.error,le=console.group,ce=console.groupCollapsed,fe=console.groupEnd;var e={configurable:!0,enumerable:!0,value:de,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}W++}}function Ue(){{if(W--,W===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:w({},e,{value:ie}),info:w({},e,{value:oe}),warn:w({},e,{value:se}),error:w({},e,{value:ue}),group:w({},e,{value:le}),groupCollapsed:w({},e,{value:ce}),groupEnd:w({},e,{value:fe})})}W<0&&d("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var G=D.ReactCurrentDispatcher,K;function V(e,r,t){{if(K===void 0)try{throw Error()}catch(o){var n=o.stack.trim().match(/\n( *(at )?)/);K=n&&n[1]||""}return`
+`+K+e}}var q=!1,$;{var Be=typeof WeakMap=="function"?WeakMap:Map;$=new Be}function ve(e,r){if(!e||q)return"";{var t=$.get(e);if(t!==void 0)return t}var n;q=!0;var o=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var s;s=G.current,G.current=null,$e();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(i,[])}catch(h){n=h}Reflect.construct(e,[],i)}else{try{i.call()}catch(h){n=h}e.call(i.prototype)}}else{try{throw Error()}catch(h){n=h}e()}}catch(h){if(h&&n&&typeof h.stack=="string"){for(var a=h.stack.split(`
+`),v=n.stack.split(`
+`),u=a.length-1,l=v.length-1;u>=1&&l>=0&&a[u]!==v[l];)l--;for(;u>=1&&l>=0;u--,l--)if(a[u]!==v[l]){if(u!==1||l!==1)do if(u--,l--,l<0||a[u]!==v[l]){var b=`
+`+a[u].replace(" at new "," at ");return e.displayName&&b.includes("<anonymous>")&&(b=b.replace("<anonymous>",e.displayName)),typeof e=="function"&&$.set(e,b),b}while(u>=1&&l>=0);break}}}finally{q=!1,G.current=s,Ue(),Error.prepareStackTrace=o}var N=e?e.displayName||e.name:"",k=N?V(N):"";return typeof e=="function"&&$.set(e,k),k}function Je(e,r,t){return ve(e,!1)}function Ge(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function U(e,r,t){if(e==null)return"";if(typeof e=="function")return ve(e,Ge(e));if(typeof e=="string")return V(e);switch(e){case C:return V("Suspense");case f:return V("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case c:return Je(e.render);case _:return U(e.type,r,t);case P:{var n=e,o=n._payload,s=n._init;try{return U(s(o),r,t)}catch{}}}return""}var M=Object.prototype.hasOwnProperty,pe={},he=D.ReactDebugCurrentFrame;function B(e){if(e){var r=e._owner,t=U(e.type,e._source,r?r.type:null);he.setExtraStackFrame(t)}else he.setExtraStackFrame(null)}function Ke(e,r,t,n,o){{var s=Function.call.bind(M);for(var i in e)if(s(e,i)){var a=void 0;try{if(typeof e[i]!="function"){var v=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw v.name="Invariant Violation",v}a=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(u){a=u}a&&!(a instanceof Error)&&(B(o),d("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof a),B(null)),a instanceof Error&&!(a.message in pe)&&(pe[a.message]=!0,B(o),d("Failed %s type: %s",t,a.message),B(null))}}}var qe=Array.isArray;function z(e){return qe(e)}function ze(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function Xe(e){try{return me(e),!1}catch{return!0}}function me(e){return""+e}function be(e){if(Xe(e))return d("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",ze(e)),me(e)}var ge=D.ReactCurrentOwner,He={key:!0,ref:!0,__self:!0,__source:!0},ye,Ee;function Ze(e){if(M.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function Qe(e){if(M.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function er(e,r){typeof e.ref=="string"&&ge.current}function rr(e,r){{var t=function(){ye||(ye=!0,d("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function tr(e,r){{var t=function(){Ee||(Ee=!0,d("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var nr=function(e,r,t,n,o,s,i){var a={$$typeof:m,type:e,key:r,ref:t,props:i,_owner:s};return a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(a,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(a,"_source",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a};function ar(e,r,t,n,o){{var s,i={},a=null,v=null;t!==void 0&&(be(t),a=""+t),Qe(r)&&(be(r.key),a=""+r.key),Ze(r)&&(v=r.ref,er(r,o));for(s in r)M.call(r,s)&&!He.hasOwnProperty(s)&&(i[s]=r[s]);if(e&&e.defaultProps){var u=e.defaultProps;for(s in u)i[s]===void 0&&(i[s]=u[s])}if(a||v){var l=typeof e=="function"?e.displayName||e.name||"Unknown":e;a&&rr(i,l),v&&tr(i,l)}return nr(e,a,v,o,n,ge.current,i)}}var X=D.ReactCurrentOwner,_e=D.ReactDebugCurrentFrame;function A(e){if(e){var r=e._owner,t=U(e.type,e._source,r?r.type:null);_e.setExtraStackFrame(t)}else _e.setExtraStackFrame(null)}var H;H=!1;function Z(e){return typeof e=="object"&&e!==null&&e.$$typeof===m}function Re(){{if(X.current){var e=O(X.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function ir(e){return""}var Te={};function or(e){{var r=Re();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
+
+Check the top-level render call using <`+t+">.")}return r}}function xe(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=or(r);if(Te[t])return;Te[t]=!0;var n="";e&&e._owner&&e._owner!==X.current&&(n=" It was passed a child from "+O(e._owner.type)+"."),A(e),d('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),A(null)}}function je(e,r){{if(typeof e!="object")return;if(z(e))for(var t=0;t<e.length;t++){var n=e[t];Z(n)&&xe(n,r)}else if(Z(e))e._store&&(e._store.validated=!0);else if(e){var o=De(e);if(typeof o=="function"&&o!==e.entries)for(var s=o.call(e),i;!(i=s.next()).done;)Z(i.value)&&xe(i.value,r)}}}function sr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===c||r.$$typeof===_))t=r.propTypes;else return;if(t){var n=O(r);Ke(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!H){H=!0;var o=O(r);d("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",o||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&d("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function ur(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){A(e),d("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),A(null);break}}e.ref!==null&&(A(e),d("Invalid attribute `ref` supplied to `React.Fragment`."),A(null))}}var Ce={};function Oe(e,r,t,n,o,s){{var i=Le(e);if(!i){var a="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var v=ir();v?a+=v:a+=Re();var u;e===null?u="null":z(e)?u="array":e!==void 0&&e.$$typeof===m?(u="<"+(O(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):u=typeof e,d("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",u,a)}var l=ar(e,r,t,o,s);if(l==null)return l;if(i){var b=r.children;if(b!==void 0)if(n)if(z(b)){for(var N=0;N<b.length;N++)je(b[N],e);Object.freeze&&Object.freeze(b)}else d("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else je(b,e)}if(M.call(r,"key")){var k=O(e),h=Object.keys(r).filter(function(pr){return pr!=="key"}),Q=h.length>0?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}";if(!Ce[k+Q]){var vr=h.length>0?"{"+h.join(": ..., ")+": ...}":"{}";d(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,Q,k,vr,k),Ce[k+Q]=!0}}return e===E?ur(l):sr(l),l}}function lr(e,r,t){return Oe(e,r,t,!0)}function cr(e,r,t){return Oe(e,r,t,!1)}var fr=cr,dr=lr;Y.Fragment=E,Y.jsx=fr,Y.jsxs=dr}()),Y}process.env.NODE_ENV==="production"?J.exports=Pe():J.exports=we();var p=J.exports;const ke=({cards:y=[]})=>{const[m,F]=T.useState(0),[E,x]=T.useState(!1);if(!y||y.length===0)return p.jsx("div",{className:"flashcard-deck-container",children:p.jsx("p",{className:"flashcard-empty-message",children:"No cards available"})});const S=y[m],j=m>0,g=m<y.length-1,c=()=>{j&&(F(m-1),x(!1))},C=()=>{g&&(F(m+1),x(!1))},f=()=>{x(!E)};return p.jsxs("div",{className:"flashcard-deck-container",children:[p.jsx("div",{className:"flashcard-deck-header",children:p.jsxs("span",{className:"flashcard-counter",children:["Card ",m+1," of ",y.length]})}),p.jsx("div",{className:"flashcard-wrapper",children:p.jsxs(Se.motion.div,{className:"flashcard",onClick:f,animate:{rotateY:E?180:0},transition:{duration:.6,type:"spring",stiffness:100},style:{transformStyle:"preserve-3d"},children:[p.jsx("div",{className:"flashcard-face flashcard-front",children:p.jsx("div",{className:"flashcard-content",children:S.front})}),p.jsx("div",{className:"flashcard-face flashcard-back",children:p.jsx("div",{className:"flashcard-content",children:S.back})})]},m)}),p.jsxs("div",{className:"flashcard-controls",children:[p.jsx("button",{className:"flashcard-button flashcard-button-previous",onClick:c,disabled:!j,"aria-label":"Previous card",children:"Previous"}),p.jsx("button",{className:"flashcard-button flashcard-button-next",onClick:C,disabled:!g,"aria-label":"Next card",children:"Next"})]})]})};R.FlashcardDeck=ke,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +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}}

package/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>E-learning Components</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@zomako/elearning-components",
+  "version": "1.0.0",
+  "description": "A library of interactive and SCORM-compliant eLearning components.",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^10.16.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "rollup": "^4.57.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^5.9.3",
+    "vite": "^5.0.8"
+  },
+  "keywords": [],
+  "author": "Kevwe Zoma",
+  "license": "ISC",
+  "type": "commonjs"
+}

package/rollup.config.js

@@ -0,0 +1,20 @@
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+ 
+export default {
+  input: 'src/index.ts',
+  output: {
+    dir: 'dist',
+    format: 'cjs',
+    sourcemap: true,
+  },
+  plugins: [
+    typescript(),
+    postcss({
+      modules: true,
+      extract: 'styles.css',
+    }),
+  ],
+  external: ['react', 'react-dom', 'framer-motion'],
+};
+

package/src/components/FlashcardDeck/FlashcardDeck.css

@@ -0,0 +1,134 @@
+.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 rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.flashcard-front {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  transform: rotateY(0deg);
+}
+
+.flashcard-back {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+  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: 0.75rem 2rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: #667eea;
+  color: white;
+  min-width: 120px;
+}
+
+.flashcard-button:hover:not(:disabled) {
+  background-color: #5568d3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+}
+
+.flashcard-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.flashcard-button:disabled {
+  background-color: #e0e0e0;
+  color: #9e9e9e;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.flashcard-empty-message {
+  text-align: center;
+  color: #666;
+  font-size: 1.1rem;
+  padding: 2rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .flashcard-deck-container {
+    padding: 1rem;
+  }
+
+  .flashcard {
+    height: 250px;
+  }
+
+  .flashcard-content {
+    font-size: 1.1rem;
+  }
+
+  .flashcard-button {
+    padding: 0.625rem 1.5rem;
+    font-size: 0.9rem;
+    min-width: 100px;
+  }
+}

package/src/components/FlashcardDeck/FlashcardDeck.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import './FlashcardDeck.css';
+
+export interface Flashcard {
+  front: string;
+  back: string;
+}
+
+interface FlashcardDeckProps {
+  cards?: Flashcard[];
+}
+
+const FlashcardDeck: React.FC<FlashcardDeckProps> = ({ cards = [] }) => {
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [isFlipped, setIsFlipped] = useState<boolean>(false);
+
+  if (!cards || cards.length === 0) {
+    return (
+      <div className="flashcard-deck-container">
+        <p className="flashcard-empty-message">No cards available</p>
+      </div>
+    );
+  }
+
+  const currentCard = cards[currentIndex];
+  const canGoPrevious = currentIndex > 0;
+  const canGoNext = currentIndex < cards.length - 1;
+
+  const handlePrevious = (): void => {
+    if (canGoPrevious) {
+      setCurrentIndex(currentIndex - 1);
+      setIsFlipped(false);
+    }
+  };
+
+  const handleNext = (): void => {
+    if (canGoNext) {
+      setCurrentIndex(currentIndex + 1);
+      setIsFlipped(false);
+    }
+  };
+
+  const handleCardClick = (): void => {
+    setIsFlipped(!isFlipped);
+  };
+
+  return (
+    <div className="flashcard-deck-container">
+      <div className="flashcard-deck-header">
+        <span className="flashcard-counter">
+          Card {currentIndex + 1} of {cards.length}
+        </span>
+      </div>
+
+      <div className="flashcard-wrapper">
+        <motion.div
+          key={currentIndex}
+          className="flashcard"
+          onClick={handleCardClick}
+          animate={{ rotateY: isFlipped ? 180 : 0 }}
+          transition={{ duration: 0.6, type: 'spring', stiffness: 100 }}
+          style={{ transformStyle: 'preserve-3d' }}
+        >
+          <div className="flashcard-face flashcard-front">
+            <div className="flashcard-content">{currentCard.front}</div>
+          </div>
+          <div className="flashcard-face flashcard-back">
+            <div className="flashcard-content">{currentCard.back}</div>
+          </div>
+        </motion.div>
+      </div>
+
+      <div className="flashcard-controls">
+        <button
+          className="flashcard-button flashcard-button-previous"
+          onClick={handlePrevious}
+          disabled={!canGoPrevious}
+          aria-label="Previous card"
+        >
+          Previous
+        </button>
+        <button
+          className="flashcard-button flashcard-button-next"
+          onClick={handleNext}
+          disabled={!canGoNext}
+          aria-label="Next card"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FlashcardDeck;

package/src/components/FlashcardDeck/index.ts

@@ -0,0 +1 @@
+export { default, type Flashcard } from './FlashcardDeck';

package/src/index.ts

@@ -0,0 +1,2 @@
+// src/index.ts
+export { default as FlashcardDeck } from './components/FlashcardDeck';

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/vite.config.js

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'ElearningComponents',
+      fileName: (format) => `elearning-components.${format}.js`
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'framer-motion'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'framer-motion': 'FramerMotion'
+        }
+      }
+    }
+  }
+});