@ostack.tech/ui 0.1.0

package/dist/types/components/Card/CardHeader.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/** Properties of the card header component. */
+export interface CardHeaderProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * 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;
+}
+/** Header section of the `Card` component. */
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Card/CardTitle.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type HeadingLevel } from "../Heading";
+/** Properties of the card title component. */
+export interface CardTitleProps extends React.ComponentPropsWithoutRef<"h2"> {
+    /**
+     * 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;
+    /**
+     * Heading level.
+     *
+     * @default 2
+     */
+    level?: HeadingLevel;
+}
+/** Title of the `Card` component. */
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;

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

@@ -0,0 +1,5 @@
+export * from "./Card.tsx";
+export * from "./CardBody.tsx";
+export * from "./CardFooter.tsx";
+export * from "./CardHeader.tsx";
+export * from "./CardTitle.tsx";

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

@@ -0,0 +1,67 @@
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import * as React from "react";
+import { type ControlStatus, type ControlVariant } from "../../utils/control.ts";
+import { ControlCode } from "../ControlCode";
+import { Icon } from "../Icon";
+import { Label } from "../Label";
+import { Spinner } from "../Spinner";
+/** `checked` state of a checkbox. */
+export type CheckboxChecked = CheckboxPrimitive.CheckedState;
+/** Properties of the checkbox component. */
+export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "asChild"> {
+    /**
+     * Checkbox style variant. Defaults to the default variant unless when
+     * rendering inside a table cell (in which case it defaults to `"cell"`).
+     */
+    variant?: ControlVariant;
+    /** Sets the status of the checkbox. */
+    status?: ControlStatus;
+    /** Checkbox code. */
+    code?: React.ReactNode;
+    /** Sets the checkbox as read-only. */
+    readOnly?: boolean;
+    /**
+     * Adds a spinner to the checkbox to indicate activity. Note that it doesn't
+     * automatically disable the checkbox.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Function called when the focus moves out of the control as a whole.
+     *
+     * This is useful when there is a need to know when the user stops interacting
+     * with the control.
+     */
+    onBlurToOutside?: (event: React.FocusEvent) => void;
+    /** Properties to pass to the root component. */
+    rootProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the container component. */
+    containerProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the code component. */
+    codeProps?: React.ComponentPropsWithRef<typeof ControlCode>;
+    /** Properties to pass to the indicator component. */
+    indicatorProps?: React.ComponentPropsWithRef<typeof Icon>;
+    /** Properties to pass to the label component. */
+    labelProps?: Omit<React.ComponentPropsWithRef<typeof Label>, "required">;
+    /** Properties to pass to the spinner component. */
+    spinnerProps?: Omit<React.ComponentPropsWithRef<typeof Spinner>, "size">;
+}
+/**
+ * The `Checkbox` component allows a user to toggle a “button” between checked
+ * and not checked.
+ *
+ * It can be used standalone or as part of a checkbox group (see the
+ * `CheckboxGroup` component).
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Checkbox } from "@ostack.tech/ui";
+ *
+ * function AcceptTerms() {
+ *   return <Checkbox>Accept terms and conditions</Checkbox>;
+ * }
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { type ControlStatus, type ControlVariant } from "../../utils/control.ts";
+import { ControlCode } from "../ControlCode";
+import { Spinner } from "../Spinner";
+/** Properties of the checkbox group component. */
+export interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Whether to display the checkbox group inline. Defaults to `false` unless
+     * when rending inside a table cell.
+     */
+    inline?: boolean;
+    /**
+     * Checkbox group style variant. Defaults to the default variant unless when
+     * rendering inside a table cell (in which it defaults to `"cell"`).
+     */
+    variant?: ControlVariant;
+    /** Sets the status of the checkbox group. */
+    status?: ControlStatus;
+    /** Checkbox group code. */
+    code?: React.ReactNode;
+    /** Checkbox group name. */
+    name?: string;
+    /**
+     * Adds a spinner to the checkbox group to indicate activity. Note that it
+     * doesn't automatically disable the control.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /** Whether the field is required. */
+    required?: boolean;
+    /** Whether to disable the checkbox group. */
+    disabled?: boolean;
+    /** Sets the checkbox group as read-only. */
+    readOnly?: boolean;
+    /** Default value of the checkbox group. */
+    defaultValue?: string[];
+    /** Value of the checkbox group. */
+    value?: string[];
+    /** Action to run whenever the checkbox group's value changes. */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Function called when the focus moves out of the control as a whole.
+     *
+     * This is useful when there is a need to know when the user stops interacting
+     * with the control.
+     */
+    onBlurToOutside?: (event: React.FocusEvent) => void;
+    /** Properties to pass to the code component. */
+    codeProps?: React.ComponentPropsWithRef<typeof ControlCode>;
+    /** Properties to pass to the container component. */
+    containerProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the end element containing the spinner. */
+    endContainerProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the spinner component. */
+    spinnerProps?: Omit<React.ComponentPropsWithRef<typeof Spinner>, "size">;
+}
+/**
+ * The `CheckboxGroup` component displays a set of `Checkbox` components,
+ * allowing a user to check any combination of the included checkboxes.
+ *
+ * The state of the checkbox group is an array containing the `value` of every
+ * checked checkbox.
+ *
+ * For accessibility purposes, checkbox groups are usually included within a
+ * `Field` together with a `Label` and optionally `HelperText` and/or
+ * `Feedback`.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Checkbox, CheckboxGroup } from "@ostack.tech/ui";
+ *
+ * function FavoriteFlavors() {
+ *   return (
+ *     <CheckboxGroup>
+ *       <Checkbox value="chocolate">Chocolate</Checkbox>
+ *       <Checkbox value="mint">Mint</Checkbox>
+ *       <Checkbox value="vanilla">Vanilla</Checkbox>
+ *     </CheckboxGroup>
+ *   );
+ * }
+ * ```
+ */
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/CheckboxGroup/CheckboxGroupContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface CheckboxGroupContextValue {
+    name?: string;
+    value: string[];
+    onCheckedChange: (value: string, checked: boolean) => void;
+}
+/** Checkbox group context. */
+export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextValue | null>;

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

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

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+/** Properties of the clear context component. */
+export interface ClearContextsProps {
+    /**
+     * Clear the data table cell context.
+     *
+     * @default true
+     */
+    dataTableCell?: boolean;
+    /**
+     * Clear the field context.
+     *
+     * @default true
+     */
+    field?: boolean;
+    /**
+     * Clear the link context.
+     *
+     * @default true
+     */
+    link?: boolean;
+    /**
+     * Clear the table cell context.
+     *
+     * @default true
+     */
+    tableCell?: boolean;
+    children?: React.ReactNode;
+}
+/** Component used to clear component contexts. */
+export declare function ClearContexts({ dataTableCell, field, link, tableCell, children, }: ClearContextsProps): React.ReactNode;

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

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

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { IconButton } from "../IconButton";
+/** Properties of the close button component. */
+export interface CloseButtonProps extends Partial<React.ComponentPropsWithoutRef<typeof IconButton>> {
+}
+/** Component rendering a “close” button. */
+export declare const CloseButton: React.ForwardRefExoticComponent<CloseButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { type AccentColor } from "../../utils/accent.ts";
+/** Code colours. */
+export type CodeColor = AccentColor;
+/** Properties of the code component. */
+export interface CodeProps extends React.ComponentPropsWithoutRef<"code"> {
+    /**
+     * 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;
+    /**
+     * Code colour.
+     *
+     * @default neutral
+     */
+    color?: CodeColor;
+}
+/**
+ * Component used to display inline snippets of code. It is built on top of the
+ * browser's [`<code>`
+ * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code).
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Code } from "@ostack.tech/ui";
+ *
+ * function RoundingCodeSnippet() {
+ *   return <Code>Math.round(1.23)</Code>;
+ * }
+ * ```
+ */
+export declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLElement>>;

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

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

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

