@adres/adrec-dls 0.1.0

package/README.md

@@ -0,0 +1,38 @@
+# @adres/adrec-dls
+
+React components implementing the ADREC Design System, for ADREC admin-panel
+apps (Tawtheeq and others) to install instead of rebuilding.
+
+## Install
+
+```sh
+npm install @adres/adrec-dls
+```
+
+`react` and `react-dom` (`^19.0.0`) are peer dependencies - install them in
+your app if they aren't already there.
+
+## Set up the design tokens
+
+Components use Tailwind CSS v4 utility classes from the `ads-*` design
+tokens. Without importing this package's token sheet, those utilities don't
+exist and components will render unstyled. Import it once, in your app's
+Tailwind entry CSS:
+
+```css
+@import "@adres/adrec-dls/tokens.css";
+```
+
+## Usage
+
+```tsx
+import { Badge } from '@adres/adrec-dls';
+
+function Example() {
+  return <Badge text="Active" color="Success green" type="Light" />;
+}
+```
+
+Every component supports `dir="ltr"`/`dir="rtl"` via its `content`/language
+props for EN/AR layouts - see each component's exported props `interface`
+for the full API.

package/dist-lib/components/ApplicationHistory/ApplicationHistory.d.ts

@@ -0,0 +1,30 @@
+import type { StatusIndicatorColor } from '../StatusIndicator/StatusIndicator';
+export type StepStatus = 'default' | 'current' | 'done' | 'rejected' | 'returned';
+export interface ReviewHistoryEntry {
+    label: string;
+    statusColor: StatusIndicatorColor;
+    timestamp: string;
+}
+export interface ApplicationHistoryStepData {
+    id: string;
+    title: string;
+    status: StepStatus;
+    by?: string;
+    date?: string;
+    reviewHistory?: ReviewHistoryEntry[];
+    /** Whether the step's detail (by/date/review history) starts expanded. Defaults to true. */
+    defaultExpanded?: boolean;
+}
+export interface ApplicationHistoryProps {
+    steps: ApplicationHistoryStepData[];
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    className?: string;
+}
+/**
+ * ADS Application history (stepper / timeline). Structured as a single layout that
+ * mirrors automatically under `dir="rtl"`, rather than Figma's separate EN/AR variants.
+ * Unlike the static Figma mockup, each step's detail panel is a real expand/collapse
+ * toggle rather than a fixed set of visibility flags.
+ */
+export declare const ApplicationHistory: ({ steps, content, className }: ApplicationHistoryProps) => import("react").JSX.Element;

package/dist-lib/components/Badge/Badge.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { StatusIndicatorColor } from '../StatusIndicator/StatusIndicator';
+export type BadgeColor = 'Red' | 'Black' | 'Orange' | 'Gray' | 'Success green' | 'Beige' | 'ADREC Green';
+export type BadgeType = 'Light' | 'Solid' | 'Text';
+export interface BadgeProps {
+    /** Badge color. Only the color/type pairs defined in Figma are styled; others fall back to Gray/Light (Text falls back to Black). */
+    color?: BadgeColor;
+    /** Solid = filled background. Light = tinted background. Text = no background, label only. */
+    type?: BadgeType;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    text?: string;
+    showText?: boolean;
+    leftIcon?: ReactNode;
+    showLeftIcon?: boolean;
+    rightIcon?: ReactNode;
+    showRightIcon?: boolean;
+    /** Only meaningful for type="Text", matching the Figma "Badge" component. */
+    showStatusIndicator?: boolean;
+    statusColor?: StatusIndicatorColor;
+    className?: string;
+}
+/**
+ * ADS Badge. Structured as a single layout (icon, optional status dot, text, icon) that
+ * mirrors automatically under `dir="rtl"`, rather than Figma's separate EN/AR variants.
+ */
+export declare const Badge: ({ color, type, content, text, showText, leftIcon, showLeftIcon, rightIcon, showRightIcon, showStatusIndicator, statusColor, className, }: BadgeProps) => import("react").JSX.Element;

