@fpkit/acss 0.5.11 → 0.5.13

package/README.md

@@ -1,37 +1,533 @@
-# FP Kit
+# @fpkit/acss
 
-A lightweight React Headless UI library for building modern and accessible components that leverage CSS custom properties for reactive Styles. [FPKIT component storybook](https://fpkit.netlify.app/?path=/story/guides-introduction--page)
+A lightweight React UI library for building modern and accessible components that leverage CSS custom properties for reactive styles. Built with TypeScript and designed for optimal tree-shaking and bundle size optimization.
 
-## Install
+[![npm version](https://badge.fury.io/js/@fpkit%2Facss.svg)](https://badge.fury.io/js/@fpkit%2Facss)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+[📚 **Storybook Documentation**](https://fpkit.netlify.app/?path=/story/guides-introduction--page) | [🎯 **Component Playground**](https://fpkit.netlify.app/)
+
+## ✨ Features
+
+- **🎯 Dual Export Strategy**: Choose between convenience (barrel exports) or optimization (individual imports)
+- **📦 Tree-Shakable**: Import only the components you need
+- **♿ Accessible**: Built with accessibility best practices
+- **🎨 CSS Custom Properties**: Reactive styling with CSS variables
+- **📱 Responsive**: Mobile-first design approach
+- **⚡ TypeScript**: Full type safety and excellent DX
+- **🔧 Headless**: Minimal styling, maximum customization
+
+## ♿ Accessibility
+
+FPKit is built with accessibility as a core principle, following WCAG 2.1 AA standards. All components support ARIA attributes and provide guidance for creating accessible applications.
+
+### Accessibility Features
+
+- **Semantic HTML** - Components use appropriate semantic elements by default
+- **ARIA Support** - Full support for ARIA attributes on all components
+- **Keyboard Navigation** - All interactive elements are keyboard accessible
+- **Screen Reader Friendly** - Proper labeling and announcements for assistive technologies
+- **Focus Management** - Visible focus indicators and programmatic focus control
+
+### Testing for Accessibility
+
+We recommend the following tools for testing accessibility in your applications:
+
+#### Automated Testing
 
 ```bash
-npm i @fpkit/react
+# Install recommended packages
+npm install --save-dev eslint-plugin-jsx-a11y jest-axe @testing-library/react
+```
+
+**ESLint Plugin** - Catch accessibility issues during development:
+
+```js
+// .eslintrc.js
+{
+  "extends": ["plugin:jsx-a11y/recommended"],
+  "plugins": ["jsx-a11y"]
+}
+```
+
+**jest-axe** - Automated accessibility testing in unit tests:
+
+```tsx
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Button } from '@fpkit/acss/button';
+
+expect.extend(toHaveNoViolations);
+
+test('Button should have no accessibility violations', async () => {
+  const { container } = render(
+    <Button type="button" aria-label="Submit form">
+      Submit
+    </Button>
+  );
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+```
+
+#### Manual Testing Checklist
+
+When building components with FPKit, verify:
+
+- [ ] **Keyboard Navigation** - All interactive elements are reachable and operable via keyboard
+- [ ] **Screen Reader** - Test with VoiceOver (macOS), NVDA (Windows), or JAWS
+- [ ] **Focus Indicators** - Visible focus states meet 3:1 contrast ratio (WCAG 2.4.7)
+- [ ] **Accessible Names** - All interactive elements have accessible names (via text, `aria-label`, or `aria-labelledby`)
+- [ ] **Color Contrast** - Text meets 4.5:1 contrast ratio for normal text, 3:1 for large text
+- [ ] **Semantic Structure** - Proper heading hierarchy and landmark regions
+
+### UI Component Accessibility
+
+The foundational [UI component](https://fpkit.netlify.app/?path=/story/fp-ui--accessible-interactive-elements) demonstrates best practices:
+
+```tsx
+import { UI } from '@fpkit/acss';
+
+// ✅ Good: Accessible button with aria-label
+<UI as="button" aria-label="Close dialog" onClick={handleClose}>
+  <CloseIcon />
+</UI>
+
+// ✅ Good: Semantic link with descriptive text
+<UI as="a" href="/products">
+  View all products
+</UI>
+
+// ❌ Bad: Button without accessible name
+<UI as="button" onClick={handleClose}>
+  <CloseIcon />
+</UI>
+```
+
+See the [UI component Storybook stories](https://fpkit.netlify.app/?path=/story/fp-ui--accessibility-patterns) for more examples and anti-patterns to avoid.
+
+## 📦 Installation
+
+```bash
+npm install @fpkit/acss
+# or
+yarn add @fpkit/acss
+# or
+pnpm add @fpkit/acss
+```
+
+## 🚀 Quick Start
+
+### Option 1: Barrel Imports (Convenience)
+
+Perfect for rapid prototyping and when bundle size isn't critical:
+
+```tsx
+import { Button, Card, Input, Modal } from '@fpkit/acss';
+import '@fpkit/acss/styles';
+
+function App() {
+  return (
+    <div>
+      <Card>
+        <Card.Title>Welcome to FPKit</Card.Title>
+        <Card.Content>
+          <Input type="text" placeholder="Enter your name" />
+          <Button type="button">Submit</Button>
+        </Card.Content>
+      </Card>
+    </div>
+  );
+}
 ```
 
-### Usage
+### Option 2: Individual Imports (Tree-Shaking)
 
-```jsx
-import { FP, Badge } from @fpkit/fp
+Optimal for production builds and bundle size optimization:
 
-export App () {
+```tsx
+import { Button } from '@fpkit/acss/button';
+import { Card } from '@fpkit/acss/card';
+import { Input } from '@fpkit/acss/input';
+import '@fpkit/acss/styles';
+
+function App() {
   return (
-    <p>
-    <FP as='h3'>FP KIt <Badge elm="span" role="note">Beta</Badge>
-    </FP>
-    </p>
-  )
+    <div>
+      <Card>
+        <Card.Title>Welcome to FPKit</Card.Title>
+        <Card.Content>
+          <Input type="text" placeholder="Enter your name" />
+          <Button type="button">Submit</Button>
+        </Card.Content>
+      </Card>
+    </div>
+  );
 }
+```
+
+## 🧩 Core Components
+
+### Button
+
+Accessible button component with multiple variants:
+
+```tsx
+// Barrel import
+import { Button } from '@fpkit/acss';
+
+// Individual import
+import { Button } from '@fpkit/acss/button';
+
+// Usage
+<Button type="button" onClick={() => console.log('clicked')}>
+  Click me
+</Button>
+
+// With TypeScript
+import { Button, type ButtonProps } from '@fpkit/acss/button';
+
+const buttonProps: ButtonProps = {
+  type: 'submit',
+  disabled: false,
+  children: 'Submit Form'
+};
+```
+
+### Card
+
+Flexible card component with composable parts:
+
+```tsx
+// Individual import
+import { Card } from '@fpkit/acss/card';
+
+// Usage
+<Card>
+  <Card.Title>Card Title</Card.Title>
+  <Card.Content>
+    <p>This is the card content area.</p>
+  </Card.Content>
+  <Card.Footer>
+    <Button type="button">Action</Button>
+  </Card.Footer>
+</Card>
+
+// Custom styling
+<Card classes="custom-card" styles={{ padding: '2rem' }}>
+  <Card.Title>Styled Card</Card.Title>
+  <Card.Content>Content with custom styling</Card.Content>
+</Card>
+```
+
+### Modal
+
+Accessible modal dialog with focus management:
+
+```tsx
+import { Modal } from '@fpkit/acss/modal';
+
+<Modal
+  openChild="Open Modal"
+  closeChild="Close"
+  modalHeader={<h2>Modal Title</h2>}
+  modalFooter={
+    <div>
+      <Button type="button">Cancel</Button>
+      <Button type="button">Confirm</Button>
+    </div>
+  }
+>
+  <p>Modal content goes here.</p>
+</Modal>
+```
+
+### Input
+
+Form input component with validation support:
+
+```tsx
+import { Input } from '@fpkit/acss/input';
+
+<Input
+  type="email"
+  placeholder="Enter your email"
+  required
+  aria-label="Email address"
+/>
+
+// With field wrapper
+import { Field } from '@fpkit/acss';
+
+<Field>
+  <Field.Label>Email Address</Field.Label>
+  <Input type="email" placeholder="you@example.com" />
+  <Field.Error>Please enter a valid email</Field.Error>
+</Field>
+```
+
+### Navigation
+
+Semantic navigation components:
+
+```tsx
+import { Nav, NavList, NavItem } from '@fpkit/acss';
 
-export default App
+<Nav>
+  <NavList>
+    <NavItem>
+      <Link href="/">Home</Link>
+    </NavItem>
+    <NavItem>
+      <Link href="/about">About</Link>
+    </NavItem>
+    <NavItem>
+      <Link href="/contact">Contact</Link>
+    </NavItem>
+  </NavList>
+</Nav>
 ```
 
-### Components
+### Text & Typography
+
+Semantic text components:
+
+```tsx
+import { Text, Heading } from '@fpkit/acss';
+
+<Heading as="h1" size="xl">
+  Page Title
+</Heading>
+
+<Text as="p" size="lg">
+  This is a paragraph with large text.
+</Text>
+
+<Text as="span" variant="muted">
+  Muted text for secondary information.
+</Text>
+```
+
+## 🎨 Styling & Theming
+
+FPKit uses CSS custom properties for theming and styling:
+
+```css
+/* Global theme variables */
+:root {
+  --fp-color-primary: #007bff;
+  --fp-color-secondary: #6c757d;
+  --fp-spacing-sm: 0.5rem;
+  --fp-spacing-md: 1rem;
+  --fp-spacing-lg: 1.5rem;
+  --fp-border-radius: 0.375rem;
+}
+
+/* Component-specific styling */
+.custom-button {
+  --fp-button-bg: var(--fp-color-primary);
+  --fp-button-color: white;
+  --fp-button-padding: var(--fp-spacing-md);
+}
+```
+
+### Component Styling
+
+```tsx
+// Inline styles
+<Button styles={{ backgroundColor: 'red', color: 'white' }}>
+  Styled Button
+</Button>
+
+// CSS classes
+<Card classes="shadow-lg border-rounded">
+  <Card.Content>Styled card</Card.Content>
+</Card>
+
+// Data attributes for CSS targeting
+<Button data-variant="primary" data-size="large">
+  Data Attribute Styling
+</Button>
+```
+
+## 🛠️ Framework Integration
+
+### Next.js
+
+```tsx
+// pages/_app.tsx
+import '@fpkit/acss/styles';
+import type { AppProps } from 'next/app';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+// pages/index.tsx
+import { Button } from '@fpkit/acss/button';
+import { Card } from '@fpkit/acss/card';
+
+export default function Home() {
+  return (
+    <main>
+      <Card>
+        <Card.Title>Next.js + FPKit</Card.Title>
+        <Card.Content>
+          <Button type="button">Get Started</Button>
+        </Card.Content>
+      </Card>
+    </main>
+  );
+}
+```
+
+### Vite + React
+
+```tsx
+// main.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '@fpkit/acss/styles';
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+
+// App.tsx
+import { Button, Card } from '@fpkit/acss';
+
+function App() {
+  return (
+    <Card>
+      <Card.Title>Vite + React + FPKit</Card.Title>
+      <Card.Content>
+        <Button type="button">Hello World</Button>
+      </Card.Content>
+    </Card>
+  );
+}
+
+export default App;
+```
+
+## 📋 Available Components
+
+### Core UI Components
+
+- **Button** - Accessible button with variants
+- **Card** - Flexible card container with composable parts
+- **Modal** - Accessible modal dialog
+- **Dialog** - General purpose dialog component
+- **Input** - Form input with validation
+- **Field** - Form field wrapper with label and error
+- **Link** - Accessible link component
+- **List** - Semantic list components
+
+### Layout Components
+
+- **Box** - Generic container component
+- **Nav** - Navigation components
+- **Landmarks** - Semantic landmark components
+
+### Typography
+
+- **Text** - Semantic text component
+- **Heading** - Heading component with sizes
+
+### Media
+
+- **Icon** - SVG icon component
+- **Image** - Responsive image component
+
+### Data Display
+
+- **Table** - Accessible table components
+- **Tag** - Tag/badge component
+- **Badge** - Status badge component
+
+### Specialized
+
+- **TextToSpeech** - Text-to-speech component
+- **Popover** - Popover/tooltip component
+- **Breadcrumb** - Navigation breadcrumbs
+
+## 🎯 Import Strategies
+
+### When to Use Barrel Imports
+
+- Rapid prototyping
+- Small applications
+- When using many components
+- Development/testing environments
+
+### When to Use Individual Imports
+
+- Production applications
+- Performance-critical apps
+- When using few components
+- Library/package development
+
+### Bundle Size Comparison
+
+```bash
+# Barrel import (all components)
+import { Button, Card, Modal } from '@fpkit/acss';
+# Bundle size: ~45KB (example)
+
+# Individual imports (tree-shaken)
+import { Button } from '@fpkit/acss/button';
+import { Card } from '@fpkit/acss/card';
+import { Modal } from '@fpkit/acss/modal';
+# Bundle size: ~12KB (example)
+```
+
+## 🔧 TypeScript Support
+
+Full TypeScript support with comprehensive type definitions:
+
+```tsx
+import { Button, type ButtonProps } from '@fpkit/acss/button';
+import { Card, type CardProps } from '@fpkit/acss/card';
+
+// Type-safe props
+const buttonProps: ButtonProps = {
+  type: 'button',
+  onClick: (e) => console.log(e),
+  children: 'Click me'
+};
+
+// Component with proper typing
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
+```
+
+## 🧪 Testing
+
+Components are designed for easy testing:
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import { Button } from '@fpkit/acss/button';
+
+test('renders button with text', () => {
+  render(<Button type="button">Click me</Button>);
+  expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+});
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
 
-### License
+## 📄 License
 
 MIT License
 
-Copyright (c) 2022 Shawn Sandy
+Copyright (c) 2024 Shawn Sandy
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -45,7 +541,7 @@ copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

package/libs/chunk-23ANBDCR.js

@@ -0,0 +1,8 @@
+import { b } from './chunk-GCGKYLDG.js';
+import e from 'react';
+
+var P={display:"block",position:"absolute",background:"#000",border:"1px solid #010101",padding:"10px",color:"#fff",transition:"opacity .5s ease-in-out"},o=({children:n,popoverTrigger:l,styles:a,...d})=>{let t=e.useRef(null),r=e.useRef(null),{isVisible:p,popoverPosition:s,handlePointerEvent:v,handlePointerLeave:c}=b(t,r),f={opacity:p?1:0,top:s.top,left:s.left,zIndex:999};return e.createElement(e.Fragment,null,e.createElement("div",{ref:t,onPointerEnter:v,onPointerLeave:c,...d},l),p&&e.createElement("div",{ref:r,style:{...f,...a}},n))},x=o;o.displayName="Popover";o.styles=P;
+
+export { P as a, o as b, x as c };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-23ANBDCR.js.map

package/libs/chunk-23ANBDCR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/popover/popover.tsx"],"names":["React","defaultStyles","Popover","children","popoverTrigger","styles","props","hoverRef","popOverRef","isVisible","popoverPosition","handlePointerEvent","handlePointerLeave","use_popover_default","popoverStyles","popover_default"],"mappings":"wCAAA,OAAOA,MAAW,QAeX,IAAMC,EAAgB,CAC3B,QAAS,QACT,SAAU,WACV,WAAY,OACZ,OAAQ,oBACR,QAAS,OACT,MAAO,OACP,WAAY,yBACd,EAsBaC,EAAU,CAAC,CACtB,SAAAC,EACA,eAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAiC,CAC/B,IAAMC,EAAWP,EAAM,OAAO,IAAI,EAC5BQ,EAAaR,EAAM,OAAO,IAAI,EAC9B,CAAE,UAAAS,EAAW,gBAAAC,EAAiB,mBAAAC,EAAoB,mBAAAC,CAAmB,EACzEC,EAAWN,EAAUC,CAAU,EAC3BM,EAAgB,CACpB,QAASL,EAAY,EAAI,EACzB,IAAKC,EAAgB,IACrB,KAAMA,EAAgB,KAEtB,OAAQ,GACV,EAEA,OACEV,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC,OACC,IAAKO,EACL,eAAgBI,EAChB,eAAgBC,EACf,GAAGN,GAEHF,CACH,EACCK,GACCT,EAAA,cAAC,OAAI,IAAKQ,EAAY,MAAO,CAAE,GAAGM,EAAe,GAAGT,CAAO,GACxDF,CACH,CAEJ,CAEJ,EAEOY,EAAQb,EACfA,EAAQ,YAAc,UACtBA,EAAQ,OAASD","sourcesContent":["import React from 'react'\nimport usePopover from '#hooks/popover/use-popover'\n\n/**\n * Interface for props accepted by the Popover component\n *\n * @property {ReactNode} children - The content to show in the popover\n * @property {ReactNode} [content] - Optional alternative content for popover\n */\nexport type PopoverProps = {\n  children: React.ReactNode\n  popoverTrigger: React.ReactNode\n  styles?: {}\n}\n\nexport const defaultStyles = {\n  display: 'block',\n  position: 'absolute',\n  background: '#000',\n  border: '1px solid #010101',\n  padding: '10px',\n  color: '#fff',\n  transition: 'opacity .5s ease-in-out',\n} as React.CSSProperties\n\n/**\n * Popover component to display popover content.\n *\n * @param props - The props for the component\n * @param props.children - The content to show in the popover\n * @param props.popoverTrigger - The element that triggers the popover on hover\n *\n * @returns JSX.Element - The rendered JSX element for the Popover\n * @example - <Popover popoverTrigger={<button>Hover here</button>}>Popover content</Popover>\n *\n * The component uses the usePopover hook to handle popover visibility and positioning.\n *\n * It renders the triggerElement, and conditionally renders the popover content\n * positioned absolutely when visible.\n *\n * Inline styles handle visuals like background, border, padding, etc.\n *\n * Transforms and opacity animate the enter/exit transition of the popover.\n */\n\nexport const Popover = ({\n  children,\n  popoverTrigger,\n  styles,\n  ...props\n}: PopoverProps): JSX.Element => {\n  const hoverRef = React.useRef(null)\n  const popOverRef = React.useRef(null)\n  const { isVisible, popoverPosition, handlePointerEvent, handlePointerLeave } =\n    usePopover(hoverRef, popOverRef)\n  const popoverStyles = {\n    opacity: isVisible ? 1 : 0,\n    top: popoverPosition.top,\n    left: popoverPosition.left,\n    // transform: `translateY(${isVisible ? '0px' : '-50px'})`,\n    zIndex: 999,\n  } as React.CSSProperties\n\n  return (\n    <>\n      <div\n        ref={hoverRef}\n        onPointerEnter={handlePointerEvent}\n        onPointerLeave={handlePointerLeave}\n        {...props}\n      >\n        {popoverTrigger}\n      </div>\n      {isVisible && (\n        <div ref={popOverRef} style={{ ...popoverStyles, ...styles }}>\n          {children}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default Popover\nPopover.displayName = 'Popover'\nPopover.styles = defaultStyles\n"]}

package/libs/chunk-2LTJ7HHX.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunkXTQKWY7W_cjs = require('./chunk-XTQKWY7W.cjs');
+var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
+var r = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var r__default = /*#__PURE__*/_interopDefault(r);
+
+var n=({isBlock:t,children:o,...s})=>r__default.default.createElement(chunkXTQKWY7W_cjs.c,{type:"ul",...s,"data-list":`unstyled ${t?"block":""}`},o),L=({id:t,styles:o,classes:s,children:i,...m})=>r__default.default.createElement(chunkXTQKWY7W_cjs.c.ListItem,{type:"li",id:t,classes:s,styles:o,...m},i),e=({children:t,...o})=>r__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"nav",...o},t),N=e;e.displayName="Nav";e.List=n;e.Item=L;
+
+exports.a = n;
+exports.b = L;
+exports.c = e;
+exports.d = N;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-2LTJ7HHX.cjs.map

package/libs/chunk-2LTJ7HHX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/nav/nav.tsx"],"names":["React","NavList","isBlock","children","props","list_default","NavItem","id","styles","classes","Nav","ui_default","nav_default"],"mappings":"6EAEA,OAAOA,MAAW,QAgBX,IAAMC,EAAU,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAM,IAElDJ,EAAA,cAACK,EAAA,CAAK,KAAK,KAAM,GAAGD,EAAO,YAAW,YAAYF,EAAU,QAAU,EAAE,IACrEC,CACH,EAeSG,EAAU,CAAC,CACtB,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAN,EACA,GAAGC,CACL,IAEIJ,EAAA,cAACK,EAAK,SAAL,CACC,KAAK,KACL,GAAIE,EACJ,QAASE,EACT,OAAQD,EACP,GAAGJ,GAEHD,CACH,EAWSO,EAAM,CAAC,CAAE,SAAAP,EAAU,GAAGC,CAAM,IAErCJ,EAAA,cAACW,EAAA,CAAG,GAAG,MAAO,GAAGP,GACdD,CACH,EAIGS,EAAQF,EACfA,EAAI,YAAc,MAClBA,EAAI,KAAOT,EACXS,EAAI,KAAOJ","sourcesContent":["import UI from '../ui'\nimport List from '../list/list'\nimport React from 'react'\n\nexport type NavListProps = React.ComponentProps<typeof List> & {\n  isBlock?: boolean\n}\nexport type NavItemProps = React.ComponentProps<typeof List.ListItem>\n\nexport type NavProps = React.ComponentProps<typeof UI>\n\n/**\n * Renders a NavList component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the List component.\n * @returns {JSX.Element} The rendered NavList component.\n */\nexport const NavList = ({ isBlock, children, ...props }: NavListProps) => {\n  return (\n    <List type=\"ul\" {...props} data-list={`unstyled ${isBlock ? 'block' : ''}`}>\n      {children}\n    </List>\n  )\n}\n\n/**\n * Renders a NavItem component.\n * @param {Object} props - The props for the component.\n * @param {string} [props.id] - The id for the component.\n * @param {Object} [props.styles] - The styles for the component.\n * @param {string} [props.classes] - The classes for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {boolean} [props.inline=true] - Whether the item should display inline.\n * @param {Object} props - Additional props to spread to the ListItem component.\n * @returns {JSX.Element} The rendered NavItem component.\n */\nexport const NavItem = ({\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: NavItemProps) => {\n  return (\n    <List.ListItem\n      type=\"li\"\n      id={id}\n      classes={classes}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </List.ListItem>\n  )\n}\n\n/**\n * Renders a Nav component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the UI component.\n * @returns {JSX.Element} The rendered Nav component.\n */\nexport const Nav = ({ children, ...props }: NavProps) => {\n  return (\n    <UI as=\"nav\" {...props}>\n      {children}\n    </UI>\n  )\n}\n\nexport default Nav\nNav.displayName = 'Nav'\nNav.List = NavList\nNav.Item = NavItem\n"]}

package/libs/chunk-2Y7W75TT.js

@@ -0,0 +1,9 @@
+import { c } from './chunk-SMYRLO3E.js';
+import { a } from './chunk-KUKIVRC2.js';
+import r from 'react';
+
+var n=({isBlock:t,children:o,...s})=>r.createElement(c,{type:"ul",...s,"data-list":`unstyled ${t?"block":""}`},o),L=({id:t,styles:o,classes:s,children:i,...m})=>r.createElement(c.ListItem,{type:"li",id:t,classes:s,styles:o,...m},i),e=({children:t,...o})=>r.createElement(a,{as:"nav",...o},t),N=e;e.displayName="Nav";e.List=n;e.Item=L;
+
+export { n as a, L as b, e as c, N as d };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-2Y7W75TT.js.map

package/libs/chunk-2Y7W75TT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/nav/nav.tsx"],"names":["React","NavList","isBlock","children","props","list_default","NavItem","id","styles","classes","Nav","ui_default","nav_default"],"mappings":"2EAEA,OAAOA,MAAW,QAgBX,IAAMC,EAAU,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAM,IAElDJ,EAAA,cAACK,EAAA,CAAK,KAAK,KAAM,GAAGD,EAAO,YAAW,YAAYF,EAAU,QAAU,EAAE,IACrEC,CACH,EAeSG,EAAU,CAAC,CACtB,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAN,EACA,GAAGC,CACL,IAEIJ,EAAA,cAACK,EAAK,SAAL,CACC,KAAK,KACL,GAAIE,EACJ,QAASE,EACT,OAAQD,EACP,GAAGJ,GAEHD,CACH,EAWSO,EAAM,CAAC,CAAE,SAAAP,EAAU,GAAGC,CAAM,IAErCJ,EAAA,cAACW,EAAA,CAAG,GAAG,MAAO,GAAGP,GACdD,CACH,EAIGS,EAAQF,EACfA,EAAI,YAAc,MAClBA,EAAI,KAAOT,EACXS,EAAI,KAAOJ","sourcesContent":["import UI from '../ui'\nimport List from '../list/list'\nimport React from 'react'\n\nexport type NavListProps = React.ComponentProps<typeof List> & {\n  isBlock?: boolean\n}\nexport type NavItemProps = React.ComponentProps<typeof List.ListItem>\n\nexport type NavProps = React.ComponentProps<typeof UI>\n\n/**\n * Renders a NavList component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the List component.\n * @returns {JSX.Element} The rendered NavList component.\n */\nexport const NavList = ({ isBlock, children, ...props }: NavListProps) => {\n  return (\n    <List type=\"ul\" {...props} data-list={`unstyled ${isBlock ? 'block' : ''}`}>\n      {children}\n    </List>\n  )\n}\n\n/**\n * Renders a NavItem component.\n * @param {Object} props - The props for the component.\n * @param {string} [props.id] - The id for the component.\n * @param {Object} [props.styles] - The styles for the component.\n * @param {string} [props.classes] - The classes for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {boolean} [props.inline=true] - Whether the item should display inline.\n * @param {Object} props - Additional props to spread to the ListItem component.\n * @returns {JSX.Element} The rendered NavItem component.\n */\nexport const NavItem = ({\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: NavItemProps) => {\n  return (\n    <List.ListItem\n      type=\"li\"\n      id={id}\n      classes={classes}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </List.ListItem>\n  )\n}\n\n/**\n * Renders a Nav component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the UI component.\n * @returns {JSX.Element} The rendered Nav component.\n */\nexport const Nav = ({ children, ...props }: NavProps) => {\n  return (\n    <UI as=\"nav\" {...props}>\n      {children}\n    </UI>\n  )\n}\n\nexport default Nav\nNav.displayName = 'Nav'\nNav.List = NavList\nNav.Item = NavItem\n"]}