@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/types/components/DropDown/index.d.ts

@@ -0,0 +1,125 @@
+import { ButtonProps } from "../Button/Button.js";
+import { FC, HTMLAttributes } from "react";
+
+//#region src/components/DropDown/index.d.ts
+
+/**
+ * Props for the DropDown component
+ */
+interface DropDownProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Unique identifier that links the trigger and panel for accessibility.
+   * This is used to generate proper ARIA attributes.
+   * @example "user-menu"
+   * @example "language-selector"
+   */
+  identifier: string;
+}
+type DropDownType = FC<DropDownProps> & {
+  Trigger: FC<TriggerProps>;
+  Panel: FC<PanelProps>;
+};
+/**
+ * DropDown Component
+ *
+ * A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.
+ * Supports hover, focus, and controlled visibility states with proper accessibility features.
+ *
+ * @example
+ * ```tsx
+ * // Basic hover dropdown
+ * <DropDown identifier="menu">
+ *   <DropDown.Trigger identifier="menu">
+ *     Open Menu
+ *   </DropDown.Trigger>
+ *   <DropDown.Panel identifier="menu" isOverable>
+ *     <div>Menu content</div>
+ *   </DropDown.Panel>
+ * </DropDown>
+ *
+ * // Focus-based dropdown for accessibility
+ * <DropDown identifier="accessible-menu">
+ *   <DropDown.Trigger identifier="accessible-menu">
+ *     Keyboard Accessible Menu
+ *   </DropDown.Trigger>
+ *   <DropDown.Panel identifier="accessible-menu" isFocusable>
+ *     <div>Accessible content</div>
+ *   </DropDown.Panel>
+ * </DropDown>
+ *
+ * // Controlled dropdown
+ * <DropDown identifier="controlled">
+ *   <DropDown.Trigger identifier="controlled">
+ *     Controlled Menu
+ *   </DropDown.Trigger>
+ *   <DropDown.Panel identifier="controlled" isHidden={!isOpen}>
+ *     <div>Controlled content</div>
+ *   </DropDown.Panel>
+ * </DropDown>
+ * ```
+ *
+ * @component
+ * @accessibility
+ * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)
+ * - Supports keyboard navigation with focus management
+ * - Screen reader compatible with proper role and labeling
+ * - Maintains focus trap within dropdown when needed
+ */
+declare const DropDown: DropDownType;
+/**
+ * Props for the DropDown.Trigger component
+ */
+interface TriggerProps extends Partial<ButtonProps> {
+  /**
+   * Unique identifier that matches the parent DropDown identifier
+   * @example "user-menu"
+   */
+  identifier: string;
+}
+/**
+ * Alignment options for the dropdown panel relative to the trigger
+ */
+declare enum DropDownAlign {
+  /** Align panel to the start (left in LTR, right in RTL) of the trigger */
+  START = "start",
+  /** Align panel to the end (right in LTR, left in RTL) of the trigger */
+  END = "end",
+}
+/**
+ * Props for the DropDown.Panel component
+ */
+interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Whether the panel should be visible when the trigger is focused.
+   * Enables keyboard accessibility for the dropdown.
+   * @default false
+   */
+  isFocusable?: boolean;
+  /**
+   * Controls panel visibility explicitly.
+   * - `true`: Panel is hidden
+   * - `false`: Panel is visible
+   * - `undefined`: Panel visibility controlled by hover/focus states
+   * @default undefined
+   */
+  isHidden?: boolean;
+  /**
+   * Whether the panel should be visible when hovering over the trigger.
+   * Provides quick access via mouse interaction.
+   * @default false
+   */
+  isOverable?: boolean;
+  /**
+   * Unique identifier that matches the parent DropDown identifier
+   * @example "user-menu"
+   */
+  identifier: string;
+  /**
+   * Horizontal alignment of the panel relative to the trigger
+   * @default DropDownAlign.START
+   */
+  align?: DropDownAlign | `${DropDownAlign}`;
+}
+//#endregion
+export { DropDown, DropDownAlign, DropDownProps, DropDownType, PanelProps, TriggerProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/DropDown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/DropDown/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAQA;AAUY,UAVK,aAAA,SAAsB,cAUf,CAV8B,cAU9B,CAAA,CAAA;EAAM;;;;;;EAEnB,UAAA,EAAA,MAAA;AAiDX;AAmBiB,KAtEL,YAAA,GAAe,EAsEG,CAtEA,aAsEgB,CAAA,GAAR;EA6D1B,OAAA,EAlID,EAkIC,CAlIE,YAkIW,CAAA;EAUR,KAAA,EA3IR,EA2IQ,CA3IL,UA2IgB,CAAA;CAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA1FtC,UAAU;;;;UAmBN,YAAA,SAAqB,QAAQ;;;;;;;;;;aA6DlC,aAAA;;;;;;;;;UAUK,UAAA,SAAmB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkCzC,mBAAmB"}

package/dist/types/components/EditableField/EditableFieldInput.d.ts

@@ -0,0 +1,51 @@
+import { InputProps } from "../Input/Input.js";
+import { FC } from "react";
+
+//#region src/components/EditableField/EditableFieldInput.d.ts
+
+/**
+ * Props for the EditableFieldInput component, extending standard Input props
+ */
+type EditableFieldInputProps = InputProps & {
+  /** Callback function called when the user saves the edited value */
+  onSave?: (value: string) => void;
+  /** Callback function called when the user cancels the edit operation */
+  onCancel?: () => void;
+};
+/**
+ * EditableFieldInput Component
+ *
+ * An inline editable input field that displays as read-only text until clicked.
+ * When activated, it shows an input field with save and cancel buttons.
+ *
+ * @example
+ * ```tsx
+ * <EditableFieldInput
+ *   defaultValue="Edit me"
+ *   placeholder="Click to edit..."
+ *   onSave={(value) => console.log('Saved:', value)}
+ *   onCancel={() => console.log('Cancelled')}
+ * />
+ * ```
+ *
+ * ## Features
+ * - **Inline Editing**: Click to edit, displays as text when not editing
+ * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
+ * - **Keyboard Support**: Accessible keyboard navigation
+ * - **Input Variants**: Supports all Input component variants and sizes
+ * - **Auto-save on Click Away**: Saves automatically when clicking outside
+ * - **Ref Forwarding**: Exposes the underlying input element reference
+ *
+ * ## Accessibility
+ * - Uses semantic HTML with proper ARIA attributes
+ * - Keyboard accessible with tab navigation
+ * - Screen reader friendly with descriptive labels
+ * - Focus management for edit mode transitions
+ *
+ * @param props - EditableFieldInputProps extending InputProps
+ * @returns React functional component
+ */
+declare const EditableFieldInput: FC<EditableFieldInputProps>;
+//#endregion
+export { EditableFieldInput };
+//# sourceMappingURL=EditableFieldInput.d.ts.map

package/dist/types/components/EditableField/EditableFieldInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableFieldInput.d.ts","names":[],"sources":["../../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGkD;AA8ClD,KAxCK,uBAAA,GAA0B,UAwCK,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAvB,oBAAoB,GAAG"}

package/dist/types/components/EditableField/EditableFieldLayout.d.ts

@@ -0,0 +1,14 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/EditableField/EditableFieldLayout.d.ts
+type EditableFieldLayoutProps = {
+  value?: string | null | undefined;
+  onCancel: () => void;
+  onSave: () => void;
+  children: ReactNode;
+  isDisabled?: boolean;
+} & HTMLAttributes<HTMLSpanElement>;
+declare const EditableFieldLayout: FC<EditableFieldLayoutProps>;
+//#endregion
+export { EditableFieldLayout };
+//# sourceMappingURL=EditableFieldLayout.d.ts.map

package/dist/types/components/EditableField/EditableFieldLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableFieldLayout.d.ts","names":[],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":[],"mappings":";;;KAeK,wBAAA;;EAAA,QAAA,EAAA,GAAA,GAAA,IAAA;EAIO,MAAA,EAAA,GAAA,GAAA,IAAA;EAEO,QAAA,EAFP,SAEO;EAAf,UAAA,CAAA,EAAA,OAAA;CAAc,GAAd,cAAc,CAAC,eAAD,CAAA;AAEL,cAAA,mBAAwB,EAAH,EAAG,CAAA,wBAAD,CAAA"}

