@arkyn/components 3.0.1-beta.99 → 3.0.3

package/LICENSE.txt

@@ -1,10 +1,193 @@
+
                                  Apache License
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/
 
    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
 
-   Copyright 2025 Lucas Gonçalves
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2026 - Arkyn | Lucas Eduardo Gonçalves
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,41 +1,217 @@
 # @arkyn/components
 
-A modern and comprehensive React component library. Built with TypeScript, featuring smooth animations powered by Framer Motion, and providing a complete set of UI components for building beautiful web applications.
+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/)
 
-## ✨ Features
+## ✨ What it solves
 
-- 🎨 **40+ UI Components** - Complete set of modern, accessible components
-- 🎭 **Smooth Animations** - Powered by Framer Motion for fluid interactions
-- 🪝 **Custom Hooks** - Powerful hooks for form handling, modals, drawers, and more
-- 🎯 **TypeScript First** - Full type safety and excellent IntelliSense support
-- 📱 **Responsive Design** - Mobile-first approach with modern CSS
-- ♿ **Accessibility** - Built with accessibility best practices in mind
-- 🎨 **Customizable** - Easy to theme and customize for your brand
-- 🚀 **Remix Optimized** - Designed specifically for Remix applications
+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** `>=18.0.0` or **Bun** `>=1.0.0`
+- 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
+npm install @arkyn/components react react-dom lucide-react
 ```
 
-### Peer Dependencies
-
-Make sure you have these peer dependencies installed:
+Then install any optional peer dependencies your app actually uses. For example:
 
 ```bash
-npm install react react-dom lucide-react
+# 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";
+```
+
+### Per-component styles
+
+If you only use a handful of components, importing the full stylesheet above pulls in CSS for all 40+ components. Every component subpath also exports a matching `.css` file containing just that component's styles (and those of any component it renders internally), so you can import only what you use instead:
+
+```tsx
+import { Button } from "@arkyn/components/button";
+import "@arkyn/components/button.css";
 ```
 
-## 🧩 Components
+Each `<name>.css` file is self-contained — safe to import on its own without the aggregate `@arkyn/components/styles`. If you use several components, importing the aggregate stylesheet once is usually simpler and avoids any duplicate CSS between per-component files that share internals (e.g. `FileUpload` and `Button`).
+
+## 🚀 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
 
-- **AlertContainer**
-- **AlertContent**
-- **AlertDescription**
-- **AlertIcon**
-- **AlertTitle**
-- **AudioPlayer**
+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

@@ -1,63 +1,47 @@
-import { HTMLAttributes, JSX } from "react";
+import { type HTMLAttributes, type JSX } from "react";
 import "./styles.css";
-/**
- * @typedef {Object} AlertContainerProps
- * @property {"success" | "danger" | "warning" | "info"} schema - The visual style schema for the alert (success: green, danger: red, warning: yellow, info: blue)
- * @property {ReactNode} children - The content to be displayed inside the alert container
- * @property {string} [className] - Optional additional CSS classes to apply to the container
- * @extends {HTMLAttributes<HTMLDivElement>}
- */
 type AlertContainerProps = {
-    schema: "success" | "danger" | "warning" | "info";
+    /**
+     * 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>;
-/**
- * Custom hook to access the AlertContainer context
- *
- * @returns {AlertContainerProps} The current alert container properties including schema and HTML attributes
- *
- * @example
- * function CustomAlertContent() {
- *   const { schema } = useAlertContainer();
- *   return <div>Current schema: {schema}</div>;
- * }
- */
+/** @internal Accesses the schema and HTML props of the enclosing `AlertContainer`. */
 declare function useAlertContainer(): AlertContainerProps;
 /**
- * AlertContainer - A flexible alert component that displays messages with different visual styles
+ * AlertContainer — root wrapper for the Alert component set. Provides schema context to child components.
  *
- * This component automatically adjusts its layout based on whether an AlertTitle component
- * is present among its children. When AlertTitle is detected, the content is left-aligned;
- * otherwise, it's centered.
+ * Automatically detects whether an `AlertTitle` is present among children and adjusts layout:
+ * centered when no title, left-aligned when a title is present.
  *
- * @component
- * @memberof Alert
+ * @param props.scheme - Visual style variant. Required.
+ * @param props.children - Alert sub-components: `AlertIcon`, `AlertContent`, `AlertTitle`, `AlertDescription`.
  *
- * @param {AlertContainerProps} props - Component properties
- * @param {"success" | "danger" | "warning" | "info"} props.schema - Determines the visual styling and semantic meaning of the alert
- * @param {ReactNode} props.children - Content to be rendered inside the alert, can include AlertTitle and other components
- * @param {string} [props.className] - Additional CSS classes to customize the alert appearance
+ * **...Other valid HTML properties for `<div>`**
  *
- * @returns {JSX.Element} A styled alert container with context provider for child components
- *
- * @requires react - For createContext, useContext, ReactNode
+ * @returns AlertContainer JSX element.
  *
  * @example
- * // Basic usage
- * <AlertContainer schema="success">
- *  {children}
+ * ```tsx
+ * // Inline alert — no title, centered layout
+ * <AlertContainer scheme="success">
+ *   <AlertIcon />
+ *   <AlertContent>Your subscription has been activated.</AlertContent>
  * </AlertContainer>
  *
