Remove react emotion lib and add typescript to rollup

.babelrc.json

@@ -12,12 +12,8 @@
     [
       "@babel/preset-react",
       {
-        "runtime": "automatic",
-        "importSource": "@emotion/react"
+        "runtime": "automatic"
       }
     ]
-  ],
-  "plugins": [
-    "@emotion/babel-plugin"
   ]
 }

package.json

@@ -31,9 +31,6 @@
     "@babel/preset-env": "7.23.7",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@emotion/babel-plugin": "^11.11.0",
-    "@emotion/react": "11.11.3",
-    "@emotion/styled": "^11.11.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -51,6 +48,7 @@
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-interactions": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
@@ -90,8 +88,6 @@
     "zx": "^1.15.2"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },

rollup.config.mjs

@@ -1,4 +1,5 @@
 import resolve from "@rollup/plugin-node-resolve"
+import typescript from "@rollup/plugin-typescript"
 import commonjs from "@rollup/plugin-commonjs"
 import terser from "@rollup/plugin-terser"
 import peerDepsExternal from "rollup-plugin-peer-deps-external"
@@ -13,7 +14,7 @@ const packageJson = requireFile("./package.json")
 
 export default [
   {
-    input: "src/index.js",
+    input: "src/index.ts",
     output: [
       {
         file: packageJson.main,
@@ -28,18 +29,19 @@ export default [
       },
     ],
     plugins: [
+      typescript(),
       peerDepsExternal(),
       resolve({
-        extensions: [".js", ".jsx"],
+        extensions: [".ts", ".tsx"],
         preferBuiltins: true,
       }),
       commonjs(),
       terser(),
       babel({
-        extensions: [".js", ".jsx"],
+        extensions: [".ts", ".tsx"],
         exclude: "node_modules/**",
       }),
     ],
-    external: ["react", "react-dom", "@emotion/react", "@emotion/styled"],
+    external: ["react", "react-dom"],
   },
 ]

src/Dot/Dot.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Dot } from "./Dot"
+
+type Story = StoryObj<typeof Dot>
+
+const themes = [
+  "blue",
+  "orange",
+  "yellow",
+  "red",
+  "green",
+  "purple",
+  "pink",
+  "teal",
+  "gray",
+] as const
+
+const sizes = ["sm", "md", "lg"] as const
+const variants = ["solid", "soft", "outline"] as const
+
+// Meta
+export default {
+  title: "Design System/Dot",
+  component: Dot,
+  tags: ["autodocs"],
+} satisfies Meta
+
+// Stories
+export const Default = {
+  args: {},
+} satisfies Story
+
+export const AsChild = {
+  args: {
+    asChild: true,
+    children: <a href="/" />,
+  },
+} satisfies Story
+
+export const AllSizes = () => {
+  return (
+    <div className="flex items-center flex-wrap gap-4">
+      {sizes.map((s) => (
+        <Dot key={s} size={s} />
+      ))}
+    </div>
+  )
+}
+
+export const AllThemes = () => {
+  return (
+    <div className="flex items-center flex-wrap gap-4">
+      {themes.map((t) => (
+        <Dot key={t} theme={t} />
+      ))}
+    </div>
+  )
+}
+
+export const AllVariants = () => {
+  return (
+    <div className="flex items-center flex-wrap gap-4">
+      {variants.map((v) => (
+        <Dot key={v} variant={v} />
+      ))}
+    </div>
+  )
+}

src/Dot/Dot.tsx

