@fpkit/acss 0.5.9 → 0.5.12

package/README.md

@@ -1,37 +1,444 @@
-# 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
+
+## 📦 Installation
 
 ```bash
-npm i @fpkit/react
+npm install @fpkit/acss
+# or
+yarn add @fpkit/acss
+# or
+pnpm add @fpkit/acss
 ```
 
-### Usage
+## 🚀 Quick Start
 
-```jsx
-import { FP, Badge } from @fpkit/fp
+### Option 1: Barrel Imports (Convenience)
 
-export App () {
+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 (
-    <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>
+  );
 }
+```
+
+### Option 2: Individual Imports (Tree-Shaking)
+
+Optimal for production builds and bundle size optimization:
+
+```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 (
+    <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
 
-export default App
+### 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'
+};
 ```
 
-### Components
+### 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';
+
+<Nav>
+  <NavList>
+    <NavItem>
+      <Link href="/">Home</Link>
+    </NavItem>
+    <NavItem>
+      <Link href="/about">About</Link>
+    </NavItem>
+    <NavItem>
+      <Link href="/contact">Contact</Link>
+    </NavItem>
+  </NavList>
+</Nav>
+```
+
+### 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 +452,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-5M57K4SW.js

@@ -0,0 +1,8 @@
+import { a } from './chunk-P7TTEYCD.js';
+import r from 'react';
+
+var s=({children:o,...e})=>r.createElement(a,{as:"caption",...e},o),m=({children:o,...e})=>r.createElement(a,{as:"thead",...e},o),d=({children:o,...e})=>r.createElement(a,{as:"tbody",...e},o),i=({children:o,...e})=>r.createElement(a,{as:"tr",...e},o),y=({children:o,...e})=>r.createElement(a,{as:"td",...e},o),T=({id:o,dataStyle:e,children:n,...a$1})=>r.createElement(a,{as:"section",id:o,...a$1,"data-style":"table-wrapper"},r.createElement("table",null,n));T.displayName="Table";s.displayName="Caption";m.displayName="Thead";d.displayName="Tbody";i.displayName="Tr";y.displayName="Td";var l=o=>{let e=o.map((n,a)=>r.createElement("th",{key:a},n));return r.createElement("tr",null,e)},b=o=>{let e=o.map((n,a)=>r.createElement("tr",{key:a}));return r.createElement(d,null,e)},P=({tblBody:o,tblCaption:e,tblHead:n})=>r.createElement(T,null,e&&r.createElement(s,null,e),r.createElement(m,null,r.createElement(i,null,n)),r.createElement(d,null,o));P.displayName="TBL";b.displayName="renderBody";l.displayName="renderHead";
+
+export { s as a, m as b, d as c, i as d, y as e, T as f, l as g, b as h, P as i };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-5M57K4SW.js.map

package/libs/chunk-5M57K4SW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tables/table-elements.tsx","../src/components/tables/table.tsx"],"names":["React","Caption","children","props","fp_default","Thead","Tbody","Tr","Td","Table","id","dataStyle","RenderHead","data","head","item","index","RenderBody","rec","RenderTable","tblBody","tblCaption","tblHead"],"mappings":"wCAEA,OAAOA,MAAW,QAGX,IAAMC,EAAU,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,IAEzCH,EAAA,cAACI,EAAA,CAAG,GAAG,UAAW,GAAGD,GAClBD,CACH,EAISG,EAAQ,CAAC,CAAE,SAAAH,EAAU,GAAGC,CAAM,IACzCH,EAAA,cAACI,EAAA,CAAG,GAAG,QAAS,GAAGD,GAChBD,CACH,EAGWI,EAAQ,CAAC,CAAE,SAAAJ,EAAU,GAAGC,CAAM,IACzCH,EAAA,cAACI,EAAA,CAAG,GAAG,QAAS,GAAGD,GAChBD,CACH,EAGWK,EAAK,CAAC,CAAE,SAAAL,EAAU,GAAGC,CAAM,IACtCH,EAAA,cAACI,EAAA,CAAG,GAAG,KAAM,GAAGD,GACbD,CACH,EAGWM,EAAK,CAAC,CAAE,SAAAN,EAAU,GAAGC,CAAM,IACtCH,EAAA,cAACI,EAAA,CAAG,GAAG,KAAM,GAAGD,GACbD,CACH,EAGWO,EAAQ,CAAC,CAAE,GAAAC,EAAI,UAAAC,EAAW,SAAAT,EAAU,GAAGC,CAAM,IAEtDH,EAAA,cAACI,EAAA,CACC,GAAG,UACH,GAAIM,EACH,GAAGP,EACJ,aAAW,iBAEXH,EAAA,cAAC,aAAOE,CAAS,CACnB,EAIJO,EAAM,YAAc,QACpBR,EAAQ,YAAc,UACtBI,EAAM,YAAc,QACpBC,EAAM,YAAc,QACpBC,EAAG,YAAc,KACjBC,EAAG,YAAc,KCpDjB,OAAOR,MAAW,QAaX,IAAMY,EAAcC,GAAa,CACtC,IAAMC,EAAOD,EAAK,IAAI,CAACE,EAAMC,IACpBhB,EAAA,cAAC,MAAG,IAAKgB,GAAQD,CAAK,CAC9B,EACD,OAAOf,EAAA,cAAC,UAAIc,CAAK,CACnB,EAKaG,EAAcJ,GAAe,CACxC,IAAMK,EAAML,EAAK,IAAI,CAACE,EAAMC,IAExBhB,EAAA,cAAC,MAAG,IAAKgB,EAGT,CAEH,EACD,OAAOhB,EAAA,cAACM,EAAA,KAAOY,CAAI,CACrB,EAMaC,EAAc,CAAC,CAAE,QAAAC,EAAS,WAAAC,EAAY,QAAAC,CAAQ,IAEvDtB,EAAA,cAACS,EAAA,KACEY,GAAcrB,EAAA,cAACC,EAAA,KAASoB,CAAW,EACpCrB,EAAA,cAACK,EAAA,KACCL,EAAA,cAACO,EAAA,KAAIe,CAAQ,CACf,EACAtB,EAAA,cAACM,EAAA,KAAOc,CAAQ,CAClB,EAIJD,EAAY,YAAc,MAC1BF,EAAW,YAAc,aACzBL,EAAW,YAAc","sourcesContent":["import FP from '../fp'\nimport { ComponentProps } from '../../types'\nimport React from 'react'\n\n\nexport const Caption = ({ children, ...props }: ComponentProps) => {\n  return (\n    <FP as=\"caption\" {...props}>\n      {children}\n    </FP>\n  )\n}\n\nexport const Thead = ({ children, ...props }: ComponentProps) => (\n  <FP as=\"thead\" {...props}>\n    {children}\n  </FP>\n)\n\nexport const Tbody = ({ children, ...props }: ComponentProps) => (\n  <FP as=\"tbody\" {...props}>\n    {children}\n  </FP>\n)\n\nexport const Tr = ({ children, ...props }: ComponentProps) => (\n  <FP as=\"tr\" {...props}>\n    {children}\n  </FP>\n)\n\nexport const Td = ({ children, ...props }: ComponentProps) => (\n  <FP as=\"td\" {...props}>\n    {children}\n  </FP>\n)\n\nexport const Table = ({ id, dataStyle, children, ...props }: ComponentProps) => {\n  return (\n    <FP\n      as=\"section\"\n      id={id}\n      {...props}\n      data-style=\"table-wrapper\"\n    >\n      <table>{children}</table>\n    </FP>\n  )\n}\n\nTable.displayName = 'Table'\nCaption.displayName = 'Caption'\nThead.displayName = 'Thead'\nTbody.displayName = 'Tbody'\nTr.displayName = 'Tr'\nTd.displayName = 'Td'\n\n","import { Table, Caption, Thead, Tbody, Td, Tr } from './table-elements'\nimport { ComponentProps } from '../../types'\n\nimport React from 'react'\n\nexport interface TableProps extends ComponentProps {\n  tblHead: React.ReactNode\n  tblBody: React.ReactNode\n  tblCaption?: React.ReactNode\n}\n\nexport type dataType = { id: number; items: string[] }[]\n\n/**\n * Render the `thead` by passing an array of names\n */\nexport const RenderHead = (data: []) => {\n  const head = data.map((item, index) => {\n    return <th key={index}>{item}</th>\n  })\n  return <tr>{head}</tr>\n}\n\n/**\n * Render the table body `tr`, `td` with the data provided\n */\nexport const RenderBody = (data: {}[]) => {\n  const rec = data.map((item, index) => {\n    return (\n      <tr key={index}>\n        {/* <td>{item?.id}</td>\n        <td>{item?.items}</td> */}\n      </tr>\n    )\n  })\n  return <Tbody>{rec}</Tbody>\n}\n\n/**\n * Render the table placing `caption`, `thead` and `tbody` in the correct order\n * caption is optional\n */\nexport const RenderTable = ({ tblBody, tblCaption, tblHead }: TableProps) => {\n  return (\n    <Table>\n      {tblCaption && <Caption>{tblCaption}</Caption>}\n      <Thead>\n        <Tr>{tblHead}</Tr>\n      </Thead>\n      <Tbody>{tblBody}</Tbody>\n    </Table>\n  )\n}\n\nRenderTable.displayName = 'TBL'\nRenderBody.displayName = 'renderBody'\nRenderHead.displayName = 'renderHead'\n"]}

package/libs/chunk-5ZM4XL44.js

@@ -0,0 +1,8 @@
+import { a as a$1 } from './chunk-NE6YXTMC.js';
+import m from 'react';
+
+var a=({href:i,target:e,rel:p,children:l,styles:s,prefetch:t,btnStyle:c,onPointerDown:n,...f})=>{let r=p;return e==="_blank"&&(r=`noopener noreferrer ${t?"prefetch":""}`),m.createElement(a$1,{as:"a",href:i,target:e,styles:s,rel:r,onPointerDown:h=>{n&&n?.(h);},"data-btn":c,prefetch:t,...f},l)},y=a;a.displayName="Link";
+
+export { a, y as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-5ZM4XL44.js.map

package/libs/chunk-5ZM4XL44.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/link/link.tsx"],"names":["React","Link","href","target","rel","children","styles","prefetch","btnStyle","onPointerDown","props","relValue","ui_default","e","link_default"],"mappings":"wCACA,OAAOA,MAAW,QAqBX,IAAMC,EAAO,CAAC,CACnB,KAAAC,EACA,OAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAAiB,CACf,IAAIC,EAAWP,EAEf,OAAID,IAAW,WACbQ,EAAW,uBAAuBJ,EAAW,WAAa,EAAE,IAO5DP,EAAA,cAACY,EAAA,CACC,GAAG,IACH,KAAMV,EACN,OAAQC,EACR,OAAQG,EACR,IAAKK,EACL,cAXyBE,GAA6C,CACpEJ,GAAeA,IAAgBI,CAAC,CACtC,EAUI,WAAUL,EACV,SAAUD,EACT,GAAGG,GAEHL,CACH,CAEJ,EAEOS,EAAQb,EACfA,EAAK,YAAc","sourcesContent":["import UI from \"../ui\";\nimport React from \"react\";\n\nexport type LinkProps = {\n  href?: string;\n\n  target?: string;\n\n  rel?: string;\n\n  children: React.ReactNode;\n\n  styles?: React.CSSProperties;\n\n  prefetch?: boolean;\n\n  btnStyle?: string;\n\n  onPointerDown?: (event: React.PointerEvent<HTMLAnchorElement>) => void;\n} & React.ComponentProps<typeof UI> &\n  React.ComponentProps<\"a\">;\n\nexport const Link = ({\n  href,\n  target,\n  rel,\n  children,\n  styles,\n  prefetch,\n  btnStyle,\n  onPointerDown,\n  ...props\n}: LinkProps) => {\n  let relValue = rel;\n\n  if (target === \"_blank\")\n    relValue = `noopener noreferrer ${prefetch ? \"prefetch\" : \"\"}`;\n\n  const handleOnpointerDown = (e: React.PointerEvent<HTMLAnchorElement>) => {\n    if (onPointerDown) onPointerDown?.(e);\n  };\n\n  return (\n    <UI\n      as=\"a\"\n      href={href}\n      target={target}\n      styles={styles}\n      rel={relValue}\n      onPointerDown={handleOnpointerDown}\n      data-btn={btnStyle}\n      prefetch={prefetch}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nexport default Link;\nLink.displayName = \"Link\";\n"]}

