break box into multiple components and remove typescript path aliases

package.json

@@ -10,17 +10,13 @@
     "url": "https://kulpinski.co"
   },
   "repository": "curious-leaf/design",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "files": [
-    "dist",
     "tailwind.config.js",
     "postcss.config.js"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c --watch",
     "storybook": "storybook dev -p 6006 --no-open",
     "test": "bun test",
     "clean": "rimraf ./dist",
@@ -46,7 +42,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "clsx": "^2.1.0",
     "cva": "^1.0.0-beta.1",
     "lucide-react": "^0.311.0",
     "tailwind-merge": "^2.2.0"
@@ -99,14 +94,14 @@
     "storybook": "^7.6.8",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
-    "tsc-alias": "^1.8.8",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   },
   "peerDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
+    "cva": "^1.0.0-beta.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.1",

rollup.config.mjs

@@ -5,8 +5,6 @@ import typescript from "@rollup/plugin-typescript"
 import { createRequire } from "node:module"
 import { dts } from "rollup-plugin-dts"
 import peerDepsExternal from "rollup-plugin-peer-deps-external"
-import { exec } from "node:child_process"
-import { promisify } from "node:util"
 
 const requireFile = createRequire(import.meta.url)
 const pkg = requireFile("./package.json")
@@ -19,13 +17,6 @@ const makeExternalPredicate = (externalArr) => {
   return (id) => pattern.test(id)
 }
 