package/dist/types/components/EditableField/EditableFieldTextArea.d.ts

@@ -0,0 +1,55 @@
+import { AutoSizedTextAreaProps } from "../TextArea/AutoSizeTextArea.js";
+import { FC } from "react";
+
+//#region src/components/EditableField/EditableFieldTextArea.d.ts
+
+/**
+ * Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps
+ */
+type EditableFieldTextAreaProps = AutoSizedTextAreaProps & {
+  /** Callback function called when the user saves the edited value */
+  onSave?: (value: string) => void;
+  /** Callback function called when the user cancels the edit operation */
+  onCancel?: () => void;
+};
+/**
+ * EditableFieldTextArea Component
+ *
+ * An inline editable textarea field that displays as read-only text until clicked.
+ * When activated, it shows an auto-sized textarea with save and cancel buttons.
+ * Perfect for multiline text editing with automatic height adjustment.
+ *
+ * @example
+ * ```tsx
+ * <EditableFieldTextArea
+ *   defaultValue="Multiline text content"
+ *   placeholder="Click to edit..."
+ *   maxRows={10}
+ *   onSave={(value) => console.log('Saved:', value)}
+ *   onCancel={() => console.log('Cancelled')}
+ * />
+ * ```
+ *
+ * ## Features
+ * - **Inline Editing**: Click to edit, displays as formatted text when not editing
+ * - **Auto-Sizing**: Automatically adjusts height to fit content
+ * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
+ * - **Multiline Support**: Preserves line breaks and formatting
+ * - **Max Rows Control**: Configurable maximum height with scroll
+ * - **Auto-save on Click Away**: Saves automatically when clicking outside
+ * - **Ref Forwarding**: Exposes the underlying textarea element reference
+ *
+ * ## Accessibility
+ * - Uses semantic HTML with proper ARIA attributes
+ * - Keyboard accessible with tab navigation
+ * - Screen reader friendly with descriptive labels
+ * - Focus management for edit mode transitions
+ * - Preserves whitespace and formatting for screen readers
+ *
+ * @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps
+ * @returns React functional component
+ */
+declare const EditableFieldTextArea: FC<EditableFieldTextAreaProps>;
+//#endregion
+export { EditableFieldTextArea };
+//# sourceMappingURL=EditableFieldTextArea.d.ts.map

