@ostack.tech/ui 0.1.0

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

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { type ControlStatus } from "../../utils/control.ts";
+/** Default column width in `"fixed"` mode. */
+export declare const DEFAULT_TABLE_COLUMN_WIDTH = 150;
+/** Table variant. */
+export type TableVariant = "default" | "control";
+/** Possible table layouts. */
+export type TableLayout = "auto" | "fixed";
+/** Properties of the table component. */
+export interface TableProps extends React.ComponentPropsWithoutRef<"table"> {
+    /**
+     * Marks the table as being meant for editable content (cells containing form
+     * controls).
+     *
+     * In effect, this changes the default table variant to `"control"` and
+     * defaults all cells as `framed`, as well as all non-header cells as
+     * `paddingless`.
+     */
+    editable?: boolean;
+    /**
+     * Table's style variant. The default variant should typically be used for
+     * readable data, while the control variant (which resembles other form
+     * controls) for writable data.
+     *
+     * Defaults to `"default"` for non-`editable` tables and to `"control"`
+     * otherwise.
+     */
+    variant?: TableVariant;
+    /** Sets the status of the table. */
+    status?: ControlStatus;
+    /**
+     * How to lay out the table:
+     *
+     * - `"auto"` lets the browser automatically adjust the size of cells to fit
+     *   their content.
+     * - `"fixed"` sizes each cell according to the width provided by each column.
+     *
+     * The table layout defaults to `"auto"` when the table isn't editable, and
+     * `"fixed"` otherwise.
+     */
+    layout?: TableLayout;
+    /** Marks the table as "required" when it is being used as a control. */
+    required?: boolean;
+    /**
+     * When the table layout is set to `"fixed"`, this property specifies the
+     * default minimum width of all columns (in pixels).
+     *
+     * @default 150
+     */
+    defaultColumnWidth?: number;
+    /** Sets the maximum height of the table. */
+    maxHeight?: React.CSSProperties["maxHeight"];
+    /** Properties to pass to the container element. */
+    containerProps?: React.ComponentPropsWithRef<"div">;
+}
+/**
+ * Use the table component to display structured data in a tabular format.
+ *
+ * It composes the following subcomponents:
+ *
+ * - `TableHead`: Header of the table (corresponds to the
+ *   [`<thead>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/thead)
+ *   HTML element).
+ * - `TableColumn`: Component used inside `TableHead` to represent a column of the
+ *   table.
+ * - `TableBody`: Body of the table (corresponds to the
+ *   [`<tbody>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tbody)
+ *   HTML element).
+ * - `TableFoot`: Footer of the table (corresponds to the
+ *   [`<tfoot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tfoot)
+ *   HTML element).
+ * - `TableRow`: Row of the table (corresponds to the
+ *   [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tr)
+ *   HTML element).
+ * - `TableCell`: Cell of the table (corresponds to the
+ *   [`<th>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/th)
+ *   and
+ *   [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td)
+ *   HTML elements). Set the `header` property to switch from `td` to `th`.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   Table,
+ *   TableBody,
+ *   TableCell,
+ *   TableColumn,
+ *   TableFoot,
+ *   TableHead,
+ *   TableRow,
+ * } from "@ostack.tech/ui";
+ *
+ * function PriceTable() {
+ *   return (
+ *     <Table>
+ *       <TableHead>
+ *         <TableColumn label="Item" />
+ *         <TableColumn label="Price" />
+ *       </TableHead>
+ *       <TableBody>
+ *         <TableRow>
+ *           <TableCell header>Olive oil</TableCell>
+ *           <TableCell>3,99 €</TableCell>
+ *         </TableRow>
+ *         <TableRow>
+ *           <TableCell header>Vinegar</TableCell>
+ *           <TableCell>0,95 €</TableCell>
+ *         </TableRow>
+ *       </TableBody>
+ *       <TableFoot>
+ *         <TableRow>
+ *           <TableCell header>Total</TableCell>
+ *           <TableCell>4,94 €</TableCell>
+ *         </TableRow>
+ *       </TableFoot>
+ *     </Table>
+ *   );
+ * }
+ * ```
+ */
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;

