gudu-programs 1.0.0

package/README.md

@@ -0,0 +1,22 @@
+# gudu-programs
+
+A small collection of React example components (programs) demonstrating state, props, hooks, routing, forms, and class components.
+
+Install:
+
+```bash
+npm install gudu-programs
+```
+
+Usage (ESM):
+
+```js
+import { Program1 } from 'gudu-programs'
+// use <Program1 /> inside your React app
+```
+
+Peer dependencies: `react`, `react-dom`, `react-router-dom` (install them in your project).
+
+Source code included: this package publishes the `src/` folder so consumers can inspect the full component source.
+
+Build: this repo uses Vite library mode. The `prepare` script runs the library build before publishing.

package/dist/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>

package/dist/gudu-programs.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let l=require("react-router-dom"),u=require("react");u=c(u,1);var d=o((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),f=o((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%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://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,"ref",{enumerable:!1,value:null}):Object.defineProperty(e,"ref",{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`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 f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`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} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),p=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=d():t.exports=f()}))(),m=[{id:1,title:`Dynamic Input`,desc:`Stateful input that updates as you type`},{id:2,title:`Props Demo`,desc:`Parent -> child data passing with Header/Footer`},{id:3,title:`Counter`,desc:`Increment, decrement, reset and custom step`},{id:4,title:`To-Do List`,desc:`Add, delete, and complete tasks`},{id:5,title:`Figure Gallery`,desc:`Add/remove images with captions`},{id:6,title:`Form Validation`,desc:`Name, email, password with validation`},{id:7,title:`Profile Card`,desc:`Profile UI demonstrating CSS + inline styles`},{id:8,title:`Reminder App`,desc:`Tasks with due dates and filters`},{id:9,title:`Routing Example`,desc:`Home/About/Contact using react-router`},{id:10,title:`API Fetcher`,desc:`Class component using lifecycle methods`}];function h(){return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h1`,{children:`React Programs Collection`}),(0,p.jsx)(`p`,{className:`lead`,children:`Click any card to open the program.`}),(0,p.jsx)(`div`,{className:`cards-grid`,children:m.map(e=>(0,p.jsx)(l.Link,{to:`/program-${e.id}`,className:`program-card`,children:(0,p.jsxs)(`div`,{className:`card-inner`,children:[(0,p.jsx)(`div`,{className:`card-icon`,children:e.id}),(0,p.jsx)(`h3`,{children:e.title}),(0,p.jsx)(`p`,{children:e.desc})]})},e.id))})]})}function g(){let[e,t]=(0,u.useState)(``);return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 1 — Dynamic Input`}),(0,p.jsxs)(`div`,{className:`controls`,children:[(0,p.jsx)(`input`,{placeholder:`Type something...`,value:e,onChange:e=>t(e.target.value),style:{padding:10,width:`100%`,maxWidth:520,borderRadius:8,border:`1px solid #e4eefb`}}),(0,p.jsxs)(`p`,{style:{marginTop:12},children:[`You typed: `,(0,p.jsx)(`strong`,{children:e||(0,p.jsx)(`em`,{children:`nothing yet`})})]})]})]})}function _({title:e}){return(0,p.jsx)(`header`,{children:(0,p.jsx)(`h2`,{children:e})})}function v({tagline:e,copyright:t}){return(0,p.jsxs)(`footer`,{style:{marginTop:12},children:[(0,p.jsx)(`small`,{children:e}),(0,p.jsx)(`div`,{style:{color:`#666`},children:t})]})}function y(){return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(_,{title:`My Props Demo App`}),(0,p.jsx)(`main`,{children:(0,p.jsx)(`p`,{children:`This app shows how props pass data from parent to children.`})}),(0,p.jsx)(v,{tagline:`Passing data via props is simple and powerful.`,copyright:`© 2026 Example Corp.`})]})}function b(){let[e,t]=(0,u.useState)(0),[n,r]=(0,u.useState)(1);return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 3 — Counter`}),(0,p.jsx)(`div`,{style:{fontSize:48,margin:`12px 0`,fontWeight:700},children:e}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:8},children:[(0,p.jsx)(`button`,{onClick:()=>t(e=>Math.max(0,e-Number(n))),className:`btn`,children:`-`}),(0,p.jsx)(`button`,{onClick:()=>t(e=>e+Number(n)),className:`btn`,children:`+`}),(0,p.jsx)(`button`,{onClick:()=>t(0),className:`btn`,children:`Reset`})]}),(0,p.jsx)(`div`,{style:{marginTop:12},children:(0,p.jsxs)(`label`,{children:[`Step:`,` `,(0,p.jsx)(`input`,{type:`number`,value:n,min:`1`,onChange:e=>r(e.target.value),style:{width:80}})]})})]})}function x(){let[e,t]=(0,u.useState)([]),[n,r]=(0,u.useState)(``),i=()=>{let e=n.trim();e&&(t(t=>[...t,{id:Date.now(),text:e,done:!1}]),r(``))},a=e=>t(t=>t.map(t=>t.id===e?{...t,done:!t.done}:t)),o=e=>t(t=>t.filter(t=>t.id!==e));return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h2`,{children:`Program 4 — To-Do List`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:8},children:[(0,p.jsx)(`input`,{value:n,onChange:e=>r(e.target.value),placeholder:`New task`}),(0,p.jsx)(`button`,{onClick:i,children:`Add`})]}),(0,p.jsx)(`ul`,{style:{marginTop:12},children:e.map(e=>(0,p.jsxs)(`li`,{style:{display:`flex`,gap:8,alignItems:`center`},children:[(0,p.jsx)(`input`,{type:`checkbox`,checked:e.done,onChange:()=>a(e.id)}),(0,p.jsx)(`span`,{style:{textDecoration:e.done?`line-through`:`none`},children:e.text}),(0,p.jsx)(`button`,{onClick:()=>o(e.id),style:{marginLeft:`auto`},children:`Delete`})]},e.id))})]})}function S(){return(0,p.jsx)(`div`,{className:`program-page`,children:(0,p.jsx)(x,{})})}function C({src:e,caption:t,onRemove:n}){return(0,p.jsxs)(`figure`,{style:{border:`1px solid #ddd`,padding:8,borderRadius:6},children:[(0,p.jsx)(`img`,{src:e,alt:t,style:{maxWidth:200,display:`block`,marginBottom:6}}),(0,p.jsx)(`figcaption`,{children:t}),n&&(0,p.jsx)(`button`,{onClick:n,style:{marginTop:6},children:`Remove`})]})}var w=[{id:1,src:`https://via.placeholder.com/200`,caption:`Placeholder 1`},{id:2,src:`https://via.placeholder.com/200?text=2`,caption:`Placeholder 2`}];function T(){let[e,t]=(0,u.useState)(w),[n,r]=(0,u.useState)(``),[i,a]=(0,u.useState)(``),o=()=>{n.trim()&&(t(e=>[...e,{id:Date.now(),src:n.trim(),caption:i.trim()}]),r(``),a(``))},s=e=>t(t=>t.filter(t=>t.id!==e));return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h2`,{children:`Figures`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:8,marginBottom:8},children:[(0,p.jsx)(`input`,{placeholder:`Image URL`,value:n,onChange:e=>r(e.target.value)}),(0,p.jsx)(`input`,{placeholder:`Caption`,value:i,onChange:e=>a(e.target.value)}),(0,p.jsx)(`button`,{onClick:o,children:`Add`})]}),(0,p.jsx)(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(auto-fit, minmax(220px, 1fr))`,gap:12},children:e.map(e=>(0,p.jsx)(C,{src:e.src,caption:e.caption,onRemove:()=>s(e.id)},e.id))})]})}function E(){return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 5 — Figure Gallery`}),(0,p.jsx)(T,{})]})}var D=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;function O(){let[e,t]=(0,u.useState)(``),[n,r]=(0,u.useState)(``),[i,a]=(0,u.useState)(``),[o,s]=(0,u.useState)(!1),[c,l]=(0,u.useState)({}),d=e=>e.replace(/[<>]/g,``);return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 6 — Form Validation`}),(0,p.jsxs)(`form`,{onSubmit:t=>{t.preventDefault();let r={};if(e.trim()||(r.name=`Name required`),D.test(n)||(r.email=`Invalid email`),i.length<6&&(r.password=`Password too short`),l(r),Object.keys(r).length===0){let t={name:d(e),email:d(n),password:`***`};alert(`Submitted: `+JSON.stringify(t))}},noValidate:!0,children:[(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`label`,{children:`Name`}),(0,p.jsx)(`input`,{value:e,onChange:e=>t(e.target.value),style:{borderColor:c.name?`red`:void 0}}),(0,p.jsx)(`div`,{style:{color:`red`},children:c.name})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`label`,{children:`Email`}),(0,p.jsx)(`input`,{value:n,onChange:e=>r(e.target.value),style:{borderColor:c.email?`red`:void 0}}),(0,p.jsx)(`div`,{style:{color:`red`},children:c.email})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`label`,{children:`Password`}),(0,p.jsx)(`input`,{type:o?`text`:`password`,value:i,onChange:e=>a(e.target.value),style:{borderColor:c.password?`red`:void 0}}),(0,p.jsx)(`div`,{style:{color:`red`},children:c.password})]}),(0,p.jsxs)(`label`,{children:[(0,p.jsx)(`input`,{type:`checkbox`,checked:o,onChange:e=>s(e.target.checked)}),` Show Password`]}),(0,p.jsx)(`div`,{children:(0,p.jsx)(`button`,{type:`submit`,children:`Submit`})})]})]})}function k({name:e,bio:t,img:n,bg:r}){return(0,p.jsxs)(`div`,{className:`profile-card`,style:{background:r||`#fff`},children:[(0,p.jsx)(`img`,{src:n,alt:e}),(0,p.jsx)(`h3`,{children:e}),(0,p.jsx)(`p`,{children:t})]})}function A(){let[e,t]=(0,u.useState)(`#ffffff`);return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 7 — Profile Card`}),(0,p.jsx)(`div`,{className:`controls`,children:(0,p.jsxs)(`label`,{children:[`Card background: `,(0,p.jsx)(`input`,{value:e,onChange:e=>t(e.target.value)})]})}),(0,p.jsx)(`div`,{style:{marginTop:12},children:(0,p.jsx)(k,{name:`Jane Doe`,bio:`Frontend engineer and React enthusiast.`,img:`https://via.placeholder.com/150`,bg:e})})]})}function j(){let[e,t]=(0,u.useState)([]),[n,r]=(0,u.useState)(``),[i,a]=(0,u.useState)(``),[o,s]=(0,u.useState)(``),[c,l]=(0,u.useState)(`all`),d=()=>{n.trim()&&(t(e=>[...e,{id:Date.now(),name:n.trim(),date:i,desc:o,done:!1}]),r(``),a(``),s(``))},f=e=>t(t=>t.map(t=>t.id===e?{...t,done:!t.done}:t)),m=e.filter(e=>c===`all`?!0:c===`done`?e.done:!e.done);return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 8 — Reminder App`}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`input`,{placeholder:`Task`,value:n,onChange:e=>r(e.target.value)}),(0,p.jsx)(`input`,{type:`date`,value:i,onChange:e=>a(e.target.value)}),(0,p.jsx)(`input`,{placeholder:`Description (optional)`,value:o,onChange:e=>s(e.target.value)}),(0,p.jsx)(`button`,{onClick:d,children:`Add`})]}),(0,p.jsxs)(`div`,{style:{marginTop:8},children:[(0,p.jsxs)(`label`,{children:[(0,p.jsx)(`input`,{type:`radio`,name:`f`,checked:c===`all`,onChange:()=>l(`all`)}),` All`]}),(0,p.jsxs)(`label`,{children:[(0,p.jsx)(`input`,{type:`radio`,name:`f`,checked:c===`done`,onChange:()=>l(`done`)}),` Completed`]}),(0,p.jsxs)(`label`,{children:[(0,p.jsx)(`input`,{type:`radio`,name:`f`,checked:c===`pending`,onChange:()=>l(`pending`)}),` Pending`]})]}),(0,p.jsx)(`ul`,{style:{marginTop:12},children:m.map(e=>(0,p.jsxs)(`li`,{style:{display:`flex`,gap:8,alignItems:`center`},children:[(0,p.jsx)(`input`,{type:`checkbox`,checked:e.done,onChange:()=>f(e.id)}),(0,p.jsxs)(`div`,{children:[(0,p.jsxs)(`div`,{style:{fontWeight:600},children:[e.name,` `,(0,p.jsx)(`small`,{style:{color:`#666`},children:e.date})]}),(0,p.jsx)(`div`,{style:{color:`#444`},children:e.desc})]})]},e.id))})]})}function M(){return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h3`,{children:`Home`}),(0,p.jsx)(`p`,{children:`Welcome to the Home page.`})]})}function N(){return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h3`,{children:`About`}),(0,p.jsx)(`p`,{children:`About page content.`})]})}function P(){return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h3`,{children:`Contact`}),(0,p.jsx)(`p`,{children:`Contact details here.`})]})}function F(){return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 9 — Routing Example`}),(0,p.jsxs)(`nav`,{style:{display:`flex`,gap:8,marginBottom:8},children:[(0,p.jsx)(l.NavLink,{to:`/program-9/`,end:!0,children:`Home`}),(0,p.jsx)(l.NavLink,{to:`/program-9/about`,children:`About`}),(0,p.jsx)(l.NavLink,{to:`/program-9/contact`,children:`Contact`})]}),(0,p.jsx)(`div`,{style:{background:`#fff`},children:(0,p.jsxs)(l.Routes,{children:[(0,p.jsx)(l.Route,{path:`/`,element:(0,p.jsx)(M,{})}),(0,p.jsx)(l.Route,{path:`about`,element:(0,p.jsx)(N,{})}),(0,p.jsx)(l.Route,{path:`contact`,element:(0,p.jsx)(P,{})})]})})]})}var I=class extends u.default.Component{constructor(e){super(e),this.state={items:[],loading:!1,error:null,query:``}}componentDidMount(){this.fetchData()}componentDidUpdate(e,t){t.query!==this.state.query&&this.fetchData()}fetchData(){this.setState({loading:!0,error:null});let e=this.state.query||``;fetch(`https://jsonplaceholder.typicode.com/posts${e?`?_limit=5`:`?_limit=10`}`).then(e=>e.json()).then(e=>this.setState({items:e,loading:!1})).catch(e=>this.setState({error:e.message,loading:!1}))}render(){let{items:e,loading:t,error:n}=this.state;return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h2`,{children:`Program 10 — Class Component & API`}),(0,p.jsxs)(`div`,{style:{marginBottom:8},children:[(0,p.jsxs)(`label`,{children:[`Query (not used for API but triggers update): `,(0,p.jsx)(`input`,{onChange:e=>this.setState({query:e.target.value})})]}),(0,p.jsx)(`button`,{onClick:()=>this.fetchData(),children:`Refresh`})]}),t&&(0,p.jsx)(`div`,{children:`Loading...`}),n&&(0,p.jsx)(`div`,{style:{color:`red`},children:n}),(0,p.jsx)(`ul`,{children:e.map(e=>(0,p.jsxs)(`li`,{children:[(0,p.jsx)(`strong`,{children:e.title}),(0,p.jsx)(`div`,{children:e.body})]},e.id))})]})}};function L(){return(0,p.jsx)(`div`,{className:`program-page`,children:(0,p.jsx)(I,{})})}exports.Home=h,exports.Program1=g,exports.Program10=L,exports.Program2=y,exports.Program3=b,exports.Program4=S,exports.Program5=E,exports.Program6=O,exports.Program7=A,exports.Program8=j,exports.Program9=F;

package/dist/gudu-programs.css

@@ -0,0 +1,2 @@
+.profile-card{border-radius:12px;max-width:360px;padding:16px;box-shadow:0 2px 6px #00000014}.profile-card img{object-fit:cover;border-radius:50%;width:96px;height:96px}.profile-card h3{margin:8px 0 4px}.profile-card p{color:#444;margin:0}
+/*$vite$:1*/