Switch tabler icons for lucide and update rollup config

package.json

@@ -9,11 +9,11 @@
     "url": "https://kulpinski.co"
   },
   "repository": "curious-leaf/design",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist/**/*",
+    "dist",
     "tailwind.config.js",
     "postcss.config.js"
   ],
@@ -46,9 +46,9 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tabler/icons-react": "^2.45.0",
     "clsx": "^2.1.0",
     "cva": "^1.0.0-beta.1",
+    "lucide-react": "^0.311.0",
     "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
@@ -99,8 +99,10 @@
     "react-dom": "18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "3.29.4",
+    "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-preserve-directives": "^0.3.0",
     "storybook": "^7.6.8",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",

rollup.config.mjs

@@ -1,16 +1,24 @@
-// import { babel } from "@rollup/plugin-babel"
 import commonjs from "@rollup/plugin-commonjs"
 import { nodeResolve } from "@rollup/plugin-node-resolve"
-// import terser from "@rollup/plugin-terser"
+import terser from "@rollup/plugin-terser"
 import typescript from "@rollup/plugin-typescript"
 import { createRequire } from "node:module"
 import { dts } from "rollup-plugin-dts"
+import analyze from "rollup-plugin-analyzer"
 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 packageJson = requireFile("./package.json")
+const pkg = requireFile("./package.json")
+
+const makeExternalPredicate = (externalArr) => {
+  if (externalArr.length === 0) {
+    return () => false
+  }
+  const pattern = new RegExp(`^(${externalArr.join("|")})($|/)`)
+  return (id) => pattern.test(id)
+}
 
 // Resolve typescript aliases
 const tscAlias = () => ({
@@ -19,39 +27,46 @@ const tscAlias = () => ({
   },
 })
 
+const outputOptions = {
+  exports: "named",
+  banner: `'use client';`,
+  sourcemap: true,
+  interop: "auto",
+}
+
 export default [
   {
     input: "src/index.ts",
     output: [
       {
-        file: packageJson.main,
+        file: pkg.main,
         format: "cjs",
-        sourcemap: true,
+        ...outputOptions,
       },
       {
-        file: packageJson.module,
+        file: pkg.module,
         format: "esm",
-        // exports: "named",
-        sourcemap: true,
+        ...outputOptions,
       },
     ],
+
     plugins: [
       peerDepsExternal(),
       typescript(),
       nodeResolve(),
       commonjs(),
-      // terser(),
-      // babel({
-      //   babelHelpers: "bundled",
-      //   extensions: [".ts", ".tsx"],
-      //   exclude: "node_modules/**",
-      // }),
+      terser({ compress: { directives: false } }),
+      analyze({ hideDeps: true, limit: 0, summaryOnly: true }),
     ],
-    external: ["react", "react-dom"],
+
+    external: makeExternalPredicate([
+      ...Object.keys(pkg.dependencies || {}),
+      ...Object.keys(pkg.peerDependencies || {}),
+    ]),
   },
   {
     input: "dist/index.d.ts",
-    output: [{ file: "dist/index.d.ts", format: "es" }],
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
     plugins: [tscAlias(), dts()],
   },
 ]

src/layout/Header/Header.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { IconBellRinging, IconCalendar, IconPlus, IconSearch, IconTable } from "@tabler/icons-react"
+import { BellRing, Calendar, Plus, Search, Table } from "lucide-react"
 
 import { Button } from "~/ui/Button"
 
@@ -18,20 +18,20 @@ export default {
     ...Header.defaultProps,
     size: "lg",
     avatar: {
-      children: <IconTable />,
+      children: <Table />,
       variant: "outline",
       theme: "gray",
     },
     title: "Insert page title here",
     description: "Insert page description here",
     children: (
       <div className="flex items-center gap-3">
-        <Button theme="gray" variant="ghost" prefix={<IconSearch />} />
-        <Button theme="gray" variant="ghost" prefix={<IconBellRinging />} />
-        <Button theme="gray" variant="outline" prefix={<IconCalendar />}>
+        <Button theme="gray" variant="ghost" prefix={<Search />} />
+        <Button theme="gray" variant="ghost" prefix={<BellRing />} />
+        <Button theme="gray" variant="outline" prefix={<Calendar />}>
           Schedule
         </Button>
-        <Button prefix={<IconPlus />}>Create Request</Button>
+        <Button prefix={<Plus />}>Create Request</Button>
       </div>
     ),
   },

src/layout/Sidebar/Sidebar.stories.tsx

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import {
-  IconChevronRight,
-  IconCoins,
-  IconCreditCard,
-  IconHeadset,
-  IconHistory,
-  IconReceiptDollar,
-  IconSettings,
-  IconTable,
-  IconWorldDollar,
-} from "@tabler/icons-react"
+  Settings,
+  ChevronRight,
+  WalletCardsIcon,
+  CoinsIcon,
+  CreditCardIcon,
+  HistoryIcon,
+  Rotate3DIcon,
+  HeadphonesIcon,
+  LayoutDashboardIcon,
+} from "lucide-react"
 
 import { Badge } from "~/ui/Badge"
 import { Blurb } from "~/ui/Blurb"
