✨ Chip

src/theme/components.ts

@@ -3,6 +3,7 @@ import { BACKGROUNDS, BLACK } from "./colors";
 import { linkClasses } from "@mui/joy/Link";
 import { TypographyOwnerState } from "@mui/joy/Typography";
 import { CardOwnerState } from "@mui/joy/Card";
+import { ChipOwnerState } from "@mui/joy/Chip";
 
 const SIZES = {
   lg: "35px",
@@ -177,4 +178,30 @@ export const components = {
       },
     },
   },
+  JoyChip: {
+    defaultProps: {
+      size: "sm",
+      variant: "soft",
+    },
+    styleOverrides: {
+      root: ({ ownerState }: { ownerState: ChipOwnerState }) => ({
+        color: BLACK,
+        fontWeight: 400,
+        lineHeight: "130%",
+        ...(ownerState.size === "sm" && {
+          borderRadius: "1rem",
+          fontSize: "1rem",
+        }),
+        ...(ownerState.size === "md" && {
+          fontSize: "1.5rem",
+          borderRadius: "1.5rem",
+        }),
+        ...(ownerState.size === "lg" && {
+          padding: "0.25rem 1rem",
+          fontSize: "2.0rem",
+          borderRadius: "2rem",
+        }),
+      }),
+    },
+  },
 };

stories/Chip.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Chip } from "./MuiComponents";
+
+const meta = {
+  title: "Atoms/Chip",
+  component: Chip,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Chip text",
+  },
+};

stories/MuiComponents.tsx

@@ -4,6 +4,7 @@
 
 import React from "react";
 import MuiButton, { ButtonProps } from "@mui/joy/Button";
+import MuiChip, { ChipProps } from "@mui/joy/Chip";
 
 type TButton = Pick<
   ButtonProps,
@@ -13,3 +14,9 @@ type TButton = Pick<
 export function Button(props: React.PropsWithChildren<TButton>) {
   return <MuiButton {...props} />;
 }
+
+type TChip = Pick<ChipProps, "color" | "size" | "variant">;
+
+export function Chip(props: React.PropsWithChildren<TChip>) {
+  return <MuiChip {...props} />;
+}