@zango-core/components 0.2.0-rc.3 → 0.2.1

package/dist/components/PhoneNumberInput/PhoneNumberInput.example.d.ts

@@ -1,10 +1,12 @@
+import { default as React } from 'react';
+
 /**
  * Simple usage example for PhoneNumberInput
  * This can be used as a reference for integrating into existing forms
  */
-export declare const BasicPhoneNumberExample: () => import("react/jsx-runtime").JSX.Element;
-export declare const FormIntegrationExample: () => import("react/jsx-runtime").JSX.Element;
-export declare const FixedCountryExample: () => import("react/jsx-runtime").JSX.Element;
-export declare const ValidationExample: () => import("react/jsx-runtime").JSX.Element;
-declare const PhoneNumberInputExamples: () => import("react/jsx-runtime").JSX.Element;
+export declare const BasicPhoneNumberExample: () => React.JSX.Element;
+export declare const FormIntegrationExample: () => React.JSX.Element;
+export declare const FixedCountryExample: () => React.JSX.Element;
+export declare const ValidationExample: () => React.JSX.Element;
+declare const PhoneNumberInputExamples: () => React.JSX.Element;
 export default PhoneNumberInputExamples;

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

@@ -1 +1 @@
-export { default, type PhoneNumberInputProps, type Country } from './PhoneNumberInput';
+export { type Country, default, type PhoneNumberInputProps } from './PhoneNumberInput';

package/dist/components/Progress/Progress.d.ts

@@ -1,15 +1,33 @@
 import { default as React } from 'react';
 
 export interface ProgressProps {
+    /** Completion percentage, clamped to 0–100 */
     percent?: number;
+    /** Display variant: horizontal bar or circular gauge */
     type?: 'line' | 'circle';
+    /** Visual status that controls bar color */
     status?: 'normal' | 'exception' | 'active' | 'success';
+    /** Whether to render the percentage label */
     showInfo?: boolean;
+    /** Custom formatter for the progress label */
     format?: (percent?: number) => React.ReactNode;
+    /** Override the bar/arc fill color */
     strokeColor?: string;
+    /** Override the bar height or arc stroke width in pixels */
     strokeWidth?: number;
+    /** Controls the overall size of the component */
     size?: 'default' | 'small';
+    /** Accessible name for the progress bar (defaults to "Progress") */
+    'aria-label'?: string;
+    /** References the id of an element that labels the progress bar */
+    'aria-labelledby'?: string;
+    /** Additional className applied to the root element */
     className?: string;
+    /** Inline styles applied to the root element */
     style?: React.CSSProperties;
 }
+/**
+ * Displays completion status as a horizontal bar or circular gauge.
+ * Supports normal, active, success, and exception visual states.
+ */
 export declare const Progress: React.FC<ProgressProps>;

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

@@ -1,2 +1,2 @@
-export { Progress } from './Progress';
 export type { ProgressProps } from './Progress';
+export { Progress } from './Progress';

package/dist/components/Result/Result.d.ts

@@ -1,12 +1,23 @@
 import { default as React } from 'react';
 
 export interface ResultProps {
+    /** Determines the built-in icon and color scheme */
     status?: 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
+    /** Primary heading text */
     title?: React.ReactNode;
+    /** Secondary descriptive text below the title */
     subTitle?: React.ReactNode;
+    /** Custom icon that replaces the default status icon */
     icon?: React.ReactNode;
+    /** Action elements rendered below the subtitle (e.g. buttons) */
     extra?: React.ReactNode;
+    /** Additional className applied to the root element */
     className?: string;
+    /** Inline styles applied to the root element */
     style?: React.CSSProperties;
 }
+/**
+ * Full-page result display for operation outcomes such as success, error, or HTTP status codes.
+ * Renders a status icon, title, subtitle, and optional action elements.
+ */
 export declare const Result: React.FC<ResultProps>;

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

@@ -1,2 +1,2 @@
-export { Result } from './Result';
 export type { ResultProps } from './Result';
+export { Result } from './Result';

package/dist/components/Segmented/Segmented.d.ts

