@khaos-systems/helm 0.1.0

package/README.md

@@ -0,0 +1,20 @@
+# Helm (Matter Design System)
+
+This package contains the Matter design system and Storybook site extracted from `anchor`. 
+
+## Commands
+
+- `npm install`
+- `npm run storybook` - run Storybook locally
+- `npm run build-storybook` - static Storybook build
+- `npm run build` - build library output to `dist/`
+- `npm run gen:tokens` - regenerate `src/tokens.css` from `tokens/tokens.dark.json`
+
+## Usage in another app
+
+Install from workspace and import:
+
+```ts
+import { MtButton } from '@khaos/matter';
+import '@khaos/matter/styles.css';
+```

package/dist/components/matter/MtAlert.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type MtAlertSeverity = 'success' | 'info' | 'warning' | 'error';
+interface MtAlertProps {
+    title: ReactNode;
+    content: ReactNode;
+    severity?: MtAlertSeverity;
+    actions?: ReactNode;
+    className?: string;
+}
+export declare function MtAlert({ title, content, severity, actions, className }: MtAlertProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtAvatar.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+export type MtAvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface MtAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    name?: string;
+    initials?: string;
+    size?: MtAvatarSize;
+}
+export default function MtAvatar({ src, alt, name, initials, size, className, ...props }: MtAvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/matter/MtAvatarGroup.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { MtAvatarProps, MtAvatarSize } from './MtAvatar';
+export interface MtAvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    avatars?: MtAvatarProps[];
+    children?: ReactNode;
+    max?: number;
+    size?: MtAvatarSize;
+    spacing?: number;
+}
+export default function MtAvatarGroup({ avatars, children, max, size, spacing, className, ...props }: MtAvatarGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/matter/MtButton.d.ts

@@ -0,0 +1,12 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import React from 'react';
+type MtButtonSurface = 'default' | 'accent' | 'ghost';
+interface MtButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    kind?: 'default' | 'icon';
+    size?: 'medium' | 'large';
+    variant?: MtButtonSurface;
+}
+export declare const MtButton: React.ForwardRefExoticComponent<MtButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/matter/MtCheckbox.d.ts