package/dist/types/components/EditableField/EditableFieldTextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableFieldTextArea.d.ts","names":[],"sources":["../../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAG6E;AAkD7E,KA5CK,0BAAA,GAA6B,sBA4CK,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA1B,uBAAuB,GAAG"}

package/dist/types/components/EditableField/index.d.ts

@@ -0,0 +1,3 @@
+import { EditableFieldInput } from "./EditableFieldInput.js";
+import { EditableFieldTextArea } from "./EditableFieldTextArea.js";
+export { EditableFieldInput, EditableFieldTextArea };

package/dist/types/components/ExpandCollapse/ExpandCollapse.d.ts

@@ -0,0 +1,72 @@
+import { FC, ReactNode } from "react";
+
+//#region src/components/ExpandCollapse/ExpandCollapse.d.ts
+
+/**
+ * Props for the ExpandCollapse component
+ */
+type ExpandCollapseProps = {
+  /** Whether the component should provide expand/collapse functionality. If false, renders children directly */
+  isRollable?: boolean;
+  /** Minimum height in pixels before showing the expand/collapse toggle */
+  minHeight?: number;
+  /** Content that may overflow and trigger the expand/collapse behavior */
+  children: ReactNode;
+  /** Additional CSS classes for styling customization */
+  className?: string;
+};
+/**
+ * ExpandCollapse Component
+ *
+ * A smart content container that automatically provides expand/collapse functionality
+ * when content exceeds a specified height threshold. Features smooth animations,
+ * internationalized toggle text, and intelligent height detection.
+ *
+ * @example
+ * ```tsx
+ * <ExpandCollapse minHeight={300}>
+ *   <div>Very long content that will be collapsed...</div>
+ * </ExpandCollapse>
+ * ```
+ *
+ * ## Key Features
+ * - **Smart Detection**: Automatically detects when content exceeds height threshold
+ * - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects
+ * - **Internationalization**: Toggle text supports multiple languages via Intlayer
+ * - **Customizable Height**: Configurable minimum height threshold
+ * - **Performance Optimized**: Only applies collapse behavior when necessary
+ * - **Accessibility**: Proper ARIA attributes and keyboard support
+ *
+ * ## Behavior Logic
+ * 1. **Measurement Phase**: Measures actual content height on mount
+ * 2. **Comparison**: Compares content height against minHeight threshold
+ * 3. **Conditional Rendering**:
+ *    - If content ≤ minHeight: Renders normally without collapse functionality
+ *    - If content > minHeight: Enables expand/collapse with toggle button
+ * 4. **State Management**: Manages collapsed/expanded state with smooth transitions
+ *
+ * ## When to Use
+ * - Long-form content (articles, documentation, code blocks)
+ * - Lists or tables that may grow beyond comfortable viewing height
+ * - User-generated content with unpredictable length
+ * - FAQ sections or expandable content cards
+ * - Code examples or JSON data display
+ *
+ * ## Accessibility Features
+ * - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible
+ * - **Screen Reader Support**: Proper ARIA labels and state announcements
+ * - **Visual Indicators**: Clear visual cues for collapsed/expanded states
+ * - **Smooth Animations**: Respects user preferences for reduced motion
+ *
+ * ## Internationalization
+ * - Supports multiple languages through Intlayer integration
+ * - Toggle text automatically adapts to current locale
+ * - Includes translations for "Show all" and "Show less" states
+ *
+ * @param props - ExpandCollapseProps
+ * @returns React functional component
+ */
+declare const ExpandCollapse: FC<ExpandCollapseProps>;
+//#endregion
+export { ExpandCollapse, ExpandCollapseProps };
+//# sourceMappingURL=ExpandCollapse.d.ts.map

