@jamsrui/composite 0.0.2

package/README.md

@@ -0,0 +1,40 @@
+# 🚀 **JamsrUI**
+
+**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**
+
+
+## 📖 **Overview**
+
+[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.
+
+## 🚀 Getting Started 
+
+Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).
+
+## ✨ Features
+
+- 🚀 **Production-Ready**: Optimized for modern React projects.
+- 🎨 **Customizable**: Easily override styles and themes.
+- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
+- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
+- 📦 **Lightweight**: Minimal dependencies for fast performance.
+- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.
+
+## 🌱 Community
+
+We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.
+
+### How to Engage
+
+- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
+- 🚀 **Request Features**: Share ideas for new components.
+- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.
+
+## Contributing
+
+We welcome contributions from developers of all skill levels!
+
+## ⭐ Support the Project
+
+If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
+

package/dist/composite-context.d.mts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { u as useComposite } from './use-composite-_Cst7X9L.mjs';
+import 'react/jsx-runtime';
+
+declare const CompositeContext: react.Context<CompositeContext.Props | null>;
+declare namespace CompositeContext {
+    interface Props extends ReturnType<typeof useComposite> {
+    }
+}
+declare const useCompositeContext: () => CompositeContext.Props;
+
+export { CompositeContext, useCompositeContext };

package/dist/composite-context.mjs

@@ -0,0 +1 @@
+import{createContext as t,use as o}from"react";const s=t(null),r=()=>{const e=o(s);if(!e)throw new Error("useCompositeContext must be used within a Composite");return e};export{s as CompositeContext,r as useCompositeContext};