@@ -26,28 +26,28 @@ const menus = {
   Main: [
     {
       children: "Dashboard",
-      prefix: <IconTable />,
+      prefix: <LayoutDashboardIcon />,
       active: true,
     },
     {
       children: "My Cards",
-      prefix: <IconCreditCard />,
+      prefix: <CreditCardIcon />,
     },
     {
       children: "Transfer",
-      prefix: <IconCoins />,
+      prefix: <CoinsIcon />,
     },
     {
       children: "Transactions",
-      prefix: <IconHistory />,
+      prefix: <HistoryIcon />,
     },
     {
       children: "Payments",
-      prefix: <IconReceiptDollar />,
+      prefix: <WalletCardsIcon />,
     },
     {
       children: "Exchange",
-      prefix: <IconWorldDollar />,
+      prefix: <Rotate3DIcon />,
       suffix: (
         <Badge theme="gray" variant="soft">
           Soon
@@ -60,12 +60,12 @@ const menus = {
   Other: [
     {
       children: "Settings",
-      prefix: <IconSettings />,
+      prefix: <Settings />,
       suffix: <Shortcut>⌘K</Shortcut>,
     },
     {
       children: "Support",
-      prefix: <IconHeadset />,
+      prefix: <HeadphonesIcon />,
       loading: true,
     },
   ],
@@ -121,7 +121,7 @@ export default {
           description="Software Engineer"
         >
           <button className="ml-2 rounded border p-0.5 text-xs">
-            <IconChevronRight />
+            <ChevronRight />
           </button>
         </Blurb>
       </>

src/ui/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { IconDiscountCheckFilled, IconUsers } from "@tabler/icons-react"
+import { UsersIcon, BadgeCheckIcon } from "lucide-react"
 
 import { Dot } from "~/ui/Dot"
 
@@ -35,14 +35,14 @@ export const WithFallback = {
 
 export const WithChildrenFallback = {
   args: {
-    children: <IconUsers />,
+    children: <UsersIcon />,
   },
 } satisfies Story
 
 export const WithTopStatus = {
   args: {
     src: "https://i.pravatar.cc/150?img=1",
-    topStatus: <IconDiscountCheckFilled className="-m-[7.5%] bg-white text-teal" />,
+    topStatus: <BadgeCheckIcon className="-m-[7.5%] bg-white text-teal" />,
   },
 } satisfies Story
 
@@ -59,7 +59,7 @@ export const WithCustomMarkup = {
       <Avatar.Image src="https://i.pravatar.cc/150?img=5" />
       <Avatar.Fallback />
       <Avatar.Status className="-m-2 bg-white text-teal ring-0">
-        <IconDiscountCheckFilled />
+        <BadgeCheckIcon />
       </Avatar.Status>
     </Avatar.Root>
   ),

src/ui/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import { getInitials } from "@curiousleaf/utils"
 import * as Primitive from "@radix-ui/react-avatar"
 import { Slot } from "@radix-ui/react-slot"
-import { IconUser } from "@tabler/icons-react"
+import { UserIcon } from "lucide-react"
 import { forwardRef, isValidElement } from "react"
 import type { ComponentPropsWithoutRef, ElementRef, ReactElement, RefObject } from "react"
 
@@ -135,7 +135,7 @@ const AvatarBase = forwardRef<AvatarElement, AvatarProps>((props, ref) => {
       {/* Fallback */}
       {!children && !src && !initials && (
         <AvatarFallback ref={ref} aria-label={alt} role="img">
-          <IconUser />
+          <UserIcon />
         </AvatarFallback>
       )}
 

src/ui/AvatarGroup/AvatarGroup.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { IconUserPlus } from "@tabler/icons-react"
+import { UserPlusIcon } from "lucide-react"
 
 import { AvatarGroup } from "./AvatarGroup"
 
@@ -43,7 +43,7 @@ export const WithLabel = {
 
 export const WithCustomLabel = {
   args: {
-    label: <IconUserPlus />,
+    label: <UserPlusIcon />,
   },
 } satisfies Story
 

src/ui/Badge/Badge.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { IconBolt } from "@tabler/icons-react"
+import { AppleIcon } from "lucide-react"
 
 import { Badge } from "./Badge"
 
@@ -29,12 +29,12 @@ export const AsChild = {
 
 export const WithPrefix = {
   args: {
-    prefix: <IconBolt />,
+    prefix: <AppleIcon />,
   },
 } satisfies Story
 
 export const WithSuffix = {
   args: {
-    suffix: <IconBolt />,
+    suffix: <AppleIcon />,
   },
 } satisfies Story

src/ui/Blurb/Blurb.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { IconUserBolt } from "@tabler/icons-react"
+import { UserCogIcon } from "lucide-react"
 
 import { Blurb } from "./Blurb"
 
@@ -35,7 +35,7 @@ export const WithInitials = {
 export const WithCustomMarkup = {
   render: ({ avatar, title, description }) => (
     <Blurb.Root className="rounded-md border p-3">
-      <IconUserBolt className="text-xs" />
+      <UserCogIcon className="text-xs" />
 
       <Blurb.Content>
         <Blurb.Description>{description}</Blurb.Description>

src/ui/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { IconBolt } from "@tabler/icons-react"
+import { AppleIcon } from "lucide-react"
 
 import { Button } from "./Button"
 
@@ -29,12 +29,12 @@ export const AsChild = {
 
 export const WithPrefix = {
   args: {
-    prefix: <IconBolt />,
+    prefix: <AppleIcon />,
   },
 } satisfies Story
 
 export const WithSuffix = {
   args: {
-    suffix: <IconBolt />,
+    suffix: <AppleIcon />,
   },
 } satisfies Story

src/ui/Button/Button.variants.ts

@@ -235,7 +235,7 @@ export const buttonVariants = cva({
     {
       theme: "gray",
       variant: "outline",
-      class: "border-gray-200 text-gray-500 hover:bg-gray-100 hover:border-gray-300",
+      class: "border-gray-300 text-gray-500 hover:bg-gray-100 hover:border-gray-300",
     },
     {
       theme: "gray",