package/dist/types/components/ExpandCollapse/ExpandCollapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandCollapse.d.ts","names":[],"sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":[],"mappings":";;;;;;AAUA;AAiEa,KAjED,mBAAA,GAiEoB;;;;;;YA3DpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA2DC,gBAAgB,GAAG"}

package/dist/types/components/ExpandCollapse/expandCollapse.content.d.ts

@@ -0,0 +1,56 @@
+import * as _intlayer_types287 from "@intlayer/types";
+import * as _intlayer_core0 from "@intlayer/core";
+
+//#region src/components/ExpandCollapse/expandCollapse.content.d.ts
+declare const expandCollapseContent: {
+  key: string;
+  content: {
+    expandCollapseContent: _intlayer_types287.TypedNodeModel<_intlayer_types287.NodeType.Condition, _intlayer_core0.ConditionContentStates<_intlayer_types287.TypedNodeModel<_intlayer_types287.NodeType.Translation, {
+      en: string;
+      fr: string;
+      es: string;
+      'en-GB': string;
+      de: string;
+      ja: string;
+      ko: string;
+      zh: string;
+      it: string;
+      pt: string;
+      hi: string;
+      ar: string;
+      ru: string;
+      tr: string;
+      pl: string;
+      id: string;
+      vi: string;
+    }, {
+      nodeType: _intlayer_types287.NodeType.Translation | "translation";
+    } & {
+      translation: {
+        en: string;
+        fr: string;
+        es: string;
+        'en-GB': string;
+        de: string;
+        ja: string;
+        ko: string;
+        zh: string;
+        it: string;
+        pt: string;
+        hi: string;
+        ar: string;
+        ru: string;
+        tr: string;
+        pl: string;
+        id: string;
+        vi: string;
+      };
+    }>>, {}>;
+  };
+  title: string;
+  description: string;
+  tags: string[];
+};
+//#endregion
+export { expandCollapseContent as default };
+//# sourceMappingURL=expandCollapse.content.d.ts.map

package/dist/types/components/ExpandCollapse/expandCollapse.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandCollapse.content.d.ts","names":[],"sources":["../../../../src/components/ExpandCollapse/expandCollapse.content.ts"],"sourcesContent":[],"mappings":";;;;cAEM;;;;MAAA,EAAA,EAAA,MAAA"}

package/dist/types/components/ExpandCollapse/index.d.ts

@@ -0,0 +1,2 @@
+import { ExpandCollapse, ExpandCollapseProps } from "./ExpandCollapse.js";
+export { ExpandCollapse, ExpandCollapseProps };

package/dist/types/components/Flags/Flag.d.ts