package/libs/chunk-6BVXFW7U.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var chunk6TE5QEVE_cjs = require('./chunk-6TE5QEVE.cjs');
+var t = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var t__default = /*#__PURE__*/_interopDefault(t);
+
+var l=({label:o,labelFor:a,id:r,styles:p,classes:d,children:s,...i})=>t__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"div",id:r,styles:p,className:d,"data-style":"fields",...i},t__default.default.createElement("label",{htmlFor:a},o),s),n=l;l.displayName="Field";
+
+exports.a = l;
+exports.b = n;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-6BVXFW7U.cjs.map

package/libs/chunk-6BVXFW7U.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/fields.tsx"],"names":["React","Field","label","labelFor","id","styles","classes","children","props","ui_default","fields_default"],"mappings":"yCAAA,OAAOA,MAAW,QAmBX,IAAMC,EAAQ,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAEIR,EAAA,cAACS,EAAA,CACC,GAAG,MACH,GAAIL,EACJ,OAAQC,EACR,UAAWC,EACX,aAAW,SACV,GAAGE,GAEJR,EAAA,cAAC,SAAM,QAASG,GAAWD,CAAM,EAChCK,CACH,EAIGG,EAAQT,EACfA,EAAM,YAAc","sourcesContent":["import React from 'react'\nimport UI from '../ui'\n\nexport type FieldProps = {\n  /**\n   * The label content\n   */\n  label: React.ReactNode\n  children: React.ReactNode\n} & React.ComponentProps<'label'> &\n  Partial<React.ComponentProps<typeof UI>>\n/**\n * Field component that renders a label and children wrapped in a div element.\n * @param labelFor Defines the for attribute of the label element\n * @param styles Custom styles to be applied to the component\n * @param label The label content\n * @param children The children to be rendered inside the component\n * @param props Additional props to be spread to the component\n */\nexport const Field = ({\n  label,\n  labelFor,\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: FieldProps) => {\n  return (\n    <UI\n      as=\"div\"\n      id={id}\n      styles={styles}\n      className={classes}\n      data-style=\"fields\"\n      {...props}\n    >\n      <label htmlFor={labelFor}>{label}</label>\n      {children}\n    </UI>\n  )\n}\n\nexport default Field\nField.displayName = 'Field'\n"]}

package/libs/chunk-6TE5QEVE.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var e = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var e__default = /*#__PURE__*/_interopDefault(e);
+
+var t=e__default.default.forwardRef(({as:o,styles:p,classes:n,children:r,defaultStyles:s,...P},m)=>{let C=o??"div",a={...s,...p};return e__default.default.createElement(C,{ref:m,style:a,className:n,...P},r)}),y=t;t.displayName="FP";
+
+exports.a = y;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-6TE5QEVE.cjs.map

package/libs/chunk-6TE5QEVE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui.tsx"],"names":["React","FP","as","styles","classes","children","defaultStyles","props","ref","Component","styleObj","ui_default"],"mappings":"AAEA,OAAOA,MAAW,QAgDlB,IAAMC,EAAkBD,EAAM,WAC5B,CACE,CAAE,GAAAE,EAAI,OAAAC,EAAQ,QAAAC,EAAS,SAAAC,EAAU,cAAAC,EAAe,GAAGC,CAAM,EACzDC,IACG,CACH,IAAMC,EAAYP,GAAM,MAElBQ,EAAgC,CAAE,GAAGJ,EAAe,GAAGH,CAAO,EAEpE,OACEH,EAAA,cAACS,EAAA,CAAU,IAAKD,EAAK,MAAOE,EAAU,UAAWN,EAAU,GAAGG,GAC3DF,CACH,CAEJ,CACF,EAEOM,EAAQV,EAEfA,EAAG,YAAc","sourcesContent":[" \n/* eslint-disable */\nimport React from \"react\";\n\ntype PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\ntype AsProp<C extends React.ElementType> = {\n  as?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\ntype PolymorphicComponentProp<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;\n\ntype PolymorphicComponentPropWithRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponentProp<C, Props> & {\n  ref?: PolymorphicRef<C>;\n};\n\ntype FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<\n  C,\n  {\n    renderStyles?: boolean;\n    styles?: React.CSSProperties;\n    classes?: string;\n    id?: string;\n    children?: React.ReactNode;\n  }\n>;\n\n/*\n * FPComponent type definition\n *\n * Defines the component function signature for the FP component.\n *\n * @typeParam C - The HTML element type to render\n * @param props - The component props\n * @returns React component\n */\ntype FPComponent = <C extends React.ElementType = \"span\">(\n  props: FPProps<C>\n) => React.ReactElement | (any & { displayName?: String });\n\nconst FP: FPComponent = React.forwardRef(\n  <C extends React.ElementType>(\n    { as, styles, classes, children, defaultStyles, ...props }: FPProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as ?? \"div\";\n\n    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles };\n\n    return (\n      <Component ref={ref} style={styleObj} className={classes} {...props}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport default FP;\n// @ts-expect-error -- React component displayName\nFP.displayName = \"FP\";\n"]}