@@ -0,0 +1,17 @@
+import { InputHTMLAttributes } from 'react';
+interface MtCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** The label for the checkbox */
+    label?: string;
+    /** Marks the checkbox as invalid */
+    invalid?: boolean;
+    /** A description for the checkbox */
+    description?: string;
+    /** Sets the checkbox to an intermediate state. This is only a visual state and does not affect the value. */
+    intermediate?: boolean;
+    className?: string;
+}
+/**
+ * TODO: Consider using `value` instead of `checked` to be more consistent with other input components. Not sure if it's better to be consistent with native checkboxes or with our other components. Maybe we can support both? If `value` is provided, it takes precedence over `checked`.
+ */
+export declare function MtCheckbox({ label, checked, invalid, description, intermediate, disabled, onChange, className, ...inputProps }: MtCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtContextMenu.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface MtContextMenuItem {
+    label: React.ReactNode;
+    onSelect?: () => void;
+    disabled?: boolean;
+    shortcut?: React.ReactNode;
+    items?: MtContextMenuItem[];
+    separator?: boolean;
+}
+interface MtContextMenuProps {
+    open: boolean;
+    x: number;
+    y: number;
+    items?: MtContextMenuItem[];
+    onOpenChange?: (open: boolean) => void;
+    onClose?: () => void;
+    focusOnOpen?: boolean;
+    renderMenuItems?: () => React.ReactNode;
+    renderHeader?: () => React.ReactNode;
+    className?: string;
+}
+interface WithContextMenuProps {
+    children: (props: {
+        openMenu: React.MouseEventHandler<HTMLElement>;
+    }) => React.ReactElement;
+    getContextMenuItems?: () => MtContextMenuItem[];
+    renderMenuItems?: () => React.ReactNode;
+    renderHeader?: () => React.ReactNode;
+    focusOnOpen?: boolean;
+}
+export declare function MtContextMenu({ open, x, y, items, onOpenChange, onClose, renderMenuItems, renderHeader, className, }: MtContextMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function WithContextMenu({ children, getContextMenuItems, renderMenuItems, renderHeader, }: WithContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtDialog.d.ts

@@ -0,0 +1,15 @@
+import { Dialog } from 'radix-ui';
+interface MtDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    maxWidth?: string;
+    showCloseButton?: boolean;
+    className?: string;
+    contentClassName?: string;
+}
+export declare function MtDialog({ open, onOpenChange, title, description, children, maxWidth, showCloseButton, className, contentClassName, }: MtDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare const MtDialogClose: import("react").ForwardRefExoticComponent<Dialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/matter/MtDivider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface MtDividerProps {
+    title?: string | ReactNode;
+    className?: string;
+}
+export declare function MtDivider({ title, className }: MtDividerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtDropdown.d.ts

@@ -0,0 +1,27 @@
+import { DropdownMenu } from 'radix-ui';
+import React from 'react';
+type MtDropdownTriggerProps = {
+    children: React.ReactElement;
+};
+declare function MtDropdownTrigger({ children }: MtDropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function MtDropdownItem({ children, className, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenu.Item>): import("react/jsx-runtime").JSX.Element;
+/**
+ * MtDropdown component
+ *
+ * Special features:
+ *  - Shortcuts for each item. Press item index when opened to select it.
+ */
+interface MtDropdownProps {
+    title?: string | React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    kind?: 'default' | 'icon';
+    size?: 'medium' | 'large';
+    variant?: 'default' | 'ghost' | 'accent';
+    showCaret?: boolean;
+}
+type MtDropdownComponent = ((props: MtDropdownProps) => React.ReactElement) & {
+    Trigger: typeof MtDropdownTrigger;
+};
+export declare const MtDropdown: MtDropdownComponent;
+export {};

package/dist/components/matter/MtFilter.d.ts

@@ -0,0 +1,37 @@
+export type MtFilterConjunction = 'AND' | 'OR';
+export type MtFilterRule = {
+    type: 'rule';
+    field: string;
+    operator: string;
+    value?: string | null;
+};
+export type MtFilterGroup = {
+    type: 'group';
+    conjunction: MtFilterConjunction;
+    children: MtFilterNode[];
+};
+export type MtFilterNode = MtFilterRule | MtFilterGroup;
+export type MtFilterField = {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+};
+export type MtFilterOperator = {
+    value: string;
+    label: string;
+    requiresValue?: boolean;
+};
+export type MtFilterDropdownProps = {
+    title?: string | React.ReactNode;
+    value: MtFilterGroup;
+    onChange: (next: MtFilterGroup) => void;
+    fields: MtFilterField[];
+    operators: MtFilterOperator[];
+    advanced?: boolean;
+    onAdvancedChange?: (next: boolean) => void;
+    kind?: 'default' | 'icon';
+    size?: 'medium' | 'large';
+    variant?: 'default' | 'ghost' | 'accent';
+    showCaret?: boolean;
+};
+export declare function MtFilterDropdown({ title, value, onChange, fields, operators, advanced, onAdvancedChange, kind, size, variant, showCaret, }: MtFilterDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/matter/MtIcon.d.ts

@@ -0,0 +1,7 @@
+export declare function MtLowIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function MtMediumIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function MtHighIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function MtBacklogIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function MtOpenIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function MtInProgressIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function MtCheckIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/components/matter/MtInlineToast.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement, ReactNode } from 'react';
+interface MtInlineToastProps {
+    children: ReactElement;
+    message?: ReactNode;
+    durationMs?: number;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    disabled?: boolean;
+}
+export declare function MtInlineToast({ children, message, durationMs, side, align, disabled, }: MtInlineToastProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtInput.d.ts

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+interface MtInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'variant'> {
+    size?: 'medium' | 'large';
+    variant?: 'default' | 'ghost';
+    placeholder?: string;
+}
+/**
+ * TODO: Make it possible to edit inputs by hovering and typing. No pressing.
+ */
+export declare const MtInput: import("react").ForwardRefExoticComponent<MtInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/matter/MtPopover.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+type MtPopoverTriggerProps = {
+    children: React.ReactElement;
+};
+declare function MtPopoverTrigger({ children }: MtPopoverTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type MtPopoverProps = {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    className?: string;
+};
+type MtPopoverComponent = ((props: MtPopoverProps) => React.ReactElement) & {
+    Trigger: typeof MtPopoverTrigger;
+};
+export declare const MtPopover: MtPopoverComponent;
+export {};

package/dist/components/matter/MtProgress.d.ts

@@ -0,0 +1,8 @@
+interface MtProgressProps {
+    value: number;
+    max?: number;
+    className?: string;
+    barClassName?: string;
+}
+export declare function MtProgress({ value, max, className, barClassName }: MtProgressProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtSearch.d.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from 'react';
+interface MtSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'variant' | 'type'> {
+    size?: 'medium' | 'large';
+    variant?: 'default' | 'ghost';
+}
+export declare function MtSearch({ size, variant, className, value: propValue, onChange, placeholder, ...props }: MtSearchProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtSelect.d.ts

@@ -0,0 +1,32 @@
+import { Select } from 'radix-ui';
+import React from 'react';
+type MtSelectTriggerProps = {
+    children: React.ReactElement;
+};
+declare function MtSelectTrigger({ children }: MtSelectTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare const MtSelectItem: React.ForwardRefExoticComponent<Omit<Select.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    icon?: React.ReactNode;
+    shortcut?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+interface MtSelectProps {
+    children?: React.ReactNode;
+    className?: string;
+    placeholder?: React.ReactNode;
+    kind?: 'default' | 'icon';
+    value?: string;
+    onValueChange?: (value: string) => void;
+    size?: 'medium' | 'large';
+    options?: {
+        value: string;
+        label: React.ReactNode;
+        icon?: React.ReactNode;
+        disabled?: boolean;
+    }[];
+    variant?: 'default' | 'ghost';
+    showCaret?: boolean;
+}
+type MtSelectComponent = ((props: MtSelectProps) => React.ReactElement) & {
+    Trigger: typeof MtSelectTrigger;
+};
+export declare const MtSelect: MtSelectComponent;
+export {};

package/dist/components/matter/MtSort.d.ts

@@ -0,0 +1,20 @@
+export type MtSortDirection = 'asc' | 'desc';
+export type MtSortRule = {
+    property: string;
+    direction: MtSortDirection;
+};
+export type MtSortField = {
+    value: string;
+    label: string;
+};
+export type MtSortDropdownProps = {
+    title?: string | React.ReactNode;
+    value: MtSortRule[];
+    onChange: (next: MtSortRule[]) => void;
+    fields: MtSortField[];
+    kind?: 'default' | 'icon';
+    size?: 'medium' | 'large';
+    variant?: 'default' | 'ghost' | 'accent';
+    showCaret?: boolean;
+};
+export declare function MtSortDropdown({ title, value, onChange, fields, kind, size, variant, showCaret, }: MtSortDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/matter/MtStack.d.ts

@@ -0,0 +1,20 @@
+interface MtStackProps {
+    children: React.ReactNode;
+    gap?: number;
+    /**
+     * I am not sure if it's better to make this direction='row' | 'column'. That is way more text, so i kinda like just row,
+     * but when we start to want row-reverse and column-reverse it might be better to have a more explicit direction prop
+     * instead of multiple booleans. Alternative is to have a reverse boolean.
+     */
+    row?: boolean;
+    /** Mirrors https://tailwindcss.com/docs/align-items */
+    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /** Mirrors https://tailwindcss.com/docs/justify-content */
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch' | 'baseline' | 'normal';
+    className?: string;
+}
+/**
+ * Ref: https://mui.com/material-ui/react-stack/
+ */
+export default function MtStack({ children, gap, row, align, justify, className, }: MtStackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtTextarea.d.ts

@@ -0,0 +1,6 @@
+import { TextareaHTMLAttributes } from 'react';
+interface MtTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    variant?: 'default' | 'ghost';
+}
+export declare const MtTextarea: ({ variant, className, ...props }: MtTextareaProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtToggletip.d.ts

@@ -0,0 +1,11 @@
+interface MtToggletipProps {
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    content: React.ReactNode;
+    footer?: React.ReactNode;
+    closeButton?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+}
+export declare function MtToggletip({ children, title, content, footer, closeButton, side, align, }: MtToggletipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtTooltip.d.ts

@@ -0,0 +1,9 @@
+interface MtTooltipProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    variant: 'info' | 'error';
+    side: 'top' | 'right' | 'bottom' | 'left';
+    align: 'start' | 'center' | 'end';
+}
+export declare function MtTooltip(props: MtTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/MtTree.d.ts

@@ -0,0 +1,49 @@
+import { ReactElement, ReactNode } from 'react';
+export interface MtTreeItem<TData = unknown> {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    trailing?: ReactNode;
+    disabled?: boolean;
+    data?: TData;
+    children?: MtTreeItem<TData>[];
+}
+type MtTreeRenderState = {
+    isSelected: boolean;
+    isExpanded: boolean;
+    hasChildren: boolean;
+    depth: number;
+};
+export interface MtTreeChildItemProps<TData = unknown> {
+    itemId: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    trailing?: ReactNode;
+    disabled?: boolean;
+    data?: TData;
+    children?: ReactNode;
+}
+export interface MtTreeProps<TData = unknown> {
+    items?: MtTreeItem<TData>[];
+    children?: ReactNode;
+    className?: string;
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelectedIdChange?: (id: string, item: MtTreeItem<TData> | null) => void;
+    expandedIds?: string[];
+    defaultExpandedIds?: string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    onItemClick?: (item: MtTreeItem<TData>) => void;
+    renderItem?: (item: MtTreeItem<TData>, state: MtTreeRenderState) => ReactNode;
+    indentPx?: number;
+    toggleOnItemClick?: boolean;
+}
+declare function MtTreeItemNode<TData = unknown>({ children }: MtTreeChildItemProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare namespace MtTreeItemNode {
+    var displayName: string;
+}
+type MtTreeComponent = (<TData = unknown>(props: MtTreeProps<TData>) => ReactElement) & {
+    Item: typeof MtTreeItemNode;
+};
+export declare const MtTree: MtTreeComponent;
+export {};

package/dist/components/matter/experimental/collection/MtCollection.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Generic data view component for Visualizing large collections of items in multiple formats.
+ *
+ * Classes:
+ *  - MtCollectionEntry: Minimal interface for an item represented in the collection. All entries must have this.
+ *  - MtCollectionView: Determines how a collection is filtered and sorted.
+ *
+ * Components:
+ *  - MtCollection: Main top-level component.
+ *  - MtCollectionLayout: Determines how the collection is visually structured. Examples include table, kanban, gallery, etc.
+ *
+ * Inspirations:
+ *  - Notion databases
+ *  - [MUI DataGrid](https://mui.com/x/react-data-grid/)
+ */
+import React, { ReactNode } from 'react';
+/**
+ * Minimal interface for an item represented in the collection.
+ */
+export interface MtCollectionEntry {
+    id: any;
+}
+export interface MtCollectionProperty {
+    id: string;
+    label: string;
+    groupable?: boolean;
+}
+export interface MtCollectionViewSettingsState {
+    visiblePropertyIds?: string[];
+    [key: string]: unknown;
+}
+export interface MtCollectionLayoutSettingsProps<T extends MtCollectionEntry> {
+    currentView: MtCollectionView<T>;
+    properties: MtCollectionProperty[];
+    viewSettings: MtCollectionViewSettingsState;
+    setViewSettings: (settings: Partial<MtCollectionViewSettingsState>) => void;
+    setCurrentView: (view: MtCollectionView<T> | null) => void;
+}
+export type MtCollectionLayoutComponent<T extends MtCollectionEntry = MtCollectionEntry> = React.FC<MtCollectionLayoutProps<T>> & {
+    SettingsMenu?: (props: MtCollectionLayoutSettingsProps<T>) => React.ReactElement | null;
+    ToolbarActions?: React.ComponentType;
+};
+/**
+ * Determines how a collection is filtered and sorted.
+ * Views are meant to be stored in database and be selectable, and configurable by the user.
+ */
+export interface MtCollectionView<T extends MtCollectionEntry> {
+    id: string;
+    name: string;
+    icon?: string;
+    layout: MtCollectionLayoutComponent<T>;
+    groupBy?: string | null;
+    settings?: MtCollectionViewSettingsState;
+    /** Custom entry renderer for this specific view. Overrides the collection-level renderEntry. */
+    renderEntry?: MtCollectionEntryRenderer<T>;
+}
+/**
+ * Render prop for a single entry. Layouts delegate rendering to this component.
+ */
+export type MtCollectionEntryRenderer<T extends MtCollectionEntry> = React.ComponentType<{
+    entry: T;
+}>;
+/**
+ * MtCollectionLayout determines how the collection is visually structured.
+ */
+export interface MtCollectionLayoutProps<T extends MtCollectionEntry> {
+    entries: T[];
+    groupBy?: string | null;
+    properties?: MtCollectionProperty[];
+    viewSettings?: MtCollectionViewSettingsState;
+    /** Custom renderer for each entry. Layouts should fall back to their own default if omitted. */
+    renderEntry?: MtCollectionEntryRenderer<T>;
+}
+/**
+ * Props for MtCollection component
+ */
+export interface MtCollectionProps<T extends MtCollectionEntry> {
+    entries: T[];
+    views: MtCollectionView<T>[];
+    properties?: MtCollectionProperty[];
+    /**  Undefined will render default toolbar, null will render no toolbar. */
+    toolbar?: ReactNode | null;
+    /** Default entry renderer applied to all views. View-level renderEntry takes precedence. */
+    renderEntry?: MtCollectionEntryRenderer<T>;
+    showViewSettings?: boolean;
+    viewSettings?: ReactNode;
+    className?: string;
+}
+/**
+ * MtCollection component: top-level collection container.
+ */
+export declare function MtCollection<T extends MtCollectionEntry>({ entries, views, properties, toolbar, renderEntry, showViewSettings, viewSettings, className, }: MtCollectionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/matter/experimental/collection/MtCollection.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/matter/experimental/collection/MtCollectionContext.d.ts

@@ -0,0 +1,32 @@
+import type { MtCollectionEntry, MtCollectionProperty, MtCollectionView } from './MtCollection';
+/**
+ * Context props for MtCollection.
+ * We use context here as I don’t want to assume anything
+ * about the structure of the views, layouts, or toolbars.
+ */
+interface MtCollectionContextProps<T extends MtCollectionEntry> {
+    entries: T[];
+    views: MtCollectionView<T>[];
+    currentView: MtCollectionView<T> | null;
+    showViewSettings: boolean;
+    setShowViewSettings: (show: boolean) => void;
+    viewSettingsPageId: string;
+    setViewSettingsPageId: (pageId: string) => void;
+    focusViewNameEditor: boolean;
+    setFocusViewNameEditor: (focus: boolean) => void;
+    openViewSettings: (pageId?: string, options?: {
+        focusViewNameEditor?: boolean;
+    }) => void;
+    properties: MtCollectionProperty[];
+    setProperties: (properties: MtCollectionProperty[]) => void;
+    setCurrentView: (view: MtCollectionView<T> | null) => void;
+    addView: (view: MtCollectionView<T>) => void;
+    updateView: (viewId: string, patch: Partial<MtCollectionView<T>>) => void;
+    deleteView: (viewId: string) => void;
+    hasCurrentViewUnsavedChanges: boolean;
+    saveCurrentViewAsDefault: () => void;
+    revertCurrentViewToDefault: () => void;
+}
+export declare const MtCollectionContext: import("react").Context<MtCollectionContextProps<any> | null>;
+export declare function useMtCollection<T extends MtCollectionEntry>(): MtCollectionContextProps<T>;
+export {};

package/dist/components/matter/experimental/collection/MtCollectionEntryControls.d.ts

@@ -0,0 +1,30 @@
+export type MtCollectionAssigneeOption = {
+    value: string;
+    label: string;
+};
+export declare function MtCollectionPriorityBadge({ priority }: {
+    priority?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MtPrioritySelect({ value, onChange }: {
+    value?: string;
+    onChange: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const MtPrioirtySelect: typeof MtPrioritySelect;
+export declare function MtStateSelect({ value, onChange }: {
+    value?: string;
+    onChange: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MtIssueTypeSelect({ value, onChange }: {
+    value?: string;
+    onChange: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MtCollectionSummaryInput({ value, onChange, placeholder, }: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MtCollectionAssigneeDropdown({ assignee, options, onChange, }: {
+    assignee?: string;
+    options: MtCollectionAssigneeOption[];
+    onChange: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/matter/experimental/collection/MtCollectionEntryUtils.d.ts

@@ -0,0 +1,27 @@
+import type { MtFilterGroup } from '../../MtFilter';
+import type { MtSortRule } from '../../MtSort';
+type MtCollectionLegacyFilterState = {
+    query?: string;
+    status?: string[];
+    priority?: string[];
+    assignee?: string[];
+};
+export type MtCollectionQuickFilterState = {
+    status?: string[];
+    assignee?: string[];
+    search?: string;
+};
+export type MtCollectionFilterState = MtFilterGroup | MtCollectionLegacyFilterState;
+export declare function getCollectionEntryId(entry: any): string;
+export declare function getCollectionEntrySummary(entry: any): any;
+export declare function getCollectionEntryPriority(entry: any): any;
+export declare function getCollectionEntryAssignee(entry: any): any;
+export declare function toggleCollectionFilterValue(values: string[] | undefined, value: string): string[];
+export declare function getUniqueEntryValues(entries: any[], key: string): string[];
+export declare function applyCollectionFilters(entries: any[], filterState: MtCollectionFilterState | undefined): any[];
+export declare function getDefaultCollectionFilter(): MtFilterGroup;
+export declare function getCollectionFilterRuleCount(filterState: MtCollectionFilterState | undefined): number;
+export declare function isCollectionFilterActive(filterState: MtCollectionFilterState | undefined): boolean;
+export declare function applyCollectionSort(entries: any[], sortRules: MtSortRule[] | undefined, fallbackSortBy?: string): any[];
+export declare function applyCollectionQuickFilters(entries: any[], quickFilters: MtCollectionQuickFilterState | undefined): any[];
+export {};

package/dist/components/matter/experimental/collection/MtCollectionTaskListEntry.d.ts

@@ -0,0 +1,10 @@
+type MtCollectionTaskListEntryProps = {
+    entry: any;
+    visiblePropertySet: Set<string>;
+    onSummaryChange?: (nextSummary: string) => void;
+    onPriorityChange?: (nextPriority: string) => void;
+    onStatusChange?: (nextStatus: string) => void;
+    onIssueTypeChange?: (nextType: string) => void;
+};
+export declare function MtCollectionTaskListEntry({ entry, visiblePropertySet, onSummaryChange, onPriorityChange, onStatusChange, onIssueTypeChange, }: MtCollectionTaskListEntryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/matter/experimental/collection/MtCollectionToolbar.d.ts

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