@@ -0,0 +1,25 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import * as React from "react";
+/** Direction in which to collapse/expand content. */
+export type CollapsibleDirection = "horizontal" | "vertical";
+/** Properties of the collapsible component. */
+export interface CollapsibleProps extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> {
+    /**
+     * Direction in which to collapse/expand content.
+     *
+     * @default vertical
+     */
+    direction?: CollapsibleDirection;
+}
+/**
+ * The collapsible component is an interactive component that expands/collapses
+ * content.
+ *
+ * It composes the following subcomponents:
+ *
+ * - `CollapsibleTrigger`: A trigger, such as an icon, that visually indicates and
+ *   controls the expanded/collapsed states.
+ * - `CollapsibleContent`: The content that are shown or hidden based on trigger's
+ *   state.
+ */
+export declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Collapsible/CollapsibleContent.d.ts

@@ -0,0 +1,7 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the collapsible content component. */
+export interface CollapsibleContentProps extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> {
+}
+/** Component containing the collapsible content. */
+export declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Collapsible/CollapsibleContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type CollapsibleDirection } from "./Collapsible.tsx";
+/** Value of the collapsible context. */
+export interface CollapsibleContextValue {
+    open: boolean;
+    direction: CollapsibleDirection;
+}
+/** Collapsible context. */
+export declare const CollapsibleContext: React.Context<CollapsibleContextValue | null>;
+/** Hook providing access to the collapsible context. */
+export declare function useCollapsibleContext(): CollapsibleContextValue;