package/libs/chunk-7K76RW2A.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunkM5QL5TAE_cjs = require('./chunk-M5QL5TAE.cjs');
+var chunkKKLTUJFB_cjs = require('./chunk-KKLTUJFB.cjs');
+var chunkLHVJKDMA_cjs = require('./chunk-LHVJKDMA.cjs');
+var chunk6TE5QEVE_cjs = require('./chunk-6TE5QEVE.cjs');
+var r = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var r__default = /*#__PURE__*/_interopDefault(r);
+
+var k=({dialogTitle:e,onClick:o,type:i="h3"})=>r__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"div",classes:"dialog-header"},r__default.default.createElement(chunkM5QL5TAE_cjs.a,{type:i,className:"dialog-title"},e||"Dialog"),r__default.default.createElement(chunkLHVJKDMA_cjs.b,{type:"button",onClick:()=>{o();},className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},r__default.default.createElement(chunkKKLTUJFB_cjs.b,null,r__default.default.createElement(chunkKKLTUJFB_cjs.b.Remove,{size:16})))),y=r__default.default.memo(k);k.displayName="DialogHeader";var E=({onClose:e,onConfirm:o,confirmLabel:i,cancelLabel:t})=>r__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"section",className:"dialog-footer"},t&&r__default.default.createElement(chunkLHVJKDMA_cjs.b,{type:"button",onClick:e,className:"dialog-button button-secondary","data-btn":"sm"},t),o&&r__default.default.createElement(chunkLHVJKDMA_cjs.b,{type:"button",onClick:o,className:"dialog-button button-primary","data-btn":"sm"},i)),P=E;var H=(e,o)=>r.useCallback(t=>{let l=e.current?.getBoundingClientRect();l&&(t.clientY<l.top||t.clientY>l.bottom||t.clientX<l.left||t.clientX>l.right)&&o();},[e,o]);var x=({showDialog:e,isAlertDialog:o,onClose:i,dialogTitle:t,dialogLabel:l,children:u,onConfirm:h,confirmLabel:I="Confirm",cancelLabel:L="Cancel",className:C="",hideFooter:N,styles:M})=>{let m=r.useRef(null),[g,b]=r__default.default.useState(e);r.useEffect(()=>{b(e);},[e]),r.useEffect(()=>{let n=m.current;n&&(g?o?n.show():n.showModal():n.close());},[g,o]);let c=()=>{i&&i(),b(!1);},U=H(m,c);return r__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"dialog",role:o?"alertdialog":"dialog",ref:m,onClose:c,onClick:U,"aria-modal":g?"true":void 0,className:`dialog-modal ${C}`,"aria-label":l,style:M},r__default.default.createElement(y,{dialogTitle:t,onClick:c}),r__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"section",className:`dialog-content ${C}`,onClick:n=>n.stopPropagation()},u,!N&&r__default.default.createElement(P,{onClose:c,onConfirm:h,confirmLabel:I,cancelLabel:L})))},A=r__default.default.memo(x);
+
+exports.a = x;
+exports.b = A;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-7K76RW2A.cjs.map