package/dist-lib/components/Button/Button.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+export type ButtonKind = 'primary' | 'secondary' | 'tertiary' | 'text' | 'danger';
+type ButtonRef = ((instance: HTMLButtonElement | null) => void) | {
+    current: HTMLButtonElement | null;
+} | null;
+export interface ButtonProps {
+    /** Forwarded to the underlying `<button>` — needed for anything that measures/positions
+     * off it (e.g. using a Button as a Popover's `asChild` trigger). */
+    ref?: ButtonRef;
+    kind?: ButtonKind;
+    disabled?: boolean;
+    /** Stretches the button to fill its container, matching the mobile layout in ScreenBottomActions. */
+    fullWidth?: boolean;
+    /** Renders as a square control sized to fit just an icon — no text, no horizontal
+     * padding/gap. Pass the icon itself as `children` (it's sized and centered
+     * automatically, the same way leftIcon/rightIcon are). There's no visible label for
+     * assistive tech in this mode, so pass `aria-label` too. */
+    iconOnly?: boolean;
+    type?: 'button' | 'submit';
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    onClick?: () => void;
+    'aria-label'?: string;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * ADS Button. The shared button primitive, consolidated from the button
+ * styles already duplicated inline in CardTitle and ScreenBottomActions.
+ */
+export declare const Button: ({ ref, kind, disabled, fullWidth, iconOnly, type, content, leftIcon, rightIcon, onClick, "aria-label": ariaLabel, className, children, }: ButtonProps) => import("react").JSX.Element;
+export {};

package/dist-lib/components/CardTitle/CardTitle.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { StatusIndicatorColor } from '../StatusIndicator/StatusIndicator';
+export interface CardTitleProps {
+    title?: string;
+    mandatory?: boolean;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    showInfoIcon?: boolean;
+    infoText?: string;
+    showSideText?: boolean;
+    sideText?: string;
+    showBottomText?: boolean;
+    bottomText?: string;
+    showBadge?: boolean;
+    badgeText?: string;
+    badgeStatusColor?: StatusIndicatorColor;
+    /** Whether the section this title heads is expanded or collapsed. Only rotates the chevron — the header's own look stays constant. */
+    expanded?: boolean;
+    /** Renders a trailing chevron the caller can wire up to toggle `expanded`. */
+    collapsible?: boolean;
+    onToggle?: () => void;
+    cta?: 'none' | 'one' | 'two';
+    ctaLabel?: string;
+    onCtaClick?: () => void;
+    ctaTwoLabels?: [string, string];
+    ctaTwoIcons?: [ReactNode, ReactNode];
+    onCtaTwoClick?: [() => void, () => void];
+    /** Bold corner text, e.g. a price or count. */
+    cornerBoldText?: string;
+    /** Muted corner text, e.g. a timestamp. */
+    cornerMutedText?: string;
+    className?: string;
+}
+/**
+ * ADS Card title. Structured as a single layout that mirrors automatically under
+ * `dir="rtl"`, rather than Figma's separate EN/AR variants. `expanded` folds together
+ * Figma's separate "Expanded" / "Collapsed" variants into one togglable component.
+ */
+export declare const CardTitle: ({ title, mandatory, content, showInfoIcon, infoText, showSideText, sideText, showBottomText, bottomText, showBadge, badgeText, badgeStatusColor, expanded, collapsible, onToggle, cta, ctaLabel, onCtaClick, ctaTwoLabels, ctaTwoIcons, onCtaTwoClick, cornerBoldText, cornerMutedText, className, }: CardTitleProps) => import("react").JSX.Element;

package/dist-lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,20 @@
+import { type ChangeEvent } from 'react';
+export interface CheckboxProps {
+    id?: string;
+    label?: string;
+    showLabel?: boolean;
+    /** Controlled checked state. Omit it (with or without `onChange`) to let the box manage its own state. */
+    checked?: boolean;
+    /** Initial state for uncontrolled usage, i.e. when `checked` is omitted. */
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+}
+/**
+ * ADS Checkbox. A native `<input type="checkbox">` wrapped in its `<label>` (rather than
+ * a custom-drawn box) so the whole row stays keyboard- and screen-reader-accessible for free.
+ */
+export declare const Checkbox: ({ id, label, showLabel, checked, defaultChecked, disabled, content, onChange, className, }: CheckboxProps) => import("react").JSX.Element;

package/dist-lib/components/DataTable/DataTable.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export interface DataTableColumn {
+    key: string;
+    header: string;
+    /** Any valid CSS width (e.g. "120px", "20%"). Applied inline since it is an arbitrary,
+     * caller-supplied value that can't be known ahead of time as a static Tailwind class. */
+    width?: string;
+}
+export type DataTableRow = Record<string, ReactNode>;
+export interface DataTableProps {
+    columns: DataTableColumn[];
+    rows: DataTableRow[];
+    /** Derives a unique key per row, for React's list key and to match `highlightedRowKey`. Defaults to the row's index. */
+    rowKey?: (row: DataTableRow, index: number) => string;
+    /** Fired when the first column's cell is clicked; that cell renders as a link when this is set. */
+    onRowAction?: (row: DataTableRow) => void;
+    highlightedRowKey?: string;
+    emptyMessage?: string;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    className?: string;
+}
+/**
+ * ADS Data table. Header row is filled gold with white text (matching `table.gt th`
+ * exactly), body rows alternate cream/cream-alt, and an optional `highlightedRowKey`
+ * tints one row for emphasis using the same fill as the prototype's `tr.hi`.
+ */
+export declare const DataTable: ({ columns, rows, rowKey, onRowAction, highlightedRowKey, emptyMessage, content, className, }: DataTableProps) => import("react").JSX.Element;

package/dist-lib/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+export interface DescriptionListItem {
+    label: string;
+    value: ReactNode;
+    /** Spans both the label and value columns, stacking label above value (e.g. a "Remarks" row). */
+    fullWidth?: boolean;
+}
+export interface DescriptionListProps {
+    items: DescriptionListItem[];
+    /** Renders a filled header bar above the rows. */
+    headerLabel?: string;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    className?: string;
+}
+/**
+ * ADS Description list. A semantic label/value table (rows are literally label:value
+ * pairs, so a `<table>` is the appropriate element here), with alternating row shading
+ * and an optional filled header bar.
+ */
+export declare const DescriptionList: ({ items, headerLabel, content, className }: DescriptionListProps) => import("react").JSX.Element;

package/dist-lib/components/Drawer/Drawer.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+export type DrawerSide = 'top' | 'right' | 'bottom' | 'left';
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    /** Which screen edge the drawer slides in from. */
+    side?: DrawerSide;
+    /** Sizing/shape for the drawer panel itself (e.g. `w-80` for left/right, a `max-w-*`
+     * wrapper inside for top/bottom) — the panel itself is always edge-to-edge on its axis. */
+    className?: string;
+    /** Whether to render a dimming backdrop behind the panel. Default true. When false, the
+     * rest of the page stays fully visible and clickable while the drawer is open. */
+    overlay?: boolean;
+    /** When false, clicking the backdrop or pressing Escape no longer closes the drawer —
+     * only an explicit `onClose` call (e.g. from a close button in the drawer's own content)
+     * does. Default true. Pair with `overlay={false}` to let the drawer stay open while the
+     * user interacts with the rest of the page. */
+    dismissible?: boolean;
+    children: ReactNode;
+}
+/**
+ * ADS Drawer. A generic slide-in panel — an optional dimmed backdrop plus a panel pinned
+ * to one screen edge, sliding in/out via a CSS transform transition (always mounted,
+ * toggled through `open` rather than conditionally rendered, so the slide animation plays
+ * both ways).
+ */
+export declare function Drawer({ open, onClose, side, className, overlay, dismissible, children }: DrawerProps): import("react").JSX.Element;