@@ -0,0 +1,11 @@
+import { FC, ImgHTMLAttributes } from "react";
+import { Locale } from "@intlayer/types";
+
+//#region src/components/Flags/Flag.d.ts
+type FlagProps = ImgHTMLAttributes<HTMLImageElement> & {
+  locale: Locale;
+};
+declare const Flag: FC<FlagProps>;
+//#endregion
+export { Flag };
+//# sourceMappingURL=Flag.d.ts.map

package/dist/types/components/Flags/Flag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flag.d.ts","names":[],"sources":["../../../../src/components/Flags/Flag.tsx"],"sourcesContent":[],"mappings":";;;;KA8OK,SAAA,GAAY,kBAAkB;UACzB;AA9O8C,CAAA;AA6OrB,cA8PtB,IA9PsB,EA8PhB,EA9PgB,CA8Pb,SA9Pa,CAAA"}

package/dist/types/components/Flags/index.d.ts

@@ -0,0 +1,2 @@
+import { Flag } from "./Flag.js";
+export { Flag };

package/dist/types/components/Footer/index.d.ts

@@ -0,0 +1,122 @@
+import { FC, ReactNode } from "react";
+
+//#region src/components/Footer/index.d.ts
+
+/**
+ * Represents a single footer link with all necessary attributes
+ */
+type FooterLink = {
+  /** URL or path for the link */
+  href: string;
+  /** Display text or JSX element for the link */
+  text: ReactNode;
+  /** Optional click handler for custom link behavior */
+  onClick?: () => void;
+  /** Accessible label for screen readers (required for accessibility) */
+  label: string;
+};
+/**
+ * Represents a group of related links with a title
+ */
+type LinkGroup = {
+  /** Title for the group of links */
+  title: ReactNode;
+  /** Array of footer links in this group */
+  links: FooterLink[];
+};
+/**
+ * Props for the Footer component
+ */
+type FooterProps = {
+  /** Optional array of link groups to display in the footer */
+  links?: LinkGroup[];
+};
+/**
+ * Footer Component
+ *
+ * A comprehensive footer component that displays the Intlayer logo, copyright information,
+ * social networks, and organized groups of navigation links. Designed for responsive
+ * layouts and optimal user experience across all devices.
+ *
+ * @component
+ * @example
+ * Basic usage without links:
+ * ```tsx
+ * <Footer />
+ * ```
+ *
+ * @example
+ * With organized link groups:
+ * ```tsx
+ * const footerLinks = [
+ *   {
+ *     title: 'Product',
+ *     links: [
+ *       { href: '/features', text: 'Features', label: 'Product features' },
+ *       { href: '/pricing', text: 'Pricing', label: 'Pricing information' },
+ *       { href: '/docs', text: 'Documentation', label: 'Product documentation' }
+ *     ]
+ *   },
+ *   {
+ *     title: 'Company',
+ *     links: [
+ *       { href: '/about', text: 'About Us', label: 'About the company' },
+ *       { href: '/careers', text: 'Careers', label: 'Job opportunities' },
+ *       { href: '/contact', text: 'Contact', label: 'Contact information' }
+ *     ]
+ *   }
+ * ];
+ *
+ * <Footer links={footerLinks} />
+ * ```
+ *
+ * @example
+ * With custom click handlers:
+ * ```tsx
+ * const footerLinks = [
+ *   {
+ *     title: 'Actions',
+ *     links: [
+ *       {
+ *         href: '#',
+ *         text: 'Newsletter',
+ *         label: 'Subscribe to newsletter',
+ *         onClick: () => openNewsletterModal()
+ *       }
+ *     ]
+ *   }
+ * ];
+ *
+ * <Footer links={footerLinks} />
+ * ```
+ *
+ * Features:
+ * - Responsive design that adapts to different screen sizes
+ * - Intlayer branding with logo and copyright notice
+ * - Integrated social network links
+ * - Flexible link organization with titled groups
+ * - Accessibility-compliant with proper ARIA labels
+ * - Support for custom click handlers alongside href navigation
+ * - Clean, modern design with proper spacing and typography
+ *
+ * Layout Structure:
+ * - Left side (or top on mobile): Logo, copyright, and social links
+ * - Right side (or bottom on mobile): Organized link groups
+ * - Responsive breakpoints for optimal mobile experience
+ *
+ * Accessibility:
+ * - Semantic HTML structure using <footer> tag
+ * - All links include required aria-label attributes
+ * - Proper heading hierarchy and keyboard navigation
+ * - Screen reader friendly content organization
+ * - Focus management for interactive elements
+ *
+ * @param props - Component properties
+ * @param props.links - Optional array of link groups to display
+ *
+ * @returns A rendered footer with branding, social links, and optional navigation links
+ */
+declare const Footer: FC<FooterProps>;
+//#endregion
+export { Footer, FooterLink, LinkGroup };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":[],"mappings":";;;;;;AAOA;AAcY,KAdA,UAAA,GAcS;EAUhB;EA0FQ,IAAA,EAAA,MA6BZ;;QA3IO;;;;;;;;;KAUI,SAAA;;SAEH;;SAEA;;;;;KAMJ,WAAA;;UAEK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwFG,QAAQ,GAAG"}

