@rocket.chat/fuselage 0.6.3-dev.41 → 0.6.3-dev.410

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Rocket.Chat
+Copyright (c) 2021 Rocket.Chat
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,35 +1,112 @@
-<h1>@rocket.chat/fuselage</h1>
-<p>
-  <img alt="Version" src="https://img.shields.io/npm/v/@rocket.chat/fuselage.svg">
-  <a href="https://github.com/RocketChat/Rocket.Chat.Fuselage#readme" target="_blank"><img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" /></a>
-  <a href="https://github.com/RocketChat/Rocket.Chat.Fuselage/graphs/commit-activity" target="_blank"><img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" /></a>
-  <a href="https://rocketchat.github.io/Rocket.Chat.Fuselage" target="_blank"><img alt="Storybook" src="https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg" /></a>
-  <a href="https://circleci.com/gh/RocketChat/Rocket.Chat.Fuselage" target="_blank"><img alt="Build Status on CircleCI" src="https://circleci.com/gh/RocketChat/Rocket.Chat.Fuselage/tree/master.svg?style=svg&circle-token=4bf3c8af9bf96e1338430d1ba3ce0084a45d1647" /></a>
-  <a href="https://twitter.com/RocketChat" target="_blank"><img alt="Twitter: RocketChat" src="https://img.shields.io/twitter/follow/RocketChat.svg?style=social" /></a>
+<!--header-->
+
+<p align="center">
+  <a href="https://rocket.chat" title="Rocket.Chat">
+    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
+  </a>
 </p>
 
