cyberui-2045 2.1.0 → 2.1.1

package/dist/index.d.ts

@@ -1,2 +1,33 @@
 export * from './components';
-export declare const version = "2.1.0";
+/**
+ * cyberui-2045 — AI-first cyberpunk React UI library.
+ *
+ * **AI coding assistants:** run once after install:
+ * ```bash
+ * npx cyberui-2045 init
+ * ```
+ * Writes a full usage guide into CLAUDE.md / .cursorrules / copilot-instructions.md.
+ *
+ * **Correct import pattern:**
+ * ```tsx
+ * import 'cyberui-2045/styles.css';            // required once in app entry (e.g. main.tsx)
+ * import { Button, Card, Modal } from 'cyberui-2045'; // all components from root
+ * import { cn } from 'cyberui-2045';           // clsx + tailwind-merge utility
+ * ```
+ * ⚠️ Do NOT import from subpaths like `cyberui-2045/components/Button` — root only.
+ *
+ * **All 21 components** (import from `'cyberui-2045'`):
+ * Forms: Button, Input, Select, Toggle, Checkbox
+ * Layout: Card, Modal, Divider
+ * Feedback: Badge, Notification, Skeleton
+ * Progress: CircularProgress, LinearProgress, SegmentedProgress
+ * Navigation: TabNavigation, Carousel, Steps
+ * Typography: GradientText, SectionTitle
+ * Display: Timeline | Media: Image
+ *
+ * **Hooks & context** (import from `'cyberui-2045'`):
+ * useCyberNotifications, useAnimatedProgress, useCyberScrollbar, CyberNotificationProvider
+ *
+ * Docs: https://patrickkuei.github.io/CyberUI/storybook/
+ */
+export declare const version = "2.1.1";

package/dist/index.es.js