package/libs/chunk-7K76RW2A.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dialog/dialog.tsx","../src/components/dialog/views/dialog-header.tsx","../src/components/dialog/views/dialog-footer.tsx","../src/hooks/useDialogClickHandler.ts"],"names":["React","useRef","useEffect","DialogHeader","dialogTitle","onClick","type","ui_default","heading_default","button_default","icon_default","dialog_header_default","DialogFooter","onClose","onConfirm","confirmLabel","cancelLabel","dialog_footer_default","useCallback","useDialogClickHandler","dialogRef","handleClose","e","dialogDimensions","Dialog","showDialog","isAlertDialog","dialogLabel","children","className","hideFooter","styles","isOpen","setIsOpen","dialog","handleClickOutside","dialog_default"],"mappings":"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","sourcesContent":["import React, { useRef, useEffect, CSSProperties } from \"react\";\nimport UI from \"#components/ui\";\nimport DialogHeader from \"#components/dialog/views/dialog-header\";\nimport DialogFooter from \"#components/dialog/views/dialog-footer\";\nimport { useDialogClickHandler } from \"#hooks/useDialogClickHandler.js\";\n\n/**\n * Defines the props for the Dialog component.\n *\n * @property {boolean} [showDialog] - Determines whether the dialog should be shown.\n * @property {boolean} [isAlertDialog] - Determines whether the dialog should be displayed as an alert dialog.\n * @property {() => void} [onClose] - A callback function to be called when the dialog is closed.\n * @property {string} dialogTitle - The title of the dialog.\n * @property {string} [dialogLabel] - An optional label for the dialog.\n * @property {React.ReactNode} children - The content to be displayed inside the dialog.\n * @property {() => void | Promise<void>} [onConfirm] - A callback function to be called when the user confirms the dialog.\n * @property {string} [confirmLabel] - The label for the confirm button.\n * @property {string} [cancelLabel] - The label for the cancel button.\n * @property {string} [className] - An optional CSS class name to be applied to the dialog.\n * @property {CSSProperties} [styles] - Optional inline styles to be applied to the dialog.\n */\ntype DialogModalProps = React.ComponentProps<typeof UI> &\n  React.ComponentProps<\"dialog\"> & {\n    dialogTitle: string;\n    dialogLabel?: string;\n    children: React.ReactNode;\n    showDialog?: boolean;\n    isAlertDialog?: boolean;\n    onClose?: () => void;\n    onConfirm?: () => void | Promise<void>;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    className?: string;\n    hideFooter?: boolean;\n    styles?: CSSProperties;\n  };\n\n/**\n * Renders a dialog modal component with customizable content and behavior.\n *\n * @param showDialog - Determines whether the dialog should be shown.\n * @param isAlertDialog - Determines whether the dialog should be displayed as an alert dialog.\n * @param onClose - A callback function to be called when the dialog is closed.\n * @param dialogTitle - The title of the dialog.\n * @param dialogLabel - An optional label for the dialog.\n * @param children - The content to be displayed inside the dialog.\n * @param onConfirm - A callback function to be called when the user confirms the dialog.\n * @param confirmLabel - The label for the confirm button.\n * @param cancelLabel - The label for the cancel button.\n * @param className - An optional CSS class name to be applied to the dialog.\n * @param styles - Optional inline styles to be applied to the dialog.\n */\nexport const Dialog: React.FC<DialogModalProps> = ({\n  showDialog,\n  isAlertDialog,\n  onClose,\n  dialogTitle,\n  dialogLabel,\n  children,\n  onConfirm,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  className = \"\",\n  hideFooter,\n  styles,\n}) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const [isOpen, setIsOpen] = React.useState(showDialog);\n\n  useEffect(() => {\n    setIsOpen(showDialog);\n  }, [showDialog]);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (isOpen) {\n      if (isAlertDialog) {\n        dialog.show();\n      } else {\n        dialog.showModal();\n      }\n    } else {\n      dialog.close();\n    }\n  }, [isOpen, isAlertDialog]);\n\n  const handleClose = () => {\n    if (onClose) onClose();\n    setIsOpen(false);\n  };\n\n  const handleClickOutside = useDialogClickHandler(dialogRef, handleClose);\n\n  return (\n    <UI\n      as=\"dialog\"\n      role={isAlertDialog ? \"alertdialog\" : \"dialog\"}\n      ref={dialogRef}\n      onClose={handleClose}\n      onClick={handleClickOutside}\n      aria-modal={isOpen ? \"true\" : undefined}\n      className={`${\"dialog-modal\"} ${className}`}\n      aria-label={dialogLabel}\n      style={styles}\n    >\n      <DialogHeader dialogTitle={dialogTitle} onClick={handleClose} />\n\n      <UI\n        as=\"section\"\n        className={`dialog-content ${className}`}\n        onClick={(e: React.MouseEvent) => e.stopPropagation()}\n      >\n        {children}\n        {!hideFooter && (\n          <DialogFooter\n            onClose={handleClose}\n            onConfirm={onConfirm}\n            confirmLabel={confirmLabel}\n            cancelLabel={cancelLabel}\n          />\n        )}\n      </UI>\n    </UI>\n  );\n};\nexport default React.memo(Dialog);\n","import React from \"react\";\nimport UI from \"#components/ui\";\nimport Heading from \"#components/heading/heading\";\nimport Button from \"#components/buttons/button\";\nimport Icon from \"#components/icons/icon\";\n\nexport type DialogHeaderProps = {\n  dialogTitle: string;\n  onClick: () => void;\n} & React.ComponentProps<typeof Heading>;\n\n/**\n * DialogHeader component displays the header section of a dialog with a title and close button.\n *\n * @component\n * @param {Object} props - Component props\n * @param {string} props.dialogTitle - The title text to display in the dialog header\n * @param {() => void} props.onClick - Callback function triggered when close button is clicked\n * @param {string} [props.type='h3'] - Heading type/level to use for the title\n * @returns {JSX.Element} A dialog header with title and close button\n *\n * @example\n * ```jsx\n * <DialogHeader\n *   dialogTitle=\"Confirm Action\"\n *   onClick={() => setIsOpen(false)}\n *   type=\"h2\"\n * />\n * ```\n */\n\nconst DialogHeader = ({\n  dialogTitle,\n  onClick,\n  type = \"h3\",\n}: DialogHeaderProps): JSX.Element => {\n  const handleClose = () => {\n    onClick();\n  };\n  return (\n    <UI as=\"div\" classes=\"dialog-header\">\n      <Heading type={type} className=\"dialog-title\">\n        {dialogTitle || \"Dialog\"}\n      </Heading>\n      <Button\n        type=\"button\"\n        onClick={handleClose}\n        className=\"dialog-close\"\n        aria-label=\"Close dialog\"\n        data-btn=\"icon\"\n      >\n        <Icon>\n          <Icon.Remove size={16} />\n        </Icon>\n      </Button>\n    </UI>\n  );\n};\n\nexport default React.memo(DialogHeader);\nDialogHeader.displayName = \"DialogHeader\";\n","import React from \"react\";\nimport UI from \"#components/ui\";\nimport Button from \"#components/buttons/button\";\n\ntype DialogFooterProps = {\n  onClose: () => void;\n  onConfirm?: () => void | Promise<void>;\n  confirmLabel: string;\n  cancelLabel: string;\n};\n\nconst DialogFooter: React.FC<DialogFooterProps> = ({\n  onClose,\n  onConfirm,\n  confirmLabel,\n  cancelLabel,\n}) => {\n  return (\n    <UI as=\"section\" className=\"dialog-footer\">\n      {cancelLabel && (\n        <Button\n          type=\"button\"\n          onClick={onClose}\n          className=\"dialog-button button-secondary\"\n          data-btn=\"sm\"\n        >\n          {cancelLabel}\n        </Button>\n      )}\n\n      {onConfirm && (\n        <Button\n          type=\"button\"\n          onClick={onConfirm}\n          className=\"dialog-button button-primary\"\n          data-btn=\"sm\"\n        >\n          {confirmLabel}\n        </Button>\n      )}\n    </UI>\n  );\n};\n\nexport default DialogFooter;\n","import { useCallback, RefObject } from \"react\";\n\nexport const useDialogClickHandler = (\n  dialogRef: RefObject<HTMLDialogElement>,\n  handleClose: () => void\n) => {\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDialogElement>) => {\n      const dialogDimensions = dialogRef.current?.getBoundingClientRect();\n      if (dialogDimensions) {\n        const isClickOutside =\n          e.clientY < dialogDimensions.top ||\n          e.clientY > dialogDimensions.bottom ||\n          e.clientX < dialogDimensions.left ||\n          e.clientX > dialogDimensions.right;\n\n        if (isClickOutside) {\n          handleClose();\n        }\n      }\n    },\n    [dialogRef, handleClose]\n  );\n\n  return handleClick;\n};\n"]}