@@ -1,19 +1,35 @@
 import { default as React } from 'react';
 
 export interface SegmentedOption {
+    /** Display content for the segment button */
     label: React.ReactNode;
+    /** Unique value identifying this option */
     value: string | number;
+    /** Whether this individual option is non-interactive */
     disabled?: boolean;
+    /** Optional icon rendered before the label */
     icon?: React.ReactNode;
 }
 export interface SegmentedProps {
+    /** List of segment options; plain strings/numbers are auto-normalized */
     options: SegmentedOption[] | (string | number)[];
+    /** Controlled selected value */
     value?: string | number;
+    /** Initial selected value for uncontrolled usage */
     defaultValue?: string | number;
+    /** Called when the selected value changes */
     onChange?: (value: string | number) => void;
+    /** Whether the entire control is non-interactive */
     disabled?: boolean;
+    /** Controls the padding and font size of segment buttons */
     size?: 'small' | 'middle' | 'large';
+    /** Additional className applied to the root element */
     className?: string;
+    /** Inline styles applied to the root element */
     style?: React.CSSProperties;
 }
+/**
+ * Segmented control that lets users pick one option from a compact button group.
+ * Supports controlled and uncontrolled modes with full keyboard navigation.
+ */
 export declare const Segmented: React.FC<SegmentedProps>;

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

@@ -1,2 +1,2 @@
+export type { SegmentedOption, SegmentedProps } from './Segmented';
 export { Segmented } from './Segmented';
-export type { SegmentedProps, SegmentedOption } from './Segmented';

package/dist/components/Select/Select.d.ts

@@ -1,27 +1,55 @@
 import { default as React } from 'react';
 
 export interface SelectOption {
+    /** Unique value submitted when this option is selected */
     value: string | number;
+    /** Display content rendered in the trigger and dropdown */
     label: React.ReactNode;
+    /** Whether this option is non-interactive */
     disabled?: boolean;
 }
 export interface SelectProps {
+    /** Controlled selected value */
     value?: string | number;
+    /** Initial selected value for uncontrolled usage */
     defaultValue?: string | number;
+    /** Placeholder shown when no option is selected */
     placeholder?: string;
+    /** Option list; mutually exclusive with declarative children */
     options?: SelectOption[];
-    onChange?: (value: string | number, option: SelectOption) => void;
+    /** Called when the selected value changes; receives `undefined` after a clear */
+    onChange?: (value: string | number | undefined, option: SelectOption | null) => void;
+    /** Called when an option is explicitly selected */
     onSelect?: (value: string | number, option: SelectOption) => void;
+    /** Whether the control is non-interactive */
     disabled?: boolean;
+    /** Whether a clear button is shown when a value is selected */
     allowClear?: boolean;
+    /** Whether to render a search input inside the dropdown */
     showSearch?: boolean;
+    /** Custom predicate for filtering options when `showSearch` is enabled */
     filterOption?: (input: string, option?: SelectOption) => boolean;
-    size?: "small" | "medium" | "large";
+    /** Controls the trigger height and font size */
+    size?: 'small' | 'medium' | 'large';
+    /** Additional className applied to the root wrapper element */
     className?: string;
+    /** Inline styles applied to the root wrapper element */
     style?: React.CSSProperties;
+    /** Additional className applied to the dropdown list */
     dropdownClassName?: string;
+    /** Accessible name for the combobox (recommended when no visible label wraps it) */
+    'aria-label'?: string;
+    /** References the id of an element that labels the combobox */
+    'aria-labelledby'?: string;
+    /** Marks the combobox invalid for assistive tech (e.g. failed validation) */
+    'aria-invalid'?: boolean;
+    /** Declarative `Select.Option` children used instead of the `options` prop */
     children?: React.ReactNode;
 }
