@arkyn/components 3.0.1-beta.20 → 3.0.1-beta.201

package/README.md

@@ -0,0 +1,206 @@
+# @arkyn/components
+
+A modern React component library featuring 40+ UI components, smooth animations, custom hooks, and TypeScript support.
+
+[![npm version](https://img.shields.io/npm/v/@arkyn/components.svg)](https://www.npmjs.com/package/@arkyn/components)
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+## ✨ What it solves
+
+Every React/Remix/React Router/Next app ends up rebuilding the same UI primitives — buttons, inputs, modals, drawers, tables, tabs, alerts — with slightly different accessibility, validation, and animation behavior each time. `@arkyn/components` packages a complete, accessible, TypeScript-first set of these primitives (40+ components, plus supporting hooks and providers) so teams can compose screens instead of rebuilding foundations. Components integrate with a shared form-validation context (`FormProvider`/`useForm`), share consistent styling and motion, and cover everything from basic inputs to rich text editing, calendars, maps, and third-party tracking scripts.
+
+## 🧩 Features
+
+- 🧱 **Forms & inputs** — `Input`, `Textarea`, `Checkbox`, `Switch`, `Select`, `MultiSelect`, `RadioGroup`/`RadioBox`, `CurrencyInput`, `MaskedInput`, `PhoneInput`, `Slider`, `FieldWrapper`/`FieldLabel`/`FieldError` for labeled, validated fields with consistent layout
+- 📁 **Uploads** — `FileUpload`, `ImageUpload`, and `AudioUpload` with drag-and-drop, server upload, and preview built in
+- 🧭 **Layout & navigation** — `TabContainer`/`TabButton`, `CardTabContainer`/`CardTabButton`, `Pagination`, `Divider`, `Badge`
+- 🪟 **Overlays** — `ModalContainer`/`ModalHeader`/`ModalFooter` + `ModalProvider`/`useModal`, `DrawerContainer`/`DrawerHeader` + `DrawerProvider`/`useDrawer`, `Popover`, `Tooltip`
+- 🔔 **Feedback** — `AlertContainer`/`AlertTitle`/`AlertDescription`/`AlertIcon`/`AlertContent`, `ToastProvider`/`useToast`
+- 📊 **Data display** — `TableContainer`/`TableHeader`/`TableBody`/`TableFooter`/`TableCaption`
+- 📅 **Calendars & media** — `Calendar` (single/range date picking), `FullCalendar` (day/week/month views with events), `AudioPlayer`
+- 🗺️ **Google Places & Maps** — `SearchPlaces`, `PlacesProvider`, and Mapbox-powered `MapView`
+- 📈 **Tracking integrations** — `GoogleAnalytics`, `GoogleTagManager`, `FacebookPixel`, all dev-mode aware
+- ✍️ **Rich text editing** — `RichText` (Slate.js-based WYSIWYG editor) with `toHtml`/`toRichTextValue` conversion services
+- 🪝 **Hooks** — `useForm`, `useModal`, `useDrawer`, `useToast`, `useSlider`, `useHydrated`, `useScopedParams`, `useScrollLock`, `useAutomation`, `useSearchAutomation`
+- 🧑‍💻 **SSR-safe** — `ClientOnly` and `useHydrated` guard against hydration mismatches for browser-only UI
+
+## 📋 Prerequisites
+
+- **Node.js** `>=24.16.0` or **Bun** `>=1.3.14`
+- Always-required peer dependencies:
+  - `react >=18.0.0`
+  - `react-dom >=18.0.0`
+  - `lucide-react >=1.14.0` — used for icons across most components
+
+### Optional peer dependencies
+
+Only install these if you use the specific component/hook that needs them:
+
+- `mapbox-gl >=3.0.0` — required by `MapView`
+- `is-hotkey >=0.2.0` — required by `RichText`
+- `slate >=0.100.0`, `slate-history >=0.100.0`, `slate-react >=0.100.0` — required by `RichText`
+- `@react-google-maps/api >=2.0.0` — required by `PlacesProvider` and `SearchPlaces`
+- `react-scroll >=1.8.0` — required by `useAutomation`
+- `@react-input/mask >=2.0.0` — required by `MaskedInput` and `PhoneInput`
+- `html-react-parser >=5.0.0` — required by the `toRichTextValue` service
+- `react-hot-toast >=2.0.0` — required by `ToastProvider` / `useToast`
+
+## 📦 Installation
+
+> **ESM only.** This package ships as native ES modules with no CommonJS build — use `import`, not `require()`.
+
+```bash
+npm install @arkyn/components react react-dom lucide-react
+```
+
+Then install any optional peer dependencies your app actually uses. For example:
+
+```bash
+# Using RichText
+npm install slate slate-react slate-history is-hotkey
+
+# Using MaskedInput or PhoneInput
+npm install @react-input/mask
+
+# Using ToastProvider / useToast
+npm install react-hot-toast
+```
+
+## 🎨 Styles
+
+This package ships its own stylesheet, which must be imported once (e.g. in your app's root/entry file) for components to render correctly:
+
+```tsx
+import "@arkyn/components/styles";
+```
+
+## 🚀 Quick Start
+
+```tsx
+import {
+  Button,
+  FieldError,
+  FieldLabel,
+  FieldWrapper,
+  Input,
+} from "@arkyn/components";
+import "@arkyn/components/styles";
+
+export function LoginForm() {
+  return (
+    <form>
+      <FieldWrapper>
+        <FieldLabel showAsterisk>Email</FieldLabel>
+        <Input name="email" type="email" placeholder="you@example.com" />
+        <FieldError>Invalid email address</FieldError>
+      </FieldWrapper>
+
+      <Button type="submit" scheme="primary">
+        Sign in
+      </Button>
+    </form>
+  );
+}
+```
+
+## 📖 API Reference
+
+### Components
+
+| Export | Description |
+| --- | --- |
+| `AlertContainer` | Root wrapper for the Alert component set that provides scheme context to its children and switches between centered and left-aligned layout depending on whether an `AlertTitle` is present. |
+| `AlertContent` | Text/content area inside an `AlertContainer` that wraps `AlertTitle` and `AlertDescription`. |
+| `AlertDescription` | Body text for an alert, meant to be placed inside `AlertContent`. |
+| `AlertIcon` | Renders a scheme-appropriate Lucide icon (check, X, warning, or info) based on the `AlertContainer` context it is placed inside. |
+| `AlertTitle` | Bold heading for an alert, placed inside `AlertContent`; its presence is detected by `AlertContainer` to switch layout. |
+| `AudioPlayer` | Provides play/pause controls, a scrubable progress bar, and elapsed/total time display for an audio source. |
+| `AudioUpload` | Drag-and-drop audio file uploader that uploads to a server as multipart/form-data and shows a playback preview, integrating with `useForm` for validation errors. |
+| `Badge` | Displays labels, statuses, and categorization tags. |
+| `Button` | Used for user interactions and form submissions. |
+| `Calendar` | Calendar component supporting single-date and range selection modes. |
+| `CardTabButton` | Individual tab button inside a `CardTabContainer` that reads active/disabled state from the container's context. |
+| `CardTabContainer` | Wrapper (rendered as `<nav>`) that manages active state for a group of `CardTabButton` components. |
+| `Checkbox` | Interactive checkbox input with label, validation, and form integration. |
+| `ClientOnly` | Renders its children only after client-side hydration to prevent hydration mismatches for browser-only UI. |
+| `CurrencyInput` | Numeric input that formats its displayed value according to a currency locale, storing the raw numeric value for form submission. |
+| `Divider` | Visually separates content sections. |
+| `DrawerContainer` | Animated slide-in panel over an overlay backdrop that locks body scroll while open and closes on overlay click. |
+| `DrawerHeader` | Header section for a `DrawerContainer` with an optional close button. |
+| `FacebookPixel` | Injects the Facebook Pixel tracking script client-side; renders nothing in development mode unless `showInDevMode` is set. |
+| `FieldError` | Displays a validation error message below a form field; renders nothing when empty. |
+| `FieldLabel` | Label for form fields, with an optional required-field asterisk. |
+| `FieldWrapper` | `<section>` container that groups a form field with its label and error message. |
+| `FileUpload` | Drag-and-drop file uploader with server upload and file-name preview, integrating with `useForm`. |
+| `FullCalendar` | Full-featured calendar with day, week, and month views, supporting event display, blocked time ranges, and date navigation. |
+| `GoogleAnalytics` | Injects the Google Analytics 4 script client-side; renders nothing in development mode unless `showInDevMode` is set. |
+| `GoogleTagManager` | Injects the Google Tag Manager script and noscript snippets client-side; renders nothing in development mode unless `showInDevMode` is set. |
+| `IconButton` | Compact button that renders a single icon without a text label, requiring an `aria-label` for accessibility. |
+| `ImageUpload` | Drag-and-drop image uploader with server upload and image preview. |
+| `Input` | Text input field with label, validation, icons, prefix/suffix, and loading state. |
+| `MapView` | Interactive Mapbox map with optional clickable markers, rendered client-side only. |
+| `MaskedInput` | Text input with a configurable mask for structured values such as phone numbers, CPF, or credit cards. |
+| `ModalContainer` | Animated centered modal over a backdrop overlay that locks body scroll while open and closes on overlay click. |
+| `ModalFooter` | Action bar at the bottom of a modal dialog. |
+| `ModalHeader` | Header section for a `ModalContainer`, with an optional close button. |
+| `MultiSelect` | Multi-option dropdown with optional search, label, validation, and form integration. |
+| `Pagination` | Navigation control for paginated data sets, rendering page buttons, prev/next arrows, and spread indicators. |
+| `PhoneInput` | Phone number field with an integrated country selector and automatic mask formatting. |
+| `Popover` | Floating panel that appears relative to a trigger element and dismisses on outside click. |
+| `RadioBox` | Individual option inside a `RadioGroup`, rendered as a label/hidden-button pair. |
+| `RadioGroup` | Managed group of `RadioBox` options with form integration. |
+| `RichText` | WYSIWYG rich-text editor built on Slate.js with a configurable toolbar (bold, italic, underline, code, headings, quote, alignment, image/video insertion). |
+| `SearchPlaces` | Text input with Google Places autocomplete that returns structured address data. |
+| `Select` | Single-option dropdown with optional search, label, validation, and form integration. |
+| `Slider` | Interactive track for selecting a numeric value between 0 and 100. |
+| `Switch` | Toggle input for binary on/off states with form integration. |
+| `TabButton` | Individual tab button inside a `TabContainer`. |
+| `TabContainer` | Wrapper that manages active state for a group of `TabButton` components. |
+| `TableBody` | `<tbody>` section with built-in empty state handling. |
+| `TableCaption` | Title/description placed above a table, rendered as a `<caption>` element. |
+| `TableContainer` | Root wrapper for the Table component set, rendering a responsive scrollable container around a `<table>`. |
+| `TableFooter` | `<tfoot>` section with an automatic spacing row above the content, commonly used for pagination. |
+| `TableHeader` | `<thead>` section with an automatic spacing row below the header row. |
+| `Textarea` | Multi-line text input with label, validation, and form integration. |
+| `Tooltip` | Contextual text bubble shown on hover with smart viewport-aware positioning that flips sides to avoid overflow. |
+
+### Hooks
+
+| Export | Description |
+| --- | --- |
+| `useAutomation` | Runs UI side-effects (closing modals, scrolling to an element, showing a toast) in response to a server action response payload. |
+| `useDrawer` | Accesses the nearest `DrawerProvider` context, returning either the full context or a scoped open/close/data API for one named drawer. |
+| `useForm` | Reads the nearest `FormProvider` context to access field-level validation errors. |
+| `useHydrated` | Returns `true` once the component has hydrated on the client and `false` during SSR, to safely defer client-only rendering. |
+| `useModal` | Accesses the nearest `ModalProvider` context, returning either the full context or a scoped open/close/data API for one named modal. |
+| `useScopedParams` | Reads and writes URL search parameters, optionally namespaced with a scope prefix to avoid collisions between features. |
+| `useScrollLock` | Locks document body scroll while an overlay is open, compensating for scrollbar width to prevent layout shift. |
+| `useSearchAutomation` | URL-driven version of `useAutomation` that reads automation parameters from a URL search string. |
+| `useSlider` | State manager for the `Slider` component that clamps its value to the 0–100 range. |
+| `useToast` | Reads `ToastProvider` context to display toast notifications via `showToast`. |
+
+### Providers
+
+| Export | Description |
+| --- | --- |
+| `DrawerProvider` | Context provider that manages open/close state and data for named drawers, exposed to descendants via `useDrawer`. |
+| `FormProvider` | Distributes field-level validation errors to all form input components in its subtree so they can display errors automatically. |
+| `ModalProvider` | Context provider that manages open/close state and data for named modals, exposed to descendants via `useModal`. |
+| `PlacesProvider` | Loads the Google Maps JS API (places, marker, and maps libraries) and renders children via a render-prop that reports load status. |
+| `ToastProvider` | Mounts a react-hot-toast `Toaster` and exposes a `showToast` function via context for success/danger notifications. |
+
+### Services
+
+| Export | Description |
+| --- | --- |
+| `toHtml` | Converts a `RichTextValue` (Slate.js `Descendant` array) to an HTML string. |
+| `toRichTextValue` | Converts an HTML string to a `RichTextValue` (Slate.js `Descendant` array) for use as a `RichText` editor's default value. |
+
+## 📚 Documentation
+
+Full component docs, live previews, and prop tables: [https://docs.arkyn.dev](https://docs.arkyn.dev)
+
+## 📄 License
+
+This project is licensed under the Apache 2.0 License - see the [LICENSE](./LICENSE.txt) file for details.

package/dist/components/alert/alertContainer/index.d.ts

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, type JSX } from "react";
+import "./styles.css";
+type AlertContainerProps = {
+    /**
+     * Visual style and semantic meaning.
+     * - `success`: green — operation completed.
+     * - `danger`: red — error or destructive action.
+     * - `warning`: yellow — caution required.
+     * - `info`: blue — informational message.
+     */
+    scheme: "success" | "danger" | "warning" | "info";
+} & HTMLAttributes<HTMLDivElement>;
+/** @internal Accesses the schema and HTML props of the enclosing `AlertContainer`. */
+declare function useAlertContainer(): AlertContainerProps;
+/**
+ * AlertContainer — root wrapper for the Alert component set. Provides schema context to child components.
+ *
+ * Automatically detects whether an `AlertTitle` is present among children and adjusts layout:
+ * centered when no title, left-aligned when a title is present.
+ *
+ * @param props.scheme - Visual style variant. Required.
+ * @param props.children - Alert sub-components: `AlertIcon`, `AlertContent`, `AlertTitle`, `AlertDescription`.
+ *
+ * **...Other valid HTML properties for `<div>`**
+ *
+ * @returns AlertContainer JSX element.
+ *
+ * @example
+ * ```tsx
+ * // Inline alert — no title, centered layout
+ * <AlertContainer scheme="success">
+ *   <AlertIcon />
+ *   <AlertContent>Your subscription has been activated.</AlertContent>
+ * </AlertContainer>
+ *
+ * // Full alert with title and description — left-aligned layout
+ * <AlertContainer scheme="danger">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Payment failed</AlertTitle>
+ *     <AlertDescription>Please check your card details and try again.</AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ * ```
+ */
+declare function AlertContainer(props: AlertContainerProps): JSX.Element;
+export { AlertContainer, useAlertContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/alertContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,cAAc,EACnB,KAAK,GAAG,EAGR,MAAM,OAAO,CAAC;AAEf,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG;IAC1B;;;;;;OAMG;IACH,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CAClD,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAInC,sFAAsF;AACtF,iBAAS,iBAAiB,IAAI,mBAAmB,CAEhD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAwC/D;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/alert/alertContent/index.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, JSX } from "react";
+import "./styles.css";
+type AlertContentProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertContent — text/content area inside an `AlertContainer`. Wraps `AlertTitle` and `AlertDescription`.
+ *
+ * Accepts all standard `<div>` HTML attributes.
+ *
+ * @returns AlertContent JSX element.
+ *
+ * @example
+ * ```tsx
+ * <AlertContainer scheme="warning">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Session expiring</AlertTitle>
+ *     <AlertDescription>You will be logged out in 5 minutes.</AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ * ```
+ */
+declare function AlertContent(props: AlertContentProps): JSX.Element;
+export { AlertContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/alertContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;GAiBG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAK3D;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/alert/alertDescription/index.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, JSX } from "react";
+import "./styles.css";
+type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertDescription — body text for an alert. Place inside `AlertContent`.
+ *
+ * Accepts all standard `<div>` HTML attributes.
+ *
+ * @returns AlertDescription JSX element.
+ *
+ * @example
+ * ```tsx
+ * <AlertContainer scheme="info">
+ *   <AlertContent>
+ *     <AlertTitle>Maintenance scheduled</AlertTitle>
+ *     <AlertDescription>The service will be unavailable on Sunday from 2–4 AM UTC.</AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ * ```
+ */
+declare function AlertDescription(props: AlertDescriptionProps): JSX.Element;
+export { AlertDescription };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/alertDescription/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertDescription/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,cAAc,CAAC;AAEtB,KAAK,qBAAqB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE5D;;;;;;;;;;;;;;;;GAgBG;AAEH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAKnE;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/alert/alertIcon/index.d.ts

@@ -0,0 +1,30 @@
+import { type LucideProps } from "lucide-react";
+import type { JSX } from "react";
+import "./styles.css";
+type AlertIconProps = LucideProps;
+/**
+ * AlertIcon — renders a scheme-appropriate icon from `AlertContainer` context.
+ *
+ * - `success` → `CheckCircle2`
+ * - `danger` → `XCircle`
+ * - `warning` → `AlertTriangle`
+ * - `info` → `Info`
+ *
+ * Must be placed inside an `AlertContainer`. Accepts all Lucide icon props.
+ *
+ * @returns The scheme-matched Lucide icon element.
+ *
+ * @example
+ * ```tsx
+ * <AlertContainer scheme="danger">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Payment failed</AlertTitle>
+ *     <AlertDescription>Please check your card details.</AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ * ```
+ */
+declare function AlertIcon(props: AlertIconProps): JSX.Element;
+export { AlertIcon };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/alertIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIN,KAAK,WAAW,EAEhB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,WAAW,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAgBrD;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/alert/alertTitle/index.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, JSX } from "react";
+import "./styles.css";
+type AlertTitleProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertTitle — bold heading for an alert. Place inside `AlertContent`.
+ *
+ * Its presence is detected by `AlertContainer` to switch the layout from centered to left-aligned.
+ * Accepts all standard `<div>` HTML attributes.
+ *
+ * @returns AlertTitle JSX element.
+ *
+ * @example
+ * ```tsx
+ * <AlertContainer scheme="danger">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Access denied</AlertTitle>
+ *     <AlertDescription>You don't have permission to view this page.</AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ * ```
+ */
+declare function AlertTitle(props: AlertTitleProps): JSX.Element;
+export { AlertTitle };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/alertTitle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertTitle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAKvD;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/audioPlayer/index.d.ts

@@ -0,0 +1,51 @@
+import { type AudioHTMLAttributes, type JSX } from "react";
+import "./styles.css";
+/** Audio state snapshot passed to play/pause callbacks. */
+type AudioInformationProps = {
+    /** Current playback position in seconds. */
+    currentTime: number;
+    /** Total audio duration in seconds. */
+    totalTime: number;
+    /** Current position formatted as `MM:SS`. */
+    formattedCurrentTime: string;
+    /** Total duration formatted as `MM:SS`. */
+    formattedTotalTime: string;
+};
+type AudioPlayerProps = Omit<AudioHTMLAttributes<HTMLAudioElement>, "onEnded" | "src"> & {
+    /** Audio file URL. Required. */
+    src: string;
+    /** Disables the play/pause button and the progress slider. @default false */
+    disabled?: boolean;
+    /** Callback fired when playback starts. Receives the current audio state. */
+    onPlayAudio?: (props: AudioInformationProps) => void;
+    /** Callback fired when playback is paused. Receives the current audio state. */
+    onPauseAudio?: (props: AudioInformationProps) => void;
+};
+/**
+ * AudioPlayer — play/pause controls, a scrubable progress bar, and elapsed/total time display.
+ *
+ * @param props.src - Audio file URL. Required.
+ * @param props.disabled - Disables controls. Default: false
+ * @param props.onPlayAudio - Callback fired when playback starts.
+ * @param props.onPauseAudio - Callback fired when playback is paused.
+ *
+ * **...Other valid HTML properties for `<audio>` (except `onEnded` and `src`)**
+ *
+ * @returns AudioPlayer JSX element.
+ *
+ * @example
+ * ```tsx
+ * // Basic
+ * <AudioPlayer src="/audio/episode.mp3" />
+ *
+ * // With play/pause callbacks
+ * <AudioPlayer
+ *   src="/audio/episode.mp3"
+ *   onPlayAudio={(info) => console.log("Playing at", info.formattedCurrentTime)}
+ *   onPauseAudio={(info) => console.log("Paused at", info.formattedCurrentTime)}
+ * />
+ * ```
+ */
+declare function AudioPlayer(props: AudioPlayerProps): JSX.Element;
+export { AudioPlayer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/audioPlayer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/audioPlayer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACN,KAAK,mBAAmB,EACxB,KAAK,GAAG,EAIR,MAAM,OAAO,CAAC;AAIf,OAAO,cAAc,CAAC;AAEtB,2DAA2D;AAC3D,KAAK,qBAAqB,GAAG;IAC5B,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,KAAK,gBAAgB,GAAG,IAAI,CAC3B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,SAAS,GAAG,KAAK,CACjB,GAAG;IACH,gCAAgC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,gFAAgF;IAChF,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAoHzD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/audioUpload/hasFileContent/index.d.ts

@@ -0,0 +1,13 @@
+import "./styles.css";
+type HasFileContentProps = {
+    filePath: string;
+    disabled: boolean;
+    acceptAudio: string;
+    isLoading: boolean;
+    handleSelectFile: (file: File) => void;
+    reSendAudio?: () => void;
+    changeAudioButtonText: string;
+};
+declare function HasFileContent(props: HasFileContentProps): import("react").JSX.Element;
+export { HasFileContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/audioUpload/hasFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/audioUpload/hasFileContent/index.tsx"],"names":[],"mappings":"AAQA,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qBAAqB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BA8DjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/audioUpload/index.d.ts

@@ -0,0 +1,71 @@
+import "./styles.css";
+type AudioUploadProps = {
+    /** Field name for form submission (stores the uploaded audio URL). Required. */
+    name: string;
+    /** Server endpoint URL that receives the `multipart/form-data` upload request. Required. */
+    action: string;
+    /** Form-data field name used for the file. @default "file" */
+    fileName?: string;
+    /** HTTP method for the upload request. @default "POST" */
+    method?: string;
+    /** Accepted audio MIME types or extensions (e.g. `"audio/mp3,audio/wav"`). @default "audio/*" */
+    acceptAudio?: string;
+    /** Text displayed in the drag-and-drop zone. @default "Ou arraste e solte um arquivo de áudio aqui" */
+    dropAudioText?: string;
+    /** Label for the file-picker button before a file is selected. @default "Selecionar arquivo de áudio" */
+    selectAudioButtonText?: string;
+    /** Label for the file-picker button after a file is selected. @default "Trocar arquivo de áudio" */
+    changeAudioButtonText?: string;
+    /** Callback fired after a successful upload. Receives the URL returned by the server. */
+    onChange?: (url?: string) => void;
+    /** Property name in the server response that contains the file URL. @default "url" */
+    fileResponseName?: string;
+    /** Optional label text displayed above the upload area. */
+    label?: string;
+    /** Displays an asterisk on the label to signal a required field. @default false */
+    showAsterisk?: boolean;
+    /** Disables file selection and upload. @default false */
+    disabled?: boolean;
+    /** Pre-populated audio URL (e.g. an existing recording). @default "" */
+    defaultValue?: string;
+};
+/**
+ * AudioUpload — drag-and-drop audio file uploader with server upload and playback preview.
+ *
+ * Sends the file via `fetch` as `multipart/form-data` and stores the returned URL
+ * in a hidden `<input>` for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
+ *
+ * @param props.name - Field name for form submission. Required.
+ * @param props.action - Upload endpoint URL. Required.
+ * @param props.fileName - Form-data field name for the file. Default: "file"
+ * @param props.method - HTTP method. Default: "POST"
+ * @param props.acceptAudio - Accepted MIME types / extensions. Default: "audio/*"
+ * @param props.onChange - Callback fired after a successful upload — receives the audio URL.
+ * @param props.fileResponseName - Server response property containing the URL. Default: "url"
+ * @param props.label - Label text displayed above the upload area.
+ * @param props.showAsterisk - Appends `*` to the label. Default: false
+ * @param props.disabled - Disables file selection and upload. Default: false
+ * @param props.defaultValue - Pre-populated audio URL.
+ *
+ * @returns AudioUpload JSX element wrapped in `FieldWrapper`.
+ *
+ * @example
+ * ```tsx
+ * // Basic
+ * <AudioUpload name="audio" action="/api/upload" />
+ *
+ * // With label and custom texts
+ * <AudioUpload
+ *   name="podcast"
+ *   action="/api/upload/podcast"
+ *   label="Podcast Episode"
+ *   showAsterisk
+ *   selectAudioButtonText="Choose audio file"
+ *   onChange={(url) => setPodcastUrl(url)}
+ * />
+ * ```
+ */
+declare function AudioUpload(props: AudioUploadProps): import("react").JSX.Element;
+export { AudioUpload };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/audioUpload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/audioUpload/index.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACvB,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAC;IACb,4FAA4F;IAC5F,MAAM,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yGAAyG;IACzG,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oGAAoG;IACpG,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,yFAAyF;IACzF,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sFAAsF;IACtF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAyG3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/audioUpload/noFileContent/index.d.ts

@@ -0,0 +1,12 @@
+import "./styles.css";
+type NoFileContentProps = {
+    disabled: boolean;
+    acceptAudio: string;
+    isLoading: boolean;
+    selectAudioButtonText: string;
+    dropAudioText: string;
+    handleSelectFile: (file: File) => void;
+};
+declare function NoFileContent(props: NoFileContentProps): import("react").JSX.Element;
+export { NoFileContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/audioUpload/noFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/audioUpload/noFileContent/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAkD/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/badge/index.d.ts

@@ -0,0 +1,60 @@
+import type { LucideIcon } from "lucide-react";
+import type { HTMLAttributes } from "react";
+import "./styles.css";
+type BadgeProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Badge size.
+     * @default "lg"
+     */
+    size?: "md" | "lg";
+    /**
+     * Visual style variant.
+     * - `solid`: filled background.
+     * - `outline`: bordered, transparent background.
+     * - `ghost`: no border, subtle background on hover.
+     * @default "ghost"
+     */
+    variant?: "solid" | "outline" | "ghost";
+    /**
+     * Color scheme applied to the badge.
+     * @default "primary"
+     */
+    scheme?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+    /** Lucide icon rendered to the left of the label. */
+    leftIcon?: LucideIcon;
+    /** Lucide icon rendered to the right of the label. */
+    rightIcon?: LucideIcon;
+};
+/**
+ * Badge — displays labels, statuses, and categorization tags.
+ *
+ * @param props.size - Badge size (`md` | `lg`). Default: "lg"
+ * @param props.variant - Visual style variant. Default: "ghost"
+ * @param props.scheme - Color scheme. Default: "primary"
+ * @param props.leftIcon - Lucide icon rendered to the left of the label.
+ * @param props.rightIcon - Lucide icon rendered to the right of the label.
+ *
+ * **...Other valid HTML properties for `<div>`**
+ *
+ * @returns Badge JSX element.
+ *
+ * @example
+ * ```tsx
+ * // Basic badge
+ * <Badge>New</Badge>
+ *
+ * // With color scheme
+ * <Badge scheme="success">Approved</Badge>
+ *
+ * // With icon
+ * <Badge leftIcon={CheckIcon} scheme="success">Completed</Badge>
+ *
+ * // Custom size, variant and scheme
+ * <Badge size="lg" variant="solid" scheme="warning" rightIcon={AlertIcon}>
+ *   Warning
+ * </Badge>
+ * ```
+ */
+declare function Badge(props: BadgeProps): import("react").JSX.Element;
+export { Badge };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,cAAc,CAAC;AAEtB,KAAK,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC7E,qDAAqD;IACrD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,UAAU,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,+BAwB/B;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}