-### 🏠 [Homepage](https://rocket.chat/Rocket.Chat.Fuselage)
+# `@rocket.chat/fuselage`
+
+---
+
+[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons/v/next) ![react version](https://img.shields.io/npm/dependency-version/@rocket.chat/fuselage/peer/react?style=flat-square) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://rocketchat.github.io/Rocket.Chat.Fuselage/fuselage) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/fuselage?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/fuselage?style=flat-square)
+
+![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square) ![peer deps](https://img.shields.io/david/peer/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square) ![dev deps](https://img.shields.io/david/dev/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/fuselage?style=flat-square)
+
+<!--/header-->
 
 ## Install
 
+<!--install-->
+
+Firstly, install the peer dependencies (prerequisites):
+
+```sh
+npm i @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
+```
+
+Add `@rocket.chat/fuselage` as a dependency:
+
+```sh
+npm i @rocket.chat/fuselage
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/fuselage
+```
+
+<!--/install-->
+
+## Contributing
+
+<!--contributing(msg)-->
+
+Contributions, issues, and feature requests are welcome!<br />
+Feel free to check the [issues](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
+
+<!--/contributing(msg)-->
+
+### Building
+
+As this package dependends on others in this monorepo, before anything run the following at the root directory:
+
+<!--yarn(build)-->
+
+```sh
+yarn build
+```
+
+<!--/yarn(build)-->
+
+### Linting
+
+To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
+Before commiting, check if your code fits our style by running:
+
+<!--yarn(lint)-->
+
 ```sh
-npm install --save @rocket.chat/fuselage
+yarn lint
 ```
 
-## Author
+<!--/yarn(lint)-->
 
-👤 **Rocket.Chat**
+Some linter warnings and errors can be automatically fixed:
 
-* Twitter: [@RocketChat](https://twitter.com/RocketChat)
-* Github: [@RocketChat](https://github.com/RocketChat)
+<!--yarn(lint-and-fix)-->
 
-## 🤝 Contributing
+```sh
+yarn lint-and-fix
+```
 
-Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
+<!--/yarn(lint-and-fix)-->
 
-## Show your support
+### Running tests
 
-Give a ⭐️ if this project helped you!
+Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
+
+<!--yarn(test)-->
+
+```sh
+yarn test
+```
+
+<!--/yarn(test)-->
+
+### Component stories
+
+We develop and describe our visual components in the form of stories, manage by a tool called [Storybook](https://storybook.js.org/).
+To start developing with Storybook, run:
+
+<!--yarn(storybook)-->
+
+```sh
+yarn storybook
+```
 
-***
-_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
+<!--/yarn(storybook)-->

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

@@ -0,0 +1,22 @@
+import React, { ComponentProps, ReactElement, ReactNode } from 'react';
+import { Box } from '../Box';
+declare type AccordionProps = ComponentProps<typeof Box> & {
+    animated?: boolean;
+    children: ReactNode;
+};
+export declare function Accordion(props: AccordionProps): ReactElement<AccordionProps>;
+export declare namespace Accordion {
+    var Item: React.FC<{
+        className?: string | undefined;
+        defaultExpanded?: boolean | undefined;
+        disabled?: boolean | undefined;
+        expanded?: boolean | undefined;
+        tabIndex?: number | undefined;
+        title: React.ReactNode;
+        noncollapsible?: boolean | undefined;
+        onToggle?: ((e: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement, React.MouseEvent<Element, MouseEvent>>) => void) | undefined;
+        onToggleEnabled?: ((e: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement, React.MouseEvent<Element, MouseEvent>>) => void) | undefined;
+    }>;
+}
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAG7B,aAAK,cAAc,GAAG,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAAC,cAAc,CAAC,CAE7E;yBAFe,SAAS"}

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

@@ -0,0 +1,13 @@
+import { FC, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+export declare const AccordionItem: FC<{
+    className?: string;
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    expanded?: boolean;
+    tabIndex?: number;
+    title: ReactNode;
+    noncollapsible?: boolean;
+    onToggle?: (e: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent<HTMLElement>) => void;
+    onToggleEnabled?: (e: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent<HTMLElement>) => void;
+}>;
+//# sourceMappingURL=AccordionItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAChE,IAAI,CAAC;IACV,eAAe,CAAC,EAAE,CAChB,CAAC,EAAE,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAChE,IAAI,CAAC;CACX,CAkHA,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './Accordion';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,20 @@
+import { ElementType, FC } from 'react';
+
+import { Options } from '..';
+
+type AutoCompleteProps = Omit<ComponentProps<typeof Options>> & {
+  value: unknown[];
+  filter: string;
+  setFilter?: (filter: string) => void;
+  options?: { label: string; value: unknown }[];
+  renderItem?: ElementType;
+  renderSelected?: ElementType;
+  onChange: (value: unknown, action: 'remove' | undefined) => void;
+  getLabel?: (option: { label: string; value: unknown }) => string;
+  getValue?: (option: { label: string; value: unknown }) => unknown;
+  renderEmpty?: ElementType;
+  placeholder?: string;
+  error?: boolean;
+  disabled?: boolean;
+};
+export const AutoComplete: FC<AutoCompleteProps>;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,16 @@
+import { ComponentPropsWithoutRef, FC, DetailedHTMLProps, HTMLAttributes } from 'react';
+import { Box } from '..';
+declare type AvatarProps = Omit<ComponentPropsWithoutRef<typeof Box>, 'title' | 'size' | 'className'> & {
+    title?: string;
+    size?: 'x16' | 'x18' | 'x20' | 'x24' | 'x28' | 'x32' | 'x36' | 'x40' | 'x48' | 'x124' | 'x200' | 'x332';
+    rounded?: boolean;
+    objectFit?: boolean;
+    url: string;
+    className?: string;
+};
+export declare const Avatar: FC<AvatarProps> & {
+    Stack: typeof AvatarStack;
+};
+declare const AvatarStack: FC<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,wBAAwB,EACxB,EAAE,EACF,iBAAiB,EACjB,cAAc,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,GAAG,EAAE,MAAM,IAAI,CAAC;AAGzB,aAAK,WAAW,GAAG,IAAI,CACrB,wBAAwB,CAAC,OAAO,GAAG,CAAC,EACpC,OAAO,GAAG,MAAM,GAAG,WAAW,CAC/B,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EACD,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG;IACrC,KAAK,EAAE,OAAO,WAAW,CAAC;CA6B3B,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,EAAE,CACnB,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAIlE,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './Avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,12 @@
+import { ElementType } from 'react';
+declare type BadgeProps = {
+    is?: ElementType;
+    variant?: 'secondary' | 'primary' | 'danger' | 'warning' | 'ghost';
+    disabled?: boolean;
+    className?: string;
+    children?: any;
+    title?: any;
+};
+export declare function Badge({ is: Tag, variant, className, disabled, ...props }: BadgeProps): JSX.Element;
+export {};
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAI3C,aAAK,UAAU,GAAG;IAChB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,wBAAgB,KAAK,CAAC,EACpB,EAAE,EAAE,GAAY,EAChB,OAAqB,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,eAYZ"}

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

@@ -0,0 +1,2 @@
+export * from './Badge';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,15 @@
+import { AllHTMLAttributes, FC, ReactNode } from 'react';
+
+type BannerProps = {
+  inline?: boolean;
+  actionable?: boolean;
+  closeable?: boolean;
+  icon?: ReactNode;
+  title?: string;
+  variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+  onAction?: () => void;
+  onClose?: () => void;
+} & AllHTMLAttributes<HTMLElement>;
+const Banner: FC<BannerProps>;
+
+export = Banner;

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

@@ -0,0 +1,2 @@
+export { default } from './Banner';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Box/AnimatedVisibility/AnimatedVisibility.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+
+type AnimatedVisibilityProps = {
+  children: ReactNode;
+  visibility?: 'hidden' | 'visible' | 'hiding' | 'unhiding';
+};
+
+const AnimatedVisibility: {
+  (props: AnimatedVisibilityProps): ReactElement;
+  HIDDEN: 'hidden';
+  VISIBLE: 'visible';
+  HIDING: 'hiding';
+  UNHIDING: 'unhiding';
+};
+
+export = AnimatedVisibility;

package/dist/components/Box/AnimatedVisibility/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './AnimatedVisibility';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Box/AnimatedVisibility/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/AnimatedVisibility/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/Box/BoxTransforms.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BoxTransforms: import("react").Context<((props: any) => any) | null>;
+export declare const useBoxTransform: () => ((props: any) => any) | null;
+export declare const useComposedBoxTransform: (fn: (props: any) => any) => (props: any) => any;
+//# sourceMappingURL=BoxTransforms.d.ts.map

package/dist/components/Box/BoxTransforms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxTransforms.d.ts","sourceRoot":"","sources":["../../../src/components/Box/BoxTransforms.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa,mCAAiC,GAAG,KAAK,GAAG,SAAQ,CAAC;AAE/E,eAAO,MAAM,eAAe,iBAF+B,GAAG,KAAK,GAAG,QAER,CAAC;AAE/D,eAAO,MAAM,uBAAuB,eAAgB,GAAG,KAAK,GAAG,aAJJ,GAAG,KAAK,GAkBlE,CAAC"}

package/dist/components/Box/Flex/index.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react';
+
+type FlexContainerProps = {
+  children?: ReactNode;
+  inline?: boolean;
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  wrap?: 'no-wrap' | 'wrap' | 'wrap-reverse';
+  alignItems?: 'stretch' | 'start' | 'center' | 'end' | 'baseline';
+  alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+  justifyContent?:
+    | 'start'
+    | 'center'
+    | 'end'
+    | 'space-between'
+    | 'space-around';
+};
+
+type FlexItemProps = {
+  children?: ReactNode;
+  order?: number;
+  grow?: number;
+  shrink?: number;
+  basis?: number | string | 'auto';
+  align?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
+};
+
+const Flex: {
+  Container: (props: FlexContainerProps) => ReactElement;
+  Item: (props: FlexItemProps) => ReactElement;
+};
+
+export = Flex;

package/dist/components/Box/Position/Position.d.ts

@@ -0,0 +1,14 @@
+import { Placements, PositionOptions } from '@rocket.chat/fuselage-hooks';
+import { ComponentProps, FC, RefObject } from 'react';
+
+import { Box } from '..';
+
+type PositionProps = {
+  anchor?: RefObject<Element>;
+  placement?: Placements;
+  margin?: PositionOptions['margin'];
+} & ComponentProps<typeof Box>;
+
+declare const Position: FC<PositionProps>;
+
+export = Position;

package/dist/components/Box/Position/PositionAnimated.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps, FC } from 'react';
+
+import Position from '.';
+
+type PositionAnimatedProps = {
+  visible?: 'hidden' | 'visible' | 'hiding' | 'unhiding';
+} & ComponentProps<typeof Position>;
+
+declare const PositionAnimated: FC<PositionAnimatedProps>;
+
+export = PositionAnimated;

package/dist/components/Box/Position/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Position';
+export { default as PositionAnimated } from './PositionAnimated';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Box/Position/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Position/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Box/Scrollable/index.d.ts

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, PropsWithChildren } from 'react';
+
+type ScrollableProps = PropsWithChildren<{
+  horizontal?: boolean;
+  vertical?: boolean;
+  onScrollContent?: (touching: { top: boolean }) => void;
+  smooth?: boolean;
+}>;
+const Scrollable: ForwardRefExoticComponent<ScrollableProps>;
+export default Scrollable;

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

@@ -0,0 +1,186 @@
+import type { css } from '@rocket.chat/css-in-js';
+import {
+  AllHTMLAttributes,
+  CSSProperties,
+  ElementType,
+  ForwardRefExoticComponent,
+  PropsWithChildren,
+  ReactElement,
+  RefAttributes,
+  SVGAttributes,
+} from 'react';
+
+type Size = '1' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '32' | '40';
+
+type FontScale =
+  | 'hero'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'p1'
+  | 'p1m'
+  | 'p1b'
+  | 'p2'
+  | 'p2m'
+  | 'p2b'
+  | 'c1'
+  | 'c2'
+  | 'micro';
+
+type BoxProps<E extends HTMLElement> = PropsWithChildren<{
+  is?:
+    | ReactElement<E, string | JSXElementConstructor<E>>
+    | (ElementType<E> & string)
+    | string;
+  className?:
+    | string
+    | ReturnType<typeof css>
+    | (string | ReturnType<typeof css>)[];
+  style?: CSSProperties;
+  border?: CSSProperties['border'];
+  borderBlock?: CSSProperties['borderBlock'];
+  borderBlockStart?: CSSProperties['borderBlockStart'];
+  borderBlockEnd?: CSSProperties['borderBlockEnd'];
+  borderInline?: CSSProperties['borderInline'];
+  borderInlineStart?: CSSProperties['borderInlineStart'];
+  borderInlineEnd?: CSSProperties['borderInlineEnd'];
+  borderWidth?: CSSProperties['borderWidth'];
+  borderBlockWidth?: CSSProperties['borderBlockWidth'];
+  borderBlockStartWidth?: CSSProperties['borderBlockStartWidth'];
+  borderBlockEndWidth?: CSSProperties['borderBlockEndWidth'];
+  borderInlineWidth?: CSSProperties['borderInlineWidth'];
+  borderInlineStartWidth?: CSSProperties['borderInlineStartWidth'];
+  borderInlineEndWidth?: CSSProperties['borderInlineEndWidth'];
+  borderStyle?: CSSProperties['borderStyle'];
+  borderBlockStyle?: CSSProperties['borderBlockStyle'];
+  borderBlockStartStyle?: CSSProperties['borderBlockStartStyle'];
+  borderBlockEndStyle?: CSSProperties['borderBlockEndStyle'];
+  borderInlineStyle?: CSSProperties['borderInlineStyle'];
+  borderInlineStartStyle?: CSSProperties['borderInlineStartStyle'];
+  borderInlineEndStyle?: CSSProperties['borderInlineEndStyle'];
+  borderColor?: CSSProperties['borderColor'];
+  borderBlockColor?: CSSProperties['borderBlockColor'];
+  borderBlockStartColor?: CSSProperties['borderBlockStartColor'];
+  borderBlockEndColor?: CSSProperties['borderBlockEndColor'];
+  borderInlineColor?: CSSProperties['borderInlineColor'];
+  borderInlineStartColor?: CSSProperties['borderInlineStartColor'];
+  borderInlineEndColor?: CSSProperties['borderInlineEndColor'];
+  borderRadius?: CSSProperties['borderRadius'];
+  borderStartStartRadius?: CSSProperties['borderStartStartRadius'];
+  borderStartEndRadius?: CSSProperties['borderStartEndRadius'];
+  borderEndStartRadius?: CSSProperties['borderEndStartRadius'];
+  borderEndEndRadius?: CSSProperties['borderEndEndRadius'];
+
+  color?: CSSProperties['color'];
+  backgroundColor?: CSSProperties['backgroundColor'];
+  bg?: CSSProperties['backgroundColor'];
+  opacity?: CSSProperties['opacity'];
+
+  alignItems?: CSSProperties['alignItems'];
+  alignContent?: CSSProperties['alignContent'];
+  justifyItems?: CSSProperties['justifyItems'];
+  justifyContent?: CSSProperties['justifyContent'];
+  flexWrap?: CSSProperties['flexWrap'];
+  flexDirection?: CSSProperties['flexDirection'];
+  flexGrow?: CSSProperties['flexGrow'];
+  flexShrink?: CSSProperties['flexShrink'];
+  flexBasis?: CSSProperties['flexBasis'];
+  justifySelf?: CSSProperties['justifySelf'];
+  alignSelf?: CSSProperties['alignSelf'];
+  order?: CSSProperties['order'];
+
+  w?: CSSProperties['width'];
+  width?: CSSProperties['width'];
+  minWidth?: CSSProperties['minWidth'];
+  maxWidth?: CSSProperties['maxWidth'];
+  h?: CSSProperties['height'];
+  height?: CSSProperties['height'];
+  minHeight?: CSSProperties['minHeight'];
+  maxHeight?: CSSProperties['maxHeight'];
+  display?: CSSProperties['display'];
+  verticalAlign?: CSSProperties['verticalAlign'];
+  overflow?: CSSProperties['overflow'];
+  overflowX?: CSSProperties['overflowX'];
+  overflowY?: CSSProperties['overflowY'];
+
+  position?: CSSProperties['position'];
+  zIndex?: CSSProperties['zIndex'];
+  inset?: CSSProperties['inset'];
+  insetBlock?: CSSProperties['insetBlock'];
+  insetBlockStart?: CSSProperties['insetBlockStart'];
+  insetBlockEnd?: CSSProperties['insetBlockEnd'];
+  insetInline?: CSSProperties['insetInline'];
+  insetInlineStart?: CSSProperties['insetInlineStart'];
+  insetInlineEnd?: CSSProperties['insetInlineEnd'];
+
+  m?: CSSProperties['margin'];
+  margin?: CSSProperties['margin'];
+  mb?: CSSProperties['marginBlock'];
+  marginBlock?: CSSProperties['marginBlock'];
+  mbs?: CSSProperties['marginBlockStart'];
+  marginBlockStart?: CSSProperties['marginBlockStart'];
+  mbe?: CSSProperties['marginBlockEnd'];
+  marginBlockEnd?: CSSProperties['marginBlockEnd'];
+  mi?: CSSProperties['marginInline'];
+  marginInline?: CSSProperties['marginInline'];
+  mis?: CSSProperties['marginInlineStart'];
+  marginInlineStart?: CSSProperties['marginInlineStart'];
+  mie?: CSSProperties['marginInlineEnd'];
+  marginInlineEnd?: CSSProperties['marginInlineEnd'];
+  p?: CSSProperties['padding'];
+  padding?: CSSProperties['padding'];
+  pb?: CSSProperties['paddingBlock'];
+  paddingBlock?: CSSProperties['paddingBlock'];
+  pbs?: CSSProperties['paddingBlockStart'];
+  paddingBlockStart?: CSSProperties['paddingBlockStart'];
+  pbe?: CSSProperties['paddingBlockEnd'];
+  paddingBlockEnd?: CSSProperties['paddingBlockEnd'];
+  pi?: CSSProperties['paddingInline'];
+  paddingInline?: CSSProperties['paddingInline'];
+  pis?: CSSProperties['paddingInlineStart'];
+  paddingInlineStart?: CSSProperties['paddingInlineStart'];
+  pie?: CSSProperties['paddingInlineEnd'];
+  paddingInlineEnd?: CSSProperties['paddingInlineEnd'];
+
+  fontFamily?: CSSProperties['fontFamily'] | FontScale;
+  fontSize?: CSSProperties['fontSize'] | FontScale;
+  fontStyle?: CSSProperties['fontStyle'];
+  fontWeight?: CSSProperties['fontWeight'] | FontScale;
+  letterSpacing?: CSSProperties['letterSpacing'] | FontScale;
+  lineHeight?: CSSProperties['lineHeight'] | FontScale;
+  textAlign?: CSSProperties['textAlign'];
+  textTransform?: CSSProperties['textTransform'];
+  textDecorationLine?: CSSProperties['textDecorationLine'];
+
+  elevation?: '0' | '1' | '2';
+  invisible?: boolean;
+  withRichContent?: boolean | string;
+  withTruncatedText?: boolean;
+  size?: `x${Size}` | `neg-x${Size}` | CSSProperties['blockSize'];
+  minSize?: CSSProperties['blockSize'];
+  maxSize?: CSSProperties['blockSize'];
+  fontScale?: FontScale;
+}> &
+  Omit<AllHTMLAttributes<HTMLOrSVGElement>, 'className' | 'size'> &
+  Omit<SVGAttributes<SVGElement>, keyof AllHTMLAttributes<HTMLOrSVGElement>> &
+  RefAttributes<unknown>;
+
+export const Box: ForwardRefExoticComponent<BoxProps>;
+
+export { default as AnimatedVisibility } from './AnimatedVisibility';
+export { default as Flex } from './Flex';
+export { default as Position, PositionAnimated } from './Position';
+export { default as Scrollable } from './Scrollable';
+
+export const useArrayLikeClassNameProp: <
+  T extends {
+    className?:
+      | string
+      | ReturnType<typeof css>
+      | (string | ReturnType<typeof css>)[];
+  }
+>(
+  props: T
+) => T & { className: string };

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

@@ -0,0 +1,30 @@
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type ButtonProps = ComponentProps<typeof Box> & {
+  info?: boolean;
+  success?: boolean;
+  warning?: boolean;
+  danger?: boolean;
+  primary?: boolean;
+  ghost?: boolean;
+  nude?: boolean;
+  ghostish?: boolean;
+  small?: boolean;
+  mini?: boolean;
+  tiny?: boolean;
+  square?: boolean;
+  external?: boolean;
+};
+export const Button: ForwardRefExoticComponent<ButtonProps>;
+
+type ActionButtonProps = ButtonProps & {
+  icon: string;
+  mini?: boolean;
+  tiny?: boolean;
+  small?: boolean;
+};
+export const ActionButton: ForwardRefExoticComponent<ActionButtonProps>;
+
+export = Button;

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

@@ -0,0 +1,14 @@
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type ButtonGroupProps = ComponentProps<typeof Box> &
+  Omit<'wrap'> & {
+    align?: 'start' | 'center' | 'end';
+    stretch?: boolean;
+    wrap?: boolean;
+    vertical?: boolean;
+    small?: boolean;
+    medium?: boolean;
+  };
+export const ButtonGroup: ForwardRefExoticComponent<ButtonGroupProps>;