moduix 0.6.5 → 0.8.0

package/README.md

@@ -1,18 +1,53 @@
+![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/apps/docs/public/banner.png)
+
+[![npm](https://img.shields.io/npm/v/moduix?logo=npm&label=npm)](https://www.npmjs.com/package/moduix)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![Turborepo](https://img.shields.io/badge/Monorepo-Turborepo-EF4444)](https://turbo.build/)
+
 # moduix
 
-Ready-made React components for product interfaces. The library is built on top of Base UI primitives and follows a composition-first API strongly inspired by shadcn/ui: you assemble small named parts, keep behavior accessible, and customize styles through props, `className`, and CSS variables. Styles are written in native CSS with CSS Modules, so the package ships framework-agnostic component CSS without requiring a utility CSS runtime.
+Composable React components for product interfaces, built on top of
+[Base UI](https://base-ui.com/) primitives.
+
+moduix gives you ready-made components with accessible behavior, native CSS styles, and a
+composition-first API. It is inspired by the clarity of
+[shadcn/ui](https://ui.shadcn.com/), and it is trying to combine two useful workflows: install
+components as a regular npm package when that fits your project, or copy component source when
+you need direct ownership.
+
+## Why It Exists
+
+moduix started as an internal tool for shared product UI. We needed a component library that
+was practical enough for real application screens, predictable enough to use across teams, and
+small enough to stay easy to understand.
+
+The library is now public because it may be useful outside of the original company context. If
+it helps another team build consistent interfaces faster, that is already a good outcome.
 
-## Website
+## Principles
 
-The live documentation is temporarily available at https://moduix.blinks44.workers.dev/.
+- **Base UI underneath.** Components are built on accessible Base UI primitives instead of
+  reimplementing low-level interaction behavior.
+- **Small dependency surface.** Base UI is the only external UI primitive layer. The package
+  keeps the runtime stack intentionally small and does not bring a styling framework with it.
+- **Two installation paths.** Use moduix as an npm package, or copy component source into your
+  project when direct ownership is more important than package-managed updates.
+- **Composable API.** Components are exposed as named parts, so complex UI can be assembled
+  without hiding important structure.
+- **Native CSS.** Styles are distributed as CSS, use CSS custom properties, and are designed to
+  work with your existing styling approach.
+- **Not a shadcn/ui competitor.** shadcn/ui is a major inspiration for the developer experience.
+  moduix explores whether package-managed components and copy-owned components can coexist in
+  one library.
 
-## Install
+## Installation
 
 ```bash
 npm install moduix @base-ui/react
 ```
 
-`react`, `react-dom`, and `@base-ui/react` are peer dependencies. They stay in your application bundle, so the library does not ship duplicate React or Base UI runtimes.
+`react`, `react-dom`, and `@base-ui/react` are peer dependencies. They stay in your application
+bundle, so moduix does not ship duplicate React or Base UI runtimes.
 
 ## Usage
 
@@ -22,7 +57,7 @@ Import the library styles once in your application entry point:
 import 'moduix/style.css';
 ```
 
-Then import the components you need:
+Then import and compose the components you need:
 
 ```tsx
 import { Button, Dialog, DialogContent, DialogTitle, DialogTrigger } from 'moduix';
@@ -39,11 +74,13 @@ export function Example() {
 }
 ```
 
-The CSS file includes component styles and design tokens. It does not include global reset or application-level base styles, so those stay under the consuming project's control. If your bundler supports CSS imports from JavaScript, styles are also referenced by the library entry, but explicit `moduix/style.css` import is the most predictable setup for apps, SSR, and tests.
+The distributed stylesheet includes component styles and design tokens. It does not force a
+global application theme or utility CSS runtime.
 
 ## Styling
 
-Components expose stable `data-slot` attributes and accept `className` where customization is expected. Theme values are regular CSS custom properties:
+Components accept `className` where customization is expected and expose stable `data-slot`
+attributes for targeted styling. Theme values are regular CSS custom properties:
 
 ```css
 :root {
@@ -52,17 +89,37 @@ Components expose stable `data-slot` attributes and accept `className` where cus
 }
 ```
 
-The distributed stylesheet uses CSS cascade layers:
+Library CSS is organized with cascade layers:
 
 ```css
 @layer ui.reset, ui.tokens, ui.components;
 ```
 
-This keeps library styles predictable while still letting application styles override tokens or component classes.
+This keeps defaults predictable while still letting application styles override tokens,
+classes, or component-level variables.
+
+## What Is Included
+
+The package exports composed components for common product UI needs, including Accordion,
+AlertDialog, Autocomplete, Avatar, Button, Checkbox, Dialog, Drawer, Field, Form, Input,
+Menu, NavigationMenu, Popover, Select, Tabs, Toast, Tooltip, and supporting primitives.
+
+## Documentation
+
+- Documentation: https://moduix.blinks44.workers.dev/
+- npm package: https://www.npmjs.com/package/moduix
+- UI package README: `packages/ui/README.md`
+- Docs app README: `apps/docs/README.md`
+
+## Repository Quick Start
 
-## What is included
+From the monorepo root:
 
-The package exports composed components for common UI needs: Accordion, AlertDialog, Autocomplete, Avatar, Button, Checkbox, Dialog, Drawer, Field, Form, Input, Menu, NavigationMenu, Popover, Select, Tabs, Toast, Tooltip, and more. It also exports small shared primitives such as icons and close buttons.
+```bash
+npm install
+npm run build:ui
+npm run dev
+```
 
 ## Acknowledgements
 
@@ -76,16 +133,36 @@ This project could not exist without the work of these teams and communities:
 - [TanStack](https://tanstack.com/) for the application tooling used by the docs.
 - [Voidzero](https://voidzero.dev/) for awesome JS tools
 
-## Publishing Checklist
+## Contributing
 
-Before publishing a new version:
+Contributions are welcome, especially bug reports, accessibility fixes, documentation
+improvements, and focused component improvements.
 
-```bash
-npm run fmt
-npm run lint
-npm run tsc:check
-npm run build -w packages/ui
-npm pack --dry-run -w packages/ui
-```
+Before opening a pull request:
+
+1. Install dependencies from the repository root:
+
+   ```bash
+   npm install
+   ```
+
+2. Build the UI package when your change affects `packages/ui` or documentation examples:
+
+   ```bash
+   npm run build:ui
+   ```
+
+3. Run the required checks:
+
+   ```bash
+   npm run fmt:fix
+   npm run lint:check
+   npm run tsc:check
+   ```
+
+Keep pull requests small and specific. For component changes, update the related stories,
+exports, and documentation so the package and docs stay in sync.
 
-Check that the tarball contains `dist/index.js`, `dist/index.cjs`, `dist/index.d.ts`, `dist/index.css`, `package.json`, and this README.
+Feel free to use agents or code generation tools, but
+please review the result before submitting. The components are intentionally small and direct,
+so the goal is to keep the code readable, maintainable, and free from unnecessary abstractions.

package/dist/components/Accordion/Accordion.d.ts

@@ -3,15 +3,40 @@ import * as React from 'react';
 declare function Accordion<Value = unknown>({ className, ...props }: AccordionProps<Value>): import("react/jsx-runtime").JSX.Element;
 declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
 declare function AccordionHeader({ className, ...props }: AccordionPrimitive.Header.Props): import("react/jsx-runtime").JSX.Element;
-declare function AccordionTrigger({ className, ...props }: AccordionPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, icon, hideIcon, classNames, slotProps, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function AccordionTriggerIcon({ className, children, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
 declare function AccordionPanel({ className, ...props }: AccordionPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
 type AccordionProps<Value = unknown> = AccordionPrimitive.Root.Props<Value>;
 type AccordionValue<Value = unknown> = AccordionPrimitive.Root.Value<Value>;
 type AccordionItemProps = AccordionPrimitive.Item.Props;
 type AccordionHeaderProps = AccordionPrimitive.Header.Props;
-type AccordionTriggerProps = AccordionPrimitive.Trigger.Props;
 type AccordionTriggerIconProps = React.ComponentProps<'span'>;
 type AccordionPanelProps = AccordionPrimitive.Panel.Props;
+type AccordionTriggerClassNames = {
+    header?: AccordionHeaderProps['className'];
+    icon?: AccordionTriggerIconProps['className'];
+};
+type AccordionTriggerSlotProps = {
+    header?: Omit<AccordionHeaderProps, 'children' | 'className'>;
+    icon?: Omit<AccordionTriggerIconProps, 'children' | 'className'>;
+};
+type AccordionTriggerProps = AccordionPrimitive.Trigger.Props & {
+    /**
+     * Icon rendered at the end of the trigger. Pass `hideIcon` to remove it.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Removes the default trigger icon.
+     */
+    hideIcon?: boolean;
+    /**
+     * Classes for internal slots rendered by the trigger.
+     */
+    classNames?: AccordionTriggerClassNames;
+    /**
+     * Props for internal slots rendered by the trigger.
+     */
+    slotProps?: AccordionTriggerSlotProps;
+};
 export { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTriggerIcon, AccordionPanel, };
-export type { AccordionValue, AccordionProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionTriggerIconProps, AccordionPanelProps, };
+export type { AccordionValue, AccordionProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionTriggerIconProps, AccordionPanelProps, AccordionTriggerClassNames, AccordionTriggerSlotProps, };

package/dist/components/Accordion/index.d.ts

@@ -1,2 +1,2 @@
 export { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTriggerIcon, AccordionPanel, } from './Accordion';
-export type { AccordionValue, AccordionProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionTriggerIconProps, AccordionPanelProps, } from './Accordion';
+export type { AccordionValue, AccordionProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionTriggerClassNames, AccordionTriggerSlotProps, AccordionTriggerIconProps, AccordionPanelProps, } from './Accordion';

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -5,14 +5,17 @@ type AlertDialogContentClassNames = {
     backdrop?: AlertDialogPrimitive.Backdrop.Props['className'];
     viewport?: AlertDialogPrimitive.Viewport.Props['className'];
 };
+type AlertDialogContentSlotProps = {
+    portal?: Omit<AlertDialogPrimitive.Portal.Props, 'className' | 'children'>;
+    backdrop?: Omit<AlertDialogPrimitive.Backdrop.Props, 'className'>;
+    viewport?: Omit<AlertDialogPrimitive.Viewport.Props, 'className'>;
+};
 type AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, 'className'> & {
     className?: AlertDialogPrimitive.Popup.Props['className'];
     classNames?: AlertDialogContentClassNames;
+    slotProps?: AlertDialogContentSlotProps;
     container?: AlertDialogPrimitive.Portal.Props['container'];
     withBackdrop?: boolean;
-    portalProps?: Omit<AlertDialogPrimitive.Portal.Props, 'className' | 'children'>;
-    backdropProps?: Omit<AlertDialogPrimitive.Backdrop.Props, 'className'>;
-    viewportProps?: Omit<AlertDialogPrimitive.Viewport.Props, 'className'>;
 };
 declare const AlertDialog: typeof AlertDialogPrimitive.Root;
 declare const createAlertDialogHandle: typeof AlertDialogPrimitive.createHandle;
@@ -21,7 +24,7 @@ declare function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.
 declare function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogClose({ className, ...props }: AlertDialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogCloseIcon({ className, children, ...props }: AlertDialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogContent({ className, classNames, container, withBackdrop, portalProps, backdropProps, viewportProps, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, classNames, slotProps, container, withBackdrop, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogBody({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
@@ -29,5 +32,15 @@ declare function AlertDialogAction({ className, ...props }: AlertDialogPrimitive
 declare function AlertDialogCancel({ className, ...props }: AlertDialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
 type AlertDialogProps<Payload = unknown> = AlertDialogPrimitive.Root.Props<Payload>;
 type AlertDialogHandle<Payload = unknown> = AlertDialogPrimitive.Handle<Payload>;
+type AlertDialogTriggerProps = AlertDialogPrimitive.Trigger.Props;
+type AlertDialogTitleProps = AlertDialogPrimitive.Title.Props;
+type AlertDialogDescriptionProps = AlertDialogPrimitive.Description.Props;
+type AlertDialogCloseProps = AlertDialogPrimitive.Close.Props;
+type AlertDialogCloseIconProps = AlertDialogPrimitive.Close.Props;
+type AlertDialogHeaderProps = React.ComponentProps<'div'>;
+type AlertDialogBodyProps = React.ComponentProps<'div'>;
+type AlertDialogFooterProps = React.ComponentProps<'div'>;
+type AlertDialogActionProps = AlertDialogPrimitive.Close.Props;
+type AlertDialogCancelProps = AlertDialogPrimitive.Close.Props;
 export { AlertDialog, createAlertDialogHandle, AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, AlertDialogCloseIcon, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, };
-export type { AlertDialogProps, AlertDialogHandle, AlertDialogContentProps, AlertDialogContentClassNames, };
+export type { AlertDialogProps, AlertDialogHandle, AlertDialogTriggerProps, AlertDialogTitleProps, AlertDialogDescriptionProps, AlertDialogCloseProps, AlertDialogCloseIconProps, AlertDialogContentProps, AlertDialogContentClassNames, AlertDialogContentSlotProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogActionProps, AlertDialogCancelProps, };

package/dist/components/AlertDialog/index.d.ts

@@ -1,2 +1,2 @@
 export { AlertDialog, createAlertDialogHandle, AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, AlertDialogCloseIcon, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, } from './AlertDialog';
-export type { AlertDialogProps, AlertDialogHandle, AlertDialogContentProps, AlertDialogContentClassNames, } from './AlertDialog';
+export type { AlertDialogProps, AlertDialogHandle, AlertDialogTriggerProps, AlertDialogTitleProps, AlertDialogDescriptionProps, AlertDialogCloseProps, AlertDialogCloseIconProps, AlertDialogContentProps, AlertDialogContentClassNames, AlertDialogContentSlotProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogActionProps, AlertDialogCancelProps, } from './AlertDialog';

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -48,5 +48,29 @@ declare const useAutocompleteFilter: typeof import('@base-ui/react/internals/fil
 declare const useAutocompleteFilteredItems: typeof AutocompletePrimitive.useFilteredItems;
 type AutocompleteProps<Value = unknown> = AutocompletePrimitive.Root.Props<Value>;
 type AutocompleteValueType<Value = unknown> = AutocompleteProps<Value>['value'];
+type AutocompleteFieldProps = React.ComponentProps<'div'>;
+type AutocompleteInlineInputContainerProps = React.ComponentProps<'div'>;
+type AutocompleteFieldLabelProps = React.ComponentProps<'label'>;
+type AutocompleteValueProps = AutocompletePrimitive.Value.Props;
+type AutocompleteInputGroupProps = AutocompletePrimitive.InputGroup.Props;
+type AutocompleteInputProps = AutocompletePrimitive.Input.Props;
+type AutocompleteControlActionsProps = React.ComponentProps<'div'>;
+type AutocompleteTriggerProps = AutocompletePrimitive.Trigger.Props;
+type AutocompleteFieldTriggerProps = AutocompletePrimitive.Trigger.Props;
+type AutocompleteIconProps = AutocompletePrimitive.Icon.Props;
+type AutocompleteClearProps = AutocompletePrimitive.Clear.Props;
+type AutocompleteStatusProps = AutocompletePrimitive.Status.Props;
+type AutocompleteEmptyProps = AutocompletePrimitive.Empty.Props;
+type AutocompleteListProps = AutocompletePrimitive.List.Props;
+type AutocompleteRowProps = AutocompletePrimitive.Row.Props;
+type AutocompleteItemProps = AutocompletePrimitive.Item.Props;
+type AutocompleteItemTextProps = React.ComponentProps<'span'>;
+type AutocompleteItemTextContentProps = React.ComponentProps<'span'>;
+type AutocompleteItemTextIconProps = React.ComponentProps<'span'>;
+type AutocompleteItemTextLabelProps = React.ComponentProps<'span'>;
+type AutocompleteSeparatorProps = AutocompletePrimitive.Separator.Props;
+type AutocompleteGroupProps = AutocompletePrimitive.Group.Props;
+type AutocompleteGroupLabelProps = AutocompletePrimitive.GroupLabel.Props;
+type AutocompleteCollectionProps = AutocompletePrimitive.Collection.Props;
 export { Autocomplete, AutocompleteField, AutocompleteInlineInputContainer, AutocompleteFieldLabel, AutocompleteValue, AutocompleteInputGroup, AutocompleteInput, AutocompleteControlActions, AutocompleteTrigger, AutocompleteFieldTrigger, AutocompleteIcon, AutocompleteClear, AutocompleteContent, AutocompleteStatus, AutocompleteEmpty, AutocompleteList, AutocompleteRow, AutocompleteItem, AutocompleteItemText, AutocompleteItemTextContent, AutocompleteItemTextIcon, AutocompleteItemTextLabel, AutocompleteSeparator, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteCollection, useAutocompleteAnchor, useAutocompleteFilter, useAutocompleteFilteredItems, };
-export type { AutocompleteProps, AutocompleteValueType, AutocompleteContentClassNames, AutocompleteContentProps, };
+export type { AutocompleteProps, AutocompleteValueType, AutocompleteContentClassNames, AutocompleteContentProps, AutocompleteFieldProps, AutocompleteInlineInputContainerProps, AutocompleteFieldLabelProps, AutocompleteValueProps, AutocompleteInputGroupProps, AutocompleteInputProps, AutocompleteControlActionsProps, AutocompleteTriggerProps, AutocompleteFieldTriggerProps, AutocompleteIconProps, AutocompleteClearProps, AutocompleteStatusProps, AutocompleteEmptyProps, AutocompleteListProps, AutocompleteRowProps, AutocompleteItemProps, AutocompleteItemTextProps, AutocompleteItemTextContentProps, AutocompleteItemTextIconProps, AutocompleteItemTextLabelProps, AutocompleteSeparatorProps, AutocompleteGroupProps, AutocompleteGroupLabelProps, AutocompleteCollectionProps, };

package/dist/components/Autocomplete/index.d.ts

@@ -1,2 +1,2 @@
 export { Autocomplete, AutocompleteField, AutocompleteInlineInputContainer, AutocompleteFieldLabel, AutocompleteValue, AutocompleteInputGroup, AutocompleteInput, AutocompleteControlActions, AutocompleteTrigger, AutocompleteFieldTrigger, AutocompleteIcon, AutocompleteClear, AutocompleteContent, AutocompleteStatus, AutocompleteEmpty, AutocompleteList, AutocompleteRow, AutocompleteItem, AutocompleteItemText, AutocompleteItemTextContent, AutocompleteItemTextIcon, AutocompleteItemTextLabel, AutocompleteSeparator, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteCollection, useAutocompleteAnchor, useAutocompleteFilter, useAutocompleteFilteredItems, } from './Autocomplete';
-export type { AutocompleteProps, AutocompleteValueType, AutocompleteContentClassNames, AutocompleteContentProps, } from './Autocomplete';
+export type { AutocompleteProps, AutocompleteValueType, AutocompleteContentClassNames, AutocompleteContentProps, AutocompleteFieldProps, AutocompleteInlineInputContainerProps, AutocompleteFieldLabelProps, AutocompleteValueProps, AutocompleteInputGroupProps, AutocompleteInputProps, AutocompleteControlActionsProps, AutocompleteTriggerProps, AutocompleteFieldTriggerProps, AutocompleteIconProps, AutocompleteClearProps, AutocompleteStatusProps, AutocompleteEmptyProps, AutocompleteListProps, AutocompleteRowProps, AutocompleteItemProps, AutocompleteItemTextProps, AutocompleteItemTextContentProps, AutocompleteItemTextIconProps, AutocompleteItemTextLabelProps, AutocompleteSeparatorProps, AutocompleteGroupProps, AutocompleteGroupLabelProps, AutocompleteCollectionProps, } from './Autocomplete';

package/dist/components/Bleed/Bleed.d.ts

@@ -7,7 +7,8 @@ type BleedOwnProps<As extends BleedAs = 'div'> = {
     inline?: BleedInline;
     block?: BleedBlock;
 };
-type BleedProps<As extends BleedAs = 'div'> = BleedOwnProps<As> & Omit<React.ComponentPropsWithoutRef<As>, keyof BleedOwnProps<As>>;
-declare function Bleed<As extends BleedAs = 'div'>({ as, inline, block, className, ...props }: BleedProps<As>): import("react/jsx-runtime").JSX.Element;
+type BleedProps<As extends BleedAs = 'div'> = BleedOwnProps<As> & Omit<React.ComponentPropsWithRef<As>, keyof BleedOwnProps<As>>;
+type BleedComponent = <As extends BleedAs = 'div'>(props: BleedProps<As>) => React.ReactElement | null;
+declare const Bleed: BleedComponent;
 export { Bleed };
 export type { BleedProps, BleedAs, BleedInline, BleedBlock };

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,43 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import * as React from 'react';
+type BreadcrumbsItemRenderProps = Omit<React.ComponentProps<'a'>, 'children'> & {
+    children: React.ReactNode;
+};
+type BreadcrumbsItem = {
+    key?: React.Key;
+    label: React.ReactNode;
+    href?: string;
+    target?: React.ComponentProps<'a'>['target'];
+    rel?: React.ComponentProps<'a'>['rel'];
+    onClick?: React.ComponentProps<'a'>['onClick'];
+    render?: (props: BreadcrumbsItemRenderProps) => React.ReactElement;
+};
+type BreadcrumbsClassNames = {
+    ellipsisTrigger?: MenuPrimitive.Trigger.Props['className'];
+    popup?: MenuPrimitive.Popup.Props['className'];
+    popupItem?: MenuPrimitive.Item.Props['className'];
+    portal?: MenuPrimitive.Portal.Props['className'];
+    positioner?: MenuPrimitive.Positioner.Props['className'];
+};
+type BreadcrumbsSlotProps = {
+    ellipsisTrigger?: Omit<MenuPrimitive.Trigger.Props, 'children' | 'className'>;
+    popup?: Omit<MenuPrimitive.Popup.Props, 'children' | 'className'>;
+    popupItem?: Omit<MenuPrimitive.Item.Props, 'children' | 'className'>;
+    popupLinkItem?: Omit<MenuPrimitive.LinkItem.Props, 'children' | 'className' | 'href' | 'render'>;
+    portal?: Omit<MenuPrimitive.Portal.Props, 'children' | 'className'>;
+    positioner?: Omit<MenuPrimitive.Positioner.Props, 'children' | 'className'>;
+};
+type BreadcrumbsProps = Omit<React.ComponentProps<'nav'>, 'children'> & {
+    items: BreadcrumbsItem[];
+    separator?: React.ReactNode;
+    maxItems?: number;
+    itemsBeforeCollapse?: number;
+    itemsAfterCollapse?: number;
+    ellipsisLabel?: React.ReactNode;
+    hiddenItemsMenuLabel?: string;
+    classNames?: BreadcrumbsClassNames;
+    slotProps?: BreadcrumbsSlotProps;
+};
+declare function Breadcrumbs({ className, items, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse, ellipsisLabel, hiddenItemsMenuLabel, classNames, slotProps, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumbs };
+export type { BreadcrumbsProps, BreadcrumbsItem, BreadcrumbsItemRenderProps, BreadcrumbsClassNames, BreadcrumbsSlotProps, };

package/dist/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbsItem, BreadcrumbsItemRenderProps, BreadcrumbsClassNames, BreadcrumbsSlotProps, } from './Breadcrumbs';

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

@@ -2,19 +2,24 @@ import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import * as React from 'react';
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type CheckboxClassNames = {
-    indicator?: string;
+    indicator?: CheckboxIndicatorProps['className'];
     indicatorIcon?: string;
     checkedIcon?: string;
     indeterminateIcon?: string;
 };
+type CheckboxSlotProps = {
+    indicator?: Omit<CheckboxIndicatorProps, 'children' | 'className'>;
+    indicatorIcon?: Omit<CheckboxIndicatorIconProps, 'checkedIcon' | 'children' | 'className'>;
+};
 type CheckboxProps = CheckboxPrimitive.Root.Props & {
     size?: CheckboxSize;
     indicator?: React.ReactNode;
     checkedIcon?: React.ReactNode;
     indeterminateIcon?: React.ReactNode;
     classNames?: CheckboxClassNames;
+    slotProps?: CheckboxSlotProps;
 };
-declare function Checkbox({ className, size, children, indicator, checkedIcon, indeterminateIcon, classNames, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Checkbox({ className, size, children, indicator, checkedIcon, indeterminateIcon, classNames, slotProps, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 type CheckboxIndicatorProps = CheckboxPrimitive.Indicator.Props & {
     checkedIcon?: React.ReactNode;
     checkedIconClassName?: string;
@@ -32,6 +37,10 @@ declare function CheckboxIndicatorIcon({ className, checkedIcon, checkedIconClas
 type CheckboxFieldProps = React.ComponentProps<'label'>;
 declare function CheckboxField({ className, ...props }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
 type CheckboxLabelProps = React.ComponentProps<'span'>;
+type CheckboxState = CheckboxPrimitive.Root.State;
+type CheckboxIndicatorState = CheckboxPrimitive.Indicator.State;
+type CheckboxChangeEventReason = CheckboxPrimitive.Root.ChangeEventReason;
+type CheckboxChangeEventDetails = CheckboxPrimitive.Root.ChangeEventDetails;
 declare function CheckboxLabel({ className, ...props }: CheckboxLabelProps): import("react/jsx-runtime").JSX.Element;
 export { Checkbox, CheckboxIndicator, CheckboxIndicatorIcon, CheckboxField, CheckboxLabel };
-export type { CheckboxSize, CheckboxClassNames, CheckboxProps, CheckboxIndicatorProps, CheckboxIndicatorIconProps, CheckboxFieldProps, CheckboxLabelProps, };
+export type { CheckboxSize, CheckboxClassNames, CheckboxSlotProps, CheckboxProps, CheckboxIndicatorProps, CheckboxIndicatorIconProps, CheckboxFieldProps, CheckboxLabelProps, CheckboxState, CheckboxIndicatorState, CheckboxChangeEventReason, CheckboxChangeEventDetails, };

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

@@ -1,2 +1,2 @@
 export { Checkbox, CheckboxIndicator, CheckboxIndicatorIcon, CheckboxField, CheckboxLabel, } from './Checkbox';
-export type { CheckboxSize, CheckboxClassNames, CheckboxProps, CheckboxIndicatorProps, CheckboxIndicatorIconProps, CheckboxFieldProps, CheckboxLabelProps, } from './Checkbox';
+export type { CheckboxSize, CheckboxClassNames, CheckboxSlotProps, CheckboxProps, CheckboxIndicatorProps, CheckboxIndicatorIconProps, CheckboxFieldProps, CheckboxLabelProps, CheckboxState, CheckboxIndicatorState, CheckboxChangeEventReason, CheckboxChangeEventDetails, } from './Checkbox';

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

@@ -9,9 +9,12 @@ type CheckboxGroupItemControlProps = CheckboxProps;
 declare function CheckboxGroupItemControl(props: CheckboxGroupItemControlProps): import("react/jsx-runtime").JSX.Element;
 declare function CheckboxGroupItemLabel({ className, ...props }: CheckboxGroupItemLabelProps): import("react/jsx-runtime").JSX.Element;
 type CheckboxGroupProps = CheckboxGroupPrimitive.Props;
+type CheckboxGroupState = CheckboxGroupPrimitive.State;
+type CheckboxGroupChangeEventReason = CheckboxGroupPrimitive.ChangeEventReason;
+type CheckboxGroupChangeEventDetails = CheckboxGroupPrimitive.ChangeEventDetails;
 type CheckboxGroupLabelProps = React.ComponentProps<'div'>;
 type CheckboxGroupListProps = React.ComponentProps<'div'>;
 type CheckboxGroupItemProps = React.ComponentProps<'label'>;
 type CheckboxGroupItemLabelProps = React.ComponentProps<'span'>;
 export { CheckboxGroup, CheckboxGroupLabel, CheckboxGroupList, CheckboxGroupItem, CheckboxGroupItemControl, CheckboxGroupItemLabel, };
-export type { CheckboxGroupProps, CheckboxGroupLabelProps, CheckboxGroupListProps, CheckboxGroupItemProps, CheckboxGroupItemControlProps, CheckboxGroupItemLabelProps, };
+export type { CheckboxGroupProps, CheckboxGroupState, CheckboxGroupChangeEventReason, CheckboxGroupChangeEventDetails, CheckboxGroupLabelProps, CheckboxGroupListProps, CheckboxGroupItemProps, CheckboxGroupItemControlProps, CheckboxGroupItemLabelProps, };

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

@@ -1,2 +1,2 @@
 export { CheckboxGroup, CheckboxGroupLabel, CheckboxGroupList, CheckboxGroupItem, CheckboxGroupItemControl, CheckboxGroupItemLabel, } from './CheckboxGroup';
-export type { CheckboxGroupProps, CheckboxGroupLabelProps, CheckboxGroupListProps, CheckboxGroupItemProps, CheckboxGroupItemControlProps, CheckboxGroupItemLabelProps, } from './CheckboxGroup';
+export type { CheckboxGroupProps, CheckboxGroupState, CheckboxGroupChangeEventReason, CheckboxGroupChangeEventDetails, CheckboxGroupLabelProps, CheckboxGroupListProps, CheckboxGroupItemProps, CheckboxGroupItemControlProps, CheckboxGroupItemLabelProps, } from './CheckboxGroup';

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

@@ -1,12 +1,35 @@
 import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
 import * as React from 'react';
 declare function Collapsible({ className, ...props }: CollapsiblePrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
-declare function CollapsibleTrigger({ className, ...props }: CollapsiblePrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger({ className, children, icon, hideIcon, classNames, slotProps, ...props }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function CollapsibleTriggerIcon({ className, children, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
 declare function CollapsiblePanel({ className, ...props }: CollapsiblePrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
 type CollapsibleProps = CollapsiblePrimitive.Root.Props;
-type CollapsibleTriggerProps = CollapsiblePrimitive.Trigger.Props;
 type CollapsibleTriggerIconProps = React.ComponentProps<'span'>;
 type CollapsiblePanelProps = CollapsiblePrimitive.Panel.Props;
+type CollapsibleTriggerClassNames = {
+    icon?: CollapsibleTriggerIconProps['className'];
+};
+type CollapsibleTriggerSlotProps = {
+    icon?: Omit<CollapsibleTriggerIconProps, 'children' | 'className'>;
+};
+type CollapsibleTriggerProps = CollapsiblePrimitive.Trigger.Props & {
+    /**
+     * Icon rendered at the start of the trigger. Pass `hideIcon` to remove it.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Removes the default trigger icon.
+     */
+    hideIcon?: boolean;
+    /**
+     * Classes for internal slots rendered by the trigger.
+     */
+    classNames?: CollapsibleTriggerClassNames;
+    /**
+     * Props for internal slots rendered by the trigger.
+     */
+    slotProps?: CollapsibleTriggerSlotProps;
+};
 export { Collapsible, CollapsibleTrigger, CollapsibleTriggerIcon, CollapsiblePanel };
-export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleTriggerIconProps, CollapsiblePanelProps, };
+export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleTriggerIconProps, CollapsiblePanelProps, CollapsibleTriggerClassNames, CollapsibleTriggerSlotProps, };

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

@@ -1,2 +1,2 @@
 export { Collapsible, CollapsibleTrigger, CollapsibleTriggerIcon, CollapsiblePanel, } from './Collapsible';
-export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleTriggerIconProps, CollapsiblePanelProps, } from './Collapsible';
+export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleTriggerIconProps, CollapsiblePanelProps, CollapsibleTriggerClassNames, CollapsibleTriggerSlotProps, } from './Collapsible';

package/dist/components/Combobox/Combobox.d.ts

@@ -58,5 +58,32 @@ declare const useComboboxFilter: typeof ComboboxPrimitive.useFilter;
 declare const useComboboxFilteredItems: typeof ComboboxPrimitive.useFilteredItems;
 type ComboboxProps<Value = unknown, Multiple extends boolean | undefined = false> = ComboboxPrimitive.Root.Props<Value, Multiple>;
 type ComboboxValueType<Value = unknown, Multiple extends boolean | undefined = false> = ComboboxProps<Value, Multiple>['value'];
+type ComboboxFieldProps = React.ComponentProps<'div'>;
+type ComboboxValueProps = ComboboxPrimitive.Value.Props;
+type ComboboxInputGroupProps = ComboboxPrimitive.InputGroup.Props;
+type ComboboxInputProps = ComboboxPrimitive.Input.Props;
+type ComboboxControlActionsProps = React.ComponentProps<'div'>;
+type ComboboxTriggerProps = ComboboxPrimitive.Trigger.Props;
+type ComboboxIconProps = ComboboxPrimitive.Icon.Props;
+type ComboboxClearProps = ComboboxPrimitive.Clear.Props;
+type ComboboxStatusProps = ComboboxPrimitive.Status.Props;
+type ComboboxEmptyProps = ComboboxPrimitive.Empty.Props;
+type ComboboxListProps = ComboboxPrimitive.List.Props;
+type ComboboxRowProps = ComboboxPrimitive.Row.Props;
+type ComboboxItemIndicatorProps = ComboboxPrimitive.ItemIndicator.Props;
+type ComboboxItemTextProps = React.ComponentProps<'span'>;
+type ComboboxItemTextContentProps = React.ComponentProps<'span'>;
+type ComboboxItemTextIconProps = React.ComponentProps<'span'>;
+type ComboboxItemTextLabelProps = React.ComponentProps<'span'>;
+type ComboboxSeparatorProps = ComboboxPrimitive.Separator.Props;
+type ComboboxGroupProps = ComboboxPrimitive.Group.Props;
+type ComboboxGroupLabelProps = ComboboxPrimitive.GroupLabel.Props;
+type ComboboxCollectionProps = ComboboxPrimitive.Collection.Props;
+type ComboboxInlineInputContainerProps = React.ComponentProps<'div'>;
+type ComboboxChipsProps = ComboboxPrimitive.Chips.Props;
+type ComboboxChipProps = ComboboxPrimitive.Chip.Props;
+type ComboboxChipRemoveProps = ComboboxPrimitive.ChipRemove.Props;
+type ComboboxChipTextProps = React.ComponentProps<'span'>;
+type ComboboxChipsInputProps = ComboboxPrimitive.Input.Props;
 export { Combobox, ComboboxField, ComboboxFieldLabel, ComboboxValue, ComboboxInputGroup, ComboboxInput, ComboboxControlActions, ComboboxTrigger, ComboboxIcon, ComboboxClear, ComboboxContent, ComboboxStatus, ComboboxEmpty, ComboboxList, ComboboxRow, ComboboxItem, ComboboxItemIndicator, ComboboxItemText, ComboboxItemTextContent, ComboboxItemTextIcon, ComboboxItemTextLabel, ComboboxSeparator, ComboboxGroup, ComboboxGroupLabel, ComboboxCollection, ComboboxInlineInputContainer, ComboboxChips, ComboboxChip, ComboboxChipRemove, ComboboxChipText, ComboboxChipsInput, useComboboxAnchor, useComboboxFilter, useComboboxFilteredItems, };
-export type { ComboboxProps, ComboboxValueType, ComboboxContentClassNames, ComboboxContentProps, ComboboxFieldLabelProps, };
+export type { ComboboxProps, ComboboxValueType, ComboboxContentClassNames, ComboboxContentProps, ComboboxFieldProps, ComboboxFieldLabelProps, ComboboxValueProps, ComboboxInputGroupProps, ComboboxInputProps, ComboboxControlActionsProps, ComboboxTriggerProps, ComboboxIconProps, ComboboxClearProps, ComboboxStatusProps, ComboboxEmptyProps, ComboboxListProps, ComboboxRowProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxItemTextContentProps, ComboboxItemTextIconProps, ComboboxItemTextLabelProps, ComboboxSeparatorProps, ComboboxGroupProps, ComboboxGroupLabelProps, ComboboxCollectionProps, ComboboxInlineInputContainerProps, ComboboxChipsProps, ComboboxChipProps, ComboboxChipRemoveProps, ComboboxChipTextProps, ComboboxChipsInputProps, };

package/dist/components/Combobox/index.d.ts

@@ -1,2 +1,2 @@
 export { Combobox, ComboboxField, ComboboxFieldLabel, ComboboxValue, ComboboxInputGroup, ComboboxInput, ComboboxControlActions, ComboboxTrigger, ComboboxIcon, ComboboxClear, ComboboxContent, ComboboxStatus, ComboboxEmpty, ComboboxList, ComboboxRow, ComboboxItem, ComboboxItemIndicator, ComboboxItemText, ComboboxItemTextContent, ComboboxItemTextIcon, ComboboxItemTextLabel, ComboboxSeparator, ComboboxGroup, ComboboxGroupLabel, ComboboxCollection, ComboboxInlineInputContainer, ComboboxChips, ComboboxChip, ComboboxChipRemove, ComboboxChipText, ComboboxChipsInput, useComboboxAnchor, useComboboxFilter, useComboboxFilteredItems, } from './Combobox';
-export type { ComboboxProps, ComboboxValueType, ComboboxContentClassNames, ComboboxContentProps, ComboboxFieldLabelProps, } from './Combobox';
+export type { ComboboxProps, ComboboxValueType, ComboboxContentClassNames, ComboboxContentProps, ComboboxFieldProps, ComboboxFieldLabelProps, ComboboxValueProps, ComboboxInputGroupProps, ComboboxInputProps, ComboboxControlActionsProps, ComboboxTriggerProps, ComboboxIconProps, ComboboxClearProps, ComboboxStatusProps, ComboboxEmptyProps, ComboboxListProps, ComboboxRowProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxItemTextContentProps, ComboboxItemTextIconProps, ComboboxItemTextLabelProps, ComboboxSeparatorProps, ComboboxGroupProps, ComboboxGroupLabelProps, ComboboxCollectionProps, ComboboxInlineInputContainerProps, ComboboxChipsProps, ComboboxChipProps, ComboboxChipRemoveProps, ComboboxChipTextProps, ComboboxChipsInputProps, } from './Combobox';

package/dist/components/Dialog/Dialog.d.ts

@@ -5,14 +5,17 @@ type DialogContentClassNames = {
     backdrop?: DialogPrimitive.Backdrop.Props['className'];
     viewport?: DialogPrimitive.Viewport.Props['className'];
 };
+type DialogContentSlotProps = {
+    portal?: Omit<DialogPrimitive.Portal.Props, 'className' | 'children'>;
+    backdrop?: Omit<DialogPrimitive.Backdrop.Props, 'className'>;
+    viewport?: Omit<DialogPrimitive.Viewport.Props, 'className'>;
+};
 type DialogContentProps = Omit<DialogPrimitive.Popup.Props, 'className'> & {
     className?: DialogPrimitive.Popup.Props['className'];
     classNames?: DialogContentClassNames;
+    slotProps?: DialogContentSlotProps;
     container?: DialogPrimitive.Portal.Props['container'];
     withBackdrop?: boolean;
-    portalProps?: Omit<DialogPrimitive.Portal.Props, 'className' | 'children'>;
-    backdropProps?: Omit<DialogPrimitive.Backdrop.Props, 'className'>;
-    viewportProps?: Omit<DialogPrimitive.Viewport.Props, 'className'>;
 };
 declare const Dialog: typeof DialogPrimitive.Root;
 declare const createDialogHandle: typeof DialogPrimitive.createHandle;
@@ -21,7 +24,7 @@ declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Prop
 declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
 declare function DialogClose({ className, ...props }: DialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
 declare function DialogCloseIcon({ className, children, ...props }: DialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, classNames, container, withBackdrop, portalProps, backdropProps, viewportProps, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, classNames, slotProps, container, withBackdrop, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function DialogBody({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
@@ -36,4 +39,4 @@ type DialogHeaderProps = React.ComponentProps<'div'>;
 type DialogBodyProps = React.ComponentProps<'div'>;
 type DialogFooterProps = React.ComponentProps<'div'>;
 export { Dialog, createDialogHandle, DialogTrigger, DialogTitle, DialogDescription, DialogClose, DialogCloseIcon, DialogContent, DialogHeader, DialogBody, DialogFooter, };
-export type { DialogProps, DialogHandle, DialogTriggerProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, DialogCloseIconProps, DialogContentProps, DialogContentClassNames, DialogHeaderProps, DialogBodyProps, DialogFooterProps, };
+export type { DialogProps, DialogHandle, DialogTriggerProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, DialogCloseIconProps, DialogContentProps, DialogContentClassNames, DialogContentSlotProps, DialogHeaderProps, DialogBodyProps, DialogFooterProps, };

package/dist/components/Dialog/index.d.ts

@@ -1,2 +1,2 @@
 export { Dialog, createDialogHandle, DialogTrigger, DialogTitle, DialogDescription, DialogClose, DialogCloseIcon, DialogContent, DialogHeader, DialogBody, DialogFooter, } from './Dialog';
-export type { DialogProps, DialogHandle, DialogTriggerProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, DialogCloseIconProps, DialogContentProps, DialogContentClassNames, DialogHeaderProps, DialogBodyProps, DialogFooterProps, } from './Dialog';
+export type { DialogProps, DialogHandle, DialogTriggerProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, DialogCloseIconProps, DialogContentProps, DialogContentClassNames, DialogContentSlotProps, DialogHeaderProps, DialogBodyProps, DialogFooterProps, } from './Dialog';