package/dist/types/components/Table/TableBody.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+/** Properties of the table body component. */
+export interface TableBodyProps extends React.ComponentPropsWithoutRef<"tbody"> {
+}
+/** Table body component. */
+export declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/types/components/Table/TableCell.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { type ControlStatus } from "../../utils/control.ts";
+/** Type of table cell. */
+export type TableCellVariant = "header" | "data";
+/** Sticky position of the table cell. */
+export type TableCellSticky = "left" | "right";
+/** Properties of the table row component. */
+export interface TableCellProps extends Omit<React.ComponentPropsWithoutRef<"td" | "th">, "align"> {
+    /**
+     * Whether this cell should be rendered as a table header cell (`th` element).
+     * By default, `true` within a `TableHead` component, and `false` otherwise.
+     */
+    header?: boolean;
+    /**
+     * Specifies how to align the cell's content. Numeric fields should typically
+     * be right aligned.
+     */
+    align?: React.CSSProperties["textAlign"];
+    /**
+     * Style variant to use. By default, defaults to `"header"` when the cell is a
+     * `header`, and to `"data"` otherwise.
+     */
+    variant?: TableCellVariant;
+    /**
+     * Cell status, used to render the cell in the style of the given status, when
+     * the table is of the "control" variant.
+     *
+     * By default, `header` cells inherit the `Table`'s `status`.
+     */
+    status?: ControlStatus | null;
+    /**
+     * Renders the cell with borders. This property defaults to `true` when the
+     * table is editable and to `false` otherwise.
+     */
+    framed?: boolean;
+    /**
+     * Removes the cell's padding. This property defaults to `true` when the table
+     * is editable and the cell is not a `header`, and to `false` otherwise.
+     */
+    paddingless?: boolean;
+    /** Makes the table cell stick to one of the sides of table. */
+    sticky?: TableCellSticky;
+}
+/** Table row component. */
+export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableDataCellElement>>;

package/dist/types/components/Table/TableColumn.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { type SortDirection } from "../../utils/sorting.ts";
+import { type Button } from "../Button";
+import { type Icon } from "../Icon";
+import { type IconButton } from "../IconButton";
+import { type Popover, type PopoverContent } from "../Popover";
+import { type Stack } from "../Stack";
+import { type TableCell } from "./TableCell.tsx";
+/** Properties of a table column. */
+export interface TableColumnProps extends Omit<React.ComponentPropsWithoutRef<typeof TableCell>, "rowSpan" | "scope"> {
+    /** Column's label. */
+    label?: React.ReactNode;
+    /** String representation of the label (defaults to `label`). */
+    labelText?: string;
+    /** Optional helper text displayed as a popover triggered by an icon button. */
+    helperText?: React.ReactNode;
+    /** Label of the helper button announced to assistive technologies. */
+    helperButtonLabel?: string;
+    /**
+     * Minimum width of a column (in pixels).
+     *
+     * In "fixed" layout, this property is only relevant when applied to "leaf"
+     * columns (columns that don't contain other columns).
+     *
+     * An array may be provided (with a length matching `colSpan`) to specify the
+     * `width` of each column that this column spans over.
+     */
+    width?: number | number[];
+    /**
+     * When the table has a "fixed" layout, this property specifies that a column
+     * should not grow.
+     */
+    fixed?: boolean;
+    /**
+     * Marks the column as sortable by displaying a sorting icon and listening to
+     * click events on it.
+     */
+    sortable?: boolean;
+    /**
+     * Direction to initially sort the column by when first clicking on the sort
+     * button.
+     *
+     * @default asc
+     */
+    defaultSortDirection?: SortDirection;
+    /**
+     * Whether the data is currently sorted by this column and, if so, in which
+     * direction.
+     */
+    sorted?: SortDirection;
+    /**
+     * Callback called when the sort button is clicked. The direction provided is
+     * the new sort direction for the column or `null` when the table should no
+     * longer be sorted by this column.
+     */
+    onSort?: (direction: SortDirection | null) => void;
+    /** Properties to pass to the container component. */
+    containerProps?: React.ComponentPropsWithRef<typeof Stack>;
+    /** Properties to pass to the label component. */
+    labelProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the sort button. */
+    sortButtonProps?: React.ComponentPropsWithRef<typeof Button>;
+    /** Properties to pass to the component containing the sort icons. */
+    sortIconContainerProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the sort ascending icon component. */
+    sortAscIconProps?: React.ComponentPropsWithRef<typeof Icon>;
+    /** Properties to pass to the sort descending icon component. */
+    sortDescIconProps?: React.ComponentPropsWithRef<typeof Icon>;
+    /** Properties to pass to the helper button component. */
+    helperButtonProps?: Omit<React.ComponentPropsWithRef<typeof IconButton>, "icon">;
+    /** Properties to pass to the helper popover component. */
+    helperPopoverProps?: React.ComponentPropsWithRef<typeof Popover>;
+    /** Properties to pass to the helper popover content component. */
+    helperPopoverContentProps?: React.ComponentPropsWithRef<typeof PopoverContent>;
+}
+/**
+ * Table column component.
+ *
+ * This component doesn't actually render anything by itself; it is used by the
+ * `TableHead` component to automatically create an appropriate header based on
+ * the columns.
+ */
+export declare const TableColumn: React.ForwardRefExoticComponent<TableColumnProps & React.RefAttributes<HTMLTableDataCellElement>>;

