@knkcs/anker 0.0.1

package/LICENSE

@@ -0,0 +1,30 @@
+Copyright (c) 2026 knk Gruppe (https://knk.de/)
+
+All rights reserved.
+
+This software and associated documentation files (the "Software") are the
+proprietary property of knk Gruppe and its subsidiaries.
+
+Permission is hereby granted to employees and contractors of knk Gruppe and
+its subsidiary companies to use, copy, modify, and distribute the Software
+solely for internal business purposes within the knk group of companies.
+
+The following restrictions apply:
+
+1. The Software may not be used, copied, modified, merged, published,
+   distributed, sublicensed, or sold by any person or entity outside of
+   the knk group of companies without prior written consent from knk Gruppe.
+
+2. The Software may not be incorporated into products or services offered
+   to third parties outside of the knk group of companies.
+
+3. This license notice shall be included in all copies or substantial
+   portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# @knkcs/anker
+
+The UI component library for the knk software group. Provides a shared design system, primitives, atoms, form controls, and feedback components across all knkCMS microservices.
+
+## Stack
+
+- React 19 + TypeScript
+- Chakra UI v3 (theme system, recipes, slot recipes)
+- React Hook Form + Zod (form state + validation)
+- Lucide React (icons)
+- Storybook (documentation)
+
+## Installation
+
+```bash
+npm install @knkcs/anker
+```
+
+## Usage
+
+```tsx
+import { Provider } from "@knkcs/anker/primitives";
+
+function App() {
+  return (
+    <Provider>
+      <YourApp />
+    </Provider>
+  );
+}
+```
+
+The `Provider` defaults to anker's theme system. To override with a custom system, pass it via the `system` prop.
+
+### Imports by layer
+
+```tsx
+// Design tokens and Chakra system
+import system from "@knkcs/anker/theme";
+
+// Chakra UI wrappers with consistent defaults
+import { Accordion, Alert, Avatar, Breadcrumb, Menu, Popover, Skeleton, Spinner, Tooltip } from "@knkcs/anker/primitives";
+
+// Higher-level composites (card, drawer, modal, pagination, stepper, table, timeline)
+import { Card, Drawer, Modal, Pagination, Stepper, Timeline } from "@knkcs/anker/components";
+
+// Small reusable units (persona, badges, search, datetime, clipboard, data list)
+import { StatusBadge, Persona, SearchInput, ClipboardButton, DataList } from "@knkcs/anker/atoms";
+
+// Form controls (React Hook Form + Zod)
+import { InputField, ArrayField, FormField } from "@knkcs/anker/forms";
+
+// Feedback patterns (confirm modal)
+import { ConfirmModalProvider, useConfirmModal } from "@knkcs/anker/feedback";
+```
+
+## Brand Colors
+
+The theme includes both **UI-optimized color scales** (primary, secondary, gray) and **exact brand guideline colors** from the knk Brand Guidelines (October 2021).
+
+| Token | HEX | Use |
+|-------|-----|-----|
+| `primary.500` | `#2087d7` | UI blue — buttons, links, focus rings |
+| `secondary.500` | `#e9580c` | UI orange — matches brand orange |
+| `brand.blue` | `#004576` | Exact brand blue — logos, headers, branding |
+| `brand.navy` | `#0f395d` | Dark blue variant |
+| `brand.light-blue` | `#6fa7d1` | Light blue variant |
+| `brand.orange` | `#e9580c` | Brand orange (same as secondary.500) |
+| `brand.gold` | `#f4b235` | Brand gold accent |
+| `brand.light-gray` | `#f2f2f2` | Brand neutral background |
+
+The UI primary blue intentionally differs from the brand guideline blue. The brand blue (`#004576`) is a deep navy designed for print materials; the UI blue (`#2087d7`) is brighter for web accessibility and matches the existing Core application.
+
+## Notable Component Props
+
+| Component | Prop | Description |
+|-----------|------|-------------|
+| `Modal`, `Drawer` | `loading` | Shows spinner on save button during async operations |
+| `Table`, `ArrayField` | `emptyState` | Content to display when there are no items |
+| `Card` | `title`, `header`, `footer` | Slot props for structured card layout |
+| `Persona` | `interactive` | Adds hover state and pointer cursor |
+| `TypeBadge` | `colorPalette` | Chakra color palette for visual differentiation |
+| `FormField` | `description` | Persistent description that shows alongside errors |
+
+## Font
+
+The theme uses [Inter](https://rsms.me/inter/) as its primary typeface. Install the variable font in your app:
+
+```bash
+npm install @fontsource-variable/inter
+```
+
+Then import it in your app entry point:
+
+```tsx
+import "@fontsource-variable/inter";
+```
+
+If Inter is not installed, the theme gracefully falls back to the system font stack (`-apple-system, system-ui, sans-serif`).
+
+## Accessibility
+
+- **Reduced motion** — The theme globally disables animations and transitions when the user prefers reduced motion (`prefers-reduced-motion: reduce`)
+- **RTL-ready** — All components use logical CSS properties (`marginInlineStart`, `insetInlineEnd`) instead of physical direction properties
+- **Form ARIA** — `FormField` automatically links inputs to helper text and errors via `aria-describedby`, errors are announced with `aria-live="polite"`
+- **Touch targets** — All interactive elements meet the WCAG 44×44px minimum touch target size
+- **Stepper** — Active step uses `aria-current="step"`
+
+## Breaking Changes
+
+- **FactBox**: The `childs` prop on `FactBoxAction` has been renamed to `items`
+
+## Development
+
+```bash
+npm install
+npm run dev          # Storybook dev server
+npm run build        # Build library with tsup
+npm run lint         # Biome
+npm run typecheck    # tsc --noEmit
+```
+
+## Documentation
+
+Interactive component docs are available at [https://knkcs.github.io/anker/](https://knkcs.github.io/anker/)
+
+## License
+
+Proprietary - knk Gruppe. See [LICENSE](LICENSE) for details.

package/dist/atoms/index.d.ts

@@ -0,0 +1,536 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ReactNode } from 'react';
+import { IconButtonProps, BoxProps, useCheckboxGroup, StackProps, UseCheckboxGroupProps, Clipboard, InputProps, ButtonProps, DataList as DataList$1, HTMLChakraProps, TextProps, BadgeProps } from '@chakra-ui/react';
+import { b as AvatarProps } from '../avatar-DhqkKdqc.js';
+export { S as SearchInput, a as SearchInputProps } from '../search-input-C_Cl2OEx.js';
+import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, SelectInstance, MenuListProps, OptionProps } from 'chakra-react-select';
+export { ActionMeta, Select as ChakraReactSelect, ChakraStylesConfig, CreatableSelect, GroupBase, MenuListProps, MultiValue, OptionProps, SelectInstance, SingleValue, SingleValueProps, StylesConfig, chakraComponents } from 'chakra-react-select';
+
+interface ActionProps extends React__default.HTMLAttributes<HTMLButtonElement> {
+    cursor?: string;
+}
+declare const Action: {
+    ({ ref, cursor, color, ...props }: ActionProps & {
+        ref?: React__default.Ref<HTMLButtonElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface CollapseProps extends ActionProps {
+    collapsed: boolean;
+    /** Accessible label for the collapse button */
+    collapseLabel?: string;
+}
+declare const Collapse: {
+    ({ ref, collapseLabel, ...props }: CollapseProps & {
+        ref?: React__default.Ref<HTMLButtonElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface EditProps extends ActionProps {
+    /** Accessible label for the edit button */
+    editLabel?: string;
+}
+declare const Edit: {
+    ({ ref, editLabel, ...props }: EditProps & {
+        ref?: React__default.Ref<HTMLButtonElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type FilterProps = Omit<IconButtonProps, "aria-label" | "cursor" | "icon"> & {
+    activeFilterCount?: number;
+    /** Accessible label for the filter button */
+    filterLabel?: string;
+};
+declare const Filter: {
+    ({ ref, filterLabel, ...props }: FilterProps & {
+        ref?: React__default.Ref<HTMLButtonElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface HandleProps extends ActionProps {
+    /** Accessible label for the drag handle */
+    handleLabel?: string;
+}
+declare const Handle: {
+    ({ ref, handleLabel, ...props }: HandleProps & {
+        ref?: React__default.Ref<HTMLButtonElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface RemoveProps extends ActionProps {
+    /** Accessible label for the remove button */
+    removeLabel?: string;
+}
+declare const Remove: {
+    ({ ref, removeLabel, ...props }: RemoveProps & {
+        ref?: React__default.Ref<HTMLButtonElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type CheckboxCardGroupProps = StackProps & {
+    defaultValue?: UseCheckboxGroupProps["defaultValue"];
+    value?: UseCheckboxGroupProps["value"];
+    onValueChange?: (value: string[]) => void;
+};
+declare const CheckboxCardGroup: {
+    (props: CheckboxCardGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+type CheckboxItemProps = ReturnType<ReturnType<typeof useCheckboxGroup>["getItemProps"]>;
+interface CheckboxCardProps extends BoxProps {
+    value: string;
+    checkboxProps?: CheckboxItemProps;
+}
+declare const CheckboxCard: {
+    (props: CheckboxCardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ClipboardButtonProps extends Clipboard.RootProps {
+    /** Label for the copy button. @default "Copy" */
+    label?: string;
+}
+declare const ClipboardButton: {
+    ({ ref, ...props }: ClipboardButtonProps & {
+        ref?: React$1.Ref<HTMLDivElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+interface ClipboardInputProps extends Clipboard.RootProps {
+    /** Props passed to the input element. */
+    inputProps?: InputProps;
+    /** Label for the copy button. @default "Copy" */
+    label?: string;
+}
+declare const ClipboardInput: {
+    ({ ref, ...props }: ClipboardInputProps & {
+        ref?: React$1.Ref<HTMLDivElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+interface ClipboardLinkProps extends Clipboard.RootProps {
+    /** Label for the copy link button. @default "Copy Link" */
+    label?: string;
+}
+declare const ClipboardLink: {
+    ({ ref, ...props }: ClipboardLinkProps & {
+        ref?: React$1.Ref<HTMLDivElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type DateType = Date | string | number;
+type DateFormat = "fullWithSeconds" | "full" | "time" | "day" | "weekday";
+
+interface CommentProps extends Pick<CommentHeaderProps, "author" | "commentedAt">, CommentFooterProps {
+    id?: string;
+    /**
+     * The element to display as the avatar - generally an Avatar component.
+     */
+    avatar: ReactNode;
+    /**
+     * The main content on the comment.
+     */
+    content?: ReactNode;
+    /**
+     * Nested comments are to be provided as children.
+     */
+    children?: ReactNode;
+    /**
+     * If `true`, the comment will be rendered with a strikethrough.
+     */
+    isDeleted?: boolean;
+    /** Label shown when the comment has been deleted */
+    deletedLabel?: string;
+}
+interface CommentHeaderProps {
+    author?: {
+        id: string;
+        name: string;
+        email: string;
+    };
+    /**
+     * The datetime the comment was created.
+     */
+    commentedAt?: DateType;
+}
+interface CommentFooterProps {
+    /**
+     * A list of `CommentAction` items rendered as a row of buttons below the content.
+     */
+    actions?: Array<ReactNode>;
+}
+
+declare const Comment: React__default.FC<CommentProps>;
+interface CommentActionProps extends ButtonProps {
+    children: React__default.ReactNode;
+}
+declare const CommentAction: React__default.FC<CommentActionProps>;
+
+interface CommentReplyBoxProps {
+    onReply: (value: string) => Promise<void>;
+    onCancel?: () => void;
+    /** Placeholder text for the reply textarea */
+    placeholder?: string;
+    /** Label for the cancel button */
+    cancelLabel?: string;
+    /** Label for the reply/submit button */
+    replyLabel?: string;
+}
+declare const CommentReplyBox: {
+    ({ ref, ...props }: CommentReplyBoxProps & {
+        ref?: React__default.Ref<HTMLTextAreaElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface DataListItemType {
+    label: React$1.ReactNode;
+    value: React$1.ReactNode;
+}
+interface DataListProps extends DataList$1.RootProps {
+    /** Items to render as label-value pairs. If provided, renders automatically. */
+    items?: DataListItemType[];
+}
+declare const DataList: {
+    ({ ref, ...props }: DataListProps & {
+        ref?: React$1.Ref<HTMLDListElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DataListItem: React$1.ForwardRefExoticComponent<DataList$1.ItemProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DataListItemLabel: React$1.ForwardRefExoticComponent<DataList$1.ItemLabelProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DataListItemValue: React$1.ForwardRefExoticComponent<DataList$1.ItemValueProps & React$1.RefAttributes<HTMLDivElement>>;
+type DataListRootProps = DataList$1.RootProps;
+
+interface DateInputProps extends Omit<InputProps, "type" | "value" | "onChange"> {
+    /** The date value as an ISO date string (YYYY-MM-DD) or ISO datetime string */
+    value?: string;
+    /** Called when the date value changes */
+    onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
+    /** Minimum date in YYYY-MM-DD format */
+    minDate?: string;
+    /** Maximum date in YYYY-MM-DD format */
+    maxDate?: string;
+}
+declare const DateInput: {
+    ({ ref, ...props }: DateInputProps & {
+        ref?: React__default.Ref<HTMLInputElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface RelativeDateTimeProps {
+    /**
+     * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number
+     */
+    date: DateType;
+    /**
+     * If a value is passed to baseDate, then the component will compare both dates and return the time between them.
+     * If no value is passed then the date will be compared to "now"
+     *
+     * @default "Now"
+     */
+    baseDate?: DateType;
+    /**
+     * Sets the date to be relative only if it is in the current week
+     * @default false
+     */
+    isRelativeToCurrentWeek?: boolean;
+}
+declare const RelativeDateTime: React__default.FC<RelativeDateTimeProps>;
+
+/**
+ * A function that will return a formatted date string. The format will depend on the option
+ * passed in the second argument.
+ * By default, it will return a string with "full" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)
+ *
+ * @param date - the date to be formatted
+ * @param format - the desired format ("full", "day", "weekday", or "time")
+ * @returns a formatted date
+ *
+ * @example
+ * formatDateAndTime('2021-08-17T15:45:00') // returns "Tue, 17 Aug 2021 at 3:45 PM"
+ *
+ * @example
+ * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns "17 Aug 2021"
+ */
+declare function formatDateAndTime(date: DateType, format?: DateFormat): string;
+/**
+ * A function that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag
+ * By default, it will return a string with "YYYY-MM-DDTHH:mm:ss.SSS[Z]" format
+ *
+ * @param date - the date to be formatted
+ * @param format - the desired format ("full", "day", "weekday", or "time")
+ * @returns a formatted date
+ *
+ * @example
+ * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z
+ *
+ * @example
+ * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13
+ */
+declare function formatMachineReadableDateTime(date: DateType, format?: DateFormat): string;
+/**
+ * @example
+ * > formatDate(date)
+ * 13 Aug 2019
+ */
+declare const formatDate: (date: DateType) => string;
+/**
+ * @example
+ * > formatTime(date)
+ * 8:00 AM
+ */
+declare const formatTime: (date: DateType) => string;
+/**
+ * @example
+ * > formatWeekdayDate(date)
+ * Mon, 12 Aug
+ */
+declare const formatWeekdayDate: (date: DateType) => string;
+
+/**
+ * A function that will return a string with how far a given date is in the past or future,
+ * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.
+ *
+ * @param date - the date to be formatted
+ * @param baseDate - the date that should be used as a reference (default is "today")
+ * @returns a relative date
+ *
+ * @example
+ * // Considering today as 18.08.2021
+ * formatRelativeDateTime('2021-08-17T15:45:00') // returns "a day ago"
+ *
+ * @example
+ * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns "in a day"
+ */
+declare function formatRelativeDateTime(date: DateType, baseDate?: DateType): string;
+/**
+ * A function that formats a date relative to Today or to the `baseDate` if passed.
+ * If the date is not today, it will return a string with "Yesterday ...", "Tomorrow ...", etc
+ * If the date is not in the current week, it return a string with "DD MMM YYYY" format
+ * If the date is today, it will return a string with "... ago" or "in ..."
+ *
+ * @param date - the date to be formatted
+ * @param baseDate - the date that should be used as a reference (default is "today")
+ * @returns a relative date
+ *
+ * @example
+ * // Considering today as 18.08.2021
+ * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns "Yesterday at 3:45 PM"
+ *
+ * @example
+ * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns "Tomorrow at 3:45 PM"
+ */
+declare function formatRelativeToCurrentWeekDateTime(date: DateType, baseDate?: DateType): string;
+
+interface EmptyStateProps {
+    /** Main heading text. */
+    header: string;
+    /** Description text or rich content. */
+    description?: React__default.ReactNode;
+    /** Optional icon displayed above the heading. */
+    icon?: React__default.ReactNode;
+    /** Optional action buttons below the description. */
+    actions?: React__default.ReactNode;
+}
+declare const EmptyState: React__default.FC<EmptyStateProps>;
+
+interface PersonaProps {
+    /**
+     * The name of the person in the avatar.
+     *
+     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
+     * - If `src` is not loaded, the name will be used to create the initials
+     */
+    name?: string;
+    /**
+     * Primary label of the persona, defaults to the name
+     */
+    label?: React__default.ReactNode;
+    /**
+     * Hide the persona details next to the avatar.
+     */
+    hideDetails?: boolean;
+    /**
+     * The size of the persona, from 2xs to 2xl.
+     */
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /**
+     * When true, adds hover styling and pointer cursor for clickable personas.
+     */
+    interactive?: boolean;
+}
+interface PersonaStyles {
+    container?: React__default.CSSProperties;
+    details?: React__default.CSSProperties;
+    label?: React__default.CSSProperties;
+}
+declare const Persona: React__default.FC<PersonaProps>;
+interface PersonaContainerProps extends HTMLChakraProps<"div"> {
+    children: React__default.ReactNode;
+    /**
+     * Optional style overrides passed down to child components via context.
+     */
+    styles?: PersonaStyles;
+    /**
+     * When true, adds hover styling and pointer cursor for clickable personas.
+     */
+    interactive?: boolean;
+}
+declare const PersonaContainer: ({ ref, ...props }: PersonaContainerProps & {
+    ref?: React__default.Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+interface PersonaAvatarOptions extends Pick<PersonaProps, "name" | "size"> {
+}
+interface PersonaAvatarProps extends PersonaAvatarOptions, Omit<AvatarProps, "size"> {
+}
+declare const PersonaAvatar: ({ ref, ...props }: PersonaAvatarProps & {
+    ref?: React__default.Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const PersonaDetails: ({ ref, ...props }: HTMLChakraProps<"div"> & {
+    ref?: React__default.Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const PersonaLabel: ({ ref, ...props }: HTMLChakraProps<"span"> & {
+    ref?: React__default.Ref<HTMLSpanElement>;
+}) => react_jsx_runtime.JSX.Element;
+
+interface BaseOption {
+    id: string;
+    label: string;
+    avatar?: string;
+    color?: string;
+    icon?: React.ReactNode;
+    data?: Record<string, unknown>;
+}
+
+interface BaseSelectProps<T extends BaseOption> extends Omit<Props<T, boolean, GroupBase<T>>, "value" | "onChange" | "isLoading" | "isDisabled"> {
+    value: T | T[] | null;
+    onChange?: (newValue: MultiValue<T> | SingleValue<T>, actionMeta: ActionMeta<T>) => void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+declare const BaseSelect: <T extends BaseOption>({ ref, value, onChange, options, isMulti, loading, disabled, isClearable, placeholder, menuPortalTarget, variant, styles, ...restSelectProps }: BaseSelectProps<T> & {
+    ref?: React__default.Ref<SelectInstance<T, boolean, GroupBase<T>>>;
+}) => react_jsx_runtime.JSX.Element;
+
+interface TableMenuColumn {
+    key: string;
+    header: string;
+    width?: string;
+}
+interface TableMenuListProps<T extends BaseOption> extends MenuListProps<T, boolean, GroupBase<T>> {
+    columns?: TableMenuColumn[];
+    /** Minimum width of the table menu. Defaults to "400px" */
+    minWidth?: string;
+    /** Maximum width of the table menu. Defaults to "600px" */
+    maxWidth?: string;
+}
+/**
+ * A custom MenuList component that renders options as table rows.
+ *
+ * Use with BaseSelect by passing it via the `components` prop:
+ * ```tsx
+ * <BaseSelect
+ *   components={{
+ *     MenuList: (props) => (
+ *       <TableMenuList
+ *         {...props}
+ *         columns={[
+ *           { key: "label", header: "Name" },
+ *           { key: "valid_from", header: "Valid From" },
+ *         ]}
+ *       />
+ *     ),
+ *     Option: TableOption,
+ *   }}
+ * />
+ * ```
+ */
+declare const TableMenuList: <T extends BaseOption>({ children, columns, minWidth, maxWidth, ...props }: TableMenuListProps<T>) => react_jsx_runtime.JSX.Element;
+/**
+ * A custom Option component that renders as a table row.
+ * Use together with TableMenuList.
+ */
+declare const TableOption: <T extends BaseOption>({ data, innerProps, isSelected, isFocused, columns, }: OptionProps<T, boolean, GroupBase<T>> & {
+    columns?: TableMenuColumn[];
+}) => react_jsx_runtime.JSX.Element;
+interface CreateTableMenuComponentsOptions {
+    columns: TableMenuColumn[];
+    /** Minimum width of the table menu. Defaults to "400px" */
+    minWidth?: string;
+    /** Maximum width of the table menu. Defaults to "600px" */
+    maxWidth?: string;
+}
+/**
+ * Helper to create table menu components with predefined columns.
+ *
+ * Usage:
+ * ```tsx
+ * const { MenuList, Option } = createTableMenuComponents({
+ *   columns: [
+ *     { key: "label", header: "Release" },
+ *     { key: "valid_from", header: "Valid From" },
+ *     { key: "valid_until", header: "Valid Until" },
+ *   ],
+ *   minWidth: "500px",
+ *   maxWidth: "800px",
+ * });
+ *
+ * <BaseSelect components={{ MenuList, Option }} />
+ * ```
+ */
+declare const createTableMenuComponents: <T extends BaseOption>(options: CreateTableMenuComponentsOptions) => {
+    MenuList: (props: MenuListProps<T, boolean, GroupBase<T>>) => react_jsx_runtime.JSX.Element;
+    Option: (props: OptionProps<T, boolean, GroupBase<T>>) => react_jsx_runtime.JSX.Element;
+};
+
+interface StatProps extends BoxProps {
+    /** An icon element rendered as React node (e.g., a lucide-react icon) */
+    icon?: React__default.ReactNode;
+    label: string;
+    value?: React__default.ReactNode;
+    loading?: boolean;
+}
+declare const Stat: React__default.FC<StatProps>;
+
+interface StatusBadgeProps {
+    /** The display label for the badge */
+    label: string;
+    /** The background color for the badge (hex format, e.g. "#ff0000") */
+    color: string;
+}
+declare const StatusBadge: React__default.FC<StatusBadgeProps>;
+
+interface TextInputProps extends InputProps {
+    append?: string | React__default.ReactElement;
+    prepend?: string | React__default.ReactElement;
+}
+declare const TextInput: {
+    ({ ref, ...props }: TextInputProps & {
+        ref?: React__default.Ref<HTMLInputElement>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TextOverflowProps extends TextProps {
+}
+declare const TextOverflow: React.FC<TextOverflowProps>;
+
+interface TypeBadgeProps extends Omit<BadgeProps, "children"> {
+    /** Display name for the badge. */
+    name: string;
+    /** Chakra color palette for visual differentiation. @default "gray" */
+    colorPalette?: string;
+}
+declare const TypeBadge: React__default.FC<TypeBadgeProps>;
+
+export { Action, type ActionProps, type BaseOption, BaseSelect, type BaseSelectProps, CheckboxCard, CheckboxCardGroup, type CheckboxCardGroupProps, type CheckboxCardProps, ClipboardButton, type ClipboardButtonProps, ClipboardInput, type ClipboardInputProps, ClipboardLink, type ClipboardLinkProps, Collapse, type CollapseProps, Comment, CommentAction, type CommentActionProps, type CommentFooterProps, type CommentHeaderProps, type CommentProps, CommentReplyBox, type CommentReplyBoxProps, type CreateTableMenuComponentsOptions, DataList, DataListItem, DataListItemLabel, type DataListItemType, DataListItemValue, type DataListProps, type DataListRootProps, type DateFormat, DateInput, type DateInputProps, type DateType, Edit, type EditProps, EmptyState, type EmptyStateProps, Filter, type FilterProps, Handle, type HandleProps, Persona, PersonaAvatar, PersonaContainer, type PersonaContainerProps, PersonaDetails, PersonaLabel, type PersonaProps, RelativeDateTime, type RelativeDateTimeProps, Remove, type RemoveProps, Stat, type StatProps, StatusBadge, type StatusBadgeProps, type TableMenuColumn, TableMenuList, type TableMenuListProps, TableOption, TextInput, type TextInputProps, TextOverflow, type TextOverflowProps, TypeBadge, type TypeBadgeProps, createTableMenuComponents, formatDate, formatDateAndTime, formatMachineReadableDateTime, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime, formatTime, formatWeekdayDate };