-// Resolve typescript aliases
-const tscAlias = () => ({
-  buildStart: async () => {
-    await promisify(exec)("tsc-alias")
-  },
-})
-
 export default [
   {
     input: "src/index.ts",
@@ -56,6 +47,6 @@ export default [
   {
     input: "dist/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
-    plugins: [tscAlias(), dts()],
+    plugins: [dts()],
   },
 ]

src/index.ts

@@ -2,12 +2,15 @@ export * from "./shared"
 export * from "./providers"
 
 // UI
+export * from "./ui/Accordion"
 export * from "./ui/Avatar"
 export * from "./ui/AvatarGroup"
+export * from "./ui/Backdrop"
 export * from "./ui/Badge"
 export * from "./ui/Blurb"
 export * from "./ui/Box"
 export * from "./ui/Button"
+export * from "./ui/Card"
 export * from "./ui/Dot"
 export * from "./ui/FeatureCard"
 export * from "./ui/Loader"

src/layout/Container/Container.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react"
 import type { HTMLAttributes } from "react"
 
-import { cx, type VariantProps } from "~/shared/cva"
+import { cx, type VariantProps } from "../../shared"
 
 import { containerVariants } from "./Container.variants"
 

src/layout/Container/Container.variants.ts

@@ -1,4 +1,4 @@
-import { cva } from "~/shared/cva"
+import { cva } from "../../shared"
 
 export const containerVariants = cva({
   base: "container mx-auto w-full px-5 md:px-6 lg:px-8",

src/layout/Header/Header.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { BellRing, Calendar, Plus, Search, Table } from "lucide-react"
 
-import { Button } from "~/ui/Button"
+import { Button } from "../../ui/Button"
 
 import { Header } from "./Header"
 

src/layout/Header/Header.tsx

@@ -1,8 +1,9 @@
 import { forwardRef } from "react"
 import type { HTMLAttributes } from "react"
 
-import { cx, type VariantProps } from "~/shared/cva"
-import { Blurb, type BlurbProps } from "~/ui/Blurb"
+import { cx, type VariantProps } from "../../shared"
+import type { BlurbProps } from "../../ui/Blurb"
+import { Blurb } from "../../ui/Blurb"
 
 import { headerBlurbVariants, headerVariants } from "./Header.variants"
 

src/layout/Header/Header.variants.ts

@@ -1,4 +1,4 @@
-import { cva } from "~/shared/cva"
+import { cva } from "../../shared"
 
 export const headerVariants = cva({
   base: "flex flex-wrap items-center gap-y-2 gap-x-6 lg:gap-x-12",

src/layout/Sidebar/Sidebar.stories.tsx

@@ -11,12 +11,12 @@ import {
   LayoutDashboardIcon,
 } from "lucide-react"
 
-import { Badge } from "~/ui/Badge"
-import { Blurb } from "~/ui/Blurb"
-import { FeatureCard } from "~/ui/FeatureCard"
-import { default as FeatureCardDefault } from "~/ui/FeatureCard/FeatureCard.stories"
-import { MenuItem } from "~/ui/MenuItem"
-import { Shortcut } from "~/ui/Shortcut"
+import { Badge } from "../../ui/Badge"
+import { Blurb } from "../../ui/Blurb"
+import { FeatureCard } from "../../ui/FeatureCard"
+import { default as FeatureCardDefault } from "../../ui/FeatureCard/FeatureCard.stories"
+import { MenuItem } from "../../ui/MenuItem"
+import { Shortcut } from "../../ui/Shortcut"
 
 import { Sidebar } from "./Sidebar"
 

src/layout/Sidebar/Sidebar.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from "react"
 import type { HTMLAttributes } from "react"
 
-import { cx, type VariantProps } from "~/shared/cva"
-import type { SubheadingElement, SubheadingProps } from "~/typography/Subheading"
-import { Subheading } from "~/typography/Subheading"
+import { cx, type VariantProps } from "../../shared"
+import type { SubheadingElement, SubheadingProps } from "../../typography/Subheading"
+import { Subheading } from "../../typography/Subheading"
 
 import {
   sidebarContentVariants,

src/layout/Sidebar/Sidebar.variants.ts

@@ -1,7 +1,7 @@
-import { cva } from "~/shared/cva"
+import { cva } from "../../shared"
 
 export const sidebarVariants = cva({
-  base: "sticky top-0 z-40 flex h-screen w-[17em] bg-white shrink-0 flex-col gap-y-5 overflow-y-scroll border-r p-5",
+  base: "sticky top-0 flex h-screen w-[17em] bg-white shrink-0 flex-col gap-y-5 overflow-y-scroll border-r p-5",
 
   variants: {
     theme: {

src/providers/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 /* eslint react-refresh/only-export-components: 0 */
 import { type PropsWithChildren } from "react"
 
-import { createSimpleContext } from "~/shared/providers"
+import { createSimpleContext } from "../shared"
 
 export type Theme =
   | "blue"

src/typography/Heading/Heading.tsx

@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot"
 import type { HTMLAttributes } from "react"
 import { forwardRef, isValidElement } from "react"
 
-import { type VariantProps, cx } from "~/shared/cva"
+import { type VariantProps, cx } from "../../shared"
 
 import { headingVariants } from "./Heading.variants"
 

src/typography/Heading/Heading.variants.ts

@@ -1,4 +1,4 @@
-import { cva } from "~/shared/cva"
+import { cva } from "../../shared"
 
 export const headingVariants = cva({
   base: "font-semibold",

src/typography/Paragraph/Paragraph.tsx

@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot"
 import type { HTMLAttributes } from "react"
 import { forwardRef, isValidElement } from "react"
 
-import { type VariantProps, cx } from "~/shared/cva"
+import { type VariantProps, cx } from "../../shared"
 
 import { paragraphVariants } from "./Paragraph.variants"
 

src/typography/Paragraph/Paragraph.variants.ts

@@ -1,4 +1,4 @@
-import { cva } from "~/shared/cva"
+import { cva } from "../../shared"
 
 export const paragraphVariants = cva({
   base: "",

src/typography/Prose/Prose.tsx

@@ -2,8 +2,8 @@ import { Slot } from "@radix-ui/react-slot"
 import type { HTMLAttributes } from "react"
 import { forwardRef, isValidElement } from "react"
 
-import { useTheme } from "~/providers"
-import { type VariantProps, cx } from "~/shared/cva"
+import { useTheme } from "../../providers"
+import { type VariantProps, cx } from "../../shared"
 
 import { proseVariants } from "./Prose.variants"
 

src/typography/Prose/Prose.variants.ts

@@ -1,4 +1,4 @@
-import { cva } from "~/shared/cva"
+import { cva } from "../../shared"
 
 export const proseVariants = cva({
   base: [

src/typography/Subheading/Subheading.tsx

@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot"
 import type { HTMLAttributes } from "react"
 import { forwardRef, isValidElement } from "react"
 
-import { type VariantProps, cx } from "~/shared/cva"
+import { type VariantProps, cx } from "../../shared"
 
 import { subheadingVariants } from "./Subheading.variants"
 

src/typography/Subheading/Subheading.variants.ts

@@ -1,4 +1,4 @@
-import { cva } from "~/shared/cva"
+import { cva } from "../../shared"
 
 export const subheadingVariants = cva({
   base: "font-medium uppercase",

src/ui/Accordion/Accordion.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { H5 } from "../../typography/Heading"
+import { Paragraph } from "../../typography/Paragraph"
+
+import { Accordion } from "./Accordion"
+
+type Story = StoryObj<typeof Accordion>
+
+// Meta
+export default {
+  title: "UI/Accordion",
+  component: Accordion,
+  args: {
+    ...Accordion.defaultProps,
+    style: { width: 300 },
+    children: (
+      <Accordion.Item value="1">
+        <Accordion.Trigger className="flex items-center justify-between">
+          <H5>Accordion Trigger</H5>
+        </Accordion.Trigger>
+
+        <Accordion.Content>
+          <Paragraph>
+            Excepteur quis Lorem ad labore excepteur qui. Ut aliquip officia dolor pariatur nulla.
+            Amet dolore veniam commodo irure id. Aliqua anim mollit ullamco eiusmod do ad. Non
+            commodo est amet. Velit eu eu nostrud. Culpa ullamco aliqua ex. Duis ipsum in incididunt
+            laboris.
+          </Paragraph>
+        </Accordion.Content>
+      </Accordion.Item>
+    ),
+  },
+} satisfies Meta
+
+// Stories
+export const Default = {
+  args: {},
+} satisfies Story

src/ui/Accordion/Accordion.tsx

@@ -0,0 +1,31 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { forwardRef } from "react"
+import type { ComponentPropsWithoutRef, ElementRef } from "react"
+
+import { cx } from "../../shared"
+
+import { accordionVariants } from "./Accordion.variants"
+
+export const AccordionContent = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cx(accordionVariants({ className }), className)}
+    {...props}
+  />
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export const Accordion = Object.assign(AccordionPrimitive.Root, {
+  Item: AccordionPrimitive.Item,
+  Trigger: AccordionPrimitive.Trigger,
+  Content: AccordionContent,
+})
+
+Accordion.defaultProps = {
+  collapsible: true,
+  type: "single",
+}

src/ui/Accordion/Accordion.variants.ts

@@ -0,0 +1,8 @@
+import { cva } from "../../shared"
+
+export const accordionVariants = cva({
+  base: [
+    "overflow-hidden transition-all",
+    "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+  ],
+})

src/ui/Accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion } from "./Accordion"

src/ui/Avatar/Avatar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { UsersIcon, BadgeCheckIcon } from "lucide-react"
 
-import { Dot } from "~/ui/Dot"
+import { Dot } from "../Dot"
 
 import { Avatar } from "./Avatar"
 

src/ui/Avatar/Avatar.tsx

@@ -4,10 +4,9 @@ import { UserIcon } from "lucide-react"
 import { forwardRef, isValidElement } from "react"
 import type { ComponentPropsWithoutRef, ElementRef, ReactElement, RefObject } from "react"
 
-import { useTheme } from "~/providers"
-import { type VariantProps, cx } from "~/shared/cva"
-import { getInitials, isReactElement } from "~/shared/helpers"
-import { Loader } from "~/ui/Loader"
+import { useTheme } from "../../providers"
+import { type VariantProps, cx, getInitials, isReactElement } from "../../shared"
+import { Loader } from "../Loader"
 
 import {
   avatarFallbackVariants,

src/ui/Avatar/Avatar.variants.ts

@@ -1,4 +1,4 @@
-import { cva } from "~/shared/cva"
+import { cva } from "../../shared"
 
 export const avatarVariants = cva({
   base: "relative flex items-center justify-center shrink-0 w-auto",

src/ui/AvatarGroup/AvatarGroup.tsx

@@ -1,11 +1,10 @@
 import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from "react"
 import { forwardRef } from "react"
 
-import { type VariantProps, cx } from "~/shared/cva"
-import { isReactElement } from "~/shared/helpers"
-import type { AvatarElement, AvatarProps } from "~/ui/Avatar"
-import { Avatar } from "~/ui/Avatar"
-import type { avatarVariants } from "~/ui/Avatar/Avatar.variants"
+import { type VariantProps, cx, isReactElement } from "../../shared"
+import type { AvatarElement, AvatarProps } from "../Avatar/Avatar"
+import { Avatar } from "../Avatar/Avatar"
+import type { avatarVariants } from "../Avatar/Avatar.variants"
 
 import { avatarGroupItemVariants, avatarGroupVariants } from "./AvatarGroup.variants"
 

src/ui/AvatarGroup/AvatarGroup.variants.ts

@@ -1,4 +1,4 @@
-import { cva } from "~/shared/cva"
+import { cva } from "../../shared"
 
 export const avatarGroupVariants = cva({
   base: "flex flex-wrap items-center gap-y-1",

src/ui/Backdrop/Backdrop.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Backdrop } from "./Backdrop"
+
+type Story = StoryObj<typeof Backdrop>
+
+// Meta
+export default {
+  title: "UI/Backdrop",
+  component: Backdrop,
+  args: {
+    ...Backdrop.defaultProps,
+  },
+} satisfies Meta
+
+// Stories
+export const Default = {
+  args: {},
+} satisfies Story