package/dist-lib/components/ImagePlaceholder/ImagePlaceholder.d.ts

@@ -0,0 +1,16 @@
+export type ImagePlaceholderSize = 'sm' | 'md' | 'lg';
+export interface ImagePlaceholderProps {
+    /** Scales the centered icon — the box itself is always sized by the caller (via
+     * `className`), since placeholders stand in for images of very different aspect
+     * ratios (a plot thumbnail vs. a signature scan). */
+    size?: ImagePlaceholderSize;
+    /** Accessible description, since there's no real image behind this placeholder. */
+    label?: string;
+    className?: string;
+}
+/**
+ * ADS Image placeholder. A generic "no image" box — muted fill, centered icon — sized
+ * entirely by the caller (wrap it in an element with the desired width/height, or pass
+ * `className` directly). Use wherever a real image/photo isn't available yet.
+ */
+export declare const ImagePlaceholder: ({ size, label, className }: ImagePlaceholderProps) => import("react").JSX.Element;

package/dist-lib/components/InputField/InputField.d.ts

@@ -0,0 +1,45 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+export type InputFieldType = 'default' | 'error' | 'success' | 'filled' | 'disabled';
+export interface InputFieldProps {
+    id?: string;
+    label?: string;
+    /** Hides the label row entirely — for compact layouts (e.g. a table cell with its own
+     * label to the side) that don't want the field's own floating label. */
+    showLabel?: boolean;
+    mandatory?: boolean;
+    showTooltipIcon?: boolean;
+    tooltipText?: string;
+    type?: InputFieldType;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    /** Controlled value. Omit it (with or without `onChange`) to let the field manage its own text. */
+    value?: string;
+    /** Initial text for uncontrolled usage, i.e. when `value` is omitted. */
+    defaultValue?: string;
+    placeholder?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Fired when the clear ("x") button is pressed. Only rendered for type="error" / type="filled" when there is a value. */
+    onClear?: () => void;
+    showLeftIcon?: boolean;
+    leftIcon?: ReactNode;
+    showRightIcon?: boolean;
+    rightIcon?: ReactNode;
+    /** Renders a leading "<dropdownText> ⌄" group inside the field, e.g. a country-code prefix. */
+    showInnerDropdown?: boolean;
+    dropdownText?: string;
+    /** Renders a trailing chevron, indicating the whole field opens a select/dropdown. */
+    dropDown?: boolean;
+    showRightUnit?: boolean;
+    unit?: string;
+    showSupportingText?: boolean;
+    showLeftText?: boolean;
+    leftText?: string;
+    showRightText?: boolean;
+    rightText?: string;
+    className?: string;
+}
+/**
+ * ADS Input Field. Structured as a single layout that mirrors automatically under
+ * `dir="rtl"`, rather than Figma's separate EN/AR variants.
+ */
+export declare const InputField: ({ id, label: labelText, showLabel, mandatory, showTooltipIcon, tooltipText, type, content, value, defaultValue, placeholder, onChange, onClear, showLeftIcon, leftIcon, showRightIcon, rightIcon, showInnerDropdown, dropdownText, dropDown, showRightUnit, unit, showSupportingText, showLeftText, leftText, showRightText, rightText, className, }: InputFieldProps) => import("react").JSX.Element;