package/dist/types/components/Form/Form.d.ts

@@ -0,0 +1,63 @@
+import { Button } from "../Button/Button.js";
+import { FormLabelLayout } from "./layout/FormLabelLayout.js";
+import { FormElement } from "./elements/FormElement.js";
+import { EditableFieldInputElement } from "./elements/EditableFieldInputElement.js";
+import { EditableFieldTextAreaElement } from "./elements/EditableFieldTextAreaElement.js";
+import { InputElement } from "./elements/InputElement.js";
+import { InputPasswordElement } from "./elements/InputPasswordElement.js";
+import { TextAreaElement } from "./elements/TextAreaElement.js";
+import { AutoSizedTextAreaElement } from "./elements/AutoSizeTextAreaElement.js";
+import { CheckboxElement } from "./elements/CheckboxElement.js";
+import { MultiSelectElement } from "./elements/MultiselectElement.js";
+import { SelectElement } from "./elements/SelectElement.js";
+import { SwitchSelectorElement } from "./elements/SwitchSelectorElement.js";
+import { Form as Form$1 } from "./FormBase.js";
+import { FormControl } from "./FormControl.js";
+import { FormDescription } from "./FormDescription.js";
+import { FormField } from "./FormField.js";
+import { FormItem } from "./FormItem.js";
+import { FormMessage } from "./FormMessage.js";
+
+//#region src/components/Form/Form.d.ts
+type FormType = typeof Form$1 & {
+  Description: typeof FormDescription;
+  Control: typeof FormControl;
+  Field: typeof FormField;
+  Item: typeof FormItem;
+  Label: typeof FormLabelLayout;
+  Message: typeof FormMessage;
+  Element: typeof FormElement;
+  Button: typeof Button;
+  Input: typeof InputElement;
+  InputPassword: typeof InputPasswordElement;
+  Checkbox: typeof CheckboxElement;
+  TextArea: typeof TextAreaElement;
+  AutoSizedTextArea: typeof AutoSizedTextAreaElement;
+  MultiSelect: typeof MultiSelectElement;
+  Select: typeof SelectElement;
+  EditableFieldInput: typeof EditableFieldInputElement;
+  EditableFieldTextArea: typeof EditableFieldTextAreaElement;
+  SwitchSelector: typeof SwitchSelectorElement;
+};
+/**
+ * Form components
+ *
+ * Example of usage:
+ * ```jsx
+ * <Form
+ *  schema={ZodSchema}
+ *  onSubmitSuccess={onSubmitSuccess}
+ *  onSubmitError={onSubmitError}
+ *  autoComplete
+ * >
+ *   <Form.Input name="name" label="Name" />
+ *   <Form.Button type="submit" label="Click to submit">
+ *      Submit
+ *   </Form.Button>
+ * </Form>
+ * ```
+ */
+declare const Form: FormType;
+//#endregion
+export { Form };
+//# sourceMappingURL=Form.d.ts.map

package/dist/types/components/Form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","names":[],"sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;KAsBK,QAAA,UAAkB;sBACD;kBACJ;gBACF;eACD;EAJV,KAAA,EAAA,OAKW,eALH;EAAU,OAAA,EAAA,OAML,WANK;EACD,OAAA,EAAA,OAMJ,WANI;EACJ,MAAA,EAAA,OAMD,MANC;EACF,KAAA,EAAA,OAMA,YANA;EACD,aAAA,EAAA,OAMS,oBANT;EACC,QAAA,EAAA,OAMG,eANH;EACE,QAAA,EAAA,OAMC,eAND;EACA,iBAAA,EAAA,OAMU,wBANV;EACD,WAAA,EAAA,OAMK,kBANL;EACD,MAAA,EAAA,OAMC,aAND;EACQ,kBAAA,EAAA,OAMK,yBANL;EACL,qBAAA,EAAA,OAMa,4BANb;EACA,cAAA,EAAA,OAMM,qBANN;CACS;;;;;;;AA0B5B;;;;;;;;;;;;cAAa,MAAmB"}