- * @example
- * // Complete alert example
- * <AlertContainer schema="success">
- *  <AlertIcon />
- *  <AlertContent>
- *    <AlertTitle>Success!</AlertTitle>
- *    <AlertDescription>
- *      You are premium user now!
- *    </AlertDescription>
- *  </AlertContent>
+ * // 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 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,GAAG,EAGJ,MAAM,OAAO,CAAC;AAEf,OAAO,cAAc,CAAC;AAEtB;;;;;;GAMG;AACH,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CACnD,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAQnC;;;;;;;;;;GAUG;AACH,iBAAS,iBAAiB,IAAI,mBAAmB,CAEhD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAuC/D;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,cAAc,EACnB,KAAK,GAAG,EAIR,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,CA0C/D;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -1,48 +1,23 @@
-import { HTMLAttributes, JSX } from "react";
+import type { HTMLAttributes, JSX } from "react";
 import "./styles.css";
-/**
- * @typedef {Object} AlertContentProps
- * @extends {HTMLAttributes<HTMLDivElement>}
- * @description Props for the AlertContent component, extending standard HTML div attributes.
- */
 type AlertContentProps = HTMLAttributes<HTMLDivElement>;
 /**
- * AlertContent component that renders the main content area of an alert.
- *
- * @component
- * @memberof Alert
- *
- * @description
- * This component serves as a container for the main content within an Alert component.
- * Supports all standard HTML div attributes for maximum flexibility.
+ * AlertContent — text/content area inside an `AlertContainer`. Wraps `AlertTitle` and `AlertDescription`.
  *
- * @param {AlertContentProps} props - Component props extending HTMLDivElement attributes
- * @param {string} [props.className] - Additional CSS classes to apply to the content container
- * @param {React.ReactNode} [props.children] - Content to be displayed inside the alert
+ * Accepts all standard `<div>` HTML attributes.
  *
- * @returns {JSX.Element} A div element with the alert content styling
- *
- * @requires react
- *
- * @example
- * // Basic usage
- * <AlertContainer schema="success">
- *  <AlertContent>
- *   {children}
- *  </AlertContent>
- * </AlertContainer>
+ * @returns AlertContent JSX element.
  *
  * @example
- * // Complete alert example
- * <AlertContainer schema="success">
- *  <AlertIcon />
- *  <AlertContent>
- *    <AlertTitle>Success!</AlertTitle>
- *    <AlertDescription>
- *      You are premium user now!
- *    </AlertDescription>
- *  </AlertContent>
+ * ```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 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB;;;;GAIG;AACH,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAK3D;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"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"}