package/libs/chunk-BHRQBJRY.js

@@ -0,0 +1,8 @@
+import { a } from './chunk-P7TTEYCD.js';
+import R from 'react';
+
+var m=({type:a$1="text",name:c,value:i,placeholder:d,id:f,styles:y,classes:I,isDisabled:p,disabled:t,readonly:r,required:n,ref:h,onChange:o,onBlur:l,onPointerDown:u,...E})=>{let x=e=>{o&&!t&&o?.(e);},v=e=>{l&&!t&&l?.(e);},P=e=>{u&&!t&&(e.preventDefault(),u?.(e));};return R.createElement(a,{as:"input",id:f,type:a$1,placeholder:d||`${n?"*":""} ${a$1} input `,className:I,styles:y,onChange:x,onBlur:v,onKeyDown:P,value:i,name:c,ref:h,"aria-disabled":p,tabIndex:p?-1:void 0,"aria-readonly":r,"aria-required":n,required:n,readOnly:r,...E})};m.displayName="Input";var F=m;
+
+export { m as a, F as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-BHRQBJRY.js.map

package/libs/chunk-BHRQBJRY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/inputs.tsx"],"names":["React","Input","type","name","value","placeholder","id","styles","classes","isDisabled","disabled","readonly","required","ref","onChange","onBlur","onPointerDown","props","handleChange","handleBlur","handleKeyDown","fp_default","inputs_default"],"mappings":"wCAAA,OAAOA,MAAW,QAeX,IAAMC,EAAQ,CAAC,CACpB,KAAAC,EAAO,OACP,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA+B,CAC7B,IAAMC,EAAgB,GAA2C,CAC3DJ,GAAY,CAACJ,GACfI,IAAW,CAAC,CAEhB,EAEMK,EAAc,GAA0C,CACxDJ,GAAU,CAACL,GACbK,IAAS,CAAC,CAEd,EAEMK,EAAiB,GAA6C,CAC9DJ,GAAiB,CAACN,IACpB,EAAE,eAAe,EACjBM,IAAgB,CAAC,EAErB,EAEA,OACEhB,EAAA,cAACqB,EAAA,CACC,GAAG,QACH,GAAIf,EACJ,KAAMJ,EACN,YAAaG,GAAe,GAAGO,EAAW,IAAM,EAAE,IAAIV,CAAI,UAC1D,UAAWM,EACX,OAAQD,EACR,SAAUW,EACV,OAAQC,EACR,UAAWC,EACX,MAAOhB,EACP,KAAMD,EACN,IAAKU,EACL,gBAAeJ,EACf,SAAUA,EAAa,GAAK,OAC5B,gBAAeE,EACf,gBAAeC,EACf,SAAUA,EACV,SAAUD,EACT,GAAGM,EACN,CAEJ,EACAhB,EAAM,YAAc,QACpB,IAAOqB,EAAQrB","sourcesContent":["import React from \"react\";\nimport FP from \"../fp\";\n\nexport type InputProps = {\n  /**\n   * The type of the input.\n   */\n  type?: \"text\" | \"password\" | \"email\" | \"number\" | \"tel\" | \"url\" | \"search\";\n\n  /**\n   * Set the element as disabled\n   */\n  isDisabled?: boolean;\n} & React.ComponentProps<typeof FP>;\n\nexport const Input = ({\n  type = \"text\",\n  name,\n  value,\n  placeholder,\n  id,\n  styles,\n  classes,\n  isDisabled,\n  disabled,\n  readonly,\n  required,\n  ref,\n  onChange,\n  onBlur,\n  onPointerDown,\n  ...props\n}: InputProps): JSX.Element => {\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange && !disabled) {\n      onChange?.(e);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlur && !disabled) {\n      onBlur?.(e);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (onPointerDown && !disabled) {\n      e.preventDefault();\n      onPointerDown?.(e);\n    }\n  };\n\n  return (\n    <FP\n      as=\"input\"\n      id={id}\n      type={type}\n      placeholder={placeholder || `${required ? \"*\" : \"\"} ${type} input `}\n      className={classes}\n      styles={styles}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n      value={value}\n      name={name}\n      ref={ref}\n      aria-disabled={isDisabled}\n      tabIndex={isDisabled ? -1 : undefined}\n      aria-readonly={readonly}\n      aria-required={required}\n      required={required}\n      readOnly={readonly}\n      {...props}\n    />\n  );\n};\nInput.displayName = \"Input\";\nexport default Input;\n"]}