package/dist-lib/components/LinkRow/LinkRow.d.ts

@@ -0,0 +1,17 @@
+export interface LinkRowProps {
+    /** One or more Text Button links, rendered after the status dot. */
+    links: string[];
+    /** Bold label on the right (e.g. an owner/party name). Omit for a links-only row. */
+    name?: string;
+    onLinkClick?: (link: string) => void;
+    /** Colors the leading dot Orange when true, Gray otherwise. */
+    active?: boolean;
+    className?: string;
+}
+/**
+ * ADS Link row. A status dot followed by one or more Text Button links, with an
+ * optional bold label on the right. Pairs with SectionHeader below a plain title —
+ * e.g. `<SectionHeader title="Owners" />` + `<LinkRow links={[...]} name="QA-Company" />` —
+ * so the title stays untouched while its actions live in their own row underneath.
+ */
+export declare const LinkRow: ({ links, name, onLinkClick, active, className }: LinkRowProps) => import("react").JSX.Element;

package/dist-lib/components/Modal/Modal.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface ModalProps {
+    icon?: ReactNode;
+    title: string;
+    children: ReactNode;
+    footer: ReactNode;
+    onDismiss: () => void;
+}
+/**
+ * ADS Modal. A centered dialog with a header (optional icon + title), a body, and a
+ * footer action row. Dismisses on a click outside the dialog card.
+ */
+export declare function Modal({ icon, title, children, footer, onDismiss }: ModalProps): import("react").JSX.Element;

