@adoptaunabuelo/react-components 0.3.145 → 0.3.147

package/dist/esm/components/SwitchTag/SwitchTag.d.ts

@@ -1,12 +1,29 @@
 import React, { CSSProperties } from "react";
 declare const SwitchTag: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default SwitchTag;
+/**
+ * Icon-based toggle switch for switching between 2+ options.
+ * Displays icons in a pill-shaped container with active state highlighting.
+ *
+ * @example
+ * ```tsx
+ * <SwitchTag
+ *   options={[
+ *     { id: "grid", icon: <GridIcon /> },
+ *     { id: "list", icon: <ListIcon /> }
+ *   ]}
+ *   onChange={(option) => setViewMode(option.id)}
+ * />
+ * ```
+ */
 export interface Props {
     style?: CSSProperties;
+    /** Array of icon options (automatically colors icons based on selection) */
     options: Array<{
         id: string;
         icon: React.ReactElement;
     }>;
+    /** Callback fired when option changes, receives selected option */
     onChange?: (option: {
         id: string;
         icon: React.ReactElement;

package/dist/esm/components/Tabs/Tabs.d.ts

@@ -1,19 +1,46 @@
 import { CSSProperties } from "react";
 declare const Tabs: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;
+/**
+ * Tab navigation component with two visual designs.
+ * Primary design shows underline indicator, secondary design shows rounded background.
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   design="secondary"
+ *   options={[
+ *     { id: "1", title: "Overview" },
+ *     { id: "2", title: "Details" }
+ *   ]}
+ *   selectedOption={currentTab}
+ *   onChange={(tab) => setCurrentTab(tab)}
+ * />
+ * ```
+ */
 export interface Props {
     style?: CSSProperties;
+    /** Custom styles for individual tab cells */
     cellStyle?: CSSProperties;
+    /** Custom styles for tab text labels */
     textStyle?: CSSProperties;
+    /** Background color for selected tab (secondary design) */
     cellColor?: string;
+    /** Text color for selected tab */
     textColor?: string;
+    /** Background color for the entire tabs container */
     backgroundColor?: string;
+    /** Array of tab options */
     options: Array<OptionProps>;
+    /** Currently selected tab (controlled component) */
     selectedOption?: OptionProps;
+    /** Visual design: `primary` (underline) or `secondary` (rounded background) */
     design?: "primary" | "secondary";
+    /** Callback fired when tab selection changes */
     onChange?: (option: OptionProps) => void;
 }
 export interface OptionProps {
     id: string;
+    /** Display text for the tab */
     title: string;
 }

package/dist/esm/components/TagSelector/TagSelector.d.ts

@@ -1,18 +1,43 @@
 import React, { CSSProperties } from "react";
 declare const TagSelector: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default TagSelector;
+/**
+ * Tag selector component for single or multiple selection of options.
+ * Renders clickable tags with optional subtitles in a flex-wrap layout.
+ *
+ * @example
+ * ```tsx
+ * <TagSelector
+ *   type="multiple"
+ *   options={[
+ *     { id: "1", title: "React" },
+ *     { id: "2", title: "TypeScript", subtitle: "Recommended" }
+ *   ]}
+ *   optionsSelected={selectedTags}
+ *   onChange={(tags) => setSelectedTags(tags)}
+ * />
+ * ```
+ */
 export interface Props {
+    /** Selection mode: `single` for radio-like, `multiple` for multi-select */
     type?: "multiple" | "single";
     style?: CSSProperties;
+    /** Available tag options to display */
     options: Array<OptionProps>;
+    /** Pre-selected options (controlled component pattern) */
     optionsSelected?: Array<OptionProps>;
+    /** Callback fired when selection changes, receives array of selected options */
     onChange?: (selection: Array<OptionProps>) => void;
+    /** When true, disables click interactions (display only) */
     onlyVisual?: boolean;
+    /** Visual design variant */
     design?: "design1" | "design2";
 }
 export interface OptionProps {
     id: string;
+    /** Main text displayed on the tag */
     title: string;
+    /** Optional secondary text below the title */
     subtitle?: string;
     style?: React.CSSProperties;
 }

package/dist/esm/components/Text/Animated.d.ts

@@ -1,7 +1,24 @@
 import { TextProps } from "./Text";
 declare const TextAnimated: ({ children, ...props }: TextAnimatedProps) => import("react/jsx-runtime").JSX.Element;
 export default TextAnimated;
+/**
+ * Text component with rotating animated words that cycle through options array.
+ * Uses {{data}} placeholder in children string for where animation appears.
+ *
+ * @example
+ * ```tsx
+ * <TextAnimated
+ *   type="h1"
+ *   options={["developers", "designers", "creators"]}
+ *   interval={3000}
+ * >
+ *   Built for {{data}}
+ * </TextAnimated>
+ * ```
+ */
 export type TextAnimatedProps = TextProps & {
+    /** Array of strings to cycle through */
     options: string[];
+    /** Time in milliseconds between transitions. Default: 2500ms */
     interval?: number;
 };

package/dist/esm/components/Text/Text.d.ts

@@ -3,4 +3,15 @@ import { ParagraphProps } from "./Paragraph";
 import { ButtonProps } from "./Button";
 declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Text;
+/**
+ * Unified typography component that renders headers (h1-h6, d1), paragraphs (p, p2, c1, c2, o1, o2), or button text (b1, b2, b3).
+ * Automatically chooses the correct semantic HTML element based on the `type` prop.
+ *
+ * @example
+ * ```tsx
+ * <Text type="h1" weight="bold">Page Title</Text>
+ * <Text type="p" color={ColorV2.text.neutralMedium}>Body text</Text>
+ * <Text type="b1">Button text</Text>
+ * ```
+ */
 export type TextProps = HeaderProps | ParagraphProps | ButtonProps;

package/dist/esm/components/TextArea/TextArea.d.ts

@@ -1,4 +1,23 @@
 import { TextAreaDefaultProps } from "./TextAreaDefault";
 import { TextAreaEditorProps } from "./TextAreaEditor";
 declare const TextArea: (props: TextAreaDefaultProps | TextAreaEditorProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Multi-line text input component with two modes: default (plain textarea) and edit (rich text editor with Tiptap).
+ * Use `type="edit"` for formatted text editing with bold, italic, lists, etc.
+ *
+ * @example
+ * ```tsx
+ * <TextArea
+ *   type="default"
+ *   placeholder="Enter your message..."
+ *   rows={5}
+ * />
+ *
+ * <TextArea
+ *   type="edit"
+ *   value={richTextContent}
+ *   onChange={(html) => setContent(html)}
+ * />
+ * ```
+ */
 export default TextArea;