package/dist/types/components/Collapsible/CollapsibleTrigger.d.ts

@@ -0,0 +1,10 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the collapsible trigger component. */
+export interface CollapsibleTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>, "asChild" | "children"> {
+    defaultTriggerCollapseLabel?: string;
+    defaultTriggerExpandLabel?: string;
+    children?: React.ReactNode | ((open: boolean) => React.ReactNode);
+}
+/** Trigger that toggles the expansion of the collapsible content. */
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,3 @@
+export * from "./Collapsible.tsx";
+export { CollapsibleContent } from "./CollapsibleContent.tsx";
+export { CollapsibleTrigger } from "./CollapsibleTrigger.tsx";

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

@@ -0,0 +1,91 @@
+import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
+import { ControlAddon } from "../ControlAddon";
+import { Icon } from "../Icon";
+import { Input } from "../Input";
+import { MenuList, type MenuListIconPlacement, type MenuListVariant } from "../MenuList";
+import { Spinner } from "../Spinner";
+/** Command menu variants. */
+export type CommandMenuVariant = MenuListVariant;
+/** Placement of icons within command menu items. */
+export type CommandMenuIconPlacement = MenuListIconPlacement;
+/** Properties of the command menu component. */
+export interface CommandMenuProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
+    /**
+     * Style variant of the command menu list.
+     *
+     * @default subtle
+     */
+    variant?: CommandMenuVariant;
+    /**
+     * Default placement of icons within command menu items. This property can be
+     * overridden on a per-item basis.
+     *
+     * @default start
+     */
+    iconPlacement?: CommandMenuIconPlacement;
+    /** Placeholder of the search input. */
+    searchPlaceholder?: string;
+    /** Optional controlled search value. */
+    searchValue?: string;
+    /** Event handler called when the search value changes. */
+    onSearchValueChange?: (search: string) => void;
+    /** Accessible label for the list of items. Not shown visibly. */
+    listLabel?: string;
+    /**
+     * Whether the command list is loading.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /** Accessible label for the loading of items. Not shown visibly. */
+    loadingLabel?: string;
+    /** Estimated progress of loading the list of items. */
+    loadingProgress?: number;
+    /** Message to display when no items were found. */
+    emptyMessage?: React.ReactNode;
+    /** Properties to pass to the search `Input` component. */
+    searchProps?: Omit<React.ComponentPropsWithRef<typeof Input>, "asChild" | "variant" | "status" | "code" | "defaultValue" | "value" | "onValueChange" | "startAdornment" | "endAdornment" | "showClearButton">;
+    /** Properties to pass to the search adornment `ControlAddon` component. */
+    searchAdornmentProps?: React.ComponentPropsWithRef<typeof ControlAddon>;
+    /** Properties to pass to the search `Icon` component. */
+    searchIconProps?: React.ComponentPropsWithRef<typeof Icon>;
+    /** Properties to pass to the list component. */
+    listProps?: Omit<React.ComponentPropsWithRef<typeof MenuList>, "asChild" | "variant" | "iconPlacement">;
+    /** Properties to pass to the loading element. */
+    loadingProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the spinner component. */
+    spinnerProps?: React.ComponentPropsWithRef<typeof Spinner>;
+    /** Properties to pass to the component containing the empty message. */
+    emptyMessageProps?: React.ComponentPropsWithRef<"div">;
+}
+/**
+ * The command menu renders a menu of selectable items which can be filtered and
+ * sorted via a search query.
+ *
+ * Built on top of the [cmdk Command primitive](https://cmdk.paco.me) and the
+ * `MenuList` component.
+ *
+ * It composes the following subcomponents:
+ *
+ * - `CommandMenuDialog`: Optional dialog to display the command menu.
+ * - `CommandMenuGroup`: Groups items under an optional label.
+ * - `CommandMenuItem`: An item of the command menu.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { CommandMenu, CommandMenuItem } from "@ostack.tech/ui";
+ *
+ * function ActionsCommandMenu() {
+ *   return (
+ *     <CommandMenu>
+ *       <CommandMenuItem onSelect={loadDocument}>Load…</CommandMenuItem>
+ *       <CommandMenuItem onSelect={saveDocument}>Save…</CommandMenuItem>
+ *       <CommandMenuItem onSelect={printDocument}>Print…</CommandMenuItem>
+ *     </CommandMenu>
+ *   );
+ * }
+ * ```
+ */
+export declare const CommandMenu: React.ForwardRefExoticComponent<CommandMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/CommandMenu/CommandMenuDialog.d.ts