package/dist-lib/components/Notification/Notification.d.ts

@@ -0,0 +1,16 @@
+export type NotificationView = 'system' | 'warning' | 'error' | 'success' | 'informative' | 'lowest-priority';
+export interface NotificationProps {
+    view?: NotificationView;
+    message?: string;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+    className?: string;
+}
+/**
+ * ADS Notification banner. Structured as a single layout (icon, message, link) that
+ * mirrors automatically under `dir="rtl"`, rather than Figma's separate EN/AR variants.
+ */
+export declare const Notification: ({ view, message, content, showLink, linkText, onLinkClick, className, }: NotificationProps) => import("react").JSX.Element;

package/dist-lib/components/Panel/Panel.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+/** Matches the prototype's `.pnl`/`.pnl-h`/`.pnl-b` side-rail panel, built on CardTitle's
+ * own collapsible header rather than reproducing its chrome. */
+export interface PanelProps {
+    title: string;
+    children: ReactNode;
+    defaultExpanded?: boolean;
+}
+/** ADS Panel. A bordered, collapsible section — a CardTitle header plus a content area
+ * that shows/hides under it. Purely structural (no domain content of its own), meant to
+ * be composed by callers into specific sections (e.g. an "Actions" or "Owner" side-rail panel). */
+export declare function Panel({ title, children, defaultExpanded }: PanelProps): import("react").JSX.Element;

package/dist-lib/components/Popover/Popover.d.ts

