chore(ui,icons,ui-preset,toolbox): Move design system packages to monorepo (#5470)

packages/design-system/ui/src/components/kbd/index.ts

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

packages/design-system/ui/src/components/kbd/kbd.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Kbd } from "./kbd"
+
+const meta: Meta<typeof Kbd> = {
+  title: "Components/Kbd",
+  component: Kbd,
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Kbd>
+
+export const Default: Story = {
+  args: {
+    children: "⌘",
+  },
+}

packages/design-system/ui/src/components/kbd/kbd.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { clx } from "@/utils/clx"
+
+const Kbd = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"kbd">
+>(({ children, className, ...props }, ref) => {
+  return (
+    <kbd
+      {...props}
+      ref={ref}
+      className={clx(
+        "bg-ui-tag-neutral-bg text-ui-tag-neutral-text border-ui-tag-neutral-border inline-flex h-5 w-fit min-w-[20px] items-center justify-center rounded-md border px-1",
+        "txt-compact-xsmall-plus",
+        className
+      )}
+    >
+      {children}
+    </kbd>
+  )
+})
+Kbd.displayName = "Kbd"
+
+export { Kbd }