@reactufy/rebootui 1.0.4 → 1.0.6

package/README.md

@@ -1,6 +1,13 @@
 # RebootUI
 
-A modern React component library built on Bootstrap 5, providing a comprehensive set of customizable UI components with flexible styling options.
+A modern React component library built on **Bootstrap 5.3** (`bootstrap` ^5.3.8), with typed props and compound components where it helps.
+
+**Package name:** `@reactufy/rebootui`
+
+## Requirements
+
+- **React** 18 or 19 (`react`, `react-dom`)
+- For **`<Navbar>`** navigation, **`Nav.Link`** uses [React Router](https://reactrouter.com/) (`react-router-dom` ^6.4 or ^7). Install it in your app when you use navbar links with the `to` prop.
 
 ## Installation
 
@@ -12,15 +19,13 @@ yarn add @reactufy/rebootui
 pnpm add @reactufy/rebootui
 ```
 
-## Quick Start
-
-### Option 1: Everything Included (Recommended for Quick Start)
+## Quick start
 
-Import the complete CSS bundle that includes Bootstrap + RebootUI enhancements:
+### Option 1: All-in-one CSS (good default)
 
 ```jsx
-import 'rebootui/dist/rebootui-complete.css';
-import { Button, Alert, Modal } from 'rebootui';
+import '@reactufy/rebootui/dist/rebootui-complete.css';
+import { Button, Alert, Modal } from '@reactufy/rebootui';
 
 function App() {
   return (
@@ -32,9 +37,9 @@ function App() {
 }
 ```
 
-### Option 2: Custom Bootstrap Setup (Advanced)
+### Option 2: Your own Bootstrap build (advanced)
 
-If you want to customize Bootstrap variables, import only RebootUI's enhancements:
+Compile Bootstrap yourself (e.g. Sass), then layer RebootUI tweaks:
 
 ```scss
 // your-custom-bootstrap.scss
@@ -46,106 +51,110 @@ $font-family-base: 'Your Font';
 
 ```jsx
 import './your-custom-bootstrap.css';
-import 'rebootui/dist/rebootui-overrides.css'; // Only RebootUI enhancements
-import { Button, Alert, Modal } from 'rebootui';
+import '@reactufy/rebootui/dist/rebootui-overrides.css';
+import { Button, Alert, Modal } from '@reactufy/rebootui';
 ```
 
-### Option 3: Mix and Match
+### Option 3: Library Bootstrap + overrides
 
 ```jsx
-import 'rebootui/dist/bootstrap.css';        // Standard Bootstrap
-import 'rebootui/dist/rebootui-overrides.css'; // RebootUI enhancements
-import { Button, Alert, Modal } from 'rebootui';
+import '@reactufy/rebootui/dist/bootstrap.css';
+import '@reactufy/rebootui/dist/rebootui-overrides.css';
+import { Button, Alert, Modal } from '@reactufy/rebootui';
 ```
 
-## Available CSS Files
-
-| File | Size | Description |
-|------|------|-------------|
-| `rebootui-complete.css` | 267 KB | Bootstrap + RebootUI enhancements (all-in-one) |
-| `bootstrap.css` | 265 KB | Standard Bootstrap 5.3.7 |
-| `rebootui-overrides.css` | 1.6 KB | Only RebootUI enhancements (tooltips, popovers, layout) |
-
-## Components
-
-### Layout Components
-- **Container** - Responsive container with size options
-- **Row, Column** - Flexible grid system
-- **HStack, VStack** - Horizontal and vertical stacks
-- **Layout, LayoutHeader, LayoutSidebar, LayoutContent, LayoutFooter** - Page layout system
-
-### UI Components
-- **Alert** - Contextual feedback messages
-- **Badge** - Small count and labeling component
-- **Button, ButtonGroup** - Interactive buttons with variants
-- **Spinner** - Loading indicators
-- **Progress** - Progress bars with animation
-- **Tooltip** - Hover tooltips
-- **Popover** - Contextual popover overlays
-- **Icon** - SVG icon system
-- **Heading, Text** - Typography components
-- **Table** - Responsive tables
-
-### Complex Components
-- **Accordion** - Collapsible content panels
-- **Breadcrumb** - Navigation breadcrumbs
-- **Card** - Flexible content container
-- **Dropdown** - Dropdown menus
-- **ListGroup** - List of items
-- **Modal** - Dialog boxes
-- **Nav, Navbar** - Navigation components
-- **Offcanvas** - Sidebar drawer
-- **Pagination** - Page navigation
-- **Scrollspy** - Scroll-aware navigation
-- **Toast** - Notification messages
-
-## TypeScript Support
-
-RebootUI is built with TypeScript and includes full type definitions:
+## CSS bundles
+
+| Export | Description |
+|--------|-------------|
+| `@reactufy/rebootui/dist/rebootui-complete.css` | Bootstrap + RebootUI overrides (single file) |
+| `@reactufy/rebootui/dist/bootstrap.css` | Bootstrap only (as built by this package) |
+| `@reactufy/rebootui/dist/rebootui-overrides.css` | RebootUI-only tweaks (tooltips, popovers, layout helpers) |
+
+Sizes change with Bootstrap releases; check your `node_modules` after install if you need exact bytes.
+
+## Icons
+
+Bootstrap Icons are shipped as a sprite for the **`Icon`** component:
+
+```text
+@reactufy/rebootui/assets/icons/icons.svg
+```
+
+(Resolved from `dist` in the published package.)
+
+## Components (overview)
+
+Grouped roughly as exported from the package. Many are **compound** (e.g. `Card.Header`, `Modal.Body`).
+
+### Layout
+
+- **Container**, **Row**, **Column**
+- **Layout**, **LayoutHeader**, **LayoutSidebar**, **LayoutContent**, **LayoutFooter**
+- **Stack** (+ **Stack.Item**; flex / gap utilities)
+
+### UI
+
+- **Alert**, **Badge**, **Button**, **ButtonGroup**, **Spinner**, **Progress**
+- **Tooltip**, **Popover**
+- **Icon**, **Image**, **Figure**, **Figcaption**
+- **Heading**, **Text**, **Wrapper**, **List**, **ListItem**
+- **Table** (and related table subcomponents / types)
+- **DataTable**
+
+### Patterns
+
+- **Accordion** (+ **Accordion.Item**)
+- **Breadcrumb** (+ **Breadcrumb.Item**)
+- **Card** (+ **Card.Header**, **Card.Body**, **Card.Footer**, **Card.Title**, **Card.Text**, **Card.Image**)
+- **Dropdown** (+ **Dropdown.Toggle**, **Dropdown.Menu**, **Dropdown.Item**)
+- **ListGroup** (+ **ListGroup.Item**)
+- **Modal** (+ **Modal.Dialog**, **Modal.Header**, **Modal.Body**, **Modal.Footer**)
+- **Nav** (+ **Nav.Item**, **Nav.Link**) · **Tabs** (+ **Tabs.Content**, **Tabs.Pane**) · **Navbar** (+ **Navbar.Brand**, **Navbar.Toggle**, **Navbar.Collapse**)
+- **Offcanvas** (+ **Offcanvas.Header**, **Offcanvas.Body**)
+- **Pagination** (+ **Pagination.Item**)
+- **Toast** (+ **Toast.Header**, **Toast.Body**, **Toast.Container**)
+
+### Forms
+
+- **Form**, **FormControl**, **FormLabel**, **FormGroup**, **FormSelect**, **FormCheck**, **FormFeedback**, **FormText**, **FormDatalist**
+- **InputGroup**, **InputGroupText**
+
+## TypeScript
+
+The library is written in TypeScript and ships typings (`dist/index.d.ts`). Components expose props types; shared enums live under `./types/*` re-exports.
 
 ```tsx
-import { Button, ButtonColor, ButtonSize } from 'rebootui';
+import { Button, ButtonColor, ButtonSize } from '@reactufy/rebootui';
 
-// Type-safe props
-<Button 
-  color={ButtonColor.Primary} 
-  size={ButtonSize.Lg}
->
+<Button color={ButtonColor.Primary} size={ButtonSize.Lg}>
   Click me
 </Button>
 ```
 
-All components export their prop types and enums for type-safe development.
-
-## What's Included in RebootUI Enhancements
-
-The `rebootui-overrides.css` file includes:
+## RebootUI overrides (`rebootui-overrides.css`)
 
-- **Tooltip positioning fixes** - Proper arrow centering
-- **Popover positioning fixes** - Consistent arrow placement
-- **Layout system** - Grid-based page layout with sidebar support
+Intended to work on top of Bootstrap:
 
-These enhancements work with any Bootstrap setup, including your customized versions.
+- Tooltip / popover arrow alignment fixes
+- Layout helpers used by the layout components
 
-## Browser Support
+## Browser support
 
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
+Current versions of Chrome, Firefox, Safari, and Edge (same practical baseline as Bootstrap 5).
 
 ## Documentation
 
-For full documentation, interactive examples, and API reference, visit [your-docs-url]
+Interactive docs live in the **`packages/docs`** app in this monorepo (`npm run dev` from the repository root runs the docs workspace).
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions are welcome. Please open a pull request against the main repository.
 
 ## License
 
-MIT © [Your Name]
+MIT
 
 ## Credits
 
-Built with [Bootstrap 5](https://getbootstrap.com/) and [React](https://react.dev/)
+Built with [Bootstrap](https://getbootstrap.com/) and [React](https://react.dev/).

package/{src → dist}/assets/icons/icons.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg">
   <symbol class="bi bi-0-circle" viewBox="0 0 16 16" id="0-circle">
     <path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99M8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895"/>
     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8"/>

package/dist/components/ui/breadcrumb/BreadcrumbItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/breadcrumb/BreadcrumbItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGnC,KAAK,YAAY,GAAG,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;AAE3D,KAAK,mBAAmB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAEzG,QAAA,MAAM,cAAc,GAAI,yDAOrB,mBAAmB,4CA2BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/breadcrumb/BreadcrumbItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEnC,KAAK,YAAY,GAAG,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;AAE3D,KAAK,mBAAmB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAEzG,QAAA,MAAM,cAAc,GAAI,yDAOrB,mBAAmB,4CAuBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/ui/nav/Nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,OAAO,MAAM,WAAW,CAAC;AAGhC,KAAK,YAAY,GAAG,IAAI,GAAG,OAAO,GAAG,WAAW,CAAC;AAEjD,KAAK,QAAQ,GAAG;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;AAE7D,QAAA,MAAM,GAAG,EAyBH,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG;IACvB,IAAI,EAAE,OAAO,OAAO,CAAC;IACrB,IAAI,EAAE,OAAO,OAAO,CAAC;CACxB,CAAC;AAOF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,OAAO,MAAM,WAAW,CAAC;AAGhC,KAAK,YAAY,GAAG,IAAI,GAAG,OAAO,GAAG,WAAW,CAAC;AAEjD,KAAK,QAAQ,GAAG;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;AAE7D,QAAA,MAAM,GAAG,EAkBH,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG;IACvB,IAAI,EAAE,OAAO,OAAO,CAAC;IACrB,IAAI,EAAE,OAAO,OAAO,CAAC;CACxB,CAAC;AAOF,eAAe,GAAG,CAAC"}

package/dist/components/ui/nav/NavLink.d.ts

@@ -1,6 +1,8 @@
 import React, { JSX } from "react";
 type AllowedProps = "id" | "style" | "className" | "href" | "target" | "rel" | "onClick";
 type NavLinkProps = {
+    /** Render as another component (e.g. `Link` from react-router-dom) instead of `<a>`. */
+    as?: React.ElementType;
     children: React.ReactNode;
     className?: string;
     to?: string;
@@ -8,6 +10,6 @@ type NavLinkProps = {
     disabled?: boolean;
     eventKey?: string;
 } & Partial<Pick<JSX.IntrinsicElements["a"], AllowedProps>>;
-declare const NavLink: ({ children, className, to, active, disabled, eventKey, onClick, href, ...rest }: NavLinkProps) => import("react/jsx-runtime").JSX.Element;
+declare const NavLink: ({ as, children, className, to, active, disabled, eventKey, onClick, href, ...rest }: NavLinkProps) => import("react/jsx-runtime").JSX.Element;
 export default NavLink;
 //# sourceMappingURL=NavLink.d.ts.map

package/dist/components/ui/nav/NavLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/nav/NavLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKnC,KAAK,YAAY,GAAG,IAAI,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEzF,KAAK,YAAY,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;AAE5D,QAAA,MAAM,OAAO,GAAI,iFAUd,YAAY,4CAmFd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/nav/NavLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGnC,KAAK,YAAY,GAAG,IAAI,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEzF,KAAK,YAAY,GAAG;IAChB,wFAAwF;IACxF,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;AAE5D,QAAA,MAAM,OAAO,GAAI,qFAWd,YAAY,4CAqEd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/ui/tabs/Tabs.d.ts

@@ -1,11 +1,6 @@
 import { ReactNode } from "react";
 import TabPane from "./TabPane";
 import TabContent from "./TabContent";
-type TabsContextType = {
-    activeKey: string;
-    onSelect: (key: string) => void;
-};
-export declare const useTabsContext: () => TabsContextType;
 type TabsProps = {
     children: ReactNode;
     defaultActiveKey?: string;

package/dist/components/ui/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,SAAS,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,KAAK,eAAe,GAAG;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAIF,eAAO,MAAM,cAAc,uBAM1B,CAAC;AAEF,KAAK,SAAS,GAAG;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,yGAMpB,SAAS,4CAoBX,CAAC;AAGF,QAAA,MAAM,IAAI,EAAoB,OAAO,aAAa,GAAG;IACjD,IAAI,EAAE,OAAO,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,UAAU,CAAC;CAC9B,CAAC;AAKF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,UAAU,MAAM,cAAc,CAAC;AAGtC,KAAK,SAAS,GAAG;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,yGAMpB,SAAS,4CAoBX,CAAC;AAGF,QAAA,MAAM,IAAI,EAAoB,OAAO,aAAa,GAAG;IACjD,IAAI,EAAE,OAAO,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,UAAU,CAAC;CAC9B,CAAC;AAKF,eAAe,IAAI,CAAC"}