+/**
+ * Accessible dropdown select with optional search filtering and clear button.
+ * Accepts options via the `options` prop or declarative `Select.Option` children.
+ */
 export declare const Select: React.FC<SelectProps> & {
     Option: React.FC<{
         value: string | number;

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

@@ -1,2 +1,2 @@
+export type { SelectOption, SelectProps } from './Select';
 export { Select } from './Select';
-export type { SelectProps, SelectOption } from './Select';

package/dist/components/Space/Space.d.ts

@@ -1,12 +1,23 @@
 import { default as React } from 'react';
 
 export interface SpaceProps {
+    /** Child elements to space */
     children: React.ReactNode;
+    /** Flex direction for child arrangement */
     direction?: 'horizontal' | 'vertical';
+    /** Gap between children; named sizes map to 8/16/24 px */
     size?: 'small' | 'medium' | 'large' | number;
+    /** Cross-axis alignment of children */
     align?: 'start' | 'end' | 'center' | 'baseline';
+    /** Whether children wrap to the next line when they overflow */
     wrap?: boolean;
+    /** Additional className applied to the root element */
     className?: string;
+    /** Inline styles applied to the root element */
     style?: React.CSSProperties;
 }
+/**
+ * Flex container that adds consistent spacing between its children.
+ * Supports horizontal and vertical directions, alignment, and wrapping.
+ */
 export declare const Space: React.FC<SpaceProps>;

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

@@ -1,2 +1,2 @@
-export { Space } from './Space';
 export type { SpaceProps } from './Space';
+export { Space } from './Space';

package/dist/components/Spin/Spin.d.ts

@@ -1,11 +1,21 @@
 import { default as React } from 'react';
 
 export interface SpinProps {
+    /** Whether the spinner is active */
     spinning?: boolean;
+    /** Controls the spinner diameter */
     size?: 'small' | 'default' | 'large';
+    /** Loading message displayed beneath the spinner */
     tip?: string;
+    /** Content to overlay with the spinner when spinning */
     children?: React.ReactNode;
+    /** Additional className applied to the root element */
     className?: string;
+    /** Inline styles applied to the root element */
     style?: React.CSSProperties;
 }
+/**
+ * Animated loading spinner with an optional overlay for wrapping content.
+ * When `children` are provided, a semi-transparent overlay covers them while `spinning` is true.
+ */
 export declare const Spin: React.FC<SpinProps>;

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

@@ -1,2 +1,2 @@
-export { Spin } from './Spin';
 export type { SpinProps } from './Spin';
+export { Spin } from './Spin';

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

@@ -1,21 +1,39 @@
 import { default as React } from 'react';
 
 export interface TabItem {
+    /** Unique identifier for the tab */
     key: string;
+    /** Tab header label */
     label: React.ReactNode;
+    /** Content rendered when this tab is active */
     children: React.ReactNode;
+    /** Whether the tab is non-interactive */
     disabled?: boolean;
 }
 export interface TabsProps {
+    /** Controlled active tab key */
     activeKey?: string;
+    /** Initial active tab key when uncontrolled */
     defaultActiveKey?: string;
+    /** Array of tab descriptors */
     items: TabItem[];
+    /** Callback fired when the active tab changes */
     onChange?: (activeKey: string) => void;
+    /** Visual style of the tab strip */
     type?: 'line' | 'card';
+    /** Size of the tab buttons */
     size?: 'small' | 'default' | 'large';
+    /** Position of the tab strip relative to its panel */
     tabPosition?: 'top' | 'bottom' | 'left' | 'right';
+    /** Additional class names for the root element */
     className?: string;
+    /** Additional class names for the tab panel */
     contentClassName?: string;
+    /** Inline styles for the root element */
     style?: React.CSSProperties;
 }
+/**
+ * Tab navigation component supporting controlled and uncontrolled modes, line and card visual styles,
+ * and all four tab positions. Implements the WAI-ARIA tabs pattern with full keyboard navigation.
+ */
 export declare const Tabs: React.FC<TabsProps>;

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

@@ -1,2 +1,2 @@
+export type { TabItem, TabsProps } from './Tabs';
 export { Tabs } from './Tabs';
-export type { TabsProps, TabItem } from './Tabs';

package/dist/components/Tag/Tag.d.ts

@@ -1,12 +1,23 @@
 import { default as React } from 'react';
 
 export interface TagProps {
+    /** Tag label content */
     children: React.ReactNode;
+    /** Preset semantic color or any valid CSS color value */
     color?: string | 'success' | 'processing' | 'error' | 'warning' | 'default';
+    /** Whether a close button is rendered */
     closable?: boolean;
+    /** Callback fired when the close button is clicked */
     onClose?: (e: React.MouseEvent) => void;
+    /** Additional class names */
     className?: string;
+    /** Inline styles */
     style?: React.CSSProperties;
+    /** Optional icon rendered before the label */
     icon?: React.ReactNode;
 }
+/**
+ * Small inline label used to categorize content or indicate status.
+ * Supports preset semantic colors, arbitrary CSS color values, and an optional close button.
+ */
 export declare const Tag: React.FC<TagProps>;

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

@@ -1,2 +1,2 @@
-export { Tag } from './Tag';
 export type { TagProps } from './Tag';
+export { Tag } from './Tag';

package/dist/components/Textarea/Textarea.d.ts

@@ -1,7 +1,14 @@
 import { default as React } from 'react';
 
 interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Whether the textarea is in an error state, applying error border styling */
     error?: boolean;
+    /** Helper or error message displayed below the textarea */
+    helperText?: string;
 }
+/**
+ * Multi-line text input built on the native textarea element with consistent Zango styling.
+ * Supports an error state, helper/error text, all standard textarea attributes, and ref forwarding.
+ */
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default Textarea;

package/dist/components/Timeline/Timeline.d.ts

@@ -1,30 +1,55 @@
 export interface TimelineEvent {
+    /** Unique identifier for the event */
     id: string;
-    type: "status_change" | "consultation" | "prescription" | "vitals" | "custom";
+    /** Semantic category of the event */
+    type: 'status_change' | 'consultation' | 'prescription' | 'vitals' | 'custom';
+    /** Primary event label */
     title: string;
+    /** Secondary label rendered after the title */
     subtitle?: string;
+    /** Additional descriptive text below the title */
     description?: string;
+    /** Formatted time string displayed on the event card */
     timestamp: string;
+    /** Formatted date string displayed on the event card */
     date: string;
-    icon?: "user" | "activity" | "file" | "calendar" | "clock" | "custom";
+    /** Built-in icon name to use for the event marker */
+    icon?: 'user' | 'activity' | 'file' | 'calendar' | 'clock' | 'custom';
+    /** URL of a custom image used as the event marker */
     iconUrl?: string;
-    metadata?: Record<string, any>;
+    /** Arbitrary key–value pairs rendered as a metadata table */
+    metadata?: Record<string, unknown>;
 }
 export interface TimelineSection {
+    /** Human-readable date label displayed as the section header */
     date: string;
+    /** Ordered list of events belonging to this date group */
     events: TimelineEvent[];
 }
 interface TimelineProps {
     sections: TimelineSection[];
     className?: string;
 }
+/**
+ * Renders a single timeline event card with an icon marker, title, optional subtitle and description,
+ * metadata table, and a timestamp badge.
+ */
 export declare function TimelineEventItem({ event }: {
     event: TimelineEvent;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
+/**
+ * Renders a date-grouped section of timeline events with a pill-style date header
+ * and a stacked list of TimelineEventItem cards.
+ */
 export declare function TimelineSection({ section }: {
     section: TimelineSection;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function Timeline({ sections, className }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
+/**
+ * Top-level timeline component that renders an ordered list of date-grouped event sections.
+ */
+export declare function Timeline({ sections, className }: TimelineProps): import("react").JSX.Element;
+/** Returns a locale date string formatted as "Month Day, Year" (e.g. "June 30, 2026"). */
 export declare function formatTimelineDate(date: Date | string): string;
+/** Returns a 12-hour time string with AM/PM (e.g. "2:30 PM"). */
 export declare function formatTimelineTime(date: Date | string): string;
 export {};

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

@@ -1,2 +1,2 @@
-export { Timeline, TimelineSection, TimelineEventItem, formatTimelineDate, formatTimelineTime } from './Timeline';
 export type { TimelineEvent, TimelineSection as TimelineSectionType } from './Timeline';
+export { formatTimelineDate, formatTimelineTime, Timeline, TimelineEventItem, TimelineSection, } from './Timeline';

package/dist/components/Toast/Toast.d.ts

@@ -3,34 +3,63 @@ import { default as React } from 'react';
 export type ToastVariant = 'success' | 'error' | 'warning' | 'info' | 'default';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export interface ToastAction {
+    /** Button label text */
     label: string;
+    /** Callback fired when the action button is clicked */
     onClick: () => void;
 }
 export interface ToastOptions {
+    /** Main toast heading */
     title: string;
+    /** Supporting text shown below the title */
     description?: string;
+    /** Visual style variant */
     variant?: ToastVariant;
+    /** Auto-dismiss delay in milliseconds */
     duration?: number;
+    /** Custom icon rendered beside the title */
     icon?: React.ReactNode;
+    /** Primary action button config */
     primaryAction?: ToastAction;
+    /** Secondary/cancel action button config */
     secondaryAction?: ToastAction;
+    /** Whether to render an explicit close button */
     closeButton?: boolean;
+    /** Overrides the Toaster's position for this single toast */
+    position?: ToastPosition;
 }
 export interface ToasterProps {
+    /** Screen position for the toast stack */
     position?: ToastPosition;
+    /** Default auto-dismiss delay in milliseconds */
     duration?: number;
+    /** Vertical gap in pixels between stacked toasts */
     gap?: number;
+    /** Maximum number of toasts shown simultaneously */
     visibleToasts?: number;
+    /** Whether each toast renders a close button */
     closeButton?: boolean;
+    /** Whether to apply Sonner's rich semantic colors */
     richColors?: boolean;
+    /** Whether toasts expand to show all items instead of stacking */
     expand?: boolean;
+    /** Additional class names for the toaster container */
     className?: string;
+    /** Per-toast className and style overrides */
     toastOptions?: {
         className?: string;
         style?: React.CSSProperties;
     };
 }
+/**
+ * Provider component that must be rendered once near the root of the application to mount the
+ * Sonner toast portal. Configure default position, duration, and appearance via props.
+ */
 export declare const Toaster: React.FC<ToasterProps>;
+/**
+ * Imperative API for triggering toasts programmatically. Call toast.success(), toast.error(),
+ * toast.warning(), toast.info(), or toast.custom() with a title string or ToastOptions object.
+ */
 export declare const toast: {
     success: (options: ToastOptions | string) => string | number;
     error: (options: ToastOptions | string) => string | number;

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

@@ -1,2 +1,2 @@
+export type { ToastAction, ToasterProps, ToastOptions, ToastPosition, ToastVariant, } from './Toast';
 export { Toaster, toast } from './Toast';
-export type { ToastVariant, ToastPosition, ToastAction, ToastOptions, ToasterProps } from './Toast';

package/dist/components/Typography/Typography.d.ts

@@ -1,29 +1,54 @@
 import { default as React } from 'react';
 
 export interface TypographyProps {
+    /** Content to render inside the typography wrapper */
     children: React.ReactNode;
+    /** Additional class names */
     className?: string;
+    /** Inline styles */
     style?: React.CSSProperties;
 }
 export interface TitleProps extends TypographyProps {
-    level?: 1 | 2 | 3 | 4 | 5;
+    /** Semantic heading level rendered as h1–h6. Choose by document outline, not size. */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Visual size, decoupled from `level`, so a semantically-correct heading can
+     * look larger or smaller than its level implies. Defaults to matching `level`.
+     */
+    size?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Semantic color variant */
     type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
 }
 export interface TextProps extends TypographyProps {
+    /** Semantic color variant */
     type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /** Renders text as bold */
     strong?: boolean;
+    /** Renders text as italic */
     italic?: boolean;
+    /** Renders text with an underline */
     underline?: boolean;
+    /** Applies reduced opacity and a not-allowed cursor */
     disabled?: boolean;
+    /** Wraps content in a highlighted mark element */
     mark?: boolean;
+    /** Wraps content in a monospace code element */
     code?: boolean;
+    /** Reserved for future copy-to-clipboard support */
     copyable?: boolean;
+    /** Truncates overflowing text with an ellipsis */
     ellipsis?: boolean;
 }
 export interface ParagraphProps extends TypographyProps {
+    /** Semantic color variant */
     type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /** Truncates overflowing text with an ellipsis */
     ellipsis?: boolean;
 }
+/**
+ * Top-level typography container that groups related text content. Sub-components Typography.Title,
+ * Typography.Text, and Typography.Paragraph handle specific text rendering scenarios.
+ */
 export declare const Typography: React.FC<TypographyProps> & {
     Title: React.FC<TitleProps>;
     Text: React.FC<TextProps>;

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

@@ -1,2 +1,2 @@
+export type { ParagraphProps, TextProps, TitleProps, TypographyProps } from './Typography';
 export { Typography } from './Typography';
-export type { TypographyProps, TitleProps, TextProps, ParagraphProps } from './Typography';

package/dist/demo/App.d.ts

@@ -1,2 +1,2 @@
-declare function App(): import("react/jsx-runtime").JSX.Element;
+declare function App(): import("react").JSX.Element;
 export default App;