@@ -0,0 +1,45 @@
+import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React from "react";
+import { type DialogContentSize } from "../Dialog";
+import { Overlay } from "../Overlay";
+/** Possible command menu dialog sizes. */
+export type CommandMenuDialogSize = DialogContentSize;
+/** Properties of the command menu dialog. */
+export interface CommandMenuDialogProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "asChild" | "title"> {
+    /** Accessible dialog title. Not shown visibly. */
+    title?: React.ReactNode;
+    /** Accessible dialog description. Not shown visibly. */
+    description?: React.ReactNode;
+    /**
+     * Size of the command menu dialog.
+     *
+     * @default md
+     */
+    size?: CommandMenuDialogSize;
+    /**
+     * The open state of the command menu dialog when it is initially rendered.
+     * Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled open state of the dialog. Should be used in conjunction with
+     * `onOpenChange`.
+     */
+    open?: boolean;
+    /** Event handler called when the open state of the dialog changes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The modality of the dialog. When set to `true`, interaction with outside
+     * elements will be disabled and only dialog content will be visible to screen
+     * readers.
+     *
+     * @default true
+     */
+    modal?: boolean;
+    /** Properties to pass to the portal component. */
+    portalProps?: Omit<React.ComponentPropsWithRef<typeof DialogPrimitive.Portal>, "forceMount">;
+    /** Properties to pass to the `Overlay` component. */
+    overlayProps?: React.ComponentPropsWithRef<typeof Overlay>;
+}
+/** Component used to display the command menu within a dialog. */
+export declare const CommandMenuDialog: React.ForwardRefExoticComponent<CommandMenuDialogProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/CommandMenu/CommandMenuGroup.d.ts