@@ -0,0 +1,33 @@
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps } from "cva"
+import { isValidElement, type HTMLAttributes, forwardRef } from "react"
+import { dotVariants } from "./Dot.variants"
+
+export type DotElement = HTMLSpanElement
+
+export type DotProps = Omit<HTMLAttributes<DotElement>, "size"> &
+  VariantProps<typeof dotVariants> & {
+    /**
+     * If set to `true`, the button will be rendered as a child within the component.
+     * This child component must be a valid React component.
+     */
+    asChild?: boolean
+  }
+
+export const Dot = forwardRef<DotElement, DotProps>((props, ref) => {
+  const { className, asChild, theme, variant, size, ...rest } = props
+
+  const useAsChild = asChild && isValidElement(rest.children)
+  const Component = useAsChild ? Slot : "span"
+
+  return (
+    <Component className={dotVariants({ theme, variant, size, className })} ref={ref} {...rest} />
+  )
+})
+
+Dot.defaultProps = {
+  theme: "blue",
+  variant: "solid",
+  size: "md",
+  asChild: false,
+}

src/Dot/Dot.variants.ts

@@ -0,0 +1,76 @@
+import { cva } from "~/shared/cva"
+
+export const dotVariants = cva({
+  base: "block rounded-full border border-transparent text-white",
+
+  variants: {
+    theme: {
+      blue: "",
+      orange: "",
+      red: "",
+      yellow: "",
+      green: "",
+      purple: "",
+      pink: "",
+      teal: "",
+      gray: "",
+    },
+    variant: {
+      solid: "",
+      soft: "",
+      outline: "",
+    },
+    size: {
+      sm: "size-1.5",
+      md: "size-2",
+      lg: "size-2.5",
+    },
+  },
+
+  compoundVariants: [
+    // Blue
+    { theme: "blue", variant: "solid", class: "bg-blue" },
+    { theme: "blue", variant: "soft", class: "bg-blue-light" },
+    { theme: "blue", variant: "outline", class: "border-blue-dark" },
+
+    // Orange
+    { theme: "orange", variant: "solid", class: "bg-orange" },
+    { theme: "orange", variant: "soft", class: "bg-orange-light" },
+    { theme: "orange", variant: "outline", class: "border-orange-dark" },
+
+    // Red
+    { theme: "red", variant: "solid", class: "bg-red" },
+    { theme: "red", variant: "soft", class: "bg-red-light" },
+    { theme: "red", variant: "outline", class: "border-red-dark" },
+
+    // Yellow
+    { theme: "yellow", variant: "solid", class: "bg-yellow" },
+    { theme: "yellow", variant: "soft", class: "bg-yellow-light" },
+    { theme: "yellow", variant: "outline", class: "border-yellow-dark" },
+
+    // Green
+    { theme: "green", variant: "solid", class: "bg-green" },
+    { theme: "green", variant: "soft", class: "bg-green-light" },
+    { theme: "green", variant: "outline", class: "border-green-dark" },
+
+    // Purple
+    { theme: "purple", variant: "solid", class: "bg-purple" },
+    { theme: "purple", variant: "soft", class: "bg-purple-light" },
+    { theme: "purple", variant: "outline", class: "border-purple-dark" },
+
+    // Pink
+    { theme: "pink", variant: "solid", class: "bg-pink" },
+    { theme: "pink", variant: "soft", class: "bg-pink-light" },
+    { theme: "pink", variant: "outline", class: "border-pink-dark" },
+
+    // Teal
+    { theme: "teal", variant: "solid", class: "bg-teal" },
+    { theme: "teal", variant: "soft", class: "bg-teal-light" },
+    { theme: "teal", variant: "outline", class: "border-teal-dark" },
+
+    // Gray
+    { theme: "gray", variant: "solid", class: "bg-gray-700" },
+    { theme: "gray", variant: "soft", class: "bg-gray-200" },
+    { theme: "gray", variant: "outline", class: "border-gray-700" },
+  ],
+})

src/Dot/index.ts

@@ -0,0 +1 @@
+export * from "./Dot"

vite.config.js

@@ -4,14 +4,7 @@ import react from "@vitejs/plugin-react"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    react({
-      jsxImportSource: "@emotion/react",
-      babel: {
-        plugins: ["@emotion/babel-plugin"],
-      },
-    }),
-  ],
+  plugins: [react()],
   resolve: {
     alias: { "~": path.resolve(__dirname, "./src") },
     extensions: [".mdx", ".mjs", ".ts", ".tsx", ".js", ".jsx"],