@@ -5884,7 +5884,7 @@ const Er = ({
     "bottom-left": "bottom-4 left-4"
   };
   return r[e] || r["top-right"];
-}, Pr = "2.1.0";
+}, Pr = "2.1.1";
 export {
   kr as Badge,
   We as Button,

package/dist/index.js

@@ -65,5 +65,5 @@ React keys must be passed directly to JSX without using spread:
       border-radius: ${j?"4px 0 0 4px":"4px"};
       border: ${G.border};
       box-shadow: ${G.boxShadow};
-    `;for(let F=0;F<E;F++)T.appendChild(K("arrow","up",F,b));for(let F=0;F<2;F++)T.appendChild(K("line",void 0,F,b));for(let F=0;F<E;F++)T.appendChild(K("arrow","down",F,b));document.body.appendChild(T),d.current=T;const z=j?void 0:()=>{const F=i.current;if(F){const se=F.getBoundingClientRect();T.style.top=`${se.top}px`,T.style.right=`${window.innerWidth-se.right}px`,T.style.height=`${se.height}px`}};return z&&(window.addEventListener("resize",z),window.addEventListener("scroll",z)),()=>{T.remove(),!j&&i.current&&i.current.classList.remove("cyber-scrollbar-container"),z&&(window.removeEventListener("resize",z),window.removeEventListener("scroll",z))}},[s,j,S,H,Q,K,g,I,W,c,l]),ee=m.useCallback((u,b)=>{const A=Math.max(1,Math.min(3,Math.ceil(u*.8))),E=Math.floor(b/oe.DISTANCE_THRESHOLD);return A+E},[]),V=m.useCallback((u,b,A)=>{const E=Array.from(u).filter(D=>D.classList.contains(`cyber-arrow-${b}`)),T=Math.min(A,E.length);return b==="up"?E.slice(-T):E.slice(0,T)},[]),Y=m.useCallback((u,b,A)=>{const E=Math.min(b*a,oe.MAX_ANIMATION_SPEED),T=window.innerWidth<oe.MOBILE_BREAKPOINT,D=Math.max(300/E,oe.MIN_GLOW_DURATION)*(T?1.5:1),B=Math.max(40,80/E)*(T?1.25:1),G=A==="up"?[...u].reverse():u;G.forEach(z=>{z.style.opacity="0.3"}),G.forEach((z,F)=>{const se=F*B,ue=setTimeout(()=>{z.style.opacity="1";const he=setTimeout(()=>{z.style.opacity="0.3"},D);f.current.push(he)},se);f.current.push(ue)})},[a]),X=m.useCallback(()=>{if(!d.current)return;const{isScrolling:u,direction:b,velocity:A,scrollDistance:E}=w,T=d.current.querySelectorAll(".cyber-arrow"),D=d.current.querySelectorAll(".cyber-line");if(u&&b){D.forEach(G=>{G.style.opacity="0"});const B=ee(A,E);if(B!==$.current){f.current.forEach(z=>clearTimeout(z)),f.current=[],T.forEach(z=>{z.style.opacity="0"});const G=V(Array.from(T),b,B);Y(G,A,b),$.current=B}}else f.current.forEach(B=>clearTimeout(B)),f.current=[],$.current=0,T.forEach(B=>{B.style.opacity="0"}),k&&D.forEach(B=>{B.style.opacity="0.6"})},[w,k,Y,ee,V]),Z=m.useRef(null),J=m.useCallback(()=>{if(s||!j&&!i.current)return;const u=Date.now(),b=j?{currentScrollTop:window.scrollY,scrollHeight:document.body.scrollHeight,clientHeight:window.innerHeight}:{currentScrollTop:i.current.scrollTop,scrollHeight:i.current.scrollHeight,clientHeight:i.current.clientHeight},A=u-y.current,E=b.currentScrollTop-p.current,D=Math.abs(E)/Math.max(A,1)*oe.VELOCITY_MULTIPLIER,B=E>0?"down":E<0?"up":null,G=b.currentScrollTop/(b.scrollHeight-b.clientHeight);k||L(!0);const z=window.innerWidth<oe.MOBILE_BREAKPOINT;z&&!S&&M(!0),v(F=>({isScrolling:!0,direction:B,velocity:D,position:G,scrollDistance:F.direction!==B?Math.abs(E):F.scrollDistance+Math.abs(E)})),x.current&&clearTimeout(x.current),h.current&&clearTimeout(h.current),x.current=setTimeout(()=>{f.current.forEach(F=>clearTimeout(F)),f.current=[],v(F=>({...F,isScrolling:!1,velocity:0,scrollDistance:0})),z&&(h.current=setTimeout(()=>{M(!1)},oe.MOBILE_HIDE_DELAY))},oe.STABLE_TIMEOUT),y.current=u,p.current=b.currentScrollTop},[s,j,k,S]),o=m.useCallback(()=>{Z.current===null&&(Z.current=requestAnimationFrame(()=>{Z.current=null,J()}))},[J]);return m.useEffect(()=>{if(s||!j&&!i.current)return;const u=te(),b=j?window:i.current;return b.addEventListener("scroll",o,{passive:!0}),()=>{b.removeEventListener("scroll",o),x.current&&clearTimeout(x.current),h.current&&clearTimeout(h.current),f.current.forEach(A=>clearTimeout(A)),Z.current!==null&&(cancelAnimationFrame(Z.current),Z.current=null),u?.()}},[te,o,s,j]),m.useEffect(()=>{X()},[X]),i},rt=m.createContext(void 0),kr=()=>{const e=m.useContext(rt);if(e===void 0)throw new Error("useCyberNotifications must be used within a CyberNotificationProvider");return e},jr=({children:e,position:r="top-right",defaultDuration:a=2500})=>{const[s,n]=m.useState([]),c=m.useCallback((p,x,f,h={})=>{const w=Date.now().toString(),{autoHide:v=!0,duration:k=a}=h;return n(L=>[...L,{id:w,type:p,title:x,message:f}]),v&&setTimeout(()=>{n(L=>L.map(S=>S.id===w?{...S,isClosing:!0}:S)),setTimeout(()=>{n(L=>L.filter(S=>S.id!==w))},500)},k),w},[a]),l=m.useCallback(p=>{n(x=>x.map(f=>f.id===p?{...f,isClosing:!0}:f)),setTimeout(()=>{n(x=>x.filter(f=>f.id!==p))},500)},[]),i=m.useCallback(()=>{n([])},[]),d=m.useCallback((p,x)=>{n(f=>f.map(h=>h.id===p?{...h,width:x}:h))},[]),y={notifications:s,showNotification:c,hideNotification:l,clearAllNotifications:i};return t.jsxs(rt.Provider,{value:y,children:[e,s.length>0&&t.jsx("div",{className:`fixed z-50 ${Nr(r)}`,"aria-live":"polite","aria-relevant":"additions text","aria-atomic":"true",children:s.map((p,x)=>t.jsx("div",{className:"absolute",style:{right:r.includes("right")?0:void 0,left:r.includes("left")?0:void 0,top:`${x*70}px`,width:p.width?`${p.width}px`:"auto"},children:t.jsx("div",{className:`transform transition-all duration-500 ease-out scale-75 opacity-90 w-full ${r.includes("right")?"flex justify-end":"flex justify-start"} ${p.isClosing?`${r.includes("right")?"translate-x-full":"-translate-x-full"} opacity-0`:"translate-x-0 opacity-90"}`,style:{whiteSpace:"nowrap",transformOrigin:r.includes("right")?"right center":"left center",transform:p.isClosing?`translateX(${r.includes("right")?"100%":"-100%"}) scale(0.75)`:`translateX(${p.width?"0px":r.includes("right")?"100%":"-100%"}) scale(0.75)`},ref:f=>{if(f&&!p.width){const h=f.scrollWidth;d(p.id,h)}},children:t.jsx(et,{type:p.type,title:p.title,message:p.message,onClose:()=>l(p.id),size:"sm"})})},p.id))})]})},Nr=e=>{const r={"top-right":"top-4 right-4","top-left":"top-4 left-4","bottom-right":"bottom-4 right-4","bottom-left":"bottom-4 left-4"};return r[e]||r["top-right"]},Cr="2.1.0";R.Badge=nr,R.Button=Ee,R.Card=ar,R.Carousel=fr,R.Checkbox=vr,R.CircularProgress=er,R.CyberNotificationProvider=jr,R.Divider=yr,R.GradientText=pr,R.Image=pe,R.Input=or,R.LinearProgress=sr,R.Modal=tt,R.Notification=et,R.RESPONSIVE_SIZE_MAPS=re,R.SectionTitle=hr,R.SegmentedProgress=rr,R.Select=ir,R.Skeleton=cr,R.Steps=xr,R.TabNavigation=dt,R.Timeline=gr,R.Toggle=lr,R.cn=_,R.combineResponsiveClasses=nt,R.getResponsiveClasses=U,R.useCyberNotifications=kr,R.useCyberScrollbar=wr,R.version=Cr,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})});
+    `;for(let F=0;F<E;F++)T.appendChild(K("arrow","up",F,b));for(let F=0;F<2;F++)T.appendChild(K("line",void 0,F,b));for(let F=0;F<E;F++)T.appendChild(K("arrow","down",F,b));document.body.appendChild(T),d.current=T;const z=j?void 0:()=>{const F=i.current;if(F){const se=F.getBoundingClientRect();T.style.top=`${se.top}px`,T.style.right=`${window.innerWidth-se.right}px`,T.style.height=`${se.height}px`}};return z&&(window.addEventListener("resize",z),window.addEventListener("scroll",z)),()=>{T.remove(),!j&&i.current&&i.current.classList.remove("cyber-scrollbar-container"),z&&(window.removeEventListener("resize",z),window.removeEventListener("scroll",z))}},[s,j,S,H,Q,K,g,I,W,c,l]),ee=m.useCallback((u,b)=>{const A=Math.max(1,Math.min(3,Math.ceil(u*.8))),E=Math.floor(b/oe.DISTANCE_THRESHOLD);return A+E},[]),V=m.useCallback((u,b,A)=>{const E=Array.from(u).filter(D=>D.classList.contains(`cyber-arrow-${b}`)),T=Math.min(A,E.length);return b==="up"?E.slice(-T):E.slice(0,T)},[]),Y=m.useCallback((u,b,A)=>{const E=Math.min(b*a,oe.MAX_ANIMATION_SPEED),T=window.innerWidth<oe.MOBILE_BREAKPOINT,D=Math.max(300/E,oe.MIN_GLOW_DURATION)*(T?1.5:1),B=Math.max(40,80/E)*(T?1.25:1),G=A==="up"?[...u].reverse():u;G.forEach(z=>{z.style.opacity="0.3"}),G.forEach((z,F)=>{const se=F*B,ue=setTimeout(()=>{z.style.opacity="1";const he=setTimeout(()=>{z.style.opacity="0.3"},D);f.current.push(he)},se);f.current.push(ue)})},[a]),X=m.useCallback(()=>{if(!d.current)return;const{isScrolling:u,direction:b,velocity:A,scrollDistance:E}=w,T=d.current.querySelectorAll(".cyber-arrow"),D=d.current.querySelectorAll(".cyber-line");if(u&&b){D.forEach(G=>{G.style.opacity="0"});const B=ee(A,E);if(B!==$.current){f.current.forEach(z=>clearTimeout(z)),f.current=[],T.forEach(z=>{z.style.opacity="0"});const G=V(Array.from(T),b,B);Y(G,A,b),$.current=B}}else f.current.forEach(B=>clearTimeout(B)),f.current=[],$.current=0,T.forEach(B=>{B.style.opacity="0"}),k&&D.forEach(B=>{B.style.opacity="0.6"})},[w,k,Y,ee,V]),Z=m.useRef(null),J=m.useCallback(()=>{if(s||!j&&!i.current)return;const u=Date.now(),b=j?{currentScrollTop:window.scrollY,scrollHeight:document.body.scrollHeight,clientHeight:window.innerHeight}:{currentScrollTop:i.current.scrollTop,scrollHeight:i.current.scrollHeight,clientHeight:i.current.clientHeight},A=u-y.current,E=b.currentScrollTop-p.current,D=Math.abs(E)/Math.max(A,1)*oe.VELOCITY_MULTIPLIER,B=E>0?"down":E<0?"up":null,G=b.currentScrollTop/(b.scrollHeight-b.clientHeight);k||L(!0);const z=window.innerWidth<oe.MOBILE_BREAKPOINT;z&&!S&&M(!0),v(F=>({isScrolling:!0,direction:B,velocity:D,position:G,scrollDistance:F.direction!==B?Math.abs(E):F.scrollDistance+Math.abs(E)})),x.current&&clearTimeout(x.current),h.current&&clearTimeout(h.current),x.current=setTimeout(()=>{f.current.forEach(F=>clearTimeout(F)),f.current=[],v(F=>({...F,isScrolling:!1,velocity:0,scrollDistance:0})),z&&(h.current=setTimeout(()=>{M(!1)},oe.MOBILE_HIDE_DELAY))},oe.STABLE_TIMEOUT),y.current=u,p.current=b.currentScrollTop},[s,j,k,S]),o=m.useCallback(()=>{Z.current===null&&(Z.current=requestAnimationFrame(()=>{Z.current=null,J()}))},[J]);return m.useEffect(()=>{if(s||!j&&!i.current)return;const u=te(),b=j?window:i.current;return b.addEventListener("scroll",o,{passive:!0}),()=>{b.removeEventListener("scroll",o),x.current&&clearTimeout(x.current),h.current&&clearTimeout(h.current),f.current.forEach(A=>clearTimeout(A)),Z.current!==null&&(cancelAnimationFrame(Z.current),Z.current=null),u?.()}},[te,o,s,j]),m.useEffect(()=>{X()},[X]),i},rt=m.createContext(void 0),kr=()=>{const e=m.useContext(rt);if(e===void 0)throw new Error("useCyberNotifications must be used within a CyberNotificationProvider");return e},jr=({children:e,position:r="top-right",defaultDuration:a=2500})=>{const[s,n]=m.useState([]),c=m.useCallback((p,x,f,h={})=>{const w=Date.now().toString(),{autoHide:v=!0,duration:k=a}=h;return n(L=>[...L,{id:w,type:p,title:x,message:f}]),v&&setTimeout(()=>{n(L=>L.map(S=>S.id===w?{...S,isClosing:!0}:S)),setTimeout(()=>{n(L=>L.filter(S=>S.id!==w))},500)},k),w},[a]),l=m.useCallback(p=>{n(x=>x.map(f=>f.id===p?{...f,isClosing:!0}:f)),setTimeout(()=>{n(x=>x.filter(f=>f.id!==p))},500)},[]),i=m.useCallback(()=>{n([])},[]),d=m.useCallback((p,x)=>{n(f=>f.map(h=>h.id===p?{...h,width:x}:h))},[]),y={notifications:s,showNotification:c,hideNotification:l,clearAllNotifications:i};return t.jsxs(rt.Provider,{value:y,children:[e,s.length>0&&t.jsx("div",{className:`fixed z-50 ${Nr(r)}`,"aria-live":"polite","aria-relevant":"additions text","aria-atomic":"true",children:s.map((p,x)=>t.jsx("div",{className:"absolute",style:{right:r.includes("right")?0:void 0,left:r.includes("left")?0:void 0,top:`${x*70}px`,width:p.width?`${p.width}px`:"auto"},children:t.jsx("div",{className:`transform transition-all duration-500 ease-out scale-75 opacity-90 w-full ${r.includes("right")?"flex justify-end":"flex justify-start"} ${p.isClosing?`${r.includes("right")?"translate-x-full":"-translate-x-full"} opacity-0`:"translate-x-0 opacity-90"}`,style:{whiteSpace:"nowrap",transformOrigin:r.includes("right")?"right center":"left center",transform:p.isClosing?`translateX(${r.includes("right")?"100%":"-100%"}) scale(0.75)`:`translateX(${p.width?"0px":r.includes("right")?"100%":"-100%"}) scale(0.75)`},ref:f=>{if(f&&!p.width){const h=f.scrollWidth;d(p.id,h)}},children:t.jsx(et,{type:p.type,title:p.title,message:p.message,onClose:()=>l(p.id),size:"sm"})})},p.id))})]})},Nr=e=>{const r={"top-right":"top-4 right-4","top-left":"top-4 left-4","bottom-right":"bottom-4 right-4","bottom-left":"bottom-4 left-4"};return r[e]||r["top-right"]},Cr="2.1.1";R.Badge=nr,R.Button=Ee,R.Card=ar,R.Carousel=fr,R.Checkbox=vr,R.CircularProgress=er,R.CyberNotificationProvider=jr,R.Divider=yr,R.GradientText=pr,R.Image=pe,R.Input=or,R.LinearProgress=sr,R.Modal=tt,R.Notification=et,R.RESPONSIVE_SIZE_MAPS=re,R.SectionTitle=hr,R.SegmentedProgress=rr,R.Select=ir,R.Skeleton=cr,R.Steps=xr,R.TabNavigation=dt,R.Timeline=gr,R.Toggle=lr,R.cn=_,R.combineResponsiveClasses=nt,R.getResponsiveClasses=U,R.useCyberNotifications=kr,R.useCyberScrollbar=wr,R.version=Cr,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cyberui-2045",
-  "version": "2.1.0",
-  "description": "A cyberpunk-themed React UI library with neon-styled components. Also known as CyberUI.",
+  "version": "2.1.1",
+  "description": "The AI-first cyberpunk React UI library — built-in coding assistant context for Claude, Cursor, and Copilot out of the box.",
   "private": false,
   "type": "module",
   "main": "dist/index.js",
@@ -45,7 +45,13 @@
     "neon",
     "futuristic",
     "typescript",
-    "tailwind"
+    "tailwind",
+    "ai-friendly",
+    "claude",
+    "cursor",
+    "copilot",
+    "design-system",
+    "component-library"
   ],
   "author": "Patrick Yang <azureroki@gmail.com>",
   "license": "MIT",