@@ -0,0 +1,9 @@
+import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
+/** Properties of the command menu group. */
+export interface CommandMenuGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>, "asChild" | "heading"> {
+    /** Optional label of the command menu group. */
+    label?: React.ReactNode;
+}
+/** Component used to group multiple command items. */
+export declare const CommandMenuGroup: React.ForwardRefExoticComponent<CommandMenuGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/CommandMenu/CommandMenuItem.d.ts

@@ -0,0 +1,13 @@
+import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
+import { type MenuListItemProps } from "../MenuList";
+export interface CommandMenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>, "asChild" | "color">, Pick<MenuListItemProps, "selected" | "color" | "loading" | "enabledWhenLoading" | "loadingContent" | "icon" | "iconPlacement" | "href" | "target" | "rel" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps"> {
+    /**
+     * Render the item as a link. When set, you can pass `href`, `target`, and
+     * `rel` properties to the item.
+     *
+     * @default false
+     */
+    asLink?: boolean;
+}
+export declare const CommandMenuItem: React.ForwardRefExoticComponent<CommandMenuItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,4 @@
+export * from "./CommandMenu.tsx";
+export * from "./CommandMenuDialog.tsx";
+export * from "./CommandMenuGroup.tsx";
+export * from "./CommandMenuItem.tsx";

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

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { type Breakpoint } from "../../utils/breakpoints.ts";
+import { type Responsive } from "../../utils/useResponsiveValues.ts";
+/** Value specifying up to which breakpoint the container should be fluid. */
+export type ContainerFluidUntil = Omit<Breakpoint, "xs">;
+/** Properties of the container component. */
+export interface ContainerProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * 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;
+    /**
+     * Sets the container's width to `100%` up to the specified breakpoint (or at
+     * all times when `true`).
+     *
+     * @default "sm"
+     */
+    fluid?: ContainerFluidUntil | true;
+    /**
+     * Size of the left and right margins of the container. When a number `n` is
+     * provided, each unit corresponds to `spacing(n)`.
+     *
+     * A responsive value may be provided to change the gutter size based on the
+     * current breakpoint.
+     *
+     * @default 2.5
+     */
+    gutter?: Responsive<number | string>;
+    /**
+     * Size of the left margin of the container. When a number `n` is provided,
+     * each unit corresponds to `spacing(n)`.
+     *
+     * A responsive value may be provided to change the gutter size based on the
+     * current breakpoint.
+     *
+     * @default gutter
+     */
+    leftGutter?: Responsive<number | string>;
+    /**
+     * Size of the right margin of the container. When a number `n` is provided,
+     * each unit corresponds to `spacing(n)`.
+     *
+     * A responsive value may be provided to change the gutter size based on the
+     * current breakpoint.
+     *
+     * @default gutter
+     */
+    rightGutter?: Responsive<number | string>;
+}
+/**
+ * The container component is used to constrain the maximum width of its
+ * content.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Container } from "@ostack.tech/ui";
+ *
+ * function App() {
+ *   return <Container>…</Container>;
+ * }
+ * ```
+ */
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { type ControlStatus, type ControlVariant } from "../../utils/control.ts";
+/** Properties of the control addon component. */
+export interface ControlAddonProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * 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;
+    /** Variant of the control addon. */
+    variant?: ControlVariant;
+    /**
+     * Sets the status of the addon (this should typically be the same as the
+     * input's status).
+     */
+    status?: ControlStatus;
+    /**
+     * Styles the addon as muted.
+     *
+     * Note that if rendering the addon as a button or a link via `asChild`, this
+     * property will have no effect. For such cases set the `disabled`/
+     * `data-disabled` properties directly on the button/link.
+     */
+    muted?: boolean;
+    /** Styles the addon as read-only. */
+    readOnly?: boolean;
+}
+/**
+ * Component used as an "add-on" for controls.
+ *
+ * The control addon is typically used within the `startAdornment` and
+ * `endAdornment` properties of a control, but can also be used standalone where
+ * it makes sense.
+ */
+export declare const ControlAddon: React.ForwardRefExoticComponent<ControlAddonProps & React.RefAttributes<HTMLDivElement>>;

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

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