package/dist/types/components/Table/TableContext.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { type ControlStatus } from "../../utils/control.ts";
+import { type ScrollPosition } from "../../utils/useScrollPosition.ts";
+import { type TableLayout } from "./Table.tsx";
+/** Value of the table context. */
+export interface TableContextValue {
+    editable: boolean;
+    status?: ControlStatus;
+    layout: TableLayout;
+    defaultColumnWidth: number;
+    store: TableStore;
+}
+/** State of the table. */
+export interface TableState {
+    scrollPosition?: ScrollPosition;
+    numberOfColumns?: number;
+    columnWidths?: (string | undefined)[];
+    actions: TableActions;
+}
+/** Actions of the table. */
+export interface TableActions {
+    setTableMinWidth: (minWidth: string | undefined) => void;
+    setTableMaxWidth: (maxWidth: string | undefined) => void;
+}
+/** Table store. */
+export type TableStore = ReturnType<typeof useCreateTableContext>["store"];
+/** Table context. */
+export declare const TableContext: React.Context<TableContextValue | null>;
+/** Hook which creates the table store. */
+export declare function useCreateTableContext(editable: boolean, status: ControlStatus | undefined, layout: TableLayout, defaultColumnWidth: number, onTableMinWidthChange: (minWidth: string | undefined) => void, onTableMaxWidthChange: (maxWidth: string | undefined) => void): {
+    editable: boolean;
+    status: ControlStatus | undefined;
+    layout: TableLayout;
+    defaultColumnWidth: number;
+    store: Omit<import("zustand").StoreApi<TableState>, "subscribe"> & {
+        subscribe: {
+            (listener: (selectedState: TableState, previousSelectedState: TableState) => void): () => void;
+            <U>(selector: (state: TableState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+                equalityFn?: ((a: U, b: U) => boolean) | undefined;
+                fireImmediately?: boolean;
+            } | undefined): () => void;
+        };
+    };
+};
+/** Hook returning the table's context value. */
+export declare function useTableContext(): TableContextValue;
+/** Hook returning the number of columns of the table. */
+export declare function useTableNumberOfColumns(): number | undefined;
+/** Table head context. */
+export declare const TableHeadContext: React.Context<boolean>;
+/** Hook exposing whether a component is being rendered within a table head. */
+export declare function useIsInTableHead(): boolean;
+/** Table foot context. */
+export declare const TableFootContext: React.Context<boolean>;
+/** Hook exposing whether a component is being rendered within a table foot. */
+export declare function useIsInTableFoot(): boolean;
+/** Context present within a table cell. */
+export declare const TableCellContext: React.Context<boolean>;
+/** Hook exposing whether a component is being rendered within a table cell. */
+export declare function useIsInTableCell(): boolean;

package/dist/types/components/Table/TableFoot.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/** Properties of the table foot component. */
+export interface TableFootProps extends React.ComponentPropsWithoutRef<"tfoot"> {
+    /**
+     * Whether the table foot should be sticky.
+     *
+     * @default true
+     */
+    sticky?: boolean;
+}
+/** Table foot component. */
+export declare const TableFoot: React.ForwardRefExoticComponent<TableFootProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/types/components/Table/TableHead.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type SortDirection } from "../../utils/sorting.ts";
+/** Properties of the table head component. */
+export interface TableHeadProps extends React.ComponentPropsWithoutRef<"thead"> {
+    /**
+     * Whether the table head should be sticky.
+     *
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Function that should return the description of the "sort by" button of each
+     * column (passed to each sort button as `aria-description`).
+     *
+     * @param columnName Name of the column to sort.
+     * @param direction Sort direction.
+     */
+    sortByColumnDescription?: (columnName: string, sortDirection: SortDirection | null) => string;
+    /** Properties to pass to each row component. */
+    rowProps?: React.ComponentPropsWithoutRef<"tr"> | ((index: number) => React.ComponentPropsWithoutRef<"tr">);
+}
+/** Table head component. */
+export declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/types/components/Table/TableRow.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/** Default table row height (with a single line of text or with form controls). */
+export declare const DEFAULT_TABLE_ROW_HEIGHT = 41;
+/** Properties of the table row component. */
+export interface TableRowProps extends React.ComponentPropsWithoutRef<"tr"> {
+    /** Whether this row should be marked as being selected. */
+    selected?: boolean;
+}
+/** Table row component. */
+export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;

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

