Merge branch 'master' into feature/alert-component

.changeset/tricky-spoons-rule.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": minor
+---
+
+**Breaking:** Refactor library structure with client component focus

.changeset/unlucky-hats-judge.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": minor
+---
+
+Add `Stat` component

.storybook/preview.ts

@@ -11,8 +11,8 @@ const preview: Preview = {
     backgrounds: {
       default: "dark",
       values: [
-        { name: "light", value: "#ffffff" },
-        { name: "dark", value: "#161616" },
+        { name: "light", value: "#fdfdfd" },
+        { name: "dark", value: "#0a0a0a" },
       ],
     },
     controls: {

docs/usage.md

@@ -50,13 +50,13 @@ import "main.css";
 const App = () => <></>;
 ```
 
-5. (_for TypeScript users_) If you are using TypeScript, make sure your consuming application has `compilerOptions.moduleResolution` set to `node16` or higher (e.g. `nodenext`) in `tsconfig.json`. This will allow you to properly import from subpaths from the library. Read more about this [here](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#ecmascript-module-support-in-node-js).
+5. (_for TypeScript users_) If you are using TypeScript, make sure your consuming application has `compilerOptions.module` and `compilerOptions.moduleResolution` set to `node16` or higher (e.g. `nodenext`) in `tsconfig.json`. This will allow you to properly import from subpaths from the library. Read more about this [here](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#ecmascript-module-support-in-node-js).
 
 Now you are ready to install the UI library. You can either install it [from the published package](#from-published-package) or from a [local clone](#local) on your local filesystem. The latter is useful if you are developing the library.
 
 ## Remote
 
-Install from remote repository: `yarn add @animareflection/ui`
+Install from remote repository along with required dependencies: `yarn add @animareflection/ui @ark-ui/react framer-motion react-hot-toast`
 
 ## Local
 

examples/next/src/app/layout.tsx

@@ -5,7 +5,7 @@ interface Props {
 }
 
 import "main.css";
-import { BreadcrumbDemo } from "components";
+import { BreadcrumbDemo } from "components/core";
 
 /**
  * Root application layout.

examples/next/src/app/page.tsx

@@ -1,22 +1,42 @@
 import {
-  Box,
   Circle,
   Flex,
   Grid,
   Hide,
   Show,
-  Skeleton,
   Square,
   Text,
 } from "@animareflection/ui";
-import Link from "next/link";
 
 import {
+  AccordionDemo,
   BadgeDemo,
+  BannerDemo,
+  BreadcrumbDemo,
+  ButtonDemo,
   CardDemo,
+  CarouselDemo,
+  CheckboxDemo,
+  CollapseDemo,
+  DrawerDemo,
+  FlyoutDemo,
+  IconDemo,
   ImageDemo,
+  InputDemo,
   KbdDemo,
+  MenuDemo,
+  ModalDemo,
+  NumberInputDemo,
+  RadioGroupDemo,
+  SkeletonToggleDemo,
+  SliderDemo,
   SpinnerDemo,
+  TabsDemo,
+  TextareaDemo,
+  ToastDemo,
+  ToggleDemo,
+  TooltipDemo,
+  StatDemo,
 } from "components";
 
 const HomePage = () => (
@@ -60,11 +80,34 @@ const HomePage = () => (
     </Grid>
 
     <Flex direction="column" w="100%" gap={2} p={4}>
+      <ButtonDemo />
+      <AccordionDemo />
+      <DrawerDemo />
+      <IconDemo />
+      <MenuDemo />
+      <ModalDemo />
+      <SliderDemo />
       <BadgeDemo />
       <CardDemo />
       <ImageDemo />
       <SpinnerDemo />
+      <TabsDemo />
+      <ToggleDemo />
+      <SkeletonToggleDemo />
+      <CheckboxDemo />
       <KbdDemo />
+      <CollapseDemo />
+      <BannerDemo />
+      <InputDemo />
+      <NumberInputDemo />
+      <TextareaDemo />
+      <FlyoutDemo />
+      <TooltipDemo />
+      <ToastDemo />
+      <CarouselDemo />
+      <BreadcrumbDemo />
+      <RadioGroupDemo />
+      <StatDemo />
       <Hide below="md">
         <Text color="brand.primary.500" fontSize="3xl" fontWeight="bold">
           Hide below md breakpoint
@@ -85,12 +128,7 @@ const HomePage = () => (
           Show from md breakpoint and up
         </Text>
       </Show>
-      <Skeleton variant="circle" w={12} h={12} />
     </Flex>
-
-    <Box color="blue" _hover={{ textDecoration: "underline" }}>
-      <Link href="/client">Go to client page demo</Link>
-    </Box>
   </Flex>
 );
 

examples/next/src/components/AccordionDemo.tsx

@@ -1,8 +1,8 @@
-import { Accordion } from "@animareflection/ui/client";
+import { Accordion } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
-import type { AccordionItemRecord } from "@animareflection/ui/client";
+import type { AccordionItemRecord } from "@animareflection/ui";
 
 const ITEMS: AccordionItemRecord[] = [
   {

examples/next/src/components/BannerDemo.tsx

@@ -1,4 +1,4 @@
-import { Banner } from "@animareflection/ui/client";
+import { Banner } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 

examples/next/src/components/BreadcrumbDemo.tsx

@@ -1,4 +1,4 @@
-import { Breadcrumb, BreadcrumbRecord, Icon } from "@animareflection/ui/client";
+import { Breadcrumb, BreadcrumbRecord, Icon } from "@animareflection/ui";
 import { FiChevronRight as ChevronRightIcon } from "react-icons/fi";
 
 import { Wrapper } from "components";

examples/next/src/components/ButtonDemo.tsx

@@ -1,4 +1,6 @@
-import { Button } from "@animareflection/ui/client";
+"use client";
+
+import { Button } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 

examples/next/src/components/CardDemo.tsx

@@ -1,3 +1,6 @@
+// TODO: update `Card` component so that `use client` is not needed
+"use client";
+
 import { Card, CardBody, CardFooter, CardHeader } from "@animareflection/ui";
 
 import { Wrapper } from "components";

examples/next/src/components/CarouselDemo.tsx

@@ -1,4 +1,4 @@
-import { Carousel } from "@animareflection/ui/client";
+import { Carousel } from "@animareflection/ui";
 import { Image } from "@animareflection/ui/next";
 
 import { Wrapper } from "components";

examples/next/src/components/CheckboxDemo.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Checkbox } from "@animareflection/ui/client";
+import { Checkbox } from "@animareflection/ui";
 import { useState } from "react";
 
 import { Wrapper } from "components";

examples/next/src/components/CollapseDemo.tsx

@@ -1,5 +1,4 @@
-import { Flex, Text } from "@animareflection/ui";
-import { Collapse } from "@animareflection/ui/client";
+import { Collapse, Flex, Text } from "@animareflection/ui";
 import { Image } from "@animareflection/ui/next";
 
 import { Wrapper } from "components";

examples/next/src/components/DrawerDemo.tsx

@@ -1,12 +1,11 @@
-import { Text } from "@animareflection/ui";
-import { Button, Drawer } from "@animareflection/ui/client";
+import { Drawer, Text } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
 const DrawerDemo = () => (
   <Wrapper title="Drawer">
     <Drawer
-      trigger={<Button>Open Drawer</Button>}
+      trigger="Open Drawer"
       title="Drawer Title"
       description="Drawer Description"
     >

examples/next/src/components/FlyoutDemo.tsx

@@ -1,12 +1,11 @@
-import { Text } from "@animareflection/ui";
-import { Button, Flyout } from "@animareflection/ui/client";
+import { Flyout, Text } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
 const FlyoutDemo = () => {
   return (
     <Wrapper title="Flyout">
-      <Flyout title="Flyout Title" trigger={<Button>Open Flyout</Button>}>
+      <Flyout title="Flyout Title" trigger="Open Flyout">
         <Text mt={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

examples/next/src/components/IconDemo.tsx

@@ -1,5 +1,4 @@
-import { Flex } from "@animareflection/ui";
-import { Icon } from "@animareflection/ui/client";
+import { Flex, Icon } from "@animareflection/ui";
 import {
   FiHeart,
   FiCheck,

examples/next/src/components/InputDemo.tsx

@@ -1,4 +1,4 @@
-import { Input } from "@animareflection/ui/client";
+import { Input } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 

examples/next/src/components/MenuDemo.tsx

@@ -1,12 +1,8 @@
-import { HStack, Text } from "@animareflection/ui";
-import { Menu } from "@animareflection/ui/client";
+import { HStack, Menu, Text } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
-import type {
-  MenuItemGroupRecord,
-  MenuItemRecord,
-} from "@animareflection/ui/client";
+import type { MenuItemGroupRecord, MenuItemRecord } from "@animareflection/ui";
 
 const SUBMENU_GROUP_ITEMS: MenuItemRecord[] = [
   { id: "item-7", child: "Item 7" },

examples/next/src/components/ModalDemo.tsx

@@ -1,12 +1,11 @@
-import { Text } from "@animareflection/ui";
-import { Button, Modal } from "@animareflection/ui/client";
+import { Modal, Text } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
 const ModalDemo = () => (
   <Wrapper title="Modal">
     <Modal
-      trigger={<Button>Open Modal</Button>}
+      trigger="Open Modal"
       title="Modal Title"
       description="Modal Description"
     >

examples/next/src/components/NumberInputDemo.tsx

@@ -1,4 +1,4 @@
-import { NumberInput } from "@animareflection/ui/client";
+import { NumberInput } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 

examples/next/src/components/RadioGroupDemo.tsx

@@ -1,8 +1,8 @@
-import { RadioGroup } from "@animareflection/ui/client";
+import { RadioGroup } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
-import type { RadioGroupRecord } from "@animareflection/ui/client";
+import type { RadioGroupRecord } from "@animareflection/ui";
 
 const ITEMS: RadioGroupRecord[] = [
   { value: "react", label: "React" },

examples/next/src/components/SkeletonToggleDemo.tsx

@@ -2,8 +2,7 @@
 
 import { useState } from "react";
 
-import { Skeleton, Text } from "@animareflection/ui";
-import { Button } from "@animareflection/ui/client";
+import { Button, Skeleton, Text } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 

examples/next/src/components/SliderDemo.tsx

@@ -1,8 +1,8 @@
-import { Slider } from "@animareflection/ui/client";
+import { Slider } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
-import type { SliderMarkerRecord } from "@animareflection/ui/client";
+import type { SliderMarkerRecord } from "@animareflection/ui";
 
 const MARKERS: SliderMarkerRecord[] = [
   { id: "marker-1", value: 25, label: "25%" },

examples/next/src/components/StatDemo.tsx

@@ -0,0 +1,15 @@
+import { Stat } from "@animareflection/ui";
+import { Wrapper } from "components";
+
+const TabsDemo = () => (
+  <Wrapper title="Stat">
+    <Stat
+      label="Floor Price"
+      helpText="12.35%"
+      indicator="increase"
+      value="$10.85"
+    />
+  </Wrapper>
+);
+
+export default TabsDemo;

examples/next/src/components/TabsDemo.tsx

@@ -1,8 +1,8 @@
-import { Tabs } from "@animareflection/ui/client";
+import { Tabs } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
-import type { TabRecord } from "@animareflection/ui/client";
+import type { TabRecord } from "@animareflection/ui";
 
 const TABS: TabRecord[] = [
   {