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

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

@@ -0,0 +1,30 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Command } from "./command"
+import { Badge } from "../badge"
+
+const meta: Meta<typeof Command> = {
+  title: "Components/Command",
+  component: Command,
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Command>
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div className="w-[500px]">
+        <Command>
+          <Badge color="green">Get</Badge>
+          <code>localhost:9000/store/products</code>
+          <Command.Copy content="localhost:9000/store/products" />
+        </Command>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,25 @@
+"use client"
+
+import { Copy } from "@/components/copy"
+import { clx } from "@/utils/clx"
+import React from "react"
+
+const CommandComponent = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={clx(
+        "bg-ui-code-bg-header border-ui-code-border flex items-center rounded-lg border px-3 py-2",
+        "[&>code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const Command = Object.assign(CommandComponent, { Copy })
+
+export { Command }

packages/design-system/ui/src/components/command/index.tsx

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