@@ -0,0 +1,8 @@
+export * from "./Table.tsx";
+export * from "./TableBody.tsx";
+export * from "./TableCell.tsx";
+export * from "./TableColumn.tsx";
+export { useIsInTableCell, useTableNumberOfColumns } from "./TableContext.ts";
+export * from "./TableFoot.tsx";
+export * from "./TableHead.tsx";
+export * from "./TableRow.tsx";

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

@@ -0,0 +1,14 @@
+import { Tabs as TabsPrimitive } from "radix-ui";
+import * as React from "react";
+import { type ControlStatus } from "../../utils/control.ts";
+/** Properties of the tab component. */
+export interface TabProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.TabsTrigger>, "asChild" | "value"> {
+    /** Value representing this tab. */
+    value: string | number;
+    /** Status of the tab. */
+    status?: ControlStatus;
+    /** Properties to pass to the inner tab element. */
+    tabInnerProps?: React.ComponentPropsWithRef<"div">;
+}
+/** Tab trigger component. */
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,9 @@
+import { Tabs as TabsPrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the tab content component. */
+export interface TabContentProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.TabsContent>, "value"> {
+    /** Value of the tab that corresponds to this content. */
+    value: string | number;
+}
+/** Tab content component. */
+export declare const TabContent: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+import { Tabs as TabsPrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the tab list component. */
+export interface TabListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+    /** Properties to pass to the root element. */
+    rootProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the container element. */
+    containerProps?: React.ComponentPropsWithRef<"div">;
+}
+/** Component containing all tabs. */
+export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,51 @@
+import { Tabs as TabsPrimitive } from "radix-ui";
+import * as React from "react";
+/** Tabs variants. */
+export type TabsVariant = "default" | "annexes";
+/** Properties of the tabs component. */
+export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "defaultValue" | "value" | "orientation" | "dir"> {
+    /**
+     * Tabs variant.
+     *
+     * @default default
+     */
+    variant?: TabsVariant;
+    /** Value of the default active tab. */
+    defaultValue?: string | number;
+    /** Value of the active tab. */
+    value?: string | number;
+}
+/**
+ * The `Tabs` component allows content to be organised in tabs and displayed one
+ * at a time.
+ *
+ * The `value` set on each tab should match the `value` of its content.
+ *
+ * It composes the following subcomponents:
+ *
+ * - `TabList`: A container holding the list of tabs.
+ * - `Tab`: Representing an individual tab.
+ * - `TabContent`: For holding the content of each tab.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Tab, TabContent, TabList, Tabs } from "@ostack.tech/ui";
+ *
+ * function Bills() {
+ *   return (
+ *     <Tabs>
+ *       <TabList>
+ *         <Tab value="water">Water</Tab>
+ *         <Tab value="electricity">Electricity</Tab>
+ *         <Tab value="gas">Gas</Tab>
+ *       </TabList>
+ *       <TabContent value="water">…</TabContent>
+ *       <TabContent value="electricity">…</TabContent>
+ *       <TabContent value="gas">…</TabContent>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { type ScrollPosition } from "../../utils/useScrollPosition.ts";
+import { type TabsVariant } from "./Tabs.tsx";
+/** Value of the tabs' context. */
+export interface TabsContextValue {
+    variant: TabsVariant;
+    store: TabsStore;
+}
+/** State of the tabs. */
+export interface TabsState {
+    activeTab?: string;
+    showScrollButtons?: boolean;
+    width: number;
+    scrollPosition?: ScrollPosition;
+}
+/** Tabs' store. */
+export type TabsStore = ReturnType<typeof useCreateTabsContext>["store"];
+/** Tabs' context. */
+export declare const TabsContext: React.Context<TabsContextValue | null>;
+/** Hook which creates the tabs' store. */
+export declare function useCreateTabsContext(variant: TabsVariant, defaultValue?: string | number, value?: string | number): {
+    variant: TabsVariant;
+    store: Omit<import("zustand").StoreApi<TabsState>, "subscribe"> & {
+        subscribe: {
+            (listener: (selectedState: TabsState, previousSelectedState: TabsState) => void): () => void;
+            <U>(selector: (state: TabsState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+                equalityFn?: ((a: U, b: U) => boolean) | undefined;
+                fireImmediately?: boolean;
+            } | undefined): () => void;
+        };
+    };
+};
+/** Hooks returning the tabs' context value. */
+export declare function useTabsContext(): TabsContextValue;

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

@@ -0,0 +1,4 @@
+export * from "./Tab.tsx";
+export * from "./TabContent.tsx";
+export * from "./TabList.tsx";
+export * from "./Tabs.tsx";

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

@@ -0,0 +1,21 @@
+import { type TagColor, type TagProps, type TagVariant } from "./Tag.tsx";
+/**
+ * @deprecated `Badge` component was renamed to `Tag`, please use
+ *   {@link TagVariant} instead.
+ */
+export type BadgeVariant = TagVariant;
+/**
+ * @deprecated `Badge` component was renamed to `Tag`, please use
+ *   {@link TagColor} instead.
+ */
+export type BadgeColor = TagColor;
+/**
+ * @deprecated `Badge` component was renamed to `Tag`, please use
+ *   {@link TagProps} instead.
+ */
+export type BadgeProps = TagProps;
+/**
+ * @deprecated `Badge` component was renamed to `Tag`, please use {@link Tag}
+ *   instead.
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { type AccentColor } from "../../utils/accent.ts";
+import { CloseButton } from "../CloseButton";
+import { CollapsibleContent } from "../Collapsible";
+import { Icon, type IconProp } from "../Icon";
+/** Tag variants. */
+export type TagVariant = "solid" | "subtle" | "outlined";
+/** Tag colours. */
+export type TagColor = AccentColor;
+/** Tag's icon placement. */
+export type TagIconPlacement = "start" | "end";
+/** Properties of the tag component. */
+export interface TagProps extends React.ComponentPropsWithoutRef<"span"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
+    /**
+     * Tag variant.
+     *
+     * @defualt filled
+     */
+    variant?: TagVariant;
+    /**
+     * Tag colour.
+     *
+     * @default neutral
+     */
+    color?: TagColor;
+    /**
+     * Whether the tag should be open by default.
+     *
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /**
+     * Property controlling whether the tag should be open. Use together with
+     * `onOpenChange` to control the tag's open state.
+     */
+    open?: boolean;
+    /** Function called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Font Awesome icon to show within the tag. The position of the icon may be
+     * controlled via `iconPlacement`.
+     *
+     * @default null
+     */
+    icon?: IconProp | null;
+    /**
+     * Whether to display the icon at the start or end of the tag.
+     *
+     * @default start
+     */
+    iconPlacement?: TagIconPlacement;
+    /**
+     * Display the tag as a pill (with rounder corners).
+     *
+     * @default false
+     */
+    pill?: boolean;
+    /**
+     * Whether to show a close button.
+     *
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /** Properties to pass to the container element. */
+    containerProps?: React.ComponentPropsWithRef<typeof CollapsibleContent>;
+    /** Properties to pass to the content element. */
+    contentProps?: React.ComponentPropsWithRef<"span">;
+    /** Properties to pass to the icon component. */
+    iconProps?: Omit<React.ComponentPropsWithRef<typeof Icon>, "icon">;
+    /** Properties to pass to the close button component. */
+    closeButtonProps?: React.ComponentPropsWithRef<typeof CloseButton>;
+}
+/**
+ * Component displaying a stylised tag.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Tag } from "@ostack.tech/ui";
+ *
+ * function InProgressIndicator() {
+ *   return <Tag>In progress</Tag>;
+ * }
+ * ```
+ */
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,2 @@
+export * from "./Badge.ts";
+export * from "./Tag.tsx";

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { type InputPropsBase } from "../Input";
+/** Properties of the text area component. */
+export interface TextAreaProps extends Omit<InputPropsBase, "asChild" | "children">, React.ComponentPropsWithoutRef<"textarea"> {
+}
+/**
+ * The `TextArea` component is a flexible, multiline input field designed for
+ * text entry. This component is ideal for capturing larger amounts of text,
+ * such as user feedback, comments, or descriptions.
+ *
+ * All extra properties are passed directly to the underlying textarea element,
+ * offering full control over behavior and appearance. The TextArea component
+ * can be combined with the `Field` component for better structure and
+ * accessibility. The `Field` ensures proper associations between the `Label`,
+ * `TextArea`, and related elements like `HelperText`, improving usability and
+ * accessibility for users.
+ *
+ * This setup ensures that the `TextArea` can adapt to different use cases while
+ * maintaining a consistent and accessible form structure.
+ */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1 @@
+export * from "./TextArea.tsx";