package/dist/composite-item.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { useCompositeItem } from './use-composite-item.mjs';
+
+declare const CompositeItem: (props: CompositeItem.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace CompositeItem {
+    interface Props extends useCompositeItem.Props {
+        children: React.ReactElement;
+    }
+}
+
+export { CompositeItem };

package/dist/composite-item.mjs

@@ -0,0 +1 @@
+import{cloneElement as s}from"react";import{useCompositeItem as m}from"./use-composite-item";const c=e=>{const{children:t,...o}=e,r=m(o);return s(t,r.props)};export{c as CompositeItem};

package/dist/composite.d.mts

@@ -0,0 +1,3 @@
+import 'react/jsx-runtime';
+export { C as Composite } from './use-composite-_Cst7X9L.mjs';
+import 'react';

package/dist/composite.mjs

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{CompositeContext as r}from"./composite-context";import{useComposite as p}from"./use-composite";const m=o=>{const{children:t}=o,e=p(o);return i(r,{value:e,children:t})};export{m as Composite};

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+export { C as Composite, u as useComposite } from './use-composite-_Cst7X9L.mjs';
+export { CompositeItem } from './composite-item.mjs';
+export { useCompositeItem } from './use-composite-item.mjs';
+import 'react';
+import 'react/jsx-runtime';

package/dist/index.mjs

@@ -0,0 +1 @@
+"use client";import{Composite as t}from"./composite";import{CompositeItem as p}from"./composite-item";import{useComposite as s}from"./use-composite";import{useCompositeItem as f}from"./use-composite-item";export{t as Composite,p as CompositeItem,s as useComposite,f as useCompositeItem};

package/dist/use-composite-_Cst7X9L.d.mts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const Composite: (props: Composite.Props) => react_jsx_runtime.JSX.Element;
+declare namespace Composite {
+    type Orientation = "horizontal" | "vertical" | "both";
+    type Dir = "ltr" | "rtl";
+    interface Props extends useComposite.Props {
+        children: React.ReactNode;
+    }
+}
+
+type CompositeItemRef = {
+    id: string;
+    ref: HTMLElement | null;
+    isDisabled: boolean;
+};
+declare const useComposite: (props: useComposite.Props) => {
+    registerItem: (entry: CompositeItemRef) => {
+        index: number;
+    };
+    unregisterItem: (id: string) => void;
+    getIndex: (id: string) => number;
+    items: react.RefObject<CompositeItemRef[]>;
+    activeIndex: number;
+    setActiveIndex: react.Dispatch<react.SetStateAction<number>>;
+    movePrev: (from: number) => number;
+    moveNext: (from: number) => number;
+    moveFirst: () => number;
+    moveLast: () => number;
+    orientation: Composite.Orientation;
+    dir: Composite.Dir;
+    loop: boolean;
+    virtual: boolean;
+};
+declare namespace useComposite {
+    interface Props {
+        orientation?: Composite.Orientation;
+        dir?: Composite.Dir;
+        loop?: boolean;
+        virtual?: boolean;
+    }
+}
+
+export { Composite as C, useComposite as u };

package/dist/use-composite-item.d.mts

@@ -0,0 +1,30 @@
+import react__default from 'react';
+
+declare const useCompositeItem: (props: useCompositeItem.Props) => {
+    props: {
+        id: string;
+        "data-index": number;
+        ref: (node: HTMLElement | null) => void;
+        tabIndex: number;
+        "aria-selected": boolean | "true" | "false";
+        onKeyDown?: undefined;
+        onFocus?: undefined;
+    } | {
+        id: string;
+        "data-index": number;
+        ref: (node: HTMLElement | null) => void;
+        tabIndex: number;
+        onKeyDown: (e: react__default.KeyboardEvent) => void;
+        onFocus: () => void;
+        "aria-selected"?: undefined;
+    };
+    index: number;
+};
+declare namespace useCompositeItem {
+    interface Props {
+        id?: string;
+        isDisabled?: boolean;
+    }
+}
+
+export { useCompositeItem };

package/dist/use-composite-item.mjs

@@ -0,0 +1 @@
+import{useCallback as a,useEffect as w,useId as D,useMemo as g,useRef as h,useState as C}from"react";import{dataAttr as P}from"@jamsrui/utils";import{useCompositeContext as R}from"./composite-context";const M=v=>{const{id:x,isDisabled:m=!1}=v,e=R(),I=D(),u=h(null),[y,A]=C(-1),i=x??I;w(()=>{const{index:t}=e.registerItem({id:i,ref:u.current,isDisabled:m});return A(t),()=>e.unregisterItem(i)},[e,m,i]);const r=y,l=r===e.activeIndex,s=a(t=>{const n=e.items.current[t]?.ref;e.virtual||n?.focus()},[e.items,e.virtual]),d=a(t=>{if(e.virtual)return;const n=e.dir==="rtl",c=e.orientation==="horizontal"||e.orientation==="both",p=e.orientation==="vertical"||e.orientation==="both";let o=r;t.key==="ArrowRight"&&c&&!n||t.key==="ArrowDown"&&p||t.key==="ArrowLeft"&&c&&n?(t.preventDefault(),o=e.moveNext(r),console.log(o),e.setActiveIndex(o),s(o)):t.key==="ArrowLeft"&&c&&!n||t.key==="ArrowUp"&&p||t.key==="ArrowRight"&&c&&n?(t.preventDefault(),o=e.movePrev(r),e.setActiveIndex(o),s(o)):t.key==="Home"||t.key==="PageUp"?(t.preventDefault(),o=e.moveFirst(),e.setActiveIndex(o),s(o)):(t.key==="End"||t.key==="PageDown")&&(t.preventDefault(),o=e.moveLast(),e.setActiveIndex(o),s(o))},[e,s,r]),f=a(()=>{e.setActiveIndex(r)},[e,r]),b=g(()=>e.virtual?{tabIndex:-1,"aria-selected":P(l)}:{tabIndex:l?0:-1,onKeyDown:d,onFocus:f},[e.virtual,l,f,d]),k=a(t=>{u.current=t},[]);return{props:{...b,id:i,"data-index":r,ref:k},index:r}};export{M as useCompositeItem};

package/dist/use-composite.d.mts

@@ -0,0 +1,3 @@
+import 'react';
+export { u as useComposite } from './use-composite-_Cst7X9L.mjs';
+import 'react/jsx-runtime';

package/dist/use-composite.mjs

@@ -0,0 +1 @@
+import{useCallback as l,useMemo as C,useRef as k,useState as w}from"react";import{isDisabledElement as R}from"@jamsrui/utils";const H=y=>{const{dir:p="ltr",loop:m=!0,orientation:a="vertical",virtual:f=!1}=y,o=k([]),[c,u]=w(0),I=k(null);console.log({rootRef:I,items:o,activeIndex:c});const x=l(e=>(o.current.push({...e,isDisabled:e.isDisabled||(e.ref?R(e.ref):!1)}),{index:o.current.length-1}),[]),h=l(e=>{const r=o.current.findIndex(t=>t.id===e);r>=0&&o.current.splice(r,1),u(t=>Math.max(0,Math.min(o.current.length-1,t)))},[]),D=l(e=>o.current.findIndex(r=>r.id===e),[]),s=l((e,r)=>{const t=o.current.length;if(t===0)return-1;let n=e;for(let i=0;i<t;i++){if(n=n+r,m)n=(n+t)%t;else if(n<0||n>=t)return e;if(!o.current[n]?.isDisabled)return n}return e},[m]),d=l(e=>s(e,-1),[s]),v=l(e=>s(e,1),[s]),b=l(()=>s(-1,1),[s]),g=l(()=>s(o.current.length,-1),[s]),A=e=>{if(!f)return;const r=p==="rtl",t=a==="horizontal"||a==="both",n=a==="vertical"||a==="both";let i=c;e.key==="ArrowRight"&&t&&!r||e.key==="ArrowDown"&&n||e.key==="ArrowLeft"&&t&&r?(e.preventDefault(),i=v(c),u(i)):e.key==="ArrowLeft"&&t&&!r||e.key==="ArrowUp"&&n||e.key==="ArrowRight"&&t&&r?(e.preventDefault(),i=d(c),u(i)):e.key==="Home"||e.key==="PageUp"?(e.preventDefault(),i=b(),u(i)):(e.key==="End"||e.key==="PageDown")&&(e.preventDefault(),i=g(),u(i))},E=o.current[c]?.id;return C(()=>({registerItem:x,unregisterItem:h,getIndex:D,items:o,activeIndex:c,setActiveIndex:u,movePrev:d,moveNext:v,moveFirst:b,moveLast:g,orientation:a,dir:p,loop:m,virtual:f}),[x,h,D,c,d,v,b,g,a,p,m,f])};export{H as useComposite};

package/dist/utils.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@jamsrui/composite",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "dependencies": {
+    "@jamsrui/utils": "^0.0.9"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "description": "A modern and beautiful Next.js UI components library.",
+  "keywords": [
+    "react",
+    "ui",
+    "UI components",
+    "Next.js",
+    "React",
+    "JamsrUI",
+    "jamsr-ui",
+    "TypeScript"
+  ],
+  "sideEffects": false,
+  "license": "MIT",
+  "author": "@jamsrworld",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jamsrworld/jamsr-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/jamsrworld/jamsr-ui/issues"
+  },
+  "homepage": "https://jamsr-ui.jamsrworld.com",
+  "files": [
+    "dist",
+    "README",
+    "README.md",
+    "package.json",
+    "LICENSE"
+  ]
+}