@@ -0,0 +1,29 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+import type { ReactNode } from 'react';
+export type PopoverAlign = 'start' | 'center' | 'end';
+export type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
+export interface PopoverProps {
+    /** The element that opens the popover on click — rendered as-is (via Radix's `asChild`),
+     * so pass a real interactive element (e.g. a Button) rather than plain text. */
+    trigger: ReactNode;
+    /** Popover body content. Wrap any item that should close the popover on click (e.g. a
+     * menu link) in `PopoverClose`. */
+    children: ReactNode;
+    align?: PopoverAlign;
+    side?: PopoverSide;
+    /** Controlled open state. Omit (with or without `onOpenChange`) to let the popover
+     * manage its own open/closed state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * ADS Popover. A floating, dismissible panel anchored to a trigger — built on Radix's
+ * Popover primitive for free focus-trapping, click-outside/Escape-to-close, and
+ * collision-aware positioning (no 1:1 prototype element for this; every prototype menu
+ * is a plain click-to-navigate link, not a floating panel).
+ */
+export declare function Popover({ trigger, children, align, side, open, onOpenChange, className }: PopoverProps): import("react").JSX.Element;
+/** Wrap any popover-content item that should close the popover when clicked (e.g. a
+ * menu link/button), same as Radix's own `Popover.Close`. */
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-lib/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,25 @@
+export interface RadioGroupOption {
+    label: string;
+    value: string;
+}
+export interface RadioGroupProps {
+    /** Shared `name` for the underlying native radio inputs — auto-generated if omitted. */
+    name?: string;
+    options: RadioGroupOption[];
+    /** Controlled value. Omit it (with or without `onChange`) to let the group manage its own selection. */
+    value?: string;
+    /** Initial selection for uncontrolled usage, i.e. when `value` is omitted. Defaults to the first option. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    className?: string;
+}
+/**
+ * ADS Radio group. A compact row of native radio inputs for a handful of
+ * mutually-exclusive options sitting tightly together — deliberately not styled as a
+ * Tabs-style navigation control, so a page doesn't end up reading as "all tabs" when
+ * it already carries real navigational tabs elsewhere.
+ */
+export declare const RadioGroup: ({ name, options, value, defaultValue, onChange, disabled, content, className, }: RadioGroupProps) => import("react").JSX.Element;

package/dist-lib/components/ScreenBottomActions/ScreenBottomActions.d.ts

@@ -0,0 +1,29 @@
+export type ScreenBottomActionsChannel = 'desktop' | 'mobile';
+export interface ScreenBottomActionsProps {
+    channel?: ScreenBottomActionsChannel;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    showLeftButtons?: boolean;
+    previousLabel?: string;
+    onPrevious?: () => void;
+    showCancelButton?: boolean;
+    cancelLabel?: string;
+    onCancel?: () => void;
+    showSelected?: boolean;
+    selectedCountLabel?: string;
+    showLinkOfSelected?: boolean;
+    viewSelectedLabel?: string;
+    onViewSelected?: () => void;
+    showTertiaryButton?: boolean;
+    tertiaryLabel?: string;
+    onTertiaryClick?: () => void;
+    nextLabel?: string;
+    onNext?: () => void;
+    className?: string;
+}
+/**
+ * ADS Screen Bottom Actions bar. Structured as a single layout that mirrors
+ * automatically under `dir="rtl"`, rather than Figma's separate EN/AR variants —
+ * including the Previous/Next chevrons, which flip direction to match reading order.
+ */
+export declare const ScreenBottomActions: ({ channel, content, showLeftButtons, previousLabel, onPrevious, showCancelButton, cancelLabel, onCancel, showSelected, selectedCountLabel, showLinkOfSelected, viewSelectedLabel, onViewSelected, showTertiaryButton, tertiaryLabel, onTertiaryClick, nextLabel, onNext, className, }: ScreenBottomActionsProps) => import("react").JSX.Element;

package/dist-lib/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,20 @@
+import type { StatusIndicatorColor } from '../StatusIndicator/StatusIndicator';
+export interface SectionHeaderAction {
+    label: string;
+    onClick: () => void;
+}
+export interface SectionHeaderProps {
+    title: string;
+    /** Renders a right-aligned, link-styled clickable element, baseline-aligned with the title. */
+    action?: SectionHeaderAction;
+    /** Renders a StatusIndicator dot before the title text. */
+    leadingStatus?: StatusIndicatorColor;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    className?: string;
+}
+/**
+ * ADS Section header. A bold small title with a bottom border, optionally preceded by a
+ * StatusIndicator dot and followed by a right-aligned, link-styled action.
+ */
+export declare const SectionHeader: ({ title, action, leadingStatus, content, className }: SectionHeaderProps) => import("react").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { type ChangeEvent } from 'react';
+export type SelectType = 'default' | 'error' | 'disabled';
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface SelectProps {
+    id?: string;
+    label?: string;
+    /** Hides the label row entirely — for compact layouts (e.g. a table cell with its own
+     * label to the side) that don't want the field's own floating label. */
+    showLabel?: boolean;
+    mandatory?: boolean;
+    type?: SelectType;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    options: SelectOption[];
+    placeholder?: string;
+    /** Controlled value. Omit it (with or without `onChange`) to let the field manage its own selection. */
+    value?: string;
+    /** Initial selection for uncontrolled usage, i.e. when `value` is omitted. */
+    defaultValue?: string;
+    onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
+    showSupportingText?: boolean;
+    supportingText?: string;
+    className?: string;
+}
+/**
+ * ADS Select. A native `<select>` styled to match InputField's visual language
+ * (there is no Radix Select primitive in this project's dependencies), with a
+ * custom trailing chevron laid over the native control.
+ */
+export declare const Select: ({ id, label: labelText, showLabel, mandatory, type, content, options, placeholder, value, defaultValue, onChange, showSupportingText, supportingText, className, }: SelectProps) => import("react").JSX.Element;

package/dist-lib/components/SidePanel/SidePanel.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export interface SidePanelProps {
+    open: boolean;
+    /** Called on Escape while open. Optional — omit for a panel with no keyboard-dismiss
+     * affordance (e.g. one that only closes via its own explicit close button). */
+    onClose?: () => void;
+    /** Width the panel occupies when open, as a literal Tailwind width class (e.g.
+     * `w-96`) — the panel's content keeps this width throughout, clipped by the
+     * animating outer wrapper so the slide reads as a width change, not a translate. */
+    width?: string;
+    /** Applied to the inner, fixed-width content — its own border/shadow/scroll
+     * behavior is entirely up to the caller, same as Drawer. */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * ADS Side panel. Unlike Drawer (a `fixed` overlay that floats above the page, never
+ * part of layout flow), this is a normal in-flow flex child — animating its own width
+ * rather than a transform — so opening it pushes/squeezes its layout siblings instead
+ * of covering them. Render it as a sibling inside the same flex row as the content it
+ * should push (its left/right position comes from where the caller places it in that
+ * row, not from a prop), with `self-stretch` implicit so it always spans the row's
+ * full height regardless of the row's own align-items.
+ */
+export declare function SidePanel({ open, onClose, width, className, children }: SidePanelProps): import("react").JSX.Element;

package/dist-lib/components/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,8 @@
+export type StatusIndicatorColor = 'Success green' | 'Blue' | 'Orange' | 'Red' | 'Gray';
+export interface StatusIndicatorProps {
+    /** Status color. Maps 1:1 to the Figma "Status indicator" component. */
+    color?: StatusIndicatorColor;
+    className?: string;
+}
+/** A small colored dot used to convey status, e.g. inside a Badge. */
+export declare const StatusIndicator: ({ color, className }: StatusIndicatorProps) => import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+import { type ChangeEvent } from 'react';
+export type TextareaType = 'default' | 'error' | 'disabled';
+export interface TextareaProps {
+    id?: string;
+    label?: string;
+    /** Hides the label row entirely — for compact layouts (e.g. a table cell with its own
+     * label to the side) that don't want the field's own floating label. */
+    showLabel?: boolean;
+    mandatory?: boolean;
+    type?: TextareaType;
+    /** EN renders left-to-right with the Latin font stack; AR renders right-to-left with the Arabic font stack. */
+    content?: 'EN' | 'AR';
+    /** Controlled value. Omit it (with or without `onChange`) to let the field manage its own text. */
+    value?: string;
+    /** Initial text for uncontrolled usage, i.e. when `value` is omitted. */
+    defaultValue?: string;
+    placeholder?: string;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    rows?: number;
+    showSupportingText?: boolean;
+    supportingText?: string;
+    className?: string;
+}
+/**
+ * ADS Textarea. Same label/mandatory/type structure as InputField, scaled up to a
+ * resizable multi-line field.
+ */
+export declare const Textarea: ({ id, label: labelText, showLabel, mandatory, type, content, value, defaultValue, placeholder, onChange, rows, showSupportingText, supportingText, className, }: TextareaProps) => import("react").JSX.Element;

package/dist-lib/icons/Aed.d.ts

@@ -0,0 +1,3 @@
+export declare const Aed: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist-lib/icons/AlertCircle.d.ts

@@ -0,0 +1,3 @@
+export declare const AlertCircle: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist-lib/icons/Asterisk.d.ts

@@ -0,0 +1,3 @@
+export declare const Asterisk: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist-lib/icons/Bell.d.ts

@@ -0,0 +1,3 @@
+export declare const Bell: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist-lib/icons/Calendar.d.ts

@@ -0,0 +1,3 @@
+export declare const Calendar: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist-lib/icons/CancelSolid.d.ts

@@ -0,0 +1,4 @@
+/** Filled "clear" / cancel-circle glyph. Used for the Input Field clear button (error/filled states). */
+export declare const CancelSolid: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;