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

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

@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react"
+import * as React from "react"
+
+import { Checkbox } from "./checkbox"
+
+describe("Checkbox", () => {
+  it("renders a checkbox", () => {
+    render(<Checkbox />)
+
+    expect(screen.getByRole("checkbox")).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Checkbox } from "./checkbox"
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+}
+
+export const Indeterminate: Story = {
+  args: {
+    checked: "indeterminate",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    disabled: true,
+    checked: true,
+  },
+}
+
+export const DisabledIndeterminate: Story = {
+  args: {
+    disabled: true,
+    checked: "indeterminate",
+  },
+}

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

@@ -0,0 +1,33 @@
+"use client"
+
+import { CheckMini, MinusMini } from "@medusajs/icons"
+import * as Primitives from "@radix-ui/react-checkbox"
+import * as React from "react"
+
+import { clx } from "@/utils/clx"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof Primitives.Root>,
+  React.ComponentPropsWithoutRef<typeof Primitives.Root>
+>(({ className, checked, ...props }, ref) => {
+  return (
+    <Primitives.Root
+      {...props}
+      ref={ref}
+      checked={checked}
+      className={clx(
+        "group relative inline-flex h-5 w-5 items-center justify-center outline-none ",
+        className
+      )}
+    >
+      <div className="text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base group-hover:bg-ui-bg-base-hover group-focus:!shadow-borders-interactive-with-focus group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow [&_path]:shadow-details-contrast-on-bg-interactive group-disabled:text-ui-fg-disabled group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base transition-fg h-[14px] w-[14px] rounded-[3px]">
+        <Primitives.Indicator className="absolute inset-0">
+          {checked === "indeterminate" ? <MinusMini /> : <CheckMini />}
+        </Primitives.Indicator>
+      </div>
+    </Primitives.Root>
+  )
+})
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

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

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