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

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

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

packages/design-system/ui/src/components/label/label.spec.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react"
+import * as React from "react"
+
+import { Label } from "./label"
+
+test("renders a label", () => {
+  render(<Label>I am a label</Label>)
+
+  const text = screen.getByText("I am a label")
+  expect(text).toBeInTheDocument()
+  expect(text.tagName).toBe("LABEL")
+})

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

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Label } from "./label"
+
+const meta: Meta<typeof Label> = {
+  title: "Components/Label",
+  component: Label,
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+      },
+      options: ["small", "xsmall", "base", "large"],
+    },
+    weight: {
+      control: {
+        type: "select",
+      },
+      options: ["regular", "plus"],
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Label>
+
+export const BaseRegular: Story = {
+  args: {
+    size: "base",
+    weight: "regular",
+    children: "I am a label",
+  },
+}
+
+export const BasePlus: Story = {
+  args: {
+    size: "base",
+    weight: "plus",
+    children: "I am a label",
+  },
+}
+
+export const LargeRegular: Story = {
+  args: {
+    size: "large",
+    weight: "regular",
+    children: "I am a label",
+  },
+}
+
+export const LargePlus: Story = {
+  args: {
+    size: "large",
+    weight: "plus",
+    children: "I am a label",
+  },
+}
+
+export const SmallRegular: Story = {
+  args: {
+    size: "small",
+    weight: "regular",
+    children: "I am a label",
+  },
+}
+
+export const SmallPlus: Story = {
+  args: {
+    size: "small",
+    weight: "plus",
+    children: "I am a label",
+  },
+}
+
+export const XSmallRegular: Story = {
+  args: {
+    size: "xsmall",
+    weight: "regular",
+    children: "I am a label",
+  },
+}

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

@@ -0,0 +1,45 @@
+"use client"
+
+import * as Primitives from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { clx } from "@/utils/clx"
+
+const labelVariants = cva("font-sans", {
+  variants: {
+    size: {
+      xsmall: "txt-compact-xsmall",
+      small: "txt-compact-small",
+      base: "txt-compact-medium",
+      large: "txt-compact-large",
+    },
+    weight: {
+      regular: "font-normal",
+      plus: "font-medium",
+    },
+  },
+  defaultVariants: {
+    size: "base",
+    weight: "regular",
+  },
+})
+
+interface LabelProps
+  extends React.ComponentPropsWithoutRef<"label">,
+    VariantProps<typeof labelVariants> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, size = "base", weight = "regular", ...props }, ref) => {
+    return (
+      <Primitives.Root
+        ref={ref}
+        className={clx(labelVariants({ size, weight }), className)}
+        {...props}
+      />
+    )
+  }
+)
+Label.displayName = "Label"
+
+export { Label }