package/dist/types/components/Form/FormBase.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes } from "react";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+import { ZodObject, z } from "zod/v4";
+import * as react_hook_form0 from "react-hook-form";
+import { FormProviderProps, UseFormProps } from "react-hook-form";
+
+//#region src/components/Form/FormBase.d.ts
+type FormProps<T$1 extends ZodObject> = HTMLAttributes<HTMLFormElement> & FormProviderProps<z.infer<T$1>> & {
+  schema?: T$1;
+  onSubmit?: (data: z.infer<T$1>) => void | Promise<void>;
+  onSubmitSuccess?: (data: z.infer<T$1>) => void | Promise<void>;
+  onSubmitError?: (error: Error) => void | Promise<void>;
+  autoComplete?: boolean;
+};
+declare const Form: <T extends ZodObject>({
+  schema,
+  onSubmit: onSubmitProp,
+  onSubmitSuccess: onSubmitSuccessProp,
+  onSubmitError: onSubmitErrorProp,
+  className,
+  children,
+  autoComplete,
+  ...props
+}: FormProps<T>) => react_jsx_runtime12.JSX.Element;
+declare const useForm: <T extends ZodObject>(schema: T, props?: UseFormProps<z.infer<T>>) => {
+  form: react_hook_form0.UseFormReturn<z.core.output<T>, any, z.core.output<T>>;
+  isSubmitting: boolean;
+  isSubmitted: boolean;
+  isLoading: boolean;
+  isValid: boolean;
+};
+//#endregion
+export { Form, useForm };
+//# sourceMappingURL=FormBase.d.ts.map

package/dist/types/components/Form/FormBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBase.d.ts","names":[],"sources":["../../../../src/components/Form/FormBase.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAaK,sBAAoB,aAAa,eAAe,mBACnD,kBAAkB,CAAA,CAAE,MAAM;WACf;oBACS,CAAA,CAAE,MAAM,gBAAc;2BACf,CAAA,CAAE,MAAM,gBAAc;EAJ9C,aAAS,CAAA,EAAA,CAAA,KAAA,EAKc,KALd,EAAA,GAAA,IAAA,GAK+B,OAL/B,CAAA,IAAA,CAAA;EAAW,YAAA,CAAA,EAAA,OAAA;CAA4B;AAAf,cAoBzB,IApByB,EAAA,CAAA,UAoBP,SApBO,CAAA,CAAA;EAAA,MAAA;EAAA,QAAA,EAoBI,YApBJ;EAAA,eAAA,EAoBI,mBApBJ;EAAA,aAAA,EAoBI,iBApBJ;EAAA,SAAA;EAAA,QAAA;EAAA,YAAA;EAAA,GAAA;AAAA,CAAA,EA6BnC,SA7BmC,CA6BzB,CA7ByB,CAAA,EAAA,GA6BvB,mBAAA,CAAA,GAAA,CAAA,OA7BuB;AACV,cAiEf,OAjEe,EAAA,CAAA,UAiEM,SAjEN,CAAA,CAAA,MAAA,EAkElB,CAlEkB,EAAA,KAAA,CAAA,EAmElB,YAnEkB,CAmEL,CAAA,CAAE,KAnEG,CAmEG,CAnEH,CAAA,CAAA,EAAA,GAAA;EAAN,IAAA,gCAAA,cAAA,EAAA,CAAA,EAAA,GAAA,eAAA,EAAA,CAAA,CAAA;EAApB,YAAA,EAAA,OAAA;EACW,WAAA,EAAA,OAAA;EACiB,SAAA,EAAA,OAAA;EAAN,OAAA,EAAA,OAAA;CAAoB"}

package/dist/types/components/Form/FormControl.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, FC } from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/components/Form/FormControl.d.ts
+declare const FormControl: FC<ComponentProps<typeof Slot>>;
+//#endregion
+export { FormControl };
+//# sourceMappingURL=FormControl.d.ts.map