package/libs/chunk-BIP2NY53.js

@@ -0,0 +1,8 @@
+import { a } from './chunk-NE6YXTMC.js';
+import t from 'react';
+
+var l=({label:o,labelFor:a$1,id:r,styles:p,classes:d,children:s,...i})=>t.createElement(a,{as:"div",id:r,styles:p,className:d,"data-style":"fields",...i},t.createElement("label",{htmlFor:a$1},o),s),n=l;l.displayName="Field";
+
+export { l as a, n as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-BIP2NY53.js.map

package/libs/chunk-BIP2NY53.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/fields.tsx"],"names":["React","Field","label","labelFor","id","styles","classes","children","props","ui_default","fields_default"],"mappings":"wCAAA,OAAOA,MAAW,QAmBX,IAAMC,EAAQ,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAEIR,EAAA,cAACS,EAAA,CACC,GAAG,MACH,GAAIL,EACJ,OAAQC,EACR,UAAWC,EACX,aAAW,SACV,GAAGE,GAEJR,EAAA,cAAC,SAAM,QAASG,GAAWD,CAAM,EAChCK,CACH,EAIGG,EAAQT,EACfA,EAAM,YAAc","sourcesContent":["import React from 'react'\nimport UI from '../ui'\n\nexport type FieldProps = {\n  /**\n   * The label content\n   */\n  label: React.ReactNode\n  children: React.ReactNode\n} & React.ComponentProps<'label'> &\n  Partial<React.ComponentProps<typeof UI>>\n/**\n * Field component that renders a label and children wrapped in a div element.\n * @param labelFor Defines the for attribute of the label element\n * @param styles Custom styles to be applied to the component\n * @param label The label content\n * @param children The children to be rendered inside the component\n * @param props Additional props to be spread to the component\n */\nexport const Field = ({\n  label,\n  labelFor,\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: FieldProps) => {\n  return (\n    <UI\n      as=\"div\"\n      id={id}\n      styles={styles}\n      className={classes}\n      data-style=\"fields\"\n      {...props}\n    >\n      <label htmlFor={labelFor}>{label}</label>\n      {children}\n    </UI>\n  )\n}\n\nexport default Field\nField.displayName = 'Field'\n"]}